:root{--cream-50:#fdfbf7;--cream-100:#faf6ee;--cream-200:#f3ecdd;--ink:#3b3227;--ink-soft:#8a7d6b;--gold:#b8934a;--gold-deep:#9a7a3a;--gold-soft:rgba(184,147,74,.14);--glass:hsla(0,0%,100%,.55);--glass-strong:hsla(0,0%,100%,.72);--glass-border:hsla(0,0%,100%,.85);--shadow:0 8px 32px rgba(59,50,39,.1),0 2px 8px rgba(59,50,39,.06);--shadow-lift:0 16px 48px rgba(59,50,39,.14),0 4px 12px rgba(59,50,39,.08);--danger:#b3543e;--ok:#5a8a5e}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans Thai,Leelawadee UI,sans-serif;line-height:1.6;min-height:100vh;background:radial-gradient(1200px 800px at 85% -10%,hsla(36,49%,67%,.25),transparent 60%),radial-gradient(900px 700px at -10% 30%,hsla(37,52%,81%,.35),transparent 55%),radial-gradient(700px 500px at 50% 110%,rgba(201,169,98,.18),transparent 60%),linear-gradient(160deg,var(--cream-50) 0,var(--cream-100) 45%,var(--cream-200) 100%);background-attachment:fixed}a{color:var(--gold-deep);text-decoration:none;transition:color .15s}a:hover{color:var(--gold)}.container{max-width:980px;margin:0 auto;padding:32px 20px 80px}.container-narrow{max-width:580px}h1{font-size:1.9rem;margin:0 0 6px;font-weight:700;letter-spacing:.01em}h1:after{content:"";display:block;width:56px;height:3px;margin-top:10px;border-radius:2px;background:linear-gradient(90deg,var(--gold),rgba(184,147,74,.15))}h2{font-size:1.15rem;margin:28px 0 14px;font-weight:650}.muted{color:var(--ink-soft)}.small{font-size:.86rem}.card{background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);border:1px solid var(--glass-border);border-radius:20px;padding:22px;margin-bottom:18px;box-shadow:var(--shadow);transition:box-shadow .25s ease,transform .25s ease}.card:hover{box-shadow:var(--shadow-lift)}.btn,button{display:inline-block;background:linear-gradient(135deg,var(--gold) 0,var(--gold-deep) 100%);color:#fffdf8;border:none;border-radius:12px;padding:12px 22px;font-size:.95rem;font-weight:650;letter-spacing:.02em;cursor:pointer;box-shadow:0 4px 16px rgba(154,122,58,.35);transition:transform .15s ease,box-shadow .15s ease,opacity .15s}.btn:hover,button:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(154,122,58,.45)}.btn:active,button:active{transform:translateY(0)}button:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-ghost{background:var(--glass-strong);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(184,147,74,.35);color:var(--gold-deep);box-shadow:none}.btn-ghost:hover{background:var(--gold-soft);box-shadow:0 4px 14px rgba(154,122,58,.18)}input[type=search],input[type=text]{width:100%;background:var(--glass-strong);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(184,147,74,.25);border-radius:12px;padding:12px 16px;color:var(--ink);font-size:1rem;outline:none;transition:border-color .15s,box-shadow .15s}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}.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}.grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;border:1px solid var(--glass-border);background:var(--cream-200);box-shadow:0 4px 14px rgba(59,50,39,.08);transition:transform .2s ease,box-shadow .2s ease}.grid img:hover{transform:scale(1.025);box-shadow:0 10px 28px rgba(59,50,39,.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 rgba(184,147,74,.45);border-radius:16px;padding:38px 24px;text-align:center;color:var(--ink-soft);cursor:pointer;background:hsla(0,0%,100%,.35);transition:border-color .2s,background .2s,color .2s}.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 rgba(184,147,74,.4);border-radius:14px;padding:14px 16px;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}