:root{
  color-scheme:dark;
  --bg:#0b0c15;--surface:#14162a;--surface2:#1b1e36;--line:rgba(var(--ink),.09);--line2:rgba(var(--ink),.16);
  --grid:#272a44;--axis:#3a3e5e;
  --txt:#f1f2fb;--txt2:#c0c3dc;--mut:#8d91b0;
  --pri:#8b95ff;--pri2:#b5a0ff;--on-pri:#10122a;--ink:255,255,255;--card:rgba(20,22,42,.82);--side:rgba(11,12,21,.55);--side2:rgba(14,15,28,.92);--tip:#23264a;--aur:.28;--hero:rgba(68,76,190,.42);
  /* categorical slots: fixed order, validated against --surface */
  --s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;--s6:#9085e9;
  /* status: reserved for meaning */
  --good:#2fbf71;--warn:#fab219;--serious:#ec835a;--crit:#ef6464;
  --r:20px;--ease:cubic-bezier(.2,.8,.2,1);
  font-family:"Noto Sans Thai","Leelawadee UI","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-size:15px;line-height:1.5;min-height:100vh;overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:8px}
h1,h2,h3,p{margin:0}

.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--aur);animation:drift 26s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:48vw;height:48vw;left:-12vw;top:-16vw;background:#8e1512}
.aurora i:nth-child(2){width:38vw;height:38vw;right:-10vw;top:12vh;background:#5e0f24;animation-delay:-9s}
.aurora i:nth-child(3){width:34vw;height:34vw;left:32vw;bottom:-18vw;background:#3a0d0a;animation-delay:-17s}
@keyframes drift{to{transform:translate(6vw,5vh) scale(1.15)}}

.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;padding:24px 14px;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line);background:var(--side);backdrop-filter:blur(18px)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;padding:4px 10px 20px}
.logo img{width:34px;height:34px;border-radius:10px}
.nav{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:12px;color:var(--mut);font-weight:500;text-align:left;transition:background .25s,color .25s,transform .25s var(--ease)}
.nav:hover{color:var(--txt);background:rgba(var(--ink),.05);transform:translateX(3px)}
.nav.on{color:var(--txt);background:linear-gradient(90deg,rgba(255,70,60,.2),rgba(255,70,60,.04));box-shadow:inset 2px 0 0 var(--pri)}
.note{margin-top:auto;font-size:12px;color:var(--mut);padding:10px 12px}

main{padding:22px 28px 110px;max-width:1320px;width:100%;margin:0 auto}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.top h1{font-size:23px;font-weight:700;margin-right:auto}
.month{display:flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--line);border-radius:14px;background:rgba(var(--ink),.04)}
.month span{min-width:136px;text-align:center;font-weight:600;font-size:14px}
.icb{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:var(--txt2);transition:background .2s,transform .2s var(--ease)}
.icb:hover{background:rgba(var(--ink),.08)}.icb:active{transform:scale(.9)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 15px;border-radius:12px;font-weight:600;font-size:14px;border:1px solid var(--line2);background:rgba(var(--ink),.05);transition:transform .2s var(--ease),background .2s,box-shadow .25s}
.btn:hover{background:rgba(var(--ink),.1);transform:translateY(-1px)}.btn:active{transform:scale(.96)}
.btn.primary{border:0;background:linear-gradient(135deg,var(--pri),var(--pri2));color:var(--on-pri);box-shadow:0 6px 22px rgba(255,70,60,.3)}
.btn.primary:hover{box-shadow:0 10px 30px rgba(255,70,60,.45)}
.btn.danger{color:var(--crit);border-color:rgba(239,100,100,.4)}
.btn.sm{padding:6px 11px;font-size:13px;border-radius:10px}

.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;backdrop-filter:blur(14px);overflow:hidden;min-width:0;transition:border-color .3s,transform .35s var(--ease)}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,70,60,.13),transparent 70%)}
.card:hover{border-color:var(--line2)}.card:hover::before{opacity:1}
.card>*{position:relative}
.enter .reveal{animation:rise .65s var(--ease) both;animation-delay:calc(var(--i,0)*55ms)}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(5px)}}
.head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.head h2{font-size:16px;font-weight:600}
.sub{color:var(--mut);font-size:13px}

