/* Whole-app looks, picked in อื่นๆ > การแสดงผล. html[data-style] = aurora (default) | bento | midnight | clay | classic.
   Each style sets the tokens from baicha.css for light and dark, plus a few extras:
   --bg page background (may be a gradient), --sheet solid colour for sheets, --btn-bg/--btn-ink main buttons,
   --hero-* the big balance card, --b0..--b5 account card gradients, --numfont for big numbers.
   html[data-accent=style] = no accent chosen, so the style's own colours apply. */

/* ---------- shared pieces used by every style ---------- */
:root{--numfont:Anuphan,"Sukhumvit Set",system-ui,sans-serif;
  --b0:linear-gradient(135deg,#3C784B,#1D613B);--b1:linear-gradient(135deg,#3B719C,#22507A);--b2:linear-gradient(135deg,#A5612E,#7C431B);
  --b3:linear-gradient(135deg,#705D93,#4E3F70);--b4:linear-gradient(135deg,#107F7A,#0A5B57);--b5:linear-gradient(135deg,#90557D,#6A3A5B)}
.hero{color:var(--hero-ink,var(--ink))}
.hero .lbl,.hero .trio > div > span{color:var(--hero-muted,var(--muted))}
.hero .trio{border-top-color:var(--hero-line,var(--border))}
.hero .big,.bank b,.donut b,.detailamt,.amount{font-family:var(--numfont)}

/* quick actions */
.qacts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:2px 0 6px}
.qact{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;padding:6px 0;cursor:pointer;border-radius:16px;min-width:0}
.qact i{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-size:25px;background:var(--qa-bg,var(--raised));color:var(--qa-ink,var(--primary));
  box-shadow:var(--qa-shadow,none);border:var(--qa-border,0);transition:transform var(--dur-press) var(--ease-standard)}
.qact:active i{transform:scale(.92)}
.qact span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* account cards: a row of colourful cards you can swipe */
.banks{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 16px;padding:2px 16px 6px;scroll-snap-type:x mandatory;scroll-padding:0 16px}
.banks::-webkit-scrollbar{display:none}
.bank{flex:none;width:200px;min-height:120px;border-radius:22px;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;color:#fff;position:relative;overflow:hidden;scroll-snap-align:start;
  box-shadow:var(--bank-shadow,0 8px 18px rgba(0,0,0,.14))}
.bank::after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-36px;top:-46px;background:rgba(255,255,255,.14);pointer-events:none}
.bank .bn{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}
.bank small{display:block;font-size:12px;opacity:.85;position:relative;z-index:1}
.bank b{font-size:22px;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;position:relative;z-index:1}
.bank .neg{color:#fff}
.bank .flag{position:absolute;right:12px;bottom:12px;font-size:11px;font-weight:700;background:rgba(0,0,0,.28);border-radius:999px;padding:2px 8px;z-index:1}
.bank.empty,.bank.empty:nth-child(n){background:var(--raised);color:var(--muted);box-shadow:none;justify-content:center;align-items:center}
.bank.empty::after{display:none}
.bank:nth-child(6n+1){background:var(--b0)}.bank:nth-child(6n+2){background:var(--b1)}.bank:nth-child(6n+3){background:var(--b2)}
.bank:nth-child(6n+4){background:var(--b3)}.bank:nth-child(6n+5){background:var(--b4)}.bank:nth-child(6n+6){background:var(--b5)}
@media (min-width:720px){.banks{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));overflow:visible;margin:0 0 16px;padding:0}.bank{width:auto}}

