/* =========================================================================
   BACKBENCH — Class space · Study rooms · Help & feedback (v70)
   Built from the theme tokens, so Paper, Ink, Premium Glass and Sticker
   each get it in their own materials. Premium gets its glass at the end.
   ========================================================================= */

/* ---- shared bits ---- */
.cm-av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;font-size:.86rem;
  font-family:"Bricolage Grotesque",sans-serif;color:#fff;background:linear-gradient(140deg,var(--accent),var(--accent-2));box-shadow:0 0 0 2px var(--bg-2)}
.cm-av.more{background:var(--bg-3);color:var(--tx-2);font-size:.72rem}
.cm-code-in{display:flex;gap:8px;margin-top:10px}
.cm-code-in .inp{flex:1;min-width:0}
.cm-code-in .inp.mono{letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.cm-start{margin-bottom:22px}
.cm-start .card{display:flex;flex-direction:column;gap:2px}
.cm-start .lab svg{width:15px;height:15px}

/* ---- class: empty state hero ---- */
.cm-hero{position:relative;overflow:hidden;padding:clamp(22px,4vw,38px);border-radius:28px;margin-bottom:18px;
  background:radial-gradient(110% 130% at 100% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),
             linear-gradient(160deg,var(--bg-2),color-mix(in srgb,var(--bg-2) 70%,var(--bg-3)));
  border:1px solid var(--line)}
.cm-hero-ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;margin-bottom:14px;
  background:linear-gradient(160deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 14px 30px -14px var(--accent)}
.cm-hero-ic svg{width:30px;height:30px}
.cm-hero .lab{margin:0}
.cm-hero h1{font-size:clamp(1.8rem,5vw,2.7rem);line-height:1.04;letter-spacing:-.03em;margin:.2em 0 .35em;max-width:18ch}
.cm-hero p{color:var(--tx-2);max-width:58ch;line-height:1.6;margin:0 0 16px}
.cm-pts{display:flex;flex-wrap:wrap;gap:8px}
.cm-pts span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;font-size:.8rem;font-weight:600;
  background:color-mix(in srgb,var(--tx) 5%,transparent);border:1px solid var(--line)}
.cm-pts svg{width:15px;height:15px;color:var(--accent)}

/* ---- class: top card ---- */
.cm-sw{margin-bottom:12px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.cm-sw::-webkit-scrollbar{display:none}
.cm-sw .chip{flex:none}
.cm-sw .chip.on{background:var(--solid);color:var(--solid-tx);border-color:transparent}
.cm-top{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:14px;padding:18px 20px!important}
.cm-top-l{display:flex;align-items:center;gap:14px;min-width:0}
.cm-top-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex:none;background:linear-gradient(160deg,var(--accent),var(--accent-2));color:#fff}
.cm-top-ic svg{width:26px;height:26px}
.cm-top h1{margin:.1em 0 0;font-size:clamp(1.35rem,3.6vw,1.8rem);letter-spacing:-.025em;line-height:1.1}
.cm-top p{margin:2px 0 0;font-size:.84rem;color:var(--tx-3)}
.cm-top .lab{margin:0}
.cm-top-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cm-codechip{display:inline-flex;align-items:center;gap:8px;padding:7px 10px 7px 12px;border-radius:14px;cursor:pointer;font:inherit;color:inherit;
  border:1.5px dashed color-mix(in srgb,var(--accent) 50%,var(--line));background:color-mix(in srgb,var(--accent) 7%,transparent)}
.cm-codechip span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);font-weight:700}
.cm-codechip b{font-size:1rem;letter-spacing:.16em}
.cm-codechip svg{width:15px;height:15px;color:var(--accent)}
.cm-avs{display:flex;cursor:pointer}
.cm-avs .cm-av{width:30px;height:30px;font-size:.76rem;margin-left:-8px}
.cm-avs .cm-av:first-child{margin-left:0}
.cm-soon{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 14px}
.cm-soon::-webkit-scrollbar{display:none}
.cm-soon-i{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border-radius:16px;cursor:pointer;font:inherit;color:inherit;
  border:1px solid var(--line);background:var(--bg-2);max-width:220px;text-align:left}
