:root{--acc:#22d3ee;--acc-soft:#67e8f9;--gold:#f5b942;--gold-soft:#fbd176;--bg:#05070d;--bg2:#0a0f1c;--panel:#080c16;--card:#0d1322;--card2:#151d33;--line:#222e4b;
--text:#e9eefb;--muted:#9aa8c7;--ok:#5eead4;--bad:#ff938a;--warn:#f5b942;--ink:#04131b;--tab:64px;
--grad:linear-gradient(180deg,#22d3ee 0%,#2dd4bf 32%,#f5b942 100%);--grad-h:linear-gradient(90deg,#22d3ee 0%,#2dd4bf 35%,#f5b942 100%);
--btn:linear-gradient(135deg,#22d3ee 0%,#3fd6c4 45%,#f5b942 100%);
--hover:#fff;--grad-text:var(--grad-h);--on-danger:var(--ink);--danger:#ff938a;--danger-hover:#ffb0aa;
--ok-bd:#1f6b63;--ok-bg:#0a2528;--warn-bd:#7a5d1c;--warn-bg:#251d0b;--gold-bg:#211a0a;--bad-bd:#8a3c42;--bad-bg:#2a1618;
--hero-bd:#1d5a6a;--ghost-bd:#1d5a6a;--field-bd:#2a3a5e;--prem-bd:#6e5a22;--glow-a:rgba(34,211,238,.10);--glow-b:rgba(245,185,66,.08);
--sh-pop:0 12px 32px rgba(0,0,0,.5);--sh-lift:0 10px 24px rgba(0,0,0,.35);--sh-bar:0 -6px 20px rgba(0,0,0,.45);
--sh-card:0 1px 0 rgba(255,255,255,.03) inset;--top-bg:rgba(8,12,22,.88);--tab-bg:rgba(8,12,22,.94);
--tgl-track:#0f5f58;--tgl-bd:#2dd4bf;--tgl-knob:#f3eedd;
--ico-bg:linear-gradient(180deg,rgba(34,211,238,.14),rgba(245,185,66,.12)),var(--card2);--ico-ring:rgba(103,232,249,.18);
--mark-glow:drop-shadow(0 0 6px rgba(34,211,238,.35));--mark-glow-lg:drop-shadow(0 0 14px rgba(34,211,238,.4)) drop-shadow(0 6px 14px rgba(245,185,66,.25));
--stars:block;color-scheme:dark;
--page-bg:radial-gradient(ellipse 60% 45% at 12% 8%,rgba(34,211,238,.075),transparent 70%),radial-gradient(ellipse 55% 45% at 90% 92%,rgba(245,185,66,.055),transparent 70%),radial-gradient(ellipse 50% 40% at 78% 18%,rgba(70,80,190,.09),transparent 70%),radial-gradient(ellipse 45% 40% at 20% 85%,rgba(20,60,110,.12),transparent 70%),radial-gradient(1px 1px at 23px 41px,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 137px 92px,rgba(190,225,255,.5),transparent),radial-gradient(1px 1px at 211px 17px,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 77px 163px,rgba(255,255,255,.45),transparent),radial-gradient(1px 1px at 251px 207px,rgba(190,225,255,.45),transparent),radial-gradient(1px 1px at 61px 31px,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 149px 111px,rgba(255,255,255,.35),transparent),radial-gradient(1px 1px at 283px 59px,rgba(190,225,255,.4),transparent),radial-gradient(1px 1px at 11px 173px,rgba(255,255,255,.35),transparent),radial-gradient(1.5px 1.5px at 97px 211px,rgba(255,255,255,.55),transparent),radial-gradient(1.5px 1.5px at 301px 143px,rgba(200,230,255,.5),transparent),linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
--page-size:auto,auto,auto,auto,263px 241px,263px 241px,263px 241px,263px 241px,263px 241px,179px 197px,179px 197px,179px 197px,179px 197px,421px 389px,421px 389px,auto}
/* Light theme: only tokens change (the head script sets data-theme="light" for Light, and for Auto when the device is light). */
:root[data-theme="light"]{--bg:#f4f7fb;--bg2:#e9eff7;--panel:#fff;--card:#fff;--card2:#eef3f9;--line:#d5deea;
--text:#1e293b;--muted:#4b5a73;--acc:#0891b2;--acc-soft:#0e7490;--gold:#b7791f;--gold-soft:#8a5a0b;--ok:#0f766e;--bad:#b42318;--warn:#8f5200;
--hover:#0f172a;--grad-text:linear-gradient(90deg,#0e7490 0%,#0f766e 40%,#a8680f 100%);--on-danger:#fff;--danger:#b42318;--danger-hover:#912018;
--ok-bd:#8fd5ca;--ok-bg:#e6f7f4;--warn-bd:#e2bd73;--warn-bg:#fff6e0;--gold-bg:#fff4d6;--bad-bd:#f0a8a2;--bad-bg:#fdecea;
--hero-bd:#9ad8e6;--ghost-bd:#7cc3d3;--field-bd:#b9c6d8;--prem-bd:#e2b653;--glow-a:rgba(8,145,178,.09);--glow-b:rgba(245,185,66,.12);
--sh-pop:0 12px 32px rgba(15,23,42,.16);--sh-lift:0 10px 24px rgba(15,23,42,.12);--sh-bar:0 -6px 20px rgba(15,23,42,.12);
--sh-card:0 1px 2px rgba(15,23,42,.05),0 6px 16px rgba(15,23,42,.04);--top-bg:rgba(255,255,255,.88);--tab-bg:rgba(255,255,255,.94);
--tgl-track:#0d9488;--tgl-bd:#0f766e;--tgl-knob:#fff;
--ico-bg:linear-gradient(180deg,rgba(8,145,178,.10),rgba(245,185,66,.14)),var(--card2);--ico-ring:rgba(8,145,178,.20);
--mark-glow:drop-shadow(0 1px 3px rgba(15,23,42,.25));--mark-glow-lg:drop-shadow(0 4px 10px rgba(15,23,42,.22));
--stars:none;color-scheme:light;
--page-bg:radial-gradient(ellipse 60% 45% at 8% 0%,rgba(34,211,238,.10),transparent 70%),radial-gradient(ellipse 55% 45% at 96% 100%,rgba(245,185,66,.10),transparent 70%),linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
--page-size:auto,auto,auto}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
overflow-wrap:break-word}
body.has-tabs{padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom,0px))}
a{color:var(--acc-soft)}
a:hover{color:var(--hover)}
.skip{position:absolute;left:-999px;top:8px;background:var(--acc);color:var(--ink);padding:10px 14px;border-radius:8px;z-index:100;font-weight:700}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:980px;margin:0 auto;padding:16px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;min-height:56px;
border-bottom:1px solid var(--line);background:var(--panel)}
.brand{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:1.2rem;color:var(--acc);text-decoration:none;letter-spacing:.02em}
h1{font-size:1.6rem;line-height:1.2;margin:0 0 .15em;color:var(--acc)}
h2{font-size:1.2rem;line-height:1.3;margin:0 0 .4em;color:var(--acc-soft)}
h3{font-size:1.05rem;margin:0;color:var(--text)}
h2.sec{margin:1.6em 0 .6em}
p{margin:.5em 0}
.muted{color:var(--muted)}
.lead{color:var(--muted);font-size:1.05rem;margin:.1em 0}
.small{font-size:.9rem}
.eyebrow{margin:0;color:var(--acc-soft);font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
code{background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.9em;overflow-wrap:anywhere}
.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--acc);color:var(--ink);border:2px solid var(--acc);
border-radius:12px;padding:10px 20px;min-height:48px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;text-align:center;line-height:1.2}
.btn:hover,button:hover{background:var(--acc-soft);border-color:var(--acc-soft);color:var(--ink)}
.btn.ghost,button.ghost{background:transparent;color:var(--acc-soft);border-color:var(--acc)}
.btn.ghost:hover,button.ghost:hover{background:var(--card2);color:var(--hover)}
.btn.big{min-height:56px;padding:12px 28px;font-size:1.1rem}
.btn.block,button.block{display:flex;width:100%}
button[disabled]{opacity:.6;cursor:progress}
:focus-visible{outline:3px solid var(--acc-soft);outline-offset:3px;border-radius:6px}
form{margin:0}
.who{display:none}
.user{position:relative}
.user summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;padding:4px 8px;border-radius:12px;cursor:pointer;color:var(--text)}
.user summary::-webkit-details-marker{display:none}
.user summary:hover{background:var(--card2)}
.user img,.gicon.sm{width:32px;height:32px;border-radius:50%;border:2px solid var(--acc)}
.uname{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:480px){.uname{display:none}.brandbox{flex:0 0 auto}}  /* phone: logo + Beta + the avatar button fit; your name is in the menu */
.menu{position:absolute;right:0;top:calc(100% + 6px);z-index:50;width:min(260px,calc(100vw - 24px));background:var(--card);
border:1px solid var(--acc);border-radius:14px;padding:12px;display:grid;gap:8px;box-shadow:var(--sh-pop)}
.menu p{margin:0}
footer{color:var(--muted);text-align:center;padding:24px 16px;font-size:.9rem}
/* ---- server shell: sidebar (desktop) / tab bar (mobile) */
.shell{display:block}
.side{display:none}
.server-head{display:flex;align-items:center;gap:12px;min-width:0}
.server-head.in-page{padding:12px 16px;margin:0 0 16px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.sh-text{display:grid;min-width:0}
.sh-name{font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.switch{display:inline-flex;align-items:center;min-height:32px;font-size:.95rem}
.gicon{width:48px;height:48px;border-radius:14px;flex:0 0 48px;object-fit:cover;background:var(--card2)}
.gfallback{display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:1.3rem;color:var(--acc);border:2px solid var(--line)}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--tab) + env(safe-area-inset-bottom,0px));
padding-bottom:env(safe-area-inset-bottom,0px);background:var(--panel);border-top:1px solid var(--acc)}
.tabbar .nav-item{flex-direction:column;justify-content:center;gap:2px;min-height:var(--tab);padding:6px 1px;font-size:.74rem;text-align:center;border-radius:0}
.nav-item{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;color:var(--text);text-decoration:none;border-radius:12px;font-weight:600;min-width:0}
.nav-item .ni{font-size:1.25rem;line-height:1}
.nav-item .nl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
a.nav-item:hover{background:var(--card2);color:var(--hover)}
.nav-item.active{position:relative;background:var(--card2);color:var(--acc-soft)}
.nav-item.active::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--grad-h)}
.nav-item.disabled{color:var(--muted);cursor:not-allowed}
/* ---- page pieces */
.page-head{display:flex;align-items:center;gap:12px;margin:4px 0 16px}
.ph-ico{display:inline-block;font-size:1.8rem}
.hero{text-align:center;padding:32px 8px}
.hero h1{font-size:1.9rem}
.hero .logo{font-size:3rem;color:var(--acc);line-height:1}
.hero.err .logo{font-size:3.4rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;min-width:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.stat h3{color:var(--acc-soft);margin-bottom:.3em}
.stat .big{font-size:1.5rem;font-weight:700}
progress{width:100%;height:12px;border:0;border-radius:8px;background:var(--card2);overflow:hidden;appearance:none;-webkit-appearance:none}
progress::-webkit-progress-bar{background:var(--card2);border-radius:8px}
progress::-webkit-progress-value{background:var(--acc);border-radius:8px}
progress::-moz-progress-bar{background:var(--acc);border-radius:8px}
progress.big-progress{height:18px;border-radius:12px;margin:14px 0}
.notice{border-left:4px solid var(--acc);background:var(--card);padding:12px 14px;border-radius:10px;margin:14px 0}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;min-height:28px;border-radius:999px;font-size:.88rem;font-weight:700;
white-space:nowrap;border:1px solid var(--line);background:var(--card2);color:var(--text)}
.chip-ready{color:var(--ok);border-color:var(--ok-bd);background:var(--ok-bg)}
.chip-attention{color:var(--warn);border-color:var(--warn-bd);background:var(--warn-bg)}
.chip-todo{color:var(--text);border-color:var(--line)}
.chip-soon,.chip-premium{color:var(--gold-soft);border-color:var(--gold);background:var(--gold-bg)}
/* overview */
.hero-card{border-color:var(--hero-bd);background:radial-gradient(120% 90% at 0% 0%,var(--glow-a),transparent 60%),radial-gradient(100% 80% at 100% 100%,var(--glow-b),transparent 60%),var(--card)}
.hc-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.hc-top h2{font-size:1.5rem;margin:.1em 0}
.hc-count{display:grid;justify-items:end;text-align:right;white-space:nowrap}
.count{font-size:1.1rem}
.count strong{font-size:2rem;color:var(--acc)}
.hc-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.hc-foot .btn{flex:1 1 220px}
.todos{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.todo{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.todo-attention{border-color:var(--warn-bd)}
.todo-ico{font-size:1.6rem;width:40px;text-align:center;line-height:1.3}
.todo-main{min-width:0}
.todo-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.helper{margin:.15em 0 .3em}
.detail{margin:.25em 0;font-size:.95rem;overflow-wrap:anywhere}
.detail.warn{color:var(--warn)}
.todo-act{grid-column:1 / -1}
.todo-act .btn{width:100%}
/* settings */
.jump{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;margin:0 0 8px;-webkit-overflow-scrolling:touch}
.jump a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;background:var(--card)}
.jump a:hover{border-color:var(--acc)}
.setting{margin:14px 0}
.set-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.set-head h2{margin:0}
.now{margin:.4em 0 .8em;overflow-wrap:anywhere}
form.stack{display:grid;gap:12px}
.field{display:grid;gap:2px}
.field .lbl{font-weight:700}
.help{color:var(--muted);font-size:.92rem}
select,input[type=text],textarea{width:100%;max-width:100%;min-width:0;min-height:48px;padding:10px 12px;font:inherit;color:var(--text);background:var(--card2);border:1px solid var(--acc);border-radius:12px}
select:focus,input:focus-visible,textarea:focus-visible{outline:3px solid var(--acc-soft);outline-offset:2px}
fieldset{border:1px solid var(--line);border-radius:14px;padding:8px 12px;margin:0;min-width:0}
legend{padding:0 6px;color:var(--acc-soft);font-weight:700}
.checks{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.check{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 6px;border-radius:12px;cursor:pointer}
.check:hover{background:var(--card2)}
.check input{width:26px;height:26px;flex:0 0 26px;accent-color:var(--acc)}
.check span{display:grid;min-width:0}
.check small{color:var(--muted);font-size:.9rem}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.actions button{flex:1 1 150px}
.dirty{margin:0;color:var(--warn);font-weight:600}
.flash{display:flex;align-items:flex-start;gap:12px;border-radius:14px;padding:12px 14px;margin:12px 0;font-weight:600;overflow-wrap:anywhere;animation:pop .25s ease-out}
.flash-text{flex:1;min-width:0}
.flash-x{flex:0 0 44px;min-height:44px;width:44px;padding:0;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:10px;font-size:1.1rem}
.flash-x:hover{background:var(--card2);color:var(--hover)}
.flash-ok{background:var(--ok-bg);border:1px solid var(--ok-bd)}
.flash-bad{background:var(--bad-bg);border:1px solid var(--bad-bd)}
.flash.gone{display:none}
.audit{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.audit li{border-bottom:1px solid var(--line);padding-bottom:8px;overflow-wrap:anywhere}
.when{display:block;color:var(--muted);font-size:.9rem}
/* servers */
.server-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
.server-card{display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:center}
.sc-main{display:grid;gap:6px;min-width:0;justify-items:start}
.name{font-weight:700;font-size:1.05rem;overflow-wrap:anywhere}
.sc-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px}
.sc-actions .btn{flex:1 1 120px}
.empty{text-align:center;padding:32px 16px;background:var(--card);border:1px dashed var(--line);border-radius:16px;margin:16px 0}
.empty-ico{font-size:2.6rem;line-height:1}
.tiles{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:12px}
.tile{text-align:left}
.tile-ico{font-size:1.8rem}
.tile h3{margin:.3em 0 .1em;color:var(--acc-soft)}

textarea{resize:vertical;line-height:1.5}
.check.radio{border:1px solid var(--line);border-radius:12px}
.check.radio:has(input:checked){border-color:var(--acc);background:var(--card2)}
button.danger{background:var(--danger);border-color:var(--danger);color:var(--on-danger)}
button.danger:hover{background:var(--danger-hover);border-color:var(--danger-hover)}
.panel-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cm-opts{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}.cm-opt{display:grid;gap:2px}.cm-bar{letter-spacing:1px;color:var(--acc-soft);font-size:.95rem}
.panel-card h3{margin:0;font-size:1.1rem;overflow-wrap:anywhere}
.chk-scroll{max-height:260px;overflow-y:auto;padding:4px;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
fieldset.chan-list{margin-top:14px}
.pairs{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
.pair{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px 10px;background:var(--card2);border-radius:10px;overflow-wrap:anywhere}
.pair-bad{border:1px solid var(--warn-bd)}
.pe{font-size:1.2rem}
.cemoji{width:24px;height:24px;vertical-align:middle}
.pr{font-weight:600;overflow-wrap:anywhere}
.pair-edits{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.pair-edit{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--card2);border-radius:12px}
.pair-text{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0;overflow-wrap:anywhere}
.pair-row{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:12px;margin:8px 0}
.pf{display:grid;gap:4px;min-width:0}
.pf-emoji{flex:1 1 170px}
.pf-role{flex:2 1 230px}
.pair-row label{white-space:nowrap}
.perks{margin:.5em 0 1em;padding-left:1.2em}
.perks li{margin:.25em 0}
.locked{border-color:var(--acc)}
.preview{display:flex;gap:12px;align-items:flex-start;padding:14px;background:#2b2d31;border:1px solid var(--line);border-radius:14px;color:#f2f3f5}
.pv-av{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--acc);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem}
.pv-body{min-width:0}
.pv-body p{margin:.15em 0;overflow-wrap:anywhere}
.pv-tag{display:inline-block;background:#5865f2;color:#fff;border-radius:4px;padding:0 5px;font-size:.7rem;font-weight:700;vertical-align:middle}
.pv-note{color:#c7c9cf;font-size:.92rem;border-left:3px solid var(--acc);padding-left:8px;white-space:pre-wrap}
@media (min-width:700px){.panel-list{grid-template-columns:repeat(2,1fr)}}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (min-width:700px){
.wrap{padding:24px}
.hero{padding:56px 8px}.hero h1{font-size:2.5rem}
.checks{grid-template-columns:repeat(2,minmax(0,1fr))}
form.stack .actions button{flex:0 1 auto}
.server-grid{grid-template-columns:repeat(2,1fr)}
.tiles{grid-template-columns:repeat(3,1fr)}
.todo{grid-template-columns:auto 1fr auto;align-items:center}
.todo-act{grid-column:auto}.todo-act .btn{width:auto;min-width:120px}
.ph-ico{display:inline-block}
}
@media (min-width:960px){
body.has-tabs{padding-bottom:0}
.tabbar,.server-head.in-page{display:none}
.shell{display:grid;grid-template-columns:260px minmax(0,1fr);gap:0;max-width:1320px;margin:0 auto;align-items:start}
.side{display:flex;flex-direction:column;gap:16px;position:sticky;top:0;padding:20px 16px;min-height:calc(100vh - 100px)}
.side .server-head{padding-bottom:16px;border-bottom:1px solid var(--line)}
.nav{display:grid;gap:4px}
.side-note{margin-top:auto}
.server-grid{grid-template-columns:repeat(3,1fr)}
.who{display:flex}
}
[hidden]{display:none!important}
/* ---- economy, welcome card, help, toasts, sticky save bars */
.lb{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.lb-row{display:grid;grid-template-columns:3.2rem 1fr auto;gap:8px;align-items:center;padding:10px 12px;background:var(--card2);border-radius:12px;min-height:48px}
.lb-house{border:1px solid var(--acc)}
.lb-rank{font-weight:800;color:var(--acc-soft)}
.lb-name{min-width:0;overflow-wrap:anywhere;font-weight:600;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.lb-coins{font-weight:700;white-space:nowrap;text-align:right}
.sub{margin:1em 0 .4em;color:var(--acc-soft)}
.game-list,.cmds{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.game-list li{overflow-wrap:anywhere}
.cmds li{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;min-height:48px;overflow-wrap:anywhere}
button.copy{min-height:44px;padding:6px 16px}
.welcome-card{border-color:var(--hero-bd);background:radial-gradient(120% 90% at 0% 0%,var(--glow-a),transparent 60%),radial-gradient(100% 80% at 100% 100%,var(--glow-b),transparent 60%),var(--card);margin:0 0 16px}
.steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.step{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--acc);color:var(--ink);font-weight:800}
.step-main{display:grid;gap:6px;justify-items:start;min-width:0}
.step-main p{margin:0}
.whats-new{margin:20px 0 0}
.whats-new h2{margin:.1em 0}
.wn-list{list-style:none;margin:10px 0 12px;padding:0;display:grid;gap:8px}
.wn-list li{margin:0;line-height:1.45;overflow-wrap:anywhere}
.help-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.flash-ok{position:sticky;top:8px;z-index:30;box-shadow:var(--sh-pop)}
@media (max-width:959px){
form.stack[data-guard] .actions{position:sticky;bottom:calc(var(--tab) + env(safe-area-inset-bottom,0px) + 8px);z-index:20;padding:10px;margin:0 -6px;background:var(--panel);border:1px solid var(--acc);border-radius:14px;box-shadow:var(--sh-bar)}
}
@media (min-width:700px){.lb-row{grid-template-columns:4rem 1fr auto;padding:10px 16px}}
/* ---- features page: calm cards, one status chip, one action; motion is opt-in and subtle */
.fsummary{margin:0 0 12px;color:var(--muted)}
.fsummary strong{color:var(--acc-soft)}
.fchips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 8px;margin:0 0 4px}
.fchip{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;background:var(--card);color:var(--text);font-weight:600}
.fchip:hover{border-color:var(--acc)}
.fchip.active{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.fsec{font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:1.6em 0 .6em}
.fgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
.fcard{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;min-width:0}
.fcard h3{margin:4px 0 0;font-size:1.1rem}
.fc-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
.fc-ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:var(--card2);font-size:1.6rem;line-height:1}
.fc-blurb{margin:0}
.fc-detail{margin:2px 0 0;font-size:.95rem;overflow-wrap:anywhere}
.fc-attention .fc-detail{color:var(--warn)}
.fc-attention{border-color:var(--warn-bd)}
.fc-premium{border-style:dashed}
.fc-unlock{margin:2px 0 0;font-size:.95rem;color:var(--gold-soft)}
.fc-note{margin:2px 0 0}
.fc-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:auto;padding-top:10px}
.fc-act .btn{flex:1 1 140px}
.fc-form{flex:0 0 auto}
.fc-hint{display:grid;gap:4px;margin-top:auto;padding-top:10px}
.fc-act + .fc-hint{margin-top:0}
.fc-cmd{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.fc-admin{margin:0}
button.tgl{background:transparent;color:var(--text);border:2px solid var(--line);gap:10px;padding:6px 14px 6px 8px;font-weight:600}
button.tgl:hover{background:var(--card2);border-color:var(--acc);color:var(--hover)}
.tgl-track{position:relative;flex:0 0 46px;width:46px;height:28px;border-radius:999px;background:var(--tgl-track);border:1px solid var(--tgl-bd)}
.tgl-knob{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;background:var(--tgl-knob);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.fnote{margin-top:1.6em}
/* ICON BOB: only these small icon groups float: (1) the Features icon in the menu (sidebar and bottom tab), (2) the Features card
   icons, (3) on the Overview page only: the page icon, the "All set!" party icon and the setup-step icons.
   The other menu icons (Overview, Settings, Roles, Customize, Economy), the header logo and every other page's icons stay still.
   They all use the same keyframes, duration (6.5s), easing and a zero delay, so they move up and down TOGETHER (no stagger).
   Big things (hero icons, big numbers, glows, backgrounds) never animate. The bob is INTENTIONALLY ALWAYS ON: it is
   deliberately NOT inside a prefers-reduced-motion query and the reduce rule below does not switch it off. It is small and smooth.
   Other decorative motion (star twinkle, card lift, message pop-in) stays opt-in under prefers-reduced-motion: no-preference. */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.nav-item[href$="/features"] .ni,.fc-ico,.pg-overview .ph-ico,.pg-overview .todo-ico,.pg-overview .ci{will-change:transform;animation:bob 6.5s ease-in-out 0s infinite}
.ci{display:inline-block}
@media (prefers-reduced-motion:no-preference){
.fcard{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.fcard:hover,.fcard:focus-within{transform:translateY(-2px);border-color:var(--acc);box-shadow:var(--sh-lift)}
.tgl-knob{transition:right .15s ease}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(2px 2px at 14% 22%,rgba(255,255,255,.9),transparent),radial-gradient(2px 2px at 71% 14%,rgba(190,235,255,.85),transparent),
radial-gradient(2px 2px at 88% 63%,rgba(255,255,255,.8),transparent),radial-gradient(2px 2px at 33% 78%,rgba(255,235,200,.8),transparent),
radial-gradient(1.5px 1.5px at 52% 46%,rgba(255,255,255,.7),transparent);animation:twinkle 9s ease-in-out infinite;display:var(--stars)}
}
@media (min-width:700px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.more-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.more-item{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;color:var(--text);text-decoration:none}
.more-item:hover{border-color:var(--acc);color:var(--hover)}
.more-ico{flex:0 0 44px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:var(--card2);font-size:1.4rem;line-height:1}
.more-text{display:grid;gap:2px;min-width:0;flex:1}
.more-go{font-size:1.6rem;color:var(--muted)}
@media (min-width:700px){.more-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---- Lumo space theme: deep black/navy, cyan-to-amber "slit" accent. Pure CSS, no images. */
html{background:var(--bg)}
body{background:transparent;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--page-bg);background-size:var(--page-size)}
a{color:var(--acc-soft)}
h1{color:var(--text)}
h2{color:var(--acc-soft)}
.top{background:var(--top-bg);border-bottom:1px solid var(--line)}
.brand{gap:10px;color:var(--text);font-weight:800;letter-spacing:.04em}
.brandbox{display:inline-flex;align-items:center;gap:8px;min-width:0}
.beta-chip{display:inline-flex;align-items:center;padding:0 9px;border-radius:999px;border:1px solid var(--warn-bd);background:var(--gold-bg);color:var(--gold-soft);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.7;white-space:nowrap}
.brand .mark{width:32px;height:32px;flex:0 0 auto;object-fit:contain}
/* robot mascot: tiny friendly poses; none of these move (only the Features menu icon, .fc-ico and the Overview icons bob) */
.mascot{display:block;max-width:100%;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.22))}
.hero-art,.empty-art,.inline-art{display:flex;justify-content:center;margin:0 0 8px}
.hero-art .mascot{width:min(144px,44vw);height:auto}
.empty-art .mascot{width:min(128px,40vw);height:auto}
.inline-art .mascot{width:min(96px,32vw);height:auto}
.ph-mascot{flex:0 0 auto;display:inline-flex}
.ph-mascot .mascot{width:48px;height:48px}
.flash-ico{flex:0 0 auto;display:inline-flex}
.flash-ico .mascot{width:36px;height:36px;margin:-4px 0}
.hc-top{flex-wrap:wrap;align-items:center}
.hc-art{flex:0 0 auto}
.hc-art .mascot{width:72px;height:72px}
.hc-text{flex:1 1 200px;min-width:0}
.wc-art{float:right;margin:0 0 6px 10px}
.wc-art .mascot{width:84px;height:84px}
.set-art{flex:0 0 auto}
.set-art .mascot{width:56px;height:56px}
.set-head .set-art-sm{margin-left:auto;display:inline-flex}.set-art-sm .mascot{width:40px;height:40px}
.confirm-art{float:right;margin:0 0 6px 10px}.confirm-art .mascot{width:64px;height:64px}
.hero h1{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.btn,button{background:var(--btn);border:0;padding:12px 22px;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 6px 18px rgba(34,211,238,.16)}
.btn:hover,button:hover{background:var(--btn);filter:brightness(1.12);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 8px 22px rgba(34,211,238,.22)}
.btn.ghost,button.ghost{background:transparent;color:var(--acc-soft);border:1px solid var(--ghost-bd);padding:11px 21px;box-shadow:none}
.btn.ghost:hover,button.ghost:hover{background:var(--card2);color:var(--hover);filter:none;border-color:var(--acc)}
button.danger{background:var(--danger);box-shadow:none}
button.danger:hover{background:var(--danger-hover);filter:none}
.flash-x,button.tgl{background:transparent;box-shadow:none}
button.tgl{border:2px solid var(--line)}
button.tgl:hover{background:var(--card2);border-color:var(--acc);filter:none}
.flash-x{border:1px solid var(--line)}
:focus-visible{outline:3px solid var(--acc-soft);outline-offset:3px}
.card,.fcard,.todo,.server-head.in-page,.empty,.notice{background:var(--card)}
.card,.fcard,.todo{border-color:var(--line);box-shadow:var(--sh-card)}
.notice{border-left:4px solid var(--acc)}
.tabbar{background:var(--tab-bg);border-top:1px solid var(--line)}
.side{background:transparent}
.side .nav-item.active::after{left:0;right:auto;top:22%;bottom:22%;width:3px;height:auto;border-radius:0 3px 3px 0;background:var(--grad)}
progress{background:var(--card2)}
progress::-webkit-progress-bar{background:var(--card2)}
progress::-webkit-progress-value{background:var(--grad-h)}
progress::-moz-progress-bar{background:var(--grad-h)}
.step-n,.pv-av{background:var(--btn)}
.fchip.active{background:var(--btn);border-color:transparent}
.fc-ico,.todo-ico,.tile-ico{border-radius:14px}
.fc-ico{background:var(--ico-bg);box-shadow:0 0 0 1px var(--ico-ring)}
.fc-setup .chip-todo{color:var(--warn);border-color:var(--warn-bd);background:var(--warn-bg)}
.chip-todo{color:var(--muted)}
.count strong{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.gicon{background:var(--card2)}
.gfallback{border:2px solid var(--line)}
.locked,.lb-house{border-color:var(--prem-bd)}
.fc-premium{border-color:var(--prem-bd)}
.check.radio:has(input:checked){border-color:var(--acc)}
.user img,.gicon.sm{border:2px solid var(--acc)}
.menu{border:1px solid var(--line)}
select,input[type=text],textarea{border:1px solid var(--field-bd)}
select:focus,input:focus-visible,textarea:focus-visible{border-color:var(--acc)}
/* ---- theme control (Dark / Light / Auto). The icons never animate. Hidden until the script is running. */
.preview{box-shadow:var(--sh-card)}
.ti{display:none;width:20px;height:20px;flex:0 0 auto}
.seg .ti{display:block;width:16px;height:16px}
.seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--card2);max-width:100%}
.seg-b{min-height:40px;padding:6px 10px;gap:6px;border-radius:9px;background:transparent;color:var(--text);border:0;box-shadow:none;font-weight:600;font-size:.92rem}
.seg-b:hover{background:var(--card);color:var(--hover);filter:none;box-shadow:none}
.seg-b[aria-pressed="true"]{background:var(--card);color:var(--acc-soft);box-shadow:0 0 0 1px var(--acc)}
.menu-theme{display:grid;gap:6px;margin:10px 0}
.menu-theme .seg{display:flex}
.menu-theme .seg-b{flex:1 1 0;justify-content:center;padding:6px 4px}
.wc-card{margin:8px 0 12px}.wc-card img{display:block;width:100%;max-width:1000px;height:auto;aspect-ratio:1000/350;border-radius:14px;border:1px solid var(--line);background:var(--card2)}
.wc-msg{margin:4px 0 0;padding:10px 12px;border-radius:10px;background:var(--card2);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.85}}
/* reduce: stop transitions and the decorative motion, but NOT the always-on icon bob above */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}.flash,body::after{animation:none!important}}
/* ---- reaction role builder (Create a panel) */
.rr-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.rr-steps{display:grid;gap:12px;min-width:0}
.rr-step{border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:10px;min-width:0;background:var(--card)}
.rr-step-h{display:flex;align-items:flex-start;gap:12px}
.rr-step-h h3{font-size:1.05rem;margin:0}
.rr-step-h p{margin:2px 0 0;color:var(--muted);font-size:.92rem}
.rr-badge{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--acc);color:var(--ink);font-weight:800;display:inline-grid;place-items:center;font-size:.95rem}
.rr-f{display:grid;gap:4px;min-width:0}
.rr-f label,.rr-lab{font-weight:700;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.rr-count{color:var(--muted);font-weight:500;font-size:.85rem;font-variant-numeric:tabular-nums}
.rr-err{margin:2px 0 0;color:var(--bad);font-size:.9rem}
.rr-err[hidden]{display:none}
.rr-err.rr-warn{color:var(--warn)}
.rr-f [aria-invalid="true"]{border-color:var(--bad);outline-color:var(--bad)}
.rr-colorline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rr-colorline input[type=text]{width:9.5rem}
.rr-swatches{display:flex;flex-wrap:wrap;gap:6px}
.rr-swatch{width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;border:2px solid var(--line)}
button.rr-swatch.pv-sw-0, button.rr-swatch.pv-sw-0:hover{background:#c9a227}
button.rr-swatch.pv-sw-1, button.rr-swatch.pv-sw-1:hover{background:#5865f2}
button.rr-swatch.pv-sw-2, button.rr-swatch.pv-sw-2:hover{background:#57f287}
button.rr-swatch.pv-sw-3, button.rr-swatch.pv-sw-3:hover{background:#ed4245}
button.rr-swatch.pv-sw-4, button.rr-swatch.pv-sw-4:hover{background:#eb459e}
button.rr-swatch.pv-sw-5, button.rr-swatch.pv-sw-5:hover{background:#22d3ee}
.rr-swatch[aria-pressed="true"]{border-color:var(--text);box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--acc)}
.rr-swatch[hidden],.rr-swatches[hidden]{display:none}
.rr-modes,.checks.rr-modes{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.rr-grad-note{font-size:.92rem}
.rr-grad-status{margin:.1em 0 .5em;font-size:.92rem;font-weight:600}
.rr-modes>*{min-width:0;overflow-wrap:anywhere}
.rr-form textarea,.rr-form input[type=text],.rr-form select{max-width:100%;min-width:0}
.rr-form textarea{resize:vertical}
.rr-rows{display:grid;gap:10px}
.rr-row{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--card2);min-width:0}
.rr-row-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rr-num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--card);border:1px solid var(--line);font-weight:700;font-size:.85rem}
.rr-fields{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-start;min-width:0}
.rr-fields .rr-f{min-width:0}
.rr-f-emoji{flex:1 1 170px}
.rr-f-role{flex:2 1 230px}
.rr-row label{white-space:nowrap}
.rr-remove{min-height:44px;min-width:44px;padding:0 12px}
.rr-add-line{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rr-dd{position:relative;min-width:0}
.rr-dd-btn{width:100%;justify-content:flex-start;gap:10px;text-align:left;font-weight:600;background:var(--card);color:var(--text);border:1px solid var(--field-bd);min-height:44px}
.rr-dd-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr-dd-ph{color:var(--muted);font-weight:500}
.rr-dd-caret{color:var(--muted)}
.rr-dd-menu{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);max-height:260px;overflow:auto;margin:0;padding:6px;list-style:none;background:var(--panel);border:1px solid var(--acc);border-radius:12px;box-shadow:var(--sh-pop)}
.rr-dd-menu[hidden]{display:none}
.rr-dd-opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:8px;cursor:pointer}
.rr-dd-opt:hover,.rr-dd-opt:focus{background:var(--card2);outline:none}
.rr-dd-opt:focus-visible{outline:2px solid var(--acc)}
.rr-dd-opt[aria-selected="true"]{font-weight:700}
.rr-dot{flex:0 0 14px;width:14px;height:14px;border-radius:50%;background:var(--rc,transparent);border:1px solid var(--muted)}
.rr-dot-none{background:transparent;border-style:dashed}
.rr-dot-gap{border-color:transparent}
.rr-summary{margin:0}
.rr-summary[hidden]{display:none}
.rr-preview{display:grid;gap:8px;min-width:0}
.rr-pv-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rr-pv-head h3{font-size:1rem}
.rr-pv-head small{color:var(--muted)}
.pv-dc{background:#313338;color:#dbdee1;border-radius:12px;overflow:hidden;font-family:"gg sans","Noto Sans",system-ui,sans-serif;font-size:.95rem;line-height:1.4;border:1px solid #1e1f22}
.pv-dc-chan{background:#2b2d31;padding:8px 14px;font-weight:700;color:#f2f3f5;border-bottom:1px solid #1e1f22;overflow-wrap:anywhere}
.pv-dc-msg{display:flex;gap:12px;padding:14px}
.pv-dc-avatar{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#22d3ee,#f5b942);color:#04131b;font-weight:800;display:grid;place-items:center}
.pv-dc-main{min-width:0;flex:1;display:grid;gap:6px}
.pv-dc-head{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pv-dc-head strong{color:#f2f3f5}
.pv-dc-app{background:#5865f2;color:#fff;border-radius:4px;font-size:.65rem;font-weight:700;padding:1px 5px;letter-spacing:.03em}
.pv-dc-time{color:#949ba4;font-size:.75rem}
.pv-dc-embed{border-left:4px solid var(--bar,#c9a227);background:#2b2d31;border-radius:4px;padding:10px 14px 10px 12px;display:grid;gap:6px;max-width:520px}
.pv-dc-title{font-weight:700;color:#f2f3f5;overflow-wrap:anywhere}
.pv-dc-desc{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9rem}
.pv-dc-desc strong{color:#fff}
.pv-dc-desc code{background:#1e1f22;border:0;padding:0 4px;color:#dbdee1}
.pv-dc-foot{color:#949ba4;font-size:.75rem}
.pv-dc-mention{display:inline-block;border-radius:4px;padding:0 3px;font-weight:500;color:var(--rc,#c9cdfb);background:rgba(88,101,242,.3);background:color-mix(in srgb,var(--rc,#5865f2) 22%,transparent)}
.pv-dc-reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.pv-dc-reacts[hidden]{display:none}
.pv-dc-react{display:inline-flex;align-items:center;gap:6px;background:#2b2d31;border:1px solid #3f4147;border-radius:8px;padding:2px 8px;min-height:28px}
.pv-dc-count{color:#b5bac1;font-size:.8rem;font-weight:600}
.uemoji{font-size:1.1rem;line-height:1}
.rr-pv-note{margin:0;color:var(--muted);font-size:.85rem}
.rr-form .actions{grid-area:actions}
.rr-steps{grid-area:steps}
.rr-preview{grid-area:preview}
@media (max-width:959px){
.rr-form .actions{position:sticky;bottom:calc(var(--tab) + env(safe-area-inset-bottom,0px) + 8px);z-index:20;padding:10px;margin:0 -6px;background:var(--panel);border:1px solid var(--acc);border-radius:14px;box-shadow:var(--sh-bar)}
}
.rr-grid{grid-template-areas:"steps" "preview" "actions"}
@media (min-width:1240px){
.rr-grid{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"steps preview" "actions preview";align-items:start}
.rr-preview{position:sticky;top:12px;align-self:start}
}
/* ---- emoji picker (button beside each emoji box; bottom sheet on a phone, popover on a computer) */
.rr-emoji-in{display:flex;gap:8px;align-items:stretch;min-width:0}
.rr-emoji-in input{flex:1 1 auto;min-width:0}
.rr-emoji-in .rr-emoji-btn{display:none;flex:0 0 48px;width:48px;min-width:48px;min-height:48px;padding:0;color:var(--acc-soft)}
.rr-js .rr-emoji-in .rr-emoji-btn{display:inline-flex}
.rr-emoji-btn svg{flex:0 0 22px;width:22px;height:22px;display:block}
.rr-pk-bd{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.5)}
.rr-pk-bd[hidden],.rr-pk[hidden]{display:none}
.rr-pk{position:fixed;z-index:71;left:0;right:0;bottom:0;height:min(72vh,540px);display:flex;flex-direction:column;background:var(--panel);color:var(--text);border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;box-shadow:var(--sh-pop);padding-bottom:env(safe-area-inset-bottom,0px)}
.rr-pk-head,.rr-pk-tabs,.rr-pk-status{flex:0 0 auto}
.rr-pk-head{display:flex;gap:8px;padding:12px 12px 8px}
.rr-pk-head input{flex:1 1 auto;min-width:0}
.rr-pk button{background:transparent;color:var(--text);border:0;box-shadow:none;padding:0;min-height:44px;min-width:44px;filter:none;transform:none;font-weight:600}
.rr-pk button:hover{background:var(--card2);color:var(--text);filter:none;transform:none;box-shadow:none}
.rr-pk .rr-pk-close{padding:0 14px;color:var(--acc-soft)}
.rr-pk-tabs{display:flex;gap:2px;overflow-x:auto;padding:0 8px;border-bottom:1px solid var(--line)}
.rr-pk-tabs[hidden]{display:none}
.rr-pk .rr-pk-tab{flex:0 0 44px;font-size:1.25rem;border-radius:10px 10px 0 0;border-bottom:3px solid transparent}
.rr-pk .rr-pk-tab[aria-pressed="true"]{border-bottom-color:var(--acc)}
.rr-pk-status{margin:0;padding:6px 14px;color:var(--muted);font-size:.9rem}
.rr-pk-status[hidden]{display:none}
.rr-pk-grid{flex:1 1 auto;overflow-y:auto;padding:4px 8px 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));align-content:start;position:relative;overscroll-behavior:contain}
.rr-pk-h{grid-column:1/-1;padding:10px 6px 4px;color:var(--muted);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.rr-pk .rr-em{font-size:1.6rem;line-height:1;border-radius:10px;font-weight:400}
.rr-pk .rr-em:focus-visible,.rr-pk .rr-pk-tab:focus-visible,.rr-pk .rr-pk-close:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
@media (min-width:700px){
.rr-pk-bd{background:transparent}
.rr-pk{left:var(--pk-left,0);top:var(--pk-top,0);right:auto;bottom:auto;width:372px;height:420px;border:1px solid var(--line);border-radius:14px}
.rr-pk-close{display:none}
}

.pv-cp-wrap{display:grid;gap:14px;margin:6px 0 12px}
.pv-cp-list{display:grid;gap:2px;font-weight:600}
.pv-cp-line{display:flex;gap:8px;align-items:center}
.pv-cp-line .pv-cp-name{background-color:transparent;padding:0 3px}
.pv-cp-0{background:linear-gradient(90deg,#FF6B35,#F7C948);-webkit-background-clip:text;background-clip:text;color:transparent}.pv-cp-1{background:linear-gradient(90deg,#FF6B9D,#C77DFF);-webkit-background-clip:text;background-clip:text;color:transparent}.pv-cp-2{background:linear-gradient(90deg,#00B4D8,#0077B6);-webkit-background-clip:text;background-clip:text;color:transparent}.pv-cp-3{background:linear-gradient(90deg,#2ECC71,#145A32);-webkit-background-clip:text;background-clip:text;color:transparent}.pv-cp-4{background:linear-gradient(90deg,#7B2CBF,#E0AAFF);-webkit-background-clip:text;background-clip:text;color:transparent}.pv-cp-5{background:linear-gradient(90deg,#ED4245,#E67E22);-webkit-background-clip:text;background-clip:text;color:transparent}.pv-cp-6{background:linear-gradient(90deg,#7FDBFF,#5865F2);-webkit-background-clip:text;background-clip:text;color:transparent}.pv-cp-7{background:linear-gradient(90deg,#F1C40F,#E67E22);-webkit-background-clip:text;background-clip:text;color:transparent}.pv-cp-8{background:linear-gradient(90deg,#FF8DC7,#FFD6E7);-webkit-background-clip:text;background-clip:text;color:transparent}.pv-cp-9{background:linear-gradient(90deg,#23272A,#5865F2);-webkit-background-clip:text;background-clip:text;color:transparent}.pv-cp-10{background:linear-gradient(90deg,#00F5D4,#9B5DE5);-webkit-background-clip:text;background-clip:text;color:transparent}.pv-cp-11{background:linear-gradient(90deg,#5865F2,#EB459E);-webkit-background-clip:text;background-clip:text;color:transparent}