@font-face { font-family: "Inter"; src: url("fonts/Inter.woff2") format("woff2"); font-weight: 100 900; font-display: block; }

:root {
  --safe-top: 28px; --safe-bottom: 16px;
  --bg: #05060b;
  --label: rgba(255,255,255,.96);
  --label2: rgba(235,240,255,.62);
  --label3: rgba(235,240,255,.38);
  --sep: rgba(255,255,255,.09);
  --blue: #0a84ff; --green: #30d158; --orange: #ff9f0a; --red: #ff453a; --teal: #40e0d0; --purple: #bf5af2;
  --glass: rgba(28,32,48,.42);
  --glass-strong: rgba(22,25,38,.72);
  --stroke: rgba(255,255,255,.14);
  --hi: rgba(255,255,255,.22);
  --r-card: 24px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --spring: cubic-bezier(.34,1.3,.5,1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--label); }
body {
  font-family: "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03", "cv05";
  -webkit-font-smoothing: antialiased; overflow-x: hidden; overscroll-behavior: none;
  user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: var(--label); user-select: text; -webkit-user-select: text; }
.hidden { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Ambient background ---------- */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; filter: blur(50px) saturate(140%); }
.aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.a1 { width: 95vw; height: 95vw; left: -30vw; top: -18vw; background: radial-gradient(circle, rgba(47,77,255,.95) 0%, rgba(47,77,255,0) 68%); animation: drift1 26s ease-in-out infinite alternate; }
.a2 { width: 85vw; height: 85vw; right: -40vw; top: 38vh; background: radial-gradient(circle, rgba(155,60,255,.8) 0%, rgba(155,60,255,0) 68%); animation: drift2 32s ease-in-out infinite alternate; }
.a3 { width: 110vw; height: 110vw; left: -20vw; bottom: -45vw; background: radial-gradient(circle, rgba(0,194,178,.7) 0%, rgba(0,194,178,0) 66%); animation: drift3 38s ease-in-out infinite alternate; }
.a4 { width: 70vw; height: 70vw; left: -35vw; top: 50vh; background: radial-gradient(circle, rgba(255,106,61,.35) 0%, rgba(255,106,61,0) 66%); animation: drift2 44s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(14vw, 10vh) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-12vw, 14vh) scale(.9); } }
@keyframes drift3 { to { transform: translate(-8vw, -12vh) scale(1.08); } }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---------- Glass ---------- */
.glass {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)), var(--glass);
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  border: .5px solid var(--stroke);
  box-shadow: inset 0 1px 0 var(--hi), inset 0 -1px 0 rgba(255,255,255,.03), 0 18px 40px -18px rgba(0,0,0,.55);
}

#app { position: relative; z-index: 2; padding: calc(var(--safe-top) + 14px) 18px 0; max-width: 560px; margin: 0 auto; }

/* ---------- Header ---------- */
.eyebrow-row { display: flex; align-items: center; justify-content: space-between; min-height: 30px; }
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--label2); }
.status-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; border-radius: 99px;
  font-size: 12.5px; font-weight: 600; color: var(--label);
  background: rgba(255,255,255,.08); border: .5px solid var(--stroke);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: transform .2s var(--ease); }
.status-pill:active { transform: scale(.95); }
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255,159,10,.18); }
.status-pill.ok .dot { background: var(--green); box-shadow: 0 0 0 3px rgba(48,209,88,.18); animation: pulse 2.6s ease-in-out infinite; }
.status-pill.bad .dot { background: var(--red); box-shadow: 0 0 0 3px rgba(255,69,58,.2); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(48,209,88,0); } }
.large-title { margin: 10px 0 2px; font-size: 44px; line-height: 1.02; font-weight: 750; letter-spacing: -.035em;
  background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.72)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.subtitle { margin: 6px 0 22px; font-size: 16px; color: var(--label2); letter-spacing: -.01em; }
.subtitle b { color: var(--label); font-weight: 600; }

