/* =====================================================================
   MAYU DRIVE INVITE · UI SYSTEM v8
   UI1 · Corkboard   — บอร์ดไม้ก๊อก โน้ตกระดาษ โพลารอยด์    (หัวข้อ: Itim)
   UI2 · Scrap Lab   — ซีนฟ้า/ชมพู เส้นดำ เงาแข็ง สติกเกอร์   (หัวข้อ: Kanit)
   UI3 · Bubble Chat — หน้าแชต บับเบิลข้อความ                (หัวข้อ: Prompt)
   UI4 · Pastel OS   — เดสก์ท็อป Y2K ฟ้า-ชมพู หน้าต่าง/เพลเยอร์  (หัวข้อ: Mitr + Pixelify Sans)
   เนื้อความทุกธีม: Anuphan
   - ไม่มีรูปวิว/กระต่ายสำเร็จรูปแล้ว: ทุกจุดเป็น "ช่องรูป" (.hero-photo / .hero-logo / .art)
     ที่แสดงรูปจากหลังบ้าน หรือกรอบว่างมีเส้นประวิ่งเมื่อยังไม่ใส่รูป
   - ลูกเล่น animation ปิดอัตโนมัติเมื่อผู้ใช้ตั้ง "ลดการเคลื่อนไหว"
   ===================================================================== */

/* ---------- 1) neutral defaults (Super Admin + fallback) ---------- */
body{
  --bg:#f6f5fa;--ink:#2a2838;--muted:#6f6b80;--link:#5941ad;--eyebrow:#7b64c4;
  --surface:#fff;--surface-2:#f6f3fd;--line:#e7e3f0;
  --cta:var(--tenant-primary,#5941ad);--hi:var(--tenant-accent,#eb6c9e);--cta-ink:#fff;
  --r:20px;--r-sm:14px;--r-btn:12px;--r-field:12px;
  --card-border:1px solid var(--line);--sub-border:1px solid var(--line);
  --card-shadow:0 12px 30px rgba(60,50,100,.07);--btn-shadow:none;
  --outline-border:1px solid #d9d2ee;--field-bg:#fff;--field-border:1px solid #dcd8e8;
  --font-head:"Anuphan",system-ui,sans-serif;--font-body:"Anuphan",system-ui,sans-serif;--head-weight:700;
  --backdrop:rgba(31,24,60,.5);--focus:#9c8cf0;
  --ph-bg:#f4f2fa;--ph-line:#b9b0d8;--ph-ink:#8a82a8;
  --ease-pop:cubic-bezier(.2,.9,.3,1.35);--ease-out:cubic-bezier(.2,.8,.2,1);
  background:var(--bg);color:var(--ink);font-family:var(--font-body);overflow-x:hidden;
}
html{scroll-behavior:smooth}
/* ระหว่างหน้าโหลด: หยุด animation ของหน้าไว้ก่อน เพื่อให้เริ่มเล่นพร้อมกันตอนเปิดหน้า */
html.booting body *{animation-play-state:paused!important}
html.booting #bootLoader,html.booting #bootLoader *{animation-play-state:running!important}
.wrap{z-index:1}
.deco{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.deco i{position:absolute;display:block}
.typing,.sticker{display:none}

/* ---------- 2) shared components ---------- */
.brand,.hero h1,.section-intro h1,.section-head h2,.modal-head h2,.panel h2,.login-card h1,.group b,.group-editor h3,.package-card h3{font-family:var(--font-head);font-weight:var(--head-weight)}
a{color:var(--link)}
.eyebrow{color:var(--eyebrow)}
.hero p,.note,.manage-help,.tiny,.hint,.account-label,.package-meta,.admin-welcome,.folder small,.tile span,.request-card small,.group-card small,.group small,.section-head span,.footer,.login-card p,.section-intro p{color:var(--muted)}
.top-link{color:var(--link)}
textarea:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--focus)!important;outline-offset:2px}

.btn{position:relative;overflow:hidden;isolation:isolate;background:var(--cta);color:var(--cta-ink);border-radius:var(--r-btn);box-shadow:var(--btn-shadow);transition:transform .18s var(--ease-pop),box-shadow .18s ease,filter .18s ease}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);translate:-130% 0;pointer-events:none}
.btn:hover:not(:disabled)::after{translate:130% 0;transition:translate .75s ease}
.btn:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-2px) scale(1.02)}
.btn:active:not(:disabled){transform:translateY(1px) scale(.97)}
.btn.send{background:var(--hi)}
.btn.outline{background:var(--surface);color:var(--ink);border:var(--outline-border);box-shadow:none}
.btn.secondary{background:var(--surface);color:var(--ink);border:var(--outline-border);box-shadow:none}
.modal .btn::after,.btn.send::after{animation:btnShine 3.2s ease-in-out infinite}
@keyframes btnShine{0%,55%{translate:-130% 0}85%,100%{translate:130% 0}}
input,textarea,select{background:var(--field-bg);border:var(--field-border);border-radius:var(--r-field);color:var(--ink);transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease}
input:focus,textarea:focus,select:focus{transform:translateY(-1px)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted),transparent 30%)}

.status,.message{background:var(--surface-2);color:var(--ink);border-radius:var(--r-field)}
.status.error,.message.error{background:#ffecee;color:#a3303f}
.status.success,.message.success{background:#e5f6e9;color:#22683b}

.panel,.account,.tenant-bar,.package-card,.login-card,.state,.admin-tabs{background:var(--surface);border:var(--card-border);border-radius:var(--r);box-shadow:var(--card-shadow)}
.request-card,.group-card,.tile,.saved-item,.folder,.saved-panel{background:var(--surface-2);border:var(--sub-border);border-radius:var(--r-sm)}
.request-card,.group-card,.tile,.saved-item{transition:transform .25s var(--ease-pop),box-shadow .25s ease}
.request-card:hover,.group-card:hover,.tile:hover,.saved-item:hover{transform:translateY(-3px)}
.folder{border-style:dashed}
.saved-panel[open] summary{border-bottom:var(--sub-border)}
.saved-item{background:var(--surface)}
.saved-item.active{box-shadow:0 0 0 2px var(--cta)}
.saved-choose{color:var(--ink)}
.line{background:var(--line)}
.results li{border-bottom:1px solid var(--line);animation:popIn .45s var(--ease-pop) both}
.results .ok{color:#237044}.results .bad{color:#b23b45}
.admin-tabs a{color:var(--ink);border-radius:var(--r-btn);transition:transform .2s var(--ease-pop),background .2s ease}
.admin-tabs a:hover{background:var(--surface-2);transform:translateY(-2px)}
.step{background:var(--hi);color:#fff;border-radius:50%;animation:pulse 2.4s ease-in-out infinite}
.locked-pill{background:var(--surface-2);color:var(--link);border-radius:999px}
.countdown{color:var(--link);animation:heartbeat 2.4s ease-in-out infinite}
.brand-mark{background:var(--surface-2);border-radius:12px;overflow:hidden;transition:transform .4s var(--ease-pop)}
.brand:hover .brand-mark{transform:rotate(-12deg) scale(1.12)}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.login-logo{background:var(--surface-2);border-radius:18px;animation:floaty 3.6s ease-in-out infinite}

dialog{background:var(--surface);border-radius:var(--r);box-shadow:0 30px 80px rgba(20,20,40,.28)}
dialog[open]{animation:dlgIn .5s var(--ease-pop) both}
dialog[open]::backdrop{animation:fadeIn .35s ease both}
dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(3px)}
.close{background:var(--surface-2);color:var(--ink);border-radius:var(--r-btn);transition:transform .35s var(--ease-pop)}
.close:hover{transform:rotate(90deg) scale(1.1)}
.rules{background:var(--surface-2);border-radius:var(--r-sm)}
dialog[open] .rules{animation:riseIn .6s .12s var(--ease-out) both}
dialog[open] form:not(.hidden){animation:riseIn .6s .22s var(--ease-out) both}
.footer{border-radius:var(--r-sm)}

/* image slots (ช่องใส่รูป) */
.ph{position:relative;overflow:hidden;color:var(--ph-ink);
  background:
    linear-gradient(90deg,var(--ph-line) 50%,transparent 0) repeat-x 0 0/16px 2px,
    linear-gradient(90deg,var(--ph-line) 50%,transparent 0) repeat-x 0 100%/16px 2px,
    linear-gradient(0deg,var(--ph-line) 50%,transparent 0) repeat-y 0 0/2px 16px,
    linear-gradient(0deg,var(--ph-line) 50%,transparent 0) repeat-y 100% 0/2px 16px,
    var(--ph-bg);
  animation:ants 1.1s linear infinite;letter-spacing:.04em}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);animation:shimmer 2.8s ease-in-out infinite}
.ph-icon{display:block;width:38px;height:32px;background:currentColor;opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 32'%3E%3Cpath d='M4 2h30a3 3 0 0 1 3 3v22a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zm0 4v16l9-9 7 7 5-5 9 9V6zm24 1a4 4 0 1 1 0 8 4 4 0 0 1 0-8z' fill='black' fill-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 32'%3E%3Cpath d='M4 2h30a3 3 0 0 1 3 3v22a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zm0 4v16l9-9 7 7 5-5 9 9V6zm24 1a4 4 0 1 1 0 8 4 4 0 0 1 0-8z' fill='black' fill-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:iconBob 2.4s ease-in-out infinite}
.art .ph{position:absolute;inset:0}
.art img{animation:none}
.hero-photo img{animation:kenBurns 14s ease-in-out infinite alternate}
.hero-logo{transition:transform .5s var(--ease-pop)}
.hero-logo:hover{transform:rotate(-10deg) scale(1.08)}
.hero-logo .ph{font-family:"Space Mono",ui-monospace,monospace;font-size:.9rem;letter-spacing:.12em}

/* ticker */
.ticker{font-weight:600;font-size:.85rem}
.ticker-track{animation:marquee 28s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}

/* group cards */
.group{--mx:0;--my:0;transform-style:preserve-3d}
.group:hover{transform:perspective(800px) rotateX(calc(var(--my)*-9deg)) rotateY(calc(var(--mx)*11deg)) translateY(-8px) rotate(0)}
.group .go{transition:letter-spacing .3s ease,translate .3s var(--ease-pop)}
.group:hover .go{letter-spacing:.06em;translate:4px 0}
.group:hover .art img{transform:scale(1.08) rotate(.6deg)}
.state{position:relative;overflow:hidden}
.state::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);animation:shimmer 1.8s ease-in-out infinite}

/* reveal + hero entrance (เปิดเมื่อ JS พร้อม) */
.js-anim .reveal{opacity:0}
.js-anim .reveal.in{opacity:1;animation:var(--reveal-anim,revealUp) .8s var(--ease-out) calc(var(--i,0)*90ms) both}
.js-anim .top{animation:dropDown .7s var(--ease-pop) both}
.js-anim .hero-copy>*,.js-anim .dashboard-hero>div:first-child>*{animation:riseIn .8s var(--ease-out) both}
.js-anim .hero-copy>:nth-child(2){animation-delay:.1s}.js-anim .hero-copy>:nth-child(3){animation-delay:.2s}.js-anim .hero-copy>:nth-child(4){animation-delay:.3s}
.js-anim .steps li{animation:popIn .6s var(--ease-pop) both}
.js-anim .steps li:nth-child(1){animation-delay:.45s}.js-anim .steps li:nth-child(2){animation-delay:.58s}.js-anim .steps li:nth-child(3){animation-delay:.71s}
.steps b{animation:pulse 2.4s ease-in-out infinite}
.steps li:nth-child(2) b{animation-delay:.4s}.steps li:nth-child(3) b{animation-delay:.8s}
.js-anim .hero-photo{animation:photoIn 1s .25s var(--ease-pop) both}
.js-anim .hero-logo{animation:logoIn .9s .5s var(--ease-pop) both}

.pop-in{animation:popIn .5s var(--ease-pop) both}
.shake{animation:shake .5s ease both!important}