.hero{display:flex;align-items:center;gap:24px;justify-content:space-between;flex-wrap:wrap;padding:26px;background:linear-gradient(120deg,var(--hero),var(--card) 62%)}
.hero>div:first-child{flex:1 1 340px;min-width:0}
.hero .big{font-size:clamp(36px,5.4vw,56px);font-weight:700;line-height:1.15;letter-spacing:-.01em}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{font-size:13px;padding:5px 11px;border-radius:999px;background:rgba(var(--ink),.07);color:var(--txt2)}
.chip b{color:var(--txt);font-weight:600}
.score{display:flex;align-items:center;gap:14px}
.score .t{max-width:150px}.score .t b{display:block;font-size:15px}

.kpi .l{color:var(--mut);font-size:13px;display:flex;gap:7px;align-items:center}
.kpi .l i{width:8px;height:8px;border-radius:3px}
.kpi .v{font-size:clamp(20px,2.2vw,27px);font-weight:700;margin:4px 0 2px}
.delta{font-size:12.5px;color:var(--mut)}.delta b{font-weight:600}
.up-good,.down-good{color:var(--good)}.up-bad,.down-bad{color:var(--crit)}

.chart{overflow-x:auto;margin:0 -4px}
.chart svg{display:block;width:100%;min-width:460px;height:auto}
.axis{fill:var(--mut);font-size:11px;font-variant-numeric:tabular-nums}
.hit{fill:transparent;transition:fill .2s;outline:none}.hit:hover,.hit:focus{fill:rgba(var(--ink),.05)}
.enter .bar{animation:grow .8s var(--ease) both;animation-delay:var(--d);transform-origin:bottom;transform-box:fill-box}
@keyframes grow{from{transform:scaleY(0)}}
.enter .draw{stroke-dasharray:1;animation:draw 1.3s .35s var(--ease) both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.enter .pop{animation:fadein .4s 1s both}@keyframes fadein{from{opacity:0}}
.enter .seg-c{animation:seg 1s var(--d,0s) var(--ease) both}
@keyframes seg{from{stroke-dasharray:0 var(--C)}}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--txt2)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.legend i.ln{height:2px;border-radius:2px;width:16px}

.donut{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center}
.dl{flex:1;min-width:170px;display:grid;gap:8px}
.dl div{display:flex;align-items:center;gap:8px;font-size:13.5px}
.dl i{width:10px;height:10px;border-radius:3px;flex:none}
.dl span{color:var(--txt2);margin-right:auto}.dl small{color:var(--mut);margin-left:4px}
.ring text{fill:var(--txt);text-anchor:middle;font-weight:700}
.ring text.m{fill:var(--mut);font-weight:400}

.bars{display:grid;gap:14px}
.bl{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:6px}
.bl span:last-child{color:var(--txt2);font-variant-numeric:tabular-nums;white-space:nowrap}
.track{height:8px;border-radius:6px;background:rgba(var(--ink),.08);overflow:hidden}
.fill{height:100%;border-radius:6px;background:var(--c,var(--pri));width:var(--w);transition:width .6s var(--ease)}
.enter .fill{animation:fillin 1s .2s var(--ease) both}@keyframes fillin{from{width:0}}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500}

.ins{display:grid;gap:10px}
.in{display:flex;gap:11px;padding:11px 12px;border-radius:14px;background:rgba(var(--ink),.04);transition:transform .25s var(--ease),background .25s}
.in:hover{transform:translateX(3px);background:rgba(var(--ink),.07)}
.in .e{font-size:18px;line-height:1.3}.in b{display:block;font-weight:600;font-size:14px}.in p{font-size:13px;color:var(--txt2)}

