/* Base reset (was injected by the claude.ai artifact wrapper) */
:root{color-scheme:light;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}body{margin:0;font:14px system-ui,sans-serif}img{max-width:100%}[hidden]{display:none!important}

/* Layout: one centered column — banner, then folder-tab file (tabs sit on a folder body like the banner's "open" folder), sticky edit bar for the owner. Single pastel look by choice. */
:root{
  --bg:#fff4f8; --bg2:#e6f8f6;
  --panel:#ffffff; --tab:#f6dde7; --tab-ink:#7e4f63;
  --ink:#4b2c36; --muted:#7a5865; --line:#f2d3df;
  --pink:#d4507f; --pink-ink:#b8366a; --pink-soft:#ffd3e3; --aqua:#7ddcd0; --aqua-soft:#d4f5f0; --aqua-ink:#14726a;
  --folder:#7d6957;
  --ok:#1d7656; --ok-bg:#dcf6ea; --no:#b52a55; --no-bg:#ffe0e8; --bk:#8a5a10; --bk-bg:#fff0cf; --rs:#56496a; --rs-bg:#ebe6f2;
  --display:"Mali","IBM Plex Sans Thai Looped",system-ui,sans-serif;
  --body:"IBM Plex Sans Thai Looped","Noto Sans Thai",system-ui,sans-serif;
  --pixel:"Silkscreen",ui-monospace,monospace;
  color-scheme:light;
}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;min-height:100vh;min-height:100dvh;-webkit-text-size-adjust:100%;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 45%,var(--bg2) 100%)}
h1,h2,h3,p,span,div{overflow-wrap:break-word}
*{box-sizing:border-box}
.wrap{max-width:960px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:clamp(10px,3vw,18px) 120px;display:flex;flex-direction:column;gap:clamp(12px,3vw,18px)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--aqua);outline-offset:2px;border-radius:10px}

