:root {
    --bg: #06070b;
    --bg-soft: #0c1018;
    --panel: rgba(14, 19, 31, 0.88);
    --panel-strong: #111827;
    --line: rgba(255,255,255,0.08);
    --text: #f3f6ff;
    --muted: #94a3b8;
    --primary: #7c9cff;
    --cyan: #63d9ff;
    --violet: #8b5cf6;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --radius: 18px;
    --shadow: 0 20px 50px rgba(0,0,0,0.38);
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top right, rgba(99,217,255,0.08), transparent 28%),
        radial-gradient(circle at top left, rgba(139,92,246,0.12), transparent 22%),
        linear-gradient(180deg, #05060a 0%, #080b13 45%, #070910 100%);
}
.auth-body { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
code { color: #dbeafe; }
.app-grid { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
.sidebar {
    background: rgba(7, 10, 18, 0.92);
    border-right: 1px solid var(--line);
    padding: 24px 18px;
    display: flex; flex-direction: column; gap: 24px;
    position: sticky; top: 0; height: 100vh;
    backdrop-filter: blur(18px);
}
.brand-card {
    display: flex; align-items: center; gap: 14px; padding: 14px;
    border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    box-shadow: var(--shadow);
}
.brand-card p, .muted { color: var(--muted); }
.brand-mark {
    width: 18px; height: 18px; border-radius: 8px;
    background: linear-gradient(135deg, var(--cyan), var(--violet));
    box-shadow: 0 0 24px rgba(99,217,255,0.4);
}
.sidebar-nav { display: flex; flex-direction: column; gap: 8px; }
.sidebar-nav a {
    padding: 12px 14px; border-radius: 14px; color: #c8d3e4; border: 1px solid transparent;
}
.sidebar-nav a:hover, .sidebar-nav a.is-active { background: rgba(124,156,255,0.1); border-color: rgba(124,156,255,0.18); color: white; }
.sidebar-foot { margin-top: auto; padding: 14px; border-top: 1px solid var(--line); }
.main-area { padding: 24px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 20px; }
.topbar h1 { margin: 0; font-size: 30px; }
.topbar-actions { display:flex; align-items:center; gap:12px; }
.user-chip {
    display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--line); border-radius:999px; background: rgba(255,255,255,0.03);
}
.user-dot { width:10px; height:10px; border-radius:50%; background: linear-gradient(135deg, var(--cyan), var(--primary)); box-shadow: 0 0 16px rgba(99,217,255,.4); }
.content-area { display:flex; flex-direction:column; gap:20px; }
.panel, .stat-card, .auth-panel {
    background: var(--panel);
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}
.panel { padding: 18px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.panel-head h2 { margin:0; font-size:18px; }
.stats-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; }
.stat-card { padding:18px; }
.stat-card span { color: var(--muted); display:block; margin-bottom: 10px; }
.stat-card strong { font-size:32px; }
.panel-grid.two-columns, .detail-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:20px; }
.button {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border-radius: 12px; padding: 11px 16px; border: 1px solid var(--line); cursor:pointer;
    background: rgba(255,255,255,0.04); color: var(--text);
}
.button.primary { background: linear-gradient(135deg, rgba(124,156,255,.28), rgba(99,217,255,.18)); border-color: rgba(124,156,255,.24); }
.button.ghost { background: rgba(255,255,255,.03); }
.button.sm { padding: 8px 12px; border-radius: 10px; }
.field, .stack-lg { display:flex; flex-direction:column; gap:10px; }
.stack-lg { gap:16px; }
input, select {
    width:100%; background: rgba(255,255,255,.03); color: var(--text); border:1px solid var(--line); border-radius: 12px; padding: 12px 14px; outline:none;
}
.auth-wrap { min-height:100vh; display:grid; place-items:center; padding: 24px; }
.auth-panel { width:min(460px, 100%); padding: 28px; }
.auth-meta { margin-top: 18px; padding-top: 18px; border-top:1px solid var(--line); color:var(--muted); display:flex; justify-content:space-between; gap:12px; }
.filters-row, .filters-grid { display:grid; gap:12px; margin-bottom:16px; }
.filters-row { grid-template-columns: 2fr 1fr auto; }
.filters-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.data-table { width:100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align:left; padding: 14px 10px; border-bottom:1px solid rgba(255,255,255,.06); vertical-align: top; }
.data-table th { color: #b9c5d8; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.badge { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; border:1px solid transparent; }
.badge.success { background: rgba(16,185,129,.12); color:#86efac; }
.badge.warning { background: rgba(245,158,11,.12); color:#fcd34d; }
.badge.info { background: rgba(96,165,250,.12); color:#93c5fd; }
.badge.accent { background: rgba(139,92,246,.14); color:#c4b5fd; }
.badge.danger { background: rgba(239,68,68,.12); color:#fca5a5; }
.badge.muted { background: rgba(148,163,184,.12); color:#cbd5e1; }
.timeline { display:flex; flex-direction:column; gap:12px; }
.timeline-item { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px; border:1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
.timeline-item p { margin:4px 0 0; color: var(--muted); }
.timeline-meta { text-align:right; color: var(--muted); }
.chart-bars { display:flex; flex-direction:column; gap:12px; }
.bar-row { display:grid; grid-template-columns: 180px 1fr 48px; gap:12px; align-items:center; }
.bar-track { height: 10px; background: rgba(255,255,255,.05); border-radius:999px; overflow:hidden; }
.bar-fill { height:100%; border-radius:999px; background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: 0 0 16px rgba(99,217,255,.35); }
.detail-list { display:grid; gap:12px; }
.detail-list.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.detail-list > div { padding:12px 14px; border-radius:14px; background: rgba(255,255,255,.03); border:1px solid var(--line); }
.detail-list span { display:block; color: var(--muted); margin-bottom:6px; }
.chips { display:flex; gap:10px; flex-wrap:wrap; }
.chip { padding:8px 12px; border-radius:999px; background: rgba(255,255,255,.04); border:1px solid var(--line); }
.alert { padding: 12px 14px; border-radius: 12px; margin: 16px 0; }
.alert.danger { background: rgba(239,68,68,.12); color:#fca5a5; border:1px solid rgba(239,68,68,.2); }
.compact .brand-mark { width:16px; height:16px; }
@media (max-width: 1180px) {
    .stats-grid, .panel-grid.two-columns, .detail-grid, .filters-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
    .app-grid { grid-template-columns: 1fr; }
    .sidebar { position: relative; height: auto; }
    .stats-grid, .panel-grid.two-columns, .detail-grid, .filters-grid, .filters-row { grid-template-columns: 1fr; }
    .topbar { flex-direction: column; align-items: flex-start; }
}
textarea { width:100%; background: rgba(255,255,255,.03); color: var(--text); border:1px solid var(--line); border-radius: 12px; padding: 12px 14px; outline:none; resize: vertical; }
.form-grid { display:grid; gap:12px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.checkbox-grid { display:flex; flex-wrap:wrap; gap:10px; }
.check-chip { display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); }
.platform-icon { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; background: linear-gradient(135deg, rgba(124,156,255,.25), rgba(99,217,255,.14)); border:1px solid rgba(124,156,255,.25); color:#dbeafe; font-size:10px; font-weight:700; letter-spacing:.08em; vertical-align:middle; margin-right:6px; }
.mini-kpi-row { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.mini-kpi { padding:14px; border:1px solid var(--line); border-radius:14px; background: rgba(255,255,255,.03); }
.mini-kpi span { display:block; color:var(--muted); margin-bottom:8px; }
.mini-kpi strong { font-size:24px; }
.review-inline { display:grid; grid-template-columns: 76px 120px 1fr auto; gap:8px; align-items:center; }
.alert.success { background: rgba(16,185,129,.12); color:#86efac; border:1px solid rgba(16,185,129,.2); }
@media (max-width: 1180px) { .form-grid.two, .form-grid.three, .mini-kpi-row { grid-template-columns: 1fr; } .review-inline { grid-template-columns: 1fr; } }

.section-top { margin-top: 18px; }
.actions-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top: 4px; }
.button.danger-soft { background: rgba(239,68,68,.08); color:#fca5a5; border-color: rgba(239,68,68,.18); }
.inline-code { display:block; padding:12px 14px; border-radius:12px; background: rgba(255,255,255,.03); border:1px solid var(--line); overflow:auto; }
.empty-state { padding: 18px; border:1px dashed rgba(255,255,255,.12); border-radius:14px; color: var(--muted); background: rgba(255,255,255,.02); }
.data-table.compact td code { white-space: nowrap; }