@font-face{font-family:Inter;src:url(/static/fonts/InterVariable-4.1.woff2) format("woff2");font-weight:100 900;font-display:swap}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--space-14)/1.45 var(--font);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;overflow:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:var(--space-2) solid var(--ring);outline-offset:var(--space-2)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


.topbar{flex:none;height:56px;display:flex;align-items:center;gap:var(--space-12);padding:0 var(--space-16) 0 var(--space-20);background:var(--titlebar);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:var(--space-10);font-weight:600;font-size:var(--space-14);letter-spacing:.01em;border:0;background:none;padding:var(--space-6) var(--space-4);border-radius:var(--space-8)}
.brand svg{width:var(--space-20);height:var(--space-20);color:var(--accent)}
.env{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);border:1px solid var(--warn-border);background:var(--warn-soft);border-radius:var(--radius-1);padding:var(--space-2) var(--space-8)}
.top-spacer{flex:1}
.profile-btn{display:flex;align-items:center;gap:var(--space-10);border:1px solid transparent;background:none;border-radius:var(--radius-1);padding:var(--space-4) var(--space-10) var(--space-4) var(--space-4);min-height:var(--space-40)}
.profile-btn:hover{background:var(--paint-1);border-color:var(--border)}
.avatar{width:var(--space-32);height:var(--space-32);border-radius:var(--radius-2);display:grid;place-items:center;font-weight:500;font-size:13px;color:var(--paint-2);background:linear-gradient(150deg,var(--paint-3),var(--paint-4));border:1px solid var(--border-strong);flex:none}
.profile-btn .nm{font-size:13px;color:var(--text)}
.login-top{border:1px solid var(--border-strong);background:var(--paint-1);border-radius:var(--r-btn);padding:var(--space-8) var(--space-14);min-height:var(--space-40)}

.body{flex:1;min-height:0;display:flex}
.rail{flex:none;width:232px;background:var(--rail);border-right:1px solid var(--border);padding:var(--space-16) var(--space-12);display:flex;flex-direction:column;gap:var(--space-4);overflow:auto}
.rail .lbl{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding:var(--space-14) var(--space-12) var(--space-6)}
.nav{position:relative;display:flex;align-items:center;gap:var(--space-12);border:0;background:none;color:var(--muted);border-radius:var(--space-10);padding:var(--space-10) var(--space-12);min-height:44px;text-align:left;width:100%}
.nav svg{width:var(--space-20);height:var(--space-20);flex:none}
.nav:hover{background:var(--paint-1);color:var(--text)}
.nav[aria-current="page"]{background:var(--accent-soft);color:var(--text)}
.nav[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:var(--space-10);bottom:var(--space-10);width:3px;border-radius:var(--space-2);background:var(--accent);box-shadow:0 0 var(--space-12) var(--glow)}
.nav .count{margin-left:auto;font-size:11.5px;color:var(--warn);background:var(--warn-soft);border:1px solid var(--warn-border);border-radius:var(--radius-1);padding:0 7px}
.rail-foot{margin-top:auto;padding:var(--space-12);font-size:var(--space-12);color:var(--faint);line-height:1.5}

