:root{--cream-50:#f5f9fc;--cream-100:#eaf2f7;--cream-200:#dce8f0;--ink:#2f3e48;--ink-soft:#7c919e;--gold:#23c483;--gold-deep:#17a56c;--gold-soft:rgba(35,196,131,.15);--glass:hsla(0,0%,100%,.64);--glass-strong:hsla(0,0%,100%,.82);--glass-border:hsla(0,0%,100%,.9);--shadow:0 12px 36px rgba(60,90,112,.1),0 2px 8px rgba(60,90,112,.05);--shadow-lift:0 22px 54px rgba(60,90,112,.15),0 6px 16px rgba(60,90,112,.08);--danger:#e2715f;--ok:#23c483;--radius:22px}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:ui-rounded,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans Thai,Leelawadee UI,sans-serif;line-height:1.7;letter-spacing:.005em;min-height:100vh;background:radial-gradient(1300px 900px at 85% -12%,rgba(46,200,150,.24),transparent 62%),radial-gradient(1000px 800px at -12% 22%,rgba(175,208,228,.55),transparent 58%),radial-gradient(800px 600px at 50% 115%,rgba(80,190,160,.18),transparent 62%),linear-gradient(165deg,var(--cream-50) 0,var(--cream-100) 50%,var(--cream-200) 100%);background-attachment:fixed}a{color:var(--gold-deep);text-decoration:none;transition:color .15s}a:hover{color:var(--gold)}.container{width:100%;max-width:1280px;margin:0 auto;padding:clamp(16px,3vw,36px) clamp(14px,4vw,48px) 80px}.container-narrow{max-width:620px}@media (min-width:1600px){.container{max-width:1440px}}h1{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.05rem);margin:0 0 6px;font-weight:700;letter-spacing:.005em}h1:after{content:"";display:block;width:48px;height:4px;margin-top:12px;border-radius:999px;background:linear-gradient(90deg,var(--gold),hsla(33,60%,65%,.2))}h2{font-size:1.15rem;margin:28px 0 14px;font-weight:650;letter-spacing:.005em}.muted{color:var(--ink-soft)}.small{font-size:.86rem}.card{background:var(--glass);-webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3);border:1px solid hsla(0,0%,100%,.7);border-radius:26px;padding:24px 26px;margin-bottom:20px;box-shadow:var(--shadow);transition:box-shadow .3s ease,transform .3s ease}.card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}details.fold{padding:18px 24px}details.fold:hover{transform:none}details.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:1.12rem;font-weight:700;color:var(--ink,#2f3e48);padding:4px 0}details.fold>summary::-webkit-details-marker{display:none}details.fold>summary:after{content:"▸";font-size:.95rem;color:var(--gold,#23c483);transition:transform .22s ease}details.fold[open]>summary:after{transform:rotate(90deg)}details.fold>summary .fold-tag{margin-left:auto;margin-right:8px;font-size:.72rem;font-weight:700;color:var(--gold-deep,#17a56c);background:rgba(35,196,131,.14);border-radius:999px;padding:2px 10px}details.fold[open]>summary{margin-bottom:12px}.btn,button{display:inline-block;background:linear-gradient(135deg,var(--gold) 0,var(--gold-deep) 100%);color:#fffdf8;border:none;border-radius:999px;padding:11px 22px;font-size:.95rem;font-weight:650;letter-spacing:.01em;cursor:pointer;box-shadow:0 6px 18px rgba(23,165,108,.3);transition:transform .2s ease,box-shadow .2s ease,opacity .2s}.btn:hover,button:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(23,165,108,.36)}.btn:active,button:active{transform:translateY(0) scale(.98)}button:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-ghost{background:var(--glass-strong);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid hsla(33,60%,65%,.3);color:var(--gold-deep);box-shadow:none}.btn-ghost:hover{background:var(--gold-soft);box-shadow:0 6px 16px rgba(23,165,108,.16)}input[type=search],input[type=text]{width:100%;background:var(--glass-strong);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1.5px solid hsla(33,60%,65%,.22);border-radius:16px;padding:13px 18px;color:var(--ink);font-size:1rem;outline:none;transition:border-color .2s,box-shadow .2s}input[type=search]:focus,input[type=text]:focus{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}input[type=checkbox]{accent-color:var(--gold);width:18px;height:18px;border-radius:6px}select{border-radius:14px!important;border:1.5px solid hsla(33,60%,65%,.22);background:var(--glass-strong);color:var(--ink)}.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-gap:14px;gap:14px}@media (min-width:1100px){.grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}@media (max-width:520px){.grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}}.grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;border:1px solid var(--glass-border);background:var(--cream-200);box-shadow:0 6px 18px rgba(150,120,82,.09);transition:transform .25s ease,box-shadow .25s ease}.grid img:hover{transform:scale(1.03) rotate(-.5deg);box-shadow:0 14px 32px rgba(150,120,82,.16)}.badge{display:inline-block;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--glass-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);color:var(--ink-soft);box-shadow:0 2px 8px rgba(59,50,39,.1)}.badge.ok{color:var(--ok);border-color:rgba(90,138,94,.35)}.dropzone{border:2px dashed hsla(33,60%,65%,.4);border-radius:22px;padding:40px 24px;text-align:center;color:var(--ink-soft);cursor:pointer;background:hsla(0,0%,100%,.4);transition:border-color .25s,background .25s,color .25s}.dropzone:hover{border-color:var(--gold);background:var(--gold-soft);color:var(--ink)}.qr{background:#fff;padding:14px;border-radius:18px;display:inline-block;border:1px solid var(--glass-border);box-shadow:var(--shadow)}.qr img{display:block;width:220px;height:220px}.notice{background:var(--gold-soft);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid hsla(33,60%,65%,.35);border-radius:18px;padding:16px 18px;font-size:.9rem}.frame-preview{max-width:160px;max-height:120px;border-radius:10px;border:1px solid var(--glass-border);background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 /16px 16px}code.path{display:inline-block;background:rgba(59,50,39,.06);border:1px solid rgba(59,50,39,.1);border-radius:8px;padding:3px 10px;font-size:.83rem;color:var(--ink);word-break:break-all}@media (max-width:600px){.card{padding:18px;border-radius:20px;margin-bottom:16px}h2{font-size:1.05rem;margin:20px 0 10px}.row{gap:10px}.btn-block-mobile{width:100%;text-align:center}}@keyframes soft-in{0%{opacity:0}to{opacity:1}}.card{animation:soft-in .45s ease both}.lang-switch{display:inline-flex;gap:4px}.lang-switch button{background:var(--glass-strong);color:var(--ink-soft);border:1px solid hsla(33,60%,65%,.28);border-radius:999px;padding:5px 12px;font-size:.82rem;font-weight:600;box-shadow:none}.lang-switch button.active{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fffdf8;border-color:transparent}