/* Xray-прокси admin page — scoped styles. Only xray-prefixed classes here;
   .btn, .panel, .data-table, .status-badge, .page-head, .empty-state, .config-status,
   .info-list, .form-grid, .check-row, .check-inline, .field are global (styles.css / figma-system.css). */

@keyframes xray-spin { to { transform: rotate(360deg); } }
.xray-spin { animation: xray-spin .8s linear infinite; display: inline-block; }

.xray-status-panel .panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }

.xray-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 4px; }
.xray-status-item { display: grid; gap: 5px; }
.xray-status-item > span { color: var(--text-soft); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.xray-status-item strong { font-size: 14px; line-height: 1.4; font-weight: 750; }

.xray-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.xray-check-message { flex: 1 1 100%; margin: 2px 0 0; font-size: 12px; color: var(--text-soft); }

.xray-status-note { display: flex; align-items: center; gap: 8px; padding: 11px; border-radius: 7px; background: var(--surface-2); color: var(--text-soft); font-size: 12px; font-weight: 750; }
.xray-status-note svg { width: 17px; flex: none; }
.xray-status-note-error { background: var(--coral-soft); color: var(--coral); }

.xray-subscription-info { margin: 0 0 6px; font-size: 13px; color: var(--text); }
.xray-subscription-info strong { overflow-wrap: anywhere; }

.xray-node-active td { background: var(--primary-soft); }
.xray-node-active td:first-child { border-left: 3px solid var(--primary); }

@media (max-width: 720px) {
  .xray-status-grid { grid-template-columns: 1fr; }
}