.scroll{flex:1;min-width:0;overflow:auto}
.page{max-width:1152px;margin:0 auto;padding:var(--space-32) var(--space-40) var(--space-64);display:flex;flex-direction:column;gap:var(--space-24)}
.page-head{display:flex;align-items:flex-end;gap:var(--space-16);flex-wrap:wrap}
.page-head h1{margin:0;font-weight:200;font-size:var(--space-32);letter-spacing:-.01em;line-height:1.1;text-wrap:balance}
.page-head .sub{color:var(--muted);font-size:13.5px;margin-top:var(--space-6)}
.page-head .actions{margin-left:auto;display:flex;gap:var(--space-8);flex-wrap:wrap}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);border-radius:var(--r-btn);border:1px solid var(--border-strong);background:var(--paint-5);color:var(--text);padding:0 var(--space-16);min-height:var(--space-40);font-weight:500;font-size:13.5px;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--paint-6)}
.btn svg{width:var(--space-16);height:var(--space-16);flex:none}
.btn.primary{background:var(--accent-fill);border-color:var(--accent);box-shadow:0 var(--space-8) 22px var(--paint-7)}
.btn.primary:hover{background:var(--paint-8)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--text);background:var(--paint-9)}
.btn.danger{background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger-text)}
.btn.danger:hover{background:var(--paint-10)}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn.sm{min-height:var(--space-32);padding:0 var(--space-10);font-size:12.5px}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--space-8);border:1px solid transparent;background:none;color:var(--muted)}
.icon-btn:hover{background:var(--paint-5);color:var(--text)}
.icon-btn svg{width:var(--space-18);height:var(--space-18)}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card)}
.pill{display:inline-flex;align-items:center;gap:var(--space-6);font-size:var(--space-12);font-weight:500;border-radius:var(--radius-1);padding:3px var(--space-10);border:1px solid var(--border-strong);color:var(--muted);white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:var(--radius-2);background:currentColor}
.pill.on{color:var(--online-text);background:var(--online-soft);border-color:var(--paint-11)}
.pill.on i{background:var(--online);box-shadow:0 0 var(--space-8) var(--online)}
.pill.off{color:var(--paint-12);background:var(--offline-soft);border-color:var(--paint-13)}
.pill.warn{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-border)}
.pill.ok{color:var(--online-text);background:var(--online-soft);border-color:var(--paint-14)}
.pill.acc{color:var(--paint-15);background:var(--accent-soft);border-color:var(--accent-border)}
.idchip{display:inline-flex;align-items:center;gap:var(--space-6);font-family:var(--mono);font-size:var(--space-12);color:var(--muted);border:1px solid var(--border);background:var(--paint-16);border-radius:var(--space-6);padding:var(--space-2) var(--space-4) var(--space-2) var(--space-8);max-width:100%}
.idchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idchip button{border:0;background:none;color:var(--muted);display:grid;place-items:center;width:var(--space-28);height:var(--space-28);border-radius:var(--radius-3);flex:none}
.idchip button:hover{color:var(--text);background:var(--paint-17)}
.idchip svg{width:var(--space-14);height:var(--space-14)}
.meta{font-size:12.5px;color:var(--muted)}
.mark{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--space-4);padding:1px 5px;vertical-align:middle}
.mark.new{color:var(--tag-new);background:var(--paint-18);border:1px solid var(--paint-19)}
.mark.code{color:var(--tag-code);background:var(--warn-soft);border:1px solid var(--warn-border)}

/* state blocks */
.state{display:flex;gap:var(--space-16);align-items:flex-start;padding:var(--space-20);border-radius:var(--r-card);border:1px solid var(--border);background:var(--surface)}
.state .ic{width:var(--space-40);height:var(--space-40);border-radius:var(--space-10);display:grid;place-items:center;flex:none;background:var(--paint-9);color:var(--muted)}
.state .ic svg{width:var(--space-20);height:var(--space-20)}
.state h2{margin:0 0 var(--space-4);font-size:15px;font-weight:500}
.state p{margin:0;color:var(--muted);max-width:62ch}
.state .acts{display:flex;gap:var(--space-8);margin-top:var(--space-14);flex-wrap:wrap}
.state.warn{border-color:var(--warn-border);background:linear-gradient(0deg,var(--warn-soft),var(--warn-soft)),var(--surface)}
.state.warn .ic{color:var(--warn);background:var(--warn-soft)}
.state.error{border-color:var(--danger-border);background:linear-gradient(0deg,var(--paint-20),var(--paint-20)),var(--surface)}
.state.error .ic{color:var(--danger);background:var(--danger-soft)}
.state.info .ic{color:var(--accent);background:var(--accent-soft)}
.steps{margin:var(--space-12) 0 0;padding:0;list-style:none;display:grid;gap:var(--space-10);counter-reset:s}
.steps li{display:flex;gap:var(--space-12);align-items:baseline;color:var(--text)}
.steps li::before{counter-increment:s;content:counter(s);flex:none;width:var(--space-24);height:var(--space-24);border-radius:var(--radius-2);display:grid;place-items:center;font-size:var(--space-12);color:var(--paint-15);background:var(--accent-soft);border:1px solid var(--accent-border)}

