/* my-radio — palette copied from favkalaams/stream.html
   Deep emerald ground + gold 8-point stars, translucent glass panels.
   The star pattern lives on the BODY background so backdrop-filter can blur it
   through the panels (the technique proven in stream.html). */

:root{
  --bg:#0B3D2E;
  --bg2:#0e2b21;
  --text:#f8fafc;
  --muted:#a8bcae;
  --accent:#D4AF37;          /* gold */
  --accent-d:#b8941f;
  --line:rgba(255,255,255,.15);
  --panel:rgba(5,5,5,.15);
  --panel-strong:rgba(5,5,5,.28);
  --panel-border:rgba(255,255,255,.22);
  --danger:#ff8a8a;
  --ok:#7ed9a7;
  --shadow:0 12px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ min-height:100%; }
/* Column layout so the Playlist's track list can be told "take whatever height is left".
   dvh keeps it right on mobile, where the address bar changes the usable height. */
body{
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100dvh;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--text);
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%3E%3Cpath%20fill%3D%27%23D4AF37%27%20fill-opacity%3D%270.30%27%20d%3D%27M5%2C0%20L5.8%2C3.06%20L8.54%2C1.46%20L6.94%2C4.2%20L10%2C5%20L6.94%2C5.8%20L8.54%2C8.54%20L5.8%2C6.94%20L5%2C10%20L4.2%2C6.94%20L1.46%2C8.54%20L3.06%2C5.8%20L0%2C5%20L3.06%2C4.2%20L1.46%2C1.46%20L4.2%2C3.06Z%20M15%2C10%20L15.8%2C13.06%20L18.54%2C11.46%20L16.94%2C14.2%20L20%2C15%20L16.94%2C15.8%20L18.54%2C18.54%20L15.8%2C16.94%20L15%2C20%20L14.2%2C16.94%20L11.46%2C18.54%20L13.06%2C15.8%20L10%2C15%20L13.06%2C14.2%20L11.46%2C11.46%20L14.2%2C13.06Z%27%2F%3E%3C%2Fsvg%3E") repeat,
    radial-gradient(circle at 50% 20%, #15493a 0%, #0B3D2E 55%, #082C21 100%);
  background-attachment:fixed;
  -webkit-user-select:none; user-select:none;
}

/* ---------- glass primitives ---------- */
.glass{
  background:var(--panel);
  border:1px solid var(--panel-border);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(3px) saturate(120%);
  box-shadow:var(--shadow);
}
.card{ border-radius:12px; padding:1.4rem 1.3rem; }
.hidden{ display:none !important; }

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:1rem;
  padding:.7rem 1rem;
  border-radius:12px;
  border-top:none;
  /* Flush with the cards: #app is a 560px box with 1rem side padding, so its cards are
     528px wide and inset 1rem on narrow screens — match both and the edges line up at
     every width.
     !important because index.html may still carry an inline `margin:10px`, and an
     inline style otherwise wins — leaving the bar pinned to the left. */
  width:calc(100% - 2rem);
  max-width:528px;
  margin-top:10px;
  margin-bottom:10px;
  margin-left:auto !important;
  margin-right:auto !important;
}
.topbar .brand{ font-weight:800; letter-spacing:.01em; font-size:1.05rem; color:var(--accent); }
.tabs{ display:flex; gap:.35rem; margin-left:.4rem; }
.tab{
  font:inherit; font-weight:600; font-size:.9rem;
  border:1px solid transparent; background:transparent; color:var(--muted);
  padding:.4rem .8rem; border-radius:999px; cursor:pointer; transition:.15s;
}
.tab:hover{ color:var(--text); }
.tab.active{ background:var(--accent); color:#0B3D2E; box-shadow:0 4px 14px rgba(212,175,55,.3); }
.userbox{ margin-left:auto; display:flex; align-items:center; gap:.6rem; }
.uname{ font-size:.82rem; color:var(--muted); white-space:nowrap; max-width:38vw; overflow:hidden; text-overflow:ellipsis; }
/* signed-out: Sign in / Sign up in place of the name + sign-out */
.guestbox{ display:flex; align-items:center; gap:.4rem; }
button.sm{
  font-size:.72rem; font-weight:600; padding:.36rem .8rem;
  border-radius:999px; white-space:nowrap; box-shadow:none;
}
.linkbtn{ font:inherit; background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; font-size:.82rem; }
.linkbtn:hover{ text-decoration:underline; }

/* ---------- layout ---------- */
#app{
  width:100%; max-width:560px; margin:0 auto;
  padding: 0 1rem 2rem;
  display:flex; flex-direction:column; gap:1rem;
  flex:1 1 auto; min-height:0;
}
.view{ display:flex; flex-direction:column; gap:1rem; animation:fade .25s ease;
       flex:1 1 auto; min-height:0; }

