:root{
  --bg:#1c0609; --bg-2:#0f0407;
  --maroon:#4a121b; --maroon-2:#3a0e16; --maroon-3:#5c1a26;
  --gold:#e8c66a; --gold-2:#d4af37; --gold-deep:#b8912f; --gold-lite:#f6e3a8;
  --line:rgba(232,198,106,.24); --line-soft:rgba(232,198,106,.10);
  --panel:rgba(255,255,255,.04);
  --text:#f5ece1; --muted:#c9b0a4; --muted-2:#9d8177;
  --ok:#54d8a2; --danger:#ff8a7a;
  --shadow:0 22px 60px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  --font:'Anuphan','Noto Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;
  letter-spacing:.1px;
  background:
    radial-gradient(130% 65% at 50% -12%, rgba(232,198,106,.16), transparent 55%),
    radial-gradient(80% 45% at 85% 8%, rgba(232,198,106,.08), transparent 60%),
    radial-gradient(95% 55% at 50% 112%, rgba(120,30,45,.55), transparent 62%),
    linear-gradient(170deg, #2c0b12 0%, var(--bg) 46%, var(--bg-2) 100%);
  background-attachment:fixed;
}
/* film grain for material richness */
body::after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;inset:0;pointer-events:none;z-index:1;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.serif{font-family:'Playfair Display',Georgia,serif;font-variant-numeric:tabular-nums;font-feature-settings:"lnum" 1}
.wrap{max-width:460px;margin:0 auto;position:relative;z-index:2;
  padding:calc(18px + env(safe-area-inset-top)) 18px calc(46px + env(safe-area-inset-bottom))}

/* ---------- reveal on load ---------- */
.reveal{opacity:0;transform:translateY(14px);filter:blur(2px)}
.reveal.show{opacity:1;transform:none;filter:none;transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1), filter .7s ease}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:14px;justify-content:center;padding:22px 0 16px;text-align:center}
.brand .mark{width:52px;height:52px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:16px;background:
    radial-gradient(120% 120% at 30% 20%, rgba(246,227,168,.35), transparent 60%),
    linear-gradient(150deg,#48121c,#1c0609);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(246,227,168,.35), inset 0 -8px 16px rgba(0,0,0,.4), var(--shadow);position:relative;overflow:hidden}
.brand .mark svg{width:28px;height:28px}
.brand .mark img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.brand{max-width:100%}
.brand>div{min-width:0}
.brand h1{font-family:'Trirong',var(--font);font-size:20px;margin:0;font-weight:600;letter-spacing:.1px;line-height:1.25;
  background:linear-gradient(180deg,#fff4d6,var(--gold-2) 75%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 14px rgba(232,198,106,.12)}
.brand small{display:block;color:var(--muted);font-weight:400;font-size:12px;margin-top:3px;letter-spacing:.4px}

/* ---------- cards ---------- */
.card{position:relative;background:var(--panel);border:1px solid var(--line-soft);border-radius:24px;
  padding:22px;margin-bottom:16px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.card.hero{overflow:hidden;background:
    radial-gradient(130% 90% at 50% -25%, rgba(232,198,106,.13), transparent 62%),
    linear-gradient(160deg, rgba(97,28,41,.6), rgba(24,6,9,.7));
  border:1px solid var(--line)}
.card::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;border-radius:24px;padding:1px;pointer-events:none;
  background:linear-gradient(150deg, rgba(246,227,168,.45), rgba(232,198,106,.05) 35%, transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.7}
/* premium light-sweep on hero */
.card.hero::after{content:"";position:absolute;top:-20%;left:-70%;width:45%;height:140%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,246,214,.13),transparent);transform:skewX(-16deg);
  animation:sheen 7s ease-in-out infinite 1.5s}
@keyframes sheen{0%,72%,100%{left:-70%}88%{left:130%}}

/* ---------- forms ---------- */
label{display:block;font-size:11px;color:var(--muted);margin:15px 0 7px;font-weight:600;
  letter-spacing:1.3px;text-transform:uppercase}
input,select{width:100%;padding:15px 16px;border:1px solid rgba(232,198,106,.2);border-radius:14px;font-size:16px;
  background:rgba(0,0,0,.3);color:var(--text);font-family:inherit;outline:none;transition:border .15s,box-shadow .15s}
input::placeholder{color:#8a6f66}
input:focus,select:focus{border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(232,198,106,.13)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e8c66a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.row{display:flex;gap:11px}.row>*{flex:1}

/* ---------- buttons ---------- */
.btn{position:relative;width:100%;padding:16px;border:none;border-radius:15px;font-size:16px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:transform .08s,filter .15s,box-shadow .2s;margin-top:16px;letter-spacing:.3px;overflow:hidden}
.btn:active{transform:scale(.985)}
.btn-gold{color:#3a1206;font-weight:700;
  background:linear-gradient(115deg,#f6e3a8,#ecce78 28%,#d4af37 50%,#ecce78 72%,#f6e3a8);
  background-size:230% 100%;animation:goldshift 6s linear infinite;
  box-shadow:0 10px 26px rgba(184,145,47,.5), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 8px rgba(120,80,10,.25)}
@keyframes goldshift{0%{background-position:0 0}100%{background-position:230% 0}}
.btn-gold:hover{filter:brightness(1.06)}
.btn-maroon{background:linear-gradient(135deg,var(--maroon-3),var(--maroon-2));color:var(--gold-lite);border:1px solid var(--line)}
.btn-fb{background:linear-gradient(135deg,#3a0e16,#1c0609);color:var(--gold-lite);border:1px solid var(--gold-2);
  display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(246,227,168,.15)}
.btn-fb svg{width:20px;height:20px}
.btn-ghost{background:rgba(255,255,255,.02);border:1px solid rgba(232,198,106,.4);color:var(--gold)}
.btn-sm{width:auto;padding:11px 16px;font-size:14px;margin:0}
.btn-danger{background:rgba(255,138,122,.1);color:var(--danger);border:1px solid rgba(255,138,122,.3)}

.err{color:var(--danger);font-size:13.5px;margin-top:11px;min-height:18px;text-align:center}
.ok{color:var(--ok);font-size:13.5px;margin-top:11px;text-align:center}
.hidden{display:none!important}

/* ---------- progress ring ---------- */
.ring-wrap{display:flex;flex-direction:column;align-items:center;padding:6px 0 2px}
.ring{position:relative;width:230px;height:230px;filter:drop-shadow(0 8px 22px rgba(0,0,0,.45))}
.ring svg{transform:rotate(-90deg)}
.ring .center{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .pct{font-size:56px;font-weight:600;line-height:1;letter-spacing:-1.5px;
  background:linear-gradient(180deg,#fff6da,var(--gold-2) 80%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 16px rgba(232,198,106,.18)}
.ring .lbl{font-size:11px;color:var(--muted);margin-top:7px;letter-spacing:2.5px;text-transform:uppercase}
.ring .spark{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0 84%, rgba(255,248,224,.4) 90%, transparent 94%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 13px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 13px));
  animation:spin 5.5s linear infinite;opacity:0;transition:opacity .6s}
.ring.lit .spark{opacity:.5}
@keyframes spin{to{transform:rotate(360deg)}}
.stat-row{display:flex;gap:11px;margin-top:22px}
.stat{flex:1;text-align:center;background:rgba(0,0,0,.24);border:1px solid var(--line-soft);border-radius:17px;padding:15px 8px;position:relative}
.stat::before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,rgba(232,198,106,.35),transparent)}
.stat .v{font-size:23px;font-weight:600;color:var(--gold-lite)}
.stat.mid .v{color:#fff}
.stat .k{font-size:10.5px;color:var(--muted-2);margin-top:5px;letter-spacing:.5px}
/* community stats. auto-fit + 1fr means empty tracks collapse, so the grid fills itself
   whatever number of tiles the live data produces (1-4) with no hand-written special cases.
   The ยอดออมรวม figure gets its own full-width row: it is the headline, and it is the only
   one that keeps growing digits — at 4 tiles across it was already clipping on a 320px phone. */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:11px}
.stat-grid .stat{min-width:0}
.stat-grid .stat.wide{grid-column:1/-1}
.stat-grid .v{font-size:20px;font-weight:600;color:var(--gold-lite);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-grid .wide .v{font-size:25px}
.stat-grid .v small{font-size:11.5px;color:var(--gold-2);margin-left:3px;font-family:var(--font)}
@media (max-width:340px){ .stat-grid .v{font-size:17px} .stat-grid .wide .v{font-size:22px} }

/* ---------- section titles / table ---------- */
.tbl-title{font-weight:700;color:var(--gold-lite);margin:2px 0 16px;display:flex;align-items:center;gap:9px;font-size:15.5px;letter-spacing:.2px}
.tbl-title svg{width:18px;height:18px;opacity:.9}
table{width:100%;border-collapse:collapse;font-size:13px}
th{color:var(--gold-2);padding:0 6px 12px;font-weight:600;text-align:right;font-size:11px;letter-spacing:.5px;
  border-bottom:1px solid var(--line);text-transform:uppercase}
th:first-child,td:first-child{text-align:left}
td{padding:13px 6px;border-bottom:1px solid rgba(255,255,255,.045);text-align:right;color:var(--text);font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
td.g{color:var(--gold);font-weight:700}
.empty{text-align:center;color:var(--muted-2);padding:28px 0;font-size:14px}

/* ---------- admin ---------- */
.toolbar{position:sticky;top:0;z-index:5;background:rgba(16,5,8,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:flex;gap:9px;align-items:center;color:var(--gold-lite);
  padding:calc(14px + env(safe-area-inset-top)) 16px 14px;
  margin:calc(-18px - env(safe-area-inset-top)) -18px 18px;border-bottom:1px solid var(--line)}
.toolbar h2{font-family:'Trirong',var(--font);font-size:17px;margin:0;flex:0 1 auto;min-width:0;font-weight:600;letter-spacing:.2px;
  display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toolbar .chip{margin-left:auto}
.toolbar .chip{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.toolbar .btn-sm{flex:0 0 auto}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;flex:0 0 auto;
  border:1.6px solid rgba(232,198,106,.55);color:var(--gold-lite);background:rgba(232,198,106,.10)}
.iconbtn svg{width:17px;height:17px}
.toolbar h2 svg{width:18px;height:18px}
.chip{display:inline-flex;align-items:center;gap:5px;background:rgba(232,198,106,.12);color:var(--gold-lite);
  border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:12px;font-weight:600;letter-spacing:.3px}
.tabs{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap}
.tab{flex:1;min-width:72px;text-align:center;padding:12px 6px;border-radius:13px;font-size:13px;font-weight:700;
  background:rgba(255,255,255,.035);color:var(--muted);cursor:pointer;border:1px solid var(--line-soft);transition:.18s;letter-spacing:.2px}
.tab.active{background:linear-gradient(135deg,#f6e3a8,#d4af37);color:#3a1206;border-color:transparent;box-shadow:0 8px 18px rgba(184,145,47,.4)}
.list-item{display:flex;align-items:center;gap:12px;padding:14px 6px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;transition:.14s}
.list-item:active{background:rgba(232,198,106,.06)}
.avatar{width:44px;height:44px;border-radius:14px;background:
    radial-gradient(120% 120% at 30% 20%, rgba(246,227,168,.28), transparent 60%),linear-gradient(150deg,var(--maroon-3),var(--maroon-2));
  color:var(--gold-lite);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;font-size:18px;border:1px solid var(--line)}
.li-main{flex:1;min-width:0}
.li-name{font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--muted-2)}
.li-g{color:var(--gold);font-weight:800;font-size:15px;white-space:nowrap}
.kpi{display:flex;gap:12px;margin-bottom:14px}
.kpi .box{flex:1;position:relative;overflow:hidden;background:
    radial-gradient(120% 100% at 50% -35%, rgba(232,198,106,.14), transparent 62%),
    linear-gradient(160deg, rgba(97,28,41,.55), rgba(24,6,9,.65));
  border:1px solid var(--line);border-radius:19px;padding:17px 12px;text-align:center;box-shadow:var(--shadow)}
.kpi .box .v{font-size:25px;font-weight:600;color:var(--gold-lite)}
.kpi .box .k{font-size:10.5px;color:var(--muted);margin-top:5px;letter-spacing:.5px}
.hint{font-size:12px;color:var(--muted-2);margin-top:8px;line-height:1.65}
.pill-price{background:rgba(232,198,106,.08);border:1px dashed rgba(232,198,106,.42);border-radius:14px;padding:13px 14px;
  color:var(--gold-lite);font-size:13px;margin-top:10px;text-align:center;font-weight:600;letter-spacing:.2px}
.footer{text-align:center;color:var(--muted-2);font-size:11px;margin-top:26px;letter-spacing:.6px;
  display:flex;align-items:center;justify-content:center;gap:7px;opacity:.8}
.footer svg{width:13px;height:13px}
.link{color:var(--gold);text-align:center;display:block;margin-top:18px;font-size:13px;text-decoration:none;letter-spacing:.3px;opacity:.85}
.link:hover{opacity:1}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:18px 0}
/* decorative gem divider */
.gem{display:flex;align-items:center;gap:12px;margin:20px 2px 8px;color:var(--gold-2)}
.gem::before,.gem::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(232,198,106,.4))}
.gem::after{background:linear-gradient(90deg,rgba(232,198,106,.4),transparent)}
.gem svg{width:12px;height:12px;opacity:.85}
.greet{text-align:center;color:var(--muted);font-size:13px;margin:-4px 0 14px;letter-spacing:.3px}
.greet b{color:var(--gold-lite);font-weight:700}

/* ---------- modal ---------- */
.modal{padding-bottom:var(--kb,0px);transition:padding-bottom .18s ease;
  position:fixed;top:0;right:0;bottom:0;left:0;inset:0;background:rgba(8,2,4,.74);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:flex-end;justify-content:center;z-index:20;animation:fadein .2s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal .sheet{background:linear-gradient(180deg,#2c0c13,#170509);border-top:1px solid var(--line);
  width:100%;max-width:460px;border-radius:26px 26px 0 0;padding:22px 22px calc(22px + env(safe-area-inset-bottom));max-height:92vh;max-height:92%;overflow:auto;-webkit-overflow-scrolling:touch;
  box-shadow:0 -24px 70px rgba(0,0,0,.6);animation:slideup .32s cubic-bezier(.22,1,.36,1)}
@keyframes slideup{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
.modal .sheet.center{border-radius:24px;margin:auto;max-height:88vh;max-height:88%;border:1px solid var(--line)}
.sheet h3{margin:0 0 4px;color:var(--gold-lite);font-size:20px;letter-spacing:.2px;font-family:'Trirong',var(--font);font-weight:600}
.grip{width:42px;height:4px;border-radius:4px;background:rgba(232,198,106,.35);margin:-6px auto 14px}

/* how-to steps */
.steps{display:flex;flex-direction:column;gap:11px;margin:2px 0 18px}
.step{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--text);line-height:1.45}
.step .n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;color:#3a1206;
  background:linear-gradient(135deg,#f6e3a8,#d4af37);box-shadow:0 4px 10px rgba(184,145,47,.45)}
.step b{color:var(--gold-lite);font-weight:700}

/* logo upload */
.logo-up{display:flex;align-items:center;gap:14px;margin-top:6px}
.logo-prev{width:74px;height:74px;border-radius:18px;flex:0 0 auto;border:1px solid var(--line);
  background:rgba(0,0,0,.3) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:11px;text-align:center}
.logo-prev img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.file-btn{display:inline-block;padding:12px 17px;border-radius:13px;font-size:14px;font-weight:700;cursor:pointer;
  background:linear-gradient(135deg,var(--maroon-3),var(--maroon-2));color:var(--gold-lite);border:1px solid var(--line)}
.file-btn input{display:none}

/* row buttons */
.rowbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;
  border:1px solid var(--line);background:rgba(232,198,106,.06);cursor:pointer;padding:0}
.rowbtn svg{width:15px;height:15px}
td.act{text-align:center;padding:8px 2px}

/* segmented mode switch */
.segmented{display:flex;gap:6px;background:rgba(0,0,0,.28);border:1px solid var(--line-soft);border-radius:14px;padding:5px;margin:6px 0 14px}
.seg{flex:1;padding:12px 8px;border:none;border-radius:10px;font-family:inherit;font-size:13.5px;font-weight:700;
  background:transparent;color:var(--muted);cursor:pointer;transition:.18s;letter-spacing:.2px}
.seg.active{background:linear-gradient(135deg,#f6e3a8,#d4af37);color:#3a1206;box-shadow:0 5px 13px rgba(184,145,47,.4)}
.result-box{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
  background:radial-gradient(120% 100% at 50% 0%,rgba(232,198,106,.15),transparent 70%),rgba(0,0,0,.24);
  border:1px solid var(--line);border-radius:17px;padding:17px;margin:16px 0}
.result-box .k{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.result-box .v{font-size:36px;line-height:1.1;
  background:linear-gradient(180deg,#fff6da,var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.result-box .v small{font-size:16px;color:var(--muted);-webkit-text-fill-color:var(--muted);margin-left:5px}

/* warning banner (no price today) */
.warn{display:flex;align-items:center;gap:11px;border-radius:15px;padding:14px 16px;margin-bottom:16px;
  font-size:13.5px;font-weight:600;line-height:1.4;
  background:linear-gradient(135deg,rgba(255,180,60,.16),rgba(255,120,90,.14));
  border:1px solid rgba(255,180,60,.5);color:#ffd9a0;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.warn svg{width:24px;height:24px;flex:0 0 auto}
.warn b{color:#fff}
.warn.ok{background:linear-gradient(135deg,rgba(84,216,162,.12),rgba(84,216,162,.06));
  border-color:rgba(84,216,162,.4);color:#a9eccf}

/* price chart */
.chart-wrap{margin-top:6px}
.chart{width:100%;height:150px;display:block}
.chart-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted-2);margin-top:6px;letter-spacing:.3px}
.chart-hi{color:var(--gold-lite);font-weight:700}
.badge-day{display:inline-block;background:rgba(232,198,106,.12);border:1px solid var(--line);border-radius:8px;
  padding:2px 8px;font-size:11px;color:var(--gold-lite);font-weight:600}
td .re{font-size:11px;color:var(--muted-2)}

/* ---------- money-balance model (2026-08-28 rewrite) ---------- */
.bigbal{text-align:center;padding:12px 0 4px}
.bigbal .k{font-size:11.5px;color:var(--muted);letter-spacing:1.6px;text-transform:uppercase;margin-bottom:8px}
.bigbal .v{font-family:'Playfair Display',serif;font-weight:600;line-height:1.05;
  font-size:clamp(40px,13vw,58px);letter-spacing:-1px;
  background:linear-gradient(180deg,#fff8e3,#e8c66a 55%,#b8912f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 18px rgba(184,145,47,.28))}
.bigbal .cur{font-size:.5em;color:var(--muted);-webkit-text-fill-color:var(--muted);margin-left:6px;letter-spacing:0}
.bigbal .sub{font-size:12.5px;color:var(--muted-2);margin-top:9px;letter-spacing:.3px}

.tag{display:inline-block;border-radius:7px;padding:2px 8px;font-size:11px;font-weight:700;letter-spacing:.2px}
.tag-in{background:rgba(84,216,162,.13);border:1px solid rgba(84,216,162,.38);color:#a9eccf}
.tag-out{background:rgba(255,150,110,.13);border:1px solid rgba(255,150,110,.4);color:#ffc0a4}
td.amt-in{color:#a9eccf;font-weight:700;white-space:nowrap}
td.amt-out{color:#ffc0a4;font-weight:700;white-space:nowrap}
tr.row-del{opacity:.42}
tr.row-del td:not(.act){text-decoration:line-through}

.req-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  margin-left:5px;border-radius:9px;background:#e0574f;color:#fff;font-size:11px;font-weight:800;line-height:18px}
.req-card{background:linear-gradient(135deg,rgba(255,180,60,.10),rgba(255,120,90,.08));
  border:1px solid rgba(255,180,60,.42)}
.req-card .tbl-title{color:#ffd9a0}

/* ---------- sticky back / home bar inside every modal sheet ---------- */
.sheetbar{position:sticky;top:0;z-index:4;display:flex;gap:8px;align-items:center;justify-content:space-between;
  margin:-22px -22px 16px;padding:14px 16px 13px;
  background:#2c0c13;border-bottom:1px solid rgba(232,198,106,.22);
  box-shadow:0 8px 16px -10px rgba(0,0,0,.9)}
/* these are the only way out of a sheet on a phone, so they are deliberately loud:
   the back button is a filled gold pill, home a gold-outlined one */
.navbtn{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:11px 20px;
  font-family:inherit;font-size:14.5px;font-weight:800;cursor:pointer;letter-spacing:.2px;
  transition:.15s;white-space:nowrap;
  background:linear-gradient(135deg,#f6e3a8,#d4af37);color:#3a1206;border:none;
  box-shadow:0 6px 16px rgba(184,145,47,.42)}
.navbtn:active{transform:translateY(1px);box-shadow:0 3px 9px rgba(184,145,47,.4)}
.navbtn svg{width:17px;height:17px;flex:0 0 auto;stroke-width:2.2}
.navbtn.ghost{background:rgba(232,198,106,.10);color:var(--gold-lite);
  border:1.6px solid rgba(232,198,106,.55);box-shadow:none}
.navbtn.ghost:active{background:rgba(232,198,106,.22)}
.sheetbar+*{margin-top:2px}

/* ---------- bank account block (customer ฝากเงิน sheet) ---------- */
.acct{margin-top:4px;padding:16px 16px 14px;border-radius:18px;text-align:center;
  background:radial-gradient(130% 130% at 50% 0%,rgba(246,227,168,.10),transparent 65%),rgba(255,255,255,.035);
  border:1px solid var(--line)}
.acct-bank{font-size:13px;color:var(--muted);letter-spacing:.3px;margin-bottom:6px}
.acct-no{-webkit-user-select:text;user-select:text;font-family:'Playfair Display',var(--font);font-size:26px;font-weight:700;color:var(--gold-lite);
  letter-spacing:1.2px;font-variant-numeric:tabular-nums;word-break:break-all;line-height:1.25}
.acct-name{font-size:13px;color:var(--text);margin-top:6px}
.acct .btn{margin-top:12px}

/* ---------- month grouping in long histories ---------- */
.mhead td{position:sticky;top:var(--barh,0px);z-index:2;background:#2a0b12;text-align:left;
  padding:9px 8px;font-size:12.5px;font-weight:700;color:var(--gold-lite);letter-spacing:.3px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mhead .mtot{float:right;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}

/* a friendly information block — same job as .warn but without the alarm colours */
.note{display:flex;gap:11px;align-items:flex-start;margin-top:14px;padding:14px 15px;border-radius:16px;
  background:radial-gradient(130% 130% at 0% 0%,rgba(246,227,168,.10),transparent 70%),rgba(255,255,255,.035);
  border:1px solid rgba(232,198,106,.30);font-size:13.5px;line-height:1.6;color:var(--text)}
.note .ic{flex:0 0 auto;font-size:17px;line-height:1.3}
.note b{color:var(--gold-lite);font-weight:700}

/* ---------- two-line action button + cash-out breakdown (2026-09-06) ----------
   "รับทองจริง" and "ถอนเงินสดด่วน" are different products, not two settings of one.
   Each button carries its own one-line consequence so nobody taps the fee-charging one
   thinking it is the other. */
.btn-stack{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1.3}
.btn-stack small{font-size:11.5px;font-weight:500;opacity:.78;letter-spacing:.2px}
.btn-cash{border-color:rgba(255,150,110,.42);color:#ffc0a4}
.calc{margin:8px 0 4px;border-radius:16px;padding:13px 16px;
  background:rgba(0,0,0,.26);border:1px solid var(--line-soft)}
.calc .r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13.5px;padding:5px 0;color:var(--text)}
.calc .r>span:last-child{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.calc .r.fee>span:last-child{color:#ffb4a2}
.calc .r.rest{color:var(--muted-2);font-size:12.5px}
.calc .sep{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:7px 0}
.calc .r.net{color:var(--gold-lite)}
.calc .r.net>span:last-child{font-family:'Playfair Display',serif;font-size:23px;font-weight:600}

/* ---------- install-to-home-screen card + iOS walkthrough (2026-09-06) ---------- */
.install-card{background:linear-gradient(135deg,rgba(232,198,106,.13),rgba(212,175,55,.05));
  border:1px solid rgba(232,198,106,.34)}
.ins-top{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.ins-ico{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f6e3a8,#d4af37);box-shadow:0 6px 16px rgba(184,145,47,.34)}
.ins-ico svg{width:24px;height:24px}
.ins-title{font-weight:700;color:var(--gold-lite);font-size:15.5px;line-height:1.3}
.ins-sub{font-size:12.5px;color:var(--muted-2);margin-top:3px;line-height:1.5}
.btn-x{display:block;width:100%;margin-top:9px;background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:12.5px;color:var(--muted-2);padding:7px;letter-spacing:.3px}
.btn-x:hover{color:var(--muted)}

/* the three-step iPhone walkthrough: drawn, not screenshotted */
.ios-steps{display:flex;flex-direction:column;gap:11px;margin:9px 0 4px}
.ios-step{display:flex;gap:13px;align-items:flex-start}
.ios-step .n{flex:0 0 auto;width:27px;height:27px;border-radius:50%;font-size:12.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
  background:linear-gradient(135deg,#f6e3a8,#d4af37);color:#3a1206}
.ios-step .tx{flex:1;font-size:13px;line-height:1.45;color:var(--text)}
.ios-step .tx b{color:var(--gold-lite)}
.ios-art{margin-top:7px;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft);
  background:#0d0305;width:100%;display:none}
.ios-steps.with-art .ios-art{display:block}
.ios-art svg{display:block;width:100%;height:auto;max-height:74px}
.art-toggle{display:block;width:100%;margin:0 0 4px;padding:9px;border-radius:11px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.2px;
  background:rgba(232,198,106,.10);color:var(--gold-lite);border:1px solid var(--line)}

/* fix 3 (2026-09-07): a customer on an iPhone stopped at "เพิ่มไปยังหน้าจอโฮม" because the
   last step and the close button were below the sheet's own fold and nothing said the sheet
   scrolls — it read as a dead end. The cue is sticky to the visible bottom of the scrollport
   and its negative top margin keeps it out of scrollHeight, so it cannot make the overflow
   it is warning about any worse. */
.modal .sheet .scrollcue{position:sticky;bottom:calc(-22px - env(safe-area-inset-bottom));z-index:3;
  margin:-44px -22px 0;padding:16px 0 9px;text-align:center;font-size:12px;font-weight:700;
  letter-spacing:.3px;color:var(--gold-lite);pointer-events:none;transition:opacity .22s;
  background:linear-gradient(180deg,rgba(23,5,9,0),rgba(23,5,9,.93) 55%,#170509)}
.modal .sheet.at-end .scrollcue{opacity:0}

/* the shop link inside the "open in a browser" sheet, highlighted while the customer
   long-presses it because neither clipboard route is available in that WebView */
.url-armed{outline:2px solid var(--gold-lite);outline-offset:4px;border-radius:8px}

/* ---------- แคตตาล็อกลายทอง ---------- */
/* Admin list thumbnail */
.it-thumb{width:52px;height:52px;flex:0 0 auto;border-radius:13px;overflow:hidden;background:rgba(0,0,0,.3);
  border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;font-size:20px}
.it-thumb img{width:100%;height:100%;object-fit:cover}
/* Admin photo tray */
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:9px;margin:4px 0 12px}
.ph{position:relative;aspect-ratio:1;border-radius:13px;overflow:hidden;border:1px solid var(--line-soft)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph-tag{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.66);color:var(--gold-lite);
  font-size:9px;text-align:center;padding:3px 0;letter-spacing:.3px}
.ph-x{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,.66);color:#ffd9d2;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center}
.ph-empty{grid-column:1/-1;text-align:center;color:var(--muted-2);font-size:12.5px;padding:18px 0;
  border:1px dashed var(--line-soft);border-radius:14px}
/* Quick-weight chips: the shop thinks in สลึง/บาท, not grams */
.quick-w{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
.qw{background:rgba(232,198,106,.10);border:1px solid var(--line);color:var(--gold-lite);cursor:pointer;
  border-radius:11px;padding:9px 13px;font-size:13.5px;font-family:inherit;font-weight:600}
.qw:active{transform:scale(.96)}
label.chk{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:.1px;font-size:13.5px;
  color:var(--text);font-weight:500;margin:11px 0}
label.chk input{width:auto;flex:0 0 auto;accent-color:var(--gold-2);transform:scale(1.25)}

/* Customer lookbook. Photos of gold on dark maroon is the whole point — let the grid be
   pictures first and text second. */
.lookbook{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.lb{position:relative;border-radius:19px;overflow:hidden;border:1px solid var(--line-soft);cursor:pointer;
  background:rgba(0,0,0,.28);box-shadow:0 10px 26px rgba(0,0,0,.4)}
.lb:active{transform:scale(.985)}
.lb .img{aspect-ratio:1;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;
  color:var(--muted-2);font-size:26px}
.lb .img img{width:100%;height:100%;object-fit:cover;display:block}
.lb .cap{padding:10px 11px 12px}
.lb .cap b{display:block;font-size:13px;color:var(--gold-lite);font-weight:600;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .cap span{display:block;font-size:11.5px;color:var(--muted-2);margin-top:3px}
.lb .w{position:absolute;top:9px;left:9px;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);border:1px solid rgba(232,198,106,.4);color:var(--gold-lite);
  font-size:11px;font-weight:700;padding:5px 9px;border-radius:9px;letter-spacing:.2px}
.lb .badge{position:absolute;top:9px;right:9px;background:rgba(232,198,106,.92);color:#3a1206;
  font-size:10px;font-weight:800;padding:4px 8px;border-radius:8px}
.cats{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;-webkit-overflow-scrolling:touch}
.cats::-webkit-scrollbar{display:none}
.cat{flex:0 0 auto;background:rgba(255,255,255,.03);border:1px solid var(--line-soft);color:var(--muted);
  border-radius:11px;padding:8px 14px;font-size:13px;cursor:pointer;font-weight:600;white-space:nowrap}
.cat.on{background:rgba(232,198,106,.14);border-color:var(--gold-2);color:var(--gold-lite)}
/* Detail sheet */
.lb-hero{width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;display:block;background:rgba(0,0,0,.35)}
.lb-strip{display:flex;gap:8px;overflow-x:auto;margin-top:9px;padding-bottom:2px}
.lb-strip::-webkit-scrollbar{display:none}
.lb-strip img{width:58px;height:58px;flex:0 0 auto;object-fit:cover;border-radius:11px;cursor:pointer;
  border:1px solid var(--line-soft);opacity:.55}
.lb-strip img.on{opacity:1;border-color:var(--gold-2)}

/* ---------- shopfront cards (login + dashboard) ----------
   Given its own surface rather than a plain .card: this is the one block on either screen
   that is meant to catch the eye before anything else does. */
.card.shop-card{background:
    radial-gradient(120% 90% at 50% -30%, rgba(232,198,106,.16), transparent 62%),
    linear-gradient(160deg, rgba(97,28,41,.5), rgba(24,6,9,.66));
  border:1px solid var(--line)}
.shop-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.shop-head .chip{flex:0 0 auto}
/* Horizontal rail for the login screen */
.lb-rail{display:flex;gap:11px;overflow-x:auto;padding:1px 1px 10px;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity}
.lb-rail::-webkit-scrollbar{display:none}
.rail-it{flex:0 0 auto;width:118px;cursor:pointer;scroll-snap-align:start;position:relative}
.rail-it:active{transform:scale(.97)}
.rail-it .img{width:118px;height:118px;border-radius:16px;overflow:hidden;background:rgba(0,0,0,.35);
  border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;font-size:26px}
.rail-it .img img{width:100%;height:100%;object-fit:cover;display:block}
.rail-it .w{position:absolute;top:7px;left:7px;background:rgba(0,0,0,.66);-webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);border:1px solid rgba(232,198,106,.4);color:var(--gold-lite);
  font-size:10.5px;font-weight:700;padding:4px 8px;border-radius:8px}
.rail-it b{display:block;font-size:12px;color:var(--gold-lite);font-weight:600;margin-top:7px;
  line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-more{flex:0 0 auto;width:92px;height:118px;border-radius:16px;cursor:pointer;
  border:1px dashed rgba(232,198,106,.45);background:rgba(232,198,106,.06);color:var(--gold-lite);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-weight:700}
.rail-more span{font-size:12px}
.rail-more b{font-size:19px;line-height:1}
/* On a short phone the login showcase must not push the PIN field off the screen: the rail
   shrinks and the duplicate call-to-action button drops away, because the rail already ends
   in a "ดูทั้งหมด →" tile that does the same job. */
@media (max-height:700px){
  .card.shop-card{padding:16px}
  .hide-short{display:none}
  .rail-it,.rail-it .img{width:100px}
  .rail-it .img{height:100px}
  .rail-more{width:80px;height:100px}
  .lb-rail{padding-bottom:4px}
}

/* catalogue ordering (admin) */
.mv{display:flex;flex-direction:column;gap:4px;flex:none}
.mv button{width:34px;height:30px;border-radius:8px;border:1px solid rgba(232,198,106,.35);background:rgba(232,198,106,.08);color:var(--gold);font-size:13px;line-height:1;cursor:pointer;padding:0}
.mv button:disabled{opacity:.25;cursor:default}
.mv button:not(:disabled):active{background:rgba(232,198,106,.25)}
.li-pos{margin-top:4px}
.tag-pos1{background:rgba(232,198,106,.16);border:1px solid rgba(232,198,106,.5);color:var(--gold)}
.tag-pos2{background:rgba(120,170,255,.12);border:1px solid rgba(120,170,255,.38);color:#b9d0ff}
.tag-pos3{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.55)}

/* ---------- รูปราคาทองประจำวัน ---------- */
.card.price-card{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;
  background:linear-gradient(135deg, rgba(232,198,106,.16), rgba(97,28,41,.45));border:1px solid var(--line)}
.card.price-card:active{transform:scale(.985)}
.pc-ico{font-size:24px;flex:0 0 auto}
.pc-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.pc-txt b{font-family:'Trirong',var(--font);font-size:16px;color:var(--gold-lite);font-weight:600}
.pc-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-sub.stale{color:#ffc0a4}
.pc-thumbs{display:flex;gap:5px;flex:0 0 auto}
.pc-thumbs img{width:40px;height:40px;object-fit:cover;border-radius:9px;border:1px solid var(--line-soft)}
.pc-go{font-size:24px;color:var(--gold);flex:0 0 auto;line-height:1}
.pb-card{padding:14px}
.pb-when{font-size:14px;color:#a9eccf;margin-bottom:10px;line-height:1.5}
.pb-when.stale{color:#ffc0a4}
.pb-when span{font-size:12.5px;color:var(--muted)}
.pb-img{width:100%;display:block;border-radius:14px;cursor:zoom-in;background:rgba(0,0,0,.3)}
.pb-days-t{font-size:12px;color:var(--muted);margin:4px 2px 6px}
.zoomer{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:60;background:rgba(0,0,0,.94);
  overflow:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:center;justify-content:center}
.zoomer.zoomed{display:block}
.zoomer img{max-width:100%;max-height:100%;display:block;cursor:zoom-in}
.zoomer.zoomed img{max-width:none;max-height:none;cursor:zoom-out}
.zoom-x{position:fixed;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:61;border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.6);color:#fff;border-radius:12px;padding:9px 14px;font:inherit;font-size:14px;cursor:pointer}
.zoom-hint{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:61;
  background:rgba(0,0,0,.6);color:#ddd;font-size:12px;padding:6px 12px;border-radius:10px;pointer-events:none}
/* admin slots */
.pb-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.pb-slot{border:1px solid var(--line-soft);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.pb-head{font-size:14px}
.pb-slot .pb-img{aspect-ratio:1;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:12px}
.pb-slot .pb-img img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.pb-st .tag{white-space:normal;line-height:1.4}
.pb-pick{display:block;margin:0;font-size:13px;padding:12px 8px;text-align:center}
.pb-confirm-kind{font-family:'Trirong',var(--font);font-size:22px;color:var(--gold-lite);text-align:center;padding:8px 0}
.hero-btns{display:grid;grid-template-columns:1fr;gap:9px}
.hero-btns.two{grid-template-columns:1fr 1fr}
.hero-btns.two .btn{font-size:14px;padding:15px 6px;margin:0;white-space:nowrap}
@media (max-height:700px){ .hero-btns{display:none} }