/* ---------- Setup card ---------- */
.setup { border-radius: var(--r-card); padding: 18px 18px 16px; margin-bottom: 18px; overflow: hidden; }
.setup::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, rgba(10,132,255,.28), transparent 60%); }
.setup h3 { position: relative; margin: 0 0 4px; font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.setup p { position: relative; margin: 0 0 14px; font-size: 14px; line-height: 1.4; color: var(--label2); }
.setup .steps { position: relative; display: flex; gap: 6px; margin-bottom: 14px; }
.setup .steps span { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.14); }
.setup .steps span.on { background: linear-gradient(90deg, var(--blue), var(--teal)); }
.btn-primary { position: relative; width: 100%; height: 48px; border-radius: 15px; font-size: 16px; font-weight: 650; letter-spacing: -.01em;
  color: #fff; background: linear-gradient(180deg, #3b9cff, #0a6cff); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -10px rgba(10,132,255,.8);
  transition: transform .18s var(--ease), filter .18s; }
.btn-primary:active { transform: scale(.97); filter: brightness(.92); }

/* ---------- Segmented ---------- */
.segmented { display: flex; position: relative; padding: 3px; border-radius: 14px; margin-bottom: 16px; }
.seg { flex: 1; position: relative; z-index: 1; height: 34px; border-radius: 11px; font-size: 14px; font-weight: 600; color: var(--label2); transition: color .25s; }
.seg.on { color: var(--label); }
.seg .count { margin-left: 5px; font-weight: 500; color: var(--label3); font-variant-numeric: tabular-nums; }
.seg-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.11)); box-shadow: inset 0 .5px 0 rgba(255,255,255,.4), 0 3px 10px rgba(0,0,0,.25);
  transition: none; }
.segmented.ready .seg-thumb { transition: transform .38s var(--spring), width .38s var(--spring); }

/* ---------- Cards ---------- */
.list { display: flex; flex-direction: column; gap: 12px; }
.card { display: flex; gap: 14px; align-items: flex-start; padding: 16px 16px 15px 14px; border-radius: var(--r-card);
  transition: transform .35s var(--spring), opacity .35s var(--ease), max-height .45s var(--ease), margin .45s var(--ease), padding .45s var(--ease);
  animation: cardIn .5s var(--spring) both; max-height: 400px; overflow: hidden; }
.card:active { transform: scale(.985); }
.card.leaving { opacity: 0; transform: translateX(30px) scale(.96); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -12px; }
.card.here { border-color: rgba(48,209,88,.5); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px rgba(48,209,88,.25), 0 20px 50px -20px rgba(48,209,88,.45); }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.check { flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; border: 1.8px solid rgba(255,255,255,.34);
  display: grid; place-items: center; transition: all .3s var(--spring); position: relative; }
.check::after { content: ""; position: absolute; inset: -10px; }
.check svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3; opacity: 0; transform: scale(.4); transition: all .3s var(--spring); }
.check.on { background: var(--green); border-color: var(--green); box-shadow: 0 0 16px rgba(48,209,88,.5); }
.check.on svg { opacity: 1; transform: none; }
.card-main { flex: 1; min-width: 0; }
.card-note { font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; word-wrap: break-word; }
.card.done .card-note { color: var(--label3); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.card-place { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14.5px; font-weight: 550; color: #7cc0ff; letter-spacing: -.01em; }
.card-place svg { width: 14px; height: 14px; flex: none; stroke-width: 2.2; }
.card-addr { margin-top: 2px; font-size: 13px; color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 12px; font-weight: 600;
  color: var(--label2); background: rgba(255,255,255,.07); border: .5px solid rgba(255,255,255,.08); font-variant-numeric: tabular-nums; }
.chip svg { width: 12px; height: 12px; stroke-width: 2.3; }
.chip.orange { color: #ffc56b; background: rgba(255,159,10,.12); border-color: rgba(255,159,10,.2); }
.chip.green { color: #7ef0a0; background: rgba(48,209,88,.13); border-color: rgba(48,209,88,.22); }
.card-go { flex: none; align-self: center; width: 22px; color: var(--label3); }
.card-go svg { width: 16px; height: 16px; }

.empty { text-align: center; padding: 46px 30px 30px; border-radius: var(--r-card); }
.empty-orb { width: 86px; height: 86px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), rgba(255,255,255,.05) 60%), linear-gradient(160deg, rgba(10,132,255,.5), rgba(64,224,208,.25));
  border: .5px solid rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 20px 40px -12px rgba(10,132,255,.6); }
.empty-orb svg { width: 36px; height: 36px; stroke: #fff; }
.empty h3 { margin: 0 0 6px; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.empty p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--label2); }

.bottom-space { height: calc(120px + var(--safe-bottom)); }

/* ---------- Dock ---------- */
.dock { position: fixed; z-index: 5; left: 14px; right: 14px; bottom: calc(var(--safe-bottom) + 12px); max-width: 532px; margin: 0 auto;
  height: 68px; border-radius: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)), rgba(20,22,34,.55); }