.top{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.brand{display:flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap}
.brand h1{font-family:var(--display);font-weight:700;font-size:clamp(24px,7vw,40px);line-height:1;margin:0;color:var(--pink);letter-spacing:.01em;text-shadow:0 2px 0 #fff;white-space:nowrap;overflow-wrap:normal}
.brand h1 b{color:var(--ink);font-weight:700}
.gametag{font-family:var(--pixel);font-size:13px;white-space:nowrap;background:var(--aqua);color:#123b37;padding:3px 10px;border-radius:99px;letter-spacing:.06em}
.openpill{flex:none;white-space:nowrap;border:0;font-family:var(--display);font-weight:600;font-size:clamp(13px,3.6vw,14px);padding:6px clamp(10px,3vw,14px);border-radius:12px 12px 12px 4px;background:var(--folder);color:#fff;display:inline-flex;align-items:center;gap:6px}
.openpill .dot{width:8px;height:8px;border-radius:50%;background:#bdf5dc;box-shadow:0 0 0 3px #ffffff55}
.openpill.closed{background:#80737a}
.openpill.closed .dot{background:#ffc1cf}
.editbtn{flex:none;white-space:nowrap;border:1.5px solid var(--line);background:var(--panel);border-radius:99px;padding:7px 14px;font-size:14px;color:var(--ink)}

.banner{position:relative;border-radius:clamp(14px,4vw,22px);overflow:hidden;background:var(--panel);box-shadow:0 10px 30px -18px #e2558e66}
.banner img{display:block;width:100%;aspect-ratio:3/1;object-fit:cover}
.slot{display:grid;place-items:center;border:1.5px dashed #e3a9bf;border-radius:18px;background:#fffafc;color:var(--muted);text-align:center;padding:14px;width:100%;font-size:14px;gap:4px}
.slot .plus{font-size:28px;line-height:1;color:var(--pink-ink)}
.banner .slot{aspect-ratio:3/1;border-radius:22px}
.banner .chg{position:absolute;right:10px;bottom:10px}

.file{display:flex;flex-direction:column}
.tabs{display:flex;gap:6px;align-items:flex-end;position:sticky;top:env(safe-area-inset-top,0px);z-index:5;padding-top:6px;background:linear-gradient(var(--bg) 70%,transparent)}
.tab{flex:1 1 0;min-width:0;border:0;background:var(--tab);color:var(--tab-ink);border-radius:14px 14px 0 0;padding:8px clamp(6px,2vw,12px) 7px;text-align:left;display:flex;flex-direction:column;gap:0;transition:background .15s}
.tab .t{font-family:var(--display);font-weight:700;font-size:clamp(13px,3.5vw,15px);line-height:1.3}
.tab .s{font-size:14px;line-height:1.3}
.tab[aria-selected="true"]{background:var(--panel);color:var(--ink);padding-top:12px;box-shadow:0 -6px 16px -12px #e2558e55}
.tab[aria-selected="true"] .t{color:var(--pink-ink)}
.panel{background:var(--panel);border-radius:0 0 clamp(16px,4vw,22px) clamp(16px,4vw,22px);padding:clamp(14px,3.5vw,24px) clamp(10px,3vw,26px) clamp(16px,4vw,26px);display:flex;flex-direction:column;gap:clamp(12px,3vw,18px);min-width:0;box-shadow:0 18px 40px -26px #e2558e55}
.panel h2{font-family:var(--display);font-size:clamp(17px,4.6vw,21px);margin:0;line-height:1.3;text-wrap:balance}
.hint{font-size:14px;color:var(--muted);margin:0;max-width:65ch;text-wrap:pretty}
.empty{text-align:center;color:var(--muted);padding:34px 10px;font-size:14px}
.empty .big{font-family:var(--display);font-size:19px;color:var(--pink-ink);display:block}

/* rates */
.blocks{display:flex;flex-direction:column;gap:14px}
.blk-img img{display:block;width:100%;border-radius:16px}
.blk-text{white-space:pre-wrap;font-size:16px;margin:0;max-width:70ch;text-wrap:pretty}
.ed-row{display:flex;flex-direction:column;gap:8px;border:1.5px solid var(--line);border-radius:18px;padding:10px;background:#fffafc}
.ed-tools{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.ed-tools .lbl{margin-right:auto;font-family:var(--pixel);font-size:14px;color:var(--muted);letter-spacing:.05em}
.ib{border:1.5px solid var(--line);background:var(--panel);border-radius:10px;min-width:36px;height:36px;padding:0 10px;font-size:14px;color:var(--ink)}
.ib.del{color:var(--no);border-color:#f6c3d1}
.addrow{display:flex;gap:8px;flex-wrap:wrap}
.add{flex:1 1 130px;border:1.5px dashed #e3a9bf;background:transparent;border-radius:14px;padding:12px;color:var(--pink-ink);font-weight:600}
textarea,input[type=text],input[type=number],input[type=email],input[type=password],input[type=datetime-local],select{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--panel)}
textarea{min-height:80px;resize:vertical;field-sizing:content}
.ttl-in{font-family:var(--display);font-size:18px;font-weight:700}

/* events */
.ev{display:flex;flex-direction:column;gap:12px}
.ev+.ev{border-top:2px dotted var(--line);padding-top:18px}
.ev-head{display:flex;align-items:center;gap:10px}
.ev-head h2{flex:1;min-width:0}
.skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(140px,40vw,200px)),1fr));gap:clamp(8px,2.4vw,14px)}
.skin{display:flex;flex-direction:column;gap:6px;min-width:0}
.skin .pic{aspect-ratio:3/4;border-radius:16px;background:linear-gradient(160deg,var(--pink-soft),var(--aqua-soft));overflow:hidden;display:grid;place-items:center;max-width:100%;border:0;padding:0}
.skin .pic img{width:100%;height:100%;object-fit:cover;display:block}
.skin .slot{aspect-ratio:3/4;padding:8px}
.skin .cap{font-size:15px;font-weight:600;line-height:1.35;overflow-wrap:anywhere;margin:0}

/* rent */
.ids{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(140px,40vw,250px)),1fr));gap:clamp(10px,2.6vw,16px)}
.ids.editing{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.idc{border:1.5px solid var(--line);border-radius:clamp(14px,4vw,20px);overflow:hidden;display:flex;flex-direction:column;background:var(--panel);min-width:0;container-type:inline-size}
.idc .pic{aspect-ratio:4/3;background:linear-gradient(160deg,var(--pink-soft),var(--aqua-soft));border:0;padding:0;display:block;width:100%;max-width:100%}
.idc .pic img{width:100%;height:100%;object-fit:cover;display:block}
.idc .pic .ph{display:grid;place-items:center;height:100%;font-family:var(--pixel);color:var(--tab-ink);font-size:14px}
.idc .slot{aspect-ratio:4/3;border-radius:0;border-width:0 0 2px}
.idc .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;flex:1}
.idc .name{font-family:var(--display);font-weight:700;font-size:clamp(15px,4vw,17px);margin:0;line-height:1.3;overflow-wrap:anywhere}
.ranks{display:flex;flex-direction:column;gap:2px;margin:0;padding-block:8px;border-block:1px dashed var(--line)}
.rk{display:flex;justify-content:space-between;gap:8px;min-width:0;font-size:14px}
.rk dt{color:var(--muted)}
.rk dd{margin:0;font-weight:600;text-align:right;overflow-wrap:break-word}
.price{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.price .p{font-family:var(--display);font-weight:700;font-size:20px;color:var(--pink-ink)}
.price .u{font-size:14px;color:var(--muted)}
.price .sep{color:var(--line)}
.status{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;padding:5px 12px;border-radius:99px;width:fit-content;max-width:100%;margin-top:auto;white-space:nowrap}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.st-free{background:var(--ok-bg);color:var(--ok)}
.st-busy{background:var(--no-bg);color:var(--no)}
.st-booked{background:var(--bk-bg);color:var(--bk)}
.stpick{display:flex;gap:6px;flex-wrap:wrap}
.stpick button{border:1.5px solid var(--line);background:var(--panel);border-radius:99px;padding:6px 14px;font-size:14px}
.stpick button[aria-pressed="true"].f{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.stpick button[aria-pressed="true"].b{background:var(--no-bg);color:var(--no);border-color:var(--no)}
.stpick button[aria-pressed="true"].k{background:var(--bk-bg);color:var(--bk);border-color:var(--bk)}
.stpick button[aria-pressed="true"].r{background:var(--rs-bg);color:var(--rs);border-color:var(--rs)}
.st-rest{background:var(--rs-bg);color:var(--rs)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fl{display:flex;flex-direction:column;gap:3px;min-width:0}
.fl span{font-size:14px;color:var(--muted)}

/* contacts */
.contacts{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.contacts h2{font-family:var(--display);margin:0;font-size:18px;color:var(--ink)}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{display:inline-flex;gap:6px;align-items:center;background:var(--panel);border:1.5px solid var(--line);border-radius:99px;padding:7px 14px;color:var(--ink);text-decoration:none;font-weight:500;font-size:14px;max-width:100%;overflow-wrap:anywhere}
.chip:hover{border-color:var(--pink)}
.cted{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;gap:6px;width:100%;max-width:560px}

/* edit bar */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;border-top:1.5px solid var(--line);padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bar-in{max-width:960px;margin:0 auto;display:flex;gap:10px;align-items:center}
.bar .msg{flex:1;min-width:0;font-size:14px;color:var(--muted)}
.btn{border:0;border-radius:14px;padding:10px 18px;font-weight:600}
.btn.pri{background:var(--pink-ink);color:#fff}
.btn.pri:disabled{opacity:.5;cursor:default}
.btn.sec{background:var(--tab);color:var(--ink)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(108px + env(safe-area-inset-bottom,0px));background:var(--ink);color:#fff;padding:9px 16px;border-radius:12px;font-size:14px;z-index:30;max-width:calc(100% - 32px);text-align:center}
.lb{position:fixed;inset:0;z-index:40;background:#2a1820e6;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));border:0;width:100%}
.lb img{max-height:100%;max-width:100%;border-radius:14px;object-fit:contain}
.zoom{cursor:zoom-in}
/* compact ID card when its column is narrow (2-up on phones) */
@container (max-width:230px){
  .idc .body{padding:10px 10px 12px;gap:8px}
  .rk{flex-direction:column;gap:0}.rk dd{text-align:left}
  .price{flex-direction:column;align-items:flex-start;gap:0}
  .price .sep{display:none}
  .price .p{font-size:17px}
    .status{padding:4px 10px}
}
@media (max-width:420px){.tab .s{display:none}.tab .t.full{display:none}.tab .t.m{display:block}.grid2{grid-template-columns:1fr}.bar .btn{padding:9px 14px}.bar .msg{font-size:14px}}
@media (max-width:340px){.gametag{display:none}}
/* added: intro, rate table, notes, event meta, id note, footer */
.intro{margin:0;max-width:65ch;text-wrap:pretty}
.tblwrap{overflow-x:auto;border:1.5px solid var(--line);border-radius:16px}
table.rate{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.rate th{font-size:14px;font-weight:600;color:var(--muted);text-align:left;padding:10px 14px;background:#fff6f9;border-bottom:1.5px solid var(--line)}
table.rate th:last-child,table.rate td:last-child{text-align:right}
table.rate td{padding:11px 14px;border-bottom:1px dashed var(--line);font-size:16px}
table.rate tr:last-child td{border-bottom:0}
table.rate td.pr{font-family:var(--display);font-weight:700;color:var(--pink-ink);white-space:nowrap}
.notes h2{font-size:17px}
.ev.ed-row .skins{grid-template-columns:repeat(auto-fill,minmax(min(100%,128px),1fr))}
.tab .m{display:none}
.notes ul{margin:6px 0 0;padding-left:1.4em;display:flex;flex-direction:column;gap:2px}
.notes li::marker{content:"♥  ";color:var(--pink)}
.rowed{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:6px;align-items:center}
.skin{position:relative}
.badge{position:absolute;top:8px;right:8px;font-size:14px;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--panel);color:var(--pink-ink);box-shadow:0 1px 4px #4b2c3622}
.badge.ending{background:var(--no);color:#fff}
.badge.open{background:var(--ok);color:#fff}
.skin .meta{display:flex;flex-direction:column;gap:0;font-size:14px;color:var(--muted)}
.skin .from{color:var(--ink)}
.skin .from b{font-family:var(--display);color:var(--pink-ink);font-size:17px}
.idc .note{font-size:14px;color:var(--muted);margin:0;line-height:1.45}
.fineprint{font-size:14px;color:var(--muted);margin:0;text-align:center;text-wrap:pretty}
.thanks{font-family:var(--display);color:var(--pink-ink);margin:4px 0 0;font-size:15px;text-wrap:balance}
.chip .pf{font-weight:700}
.cted{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto}
.cted select{min-width:0}
/* added for the hosted site: loading/error box, footer login link, edit-bar logout, login dialog */
.statebox{background:var(--panel);border-radius:clamp(16px,4vw,22px);padding:40px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.statebox p{margin:0;color:var(--muted)}
.statebox .big{font-family:var(--display);font-size:19px;color:var(--pink-ink)}
.ownerlink{margin:-6px 0 0;text-align:center}
.linkbtn{border:0;background:none;padding:6px 4px;font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.bar-info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.bar-info .linkbtn{padding:2px 0}
.login{border:0;border-radius:22px;padding:clamp(18px,5vw,26px);width:min(400px,calc(100% - 32px));background:var(--panel);color:var(--ink)}
.login::backdrop{background:#2a1820b3}
.login form{display:flex;flex-direction:column;gap:12px}
.login h2{font-family:var(--display);font-size:21px;margin:0;line-height:1.3}
.login .err{margin:0;font-size:14px;color:var(--no)}
.login .row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
/* orders: header button, per-item links, order form, status page, seller list */
.ctabtn{flex:none;white-space:nowrap;background:var(--pink-ink);color:#fff;border-radius:99px;padding:7px 14px;font-size:14px;font-weight:600;text-decoration:none}
a.editbtn{text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.cnt{background:var(--pink-ink);color:#fff;border-radius:99px;padding:0 7px;font-size:14px;line-height:1.5;font-weight:600}
.ordnow{align-self:flex-start;text-decoration:none;display:inline-block}
.ordlink{display:inline-block;width:fit-content;font-size:14px;font-weight:600;color:var(--pink-ink);text-decoration:underline;text-underline-offset:3px;padding:2px 0}
.sheet{background:var(--panel);border-radius:clamp(16px,4vw,22px);padding:clamp(16px,4vw,26px) clamp(14px,3.5vw,26px);display:flex;flex-direction:column;gap:14px;min-width:0;box-shadow:0 18px 40px -26px #e2558e55}
.sheet h2{font-family:var(--display);font-size:clamp(19px,5vw,23px);margin:0;line-height:1.3}
.sheet h3{font-family:var(--display);font-size:17px;margin:0;line-height:1.3}
.sheet .err{margin:0;color:var(--no);font-size:14px;font-weight:600}
.crumb{margin:0}.crumb .linkbtn{padding-left:0}
.osec{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:2px dotted var(--line)}
.kinds button[aria-pressed="true"],.filt button[aria-pressed="true"],.plat button[aria-pressed="true"]{background:var(--pink-soft);border-color:var(--pink-ink);color:var(--ink);font-weight:600}
.total{margin:0;font-size:15px}.total:empty{display:none}
.total b{font-family:var(--display);color:var(--pink-ink);font-size:19px}
.paybox{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:4px 0}
.qr{border:0;padding:0;background:none;width:100%;max-width:240px}
.qr img{display:block;width:100%;border-radius:12px;border:1.5px solid var(--line)}
.paytext{margin:0;white-space:pre-wrap;font-weight:500}
.rslot{min-height:120px}
.rprev{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.rprev img{display:block;max-width:220px;max-height:300px;border-radius:12px;border:1.5px solid var(--line)}
.cted2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:6px}
.captcha{min-height:65px}
.btn.big{padding:13px 18px;font-size:17px}
.done{align-items:center;text-align:center}
.done p{margin:0}
.code{font-family:var(--pixel);font-size:clamp(26px,8vw,34px);color:var(--pink-ink);letter-spacing:.06em}
.row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.row .btn{text-decoration:none}
.lookup{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.lookup .fl{flex:1 1 200px}
.recent{display:flex;flex-direction:column;gap:6px}
.recent .chips{justify-content:flex-start}
.olist{display:flex;flex-direction:column;gap:12px}
.ocard{border:1.5px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ohead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.ohead h3{font-family:var(--pixel);font-weight:400;font-size:17px;margin:0;letter-spacing:.04em}
.ohead .status{margin-top:0}
.osub{margin:-6px 0 0;font-size:14px;color:var(--muted)}
.odl{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;font-size:15px}
.odl>div{display:contents}
.odl dt{color:var(--muted)}
.odl dd{margin:0;overflow-wrap:anywhere}
.odl a{color:var(--pink-ink)}
.rcpt{border:0;padding:0;background:none;width:fit-content;max-width:100%}
.rcpt img{display:block;max-width:180px;max-height:240px;border-radius:12px;border:1.5px solid var(--line)}
.oact{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.payed-in{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.payed .qr{max-width:180px}
.payed .slot{max-width:320px}
@media (max-width:420px){.odl{grid-template-columns:1fr;gap:0}.odl dd{margin-bottom:6px}.cted2{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.ranks.pk{border-top:0;padding-top:0}
.ranks.pk .rk{flex-direction:row;justify-content:space-between}
.ranks.pk dd{text-align:right}