/* sparkles */
.click-spark{position:fixed;z-index:99999;pointer-events:none;font-size:18px;color:var(--hi);animation:clickSpark .8s var(--ease-out) forwards;text-shadow:0 2px 4px #fff}
.trail-dot{position:fixed;z-index:99998;pointer-events:none;font-size:12px;color:var(--hi);opacity:.8;translate:-50% -50%;animation:trail .7s ease-out forwards}

/* keyframes */
@keyframes clickSpark{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.3) rotate(var(--rot))}}
@keyframes trail{to{opacity:0;translate:-50% 10px;scale:.3}}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes spin{to{rotate:360deg}}
@keyframes sway{0%,100%{rotate:-3deg}50%{rotate:3deg}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--hi),transparent 50%)}60%{box-shadow:0 0 0 8px transparent}}
@keyframes heartbeat{0%,70%,100%{scale:1}78%{scale:1.06}86%{scale:.98}}
@keyframes ants{to{background-position:16px 0,-16px 100%,0 -16px,100% 16px,0 0}}
@keyframes shimmer{0%,40%{translate:-120% 0}100%{translate:120% 0}}
@keyframes iconBob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -4px;rotate:-4deg}}
@keyframes kenBurns{from{scale:1;translate:0 0}to{scale:1.12;translate:-2% -2%}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes dropDown{from{opacity:0;translate:0 -30px}to{opacity:1;translate:0 0}}
@keyframes riseIn{from{opacity:0;translate:0 22px;filter:blur(4px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes revealUp{from{opacity:0;translate:0 40px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes popIn{0%{opacity:0;scale:.6}70%{opacity:1;scale:1.06}100%{scale:1}}
@keyframes photoIn{from{opacity:0;scale:.7;rotate:-14deg}to{opacity:1;scale:1;rotate:0deg}}
@keyframes logoIn{0%{opacity:0;scale:0;rotate:-120deg}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes dlgIn{from{opacity:0;scale:.85;translate:0 30px}to{opacity:1;scale:1;translate:0 0}}
@keyframes fadeIn{from{opacity:0}}
@keyframes shake{0%,100%{translate:0}20%{translate:-10px}40%{translate:9px}60%{translate:-6px}80%{translate:4px}}
@keyframes rise{0%{translate:0 0;opacity:0}10%{opacity:1}90%{opacity:1}100%{translate:0 -110vh;opacity:0}}
@keyframes fall{0%{translate:0 -10vh;rotate:0deg;opacity:0}10%{opacity:1}100%{translate:60px 110vh;rotate:540deg;opacity:.2}}
@keyframes drift{0%,100%{translate:0 0}50%{translate:40px -12px}}
@keyframes wiggle{0%,100%{rotate:0deg}25%{rotate:-6deg}75%{rotate:6deg}}
@keyframes jelly{0%,100%{scale:1 1}30%{scale:1.08 .92}50%{scale:.95 1.05}70%{scale:1.03 .97}}

/* =====================================================================
   UI1 · CORKBOARD
   ===================================================================== */
body.theme-ui1{
  --bg:
    linear-gradient(90deg,rgba(206,178,140,.13) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(rgba(206,178,140,.13) 1px,transparent 1px) 0 0/28px 28px,
    #f7eee2;
  --ink:#4a3a32;--muted:#86705f;--link:#b35577;--eyebrow:#b35577;
  --surface:#fffaf2;--surface-2:#fbf1e3;--line:#ead8c2;
  --cta:var(--tenant-primary,#e8729c);--hi:var(--tenant-accent,#77a94a);
  --r:16px;--r-sm:12px;--r-btn:999px;--r-field:12px;
  --card-border:1.5px solid #e6d2ba;--sub-border:1.5px solid #eddcc6;
  --card-shadow:0 6px 0 #e6d1b7,0 16px 30px rgba(110,80,50,.10);
  --btn-shadow:0 4px 0 color-mix(in srgb,var(--cta),#000 22%);
  --outline-border:1.5px solid #dfc6aa;--field-bg:#fff;--field-border:1.5px solid #e4cfb8;
  --font-head:"Itim","Anuphan",system-ui,sans-serif;--head-weight:400;
  --backdrop:rgba(74,50,30,.45);--focus:#f3a9c2;
  --ph-bg:#fbf4ea;--ph-line:#d6b48e;--ph-ink:#a88766;
  --reveal-anim:pinDrop;
}
@keyframes pinDrop{0%{opacity:0;translate:0 -60px;rotate:-12deg}60%{opacity:1;translate:0 8px;rotate:4deg}80%{translate:0 -3px;rotate:-1deg}100%{translate:0 0;rotate:0deg}}
.theme-ui1 .deco i{background:url('/assets/flower.svg') center/contain no-repeat}
.theme-ui1 .deco .d1{left:3%;top:14%;width:46px;height:46px;animation:spin 14s linear infinite}
.theme-ui1 .deco .d2{right:4%;top:46%;width:38px;height:38px;animation:spin 18s linear infinite reverse,floaty 5s ease-in-out infinite}
.theme-ui1 .deco .d3,.theme-ui1 .deco .d4{background-image:url('/assets/cloud.svg');width:110px;height:62px;opacity:.85;animation:drift 12s ease-in-out infinite}
.theme-ui1 .deco .d3{left:4%;bottom:12%}.theme-ui1 .deco .d4{right:6%;top:8%;animation-duration:15s;animation-direction:reverse}
.theme-ui1 .deco .d5,.theme-ui1 .deco .d6,.theme-ui1 .deco .d7,.theme-ui1 .deco .d8{background:none;bottom:-40px;font-style:normal;color:#ef9ab7;font-size:22px;animation:rise 14s linear infinite}
.theme-ui1 .deco .d5::before,.theme-ui1 .deco .d6::before,.theme-ui1 .deco .d7::before,.theme-ui1 .deco .d8::before{content:"♡"}
.theme-ui1 .deco .d5{left:12%}.theme-ui1 .deco .d6{left:38%;animation-delay:-4s;font-size:16px}.theme-ui1 .deco .d7{left:66%;animation-delay:-8s;color:#9cc56f}.theme-ui1 .deco .d8{left:88%;animation-delay:-11s;font-size:28px}

.theme-ui1 .top{background:#fffaf2;border:1.5px solid #e6d2ba;border-radius:18px;padding:10px 14px 10px 12px;box-shadow:0 6px 0 #e6d1b7;position:relative}
.theme-ui1 .top::before{content:"";position:absolute;left:34px;top:-11px;width:84px;height:22px;background:rgba(246,183,203,.8);transform:rotate(-4deg);clip-path:polygon(3% 0,97% 4%,100% 100%,0 94%);animation:sway 4s ease-in-out infinite;transform-origin:left center}
.theme-ui1 .brand{color:#5c463b;font-size:1.3rem}
.theme-ui1 .brand-mark{background:#ffe4ec;border:3px solid #fff;border-radius:50%;box-shadow:0 3px 0 #efc4d2;color:#b35577}
.theme-ui1 .top-link{background:var(--cta);color:#fff;padding:8px 16px;border-radius:999px;box-shadow:0 4px 0 color-mix(in srgb,var(--cta),#000 22%);transition:transform .2s var(--ease-pop)}
.theme-ui1 .top-link:hover{transform:translateY(-2px) rotate(-3deg)}
.theme-ui1 .ticker{background:repeating-linear-gradient(45deg,#fbd3df 0 12px,#fde3eb 12px 24px);color:#8e3f5f;padding:7px 0;transform:rotate(-.8deg);box-shadow:0 4px 10px rgba(110,70,40,.12);border-radius:3px;font-family:"Itim",sans-serif;font-size:1rem}

.theme-ui1 .hero,.theme-ui1 .dashboard-hero{
  padding:34px;border-radius:12px;border:14px solid #c38f5c;
  background:
    radial-gradient(circle,rgba(120,80,40,.45) 1px,transparent 1.6px) 0 0/7px 7px,
    radial-gradient(circle,rgba(255,240,210,.35) 1px,transparent 1.6px) 3px 4px/9px 9px,
    #cda271;
  box-shadow:inset 0 0 0 2px #a8733f,inset 0 6px 16px rgba(80,50,20,.35),0 0 0 2px #9e6a38,0 18px 40px rgba(90,60,30,.22);
}
.theme-ui1 .hero-copy,.theme-ui1 .dashboard-hero>div:first-child{
  background:
    linear-gradient(90deg,transparent 30px,rgba(239,126,168,.45) 30px 32px,transparent 32px),
    repeating-linear-gradient(transparent 0 29px,#e8dfd0 29px 30px),#fffdf6;
  padding:30px 28px 26px 48px;transform:rotate(-1.2deg);transform-origin:50% 0;
  box-shadow:0 2px 0 #e9dfcc,0 14px 24px rgba(70,40,20,.28);animation:noteSwing 6s ease-in-out infinite;
}
@keyframes noteSwing{0%,100%{rotate:0deg}50%{rotate:.8deg}}
.theme-ui1 .hero-copy::before,.theme-ui1 .dashboard-hero>div:first-child::before{content:"";position:absolute;left:50%;top:-10px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb3c6,#e0507e 60%,#b33462);box-shadow:0 4px 5px rgba(0,0,0,.3);animation:pinBounce 1s .2s var(--ease-pop) both}
@keyframes pinBounce{0%{translate:0 -60px;opacity:0}60%{translate:0 4px;opacity:1}100%{translate:0 0}}
.theme-ui1 .hero .eyebrow{background:#ffe8ef;color:#a84770;padding:4px 12px;border-radius:999px;letter-spacing:.06em}
.theme-ui1 .hero h1{color:#3d2f29;font-size:clamp(2.2rem,5vw,3.8rem)}
.theme-ui1 .hero p{color:#6d5a4e}
.theme-ui1 .steps li{background:#fff;border:1.5px dashed #dcc0a0;border-radius:999px;padding:4px 12px 4px 5px;color:#5c463b}
.theme-ui1 .steps b{background:var(--cta);color:#fff;border-radius:50%}
/* polaroid photo + pinned logo + sticky note */
.theme-ui1 .hero-photo{right:6%;top:0;width:230px;height:220px;background:#fff;padding:10px 10px 38px;box-shadow:0 12px 22px rgba(60,35,15,.32);overflow:visible;transform-origin:50% 0}
.theme-ui1 .hero-photo>*{border-radius:2px;overflow:hidden}
.theme-ui1 .hero-photo::before{content:"";position:absolute;z-index:2;left:36%;top:-14px;width:66px;height:22px;background:rgba(200,228,160,.9);transform:rotate(-6deg)}
.js-anim body.theme-ui1 .hero-photo{animation:photoIn 1s .25s var(--ease-pop) both,polaroidSwing 5s 1.3s ease-in-out infinite}
@keyframes polaroidSwing{0%,100%{rotate:5deg}50%{rotate:9deg}}
.theme-ui1 .hero-photo{rotate:6deg}
.theme-ui1 .hero-logo{left:2%;bottom:6px;width:130px;height:130px;border-radius:50%;border:6px solid #fff;background:#fffaf2;box-shadow:0 10px 18px rgba(60,35,15,.3);overflow:visible}
.theme-ui1 .hero-logo>*{border-radius:50%;overflow:hidden}
.theme-ui1 .hero-logo::before{content:"";position:absolute;z-index:2;left:50%;top:-12px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c8f0a0,#77a94a 60%,#4f7a2c);box-shadow:0 4px 5px rgba(0,0,0,.3)}
.theme-ui1 .hero-art .sticker.s1{display:grid;place-items:center;position:absolute;right:0;bottom:0;width:118px;height:100px;background:#fff3a6;box-shadow:0 10px 16px rgba(60,35,15,.25);font:22px/1.2 "Itim",sans-serif;color:#6b5320;text-align:center;animation:noteFlutter 3.2s ease-in-out infinite;transform-origin:50% 0}
.theme-ui1 .hero-art .sticker.s1::after{content:var(--sticker-text,"อ่านกฎ\Aให้ครบนะ ♡");white-space:pre-line}
@keyframes noteFlutter{0%,100%{rotate:-7deg}50%{rotate:-2deg;scale:1.03}}
.theme-ui1 .hero-art .sticker.s2{display:block;position:absolute;left:44%;top:6px;width:44px;height:44px;background:url('/assets/flower.svg') center/contain no-repeat;animation:spin 8s linear infinite}

.theme-ui1 .section-head h2{display:inline;background:linear-gradient(transparent 58%,#ffd4e1 58%) no-repeat 0 0/0% 100%;padding:0 4px;font-size:1.6rem}
.theme-ui1 .section-head.in h2{animation:highlight 1s .3s var(--ease-out) forwards}
@keyframes highlight{to{background-size:100% 100%}}
.theme-ui1 .grid{gap:26px}
.theme-ui1 .group{background:#fff;border-radius:6px;padding:10px 10px 16px;box-shadow:0 2px 0 #eadfce,0 12px 22px rgba(100,70,40,.16);transform:rotate(var(--tilt,0deg))}
.theme-ui1 .group:nth-child(4n+1){--tilt:-1.4deg;--tape:rgba(246,183,203,.85)}
.theme-ui1 .group:nth-child(4n+2){--tilt:1deg;--tape:rgba(200,228,160,.85)}
.theme-ui1 .group:nth-child(4n+3){--tilt:-.6deg;--tape:rgba(255,226,130,.85)}
.theme-ui1 .group:nth-child(4n){--tilt:1.3deg;--tape:rgba(180,215,245,.85)}
.theme-ui1 .group::before{content:"";position:absolute;z-index:2;left:50%;top:-10px;width:70px;height:20px;background:var(--tape);transform:translateX(-50%) rotate(-3deg);clip-path:polygon(4% 0,96% 6%,100% 100%,0 92%)}
.theme-ui1 .group:hover::before{animation:wiggle .5s ease-in-out 2}
.theme-ui1 .group::after{content:counter(grp,decimal-leading-zero);position:absolute;z-index:2;right:-8px;top:112px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#fff;border:2px solid #f3b9cb;color:#c65a82;font:16px "Itim",sans-serif;box-shadow:0 4px 8px rgba(100,70,40,.18);transition:transform .5s var(--ease-pop)}
.theme-ui1 .group:hover::after{transform:rotate(360deg) scale(1.15)}
.theme-ui1 .group:hover{box-shadow:0 2px 0 #eadfce,0 24px 36px rgba(100,70,40,.24)}
.theme-ui1 .art{border-radius:3px}
.theme-ui1 .group b{color:#4a3a32;font-size:1.25rem}
.theme-ui1 .group .go{color:#c65a82}
.theme-ui1 .state{border:2px dashed #dcc0a0;box-shadow:none;background:#fffaf2}
.theme-ui1 .footer{background:#fffaf2;border:1.5px dashed #e0c9ad}

.theme-ui1 dialog{background:#fffdf7;border-radius:14px;box-shadow:0 0 0 8px #fff,0 0 0 10px #ecd8c0,0 30px 80px rgba(70,40,20,.35)}
.theme-ui1 dialog[open]{animation:pinDrop .7s var(--ease-out) both}
.theme-ui1 .modal-head .eyebrow{background:#ffe8ef;color:#a84770;padding:3px 11px;border-radius:999px}
.theme-ui1 .modal-head h2{font-size:1.8rem}
.theme-ui1 .rules{--lh:1.8em;line-height:var(--lh);padding:0 18px 0 30px;border-radius:4px;border-left:3px double #f0a5ba;background:repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px),#ecdfcc calc(var(--lh) - 1px) var(--lh)),#fffefb}
.theme-ui1 .close{background:#ffe8ef;color:#a84770;border-radius:50%}

/* admin */
.theme-ui1 .btn.send{box-shadow:0 4px 0 color-mix(in srgb,var(--hi),#000 22%)}
.theme-ui1 .admin-tabs{background:#fffaf2}
.theme-ui1 .admin-tabs a{border:1.5px solid transparent}
.theme-ui1 .admin-tabs a:hover{background:#ffe8ef;border-color:#f3c3d2;transform:translateY(-2px) rotate(-2deg)}
.theme-ui1 .panel::before{content:"";position:absolute;right:28px;top:-10px;width:66px;height:20px;background:rgba(246,183,203,.8);transform:rotate(4deg);clip-path:polygon(4% 0,96% 6%,100% 100%,0 92%)}
.theme-ui1 .panel:nth-of-type(even)::before{background:rgba(200,228,160,.85);transform:rotate(-3deg)}
.theme-ui1 .tile{background:#fff6c7;border:0;border-radius:3px;box-shadow:0 6px 12px rgba(100,70,40,.12);rotate:-.6deg}
.theme-ui1 .tile:nth-child(2){background:#ffe6ee;rotate:.7deg}
.theme-ui1 .tile:nth-child(3){background:#e9f4dc;rotate:-.3deg}
.theme-ui1 .tile:hover{rotate:0deg}
.theme-ui1 .folder{background:#fff;border:2px dashed #dcc0a0}
.theme-ui1 .package-card{background:#fbe9d0;border-color:#e4c79f}
.theme-ui1 .login-card{background:repeating-linear-gradient(transparent 0 29px,#efe5d5 29px 30px),#fffdf6;border-radius:6px;transform:rotate(-.6deg)}
.theme-ui1 .login-card::before{content:"";position:absolute;left:50%;top:-11px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb3c6,#e0507e 60%,#b33462);box-shadow:0 4px 5px rgba(0,0,0,.3)}
.theme-ui1 .login-logo{background:#ffe4ec;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 0 #efc4d2}
.theme-ui1 .dashboard-hero .eyebrow{color:#a84770}
.theme-ui1 .dashboard-hero h1{color:#3d2f29}

/* =====================================================================
   UI2 · SCRAP LAB
   ===================================================================== */
body.theme-ui2{
  --bg:
    radial-gradient(circle,rgba(255,255,255,.5) 1.4px,transparent 1.8px) 0 0/16px 16px,
    linear-gradient(90deg,#bfe6fb 0 50%,#f7bcd5 50% 100%);
  --ink:#26222b;--muted:#524c5a;--link:#26222b;--eyebrow:#26222b;
  --surface:#fff;--surface-2:#fff9d9;--line:#26222b;
  --cta:var(--tenant-primary,#26222b);--hi:var(--tenant-accent,#ff5f9e);
  --r:4px;--r-sm:3px;--r-btn:4px;--r-field:3px;
  --card-border:2px solid #26222b;--sub-border:2px solid #26222b;
  --card-shadow:6px 6px 0 #26222b;--btn-shadow:4px 4px 0 #26222b;
  --outline-border:2px solid #26222b;--field-bg:#fff;--field-border:2px solid #26222b;
  --font-head:"Kanit","Anuphan",system-ui,sans-serif;--head-weight:700;
  --backdrop:rgba(38,34,43,.55);--focus:#ff5f9e;
  --ph-bg:repeating-linear-gradient(45deg,#fff 0 10px,#f4f4f4 10px 20px);--ph-line:#26222b;--ph-ink:#26222b;
  --reveal-anim:slapIn;
}
body.theme-ui2 .ph{background:
    linear-gradient(90deg,#26222b 50%,transparent 0) repeat-x 0 0/16px 2px,
    linear-gradient(90deg,#26222b 50%,transparent 0) repeat-x 0 100%/16px 2px,
    linear-gradient(0deg,#26222b 50%,transparent 0) repeat-y 0 0/2px 16px,
    linear-gradient(0deg,#26222b 50%,transparent 0) repeat-y 100% 0/2px 16px,
    repeating-linear-gradient(45deg,#fff 0 10px,#f3f1f5 10px 20px);font-family:"Space Mono",monospace;text-transform:uppercase}
@keyframes slapIn{0%{opacity:0;scale:1.4;rotate:8deg}60%{opacity:1;scale:.96;rotate:-2deg}100%{scale:1;rotate:0deg}}
.theme-ui2 .deco .d1{left:2%;top:18%;width:120px;height:26px;background:repeating-linear-gradient(45deg,#fff36d 0 8px,#fff 8px 16px);border:2px solid #26222b;rotate:-12deg;animation:wiggle 3s ease-in-out infinite}
.theme-ui2 .deco .d2{right:2%;top:60%;width:64px;height:64px;border-radius:50%;background:#b7e36a;border:2px solid #26222b;box-shadow:4px 4px 0 #26222b;animation:floaty 4s ease-in-out infinite}
.theme-ui2 .deco .d3,.theme-ui2 .deco .d5,.theme-ui2 .deco .d7{width:54px;height:54px;background:#fff;border:2px solid #26222b;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:spin 10s linear infinite}
.theme-ui2 .deco .d3{left:4%;bottom:8%}
.theme-ui2 .deco .d5{right:10%;top:28%;width:36px;height:36px;background:#fff36d;animation-duration:7s;animation-direction:reverse}
.theme-ui2 .deco .d7{left:46%;bottom:3%;width:30px;height:30px;background:#ff9cc4}
.theme-ui2 .deco .d4{right:6%;top:6%;width:90px;height:52px;background:url('/assets/cloud.svg') center/contain no-repeat;animation:drift 9s ease-in-out infinite}
.theme-ui2 .deco .d6,.theme-ui2 .deco .d8{width:18px;height:18px;border-radius:50%;background:#26222b;animation:floaty 3s ease-in-out infinite}
.theme-ui2 .deco .d6{left:9%;top:42%}.theme-ui2 .deco .d8{right:14%;bottom:18%;background:#ff5f9e;animation-delay:-1s}

.theme-ui2 .top{background:#fff;border:2px solid #26222b;box-shadow:5px 5px 0 #26222b;border-radius:4px}
.theme-ui2 .brand{letter-spacing:-.01em;font-size:1.25rem}
.theme-ui2 .brand-mark{background:#fff36d;border:2px solid #26222b;border-radius:4px;rotate:-6deg;box-shadow:3px 3px 0 #26222b}
.theme-ui2 .top-link{background:#26222b;color:#fff;padding:8px 14px;border-radius:4px;box-shadow:3px 3px 0 #ff5f9e;transition:transform .2s var(--ease-pop),box-shadow .2s}
.theme-ui2 .top-link:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #ff5f9e}
.theme-ui2 .ticker{background:#26222b;color:#fff36d;border:2px solid #26222b;padding:8px 0;font-family:"Kanit",sans-serif;font-weight:600;letter-spacing:.04em;transform:rotate(-1deg);box-shadow:5px 5px 0 #ff5f9e}
.theme-ui2 .ticker-track{animation-duration:18s}

.theme-ui2 .hero,.theme-ui2 .dashboard-hero{background:#fff;border:2px solid #26222b;border-radius:4px;box-shadow:10px 10px 0 #26222b;padding:40px 36px 34px;margin-top:22px}
.theme-ui2 .hero::before,.theme-ui2 .dashboard-hero::before{content:"LAB REPORT · FILE No.07";position:absolute;z-index:2;left:18px;top:-15px;background:#26222b;color:#fff;font:700 11px/1 "Space Mono",monospace;letter-spacing:.12em;padding:8px 12px;rotate:-2deg}
.theme-ui2 .hero::after,.theme-ui2 .dashboard-hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 23px,rgba(61,139,242,.12) 23px 24px);pointer-events:none;z-index:0}
.theme-ui2 .hero-copy,.theme-ui2 .dashboard-hero>div:first-child{position:relative;z-index:1}
.theme-ui2 .hero-copy::after{content:"APPROVED ♡";position:absolute;right:0;top:-14px;border:3px solid #ff5f9e;color:#ff5f9e;padding:4px 12px;font:700 14px/1 "Space Mono",monospace;letter-spacing:.1em;border-radius:6px;rotate:-12deg;opacity:.85;animation:stamp .7s 1.2s var(--ease-pop) both}
@keyframes stamp{0%{opacity:0;scale:3;rotate:-30deg}100%{opacity:.85;scale:1;rotate:-12deg}}
.theme-ui2 .hero .eyebrow{background:#bfe6fb;border:2px solid #26222b;padding:3px 10px;letter-spacing:.08em}
.theme-ui2 .hero h1{color:#26222b;font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.1}
.theme-ui2 .hero h1::after{content:"";display:block;width:0;height:10px;margin-top:12px;background:#ff5f9e;border:2px solid #26222b;transform:skewX(-20deg);animation:barGrow .9s .6s var(--ease-pop) forwards}
@keyframes barGrow{to{width:140px}}
.theme-ui2 .hero p{color:#46404d}
.theme-ui2 .steps li{background:#fff;border:2px solid #26222b;padding:4px 12px 4px 5px;box-shadow:3px 3px 0 #26222b;transition:transform .2s var(--ease-pop)}
.theme-ui2 .steps li:hover{transform:translate(-2px,-2px) rotate(-2deg)}
.theme-ui2 .steps li:nth-child(1) b{background:#bfe6fb}.theme-ui2 .steps li:nth-child(2) b{background:#f7bcd5}.theme-ui2 .steps li:nth-child(3) b{background:#fff36d}
.theme-ui2 .steps b{border:2px solid #26222b;color:#26222b}
.theme-ui2 .hero-art{z-index:1}
.theme-ui2 .hero-photo{right:6%;top:6px;width:250px;height:190px;background:#fff;padding:9px;border:2px solid #26222b;box-shadow:7px 7px 0 #26222b;rotate:4deg;overflow:visible;transition:rotate .4s var(--ease-pop)}
.theme-ui2 .hero-photo:hover{rotate:0deg}
.theme-ui2 .hero-photo>*{overflow:hidden}
.theme-ui2 .hero-photo::before{content:"";position:absolute;z-index:2;left:30%;top:-14px;width:80px;height:22px;background:rgba(160,160,160,.6);rotate:-5deg}
.theme-ui2 .hero-logo{left:2%;bottom:8px;width:120px;height:120px;background:#fff36d;border:2px solid #26222b;box-shadow:5px 5px 0 #26222b;rotate:-8deg;padding:8px;animation:logoIn .9s .5s var(--ease-pop) both,jelly 3s 2s ease-in-out infinite}
.theme-ui2 .hero-logo .ph{background:transparent;animation:none}
.theme-ui2 .hero-art .sticker.s1{display:grid;place-items:center;position:absolute;right:0;bottom:-6px;width:92px;height:92px;border-radius:50%;background:#ff9cc4;border:2px solid #26222b;box-shadow:4px 4px 0 #26222b;font:700 18px/1.05 "Kanit",sans-serif;color:#26222b;text-align:center;animation:spin 12s linear infinite}
.theme-ui2 .hero-art .sticker.s1::after{content:var(--sticker-text,"xoxo\A♡");white-space:pre-line}
.theme-ui2 .hero-art .sticker.s2{display:block;position:absolute;left:40%;top:-8px;width:46px;height:46px;background:#b7e36a;border:2px solid #26222b;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:spin 6s linear infinite}

.theme-ui2 .section-head h2{display:inline-block;background:#26222b;color:#fff;padding:4px 14px;rotate:-1.5deg;font-size:1.5rem}
.theme-ui2 .section-head span{background:#fff;border:2px solid #26222b;padding:2px 10px;color:#26222b;font-weight:600;animation:wiggle 2.5s ease-in-out infinite}
.theme-ui2 .group{background:#fff;border:2px solid #26222b;border-radius:4px;box-shadow:6px 6px 0 #26222b;padding:12px 12px 16px}
.theme-ui2 .group::before{content:"SPECIMEN #" counter(grp,decimal-leading-zero);position:absolute;z-index:2;left:12px;top:-13px;background:#fff36d;border:2px solid #26222b;padding:3px 8px;font:700 10px/1 "Space Mono",monospace;letter-spacing:.1em;transition:rotate .3s var(--ease-pop)}
.theme-ui2 .group:hover::before{rotate:-6deg}
.theme-ui2 .group::after{content:"";position:absolute;right:14px;bottom:16px;width:56px;height:18px;background:repeating-linear-gradient(90deg,#26222b 0 2px,transparent 2px 4px,#26222b 4px 5px,transparent 5px 8px,#26222b 8px 11px,transparent 11px 13px)}
.theme-ui2 .group:hover{transform:translate(-4px,-4px) rotate(-1deg);box-shadow:10px 10px 0 #26222b}
.theme-ui2 .group:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #26222b}
.theme-ui2 .art{border:2px solid #26222b;border-radius:2px}
.theme-ui2 .group:nth-child(4n+1) .art .ph{background-color:#e3f4fd}
.theme-ui2 .group b{font-size:1.2rem}
.theme-ui2 .group .go{color:#26222b;text-decoration:underline 2px #ff5f9e;text-underline-offset:4px;align-self:flex-start}
.theme-ui2 .footer{background:#fff;border:2px solid #26222b;box-shadow:4px 4px 0 #26222b;color:#46404d}

.theme-ui2 dialog{border:2px solid #26222b;border-radius:4px;box-shadow:10px 10px 0 #26222b}
.theme-ui2 dialog[open]{animation:slapIn .55s var(--ease-out) both}
.theme-ui2 .modal{padding-top:40px}
.theme-ui2 .modal::before{content:"RULE SHEET  ·  อ่านให้ครบ";position:absolute;left:0;right:0;top:0;background:#26222b;color:#fff36d;font:700 11px/1 "Space Mono",monospace;letter-spacing:.14em;padding:8px 16px}
.theme-ui2 .modal-head .eyebrow{background:#f7bcd5;border:2px solid #26222b;padding:2px 8px;letter-spacing:.06em}
.theme-ui2 .rules{background:#fff9d9;border:2px dashed #26222b}
.theme-ui2 .close{background:#f7bcd5;border:2px solid #26222b;box-shadow:3px 3px 0 #26222b}
.theme-ui2 .message,.theme-ui2 .status{border:2px solid #26222b}
.theme-ui2 .btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 #26222b;filter:none}
.theme-ui2 .btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 #26222b}
.theme-ui2 .btn.outline{box-shadow:3px 3px 0 #26222b}
.theme-ui2 input:focus,.theme-ui2 textarea:focus,.theme-ui2 select:focus{box-shadow:4px 4px 0 var(--hi)}

/* admin */
.theme-ui2 .admin-tabs{padding:0;background:none;border:0;box-shadow:none;gap:6px}
.theme-ui2 .admin-tabs a{background:#fff;border:2px solid #26222b;box-shadow:3px 3px 0 #26222b}
.theme-ui2 .admin-tabs a:hover{transform:translate(-2px,-2px) rotate(-2deg);box-shadow:5px 5px 0 #26222b}
.theme-ui2 .admin-tabs a:nth-child(2){background:#bfe6fb}.theme-ui2 .admin-tabs a:nth-child(3){background:#f7bcd5}.theme-ui2 .admin-tabs a:nth-child(4){background:#fff36d}.theme-ui2 .admin-tabs a:nth-child(5){background:#c9ec8e}
.theme-ui2 .step{background:#fff36d;color:#26222b;border:2px solid #26222b;border-radius:3px}
.theme-ui2 .tile:nth-child(1){background:#e3f4fd}.theme-ui2 .tile:nth-child(2){background:#fde6ef}.theme-ui2 .tile:nth-child(3){background:#fff9d9}
.theme-ui2 .package-card{background:#fff36d}
.theme-ui2 .locked-pill{background:#26222b;color:#fff}
.theme-ui2 .countdown{font-family:"Space Mono",monospace}
.theme-ui2 .login-card{padding-top:44px}
.theme-ui2 .login-card::before{content:"STAFF ID CARD";position:absolute;left:0;right:0;top:0;background:#26222b;color:#fff36d;font:700 11px/1 "Space Mono",monospace;letter-spacing:.2em;padding:9px 16px}
.theme-ui2 .login-logo{background:#f7bcd5;border:2px solid #26222b;box-shadow:3px 3px 0 #26222b;border-radius:4px}
.theme-ui2 .section-intro h1{display:inline-block;background:#fff;border:2px solid #26222b;box-shadow:4px 4px 0 #26222b;padding:4px 14px}

/* =====================================================================
   UI3 · BUBBLE CHAT
   ===================================================================== */
body.theme-ui3{
  --bg:
    linear-gradient(rgba(255,255,255,.45) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(255,255,255,.45) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(180deg,#cfe8fb,#e4f1fc 60%,#f3f8fd);
  --ink:#1d2b3a;--muted:#5b6d80;--link:#2f78dc;--eyebrow:#5b6d80;
  --surface:#fff;--surface-2:#f0f6fd;--line:#dce8f4;
  --cta:var(--tenant-primary,#3d8bf2);--hi:var(--tenant-accent,#ff6f9c);
  --r:24px;--r-sm:18px;--r-btn:999px;--r-field:16px;
  --card-border:0;--sub-border:1px solid #e1ecf7;
  --card-shadow:0 10px 30px rgba(40,90,150,.12);--btn-shadow:0 6px 14px color-mix(in srgb,var(--cta),transparent 65%);
  --outline-border:1.5px solid #cfe0f3;--field-bg:#f3f7fc;--field-border:1.5px solid transparent;
  --font-head:"Prompt","Anuphan",system-ui,sans-serif;--font-body:"Prompt","Anuphan",system-ui,sans-serif;--head-weight:600;
  --backdrop:rgba(29,43,58,.42);--focus:#8ec0ff;
  --ph-bg:#eef5fd;--ph-line:#9cc4f2;--ph-ink:#6c8fb8;
  --reveal-anim:bubblePop;
}
@keyframes bubblePop{0%{opacity:0;scale:.3;translate:0 30px}60%{opacity:1;scale:1.07}80%{scale:.97}100%{scale:1;translate:0 0}}
.theme-ui3 .deco i{bottom:-120px;border-radius:50%;background:radial-gradient(circle at 30% 28%,#fff 0 12%,rgba(255,255,255,.25) 35%,rgba(160,205,245,.3) 70%);border:2px solid rgba(255,255,255,.95);box-shadow:0 10px 24px rgba(61,139,242,.15);animation:rise 16s linear infinite}
.theme-ui3 .deco .d1{left:3%;width:70px;height:70px}
.theme-ui3 .deco .d2{left:18%;width:34px;height:34px;animation-delay:-3s;animation-duration:11s}
.theme-ui3 .deco .d3{left:34%;width:96px;height:96px;animation-delay:-7s;animation-duration:20s}
.theme-ui3 .deco .d4{left:52%;width:28px;height:28px;animation-delay:-5s;animation-duration:10s}
.theme-ui3 .deco .d5{left:67%;width:60px;height:60px;animation-delay:-12s}
.theme-ui3 .deco .d6{left:80%;width:40px;height:40px;animation-delay:-9s;animation-duration:13s}
.theme-ui3 .deco .d7{left:92%;width:84px;height:84px;animation-delay:-2s;animation-duration:18s}
.theme-ui3 .deco .d8{left:44%;width:22px;height:22px;animation-delay:-14s;animation-duration:9s}

.theme-ui3 .top{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:22px;padding:10px 12px 10px 10px;box-shadow:0 8px 24px rgba(40,90,150,.10);position:sticky;top:10px;z-index:5}
.theme-ui3 .brand-mark{position:relative;width:44px;height:44px;border-radius:50%;background:#e3efff;color:#2f78dc;overflow:visible}
.theme-ui3 .brand-mark img{border-radius:50%}
.theme-ui3 .brand-mark::after{content:"";position:absolute;right:-1px;bottom:0;width:12px;height:12px;border-radius:50%;background:#35c46b;border:2.5px solid #fff;animation:onlinePulse 2s ease-in-out infinite}
@keyframes onlinePulse{0%,100%{box-shadow:0 0 0 0 rgba(53,196,107,.5)}60%{box-shadow:0 0 0 7px transparent}}
.theme-ui3 .top-link{background:#eaf3ff;color:#2f78dc;padding:9px 16px;border-radius:999px;transition:transform .25s var(--ease-pop)}
.theme-ui3 .top-link:hover{transform:scale(1.07)}
.theme-ui3 .ticker{background:#fff;border-radius:999px;color:#2f78dc;padding:8px 0;box-shadow:0 6px 18px rgba(40,90,150,.1);margin-top:-6px}

.theme-ui3 .hero,.theme-ui3 .dashboard-hero{background:#fff;border-radius:30px;padding:30px 32px;box-shadow:0 18px 44px rgba(40,90,150,.14);margin-top:8px}
.theme-ui3 .hero-copy{display:flex;flex-direction:column;align-items:flex-start}
.theme-ui3 .hero .eyebrow{font-size:.74rem;letter-spacing:.04em;text-transform:none;font-weight:600;margin-left:14px}
.theme-ui3 .hero h1{background:#f0f6fd;border-radius:26px 26px 26px 8px;padding:16px 22px;font-size:clamp(1.8rem,4vw,3rem);margin:6px 0 8px;transform-origin:0 100%}
.theme-ui3 .hero p{background:#f0f6fd;border-radius:8px 22px 22px 22px;padding:12px 18px;color:#3c4d60;transform-origin:0 0}
.js-anim body.theme-ui3 .hero-copy>*{animation-name:bubblePop}
.theme-ui3 .steps{margin-top:16px}
.theme-ui3 .steps li{border:1.5px solid #bcd8f7;color:#2f78dc;background:#fff;border-radius:999px;padding:5px 14px 5px 6px;transition:transform .25s var(--ease-pop),background .2s}
.theme-ui3 .steps li:hover{transform:scale(1.07);background:#eaf3ff}
.theme-ui3 .steps b{background:#eaf3ff;color:#2f78dc;border-radius:50%}
.theme-ui3 .hero-photo{right:0;top:0;width:260px;height:175px;border-radius:24px 24px 6px 24px;background:var(--cta);padding:6px;box-shadow:0 10px 24px color-mix(in srgb,var(--cta),transparent 70%)}
.theme-ui3 .hero-photo>*{border-radius:19px 19px 3px 19px;overflow:hidden}
.theme-ui3 .hero-photo .ph{--ph-bg:#fff}
.js-anim body.theme-ui3 .hero-photo{animation:bubblePop .8s .5s both}
.theme-ui3 .hero-art .sticker.s1{display:block;position:absolute;right:8px;top:184px;font-size:.74rem;color:#8aa0b6;animation:fadeIn .5s 1.4s both}
.theme-ui3 .hero-art .sticker.s1::after{content:"อ่านแล้ว ✓✓"}
.theme-ui3 .hero-logo{left:0;bottom:0;width:78px;height:78px;border-radius:50%;background:#fff;border:3px solid #fff;box-shadow:0 8px 20px rgba(40,90,150,.2);overflow:visible}
.theme-ui3 .hero-logo>*{border-radius:50%;overflow:hidden}
.theme-ui3 .hero-logo .ph{font-size:.72rem}
.theme-ui3 .hero-art .sticker.s2{display:block;position:absolute;left:58px;bottom:4px;width:16px;height:16px;border-radius:50%;background:#35c46b;border:3px solid #fff;z-index:2;animation:onlinePulse 2s ease-in-out infinite}
.theme-ui3 .typing{display:flex;gap:6px;align-items:center;position:absolute;left:92px;bottom:16px;padding:14px 18px;background:#f0f6fd;border-radius:20px 20px 20px 6px;animation:bubblePop .6s 1s both}
.theme-ui3 .typing b{width:9px;height:9px;border-radius:50%;background:#8aa0b6;animation:typingDot 1.2s ease-in-out infinite}
.theme-ui3 .typing b:nth-child(2){animation-delay:.15s}.theme-ui3 .typing b:nth-child(3){animation-delay:.3s}
@keyframes typingDot{0%,60%,100%{translate:0 0;opacity:.5}30%{translate:0 -7px;opacity:1}}

.theme-ui3 .section-head h2{font-size:1.5rem}
.theme-ui3 .section-head span{background:#fff;padding:3px 12px;border-radius:999px;color:#2f78dc;font-weight:600}
.theme-ui3 .group{background:#fff;border-radius:26px 26px 26px 8px;padding:10px 10px 16px;box-shadow:0 10px 26px rgba(40,90,150,.12)}
.theme-ui3 .group:nth-child(even){border-radius:26px 26px 8px 26px}
.theme-ui3 .group::before{content:counter(grp);position:absolute;z-index:2;right:-6px;top:-6px;min-width:26px;height:26px;padding:0 6px;display:grid;place-items:center;border-radius:999px;background:var(--hi);color:#fff;font-size:.78rem;font-weight:700;border:2.5px solid #fff;animation:badgePulse 2s ease-in-out infinite}
.theme-ui3 .group:nth-child(2)::before{animation-delay:.3s}.theme-ui3 .group:nth-child(3)::before{animation-delay:.6s}.theme-ui3 .group:nth-child(4)::before{animation-delay:.9s}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--hi),transparent 40%);scale:1}50%{box-shadow:0 0 0 8px transparent;scale:1.12}}
.theme-ui3 .group:hover{box-shadow:0 20px 40px rgba(40,90,150,.2)}
.theme-ui3 .group:active{scale:.96}
.theme-ui3 .art{border-radius:20px}
.theme-ui3 .group:nth-child(4n+2) .art .ph{--ph-bg:#fff0f5;--ph-line:#f5a9c3;--ph-ink:#d0668c}
.theme-ui3 .group:nth-child(4n+3) .art .ph{--ph-bg:#effaf3;--ph-line:#96d8ae;--ph-ink:#4c9b69}
.theme-ui3 .group:nth-child(4n) .art .ph{--ph-bg:#fff8e6;--ph-line:#f0cf7a;--ph-ink:#b08a2a}
.theme-ui3 .group b{padding:0 4px;font-size:1.1rem}
.theme-ui3 .group small{padding:0 4px}
.theme-ui3 .group .go{align-self:flex-start;margin:12px 0 0 4px;background:#eaf3ff;color:#2f78dc;padding:5px 14px;border-radius:999px}
.theme-ui3 .state{border-radius:22px 22px 22px 6px;max-width:520px}
.theme-ui3 .footer{background:rgba(255,255,255,.7);border-radius:18px}

.theme-ui3 dialog{border-radius:28px}
.theme-ui3 dialog[open]{animation:bubblePop .6s both}
.theme-ui3 .modal-head{padding-bottom:14px;border-bottom:1px solid #e6eef7}
.theme-ui3 .modal-head .eyebrow{text-transform:none;letter-spacing:.02em;font-weight:600;color:#35a560}
.theme-ui3 .modal-head .eyebrow::before{content:"● ";color:#35c46b;animation:heartbeat 1.6s infinite;display:inline-block}
.theme-ui3 .rules{background:#f0f6fd;border-radius:22px 22px 22px 6px;margin-right:36px}
.theme-ui3 dialog[open] .rules{animation:bubblePop .6s .15s both}
.theme-ui3 .close{border-radius:50%;background:#f0f6fd}
.theme-ui3 .modal input{border-radius:999px;padding:13px 18px}
.theme-ui3 .modal input:focus{background:#fff;border-color:#bcd8f7}
.theme-ui3 .message{width:fit-content;max-width:88%;border-radius:20px 20px 20px 6px}
.theme-ui3 .message.success{margin-left:auto;background:var(--cta);color:#fff;border-radius:20px 20px 6px 20px}
.theme-ui3 .pop-in{animation:bubblePop .55s both}

/* admin */
.theme-ui3 .admin-tabs{background:rgba(255,255,255,.75);backdrop-filter:blur(8px);border-radius:999px;padding:6px}
.theme-ui3 .admin-tabs a{border-radius:999px}
.theme-ui3 .admin-tabs a:hover{background:#eaf3ff;color:#2f78dc}
.theme-ui3 .dashboard-hero h1{background:#f0f6fd;border-radius:24px 24px 24px 8px;padding:12px 18px;display:inline-block}
.theme-ui3 .dashboard-hero p{background:#f0f6fd;border-radius:8px 20px 20px 20px;padding:10px 16px;display:inline-block}
.theme-ui3 .dashboard-hero .eyebrow{margin:0 0 6px 12px;text-transform:none;letter-spacing:.02em}
.theme-ui3 .request-card,.theme-ui3 .group-card{position:relative;padding-left:62px!important;background:#fff;border-radius:18px}
.theme-ui3 .request-card::before,.theme-ui3 .group-card::before{content:"✉";position:absolute;left:14px;top:14px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#eaf3ff;color:#2f78dc}
.theme-ui3 .group-card::before{content:"#";background:#ffe3ec;color:#e0507e;font-weight:700}
.theme-ui3 .tile{border-radius:18px 18px 18px 6px;background:#f0f6fd;border:0}
.theme-ui3 .tile:nth-child(2){border-radius:18px 18px 6px 18px;background:#eaf3ff;margin-left:18px}
.theme-ui3 .step{background:var(--cta)}
.theme-ui3 .package-card{background:linear-gradient(135deg,#fff,#eef6ff)}
.theme-ui3 .login-logo{border-radius:50%;background:#e3efff;position:relative}
.theme-ui3 .login-logo::after{content:"";position:absolute;right:2px;bottom:2px;width:14px;height:14px;border-radius:50%;background:#35c46b;border:3px solid #fff;animation:onlinePulse 2s infinite}
.theme-ui3 .login-card{border-radius:30px}

/* ---------- admin dashboard hero: ช่องรูปขนาดเล็กลง ---------- */
.dashboard-hero .eyebrow{display:inline-block}
.theme-ui1 .section-intro h1{display:inline;background:linear-gradient(transparent 58%,#ffd4e1 58%)}
.dashboard-hero .hero-art{min-height:200px}
.theme-ui1 .dashboard-hero .hero-photo{width:170px;height:160px;right:4%;top:-4px}
.theme-ui1 .dashboard-hero .hero-logo{width:96px;height:96px;left:0;bottom:-6px}
.theme-ui2 .dashboard-hero .hero-photo{width:190px;height:140px}
.theme-ui2 .dashboard-hero .hero-logo{width:90px;height:90px;bottom:-4px}
.theme-ui3 .dashboard-hero .hero-photo{width:210px;height:130px}
.theme-ui3 .dashboard-hero .hero-art .sticker.s1{display:none}
.theme-ui3 .dashboard-hero .hero-logo{width:64px;height:64px}
.theme-ui3 .dashboard-hero .hero-art .sticker.s2{left:48px}
.theme-ui3 .dashboard-hero .typing{left:76px;bottom:8px}

/* ---------- responsive ---------- */
@media(max-width:760px){
  .theme-ui1 .hero,.theme-ui1 .dashboard-hero{border-width:10px;padding:26px 18px 20px}
  .theme-ui1 .hero-copy{padding:26px 18px 22px 40px}
  .theme-ui1 .hero-photo{width:190px;height:180px;right:4%}
  .theme-ui1 .hero-logo{width:104px;height:104px}
  .theme-ui1 .hero-art .sticker.s1{display:none}
  .theme-ui2 .hero{padding:34px 20px 24px;box-shadow:6px 6px 0 #26222b}
  .theme-ui2 .hero-photo{width:200px;height:150px}
  .theme-ui2 .hero-copy::after{display:none}
  .theme-ui3 .hero{padding:22px 18px;border-radius:24px}
  .theme-ui3 .hero-photo{width:220px;height:150px}
  .theme-ui3 .hero-art .sticker.s1{top:158px}
  .theme-ui3 .rules{margin-right:0}
  .theme-ui3 .top{position:relative;top:0}
  .ticker{font-size:.8rem}
}
@media(max-width:520px){
  .theme-ui1 .group::after{top:74px;width:32px;height:32px;font-size:13px}
  .theme-ui2 .group::after,.theme-ui2 .group::before{display:none}
  .top-link{padding:7px 12px!important;font-size:.8rem}
  .deco{opacity:.6}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js-anim .reveal{opacity:1}
  .deco{display:none}
}

/* =====================================================================
   UI4 · PASTEL OS  (เดสก์ท็อป Y2K ฟ้า-ชมพู: หน้าต่าง, เพลเยอร์, โฟลเดอร์, ทาสก์บาร์)
   ===================================================================== */
body.theme-ui4{
  --navy:#2d3b6e;--sky:#cfe3ff;--blue:#6e9cf2;--blue-d:#4a78d8;--pink:#ff8fbf;--pink-l:#ffd0e4;--star:#ffe266;--mint:#a5ec95;
  --bg:
    radial-gradient(circle,rgba(255,255,255,.75) 1.3px,transparent 1.8px) 0 0/22px 22px,
    radial-gradient(ellipse 60% 40% at 15% 105%,#fff 0 40%,transparent 41%),
    radial-gradient(ellipse 50% 35% at 85% 108%,#fff 0 40%,transparent 41%),
    linear-gradient(180deg,#a9cbff 0%,#c9defc 45%,#e6f0ff 100%);
  --ink:var(--navy);--muted:#5a6a9c;--link:#4a78d8;--eyebrow:var(--navy);
  --surface:#fff;--surface-2:#eef5ff;--line:#c9d9f5;
  --cta:var(--tenant-primary,#ff7fb5);--hi:var(--tenant-accent,#6e9cf2);
  --r:20px;--r-sm:16px;--r-btn:999px;--r-field:14px;
  --card-border:2px solid var(--navy);--sub-border:2px solid #c9d9f5;
  --card-shadow:0 5px 0 var(--navy),0 18px 30px rgba(45,59,110,.14);
  --btn-shadow:0 4px 0 var(--navy);
  --outline-border:2px solid var(--navy);--field-bg:#fff;--field-border:2px solid var(--navy);
  --font-head:"Mitr","Anuphan",system-ui,sans-serif;--head-weight:500;
  --pixel:"Pixelify Sans","Mitr",ui-monospace,monospace;
  --backdrop:rgba(45,59,110,.35);--focus:#ffb3d4;
  --ph-bg:linear-gradient(180deg,#8fb6ff,#c5dcff);--ph-line:#fff;--ph-ink:#fff;
  --reveal-anim:winOpen;
}
@keyframes winOpen{0%{opacity:0;scale:.6;translate:0 40px}60%{opacity:1;scale:1.05}80%{scale:.98}100%{scale:1;translate:0 0}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes toggleKnob{0%,40%{translate:0 0}50%,90%{translate:22px 0}}
@keyframes starTwinkle{0%,100%{scale:1;rotate:0deg;opacity:1}50%{scale:1.3;rotate:20deg;opacity:.7}}
@keyframes eq{0%,100%{scale:1 .3}50%{scale:1 1}}
body.theme-ui4 .btn{border:2px solid var(--navy);font-weight:600}
body.theme-ui4 .btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 var(--navy)}
body.theme-ui4 .btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--navy)}
body.theme-ui4 .btn.outline,body.theme-ui4 .btn.secondary{box-shadow:0 3px 0 var(--navy)}
body.theme-ui4 input:focus,body.theme-ui4 textarea:focus,body.theme-ui4 select:focus{box-shadow:0 0 0 4px var(--pink-l)}
body.theme-ui4 .message,body.theme-ui4 .status{border:2px solid var(--navy)}

/* ---- decorations: โฟลเดอร์ลอย ดาว หน้ายิ้ม ---- */
.theme-ui4 .deco .d1,.theme-ui4 .deco .d2,.theme-ui4 .deco .d3{width:74px;height:54px;border:2px solid var(--navy);border-radius:4px 10px 10px 10px;background:linear-gradient(180deg,#d7e7ff,#8fb6ff);box-shadow:0 5px 0 rgba(45,59,110,.25);animation:floaty 5s ease-in-out infinite}
.theme-ui4 .deco .d1::before,.theme-ui4 .deco .d2::before,.theme-ui4 .deco .d3::before{content:"";position:absolute;left:-2px;top:-12px;width:32px;height:12px;border:2px solid var(--navy);border-bottom:0;border-radius:6px 6px 0 0;background:#d7e7ff}
.theme-ui4 .deco .d1{left:2.5%;top:18%;rotate:-8deg}
.theme-ui4 .deco .d2{right:2.5%;top:30%;rotate:6deg;animation-delay:-2s}
.theme-ui4 .deco .d3{left:3%;top:64%;rotate:4deg;animation-delay:-3.5s;width:60px;height:44px}
.theme-ui4 .deco .d4,.theme-ui4 .deco .d5,.theme-ui4 .deco .d6{font-style:normal;color:var(--star);font-size:34px;text-shadow:0 0 0 var(--navy),1px 1px 0 var(--navy),-1px -1px 0 var(--navy),1px -1px 0 var(--navy),-1px 1px 0 var(--navy);animation:starTwinkle 2.4s ease-in-out infinite}
.theme-ui4 .deco .d4::before,.theme-ui4 .deco .d5::before,.theme-ui4 .deco .d6::before{content:"★"}
.theme-ui4 .deco .d4{left:9%;top:9%}.theme-ui4 .deco .d5{right:9%;top:62%;font-size:26px;animation-delay:-.8s}.theme-ui4 .deco .d6{left:7%;bottom:10%;font-size:22px;color:#fff;animation-delay:-1.6s}
.theme-ui4 .deco .d7{right:4%;bottom:12%;width:58px;height:58px;border-radius:50%;background:#9cc0ff;border:2px solid var(--navy);display:grid;place-items:center;font-style:normal;font-size:30px;color:var(--navy);animation:wiggle 3s ease-in-out infinite}
.theme-ui4 .deco .d7::before{content:"☺"}
.theme-ui4 .deco .d8{right:12%;top:8%;font-style:normal;color:#fff;font-size:26px;animation:spin 6s linear infinite}
.theme-ui4 .deco .d8::before{content:"✦"}

/* ---- window chrome (ใช้ซ้ำ: header, hero, panel, dialog) ---- */
.theme-ui4 .top{background:linear-gradient(180deg,#8db4ff,#5d8eee);border:2px solid var(--navy);border-radius:16px;padding:8px 10px 8px 10px;box-shadow:0 5px 0 var(--navy);position:relative}
.theme-ui4 .brand{color:#fff;font-size:1.15rem;text-shadow:0 2px 0 rgba(45,59,110,.45)}
.theme-ui4 .brand-mark{width:38px;height:38px;border-radius:10px;border:2px solid var(--navy);background:var(--pink-l);color:var(--navy);position:relative;overflow:visible;text-shadow:none}
.theme-ui4 .brand-mark img{border-radius:8px}
.theme-ui4 .brand-mark::after{content:"1";position:absolute;right:-7px;top:-7px;width:17px;height:17px;border-radius:50%;background:#fff;border:1.5px solid var(--navy);font:700 10px/14px var(--pixel);text-align:center;color:var(--navy);animation:heartbeat 2s infinite}
.theme-ui4 .top-link{background:#fff;color:var(--navy);border:2px solid var(--navy);padding:6px 14px;border-radius:999px;font-weight:600;transition:transform .2s var(--ease-pop)}
.theme-ui4 .top-link:hover{transform:translateY(-2px) scale(1.04);background:var(--pink-l)}
.theme-ui4 .top-link::after{content:"";display:inline-block;width:9px;height:9px;margin-left:8px;border-radius:50%;background:var(--mint);border:1.5px solid var(--navy);animation:blink 1.2s steps(1) infinite}
.theme-ui4 .ticker{background:#fff;border:2px solid var(--navy);border-radius:999px;color:var(--navy);padding:6px 0;margin-top:-10px;font-family:"Mitr",sans-serif;font-weight:500;box-shadow:0 3px 0 var(--navy);position:relative}
.theme-ui4 .ticker::before{content:"♪ NOW PLAYING";position:absolute;z-index:2;left:0;top:0;bottom:0;display:flex;align-items:center;padding:0 14px;background:var(--pink);color:#fff;border-right:2px solid var(--navy);font:700 .78rem var(--pixel);letter-spacing:.06em;border-radius:999px 0 0 999px}

/* hero = หน้าต่างโปรแกรม */
.theme-ui4 .hero,.theme-ui4 .dashboard-hero{
  padding:62px 34px 34px;border:2px solid var(--navy);border-radius:24px;overflow:hidden;
  background:
    linear-gradient(45deg,rgba(207,227,255,.45) 25%,transparent 25% 75%,rgba(207,227,255,.45) 75%) 0 0/36px 36px,
    linear-gradient(45deg,rgba(207,227,255,.45) 25%,transparent 25% 75%,rgba(207,227,255,.45) 75%) 18px 18px/36px 36px,
    linear-gradient(180deg,#fff 0%,#f1f7ff 100%);
  box-shadow:0 6px 0 var(--navy),0 24px 44px rgba(45,59,110,.18)}
.theme-ui4 .hero::before,.theme-ui4 .dashboard-hero::before{content:"★ welcome.exe";position:absolute;left:0;right:0;top:0;height:38px;display:flex;align-items:center;padding:0 16px;background:linear-gradient(180deg,#8db4ff,#5d8eee);border-bottom:2px solid var(--navy);color:#fff;font:700 .95rem var(--pixel);letter-spacing:.04em;text-shadow:0 2px 0 rgba(45,59,110,.4)}
.theme-ui4 .dashboard-hero::before{content:"★ dashboard.exe"}
.theme-ui4 .hero::after,.theme-ui4 .dashboard-hero::after{content:"–   □   ×";position:absolute;right:10px;top:6px;height:24px;display:flex;align-items:center;padding:0 12px;border-radius:8px;background:var(--pink);border:2px solid var(--navy);color:#fff;font:700 .8rem var(--pixel);word-spacing:2px}
.theme-ui4 .hero .eyebrow{font-family:var(--pixel);letter-spacing:.06em;text-transform:none;background:#fff;border:2px solid var(--navy);border-radius:999px;padding:4px 14px 4px 34px;position:relative;font-size:.85rem}
.theme-ui4 .hero .eyebrow::before{content:"";position:absolute;left:8px;top:50%;width:18px;height:13px;translate:0 -50%;border-radius:3px;background:var(--pink);border:1.5px solid var(--navy);box-shadow:inset 0 -5px 0 -3px #fff}
.theme-ui4 .hero h1{color:var(--navy);font-size:clamp(2.2rem,5vw,3.7rem);line-height:1.15;margin-top:18px;text-shadow:3px 3px 0 var(--pink-l)}
.theme-ui4 .hero h1::after{content:"▌";color:var(--pink);margin-left:4px;animation:blink 1s steps(1) infinite;text-shadow:none}
.theme-ui4 .hero p{color:#4d5d8e}
.theme-ui4 .steps li{background:#fff;border:2px solid var(--navy);border-radius:999px;padding:4px 14px 4px 5px;color:var(--navy);box-shadow:0 3px 0 var(--navy);transition:transform .2s var(--ease-pop)}
.theme-ui4 .steps li:hover{transform:translateY(-3px)}
.theme-ui4 .steps b{border-radius:999px;width:auto;min-width:34px;padding:0 8px;border:1.5px solid var(--navy);color:#fff;font:700 .8rem var(--pixel);animation:none}
.theme-ui4 .steps li:nth-child(odd) b{background:var(--pink)}.theme-ui4 .steps li:nth-child(even) b{background:var(--blue)}

/* hero-art = จอโทรศัพท์ขอบชมพู (รูปปก) + แผ่นเสียง (โลโก้) + สวิตช์ + บับเบิล */
.theme-ui4 .hero-art{min-height:330px}
.theme-ui4 .hero-photo{left:10%;top:0;width:215px;height:296px;border-radius:30px;background:#fff;border:2px solid var(--navy);padding:14px 12px 30px;box-shadow:0 0 0 9px var(--pink),0 0 0 11px var(--navy),0 18px 30px rgba(45,59,110,.25);overflow:visible;z-index:2}
.theme-ui4 .hero-photo>*{border-radius:18px;overflow:hidden;border:2px solid var(--navy)}
.theme-ui4 .hero-photo::after{content:"";position:absolute;left:50%;bottom:9px;width:50px;height:8px;translate:-50% 0;border-radius:99px;background:var(--navy);opacity:.8}
.theme-ui4 .ph{background:
    radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 1.5px) 0 0/10px 10px,
    linear-gradient(180deg,#7ea9f7,#c2d9ff);animation:none;color:#fff}
.theme-ui4 .ph>span{font:700 .8rem var(--pixel);letter-spacing:.06em;text-shadow:0 2px 0 rgba(45,59,110,.35)}
.theme-ui4 .ph::before{content:"offline";display:block;font:700 1.6rem/1 var(--pixel);letter-spacing:.02em;color:#fff;text-shadow:0 2px 0 rgba(45,59,110,.35);animation:blink 1.6s steps(1) infinite}
.theme-ui4 .ph::after{content:"✕ ◡ ✕";position:absolute;inset:auto 0 14%;text-align:center;font:700 1rem var(--pixel);color:var(--navy);background:none;animation:iconBob 2.4s ease-in-out infinite}
.theme-ui4 .ph-icon{display:none}
.theme-ui4 .hero-logo{right:-14px;top:52px;width:190px;height:190px;border-radius:50%;z-index:1;overflow:visible;
  background:repeating-radial-gradient(circle,#26243a 0 2px,#34324c 2px 4px);border:2px solid var(--navy);box-shadow:0 12px 24px rgba(45,59,110,.3);animation:logoIn .9s .5s var(--ease-pop) both,spin 7s linear 1.4s infinite}
.theme-ui4 .hero-logo::before{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.18) 45%,transparent 55%)}
.theme-ui4 .hero-logo>*{position:absolute;inset:30%;width:40%;height:40%;border-radius:50%;overflow:hidden;border:2px solid #fff}
.theme-ui4 .hero-logo .ph{background:var(--pink-l);color:var(--navy)}
.theme-ui4 .hero-logo .ph::before,.theme-ui4 .hero-logo .ph::after{display:none}
.theme-ui4 .hero-logo .ph>span{font-size:.62rem;color:var(--navy);text-shadow:none}
.theme-ui4 .hero-art .sticker.s1{display:block;position:absolute;right:6px;top:4px;width:62px;height:30px;border-radius:999px;background:var(--pink);border:2px solid var(--navy);box-shadow:0 3px 0 var(--navy);z-index:3}
.theme-ui4 .hero-art .sticker.s1::after{content:"";position:absolute;left:4px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;border:1.5px solid var(--navy);animation:toggleKnob 3s ease-in-out infinite}
.theme-ui4 .hero-art .sticker.s2{display:grid;place-items:center;position:absolute;left:0;bottom:30px;padding:10px 16px;border-radius:24px;background:#e3f7c9;border:2px solid var(--navy);color:var(--navy);font:700 .95rem/1.1 var(--pixel);text-align:center;box-shadow:0 4px 0 var(--navy);z-index:3;animation:floaty 3s ease-in-out infinite}
.theme-ui4 .hero-art .sticker.s2::after{content:var(--sticker-text,"NEW\A PICK! ♡");white-space:pre-line}
.theme-ui4 .hero-art .typing{display:flex;gap:3px;align-items:flex-end;position:absolute;right:18px;bottom:18px;height:34px;padding:6px 8px;border-radius:10px;background:#fff;border:2px solid var(--navy);z-index:3}
.theme-ui4 .hero-art .typing b{width:6px;height:100%;border-radius:2px;background:var(--blue);transform-origin:50% 100%;animation:eq .9s ease-in-out infinite}
.theme-ui4 .hero-art .typing b:nth-child(2){background:var(--pink);animation-delay:.2s}.theme-ui4 .hero-art .typing b:nth-child(3){animation-delay:.4s}

/* section head = พิลล์ "WEEKLY SCHEDULE!!" */
.theme-ui4 .section-head{align-items:center}
.theme-ui4 .section-head h2{display:inline-flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--navy);border-radius:999px;padding:8px 22px 8px 10px;box-shadow:0 4px 0 var(--navy);font-size:1.3rem}
.theme-ui4 .section-head h2::before{content:"";width:36px;height:26px;border-radius:6px;background:var(--pink);border:2px solid var(--navy);box-shadow:inset 0 -9px 0 -6px #fff;flex:0 0 auto;animation:wiggle 2.4s ease-in-out infinite}
.theme-ui4 .section-head span{font:700 .9rem var(--pixel);background:var(--blue);color:#fff;border:2px solid var(--navy);border-radius:999px;padding:3px 12px}

/* การ์ดกลุ่ม = การ์ดตารางสตรีม */
.theme-ui4 .grid{gap:24px}
.theme-ui4 .group{background:
    linear-gradient(45deg,rgba(207,227,255,.4) 25%,transparent 25% 75%,rgba(207,227,255,.4) 75%) 0 0/24px 24px,
    linear-gradient(45deg,rgba(207,227,255,.4) 25%,transparent 25% 75%,rgba(207,227,255,.4) 75%) 12px 12px/24px 24px,#fff;
  border:2px solid var(--navy);border-radius:24px;padding:12px 12px 22px;box-shadow:0 5px 0 var(--navy),0 16px 26px rgba(45,59,110,.12);overflow:visible}
.theme-ui4 .group::before{content:"no." counter(grp,decimal-leading-zero);position:absolute;z-index:3;left:20px;top:20px;background:#fff;border:2px solid var(--navy);border-radius:999px;padding:1px 12px;font:700 .82rem/1.5 var(--pixel);color:var(--navy)}
.theme-ui4 .group::after{content:"";position:absolute;z-index:3;right:22px;top:-2px;width:26px;height:36px;background:var(--pink);border:2px solid var(--navy);border-top:0;clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%);transition:height .3s var(--ease-pop)}
.theme-ui4 .group:hover::after{height:46px}
.theme-ui4 .group:hover{box-shadow:0 8px 0 var(--navy),0 26px 34px rgba(45,59,110,.18)}
.theme-ui4 .group:nth-child(3n+2) .art .ph{background:radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 1.5px) 0 0/10px 10px,linear-gradient(180deg,#ff9dc6,#ffd3e6)}
.theme-ui4 .art{height:160px;border-radius:18px;border:2px solid var(--navy)}
.theme-ui4 .group b{color:var(--navy);font-size:1.2rem;padding:0 4px}
.theme-ui4 .group small{color:#5a6a9c;padding:0 4px}
.theme-ui4 .group .go{align-self:flex-start;margin:12px 0 0 4px;background:var(--pink);color:#fff;border:2px solid var(--navy);border-radius:999px;padding:3px 14px;font-weight:600}
.theme-ui4 .group:nth-child(even) .go{background:var(--blue)}
.theme-ui4 .state{border-radius:18px;background:#fff}

/* footer = ทาสก์บาร์ */
.theme-ui4 .footer{background:linear-gradient(180deg,#8db4ff,#5d8eee);border:2px solid var(--navy);border-radius:14px;color:#fff;padding:10px 14px 10px 134px;position:relative;box-shadow:0 4px 0 var(--navy)}
.theme-ui4 .footer a{color:#fff}
.theme-ui4 .footer::before{content:"★ start ★";position:absolute;left:10px;top:50%;translate:0 -50%;background:var(--mint);color:var(--navy);border:2px solid var(--navy);border-radius:999px;padding:2px 12px;font:700 .82rem var(--pixel);animation:heartbeat 2.6s infinite}

/* dialog = หน้าต่าง rules.txt */
.theme-ui4 dialog{border:2px solid var(--navy);border-radius:22px;box-shadow:0 0 0 7px var(--pink),0 0 0 9px var(--navy),0 30px 70px rgba(45,59,110,.35);overflow:visible}
.theme-ui4 dialog[open]{animation:winOpen .55s both}
.theme-ui4 .modal{padding-top:58px;border-radius:20px;overflow:hidden}
.theme-ui4 .modal::before{content:"♡ rules.txt";position:absolute;left:0;right:0;top:0;height:38px;display:flex;align-items:center;padding:0 16px;background:linear-gradient(180deg,#8db4ff,#5d8eee);border-bottom:2px solid var(--navy);color:#fff;font:700 .95rem var(--pixel)}
.theme-ui4 .modal-head .eyebrow{font-family:var(--pixel);text-transform:none;background:var(--pink-l);border:2px solid var(--navy);border-radius:999px;padding:1px 12px}
.theme-ui4 .modal-head h2{color:var(--navy);font-size:1.6rem}
.theme-ui4 .close{position:absolute;right:10px;top:6px;width:30px;height:26px;border-radius:8px;background:var(--pink);border:2px solid var(--navy);color:#fff;font-size:1.1rem}
.theme-ui4 .rules{background:#f4f8ff;border:2px solid var(--navy);border-radius:16px}
.theme-ui4 .message.success{background:#e3f7c9}

/* ---- admin ---- */
.theme-ui4 .admin-tabs{background:#fff;border:2px solid var(--navy);border-radius:999px;padding:6px;box-shadow:0 4px 0 var(--navy)}
.theme-ui4 .admin-tabs a{border:2px solid transparent;border-radius:999px}
.theme-ui4 .admin-tabs a:hover{background:var(--pink-l);border-color:var(--navy)}
.theme-ui4 .panel{padding-top:56px;overflow:hidden}
.theme-ui4 .panel::before{content:"●  ●  ●";position:absolute;left:0;right:0;top:0;height:34px;display:flex;align-items:center;padding:0 16px;background:linear-gradient(180deg,#d9e7ff,#b7cffb);border-bottom:2px solid var(--navy);color:var(--pink);font-size:.8rem;letter-spacing:.1em}
.theme-ui4 .step{background:var(--pink);border:2px solid var(--navy)}
.theme-ui4 .tile{background:#f4f8ff;border:2px solid var(--navy);border-radius:16px}
.theme-ui4 .tile:nth-child(2){background:#fff0f7}
.theme-ui4 .folder{background:#f4f8ff;border:2px dashed var(--blue)}
.theme-ui4 .package-card{background:linear-gradient(135deg,#fff,#ffe9f3)}
.theme-ui4 .countdown{font-family:var(--pixel);color:var(--navy)}
.theme-ui4 .locked-pill{background:var(--pink);color:#fff;border:1.5px solid var(--navy)}
.theme-ui4 .request-card,.theme-ui4 .group-card{background:#fff}
.theme-ui4 .login-card{padding-top:58px;overflow:hidden}
.theme-ui4 .login-card::before{content:"★ login.exe";position:absolute;left:0;right:0;top:0;height:38px;display:flex;align-items:center;padding:0 16px;background:linear-gradient(180deg,#8db4ff,#5d8eee);border-bottom:2px solid var(--navy);color:#fff;font:700 .95rem var(--pixel)}
.theme-ui4 .login-logo{background:var(--pink-l);border:2px solid var(--navy);border-radius:16px;box-shadow:0 3px 0 var(--navy)}
.theme-ui4 .section-intro h1{display:inline-block;background:#fff;border:2px solid var(--navy);border-radius:999px;padding:4px 20px;box-shadow:0 4px 0 var(--navy)}
.theme-ui4 .dashboard-hero{padding-top:58px}
.theme-ui4 .dashboard-hero .eyebrow{font-family:var(--pixel);text-transform:none;letter-spacing:.06em}
.theme-ui4 .dashboard-hero h1{color:var(--navy)}
.theme-ui4 .dashboard-hero .hero-art{min-height:220px}
.theme-ui4 .dashboard-hero .hero-photo{width:140px;height:190px;right:30%;padding:10px 8px 22px;box-shadow:0 0 0 6px var(--pink),0 0 0 8px var(--navy)}
.theme-ui4 .dashboard-hero .hero-logo{width:130px;height:130px;right:0;top:36px}
.theme-ui4 .dashboard-hero .hero-art .sticker.s2,.theme-ui4 .dashboard-hero .hero-art .typing{display:none}
.theme-ui4 .dashboard-hero .ph::before{font-size:1.1rem}

@media(max-width:760px){
  .theme-ui4 .hero{padding:58px 18px 24px}
  .theme-ui4 .hero::before{content:"★ welcome"}
  .theme-ui4 .hero-art{min-height:320px}
  .theme-ui4 .hero-photo{left:4%;width:172px;height:250px;padding:10px 8px 24px}
  .theme-ui4 .hero-art .sticker.s2{bottom:10px}
  .theme-ui4 .hero-logo{width:150px;height:150px;right:0}
  .theme-ui4 .footer{padding-left:14px;padding-top:44px}
  .theme-ui4 .footer::before{top:10px;translate:0 0}
  .theme-ui4 .ticker::before{content:"♪"}
}
@media(max-width:520px){
  .theme-ui4 .art{height:120px}
  .theme-ui4 .group{padding:8px 8px 14px}
  .theme-ui4 .group::before{left:14px;top:14px;font-size:.7rem;padding:0 8px}
  .theme-ui4 .group::after{right:14px;width:20px;height:28px}
  .theme-ui4 .group b{font-size:1.05rem}
  .theme-ui4 .section-head h2{font-size:1.05rem;padding:6px 14px 6px 8px}
}

/* ตัวตรวจลิงก์รูปในหลังบ้าน */
.img-check{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;border-radius:12px;font-size:.84rem;line-height:1.45;background:var(--surface-2);color:var(--muted);animation:popIn .35s var(--ease-pop) both}
.img-check img{width:46px;height:46px;object-fit:cover;border-radius:10px;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.12);flex:0 0 auto}
.img-check.ok{background:#e5f6e9;color:#22683b}.img-check.bad{background:#ffecee;color:#a3303f}
.img-check .spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;flex:0 0 auto}

.img-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.img-tools .btn{min-height:38px;padding:6px 14px;font-size:.88rem}

/* ป้ายกลุ่มที่ต้องใช้รหัส */
.group .lock-badge{align-self:flex-start;margin-top:8px;padding:2px 10px;border-radius:999px;font-size:.74rem;font-weight:700;background:var(--surface);color:var(--ink);border:1.5px solid currentColor;opacity:.9}
.message{white-space:pre-line}

/* =====================================================================
   ร้านค้าแคตตาล็อก (หน้าแรก) — ใช้ token ของแต่ละ UI + ลูกเล่นเฉพาะธีมด้านล่าง
   ===================================================================== */
.shop{padding-bottom:120px}
.shop-top{position:relative}
.shop-top .brand{min-width:0}
.shop-id{display:grid;min-width:0;line-height:1.25}
.shop-line{display:flex;align-items:center;gap:8px;min-width:0}.shop-line>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.open-badge{flex:0 0 auto;padding:2px 9px;border-radius:999px;font:800 .66rem/1.5 system-ui,sans-serif;letter-spacing:.08em;background:#2fb866;color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,#2fb866,transparent 80%);animation:pulse 2.4s ease-in-out infinite}
.open-badge.closed{background:#e5484d;box-shadow:0 0 0 3px color-mix(in srgb,#e5484d,transparent 80%)}
.shop-hours{font-size:.76rem;font-weight:500;color:var(--muted);font-family:var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-btn{position:relative;flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--cta);color:var(--cta-ink);box-shadow:var(--btn-shadow);transition:transform .25s var(--ease-pop)}
.cart-btn:hover{transform:rotate(-10deg) scale(1.08)}.cart-btn svg,.bottom-nav svg{width:24px;height:24px;fill:currentColor}
.cart-count{position:absolute;right:-4px;top:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--hi);color:#fff;font:800 .7rem/20px system-ui,sans-serif;text-align:center;font-style:normal;border:2px solid var(--surface);animation:popIn .4s var(--ease-pop) both}
.see-all{border:var(--outline-border);background:var(--surface);color:var(--ink);border-radius:999px;padding:4px 14px;font-weight:700;font-size:.82rem;transition:transform .2s var(--ease-pop)}.see-all:hover{transform:translateY(-2px)}
#featuredWrap{margin-bottom:34px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.shop-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:var(--card-border);border-radius:var(--r);box-shadow:var(--card-shadow);padding:10px;transition:transform .3s var(--ease-pop),box-shadow .3s ease}
.shop-card:hover{transform:translateY(-6px)}
.sc-media{position:relative;display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2);cursor:pointer}
.sc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}.shop-card:hover .sc-media img{transform:scale(1.06)}.sc-media .ph{position:absolute;inset:0}
.sc-preview{position:absolute;z-index:3;right:18px;top:18px;padding:3px 10px;border-radius:999px;border:0;background:rgba(255,255,255,.92);color:#444;font-size:.74rem;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:transform .2s var(--ease-pop)}.sc-preview:hover{transform:scale(1.08)}
.sc-flag{position:absolute;z-index:3;left:18px;top:18px;padding:2px 10px;border-radius:999px;background:var(--hi);color:#fff;font-size:.72rem;font-weight:800;animation:wiggle 3s ease-in-out infinite}
.sc-body{display:flex;flex-direction:column;flex:1;padding:10px 4px 2px}
.sc-name{font-family:var(--font-head);font-weight:var(--head-weight);font-size:1.02rem;line-height:1.3;cursor:pointer;overflow-wrap:anywhere}
.sc-cat{color:var(--muted);font-size:.76rem;margin-top:2px}
.sc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px;border-top:1px dashed var(--line)}
.sc-price{font-weight:800;color:var(--ink);font-size:1.02rem}
.sc-add{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:var(--outline-border);background:var(--surface-2);color:var(--ink);font-size:1.2rem;font-weight:800;line-height:1;transition:transform .3s var(--ease-pop),background .2s}
.sc-add:hover{transform:rotate(90deg) scale(1.1)}.sc-add.on{background:var(--hi);color:#fff;border-color:transparent}.sc-add.bump{animation:jelly .5s ease}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;margin-bottom:6px;scrollbar-width:none}
.chip{flex:0 0 auto;padding:7px 16px;border-radius:999px;border:var(--outline-border);background:var(--surface);color:var(--ink);font-weight:700;font-size:.88rem;transition:transform .2s var(--ease-pop)}
.chip:hover{transform:translateY(-2px)}.chip.on{background:var(--cta);color:var(--cta-ink);border-color:transparent}
.cart-list{display:grid;gap:12px}
.cart-item{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:10px;background:var(--surface);border:var(--card-border);border-radius:var(--r);box-shadow:var(--card-shadow)}
.ci-thumb{display:block;width:72px;height:72px;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2);position:relative}.ci-thumb img{width:100%;height:100%;object-fit:cover}.ci-thumb .ph{position:absolute;inset:0}
.cart-item b{display:block;font-family:var(--font-head);font-weight:var(--head-weight)}.cart-item small{color:var(--muted);font-weight:700}
.ci-remove{border:var(--outline-border);background:var(--surface);color:#c0394a;border-radius:999px;padding:6px 14px;font-weight:700;font-size:.82rem}
.cart-sum{margin-top:18px;padding:20px 22px;background:var(--surface);border:var(--card-border);border-radius:var(--r);box-shadow:var(--card-shadow)}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;color:var(--muted)}.sum-row.total{border-top:1.5px dashed var(--line);margin-top:6px;padding-top:14px;color:var(--ink);font-size:1.15rem}.sum-row.total b{font-size:1.4rem}
.order-btn{margin-top:14px;min-height:54px;font-size:1.02rem}
.bottom-nav{position:fixed;z-index:40;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(560px,calc(100% - 24px));display:grid;grid-template-columns:repeat(4,1fr);padding:6px;background:color-mix(in srgb,var(--surface),transparent 6%);backdrop-filter:blur(10px);border:var(--card-border);border-radius:24px;box-shadow:var(--card-shadow),0 12px 30px rgba(0,0,0,.12);animation:riseIn .6s .4s var(--ease-out) both}
.bottom-nav button{position:relative;display:grid;justify-items:center;gap:2px;padding:6px 4px;border:0;background:none;color:var(--muted);border-radius:18px;font-size:.72rem;font-weight:700;transition:color .2s,background .2s,transform .2s var(--ease-pop)}
.bottom-nav button:hover{transform:translateY(-2px)}.bottom-nav button.on{color:var(--cta);background:var(--surface-2)}
.bottom-nav button.on::after{content:"";position:absolute;bottom:3px;width:5px;height:5px;border-radius:50%;background:currentColor}
.bottom-nav .cart-count{right:calc(50% - 26px);top:0}
.toast{position:fixed;z-index:2147480000;left:50%;top:18px;transform:translate(-50%,-20px);max-width:min(560px,calc(100% - 24px));padding:12px 22px;border-radius:999px;background:rgba(74,55,60,.94);color:#fff;font-weight:700;font-size:.92rem;box-shadow:0 12px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease-pop);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
#productDialog{width:min(460px,calc(100vw - 24px))}.product{padding-top:20px}
.pd-close{position:absolute;z-index:3;right:14px;top:14px}
.pd-img{position:relative;aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2)}.pd-img img{width:100%;height:100%;object-fit:cover;animation:popIn .4s ease both}.pd-img .ph{position:absolute;inset:0}
.product h2{margin:14px 0 4px;font-family:var(--font-head);font-weight:var(--head-weight);font-size:1.35rem}
.pd-meta{display:flex;align-items:center;gap:10px}.pd-price{font-size:1.35rem;font-weight:800}.pd-cat{padding:2px 10px;border-radius:999px;background:var(--surface-2);color:var(--link);font-size:.78rem;font-weight:700}
.pd-desc{color:var(--muted);white-space:pre-line;margin:10px 0 0;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.pd-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pd-actions .btn{margin-top:14px}
#orderText{font-family:var(--font-body);font-size:.95rem}
@media(max-width:620px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.shop-card{padding:7px}.sc-preview{right:12px;top:12px;font-size:.66rem;padding:2px 8px}.sc-flag{left:12px;top:12px;font-size:.64rem}.sc-name{font-size:.9rem}.sc-price{font-size:.9rem}.sc-add{width:30px;height:30px}.cart-item{grid-template-columns:58px 1fr auto}.ci-thumb{width:58px;height:58px}.shop-hours{max-width:52vw}}

/* ---- UI1 · Corkboard: โพลารอยด์ติดเทป ---- */
.theme-ui1 .shop-card{background:#fff;border-radius:6px;padding:10px 10px 12px;box-shadow:0 2px 0 #eadfce,0 12px 22px rgba(100,70,40,.16);rotate:var(--tilt,0deg)}
.theme-ui1 .shop-card:nth-child(4n+1){--tilt:-1deg;--tape:rgba(246,183,203,.85)}.theme-ui1 .shop-card:nth-child(4n+2){--tilt:.8deg;--tape:rgba(200,228,160,.85)}.theme-ui1 .shop-card:nth-child(4n+3){--tilt:-.5deg;--tape:rgba(255,226,130,.85)}.theme-ui1 .shop-card:nth-child(4n){--tilt:1deg;--tape:rgba(180,215,245,.85)}
.theme-ui1 .shop-card::before{content:"";position:absolute;z-index:4;left:50%;top:-10px;width:70px;height:20px;background:var(--tape);transform:translateX(-50%) rotate(-3deg);clip-path:polygon(4% 0,96% 6%,100% 100%,0 92%)}
.theme-ui1 .shop-card:hover{rotate:0deg}
.theme-ui1 .sc-media,.theme-ui1 .pd-img{border-radius:3px}
.theme-ui1 .sc-price{color:#c65a82}
.theme-ui1 .bottom-nav{background:#fffaf2;border:1.5px solid #e6d2ba;box-shadow:0 6px 0 #e6d1b7,0 14px 30px rgba(110,80,50,.15)}
.theme-ui1 .bottom-nav::before{content:"";position:absolute;left:24px;top:-10px;width:60px;height:18px;background:rgba(246,183,203,.85);transform:rotate(-4deg)}
.theme-ui1 .bottom-nav button.on{background:#ffe8ef;color:#b35577}
.theme-ui1 .chip.on{background:#e8729c}
.theme-ui1 .toast{background:#6d4c41}

/* ---- UI2 · Scrap Lab: เส้นดำ เงาแข็ง ---- */
.theme-ui2 .shop-card{border:2px solid #26222b;border-radius:4px;box-shadow:6px 6px 0 #26222b}
.theme-ui2 .shop-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 #26222b}
.theme-ui2 .sc-media,.theme-ui2 .pd-img,.theme-ui2 .ci-thumb{border:2px solid #26222b;border-radius:2px}
.theme-ui2 .sc-preview{background:#26222b;color:#fff36d;border-radius:3px;box-shadow:none;font-family:"Space Mono",monospace}
.theme-ui2 .sc-flag{background:#fff36d;color:#26222b;border:2px solid #26222b;border-radius:3px}
.theme-ui2 .sc-add{border-radius:4px;background:#fff36d;border:2px solid #26222b;box-shadow:2px 2px 0 #26222b}.theme-ui2 .sc-add.on{background:#ff5f9e;color:#fff;border:2px solid #26222b}
.theme-ui2 .sc-foot{border-top:2px dashed #26222b}
.theme-ui2 .cart-btn{border-radius:6px;border:2px solid #26222b;box-shadow:3px 3px 0 #26222b}
.theme-ui2 .chip{border-radius:4px;box-shadow:3px 3px 0 #26222b}.theme-ui2 .chip.on{background:#26222b;color:#fff36d}
.theme-ui2 .bottom-nav{border:2px solid #26222b;border-radius:6px;box-shadow:6px 6px 0 #26222b;background:#fff}
.theme-ui2 .bottom-nav button{border-radius:4px}.theme-ui2 .bottom-nav button.on{background:#fff36d;color:#26222b;outline:2px solid #26222b}
.theme-ui2 .cart-item,.theme-ui2 .cart-sum{border:2px solid #26222b}
.theme-ui2 .toast{background:#26222b;color:#fff36d;border-radius:4px;box-shadow:5px 5px 0 #ff5f9e;font-family:"Kanit",sans-serif}

/* ---- UI3 · Bubble Chat: บับเบิลนุ่ม ---- */
.theme-ui3 .shop-card{border-radius:26px 26px 26px 10px;box-shadow:0 10px 26px rgba(40,90,150,.12)}
.theme-ui3 .shop-card:nth-child(even){border-radius:26px 26px 10px 26px}
.theme-ui3 .sc-media{border-radius:20px}
.theme-ui3 .sc-add{background:var(--cta);color:#fff;border:0;box-shadow:0 4px 10px color-mix(in srgb,var(--cta),transparent 60%)}.theme-ui3 .sc-add.on{background:#35c46b}
.theme-ui3 .sc-price{color:#2f78dc}
.theme-ui3 .bottom-nav{border:0;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 14px 34px rgba(40,90,150,.2)}
.theme-ui3 .bottom-nav button{border-radius:999px}.theme-ui3 .bottom-nav button.on{background:#eaf3ff;color:#2f78dc}
.theme-ui3 .cart-item{border-radius:22px 22px 22px 8px}
.theme-ui3 .toast{background:var(--cta);border-radius:22px 22px 22px 6px}

/* ---- UI4 · Pastel OS: หน้าต่าง + ทาสก์บาร์ ---- */
.theme-ui4 .shop-card{border:2px solid var(--navy);border-radius:22px;box-shadow:0 5px 0 var(--navy),0 16px 26px rgba(45,59,110,.12);padding:10px}
.theme-ui4 .shop-card::after{content:"";position:absolute;z-index:4;left:22px;top:-2px;width:22px;height:30px;background:var(--pink);border:2px solid var(--navy);border-top:0;clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%)}
.theme-ui4 .sc-media,.theme-ui4 .pd-img,.theme-ui4 .ci-thumb{border:2px solid var(--navy);border-radius:16px}
.theme-ui4 .sc-preview{background:#fff;border:2px solid var(--navy);box-shadow:none;color:var(--navy);font-family:var(--pixel)}
.theme-ui4 .sc-flag{left:auto;right:18px;top:auto;bottom:calc(100% - 50px);display:none}
.theme-ui4 .sc-add{background:var(--pink);color:#fff;border:2px solid var(--navy);box-shadow:0 3px 0 var(--navy)}.theme-ui4 .sc-add.on{background:var(--mint);color:var(--navy)}
.theme-ui4 .sc-price{font-family:var(--pixel);color:var(--navy)}
.theme-ui4 .cart-btn{border:2px solid var(--navy);background:#fff;color:var(--navy);box-shadow:0 3px 0 var(--navy)}
.theme-ui4 .shop-top .open-badge{border:1.5px solid var(--navy);font-family:var(--pixel)}
.theme-ui4 .shop-top .shop-hours{color:#eaf1ff}
.theme-ui4 .chip{border:2px solid var(--navy);box-shadow:0 3px 0 var(--navy)}.theme-ui4 .chip.on{background:var(--pink);color:#fff}
.theme-ui4 .bottom-nav{background:linear-gradient(180deg,#8db4ff,#5d8eee);border:2px solid var(--navy);border-radius:16px;box-shadow:0 5px 0 var(--navy)}
.theme-ui4 .bottom-nav button{color:#fff;border-radius:12px;font-family:var(--pixel)}.theme-ui4 .bottom-nav button.on{background:#fff;color:var(--navy);outline:2px solid var(--navy)}
.theme-ui4 .cart-item,.theme-ui4 .cart-sum{border:2px solid var(--navy);box-shadow:0 4px 0 var(--navy)}
.theme-ui4 .toast{background:#fff;color:var(--navy);border:2px solid var(--navy);box-shadow:0 4px 0 var(--navy);font-family:"Mitr",sans-serif}

/* ===== v17 · แคตตาล็อกหน้าตาเดียวกับหน้าอ่านกฎ + หน้าพรีวิวสินค้า ===== */
.top-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.enter-mini{display:none;align-items:center;gap:4px;height:40px;padding:0 12px;border-radius:999px;border:var(--outline-border,2px solid currentColor);background:var(--surface);color:var(--ink);font-weight:700;font-size:.8rem}
.enter-mini svg{width:16px;height:16px;fill:currentColor}
@media(max-width:620px){.enter-full{display:none}.enter-mini{display:inline-flex}.cart-btn{width:42px;height:42px}}
.catalog-card .art{position:relative}
.card-flag,.card-count{position:absolute;z-index:2;top:8px;padding:2px 10px;border-radius:999px;font-size:.7rem;font-weight:800;line-height:1.6}
.card-flag{left:8px;background:var(--hi,#eb6c9e);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.card-count{right:8px;background:rgba(255,255,255,.92);color:var(--ink)}
.catalog-card .price-badge{margin-top:8px}
#catChips:not(.hidden){margin-top:-4px}
/* หน้าพรีวิวสินค้า */
#productDialog{width:min(560px,calc(100vw - 24px))}
#productDialog .modal{max-height:calc(100vh - 24px);overflow:auto}
.pd-gallery{margin-top:10px}.pd-gallery .gallery-main{aspect-ratio:1/1}
.pd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.pd-meta:has(.pd-cat.hidden):has(.pd-flag.hidden){display:none}
.pd-flag{padding:2px 10px;border-radius:999px;background:var(--hi,#eb6c9e);color:#fff;font-size:.78rem;font-weight:800}
.product h2{margin:8px 0 2px}
#pdPrice{font-size:1.6rem;font-weight:800;color:var(--cta,#e8729c)}
.pd-desc:empty{display:none}
.pd-desc{margin-top:10px;padding:14px 16px;border:0;border-radius:var(--r-sm,14px);background:var(--surface-2);color:var(--ink)}
.pd-enter{display:block;margin:14px auto 0;border:0;background:none;color:var(--muted);font-weight:700;font-size:.88rem;text-decoration:underline;text-underline-offset:3px}
#cartDialog{width:min(560px,calc(100vw - 24px))}
#cartDialog .state{margin-top:16px}#cartDialog .cart-list{margin-top:16px}
.theme-ui2 .card-flag{border-radius:3px;background:#fff36d;color:#26222b;border:2px solid #26222b;transform:rotate(-4deg)}
.theme-ui2 .card-count,.theme-ui2 .pd-flag{border-radius:3px;border:2px solid #26222b}
.theme-ui2 .enter-mini{border-radius:6px;border:2px solid #26222b;box-shadow:3px 3px 0 #26222b}
.theme-ui4 .card-flag,.theme-ui4 .pd-flag{background:var(--pink);border:1.5px solid var(--navy)}
.theme-ui4 .enter-mini{border:2px solid var(--navy);color:var(--navy);box-shadow:0 3px 0 var(--navy)}
.theme-ui1 .card-flag{border-radius:3px;transform:rotate(-3deg)}
.pd-gallery .gallery-main{aspect-ratio:4/3;max-height:52vh;width:100%}
.theme-ui4 #productDialog .modal::before{content:"♡ preview.png"}
.theme-ui4 #cartDialog .modal::before{content:"♡ cart.exe"}
.theme-ui4 #orderDialog .modal::before{content:"♡ order.txt"}
.theme-ui4 #gateDialog .modal::before{content:"♡ login.exe"}
@media(max-width:620px){.enter-mini{width:42px;height:42px;padding:0;justify-content:center}.enter-mini span{display:none}.enter-mini svg{width:20px;height:20px}.top-actions{gap:8px}.shop-top{gap:8px}}

/* ===== v17 · ตารางราคาในหลังบ้าน ===== */
.price-board:not(.panel){margin-top:26px;padding-top:20px;border-top:1px dashed var(--line,rgba(0,0,0,.15))}
.price-board h3{margin:0 0 4px;font-family:var(--font-head);font-weight:var(--head-weight,700)}
.price-table{display:grid;gap:8px;margin-top:12px}
.pt-row{display:grid;grid-template-columns:minmax(0,1.6fr) 110px minmax(0,1fr) 52px 52px auto;gap:10px;align-items:center;padding:8px 10px;border-radius:var(--r-sm,12px);background:var(--surface-2,#f6f3fb);transition:box-shadow .2s}
.pt-row.dirty{box-shadow:0 0 0 2px var(--hi,#eb6c9e)}
.pt-head{background:none;padding:0 10px;font-size:.78rem;font-weight:700;color:var(--muted)}
.pt-name{display:flex;align-items:center;gap:10px;min-width:0}.pt-name>div{min-width:0}
.pt-name b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pt-name small{display:block;font-size:.74rem;color:var(--muted)}
.pt-thumb{flex:0 0 auto;width:44px;height:44px;border-radius:10px;overflow:hidden;background:var(--surface,#fff);display:grid}.pt-thumb img{width:100%;height:100%;object-fit:cover}.pt-thumb .ph{font-size:0}
.pt-row input[type=text],.pt-row input:not([type]){width:100%;min-width:0;padding:8px 10px;margin:0;font-weight:700}
.pt-price{text-align:right}
.pt-check{display:grid;place-items:center;margin:0}.pt-check input{width:20px;height:20px;accent-color:var(--cta,#e8729c)}
.pt-edit{width:auto!important;min-height:38px!important;margin:0!important;padding:6px 12px!important;font-size:.8rem}
@media(max-width:720px){
  .pt-head{display:none}
  .pt-row{grid-template-columns:1fr 1fr;gap:8px}
  .pt-name{grid-column:1/-1}
  .pt-check{display:flex;gap:6px;justify-content:flex-start;font-size:.85rem;font-weight:700}.pt-check::after{content:attr(data-label)}
  .pt-edit{grid-column:1/-1}
}
.pt-head span:nth-child(2){text-align:right;padding-right:10px}.pt-head span:nth-child(4),.pt-head span:nth-child(5){text-align:center}

/* ===== v19 · ยืนยันอีเมล ===== */
.email-check{margin:6px 0 0;font-size:.85rem;font-weight:700;color:#d64550}.email-check.ok{color:#2a9d5c}
.message{white-space:pre-line}
/* ===== v19 · หลังบ้าน: แจ้งเตือน / ค้นหา / แก้อีเมล / ถอนสิทธิ์ ===== */
.alert-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 16px;padding:14px 18px;border-radius:var(--r,16px);background:#fff1f1;color:#8a1c24;border:2px solid #f3a6ab;box-shadow:0 6px 18px rgba(214,69,80,.15);animation:popIn .4s ease both}
.alert-bar span{flex:1 1 260px;font-size:.9rem}.alert-bar .btn{width:auto;margin:0;min-height:40px;padding:8px 16px;text-decoration:none;display:inline-flex;align-items:center}
.req-search{display:flex;gap:8px;margin:0 0 10px}.req-search input{flex:1;min-width:0;margin:0}.req-search .btn{width:auto;margin:0;min-height:44px}
.req-editor{margin-top:10px;padding:12px 14px;border-radius:var(--r-sm,12px);background:var(--surface-2,#f6f3fb)}.req-editor .field{margin-top:4px}
.btn.danger{color:#c2343d;border-color:#f0a7ad}.btn.danger.armed{background:#e5484d;color:#fff;border-color:#e5484d}
.img-store{margin:12px 0 0;padding:10px 12px;border-radius:var(--r-sm,12px);background:var(--surface-2,#f6f3fb)}

/* ===== v20 · หลังบ้านแบบแยกหน้า ===== */
.superadmin-mode .admin-page{display:none!important}
.user-nav{position:sticky;top:10px;z-index:30;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.user-nav::-webkit-scrollbar{display:none}
.user-nav a{position:relative;flex:0 0 auto;display:inline-flex!important;align-items:center;gap:7px;white-space:nowrap}
.user-nav a i{font-style:normal}
.user-nav a.on{background:var(--cta)!important;color:var(--cta-ink,#fff)!important;box-shadow:var(--btn-shadow,none)}
.user-nav .nav-ext{margin-left:auto;opacity:.85}
.nav-badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#e5484d;color:#fff;font-size:.72rem;line-height:20px;text-align:center;animation:popIn .4s ease both}
.nav-dot{width:9px;height:9px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.25)}
.admin-page{animation:pageIn .35s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page-head{margin:6px 0 14px}.page-head h1{margin:0;font-family:var(--font-head);font-weight:var(--head-weight,700);font-size:clamp(1.4rem,3vw,1.9rem)}.page-head p{margin:4px 0 0;color:var(--muted);font-size:.92rem}
.admin-page>.panel+.panel,.admin-page>section+section{margin-top:18px}
.page-jump{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 4px}.page-jump a{padding:6px 14px;border-radius:999px;background:var(--surface);border:var(--outline-border,1.5px solid var(--line));color:var(--ink);text-decoration:none;font-weight:700;font-size:.85rem}
/* ภาพรวม */
.overview{margin-bottom:18px}
.overview h2{margin:2px 0 4px}
.ov-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0 6px}
.ov-stat{display:grid;gap:2px;padding:16px;border-radius:var(--r-sm,14px);background:var(--surface-2);color:var(--ink);text-decoration:none;transition:transform .2s var(--ease-pop,ease)}
.ov-stat:hover{transform:translateY(-3px)}
.ov-stat b{font-size:1.9rem;line-height:1.1;font-family:var(--font-head)}.ov-stat span{font-size:.82rem;color:var(--muted);font-weight:600}
.ov-stat.hot b{color:var(--cta)}
.ov-title{margin:20px 0 8px;font-size:1rem;font-family:var(--font-head)}
.ov-check{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ov-check li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm,12px);background:var(--surface-2);font-size:.92rem}
.ov-check li i{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-weight:800;font-size:.8rem;background:#2fb866;color:#fff}
.ov-check li.todo i{background:#f5a524}
.ov-check li span{flex:1;min-width:0}
.ov-check li .btn{width:auto!important;margin:0!important;min-height:34px!important;padding:4px 12px!important;font-size:.8rem;text-decoration:none;white-space:nowrap}
.ov-check li.ok span{color:var(--muted)}
#p-home .dashboard-hero{margin-top:18px}
@media(max-width:760px){
  .ov-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .user-nav{top:0;margin-left:-4px;margin-right:-4px;border-radius:0 0 var(--r) var(--r)}
  .user-nav a{padding:8px 12px!important;font-size:.85rem!important}
  .ov-check li{flex-wrap:wrap}.ov-check li .btn{margin-left:34px!important}
}
#p-home .dashboard-hero{display:none}

/* ===== v21 · ปุ่มคัดลอก + แอดไลน์ร้าน ===== */
.order-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
.order-actions .btn{min-width:0!important;width:100%!important;margin-top:14px;gap:8px}
.order-actions .btn.hidden{display:none!important}
.order-actions:has(.line-btn.hidden){grid-template-columns:minmax(0,320px);justify-content:center}
.btn.copied{background:#e9f8ef!important;color:#1f8a4c!important;border-color:#8fd3a9!important}
.line-btn{background:#06c755!important;color:#fff!important;border-color:#06c755!important;text-decoration:none}
.line-btn svg{width:20px;height:20px;flex:0 0 auto}
.line-btn:hover{filter:brightness(1.06)}
.theme-ui2 .line-btn{border:2px solid #26222b!important;box-shadow:3px 3px 0 #26222b}
.theme-ui4 .line-btn{border:2px solid var(--navy)!important;box-shadow:0 4px 0 var(--navy)}
@media(max-width:420px){.order-actions{grid-template-columns:1fr}}
/* v23 · แก้รหัส */
.code-row{flex-wrap:wrap}
.code-edit{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;padding:10px;border-radius:var(--r-sm,12px);background:var(--surface-2)}
.code-edit input{flex:1 1 140px;min-width:0;margin:0;padding:8px 10px}.code-edit .ce-code{font-family:ui-monospace,monospace;font-weight:700;text-transform:uppercase}
.code-edit .btn{width:auto!important;margin:0!important;min-height:38px}.code-edit .status{flex-basis:100%;margin:0}
#groupCode,#shopCodeCustom{font-family:ui-monospace,monospace;font-weight:700;text-transform:uppercase}
.code-edit{grid-column:1/-1}
/* v26 · หมวดหมู่ */
.cat-list{display:grid;gap:8px;margin:10px 0}
.cat-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 12px;align-items:center;padding:8px 12px;border-radius:var(--r-sm,12px);background:var(--surface-2)}
.cat-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cat-row small{color:var(--muted);font-weight:700}
.cat-act{display:flex;gap:6px;flex-wrap:wrap}.cat-act .btn,.cat-add .btn,.cat-rename .btn{width:auto!important;margin:0!important;min-height:34px!important;padding:4px 12px!important;font-size:.82rem}
.cat-act .btn:disabled{opacity:.35}
.cat-rename{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}.cat-rename input{flex:1 1 160px;margin:0}
.cat-add{display:flex;gap:8px;margin-top:6px}.cat-add input{flex:1;min-width:0;margin:0}
.pt-row select.pt-cat{width:100%;min-width:0;padding:8px 10px;margin:0;font-weight:700}
@media(max-width:620px){.cat-row{grid-template-columns:1fr auto}.cat-act{grid-column:1/-1}}
/* v27 · ลากกลุ่มเข้าหมวด */
.cat-board-title{margin:18px 0 8px;font-size:1rem;font-family:var(--font-head)}.cat-board-title small{font-weight:500;color:var(--muted);font-size:.8rem}
.cat-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:10px}
.cat-col{display:flex;flex-direction:column;min-height:120px;border-radius:var(--r-sm,14px);background:var(--surface-2);border:2px dashed transparent;transition:border-color .15s,background .15s,transform .15s}
.cat-col.none{background:transparent;border-color:var(--line,rgba(0,0,0,.12))}
.cat-board.dragging .cat-col,.cat-board.picking .cat-col{border-color:color-mix(in srgb,var(--cta) 40%,transparent)}
.cat-col.over{border-color:var(--cta);background:color-mix(in srgb,var(--cta) 12%,var(--surface));transform:scale(1.02)}
.cat-col-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border:0;background:none;color:var(--ink);font-weight:800;text-align:left;cursor:pointer}
.cat-col-head small{min-width:22px;padding:0 7px;border-radius:999px;background:var(--surface);color:var(--muted);text-align:center}
.cat-board.picking .cat-col-head{color:var(--cta)}
.cat-col-body{display:flex;flex-direction:column;gap:6px;padding:0 8px 10px;flex:1}
.cat-chip{padding:8px 10px;border-radius:10px;background:var(--surface);border:1.5px solid var(--line,rgba(0,0,0,.1));font-size:.86rem;font-weight:700;cursor:grab;user-select:none;box-shadow:0 2px 6px rgba(0,0,0,.05);transition:transform .15s,box-shadow .15s}
.cat-chip:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.1)}
.cat-chip.dragging{opacity:.45}.cat-chip.off{opacity:.6;font-style:italic}
.cat-chip.picked{outline:3px solid var(--cta);outline-offset:1px}
.cat-empty{margin:auto;padding:10px;color:var(--muted);font-size:.8rem;text-align:center}
.theme-ui2 .cat-chip{border:2px solid #26222b;border-radius:3px;box-shadow:2px 2px 0 #26222b}
.theme-ui4 .cat-chip{border:2px solid var(--navy);box-shadow:0 3px 0 var(--navy)}