:root {
  color-scheme: light;
  --font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --bg-0: #f0eaf9;
  --bg-1: #ede5f8;
  --bg-2: #ffffff;
  --bg-3: #e4d8f5;
  --panel: rgba(255,255,255,.88);
  --panel-solid: #ffffff;
  --panel-2: #f5f0fc;
  --text: #18082e;
  --fg-dim: #3a1e60;
  --muted: #7060a0;
  --accent: #9C027C;
  --accent-2: #c9049c;
  --accent-violet: #7c3aed;
  --info-accent: #6d28d9;
  --info-accent-2: #8b5cf6;
  --pos: #1c7a50;
  --neg: #c21448;
  --warning: #a46306;
  --danger: #dc3545;
  --border: rgba(0,0,0,.09);
  --border-strong: rgba(0,0,0,.16);
  --shadow: 0 10px 30px rgba(0,0,0,.10);
  --shadow-xl: 0 24px 70px rgba(65,28,95,.14);
  --radius: 20px;
  --radius-lg: 24px;
  --radius-sm: 12px;
  --header-h: 64px;
  --grid: rgba(126,95,220,.15);
  --header-bg: rgba(237,229,248,.88);
  --card-glow: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84));
  --body-glow:
    radial-gradient(900px 600px at 88% -10%, rgba(156,2,124,.06), transparent 55%),
    radial-gradient(700px 500px at 8% 100%, rgba(66,34,104,.10), transparent 60%),
    var(--bg-1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-0: #0e0518;
  --bg-1: #170a26;
  --bg-2: #1f0e33;
  --bg-3: #2a1547;
  --panel: rgba(31,14,51,.84);
  --panel-solid: #1f0e33;
  --panel-2: #2a1547;
  --text: #efefe5;
  --fg-dim: #c9bfd6;
  --muted: #8a7da3;
  --info-accent: #a78bfa;
  --info-accent-2: #8b5cf6;
  --pos: #6ee0a0;
  --neg: #ff5f8e;
  --warning: #fbbf24;
  --danger: #ef4444;
  --border: rgba(239,239,229,.08);
  --border-strong: rgba(239,239,229,.18);
  --shadow: 0 10px 30px rgba(14,5,24,.6);
  --shadow-xl: 0 28px 80px rgba(10,2,19,.38);
  --grid: rgba(201,4,156,.14);
  --header-bg: rgba(23,10,38,.9);
  --card-glow:
    radial-gradient(80% 100% at 100% 0%, rgba(156,2,124,.14), transparent 64%),
    linear-gradient(180deg, rgba(42,21,71,.76), rgba(31,14,51,.91));
  --body-glow:
    radial-gradient(900px 600px at 88% -10%, rgba(156,2,124,.22), transparent 55%),
    radial-gradient(700px 500px at 8% 100%, rgba(66,34,104,.45), transparent 60%),
    linear-gradient(160deg, #13081f 0%, var(--bg-1) 52%, #1d0c30 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-family);
  font-feature-settings: "ss01", "cv11", "tnum";
  font-variant-numeric: tabular-nums;
  background: var(--body-glow);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

body::-webkit-scrollbar { width: 0; height: 0; }
body { scrollbar-width: none; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 80;
  height: var(--header-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  padding: 0 28px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  width: 35px; height: 35px; border-radius: 11px; display: grid; place-items: center;
  font-weight: 900; color: #fff; letter-spacing: -.06em;
  background: linear-gradient(145deg, var(--accent-2), var(--accent-violet));
  box-shadow: 0 7px 24px rgba(156,2,124,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.02; }
.brand-copy strong { font-size: .9rem; letter-spacing: .11em; }
.brand-copy small { color: var(--muted); font-size: .68rem; margin-top: 3px; white-space: nowrap; }
.main-nav { display: flex; gap: 6px; justify-content: flex-start; }
.nav-link { padding: 8px 12px; border-radius: 999px; color: var(--muted); font-size: .82rem; font-weight: 600; transition: .15s ease; }
.nav-link:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.nav-link.active { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--panel-2) 72%, transparent);
  color: var(--fg-dim); cursor: pointer; transition: border-color .2s, color .2s, background .2s, transform .15s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent-2); background: color-mix(in srgb, var(--accent) 10%, transparent); transform: translateY(-1px); }
.theme-icon { font-size: 1.08rem; line-height: 1; }
.user-menu { position: relative; }
.user-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--fg-dim); font-size: .78rem; }
.user-menu summary::-webkit-details-marker { display:none; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, var(--panel-2)); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border)); font-weight: 800; }
.avatar.small { width: 30px; height: 30px; font-size: .76rem; }
.user-menu-panel { position: absolute; right: 0; top: calc(100% + 12px); width: 220px; padding: 8px; background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-xl); }
.user-menu-panel a { display: block; padding: 10px 11px; border-radius: 9px; color: var(--fg-dim); font-size: .82rem; }
.user-menu-panel a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.user-menu-meta { padding: 8px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 5px; display: flex; flex-direction: column; gap: 3px; }
.user-menu-meta small { color: var(--muted); font-size: .72rem; }