/* Playlist: the cards above keep their natural size; the track list card takes what is
   left of the screen and scrolls inside itself instead of growing the page. */
.playlist-view > .card{ flex:0 0 auto; }
.playlist-view > .list-card{
  flex:0 1 auto;            /* short list -> short card; long list -> capped and scrolls */
  min-height:8rem;
  display:flex; flex-direction:column;
}
.list-card .tracklist{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.list-card .tracklist::-webkit-scrollbar{ width:8px; }
.list-card .tracklist::-webkit-scrollbar-thumb{ background:rgba(212,175,55,.35); border-radius:999px; }
.list-card .tracklist::-webkit-scrollbar-track{ background:transparent; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.boot{ text-align:center; color:var(--muted); }

/* Android app download — a quiet footer under the cards, on every screen. Deliberately
   understated: it must not compete with playback controls, but a guest on a phone is
   exactly who wants it. */
.getapp{
  flex:0 0 auto; text-align:right;
  /* Same 528px box as the topbar and the cards, so it sits directly under the header's
     right corner rather than jutting out to the raw screen edge. */
  width:calc(100% - 2rem);
  max-width:528px;
  margin:0 auto .55rem;
}
.getapp a{
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--muted); font-size:.74rem; font-weight:600;
  text-decoration:none; padding:.35rem .7rem; border-radius:999px;
  transition:color .15s, background .15s;
}
.getapp a:hover{ color:var(--accent); background:rgba(212,175,55,.10); }
.getapp svg{ display:block; }
.getapp-size{ color:var(--muted); opacity:.7; font-weight:500; }

/* Allowance counter under the add row: quiet until it runs out, then gold. */
.pl-quota{
  font-size:.72rem; color:var(--muted); opacity:.75;
  padding:0 .1rem .35rem; font-weight:500;
}
.pl-quota.full{ color:var(--accent); opacity:1; font-weight:600; }

/* ---------- inputs & buttons ---------- */
input, textarea{
  font:inherit; width:100%; color:var(--text);
  background:var(--bg2);
  border:1px solid var(--line); border-radius:.5rem;
  padding:.7rem .85rem; outline:none; transition:border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder{ color:var(--muted); opacity:.75; }
input:focus, textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(212,175,55,.18); }
textarea{ resize:vertical; min-height:46px; line-height:1.45; }
button.primary{
  font:inherit; font-weight:700; color:#0B3D2E; cursor:pointer;
  background:linear-gradient(180deg,#e0bd4a,var(--accent));
  border:none; border-radius:.5rem; padding:.72rem 1rem;
  box-shadow:0 8px 22px rgba(212,175,55,.25);
  transition:filter .15s, transform .05s;
}
button.primary:hover{ filter:brightness(1.07); }
button.primary:active{ transform:translateY(1px); }
button.primary:disabled{ filter:grayscale(.5) brightness(.85); cursor:default; }
button.wide{ width:100%; }
button.ghost{
  font:inherit; font-weight:600; color:var(--text); cursor:pointer;
  background:var(--bg2); border:1px solid var(--line);
  border-radius:.5rem; padding:.6rem .9rem; transition:.15s;
}
button.ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- auth ---------- */
.auth-view{ margin-top:6vh; }
.auth-card{ text-align:center; display:flex; flex-direction:column; gap:.8rem; }
.auth-brand{ font-size:1.5rem; font-weight:800; color:var(--accent); }
.auth-sub{ color:var(--muted); font-size:.9rem; margin-bottom:.4rem; }
#au-step-form, #au-step-code, #sp-actions{ display:flex; flex-direction:column; gap:.7rem; }
/* Sign in / Sign up: two icon buttons side by side, centred in the card. */
#au-step-choose{ display:flex; flex-direction:row; justify-content:center; align-items:center; gap:1.4rem; margin:.8rem 0 .2rem; }
.auth-choice.btn-icon{ width:64px; height:64px; border-radius:50%; padding:0; flex:0 0 64px; }
.auth-choice.ghost{ border-width:1px; }
.auth-choice:hover{ transform:translateY(-1px); }
.au-info{ font-size:.85rem; color:var(--muted); }
.auth-msg{ min-height:1.2em; font-size:.85rem; color:var(--accent); font-weight:600; }

/* ---------- player ---------- */
.player-card{ position:relative; text-align:center; padding:3.1rem 1.6rem 2.2rem; }
/* Public / Private capsule — top-right of the Player card */
.mode-switch{
  position:absolute; top:.85rem; right:.85rem; z-index:2;
  display:inline-flex; padding:3px; gap:2px;
  background:var(--bg2); border:1px solid var(--line); border-radius:999px;
}
.mode-seg{
  font:inherit; font-size:.7rem; font-weight:600; line-height:1;
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 10px; border:none; border-radius:999px;
  background:transparent; color:var(--muted); cursor:pointer;
  transition:background .15s, color .15s;
}
.mode-seg svg{ display:block; }
.mode-seg:hover{ color:var(--text); }
.mode-seg.active{ background:var(--accent); color:#0B3D2E; }
.mode-seg.active:hover{ color:#0B3D2E; }

.live{ display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:1.4rem; }
.live .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); animation:blink 1.4s ease-in-out infinite; }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.2} }
body.paused .live .dot{ animation:none; opacity:.35; }
.spinner{ width:30px; height:30px; margin:0 auto 1.1rem; border:3px solid rgba(212,175,55,.22); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; display:none; }
.spinner.show{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.pv-desc{ font-size:1.6rem; font-weight:700; line-height:1.45; margin:0 auto .9rem; max-width:640px; white-space:pre-wrap; overflow-wrap:break-word; word-break:break-word; }
.pv-creator{ font-size:1.05rem; color:var(--muted); }
/* progress bar + mute, side by side (mirrors the Playlist's shuffle button) */
.pv-row{ display:flex; align-items:center; gap:.9rem; max-width:420px; margin:1.8rem auto 0; }
.pv-row .pv-progress{ flex:1; min-width:0; margin:0; }
.pv-mute{
  flex:0 0 44px; width:44px; height:44px; padding:0;
  border:none; border-radius:50%; cursor:pointer;
  background:var(--accent); color:#0B3D2E;
  box-shadow:0 6px 18px rgba(212,175,55,.28);
  transition:filter .15s, transform .05s, background .15s, color .15s;
}
.pv-mute:hover{ filter:brightness(1.07); }
.pv-mute:active{ transform:translateY(1px); }
/* muted reads as "off": the gold drains out of the button */
.pv-mute.muted{
  background:var(--bg2); color:var(--muted);
  border:1px solid var(--line); box-shadow:none;
}
.pv-mute.muted:hover{ color:var(--accent); border-color:var(--accent); }

.pv-progress{ max-width:420px; margin:1.8rem auto 0; }
.pv-bar{ height:6px; background:rgba(255,255,255,.12); border-radius:999px; overflow:hidden; }
.pv-fill{ height:100%; width:0%; background:var(--accent); border-radius:999px; transition:width .25s linear; }
.pv-times{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted); margin-top:.45rem; font-variant-numeric:tabular-nums; }
/* listener count, under the progress bar (public station only) */
.listeners{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:1rem; font-size:.76rem; color:var(--muted); font-variant-numeric:tabular-nums;
}
.listeners svg{ display:block; opacity:.85; }