.dock-info { display: flex; flex-direction: column; min-width: 0; }
.dock-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--label3); }
.dock-value { font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; margin-top: 1px; }
.dock-value em { font-style: normal; color: var(--label2); font-weight: 500; }
.fab { width: 50px; height: 50px; border-radius: 18px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, #4aa8ff 0%, #0a6cff 60%, #3d4dff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 6px rgba(0,0,40,.25), 0 10px 26px -8px rgba(10,110,255,.9);
  transition: transform .25s var(--spring); }
.fab:active { transform: scale(.9) rotate(-8deg); }
.fab svg { width: 24px; height: 24px; stroke-width: 2.6; }

/* ---------- Sheets ---------- */
.scrim { position: fixed; inset: 0; z-index: 9; background: rgba(0,0,0,.42); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.scrim.on { opacity: 1; pointer-events: auto; }
body.sheet-open #app { transform: scale(.94) translateY(8px); border-radius: 28px; filter: saturate(.8); }
#app { transition: transform .45s var(--ease), filter .45s; transform-origin: 50% 0; }
.sheet { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; max-width: 600px; margin: 0 auto;
  height: calc(100% - var(--safe-top) - 18px); border-radius: 30px 30px 0 0; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 40%), rgba(16,18,28,.78);
  -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  border-top: .5px solid rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 -20px 60px rgba(0,0,0,.4);
  transform: translateY(105%); transition: transform .5s var(--ease); will-change: transform; }