.page-shell { width: 100%; max-width: 1800px; margin: 0 auto; padding: 24px 28px 80px; }
.narrow-page { max-width: 780px; }
.hero-panel {
  min-height: 220px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 28px;
  padding: 30px 34px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border)); border-radius: var(--radius-lg);
  background: radial-gradient(85% 130% at 93% 0%, rgba(124,58,237,.20), transparent 60%), var(--card-glow);
  box-shadow: var(--shadow); overflow: hidden; position: relative;
}
.hero-panel::after { content:"ATER"; position:absolute; right:-6px; bottom:-34px; font-size: 148px; font-weight: 900; letter-spacing: -.07em; opacity: .035; pointer-events:none; }
.hero-copy { position: relative; z-index: 1; max-width: 850px; }
.premium-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent-violet) 40%, transparent); background: linear-gradient(135deg, rgba(124,58,237,.17), rgba(201,4,156,.13)); color: var(--fg-dim); font-weight: 650; font-size: .72rem; }
.hero-copy h1 { margin: 15px 0 5px; font-size: clamp(2.25rem, 5vw, 4.65rem); line-height: .96; letter-spacing: -.055em; font-weight: 820; }
.hero-copy p { margin: 0; color: var(--fg-dim); font-size: clamp(.93rem, 1.3vw, 1.07rem); max-width: 720px; }
.hero-source { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--muted); font-size: .72rem; }
.hero-source span { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 14px color-mix(in srgb, var(--pos) 60%, transparent); }
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 12px; position: relative; z-index: 1; }
.hero-stat { min-width: 170px; padding: 17px 18px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--bg-0) 40%, transparent); backdrop-filter: blur(8px); }
.hero-stat small { display:block; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .59rem; font-weight: 650; }
.hero-stat strong { display:block; margin-top: 7px; font-size: 1.35rem; letter-spacing: -.035em; white-space: nowrap; }
.accent-value, .lilac-text { color: var(--info-accent) !important; }

.toolbar-panel { margin: 20px 0; padding: 10px 12px; min-height: 54px; display:flex; align-items:center; justify-content:space-between; gap:16px; background: color-mix(in srgb, var(--panel) 88%, transparent); border:1px solid var(--border); border-radius:14px; backdrop-filter: blur(12px); }
.toolbar-actions { display:flex; gap:8px; flex-wrap:wrap; }
.system-status { color: var(--muted); font-size: .73rem; text-align: right; }
.system-status strong { color: var(--fg-dim); font-weight: 600; }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--pos); box-shadow:0 0 12px color-mix(in srgb,var(--pos) 60%,transparent); }

