:root {
  color-scheme: dark;
  --bg: #0b0b0c;
  --bg-2: #111214;
  --glass: rgba(255,255,255,0.09);
  --glass-strong: rgba(255,255,255,0.14);
  --border: rgba(255,255,255,0.18);
  --text: rgba(255,255,255,0.96);
  --muted: rgba(255,255,255,0.62);
  --soft: rgba(255,255,255,0.38);
  --shadow: 0 20px 80px rgba(0,0,0,0.45);
  --radius: 28px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at top left, #1b1c20 0%, var(--bg) 45%), linear-gradient(180deg, #0a0a0b 0%, #101114 100%); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
body { overflow-x: hidden; }
.noise { position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 12px 12px; opacity: .18; mix-blend-mode: soft-light; }
.shell { width: min(1440px, calc(100vw - 48px)); margin: 0 auto; padding: 32px 0 56px; }
.glass { background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08)); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); }
.hero { display: grid; grid-template-columns: 1.5fr 0.9fr; gap: 32px; padding: 36px; border-radius: 36px; position: relative; overflow: hidden; }
.hero::after, .panel::after, .stat::after { content: ''; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.08)); mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); padding: 1px; mask-composite: exclude; -webkit-mask-composite: xor; }
.eyebrow { margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; }
h1 { margin: 0; font-size: clamp(40px, 7vw, 76px); line-height: .95; letter-spacing: -0.05em; }
.hero-copy { margin: 18px 0 0; max-width: 62ch; color: var(--muted); font-size: 17px; line-height: 1.6; }
.hero-actions { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; border-radius: 999px; text-decoration: none; font-weight: 600; letter-spacing: -0.02em; transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: rgba(255,255,255,0.92); color: #0d0d0f; }
.button.secondary { background: rgba(255,255,255,0.08); color: var(--text); border: 1px solid rgba(255,255,255,0.16); }
.top-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 20px; }
.stat, .panel { position: relative; border-radius: var(--radius); overflow: hidden; }
.stat { padding: 24px; min-height: 162px; display: flex; flex-direction: column; justify-content: space-between; }
.stat .label { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; }
.stat .value { font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: -0.05em; }
.stat .meta { color: var(--soft); font-size: 14px; }
.pulse::before { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; top: -100px; right: -40px; background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%); filter: blur(8px); }
.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.panel { padding: 26px; }
.panel.wide { grid-column: 1 / -1; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-head h2, .event-columns h3 { margin: 4px 0 0; letter-spacing: -0.04em; }
.timestamp, .note-chip { color: var(--muted); font-size: 13px; white-space: nowrap; }
.note-chip { border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,0.06); }
.overview-list, .settings-grid { display: grid; gap: 12px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08); }
.row span { color: var(--muted); }
.row strong { color: var(--text); font-weight: 600; text-align: right; }
.meter-group { display: grid; gap: 20px; }
.meter-label { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 10px; }
.meter { height: 14px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.08); }
.meter > div { height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, rgba(255,255,255,0.85), rgba(255,255,255,0.35)); transition: width .45s ease; }
.notes { margin-top: 18px; color: var(--muted); line-height: 1.6; }
.event-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.event-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.event-list li { padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: var(--muted); }
.event-list .event-title { display: block; color: var(--text); font-weight: 600; margin-bottom: 4px; }
.event-list .event-meta { font-size: 13px; color: var(--soft); }
.settings-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.setting-card { padding: 18px; border-radius: 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); min-height: 120px; }
.setting-card .setting-name { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; margin-bottom: 14px; }
.setting-card .setting-value { display: block; font-size: 28px; line-height: 1.05; letter-spacing: -0.04em; }
.setting-card .setting-detail { display: block; margin-top: 12px; color: var(--soft); font-size: 13px; }
@media (max-width: 1100px) { .hero, .top-grid, .content-grid, .event-columns, .settings-grid { grid-template-columns: 1fr 1fr; } .hero-actions { justify-content: flex-start; } }
@media (max-width: 760px) { .shell { width: min(100vw - 24px, 100%); padding-top: 16px; } .hero, .top-grid, .content-grid, .event-columns, .settings-grid { grid-template-columns: 1fr; } .hero { padding: 24px; } h1 { font-size: 42px; } .panel, .stat { padding: 20px; } }