/* Dj Mitica panel: the "Jukebox" look (C:\remix\DESIGN.md: black, one green, pill buttons).
   Loaded after style.css; the colour tokens live in style.css :root. The ":root" prefix on the rules
   below adds one class worth of weight, so they win over the matching style.css rules. */

.topbar .btn { white-space: nowrap; }
@media (max-width: 900px) {
  .brand { min-width: 0; white-space: nowrap; }
  #bot-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 640px) {
  .topbar { gap: 10px; }
  .who { gap: 6px; }
}

/* compact type, no heading larger than 24px */
:root body { background: var(--bg); font-size: 14px; }
:root :is(h1, h2, h3, .brand, .deck-title, .strip-head, .rail-title) { font-variation-settings: normal; letter-spacing: -.01em; }
:root .brand { font-size: 16px; font-weight: 700; }
:root .panel-title { font-size: 16px; font-weight: 700; }
:root .strip-head { font-size: 16px; }
:root .login-card h1 { font-size: 24px; font-weight: 700; }
:root :focus-visible { outline-color: #fff; }
/* surfaces: elevation comes from the colour step (#000 → #121212 → #1f1f1f), never from borders or shadows */
:root :is(.panel, .strip, .guild, .deck, .login-card) { border-color: transparent; box-shadow: none; }
:root .topbar { background: var(--bg); border-bottom-color: transparent; padding-top: 12px; padding-bottom: 12px; }
:root .login { background: linear-gradient(rgba(255, 255, 255, .1), var(--bg) 60%); }
:root .login-card { padding: 32px 28px; }
:root :is(.result, .q-item, .pl-item):hover, :root .q-item:focus-within { background: rgba(255, 255, 255, .1); }
:root .fb-item { border-color: transparent; }
:root .fb-item.unread { box-shadow: inset 3px 0 0 var(--amber); }
:root .pa-sugg { background: var(--overlay); border-color: transparent; box-shadow: var(--shadow-lg); }
:root .vc-people { background: var(--overlay); border-color: transparent; }
/* buttons: every action is a pill; the main one is white with black text, never coloured */
:root .btn {
  border-radius: 9999px; font-weight: 700; background: transparent; border-color: #535353;
  transition: transform .1s, border-color .15s, background .15s, color .15s;
}
:root .btn:hover { border-color: #fff; }
:root .btn:hover:not(:disabled) { transform: scale(1.04); }
:root .btn-block:hover:not(:disabled) { transform: scale(1.02); }
:root .btn:active:not(:disabled) { transform: scale(1); }
:root .btn-primary { background: #fff; border-color: #fff; color: #000; }
:root .btn-primary:hover { background: #F0F0F0; border-color: #F0F0F0; filter: none; }
:root .btn-ghost, :root .btn-ghost:hover { border-color: transparent; }
:root .btn-ghost { color: var(--muted); }
:root .btn-ghost:hover { color: #fff; }
:root .btn.danger { color: var(--coral); }
:root .danger-solid { border-color: color-mix(in srgb, var(--coral) 50%, transparent); }
:root .danger-solid.btn-primary { background: var(--coral); border-color: var(--coral); color: #000; }
/* the one promo gradient: the donate button */
:root .btn.donate-btn { background: linear-gradient(90deg, #AF2896, #509BF5); border-color: transparent; color: #fff; }
:root .login-donate a { color: var(--text); }
:root .icon-btn { color: var(--muted); transition: color .15s, transform .1s, background .15s; }
:root .icon-btn:hover { color: #fff; background: rgba(255, 255, 255, .1); }
/* green only for play and "on" states */
:root .transport .play { background: var(--amber); color: #000; }
:root .transport .play:hover { background: #3BE477; color: #000; filter: none; transform: scale(1.06); }
/* tabs, segmented switches and chips: pills */
:root .tab { border-radius: 9999px; font-weight: 700; }
:root .tab[aria-selected="true"] { background: #292929; color: #fff; }
:root .seg { background: var(--panel); border-color: transparent; border-radius: 9999px; }
:root .seg button { border-radius: 9999px; font-weight: 700; }
:root .seg button[aria-selected="true"] { background: #292929; color: #fff; box-shadow: none; }
:root .chip { background: #2A2A2A; border-color: transparent; color: #fff; }
:root .chip:hover { background: #333; color: #fff; }
:root .chip[aria-pressed="true"], :root .chip[aria-pressed="true"]:hover { background: var(--amber); color: #000; }
:root .toggle span { background: #535353; }
/* fields: soft pills on #1f1f1f with the hairline inset ring */
:root :is(input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="url"], select) {
  background: var(--panel-2); border-color: transparent; border-radius: 500px; padding-left: 16px; padding-right: 16px; box-shadow: var(--shadow-input);
}
:root :is(.setting-ctl textarea, .ann-panel textarea) { background: var(--panel-2); border-color: transparent; border-radius: 6px; box-shadow: var(--shadow-input); }
:root :is(input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="url"], select, .setting-ctl textarea, .ann-panel textarea):hover { box-shadow: 0 1px 0 #121212, inset 0 0 0 1px #B3B3B3; }
:root :is(input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="url"], select, .setting-ctl textarea, .ann-panel textarea):focus { border-color: transparent; box-shadow: inset 0 0 0 2px #fff; }
:root select option { background: var(--overlay); }
/* sliders: thin white bar; it turns green and shows its knob while you touch it */
:root input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--fill, 0%), #4D4D4D var(--fill, 0%)); }
:root input[type="range"]:hover::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--amber) var(--fill, 0%), #4D4D4D var(--fill, 0%)); }
:root input[type="range"]:focus-visible::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--amber) var(--fill, 0%), #4D4D4D var(--fill, 0%)); }
:root input[type="range"]::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; border: 0; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .15s; }
:root input[type="range"]:hover::-webkit-slider-thumb { opacity: 1; }
:root input[type="range"]:focus-visible::-webkit-slider-thumb { opacity: 1; }
:root input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: #4D4D4D; }
:root input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: #fff; }
:root input[type="range"]:hover::-moz-range-progress { background: var(--amber); }
:root input[type="range"]:focus-visible::-moz-range-progress { background: var(--amber); }
:root input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 0; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .15s; }
:root input[type="range"]:hover::-moz-range-thumb { opacity: 1; }
:root input[type="range"]:focus-visible::-moz-range-thumb { opacity: 1; }
@media (hover: none) {
  :root input[type="range"]::-webkit-slider-thumb { opacity: 1; }
  :root input[type="range"]::-moz-range-thumb { opacity: 1; }
}
/* rail */
:root .vc.active { background: rgba(255, 255, 255, .1); box-shadow: none; }
:root .vc.active .vc-name { color: var(--amber); }
/* the deck: the cover's colour washes down into the card, like an album header */
:root .deck > :not(.deck-bg) { position: relative; z-index: 1; }
:root .deck-bg {
  display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--art, linear-gradient(#535353, #535353)) center / cover no-repeat;
  filter: blur(60px) saturate(140%); opacity: .6; transform: scale(1.4);
}
:root .deck-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(18, 18, 18, .15), #121212 85%); }
:root .deck-art { box-shadow: var(--shadow-lg); }
:root .deck-title { font-size: 24px; font-weight: 700; line-height: 1.2; }
:root .deck-artist { font-size: 14px; }
:root .progress { font-size: 11px; font-variant-numeric: tabular-nums; }
/* square content, round people */
:root :is(.thumb, .pl-cover, .guild-icon) { border-radius: 6px; }
:root .vu i.on.hot { background: #fff; }
/* no extra accent colours: medals go monochrome, warnings get their own colour instead of green */
:root .rank.r1 { background: var(--amber); color: #000; }
:root .rank.r2 { background: #fff; color: #000; }
:root .rank.r3 { background: #535353; color: #fff; }
:root :is(.warn-text, .log .l-warn) { color: var(--warn); }
/* overlays */
:root .toast { background: var(--overlay); border: 0; box-shadow: var(--shadow-lg); }
:root .toast.err { box-shadow: var(--shadow-lg), inset 3px 0 0 var(--coral); }
:root ::selection { background: rgba(30, 215, 96, .35); }
:root { scrollbar-color: rgba(255, 255, 255, .3) transparent; }
:root ::-webkit-scrollbar { width: 8px; height: 8px; }
:root ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border-radius: 4px; }
:root ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .5); }
:root ::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 900px) {
  /* bottom bar: icon over a small label; the current section is white, the rest grey (no pill) */
  :root .bottombar { background: rgba(0, 0, 0, .92); border-top-color: transparent; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  :root .bottombar .tab { border-radius: 8px; font-weight: 600; color: var(--muted); }
  :root .bottombar .tab:hover { color: #fff; }
  :root .bottombar .tab[aria-selected="true"] { background: none; color: #fff; }
  /* settings section links as filter chips */
  :root .settings-nav a { background: #2A2A2A; color: #fff; border-radius: 9999px; }
  :root .settings-nav a:hover { background: #333; }
}