.btn { min-height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid transparent; display: inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; font-size:.78rem; font-weight:650; transition: background .15s, transform .12s, border-color .15s, color .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { color:#fff; background: linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 6px 20px rgba(156,2,124,.24); }
.btn.primary:hover { box-shadow:0 8px 25px rgba(201,4,156,.32); }
.btn.secondary { color:var(--fg-dim); border-color:var(--border-strong); background:color-mix(in srgb,var(--panel-2) 58%,transparent); }
.btn.secondary:hover { color:var(--text); border-color:color-mix(in srgb,var(--accent) 70%,var(--border)); background:color-mix(in srgb,var(--accent) 8%,var(--panel-2)); }
.btn.danger { color:#fff; background:var(--danger); }
.btn.danger-ghost { color:var(--neg); border-color:color-mix(in srgb,var(--neg) 35%,var(--border)); background:color-mix(in srgb,var(--neg) 8%,transparent); }
.btn.full { width:100%; min-height:44px; }
.btn.tiny { min-height:30px; padding:0 10px; font-size:.7rem; }

.metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.metric-card { position:relative; min-height:144px; overflow:hidden; padding:20px 20px 17px; border:1px solid var(--border); border-radius:18px; background:var(--card-glow); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.metric-card::before { content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:linear-gradient(90deg,var(--accent-violet),var(--info-accent)); opacity:.9; }
.metric-card.lilac::before { background:linear-gradient(90deg,var(--info-accent),var(--info-accent-2)); }
.metric-label { color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:.65rem; font-weight:650; }
.metric-value { margin-top:14px; font-size:clamp(1.48rem,2.15vw,2.1rem); font-weight:730; letter-spacing:-.045em; line-height:1.04; white-space:nowrap; }
.metric-card.lilac .metric-value { color:var(--info-accent); }
.metric-meta { position:absolute; left:20px; bottom:15px; color:var(--muted); font-size:.67rem; }

.charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.charts-grid-main { grid-template-columns:minmax(0,1.72fr) minmax(330px,.83fr); }
.chart-card, .table-card, .form-card, .notice-card { background:var(--card-glow); border:1px solid var(--border); border-radius:var(--radius); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.chart-card { min-height:390px; padding:20px 22px 18px; overflow:hidden; }
.card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; }
.card-header h2 { margin:0 0 4px; font-size:1.03rem; letter-spacing:-.018em; }
.card-header p { margin:0; color:var(--muted); font-size:.7rem; line-height:1.5; }
.chart-badge { padding:5px 9px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb,var(--accent-violet) 10%,transparent); color:var(--fg-dim); font-size:.64rem; white-space:nowrap; }
.canvas-wrap { position:relative; height:270px; width:100%; overflow:hidden; }
.canvas-wrap.tall { height:310px; }
.canvas-wrap.donut { height:215px; min-width:190px; }
.canvas-wrap canvas { display:block; width:100%; height:100%; }
.donut-layout { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:300px; gap:10px; }
.donut-layout.wide { flex-direction:row; gap:25px; align-items:center; }
.compact-legend { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; }
.legend-item { display:flex; align-items:center; gap:7px; min-width:0; color:var(--muted); font-size:.66rem; }
.legend-item i { width:9px; height:9px; flex:0 0 auto; border-radius:3px; }
.legend-item span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.legend-item strong { margin-left:auto; color:var(--fg-dim); font-weight:650; }
.dfe-summary { flex:1; min-width:190px; display:grid; gap:9px; }
.dfe-row { padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.018); }
.dfe-row-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dfe-row-top span { color:var(--muted); font-size:.68rem; }
.dfe-row-top strong { font-size:.9rem; }
.dfe-row small { display:block; margin-top:5px; color:var(--muted); font-size:.62rem; }
.mini-kpis { display:flex; gap:9px; margin-top:7px; }
.mini-kpi { flex:1; padding:8px 10px; border-radius:10px; background:color-mix(in srgb,var(--panel-2) 50%,transparent); border:1px solid var(--border); }
.mini-kpi small { display:block; color:var(--muted); font-size:.61rem; }
.mini-kpi strong { display:block; margin-top:4px; font-size:.85rem; }

.notices-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.notice-card { padding:20px 22px; }
.notice-top { display:flex; justify-content:space-between; gap:15px; align-items:flex-start; }
.kicker { display:block; color:var(--muted); text-transform:uppercase; letter-spacing:.14em; font-size:.6rem; font-weight:650; margin-bottom:5px; }
.notice-card h3 { margin:0; font-size:1rem; }
.notice-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:17px; }
.notice-metrics > div { padding:11px 10px; border-radius:11px; background:color-mix(in srgb,var(--panel-2) 42%,transparent); border:1px solid var(--border); }
.notice-metrics small { display:block; color:var(--muted); font-size:.6rem; min-height:28px; line-height:1.3; }
.notice-metrics strong { display:block; margin-top:4px; font-size:.9rem; letter-spacing:-.025em; }
.status-pill, .role-pill { display:inline-flex; align-items:center; justify-content:center; min-height:25px; padding:0 9px; border-radius:999px; font-size:.62rem; font-weight:650; white-space:nowrap; }
.status-pill.success { color:var(--pos); background:color-mix(in srgb,var(--pos) 12%,transparent); border:1px solid color-mix(in srgb,var(--pos) 30%,transparent); }
.status-pill.progress { color:var(--info-accent); background:color-mix(in srgb,var(--info-accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--info-accent) 28%,transparent); }
.status-pill.off { color:var(--muted); border:1px solid var(--border); background:color-mix(in srgb,var(--panel-2) 40%,transparent); }
.role-pill.admin { color:#d8c8ff; background:rgba(124,58,237,.14); border:1px solid rgba(124,58,237,.28); }
.role-pill.user { color:var(--fg-dim); background:color-mix(in srgb,var(--panel-2) 55%,transparent); border:1px solid var(--border); }

.table-card { overflow:hidden; margin-bottom:18px; }
.table-card-header { padding:18px 20px 0; margin-bottom:14px; align-items:center; }
.table-tools { display:flex; align-items:center; gap:8px; }
.search-input, input[type="text"], input[type="password"], input[type="search"], input[type="file"], select {
  color:var(--text); background:color-mix(in srgb,var(--panel-2) 70%,transparent); border:1px solid var(--border-strong); border-radius:10px; outline:none; transition:border-color .15s, box-shadow .15s, background .15s;
}
.search-input { height:34px; padding:0 12px; min-width:210px; font-size:.75rem; }
input:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent); }
.table-wrap { overflow:auto; border-top:1px solid var(--border); scrollbar-width:thin; }
table { width:100%; min-width:820px; border-collapse:separate; border-spacing:0; background:transparent; }
th, td { padding:11px 13px; border-bottom:1px solid var(--border); text-align:left; font-size:.76rem; vertical-align:middle; }
th { position:sticky; top:0; z-index:2; background:color-mix(in srgb,var(--panel-solid) 96%,transparent); color:var(--muted); text-transform:uppercase; letter-spacing:.07em; font-size:.58rem; font-weight:650; }
tbody tr { transition:background .12s; }
tbody tr:hover { background:color-mix(in srgb,var(--accent) 6%,transparent); }
tbody tr:last-child td { border-bottom:0; }
td.num { text-align:right; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; }
.ratio-cell { display:flex; align-items:center; gap:10px; min-width:120px; }
.ratio-cell strong { min-width:48px; color:#b48cff; font-size:.72rem; }
.ratio-track { flex:1; height:4px; border-radius:999px; background:color-mix(in srgb,var(--panel-2) 78%,transparent); overflow:hidden; }
.ratio-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent-violet),var(--info-accent)); }
.segmented { display:inline-flex; padding:3px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb,var(--panel-2) 50%,transparent); }
.segment { min-width:58px; height:28px; border:0; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; font-size:.7rem; font-weight:650; }
.segment.active { color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-violet)); box-shadow:0 4px 16px rgba(156,2,124,.2); }
.int-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:0 20px 16px; }
.int-summary > div { padding:10px 12px; border:1px solid var(--border); border-radius:11px; background:color-mix(in srgb,var(--panel-2) 38%,transparent); }
.int-summary small { display:block; color:var(--muted); font-size:.59rem; text-transform:uppercase; letter-spacing:.06em; }
.int-summary strong { display:block; margin-top:5px; font-size:.9rem; }
.source-note { max-width:1100px; margin:20px auto 0; color:var(--muted); font-size:.67rem; text-align:center; line-height:1.6; }

