:root {
  --page:#d5e2da;
  --surface-app:rgba(230,239,233,0.92); --surface-panel:rgba(230,239,233,0.90);
  --surface-inset:rgba(239,245,241,0.95); --surface-raised:rgba(219,232,224,0.95);
  --surface-hover:rgba(208,224,214,0.95);
  --surface-solid:#eff5f1;

  --bevel-hi:#ffffff; --bevel-lo:#a3b5ab; --border-soft:#bdcdc3;

  --text:#142520; --text-dim:#2b463c; --text-muted:#456055; --text-faint:#506b60;

  --accent:#216b50; --accent-deep:#17513c; --accent-visited:#17553d;
  --accent-on:#ffffff; --link-hover:#a83a32;

  --title-bar:linear-gradient(90deg, #17513c, #2a7a5a);
  --title-text:#ffffff;
  --panel-glow:rgba(33,107,80,0.18);
  --counter-bg:#1c2e27; --counter-fg:#a5dcc4;
  --map-stroke:#3f5f51;
  --map-v1:rgba(33,107,80,0.14); --map-v2:rgba(33,107,80,0.30);
  --map-v3:rgba(33,107,80,0.46); --map-v4:rgba(33,107,80,0.64);
  --map-v5:rgba(33,107,80,0.82);
  --map-hover:rgba(214,158,46,0.55); --map-hover-stroke:#a9741a;
}

html.dark-mode {
  --page:#131b17;
  --surface-app:rgba(26,36,31,0.90); --surface-panel:rgba(26,36,31,0.88);
  --surface-inset:rgba(22,32,27,0.94); --surface-raised:rgba(34,48,41,0.95);
  --surface-hover:rgba(42,58,50,0.95);
  --surface-solid:#16201b;

  --bevel-hi:#2c3f36; --bevel-lo:#0d1411; --border-soft:#26362e;

  --text:#d9e6df; --text-dim:#aec7bb; --text-muted:#8ba99a; --text-faint:#789385;

  --accent:#6fbf9b; --accent-deep:#1f4d3b; --accent-visited:#a5dcc4;
  --accent-on:#131b17; --link-hover:#f0a0a0;

  --title-bar:linear-gradient(90deg, #1a4736, #2c7d5c);
  --title-text:#e4f2ea;
  --panel-glow:rgba(111,191,155,0.14);
  --counter-bg:#0d1411; --counter-fg:#a5dcc4;

  --map-stroke:#8bbfa8;
  --map-v1:rgba(111,191,155,0.12); --map-v2:rgba(111,191,155,0.26);
  --map-v3:rgba(111,191,155,0.42); --map-v4:rgba(111,191,155,0.60);
  --map-v5:rgba(111,191,155,0.80);
  --map-hover:rgba(240,200,110,0.55); --map-hover-stroke:#f0c86e;
}

body { background: var(--page); color: var(--text); }

body .win-app {
  background: var(--surface-app);
  border-color: var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
}
body .win-titlebar,
body .panel-header,
body .link-warn-titlebar { background: var(--title-bar); color: var(--title-text); }

body .top-nav { background: var(--surface-app); border-bottom-color: var(--border-soft); }
body .nav-tab {
  background: var(--surface-raised); color: var(--text-dim);
  border-color: var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
}
body .nav-tab:hover { background: var(--surface-hover); color: var(--text); }
body .nav-tab.active { background: var(--surface-panel); border-bottom-color: var(--surface-panel); color: var(--text); }

body .panel {
  background: var(--surface-panel);
  border-color: var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
}
body .panel:hover { box-shadow: 3px 5px 18px var(--panel-glow); }
body .panel-body.scroll,
body .inset {
  background: var(--surface-inset); color: var(--text);
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
}
body .win-footer { background: var(--surface-app); border-top-color: var(--border-soft); color: var(--text-muted); }
body .status-bar-seg {
  color: var(--text-muted);
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
}
body .footer-link { color: var(--text-muted); }
body .footer-link:hover { color: var(--link-hover); }
body .footer-link:visited { color: var(--text-muted); }

body .banner-wrap { background: var(--surface-solid); }
body .banner-wrap img { border-bottom-color: var(--border-soft); }

body .blinkie-marquee {
  background: var(--surface-inset);
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
}

body a { color: var(--accent); }
body a:hover { color: var(--link-hover); }
body a:visited { color: var(--accent-visited); }
body .nav-list a { color: var(--text-dim); }
body .nav-list a:hover { background: var(--accent-deep); color: var(--accent-on); }

body .btn98 {
  background: var(--surface-raised); color: var(--text-dim);
  border-color: var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
}
body .btn98:hover { background: var(--surface-hover); color: var(--text); }
body .tl-play { border-color: var(--border-soft); color: var(--text-dim); }
body .tl-play:hover { background: var(--surface-hover); }
body .pmb {
  background: var(--surface-raised); color: var(--text-dim);
  border-color: var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
}
body .chk-row { color: var(--text-dim); }

body .blog-date, body .blog-blurb { color: var(--text-muted); }
body .blog-title { color: var(--accent); }
body .blog-list li { border-bottom-color: var(--border-soft); }
body .cl-date { color: var(--text-dim); }
body .cl-entry { border-bottom-color: var(--border-soft); color: var(--text-dim); }
body .sub-header { border-bottom-color: var(--border-soft); }
body .sub-header p { color: var(--text-muted); }

body .no-act { color: var(--text-muted); }
body .pres-type { color: var(--text-muted); }
body .b88.ph { color: var(--text-muted); border-color: var(--border-soft); }
body .img-ph { color: var(--text-muted); }

body .pres-name { color: var(--text); }
body .pres-detail { color: var(--text-dim); }
body .pres-state { color: var(--text-muted); }
body .pres-entry { border-bottom-color: var(--border-soft); }
body .prog-outer { background: var(--surface-raised); }
body .prog-inner { background: var(--accent); }
body .prog-times { color: var(--text-muted); }

body .counter-digits { background: var(--counter-bg); color: var(--counter-fg); }

body .t-name { color: var(--text-dim); }
body .t-artist { color: var(--text-muted); }
body .track-list th { background: var(--surface-raised); color: var(--text-dim); border-bottom-color: var(--border-soft); }
body .track-list td { border-bottom-color: var(--border-soft); }
body .track-list tr:hover td { background: var(--surface-hover); }
body .lfm-name { color: var(--text-dim); }
body .lfm-stats { color: var(--text-muted); }
body .lfm-stat-n { color: var(--text-dim); }

body .social-link {
  background: var(--surface-raised); color: var(--text-dim);
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
}
body .social-link:hover { background: var(--surface-hover); }
body .social-handle { color: var(--text-muted); }

body #js-slabel, body #js-custom-status { color: var(--text-muted); }
body .sdot.online { background: #2f9e63; }
body .sdot.idle { background: #c98a12; }
body .sdot.dnd { background: #d2413f; }
body .sdot.offline { background: var(--text-faint); }

body .map-tip { background: var(--surface-inset); color: var(--text); }
body .map-tip strong { color: var(--accent); }
body #map-container { background: var(--surface-inset) !important; }
body .country-path { stroke: var(--map-stroke); }
body .country-path.v1,
body .country-path.v2,
body .country-path.v3,
body .country-path.v4,
body .country-path.v5 { stroke: var(--accent); }
body .country-path:hover {
  fill: var(--map-hover);
  stroke: var(--map-hover-stroke); stroke-width: 2;
}

body .gb-entry { border-bottom-color: var(--border-soft); }
body .gb-input {
  background: var(--surface-inset); color: var(--text);
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
}
body .gb-input:focus { border-color: var(--accent) var(--accent-deep) var(--accent-deep) var(--accent); }
body .gb-url { color: var(--accent); }
body .gb-url:hover { color: var(--link-hover); }
body .gb-pagination { border-top-color: var(--border-soft); }
body .recent-sub { color: var(--text-muted); border-bottom-color: var(--border-soft); }
body .recent-entry, body .recent-cmt { border-bottom-color: var(--border-soft); }

body .pet-bubble {
  background: var(--surface-inset);
  border: 2px solid var(--border-soft);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  padding: 6px 8px;
  width: 140px;
  text-align: center;
}