/* design A "แชมเปญ" — ivory cards with gold hairlines, chocolate hero card, Astra embossed-gold icons; closest to Airin's champagne rich menu */
:root{color-scheme:light;
  --bg:#FBF6F1;--surface:#FFFDF8;--sunk:#F4ECE1;--ink:#2B1E17;--muted:#86705E;--line:#EADFCF;--border:#E5D2AC;--head:#3B2618;
  --gold:#C9A86A;--gold-2:#E6CD93;--gold-ink:#94702F;
  --choc:#3B2618;--on-choc:#F6EBDA;--on-choc-muted:#CDB89A;--on-choc-gold:#EBD39B;
  --pri:#3B2618;--pri-ink:#FBF1E0;
  --sage:#7E9B78;--amber:#D4A24C;--rose:#C0705E;--sage-soft:#E7EEE0;--amber-soft:#F8EBD0;--rose-soft:#F6E1DA;--sage-ink:#4D6948;--amber-ink:#85600F;--rose-ink:#9A4836;--rose-line:#E5B6A9;
  --c1:#3B2618;--c2:#C9A86A;--c3:#7E9B78;--c4:#D4A24C;--c5:#C0705E;--c6:#A88B6E;--c7:#E6CD93;--c8:#6E5138;--c9:#CDBBA6;
  --bar:#E5D5B9;--band:#F5EBDB;--thumb:linear-gradient(145deg,#FFF9EE,#F1E3CB);--col-bg:#F5EDE2;
  --p-ral:#A88B6E;--p-alice:#C29A52;--p-himm:#7E9B78;
  --r-card:22px;--r-ctl:14px;--shadow:0 12px 26px -20px rgba(90,60,30,.5),0 1px 2px rgba(90,60,30,.05);--shadow-lg:0 30px 60px -30px rgba(90,60,30,.55);
  --f-display:"Noto Sans Thai",system-ui,sans-serif;--f-body:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;
  --side-bg:#FFFDF8;--side-ink:#3B2618;--side-muted:#86705E;--side-line:#EADFCF;--side-on:#3B2618;--side-on-ink:#F6EBDA;
  --tab-bg:rgba(255,253,248,.94);--tab-on:#3B2618;--tab-on-ink:#F6EBDA;
  --login-bg:radial-gradient(circle at 50% 18%,#FFF6E4,#FBF6F1 62%)}
.ph h1{font-weight:800}
.hero-card{position:relative;display:block;overflow:hidden;padding:22px 22px 20px;border-radius:24px;background:linear-gradient(135deg,#4C3122,#2A1A10 70%);color:var(--on-choc);border:1px solid #8F6E3E;box-shadow:0 22px 40px -24px rgba(59,38,24,.9)}
.hero-card .lbl{font-family:var(--f-display);font-size:17px;font-weight:600}
.hero-card .big{font-family:var(--f-display);font-size:clamp(42px,12vw,54px);font-weight:800;line-height:1.1;background:linear-gradient(180deg,#F7E6BC,#D2AE6A);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-card .big span{font-size:.45em}
.hero-card .sub{color:var(--on-choc-muted);font-size:15px;margin-top:4px}
.curves{position:absolute;right:0;bottom:0;width:72%;height:100%}
.curves path{fill:none;stroke:#D9B977;stroke-width:1.1;opacity:.55}
.tiles3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{display:grid;justify-items:center;gap:2px;padding:12px 6px 14px;border-radius:20px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);text-align:center}
.tile img{width:58px;height:58px;object-fit:contain;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(circle,#000 50%,transparent 70%);mask-image:radial-gradient(circle,#000 50%,transparent 70%)}
.tile span{font-family:var(--f-display);font-size:13.5px;font-weight:600;color:var(--head)}
.tile b{font-family:var(--f-display);font-size:clamp(20px,6vw,28px);font-weight:800;color:var(--head);white-space:nowrap}
.sug{border-color:var(--border)}
.insight{background:linear-gradient(135deg,#4C3122,#2A1A10 70%);border:1px solid #8F6E3E}