.list{display:grid;gap:2px}
.row{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border-radius:12px;text-align:left;transition:background .2s,transform .2s var(--ease)}
button.row:hover{background:rgba(var(--ink),.06);transform:translateX(2px)}
.av{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:17px;font-weight:700;background:rgba(255,70,60,.14);color:var(--pri)}
.row .m{min-width:0;flex:1}.row .m b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .m small{color:var(--mut);font-size:12.5px;display:block}
.row .a{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.row .a small{display:block;font-weight:400;color:var(--mut);font-size:12px}
.dh{font-size:12.5px;color:var(--mut);padding:12px 10px 3px}
.empty{padding:26px 10px;text-align:center;color:var(--mut);font-size:14px}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pill{padding:6px 12px;border-radius:999px;font-size:13px;color:var(--txt2);background:rgba(var(--ink),.05);transition:background .2s}
.pill.on{background:var(--pri);color:var(--on-pri);font-weight:600}
input,select{background:rgba(var(--ink),.06);border:1px solid var(--line);border-radius:12px;padding:9px 12px;outline:none;transition:border-color .2s,box-shadow .2s;width:100%;min-width:0}
input:focus,select:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(255,70,60,.22)}
select option{background:var(--surface2)}
.filters input,.filters select{width:auto;flex:1;min-width:130px;padding:6px 12px;font-size:13px}
input[type=range]{padding:0;border:0;background:none;accent-color:var(--pri);box-shadow:none}

.subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.sub-c{display:flex;gap:11px;align-items:center;padding:12px;border-radius:14px;background:rgba(var(--ink),.04);text-align:left;width:100%;transition:transform .25s var(--ease),background .25s}
.sub-c:hover{transform:translateY(-2px);background:rgba(var(--ink),.08)}

.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .w{font-size:12px;color:var(--mut);text-align:center;padding:4px 0}
.cal .d{min-height:58px;border-radius:10px;padding:5px 7px;background:rgba(var(--ink),.03);font-size:13px;color:var(--txt2);transition:background .2s}
.cal .d.has:hover{background:rgba(var(--ink),.09)}
.cal .d.today{box-shadow:inset 0 0 0 1.5px var(--pri);color:var(--txt);font-weight:600}
.cal .pad{background:none}
.dots{display:flex;gap:3px;flex-wrap:wrap;margin-top:5px}.dots i{width:7px;height:7px;border-radius:2px}

.slider{display:grid;grid-template-columns:minmax(96px,132px) 1fr 50px;gap:10px;align-items:center;font-size:14px;margin-bottom:8px}
.slider output{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.stack{display:flex;gap:2px;height:12px;border-radius:7px;overflow:hidden;margin:14px 0 6px}
.stack i{display:block;transition:width .4s var(--ease)}
.goal .e{font-size:26px}.goal h3{font-size:15.5px;font-weight:600}
table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
th,td{padding:7px 8px;text-align:right;border-bottom:1px solid var(--grid)}th:first-child,td:first-child{text-align:left}
th{color:var(--mut);font-weight:500}

.banner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 16px;margin-bottom:16px;border-radius:14px;font-size:14px;background:rgba(250,178,25,.1);border:1px solid rgba(250,178,25,.28)}
.fab{position:fixed;right:24px;bottom:24px;width:58px;height:58px;border-radius:19px;display:grid;place-items:center;z-index:20;color:var(--on-pri);background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 12px 34px rgba(255,70,60,.5);transition:transform .3s var(--ease)}
.fab:hover{transform:translateY(-3px) rotate(90deg)}.fab:active{transform:scale(.92)}
.bottom{display:none}

