:root, [data-theme="light"] {
  --bg:#F2F1ED; --surf:#FFFFFF; --surf2:#F7F6F3; --ink:#15171B; --ink2:#5B606B; --ink3:#666C78;
  --line:#E3E1DB; --acc:#3A4FD4; --accFg:#FFFFFF; --accSoft:#E7E9FB;
  --g:#2E8F58; --gSoft:#A8DCBB; --o:#CE7C15; --oSoft:#F6DFB8; --r:#C4443C; --rSoft:#F2C9C6;
  --none:#E8E7E2; --shadow:0 8px 24px rgba(20,22,28,.07);
}
[data-theme="dark"] {
  --bg:#0E1014; --surf:#191C22; --surf2:#14171C; --ink:#F1F2F4; --ink2:#A3A9B5; --ink3:#8E95A3;
  --line:#282C34; --acc:#7A8CFF; --accFg:#0E1014; --accSoft:#20263C;
  --g:#4DB77A; --gSoft:#2A4C39; --o:#D99433; --oSoft:#4A3A1E; --r:#DB5F57; --rSoft:#4A2725;
  --none:#22262D; --shadow:0 8px 24px rgba(0,0,0,.35);
}
* { -webkit-tap-highlight-color: transparent; }
html, body { margin:0; height:100%; background:#D9D7D1; overscroll-behavior:none; }
body { font-family:"Instrument Sans",system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; }
input, textarea, button, select { font-family:inherit; }
input, textarea { font-size:16px !important; }
input:focus, textarea:focus { outline:2px solid var(--acc); outline-offset:1px; }
button { -webkit-user-select:none; user-select:none; touch-action:manipulation; }
::-webkit-scrollbar { width:0; height:0; }
@keyframes rise { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }

#app {
  position:relative; display:flex; flex-direction:column; height:100dvh; max-width:520px; margin:0 auto;
  background:var(--bg); color:var(--ink); overflow:hidden; font-size:15px; line-height:1.35;
}
.main { flex:1; min-height:0; display:flex; flex-direction:column; }
.screen { display:flex; flex-direction:column; height:100%; min-height:0; }
.head { padding:calc(env(safe-area-inset-top) + 14px) 16px 12px; background:var(--surf); border-bottom:1px solid var(--line); }
.scroll { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 16px 24px; display:flex; flex-direction:column; gap:10px; }
.col { display:flex; flex-direction:column; gap:10px; }
.card { background:var(--surf); border:1px solid var(--line); border-radius:18px; padding:14px 16px; }
.cardcol { display:flex; flex-direction:column; gap:12px; }
.row { display:flex; align-items:center; gap:14px; }
.lbl { font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink3); font-weight:600; }
.sub { font-size:13px; color:var(--ink3); }
.b { font-weight:600; }
.h1 { font-size:26px; font-weight:600; letter-spacing:-.02em; }
.chk { width:32px; height:32px; flex:0 0 32px; border-radius:50%; display:grid; place-items:center; font-size:15px; font-weight:700; border:2px solid; }
.menubtn { width:44px; height:44px; flex:0 0 44px; border-radius:14px; border:1px solid var(--line); background:var(--surf2); display:grid; place-items:center; cursor:pointer; }
.step { border-radius:12px; border:1px solid var(--line); background:var(--surf2); color:var(--ink); cursor:pointer; }
.field { min-height:46px; border-radius:13px; border:1px solid var(--line); background:var(--surf2); color:var(--ink); padding:0 12px; box-sizing:border-box; }
.area { border-radius:14px; border:1px solid var(--line); background:var(--surf2); color:var(--ink); padding:12px; resize:none; box-sizing:border-box; width:100%; }
.plus { width:52px; min-height:46px; border-radius:13px; border:0; background:var(--acc); color:var(--accFg); font-size:22px; font-weight:600; cursor:pointer; }
.x { width:44px; height:44px; flex:0 0 44px; border:0; background:none; color:var(--ink3); font-size:18px; cursor:pointer; border-radius:12px; }
.pill { border-radius:99px; min-height:44px; font-size:14px; font-weight:600; cursor:pointer; }
.switch { width:52px; height:31px; border-radius:99px; border:0; cursor:pointer; position:relative; flex:0 0 52px; }
.switch > div { position:absolute; top:3px; width:25px; height:25px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .18s ease; }
.water { flex:0 0 auto; background:var(--surf); border-top:1px solid var(--line); padding:8px 16px calc(env(safe-area-inset-bottom) + 12px); display:flex; flex-direction:column; gap:6px; }
.overlay { position:absolute; inset:0; background:rgba(10,12,16,.45); display:flex; align-items:flex-end; z-index:25; }
.sheet { width:100%; background:var(--surf); border-radius:24px 24px 0 0; padding:16px 16px calc(env(safe-area-inset-bottom) + 22px); display:flex; flex-direction:column; gap:6px; animation:rise .22s ease both; box-sizing:border-box; }
.grab { width:38px; height:4px; border-radius:99px; background:var(--line); align-self:center; margin-bottom:8px; }
.toast { position:absolute; left:16px; right:16px; bottom:calc(env(safe-area-inset-bottom) + 100px); background:var(--ink); color:var(--bg); border-radius:14px; padding:13px 16px; font-size:14px; font-weight:600; text-align:center; z-index:30; animation:rise .2s ease both; }
.sync { position:absolute; top:calc(env(safe-area-inset-top) + 4px); left:50%; transform:translateX(-50%); font-size:11px; color:var(--ink3); z-index:5; pointer-events:none; }