:root{--brand-050:#f4f1fe;--brand-100:#ece7fd;--brand-600:#7c3aed;--brand-700:#6d28d9;--brand-ink:#4c1d95;--grad-brand:linear-gradient(135deg, #7c3aed 0%, #5b4be6 100%);--ink:#1e1b2e;--ink-2:#45415a;--muted:#5a5670;--line:#e7e3f2;--surface:#fff;--surface-2:#faf9fe;--bg:#f5f3fb;--ok:#15803d;--ok-bg:#eaf7ee;--warn:#b45309;--warn-bg:#fdf3e7;--danger:#dc2626;--danger-bg:#fdecec;--info:var(--brand-600);--shadow-sm:0 1px 2px #1e1b2e0f, 0 2px 6px #4c1d950f;--shadow-md:0 4px 10px #1e1b2e0f, 0 12px 28px #4c1d951a;--shadow-lg:0 10px 24px #1e1b2e14, 0 24px 60px #4c1d9524;--radius:16px;--radius-sm:12px;--radius-pill:999px;--tap:44px;--gutter:16px;--font:"Sarabun", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{min-height:100dvh;font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-size:16px;line-height:1.6}::selection{background:var(--brand-100);color:var(--brand-ink)}:root{accent-color:var(--brand-600);caret-color:var(--brand-600)}*{scrollbar-color:#c9c2e6 transparent;scrollbar-width:thin}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#cdc6e8 padding-box padding-box;border:2px solid #0000;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#b6acdf}:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--brand-600);outline-offset:2px;border-radius:6px}:where(button,a):focus:not(:focus-visible){outline:none}button{font:inherit;cursor:pointer;min-height:var(--tap);border-radius:var(--radius-sm);transition:background-color .16s,box-shadow .16s,border-color .16s,transform 60ms}button:active{transform:translateY(1px)}button:hover:not(:disabled){filter:brightness(.985)}button:disabled{opacity:.55;cursor:not-allowed}input,select,textarea{font:inherit;min-height:var(--tap);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);transition:border-color .16s,box-shadow .16s}textarea{min-height:84px}input:hover,select:hover,textarea:hover{border-color:#d6cff0}input:focus,select:focus,textarea:focus{border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-100);outline:none}::placeholder{color:#938ea8}a{color:var(--brand-700);text-underline-offset:2px}.app-container{width:100%;max-width:560px;padding:clamp(16px,4vw,20px);padding-left:max(var(--gutter), env(safe-area-inset-left));padding-right:max(var(--gutter), env(safe-area-inset-right));padding-bottom:max(24px, env(safe-area-inset-bottom));margin:0 auto}@media (width>=680px){.app-container{max-width:680px}}@media (width>=1024px){.app-container{max-width:760px}}.app-container{animation:.3s cubic-bezier(.22,.61,.36,1) both rise}.tile-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}@media (width>=600px){.tile-grid{grid-template-columns:repeat(3,1fr);gap:14px}}.photo-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}@media (width>=600px){.photo-grid{grid-template-columns:repeat(3,1fr)}}.photo-thumb:focus-visible{outline:3px solid var(--brand-600);outline-offset:2px}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:.9s linear infinite spin}.stat-3{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.stat-4{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}@media (width>=520px){.stat-4{grid-template-columns:repeat(4,1fr)}}.stat-2{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.rise{animation:.34s cubic-bezier(.22,.61,.36,1) both rise}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:clamp(16px,4.5vw,20px)}.h1{color:var(--brand-ink);letter-spacing:-.01em;margin:0;font-size:clamp(19px,5vw,22px);font-weight:700}.sub{color:var(--muted);font-size:13px}.muted{color:var(--muted)}.btn,.btn-ghost,.btn-danger{border-radius:var(--radius-sm);border:1px solid #0000;justify-content:center;align-items:center;gap:6px;padding:11px 16px;font-size:15px;font-weight:700;line-height:1.2;display:inline-flex}.btn{background:var(--grad-brand);color:#fff;box-shadow:0 2px 8px #7c3aed47}.btn:hover:not(:disabled){filter:saturate(1.05)brightness(1.03);box-shadow:0 4px 14px #7c3aed5c}.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}.btn-ghost:hover:not(:disabled){background:var(--surface-2);border-color:#cfc7ef}.btn-danger{background:var(--surface);color:var(--danger);border-color:#f3cccc}.btn-danger:hover:not(:disabled){background:var(--danger-bg)}.field{border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);width:100%;padding:11px 12px;font-size:15px}.seg{border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink-2);justify-content:center;align-items:center;gap:6px;padding:9px 14px;font-size:14px;font-weight:600;display:inline-flex}.seg:hover{border-color:#cfc7ef}.seg.on{background:var(--grad-brand);color:#fff;border-color:#0000;box-shadow:0 2px 8px #7c3aed42}.tabs{scrollbar-width:none;gap:8px;margin-bottom:12px;padding-bottom:4px;display:flex;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tabs .seg{flex:none}.label{color:var(--muted);margin-bottom:4px;font-size:13px;display:block}.stack{gap:10px;display:grid}.icon-btn{width:var(--tap);height:var(--tap);flex:none;padding:0}.icon-btn:disabled{opacity:.4}.toast{z-index:50;max-width:560px;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);align-items:center;gap:10px;margin-inline:auto;padding:12px 12px 12px 16px;font-size:14px;font-weight:600;animation:.22s cubic-bezier(.22,.61,.36,1) both rise;display:flex;position:fixed}.toast[data-tone=ok]{background:var(--ok-bg);color:var(--ok);border:1px solid #bfe5cb}.toast[data-tone=err]{background:var(--danger-bg);color:var(--danger);border:1px solid #f3cccc}.toast button{all:unset;cursor:pointer;border-radius:8px;place-items:center;width:32px;height:32px;display:grid}.toast button:focus-visible{outline:2px solid}.pill{border-radius:var(--radius-pill);align-items:center;gap:5px;padding:3px 10px;font-size:12px;font-weight:600;display:inline-flex}.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.danger{background:var(--danger-bg);color:var(--danger)}.pill.muted{background:var(--brand-050);color:var(--muted)}.row{border-top:1px solid var(--line);padding:12px 0}.row:first-child{border-top:0}@keyframes shimmer{0%{background-position:-320px 0}to{background-position:320px 0}}.skeleton{background:linear-gradient(90deg,#efecf9 25%,#f6f4fc 37%,#efecf9 63%) 0 0/640px 100%;border-radius:10px;animation:1.3s linear infinite shimmer}@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}@media print{body{background:#fff}}