.sheet.short { height: auto; max-height: calc(100% - var(--safe-top) - 18px); }
.sheet.on { transform: none; }
.grabber { width: 38px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.28); margin: 8px auto 0; flex: none; }
.sheet-nav { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 52px; padding: 0 18px; }
.nav-title { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.nav-btn { justify-self: start; font-size: 17px; color: #4aa3ff; padding: 8px 0; letter-spacing: -.01em; }
.nav-btn.strong { justify-self: end; font-weight: 650; }
.nav-btn:disabled { color: var(--label3); }
.sheet-body { flex: 1; overflow-y: auto; padding: 4px 16px 0; -webkit-overflow-scrolling: touch; }
.sheet-bottom { height: calc(var(--safe-bottom) + 30px); }
.sheet-lede { margin: 2px 4px 16px; font-size: 14.5px; line-height: 1.45; color: var(--label2); }
.fine { margin: 4px 6px 0; font-size: 12.5px; line-height: 1.45; color: var(--label3); }

.group { border-radius: 18px; margin-bottom: 14px; overflow: hidden; }
.glass-inner { background: rgba(255,255,255,.065); border: .5px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.group.pad { padding: 14px; }
.group-label { margin: 6px 6px 8px; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--label3); }
textarea { display: block; width: 100%; resize: none; border: 0; outline: 0; background: transparent; padding: 16px; font-size: 19px; font-weight: 550; letter-spacing: -.02em; line-height: 1.35; }
textarea::placeholder, input::placeholder { color: var(--label3); font-weight: 450; }
.search-row { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 52px; border-bottom: .5px solid var(--sep); }
.search-row .ico { width: 19px; height: 19px; color: var(--label3); flex: none; }
.search-row input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16.5px; height: 100%; -webkit-appearance: none; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.result { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 14px; border-bottom: .5px solid var(--sep); transition: background .15s; animation: cardIn .35s var(--ease) both; }
.result:active, .row-btn:active { background: rgba(255,255,255,.06); }
.result .r-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #7cc0ff; }
.result .r-ico svg { width: 17px; height: 17px; }
.result .r-text { flex: 1; min-width: 0; }
.result .r-name { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result .r-addr { font-size: 13px; color: var(--label2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result .r-dist { flex: none; font-size: 12.5px; color: var(--label3); font-variant-numeric: tabular-nums; font-weight: 550; }
.no-results { padding: 14px; font-size: 14px; color: var(--label3); border-bottom: .5px solid var(--sep); }
.row-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px; text-align: left; font-size: 16px; letter-spacing: -.01em; }
.row-btn.danger { justify-content: center; color: var(--red); font-weight: 600; }
.row-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.row-ico svg { width: 17px; height: 17px; stroke-width: 2.2; }
.row-ico.blue { background: linear-gradient(160deg, #4aa8ff, #0a6cff); }
.row-ico.orange { background: linear-gradient(160deg, #ffb340, #ff8a00); }
.row-ico.green { background: linear-gradient(160deg, #4be37a, #1fae4a); }
.row-ico.red { background: linear-gradient(160deg, #ff6b61, #e0352b); }
.row-ico.purple { background: linear-gradient(160deg, #d27bff, #9b3cff); }

.chosen { padding: 10px; }
.map { position: relative; height: 170px; border-radius: 14px; overflow: hidden; background: #111522; }
.tiles { position: absolute; inset: 0; }
.tiles img { position: absolute; width: 256px; height: 256px; opacity: 0; transition: opacity .4s; }
.tiles img.ok { opacity: 1; }
.tiles { filter: brightness(.78) contrast(1.15) saturate(1.2); }
.tiles::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(40,70,255,.16), rgba(0,190,180,.08)); mix-blend-mode: screen; }
.attr { position: absolute; right: 8px; bottom: 5px; font-size: 9.5px; color: rgba(255,255,255,.45); letter-spacing: .02em; }
.map::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12), inset 0 -40px 40px -30px rgba(0,0,0,.5); }
.fence { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(10,132,255,.12), rgba(10,132,255,.26)); border: 1.5px solid rgba(90,170,255,.8);
  transition: width .45s var(--spring), height .45s var(--spring); }
.pin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #0a84ff; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.chosen-meta { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 12px 4px 4px; }
.chosen-name { font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
.chosen-addr { font-size: 13px; color: var(--label2); margin-top: 2px; }
.link-btn { flex: none; font-size: 15px; font-weight: 600; color: #4aa3ff; padding: 6px 2px; }

.chips { display: flex; gap: 6px; background: rgba(0,0,0,.2); padding: 3px; border-radius: 12px; }
.chips button { flex: 1; height: 34px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--label2); transition: all .25s var(--ease); font-variant-numeric: tabular-nums; }
.chips button.on { color: #fff; background: rgba(255,255,255,.16); box-shadow: inset 0 .5px 0 rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.25); }
.hint { margin: 10px 2px 0; font-size: 13px; line-height: 1.4; color: var(--label2); }

.toggle-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 14px; }
.toggle-text { flex: 1; display: flex; flex-direction: column; font-size: 16px; letter-spacing: -.01em; }
.toggle-text small { font-size: 13px; color: var(--label2); margin-top: 2px; letter-spacing: 0; }
.switch { -webkit-appearance: none; appearance: none; flex: none; width: 51px; height: 31px; border-radius: 99px; background: rgba(120,120,128,.32); position: relative; transition: background .25s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.1); transition: transform .3s var(--spring); }
.switch:checked { background: var(--green); }
.switch:checked::after { transform: translateX(20px); }
.date-row { padding: 0 14px 14px; }
.date-row input { width: 100%; height: 46px; border-radius: 12px; border: 0; outline: 0; padding: 0 14px; font-size: 16px; font-weight: 550; background: rgba(255,255,255,.08); color-scheme: dark; }

.perm { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; text-align: left; border-bottom: .5px solid var(--sep); }
.perm:last-child { border-bottom: 0; }
.perm .toggle-text span { font-weight: 550; }
.perm .state { flex: none; font-size: 13px; font-weight: 650; padding: 5px 10px; border-radius: 99px; }
.perm .state.ok { color: #7ef0a0; background: rgba(48,209,88,.14); }
.perm .state.todo { color: #fff; background: var(--blue); }
.perm .state.opt { color: #ffc56b; background: rgba(255,159,10,.14); }
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 14px; font-size: 15.5px; }
.info-row b { font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- Toast ---------- */
.toast { position: fixed; z-index: 20; left: 50%; top: calc(var(--safe-top) + 10px); transform: translate(-50%, -140%) scale(.9);
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 40px); padding: 11px 18px 11px 12px; border-radius: 99px;
  background: rgba(30,32,44,.82); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: .5px solid rgba(255,255,255,.16); box-shadow: 0 16px 40px rgba(0,0,0,.45); font-size: 14.5px; font-weight: 550; letter-spacing: -.01em;
  transition: transform .5s var(--spring), opacity .3s; opacity: 0; pointer-events: none; }
.toast.on { transform: translate(-50%, 0) scale(1); opacity: 1; }
.toast-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--green); flex: none; }
.toast-ico.warn { background: var(--orange); }
.toast-ico svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3; }
.sheet.short .sheet-body { flex: 0 1 auto; }

/* ================= v2 motion layer ================= */
:root { --sheet-ease: cubic-bezier(.32,.72,0,1); --p: 0; }
.aurora { transform: translate3d(0, calc(var(--scroll, 0) * -0.12px), 0); }

/* Collapsing header */
.navbar { position: fixed; z-index: 6; top: 0; left: 0; right: 0; height: calc(var(--safe-top) + 46px); padding-top: var(--safe-top);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,12,22,.72), rgba(10,12,22,.5));
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  border-bottom: .5px solid rgba(255,255,255, calc(var(--p) * .12)); opacity: var(--p); }
.nav-small { font-size: 17px; font-weight: 650; letter-spacing: -.02em; transform: translateY(calc((1 - var(--p)) * 8px)); opacity: var(--p); }
.large-title { transform-origin: 0 100%; transform: scale(calc(1 - var(--p) * .12)) translateY(calc(var(--p) * -6px)); opacity: calc(1 - var(--p) * 1.1); will-change: transform, opacity; }
.subtitle, .eyebrow-row { opacity: calc(1 - var(--p) * 1.3); }
.status-pill { position: relative; z-index: 7; }

/* Launch choreography */
.boot .top > *, .boot .segmented, .boot .setup { opacity: 0; transform: translateY(14px); }
.top > *, .segmented, .setup { transition: opacity .7s var(--ease), transform .8s var(--spring); }
.top > :nth-child(2) { transition-delay: .06s; } .top > :nth-child(3) { transition-delay: .12s; }
.setup { transition-delay: .16s; } .segmented { transition-delay: .2s; }
.boot .dock { transform: translateY(140%); }
.dock { transition: transform .8s var(--spring) .25s; }

/* Scroll-reveal + list motion */
.card { animation: none; will-change: transform; transition: transform .5s var(--spring), opacity .4s var(--ease), box-shadow .4s, border-color .4s; }
.card.pre { opacity: 0; transform: translateY(26px) scale(.965); }
.card.in { opacity: 1; transform: none; }
.card.pressed { transform: scale(.975) !important; transition-duration: .12s; }
.list.out-left { animation: outLeft .18s var(--ease) forwards; }
.list.out-right { animation: outRight .18s var(--ease) forwards; }
.list.in-left { animation: inLeft .42s var(--spring); }
.list.in-right { animation: inRight .42s var(--spring); }
@keyframes outLeft { to { opacity: 0; transform: translateX(-28px); } }
@keyframes outRight { to { opacity: 0; transform: translateX(28px); } }
@keyframes inLeft { from { opacity: 0; transform: translateX(34px); } }
@keyframes inRight { from { opacity: 0; transform: translateX(-34px); } }
.card.fresh { animation: fresh 1.6s var(--ease); }
@keyframes fresh { 0% { box-shadow: inset 0 1px 0 var(--hi), 0 0 0 0 rgba(10,132,255,.0); } 20% { box-shadow: inset 0 1px 0 var(--hi), 0 0 0 2px rgba(10,132,255,.7), 0 0 40px rgba(10,132,255,.45); } 100% { box-shadow: inset 0 1px 0 var(--hi), 0 0 0 0 rgba(10,132,255,0); } }

/* Swipe actions */
.swipe { position: relative; border-radius: var(--r-card); transition: height .42s var(--sheet-ease), margin .42s var(--sheet-ease), opacity .3s; }
.swipe.collapse { overflow: hidden; opacity: 0; }
.under { position: absolute; inset: 1px; border-radius: var(--r-card); display: flex; align-items: center; justify-content: space-between; padding: 0 26px; opacity: 0; transition: opacity .15s; }
.swipe.dragging .under, .swipe.acting .under { opacity: 1; }
.under.right { background: linear-gradient(90deg, rgba(48,209,88,.9), rgba(48,209,88,.25)); }
.under.left { background: linear-gradient(270deg, rgba(255,69,58,.92), rgba(255,69,58,.25)); }
.under span { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; color: #fff; transform: scale(.8); opacity: .6; transition: transform .3s var(--spring), opacity .2s; }
.under svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2.6; }
.under .ua-left { margin-left: auto; }
.swipe.armed .under span { transform: scale(1.08); opacity: 1; }
.swipe.dragging .card { transition: none; }

/* Check-off micro-interaction */
.check svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s var(--ease) .08s; }
.check svg { opacity: 1; transform: none; }
.check.on svg path { stroke-dashoffset: 0; }
.check::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--green); opacity: 0; transform: scale(.6); }
.check.burst::before { animation: burst .6s var(--ease); }
@keyframes burst { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(2.3); } }
.check.on { animation: pop .45s var(--spring); }
@keyframes pop { 40% { transform: scale(1.22); } }
.card.completing .card-note { color: var(--label3); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); transition: color .3s; }
.card.completing::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(48,209,88,.22) 50%, transparent 80%); animation: sweep .7s var(--ease) forwards; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Counters */
.seg .count { display: inline-block; }
.seg .count.bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.5) translateY(-2px); color: #fff; } }