.cm-soon-i b{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ok)}
.cm-soon-i.hot b{color:var(--bad)}
.cm-soon-i span{font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}

/* ---- class: composer ---- */
.cm-comp{margin-bottom:14px;padding:12px!important}
.cm-comp.open{display:flex;flex-direction:column;gap:10px;padding:16px!important}
.cm-write{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;color:var(--tx-3);font:inherit;font-size:.95rem;cursor:text;text-align:left;padding:2px}
.cm-write span{flex:1}
.cm-write svg{width:20px;height:20px;color:var(--accent)}
.cm-kseg{align-self:flex-start;max-width:100%;overflow-x:auto}
.cm-kseg svg{width:14px;height:14px;vertical-align:-2px}
.cm-row{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.cm-cfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cm-attach{cursor:pointer;max-width:60%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cm-attach svg{width:15px;height:15px}
.cm-up{flex:1;min-width:80px;height:6px;border-radius:99px;background:color-mix(in srgb,var(--tx) 10%,transparent);overflow:hidden}
.cm-up i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .2s}
.cm-newer{display:flex;align-items:center;gap:8px;margin:0 auto 12px;padding:8px 16px;border-radius:99px;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:.84rem;
  background:var(--accent);color:#fff;box-shadow:0 10px 24px -12px var(--accent);animation:mobIn .35s var(--ease) both}
.cm-newer svg{width:15px;height:15px}
.cm-fseg{margin-bottom:12px;max-width:100%;overflow-x:auto}
.cm-fseg em{font-style:normal;font-size:.72rem;opacity:.6;margin-left:2px}

/* ---- class: posts ---- */
.cm-feed{display:flex;flex-direction:column;gap:12px}
.cm-post{position:relative;padding:16px 18px;border-radius:22px;background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--sh);
  transition:box-shadow .3s,transform .3s var(--pop)}
.cm-post.k-notice{border-left:4px solid var(--accent)}
.cm-post.k-deadline{border-left:4px solid var(--warn)}
.cm-post.pinned{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 8%,var(--bg-2)),var(--bg-2) 60%)}
.cm-post.fresh::after{content:"New";position:absolute;top:-8px;right:16px;padding:2px 9px;border-radius:99px;font-size:.62rem;font-weight:800;letter-spacing:.06em;
  background:var(--accent);color:#fff}
.cm-post.flash{animation:cmFlash 1.2s var(--ease)}
@keyframes cmFlash{0%,100%{box-shadow:var(--sh)}30%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 45%,transparent),var(--sh)}}
.cm-ph{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cm-pw{flex:1;min-width:0;display:flex;flex-direction:column}
.cm-pw b{font-size:.88rem}
.cm-pw span{font-size:.74rem;color:var(--tx-3)}
.cm-kind{display:inline-flex;align-items:center;gap:5px;font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);
  padding:4px 9px;border-radius:99px;background:color-mix(in srgb,var(--tx) 6%,transparent)}
