/* Version 2 look, loaded after styles.css. Solid surfaces instead of glass; the same tokens drive both themes. */
:root,:root:not([data-theme=light]){
  font-family:Kanit,"Noto Sans Thai","Leelawadee UI",system-ui,sans-serif;
  --bg:#0B0B0D;--surface:#17171B;--surface2:#1A1A1F;--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.2);
  --grid:#2C2C33;--axis:#4A4A52;--txt:#F5F3EE;--txt2:#D2CFD6;--mut:#A9A6AE;
  --pri:#FF4438;--pri2:#FF4438;--on-pri:#1A0503;--gold:#FFC83D;--key:#26262C;--ink:255,255,255;
  --s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;--s6:#9085e9;
  --good:#3CCB7F;--warn:#FF9A2E;--crit:#FF6A5E;
  --card:#17171B;--side:#111114;--side2:#121215;--tip:#26262C;--hero:transparent;--aur:0;
}
:root[data-theme=light]{
  color-scheme:light;
  --bg:#F6F4EF;--surface:#FFFFFF;--surface2:#FFFFFF;--line:rgba(20,20,24,.12);--line2:rgba(20,20,24,.24);
  --grid:#E4E1DA;--axis:#BDB9B0;--txt:#141416;--txt2:#44434A;--mut:#66646C;
  --pri:#D92D20;--pri2:#D92D20;--on-pri:#FFFFFF;--gold:#8A5F00;--key:#EFECE5;--ink:20,20,24;
  --s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;--s5:#e87ba4;--s6:#6250d6;
  --good:#0E7C43;--warn:#A85A00;--crit:#C4281C;
  --card:#FFFFFF;--side:#FFFFFF;--side2:#FFFFFF;--tip:#FFFFFF;--hero:transparent;--aur:0;
}
.aurora{display:none}
.card,.side,.bottom{backdrop-filter:none}
.card::before{display:none}
.card{border-color:transparent;border-radius:18px;padding:16px}
:root[data-theme=light] .card{border-color:var(--line)}
.btn.primary{background:var(--pri);box-shadow:none}
.btn.primary:hover{box-shadow:none;filter:brightness(1.06)}
.btn:disabled{opacity:1;background:var(--key);color:var(--mut);cursor:not-allowed}

.home-total{padding:6px 4px 2px}
.home-total .big{font-size:clamp(42px,12vw,56px);font-weight:800;line-height:1.1;letter-spacing:-.01em}
.day-card{display:flex;align-items:center;gap:10px;min-height:124px;background:var(--card)}
.day-card .big{font-size:38px;line-height:1.1;font-weight:800;color:var(--gold)}
.day-card .masc{flex:none;animation:bob 2.4s ease-in-out infinite}
.day-card .masc img{height:112px}
.day-card .bub{display:none}
.day-say{font-size:14px;margin-top:4px}
.next-bill{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;text-align:left}
.more summary{min-height:30px}
.back{margin-bottom:-2px}

@media(max-width:820px){
  .bottom{grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;padding:8px 8px calc(10px + env(safe-area-inset-bottom));background:var(--side2)}
  .bottom .nav{min-height:52px;font-size:12px;justify-content:center}
  .bottom .nav.on{color:var(--pri)}
  .nav-add{justify-self:center;width:60px;height:60px;display:grid;place-items:center;border-radius:21px;background:var(--pri);color:var(--on-pri);transition:transform .15s var(--ease)}
  .nav-add:active{transform:scale(.92)}
  .fab{display:none}
  #modal{place-items:end center;padding:0}
  #modal .sheet{max-width:100%;border-radius:28px 28px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom));animation:qaUp .32s cubic-bezier(.2,1,.3,1) both}
}
@media(min-width:821px){.nav-add{display:none}}
@keyframes qaUp{from{transform:translateY(100%)}}

.qa{gap:12px}
.qa-amt{margin:0;text-align:center;font-size:46px;line-height:1.15;font-weight:800}
.qa-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qa-keys button{height:56px;border-radius:14px;font-size:24px;font-weight:500;background:var(--key);transition:transform .12s var(--ease)}
.qa-keys button:active,.qa-cats button:active{transform:scale(.96)}
.qa-go{height:58px;font-size:18px;border-radius:16px}
.qa-more{min-height:48px;border-color:transparent;background:none;color:var(--txt2)}
.qa-hint{margin:0;text-align:center;font-size:14px;color:var(--txt2)}.qa-hint:empty{display:none}.qa-hint.over{color:var(--crit)}
.qa-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qa-cats button{height:72px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;font-size:17px;font-weight:500;background:var(--key);transition:transform .12s var(--ease)}

.fly{position:fixed;left:50%;bottom:44px;z-index:80;width:42px;height:42px;margin-left:-21px;display:grid;place-items:center;border-radius:50%;font-weight:800;color:#6B4700;background:#FFC83D;pointer-events:none;animation:fly .7s cubic-bezier(.3,.7,.3,1) both}
@keyframes fly{0%{opacity:1;transform:scale(.7)}80%{opacity:1}100%{opacity:0;transform:translate(-22vw,-74vh) scale(1.15)}}
#undo{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));z-index:60;width:min(358px,calc(100vw - 32px));box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px 6px 14px;border-radius:14px;font-size:14px;background:var(--tip);border:1px solid var(--line2);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:.2s var(--ease)}
#undo.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
#undo button{min-height:44px;padding:0 10px;color:var(--pri);font-weight:600}

/* opening: 1.2 seconds in total */
.spl-walk{animation-duration:.55s,.01s;animation-delay:0s,.55s}
.spl-cheer{animation-duration:.45s;animation-delay:.55s}
.spl-coin{animation-duration:.5s;animation-delay:.6s}
.spl-name{animation-duration:.3s;animation-delay:.6s;background:none;color:var(--txt);-webkit-text-fill-color:currentColor}
#splash{animation-delay:.55s}
.spl-shadow{animation-delay:.3s}
@media(prefers-reduced-motion:reduce){.fly{display:none}.day-card .masc{animation:none}}