:root {
    --analytics-surface: #111827;
    --analytics-surface-raised: #0f172a;
    --analytics-border: rgba(148, 163, 184, .24);
    --analytics-muted: #94a3b8;
    --analytics-accent: #22d3ee;
}

.analytics-workspace {
    color: #e2e8f0;
    background: radial-gradient(1000px 500px at 10% -10%, rgba(34, 211, 238, .14), transparent 60%), linear-gradient(180deg, #07101f, #0f172a 55%, #07101f);
}

.analytics-card {
    background: rgba(17, 24, 39, .9);
    border: 1px solid var(--analytics-border);
    border-radius: 1rem;
    box-shadow: 0 16px 40px rgba(2, 6, 23, .28);
}

.analytics-metric-card {
    background: rgba(15, 23, 42, .86);
    border: 1px solid var(--analytics-border);
    border-radius: .8rem;
    padding: 1rem;
}

.analytics-state {
    border: 1px solid var(--analytics-border);
    border-radius: .75rem;
    padding: .85rem 1rem;
}

.analytics-state[data-state="loading"] { color: #bae6fd; background: rgba(8, 47, 73, .55); }
.analytics-state[data-state="partial"] { color: #fef3c7; background: rgba(69, 26, 3, .58); border-color: rgba(245, 158, 11, .65); }
.analytics-state[data-state="insufficient"],
.analytics-state[data-state="not_measured"] { color: #cbd5e1; background: rgba(30, 41, 59, .68); }
.analytics-state[data-state="error"] { color: #fee2e2; background: rgba(69, 10, 10, .58); border-color: rgba(248, 113, 113, .65); }
.analytics-state[data-state="empty"] { color: #cbd5e1; background: rgba(15, 23, 42, .7); }

.analytics-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.analytics-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.analytics-table th, .analytics-table td { padding: .7rem .75rem; border-bottom: 1px solid rgba(71, 85, 105, .55); text-align: left; vertical-align: top; }
.analytics-table th { color: #a5f3fc; font-weight: 600; }

.analytics-progress-chart {
    min-height: 15rem;
    display: flex;
    align-items: end;
    gap: clamp(.3rem, 1vw, .75rem);
    padding: 1rem 1rem 2.25rem;
    border: 1px solid var(--analytics-border);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(15, 23, 42, .72), rgba(2, 6, 23, .9));
    overflow-x: auto;
}

.analytics-progress-column {
    position: relative;
    flex: 1 0 1.4rem;
    max-width: 3.5rem;
    min-height: .25rem;
    border-radius: .5rem .5rem .2rem .2rem;
    background: linear-gradient(180deg, #22d3ee, #0e7490);
    box-shadow: 0 0 1.25rem rgba(34, 211, 238, .18);
}

.analytics-progress-column[data-baseline="true"] { background: linear-gradient(180deg, #a78bfa, #6d28d9); }
.analytics-progress-column > span { position: absolute; left: 50%; bottom: -1.7rem; transform: translateX(-50%); color: #94a3b8; font-size: .65rem; white-space: nowrap; }

.analytics-dialog {
    width: min(68rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 1.25rem;
    overflow: auto;
    border: 1px solid rgba(34, 211, 238, .35);
    border-radius: 1rem;
    background: #0f172a;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .65);
}

.analytics-dialog::backdrop { background: rgba(2, 6, 23, .78); backdrop-filter: blur(4px); }
.analytics-evidence-row { border: 1px solid var(--analytics-border); background: rgba(15, 23, 42, .72); border-radius: .75rem; padding: .75rem; }

.analytics-skip-link { position:fixed; z-index:10000; top:.5rem; left:.5rem; transform:translateY(-150%); padding:.65rem .9rem; border-radius:.5rem; color:#fff; background:#0e7490; }
.analytics-skip-link:focus { transform:translateY(0); }
.analytics-family-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:0 auto 1.25rem; padding:.5rem; width:max-content; max-width:100%; border:1px solid var(--analytics-border); border-radius:999px; background:rgba(15,23,42,.82); box-shadow:0 10px 30px rgba(2,6,23,.24); }
.analytics-family-nav a { color:#bae6fd; padding:.45rem .8rem; border-radius:999px; font-size:.875rem; font-weight:600; }
.analytics-family-nav a:hover { color:#fff; background:rgba(14,116,144,.55); }
.analytics-control-target { min-height:2.5rem; }
.analytics-page-shell canvas { max-width:100%; }
.analytics-page-shell .chart-container, .analytics-page-shell .analytics-card { border-color:var(--analytics-border); }

@media (max-width: 640px) {
    .analytics-table th, .analytics-table td { padding: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
    .analytics-workspace *, .analytics-workspace *::before, .analytics-workspace *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}