:root{--bg:#fbf6ec;--ink:#1d1a16;--soft:#6b6257;--line:#e3d8c4;--card:#fffdf8;--accent:#c8461f;--gold:#f2b632;--up:#c8461f;--ease:#2f6f8f;--flat:#5c7a3a;--hero:#f4e7cf;--r:14px;--font:"IBM Plex Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif}
[data-look="night"]{--bg:#0f1626;--ink:#eef0f6;--soft:#9aa3b8;--line:#2a3550;--card:#16203a;--accent:#f2b632;--hero:#141f38;--up:#ff8a5c;--ease:#7cc4e8;--flat:#a8d36a}
[data-look="lacquer"]{--bg:#1a0c0b;--ink:#f7e9d0;--soft:#c9a98a;--line:#4a1f1a;--card:#2a1210;--accent:#e0a83a;--hero:#7d1712;--up:#ffb36b;--ease:#9fd0e6;--flat:#c6e08a}
[data-look="leaf"]{--bg:#f1f6ee;--ink:#14261a;--soft:#587060;--line:#cfe0c8;--card:#fcfffa;--accent:#2e7d4f;--hero:#dcebd3;--up:#b8501f;--ease:#2f6f8f;--flat:#2e7d4f}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding-bottom:72px;background:var(--bg);color:var(--ink);font:17px/1.55 var(--font)}
a{color:inherit}
img{max-width:100%;display:block}
h1{font-size:clamp(28px,6vw,46px);line-height:1.15;margin:.2em 0 .35em}
h2{font-size:22px;margin:1.6em 0 .6em}
h3{margin:.2em 0}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.narrow{max-width:640px}
.small{font-size:14px;color:var(--soft)}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;max-width:1080px;margin:0 auto}
.top nav{display:flex;gap:16px;font-size:15px}
.top nav a{text-decoration:none;color:var(--soft)}
.mark{font-weight:700;font-size:20px;text-decoration:none;display:flex;align-items:center;gap:8px}
.bow{width:26px;height:14px;border-radius:26px 26px 0 0;background:conic-gradient(from 270deg at 50% 100%,#c8461f 0 30deg,#f2b632 0 60deg,#5c9a3a 0 90deg,#2f6f8f 0 120deg,#6b3fa0 0 180deg,transparent 0);display:inline-block}
.foot{max-width:1080px;margin:48px auto 0;padding:24px 16px 40px;color:var(--soft);font-size:14px;border-top:1px solid var(--line)}
.btn{display:inline-block;border:1.5px solid var(--ink);background:transparent;color:var(--ink);padding:10px 18px;border-radius:999px;font:600 16px var(--font);text-decoration:none;cursor:pointer}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#000}
.btn.big{padding:14px 28px;font-size:18px}
.btn.small{padding:5px 12px;font-size:14px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:active{transform:translateY(1px)}
.err{background:#fde3dc;color:#7a1d08;padding:10px 14px;border-radius:10px}
.hero{background:var(--hero);padding:28px 0 36px}
.hero-in{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.lede{font-size:19px;max-width:36em}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.toy{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.toyl{flex:0 0 52%}
.toyp{font-size:44px;font-weight:700;margin:0;line-height:1}
.toyw{color:var(--soft);font-size:15px;min-height:3em}
.toyb{display:flex;flex-direction:column;gap:8px}
.toyb button{border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:999px;padding:8px 12px;font:600 15px var(--font);cursor:pointer}
.ladder{width:100%;max-width:300px;height:auto;overflow:visible}
.ladder line{stroke:var(--soft);stroke-width:3;stroke-linecap:round}
.ladder text{fill:var(--soft);font:600 15px var(--font)}
.ladder .now line{stroke:var(--accent);stroke-width:5}
.ladder .now text{fill:var(--ink);font-size:17px}
.ladder circle{fill:var(--gold);stroke:#000;stroke-width:1.5;transition:transform .35s}
.ladder .rg{cursor:pointer;outline:none}
.ladder .rg.tap line{stroke:var(--gold)}
.search{display:flex;gap:8px;margin-top:22px}
.search input{flex:1;min-width:0}
input,select,textarea{font:16px var(--font);color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
.search button{border:0;background:var(--ink);color:var(--bg);border-radius:10px;padding:0 16px;font:600 16px var(--font)}
.shops{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.shopcard{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sc-img{display:block;aspect-ratio:16/9;background:var(--hero) center/cover}
.sc-t{display:block;padding:12px 14px}
.sc-t small{display:block;color:var(--soft)}
.demo{font-style:normal;font-size:12px;background:var(--line);padding:1px 7px;border-radius:999px;color:var(--soft)}
.demo-note{color:var(--soft);font-size:14px;margin-top:10px}
.blocks{list-style:none;padding:0;margin:0}
.blocks li a{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;flex-wrap:wrap}
.blocks span{color:var(--soft);font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.pcard{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pc-img{display:block;aspect-ratio:1;background:var(--hero)}
.pc-img img{width:100%;height:100%;object-fit:cover}
.pc-t{display:block;padding:10px 12px 12px}
.pc-p{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:700;margin-top:4px;flex-wrap:wrap}
.chip{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--line);color:var(--soft)}
.c-up{background:var(--up);color:#fff}
.c-ease{background:var(--ease);color:#fff}
.c-flat{background:var(--flat);color:#fff}
.thin{display:block;height:4px;background:var(--line);border-radius:4px;margin-top:8px;overflow:hidden}
.thin i{display:block;height:100%;width:var(--p);background:var(--accent)}
.out,.few{font-size:13px;color:var(--soft);display:block;margin-top:4px}
.out{color:var(--up);font-weight:600}
.cover{position:relative;background:var(--hero);padding:40px 0;overflow:hidden;clip-path:inset(0)}
.cover.has{min-height:46vh;display:flex;align-items:flex-end;color:#fff}
.cover .fix{position:fixed;inset:0;background:center/cover no-repeat;z-index:0}
.cover.has::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 25%,rgba(0,0,0,.65));z-index:0}
.cover-in{position:relative;z-index:1;width:100%}
.cover.has a{color:#fff}
.cover.has .small{color:#eee}
.prod{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:16px}
.ph img{border-radius:var(--r);width:100%}
.price{font-size:44px;font-weight:700;margin:.2em 0;line-height:1.1}
.price small{display:block;font-size:14px;color:var(--soft);font-weight:400}
.meter{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:18px 0}
.mhead{display:flex;justify-content:space-between;gap:8px}
.bar{position:relative;height:14px;background:var(--line);border-radius:8px;margin:10px 0;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--accent);border-radius:8px}
.bar span{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.5}
.b60{left:60%}.b80{left:80%}
.lean{margin:0;font-size:15px}
.l1{color:var(--up)}.l-1{color:var(--ease)}.l0{color:var(--flat)}
.lad{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.lad .ladder{max-width:220px}
.hist{width:100%;border-collapse:collapse;font-size:15px}
.hist td{padding:6px 4px;border-bottom:1px solid var(--line)}
.m1{color:var(--up);font-weight:600}.m-1{color:var(--ease);font-weight:600}
.bagbtn{position:fixed;right:16px;bottom:16px;background:var(--gold);color:#000;text-decoration:none;font-weight:700;padding:12px 18px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:5}
.bagbtn b{background:#000;color:var(--gold);border-radius:999px;padding:0 8px;margin-left:4px}
.bagbtn[data-n="0"]{display:none}
.form{display:grid;gap:14px;margin:16px 0}
.form label{display:grid;gap:4px;font-size:15px;color:var(--soft)}
.form .check{display:flex;align-items:center;gap:8px;color:var(--ink)}
.form .check input{width:auto}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.pre{display:flex;align-items:center;gap:4px;color:var(--ink)}
fieldset.way{border:0;padding:0;margin:0;display:grid;gap:8px}
fieldset.way label{display:flex;gap:8px;align-items:center;color:var(--ink)}
fieldset.way input{width:auto}
.bagline{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.bagline input{width:64px;padding:6px}
.bagline button{background:none;border:0;color:var(--soft);text-decoration:underline;cursor:pointer;font:14px var(--font)}
.bagtot{text-align:right;font-weight:700;font-size:20px;margin-top:10px}
.keybox{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--card);border:1px dashed var(--accent);border-radius:var(--r);padding:12px}
.keybox code{word-break:break-all;font-size:14px;flex:1}
.state{display:inline-block;font-weight:700;padding:6px 14px;border-radius:999px;background:var(--line)}
.st-paid .state,.state.st-paid,.state.st-done,.state.st-sent{background:var(--flat);color:#fff}
.state.st-slip{background:var(--gold);color:#000}
.state.st-cancelled{background:var(--soft);color:#fff}
.pay{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:16px 0}
.qr svg{width:220px;height:220px;border-radius:12px}
.lines{width:100%;border-collapse:collapse;margin:16px 0}
.lines td{padding:8px 4px;border-bottom:1px solid var(--line)}
.lines td:last-child{text-align:right}
.lines .tot td{font-weight:700;border:0}
.fund{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.props{list-style:none;padding:0}
.prop{padding:12px 0;border-bottom:1px solid var(--line)}
.inline{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.inline input{width:auto}
.tabs{display:flex;gap:6px;overflow-x:auto;margin:6px 0 10px}
.tabs a{padding:8px 14px;border-radius:999px;text-decoration:none;border:1.5px solid var(--line);white-space:nowrap}
.tabs a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.prow{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:10px 0;padding:0 14px}
.prow summary{display:flex;gap:12px;align-items:center;padding:12px 0;cursor:pointer;list-style:none}
.prow summary img,.noimg{width:52px;height:52px;object-fit:cover;border-radius:8px;background:var(--line);flex:0 0 52px}
.prow summary small{color:var(--soft)}
.thumb{width:120px;border-radius:8px;margin-top:6px}
.orders{list-style:none;padding:0}
.orow{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:10px 0}
.orow.st-slip{border-color:var(--gold);border-width:2px}
.orow small{color:var(--soft)}
.money dt{color:var(--soft);font-size:14px}.money dd{margin:0 0 12px;font-size:26px;font-weight:700}
.how{padding-left:1.2em}.how li{margin:0 0 18px}
.credit{font-size:15px;color:var(--soft);border-left:3px solid var(--gold);padding-left:12px}
.ps-passed,.ps-paid{color:var(--flat);font-weight:600}
@media (max-width:760px){
  .hero-in,.prod{grid-template-columns:1fr}
  .toy{flex-direction:column;align-items:stretch}
  .toyb{flex-direction:row;flex-wrap:wrap}
  .toyl{flex-basis:auto}
  .ladder{max-width:240px;margin:0 auto}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .pc-p{font-size:17px}
  .row{grid-template-columns:1fr}
  .cover.has{min-height:38vh}
}

/* ── Rung · รุ้ง: the rainbow ladder ─────────────────────────────────────── */
:root{--b0:#6b3fa0;--b1:#2f6f8f;--b2:#5c9a3a;--b3:#f2b632;--b4:#c8461f}
[data-look="night"],[data-look="lacquer"]{--b0:#a57be0;--b1:#5fb2dc;--b2:#8fd05c;--b3:#ffc94a;--b4:#ff7a4d}
.spectrum{display:flex;height:6px}
.spectrum i{flex:1}
.spectrum i:nth-child(1){background:var(--b4)}.spectrum i:nth-child(2){background:var(--b3)}.spectrum i:nth-child(3){background:var(--b2)}.spectrum i:nth-child(4){background:var(--b1)}.spectrum i:nth-child(5){background:var(--b0)}
.mark-th{font-weight:600;color:var(--soft);font-size:17px}
.bow{background:conic-gradient(from 270deg at 50% 100%,var(--b4) 0 36deg,var(--b3) 0 72deg,var(--b2) 0 108deg,var(--b1) 0 144deg,var(--b0) 0 180deg,transparent 0)}
.foot .bow{vertical-align:-1px;margin-right:6px}
h2::after{content:"";display:block;width:56px;height:4px;margin-top:6px;border-radius:4px;background:linear-gradient(90deg,var(--b4) 0 20%,var(--b3) 0 40%,var(--b2) 0 60%,var(--b1) 0 80%,var(--b0) 0)}
/* the hero sits under a rainbow, drawn in rings */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-140px;bottom:-260px;width:640px;height:640px;border-radius:50%;opacity:.22;pointer-events:none;
  background:radial-gradient(circle,transparent 0 46%,var(--b0) 46% 54%,var(--b1) 54% 62%,var(--b2) 62% 70%,var(--b3) 70% 78%,var(--b4) 78% 86%,transparent 86%)}
.hero-in{position:relative}
/* rungs coloured by height: violet low, red high */
.ladder .rg line{stroke-width:4}
.ladder .b0 line{stroke:var(--b0)}.ladder .b1 line{stroke:var(--b1)}.ladder .b2 line{stroke:var(--b2)}.ladder .b3 line{stroke:var(--b3)}.ladder .b4 line{stroke:var(--b4)}
.ladder .rg:not(.now) line{opacity:.55}
.ladder .now line{stroke-width:7;opacity:1}
.ladder > line{stroke:var(--ink);opacity:.7}
/* this week's bar: the rainbow shows as it fills */
.bar{background:linear-gradient(90deg,var(--b0),var(--b1) 35%,var(--b2) 60%,var(--b3) 80%,var(--b4))}
.bar i{display:none}
.bar em{position:absolute;top:0;bottom:0;right:0;width:calc(100% - var(--p));background:var(--line)}
.bar span{z-index:1}
.thin{background:linear-gradient(90deg,var(--b0),var(--b1) 35%,var(--b2) 60%,var(--b3) 80%,var(--b4))}
.thin i{width:calc(100% - var(--p));margin-left:var(--p);background:var(--line)}
/* toy buttons wear the move they cause */
.toyb button[data-week="9"]{border-color:var(--b4)}.toyb button[data-week="7"]{border-color:var(--b2)}.toyb button[data-week="3"]{border-color:var(--b1)}
.toyb button:active{transform:translateY(1px)}
.shopcard,.pcard{position:relative}
.shopcard::before,.pcard::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:1;background:linear-gradient(90deg,var(--b4) 0 20%,var(--b3) 0 40%,var(--b2) 0 60%,var(--b1) 0 80%,var(--b0) 0)}
@media (max-width:760px){.hero::before{width:480px;height:480px;right:-210px;top:-150px;bottom:auto;opacity:.2}}

/* ── the shop editor's Share card part ─────────────────────────────────── */
.ogpv{position:relative;margin:0;border-radius:12px;overflow:hidden;background:var(--line);aspect-ratio:1200/630;cursor:crosshair}
.ogpv img{display:block;width:100%;height:100%}
.ogbusy{position:absolute;right:10px;top:10px;width:18px;height:18px;border-radius:50%;border:3px solid #fff8;border-top-color:var(--acc,var(--accent));animation:ogspin .8s linear infinite}
@keyframes ogspin{to{transform:rotate(360deg)}}
.lbl2{margin:10px 0 0;font-size:14px;font-weight:600;color:var(--soft)}
.oglay{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.oglay button{display:grid;gap:4px;justify-items:center;padding:8px 4px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:13px;min-height:44px}
.oglay button.on,.seg button.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.oglay svg{width:100%;max-width:60px;height:auto}
.ogpics{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.ogpics button{flex:none;width:84px;height:56px;padding:0;border:2px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.ogpics button.on{border-color:var(--ink)}
.ogpics img{width:100%;height:100%;object-fit:cover;display:block}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{padding:10px 14px;min-height:44px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit}
.ogsw{display:flex;flex-wrap:wrap;gap:10px}
.ogsw button{width:44px;height:44px;border-radius:50%;border:2px solid var(--bg);box-shadow:0 0 0 1.5px var(--line);padding:0}
.ogsw button.on{box-shadow:0 0 0 3px var(--ink)}