/* gruvbox light (default) — https://github.com/morhetz/gruvbox */
:root{
  --bg:#fbf1c7;            /* light bg0 */
  --surface:#f9f5d7;       /* light bg0_h */
  --ink:#3c3836;           /* dark fg1 */
  --strong:#282828;        /* dark fg0 */
  --muted:#7c6f64;         /* gray */
  --line:#ebdbb2;          /* light bg1 */
  --accent:#427b58;        /* faded aqua */
  --accent-soft:rgba(66,123,88,.15);
  --danger:#9d0006;        /* faded red */
  --danger-soft:rgba(157,0,6,.10);
  --radius:10px;
  --maxw:1100px;
  color-scheme:light;
  font-synthesis:none;
}

/* gruvbox dark — applied by the theme toggle (data-theme) */
:root[data-theme="dark"]{
  --bg:#282828;            /* dark bg0 */
  --surface:#32302f;       /* dark bg0_s */
  --ink:#ebdbb2;           /* light fg1 */
  --strong:#fbf1c7;        /* light fg0 */
  --muted:#a89984;         /* gray_245 */
  --line:#3c3836;          /* dark bg1 */
  --accent:#8ec07c;        /* bright aqua */
  --accent-soft:rgba(142,192,124,.16);
  --danger:#fb4934;        /* bright red */
  --danger-soft:rgba(251,73,52,.14);
  color-scheme:dark;
}

/* Follow the OS when JS is unavailable to set data-theme. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#282828;--surface:#32302f;--ink:#ebdbb2;--strong:#fbf1c7;--muted:#a89984;
    --line:#3c3836;--accent:#8ec07c;--accent-soft:rgba(142,192,124,.16);
    --danger:#fb4934;--danger-soft:rgba(251,73,52,.14);color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  letter-spacing:.1px;
  transition:background .15s ease,color .15s ease;
}
a{color:inherit;text-decoration:none}
h3{margin:0 0 .6rem;font-size:.95rem;font-weight:600;letter-spacing:.2px;color:var(--strong)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;background:var(--accent-soft);padding:.1em .35em;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:1.6rem 1.4rem 3rem}

/* top bar */
.topbar{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.brand{font-weight:600;font-size:1.25rem;letter-spacing:-.3px;color:var(--strong);text-decoration:none}
.brand .dot{color:var(--accent)}
.brand.center{text-align:center;display:block;font-size:1.6rem}
.topbar-mid{flex:1;display:flex;align-items:center}
.topbar-right{display:flex;align-items:center;gap:1rem}
.site-name{font-weight:500;color:var(--muted)}
.navlink{color:var(--muted);font-size:.9rem}
.navlink:hover{color:var(--ink)}

.theme-toggle{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  width:30px;height:30px;padding:0;border-radius:8px;cursor:pointer;
  font-size:.95rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle::before{content:"\263E"}                 /* ☾ moon in light mode */
:root[data-theme="dark"] .theme-toggle::before{content:"\2600"}  /* ☀ sun in dark mode */

.site-switch select{
  appearance:none;border:1px solid var(--line);background:var(--surface);
  padding:.35rem 2rem .35rem .7rem;border-radius:8px;font:inherit;color:var(--ink);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23928374' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;
}

.live{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted)}
.pulse{width:7px;height:7px;border-radius:50%;color:var(--accent);background:currentColor;box-shadow:0 0 0 0 currentColor;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* range tabs */
.ranges{display:flex;gap:.3rem;margin-bottom:1.4rem;flex-wrap:wrap}
.range{font-size:.85rem;color:var(--muted);padding:.3rem .7rem;border-radius:7px}
.range:hover{background:var(--surface)}
.range.active{background:var(--ink);color:var(--bg)}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin-bottom:1.2rem}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.25rem}
.kpi-label{font-size:.78rem;color:var(--muted)}
.kpi-val{font-size:1.5rem;font-weight:600;letter-spacing:-.5px;color:var(--strong)}

/* chart */
.chart-card{margin-bottom:1.2rem;padding:1rem .8rem .4rem}
.chart{width:100%;height:auto;display:block}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .area{fill:var(--accent-soft)}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .ax{fill:var(--muted);font-size:11px;text-anchor:middle}
.chart-empty{padding:3rem 1rem;text-align:center;color:var(--muted)}

/* panels */
.panels{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem}
.panel-metric{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.bar-row{position:relative;display:flex;align-items:center;padding:.4rem .5rem;border-radius:6px;overflow:hidden}
.bar-fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent-soft);border-radius:6px;z-index:0}
.bar-label{position:relative;z-index:1;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:.6rem}
.bar-count{position:relative;z-index:1;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.88rem}
.empty,.muted{color:var(--muted)}
.small{font-size:.82rem}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.4rem}
.login{width:100%;max-width:340px;display:flex;flex-direction:column;gap:.8rem}
.login-sub{text-align:center;color:var(--muted);margin:.2rem 0 .6rem}
.login label,.row-form input,.field-label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--muted)}
.login input,.row-form input{border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;font:inherit;color:var(--ink);background:var(--bg)}
.login input:focus,.row-form input:focus{outline:none;border-color:var(--accent)}
button{border:1px solid var(--strong);background:var(--strong);color:var(--bg);border-radius:8px;padding:.55rem .9rem;font:inherit;cursor:pointer;transition:opacity .15s}
button:hover{opacity:.85}
button.danger{background:transparent;color:var(--danger);border-color:var(--line)}
button.danger:hover{border-color:var(--danger)}
.form-error{background:var(--danger-soft);color:var(--danger);padding:.5rem .7rem;border-radius:7px;font-size:.85rem}

/* settings */
.notice{margin-bottom:1rem}
.notice.subtle{color:var(--muted);font-size:.88rem}
.apikey{display:block;margin-top:.4rem;word-break:break-all}
.row-form{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.row-form input{flex:1;min-width:160px}
.site-card{margin-top:1rem}
.site-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.8rem}
.field-label{margin-top:.4rem}
.snippet{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.7rem .8rem;overflow:auto;font-family:ui-monospace,monospace;font-size:.82rem;white-space:pre-wrap;word-break:break-all}
.site-actions{display:flex;gap:.7rem;align-items:center;margin-top:.7rem;flex-wrap:wrap}
.site-actions button{background:transparent;color:var(--ink);border-color:var(--line)}
.site-actions button:hover{border-color:var(--ink)}

.foot{margin-top:2rem;text-align:center;color:var(--muted);font-size:.8rem}
.foot strong{font-weight:600;color:var(--ink)}

/* overview landing grid */
.site-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.9rem}
.site-card{display:block;text-decoration:none;color:inherit;transition:border-color .12s,transform .12s}
.site-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.site-card.combined{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.site-card-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.9rem}
.site-card-head h3{font-size:1rem;font-weight:600;color:var(--strong);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.site-card-stats>div{display:flex;flex-direction:column;gap:.15rem}
.site-card-stats .kpi-val{font-size:1.25rem}
.site-card-stats .kpi-label{font-size:.72rem}

@media(max-width:820px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .panels{grid-template-columns:1fr}
}