/* Layout: viewer chrome (rail, stage, notes) around a container-query driven screen. Screens use Petal: flat color blocks, no borders or shadows. Phone mode is the same screens at 390px via container queries. */
:root{
  --bg:#eff1f5;--s1:#ffffff;--s2:#f5f6fa;--s3:#e5e8ee;--s4:#d5dae3;
  --ink:#0b1a2b;--ink2:#5c6a7b;--ink3:#8995a5;--on-ink:#ffffff;
  --accent:#2f6bff;--accent-h:#1f55e0;--accent-bg:#e0e8ff;--on-accent:#ffffff;
  --good:#168a4a;--good-bg:#d6f5e0;--warn:#a86a00;--warn-bg:#fdefc8;--bad:#d62f36;--bad-bg:#fde1e2;--info:#4a56e2;--info-bg:#e3e5ff;--violet:#8a5ca0;--violet-bg:#efe1f5;--lime:#b9ff3d;--lime-ink:#0b1a12;
  --overlay:rgba(8,14,24,.42);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter Tight","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(16px,2.4vw,28px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a0e15;--s1:#141a24;--s2:#1b2330;--s3:#252f3f;--s4:#344156;
    --ink:#eef2f7;--ink2:#93a1b3;--ink3:#6d7b8e;--on-ink:#0a0e15;
    --accent:#7aa2ff;--accent-h:#9bb8ff;--accent-bg:#1a2750;--on-accent:#0a0e15;
    --good:#3ddc84;--good-bg:#123525;--warn:#f0b232;--warn-bg:#352a0e;--bad:#ff6b70;--bad-bg:#3b1618;--info:#8f9bff;--info-bg:#1f2250;--violet:#d2a9e4;--violet-bg:#2b2236;
    --overlay:rgba(0,0,0,.6);color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a0e15;--s1:#141a24;--s2:#1b2330;--s3:#252f3f;--s4:#344156;
  --ink:#eef2f7;--ink2:#93a1b3;--ink3:#6d7b8e;--on-ink:#0a0e15;
  --accent:#7aa2ff;--accent-h:#9bb8ff;--accent-bg:#1a2750;--on-accent:#0a0e15;
  --good:#3ddc84;--good-bg:#123525;--warn:#f0b232;--warn-bg:#352a0e;--bad:#ff6b70;--bad-bg:#3b1618;--info:#8f9bff;--info-bg:#1f2250;--violet:#d2a9e4;--violet-bg:#2b2236;
  --overlay:rgba(0,0,0,.6);color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:500 14px/1.45 var(--font);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:90}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,dl,dd{margin:0;padding:0}ul{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ic{width:20px;height:20px;flex:none;display:block}.ic.s{width:16px;height:16px}.ic.xs{width:14px;height:14px}.ic.l{width:24px;height:24px}.ic.xl{width:32px;height:32px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink2)}.faint{color:var(--ink3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px));max-width:1760px;margin:0 auto}

/* ===== viewer chrome ===== */
.vt{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;padding-top:10px;padding-bottom:10px;background:var(--bg)}
.vbar{display:flex;align-items:center;gap:10px;background:var(--s1);border-radius:999px;padding:7px 8px 7px 18px;min-height:60px;flex-wrap:wrap}
.vlogo{display:flex;align-items:center;gap:10px;font:800 21px/1 var(--font);letter-spacing:-.05em;margin-right:6px}
.vlogo svg{width:28px;height:28px}
.vtag{font:700 12.5px/1 var(--font);color:var(--ink3);margin-right:auto}
.ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:var(--s2);font:700 13.5px/1 var(--font);color:var(--ink2);transition:background .2s,color .2s,transform .2s var(--ease)}
.chip:hover{background:var(--s3)}.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.vseg{display:inline-flex;background:var(--s2);border-radius:999px;padding:3px}
.vseg button{height:34px;padding:0 14px;border-radius:999px;font:700 13px/1 var(--font);color:var(--ink2);transition:background .2s,color .2s}
.vseg button[aria-selected="true"]{background:var(--s1);color:var(--ink)}
.vseg.on button[aria-selected="true"]{background:var(--ink);color:var(--on-ink)}
.vw{display:grid;grid-template-columns:232px minmax(0,1fr) 320px;gap:14px;align-items:start;padding-bottom:60px}
.rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + 82px);max-height:calc(100vh - 100px);overflow:auto;display:flex;flex-direction:column;gap:2px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail h4{font:700 12px/1 var(--font);color:var(--ink3);padding:16px 14px 8px}
.rail h4:first-child{padding-top:4px}
.rail button{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;border-radius:14px;text-align:left;font-weight:650;font-size:14.5px;color:var(--ink2);transition:background .18s,color .18s}
.rail button:hover{background:var(--s3);color:var(--ink)}
.rail button[aria-current="page"]{background:var(--s1);color:var(--ink)}
.rail button small{margin-left:auto;font:700 11px var(--mono);color:var(--ink3)}
.stage{display:grid;gap:10px;min-width:0}
.bez{background:var(--s3);border-radius:36px;padding:8px}
.bez.phone{width:min(100%,406px);margin:0 auto}
.dev{container:mk/inline-size;position:relative;overflow:hidden;border-radius:29px;background:var(--bg);height:min(84vh,880px)}
.bez.phone .dev{height:min(84vh,820px);border-radius:34px}
.notes{position:sticky;top:calc(env(safe-area-inset-top,0px) + 82px);display:grid;gap:10px;max-height:calc(100vh - 100px);overflow:auto;scrollbar-width:none}
.notes::-webkit-scrollbar{display:none}
.nc{background:var(--s1);border-radius:26px;padding:20px;display:grid;gap:12px}
.nc h3{font:800 22px/1.1 var(--font);letter-spacing:-.04em}
.nc h5{font:700 12px/1 var(--font);color:var(--ink3);margin:0}
.nc p{color:var(--ink2);font-weight:560;line-height:1.45}
.nc code{font:600 12.5px var(--mono);background:var(--s2);padding:3px 8px;border-radius:8px;color:var(--ink2);word-break:break-all}
.cl{display:flex;flex-direction:column;gap:4px}
.cl li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:12px;background:var(--s2);font-weight:650;font-size:13.5px}
.cl li small{display:block;color:var(--ink3);font-weight:600;font-size:12px}
.cl li i{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:6px;flex:none}
.vsel{display:none}
.vn{display:flex;gap:8px;justify-content:space-between}
.vn .chip{flex:1;justify-content:center}
.legend{font-size:12.5px;font-weight:650;color:var(--ink3);padding:0 6px}

