:root{ --hn:#ff6600; --bg:#15171c; --panel:#15171c; --feed-h:100dvh; }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;background:#000;overscroll-behavior:none}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:#e8e8ea;-webkit-font-smoothing:antialiased;
  }

  /* ── feed scroller ─────────────────────────────────────── */
  #feed{
    height:var(--feed-h);overflow-y:hidden;touch-action:none;
    scrollbar-width:none;overflow-anchor:none;
  }
  #feed::-webkit-scrollbar{display:none}
  #feed-sentinel{height:1px;width:100%;flex:0 0 auto}

  .card{
    height:var(--feed-h);position:relative;
    display:flex;flex-direction:column;background:var(--bg);overflow-anchor:none;
    --media-open:46%;
    --media-expanded:18%;
  }
  .media{height:var(--media-open);flex:0 0 var(--media-open);position:relative;overflow:hidden;opacity:1;transition:flex-basis .46s cubic-bezier(.22,1,.36,1),height .46s cubic-bezier(.22,1,.36,1),opacity .28s ease;will-change:flex-basis,height}
  .card.expanded .media{height:var(--media-expanded);flex-basis:var(--media-expanded);opacity:1;pointer-events:auto}
  .media-ph{position:absolute;inset:0;z-index:0}                      /* category-gradient fallback, behind all */
  .media-bd{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(22px) brightness(.68);transform:scale(1.25);opacity:0;transition:opacity .2s ease}
  .media.has-sharp .media-bd-main{opacity:1}
  .media-bd-next{opacity:0}
  .media-img{position:absolute;inset:0;z-index:3;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
  .media-img.transparent-matte,.dr-img.transparent-matte{
    background:#f6f3ea;border:1px solid rgba(12,14,18,.16);border-radius:5px;
    box-shadow:0 14px 36px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.72) inset;
  }
  .media-img-next{opacity:0;transform:translateX(100%)}
  .media-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,0) 45%,var(--bg))}
  @keyframes _spin{ to{ transform:rotate(360deg); } }
  .img-loading::after{content:'';position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid rgba(255,255,255,.18);border-top-color:rgba(255,255,255,.8);border-radius:50%;animation:_spin .65s linear infinite;z-index:5;pointer-events:none}
  .fs-img-err{display:none;position:absolute;inset:0;z-index:8;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:rgba(255,255,255,.65);font-size:15px;text-align:center;padding:24px;pointer-events:none}
  .fs.img-err .fs-img-err{display:flex;pointer-events:auto}
  .fs-img-err-btn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:10px;color:#fff;font-size:13px;font-weight:600;padding:10px 22px;cursor:pointer}
  .fs-img-err-btn:active{transform:scale(.97)}
  .media-img-err{display:none;position:absolute;inset:0;z-index:6;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,.55);font-size:13px;text-align:center;padding:12px;pointer-events:none}
  .media.img-err .media-img-err{display:flex;pointer-events:auto}
  .media.img-err .img-ctl{opacity:0;pointer-events:none}
  .media-img-err-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:12px;font-weight:600;padding:7px 16px;cursor:pointer}
  .media-img-err-btn:active{opacity:.7}
  /* Bottom-center control bar groups ⓘ caption + ‹ nav › + ⛶ fullscreen as one cluster */
  .img-ctl{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:8px}
  .media-gallery{display:none;align-items:center;gap:8px;background:rgba(0,0,0,.52);border-radius:999px;padding:4px 10px;backdrop-filter:blur(6px)}
  .media-gallery.show{display:flex}
  .card.expanded .img-ctl{opacity:0;visibility:hidden;pointer-events:none}
  .card.expanded .media-gallery{display:none!important}
  .media-gal-btn{background:none;border:none;color:#fff;font-size:17px;line-height:1;cursor:pointer;padding:0 2px;opacity:.8}
  .media-gal-btn:hover{opacity:1}
  .media-gal-btn:disabled{opacity:.3;cursor:default}
  .media-gal-btn:disabled:hover{opacity:.3}
  .media-gal-count{font-size:11px;font-weight:700;color:#fff;min-width:24px;text-align:center}

  /* ── Caption: ⓘ info icon + popover (shared by card .media and reader .dr-media) ── */
  .cap-btn{width:30px;height:30px;border:none;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:16px;font-weight:700;font-style:italic;font-family:Georgia,serif;cursor:pointer;backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;line-height:1;padding:0;flex:0 0 auto}
  .cap-btn.show{display:flex}
  .cap-btn:hover{background:rgba(0,0,0,.72)}
  .cap-btn:disabled{opacity:.42;cursor:default}
  .cap-btn:disabled:hover{background:rgba(0,0,0,.5)}
  /* Popover floats above the centered control bar */
  .cap-pop{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 8px);z-index:6;width:max-content;max-width:min(320px,86vw);background:rgba(0,0,0,.74);color:#f1f2f5;font-size:13px;line-height:1.58;padding:10px 13px;border-radius:12px;backdrop-filter:blur(8px);display:none;max-height:240px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.4);cursor:pointer}
  .cap-pop.show{display:block}
  .cap-clamp{overflow:hidden}
  .cap-overflow:not(.expanded) .cap-clamp{max-height:calc(3 * 1.58em)}
  .cap-text{display:block}
  .cap-spacer{display:none}
  .cap-overflow:not(.expanded) .cap-spacer{display:block;float:right;clear:right;height:calc(2 * 1.58em);width:0}
  .cap-more{display:none;background:none;border:none;color:var(--hn);font-size:12px;font-weight:800;cursor:pointer;line-height:1}
  .cap-overflow:not(.expanded) .cap-more{display:block;float:right;clear:right;padding-left:6px;line-height:1.58}
  .cap-overflow.expanded .cap-clamp{display:flex;flex-direction:column}
  .cap-overflow.expanded .cap-more{display:block;order:1;padding:4px 0 0;align-self:flex-start}
  .cap-pop.expanded{overflow:auto}
  /* Expand-to-fullscreen button */
  .fs-btn{width:30px;height:30px;border:none;border-radius:8px;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;line-height:0;padding:0;flex:0 0 auto}
  .fs-btn.show{display:flex}
  .fs-btn:hover{background:rgba(0,0,0,.72)}
  .cap-lang{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.05em;background:rgba(255,255,255,.22);border-radius:4px;padding:1px 5px;margin-right:6px;vertical-align:1px;text-transform:uppercase}
  /* desktop hover-to-peek (pointer:fine only — touch uses tap-toggle) */
  @media (hover:hover) and (pointer:fine){ .cap-btn:hover + .cap-pop{ display:block; } }
  .cap-btn:disabled + .cap-pop{display:none!important}

  /* ── Fullscreen image viewer (shared overlay; desktop keeps the #dqueue sidebar) ── */
  .fs{position:fixed;inset:0;z-index:120;background:#06070b;display:flex;align-items:center;justify-content:center;touch-action:none;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;will-change:opacity;transition:opacity .34s cubic-bezier(.16,1,.3,1),visibility .34s}
  .fs.show{opacity:1;visibility:visible;pointer-events:auto}
  .fs.closing{opacity:1;visibility:visible;background:transparent;transition:none;pointer-events:none}
  @media (min-width:900px){ .fs{left:344px} }   /* cover only the reader pane, keep the left sidebar */
  /* Blurred-fill backdrop — the image's own colors wash behind it (matches card/reader).
     Two stacked layers crossfade (background-image can't transition): #fsBd is the base
     (current), #fsBd2 fades the new backdrop in over it. */
  .fs-bd{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(46px) brightness(.42);transform:scale(1.25);transition:opacity .5s ease}
  #fsBd2{opacity:0}
  .fs.closing .fs-bd{opacity:0!important;transition:opacity .18s ease}
  /* Carousel stage: fixed display box (so the low-res→full-res swap sharpens in place,
     not grows). Holds two image layers — #fsImg (current) and #fsImg2 (the neighbour that
     rides in during a swipe) — so you see both images at once while dragging. The open-zoom
     lives on the stage; the images themselves only translateX for the carousel. */
  .fs-stage{position:relative;z-index:1;width:94%;height:calc(100vh - 112px);overflow:hidden;transform:scale(.93);transition:transform .42s cubic-bezier(.16,1,.3,1);touch-action:none}
  .fs.show .fs-stage{transform:scale(1)}
  .fs-matte{position:absolute;z-index:0;pointer-events:none;background:#f6f3ea;border:1px solid rgba(12,14,18,.16);border-radius:6px;box-shadow:0 18px 44px rgba(0,0,0,.34),0 1px 0 rgba(255,255,255,.72) inset;opacity:0;transition:opacity .18s ease;transform-origin:center center;will-change:transform,opacity}
  .fs-matte.show{opacity:1}
  .fs-img{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-select:none;opacity:0;transition:opacity .24s ease;transform-origin:center center;will-change:transform,opacity}
  .fs.zoomed .fs-img{cursor:grab}
  .fs.zoomed .fs-img:active{cursor:grabbing}
  .fs-img:not([src]),.fs-img[src=""]{visibility:hidden!important}
  #fsImg2{transform:translateX(100%)}   /* parked off-screen until a swipe brings it in */
  .fs-head,.fs-cap,.fs-ctl{opacity:0;transition:opacity .3s ease .08s}
  .fs.show .fs-head,.fs.show .fs-cap,.fs.show .fs-ctl{opacity:1}
  .fs.closing .fs-head,.fs.closing .fs-cap,.fs.closing .fs-nav,.fs.closing .fs-cap-show,.fs.closing .fs-ctl{opacity:0;pointer-events:none;transition:opacity .12s ease}
  /* Top header: close button + article title + image count */
  .fs-head{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;gap:12px;padding:14px 18px 28px;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0));pointer-events:none}
  .fs-back{pointer-events:auto;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:25px;line-height:1;cursor:pointer;padding:0}
  .fs-back:hover{background:rgba(255,255,255,.24)}
  .fs-title{flex:1;min-width:0;font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgba(0,0,0,.6)}
  .fs-count{flex:0 0 auto;font-size:12px;font-weight:700;color:rgba(255,255,255,.8)}
  .fs-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:66px;border:none;border-radius:10px;background:rgba(255,255,255,.10);color:#fff;font-size:30px;line-height:1;cursor:pointer}
  .fs-nav:hover{background:rgba(255,255,255,.2)}
  .fs-nav:disabled{opacity:.25;cursor:default}
  .fs-prev{left:14px} .fs-next{right:14px}
  .fs-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 18px calc(74px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0));color:#fff;pointer-events:none}
  .fs-cap.hidden{display:none}
  .fs-cap-inner{position:relative;max-width:840px;margin:0 auto}
  /* Slightly more transparent panel; backdrop blur + text-shadow keep it legible */
  .fs-cap-text{font-size:15px;line-height:1.62;max-height:32vh;overflow:hidden;pointer-events:auto;background:rgba(0,0,0,.46);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:12px 42px 12px 16px;border-radius:12px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
  .fs-cap-text.expanded{overflow:auto}
  .fs-cap-text.cap-overflow:not(.expanded) .cap-clamp{max-height:calc(3 * 1.62em)}
  .fs-cap-text.cap-overflow:not(.expanded) .cap-spacer{height:calc(2 * 1.62em)}
  .fs-cap-x{position:absolute;top:6px;right:6px;pointer-events:auto;width:26px;height:26px;border:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .fs-cap-x:hover{background:rgba(255,255,255,.3)}
  /* ⓘ to bring the caption back; only shown while the caption is hidden */
  .fs-cap-show{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:4;width:34px;height:34px;border:none;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-style:italic;font-weight:700;font-family:Georgia,serif;font-size:17px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center}
  .fs-cap-show:hover{background:rgba(0,0,0,.72)}
  .fs-ctl{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:8px}
  .fs-ctl .cap-btn{display:flex}
  .fs-ctl .cap-btn:not(.show){display:none}
  .fs-ctl .cap-btn.on{background:rgba(0,0,0,.48)}
  @media (prefers-reduced-motion:reduce){ .fs,.fs-stage,.fs-img,.media,.panel,.card h2,.expand-close{transition:none} }


  .panel{
    flex:1;min-height:0;padding:22px 20px calc(22px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;position:relative;z-index:1;
    transition:padding .46s cubic-bezier(.22,1,.36,1);
  }
  .panel-inner{width:100%;max-width:680px;margin:0 auto;display:flex;flex-direction:column;flex:1;min-height:0}
  .card h2{
    font-size:clamp(28px,7vw,40px);line-height:1.0;font-weight:800;letter-spacing:-.02em;
    color:#fff;margin-bottom:14px;transition:font-size .32s ease,margin-bottom .32s ease;
    overflow-wrap:anywhere;
  }
  .card.expanded h2{ font-size:clamp(22px,5.5vw,30px); margin-bottom:10px; }
  .card.expanded .panel{
    z-index:24;background:var(--bg);
    padding:18px 20px calc(22px + env(safe-area-inset-bottom));
  }
  .card.expanded .extract{ -webkit-mask-image:none; mask-image:none; overflow-y:auto; overscroll-behavior:contain; }
  #feed.locked{ overflow-y:hidden; }
  body.text-expanded #topbar{display:none}
  .expand-close{
    position:fixed;top:max(14px,env(safe-area-inset-top));left:16px;z-index:32;
    width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
    background:rgba(20,22,28,.88);backdrop-filter:blur(10px);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:25px;line-height:1;
    cursor:pointer;padding:0;opacity:0;visibility:hidden;pointer-events:none;transform:scale(.94);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
  }
  .card.expanded .expand-close{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}
  .expand-close:active{transform:scale(.92)}
  .more-btn{ display:none; align-self:flex-start; margin:2px 0 12px; background:none; border:none; color:var(--hn); font-size:13px; font-weight:700; cursor:pointer; padding:4px 0; }
  .card.expanded .more-btn{display:none!important}
  .extract{flex:1;min-height:0;overflow:hidden;color:#c2c7d0;font-size:clamp(15px,4.2vw,17px);line-height:1.62;
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent);
    mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent)}
  .extract.loading{color:#5b616b}
  .metrics{display:flex;gap:22px;font-size:16px;color:#fff;margin:8px 0 16px;padding-bottom:16px;border-bottom:1px solid #262a31;cursor:pointer}
  .metrics:hover .y{color:#ff8533}
  .metrics .stat{display:inline-flex;align-items:center;gap:6px;font-weight:600}
  .metrics .y{color:var(--hn);font-size:18px}
  .actions{display:flex;gap:10px}
  .btn{
    flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
    font-size:13px;font-weight:600;padding:12px 8px;border-radius:11px;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;
    text-decoration:none;cursor:pointer;line-height:1.1;
  }
  .btn .ext{flex:0 0 auto;opacity:.5}
  .btn.icon{flex:0 0 48px;gap:0;padding:12px 0}
  .btn:active{transform:scale(.97)}

  /* ── top bar ───────────────────────────────────────────── */
  #topbar{
    position:fixed;top:0;left:0;right:0;z-index:30;
    padding:max(14px,env(safe-area-inset-top)) 16px 14px;
    display:flex;align-items:center;justify-content:space-between;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0));
  }
  #menuBtn{
    pointer-events:auto;display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;flex:0 0 auto;
    background:rgba(20,22,28,.66);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);
    color:#fff;cursor:pointer;
  }
  #menuBtn:active{transform:scale(.92)}

  /* ── side pane ─────────────────────────────────────── */
  #sideScrim{position:fixed;inset:0;z-index:42;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .22s}
  #sideScrim.open{opacity:1;pointer-events:auto}
  #sidePane{
    position:fixed;top:0;left:0;bottom:0;z-index:43;width:min(300px,82vw);
    background:#1b1e25;border-right:1px solid rgba(255,255,255,.1);
    display:flex;flex-direction:column;
    transform:translateX(-100%);transition:transform .28s cubic-bezier(.22,.61,.36,1);
    padding-top:max(18px,env(safe-area-inset-top));
  }
  #sidePane.open{transform:translateX(0)}
  .sp-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 12px}
  .sp-brand{font-size:18px;font-weight:800;letter-spacing:-.01em;color:#fff}
  .sp-brand .mk{color:var(--hn)}
  #spSubBox{order:2;margin-top:auto;padding:14px 18px calc(18px + env(safe-area-inset-bottom));border-top:1px solid #23262e}
  #spSubBox .dsb-hed{font-size:14px;font-weight:700;color:#e8e8ea;margin-bottom:6px;display:flex;align-items:center;gap:6px}
  #spSubBox .dsb-hed-icon{color:var(--hn)}
  #spSubBox .dsb-body{font-size:13px;color:#9aa0aa;line-height:1.45;margin-bottom:12px}
  #spSubBox .sub-email{font-size:14px;padding:10px 12px;border-radius:9px}
  #spSubBox .sub-btn{font-size:13px;padding:10px;border-radius:9px}
  #spSubBox .sub-micro{font-size:11px;margin-top:4px}
  #spSubBox .sub-success{padding:10px 0 4px;font-size:13px}
  #spSubBox .sub-ok{font-size:22px;margin-bottom:6px}
  .sp-nav{order:1;display:flex;flex-direction:column;border-top:1px solid #23262e;padding:8px 0}
  .sp-link{display:block;width:100%;padding:15px 20px;font-size:15px;font-weight:600;color:#c7ccd6;text-decoration:none;background:none;border:0;text-align:left;font-family:inherit;cursor:pointer}
  .sp-link:active{background:#23262e}

  #filterBtn,#optionsBtn{
    pointer-events:auto;display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;flex:0 0 auto;
    background:rgba(20,22,28,.66);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);
    color:#fff;cursor:pointer;position:relative;
  }
  #filterBtn:active,#optionsBtn:active{transform:scale(.92)}
  #filterBtn .fb-dot{
    position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;
    background:var(--hn);border:1.5px solid rgba(0,0,0,.5);display:none;
  }
  #filterBtn.active .fb-dot{display:block}

  /* ── options sheet ─────────────────────────────────────── */
  #optScrim{position:fixed;inset:0;z-index:46;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .22s}
  #optScrim.open{opacity:1;pointer-events:auto}
  #optSheet{
    position:fixed;left:0;right:0;bottom:0;z-index:47;
    background:#1b1e25;border-radius:22px 22px 0 0;border-top:1px solid rgba(255,255,255,.1);
    padding:14px 18px calc(24px + env(safe-area-inset-bottom));
    transform:translateY(100%);transition:transform .26s cubic-bezier(.22,.61,.36,1);
    max-width:680px;margin:0 auto;
  }
  #optSheet.open{transform:translateY(0)}
  .os-grab{width:100%;padding:10px 0 4px;background:transparent;display:flex;justify-content:center;align-items:center;cursor:grab;flex:0 0 auto;margin-bottom:8px}
  .os-grab::before{content:'';display:block;width:38px;height:4px;border-radius:2px;background:#3a3e48}
  .os-btn{
    display:flex;align-items:center;gap:14px;width:100%;padding:14px 4px;
    background:none;border:none;border-bottom:1px solid #23262e;color:#fff;
    font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;
  }
  .os-btn:last-child{border-bottom:none}
  .os-btn:active{opacity:.7}
  .os-ico{
    width:40px;height:40px;border-radius:12px;flex:0 0 auto;
    background:#23262e;display:flex;align-items:center;justify-content:center;color:#c7ccd6;
  }

  .tb-right{display:flex;align-items:center;gap:8px;min-width:0}
  #bookmarkM{
    pointer-events:auto;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:38px;height:38px;border-radius:50%;color:#fff;cursor:pointer;
    background:rgba(20,22,28,.66);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);
  }
  #bookmarkM:active{transform:scale(.92)}
  #bookmarkM.bm-on{ background:rgba(255,102,0,.18); border-color:var(--hn); color:var(--hn); }

  /* Mobile "Saved" banner — floats just below the topbar row while the saved view is
     active (clear of the menu/bookmark/filter/options buttons); ✕ exits. */
  #savedBar{
    position:fixed;left:50%;top:calc(max(14px,env(safe-area-inset-top)) + 50px);transform:translateX(-50%);
    z-index:31;display:none;align-items:center;gap:8px;
    background:rgba(255,102,0,.18);border:1px solid var(--hn);color:#fff;
    font-size:13px;font-weight:700;padding:6px 6px 6px 13px;border-radius:999px;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:60vw;
  }
  #savedBar.show{display:flex}
  #savedBar .sb-ico{flex:0 0 auto;color:var(--hn);display:flex}
  #savedBar .sb-n{color:#ffd9bf;font-weight:700}
  #savedBar .sb-x{
    flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(255,255,255,.18);color:#fff;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;
  }
  #savedBar .sb-x:active{transform:scale(.9)}

  /* ── bottom sheet ──────────────────────────────────────── */
  #sheetScrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .22s}
  #sheetScrim.open{opacity:1;pointer-events:auto}
  #sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:41;
    background:#1b1e25;border-radius:22px 22px 0 0;border-top:1px solid rgba(255,255,255,.1);
    padding:14px 18px 0;
    display:flex;flex-direction:column;max-height:88vh;
    transform:translateY(100%);transition:transform .26s cubic-bezier(.22,.61,.36,1);
    max-height:88dvh;overflow-y:auto;max-width:680px;margin:0 auto;
  }
  #sheet.open{transform:translateY(0)}
  .grab{width:100%;padding:10px 0 4px;background:transparent;display:flex;justify-content:center;align-items:center;cursor:grab;flex:0 0 auto;margin-bottom:4px}
  .grab::before{content:'';display:block;width:38px;height:4px;border-radius:2px;background:#3a3e48}
  .sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
  .sh h3{font-size:16px;font-weight:700}
  .sh-actions{display:flex;gap:8px}
  .sh-act{
    display:inline-flex;align-items:center;gap:5px;
    font-size:12px;font-weight:700;padding:6px 11px;border-radius:999px;
    background:#23262e;border:1px solid #2e323b;color:#c7ccd6;cursor:pointer;
  }
  .sh-act:active{transform:scale(.96)}
  .sh-act svg{display:block}
  .sh-act .sh-act-n{color:var(--hn);font-variant-numeric:tabular-nums}
  .sec-lbl{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7b818c;margin:16px 0 9px}
  .seg{display:grid;gap:8px}
  .seg.c2{grid-template-columns:1fr 1fr}
  .seg.c3{grid-template-columns:1fr 1fr 1fr}
  .seg.c4{grid-template-columns:1fr 1fr 1fr 1fr}
  .opt{font-size:12.5px;font-weight:600;padding:11px 8px;border-radius:11px;background:#23262e;border:1px solid #2e323b;color:#c7ccd6;text-align:center;cursor:pointer;user-select:none}
  .opt.on{background:rgba(255,102,0,.16);border-color:var(--hn);color:#fff}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .fchip{font-size:12px;font-weight:600;padding:7px 12px;border-radius:999px;background:#23262e;border:1px solid #2e323b;color:#c7ccd6;cursor:pointer;user-select:none}
  .fchip.on{background:#fff;color:#15171c;border-color:#fff}
  #sheetScroll{overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch;}
  .apply-row{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 calc(16px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.07);background:#1b1e25;}
  .apply-row .count{font-size:12.5px;color:#9aa0aa}
  .apply-row .go{background:var(--hn);color:#fff;font-size:14px;font-weight:700;padding:12px 26px;border-radius:12px;border:none;cursor:pointer}
  .apply-row .go:disabled{opacity:.4;cursor:default}

  /* ── comments sheet (mobile) ──────────────────────────── */
  #commentsScrim{position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .22s}
  #commentsScrim.open{opacity:1;pointer-events:auto}
  #commentsSheet{
    position:fixed;left:0;right:0;bottom:0;z-index:45;height:90dvh;
    background:#15171c;border-radius:22px 22px 0 0;border-top:1px solid rgba(255,255,255,.1);
    display:flex;flex-direction:column;
    transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
  }
  #commentsSheet.open{transform:translateY(0)}
  .cs-grab{width:100%;padding:12px 0 6px;background:transparent;display:flex;justify-content:center;align-items:center;cursor:grab;flex:0 0 auto}
  .cs-grab::before{content:'';display:block;width:38px;height:4px;border-radius:2px;background:#3a3e48}
  .cs-head{display:flex;align-items:center;gap:10px;padding:14px 18px 12px;border-bottom:1px solid #23262e;flex:0 0 auto}
  .cs-head .cs-hn{font-size:12px;font-weight:600;color:var(--hn);flex:0 0 auto}
  .cs-head .cs-title{font-size:14px;font-weight:700;color:#fff;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cs-head .cs-close{background:none;border:none;color:#9aa0aa;font-size:20px;line-height:1;cursor:pointer;flex:0 0 auto;padding:4px 0 4px 8px;min-width:44px;text-align:right}
  #commentsList{flex:1;overflow-y:auto;padding:0 0 24px}
  #commentsList::-webkit-scrollbar{width:8px} #commentsList::-webkit-scrollbar-thumb{background:#2e323b;border-radius:4px}

  /* comment nodes */
  .cn{padding:12px 18px 0}
  .cn-head{display:flex;align-items:center;gap:8px;font-size:12px;color:#7b818c;margin-bottom:6px;cursor:pointer;user-select:none}
  .cn-head .cn-author{font-weight:700;color:#c8cdd6}
  .cn-head .cn-toggle{font-size:11px;color:#7b818c}
  .cn-body{font-size:clamp(15px,4.2vw,17px);line-height:1.62;color:#c2c7d0}
  .cn-body p{margin:0 0 6px}
  .cn-body a{color:var(--hn);text-decoration:none}
  .cn-body pre{background:#23262e;padding:10px 12px;border-radius:8px;overflow-x:auto;font-size:12px;margin:6px 0}
  .cn-body code{background:#23262e;padding:1px 5px;border-radius:4px;font-size:12px}
  .cn-kids{margin-left:14px;border-left:2px solid #23262e;padding-left:4px}
  .cn.deleted .cn-body{color:#5b616b;font-style:italic}
  .cn.collapsed .cn-body,.cn.collapsed .cn-kids{display:none}
  .cn-loading{padding:28px 18px;text-align:center;color:#7b818c;font-size:14px}
  .cn-empty{padding:32px 18px;text-align:center;color:#7b818c;font-size:14px}
  .cn-retry{display:block;margin:12px auto 0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:8px;color:var(--hn);font-size:13px;font-weight:700;padding:8px 20px;cursor:pointer}
  .cn-retry:active{opacity:.7}

  /* ── comments overlay (desktop, inside #dreader) ───────── */
  @media (min-width:900px){
    #commentsOverlay{
      display:flex;position:absolute;inset:0;z-index:20;
      background:var(--bg);flex-direction:column;overflow:hidden;
      transform:translateX(100%);transition:transform .32s cubic-bezier(.32,.72,0,1);
      pointer-events:none;
    }
    #commentsOverlay.open{transform:translateX(0);pointer-events:auto}
    .co-head{display:flex;align-items:center;gap:14px;padding:20px 40px 16px;border-bottom:1px solid #23262e;flex:0 0 auto}
    .co-back{background:none;border:none;color:#9aa0aa;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px}
    .co-back:hover{color:#fff}
    .co-title{font-size:15px;font-weight:700;color:#fff;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .co-hn{font-size:13px;font-weight:600;color:var(--hn)}
    #commentsListD{flex:1;overflow-y:auto;padding:0 40px 40px;width:min(820px,100%);margin:0 auto}
    #commentsListD::-webkit-scrollbar{width:8px} #commentsListD::-webkit-scrollbar-thumb{background:#2e323b;border-radius:4px}
  }

  /* ── comment btn on metric row ─────────────────────────── */
  .stat-btn{background:none;border:none;color:inherit;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:0}
  .stat-btn:hover .cc{color:var(--hn)}

  /* ── empty / hint ──────────────────────────────────────── */
  #empty{display:none;position:fixed;inset:0;z-index:5;align-items:center;justify-content:center;text-align:center;padding:40px;color:#9aa0aa}
  #empty.show{display:flex}
  .toast{position:fixed;left:50%;top:calc(max(14px,env(safe-area-inset-top)) + 56px);transform:translateX(-50%) translateY(-12px);z-index:50;background:#23262e;color:#fff;font-size:13px;font-weight:600;padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.14);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;text-align:center;white-space:nowrap}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  /* ── desktop (≥900px): reader + left “up next” queue ───── */
  #desktop{display:none}
  @media (min-width:900px){
    #topbar, #feed, #empty, #sideScrim, #sidePane, #optScrim, #optSheet{ display:none !important; }
    #desktop{ display:flex; flex-direction:row; position:fixed; inset:0; z-index:10; background:var(--bg); }
  }
  @media (min-width:900px){
    #dqueue{ width:344px; flex:0 0 auto; background:#181b21; border-right:1px solid #23262e; display:flex; flex-direction:column; }
    .dq-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 13px; border-bottom:1px solid #23262e; }
    .dq-head .ttl{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#7b818c; }
    .ds-brandwrap{ position:relative; flex:0 0 auto; }
    .ds-brand{ display:flex; align-items:center; gap:7px; width:100%; padding:16px 18px 2px; font-size:16px; font-weight:800; background:none; border:none; color:inherit; cursor:pointer; text-align:left; font-family:inherit; }
    .ds-brand .mk{ color:var(--hn); }
    .ds-caret{ font-size:10px; color:#7b818c; transition:transform .2s; }
    .ds-brand[aria-expanded="true"] .ds-caret{ transform:rotate(180deg); }
    .ds-menu{ position:absolute; top:calc(100% + 4px); left:14px; right:14px; z-index:30; background:#23262e; border:1px solid #2e323b; border-radius:10px; padding:6px; display:flex; flex-direction:column; box-shadow:0 12px 32px rgba(0,0,0,.45); }
    .ds-menu[hidden]{ display:none; }
    .ds-mi{ font-size:13.5px; font-weight:600; color:#c7ccd6; text-decoration:none; padding:9px 12px; border-radius:7px; }
    .ds-mi:hover{ background:rgba(255,255,255,.06); color:#fff; }
    #dfilters{ border-bottom:1px solid #23262e; padding:10px 16px 12px; flex:0 0 auto; }
    .df-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:none; color:#9aa0aa; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:11px 0 6px; cursor:pointer; }
    .df-toggle .chev{ transition:transform .2s; font-size:11px; }
    #dfilters.collapsed .df-toggle .chev{ transform:rotate(-90deg); }
    #dfBody{ max-height:460px; overflow:hidden; transition:max-height .25s ease; }
    #dfilters.collapsed #dfBody{ max-height:0; }
    .ds-lbl{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#7b818c; margin:12px 0 7px; }
    .ds-opts{ display:flex; flex-wrap:wrap; gap:6px; }
    .ds-opt{ font-size:12px; font-weight:600; padding:6px 11px; border-radius:8px; background:#23262e; border:1px solid #2e323b; color:#c7ccd6; cursor:pointer; }
    .ds-opt.on{ background:rgba(255,102,0,.18); border-color:var(--hn); color:#fff; }
    .ds-chips{ display:flex; flex-wrap:wrap; gap:6px; }
    #dTopicChips{ max-height:150px; overflow-y:auto; padding-right:4px; }
    #dTopicChips::-webkit-scrollbar{ width:7px; } #dTopicChips::-webkit-scrollbar-thumb{ background:#2e323b; border-radius:4px; }
    .ds-chip{ font-size:11px; font-weight:600; padding:5px 9px; border-radius:999px; background:#23262e; border:1px solid #2e323b; color:#c7ccd6; cursor:pointer; }
    .ds-chip.on{ background:#fff; border-color:#fff; color:#15171c; }
    #dReshuffle{ display:none; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; background:#23262e; border:1px solid #2e323b; color:#c7ccd6; cursor:pointer; transition:background .15s,border-color .15s,color .15s; }
    #dReshuffle:hover{ background:var(--hn); border-color:var(--hn); color:#fff; }
    #dReshuffle svg{ display:block; }
    #dqlist{ flex:1; overflow-y:auto; overflow-x:hidden; }
    #dqlist::-webkit-scrollbar{ width:8px; } #dqlist::-webkit-scrollbar-thumb{ background:#2e323b; border-radius:4px; }
    .dq-item{ display:flex; gap:12px; padding:10px 16px; align-items:center; cursor:pointer; border-left:3px solid transparent; }
    .dq-item:hover{ background:rgba(255,255,255,.04); }
    .dq-item.on{ background:rgba(255,102,0,.12); border-left-color:var(--hn); }
    .dq-th{ width:56px; height:56px; border-radius:9px; flex:0 0 auto; background-size:cover; background-position:center; background-color:#0c0d11; }
    .dq-meta{ min-width:0; }
    .dq-tt{ font-size:13.5px; font-weight:600; line-height:1.2; color:#e8e8ea; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .dq-tm{ font-size:11.5px; color:#8b909a; margin-top:3px; } .dq-tm .y{ color:var(--hn); font-weight:700; }
    /* Seen-dimming: already-viewed rows fade back; the active (.on) row always stays full. */
    .dq-item.seen .dq-th{ opacity:.38; }
    .dq-item.seen .dq-tt{ color:#646973; }
    .dq-item.seen .dq-tm{ opacity:.55; }
    .dq-item.seen .dq-seen-dot{ display:inline-block; }
    .dq-item.on.seen .dq-th{ opacity:1; }
    .dq-item.on.seen .dq-tt{ color:#e8e8ea; }
    .dq-item.on.seen .dq-tm{ opacity:1; }
    .dq-seen-dot{ display:none; width:5px; height:5px; border-radius:50%; background:#4a4e57; margin-left:6px; vertical-align:middle; flex:0 0 auto; }
    /* Saved toggle in the queue header */
    .dq-head{ gap:8px; }
    #dSavedToggle{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; background:#23262e; border:1px solid #2e323b; color:#9aa0aa; cursor:pointer; transition:background .15s,border-color .15s,color .15s; flex:0 0 auto; }
    #dSavedToggle:hover{ color:#e8e8ea; border-color:#3a3e48; }
    #dSavedToggle.on{ background:rgba(255,102,0,.16); border-color:var(--hn); color:#fff; }
    #dSavedToggle svg{ display:block; }
    #dSavedToggle .dst-n{ font-variant-numeric:tabular-nums; }

    #dreader{ flex:1; min-width:0; position:relative; display:flex; flex-direction:column; }
    .dr-media{ flex:0 0 40%; position:relative; overflow:hidden; transition:flex-basis .35s ease; }
    #dreader.expanded .dr-media{ flex-basis:0%; }
    .dr-ph{ position:absolute; inset:0; z-index:0; }
    .dr-bd{ position:absolute; inset:0; z-index:1; background-size:cover; background-position:center; filter:blur(26px) brightness(.6); transform:scale(1.3); opacity:0; transition:opacity .2s ease; }
    .dr-media.has-sharp #drBd{ opacity:1; }
    .dr-bd2{ opacity:0; }
    .dr-img{ position:absolute; inset:0; z-index:3; margin:auto; max-width:100%; max-height:100%; object-fit:contain; display:block; }
    .dr-img2{ opacity:0; transform:translateX(100%); }
    .dr-scrim{ position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,rgba(0,0,0,.2),transparent 55%,var(--bg)); }
    .dr-gallery{ display:none; align-items:center; gap:10px; background:rgba(0,0,0,.52); border-radius:999px; padding:5px 12px; backdrop-filter:blur(6px); }
    .dr-gallery.show{ display:flex; }
    .dr-gal-btn{ background:none; border:none; color:#fff; font-size:20px; line-height:1; cursor:pointer; padding:0 2px; opacity:.8; }
    .dr-gal-btn:hover{ opacity:1; }
    .dr-gal-btn:disabled{ opacity:.3; cursor:default; }
    .dr-gal-btn:disabled:hover{ opacity:.3; }
    .dr-gal-count{ font-size:12px; font-weight:700; color:#fff; min-width:28px; text-align:center; }
    .dr-brand{ position:absolute; top:18px; left:26px; z-index:4; font-size:15px; font-weight:800; text-shadow:0 1px 8px rgba(0,0,0,.6); } .dr-brand .mk{ color:var(--hn); }
    /* Article prev/next: vertical stack on the reader's right edge (↑ prev / ↓ next). */
    .dr-nav{ position:absolute; right:18px; top:50%; transform:translateY(-50%); z-index:6; display:flex; flex-direction:column; gap:12px; }
    .dr-nav-btn{ width:46px; height:46px; border-radius:50%; background:rgba(20,23,28,.66); border:1px solid rgba(255,255,255,.14); color:#e8e8ea; font-size:13px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .15s,border-color .15s,opacity .15s; }
    .dr-nav-btn:hover{ background:var(--hn); border-color:var(--hn); color:#fff; }
    .dr-nav-btn:disabled{ opacity:.28; cursor:default; }
    .dr-nav-btn:disabled:hover{ background:rgba(20,23,28,.66); border-color:rgba(255,255,255,.14); color:#e8e8ea; }
    .dr-body{ flex:1; min-height:0; width:min(760px,100%); margin:0 auto; padding:26px 40px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:14px; }
    .dr-body h2{ font-size:clamp(30px,3.4vw,44px); line-height:1.02; font-weight:800; letter-spacing:-.02em; color:#fff; transition:font-size .25s ease; overflow-wrap:anywhere; }
    #dreader.expanded .dr-body h2{ font-size:clamp(24px,2.4vw,32px); }
    .dr-extract{ font-size:17px; color:#c2c7d0; line-height:1.65; flex:1; min-height:0; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent); mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent); }
    #dreader.expanded .dr-extract{ -webkit-mask-image:none; mask-image:none; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#2e323b transparent; }
    #dreader.expanded .dr-extract::-webkit-scrollbar{ width:6px; }
    #dreader.expanded .dr-extract::-webkit-scrollbar-thumb{ background:#2e323b; border-radius:4px; }
    #dreader.expanded .dr-extract::-webkit-scrollbar-track{ background:transparent; }
    .dr-more{ display:none; align-self:flex-start; margin-top:2px; background:none; border:none; color:var(--hn); font-size:13px; font-weight:700; cursor:pointer; padding:4px 0; }
    .dr-extract.loading{ color:#5b616b; }
    .dr-metrics{ display:flex; gap:20px; font-size:16px; color:#fff; align-items:center; cursor:pointer; margin:8px 0 16px; padding-bottom:16px; border-bottom:1px solid #262a31; }
    .dr-metrics:hover .y{ color:#ff8533; }
    .dr-metrics .stat{ display:inline-flex; align-items:center; gap:6px; font-weight:600; } .dr-metrics .y{ color:var(--hn); font-weight:700; }
    .dr-actions{ display:flex; gap:10px; width:100%; }
  }

  /* ── Subscribe sheet (mobile, z=48/49 — above opts sheet) ── */
  #subScrim{position:fixed;inset:0;z-index:48;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .22s}
  #subScrim.open{opacity:1;pointer-events:auto}
  #subSheet{
    position:fixed;left:0;right:0;bottom:0;z-index:49;
    background:#1b1e25;border-radius:22px 22px 0 0;border-top:1px solid rgba(255,255,255,.1);
    padding:0 20px calc(28px + env(safe-area-inset-bottom));
    transform:translateY(100%);transition:transform .28s cubic-bezier(.22,.61,.36,1);
    max-width:540px;margin:0 auto;
  }
  #subSheet.open{transform:translateY(0)}
  .sub-grab{width:100%;padding:14px 0 8px;display:flex;justify-content:center;align-items:center;cursor:grab}
  .sub-grab::before{content:'';display:block;width:38px;height:4px;border-radius:2px;background:#3a3e48}
  .sub-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .sub-hed{font-size:17px;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px}
  .sub-hed-icon{color:var(--hn)}
  .sub-close{background:none;border:none;color:#7b818c;font-size:20px;cursor:pointer;padding:4px;line-height:1}
  .sub-close:hover{color:#fff}
  .sub-body{font-size:15px;color:#c2c7d0;line-height:1.55;margin-bottom:18px}
  .sub-form{display:flex;flex-direction:column;gap:10px}
  .sub-email{
    width:100%;padding:13px 14px;
    background:#23262e;border:1px solid #2e323b;border-radius:11px;
    color:#fff;font-size:16px;font-family:inherit;outline:none;
    transition:border-color .15s;
  }
  .sub-email::placeholder{color:#5b616b}
  .sub-email:focus{border-color:rgba(255,102,0,.7)}
  .sub-btn{
    width:100%;padding:13px;border-radius:11px;
    border:1px solid var(--hn);background:rgba(255,102,0,.12);
    color:var(--hn);font-size:15px;font-weight:700;font-family:inherit;
    cursor:pointer;transition:background .15s,color .15s;
  }
  .sub-btn:hover{background:var(--hn);color:#fff}
  .sub-btn:active{transform:scale(.98)}
  .sub-btn:disabled{opacity:.5;cursor:default}
  .sub-micro{font-size:12px;color:#5b616b;text-align:center;margin-top:2px}
  .sub-micro a{color:#5b616b;text-decoration:underline}
  .sub-error{display:none;margin:-2px 0 2px;color:#ff8f57;font-size:12px;line-height:1.35}
  .sub-error.show{display:block}
  #spSubBox,#dsSubBox{transition:opacity .28s ease,transform .28s ease}
  .sub-success{display:none;text-align:center;padding:20px 0 8px;color:#c2c7d0;font-size:15px;line-height:1.55}
  .sub-ok{font-size:30px;margin-bottom:8px;color:#46d878}
  .sub-success.show{display:block}
  .sub-form.hide{display:none}
  .sub-removing{opacity:0;transform:translateY(8px)}
  #subSheet.sub-removing{opacity:1;transform:translateY(100%)!important}
  .sub-hidden{display:none!important}

  /* ── Desktop subscribe box (bottom of left sidebar) ──── */
  @media (min-width:900px){
    #dsSubBox{border-top:1px solid #23262e;padding:14px 18px calc(18px + env(safe-area-inset-bottom));flex:0 0 auto}
    .dsb-hed{font-size:12.5px;font-weight:700;color:#e8e8ea;margin-bottom:5px;display:flex;align-items:center;gap:6px}
    .dsb-hed-icon{color:var(--hn)}
    .dsb-body{font-size:12px;color:#9aa0aa;line-height:1.5;margin-bottom:11px}
    #dsSubBox .sub-email{font-size:14px;padding:9px 12px;border-radius:9px}
    #dsSubBox .sub-btn{font-size:13px;padding:9px;border-radius:9px}
    #dsSubBox .sub-micro{font-size:11px;margin-top:4px}
    #dsSubBox .sub-success{padding:10px 0 4px;font-size:13px}
    #dsSubBox .sub-ok{font-size:22px;margin-bottom:6px}
  }
  @keyframes _sub_pulse{0%{box-shadow:0 0 0 0 rgba(255,102,0,.45)}100%{box-shadow:0 0 0 14px rgba(255,102,0,0)}}
  #dsSubBox.pulse{animation:_sub_pulse .65s ease-out 2}

  /* ── Bookmarks ─────────────────────────────────────────── */
  /* Bookmark icon: outline by default, filled when saved. Fill is inherited (no fill
     attr on the symbol path) so CSS can flip it; saved state follows currentColor. */
  .bm-ico{ fill:none; stroke:currentColor; }
  .bm-on .bm-ico{ fill:currentColor; }
  .os-btn.bm-on{ color:var(--hn); }
  .btn.bm-on{ color:var(--hn); border-color:rgba(255,102,0,.5); background:rgba(255,102,0,.12); }
  .btn .bm-ico{ flex:0 0 auto; }
  /* Side-pane "Saved" link with count badge */
  .sp-link .sp-count{ display:inline-block; margin-left:7px; font-size:12px; font-weight:700; color:var(--hn); }
  .sp-link .bm-ico{ margin-right:8px; vertical-align:-2px; }
  .sp-link.on{ color:#fff; background:rgba(255,102,0,.1); }