/* ============================================================================
   Social layer — waves, activity, Radio Passport, Week in sound.
   Mockups: docs/mockups/web-social/index.html. Uses the app's tokens only.
   ========================================================================== */

/* ---- shared bits ---------------------------------------------------------- */
.soc-av{ border-radius:50%; display:grid; place-items:center; flex:none; overflow:hidden; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--a,#7c5cff),var(--b,#4f3bc0)); }
.soc-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.soc-logo{ position:relative; border-radius:11px; flex:none; display:grid; place-items:center; overflow:hidden; color:#fff;
  font-family:var(--disp); font-weight:800; letter-spacing:.02em;
  background:linear-gradient(135deg,var(--a,#7c5cff),var(--b,#4f3bc0)); }
.soc-logo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#fff; }
.soc-pill{ display:inline-flex; align-items:center; gap:7px; font:700 12px/1 var(--sans); color:var(--muted);
  padding:8px 12px; border-radius:999px; border:1px solid var(--border-2); background:rgba(255,255,255,.03); cursor:pointer;
  transition:color .15s,border-color .15s,background .15s; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.soc-pill:active{ color:var(--text); border-color:var(--accent); }
.soc-pill.accent{ color:#fff; background:var(--accent); border-color:transparent; }
.soc-pill.ghost{ color:var(--accent); }
.soc-h{ font-family:var(--disp); font-weight:800; letter-spacing:-.01em; }
.soc-lbl{ font:700 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.soc-card{ background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--border); border-radius:18px; }
@keyframes soc-pop{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes soc-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes soc-spin{ to{ transform:rotate(360deg); } }
.soc-spin{ width:18px; height:18px; border-radius:50%; border:2px solid var(--border-2); border-top-color:var(--accent); animation:soc-spin .8s linear infinite; }
@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto !important; } }

/* radio tab badge (unseen waves) */
.tab .wbadge{ position:absolute; top:3px; right:calc(50% - 22px); min-width:16px; height:16px; padding:0 4px; border-radius:9px;
  background:#ff5a8a; color:#fff; font:800 10px/16px var(--sans); text-align:center; box-shadow:0 0 10px rgba(255,90,138,.6); }

/* hero "Send a wave" pill */
.h-wave{ margin-top:12px; }

/* ---- waves inbox (Radio) ---------------------------------------------------- */
.waves-box{ margin:0 0 14px; position:relative; z-index:2; }
.waves-head{ display:flex; align-items:center; justify-content:space-between; margin:0 4px 10px; }
.waves-head .soc-h{ font-size:15px; display:flex; align-items:center; gap:8px; }
.waves-head .cnt{ font:700 11px/1 var(--sans); color:var(--muted); padding:4px 8px; border-radius:99px; background:var(--panel-2); border:1px solid var(--border); }
.wave-swipe{ position:relative; margin-bottom:12px; border-radius:22px; overflow:hidden;
  transition:max-height .32s ease, margin .32s ease, opacity .25s ease; max-height:420px; }
.wave-swipe.gone{ max-height:0; margin-bottom:0; opacity:0; }
.wave-swipe .act{ position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding-right:24px; gap:8px;
  font:800 13px/1 var(--sans); color:#ff8a96; background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,90,107,.28)); }
.wave{ position:relative; overflow:hidden; border-radius:22px; padding:16px; border:1px solid rgba(255,255,255,.1);
  background:#1b1330; touch-action:pan-y; user-select:none; -webkit-user-select:none;
  animation:soc-pop .4s cubic-bezier(.2,.8,.2,1) backwards; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.wave.drag{ transition:none; }
.wave .mood{ position:absolute; inset:0; z-index:0;
  background:radial-gradient(280px 170px at 88% -6%,hsla(var(--h1),90%,62%,.55),transparent 70%),
             radial-gradient(260px 190px at -4% 108%,hsla(var(--h2),85%,58%,.5),transparent 70%); }
.wave > *:not(.mood){ position:relative; z-index:1; }
.wave-top{ display:flex; align-items:center; gap:10px; font:700 12.5px/1.2 var(--sans); padding-right:40px; }
.wave-top .when{ color:rgba(255,255,255,.6); font-weight:600; }
.wave .x{ position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; z-index:3; cursor:pointer;
  display:grid; place-items:center; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85); font:800 13px/1 var(--sans); touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.wave .x:active{ background:rgba(0,0,0,.6); }
.wave .msg{ font:700 19px/1.28 var(--disp); margin:12px 0 14px; word-break:break-word; }
.wave .msg.none{ font-size:15px; opacity:.8; font-weight:600; }
.wave-go{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:14px; background:rgba(0,0,0,.36); }
.wave-go .t{ flex:1; min-width:0; }
.wave-go .t b{ display:block; font:800 13.5px/1.25 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wave-go .t span{ font:600 11.5px/1.3 var(--sans); opacity:.72; }
.wave-play{ width:40px; height:40px; border-radius:50%; flex:none; border:0; cursor:pointer; background:#fff; color:#14101f;
  display:grid; place-items:center; font-size:14px; transition:transform .15s; touch-action:manipulation; }
.wave-play:active{ transform:scale(.92); }
.wave-play.on{ background:var(--ok); color:#06241a; }
.wave-react{ display:flex; gap:8px; margin-top:12px; }
.wave-react button{ width:40px; height:34px; border-radius:12px; cursor:pointer; font-size:16px; line-height:1; color:#fff;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.12); transition:transform .15s,background .15s; touch-action:manipulation; }
.wave-react button.on{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.5); transform:translateY(-1px); }
.wave-react button:active{ transform:scale(.9); }

/* banner (a wave just arrived) */
.wave-banner{ position:fixed; z-index:90; left:50%; top:max(12px,env(safe-area-inset-top)); width:min(calc(100% - 24px),440px);
  transform:translate(-50%,-140%); transition:transform .45s cubic-bezier(.2,.9,.25,1.1);
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:20px; cursor:pointer;
  background:rgba(28,24,48,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(124,92,255,.38); box-shadow:0 16px 44px rgba(0,0,0,.55); }
.wave-banner.show{ transform:translate(-50%,0); }
.wave-banner.hidden{ display:none; }
.wave-banner .t{ flex:1; min-width:0; }
.wave-banner .t b{ display:block; font:800 13.5px/1.25 var(--sans); }
.wave-banner .t span{ display:block; font:500 12px/1.3 var(--sans); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* undo bar */
.soc-undo{ position:fixed; z-index:95; left:50%; bottom:calc(168px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  width:min(calc(100% - 24px),420px); display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-radius:14px; font:600 13px/1.2 var(--sans); background:rgba(36,36,48,.96);
  border:1px solid var(--border-2); backdrop-filter:blur(10px); box-shadow:0 10px 30px rgba(0,0,0,.5); animation:soc-fade .25s ease both; }
.soc-undo.hidden{ display:none; }
.soc-undo button{ background:none; border:0; color:var(--accent); font:800 13px/1 var(--sans); cursor:pointer; padding:6px 4px; }

/* ---- send-a-wave sheet -------------------------------------------------------- */
.soc-dim{ position:fixed; inset:0; z-index:96; background:rgba(3,3,6,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .25s; }
.soc-dim.show{ opacity:1; }
.soc-sheet{ position:fixed; z-index:97; left:50%; bottom:0; width:min(100%,460px); transform:translate(-50%,105%);
  transition:transform .38s cubic-bezier(.2,.9,.25,1); padding:10px 18px calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#1a1a24,#121218); border:1px solid var(--border-2); border-bottom:0; border-radius:28px 28px 0 0;
  box-shadow:0 -20px 60px rgba(0,0,0,.6); max-height:min(90vh, calc(100dvh - env(safe-area-inset-top) - 14px)); overflow:auto; overscroll-behavior:contain; }   /* dvh = the VISIBLE height on iOS (vh counts the hidden browser bars, which pushed the top corners off-screen) */
.soc-sheet.show{ transform:translate(-50%,0); }
.soc-head{ position:sticky; top:0; z-index:3; height:44px; margin:-10px -18px 0; padding-top:10px; touch-action:none;
  background:linear-gradient(180deg,#1a1a24 72%,rgba(26,26,36,0)); }
.soc-grab{ width:40px; height:4px; border-radius:4px; background:var(--border-2); margin:0 auto; }
.soc-x{ position:absolute; top:8px; right:14px; width:32px; height:32px; border-radius:50%; border:0; display:grid; place-items:center;
  background:rgba(255,255,255,.07); color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.soc-x:active{ background:rgba(255,255,255,.14); color:var(--text); }
.sheet-st{ display:flex; align-items:center; gap:12px; padding:12px 0 4px; }
.sheet-st b{ display:block; font:700 14px/1.3 var(--sans); }
.sheet-st span{ font:500 12px/1.3 var(--sans); color:var(--muted); }
.sheet-friends{ display:flex; gap:14px; margin:14px 0 4px; overflow-x:auto; padding:6px 4px 8px; scrollbar-width:none; }
.sheet-friends::-webkit-scrollbar{ display:none; }
.fr{ outline:0; -webkit-tap-highlight-color:transparent; flex:none; width:60px; text-align:center; background:none; border:0; color:var(--muted); font:600 11.5px/1.2 var(--sans); cursor:pointer; padding:0; touch-action:manipulation; }
.fr .wrap{ display:block; position:relative; width:54px; height:54px; margin:0 auto 6px; border-radius:50%; transition:box-shadow .2s,transform .2s; }
.fr.sel{ color:var(--text); }
.fr.sel .wrap{ box-shadow:0 0 0 2px #15151c,0 0 0 4px var(--accent),0 0 20px rgba(124,92,255,.5); transform:scale(1.04); }
.fr .ck{ position:absolute; right:-3px; bottom:-3px; width:20px; height:20px; border-radius:50%; background:var(--accent); display:none;
  place-items:center; font-size:11px; border:2px solid #15151c; }
.fr.sel .ck{ display:grid; }
.fr span.n{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sheet-note{ width:100%; margin-top:12px; border:1px solid var(--border-2); border-radius:14px; padding:13px 14px; font:500 16px/1.3 var(--sans);
  color:var(--text); background:rgba(255,255,255,.03); outline:0; }
.sheet-note:focus{ border-color:var(--accent); }
.sheet-chips{ display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.sheet-count{ text-align:right; font:600 11px/1 var(--sans); color:var(--faint); margin-top:6px; }
.sheet-cta{ width:100%; margin-top:14px; padding:15px; border-radius:16px; border:0; cursor:pointer; color:#fff; font:800 15px/1 var(--sans);
  background:linear-gradient(100deg,var(--accent-2),var(--accent)); box-shadow:0 8px 30px rgba(124,92,255,.35); transition:opacity .2s,transform .15s; touch-action:manipulation; }
.sheet-cta:disabled{ opacity:.4; box-shadow:none; cursor:default; }
.sheet-cta:not(:disabled):active{ transform:scale(.985); }
.sheet-empty{ padding:22px 6px; color:var(--muted); font:500 14px/1.5 var(--sans); text-align:center; }

/* ---- activity (People) ------------------------------------------------------- */
#activityBox{ margin:0 0 18px; }
.act-head{ display:flex; align-items:center; justify-content:space-between; margin:0 4px 10px; }
.act-head .soc-h{ font-size:15px; }
.act-list{ padding:4px 0; overflow:hidden; }
.act-row{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--border); font:500 13.5px/1.35 var(--sans); }
.act-row:last-child{ border-bottom:0; }
.act-row .txt{ flex:1; min-width:0; }
.act-row .txt b{ font-weight:800; }
.act-row .sub{ display:block; font:500 12px/1.3 var(--sans); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act-row .em{ font-size:20px; flex:none; }
.act-row.click{ cursor:pointer; }
.act-row{ transition:opacity .25s, transform .25s; }
.act-row.gone{ opacity:0; transform:translateX(-16px); }
.act-x{ flex:none; width:28px; height:28px; border-radius:50%; border:0; background:transparent; color:var(--faint); cursor:pointer;
  font:700 12px/1 var(--sans); display:grid; place-items:center; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.act-x:hover{ color:var(--text); background:rgba(255,255,255,.08); }
.act-x:active{ background:rgba(255,255,255,.14); }
.act-empty{ padding:18px 14px; color:var(--muted); font:500 13px/1.5 var(--sans); }

/* ============================================================================
   RADIO PASSPORT
   ========================================================================== */
#passportBody{ padding-top:6px; scroll-margin-top:64px; }
.pp-top{ padding:18px 4px 0; }
.pp-big{ font:800 44px/1 var(--disp); letter-spacing:-.02em; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pp-big small{ font:700 14px/1.2 var(--sans); color:var(--muted); letter-spacing:0; }
.pp-map{ position:relative; margin:10px -6px 0; touch-action:pan-y; }
.pp-map canvas{ width:100%; display:block; }
.pp-tip{ position:absolute; pointer-events:none; z-index:3; transform:translate(-50%,-130%); padding:6px 10px; border-radius:10px; white-space:nowrap;
  background:rgba(14,14,20,.94); border:1px solid var(--border-2); font:700 12px/1 var(--sans); opacity:0; transition:opacity .12s; }
.pp-tip.on{ opacity:1; }
.pp-legend{ display:flex; gap:14px; flex-wrap:wrap; padding:2px 6px 14px; font:600 11px/1 var(--sans); color:var(--faint); }
.pp-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:-1px; box-shadow:0 0 8px currentColor; background:currentColor; }
.pp-goal{ margin:4px 0 18px; padding:14px 16px; display:flex; align-items:center; gap:14px; }
.pp-goal .t{ flex:1; font:700 13.5px/1.3 var(--sans); }
.pp-goal .t em{ font-style:normal; color:#fbbf24; }
.pp-bar{ height:6px; border-radius:6px; background:var(--panel-2); overflow:hidden; margin-top:8px; }
.pp-bar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); transition:width .9s cubic-bezier(.2,.8,.2,1); }
.pp-goal .n{ font:800 18px/1 var(--disp); }
.pp-sec{ margin:20px 4px 10px; }
.pp-stamps{ display:flex; gap:12px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.pp-stamps::-webkit-scrollbar{ display:none; }
.stamp{ flex:none; width:112px; border-radius:16px; padding:14px 8px 11px; text-align:center; cursor:pointer; position:relative;
  background:var(--panel); border:1px solid var(--border); color:inherit; font:inherit; transition:border-color .2s; touch-action:manipulation; }
.stamp:active{ border-color:var(--c); }
.seal{ width:64px; height:64px; border-radius:50%; margin:0 auto 9px; display:grid; place-items:center; font:800 19px/1 var(--disp); letter-spacing:.04em;
  color:var(--c); border:2px solid var(--c);
  box-shadow:inset 0 0 0 4px var(--panel),inset 0 0 0 5.5px color-mix(in srgb,var(--c) 50%,transparent),0 0 22px color-mix(in srgb,var(--c) 35%,transparent);
  transform:rotate(var(--r,-8deg)); }
.stamp b{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; font:700 12.5px/1.3 var(--sans); min-height:2.6em; overflow-wrap:anywhere; }
.stamp span.m{ font:500 11px/1.3 var(--sans); color:var(--muted); }
.stamp .new{ position:absolute; top:8px; right:8px; font:800 9.5px/1 var(--sans); letter-spacing:.08em; color:#0b0b10;
  background:linear-gradient(90deg,#ffd76a,#ff9ccf); padding:3px 6px; border-radius:99px; }
.pp-all{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.pp-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:var(--panel); border:1px solid var(--border); cursor:pointer;
  color:inherit; font:inherit; text-align:left; touch-action:manipulation; }
.pp-row .c{ width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; font:800 11px/1 var(--disp);
  color:var(--c); border:1.5px solid var(--c); }
.pp-row > span:last-child{ min-width:0; flex:1; }
.pp-row b{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; font:700 12.5px/1.25 var(--sans); overflow-wrap:anywhere; }
.pp-row span.m{ font:500 11px/1.3 var(--sans); color:var(--muted); }
.pp-note{ margin:16px 6px 0; font:500 12px/1.5 var(--sans); color:var(--faint); }
.pp-empty{ text-align:center; padding:34px 18px 10px; color:var(--muted); font:500 14px/1.55 var(--sans); }
.pp-empty .soc-h{ font-size:20px; color:var(--text); margin-bottom:8px; }

/* country detail */
.pp-back{ display:inline-flex; align-items:center; gap:6px; padding:8px 4px; margin-bottom:6px; background:none; border:0; color:var(--muted);
  font:700 13px/1 var(--sans); cursor:pointer; }
.pp-det{ text-align:center; padding:6px 0 4px; animation:soc-pop .4s ease backwards; }
.pp-det .seal{ width:118px; height:118px; font-size:38px; margin:0 auto 16px; animation:soc-stamp .7s cubic-bezier(.2,1.3,.3,1) both; }
@keyframes soc-stamp{ 0%{ transform:scale(2.4) rotate(calc(var(--r,-8deg) - 18deg)); opacity:0; } 60%{ opacity:1; } 100%{ transform:rotate(var(--r,-8deg)); } }
.pp-det h3{ font:800 26px/1.15 var(--disp); margin:0; }
.pp-det .meta{ color:var(--muted); font:500 13px/1.4 var(--sans); margin-top:5px; }
.pp-stlist{ padding:2px 0; overflow:hidden; }
.pp-st{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-bottom:1px solid var(--border); cursor:pointer; }
.pp-st:last-child{ border-bottom:0; }
.pp-st .soc-logo{ width:42px; height:42px; font-size:13px; }
.pp-st b{ display:block; font:700 13.5px/1.3 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-st span.m{ font:500 12px/1.3 var(--sans); color:var(--muted); }
.pp-st .go{ margin-left:auto; color:var(--muted); }
.pp-friends{ display:flex; align-items:center; gap:10px; padding:2px 4px; flex-wrap:wrap; }
.pp-friends .soc-av{ width:38px; height:38px; font-size:14px; cursor:pointer; }
.pp-friends span{ color:var(--muted); font:500 12.5px/1.4 var(--sans); }

/* ============================================================================
   WEEK IN SOUND (story)
   ========================================================================== */
.week-card{ position:relative; overflow:hidden; border-radius:18px; margin:0 0 12px; padding:10px 10px 10px 12px; cursor:pointer; border:1px solid rgba(255,255,255,.1);
  background:#150c28; display:flex; align-items:center; gap:12px; animation:soc-pop .4s ease backwards; touch-action:manipulation; }
.week-card .mood{ position:absolute; inset:0;
  background:radial-gradient(220px 90px at 100% 0%,rgba(255,107,154,.45),transparent 70%),radial-gradient(240px 110px at 0% 120%,rgba(124,92,255,.55),transparent 70%); }
.week-card > *:not(.mood){ position:relative; }
.wk-eq{ width:38px; height:38px; border-radius:11px; flex:none; display:flex; align-items:flex-end; justify-content:center; gap:3px; padding:9px 0 8px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); }
.wk-eq i{ width:3.5px; border-radius:2px; background:#fff; height:30%; animation:eq 1.2s ease-in-out infinite alternate; animation-delay:calc(var(--i,0) * -.2s); --h:100%; }
.wk-eq i:nth-child(2){ --i:1; --h:70%; } .wk-eq i:nth-child(3){ --i:2; --h:90%; } .wk-eq i:nth-child(4){ --i:3; --h:55%; }
.week-card .t{ flex:1; min-width:0; }
.week-card .t b{ display:block; font:800 14.5px/1.2 var(--disp); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.week-card .t span{ display:block; font:500 12px/1.35 var(--sans); opacity:.78; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.week-card .go{ flex:none; padding:8px 13px; border-radius:99px; background:#fff; color:#14101f; font:800 12px/1 var(--sans); }
.week-card .x{ flex:none; width:28px; height:28px; border-radius:50%; border:0; background:transparent; color:rgba(255,255,255,.55);
  font:700 12px/1 var(--sans); cursor:pointer; display:grid; place-items:center; }
.week-card .x:active{ background:rgba(255,255,255,.15); }
.week-btn{ width:100%; margin:14px 0 4px; padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.14); color:#fff; cursor:pointer; position:relative; overflow:hidden;
  display:flex; align-items:center; gap:12px; font:800 14px/1.2 var(--sans); text-align:left; background:#1a0f2e; touch-action:manipulation; }
.week-btn .mood{ position:absolute; inset:0; background:radial-gradient(200px 100px at 100% 0%,rgba(255,107,154,.5),transparent 70%),radial-gradient(220px 120px at 0% 100%,rgba(124,92,255,.6),transparent 70%); }
.week-btn > *:not(.mood){ position:relative; }
.week-btn small{ display:block; font:500 12px/1.3 var(--sans); opacity:.75; margin-top:2px; }

#story{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(2,2,5,.86);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transition:opacity .25s; }
#story.show{ opacity:1; }
.st-frame{ position:relative; width:min(100vw,440px); height:min(100dvh,860px); overflow:hidden; background:#07040f; color:#fff;
  border-radius:0; box-shadow:0 30px 90px rgba(0,0,0,.7); user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; touch-action:pan-y; }
@media (min-width:480px) and (min-height:700px){ .st-frame{ border-radius:34px; border:1px solid rgba(255,255,255,.1); } }
.st-bg{ position:absolute; inset:0; overflow:hidden; transition:background-color 1.2s; background-color:var(--bg0,#0a0615); }
.st-blob{ transition:background-color 1.2s; position:absolute; width:130%; aspect-ratio:1; border-radius:50%; filter:blur(60px); opacity:.85; will-change:transform; }
.st-blob.b1{ left:30%; top:-30%; background:var(--c1,#ff6b9a); animation:blob1 14s ease-in-out infinite alternate; }
.st-blob.b2{ left:-60%; top:40%; background:var(--c2,#7c5cff); animation:blob2 17s ease-in-out infinite alternate; }
.st-blob.b3{ left:10%; top:70%; width:90%; background:var(--c3,#22d3ee); opacity:.5; animation:blob3 19s ease-in-out infinite alternate; }
@keyframes blob1{ to{ transform:translate(-18%,22%) scale(1.15); } }
@keyframes blob2{ to{ transform:translate(26%,-14%) scale(.9); } }
@keyframes blob3{ to{ transform:translate(-30%,-24%) scale(1.25); } }
.st-grain{ position:absolute; inset:0; opacity:.07; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.st-fx{ position:absolute; inset:0; pointer-events:none; z-index:4; width:100%; height:100%; }
.st-segs{ position:absolute; z-index:6; top:calc(12px + env(safe-area-inset-top)); left:14px; right:14px; display:flex; gap:5px; }
.st-segs i{ flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.26); overflow:hidden; }
.st-segs i b{ display:block; height:100%; width:0; background:#fff; border-radius:3px; }
.st-segs i.done b{ width:100%; }
.st-segs i.cur b{ animation:segfill var(--dur,6.5s) linear forwards; animation-play-state:var(--play,running); }
@keyframes segfill{ to{ width:100%; } }
.st-top{ position:absolute; z-index:6; top:calc(26px + env(safe-area-inset-top)); left:14px; right:14px; display:flex; align-items:center; gap:10px; font:700 12.5px/1.2 var(--sans); }
.st-top .soc-av{ width:30px; height:30px; font-size:12px; background:rgba(255,255,255,.2); }
.st-top .sh{ margin-left:auto; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.2); color:#fff; display:grid; place-items:center; cursor:pointer; }
.st-top .sh + .x{ margin-left:0; }
.st-top .x{ margin-left:auto; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.2); color:#fff; font:800 14px/1 var(--sans); cursor:pointer; }
.st-tap{ position:absolute; z-index:5; top:70px; bottom:0; }
.st-tap.l{ left:0; width:32%; } .st-tap.r{ right:0; width:68%; }
.st-slide{ position:absolute; z-index:3; inset:0; padding:calc(84px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; pointer-events:none; }
.st-slide.pe{ pointer-events:auto; }
.st-slide .rv{ opacity:0; transform:translateY(18px); }
.st-slide.in .rv{ animation:rv .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--d,0) * 1ms); }
@keyframes rv{ to{ opacity:1; transform:none; } }
.st-kick{ font:700 11.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.st-giant{ font:800 clamp(78px,24vw,112px)/.9 var(--disp); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.st-giant sup{ font-size:.42em; letter-spacing:0; vertical-align:baseline; margin-left:4px; opacity:.75; }
.st-title{ font:800 clamp(36px,11vw,50px)/1.02 var(--disp); letter-spacing:-.03em; }
.st-sub{ font:500 15px/1.45 var(--sans); color:rgba(255,255,255,.8); }
.st-glass{ background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:20px; padding:14px; }
.st-pill{ display:inline-flex; align-items:center; gap:7px; font:800 13px/1 var(--sans); padding:9px 13px; border-radius:99px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); }
.st-grow{ flex:1; }
.st-hint{ text-align:center; font:600 12px/1 var(--sans); opacity:.6; }

/* equalizer strip (slide 1) */
.st-eq{ display:flex; align-items:flex-end; gap:5px; height:84px; }
.st-eq i{ flex:1; border-radius:4px; background:linear-gradient(180deg,#fff,rgba(255,255,255,.25)); height:20%; animation:eq 1.3s ease-in-out infinite alternate; animation-delay:calc(var(--i) * -.17s); opacity:.85; }
@keyframes eq{ 0%{ height:12%; } 50%{ height:var(--h); } 100%{ height:24%; } }

/* week bars (slide 2) */
.st-bars{ display:flex; align-items:flex-end; gap:9px; height:190px; margin:10px 0 8px; }
.st-bars div{ flex:1; height:100%; display:flex; align-items:flex-end; }
.st-bars div i{ display:block; width:100%; border-radius:10px 10px 5px 5px; background:rgba(255,255,255,.24); height:0; transition:height 1.1s cubic-bezier(.2,.9,.2,1); transition-delay:calc(var(--i) * 70ms + 250ms); min-height:5px; }
.st-bars div.pk i{ background:#fff; box-shadow:0 0 34px rgba(255,255,255,.6); }
.st-slide.in .st-bars i{ height:var(--h); }
.st-days{ display:flex; gap:9px; font:700 11.5px/1 var(--sans); opacity:.8; }
.st-days span{ flex:1; text-align:center; }
.st-days span.pk{ opacity:1; color:#fff; }

/* hour dial (slide 3) */
.st-dial{ position:relative; width:min(100%,330px); aspect-ratio:1; margin:6px auto 0; }
.st-dial svg{ width:100%; height:100%; overflow:visible; }
.st-dial .bar{ transform-origin:50% 50%; stroke-linecap:round; stroke-dasharray:var(--len) 200; stroke-dashoffset:var(--len); }
.st-slide.in .st-dial .bar{ animation:dial .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--i) * 28ms + 300ms); }
@keyframes dial{ to{ stroke-dashoffset:0; } }
.st-dial .mid{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; pointer-events:none; }
.st-dial .mid b{ font:800 30px/1 var(--disp); letter-spacing:-.03em; }
.st-dial .mid span{ font:700 11px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; opacity:.7; margin-top:6px; }
.st-persona{ display:flex; align-items:center; gap:14px; }
.st-persona .e{ font-size:38px; line-height:1; }
.st-persona b{ display:block; font:800 17px/1.2 var(--disp); }
.st-persona span{ font:500 13px/1.4 var(--sans); opacity:.8; }

/* top waves (slide 4) */
.st-top3{ display:flex; flex-direction:column; gap:10px; }
.st-trow{ display:flex; align-items:center; gap:13px; position:relative; overflow:hidden; }
.st-trow .n{ font:800 40px/1 var(--disp); letter-spacing:-.04em; width:30px; text-align:center; flex:none; }
.st-trow .soc-logo{ width:54px; height:54px; border-radius:14px; font-size:15px; }
.st-trow .t{ flex:1; min-width:0; }
.st-trow .t b{ display:block; font:800 15px/1.25 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-trow .t span{ font:500 12px/1.3 var(--sans); opacity:.8; }
.st-trow .share{ position:absolute; left:0; bottom:0; height:3px; width:0; background:#fff; border-radius:3px; transition:width 1.2s cubic-bezier(.2,.9,.2,1) .6s; opacity:.9; }
.st-slide.in .st-trow .share{ width:var(--w); }
.st-trow.first{ background:rgba(255,255,255,.22); }
.st-trow.first .n{ font-size:48px; }

/* discoveries (slide 5) */
.st-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.st-stat b{ display:block; font:800 46px/1 var(--disp); letter-spacing:-.03em; }
.st-stat span{ font:600 12px/1.35 var(--sans); opacity:.8; }
.st-seals{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.st-seals .seal{ width:56px; height:56px; font-size:16px; margin:0; --c:#fff; box-shadow:inset 0 0 0 3px rgba(0,0,0,.25),0 0 18px rgba(255,255,255,.3); background:rgba(255,255,255,.1); }
.st-seals .seal.new{ --c:#ffd76a; box-shadow:inset 0 0 0 3px rgba(0,0,0,.25),0 0 24px rgba(255,215,106,.7); }
.st-slide.in .st-seals .seal{ animation:soc-stamp .6s cubic-bezier(.2,1.3,.3,1) both; animation-delay:calc(var(--i) * 120ms + 500ms); }

/* podium (slide 6) */
.st-pod{ display:flex; align-items:flex-end; justify-content:center; gap:10px; height:210px; margin-top:10px; }
.st-pod .col{ width:30%; display:flex; flex-direction:column; align-items:center; gap:8px; }
.st-pod .col .soc-av{ width:56px; height:56px; font-size:20px; border:2px solid rgba(255,255,255,.4); }
.st-pod .col.me .soc-av{ border-color:#fff; box-shadow:0 0 28px rgba(255,255,255,.7); }
.st-pod .col .name{ font:800 12.5px/1.2 var(--sans); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-pod .col .blk{ width:100%; border-radius:14px 14px 4px 4px; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.25); height:0;
  display:grid; place-items:start center; padding-top:10px; font:800 26px/1 var(--disp); transition:height 1s cubic-bezier(.2,.9,.2,1); transition-delay:.5s; }
.st-slide.in .st-pod .col .blk{ height:var(--bh); }
.st-pod .col.me .blk{ background:rgba(255,255,255,.34); }
.st-chips{ display:flex; flex-wrap:wrap; gap:8px; }

/* progress (slide 7) */
.st-rank{ text-align:center; }
.st-rank .ic{ font-size:78px; line-height:1; filter:drop-shadow(0 0 26px var(--rc,#c084fc)); }
.st-rank h3{ font:800 30px/1.1 var(--disp); margin:10px 0 2px; letter-spacing:-.02em; color:var(--rc,#fff); }
.st-meter{ height:10px; border-radius:10px; background:rgba(255,255,255,.18); overflow:hidden; margin-top:16px; }
.st-meter i{ display:block; height:100%; width:0; border-radius:10px; background:linear-gradient(90deg,var(--rc,#c084fc),#fff); transition:width 1.4s cubic-bezier(.2,.9,.2,1) .5s; }
.st-slide.in .st-meter i{ width:var(--w); }

/* final poster (slide 8) */
.st-poster{ position:relative; margin:0 auto; width:100%; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; perspective:900px; }
.st-poster canvas{ max-width:100%; max-height:100%; border-radius:22px; box-shadow:0 22px 60px rgba(0,0,0,.55); transition:transform .25s ease-out; }
.st-actions{ display:flex; gap:10px; margin-top:14px; }
.st-actions button{ flex:1; padding:14px 8px; border-radius:15px; cursor:pointer; font:800 14px/1 var(--sans); border:1px solid rgba(255,255,255,.3); color:#fff; background:rgba(255,255,255,.16); touch-action:manipulation; }
.st-actions button.p{ flex:1; background:#fff; color:#14101f; border-color:#fff; }
.st-load{ position:absolute; inset:0; display:grid; place-items:center; z-index:4; }

/* profile entry: the compact week row (shares .week-card) */
.week-card.wr{ margin:16px 0 14px; padding:9px 9px 9px 11px; gap:11px; }
.wk-chip{ flex:none; padding:7px 10px; border-radius:99px; cursor:pointer; font:700 11.5px/1 var(--sans); color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.wk-chip.on{ background:#fff; color:#14101f; border-color:#fff; }
.wk-chip:active{ transform:scale(.96); }
@media (max-width:380px){ .week-card.wr .t span{ display:none; } }

/* ---- popover menu + dialog -------------------------------------------------- */
.soc-menu{ position:fixed; z-index:120; min-width:190px; padding:6px; border-radius:16px; opacity:0; transform:translateY(-4px) scale(.98); transform-origin:top right;
  transition:opacity .14s, transform .14s; background:rgba(28,28,38,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border-2); box-shadow:0 18px 50px rgba(0,0,0,.55); }
.soc-menu.show{ opacity:1; transform:none; }
.soc-mi{ display:flex; align-items:center; gap:11px; width:100%; padding:11px 12px; border:0; border-radius:11px; background:none; color:var(--text);
  font:600 14px/1 var(--sans); cursor:pointer; text-align:left; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.soc-mi:hover, .soc-mi:active{ background:rgba(255,255,255,.07); }
.soc-mi .ic{ width:20px; text-align:center; font-size:15px; }
.soc-mi.danger{ color:#ff7d8c; }
.soc-pill.danger{ color:#fff; background:#e5484d; border-color:transparent; }
.soc-dialog{ position:fixed; z-index:260; left:50%; top:50%; width:min(calc(100% - 40px),380px); padding:20px; border-radius:22px;
  transform:translate(-50%,-46%) scale(.96); opacity:0; transition:opacity .18s, transform .18s;
  background:linear-gradient(180deg,#1c1c26,#14141b); border:1px solid var(--border-2); box-shadow:0 30px 80px rgba(0,0,0,.6); }
.soc-dialog.show{ opacity:1; transform:translate(-50%,-50%); }
.soc-dialog h3{ margin:0 0 6px; font:800 17px/1.3 var(--disp); }
.soc-dialog p{ margin:0 0 4px; font:500 14px/1.5 var(--sans); color:var(--muted); }
.soc-dialog .sheet-note{ margin-top:10px; }
.soc-dialog .row{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.soc-dialog .soc-pill{ padding:11px 16px; font-size:13px; }

/* ---- profile "Week in sound" row: quiet, native-looking, no entrance animation ---- */
.week-card.wr{ background:rgba(255,255,255,.035); border:1px solid var(--border); animation:none; cursor:default; }
.week-card.wr .mood{ display:none; }
.week-card.wr .wk-eq{ background:linear-gradient(135deg,var(--accent-2),var(--accent)); border:0; width:34px; height:34px; border-radius:10px; padding:8px 0 7px; }
.week-card.wr .wk-eq i{ animation:none; height:55%; }
.week-card.wr .wk-eq i:nth-child(2){ height:85%; } .week-card.wr .wk-eq i:nth-child(3){ height:68%; } .week-card.wr .wk-eq i:nth-child(4){ height:95%; }
.week-card.wr .t b{ font-size:14px; }
.week-card.wr .t span{ color:var(--muted); opacity:1; }
.week-card.wr .wk-chip{ background:transparent; border:1px solid var(--border-2); color:var(--muted); padding:7px 11px; }
.week-card.wr .wk-chip.on{ color:var(--accent); background:var(--accent-dim); border-color:var(--accent-dim); }
.week-card.wr .wk-chip:hover{ color:var(--text); }

/* ============================================================================
   RADIO STAGE (2026-10-27): stories strip, lower-third, station sheets
   Mockup: docs/mockups/radio-stage
   ========================================================================== */
.story-strip{ position:relative; z-index:2; display:flex; gap:14px; overflow-x:auto; padding:2px 2px 14px; margin:0 -2px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.story-strip::-webkit-scrollbar{ display:none; }
.story-strip.hidden{ display:none; }
.sb{ flex:none; width:56px; padding:0; border:0; background:none; box-shadow:none; outline:none; -webkit-appearance:none; appearance:none; text-align:center; color:var(--muted); cursor:pointer; font:600 10.5px/1.2 var(--sans);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.sb.on{ color:var(--text); }
.sb:active .sring{ transform:scale(.94); }
.sb .lbl{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:6px; }
.sring{ position:relative; display:block; width:54px; height:54px; border-radius:50%; padding:3px; margin:0 auto;
  background:conic-gradient(from 210deg,#7c5cff,#ff5c9a,#ffd76a,#7c5cff); transition:transform .15s; }
.sring.seen{ background:rgba(255,255,255,.16); }
.sring .in{ display:grid; place-items:center; width:100%; height:100%; border-radius:50%; border:3px solid var(--bg); overflow:hidden; background:var(--panel-2); }
.sring .in .soc-av{ width:100% !important; height:100% !important; }
.sring .wv{ position:absolute; right:-3px; bottom:-3px; width:20px; height:20px; border-radius:50%; background:#1f1a38; border:2px solid var(--bg); display:grid; place-items:center; font-size:11px; }
.sring.week .in{ background:linear-gradient(135deg,#4f3bc0,#7c5cff); display:flex; align-items:flex-end; justify-content:center; gap:3px; padding:14px 0 13px; }
.sring.week .in i{ width:4px; border-radius:2px; background:#fff; display:block; }
.sring.week.seen .in{ background:linear-gradient(135deg,#34305a,#4a4380); }
.sring.add{ background:none; border:1.5px dashed rgba(255,255,255,.3); padding:0; display:grid; place-items:center; color:var(--muted);
}
.sring.add svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* wave inside a sheet */
.soc-sheet .wave{ animation:none; touch-action:auto; }
.sx{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
.sx-b{ background:none; border:0; color:var(--muted); font:700 13px/1 var(--sans); padding:8px 4px; cursor:pointer; }
.sx-b.acc{ color:var(--accent); }
.sx-n{ font:600 12px var(--sans); color:var(--faint); }
.soc-l{ font:700 11px/1 var(--sans); letter-spacing:.14em; color:var(--muted); margin:0 0 12px; }

/* ---- lower-third --------------------------------------------------------- */
.lt{ position:relative; z-index:3; margin-top:2px; padding-top:2px; cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; }
.lt.hidden{ display:none; }
.lt.nt{ margin-top:4px; }
.lt .hair{ display:none; }
.lt.flash .lt-title{ text-shadow:0 0 22px rgba(124,92,255,.95), 0 2px 20px rgba(0,0,0,.6); }
.lt .lrow{ display:flex; align-items:center; gap:14px; margin-top:6px; }
.lt.nt .lrow{ margin-top:0; }
.lt-art{ flex:none; }
.lt-art:empty{ display:none; }
.lt-body{ flex:1; min-width:0; }
.lt-artist{ font:700 16px/1.3 var(--sans); color:rgba(255,255,255,.88); white-space:nowrap; overflow:hidden; text-shadow:0 2px 14px rgba(0,0,0,.6); }
.lt-title{ font:800 24px/1.18 var(--disp); letter-spacing:-.015em; color:#fff; white-space:nowrap; overflow:hidden; margin-top:1px; text-shadow:0 2px 20px rgba(0,0,0,.6); }
.lt-heart{ color:#ff5c9a; font-size:.7em; vertical-align:.12em; }
.lt .pa{ display:flex; align-items:center; width:38px; }
.lt .pa .eq{ transform:scale(.95); transform-origin:left center; }
.lt .cover{ position:relative; display:block; width:60px; height:60px; border-radius:14px; overflow:hidden;
  background:linear-gradient(135deg,#3a2f7a,#6d5bd0); box-shadow:0 8px 24px rgba(0,0,0,.55), 0 0 34px var(--covercol-soft, rgba(124,92,255,.28)); }
.lt .cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lt .cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55)); }
.lt .cover .eq{ position:absolute; left:8px; bottom:7px; z-index:2; transform:scale(.5); transform-origin:left bottom; }
.lt-who{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; background:none; border:0; padding:4px; cursor:pointer;
  color:var(--muted); font:600 11px/1 var(--sans); -webkit-tap-highlight-color:transparent; }
.lt-who.hidden{ display:none; }
.lt .pty{ display:flex; }
.lt .pty .soc-av{ border:2px solid var(--bg); margin-left:-7px; }
.lt .pty .soc-av:first-child{ margin-left:0; }
.lt-prev{ display:block; margin-top:6px; padding:4px 0; background:none; border:0; text-align:left; color:var(--faint); font:500 10px/1.3 var(--sans);
  cursor:pointer; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lt-prev b{ color:var(--muted); font-weight:700; } .lt-prev em{ color:var(--accent); font-style:normal; font-weight:800; margin-left:2px; }
.lt-prev.hidden{ display:none; }
.heart-burst{ position:absolute; left:46px; top:12px; z-index:5; font-size:34px; color:#ff5c9a; pointer-events:none; text-shadow:0 0 22px rgba(255,92,154,.8);
  animation:hburst .85s ease-out forwards; }
@keyframes hburst{ 0%{ opacity:0; transform:translateY(8px) scale(.4); } 25%{ opacity:1; transform:translateY(-6px) scale(1.25); } 100%{ opacity:0; transform:translateY(-46px) scale(1); } }


/* ---- station history + who's listening sheets -------------------------------- */
.hist-list{ display:flex; flex-direction:column; }
.hr{ position:relative; display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.hr:last-child{ border-bottom:0; }
.hr .cv{ position:relative; flex:none; width:44px; height:44px; border-radius:11px; overflow:hidden; }
.hr .cv img{ width:100%; height:100%; object-fit:cover; display:block; }
.hr .cvm{ display:grid; place-items:center; width:100%; height:100%; color:#fff; font:800 13px var(--disp); background:linear-gradient(135deg,var(--a,#7c5cff),var(--b,#4f3bc0)); }
.hr .pb{ flex:1; min-width:0; }
.hr .pt1{ font:600 13px/1.3 var(--sans); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hr .pt2{ font:800 16px/1.25 var(--disp); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hr.now .pt1{ color:rgba(255,255,255,.85); }
.hr .ht{ font:600 12px var(--sans); color:var(--faint); font-variant-numeric:tabular-nums; }
.hr.now .ht{ color:var(--accent); font-weight:800; }
.hr .hs{ color:#fbbf24; font-size:15px; }
.hint{ margin-top:12px; text-align:center; font:500 12px var(--sans); color:var(--faint); }
.who-row{ display:flex; align-items:center; gap:13px; width:100%; padding:11px 2px; background:none; border:0; border-bottom:1px solid var(--border); color:var(--text); cursor:pointer; text-align:left; }
.who-row:last-child{ border-bottom:0; }
.who-row b{ display:block; font:700 14px var(--sans); } .who-row i{ font:500 12px var(--sans); font-style:normal; color:var(--muted); }
.who-row em{ margin-left:auto; color:var(--muted); font-style:normal; }
.pr-x{ flex:none; width:34px; height:34px; border:0; background:none; color:#ff5c9a; cursor:pointer; display:grid; place-items:center; }
.pr-x svg{ width:18px; height:18px; fill:currentColor; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.lt:focus{ outline:none; }
.lt:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:12px; }

/* lower-third v3: dancing bars + big text, cover on the right, friends/history underneath. No frame. */
.lt .lrow{ gap:15px; align-items:center; margin-top:8px; }
.lt .pa{ flex:none; display:flex; align-items:center; width:38px; height:44px; }
.lt .pa.hidden{ display:none; }
.lt .pa .eq{ transform:none; }
.lt-cover{ flex:none; position:relative; width:64px; height:64px; border-radius:14px; overflow:hidden; background:linear-gradient(135deg,#3a2f7a,#6d5bd0);
  box-shadow:0 8px 24px rgba(0,0,0,.55), 0 0 34px var(--covercol-soft, rgba(124,92,255,.28)); }
.lt-cover.hidden{ display:none; }
.lt-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lt-sub{ display:flex; align-items:center; gap:10px; margin-top:8px; min-height:0; }
.lt-sub .lt-prev{ flex:1; min-width:0; margin:0; }
.lt-sub .lt-who{ margin-left:auto; flex-direction:row; align-items:center; gap:8px; }
.lt.nt .lrow{ display:none; }
.lt-sub:empty{ display:none; }

.lt-title.lt-note{ font:600 15px/1.35 var(--sans); letter-spacing:0; color:var(--muted); text-shadow:none; margin-top:0; white-space:normal; }

/* lower-third text sizes = the profile's NOW PLAYING plate (.pnow-name / .pnow-track) */
.lt-artist{ font:600 12.5px/1.35 var(--sans); color:var(--muted); text-shadow:none; margin:0; }
.lt-title{ font:700 16px/1.3 var(--disp); letter-spacing:0; color:var(--text); text-shadow:none; margin-top:3px; }
.lt-heart{ font-size:.85em; }
.lt .pa{ height:34px; }
.lt-cover{ width:52px; height:52px; border-radius:12px; }
.lt-title.lt-note{ font:600 12.5px/1.35 var(--sans); color:var(--muted); margin-top:0; }

/* lower-third v4: cover left (big, in its own colour glow) · text · dancing bars right */
.lt .lrow{ gap:14px; }
.lt-cover{ width:76px; height:76px; border-radius:16px; }
.lt .pa{ width:auto; justify-content:flex-end; }
.lt .pa .eq i{ box-shadow:0 0 6px rgba(255,255,255,.35); }   /* glow per bar (a filter on the whole animated block draws a light rectangle on iOS) */
.lt-body{ min-width:0; }
.lt-sub{ margin-top:10px; }
.lt .pa{ flex:none; min-width:38px; }
.lt-cover{ flex:none; }
.lt-cover{ border-radius:2px; }
.lt-cover img{ border-radius:0; }

/* ---- lower-third feedback: badge (✓ copied · ♥ saved), no text highlight ---- */
.lt, .lt *{ -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-touch-callout:none; }
.lt ::selection{ background:transparent; }
.lt.flash .lt-title{ text-shadow:none; }
.lt .lrow{ position:relative; }
.lt-badge{ flex:none; display:none; width:24px; height:24px; border-radius:50%; place-items:center; color:#fff; z-index:2;
  border:2px solid var(--bg); box-shadow:0 4px 14px rgba(0,0,0,.5); }
.lt-badge.on{ display:grid; }
.lt-badge svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.lt-badge.str svg, .lt-badge.off svg{ fill:currentColor; stroke:none; }
.lt-badge.str{ background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#3b2600; box-shadow:0 4px 16px rgba(245,158,11,.5); }   /* a saved SONG = amber star (stations keep the pink heart) */
.lt-badge.ok{ background:linear-gradient(135deg,#34d399,#10b981); box-shadow:0 4px 16px rgba(16,185,129,.5); }
.lt-badge.off{ background:#3a3550; color:rgba(255,255,255,.75); }
.lt-badge.off svg{ fill:none; stroke:currentColor; stroke-width:2; }
.lt-badge.pop{ animation:badgepop .5s cubic-bezier(.2,1.5,.3,1); }
@keyframes badgepop{ 0%{ transform:scale(0); opacity:0; } 55%{ transform:scale(1.3); opacity:1; } 100%{ transform:scale(1); } }
/* with a cover the badge sits on its bottom-right corner; otherwise it rides beside the text */
.lt.hascover .lt-badge{ position:absolute; left:62px; top:58px; }
.lt-heart{ display:none; }
.hr .hs{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#3b2600; }
.hr .hs svg{ width:12px; height:12px; fill:currentColor; stroke:none; }

/* copied: the "copy" glyph (two sheets) on the brand accent, not a green tick */
.lt-badge.ok{ background:linear-gradient(135deg,#8b6bff,#6d4cf0); box-shadow:0 4px 16px rgba(124,92,255,.55); }
.lt-badge.ok svg{ width:13px; height:13px; stroke-width:2.1; }
.lt.brk .lt-body, .lt.brk .lt-cover{ opacity:.6; transition:opacity .4s; }   /* last song held through an ad break */
/* the dancing bars sit a touch smaller (~80%) so they read as an accent, not a second headline */
.lt .pa{ min-width:31px; height:28px; }
.lt .pa .eq{ transform:scale(.8); transform-origin:right center; }
.lt-prev .nx{ color:var(--accent); font-weight:800; letter-spacing:.02em; }