:root{
    --bg:#0d0e12; --surf:#1a1c22; --ink:#e7e8ee; --muted:#a0a4ae; --muted2:#8b8e97;
    --acc:#ff7a45; --acc-2:#e0461f; --live:#ff6b6b; --ok:#6ee0a8; --focus:#ffd9c2;
    --rise:-7px -7px 16px rgba(255,255,255,.028), 8px 8px 20px rgba(0,0,0,.6);
    --rise-sm:-4px -4px 9px rgba(255,255,255,.022), 5px 5px 12px rgba(0,0,0,.55);
    --press:inset 4px 4px 9px rgba(0,0,0,.6), inset -4px -4px 9px rgba(255,255,255,.03);
    --inset:inset 5px 5px 12px rgba(0,0,0,.55), inset -5px -5px 12px rgba(255,255,255,.025);
    --sb-thumb:#3a3d47; --sb-thumb-hover:#4a4e5a;
    --line:rgba(255,255,255,.04); color-scheme:dark;
    --rail:236px; --bar-h:86px; font-size:15px;
  }
  /* —— light theme (contrast-checked to WCAG AA) —— */
  :root[data-theme="light"]{
    --bg:#e7e9ef; --surf:#edeff4; --ink:#1d2027; --muted:#565a64; --muted2:#5e636e;
    --acc:#bd3d0a; --acc-2:#9e3408; --live:#c62a2a; --ok:#0f7536; --focus:#bd3d0a;
    --rise:-7px -7px 16px rgba(255,255,255,.9), 8px 8px 20px rgba(0,0,0,.12);
    --rise-sm:-4px -4px 9px rgba(255,255,255,.85), 5px 5px 12px rgba(0,0,0,.10);
    --press:inset 4px 4px 9px rgba(0,0,0,.13), inset -4px -4px 9px rgba(255,255,255,.9);
    --inset:inset 5px 5px 12px rgba(0,0,0,.10), inset -5px -5px 12px rgba(255,255,255,.85);
    --sb-thumb:#c4c8d2; --sb-thumb-hover:#aeb3bf;
    --line:rgba(0,0,0,.09); color-scheme:light;
  }
  :root[data-theme="light"] .skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}
  :root[data-theme="light"] .dock{box-shadow:0 -8px 26px rgba(0,0,0,.12)}
  :root[data-theme="light"] .userbtn{color:#fff}
  *{box-sizing:border-box;margin:0;padding:0}
  .mi{font-family:'Material Symbols Rounded';line-height:1;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;font-variation-settings:'FILL' 1,'wght' 400,'opsz' 24}
  .mi.o{font-variation-settings:'FILL' 0,'wght' 400,'opsz' 24}
  html{scrollbar-gutter:stable}
  /* custom scrollbars — applies to the page and every scroll area (panel, modals) */
  *{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
  ::-webkit-scrollbar{width:12px;height:12px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:10px;border:3px solid transparent;background-clip:content-box}
  ::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover);background-clip:content-box}
  ::-webkit-scrollbar-thumb:active{background:var(--acc);background-clip:content-box}
  ::-webkit-scrollbar-corner{background:transparent}
  body{background:var(--bg);color:var(--ink);font-family:"Montserrat",sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}
  button,input{font-family:inherit}
  a{color:var(--acc);text-decoration:none}
  .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  :focus{outline:none}
  :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:10px}
  .pcard:focus-visible,.lrow:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
  .pcard [data-info]:focus-visible,.lrow [data-info]:focus-visible,.tnm:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  /* skip link */
  .skip{position:fixed;top:-60px;left:12px;z-index:200;background:var(--acc);color:#1a1209;font-weight:500;padding:10px 16px;border-radius:10px;transition:top .15s}
  .skip:focus{top:12px;outline:3px solid var(--focus);outline-offset:2px}
  /* sleep timer */
  .sleepbtn{position:relative}
  .sleepbtn.on .mi{color:var(--acc)}
  .slbadge:empty{display:none}
  .slbadge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 3px;border-radius:9px;background:var(--acc);color:#1a1209;font:700 10px 'JetBrains Mono',monospace;display:flex;align-items:center;justify-content:center}
  .sleepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
  .sleepgrid button{padding:14px 0;border-radius:12px;border:none;background:var(--surf);box-shadow:var(--rise-sm);color:var(--ink);font-weight:600;cursor:pointer}
  .sleepgrid button:hover{box-shadow:var(--press)}
  .sleepgrid button.on{box-shadow:var(--press);color:var(--acc)}
  /* first-run */
  .frgrid{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
  .frgrid .chip{cursor:pointer}
  /* report */
  .repreasons{display:flex;flex-direction:column;gap:8px;margin-top:6px}
  .repradio{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;background:var(--surf);box-shadow:var(--inset);cursor:pointer;font-size:14px}
  .repradio input{accent-color:var(--acc)}
  .modal textarea{width:100%;background:var(--surf);box-shadow:var(--inset);border:none;border-radius:10px;color:var(--ink);padding:11px;font-family:inherit;resize:vertical}
  /* cookie consent */
  .consent{position:fixed;left:50%;transform:translateX(-50%) translateY(140%);bottom:14px;z-index:160;width:min(680px,calc(100vw - 24px));background:#f4f4f0;color:#16171b;border-radius:16px;padding:14px 16px;box-shadow:0 18px 50px rgba(0,0,0,.55);display:flex;gap:14px;align-items:center;flex-wrap:wrap;transition:transform .3s cubic-bezier(.2,.9,.3,1.2)}
  .consent.on{transform:translateX(-50%) translateY(0)}
  .consent .cb-body{flex:1;min-width:220px;font-size:13.5px;line-height:1.45}
  .consent .clink{background:none;border:none;color:var(--acc-2);font:inherit;font-weight:500;text-decoration:underline;cursor:pointer;padding:0}
  .consent .cb-acts{display:flex;gap:8px;flex-shrink:0}
  .consent .cb-acts button{border:none;border-radius:10px;padding:10px 14px;font-weight:500;cursor:pointer;font-size:13px}
  .consent #cReject{background:#e3e3dd;color:#16171b}
  .consent #cAccept.primary{background:#16171b;color:#fff}
  @media(max-width:560px){.consent{bottom:8px}.consent .cb-acts{width:100%}.consent .cb-acts button{flex:1}}

  /* ===== SIDEBAR ===== */
  .rail{position:fixed;top:14px;left:14px;bottom:calc(var(--bar-h) + 14px);width:var(--rail);background:var(--surf);border-radius:24px;box-shadow:var(--rise);padding:20px 14px;display:flex;flex-direction:column;gap:6px;z-index:50;transition:transform .25s}
  /* no player dock (e.g. News pages): rail bottom lines up with the footer's resting edge */
  body.no-dock .rail{bottom:14px}
  .rail .logo{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;margin-bottom:20px;background:none;border:none;cursor:pointer;text-align:left;color:inherit;font:inherit;width:100%}
  .rail .logo .dot{width:12px;height:12px;border-radius:50%;background:var(--acc);box-shadow:0 0 14px var(--acc);animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,122,69,.5)}70%{box-shadow:0 0 0 9px rgba(255,122,69,0)}100%{box-shadow:0 0 0 0 rgba(255,122,69,0)}}
  .rail .logo b{font-family:"Poppins";font-weight:500;letter-spacing:.16em;font-size:18px}
  .rail .logo span{color:var(--muted2);font-size:9px;font-family:"JetBrains Mono";display:block;margin-top:2px}
  .nav{display:flex;flex-direction:column;gap:4px}
  .nav button,.nav a.navlink{display:flex;align-items:center;gap:13px;background:none;border:none;color:var(--muted);font-weight:600;font-size:14px;padding:11px 13px;border-radius:13px;cursor:pointer;text-align:left;width:100%;text-decoration:none;box-sizing:border-box}
  .nav button .mi,.nav a.navlink .mi{font-size:21px}.nav button:hover,.nav a.navlink:hover{color:var(--ink)}
  .nav button.on,.nav a.navlink.on{color:var(--acc);box-shadow:var(--press)}
  .nav .ct{margin-left:auto;font-family:"JetBrains Mono";font-size:10px;color:var(--muted2)}
  .listbtn{display:flex;align-items:center;gap:11px;background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--ink);font-weight:500;font-size:13px;padding:12px 13px;border-radius:13px;cursor:pointer;margin-top:8px}
  .listbtn:active{box-shadow:var(--press)} .listbtn .mi{color:var(--acc)}
  .rail .spacer{flex:1}
  .acctcard{background:var(--surf);box-shadow:var(--inset);border-radius:16px;padding:13px;margin-top:8px}
  .acctcard .gt{font-weight:500;font-size:13px}.acctcard .gs{color:var(--muted);font-size:11.5px;margin:4px 0 10px;line-height:1.4}
  .signbtn{width:100%;background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--acc);border-radius:11px;padding:10px;font-weight:500;font-size:12.5px;cursor:pointer}
  .signbtn:active{box-shadow:var(--press)}
  .who{display:flex;align-items:center;gap:11px;cursor:pointer}
  .av{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ff9a6b,var(--acc-2));color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Poppins";font-weight:500;font-size:15px;flex-shrink:0}
  .who .nm{font-weight:500;font-size:13.5px}.who .em{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
  .railback{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:48;display:none}.railback.on{display:block}

  /* ===== MAIN ===== */
  /* flex column + min-height so the footer is pinned to the bottom and lines up with the fixed rail.
     bottom padding = the rail's bottom offset (clears the dock when present). */
  .app{margin-left:calc(var(--rail) + 28px);padding:16px 28px calc(var(--bar-h) + 14px) 0;max-width:none;display:flex;flex-direction:column;min-height:100vh}
  .app > #page{flex:1 0 auto}
  .topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .topbar .ham{display:none}   /* hidden on desktop — beats .hbtn{display:flex} */
  .search{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;border-radius:14px;padding:13px 16px;color:var(--muted);background:var(--surf);box-shadow:var(--inset)}
  .search input{flex:1;background:none;border:none;outline:none;color:var(--ink);font-size:14px}
  .search input::placeholder{color:var(--muted2)}
  .qclear{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:none;background:none;color:var(--muted);cursor:pointer;flex-shrink:0;padding:0}
  .qclear .mi{font-size:18px}
  .qclear:hover{color:var(--ink);background:var(--inset-bg,rgba(255,255,255,.06))}
  /* brief highlight when we scroll a card into view (e.g. after login resume / saved favourite) */
  .flash{animation:flashcard 1.6s ease-out}
  @keyframes flashcard{0%,18%{box-shadow:0 0 0 2px var(--acc),0 0 18px 2px rgba(255,122,69,.55)}100%{box-shadow:0 0 0 0 rgba(255,122,69,0)}}
  /* history pager (Recently played) */
  .pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:26px 0 8px}
  .pager .pg{min-width:40px;height:40px;padding:0 12px;border-radius:12px;border:none;background:var(--surf);box-shadow:var(--rise-sm);color:var(--muted);font-weight:600;font-size:13px;cursor:pointer}
  .pager .pg:hover:not(:disabled){color:var(--ink)} .pager .pg.on{color:var(--acc);box-shadow:var(--press)}
  .pager .pg:disabled{opacity:.4;cursor:default} .pager .dots{color:var(--muted2);padding:0 2px}
  .hbtn{width:48px;height:48px;border-radius:14px;background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--muted);cursor:pointer;font-size:21px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .hbtn:hover{color:var(--ink)} .hbtn:active{box-shadow:var(--press)} .hbtn.on{color:var(--acc);box-shadow:var(--press)}
  .loginbtn{display:flex;align-items:center;gap:9px;background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--ink);border-radius:14px;padding:0 16px;height:48px;font-weight:500;font-size:13.5px;cursor:pointer;flex-shrink:0}
  .userbtn{width:48px;height:48px;border-radius:14px;background:var(--acc);color:#15161b;border:none;cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:2px;box-shadow:0 5px 14px rgba(255,122,69,.4)}
  .userbtn:hover{filter:brightness(1.07)} .userbtn:active{transform:translateY(1px)}
  .loginbtn:active{box-shadow:var(--press)} .loginbtn .mi{color:var(--acc)}

  .banner{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0 8px;flex-wrap:wrap}
  .banner h1{font-family:"Poppins";font-weight:500;font-size:26px}
  .banner .sub{color:var(--muted);font-size:13px;margin-top:3px}
  .banner .sub b{color:var(--acc)}
  .statuspill{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;border-radius:12px;padding:9px 14px;box-shadow:var(--rise-sm);white-space:nowrap}
  .statuspill.ok{color:var(--ok)} .statuspill.amber{color:var(--acc)} .statuspill.down{color:var(--live)}
  .statuspill button{background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--acc);border-radius:9px;padding:6px 11px;font-weight:500;font-size:11.5px;cursor:pointer;margin-left:4px}
  .statuspill button:active{box-shadow:var(--press)}
  .dotlive{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse2 2s infinite}
  @keyframes pulse2{0%,100%{opacity:1}50%{opacity:.35}}
  .toggle .sw::after{transition:left .26s cubic-bezier(.34,1.56,.5,1),background .15s,box-shadow .15s}
  @media(max-width:760px){.statuspill{margin-top:8px}}
  .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 18px}
  .chips{display:flex;gap:8px;flex-wrap:wrap;flex:1}
  .chip{background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--muted);border-radius:11px;padding:9px 14px;font-weight:600;font-size:12.5px;cursor:pointer;white-space:nowrap}
  .chip:hover{color:var(--ink)} .chip.on{box-shadow:var(--press);color:var(--acc)}
  .seg{display:flex;background:var(--surf);box-shadow:var(--inset);border-radius:12px;padding:4px;gap:2px}
  .seg button{background:none;border:none;color:var(--muted);width:38px;height:36px;border-radius:9px;cursor:pointer;font-size:19px;display:flex;align-items:center;justify-content:center}
  .seg button.on{color:var(--acc);box-shadow:var(--rise-sm)}
  @media(max-width:640px){#seg{display:none}}  /* phones: cards only, no view switch */
  .sel{background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--ink);border-radius:12px;padding:0 38px 0 14px;height:44px;font-size:13px;font-weight:600;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808699' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
  .toggle{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);cursor:pointer;user-select:none}
  .sw{width:42px;height:24px;border-radius:12px;background:var(--surf);box-shadow:var(--inset);position:relative;flex-shrink:0}
  .sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:.15s}
  .sw.on::after{left:21px;background:var(--acc);box-shadow:0 0 10px rgba(255,122,69,.6)}

  /* ===== CARDS (grid) ===== */
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  @media(min-width:1550px){.grid{grid-template-columns:repeat(4,1fr)}}
  @media(min-width:1950px){.grid{grid-template-columns:repeat(5,1fr)}}
  @media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:580px){.grid{grid-template-columns:1fr}}
  /* affiliate ad slot */
  .adslot{grid-column:1/-1;background:var(--surf);box-shadow:var(--rise);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;border:1px dashed rgba(255,122,69,.28)}
  .adslot .adtop{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .adslot .adlabel{font-family:"JetBrains Mono";font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);flex-shrink:0}
  .adslot .adbody{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .adslot .adtag{font-family:"JetBrains Mono";font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);background:var(--surf);box-shadow:var(--rise-sm);border-radius:7px;padding:5px 9px;flex-shrink:0}
  .adslot .adtxt{flex:1;min-width:160px}
  .adslot .adtitle{font-weight:500;font-size:15px}
  .adslot .addesc{color:var(--muted);font-size:12.5px;margin-top:2px}
  .adslot .adimg{width:150px;height:auto;max-height:96px;border-radius:8px;object-fit:cover;flex-shrink:0}
  @media(max-width:600px){
    .adslot{padding:12px 14px}
    .adslot .adbody{flex-direction:column;align-items:stretch;gap:10px}
    .adslot .adtag{align-self:flex-start}
    .adslot .adimg{width:100%;max-height:170px}
    .adslot .adtxt{min-width:0}
    .adslot .adcta{justify-content:center}
  }
  .adslot .adcta{display:inline-flex;align-items:center;gap:6px;background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--acc);font-weight:500;font-size:12.5px;border-radius:12px;padding:10px 14px;cursor:pointer;flex-shrink:0;text-decoration:none}
  .adslot .adcta:active{box-shadow:var(--press)}
  .adslot .addisc{font-size:10.5px;color:var(--muted2);line-height:1.4}
  .adslot .adbrand{color:var(--muted)}
  .adfoot{margin-top:18px}
  .adrow td{padding:0!important;border-top:none!important}
  .adrow .adslot{border-radius:14px;margin:8px 0}
  .pcard{background:var(--surf);box-shadow:var(--rise);border-radius:18px;padding:14px 15px;display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;transition:transform .14s}
  .pcard:hover{transform:translateY(-2px)} .pcard.active,.lrow.active{box-shadow:0 0 0 2px var(--acc), var(--rise-sm)}
  .pcard.active{background:var(--surf)} .pcard.active .cn,.lrow.active .ln{color:var(--acc)}
  .cdisc{width:48px;height:48px;border-radius:50%;flex-shrink:0;background:var(--surf);box-shadow:var(--rise-sm);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .cdisc img{width:100%;height:100%;object-fit:cover;border-radius:50%}
  .pcard.active .cdisc,.lrow.active .cdisc{animation:spin 7s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .cdisc .cc{width:27px;height:27px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ff9a6b,var(--acc-2));display:flex;align-items:center;justify-content:center;font-family:"Poppins";font-weight:500;font-size:10px;color:#fff;box-shadow:var(--press)}
  .pc-main{flex:1;min-width:0;cursor:pointer}
  .cn{font-weight:500;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .badge{font-family:"JetBrains Mono";font-size:8px;letter-spacing:.08em;border-radius:5px;padding:2px 5px;text-transform:uppercase;flex-shrink:0}
  .b-live{color:var(--live);box-shadow:var(--rise-sm)} .b-load{color:var(--acc);box-shadow:var(--rise-sm)} .b-off{color:var(--muted2)}
  .cg{color:var(--muted);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .minispin{display:inline-block;width:8px;height:8px;border:2px solid rgba(255,122,69,.3);border-top-color:var(--acc);border-radius:50%;animation:spin .7s linear infinite;margin-right:4px;vertical-align:-1px}
  .cart{position:relative;flex-shrink:0;display:flex}
  .cstat{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:var(--surf);box-shadow:var(--rise-sm);display:none;align-items:center;justify-content:center;z-index:2}
  .cstat.on{display:flex}
  .cstat .minispin{margin:0}
  .cstat .livedot{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 6px var(--live);animation:pulse 2s infinite}
  .ico-btn{width:34px;height:34px;border-radius:50%;background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--muted);cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .ico-btn:hover{color:var(--ink)} .ico-btn:active{box-shadow:var(--press)} .ico-btn.fav.on,.ico-btn.on{color:var(--acc)}
  .cplay{width:42px;height:42px;border-radius:50%;background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--acc);cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .cplay:active{box-shadow:var(--press)}
  .chipbtn{background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--ink);border-radius:11px;padding:9px 14px;font-size:12.5px;font-weight:600;cursor:pointer;flex-shrink:0}
  .chipbtn:active{box-shadow:var(--press)} .chipbtn.on{color:var(--acc);box-shadow:var(--press)}
  .cdisc.dim{opacity:.4} .unavail-row .cn{color:var(--muted)}
  /* unavailable overlay */
  .unavail{position:absolute;inset:0;background:rgba(13,14,18,.92);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:10px}
  .unavail .em{font-size:24px}.unavail .ut{font-size:12.5px;color:var(--muted)}
  .unavail .ur{display:flex;gap:8px;margin-top:4px}
  .unavail button{background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--ink);border-radius:10px;padding:8px 12px;font-size:11.5px;font-weight:600;cursor:pointer}
  .unavail button.p{color:var(--acc)}

  /* list view */
  .listv{display:flex;flex-direction:column;gap:8px}
  .lrow{background:var(--surf);box-shadow:var(--rise-sm);border-radius:14px;padding:11px 14px;display:flex;align-items:center;gap:13px;position:relative;overflow:hidden}
  .lrow.active{box-shadow:var(--press)}
  .lrow .ln{font-weight:500;font-size:14px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
  .lrow .lg{color:var(--muted);font-size:12px;font-family:"JetBrains Mono"}
  @media(max-width:640px){.lrow{gap:10px}.lrow .lg + .lg{display:none}}
  /* table view */
  .tbl{width:100%;border-collapse:collapse;font-size:13.5px}
  .tbl th{text-align:left;color:var(--muted2);font-family:"JetBrains Mono";font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;cursor:pointer}
  .tbl td{padding:9px 10px;border-top:1px solid var(--line)}
  .tbl tr.active td{color:var(--acc)}
  .tbl .tpb{background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--acc);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:17px}
  .tbl .tnm{cursor:pointer}
  .tbl .tlogo{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;overflow:hidden;vertical-align:middle;margin-right:9px;box-shadow:var(--rise-sm)}
  .tbl .tlogo img{width:100%;height:100%;object-fit:cover}
  .tbl .tlogo .cc{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ff9a6b,var(--acc-2));color:#fff;font-family:"Poppins";font-weight:500;font-size:8px;display:flex;align-items:center;justify-content:center}

  .more{text-align:center;color:var(--muted2);font-family:"JetBrains Mono";font-size:11px;padding:24px}
  .empty{text-align:center;color:var(--muted);padding:46px 20px;border-radius:18px;box-shadow:var(--inset)}
  .empty .big{font-family:"Poppins";font-size:19px;color:var(--ink);margin-bottom:8px}
  .empty button{margin-top:14px;background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--acc);border-radius:12px;padding:11px 18px;font-weight:500;cursor:pointer}
  .skel{background:var(--surf);box-shadow:var(--rise);border-radius:18px;height:74px;position:relative;overflow:hidden}
  .skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);animation:sweep 1.3s infinite}
  @keyframes sweep{to{transform:translateX(100%)}}
  .colhead{font-family:"Poppins";font-weight:500;font-size:18px;margin:10px 0 12px}

  /* ===== DOCK ===== */
  .dock{position:fixed;left:0;right:0;bottom:0;height:var(--bar-h);z-index:55;background:var(--surf);display:flex;align-items:center;gap:16px;padding:0 22px calc(0px + env(safe-area-inset-bottom));box-shadow:0 -8px 26px rgba(0,0,0,.5);transition:transform .34s cubic-bezier(.2,.8,.3,1)}
  .dock.tucked{transform:translateY(120%)}
  body.no-dock .app{padding-bottom:14px}
  .ddisc{width:54px;height:54px;border-radius:50%;background:var(--surf);box-shadow:var(--rise-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
  .ddisc img{width:100%;height:100%;object-fit:cover;border-radius:50%}
  .ddisc .cc{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ff9a6b,var(--acc-2));display:flex;align-items:center;justify-content:center;font-family:"Poppins";font-weight:500;font-size:11px;color:#fff}
  .dock.playing .ddisc{animation:spin 7s linear infinite}
  .dmeta{min-width:0}.dn{font-weight:500;font-size:14px;display:flex;align-items:center;gap:8px}
  .eqbars{display:inline-flex;align-items:flex-end;gap:2px;height:13px}
  .eqbars i{width:3px;background:var(--acc);border-radius:2px;height:30%}
  .dock.playing .eqbars i{animation:bar 900ms ease-in-out infinite}
  .eqbars i:nth-child(2){animation-delay:.15s}.eqbars i:nth-child(3){animation-delay:.3s}.eqbars i:nth-child(4){animation-delay:.45s}
  @keyframes bar{0%,100%{height:25%}50%{height:100%}}
  .dg{color:var(--muted);font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
  .dctrl{margin-left:auto;display:flex;align-items:center;gap:11px}
  .vol{-webkit-appearance:none;appearance:none;width:108px;height:8px;border-radius:8px;background:var(--surf);box-shadow:var(--inset);outline:none;cursor:pointer}
  .vol::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--acc);cursor:pointer}
  .vol::-moz-range-thumb{width:17px;height:17px;border:none;border-radius:50%;background:var(--acc);cursor:pointer}
  .nb{width:46px;height:46px;border-radius:50%;background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--acc);cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center}
  .nb:active{box-shadow:var(--press)} .dmute{color:var(--muted)}
  @media(max-width:680px){.dock .dg,.dock .vol,.dock .dmute{display:none}}

  /* ===== INFO PANEL ===== */
  .pback{position:fixed;inset:0;background:rgba(8,8,11,.5);z-index:60;opacity:0;pointer-events:none;transition:.2s}.pback.on{opacity:1;pointer-events:auto}
  .panel{position:fixed;top:14px;right:14px;bottom:calc(var(--bar-h) + 14px);width:380px;max-width:calc(100vw - 28px);z-index:65;background:var(--surf);border-radius:24px;box-shadow:var(--rise);padding:24px;overflow-y:auto;transform:translateX(calc(100% + 22px));transition:transform .28s cubic-bezier(.2,.8,.3,1)}
  .panel.on{transform:none}
  @media(max-width:640px){
    .panel{top:0;left:0;right:0;bottom:var(--bar-h);width:auto;max-width:none;border-radius:24px 24px 0 0;padding:20px 18px 28px;transform:translateY(calc(100% + var(--bar-h) + 18px))}
    .pback{bottom:var(--bar-h)}
  }
  .panel .px{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:12px;background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--muted);cursor:pointer;font-size:17px}
  .pdisc{width:110px;height:110px;border-radius:50%;margin:6px auto 16px;background:var(--surf);box-shadow:var(--inset);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .pdisc img{width:74px;height:74px;border-radius:50%;object-fit:cover}
  .pdisc .cc{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ff9a6b,var(--acc-2));display:flex;align-items:center;justify-content:center;font-family:"Poppins";font-weight:500;font-size:22px;color:#fff;box-shadow:var(--rise-sm)}
  .panel h2{font-family:"Poppins";font-weight:500;font-size:22px;text-align:center;padding:0 30px}
  .panel .psub{color:var(--muted);font-size:13px;text-align:center;margin-top:5px}
  .panel-play{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;margin:16px auto 2px;background:var(--acc);color:#15161b;border:none;cursor:pointer;box-shadow:0 8px 22px rgba(255,122,69,.5)}
  .panel-play .mi{font-size:32px}
  .panel-play:active{transform:translateY(1px)}
  .np{background:var(--surf);box-shadow:var(--inset);border-radius:14px;padding:14px 16px;margin:18px 0}
  .np .l{font-family:"JetBrains Mono";font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);display:flex;align-items:center;gap:7px}
  .np .t{font-weight:500;font-size:14px;margin-top:6px;line-height:1.35}
  .np .t.m{color:var(--muted);font-weight:400;font-size:13px}
  .specs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .spec{font-family:"JetBrains Mono";font-size:11px;color:var(--ink);background:var(--surf);box-shadow:var(--rise-sm);border-radius:9px;padding:6px 11px}
  .lbl{font-family:"JetBrains Mono";font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin:18px 0 7px}
  .tagline{font-size:12.5px;color:var(--muted);line-height:1.7;word-break:break-word}
  .pacts{display:flex;flex-direction:column;gap:10px;margin-top:20px}
  .pbtn{display:flex;align-items:center;justify-content:center;gap:9px;border:none;border-radius:13px;padding:14px;font-weight:500;font-size:13.5px;cursor:pointer;background:var(--surf);box-shadow:var(--rise-sm);color:var(--ink)}
  .pbtn:active{box-shadow:var(--press)} .pbtn.prim{color:var(--acc)} .pbtn.fav.on{color:var(--acc)}

  /* ===== MODALS ===== */
  .mback{position:fixed;inset:0;background:rgba(8,8,11,.6);z-index:80;opacity:0;pointer-events:none;transition:.2s}.mback.on{opacity:1;pointer-events:auto}
  .modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%);z-index:85;width:min(420px,92vw);max-height:88vh;overflow-y:auto;background:var(--surf);box-shadow:var(--rise);border-radius:24px;padding:28px;opacity:0;pointer-events:none;transition:.2s}
  .modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
  .modal h2{font-family:"Poppins";font-weight:500;font-size:23px}
  .modal .lead{color:var(--muted);font-size:13.5px;margin-top:6px;line-height:1.5}
  .fld{margin-top:15px}.fld label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px;font-weight:600}
  .fld input,.fld textarea,.fld select{width:100%;background:var(--surf);box-shadow:var(--inset);border:none;outline:none;color:var(--ink);border-radius:12px;padding:13px 15px;font-size:14px}
  .fld textarea{resize:vertical;min-height:74px}
  .pwwrap{position:relative}
  .fld .pwwrap input{padding-right:48px}
  .pweye{position:absolute;top:0;right:0;height:100%;width:48px;display:flex;align-items:center;justify-content:center;background:none;box-shadow:none;border:none;color:var(--muted2);cursor:pointer;border-radius:0 12px 12px 0}
  .pweye:hover{color:var(--ink)} .pweye .mi{font-size:20px}
  .mbtn{width:100%;margin-top:20px;background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--acc);border-radius:13px;padding:14px;font-weight:500;font-size:14px;cursor:pointer}
  .mbtn:active{box-shadow:var(--press)} .mbtn.dim{color:var(--muted)}
  .mprov{display:flex;gap:10px;margin-top:12px}
  .mprov button{flex:1;background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--ink);border-radius:12px;padding:12px;font-weight:600;font-size:12.5px;cursor:pointer}
  .mswap{text-align:center;color:var(--muted);font-size:13px;margin-top:16px}.mswap a{cursor:pointer;font-weight:600}
  .mx{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:11px;background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--muted);cursor:pointer;font-size:16px}
  .mnote{text-align:center;color:var(--muted2);font-size:11.5px;margin-top:14px}
  .hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
  .code-in{letter-spacing:.5em;text-align:center;font-family:"JetBrains Mono";font-size:20px!important}
  .check{display:flex;gap:11px;align-items:flex-start;margin-top:14px;cursor:pointer}
  .check .box{width:24px;height:24px;border-radius:8px;background:var(--surf);box-shadow:var(--inset);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:transparent;font-size:15px}
  .check.on .box{color:var(--acc);box-shadow:var(--rise-sm)}
  .check span{font-size:12.5px;color:var(--muted);line-height:1.5}
  /* share grid */
  .sharegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
  .sharegrid button{background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--ink);border-radius:14px;padding:14px 4px;font-size:11px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px}
  .sharegrid button .mi{font-size:22px;color:var(--acc)}
  /* AI moderation */
  .modcheck{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .modcheck .ic{width:30px;height:30px;border-radius:50%;background:var(--surf);box-shadow:var(--inset);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--muted2);flex-shrink:0}
  .modcheck.run .ic{color:var(--acc)} .modcheck.pass .ic{color:var(--ok);box-shadow:var(--rise-sm)} .modcheck.flag .ic{color:var(--acc);box-shadow:var(--rise-sm)}
  .modcheck .mt{font-size:13.5px;font-weight:600}.modcheck .ms{color:var(--muted);font-size:11.5px}

  /* account page */
  .acctpage{display:grid;grid-template-columns:200px 1fr;gap:26px}
  .acctnav{display:flex;flex-direction:column;gap:5px}
  .acctnav button{display:flex;align-items:center;gap:11px;background:none;border:none;color:var(--muted);font-weight:600;font-size:14px;padding:11px 13px;border-radius:12px;cursor:pointer;text-align:left}
  .acctnav button.on{color:var(--acc);box-shadow:var(--press)}.acctnav button:hover{color:var(--ink)}
  .acctnav .closeacct{margin-top:auto;color:var(--muted2);font-size:12px;font-weight:500}
  .panelcard{background:var(--surf);box-shadow:var(--rise);border-radius:18px;padding:22px;margin-bottom:16px}
  .panelcard h3{font-family:"Poppins";font-weight:500;font-size:18px;margin-bottom:6px}
  .panelcard .row{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px}
  .panelcard .row:first-of-type{border-top:none}
  .panelcard .row .k{color:var(--muted)}
  .seg2{display:inline-flex;gap:6px;background:var(--surf);box-shadow:var(--inset);border-radius:13px;padding:5px}
  .seg2 button{display:inline-flex;align-items:center;gap:7px;background:none;border:none;color:var(--muted);font-weight:600;font-size:13px;padding:9px 16px;border-radius:9px;cursor:pointer}
  .seg2 button.on{color:var(--acc);box-shadow:var(--rise-sm)}
  .seg2 .mi{font-size:18px}
  .subrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
  .acctsec{font-family:"Poppins";font-weight:500;font-size:18px;margin:2px 0 12px}
  .closewrap{max-width:640px}
  .closewrap .lead{color:var(--muted);font-size:14px;line-height:1.6}
  .panelcard .opt{color:var(--muted2);font-weight:500;font-size:12px}
  .reasons{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
  .rchip{background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--muted);border-radius:11px;padding:9px 14px;font-size:12.5px;font-weight:600;cursor:pointer}
  .rchip.on{box-shadow:var(--press);color:var(--acc)}
  .closebtns{display:flex;gap:10px;flex-wrap:wrap}
  .closebtns .pbtn{flex:1;min-width:190px}
  .pbtn.dgr{color:var(--live)}
  .goodbye{max-width:520px;margin:8vh auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
  .goodbye .gb-mark{width:76px;height:76px;border-radius:50%;background:var(--surf);box-shadow:var(--rise);display:flex;align-items:center;justify-content:center}
  .goodbye .gb-mark .mi{color:var(--acc);font-size:34px}
  .goodbye h1{font-family:"Poppins";font-weight:500;font-size:28px}
  .goodbye p{color:var(--muted);font-size:15px;line-height:1.6}
  .pill{font-family:"JetBrains Mono";font-size:10px;letter-spacing:.06em;text-transform:uppercase;border-radius:7px;padding:4px 8px;box-shadow:var(--rise-sm)}
  .pill.pending{color:var(--acc)}.pill.approved{color:var(--ok)}.pill.rejected{color:var(--live)}

  /* toasts */
  .toasts{position:fixed;left:50%;bottom:calc(var(--bar-h) + 18px);transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:10px;align-items:center;width:max-content;max-width:92vw}
  .toast{background:#f4f4f0;color:#16171b;box-shadow:0 14px 38px rgba(0,0,0,.65);border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:600;min-width:260px;max-width:min(440px,92vw);animation:tin .25s}
  .toast .mi{color:#c8431a!important}
  @keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1}}
  .toast button{background:#16171b;border:none;color:#ffb38f;border-radius:10px;padding:9px 14px;font-weight:500;font-size:12.5px;cursor:pointer;white-space:nowrap}

  /* EQ sheet */
  .eq-backdrop{position:fixed;inset:0;background:rgba(8,8,11,.55);z-index:90;opacity:0;pointer-events:none;transition:.2s}.eq-backdrop.on{opacity:1;pointer-events:auto}
  .eq-sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,105%);width:min(700px,100%);z-index:95;background:var(--surf);border-radius:30px 30px 0 0;padding:24px 26px calc(30px + env(safe-area-inset-bottom));transition:transform .3s cubic-bezier(.2,.8,.3,1);box-shadow:0 -16px 50px rgba(0,0,0,.6)}
  .eq-sheet.on{transform:translate(-50%,0)}
  .eq-top{display:flex;align-items:center;justify-content:space-between}
  .eq-top h3{font-family:"Poppins";font-weight:500;font-size:20px;display:flex;align-items:center;gap:10px}.eq-top h3 .mi{color:var(--acc)}
  .eq-top .x{width:40px;height:40px;border-radius:12px;background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--muted);cursor:pointer;font-size:18px}
  .eq-station{color:var(--muted);font-size:12.5px;margin:4px 0 14px}
  .eq-toggle{display:flex;align-items:center;gap:9px;font-family:"JetBrains Mono";font-size:11px;color:var(--muted);cursor:pointer}
  .curve-well{background:var(--surf);box-shadow:var(--inset);border-radius:16px;padding:10px;margin:6px 0 2px}#eqCurve{width:100%;height:84px;display:block}
  .bands{background:var(--surf);box-shadow:var(--inset);border-radius:18px;padding:16px 10px;margin-top:14px;display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
  .band{display:flex;flex-direction:column;align-items:center;gap:8px}
  .band .gv{font-family:"JetBrains Mono";font-size:9.5px;color:var(--acc);height:12px}
  .fader-wrap{height:140px;display:flex;align-items:center;justify-content:center}
  .fader{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:10px;height:132px;background:var(--surf);box-shadow:var(--inset);border-radius:6px;outline:none;cursor:pointer}
  .fader::-webkit-slider-runnable-track{width:10px;border-radius:6px;background:transparent}
  .fader::-moz-range-track{width:10px;border-radius:6px;background:transparent}
  .fader::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--acc);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.6)}
  .fader::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--acc);cursor:pointer}
  .band .fl{font-family:"JetBrains Mono";font-size:9.5px;color:var(--muted)}
  .eq-presets{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
  .pchip{background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--ink);border-radius:11px;padding:9px 14px;font-size:12.5px;font-weight:600;cursor:pointer}.pchip.on{box-shadow:var(--press);color:var(--acc)}
  .eq-foot{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
  .tone{display:flex;align-items:center;gap:9px;background:var(--surf);box-shadow:var(--rise-sm);color:var(--acc);border:none;border-radius:14px;padding:13px 20px;font-weight:500;font-size:13px;cursor:pointer}
  .ghost{background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--muted);border-radius:14px;padding:13px 18px;font-weight:600;font-size:13px;cursor:pointer}
  .eq-note{color:var(--muted2);font-size:11.5px;margin-top:12px;line-height:1.5}
  .site-foot{position:relative;margin:64px 0 0;padding:32px 28px 28px;background:var(--surf);box-shadow:var(--rise);border-radius:18px;color:var(--muted2)}
  .site-foot::before{content:"";position:absolute;left:28px;right:28px;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,122,69,.55),transparent)}
  .foot-brand{font-family:"Poppins";font-weight:500;color:var(--ink);font-size:15px}
  .foot-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:14px 0}
  .foot-links button,.foot-links a{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:4px 0;text-decoration:none}
  .foot-links button:hover,.foot-links a:hover{color:var(--acc)}
  .foot-legal{font-size:11.5px;line-height:1.6;max-width:700px}
  .policy{max-width:760px;padding-bottom:20px}
  .policy h1{font-family:"Poppins";font-weight:500;font-size:26px;margin:4px 0 4px}
  .policy h3{font-weight:500;font-size:15px;margin:22px 0 6px;color:var(--ink)}
  .policy p{color:var(--muted);font-size:14px;line-height:1.68;margin:6px 0}
  .policy li{color:var(--muted);font-size:14px;line-height:1.6}
  .policy ul{margin:6px 0 6px 18px}
  .policy a{color:var(--acc)}
  .policy .draftbanner{background:var(--surf);box-shadow:var(--inset);border-radius:12px;padding:12px 16px;color:var(--acc);font-size:12.5px;margin:8px 0 18px;line-height:1.55}
  .backlink{background:var(--surf);box-shadow:var(--rise-sm);border:none;color:var(--ink);border-radius:11px;padding:9px 14px;font-weight:600;font-size:13px;cursor:pointer;margin-bottom:10px;display:inline-flex;align-items:center;gap:7px}
  .backlink:active{box-shadow:var(--press)}

  /* responsive header fix */
  @media(max-width:920px){
    .rail{transform:translateX(calc(-100% - 22px))}.rail.open{transform:none}
    .app{margin-left:0;padding:14px 16px calc(var(--bar-h) + 14px) 16px;max-width:none}
    .topbar{gap:10px}
    .topbar .ham{display:flex;order:1}
    #favTop{order:2;margin-left:auto}
    .userbtn{order:3}
    .search{order:4;min-width:100%;flex-basis:100%}
    #seg{order:5}
    #sort{order:6}
    .acctpage{grid-template-columns:1fr}
    .toolbar{flex-direction:column;align-items:stretch;gap:12px}
    .chips{flex:none}
    .toggle{align-self:flex-start}
  }
  @media(max-width:560px){.fader{height:112px}.fader-wrap{height:120px}.bands{gap:2px}.band .fl{font-size:8px}.sharegrid{grid-template-columns:repeat(3,1fr)}.loginbtn span:not(.mi){display:none}.loginbtn{padding:0;width:48px;justify-content:center}}