/* ===== screens (Petal) ===== */
.m{font:500 14px/1.45 var(--font);height:100%}
.m h1,.m h2,.m h3{letter-spacing:-.04em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;font:700 14.5px/1 var(--font);letter-spacing:-.01em;background:var(--s3);color:var(--ink);transition:background .18s,color .18s,transform .2s var(--ease),opacity .2s;white-space:nowrap}
.btn:hover:not(:disabled){background:var(--s4)}.btn:active:not(:disabled){transform:scale(.97)}
.btn .ic{transition:transform .28s var(--ease)}
.btn:hover .ic.go{transform:translate(2px,-2px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.card .btn,.mdl .btn{background:var(--s2)}.card .btn:hover:not(:disabled),.mdl .btn:hover:not(:disabled){background:var(--s3)}
.btn.pri,.card .btn.pri,.mdl .btn.pri{background:var(--accent);color:var(--on-accent)}.btn.pri:hover:not(:disabled){background:var(--accent-h)}
.btn.ink,.card .btn.ink{background:var(--ink);color:var(--on-ink)}
.btn.tint,.card .btn.tint{background:var(--accent-bg);color:var(--accent)}
.btn.bad,.card .btn.bad,.mdl .btn.bad{background:var(--bad-bg);color:var(--bad)}
.btn.good,.card .btn.good{background:var(--good-bg);color:var(--good)}
.btn.ghost,.card .btn.ghost{background:transparent}.btn.ghost:hover:not(:disabled){background:var(--s3)}
.btn.s{height:36px;padding:0 14px;font-size:13.5px}.btn.xs{height:30px;padding:0 12px;font-size:12.5px}
.btn.blk{width:100%}
.btn.l{height:50px;padding:0 24px;font-size:15px}
.btn.sec{background:var(--s3);color:var(--ink)}.btn.sec:hover{filter:brightness(.96)}
.btn.lime{background:var(--lime);color:var(--lime-ink)}
.btn.sq{width:42px;padding:0}.btn.sq.s{width:34px}.btn.sq.xs{width:26px}.btn.sq.l{width:50px}
.btn.rect{border-radius:14px}
.btn.play{width:56px;height:56px;padding:0;border-radius:50%}
.btn.load{pointer-events:none;color:transparent;position:relative}
.btn.load::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--on-ink);border-right-color:transparent;animation:spin .7s linear infinite}
.btn.sec.load::after{border-color:var(--ink);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.theme-icon-wrap{width:20px;height:20px;display:grid;place-items:center;position:relative;flex:none}
.ib{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink2);background:transparent;flex:none;position:relative;transition:background .18s,color .18s,transform .2s var(--ease)}
.ib:hover{background:var(--s3);color:var(--ink)}.ib:active{transform:scale(.92)}
.ib .sun,.ib .moon,.theme-icon-wrap .sun,.theme-icon-wrap .moon{grid-area:1/1;transition:transform .5s var(--ease),opacity .3s;display:grid;place-items:center;transform-origin:50% 50%}
.ib .moon,.theme-icon-wrap .moon{transform:rotate(-80deg) scale(.4);opacity:0}
:root[data-dk="1"] .ib .sun,:root[data-theme="dark"] .ib .sun,:root[data-dk="1"] .theme-icon-wrap .sun,:root[data-theme="dark"] .theme-icon-wrap .sun{transform:rotate(80deg) scale(.4);opacity:0}
:root[data-dk="1"] .ib .moon,:root[data-theme="dark"] .ib .moon,:root[data-dk="1"] .theme-icon-wrap .moon,:root[data-theme="dark"] .theme-icon-wrap .moon{transform:none;opacity:1}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ib .sun,:root:not([data-theme="light"]) .theme-icon-wrap .sun{transform:rotate(80deg) scale(.4);opacity:0}
  :root:not([data-theme="light"]) .ib .moon,:root:not([data-theme="light"]) .theme-icon-wrap .moon{transform:none;opacity:1}
}
.ib .dotn{position:absolute;top:8px;right:8px;min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font:700 10.5px/18px var(--font);text-align:center;padding:0 4px}
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;font:700 12px/1 var(--font);background:var(--s3);color:var(--ink2);white-space:nowrap;flex:none}
.pill.good{background:var(--good-bg);color:var(--good)}.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.bad{background:var(--bad-bg);color:var(--bad)}.pill.info{background:var(--info-bg);color:var(--info)}.pill.violet{background:var(--violet-bg);color:var(--violet)}.pill.acc{background:var(--accent-bg);color:var(--accent)}
.pill.d::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:99px;font:700 12px/1 var(--font);background:var(--s3);color:var(--ink2);white-space:nowrap}
.badge.good{background:var(--good-bg);color:var(--good)}.badge.warn{background:var(--warn-bg);color:var(--warn)}.badge.bad{background:var(--bad-bg);color:var(--bad)}.badge.info{background:var(--info-bg);color:var(--info)}.badge.violet{background:var(--violet-bg);color:var(--violet)}.badge.accent{background:var(--accent);color:var(--on-accent)}.badge.ink{background:var(--ink);color:var(--on-ink)}.badge.lime{background:var(--lime);color:var(--lime-ink)}
.badge.l{height:30px;padding:0 13px;font-size:13px}.badge.s{height:20px;padding:0 8px;font-size:11px}.badge.sq{border-radius:8px}
.tile{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);flex:none}
.tile .ic{width:20px;height:20px}
.tile.good{background:var(--good-bg);color:var(--good)}.tile.warn{background:var(--warn-bg);color:var(--warn)}.tile.bad{background:var(--bad-bg);color:var(--bad)}.tile.info{background:var(--info-bg);color:var(--info)}.tile.violet{background:var(--violet-bg);color:var(--violet)}.tile.neu{background:var(--s3);color:var(--ink2)}
.tile.lg{width:56px;height:56px;border-radius:18px}.tile.sm{width:34px;height:34px;border-radius:11px}.tile.sm .ic{width:16px;height:16px}
.av{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font:800 13px var(--font);flex:none}
.av.v{background:var(--violet-bg);color:var(--violet)}.av.g{background:var(--good-bg);color:var(--good)}.av.w{background:var(--warn-bg);color:var(--warn)}.av.s{width:30px;height:30px;font-size:11px}
.card{background:var(--s1);border-radius:26px;padding:clamp(16px,2cqw,22px);min-width:0}
.card.flat{background:var(--s2)}
.ch{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}.ch .tx{margin-right:auto;min-width:0}.ch h3{font:800 18px/1.15 var(--font);letter-spacing:-.03em}.ch p{color:var(--ink3);font-weight:600;font-size:13px;margin-top:3px}
.li{display:flex;align-items:center;gap:12px;background:var(--s2);border-radius:18px;padding:11px 14px;transition:background .18s,transform .2s var(--ease);min-width:0;text-align:left;width:100%}
button.li:hover,a.li:hover,.li.h:hover{background:var(--s3)}button.li:active,a.li:active{transform:scale(.99)}
.li .tx{margin-right:auto;min-width:0;display:grid}.li .tx b{font-size:14.5px;letter-spacing:-.015em;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.li .tx small{color:var(--ink3);font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col{display:flex;flex-direction:column;gap:8px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.row.nw{flex-wrap:nowrap}.sp{flex:1}
.g,.grid{display:grid;gap:12px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g.c21{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.g.c12{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.fld{display:grid;gap:7px;min-width:0}.fld>label,.lbl{font:700 13px var(--font);color:var(--ink2)}
.inp{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-radius:16px;background:var(--s2);transition:background .2s;min-width:0}
.inp:focus-within{background:var(--s3);outline:2px solid var(--accent);outline-offset:0}
.inp input,.inp select,.inp textarea{flex:1;min-width:0;background:none;border:0;outline:0;font:600 15px var(--font);height:46px}
.inp textarea{height:auto;min-height:110px;padding:13px 0;resize:vertical;font-weight:550;line-height:1.5}
.inp select{appearance:none;-webkit-appearance:none;cursor:pointer}
.inp select option{background:var(--s1);color:var(--ink)}
.inp .ic{color:var(--ink3)}
.inp .eye{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink3)}.inp .eye:hover{background:var(--s4);color:var(--ink)}
.card .inp,.mdl .inp,.au-card .inp{background:var(--s2)}
.m>.scr>.mn .inp{background:var(--s1)}.m>.scr>.mn .card .inp{background:var(--s2)}
.fld.bad .inp{background:var(--bad-bg)}.fld .hint{font-size:12.5px;color:var(--ink3);font-weight:600}.fld.bad .hint{color:var(--bad)}
.seg{display:inline-flex;background:var(--s3);border-radius:999px;padding:3px;max-width:100%;overflow-x:auto;scrollbar-width:none}.seg::-webkit-scrollbar{display:none}
.card .seg,.mdl .seg{background:var(--s2)}
.seg button,.seg .seg-btn{height:34px;padding:0 15px;border-radius:999px;font:700 13px/1 var(--font);color:var(--ink2);white-space:nowrap;transition:background .2s,color .2s;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.seg button[aria-selected="true"],.seg button[aria-checked="true"],.seg input:checked+.seg-btn{background:var(--s1);color:var(--ink)}
.card .seg button[aria-selected="true"],.card .seg button[aria-checked="true"],.mdl .seg button[aria-selected="true"],.mdl .seg button[aria-checked="true"],.card .seg input:checked+.seg-btn,.mdl .seg input:checked+.seg-btn{background:var(--s1)}
.card .seg button[aria-selected="true"],.card .seg button[aria-checked="true"],.card .seg input:checked+.seg-btn{background:var(--ink);color:var(--on-ink)}
.seg.blk{display:flex}.seg.blk button,.seg.blk .seg-btn{flex:1}
.stepper{display:inline-flex;align-items:center;gap:2px;background:var(--s2);border-radius:99px;padding:3px}
.stepper button{width:34px;height:34px;border:0;border-radius:50%;background:var(--s1);display:grid;place-items:center}
.stepper b{min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-bottom:14px}.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;height:42px;padding:0 16px;border-radius:14px;font:700 14px/1 var(--font);color:var(--ink2);white-space:nowrap;transition:background .2s,color .2s}
.tabs button:hover{background:var(--s3)}.tabs button[aria-selected="true"]{background:var(--s1);color:var(--ink)}
.tp{display:none}.tp.on{display:block;animation:rise .4s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes sheet{from{transform:translateY(100%)}}
.sw{position:relative;width:50px;height:30px;border-radius:999px;background:var(--s4);flex:none;transition:background .25s}
.sw::after{content:"";position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .35s var(--ease)}
.sw[aria-checked="true"]{background:var(--good)}.sw[aria-checked="true"]::after{transform:translateX(20px)}
.alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:var(--info-bg);color:var(--info);font-weight:650;line-height:1.4}
.alert.warn{background:var(--warn-bg);color:var(--warn)}.alert.bad{background:var(--bad-bg);color:var(--bad)}.alert.good{background:var(--good-bg);color:var(--good)}
.alert .ic{margin-top:1px}.alert b{display:block}.alert span{font-weight:600;opacity:.92;font-size:13.5px}
.mtr{height:8px;border-radius:8px;background:var(--s3);overflow:hidden}.mtr b{display:block;height:100%;border-radius:8px;background:var(--accent);transition:width .6s var(--ease)}
.mtr.good b{background:var(--good)}.mtr.warn b{background:var(--warn)}.mtr.bad b{background:var(--bad)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;align-items:center}.kv dt{color:var(--ink3);font-weight:650;font-size:13px}.kv dd{font-weight:650;text-align:right;min-width:0;overflow-wrap:anywhere}
code,.cd{font:600 12.5px var(--mono);background:var(--s2);padding:3px 8px;border-radius:8px;color:var(--ink2)}
.card code{background:var(--s2)}
.kbd{font:700 11px var(--mono);background:var(--s3);color:var(--ink2);padding:3px 7px;border-radius:7px}
.cpf{display:flex;align-items:center;gap:8px;background:var(--s2);border-radius:14px;padding:6px 6px 6px 14px;font:600 13px var(--mono);min-width:0}.cpf span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;min-height:96px}
.mt .l{font:700 12.5px var(--font);color:var(--ink3)}.mt .v{display:block;font:800 clamp(26px,3.2cqw,34px)/1.05 var(--font);letter-spacing:-.045em;margin-top:6px;font-variant-numeric:tabular-nums}
.mt small{display:block;color:var(--ink3);font-weight:650;font-size:12.5px;margin-top:6px}
.sk{display:grid;gap:8px}.sk i{display:block;height:64px;border-radius:18px;background:var(--s2);position:relative;overflow:hidden}
.sk i::after{content:"";position:absolute;inset:0;background:var(--s3);opacity:.7;animation:sk 1.3s ease-in-out infinite}
@keyframes sk{0%,100%{opacity:0}50%{opacity:.8}}
.es{display:grid;gap:10px;justify-items:center;text-align:center;padding:36px 18px}.es .tile{margin-bottom:4px}.es h4{font:800 19px/1.2 var(--font);letter-spacing:-.03em}.es p{color:var(--ink2);font-weight:560;max-width:34ch}
.tbl{width:100%;border-collapse:separate;border-spacing:0 5px}
.tbl th{font:700 12px/1 var(--font);color:var(--ink3);text-align:left;padding:4px 14px}
.tbl td{background:var(--s2);padding:12px 14px;font-weight:600;vertical-align:middle;transition:background .18s}
.tbl td:first-child{border-radius:16px 0 0 16px}.tbl td:last-child{border-radius:0 16px 16px 0}
.tbl tr.h:hover td{background:var(--s3)}.tbl .r{text-align:right}
.tbl td b{font-weight:700}
.step{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink3);font-size:13.5px}
.step i{width:30px;height:30px;border-radius:50%;background:var(--s3);display:grid;place-items:center;font:800 12px var(--mono);font-style:normal;transition:background .3s,color .3s}
.step.cur{color:var(--ink)}.step.cur i{background:var(--accent);color:var(--on-accent)}.step.done{color:var(--ink2)}.step.done i{background:var(--good);color:#fff}
.stp-l{flex:1;height:3px;border-radius:3px;background:var(--s3);min-width:14px}
.sel{display:grid;gap:6px;text-align:left;padding:16px;border-radius:20px;background:var(--s2);transition:background .2s,transform .2s var(--ease);min-width:0;width:100%}
.sel:hover:not(:disabled){background:var(--s3)}.sel:active:not(:disabled){transform:scale(.99)}
.sel[aria-pressed="true"]{background:var(--accent-bg)}.sel[aria-pressed="true"] b{color:var(--accent)}
.sel b{font:800 16px var(--font);letter-spacing:-.02em}.sel .p{font:800 22px var(--font);letter-spacing:-.04em}.sel .p small{font-size:13px;color:var(--ink3);font-weight:650}.sel small.f{color:var(--ink3);font-weight:600;font-size:12.5px}
.sel:disabled{opacity:.55;cursor:not-allowed}
.hd{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;padding:6px 0 18px}.hd .tx{margin-right:auto;min-width:0}
.hd h2{font:800 clamp(26px,3.6cqw,36px)/1.05 var(--font);letter-spacing:-.05em}.hd p{color:var(--ink2);font-weight:560;margin-top:6px;max-width:52ch}
.tl2{display:grid;gap:0}.tl2 .ev{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:flex-start;padding:10px 0;position:relative}
.tl2 .ev .tile{width:38px;height:38px;border-radius:12px;z-index:1}
.tl2 .ev:not(:last-child)::before{content:"";position:absolute;left:18px;top:46px;bottom:-4px;width:2px;background:var(--s3)}
.tl2 b{font-weight:700;display:block;letter-spacing:-.01em}.tl2 small{color:var(--ink3);font-weight:600;font-size:12.5px}
.dh{font:700 12px var(--font);color:var(--ink3);padding:12px 2px 4px}
.sch{position:relative;display:flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 16px;border-radius:999px;background:var(--s1);color:var(--ink3);font-weight:650;flex:1;max-width:420px;min-width:0}
.sch span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sch input{flex:1;min-width:0;background:none;border:0;outline:0;font:600 14.5px var(--font)}
.sch:focus-within{outline:2px solid var(--accent)}
.mdl{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:16px;animation:fade .25s}
.mdl .ov{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mdl .bx{position:relative;width:min(560px,100%);max-height:85vh;overflow:auto;background:var(--s1);border-radius:32px;padding:24px;animation:pop .4s var(--ease);display:grid;gap:16px;border:1px solid var(--s3);box-shadow:0 24px 64px rgba(0,0,0,.45)}
.mdl .bx h3{font:800 24px/1.1 var(--font);letter-spacing:-.04em;margin-right:44px}
.mdl .x{position:absolute;right:14px;top:14px;z-index:2}
.mdl.dr{place-items:stretch end;padding:0}.mdl.dr .bx{width:min(470px,100%);height:100%;border-radius:32px 0 0 32px;align-content:start}
.mdl.cmd{place-items:start center;padding-top:60px}.mdl.cmd .bx{background:var(--s1);padding:12px;gap:8px;border-radius:26px;border:1px solid var(--s3);box-shadow:0 24px 64px rgba(0,0,0,.35)}
.mdl.stepup,#modalStepUp,.mdl[data-priority="high"]{z-index:1200}
.mdl.stepup .ov,#modalStepUp .ov,.mdl[data-priority="high"] .ov{z-index:1200;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mdl.stepup .bx,#modalStepUp .bx,.mdl[data-priority="high"] .bx{z-index:1201;box-shadow:0 32px 96px rgba(0,0,0,.7);border:1px solid var(--s4)}
.sheet{align-items:flex-end;padding:0}
.mdl.sheet{place-items:end;padding:0}
.mdl.sheet .bx{width:min(560px,100%);border-radius:28px 28px 0 0;animation:sheet .45s var(--ease) both}
.sheetm{width:100%;border-radius:28px 28px 0 0;background:var(--s2);padding:10px 16px 16px;display:flex;flex-direction:column;gap:12px}
.sheetm .grab{width:40px;height:5px;border-radius:9px;background:var(--s4);margin:0 auto}
.toast{position:absolute;left:50%;bottom:22px;z-index:70;transform:translateX(-50%);background:var(--ink);color:var(--on-ink);padding:13px 18px;border-radius:999px;font-weight:700;display:flex;gap:10px;align-items:center;animation:pop .4s var(--ease);white-space:nowrap;max-width:92%}
.toast.good .ic{color:var(--good)}.toast.warn .ic{color:var(--warn)}.toast.bad .ic{color:var(--bad)}
.tbr{display:none}
/* shells */
.ap{display:grid;grid-template-columns:252px minmax(0,1fr);height:100%}
.sd{padding:16px 12px 14px;display:flex;flex-direction:column;gap:2px;overflow:auto;scrollbar-width:none}
.sd::-webkit-scrollbar{display:none}
.brand{display:flex;align-items:center;gap:10px;font:800 22px/1 var(--font);letter-spacing:-.055em;padding:4px 10px 14px}.brand svg{width:30px;height:30px}
.brand .ops{font:800 11px var(--font);letter-spacing:.02em;padding:4px 8px;border-radius:8px;background:var(--ink);color:var(--on-ink)}
.nl{font:700 11.5px/1 var(--font);color:var(--ink3);padding:16px 12px 6px}
.nv{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-radius:14px;font-weight:650;font-size:14.5px;color:var(--ink2);transition:background .18s,color .18s;text-align:left;width:100%}
.nv:hover{background:var(--s3);color:var(--ink)}.nv.on{background:var(--s1);color:var(--ink)}.nv .pill{margin-left:auto;height:22px;padding:0 8px}
.sd .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:18px;background:var(--s1)}.me .tx{display:grid;min-width:0;margin-right:auto}.me b{font-size:13.5px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.me small{color:var(--ink3);font-weight:600;font-size:12px}
.mn{overflow:auto;min-width:0;height:100%;padding:0 clamp(16px,2.4cqw,28px) 40px;scroll-behavior:smooth}
.tb{position:sticky;top:0;z-index:6;background:var(--bg);display:flex;align-items:center;gap:10px;padding:14px 0 10px}
.tb .sp{flex:1}
.tabbar{display:none;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom, 0px));z-index:99;height:66px;background:var(--s1);border-radius:33px;padding:6px;align-items:center;justify-content:space-between;border:1px solid var(--s3);box-shadow:0 12px 36px rgba(0,0,0,.28);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.tabbar button,.tabbar a{flex:1;height:54px;border-radius:27px;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;font:700 10.5px/1 var(--font);color:var(--ink3);text-decoration:none;border:none;background:transparent;cursor:pointer;transition:color .2s,background .2s,transform .2s var(--ease);-webkit-tap-highlight-color:transparent}
.tabbar button .ic,.tabbar a .ic,.tabbar button svg,.tabbar a svg{width:20px;height:20px}
.tabbar button.on,.tabbar a.on{color:var(--ink);background:var(--s2)}
.tabbar button:active,.tabbar a:active{transform:scale(.92)}
.tabbar .mid{flex:none;width:58px;height:54px;border-radius:27px;background:var(--accent)!important;color:var(--on-accent)!important;display:flex;align-items:center;justify-content:center}
.tabbar .mid .ic,.tabbar .mid svg{width:24px;height:24px;color:var(--on-accent)}
.scr{height:100%;overflow:auto}
/* auth */
.au{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:100%;gap:8px;padding:8px}
.au-main{display:flex;flex-direction:column;padding:clamp(18px,3cqw,36px);gap:22px}
.au-card{width:100%;max-width:440px;margin:auto;display:grid;gap:18px}
.au-card h1{font:800 clamp(34px,4.2cqw,46px)/1 var(--font);letter-spacing:-.055em}
.au-card .sub{color:var(--ink2);font-weight:560;font-size:16px;line-height:1.45;margin-top:-6px}
.au-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--ink3);font-weight:650;font-size:13px}
.lk{color:var(--accent);font-weight:700}.lk:hover{text-decoration:underline}
.au-art{background:var(--accent);color:var(--on-accent);border-radius:30px;position:relative;overflow:hidden;padding:clamp(24px,4cqw,52px);display:flex;flex-direction:column;justify-content:flex-end;gap:14px}
.au-art h2{font:800 clamp(38px,6cqw,76px)/.94 var(--font);letter-spacing:-.06em;position:relative}
.au-art p{opacity:.86;font-weight:560;font-size:17px;max-width:30ch;line-height:1.4;position:relative}
.au-art .bars{position:absolute;right:-30px;top:56px;display:grid;gap:14px;justify-items:end}
.au-art .bars i{display:block;height:54px;border-radius:27px;background:#ffffff;opacity:.9;animation:slide 1.2s var(--ease) both}
.au-art .bars i:nth-child(1){width:260px}.au-art .bars i:nth-child(2){width:200px;opacity:.55;animation-delay:.08s}.au-art .bars i:nth-child(3){width:140px;opacity:.28;animation-delay:.16s}
@keyframes slide{from{transform:translateX(120%)}}
.otp{display:flex;gap:8px}.otp input{flex:1;min-width:0;height:60px;border-radius:16px;background:var(--s2);border:0;outline:0;text-align:center;font:800 26px var(--mono);transition:background .2s,transform .2s var(--ease)}
.otp input:focus{background:var(--s3);outline:2px solid var(--accent);transform:translateY(-2px)}
.otp.bad input{background:var(--bad-bg);animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.rules{display:grid;gap:6px}.rules li{display:flex;align-items:center;gap:10px;font-weight:650;font-size:13.5px;color:var(--ink3);transition:color .25s}.rules li i{width:18px;height:18px;border-radius:50%;background:var(--s3);display:grid;place-items:center;transition:background .25s}.rules li i .ic{width:11px;height:11px;color:#fff;transform:scale(0);transition:transform .35s var(--ease)}.rules li.ok{color:var(--ink)}.rules li.ok i{background:var(--good)}.rules li.ok i .ic{transform:scale(1)}
.str{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.str i{height:6px;border-radius:6px;background:var(--s3);transition:background .3s}
.chk{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:var(--ink2);font-size:13.5px;line-height:1.4;cursor:pointer}
.chk i{width:24px;height:24px;border-radius:8px;background:var(--s3);display:grid;place-items:center;flex:none;transition:background .2s}.chk i .ic{width:14px;height:14px;color:var(--on-accent);transform:scale(0);transition:transform .3s var(--ease)}.chk[aria-checked="true"] i{background:var(--accent)}.chk[aria-checked="true"] i .ic{transform:scale(1)}
.spin{width:44px;height:44px;border-radius:50%;border:4px solid var(--accent-bg);border-top-color:var(--accent);animation:spinr .8s linear infinite}
@keyframes spinr{to{transform:rotate(360deg)}}
.bigic{width:84px;height:84px;border-radius:28px;display:grid;place-items:center;animation:pop .5s var(--ease)}.bigic .ic{width:38px;height:38px}
/* public */
.pb{background:var(--bg)}
@view-transition{navigation:auto}
::view-transition-old(public-nav-bar),::view-transition-new(public-nav-bar){animation-duration:.4s;animation-timing-function:var(--ease)}
.pn{position:sticky;top:0;z-index:6;padding:10px clamp(14px,3cqw,40px);background:var(--bg)}
.pn .in{display:flex;align-items:center;background:var(--s1);border-radius:999px;padding:7px 10px 7px 10px;min-height:56px;max-width:1100px;margin:0 auto;width:100%;view-transition-name:public-nav-bar}
.pn .nl-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.pn .nl-right{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:1}
.pn .lnk{position:relative;display:flex;align-items:center;gap:2px;flex:none}
.pn .lnk a{position:relative;z-index:1;height:42px;padding:0 16px;display:flex;align-items:center;border-radius:999px;font-weight:650;font-size:14.5px;color:var(--ink2);transition:color .2s;text-decoration:none}
.pn .lnk a:hover,.pn .lnk a.on{color:var(--ink)}
.pn .lnk .ind{position:absolute;left:0;top:0;height:42px;width:0;border-radius:999px;background:var(--s2);transition:transform .35s var(--ease),width .35s var(--ease),opacity .2s;opacity:0;pointer-events:none}
.pc{padding:clamp(16px,3cqw,40px) clamp(14px,3cqw,40px) 60px;max-width:1100px;margin:0 auto}
.ban{border-radius:34px;padding:clamp(22px,4cqw,44px);display:grid;gap:12px;background:var(--good-bg);color:var(--good)}
.ban h1{font:800 clamp(34px,5.6cqw,64px)/.98 var(--font);letter-spacing:-.055em}.ban p{font-weight:600;max-width:52ch;opacity:.92;line-height:1.45}
.ban.warn{background:var(--warn-bg);color:var(--warn)}.ban.bad{background:var(--bad-bg);color:var(--bad)}
.upt{display:grid;grid-template-columns:repeat(60,1fr);gap:2px;height:30px}.upt i{border-radius:3px;background:var(--good);opacity:.85}.upt i.w{background:var(--warn)}.upt i.b{background:var(--bad)}
.doc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;align-items:start}.doc .toc{position:sticky;top:76px;display:grid;gap:2px}
.doc .toc button{height:40px;padding:0 14px;border-radius:12px;text-align:left;font-weight:650;color:var(--ink2);transition:background .2s,color .2s}.doc .toc button[aria-current="true"]{background:var(--s1);color:var(--ink)}.doc .toc button:hover{background:var(--s3)}
.prose h1{font:800 clamp(30px,4.4cqw,48px)/1 var(--font);letter-spacing:-.05em;margin-bottom:10px}.prose h3{font:800 22px var(--font);letter-spacing:-.03em;margin:26px 0 8px}.prose p{color:var(--ink2);font-weight:560;line-height:1.65;margin-bottom:10px;max-width:68ch;font-size:15.5px}
.xr [data-c]{outline:2px dashed var(--accent);outline-offset:-2px}
.xr [data-c]:not(.tb):not(.tabbar):not(.mdl):not(.sd):not(.pn){position:relative}
.xr [data-c]::after{content:attr(data-c);position:absolute;left:6px;top:6px;background:var(--accent);color:var(--on-accent);font:700 10.5px/1 var(--font);padding:4px 7px;border-radius:6px;z-index:30;pointer-events:none;white-space:nowrap}
.xr .tabbar[data-c]::after,.xr .sd[data-c]::after{top:-1px}
.cmd .li{background:transparent}.cmd .li:hover,.cmd .li.on{background:var(--s2)}
.edtb{display:flex;gap:2px;background:var(--s2);border-radius:14px;padding:4px;margin-bottom:-6px}.edtb button{width:36px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--ink2)}.edtb button:hover{background:var(--s3)}
.qr{width:168px;height:168px;border-radius:20px;background:var(--s1);padding:10px;display:grid;grid-template-columns:repeat(21,1fr);gap:0}
.qr i{background:var(--ink)}.qr i.o{background:transparent}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px 20px;border-radius:18px;border:1.5px dashed var(--s4);background:var(--s2);text-align:center;cursor:pointer;transition:border-color .15s ease,background .15s ease;margin-top:10px}
.drop:hover{background:var(--s3);border-color:var(--accent)}
.drop b{font-size:13.5px;font-weight:700}
.drop small{color:var(--ink3);font-size:12px;font-weight:500}
.support-composer{display:flex;flex-direction:column;gap:18px}
.support-composer textarea,.inp textarea{width:100%;min-height:110px;border:none;background:transparent;color:var(--ink);font:500 14px/1.55 var(--font);resize:vertical;padding:12px 14px;outline:none}
.support-composer .fld{display:flex;flex-direction:column;gap:8px}
@media (max-width:760px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]),select,textarea,[contenteditable="true"]{font-size:16px!important}
  .ap{grid-template-columns:minmax(0,1fr)}.sd{display:none}.tabbar{display:flex}.mn{padding-bottom:104px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3,.g2,.g.c21,.g.c12{grid-template-columns:minmax(0,1fr)}
  .g4.k2,.g3.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .au{grid-template-columns:minmax(0,1fr)}.au-art{display:none}
  .doc{grid-template-columns:minmax(0,1fr)}.doc .toc{position:static;display:flex;overflow-x:auto}.doc .toc button{white-space:nowrap}
  .pn .lnk{display:none}
  .tbl.rsp thead{display:none}.tbl.rsp,.tbl.rsp tbody,.tbl.rsp tr{display:block}.tbl.rsp tr{background:var(--s2);border-radius:18px;margin-bottom:6px;padding:8px 0}.tbl.rsp td{display:flex;justify-content:space-between;gap:12px;background:none;padding:7px 14px;border-radius:0!important}.tbl.rsp td::before{content:attr(data-l);color:var(--ink3);font-weight:650;font-size:12.5px}.tbl.rsp td.r{text-align:right}
  .mdl{place-items:end;padding:0}.mdl .bx,.mdl.dr .bx{width:100%;height:auto;max-height:92%;border-radius:28px 28px 0 0;animation:sheet .45s var(--ease)}
  .mdl.cmd{place-items:start center;padding:0}.mdl.cmd .bx{border-radius:0 0 28px 28px;animation:pop .4s var(--ease)}
  .hide-n{display:none!important}.sch{max-width:none}
  .tb .sch{display:none}
  .tb .srch{display:grid}
}
@container (max-width:760px){
  .ap{grid-template-columns:minmax(0,1fr)}.sd{display:none}.tabbar{display:flex}.mn{padding-bottom:104px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3,.g2,.g.c21,.g.c12{grid-template-columns:minmax(0,1fr)}
  .g4.k2,.g3.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .au{grid-template-columns:minmax(0,1fr)}.au-art{display:none}
  .doc{grid-template-columns:minmax(0,1fr)}.doc .toc{position:static;display:flex;overflow-x:auto}.doc .toc button{white-space:nowrap}
  .pn .lnk{display:none}
  .tbl.rsp thead{display:none}.tbl.rsp,.tbl.rsp tbody,.tbl.rsp tr{display:block}.tbl.rsp tr{background:var(--s2);border-radius:18px;margin-bottom:6px;padding:8px 0}.tbl.rsp td{display:flex;justify-content:space-between;gap:12px;background:none;padding:7px 14px;border-radius:0!important}.tbl.rsp td::before{content:attr(data-l);color:var(--ink3);font-weight:650;font-size:12.5px}.tbl.rsp td.r{text-align:right}
  .mdl{place-items:end;padding:0}.mdl .bx,.mdl.dr .bx{width:100%;height:auto;max-height:92%;border-radius:28px 28px 0 0;animation:sheet .45s var(--ease)}
  .mdl.cmd{place-items:start center;padding:0}.mdl.cmd .bx{border-radius:0 0 28px 28px;animation:pop .4s var(--ease)}
  .hide-n{display:none!important}.sch{max-width:none}
  .tb .sch{display:none}
  .tb .srch{display:grid}
}
.tb .srch{display:none}
@media (max-width:520px){
  .g4.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl2 .ev{grid-template-columns:38px 1fr}.tl2 .ev>.pill,.tl2 .ev>small{grid-column:2}
  .otp input{height:54px;font-size:22px}
  .hd h2{font-size:28px}
  .hd .row.act{width:100%}.hd .row.act .btn{flex:1}
}
@container (max-width:520px){
  .g4.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl2 .ev{grid-template-columns:38px 1fr}.tl2 .ev>.pill,.tl2 .ev>small{grid-column:2}
  .otp input{height:54px;font-size:22px}
  .hd h2{font-size:28px}
  .hd .row.act{width:100%}.hd .row.act .btn{flex:1}
}
@media (max-width:1700px){.vw{grid-template-columns:232px minmax(0,1fr)}.notes{grid-column:1/-1;position:static;max-height:none;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}}
@media (max-width:900px){.vw{grid-template-columns:minmax(0,1fr)}.rail{display:none}.vsel{display:flex}.bez{border-radius:30px;padding:6px}.dev{border-radius:24px;height:min(78vh,860px)}.bez.phone{width:100%}.vtag{display:none}.vbar{padding-left:14px}.hide-p{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}}

[hidden]{display:none!important}
.m{height:100%;position:relative}
.live{width:8px;height:8px;border-radius:50%;background:var(--good);position:relative;display:inline-block}
.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--good);animation:ping 1.8s var(--ease) infinite}
@keyframes ping{from{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(3)}}
.show-n{display:none}
@media (max-width:760px){.show-n{display:inline-flex}}
@container (max-width:760px){.show-n{display:inline-flex}}
.au-card{grid-template-columns:minmax(0,1fr)}.au-card>*{min-width:0}.seg.blk{width:100%}
.sch .kbd{flex:none;margin-left:auto}.tb .sch>span:not(.kbd){flex:none}.sel .pill,.li .tx .pill{justify-self:start;width:max-content}.tb .sch{text-align:left;color:var(--ink3);font-weight:650}


html, body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 500 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}
.app-container {
  height: 100vh;
  min-height: 100vh;
}
.ap {
  height: 100vh;
  min-height: 100vh;
}
.sd {
  height: 100vh;
  position: sticky;
  top: 0;
}
.mn {
  height: 100vh;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.tabs.under {
  gap: 8px;
  border-radius: 0;
  padding: 0 0 2px 0;
  background: transparent;
}
.tabs.under .tab, .tabs.under button {
  background: transparent;
  border-radius: 12px;
  padding: 8px 16px;
  font: 700 14px/1 var(--font);
  color: var(--ink2);
  border: 0;
  cursor: pointer;
  transition: all .18s;
}
.tabs.under .tab:hover, .tabs.under button:hover {
  background: var(--s3);
  color: var(--ink);
}
.tabs.under .tab[aria-selected="true"], .tabs.under button[aria-selected="true"] {
  background: var(--s1);
  color: var(--ink);
}
.view-section {
  animation: rise .35s var(--ease);
}
@media (max-width:760px) {
  .ap {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 100vh !important;
  }
  .sd {
    display: none !important;
  }
  .tabbar {
    display: flex !important;
  }
  .mn {
    height: auto !important;
    min-height: 100vh !important;
    padding-bottom: 104px !important;
  }
  .g4, .g4.k2, .g3.k2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .g3, .g2, .g.c21, .g.c12 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .tb .sch {
    display: none !important;
  }
  .tb .srch {
    display: grid !important;
  }
  .hide-n {
    display: none !important;
  }
  .show-n {
    display: inline-flex !important;
  }
}
.toasts{position:fixed;left:50%;bottom:22px;z-index:1300;transform:translateX(-50%);display:grid;gap:8px;justify-items:center;width:max-content;max-width:calc(100vw - 28px)}.toasts .toast{position:static;transform:none;left:auto;bottom:auto;white-space:normal;max-width:100%}

/* ===== Petal Pager & Filterable Audit Log (canonical Petal from panel.html / parts z5) ===== */
.pager {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.pager button {
  min-width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink2);
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 8px;
  font-size: 13px;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}
.pager button:hover {
  background: var(--s3);
  color: var(--ink);
}
.pager button[aria-current="true"] {
  background: var(--ink);
  color: var(--on-ink);
}
.pager button:disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

/* .z-au/.z-aur/.z-aut/.z-aud audit-log family — canonical definition lives in app-ui.css (A-17 dedupe, 2026-10-19). */


.seg .seg-btn:focus-visible{outline:2px solid var(--acc,currentColor);outline-offset:2px}