/* Track info card, below the player */
.info-card{ text-align:left; }
.info-card .np-head{ text-align:center; margin-bottom:.8rem; }
.info-rows{ display:grid; grid-template-columns:auto 1fr; gap:.45rem .9rem; margin:0; }
.info-rows dt{ color:var(--muted); font-size:.76rem; white-space:nowrap; padding-top:.1rem; }
.info-rows dd{ margin:0; font-size:.86rem; color:var(--text); overflow-wrap:anywhere; }
.info-acts{ display:flex; gap:.5rem; justify-content:center; margin-top:1.1rem; flex-wrap:wrap; }
.info-acts button{ display:inline-flex; align-items:center; gap:.4rem; }
.info-acts svg{ display:block; }
.info-msg{ min-height:1.1em; margin-top:.6rem; text-align:center; font-size:.78rem;
           color:var(--accent); overflow-wrap:anywhere; }

.empty{ color:var(--muted); font-size:.95rem; line-height:1.5; margin-top:.6rem; }
.empty b{ color:var(--accent); }
.tap-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(11,61,46,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); border-radius:12px; }
.tapbtn{ font:inherit; font-weight:700; color:#0B3D2E; background:var(--accent); border:none; border-radius:999px; padding:1rem 1.6rem; font-size:1.05rem; cursor:pointer; box-shadow:0 12px 30px rgba(212,175,55,.35); }

/* ---------- playlist ---------- */
.add-row{ display:flex; gap:.55rem; align-items:flex-start; }
.add-row textarea{ flex:1; }
.add-row .primary{ white-space:nowrap; }
.add-btns{ display:flex; flex-direction:column; gap:.45rem; flex:0 0 auto; }

/* drag MP3s onto the card */
.dropzone{ position:relative; transition:border-color .15s, background .15s; border-radius: 12px 12px 0 0 !important; }
.dropzone.dragover{ border-color:var(--accent); background:rgba(212,175,55,.10); }
.dropzone.dragover::after{
  content:'Drop MP3 files to upload';
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:rgba(11,61,46,.82); color:var(--accent);
  font-weight:700; font-size:.95rem; pointer-events:none;
}

/* upload progress */
.up-bar{ height:5px; margin-top:.6rem; background:rgba(255,255,255,.12); border-radius:999px; overflow:hidden; display:none; }
.up-bar.show{ display:block; }
.up-fill{ height:100%; width:0%; background:var(--accent); border-radius:999px; transition:width .12s linear; }
.pl-status{ min-height:1.1em; font-size:.82rem; color:var(--accent); margin-top:.6rem; }
.now-card{ text-align:center; border-radius:  0 0 12px 12px !important; }
.np-head{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:.55rem; }
.np-title{ font-size:1.05rem; font-weight:700; line-height:1.35; }
.np-creator{ font-size:.82rem; color:var(--muted); margin-top:.25rem; }
.np-row{ display:flex; align-items:center; gap:.8rem; margin-top:.9rem; }
.np-row .np-progress{ flex:1; min-width:0; margin-top:0; }
.np-shuffle{
  flex:0 0 38px; width:38px; height:38px; padding:0;
  border:none; border-radius:50%; cursor:pointer;
  background:var(--accent); color:#0B3D2E;
  box-shadow:0 6px 18px rgba(212,175,55,.28);
  transition:filter .15s, transform .05s;
}
.np-shuffle:hover{ filter:brightness(1.07); }
.np-shuffle:active{ transform:translateY(1px); }
.np-progress{ margin-top:.9rem; }
.np-bar{ height:6px; background:rgba(255,255,255,.12); border-radius:999px; overflow:hidden; }
.np-fill{ height:100%; width:0%; background:var(--accent); border-radius:999px; transition:width .25s linear; }
.np-times{ display:flex; justify-content:space-between; font-size:.7rem; color:var(--muted); margin-top:.4rem; font-variant-numeric:tabular-nums; }
.bar2{ display:flex; gap:.55rem; align-items:center; }
.bar2 input{ flex:1; min-width:0; }

/* thumbnails on/off capsule, next to the search field */
.thumb-switch{
  flex:0 0 auto; display:inline-flex; gap:1px; padding:2px;
  background:var(--bg2); border:1px solid var(--line); border-radius:999px;
}
.thumb-seg{
  width:30px; height:30px; padding:0; border:none; border-radius:50%;
  background:transparent; color:var(--muted); cursor:pointer; line-height:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.thumb-seg svg{ display:block; }
.thumb-seg:hover{ color:var(--text); }
.thumb-seg.active{ background:var(--accent); color:#0B3D2E; }
.thumb-seg.active:hover{ color:#0B3D2E; }

/* thumbnails hidden -> tighter rows, so more tracks fit on screen */
.tracklist.no-thumbs li{ padding:.34rem .2rem; gap:.55rem; }
.tracklist.no-thumbs li.group-head{ padding:.45rem .4rem; }
.sharelist.no-thumbs li{ padding:.34rem .2rem; gap:.55rem; }
.tracklist{ list-style:none; display:flex; flex-direction:column; }
.tracklist li{ display:flex; align-items:center; gap:.7rem; padding:.55rem .2rem; border-bottom:1px solid rgba(255,255,255,.1); }
.tracklist li.muted{ color:var(--muted); justify-content:center; padding:1rem; border:none; }
.tracklist img{ width:52px; height:39px; object-fit:cover; border-radius:.25rem; background:#000; flex-shrink:0; }
.tracklist .meta{ flex:1; min-width:0; }
.tracklist .t{ font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tracklist .c{ color:var(--muted); font-size:.78rem; display:flex; align-items:center; gap:.4rem; }
.acts{ display:flex; gap:.35rem; flex-shrink:0; }
.mini{ font:inherit; font-size:.8rem; font-weight:600; padding:.4rem .7rem; border-radius:.5rem; border:1px solid transparent; background:var(--accent); color:#0B3D2E; cursor:pointer; }
.mini.danger{ background:transparent; color:var(--danger); border-color:rgba(255,138,138,.35); }
.mini:hover{ filter:brightness(1.07); }

/* ---------- icon-only buttons ---------- */
/* Square, centred, no text. The accessible name comes from aria-label/title. */
.btn-icon{ display:inline-flex; align-items:center; justify-content:center; gap:0; line-height:0; }
.btn-icon svg{ display:block; }
.add-row .primary.btn-icon{ padding:0; width:46px; flex:0 0 46px; height:46px; }
.add-btns .ghost.btn-icon{ padding:0; width:46px; height:38px; }
.mini.btn-icon{ padding:0; width:34px; height:32px; }
.topbar .ghost.btn-icon{ padding:0; width:38px; height:36px; flex:0 0 38px; }

/* ---------- confirm dialog ---------- */
.modal-back{
  position:fixed; inset:0; z-index:60; padding:1rem;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,20,15,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:fade .15s ease;
}
.modal{
  width:100%; max-width:360px; text-align:center;
  background:rgba(14,43,33,.96);
  border:1px solid var(--panel-border); border-radius:12px;
  padding:1.4rem 1.25rem;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.modal-msg{ font-size:.95rem; line-height:1.5; margin-bottom:1.2rem; overflow-wrap:break-word; }
.modal-input{ margin-bottom:.5rem; text-align:center; }
.modal-err{ min-height:1.1em; font-size:.78rem; color:var(--danger); margin-bottom:.7rem; }
.modal-acts{ display:flex; gap:.6rem; justify-content:center; }
.modal-acts button{ flex:1; max-width:150px; }

/* shared-with-you */
.share-card .np-head{ margin-bottom:.7rem; }
.sharelist{ list-style:none; display:flex; flex-direction:column; }
.sharelist li{ display:flex; align-items:center; gap:.7rem; padding:.5rem .2rem; border-bottom:1px solid rgba(255,255,255,.1); }
.sharelist li:last-child{ border-bottom:none; }
.sharelist img{ width:52px; height:39px; object-fit:cover; border-radius:.25rem; background:#000; flex-shrink:0; }
.sharelist .meta{ flex:1; min-width:0; text-align:left; }
.sharelist .t{ font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sharelist .c{ color:var(--muted); font-size:.78rem; }

/* count badge on the Playlist tab */
.tab{ position:relative; }
.tab-badge{
  position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:var(--danger); color:#3a0d0d;
  font-size:.62rem; font-weight:800; line-height:17px; text-align:center;
}

/* secondary action button in a track row (share) */
.mini.ghosty{ background:transparent; color:var(--muted); border-color:var(--line); }
.mini.ghosty:hover{ color:var(--accent); border-color:var(--accent); }

/* collapsible "Shared by …" group headers */
.tracklist li.group-head{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .4rem; margin-top:.4rem; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.1);
  color:var(--accent); font-size:.78rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; user-select:none;
}
.tracklist li.group-head:hover{ background:rgba(212,175,55,.07); border-radius:6px; }
.gh-chev{ display:flex; transition:transform .18s; }
.tracklist li.group-head.closed .gh-chev{ transform:rotate(-90deg); }
.gh-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gh-count{
  flex:0 0 auto; background:rgba(212,175,55,.18); color:var(--accent);
  border-radius:999px; padding:.1rem .45rem; font-size:.7rem;
}

/* currently playing row */
.tracklist li.playing{
  background:rgba(212,175,55,.10);
  box-shadow:inset 3px 0 0 var(--accent);   /* left bar via shadow: keeps the row square-cornered */
  border-radius:6px;
}
.tracklist li.playing .t{ color:var(--accent); }

/* status chips */
.chip{ font-size:.66rem; font-weight:700; padding:.1rem .45rem; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; display:inline-flex; align-items:center; gap:.3rem; }
.chip.ok{ background:rgba(126,217,167,.16); color:var(--ok); }
.chip.bad{ background:rgba(255,138,138,.16); color:var(--danger); cursor:help; }
.chip.pend{ background:rgba(212,175,55,.18); color:var(--accent); }
.chip.tiny{ font-size:.58rem; font-weight:600; padding:.08rem .38rem; letter-spacing:.02em;
             background:rgba(255,255,255,.08); color:var(--muted);
             font-variant-numeric:tabular-nums; white-space:nowrap; }
.chip.queued{ background:rgba(255,255,255,.10); color:var(--muted); }
.mini-spin{ width:9px; height:9px; border:2px solid rgba(212,175,55,.35); border-top-color:var(--accent); border-radius:50%; display:inline-block; animation:spin .7s linear infinite; }

@media (max-width:380px){
  /* keep the capsule inside narrow screens: icons only */
  .mode-seg span{ display:none; }
  .mode-seg{ padding:6px 9px; }
}

@media (max-width:480px){
  .topbar{ gap:.5rem; padding:.6rem .7rem; }
  .topbar .brand{ font-size:.98rem; }
  button.sm{ font-size:.68rem; padding:.32rem .6rem; }
  .tab{ padding:.35rem .6rem; font-size:.85rem; }
  .pv-desc{ font-size:1.35rem; }
}