/* devices */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:var(--space-16)}
.device{padding:var(--space-20);display:flex;flex-direction:column;gap:var(--space-16)}
.device-head{display:flex;gap:var(--space-14);align-items:flex-start}
.device-ic{width:44px;height:44px;border-radius:var(--space-12);display:grid;place-items:center;background:var(--paint-1);border:1px solid var(--border);color:var(--muted);flex:none}
.device-ic svg{width:22px;height:22px}
.device.is-on .device-ic{color:var(--online-text);border-color:var(--paint-21);background:var(--online-soft)}
.device-head h2{margin:0;font-size:17px;font-weight:500}
.device-head .row{display:flex;gap:var(--space-8);align-items:center;flex-wrap:wrap;margin-top:var(--space-6)}
.device-head .menu-wrap{margin-left:auto;position:relative}
.check{border-top:1px solid var(--border);padding-top:var(--space-16);display:grid;gap:var(--space-12)}
.check-title{display:grid;gap:var(--space-2)}
.check-title h3{margin:0;font-size:13.5px;font-weight:500}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.choice{display:flex;flex-direction:column;gap:var(--space-2);text-align:left;border:1px solid var(--border-strong);background:var(--paint-16);border-radius:var(--space-10);padding:var(--space-10) var(--space-12);min-height:56px}
.choice b{font-weight:500;font-size:13px}
.choice span{font-size:var(--space-12);color:var(--muted)}
.choice[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent-border) inset}
.choice[disabled]{opacity:.45;cursor:not-allowed}
.send-row{display:flex;gap:var(--space-12);align-items:center;flex-wrap:wrap}
.send-row .meta{flex:1;min-width:160px}
.result{display:flex;gap:var(--space-12);align-items:flex-start;border-radius:var(--space-10);padding:var(--space-12) var(--space-14);border:1px solid var(--border);background:var(--surface-2)}
.result .ric{width:22px;height:22px;flex:none;display:grid;place-items:center;margin-top:1px}
.result .ric svg{width:var(--space-18);height:var(--space-18)}
.result b{display:block;font-weight:500;font-size:13.5px}
.result p{margin:var(--space-2) 0 0;font-size:12.5px;color:var(--muted)}
.result .ract{margin-left:auto;flex:none}
.result.ok{border-color:var(--paint-21)} .result.ok .ric{color:var(--online)}
.result.pending .ric{color:var(--accent)}
.result.slow{border-color:var(--warn-border)} .result.slow .ric{color:var(--warn)}
.result.bad{border-color:var(--danger-border)} .result.bad .ric{color:var(--danger)}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.menu{position:absolute;right:0;top:var(--space-40);z-index:20;min-width:220px;background:var(--raised);border:1px solid var(--border-strong);border-radius:var(--space-10);padding:var(--space-6);box-shadow:0 var(--space-18) var(--space-40) var(--paint-22)}
.menu button{display:flex;gap:var(--space-10);align-items:center;width:100%;border:0;background:none;border-radius:var(--space-6);padding:9px var(--space-10);text-align:left;min-height:var(--space-40)}
.menu button:hover{background:var(--paint-5)}
.menu button.danger{color:var(--danger-text)}
.menu svg{width:var(--space-16);height:var(--space-16)}

/* saves */
.quota{padding:var(--space-18) var(--space-20);display:grid;gap:var(--space-10)}
.quota-row{display:flex;justify-content:space-between;gap:var(--space-12);align-items:baseline;flex-wrap:wrap}
.quota-row strong{font-weight:300;font-size:var(--space-24);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.quota-row strong small{font-size:var(--space-14);color:var(--muted);font-weight:400}
.bar{height:var(--space-6);border-radius:var(--radius-4);background:var(--paint-23);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--paint-24));border-radius:var(--radius-4)}
.container-group{display:grid;gap:var(--space-8)}
.group-head{display:flex;gap:var(--space-10);align-items:center;flex-wrap:wrap;padding:0 var(--space-4)}
.group-head h2{margin:0;font-size:13.5px;font-weight:500}
.slot{overflow:hidden}
.slot-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:var(--space-14);align-items:center;padding:var(--space-12) var(--space-16);width:100%;border:0;background:none;text-align:left;min-height:var(--space-64)}
.slot-row:hover{background:var(--paint-25)}
.game-ic{width:44px;height:44px;border-radius:var(--space-10);display:grid;place-items:center;font-size:11px;font-family:var(--mono);color:var(--muted);background:linear-gradient(150deg,var(--paint-26),var(--paint-27));border:1px solid var(--border)}
.slot-row b{display:block;font-weight:500;font-size:var(--space-14)}
.slot-row .chev{width:var(--space-18);height:var(--space-18);color:var(--faint);transition:transform .2s}
.slot[data-open="true"] .chev{transform:rotate(180deg)}
.slot.conflict{border-color:var(--warn-border)}
.copies{border-top:1px solid var(--border);padding:var(--space-8) var(--space-16) var(--space-16) 74px;display:grid;gap:0}
.copy{display:grid;grid-template-columns:var(--space-16) minmax(0,1fr) auto;gap:var(--space-12);align-items:flex-start;padding:var(--space-12) 0;position:relative}
.copy+.copy{border-top:1px dashed var(--border)}
.copy .dot{width:var(--space-10);height:var(--space-10);border-radius:var(--radius-2);margin-top:5px;background:var(--paint-23);border:var(--space-2) solid var(--muted)}
.copy.head .dot{border-color:var(--online);background:var(--online-soft)}
.copy.conflict .dot{border-color:var(--warn);background:var(--warn-soft)}
.copy b{font-weight:500;font-size:13.5px}
.copy .acts{display:flex;gap:var(--space-6);flex-wrap:wrap;justify-content:flex-end}

/* testers */
.toolbar{display:flex;gap:var(--space-12);align-items:center;flex-wrap:wrap}
.search{flex:1;min-width:200px;max-width:360px;display:flex;align-items:center;gap:var(--space-8);border:1px solid var(--border-strong);background:var(--paint-1);border-radius:var(--r-btn);padding:0 var(--space-12);min-height:var(--space-40)}
.search svg{width:var(--space-16);height:var(--space-16);color:var(--muted)}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;padding:var(--space-8) 0}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-16);align-items:start}
.table{overflow:hidden}
.trow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 170px;gap:var(--space-16);align-items:center;padding:var(--space-12) var(--space-16);border-top:1px solid var(--border)}
.trow.th{border-top:0;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding-block:var(--space-10)}
.person{display:flex;gap:var(--space-12);align-items:center;min-width:0}
.person>div{min-width:0;display:grid;gap:var(--space-4)}
.person b{font-weight:500;font-size:var(--space-14)}
.you{font-size:11px;color:var(--muted);border:1px solid var(--border-strong);border-radius:var(--space-4);padding:0 5px;margin-left:var(--space-6);font-weight:400}
.role{display:flex;align-items:center;gap:var(--space-10);justify-content:flex-end}
.switch{position:relative;width:44px;height:26px;border-radius:var(--radius-5);border:1px solid var(--border-strong);background:var(--paint-23);flex:none;padding:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:var(--space-18);height:var(--space-18);border-radius:var(--radius-2);background:var(--paint-28);transition:transform .18s}
.switch[aria-checked="true"]{background:var(--accent-fill);border-color:var(--accent)}
.switch[aria-checked="true"]::after{transform:translateX(var(--space-18));background:var(--paint-29)}
.switch-hit{display:grid;place-items:center;width:52px;height:44px;border:0;background:none;padding:0}
.lock{display:inline-flex;align-items:center;gap:var(--space-6);font-size:var(--space-12);color:var(--muted)}
.lock svg{width:var(--space-14);height:var(--space-14)}
.log{padding:var(--space-16) var(--space-18);display:grid;gap:var(--space-12)}
.log h2{margin:0;font-size:13.5px;font-weight:500}
.log ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-12)}
.log li{display:grid;grid-template-columns:var(--space-10) 1fr;gap:var(--space-10)}
.log li i{width:var(--space-8);height:var(--space-8);border-radius:var(--radius-2);margin-top:var(--space-6);background:var(--online)}
.log li.revoke i{background:var(--muted)}
.log li p{margin:0;font-size:13px}
.log li span{font-size:var(--space-12);color:var(--muted)}

/* landing */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--space-40);align-items:center;padding:var(--space-24) 0 var(--space-8)}
.hero h1{margin:0;font-weight:200;font-size:56px;line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.hero p{color:var(--muted);font-size:var(--space-16);max-width:52ch;margin:var(--space-18) 0 0}
.hero .ctas{display:flex;gap:var(--space-12);flex-wrap:wrap;margin-top:var(--space-28)}
.hero .ctas .btn{min-height:var(--space-48);padding:0 22px;font-size:14.5px}
.hero .note{margin-top:var(--space-12);font-size:12.5px;color:var(--faint)}
.preview{position:relative;border-radius:var(--space-16);border:1px solid var(--border-strong);background:linear-gradient(160deg,var(--paint-30),var(--paint-31));padding:var(--space-18);display:grid;gap:var(--space-10);box-shadow:0 30px 80px var(--paint-22),0 0 0 1px var(--paint-32)}
.preview .pv-row{display:flex;gap:var(--space-10);align-items:center;padding:var(--space-10) var(--space-12);border-radius:var(--space-10);background:var(--paint-16);border:1px solid var(--border)}
.preview .pv-row b{font-weight:500;font-size:13px}
.preview .pv-row .pill{margin-left:auto}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-16)}
.feature{padding:var(--space-20);display:grid;gap:var(--space-8)}
.feature .ic{width:36px;height:36px;border-radius:var(--space-10);display:grid;place-items:center;color:var(--accent);background:var(--accent-soft)}
.feature .ic svg{width:var(--space-18);height:var(--space-18)}
.feature h2{margin:0;font-size:15px;font-weight:500}
.feature p{margin:0;color:var(--muted);font-size:13.5px}

/* centered status pages */
.center{min-height:100%;display:grid;place-items:center;padding:var(--space-40) var(--space-24)}
.center-card{max-width:440px;text-align:center;display:grid;gap:var(--space-12);justify-items:center}
.center-card .big{font-weight:200;font-size:var(--space-64);letter-spacing:-.02em;color:var(--faint);line-height:1}
.center-card .ic{width:56px;height:56px;border-radius:var(--space-16);display:grid;place-items:center;background:var(--paint-9);color:var(--muted)}
.center-card .ic svg{width:26px;height:26px}
.center-card .ic.error{color:var(--danger);background:var(--danger-soft)}
.center-card .ic.warn{color:var(--warn);background:var(--warn-soft)}
.center-card h1{margin:0;font-weight:300;font-size:26px;text-wrap:balance}
.center-card p{margin:0;color:var(--muted)}
.center-card .acts{display:flex;gap:var(--space-8);flex-wrap:wrap;justify-content:center;margin-top:var(--space-8)}
.redirect{display:grid;gap:var(--space-14);justify-items:center;text-align:center;color:var(--muted)}
.redirect svg{width:var(--space-28);height:var(--space-28);color:var(--accent)}

/* skeleton */
.sk{background:linear-gradient(90deg,var(--paint-1),var(--paint-33),var(--paint-1));background-size:200% 100%;animation:sh 1.4s ease-in-out infinite;border-radius:var(--space-8)}
@keyframes sh{to{background-position:-200% 0}}

/* overlays inside the app frame */
.overlay{position:absolute;inset:0;z-index:40;background:var(--paint-22);display:grid;place-items:center;padding:var(--space-16)}
.dialog{width:min(460px,100%);background:var(--raised);border:1px solid var(--border-strong);border-radius:var(--r-dialog);padding:var(--space-24);display:grid;gap:var(--space-14);box-shadow:0 var(--space-40) 90px var(--paint-22)}
.dialog h2{margin:0;font-weight:400;font-size:var(--space-20)}
.dialog p{margin:0;color:var(--muted)}
.dialog .acts{display:flex;gap:var(--space-8);justify-content:flex-end;flex-wrap:wrap}
.confirm-box{display:flex;gap:var(--space-10);align-items:flex-start;border:1px solid var(--border-strong);border-radius:var(--space-10);padding:var(--space-12);cursor:pointer}
.confirm-box input{width:var(--space-18);height:var(--space-18);margin:var(--space-2) 0 0;accent-color:var(--danger)}
.popover{position:absolute;right:var(--space-16);top:60px;z-index:30;width:320px;max-width:calc(100% - var(--space-32));background:var(--raised);border:1px solid var(--border-strong);border-radius:var(--space-14);padding:var(--space-16);display:grid;gap:var(--space-14);box-shadow:0 30px 70px var(--paint-34)}
.popover .who{display:flex;gap:var(--space-12);align-items:center}
.popover .who b{font-weight:500;display:block}
.popover .idbox{display:grid;gap:var(--space-6)}
.popover .idbox label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.popover .idfield{display:flex;gap:var(--space-8);align-items:center}
.popover .idfield input{flex:1;min-width:0;font-family:var(--mono);font-size:var(--space-12);background:var(--paint-1);border:1px solid var(--border-strong);border-radius:var(--space-8);padding:var(--space-8) var(--space-10);color:var(--text)}
.popover .hint{font-size:var(--space-12);color:var(--muted)}
.sheet{position:absolute;right:0;top:0;bottom:0;z-index:45;width:min(440px,100%);background:var(--surface);border-left:1px solid var(--border-strong);padding:var(--space-24);overflow:auto;display:flex;flex-direction:column;gap:var(--space-16);box-shadow:-30px 0 80px var(--paint-22)}
.sheet h2{margin:0;font-weight:300;font-size:22px}
.sheet .x{position:absolute;top:var(--space-16);right:var(--space-16)}
.notes{display:grid;gap:var(--space-14)}
.notes section{display:grid;gap:var(--space-8)}
.notes h3{margin:0;font-size:var(--space-12);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500}
.notes ul{margin:0;padding-left:var(--space-18);display:grid;gap:var(--space-8);color:var(--text);font-size:13.5px}
.notes li span{color:var(--muted)}
.toasts{position:absolute;right:var(--space-16);bottom:var(--space-16);z-index:50;display:grid;gap:var(--space-8);justify-items:end;pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:var(--space-10);align-items:flex-start;max-width:360px;background:var(--raised);border:1px solid var(--border-strong);border-radius:var(--space-12);padding:var(--space-12) var(--space-14);box-shadow:0 var(--space-18) var(--space-40) var(--paint-22);animation:tin .2s ease-out}
.toast svg{width:var(--space-18);height:var(--space-18);flex:none;color:var(--online);margin-top:1px}
.toast b{font-weight:500;font-size:13.5px;display:block}
.toast span{font-size:12.5px;color:var(--muted)}
@keyframes tin{from{transform:translateY(var(--space-8));opacity:0}}
.bottom-nav{display:none}

/* ---------- phone layout (container query: phone frame and real phones) ---------- */
@media (max-width:640px){
  .rail{display:none}
  .topbar{padding:0 var(--space-8) 0 var(--space-12);height:52px}
  .profile-btn .nm{display:none}
  .page{padding:var(--space-20) var(--space-16) 96px;gap:var(--space-18)}
  .page-head h1{font-size:26px}
  .page-head .actions{margin-left:0;width:100%}
  .page-head .actions .btn{flex:1}
  .grid{grid-template-columns:1fr}
  .choices{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr;gap:var(--space-24);padding-top:var(--space-8)}
  .hero h1{font-size:38px}
  .hero .ctas .btn{flex:1}
  .preview{display:none}
  .features{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .trow.th{display:none}
  .trow{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8) var(--space-12)}
  .trow .last{grid-column:1;font-size:var(--space-12);color:var(--muted);order:3}
  .trow .role{grid-row:1 / span 2;grid-column:2}
  .slot-row{grid-template-columns:var(--space-40) minmax(0,1fr) auto;gap:var(--space-12)}
  .slot-row .pill{grid-column:2;justify-self:start}
  .slot-row .chev{grid-row:1;grid-column:3}
  .copies{padding:var(--space-4) var(--space-16) var(--space-12)}
  .copy{grid-template-columns:var(--space-14) minmax(0,1fr)}
  .copy .acts{grid-column:2;justify-content:flex-start}
  .toasts{left:var(--space-16);right:var(--space-16);bottom:84px;justify-items:stretch}
  .toast{max-width:none}
  .bottom-nav{display:flex;position:absolute;left:0;right:0;bottom:0;z-index:25;background:var(--paint-35);backdrop-filter:blur(var(--space-12));border-top:1px solid var(--border);padding:var(--space-6) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom,0px))}
  .bottom-nav>button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;color:var(--muted);font-size:11px;padding:var(--space-6) var(--space-2);border-radius:var(--space-10);min-height:52px;position:relative}
  .bottom-nav>button svg{width:22px;height:22px}
  .bottom-nav>button[aria-current="page"]{color:var(--text);background:var(--accent-soft)}
  .bottom-nav .dotc{position:absolute;top:var(--space-4);right:calc(50% - var(--space-18));width:var(--space-8);height:var(--space-8);border-radius:var(--radius-2);background:var(--warn)}
  .sheet{width:100%;border-left:0;top:auto;max-height:85%;border-radius:var(--space-20) var(--space-20) 0 0;border-top:1px solid var(--border-strong)}
  .popover{top:56px;right:var(--space-8)}
  .env{display:none}
}


