:root {
  color-scheme: dark;
  font-family: Inter, "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  color: #f3f7ed;
  background: #08120f;
  font-synthesis: none;
  line-height: 1.55;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 88% 3%, rgb(190 255 92 / 10%), transparent 30rem), #08120f; }
a { color: inherit; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.wordmark { color: #f3f7ed; font-size: .88rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; }
.app-header { width: min(1280px, calc(100% - 48px)); height: 82px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #26332e; }
.header-actions { display: flex; align-items: center; gap: 30px; }
.app-nav { display: flex; align-items: center; gap: 4px; }
.app-nav a { padding: 8px 11px; border-radius: 7px; color: #82958b; font-size: .78rem; font-weight: 750; text-decoration: none; }
.app-nav a:hover { color: #eef5f0; background: #14231c; }
.app-nav a[aria-current="page"] { color: #132008; background: #c7ff66; }
.account { display: flex; align-items: center; gap: 20px; color: #91a49a; font-size: .84rem; }
.text-button { padding: 0; border: 0; color: #d4e3da; background: transparent; cursor: pointer; text-decoration: underline; text-underline-offset: 5px; }
.dashboard { width: min(1280px, calc(100% - 48px)); margin: auto; padding: 72px 0 96px; }
.dashboard-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: end; }
.eyebrow, .panel-index { margin: 0 0 14px; color: #c7ff66; font: 800 .7rem/1.2 ui-monospace, monospace; letter-spacing: .17em; }
h1 { margin: 0; font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: .98; letter-spacing: -.065em; }
.lead { max-width: 680px; margin: 26px 0 0; color: #94a79d; }
.range-form { padding: 20px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; border: 1px solid #2b3933; border-radius: 15px; background: #0d1a15; }
.range-form label, .form-stack label { display: grid; gap: 7px; color: #8fa197; font-size: .75rem; font-weight: 700; }
input { min-height: 45px; padding: 0 12px; border: 1px solid #35483f; border-radius: 7px; color: #eef5f0; background: #08120f; }
input:focus { border-color: #c7ff66; outline: 2px solid rgb(199 255 102 / 18%); }
.primary { min-height: 45px; padding: 0 20px; border: 0; border-radius: 7px; color: #132008; background: #c7ff66; font-weight: 850; cursor: pointer; }
.primary:hover { background: #d8ff94; }
.primary:disabled { opacity: .5; cursor: wait; }
.metrics { margin: 54px 0 20px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #2b3933; border-radius: 16px; overflow: hidden; }
.metrics article { min-height: 180px; padding: 28px; display: flex; flex-direction: column; border-right: 1px solid #2b3933; background: rgb(13 26 21 / 82%); }
.metrics article:last-child { border-right: 0; }
.metrics.metrics-four { grid-template-columns: repeat(4, 1fr); }
.metrics.metrics-four strong { font-size: clamp(2.4rem, 5vw, 4.6rem); }
.metrics span { color: #82958b; font: 700 .68rem/1.2 ui-monospace, monospace; letter-spacing: .13em; }
.metrics strong { margin-top: auto; font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: .9; letter-spacing: -.06em; }
.metrics small { margin-top: 12px; color: #82958b; }
.panel { margin-top: 20px; padding: 28px; border: 1px solid #2b3933; border-radius: 16px; background: rgb(13 26 21 / 82%); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.panel-head h2 { margin: 0; font-size: 1.2rem; }
.panel-head > p { margin: 0; color: #82958b; font: .75rem/1.4 ui-monospace, monospace; }
.trend-chart { margin-top: 24px; overflow-x: auto; }
.trend-chart svg { min-width: 100%; display: block; }
.grid line { stroke: #26372f; stroke-width: 1; }
.grid text { fill: #70847a; font: 11px ui-monospace, monospace; text-anchor: end; }
.grid text:last-child { text-anchor: middle; }
.line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.line.human { stroke: #c7ff66; }
.line.bot { stroke: #f39b70; }
.line.verified { stroke: #c7ff66; }
.line.likely { stroke: #f39b70; }
.line.unknown { stroke: #78a9ff; }
.legend { margin-top: 14px; display: flex; justify-content: flex-end; gap: 18px; color: #82958b; font-size: .76rem; }
.legend i { width: 8px; height: 8px; margin-right: 7px; display: inline-block; border-radius: 50%; }
.human-dot { background: #c7ff66; } .bot-dot { background: #f39b70; }
.verified-dot { background: #c7ff66; } .likely-dot { background: #f39b70; } .unknown-dot { background: #78a9ff; }
.panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ranking { margin-top: 22px; }
.rank-row { padding: 13px 0; display: grid; grid-template-columns: 32px 1fr; gap: 12px; border-top: 1px solid #26372f; }
.rank-number { color: #64776d; font: .7rem/1.5 ui-monospace, monospace; }
.rank-label { display: flex; justify-content: space-between; gap: 16px; font-size: .85rem; }
.rank-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-label strong { font-variant-numeric: tabular-nums; }
.bar { width: 100%; height: 3px; margin-top: 8px; display: block; border: 0; appearance: none; background: #1d2c25; }
.bar::-webkit-progress-bar { background: #1d2c25; }
.bar::-webkit-progress-value { background: #c7ff66; }
.bar::-moz-progress-bar { background: #c7ff66; }
.table-wrap { margin-top: 20px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 14px; border-bottom: 1px solid #26372f; text-align: left; white-space: nowrap; }
th { color: #82958b; font-size: .72rem; letter-spacing: .08em; }
td { font-size: .86rem; }
th:last-child, td:last-child { text-align: right; }
.status { margin: 24px 0 0; padding: 13px 15px; border: 1px solid #34483f; border-radius: 8px; color: #b8c9c0; background: #0a1611; font-size: .84rem; }
.dashboard-status { margin-bottom: -34px; }
.empty { color: #71867a; }
.hour-chart { min-height: 230px; margin-top: 24px; overflow-x: auto; }
.hour-chart svg { min-width: 680px; display: block; }
.hour-chart rect { fill: #c7ff66; }
.hour-chart line { stroke: #26372f; }
.hour-chart text { fill: #71867a; font: 10px ui-monospace, monospace; text-anchor: middle; }
footer { width: min(1280px, calc(100% - 48px)); margin: auto; padding: 26px 0 38px; display: flex; justify-content: space-between; border-top: 1px solid #26332e; color: #667a70; font-size: .75rem; }
.auth-page { min-height: 100vh; background: radial-gradient(circle at 50% 0, rgb(199 255 102 / 13%), transparent 32rem), #08120f; }
.auth-shell { min-height: 100vh; padding: 32px 20px; display: grid; place-items: center; }
.auth-card { width: min(100%, 580px); padding: clamp(30px, 7vw, 62px); border: 1px solid #2b3933; border-radius: 20px; background: rgb(13 26 21 / 94%); box-shadow: 0 35px 100px rgb(0 0 0 / 35%); }
.auth-card .eyebrow { margin-top: 54px; }
.auth-card h1 { font-size: clamp(2.6rem, 9vw, 4.7rem); }
.auth-card .primary { width: 100%; margin-top: 32px; min-height: 54px; }
.fine-print { margin: 22px 0 0; color: #667a70; font-size: .77rem; }
.form-stack { margin-top: 30px; display: grid; gap: 18px; }
.form-stack input { width: 100%; }
.form-stack .primary { margin-top: 4px; }

@media (max-width: 900px) {
  .dashboard-head { grid-template-columns: 1fr; }
  .range-form { width: 100%; }
  .panel-grid { grid-template-columns: 1fr; gap: 0; }
  .metrics.metrics-four { grid-template-columns: repeat(2, 1fr); }
  .metrics.metrics-four article:nth-child(2) { border-right: 0; }
  .metrics.metrics-four article:nth-child(-n+2) { border-bottom: 1px solid #2b3933; }
}

@media (max-width: 620px) {
  .app-header, .dashboard, footer { width: min(100% - 28px, 1280px); }
  .dashboard { padding-top: 48px; }
  .dashboard-head { gap: 34px; }
  .range-form { grid-template-columns: 1fr 1fr; }
  .range-form .primary { grid-column: 1 / -1; }
  .metrics { grid-template-columns: 1fr; }
  .metrics.metrics-four { grid-template-columns: 1fr; }
  .metrics article { min-height: 145px; border-right: 0; border-bottom: 1px solid #2b3933; }
  .metrics article:last-child { border-bottom: 0; }
  .panel { padding: 22px 18px; }
  .account #viewer-name { display: none; }
  .header-actions { gap: 10px; }
  .app-nav a { padding: 7px 8px; font-size: .7rem; }
  footer { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }