:root {
  --bg-0: #050814;
  --bg-1: #0b1022;
  --bg-2: #121934;
  --text-0: #f5f8ff;
  --text-1: #c2cce6;
  --text-2: #8f9cbf;
  --line: rgba(167, 186, 255, 0.22);
  --line-strong: rgba(177, 198, 255, 0.35);
  --primary: #6ea8ff;
  --primary-strong: #4b8dff;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #fb7185;
  --shadow-lg: 0 18px 46px rgba(3, 8, 25, 0.45);
  --shadow-sm: 0 8px 24px rgba(3, 8, 25, 0.28);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
}

body {
  background:
    radial-gradient(circle at 12% 12%, rgba(84, 120, 255, 0.17), transparent 40%),
    radial-gradient(circle at 88% 0%, rgba(72, 224, 196, 0.13), transparent 36%),
    radial-gradient(circle at 50% 110%, rgba(146, 102, 255, 0.2), transparent 38%),
    linear-gradient(180deg, var(--bg-2), var(--bg-0));
  color: var(--text-0);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.05;
}

.ui-page { display: grid; gap: var(--space-4); }
.ui-page-header { display:flex; justify-content:space-between; gap:var(--space-3); align-items:flex-start; flex-wrap:wrap; }
.ui-title { margin:0; font-size:1.75rem; line-height:1.1; font-weight:750; letter-spacing:-0.02em; }
.ui-subtitle { margin:0.45rem 0 0; color:var(--text-1); max-width:64ch; }
.ui-actions { display:flex; gap:var(--space-2); align-items:center; flex-wrap: wrap; }

.ui-card,
.ui-panel,
.ui-glass {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(17, 25, 49, 0.9), rgba(8, 13, 29, 0.82));
  box-shadow: var(--shadow-sm);
}
.ui-glass {
  background: linear-gradient(140deg, rgba(26, 37, 70, 0.62), rgba(10, 16, 34, 0.55));
  backdrop-filter: blur(8px);
}
.ui-card-body { padding: var(--space-4); }

.ui-grid { display:grid; gap:var(--space-3); }
.ui-grid.cards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.ui-btn { border:1px solid var(--line); background:rgba(255,255,255,0.02); color:var(--text-0); border-radius:12px; padding:0.62rem 1rem; font-weight:600; display:inline-flex; align-items:center; gap:0.55rem; text-decoration:none; }
.ui-btn:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.ui-btn:focus-visible, .ui-input:focus-visible, .ui-select:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--primary), white 15%);
  outline-offset: 2px;
}
.ui-btn-primary { background:linear-gradient(135deg, var(--primary), var(--primary-strong)); border-color:transparent; color:#041128; }
.ui-btn-danger { border-color: color-mix(in oklab, var(--danger), white 30%); color: #ffdce3; }
.ui-btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

.ui-badge { display:inline-flex; align-items:center; gap:0.35rem; border-radius:999px; padding:0.3rem 0.65rem; font-size:0.75rem; font-weight:700; letter-spacing:0.01em; border:1px solid transparent; }
.ui-badge.success { background:rgba(52,211,153,0.13); color:#9ff3cf; border-color:rgba(52,211,153,0.35); }
.ui-badge.warning { background:rgba(251,191,36,0.13); color:#fde59e; border-color:rgba(251,191,36,0.36); }
.ui-badge.danger { background:rgba(251,113,133,0.12); color:#ffc2cd; border-color:rgba(251,113,133,0.35); }
.ui-badge.info { background:rgba(110,168,255,0.14); color:#cae2ff; border-color:rgba(110,168,255,0.42); }
.ui-badge.neutral { background:rgba(163,174,208,0.12); color:#d0daf3; border-color:rgba(163,174,208,0.4); }

.ui-chip-row { display:flex; flex-wrap:wrap; gap:0.45rem; }

.ui-table-wrap { overflow:auto; border-radius: var(--radius-md); }
.ui-table { width:100%; border-collapse:separate; border-spacing:0; min-width: 640px; }
.ui-table th, .ui-table td { padding:0.9rem 1rem; text-align:left; border-bottom:1px solid rgba(167,186,255,0.12); }
.ui-table th { color:var(--text-1); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; }
.ui-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.ui-table.sticky-head thead th { position: sticky; top: 0; backdrop-filter: blur(10px); background: rgba(8, 12, 24, 0.88); z-index: 1; }

.ui-input, .ui-select, .ui-textarea, .ui-file {
  width:100%; background:rgba(5,10,22,0.8); border:1px solid var(--line); border-radius:12px; color:var(--text-0); padding:0.65rem 0.8rem;
}
.ui-input::placeholder { color: var(--text-2); }
.ui-help { color:var(--text-2); font-size:0.84rem; }
.ui-error { color:#ffb0bd; font-size:0.84rem; margin-top:0.3rem; }

.ui-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
.ui-form-grid .full { grid-column:1/-1; }

.ui-alert { border-radius: 12px; border:1px solid; padding:0.75rem 1rem; font-size:0.92rem; }
.ui-alert.success { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.1); color:#b0f8dc; }
.ui-alert.error { border-color: rgba(251,113,133,.45); background: rgba(251,113,133,.12); color:#ffd0d8; }

.ui-split { display:grid; grid-template-columns: 330px minmax(0,1fr); gap:var(--space-3); }
.ui-list-item { display:block; border:1px solid transparent; border-radius:12px; padding:0.8rem; color:inherit; text-decoration:none; }
.ui-list-item:hover, .ui-list-item.active { border-color: var(--line); background: rgba(255,255,255,0.03); }

.ui-tabs { display:flex; gap:0.4rem; padding:0.4rem; border:1px solid var(--line); border-radius: 13px; width:fit-content; background:rgba(10,15,30,0.8); }
.ui-tab { border-radius:9px; padding:0.42rem 0.75rem; color:var(--text-1); text-decoration:none; }
.ui-tab.active { background:rgba(110,168,255,.18); color:#e8f2ff; }

.ui-empty { text-align:center; padding:2.1rem 1.2rem; display:grid; justify-items:center; gap:0.7rem; }
.ui-empty-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(110,168,255,.14); color:#d6e7ff; border:1px solid rgba(110,168,255,.35); }
.ui-muted { color:var(--text-2); }
.ui-meta { font-size:0.86rem; color:var(--text-2); }

@media (max-width: 980px) {
  .ui-split { grid-template-columns: 1fr; }
  .ui-form-grid { grid-template-columns:1fr; }
}