a{color:inherit;text-decoration:none}summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}p,h2,h3{overflow-wrap:anywhere}textarea{font:inherit;color:inherit}main{outline:none}.body{overflow:hidden}.scroll{display:flex;flex-direction:column}.page{width:100%}.page>.page-head{order:-2}.page-head h1:empty{display:none}.center{flex:1}.icon{width:var(--space-20);height:var(--space-20);display:block;flex:none}.topbar>.profile,.login-top{margin-left:auto}.profile{position:relative}.profile>summary{display:flex;align-items:center;gap:var(--space-10);min-height:var(--space-40);border-radius:var(--radius-1);padding:var(--space-4)}.profile-menu{position:fixed;top:60px;right:var(--space-16);z-index:35;width:320px;max-width:calc(100vw - var(--space-32));background:var(--raised);padding:var(--space-16);border:1px solid var(--border-strong);border-radius:var(--r-card);display:grid;gap:var(--space-14);box-shadow:0 30px 70px var(--paint-36)}.profile-menu p{margin:0}.profile-id{display:grid;gap:var(--space-6)}.profile-sub{width:100%;resize:none;border:1px solid var(--border-strong);border-radius:var(--r-btn);background:var(--surface);padding:var(--space-8);font:var(--space-12)/1.5 var(--mono)}.hint,.muted{color:var(--muted)}.hint{font-size:var(--space-12)}.rail-foot{margin-bottom:0}.nav .count{margin-left:auto}.bottom-nav a,.bottom-nav summary{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:var(--r-control);color:var(--muted);font-size:11px;padding:var(--space-6) var(--space-2)}.bottom-nav a[aria-current=page]{background:var(--accent-soft);color:var(--text)}.bottom-profile{flex:1}.bottom-profile>summary{height:100%}.bottom-nav .profile-menu{top:auto;bottom:80px}.menu-wrap{position:relative}.menu a,.menu button{display:flex;align-items:center;min-height:var(--space-40);padding:9px var(--space-10);border-radius:var(--space-6);font-size:13px}.menu a:hover{background:var(--surface-2)}.menu .danger{color:var(--danger-text)}.choices label{position:relative;cursor:pointer}.choices input{position:absolute;opacity:0;width:1px;height:1px}.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-border)}.choice:has(input:focus-visible){outline:var(--space-2) solid var(--ring);outline-offset:var(--space-2)}.device-confirm{padding:var(--space-16);display:grid;gap:var(--space-14);border:1px solid var(--danger-border);border-radius:var(--r-card);background:var(--surface-2)}.device-confirm h2{font-size:var(--space-20)}.device-confirm p{margin:0;color:var(--muted)}.control{display:flex;gap:var(--space-10);align-items:center;min-height:44px}.control input{width:var(--space-18);height:var(--space-18);accent-color:var(--accent)}.acts{display:flex;gap:var(--space-8);flex-wrap:wrap}.result>div{min-width:0}.result a{font-size:var(--space-12);display:inline-block;margin-top:var(--space-8);text-decoration:underline}.result h3{margin:0;font-size:13.5px;font-weight:500}.idtext{font:var(--space-12) var(--mono);color:var(--muted);overflow-wrap:anywhere}.idfield{min-width:0}.idfield summary{min-height:var(--space-40);display:flex;align-items:center}.idfield button[hidden],[hidden]{display:none!important}.quota progress{width:100%;height:var(--space-6);border:0;appearance:none;border-radius:var(--r-pill);overflow:hidden;background:var(--surface-2)}progress::-webkit-progress-bar{background:var(--surface-2)}progress::-webkit-progress-value{background:var(--accent)}progress::-moz-progress-bar{background:var(--accent)}.slot[open] .chev{transform:rotate(180deg)}.slot.conflict{border-color:var(--warn-border)}.slot-row .meta{display:block}.group-head{flex-wrap:wrap}.search-form{display:flex;gap:var(--space-8);flex-wrap:wrap}.search input{color:var(--text)}.trow .profile-sub{max-width:100%}.switch-hit{cursor:pointer}.switch{display:block}.toast{position:fixed;bottom:var(--space-16);right:var(--space-16);z-index:40;display:block}.toast p{margin:var(--space-2) 0 0;font-size:var(--space-12);color:var(--muted)}.toast strong{font-size:13.5px;font-weight:500}.skip-link{position:fixed;top:var(--space-8);left:var(--space-16);transform:translateY(-200%);z-index:100;background:var(--raised);padding:var(--space-8)}.skip-link:focus{transform:none}.connect-help{position:relative}.connect-help[open] .help-panel{position:absolute;right:0;top:var(--space-48);z-index:25;width:400px;max-width:calc(100vw - var(--space-32));padding:var(--space-24);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-card);box-shadow:0 var(--space-20) 60px var(--paint-36)}.help-panel h2{font-size:22px;font-weight:300;margin:0}.loading-grid .sk{height:56px}.loading-grid .sk:first-child{height:44px;width:60%}.demo-grid,.demo-row{display:flex;flex-wrap:wrap;gap:var(--space-16)}.demo-section{display:grid;gap:var(--space-16)}.demo-shell{position:relative}.skeleton>span{height:var(--space-20);background:var(--surface-2)}
@media(max-width:1100px){.split{grid-template-columns:minmax(0,1fr)}.trow{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 170px}}
@media(max-width:640px){.profile-name{display:none}.bottom-nav{position:fixed}.bottom-profile .icon{width:22px;height:22px}.toast{left:var(--space-16);right:var(--space-16);bottom:84px}.choices{grid-template-columns:1fr}.btn.sm{min-height:var(--space-40)}.icon-btn{width:var(--space-40);height:var(--space-40)}.copy .acts{grid-column:2;justify-content:flex-start}.trow{grid-template-columns:minmax(0,1fr) auto}.trow .last{grid-column:1}.bottom-profile .profile-menu{bottom:80px}.connect-help[open] .help-panel{position:fixed;top:auto;bottom:80px;left:var(--space-16);width:calc(100% - var(--space-32))}.idchip button{min-width:var(--space-40);min-height:var(--space-40)}}