/* FAB */
.fab { transition: transform .45s var(--spring), box-shadow .3s; }
body.sheet-open .fab { transform: rotate(45deg) scale(.86); }
.fab.nudge { animation: nudge 1.2s var(--spring) .9s; }
@keyframes nudge { 30% { transform: scale(1.12); } 55% { transform: scale(.96); } }

/* Sheet physics (JS drives drag; CSS drives settle) */
.sheet { transition: transform .55s var(--sheet-ease); }
.scrim { transition: opacity .45s var(--sheet-ease); }
.sheet .group, .sheet .group-label { transition: opacity .5s var(--ease), transform .6s var(--spring); }
.sheet:not(.on) .group, .sheet:not(.on) .group-label { opacity: 0; transform: translateY(18px); }
.sheet.on .sheet-body > :nth-child(1) { transition-delay: .08s; } .sheet.on .sheet-body > :nth-child(2) { transition-delay: .11s; }
.sheet.on .sheet-body > :nth-child(3) { transition-delay: .14s; } .sheet.on .sheet-body > :nth-child(4) { transition-delay: .17s; }
.sheet.on .sheet-body > :nth-child(5) { transition-delay: .2s; }  .sheet.on .sheet-body > :nth-child(6) { transition-delay: .23s; }
.sheet.on .sheet-body > :nth-child(7) { transition-delay: .26s; }
.chosen:not(.hidden) { animation: chosenIn .5s var(--spring); }
@keyframes chosenIn { from { opacity: 0; transform: scale(.96); } }
.pin { animation: pinDrop .6s var(--spring); }
.chosen:not(.hidden) .pin::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(10,132,255,.8); animation: ping 1.8s var(--ease) .4s infinite; }
@keyframes pinDrop { from { transform: translateY(-30px) scale(.6); opacity: 0; } }
@keyframes ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.chips button:active, .row-btn:active, .perm:active, .nav-btn:active, .link-btn:active { transform: scale(.96); }
.chips button, .row-btn, .perm, .nav-btn, .link-btn { transition: transform .3s var(--spring), background .2s, color .2s; }
.date-row:not(.hidden) { animation: chosenIn .4s var(--spring); }

