/* ===== tokens & reset ===== */
:root {
  --bg-base: #000000;
  --bg-panel: #121212;
  --bg-elevated: #1f1f1f;
  --bg-highlight: #2a2a2a;
  --bg-press: #000;
  --card-bg: #181818;
  --card-hover: #282828;
  --text-base: #ffffff;
  --text-subdued: #b3b3b3;
  --text-dim: #6a6a6a;
  --accent: #1db954;
  --accent-bright: #1ed760;
  --accent-press: #169c46;
  --danger: #f15e6c;
  --essential-bright: #fff;
  --decorative-subdued: #727272;
  --border-subtle: hsla(0,0%,100%,.1);
  --panel-radius: 8px;
  --card-radius: 6px;
  --np-height: 88px;
  --sidebar-w: 340px;
  --sidebar-w-min: 280px;
  --rightbar-w: 336px;
  --topbar-h: 64px;
  --font: "CircularSp", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ease-out: cubic-bezier(.3,0,.4,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-base);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}
button { font-family: inherit; border: 0; background: none; color: inherit; cursor: pointer; }
input { font-family: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; user-select: none; -webkit-user-drag: none; }
::selection { background: rgba(29,185,84,.6); }

:focus-visible { outline: 2px solid var(--essential-bright); outline-offset: 2px; border-radius: 4px; }
button:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) { outline: none; }

/* scrollbars */
.scroll-host { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.scroll-host:hover { scrollbar-color: hsla(0,0%,100%,.3) transparent; }
.scroll-host::-webkit-scrollbar { width: 12px; }
.scroll-host::-webkit-scrollbar-track { background: transparent; }
.scroll-host::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
.scroll-host:hover::-webkit-scrollbar-thumb { background-color: hsla(0,0%,100%,.3); }
.scroll-host::-webkit-scrollbar-thumb:hover { background-color: hsla(0,0%,100%,.4); }

.tnum { font-variant-numeric: tabular-nums; }
.txt-sub { color: var(--text-subdued); }
.txt-dim { color: var(--text-dim); }
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ellipsis-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.hidden { display: none !important; }

@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes eqbar { 0%,100% { transform: scaleY(.3);} 25% { transform: scaleY(1);} 50% { transform: scaleY(.5);} 75% { transform: scaleY(.85);} }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes popin { from { opacity: 0; transform: scale(.97) translateY(4px);} to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: none; } }