.toast-banner { margin-bottom:14px; padding:12px 14px; border-radius:12px; font-size:.78rem; border:1px solid; animation:slideUp .25s ease; }
.toast-banner.ok, .form-message.ok { color:var(--pos); background:color-mix(in srgb,var(--pos) 10%,transparent); border-color:color-mix(in srgb,var(--pos) 35%,transparent); }
.toast-banner.error, .form-message.error { color:#ff9bb8; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.42); }
.form-message { padding:11px 12px; border-radius:10px; border:1px solid; font-size:.76rem; margin-bottom:12px; }

.modal { width:min(560px,calc(100% - 28px)); max-height:78vh; padding:0; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--panel-solid); color:var(--text); box-shadow:var(--shadow-xl); }
.modal::backdrop { background:rgba(10,4,20,.66); backdrop-filter:blur(6px); }
.modal[open] { animation:slideUp .25s ease; }
.modal-header { padding:17px 19px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.modal-header h3 { margin:0; font-size:1rem; }
.modal-body { padding:18px 19px; color:var(--fg-dim); font-size:.78rem; line-height:1.55; }
.modal-body code { color:var(--info-accent); }
.modal-footer { padding:13px 19px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }
.file-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:150px; margin-top:14px; border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--border)); border-radius:14px; background:color-mix(in srgb,var(--accent) 5%,transparent); cursor:pointer; }
.file-drop input { position:absolute; opacity:0; pointer-events:none; }
.file-drop .file-icon { font-size:1.7rem; color:var(--accent-2); margin-bottom:5px; }
.file-drop strong { color:var(--text); }
.file-drop small { margin-top:3px; color:var(--muted); }