/* Toast with action */
.toast { pointer-events: auto; }
.toast:not(.on) { pointer-events: none; }
.toast-action { margin-left: 6px; padding: 5px 12px; border-radius: 99px; font-size: 14px; font-weight: 700; color: #7cc0ff; background: rgba(10,132,255,.16); }
.toast-action:active { transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .aurora i { animation: none; }
}
.toast { width: max-content; max-width: calc(100vw - 40px); white-space: nowrap; }
#toastText { overflow: hidden; text-overflow: ellipsis; }
.under { transition: opacity .15s, clip-path .3s var(--sheet-ease); } .swipe.dragging .under { transition: opacity .15s; }
/* About / legal */
.credit { display: block; margin: 26px auto 0; font-size: 12px; font-weight: 500; color: var(--label3); letter-spacing: .01em; padding: 8px 12px; }
.credit:active { color: var(--label2); }
.about-hero { text-align: center; padding: 10px 0 22px; }
.about-icon { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 16px 40px -10px rgba(47,77,255,.7), inset 0 0 0 .5px rgba(255,255,255,.3); animation: pinDrop .7s var(--spring); }
.about-name { margin-top: 14px; font-size: 28px; font-weight: 750; letter-spacing: -.03em; }
.about-ver { margin-top: 2px; font-size: 13px; color: var(--label3); font-weight: 550; }
.about-credit { margin-top: 14px; font-size: 14.5px; line-height: 1.45; color: var(--label2); }
.about-credit b { color: var(--label); font-weight: 650; }
.legal { padding: 4px 16px 16px; user-select: text; -webkit-user-select: text; }
.legal h4 { margin: 16px 0 5px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--label); }
.legal p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--label2); }