/* spending donut */
.donutwrap{display:flex;align-items:center;gap:16px}
.donut{width:128px;height:128px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative}
.donut .ring{position:absolute;inset:0;border-radius:50%;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 20px),#000 calc(100% - 19px));mask:radial-gradient(farthest-side,transparent calc(100% - 20px),#000 calc(100% - 19px))}
.donut span{position:relative;text-align:center;font-size:12px;line-height:1.25;color:var(--muted)}
.donut span b{display:block;font-size:17px;color:var(--ink)}
.legend{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.legend div{display:flex;align-items:center;gap:8px;min-width:0}
.legend i{width:10px;height:10px;border-radius:3px;flex:none}
.legend .ln{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legend em{font-style:normal;font-weight:700;white-space:nowrap}
@media (max-width:360px){.donutwrap{flex-direction:column;align-items:stretch}.donut{margin:0 auto}}

/* style picker in อื่นๆ */
.stylepick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.stylepick button{border:2px solid transparent;background:var(--sunken);color:var(--ink);font:inherit;font-size:13px;border-radius:16px;padding:6px 6px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:center}
.stylepick button.on{border-color:var(--primary);font-weight:700}
.stylepick .pv{height:58px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:22px}
.stylepick small{display:block;font-size:11px;color:var(--muted);font-weight:400;line-height:1.3}

/* ---------- glass-like cards shared by aurora ---------- */
[data-style=aurora] .card,[data-style=aurora] .rcard,[data-style=aurora] .fitem{border:1px solid var(--card-line)}
[data-style] .hero.rowtap:active{filter:brightness(.95)}
html:not([data-style=classic])[data-accent=style] .btn:not(.tonal):active{background:var(--btn-bg);filter:brightness(.92)}
html:not([data-style=classic]){--numfont:Prompt,Anuphan,system-ui,sans-serif}

/* ================= A · Aurora ================= */
[data-style=aurora][data-theme=dark]{
  --bg:radial-gradient(circle at 12% 6%,rgba(255,106,193,.38),transparent 40%),radial-gradient(circle at 92% 28%,rgba(64,224,208,.30),transparent 42%),radial-gradient(circle at 35% 95%,rgba(120,119,255,.42),transparent 46%),linear-gradient(160deg,#1B1446 0%,#3A1C71 38%,#0E5A73 78%,#0B3B4A 100%);
  --surface:#1B1446;--sheet:#211A4F;--raised:rgba(255,255,255,.10);--sunken:rgba(8,4,32,.30);--ink:#F4F1FF;--muted:rgba(236,232,255,.72);--border:rgba(255,255,255,.13);
  --income:#8CF5C6;--deficit:#FFB3C7;--caution:#FFD48A;--card-line:rgba(255,255,255,.16);
  --glass-rgb:38,26,92;--edge-hi:rgba(255,255,255,.18);--edge-lo:rgba(0,0,0,.30);--shadow:rgba(8,4,30,.45);
  --b0:linear-gradient(135deg,#FF6AC1,#7877FF);--b1:linear-gradient(135deg,#2FD3C4,#3A7BD5);--b2:linear-gradient(135deg,#F7971E,#F2C200);
  --b3:linear-gradient(135deg,#8E2DE2,#4A00E0);--b4:linear-gradient(135deg,#00B09B,#5ABF3C);--b5:linear-gradient(135deg,#FF5F6D,#C0398F);
  --hero-ink:#fff;--hero-muted:rgba(255,255,255,.78);--hero-line:rgba(255,255,255,.2);--hero-neg:#FFB3C7;
  --qa-bg:rgba(255,255,255,.14);--qa-border:1px solid rgba(255,255,255,.18);--qa-ink:#fff;--bank-shadow:0 10px 24px rgba(8,4,30,.4)}
[data-style=aurora][data-theme=light]{
  --bg:radial-gradient(circle at 10% 4%,rgba(255,106,193,.30),transparent 42%),radial-gradient(circle at 94% 30%,rgba(64,224,208,.30),transparent 45%),radial-gradient(circle at 30% 96%,rgba(120,119,255,.30),transparent 48%),linear-gradient(160deg,#F3EEFF,#EAF4FF 55%,#E6FBF5);
  --surface:#F3EEFF;--sheet:#F7F4FF;--raised:rgba(255,255,255,.68);--sunken:rgba(90,70,170,.08);--ink:#1E1940;--muted:#5A5577;--border:rgba(70,50,140,.12);
  --income:#13744A;--deficit:#B4234F;--caution:#8A5A00;--card-line:rgba(255,255,255,.85);
  --glass-rgb:250,248,255;--edge-hi:rgba(255,255,255,.7);--edge-lo:rgba(70,50,140,.10);--shadow:rgba(70,50,140,.16);
  --b0:linear-gradient(135deg,#E0479E,#6A5AF0);--b1:linear-gradient(135deg,#14A89B,#2F6FD0);--b2:linear-gradient(135deg,#E8850F,#D9A400);
  --b3:linear-gradient(135deg,#7B2FD0,#4220C9);--b4:linear-gradient(135deg,#00957F,#4AA531);--b5:linear-gradient(135deg,#E8455A,#A82F80);
  --hero-ink:#fff;--hero-muted:rgba(255,255,255,.85);--hero-line:rgba(255,255,255,.3);--hero-neg:#FFE3EC;
  --qa-bg:rgba(255,255,255,.75);--qa-border:1px solid rgba(255,255,255,.9);--qa-shadow:0 6px 16px rgba(70,50,140,.12);--bank-shadow:0 10px 22px rgba(70,50,140,.22)}
[data-style=aurora][data-theme=dark][data-accent=style]{--primary:#8FF0DF;--primary-pressed:#74DCCB;--on-primary:#0B2A33;--btn-bg:linear-gradient(135deg,#E0479E,#6A5AF0);--btn-ink:#fff}
[data-style=aurora][data-theme=light][data-accent=style]{--primary:#6236D9;--primary-pressed:#4F27BD;--on-primary:#fff;--btn-bg:linear-gradient(135deg,#D63A92,#5A49E0);--btn-ink:#fff}
[data-style=aurora][data-theme=dark] .hero{background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.06))}
[data-style=aurora][data-theme=light] .hero{background:linear-gradient(135deg,#6A4BFF,#C64BCF 55%,#FF7AA8);border-color:transparent;box-shadow:0 14px 30px rgba(120,70,200,.30)}
[data-style=aurora] .hero::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-60px;top:-70px;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%);pointer-events:none}
[data-style] .hero{position:relative;overflow:hidden}
[data-style=aurora] .lens{background:rgba(255,255,255,.16)}
[data-style=aurora][data-theme=light] .lens{background:rgba(255,255,255,.9)}

/* ================= B · Bento Pop ================= */
[data-style=bento][data-theme=light]{
  --bg:#F6F4EF;--surface:#F6F4EF;--sheet:#F6F4EF;--raised:#FFFFFF;--sunken:#ECE8E0;--ink:#1E1B16;--muted:#686256;--border:#E6E1D7;
  --income:#1F7A4D;--deficit:#C0392B;--caution:#8A5A00;--glass-rgb:255,255,255;--edge-lo:rgba(30,27,22,.08);--shadow:rgba(30,27,22,.12);
  --b0:linear-gradient(135deg,#2BB673,#159957);--b1:linear-gradient(135deg,#FF7A59,#FF4E50);--b2:linear-gradient(135deg,#4F7CFF,#2E4FD8);
  --b3:linear-gradient(135deg,#FFB800,#FF8A00);--b4:linear-gradient(135deg,#A65BF2,#7B3FD9);--b5:linear-gradient(135deg,#17B4C7,#0E8BA8);
  --hero-bg:#1E1B16;--t1:#C8F2DC;--t2:#FFD9CC;--t3:#DCE3FF;--t4:#FFF0B3;--t-ink:#1E1B16}
[data-style=bento][data-theme=dark]{
  --bg:#15130F;--surface:#15130F;--sheet:#1B1914;--raised:#221F19;--sunken:#2C2820;--ink:#F3EFE6;--muted:#ABA392;--border:#34302A;
  --income:#7EE0A6;--deficit:#FF9A85;--caution:#F2C94C;--glass-rgb:30,27,22;--edge-lo:rgba(0,0,0,.4);--shadow:rgba(0,0,0,.4);
  --b0:linear-gradient(135deg,#1F9E62,#127A49);--b1:linear-gradient(135deg,#E8603F,#D23A3C);--b2:linear-gradient(135deg,#3E68E8,#2440B8);
  --b3:linear-gradient(135deg,#E0A000,#E07800);--b4:linear-gradient(135deg,#8E48DA,#6830BF);--b5:linear-gradient(135deg,#1298AA,#0B7590);
  --hero-bg:#2A2620;--t1:#1F4A36;--t2:#5A2E22;--t3:#26305E;--t4:#54461A;--t-ink:#F3EFE6}
[data-style=bento][data-theme=light][data-accent=style]{--primary:#C2410C;--primary-pressed:#A3360A;--on-primary:#fff;--btn-bg:#FFD43B;--btn-ink:#1E1B16}
[data-style=bento][data-theme=dark][data-accent=style]{--primary:#FFB088;--primary-pressed:#F29A70;--on-primary:#2A1206;--btn-bg:#FFD43B;--btn-ink:#1E1B16}
[data-style=bento]{--hero-ink:#fff;--hero-muted:rgba(255,255,255,.72);--hero-line:rgba(255,255,255,.16);--hero-neg:#FF8A65}
[data-style=bento] .card{border-radius:24px}
[data-style=bento] .hero{background:var(--hero-bg)}
[data-style=bento] .hero .big{color:#FFD43B}
[data-style=bento] .hero .big.neg{color:var(--hero-neg)}
[data-style=bento] .hero::after{content:"";position:absolute;right:-34px;top:-44px;width:120px;height:120px;border-radius:34px;background:#FFD43B;transform:rotate(18deg);pointer-events:none}
[data-style=bento] .hero > *{position:relative;z-index:1}
[data-style=bento] .hero .trio > div:last-child{padding-right:6px}
/* quick actions become a 2x2 grid of coloured tiles */
[data-style=bento] .qacts{grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 16px}
[data-style=bento] .qact{flex-direction:row;justify-content:flex-start;gap:10px;padding:14px;border-radius:22px;min-height:64px;font-size:15px;font-weight:700;color:var(--t-ink)}
[data-style=bento] .qact i{width:38px;height:38px;border-radius:12px;font-size:21px;background:rgba(255,255,255,.55);color:var(--t-ink)}
[data-style=bento][data-theme=dark] .qact i{background:rgba(0,0,0,.25)}
[data-style=bento] .qact:nth-child(1){background:var(--t1)}[data-style=bento] .qact:nth-child(2){background:var(--t2)}
[data-style=bento] .qact:nth-child(3){background:var(--t3)}[data-style=bento] .qact:nth-child(4){background:var(--t4)}
[data-style=bento] .tabbar{background:#1E1B16;box-shadow:0 10px 24px rgba(0,0,0,.25)}
[data-style=bento] .tab{color:rgba(255,255,255,.6)}
[data-style=bento][data-accent=style] .tab.on{color:#FFD43B}
[data-style=bento] .lens{background:rgba(255,255,255,.12);box-shadow:none}

/* ================= C · Midnight Gold ================= */
[data-style=midnight][data-theme=dark]{
  --bg:radial-gradient(circle at 85% -8%,rgba(255,200,87,.12),transparent 42%),radial-gradient(circle at 0% 100%,rgba(90,100,170,.14),transparent 45%),#07080C;
  --surface:#07080C;--sheet:#0E1018;--raised:#111421;--sunken:#0A0C14;--ink:#EDEEF2;--muted:#9196A8;--border:#1E2235;
  --income:#3DF0A0;--deficit:#FF6B81;--caution:#FFC857;--card-line:#1E2235;
  --glass-rgb:17,20,33;--edge-hi:rgba(255,255,255,.08);--edge-lo:rgba(0,0,0,.5);--shadow:rgba(0,0,0,.5);
  --qa-bg:#141725;--qa-border:1px solid #262B40}
[data-style=midnight][data-theme=light]{
  --bg:radial-gradient(circle at 90% -10%,rgba(255,200,87,.22),transparent 40%),#F7F3EA;
  --surface:#F7F3EA;--sheet:#FBF8F1;--raised:#FFFFFF;--sunken:#EFE9DC;--ink:#1A1712;--muted:#6B6352;--border:#E6DECC;
  --income:#157A4A;--deficit:#B3263E;--caution:#8A5A00;--card-line:#E9E1CF;
  --glass-rgb:255,252,245;--edge-lo:rgba(60,45,10,.10);--shadow:rgba(60,45,10,.14);
  --qa-bg:#14161F;--qa-border:1px solid #2A2E40}
[data-style=midnight]{--b0:linear-gradient(135deg,#3A3F5C,#141725);--b1:linear-gradient(135deg,#6B5530,#2A2215);--b2:linear-gradient(135deg,#1E4A5E,#0E1C26);
  --b3:linear-gradient(135deg,#4A3A70,#1C1530);--b4:linear-gradient(135deg,#2E5A44,#10231A);--b5:linear-gradient(135deg,#6A2E3C,#26111A);
  --hero-ink:#EDEEF2;--hero-muted:rgba(237,238,242,.68);--hero-line:rgba(255,255,255,.12);--hero-neg:#FF8A9C;--bank-shadow:0 10px 24px rgba(0,0,0,.35)}
[data-style=midnight][data-theme=dark][data-accent=style]{--primary:#FFC857;--primary-pressed:#F0B53E;--on-primary:#1A1200;--btn-bg:linear-gradient(135deg,#FFE29A,#FFB547);--btn-ink:#1A1200;--qa-ink:#FFC857}
[data-style=midnight][data-theme=light][data-accent=style]{--primary:#8A6100;--primary-pressed:#704F00;--on-primary:#fff;--btn-bg:linear-gradient(135deg,#FFE29A,#FFB547);--btn-ink:#1A1200;--qa-ink:#FFC857}
[data-style=midnight] .card,[data-style=midnight] .rcard{border:1px solid var(--card-line)}
[data-style=midnight] .hero{background:linear-gradient(120deg,#2B2F45 0%,#141725 55%,#0B0D16 100%);border-color:#2B3047;box-shadow:0 14px 30px rgba(0,0,0,.35)}
[data-style=midnight] .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,214,102,.16) 50%,transparent 60%);pointer-events:none}
[data-style=midnight] .hero .big:not(.neg) .m,[data-style=midnight] .hero .big:not(.neg) .cur{background:linear-gradient(90deg,#FFE29A,#FFB547);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-style=midnight] .hero .big:not(.neg) .roll .col span{background:linear-gradient(180deg,#FFE29A,#FFB547);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-style=midnight] .tabbar{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px #262B40,0 10px 24px rgba(0,0,0,.35)}
[data-style=midnight][data-theme=light] .tabbar{background:rgba(20,22,31,.92)}
[data-style=midnight][data-theme=light] .tab{color:rgba(237,238,242,.62)}
[data-style=midnight][data-theme=light][data-accent=style] .tab.on{color:#FFC857}
[data-style=midnight][data-theme=light] .lens{background:rgba(255,255,255,.1);box-shadow:none}

/* ================= D · Soft Clay ================= */
[data-style=clay][data-theme=light]{
  --bg:#EEF1FB;--surface:#EEF1FB;--sheet:#EEF1FB;--raised:#EEF1FB;--sunken:#E1E6F4;--ink:#24283B;--muted:#5C6480;--border:#D6DCEE;
  --income:#13824F;--deficit:#C2334D;--caution:#8A5A00;--glass-rgb:238,241,251;--edge-hi:rgba(255,255,255,.9);--edge-lo:rgba(80,90,150,.10);--shadow:rgba(80,90,150,.18);
  --clay:8px 8px 18px #CDD3EA,-8px -8px 18px #FFFFFF;--clay-s:5px 5px 12px #CDD3EA,-5px -5px 12px #FFFFFF;
  --b0:linear-gradient(135deg,#7C9CFF,#A685FF);--b1:linear-gradient(135deg,#4CC9A4,#30A5D8);--b2:linear-gradient(135deg,#FF9A8B,#F2607E);
  --b3:linear-gradient(135deg,#F8C46A,#F09A4E);--b4:linear-gradient(135deg,#8FD16A,#3FB27F);--b5:linear-gradient(135deg,#C18CF2,#8E6CF0);--bank-shadow:0 12px 22px rgba(110,120,220,.28)}
[data-style=clay][data-theme=dark]{
  --bg:#1F2333;--surface:#1F2333;--sheet:#232838;--raised:#232838;--sunken:#1A1E2C;--ink:#E6E9F5;--muted:#A0A7C0;--border:#30364B;
  --income:#7FE0B0;--deficit:#FF9AAE;--caution:#F2C94C;--glass-rgb:35,40,56;--edge-hi:rgba(255,255,255,.06);--edge-lo:rgba(0,0,0,.35);--shadow:rgba(0,0,0,.4);
  --clay:8px 8px 18px #151824,-8px -8px 18px #2B3146;--clay-s:5px 5px 12px #151824,-5px -5px 12px #2B3146;
  --b0:linear-gradient(135deg,#5F7CE8,#8A68E8);--b1:linear-gradient(135deg,#2FA886,#2187BA);--b2:linear-gradient(135deg,#E07A6C,#D2486A);
  --b3:linear-gradient(135deg,#D9A44C,#D27E36);--b4:linear-gradient(135deg,#6FB24C,#2D9265);--b5:linear-gradient(135deg,#A26FD8,#7350D8);--bank-shadow:0 10px 20px rgba(0,0,0,.35)}
[data-style=clay]{--hero-ink:#fff;--hero-muted:rgba(255,255,255,.85);--hero-line:rgba(255,255,255,.28);--hero-neg:#FFE0E6;--qa-shadow:var(--clay-s)}
[data-style=clay][data-theme=light][data-accent=style]{--primary:#4F5FE0;--primary-pressed:#3F4FCC;--on-primary:#fff;--btn-bg:linear-gradient(140deg,#5B78F0,#8C68F0);--btn-ink:#fff;--qa-ink:#6D7CFF}
[data-style=clay][data-theme=dark][data-accent=style]{--primary:#A9B6FF;--primary-pressed:#94A3F7;--on-primary:#121633;--btn-bg:linear-gradient(140deg,#5B78F0,#8C68F0);--btn-ink:#fff;--qa-ink:#A9B6FF}
[data-style=clay] .card,[data-style=clay] .rcard{box-shadow:var(--clay)}
[data-style=clay] .card{border-radius:24px}
[data-style=clay] .hero{background:linear-gradient(140deg,#7C9CFF,#A685FF);box-shadow:0 16px 30px rgba(124,120,255,.35)}
[data-style=clay][data-theme=dark] .hero{background:linear-gradient(140deg,#5F7CE8,#8A68E8);box-shadow:0 14px 28px rgba(0,0,0,.4)}
[data-style=clay] .hero::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-50px;bottom:-70px;background:rgba(255,255,255,.16);pointer-events:none}
[data-style=clay] .tabbar{background:var(--raised);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--clay)}
[data-style=clay] .lens{background:var(--sunken);box-shadow:inset 3px 3px 6px var(--edge-lo),inset -3px -3px 6px var(--edge-hi)}
[data-style=clay] .key{box-shadow:var(--clay-s)}
[data-style=clay] .rec{box-shadow:0 8px 18px rgba(110,120,240,.4)}

@media (prefers-reduced-motion:reduce){.qact i{transition:none}}

/* อื่นๆ: grouped icon tiles instead of one long list */
h2.sect.small{font-size:16px;color:var(--muted);margin:18px 4px 8px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.tile{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;border-radius:18px;background:var(--raised);color:var(--ink);font:inherit;font-size:13px;padding:12px 4px;cursor:pointer;min-width:0}
[data-style=aurora] .tile,[data-style=midnight] .tile{border:1px solid var(--card-line)}
[data-style=clay] .tile{box-shadow:var(--clay-s)}
.tile .cat{width:42px;height:42px;font-size:22px;border-radius:14px}
.tile span:last-child{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .chip.more{color:var(--primary);background:transparent;box-shadow:inset 0 0 0 1px var(--border)}

/* ตรวจสลิป */
.slipdrop{text-align:center;transition:box-shadow var(--dur-fast) var(--ease-standard)}
.slipdrop p{margin:0 0 12px}
.slipdrop.over{box-shadow:0 0 0 2px var(--primary)}
.slipdrop .btn{display:flex;align-items:center;justify-content:center;gap:8px}
.slipsum{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 2px}
.slipsum .muted{font-size:13px;display:inline-flex;align-items:center;gap:6px}
.row.slip .t b{font-weight:700}
.row.slip .t b small{font-weight:400;font-size:12px}
.row.slip .t > span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slipthumb{width:44px;height:58px;border-radius:10px;overflow:hidden;border:0;padding:0;background:var(--sunken);flex:none;cursor:zoom-in}
.slipthumb img{width:100%;height:100%;object-fit:cover;display:block}
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.85);display:grid;place-items:center;padding:16px;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;border-radius:12px}
.lightbox .iconbtn{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:12px;color:#fff;background:rgba(255,255,255,.15)}
.hintline{font-size:14px;margin:-6px 4px 12px}
.strike{text-decoration:line-through}

/* บัญชี / หมวด / คน: own page */
.ehead{display:flex;align-items:center;gap:14px;margin:6px 0 4px}
.ehead h1.large{margin:0}
.ehead p{margin:2px 0 0;font-size:14px}
.ehead a{color:var(--primary)}
.eacts{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px;margin:4px 0 6px}
.eacts .btn{height:44px;font-size:15px;padding:0 8px;display:flex;align-items:center;justify-content:center;gap:6px}
.bank.tap{cursor:pointer}
.legend .rowtap{border-radius:8px;margin:-2px -4px;padding:2px 4px}
.ehead a{cursor:pointer;text-decoration:underline}

.slipcard{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:12px 0 0}
.slipcard .t b{display:block;font-weight:700}
.slipcard .t span{font-size:13px;color:var(--muted)}
.slipcard .btn{flex:none;display:inline-flex;align-items:center}

/* ประวัติยอด */
.elinks{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 12px}
.proof .prow2{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--border)}
.proof .prow2:first-of-type{border-top:0}
.proof .prow2.total{font-weight:700;border-top:2px solid var(--ink)}
.proof .small{font-size:13px;margin:8px 0 0;display:flex;align-items:center;gap:6px}
.proof .ok{color:var(--income)}
.amtcol .sub{font-size:12px;color:var(--muted)}

/* 3D emoji icons (Fluent Emoji) on a soft tint of the item colour */
.cat.emoc{background:color-mix(in srgb,var(--c,var(--cat-other)) 18%,var(--raised-solid,#fff));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,var(--cat-other)) 22%,transparent)}
[data-theme=dark] .cat.emoc{background:color-mix(in srgb,var(--c,var(--cat-other)) 30%,#151515)}
.cat.emoc .emo{width:72%;height:72%;object-fit:contain;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.tile .cat.emoc .emo{width:78%;height:78%}
.qact .emo{width:30px;height:30px;object-fit:contain}

/* ================= E · น่ารัก (Duolingo-like): chunky, bright, mascot, streaks ================= */
[data-style=duo][data-theme=light]{
  --bg:#F0FBFF;--surface:#F0FBFF;--sheet:#FFFFFF;--raised:#FFFFFF;--raised-solid:#FFFFFF;--sunken:#E5F5FB;--ink:#22313F;--muted:#5A7283;--border:#D5ECF5;--chunk:#D5ECF5;
  --income:#3B8A00;--deficit:#D93B3B;--caution:#B86E00;--glass-rgb:255,255,255;--edge-lo:rgba(34,49,63,.08);--shadow:rgba(34,49,63,.12)}
[data-style=duo][data-theme=dark]{
  --bg:#0F1C24;--surface:#0F1C24;--sheet:#172833;--raised:#172833;--raised-solid:#172833;--sunken:#10202A;--ink:#E8F4FA;--muted:#9DB6C5;--border:#23394A;--chunk:#0A141A;
  --income:#89E219;--deficit:#FF7B7B;--caution:#FFC800;--glass-rgb:23,40,51;--edge-lo:rgba(0,0,0,.4);--shadow:rgba(0,0,0,.4)}
[data-style=duo]{--numfont:Prompt,Anuphan,system-ui,sans-serif;
  --b0:linear-gradient(135deg,#58CC02,#3E9A00);--b1:linear-gradient(135deg,#1CB0F6,#1287C4);--b2:linear-gradient(135deg,#FF9600,#E57A00);
  --b3:linear-gradient(135deg,#CE82FF,#A35CE0);--b4:linear-gradient(135deg,#FF4B4B,#D93636);--b5:linear-gradient(135deg,#E5A800,#C98F00);
  --hero-ink:#fff;--hero-muted:rgba(255,255,255,.88);--hero-line:rgba(255,255,255,.3);--hero-neg:#FFE1E1;--bank-shadow:0 5px 0 rgba(0,0,0,.15)}
[data-style=duo][data-theme=light][data-accent=style]{--primary:#0F7FB5;--primary-pressed:#0B6A98;--on-primary:#fff;--btn-bg:#43A000;--btn-ink:#fff}
[data-style=duo][data-theme=dark][data-accent=style]{--primary:#49C0F8;--primary-pressed:#2BAEEB;--on-primary:#0A2230;--btn-bg:#58CC02;--btn-ink:#0F1C24}
[data-style=duo] h1.large,[data-style=duo] h2.sect,[data-style=duo] .duo-bubble b{font-family:Mitr,Anuphan,sans-serif;font-weight:600}
[data-style=duo] .card,[data-style=duo] .rcard,[data-style=duo] .tile{border:2px solid var(--border);box-shadow:0 4px 0 var(--chunk)}
[data-style=duo] .card{border-radius:22px}
[data-style=duo] .hero{background:#1CB0F6;border-color:#1899D6;box-shadow:0 5px 0 #1287C4}
[data-style=duo] .btn:not(.tonal){box-shadow:0 4px 0 #2F7300;transition:transform var(--dur-press),box-shadow var(--dur-press)}
[data-style=duo][data-theme=dark] .btn:not(.tonal){box-shadow:0 4px 0 #3B8A00}
[data-style=duo] .btn:not(.tonal):active{transform:translateY(4px);box-shadow:0 0 0 transparent}
[data-style=duo] .rec{box-shadow:0 4px 0 #2F7300}
[data-style=duo] .qact i{background:var(--raised);border:2px solid var(--border);box-shadow:0 4px 0 var(--chunk);border-radius:18px}
[data-style=duo] .qact:active i{transform:translateY(3px);box-shadow:0 1px 0 var(--chunk)}
[data-style=duo] .tabbar{background:var(--raised);border-top:2px solid var(--border);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
[data-style=duo] .lens{background:var(--sunken);box-shadow:inset 0 0 0 2px var(--border)}
[data-style=duo] .key{border:2px solid var(--border);box-shadow:0 3px 0 var(--chunk)}
[data-style=duo] .key:active{transform:translateY(3px);box-shadow:none}
[data-style=duo] .chip.sel{box-shadow:0 3px 0 rgba(0,0,0,.18)}
/* mascot, streak tiles, goal jars: only in this style */
html:not([data-style=duo]) .duo-only{display:none!important}
.duo-hi{display:flex;align-items:center;gap:10px;margin:4px 0 12px}
.duo-mascot{width:58px;height:58px;flex:none;animation:duoBob 3s ease-in-out infinite}
.duo-mascot img{width:100%;height:100%}
@keyframes duoBob{50%{transform:translateY(-4px) rotate(-4deg)}}
.duo-bubble{position:relative;background:var(--raised);border:2px solid var(--border);border-radius:18px;padding:8px 12px;font-size:14px;line-height:1.4;box-shadow:0 3px 0 var(--chunk)}
.duo-bubble::before{content:"";position:absolute;left:-8px;top:18px;width:12px;height:12px;background:var(--raised);border-left:2px solid var(--border);border-bottom:2px solid var(--border);transform:rotate(45deg)}
.duo-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 4px}
.duo-stat{background:var(--raised);border:2px solid var(--border);border-radius:18px;box-shadow:0 4px 0 var(--chunk);padding:8px 6px;text-align:center;font-size:12px;color:var(--muted);cursor:pointer}
.duo-stat img{width:28px;height:28px;display:block;margin:0 auto 2px}
.duo-stat b{display:block;font-family:var(--numfont);font-size:20px;color:var(--ink);line-height:1.2}
.duo-goals{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.duo-goal{display:flex;align-items:center;gap:12px;background:var(--raised);border:2px solid var(--border);border-radius:20px;box-shadow:0 4px 0 var(--chunk);padding:10px 12px;cursor:pointer}
.duo-jar{width:44px;height:54px;flex:none;border:3px solid #58CC02;border-radius:10px 10px 14px 14px;position:relative;overflow:hidden;background:var(--sunken)}
.duo-jar i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(#89E219,#58CC02)}
.duo-goal .t{flex:1;min-width:0}.duo-goal b{display:block}.duo-goal small{color:var(--muted)}
.duo-bar{height:12px;border-radius:9px;background:var(--sunken);margin-top:6px;overflow:hidden}.duo-bar i{display:block;height:100%;border-radius:9px;background:#58CC02}
.duo-say{display:flex;align-items:center;gap:8px;margin:2px 0 8px;font-size:13px}
.duo-say img{width:30px;height:30px}
.duo-say span{background:var(--sunken);border-radius:14px;padding:5px 10px}
@media (prefers-reduced-motion:reduce){.duo-mascot{animation:none}}

[data-style=duo] #slipCard{display:none}

/* ตั้งค่า > AI: usage meter */
.aimeter .aim-top{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}
.aim-bar{height:14px;border-radius:999px;background:var(--sunken);overflow:hidden;margin:8px 0 6px}
.aim-bar i{display:block;height:100%;border-radius:999px;background:var(--income);transition:width var(--dur-tab) var(--ease-standard)}
.aim-bar.caution i{background:var(--caution)}.aim-bar.over i{background:var(--deficit)}
.aim-sub{font-size:13px;color:var(--muted)}
.aim-warn{font-size:13px;color:var(--deficit);margin:6px 0 0}
.aim-list{margin-top:10px;border-top:1px solid var(--border);padding-top:6px;font-size:14px}
.aim-list div{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.aim-list div span:last-child{color:var(--muted);font-size:13px;text-align:right}
.sec-hero{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.sec-hero .emo{width:44px;height:44px;flex:none}
.sec-hero p{margin:4px 0 0;font-size:14px}
.steps ol{margin:6px 0 8px;padding-left:22px;line-height:1.7}
.steps p{margin:4px 0}