:root{--dusk: #2A2C63;--moon: #F3EBD8;--ink: #3B2F52;--line: rgba(59, 47, 82, .18);--danger: #B3384F}*{box-sizing:border-box}body{margin:0;font-family:Mali,system-ui,sans-serif;color:var(--ink);background:var(--moon)}.wrap{max-width:560px;margin:0 auto;padding:32px 16px 64px}h1{margin:0 0 24px;font-size:1.9rem;color:var(--dusk)}h2{margin:40px 0 12px;font-size:1.2rem}.panel{display:grid;gap:14px;padding:20px;background:#fff;border:2px solid var(--dusk);border-radius:14px}label{display:grid;gap:6px;font-weight:500}input[type=email],input[type=password],textarea{font:inherit;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;color:var(--ink)}textarea{resize:vertical;line-height:1.6}input:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid var(--dusk);outline-offset:2px}button{font:inherit;font-weight:600;color:var(--moon);background:var(--dusk);border:0;border-radius:999px;padding:10px 22px;cursor:pointer}button.link{color:var(--dusk);background:none;padding:4px 6px;font-weight:500;text-decoration:underline}button.danger{color:var(--danger)}.swatches{display:flex;flex-wrap:wrap;gap:10px;border:0;margin:0;padding:0}.swatches legend{font-weight:500;margin-bottom:6px;padding:0}.swatch{width:36px;height:36px;border-radius:50%;background:var(--c);border:3px solid transparent;cursor:pointer}.swatch:has(input:checked){border-color:var(--dusk)}.swatch:has(input:focus-visible){outline:3px solid var(--dusk);outline-offset:2px}.swatch input{position:absolute;opacity:0;pointer-events:none}.photo-pick{display:flex;justify-content:center;padding:14px;border:2px dashed var(--line);border-radius:10px;cursor:pointer;font-weight:500}.photo-pick:focus-within{outline:3px solid var(--dusk);outline-offset:2px}.photo-pick input{position:absolute;opacity:0;width:1px;height:1px}.photo-pick[hidden],.photo-preview[hidden],.notes p[hidden]{display:none}.photo-preview{margin:0;display:grid;justify-items:start;gap:6px}.photo-preview img{max-width:100%;max-height:260px;border-radius:6px;border:6px solid #fff;box-shadow:0 1px 4px #00000026}button:disabled{opacity:.5;cursor:wait}.row{display:flex;justify-content:space-between;align-items:center}.count{font-size:.85rem;opacity:.6}.msg{margin:0;min-height:1.2em;font-size:.95rem}.dropped{animation:plop .45s ease-out}@keyframes plop{30%{transform:translateY(6px) scale(.985)}to{transform:none}}.notes{list-style:none;margin:0;padding:0;display:grid;gap:10px}.notes li{padding:14px 16px;background:var(--c);border-radius:6px}.notes img{display:block;max-width:100%;max-height:220px;margin-bottom:10px;border:5px solid #fff;border-radius:4px}.notes p{margin:0 0 8px;white-space:pre-line;line-height:1.6}.notes:empty:after{content:"ยังไม่มี";opacity:.5}.notes.opened li{opacity:.8}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.actions [hidden]{display:none}.actions small{margin-right:auto;opacity:.7}#logout{margin-top:32px}@media (prefers-reduced-motion: reduce){.dropped{animation:none}}