#modal:empty{display:none}
#modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px}
.scrim{position:absolute;inset:0;background:rgba(5,6,14,.65);backdrop-filter:blur(6px);animation:fadein .25s both}
.sheet{position:relative;width:100%;max-width:440px;max-height:90vh;overflow:auto;background:var(--surface2);border:1px solid var(--line2);border-radius:22px;padding:22px;display:grid;gap:13px;animation:sheet .35s var(--ease) both}
@keyframes sheet{from{opacity:0;transform:translateY(22px) scale(.97)}}
.sheet h3{font-size:18px;font-weight:700}
.lab{display:block;font-size:13px;color:var(--txt2);margin-bottom:5px}
.hint{font-size:12.5px;color:var(--mut);margin-top:4px}
.segc{display:flex;gap:4px;padding:4px;border-radius:13px;background:rgba(var(--ink),.05)}
.segc label{flex:1;cursor:pointer}.segc input,.cc input{position:absolute;opacity:0;width:0;padding:0}
.segc span{display:block;text-align:center;padding:7px 6px;border-radius:10px;font-size:13.5px;color:var(--txt2);transition:background .2s,color .2s}
.segc input:checked+span{background:var(--pri);color:var(--on-pri);font-weight:600}
.segc input:focus-visible+span,.cc input:focus-visible+span{outline:2px solid var(--pri);outline-offset:1px}
.cc{display:flex;flex-wrap:wrap;gap:6px}.cc label{cursor:pointer}
.cc span{display:block;padding:6px 11px;border-radius:999px;font-size:13px;background:rgba(var(--ink),.06);color:var(--txt2);transition:background .2s}
.cc input:checked+span{background:var(--pri);color:var(--on-pri);font-weight:600}
.acts{display:flex;gap:8px;margin-top:6px}.acts .sp{flex:1}

#toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);opacity:0;background:var(--surface2);border:1px solid var(--line2);padding:10px 18px;border-radius:13px;z-index:60;font-size:14px;transition:.3s var(--ease);pointer-events:none;max-width:90vw}
#toast.on{transform:translate(-50%,0);opacity:1}
#tip{position:fixed;z-index:70;pointer-events:none;background:var(--tip);border:1px solid var(--line2);border-radius:11px;padding:8px 12px;font-size:13px;white-space:pre-line;opacity:0;transition:opacity .15s;max-width:260px;box-shadow:0 10px 26px rgba(0,0,0,.45)}
#tip.on{opacity:1}

@media(max-width:1060px){.s3{grid-column:span 6}.s4,.s5,.s6,.s7,.s8{grid-column:span 12}}
@media(max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}.side{display:none}
  main{padding:14px 16px 112px}
  .top h1{font-size:20px;width:100%}
  .month{flex:1;justify-content:space-between}.month span{min-width:0}
  .top .btn.primary{display:none}
  .card{padding:16px}.hero{padding:20px}
  .bottom{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--side2);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .bottom .nav{flex-direction:column;gap:2px;padding:5px 0;font-size:10.5px;text-align:center;box-shadow:none;background:none;transform:none}
  .bottom .nav.on{color:var(--pri)}
  .fab{right:16px;bottom:78px;width:52px;height:52px}
  .cal .d{min-height:46px;padding:4px}
  #toast{bottom:90px}
}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}

.syncp{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:12px;font-size:13px;color:var(--txt2);border:1px solid var(--line);background:rgba(var(--ink),.04)}
.syncp i{width:8px;height:8px;border-radius:50%;background:var(--mut)}
.syncp[data-s=ok] i{background:var(--good)}.syncp[data-s=error] i{background:var(--crit)}.syncp[data-s=offline] i{background:var(--warn)}
.syncp[data-s=syncing] i{background:var(--pri);animation:pulse 1s ease-in-out infinite alternate}
@keyframes pulse{to{opacity:.3}}
.btn:disabled{opacity:.55;cursor:wait}
main{padding-top:calc(22px + env(safe-area-inset-top))}
@media(max-width:820px){main{padding-top:calc(14px + env(safe-area-inset-top))}input,select{font-size:16px}.filters input,.filters select{font-size:16px}}