.cm-kind svg{width:13px;height:13px}
.k-notice .cm-kind{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.k-deadline .cm-kind{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.cm-pin svg{width:16px;height:16px;color:var(--accent)}
.cm-more{width:32px;height:32px;border-radius:50%;border:0;background:none;color:var(--tx-3);cursor:pointer;display:grid;place-items:center}
.cm-more:hover{background:color-mix(in srgb,var(--tx) 7%,transparent)}
.cm-more svg{width:18px;height:18px}
.cm-post h3{margin:0 0 6px;font-size:1.05rem;letter-spacing:-.01em;line-height:1.35}
.cm-body{font-size:.92rem;line-height:1.6;color:var(--tx-2)}
.cm-body p{margin:.3em 0}
.cm-due{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.cm-due h3{margin:0}
.cm-due span{font-size:.8rem;font-weight:700;color:var(--ok)}
.cm-due.hot span{color:var(--bad)}
.cm-cal{width:54px;flex:none;border-radius:14px;overflow:hidden;text-align:center;border:1px solid var(--line);background:var(--bg)}
.cm-cal i{display:block;font-style:normal;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 0;background:var(--warn);color:#fff}
.cm-due.hot .cm-cal i{background:var(--bad)}
.cm-cal b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.4rem;padding:3px 0 5px}
.cm-file,.cm-link{display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;padding:10px 12px;border-radius:14px;cursor:pointer;
  border:1px solid var(--line);background:color-mix(in srgb,var(--tx) 3%,transparent);font:inherit;color:inherit;text-align:left;text-decoration:none}
.cm-file svg,.cm-link svg{width:26px;height:26px;flex:none;color:var(--accent)}
.cm-file span{display:flex;flex-direction:column;min-width:0}
.cm-file b{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-file em{font-style:normal;font-size:.72rem;color:var(--tx-3)}
.cm-link svg{width:18px;height:18px}
.cm-link span{font-size:.84rem;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-pf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.cm-pf:empty{display:none}
.cm-ack{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:99px;cursor:pointer;font:inherit;font-size:.82rem;font-weight:700;
  border:1.5px solid var(--line-2);background:none;color:var(--tx-2);transition:all .2s var(--pop)}
.cm-ack svg{width:15px;height:15px}
.cm-ack.on{background:var(--ok);border-color:var(--ok);color:#fff}
.cm-ack:active{transform:scale(.95)}
.cm-seen{border:0;background:none;font:inherit;font-size:.78rem;color:var(--tx-3);cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.cm-acts .btn{justify-content:flex-start}
.cm-mems{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow:auto;margin:0 -4px}
.cm-mem{display:flex;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px solid var(--line)}
.cm-mem:last-child{border-bottom:0}
.cm-mem>div:not(.cm-mem-a){flex:1;min-width:0;display:flex;flex-direction:column}
.cm-mem b{font-size:.9rem}
.cm-mem span{font-size:.74rem;color:var(--tx-3)}
.cm-mem-a{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}

/* ---- study rooms ---- */
.rm-hero{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding:clamp(22px,4vw,36px);border-radius:28px;margin-bottom:18px;
  background:radial-gradient(100% 140% at 0% 0%,color-mix(in srgb,var(--ok) 20%,transparent),transparent 60%),linear-gradient(160deg,var(--bg-2),color-mix(in srgb,var(--bg-2) 70%,var(--bg-3)));
  border:1px solid var(--line)}
.rm-hero h1{font-size:clamp(1.7rem,4.8vw,2.5rem);line-height:1.05;letter-spacing:-.03em;margin:.2em 0 .35em}
.rm-hero p{color:var(--tx-2);line-height:1.6;margin:0;max-width:58ch}
.rm-hero .lab{margin:0}
.rm-orb{position:relative;width:96px;height:96px;display:grid;place-items:center;color:var(--ok)}
.rm-orb svg{width:40px;height:40px;position:relative;z-index:1}
.rm-orb i{position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;opacity:.35;animation:rmPulse 3s ease-out infinite}
.rm-orb i:nth-child(2){animation-delay:1s}.rm-orb i:nth-child(3){animation-delay:2s}
@keyframes rmPulse{from{transform:scale(.55);opacity:.55}to{transform:scale(1.15);opacity:0}}
@media (max-width:560px){.rm-hero{grid-template-columns:1fr}.rm-orb{width:70px;height:70px}}
.rm-len{margin-top:10px}
.rm-list{display:flex;flex-direction:column;gap:10px}
.rm-li{display:flex;align-items:center;gap:14px;width:100%;cursor:pointer;font:inherit;color:inherit;text-align:left}
.rm-li>div{flex:1;min-width:0;display:flex;flex-direction:column}
.rm-li span{font-size:.8rem;color:var(--tx-3)}
.rm-li em{font-style:normal;color:var(--ok);font-weight:700}
.rm-li-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--tx) 6%,transparent);color:var(--tx-2)}
.rm-li-ic svg{width:22px;height:22px}
.rm-li-ic.live{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 50%,transparent);animation:rmLive 2s infinite}
@keyframes rmLive{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.rm-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.rm-stage{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
  padding:clamp(20px,4vw,34px);border-radius:30px;margin-bottom:22px;border:1px solid var(--line);
  background:radial-gradient(80% 90% at 50% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),var(--bg-2)}
.rm-stage.st-focus{background:radial-gradient(80% 90% at 50% 0%,color-mix(in srgb,var(--ok) 20%,transparent),transparent 70%),var(--bg-2)}
.rm-stage.st-break,.rm-stage.st-bpaused{background:radial-gradient(80% 90% at 50% 0%,color-mix(in srgb,var(--warn) 20%,transparent),transparent 70%),var(--bg-2)}
.rm-head{display:flex;flex-direction:column;align-items:center;gap:6px}
.rm-head h1{margin:0;font-size:clamp(1.4rem,4vw,1.9rem);letter-spacing:-.02em}
.rm-live{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:700;color:var(--ok)}
.rm-live i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:unPulse 1.8s infinite}
.rm-ring{position:relative;width:min(260px,70vw);aspect-ratio:1}
.rm-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.rm-rb{fill:none;stroke:color-mix(in srgb,var(--tx) 9%,transparent);stroke-width:5}
.rm-rf{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.st-focus .rm-rf{stroke:var(--ok)}
.st-break .rm-rf,.st-bpaused .rm-rf{stroke:var(--warn)}
.rm-time{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.rm-time b{font-size:clamp(2.6rem,11vw,3.6rem);font-weight:500;letter-spacing:-.04em;line-height:1}
.rm-time span{font-size:.8rem;color:var(--tx-3);font-weight:600;max-width:70%}
.rm-avs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-height:38px}
.rm-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-family:"Bricolage Grotesque",sans-serif;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));color:#fff;position:relative;flex:none}
.rm-av.f::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--ok);animation:rmRing 2s ease-in-out infinite}
@keyframes rmRing{50%{inset:-7px;opacity:.4}}
.rm-ctl{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.rm-ctl .btn svg{width:16px;height:16px}
.rm-note{margin:0}
.rm-board{padding:6px 12px!important}
.rm-row{display:grid;grid-template-columns:28px auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}
.rm-row:last-child{border-bottom:0}
.rm-row.me{background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:14px;margin:0 -6px;padding:11px 10px}
.rm-rank{text-align:center;font-weight:800;color:var(--tx-3);font-family:"JetBrains Mono",monospace}
.rm-row .rm-av{width:34px;height:34px;font-size:.84rem;opacity:.55}
.rm-row .rm-av.on{opacity:1;box-shadow:0 0 0 2px var(--bg-2),0 0 0 4px var(--ok)}
.rm-who{min-width:0;display:flex;flex-direction:column}
.rm-who b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-who span{font-size:.74rem;color:var(--tx-3)}
.rm-streak{display:inline-flex;align-items:center;gap:3px;font-size:.82rem;font-weight:800;color:var(--tx-3)}
.rm-streak svg{width:15px;height:15px}
.rm-streak.on{color:var(--warn)}
.rm-min{font-size:1.1rem;font-weight:500}
.rm-min small{font-size:.66rem;color:var(--tx-3);margin-left:2px}

/* ---- help & feedback ---- */
.hp-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(22px,4vw,36px);border-radius:28px;margin-bottom:16px;
  background:radial-gradient(100% 140% at 100% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 60%),linear-gradient(160deg,var(--bg-2),color-mix(in srgb,var(--bg-2) 70%,var(--bg-3)));
  border:1px solid var(--line)}