.device-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.banner{display:block}.banner h2{font-size:15px;font-weight:500;margin:0 0 var(--space-4)}.banner-warning{border-color:var(--warn-border);background:linear-gradient(var(--warn-soft),var(--warn-soft)),var(--surface)}.banner-error{border-color:var(--danger-border)}.page:has(>.center){flex:1}.center{min-height:500px}.page:has(.hero){max-width:1152px}.hero h1{margin-top:var(--space-12)}.switch-hit{color:var(--text)}.device-head>div:nth-child(2){min-width:0}.game-ic{font-size:10px;overflow:hidden}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--space-16);display:grid;gap:var(--space-12)}.login-card{display:inline-flex;gap:var(--space-12)}.login-card strong{font-size:14px}.button{display:inline-flex;align-items:center;min-height:40px;padding:var(--space-12);background:var(--surface-2);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--r-btn)}

.page:has(>.center){padding:0;max-width:none}.page-head .sub{margin:var(--space-6) 0 0}.page>.sub{margin:0}.page>.page-head>p{margin:0}.device>.check{margin-bottom:0}.device>div:last-child:empty{display:none}.who{display:flex;align-items:center;gap:var(--space-12)}.game-ic{overflow-wrap:anywhere}.idchip .icon{width:14px;height:14px}.bottom-nav .dotc{pointer-events:none}.bottom-nav a{position:relative}.result:empty{display:none}.slot-row .device-sr{clip-path:inset(50%)}

/* Native controls keep the v2 touch targets and stacked profile ID layout. */
@media (max-width:640px){
  .brand,.skip-link{min-height:var(--space-40)}
  .profile-id{min-width:0;grid-template-columns:minmax(0,1fr)}
  .profile-id>.btn{width:100%;justify-content:center}
  .result a{display:inline-flex;align-items:center;min-height:var(--space-40);min-width:var(--space-40)}
  .slot-row .game-ic{width:var(--space-40);height:var(--space-40)}
}

.profile-menu .btn{width:100%;min-width:var(--space-40);justify-content:center}