/* recurring + time window */
.time-row { display: flex; align-items: center; gap: 10px; padding: 0 14px 14px; animation: chosenIn .4s var(--spring); }
.time-row span { color: var(--label3); font-size: 14px; font-weight: 600; }
.time-row input { flex: 1; min-width: 0; height: 46px; border-radius: 12px; border: 0; outline: 0; padding: 0 12px; font-size: 16px; font-weight: 550; background: rgba(255,255,255,.08); color-scheme: dark; }
.check.rep { border-color: rgba(90,170,255,.7); color: #7cc0ff; }
.check.rep svg { width: 15px; height: 15px; stroke: #7cc0ff; stroke-width: 2.4; }
.check.rep svg path { stroke-dasharray: none; stroke-dashoffset: 0; }
.check.rep.paused { border-color: rgba(255,159,10,.7); }
.check.rep.paused svg { stroke: #ffc56b; }
.chip.blue { color: #8fcbff; background: rgba(10,132,255,.14); border-color: rgba(10,132,255,.25); }
.card.paused .card-note, .card.paused .card-place, .card.paused .card-addr { opacity: .5; }
.under.pause { background: linear-gradient(90deg, rgba(255,159,10,.92), rgba(255,159,10,.25)); }

/* How it works */
.steps { padding: 4px 0; }
.step { display: flex; gap: 13px; align-items: flex-start; padding: 12px 16px; }
.step + .step { box-shadow: inset 0 .5px 0 rgba(255,255,255,.08); }
.step .row-ico { margin-top: 1px; }
.step-text { flex: 1; min-width: 0; }
.step-text b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.step-text p { margin: 3px 0 0; font-size: 14px; line-height: 1.42; color: var(--label2); }
.fine.center { text-align: center; }
.how-link { display: block; margin: 22px auto 0; font-size: 15px; font-weight: 600; color: #4aa3ff; padding: 8px 14px; border-radius: 999px; background: rgba(74,163,255,.1); transition: transform .3s var(--spring), background .2s; }
.how-link:active { transform: scale(.95); background: rgba(74,163,255,.18); }
.how-link + .credit { margin-top: 10px; }
.group .row-btn + .row-btn { box-shadow: inset 0 .5px 0 rgba(255,255,255,.08); }
/* ---------- Zman-aware time window ---------- */
.win { padding: 2px 14px 14px; animation: chosenIn .4s var(--spring); }
.win-row + .win-row { margin-top: 14px; }
.win-label { display: block; margin: 0 2px 7px; font-size: 12px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--label3); }
.zchips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 0 2px; scroll-snap-type: x proximity; scroll-padding: 0 8px; }
.zchips::-webkit-scrollbar { display: none; }
.zchips button { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
  min-width: 74px; height: 50px; padding: 0 13px; border-radius: 14px; background: rgba(255,255,255,.07); border: .5px solid rgba(255,255,255,.08);
  font-size: 14px; font-weight: 620; color: var(--label2); text-align: left; transition: transform .3s var(--spring), background .2s, color .2s, border-color .2s; }
.zchips button small { font-size: 12px; font-weight: 550; color: var(--label3); font-variant-numeric: tabular-nums; }
.zchips button.on { color: #fff; background: linear-gradient(160deg, rgba(74,168,255,.34), rgba(10,108,255,.26)); border-color: rgba(120,190,255,.5); box-shadow: 0 4px 14px rgba(10,108,255,.28); }
.zchips button.on small { color: rgba(255,255,255,.8); }
.zchips button:active { transform: scale(.95); }
.zchips .zsep { flex: none; width: .5px; margin: 8px 2px; background: rgba(255,255,255,.14); }
.win-clock { margin-top: 8px; }
.win-clock input { width: 100%; height: 46px; border-radius: 12px; border: 0; outline: 0; padding: 0 12px; font-size: 16px; font-weight: 550; background: rgba(255,255,255,.08); color-scheme: dark; }
.win-hint { margin-top: 12px; }
.chip.zman { color: #d9c7ff; background: rgba(191,90,242,.14); }

/* ---------- v2.4: At a place / At a time, place types, saved spots ---------- */
.kind-chips { margin: 0 0 14px; }
.kind-chips button { height: 38px; font-size: 15px; }
#editor.k-time .po, #editor.k-cat .np { display: none !important; }
#editor:not(.k-time) .to { display: none !important; }
.type-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px 12px; padding: 0 18px 2px; scroll-padding: 0 18px; }
.type-row::-webkit-scrollbar { display: none; }
.type-row button { flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: 20px;
  background: rgba(255,255,255,.07); border: .5px solid rgba(255,255,255,.09); font-size: 14.5px; font-weight: 620; color: var(--label2);
  transition: transform .3s var(--spring), background .2s, color .2s, border-color .2s; }
.type-row button:active { transform: scale(.95); }
.type-row .t-ico { width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.type-row .t-ico svg { width: 15px; height: 15px; stroke-width: 2.1; }
.type-row button.on { color: #fff; background: linear-gradient(160deg, rgba(74,168,255,.3), rgba(10,108,255,.22)); border-color: rgba(120,190,255,.5); box-shadow: 0 4px 14px rgba(10,108,255,.25); }
.type-row button.on .t-ico { background: linear-gradient(160deg, #4aa8ff, #0a6cff); }
.type-row button[data-t="shul"].on .t-ico { background: linear-gradient(160deg, #d27bff, #7d3cff); }
.type-row button[data-t="kosher"].on .t-ico { background: linear-gradient(160deg, #4be37a, #1fae4a); }
.cat-box:not(.hidden) { animation: chosenIn .4s var(--spring); }
.cat-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 10px; }
.cat-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #4aa8ff, #0a6cff); box-shadow: 0 6px 16px rgba(10,108,255,.3); }
.cat-ico.shul { background: linear-gradient(160deg, #d27bff, #7d3cff); box-shadow: 0 6px 16px rgba(125,60,255,.32); }
.cat-ico.kosher { background: linear-gradient(160deg, #4be37a, #1fae4a); box-shadow: 0 6px 16px rgba(31,174,74,.3); }
.cat-ico svg { width: 22px; height: 22px; stroke-width: 2; }
.cat-text { flex: 1; min-width: 0; }
.cat-text .chosen-addr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-scope { padding: 0 14px 12px; border-bottom: .5px solid var(--sep); }
.spot-head { padding: 12px 14px 2px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--label3); }
.spot { display: flex; align-items: center; gap: 12px; padding: 9px 8px 9px 14px; border-bottom: .5px solid var(--sep); }
.spot-dot { flex: none; width: 8px; height: 8px; border-radius: 4px; margin: 0 4px; background: rgba(255,255,255,.35); }
.spot-dot.pub { background: var(--purple); box-shadow: 0 0 0 3px rgba(191,90,242,.2); }
.spot-name { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.spot-x { flex: none; width: 34px; height: 34px; border-radius: 17px; font-size: 20px; line-height: 1; color: var(--label3); }
.spot-x:active { background: rgba(255,255,255,.08); }
.when-row { display: flex; gap: 8px; margin-bottom: 12px; }
.when-row input { flex: 1; min-width: 0; height: 46px; border-radius: 12px; border: 0; outline: 0; padding: 0 12px; font-size: 16px; font-weight: 600; background: rgba(255,255,255,.08); color-scheme: dark; }
.when-row input[type="time"] { flex: .8; }
.plain-input { display: block; width: 100%; height: 56px; border: 0; outline: 0; background: transparent; padding: 0 16px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.sp-chosen { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.sp-chosen:not(.hidden) { animation: chosenIn .4s var(--spring); }
.fb-send { margin: -4px 0 8px; }
.fb-send:disabled { opacity: .45; }
#fbText { font-size: 16.5px; font-weight: 500; min-height: 96px; }
.card-place.cat { color: #cfb3ff; }