:root[data-theme=light]{color-scheme:light;
  --bg:#f3f4fb;--surface:#fff;--surface2:#fff;--line:rgba(20,22,42,.1);--line2:rgba(20,22,42,.18);--grid:#e4e5ef;--axis:#c3c5d4;
  --txt:#14162a;--txt2:#454864;--mut:#6b6f8a;--pri:#4f5ce0;--pri2:#7a5cf0;--on-pri:#fff;--ink:20,22,42;
  --s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;--s5:#e87ba4;--s6:#6250d6;
  --good:#0f8a4a;--warn:#a86f00;--serious:#c4551f;--crit:#d03b3b;
  --card:rgba(255,255,255,.86);--side:rgba(255,255,255,.72);--side2:rgba(255,255,255,.95);--tip:#fff;--aur:.16;--hero:rgba(124,138,255,.28)}
html,body{overflow-x:clip;overscroll-behavior-x:none;touch-action:pan-y}
.chart,.cal,.modal-scroll{touch-action:pan-x pan-y}
.alloc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center}
.arow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--grid)}
.arow label{display:flex;align-items:center;gap:8px;font-size:14px;flex-wrap:wrap;min-width:0}
.arow label i{width:10px;height:10px;border-radius:3px;flex:none}
.arow small{width:100%;padding-left:18px;margin-top:-4px;color:var(--mut);font-size:12.5px}
.step{display:flex;align-items:center;gap:2px;flex:none}
.step input{width:58px;text-align:center;padding:7px 2px;-moz-appearance:textfield;font-weight:600}
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{-webkit-appearance:none}
.step .icb{font-size:19px;background:rgba(var(--ink),.06)}
.pie3 svg{display:block;width:100%;max-width:400px;margin:0 auto;height:auto;overflow:visible}
.s3d{transition:transform .35s var(--ease),filter .35s;outline:none;cursor:pointer}
.s3d:hover,.s3d:focus{transform:translateY(-7px);filter:brightness(1.1)}
.enter .s3d{animation:s3d .8s var(--ease) both;animation-delay:calc(var(--i)*110ms + .15s)}
@keyframes s3d{from{opacity:0;transform:translateY(-26px)}}
.masc{position:relative;display:flex;align-items:flex-end;gap:8px;flex:none;animation:bob 2.6s ease-in-out infinite}
.masc img{height:126px;width:auto;image-rendering:pixelated;filter:drop-shadow(0 8px 10px rgba(0,0,0,.3))}
.masc.jump{animation:jump .6s var(--ease)}
.bub{max-width:170px;padding:9px 12px;border-radius:14px 14px 3px 14px;background:rgba(var(--ink),.1);font-size:13px;text-align:left;margin-bottom:58px}
@keyframes bob{50%{transform:translateY(-5px)}}
@keyframes jump{30%{transform:translateY(-24px) rotate(-4deg)}60%{transform:translateY(0)}80%{transform:translateY(-7px)}}
#mpop{position:fixed;left:18px;bottom:-150px;z-index:40;display:flex;align-items:flex-end;gap:8px;transition:bottom .45s var(--ease);pointer-events:none}
#mpop.on{bottom:18px}
#mpop img{height:110px;width:auto;image-rendering:pixelated}
#mpop span{margin-bottom:50px;padding:8px 12px;border-radius:13px;background:var(--surface2);border:1px solid var(--line2);font-size:13.5px}
.wiz{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:14px;background:rgba(var(--ink),.05)}
.wiz img{height:66px;width:auto;image-rendering:pixelated}.wiz p{font-size:13.5px;color:var(--txt2)}
.sheet h3 small{font-weight:400;margin-left:6px}
.cc span{font-size:14px}
@media screen{#print{display:none}}
@media print{
  @page{size:A4;margin:14mm}
  html,body{background:#fff!important;color:#000;overflow:visible;font-size:11pt}
  .app,.aurora,.fab,#modal,#toast,#tip,#mpop{display:none!important}
  #print h1{font-size:18pt;margin:0}#print p{margin:2pt 0}
  #print .sum{display:grid;grid-template-columns:repeat(4,1fr);gap:6pt;margin:10pt 0}
  #print .sum div{border:1px solid #bbb;padding:6pt;font-size:9pt}#print .sum b{display:block;font-size:12pt}
  #print table{font-size:9.5pt}#print th,#print td{border-bottom:1px solid #ccc;color:#000;padding:4pt}
  #print .n{text-align:left}#print tr{break-inside:avoid}#print .foot{margin-top:12pt;font-size:8.5pt;color:#444}
}
@media(max-width:820px){.alloc{grid-template-columns:minmax(0,1fr)}.pie3{order:-1}.masc{margin-left:auto}.masc img{height:100px}.bub{margin-bottom:44px}#mpop{bottom:-150px}#mpop.on{bottom:74px}}
.hsum{font-size:13px;color:var(--mut)}.hsum b{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}
.fab.away{transform:translateY(16px) scale(.6);opacity:0;pointer-events:none}
.fab{transition:transform .3s var(--ease),opacity .25s}
@media(max-width:820px){
  main{padding-bottom:calc(158px + env(safe-area-inset-bottom))}
  .bottom{min-height:calc(62px + env(safe-area-inset-bottom))}
  .fab{right:16px;bottom:calc(76px + env(safe-area-inset-bottom));width:54px;height:54px;border-radius:18px}
  #toast{bottom:calc(142px + env(safe-area-inset-bottom))}
  #mpop.on{bottom:calc(70px + env(safe-area-inset-bottom))}
}
.caph{font-size:13px;color:var(--txt2);margin:0}.caph:empty{display:none}.caph.over{color:var(--crit)}
.streak{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.flame{position:relative;font-size:38px;line-height:1;animation:flame 1.8s ease-in-out infinite alternate}
.flame b{position:absolute;right:-7px;bottom:-5px;min-width:21px;height:21px;padding:0 4px;border-radius:11px;background:var(--pri);color:var(--on-pri);font-size:12px;line-height:21px;text-align:center}
@keyframes flame{to{transform:scale(1.08) rotate(2deg)}}
.sinfo{flex:1 1 150px;min-width:0}.sinfo h2{font-size:16px;font-weight:600}
.sweek{display:flex;gap:5px}
.sd{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;color:var(--mut)}
.sd i{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-style:normal;font-size:15px;background:rgba(var(--ink),.07)}
.sd.on i{background:rgba(236,131,90,.22)}.sd.now{color:var(--txt);font-weight:600}.sd.now i{box-shadow:inset 0 0 0 1.5px var(--pri)}
.split{display:grid;gap:2px}
.sp{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:9px 10px;border-radius:10px;text-align:left;font-variant-numeric:tabular-nums}
.sp span{min-width:0}.sp small{display:block;color:var(--mut);font-size:12px}.sp b{font-weight:600;white-space:nowrap}
.sp.in{padding-left:22px;transition:background .2s}.sp.in:hover{background:rgba(var(--ink),.06)}
.sp.res{margin-top:6px;padding:12px 10px;background:rgba(var(--ink),.07);font-size:16px}.sp.res b{font-size:20px;font-weight:700}
.more summary{cursor:pointer;font-size:16px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:10px;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:'＋';color:var(--mut);font-weight:400}.more[open] summary::after{content:'－'}
.more[open] summary{margin-bottom:14px}.more summary .sub{margin-left:auto;font-weight:400}
.top h1{margin-right:auto}
@media(max-width:820px){.bottom{grid-template-columns:repeat(5,1fr)}}
.row.wait{opacity:.55}.row.wait small{color:var(--warn)}
.masc img{height:132px;width:auto;object-fit:contain}
.in .fc{width:34px;height:34px;object-fit:contain;image-rendering:pixelated;flex:none}
.rcpt{position:relative;display:block;padding:10px 12px;border:1px dashed var(--line2);border-radius:12px;text-align:center;font-size:14px;color:var(--txt2);cursor:pointer}
.rcpt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0}
.rview img{display:block;max-width:100%;max-height:260px;margin:8px auto 0;border-radius:10px}
.hgrid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
.hscore{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:14px}
@media(max-width:560px){.hgrid{grid-template-columns:minmax(0,1fr)}}
#splash{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--bg);transition:opacity .3s var(--ease),transform .3s var(--ease);cursor:pointer}
#splash.done{opacity:0;transform:scale(1.04);pointer-events:none}
.spl-stage{position:relative;width:200px;height:190px}
.spl-stage img{position:absolute;left:50%;bottom:8px;height:160px;width:auto;image-rendering:pixelated}
.spl-walk{animation:splWalk .95s cubic-bezier(.25,.7,.4,1) both,splGone .01s .95s forwards}
.spl-cheer{opacity:0;animation:splCheer .7s .95s var(--ease) forwards}
.spl-shadow{position:absolute;left:50%;bottom:0;width:112px;height:14px;margin-left:-56px;border-radius:50%;background:rgba(0,0,0,.28);opacity:0;animation:fadein .4s .55s reverse both}
.spl-coin{position:absolute;left:50%;top:-16px;width:42px;height:42px;margin-left:-21px;display:grid;place-items:center;border-radius:50%;font-size:22px;color:#7a5200;background:radial-gradient(circle at 35% 30%,#ffe98a,#f4bb25);box-shadow:0 0 0 2px #b98a10,0 0 18px rgba(244,187,37,.6);opacity:0;animation:splCoin .75s 1.05s var(--ease) forwards}
.spl-name{font-size:21px;font-weight:700;margin:0;opacity:0;animation:splName .45s 1.15s var(--ease) forwards}
@keyframes splWalk{0%{transform:translateX(calc(-50% - 62vw)) rotate(-3deg)}20%{transform:translateX(calc(-50% - 48vw)) translateY(-8px)}40%{transform:translateX(calc(-50% - 34vw)) rotate(3deg)}60%{transform:translateX(calc(-50% - 20vw)) translateY(-8px)}80%{transform:translateX(calc(-50% - 8vw)) rotate(-2deg)}100%{transform:translateX(-50%)}}
@keyframes splGone{to{opacity:0}}
@keyframes splCheer{0%{opacity:1;transform:translateX(-50%) translateY(0) scale(.92)}45%{opacity:1;transform:translateX(-50%) translateY(-26px) scale(1.04)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes splCoin{0%{opacity:0;transform:translateY(46px) scale(.4) rotateY(0)}60%{opacity:1;transform:translateY(-8px) scale(1.1) rotateY(360deg)}100%{opacity:1;transform:translateY(0) scale(1) rotateY(720deg)}}
@keyframes splName{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
:root:not([data-theme=light]){--bg:#0a0a0c;--surface:#17151a;--surface2:#201c22;--grid:#2e2a30;--axis:#494249;--pri:#ff4d42;--pri2:#ff9a2e;--on-pri:#fff;--card:rgba(23,20,24,.86);--side:rgba(10,10,12,.6);--side2:rgba(14,12,14,.94);--tip:#2a2228;--aur:.34;--hero:rgba(150,24,20,.55)}
:root[data-theme=light]{--pri:#d32f24;--pri2:#ef7a14;--hero:rgba(230,70,50,.2)}
.top h1,.head h2,.sheet h3,.hero .big{font-weight:800}
body::after{content:'';position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;box-shadow:inset 0 0 120px 30px rgba(255,20,20,.75)}
body.rage .app{animation:rage .55s cubic-bezier(.36,.07,.19,.97)}
body.rage::after{animation:rageFlash .6s ease-out}
@keyframes rage{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-7px,3px)}40%,60%{transform:translate(7px,-3px)}}
@keyframes rageFlash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
#splash{animation:splShake .4s .95s linear}
.spl-cheer{height:175px!important}
.spl-name{font-size:clamp(22px,6vw,34px);font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-align:center;padding:0 16px;background:linear-gradient(90deg,var(--pri),var(--pri2));-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes splCheer{0%{opacity:1;transform:translateX(-50%) translateY(-120px) scale(1.5)}55%{opacity:1;transform:translateX(-50%) translateY(0) scale(.92)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes splShake{15%,55%,95%{transform:translate(-9px,5px)}35%,75%{transform:translate(9px,-5px)}}