:root{--bg: #F6F2EC;--surface: #FFFFFF;--surface-2: #F6F2EC;--ink: #1F1B18;--muted: #5E554D;--line: #E8E0D6;--dash: #C9BFB4;--accent: #FF6B2C;--accent-ink: #1F1B18;--accent-text: #8A3410;--dark: #1F1B18;--on-dark: #FFFFFF;--on-dark-muted: #D8D0C8;--ok: #1E6B43;--ok-bg: #DAF4E6;--err: #B42318;--err-bg: #FCE3DE;--warn-bg: #FFF3CC;--m1: #E5533D;--m2: #FF8A3D;--m3: #8BA0EE;--m4: #FFC425;--m5: #3FC27F;--t1: #FCE3DE;--t2: #FFE9D9;--t3: #E6EBFC;--t4: #FFF3CC;--t5: #DAF4E6;--radius: 28px;--font: "Anuphan", "Plus Jakarta Sans", system-ui, sans-serif;--num: "Plus Jakarta Sans", "Anuphan", sans-serif;color-scheme:light}:root[data-theme=dark]{--bg: #141210;--surface: #221E1B;--surface-2: #2E2925;--ink: #F4EFE9;--muted: #B5ABA1;--line: #3A3430;--dash: #4A423C;--accent: #FF7A3D;--accent-text: #FF9A66;--dark: #2E2925;--on-dark-muted: #D8D0C8;--ok: #7BD8A4;--ok-bg: #173826;--err: #FF8A7A;--err-bg: #3A1D18;--warn-bg: #3A3016;--t1: #3A1D18;--t2: #3A2418;--t3: #20253A;--t4: #3A3016;--t5: #173826;color-scheme:dark}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #141210;--surface: #221E1B;--surface-2: #2E2925;--ink: #F4EFE9;--muted: #B5ABA1;--line: #3A3430;--dash: #4A423C;--accent: #FF7A3D;--accent-text: #FF9A66;--dark: #2E2925;--on-dark-muted: #D8D0C8;--ok: #7BD8A4;--ok-bg: #173826;--err: #FF8A7A;--err-bg: #3A1D18;--warn-bg: #3A3016;--t1: #3A1D18;--t2: #3A2418;--t3: #20253A;--t4: #3A3016;--t5: #173826;color-scheme:dark}}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}body{min-height:100dvh}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.num{font-family:var(--num)}.muted{color:var(--muted)}body.privacy-blur #root{filter:blur(24px)}.press{transition:transform .12s ease}.press:active{transform:scale(.95)}.app{min-height:100dvh}.page{max-width:480px;margin:0 auto;padding:max(env(safe-area-inset-top),20px) 20px 140px;display:flex;flex-direction:column;gap:18px}.page.wide{max-width:1180px}.topbar{display:flex;align-items:center;gap:12px;min-height:48px}.topbar h1{margin:0;font-size:20px;font-weight:700;flex:1}.topbar .sub{display:block;font-size:13px;color:var(--muted);font-weight:500}.icon-btn{width:48px;height:48px;flex:0 0 auto;border-radius:50%;border:none;background:var(--surface);display:inline-flex;align-items:center;justify-content:center}.icon-btn svg{width:20px;height:20px}.card{background:var(--surface);border-radius:var(--radius);padding:18px}.section-title{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.section-title h2{margin:0;font-size:17px;font-weight:600}.section-title a,.section-title button{font-size:13px;color:var(--muted);background:none;border:none;padding:8px 0}.link-accent{color:var(--accent-text)!important;font-weight:600}.btn{min-height:52px;padding:0 22px;border-radius:999px;border:none;font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:10px}.btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px #1f1b1829}.btn.dark{background:var(--dark);color:var(--on-dark)}.btn.soft{background:var(--surface-2);color:var(--ink);font-weight:600}.btn.ghost{background:none;color:var(--muted);font-weight:600}.btn.danger{background:var(--err);color:#fff}.btn.block{width:100%}.btn.lg{min-height:60px;font-size:17px}.btn[disabled]{opacity:.5;cursor:not-allowed}.chip{white-space:nowrap;flex-shrink:0;min-height:40px;padding:0 14px;border-radius:999px;border:none;background:var(--surface-2);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px}.chip[aria-pressed=true],.chip.on{background:var(--ink);color:var(--bg)}.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600}.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.warn{background:#ffede3;color:#8a3410}:root[data-theme=dark] .pill.warn{background:#3a2418;color:#ff9a66}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.field{width:100%;min-height:48px;border:none;background:var(--surface-2);border-radius:14px;padding:0 14px;font-size:16px}textarea.field{padding:12px 14px;resize:vertical;min-height:92px;line-height:1.5}input[type=range]{width:100%;accent-color:var(--ink);height:28px;margin:0}.switch{width:56px;height:32px;flex:0 0 auto;border-radius:999px;border:none;background:var(--dash);position:relative;transition:background .2s}.switch[aria-checked=true]{background:var(--m5)}.switch:after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:left .2s}.switch[aria-checked=true]:after{left:27px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:none}.row .label{font-size:15px;line-height:1.45}.row .label small{display:block;font-size:13px;color:var(--muted)}.bottom-nav{position:fixed;left:50%;transform:translate(-50%);bottom:max(env(safe-area-inset-bottom),16px);width:min(440px,calc(100% - 28px));background:var(--dark);border-radius:999px;padding:8px;display:flex;justify-content:space-between;align-items:center;z-index:20;box-shadow:0 10px 30px #0000002e}.bottom-nav a{width:64px;height:60px;border-radius:999px;color:var(--on-dark-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px}.bottom-nav a[aria-current=page]{width:72px;background:var(--accent);color:var(--accent-ink);font-weight:700}.bottom-nav a.plus{width:54px;height:54px;background:#fff;color:#1f1b18}.bottom-nav svg{width:22px;height:22px}.sidebar{display:none}@media (min-width: 1024px){.toast-wrap{bottom:24px}.bottom-nav{display:none}.shell{display:grid;grid-template-columns:264px minmax(0,1fr);gap:24px;padding:24px;max-width:1440px;margin:0 auto}.sidebar{display:flex;position:sticky;top:24px;align-self:start;flex-direction:column;gap:14px;background:var(--dark);color:var(--on-dark);border-radius:32px;padding:22px 16px;min-height:calc(100dvh - 48px)}.sidebar .brand{display:flex;align-items:center;gap:10px;padding:0 6px;font-family:var(--num);font-weight:800;font-size:20px}.sidebar nav{display:flex;flex-direction:column;gap:2px}.sidebar nav a{min-height:44px;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:14px;color:var(--on-dark-muted);font-size:15px}.sidebar nav a[aria-current=page]{background:#3a3430;color:#fff;font-weight:600}.sidebar nav svg{width:20px;height:20px}.sidebar .foot{margin-top:auto;font-size:13px;color:var(--on-dark-muted);display:flex;flex-direction:column;gap:8px;padding:0 8px}.page{padding-top:0;padding-bottom:40px;max-width:none}.page.narrow{max-width:560px}}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#1f1b186b;z-index:40;border:none;animation:fade .2s ease}.sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%);width:min(520px,100%);background:var(--surface);border-radius:32px 32px 0 0;padding:14px 22px max(env(safe-area-inset-bottom),26px);z-index:41;display:flex;flex-direction:column;gap:12px;animation:sheetUp .35s cubic-bezier(.22,1,.36,1)}.sheet .grab{align-self:center;width:44px;height:5px;border-radius:99px;background:var(--line)}@media (min-width: 1024px){.sheet{bottom:auto;top:50%;transform:translate(-50%,-50%);border-radius:32px;animation:pop .25s ease}.sheet .grab{display:none}}.toast-wrap{position:fixed;left:50%;transform:translate(-50%);bottom:calc(max(env(safe-area-inset-bottom),16px) + 92px);z-index:60;display:flex;flex-direction:column;gap:8px;width:min(440px,calc(100% - 28px))}.toast{background:var(--dark);color:var(--on-dark);border-radius:18px;padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;animation:rise .3s cubic-bezier(.22,1,.36,1);box-shadow:0 10px 24px #0003}.toast.err{background:var(--err);color:#fff}.toast button{margin-left:auto;background:#ffffff2e;border:none;color:inherit;border-radius:999px;min-height:36px;padding:0 12px;font-weight:700}.spinner{width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;display:inline-block;flex:0 0 auto}.write-grid{display:flex;flex-direction:column;gap:14px}.write-col{display:flex;flex-direction:column;gap:14px;min-width:0}.save-bar{position:sticky;bottom:0;margin:0 -20px -140px;padding:14px 20px max(env(safe-area-inset-bottom),20px);background:var(--bg);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;z-index:5}@media (min-width: 1024px){.write-grid{display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,1.6fr);align-items:start}.save-bar{margin:0;border-radius:24px;border:none;background:var(--surface);flex-direction:row;align-items:center}.save-bar .btn{flex:0 0 auto;width:auto;order:2}.save-bar span{flex:1;text-align:left!important}}.wheel{position:absolute;left:50%;margin-left:-300px;bottom:-352px;width:600px;height:600px}.hub{position:absolute;left:50%;margin-left:-195px;bottom:0;pointer-events:none}@media (max-height: 760px){.wheel{bottom:-420px}.hub{bottom:-68px}}@media (max-height: 680px){.wheel{bottom:-470px}.hub{bottom:-118px}}.skeleton{background:var(--surface-2);border-radius:12px;animation:shimmer 1.4s ease-in-out infinite}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes sheetUp{0%{transform:translate(-50%,100%)}to{transform:translate(-50%)}}@keyframes pop{0%{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes dropIn{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%,to{opacity:.55}50%{opacity:1}}@keyframes popA{0%{transform:scale(.72) rotate(-8deg)}60%{transform:scale(1.08) rotate(3deg)}to{transform:none}}@keyframes popB{0%{transform:scale(.72) rotate(8deg)}60%{transform:scale(1.08) rotate(-3deg)}to{transform:none}}@keyframes bounceIn{0%{transform:scale(.3) translateY(80px)}55%{transform:scale(1.12) translateY(-10px)}75%{transform:scale(.96)}to{transform:none}}@keyframes ring{0%{transform:scale(.4);opacity:.9}to{transform:scale(2.4);opacity:0}}@keyframes slideUp{0%{transform:translateY(120%)}to{transform:none}}@keyframes nudge{0%,to{transform:translate(0)}50%{transform:translate(8px)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@keyframes wobble{0%,to{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes grow{0%{transform:scaleY(.2)}to{transform:none}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}