.auth-page { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(430px,.85fr); }
.auth-visual { display:grid; place-items:center; padding:50px; position:relative; overflow:hidden; background:
  radial-gradient(circle at 22% 28%, rgba(201,4,156,.20), transparent 30%),
  radial-gradient(circle at 80% 70%, rgba(124,58,237,.22), transparent 34%),
  linear-gradient(145deg,#0e0518,#1f0e33); color:#efefe5; }
.auth-visual::after { content:""; position:absolute; width:420px; height:420px; border-radius:50%; right:-180px; top:-140px; border:1px solid rgba(255,255,255,.06); box-shadow:0 0 0 60px rgba(255,255,255,.012),0 0 0 120px rgba(255,255,255,.008); }
.auth-visual-inner { max-width:700px; position:relative; z-index:1; }
.auth-visual h1 { margin:22px 0 14px; font-size:clamp(3rem,6vw,6.7rem); line-height:.9; letter-spacing:-.07em; }
.auth-visual h1 span { color:#bc92ff; }
.auth-visual p { max-width:580px; color:#c9bfd6; font-size:1rem; line-height:1.6; }
.auth-orbs { display:flex; gap:12px; margin-top:42px; }
.auth-orbs i { width:46px; height:8px; border-radius:999px; background:linear-gradient(90deg,var(--accent-2),var(--accent-violet)); opacity:.82; }
.auth-orbs i:nth-child(2) { width:22px; opacity:.55; }.auth-orbs i:nth-child(3) { width:10px; opacity:.3; }
.auth-panel { display:grid; place-items:center; padding:34px; background:var(--body-glow); }
.auth-card { width:min(420px,100%); }
.auth-logo { display:flex; align-items:center; gap:10px; margin-bottom:46px; }
.auth-logo > div { display:flex; flex-direction:column; line-height:1.1; }.auth-logo strong{letter-spacing:.11em}.auth-logo small{color:var(--muted);font-size:.7rem;margin-top:3px}
.auth-heading h2 { margin:0 0 6px; font-size:2rem; letter-spacing:-.045em; }.auth-heading p{margin:0 0 25px;color:var(--muted);font-size:.82rem}
.form-stack { display:flex; flex-direction:column; gap:14px; }
.form-stack label { display:flex; flex-direction:column; gap:7px; color:var(--fg-dim); font-size:.73rem; font-weight:600; }
.form-stack label small { color:var(--muted); font-weight:400; font-size:.65rem; }
.form-stack input:not([type="hidden"]), .form-stack select { width:100%; min-height:44px; padding:0 12px; }
.password-wrap { position:relative; }
.password-wrap input { padding-right:54px !important; }
.password-toggle { position:absolute; right:7px; top:50%; transform:translateY(-50%); height:30px; padding:0 8px; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:.68rem; }
.auth-foot { display:block; margin-top:20px; color:var(--muted); text-align:center; font-size:.65rem; }
.setup-page { min-height:100vh; display:grid; place-items:center; padding:26px; }
.setup-card { width:min(650px,100%); padding:34px; border-radius:var(--radius-lg); background:var(--card-glow); border:1px solid var(--border); box-shadow:var(--shadow-xl); }
.setup-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; margin-bottom:18px; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-violet)); box-shadow:0 10px 30px rgba(156,2,124,.28); }
.setup-card h1 { margin:0 0 8px; font-size:2rem; letter-spacing:-.045em; }.setup-card>p{color:var(--muted);font-size:.82rem;line-height:1.6;margin:0 0 24px}
.form-grid.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:5px; }
.form-card { padding:22px; }
.page-title-row { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:18px; }
.page-title-row h1 { margin:0 0 4px; font-size:2.2rem; letter-spacing:-.05em; }.page-title-row p{margin:0;color:var(--muted);font-size:.8rem}
.user-cell { display:flex; align-items:center; gap:9px; }.user-cell>div{display:flex;flex-direction:column;gap:2px}.user-cell small{color:var(--muted);font-size:.65rem}
.must-change { display:block; margin-top:4px; color:var(--warning); font-size:.6rem; }
.row-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }.inline-form{display:inline-flex}.muted{color:var(--muted)}