.hp-hero h1{font-size:clamp(1.9rem,5vw,2.7rem);letter-spacing:-.03em;line-height:1.02;margin:.15em 0 .3em}
.hp-hero p{margin:0 0 14px;color:var(--tx-2)}
.hp-hero .lab{margin:0}
.hp-hero-ic{width:92px;height:92px;flex:none;border-radius:28px;display:grid;place-items:center;background:linear-gradient(160deg,var(--accent),var(--accent-2));color:#fff;
  box-shadow:0 20px 40px -18px var(--accent);transform:rotate(-6deg)}
.hp-hero-ic svg{width:48px;height:48px}
@media (max-width:560px){.hp-hero-ic{display:none}}
.hp-mail{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:14px;text-decoration:none;color:var(--tx);font-weight:700;font-size:.9rem;
  background:color-mix(in srgb,var(--tx) 6%,transparent);border:1px solid var(--line)}
.hp-mail svg{width:18px;height:18px;color:var(--accent)}
.hp-kinds{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}
@media (max-width:900px){.hp-kinds{grid-template-columns:1fr 1fr}}
.hp-k{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;cursor:pointer;font:inherit;color:inherit;padding:18px!important}
.hp-k b{font-size:.98rem;margin-top:8px}
.hp-k span:not(.hp-k-ic){font-size:.78rem;color:var(--tx-3);line-height:1.4}
.hp-k-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.hp-k-ic svg{width:22px;height:22px}
.hp-k.k-bug .hp-k-ic{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.hp-k.k-idea .hp-k-ic{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.hp-k.k-payment .hp-k-ic{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.hp-bounty{position:absolute;top:12px;right:12px;font-style:normal;font-size:.62rem;font-weight:800;padding:3px 8px;border-radius:99px;
  background:linear-gradient(180deg,#FFE08A,#F4B940);color:#2A1C00}
.hp-bb{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px;border-color:color-mix(in srgb,var(--bad) 30%,var(--line))!important}
.hp-bb-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.hp-bb-ic svg{width:24px;height:24px}
.hp-bb b{font-size:1rem}
.hp-bb p{margin:.3em 0 0;font-size:.88rem;color:var(--tx-2);line-height:1.55}
.hp-earned{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.8rem;font-weight:700;color:var(--ok)}
.hp-earned svg{width:15px;height:15px}
.hp-list{padding:4px 10px!important;margin-bottom:22px}
.hp-t{display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.hp-t:last-child{border-bottom:0}
.hp-t>div{flex:1;min-width:0;display:flex;flex-direction:column}
.hp-t b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-t span{font-size:.74rem;color:var(--tx-3)}
.hp-t-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.hp-t-ic svg{width:18px;height:18px}
.hp-t-ic.k-bug{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}
.hp-t-ic.k-idea{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.hp-t-ic.k-payment{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.hp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);vertical-align:2px}
.hp-st{flex:none;font-size:.68rem;font-weight:800;letter-spacing:.04em;padding:4px 9px;border-radius:99px;white-space:nowrap}
.hp-st.s-o{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.hp-st.s-a{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.hp-st.s-v{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.hp-st.s-c{background:color-mix(in srgb,var(--tx) 7%,transparent);color:var(--tx-3)}
.hp-form{display:flex;flex-direction:column;gap:14px;max-width:760px}
.hp-kseg{max-width:100%;overflow-x:auto;align-self:flex-start}
.hp-kseg svg{width:14px;height:14px;vertical-align:-2px}
.hp-att{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hp-att label{cursor:pointer}
.hp-att svg{width:15px;height:15px}
.hp-thumb{height:64px;border-radius:10px;border:1px solid var(--line)}
.hp-dev{display:flex;gap:6px;align-items:flex-start;margin:0;line-height:1.5}
.hp-dev svg{width:14px;height:14px;flex:none;margin-top:2px}
.hp-dev span{font-family:"JetBrains Mono",monospace;font-size:.7rem;color:var(--tx-3);word-break:break-word}
.hp-form .btn-lg{align-self:flex-start}
.hp-form .btn svg{width:16px;height:16px}
.hp-tk{max-width:820px;display:flex;flex-direction:column;gap:14px}
.hp-tk-h{display:flex;align-items:flex-start;gap:12px}
.hp-tk-h>div{flex:1;min-width:0}
.hp-tk-h h1{margin:0;font-size:clamp(1.2rem,3.4vw,1.6rem);letter-spacing:-.02em;line-height:1.2}
.hp-tk-h span{font-size:.78rem;color:var(--tx-3)}
.hp-reward{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--ok) 11%,transparent);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
.hp-reward svg{width:26px;height:26px;color:var(--ok)}
.hp-reward b{display:block;color:var(--ok)}
.hp-reward span{font-size:.8rem;color:var(--tx-2)}
.hp-msgs{display:flex;flex-direction:column;gap:10px}
.hp-m{max-width:86%;padding:12px 14px;border-radius:18px;font-size:.92rem;line-height:1.55}
.hp-m p{margin:0}
.hp-m time{display:block;margin-top:6px;font-size:.68rem;color:var(--tx-3)}
.hp-m.you{align-self:flex-end;background:color-mix(in srgb,var(--accent) 12%,var(--bg-2));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-bottom-right-radius:6px}
.hp-m.bb{align-self:flex-start;background:var(--bg-3);border:1px solid var(--line);border-bottom-left-radius:6px}
.hp-m-who{display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.hp-m-who svg{width:13px;height:13px}
.hp-steps{margin-top:8px!important;padding-top:8px;border-top:1px dashed var(--line-2);font-size:.86rem}
.hp-shot{display:block;max-width:100%;max-height:360px;border-radius:12px;margin-top:10px;border:1px solid var(--line)}
.hp-reply{display:flex;gap:8px;align-items:flex-end}
.hp-reply textarea{flex:1;resize:vertical;min-height:46px}
.hp-reply .btn{height:46px;width:52px;padding:0;justify-content:center}
.hp-reply .btn svg{width:18px;height:18px}

/* ---- Paper: ink, not purple ---- */
:root[data-theme="light"] .cm-av,:root[data-theme="light"] .rm-av{background:linear-gradient(140deg,#3A3730,#1B1A17)}
:root[data-theme="light"] .cm-hero-ic,:root[data-theme="light"] .cm-top-ic,:root[data-theme="light"] .hp-hero-ic{background:linear-gradient(160deg,#3A3730,#1B1A17);box-shadow:var(--sh)}
:root[data-theme="light"] .cm-post.fresh::after,:root[data-theme="light"] .cm-newer{background:var(--tx);color:var(--bg-2)}

/* ---- Premium Glass ---- */
html:root[data-theme="premium"] .cm-hero,html:root[data-theme="premium"] .rm-hero,html:root[data-theme="premium"] .hp-hero{
  background:radial-gradient(100% 130% at 100% 0%,rgba(99,205,240,.18),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03))!important;
  border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px)}
html:root[data-theme="premium"] .cm-post,html:root[data-theme="premium"] .rm-stage{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;border-color:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 34px -22px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
html:root[data-theme="premium"] .cm-post.k-notice{border-left:3px solid var(--accent)}
html:root[data-theme="premium"] .cm-post.k-deadline{border-left:3px solid var(--warn)}
html:root[data-theme="premium"] .cm-soon-i,html:root[data-theme="premium"] .cm-cal{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
html:root[data-theme="premium"] .hp-m.bb{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}
html:root[data-theme="premium"] .cm-hero-ic,html:root[data-theme="premium"] .cm-top-ic,html:root[data-theme="premium"] .hp-hero-ic{
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08));color:var(--tx);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 30px -14px rgba(0,0,0,.8)}

/* ---- Sticker ---- */
:root[data-theme="sticker"] .cm-post,:root[data-theme="sticker"] .rm-stage{border:1.5px solid var(--key);box-shadow:0 4px 0 -1px var(--key)}
:root[data-theme="sticker"] .cm-ack.on{background:var(--yel);border-color:var(--key);color:#1A1203}
:root[data-theme="sticker"] .cm-codechip{border-color:var(--key)}

@media (prefers-reduced-motion:reduce){.rm-orb i,.rm-li-ic.live,.rm-av.f::after{animation:none}}

/* ---- fixes after the first look ---- */
.cm-write>span:not(.cm-av){flex:1}
.cm-write .cm-av{flex:none;width:34px;height:34px}
.cm-fseg button,.cm-kseg button,.hp-kseg button,.rm-len button{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;flex-direction:row}
#v-help .hp-k{display:flex;flex-direction:column;align-items:flex-start}
#v-help .hp-k b,#v-help .hp-k span:not(.hp-k-ic){display:block}
.hp-bounty{white-space:nowrap}
.hp-dev{display:block}
.hp-dev svg{display:inline-block;vertical-align:-2px;margin-right:4px}
.hp-dev span{display:block;margin-top:4px}
@media (max-width:560px){.hp-tk-h{flex-wrap:wrap}.hp-tk-h .hp-st{order:3;margin-left:48px}}
/* on a wide screen, a feed reads best at the width of a page */
@media (min-width:961px){#v-class,#v-rooms,#v-help{max-width:1080px}}