.reveal { opacity:0; transform:translateY(16px) scale(.995); transition:opacity .55s ease, transform .55s ease; }
.reveal.visible, .static-visible { opacity:1; transform:none; }
@keyframes slideUp { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes pulseDot { 0%,100%{opacity:.7}50%{opacity:1;box-shadow:0 0 16px currentColor} }

@media (max-width: 1200px) {
  .metrics-grid { grid-template-columns:repeat(2,1fr); }
  .charts-grid-main { grid-template-columns:1fr 1fr; }
  .notice-metrics { grid-template-columns:1fr 1fr; }
}
@media (max-width: 1024px) {
  :root { --header-h:58px; }
  .app-header { padding:0 18px; gap:15px; }
  .page-shell { padding:18px 18px 64px; }
  .hero-panel { grid-template-columns:1fr; min-height:auto; padding:24px; }
  .hero-stats { max-width:500px; }
  .hero-panel::after { font-size:110px; }
  .charts-grid, .charts-grid-main { grid-template-columns:1fr; }
  .chart-card { min-height:350px; }
  .notices-grid { grid-template-columns:1fr; }
  .donut-layout.wide { flex-direction:row; }
  .auth-page { grid-template-columns:1fr; }
  .auth-visual { min-height:34vh; padding:40px 30px; }
  .auth-visual h1 { font-size:clamp(2.8rem,8vw,5rem); }
  .auth-panel { padding:48px 24px; }
  .auth-logo { margin-bottom:28px; }
}
@media (max-width: 768px) {
  :root { --header-h:52px; }
  .app-header { grid-template-columns:auto 1fr auto; padding:0 12px; }
  .brand-mark { width:32px;height:32px;border-radius:10px; }.brand-copy strong{font-size:.78rem}.brand-copy small{display:none}
  .main-nav { justify-content:center; }.nav-link{padding:7px 9px;font-size:.72rem}.user-name{display:none}
  .page-shell { padding:14px 12px 54px; }
  .hero-panel { border-radius:20px; padding:21px 18px; }
  .hero-copy h1 { font-size:clamp(2.1rem,10vw,3.3rem); }
  .hero-stats { grid-template-columns:1fr 1fr; width:100%; max-width:none; }
  .hero-stat { min-width:0; padding:14px; }.hero-stat strong{font-size:1.08rem}
  .toolbar-panel { align-items:flex-start; flex-direction:column; }.system-status{text-align:left}
  .metrics-grid { gap:10px; }.metric-card{min-height:126px;padding:17px}.metric-meta{left:17px;bottom:13px}.metric-value{font-size:1.45rem}
  .chart-card { padding:17px 16px; min-height:330px; }.canvas-wrap{height:230px}.canvas-wrap.tall{height:260px}
  .compact-legend { grid-template-columns:1fr; }
  .donut-layout.wide { flex-direction:column; }.dfe-summary{width:100%;grid-template-columns:1fr 1fr}
  .notice-card{padding:17px}.notice-metrics{gap:8px}
  .int-summary { grid-template-columns:1fr 1fr; padding:0 14px 14px; }
  .table-card-header { padding:15px 14px 0; flex-direction:column; align-items:stretch; }.search-input{width:100%;min-width:0}
  .form-grid.two { grid-template-columns:1fr; }
  .page-title-row { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 540px) {
  .main-nav .nav-link:not(.active) { display:none; }
  .header-actions { gap:6px; }.icon-btn{width:34px;height:34px}.avatar{width:32px;height:32px}
  .hero-stats { grid-template-columns:1fr; }.hero-stat{display:flex;align-items:center;justify-content:space-between;gap:12px}.hero-stat strong{margin-top:0}
  .metrics-grid { grid-template-columns:1fr; }
  .metric-card { min-height:116px; }
  .metric-value { margin-top:11px; }
  .canvas-wrap { height:210px; }.canvas-wrap.tall{height:240px}
  .mini-kpis { flex-direction:column; }
  .notice-metrics { grid-template-columns:1fr 1fr; }
  .dfe-summary { grid-template-columns:1fr; }
  .int-summary { grid-template-columns:1fr 1fr; gap:7px; }
  .table-wrap { border-top:0; overflow:visible; }
  table { min-width:0; display:block; padding:0 10px 10px; }
  thead { display:none; }
  tbody { display:block; }
  tr { display:block; margin-bottom:10px; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:color-mix(in srgb,var(--panel-2) 25%,transparent); }
  td { display:flex; justify-content:space-between; align-items:center; gap:14px; text-align:right !important; padding:10px 12px; font-size:.72rem; }
  td::before { content:attr(data-label); color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-size:.56rem; text-align:left; }
  td:first-child { align-items:flex-start; }
  td:first-child strong { max-width:68%; text-align:right; }
  .ratio-cell { width:55%; }
  .auth-visual { display:none; }.auth-panel{min-height:100vh;padding:26px 18px}.auth-card{max-width:410px}
  .setup-card { padding:23px 18px; }
  .modal-footer { flex-direction:column-reverse; }.modal-footer .btn{width:100%}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}
.inline-link { color: var(--info-accent); font-weight: 650; text-decoration: underline; text-decoration-color: color-mix(in srgb,var(--info-accent) 45%,transparent); text-underline-offset: 3px; }
.inline-link:hover { color: var(--text); }
.metric-footer { position:absolute; left:20px; right:20px; bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.metric-footer .metric-meta { position:static; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.metric-badge { flex:0 0 auto; padding:3px 7px; border-radius:999px; color:var(--info-accent); background:color-mix(in srgb,var(--info-accent) 9%,transparent); border:1px solid color-mix(in srgb,var(--info-accent) 22%,transparent); font-size:.58rem; font-weight:700; }
@media (max-width:768px){ .metric-footer{left:17px;right:17px;bottom:12px}.metric-badge{font-size:.55rem} }