/* ==========================================================================
   Dependable Drops — Night Teal design system (v7)
   Dark by default. Brand tokens live here; rename the brand by editing these.
   Fonts: Space Grotesk (display / numbers) + Manrope (UI). Both SIL OFL, self-hosted in /fonts.
   ========================================================================== */
@font-face { font-family: 'Space Grotesk'; src: url(../fonts/space-grotesk-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url(../fonts/space-grotesk-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(../fonts/manrope-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(../fonts/manrope-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(../fonts/manrope-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(../fonts/manrope-latin-800-normal.woff2) format('woff2'); font-weight: 800; font-display: swap; }

:root, [data-theme="dark"] {
  /* Dependable Drops · Night Teal (brand locked Oct 27, 2026) */
  --accent: #19D3C5;          /* Teal: fills, primary actions */
  --accent-ink: #03110F;      /* text/icons on Teal */
  --accent-text: #3FE0D3;     /* Teal as text on dark surfaces */
  --accent-soft: rgba(25,211,197,.15);
  --mint: #7CF5C8;            /* folded-corner flap */
  /* surfaces */
  --bg: #08090A; --surface: #111516; --surface-2: #182022; --surface-3: #222D2F;
  --line: rgba(255,255,255,.07); --line-strong: rgba(255,255,255,.14);
  --text: #F2F6F5; --text-2: #A9B8B6; --text-3: #879694;
  /* semantic */
  --sensitive: #FF8FC2; --sensitive-soft: rgba(255,143,194,.16); --sens-2: #E0659F; --sens-bg: #2A1622; --sens-line: rgba(255,143,194,.28);
  --success: #7CF5C8; --success-soft: rgba(124,245,200,.14); --success-ink: #04130D;
  --warning: #FFB020; --warning-soft: rgba(255,176,32,.14);
  --error: #FF6B7D; --error-soft: rgba(255,107,125,.15);
  --info: #7CC8FF; --info-soft: rgba(124,200,255,.14);
  --scrim: rgba(2,4,4,.66);
  --glass: rgba(17,21,22,.78);
  --map-bg: #0C1112; --map-road: #1A2224; --map-road-2: #232D30; --map-water: #0E2226; --map-park: #0F1C16;
  --shadow: 0 14px 30px rgba(0,0,0,.5);
  --r-card: 20px; --r-notch: 6px; --r-btn: 16px; --r-chip: 7px; --r-tile: 12px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --tap: 48px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --font-ui: 'Manrope', -apple-system, system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  color-scheme: dark;
  --label: var(--text); --label2: var(--text-2); --label3: var(--text-3); --sep: var(--line); --fill: var(--surface-2); --fill2: var(--surface-3);
  --cell: var(--surface); --cell-hi: var(--surface-2); --bar: var(--glass); --dim: var(--scrim);
  --blue: var(--accent-text); --green: var(--success); --red: var(--error); --orange: var(--warning); --purple: var(--sensitive); --teal: var(--info); --gray: var(--text-3); --indigo: var(--info);
}
[data-theme="light"] {
  --accent: #19D3C5; --accent-ink: #03110F; --accent-text: #0B6E67; --accent-soft: rgba(15,138,130,.12); --mint: #0F8A82;
  --bg: #F2F5F4; --surface: #FFFFFF; --surface-2: #E8EEED; --surface-3: #D7E1DF;
  --line: rgba(8,9,10,.08); --line-strong: rgba(8,9,10,.16);
  --text: #08090A; --text-2: #3F4B4A; --text-3: #5A6766;
  --sensitive: #B0246A; --sensitive-soft: rgba(176,36,106,.10); --sens-2: #8E1C55; --sens-bg: #FBE7F0; --sens-line: rgba(176,36,106,.25);
  --success: #08795A; --success-soft: rgba(8,121,90,.10); --success-ink: #FFFFFF;
  --warning: #9A5200; --warning-soft: rgba(154,82,0,.10);
  --error: #C21F43; --error-soft: rgba(194,31,67,.09);
  --info: #0B67A8; --info-soft: rgba(11,103,168,.10);
  --scrim: rgba(8,9,10,.40); --glass: rgba(255,255,255,.82);
  --map-bg: #E3EAE8; --map-road: #FFFFFF; --map-road-2: #F7FAF9; --map-water: #CFE3E6; --map-park: #D5E6DA; --shadow: 0 10px 30px rgba(8,9,10,.12);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 500 16px/1.45 var(--font-ui); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
svg.i { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.app { min-height: 100dvh; max-width: 560px; margin: 0 auto; position: relative; }
.mono, .num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* simulated status bar (screenshots only) */
.statusbar { display: none; position: sticky; top: 0; z-index: 30; height: 47px; padding: 14px 30px 0 46px; justify-content: space-between; font: 700 16px var(--font-display); background: var(--bg); }
.sim .statusbar { display: flex; } .statusbar .r { display: flex; gap: 6px; align-items: center; }
.statusbar .bat { width: 25px; height: 12px; border: 1.5px solid currentColor; border-radius: 4px; padding: 1px; } .statusbar .bat i { display: block; height: 100%; width: 75%; background: currentColor; border-radius: 1.5px; }
.statusbar.light { color: #fff; background: transparent; }

/* top bar: icon buttons, uppercase title */
.nav { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s2); min-height: 60px; padding: calc(env(safe-area-inset-top) + 6px) var(--s4) 6px; background: linear-gradient(var(--bg) 70%, transparent); }
.sim .nav { top: 47px; }
.nav .t { font: 700 13px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.nav .l, .nav .r { display: flex; align-items: center; } .nav .r { justify-content: flex-end; }
.navbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font: 700 14px var(--font-ui); cursor: pointer; }
.navbtn .lbl { display: none; }
.navbtn.textonly { background: none; border: 0; color: var(--accent-text); padding: 0 6px; }
.largetitle { display: flex; flex-direction: column-reverse; gap: 6px; padding: var(--s2) 20px var(--s3); }
.largetitle h1 { font: 700 34px/1.05 var(--font-display); letter-spacing: -.02em; margin: 0; }
.largetitle .sub { font: 700 12px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
main { padding-bottom: calc(env(safe-area-inset-bottom) + 150px); }

/* section labels */
.sh { margin: var(--s5) 20px var(--s2); font: 700 12px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sh > span:first-child::before, .sh:not(:has(span))::before { content: ""; display: inline-block; width: 10px; height: 3px; background: var(--accent); margin-right: 8px; vertical-align: middle; border-radius: 2px; }
.sf { margin: var(--s2) 20px 0; font-size: 13px; line-height: 18px; color: var(--text-3); }

/* cards: each row is its own tile with the signature notched corner */
.group { margin: 0 var(--s4); display: flex; flex-direction: column; gap: 6px; }
.cell { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: 12px var(--s4); width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-align: left; cursor: default; }
.group > .cell:first-child, .group > :first-child {  }
a.cell, button.cell, label.cell { cursor: pointer; transition: transform .12s, background .12s; }
a.cell:active, button.cell:active, label.cell:active { transform: scale(.985); background: var(--surface-2); }
.cell .main { flex: 1; min-width: 0; }
.cell .tt { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .st { font-size: 14px; color: var(--text-2); font-weight: 500; }
.cell .val { color: var(--text-2); text-align: right; font-weight: 600; }
.cell .val.green { color: var(--success); }
.cell .chev { width: 16px; height: 16px; flex: none; stroke: var(--text-3); stroke-width: 2.2; fill: none; }
.group.icons .cell + .cell::before, .cell + .cell::before { content: none; }
.tile { width: 40px; height: 40px; border-radius: var(--r-tile); display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--text); }
.tile svg.i { width: 20px; height: 20px; }
.bg-blue, .bg-indigo { background: var(--info-soft); color: var(--info); } .bg-green { background: var(--success-soft); color: var(--success); } .bg-red { background: var(--error-soft); color: var(--error); }
.bg-orange { background: var(--warning-soft); color: var(--warning); } .bg-purple { background: var(--sensitive-soft); color: var(--sensitive); } .bg-teal { background: var(--info-soft); color: var(--info); } .bg-gray { background: var(--surface-2); color: var(--text-2); }
.bg-accent { background: var(--accent); color: var(--accent-ink); }
.blue { color: var(--accent-text); } .red { color: var(--error); } .green { color: var(--success); } .orange { color: var(--warning); } .purple { color: var(--sensitive); } .sec { color: var(--text-2); }

/* chips */
.tag { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; font: 700 11px var(--font-display); letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-chip); background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.tag svg.i { width: 12px; height: 12px; stroke-width: 2.4; }
.tag.purple { background: var(--sensitive-soft); color: var(--sensitive); } .tag.blue { background: var(--info-soft); color: var(--info); }
.tag.green { background: var(--success-soft); color: var(--success); } .tag.red { background: var(--error-soft); color: var(--error); } .tag.orange { background: var(--warning-soft); color: var(--warning); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* stat block: big numbers for glanceability */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stats > div { padding: 14px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.stats > div:last-child {  }
.stats b { display: block; font: 700 26px/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats span { font: 700 11px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.group > .stats { background: none; }

/* toggle (not an iOS switch: squared knob, accent track) */
.switch { position: relative; width: 60px; height: 36px; flex: none; }
.switch input { position: absolute; inset: -6px; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--line-strong); transition: background .2s; }
.switch i::after { content: ""; position: absolute; top: 5px; left: 5px; width: 24px; height: 24px; border-radius: 8px; background: var(--text-2); transition: transform .22s cubic-bezier(.3,1.4,.5,1), background .2s; }
.switch input:checked + i { background: var(--accent); border-color: var(--accent); } .switch input:checked + i::after { transform: translateX(24px); background: var(--accent-ink); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 3px; }

/* buttons */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; border: 0; border-radius: var(--r-btn); background: var(--accent); color: var(--accent-ink); font: 700 17px var(--font-display); letter-spacing: .01em; cursor: pointer; transition: transform .12s, filter .12s; }
.btn svg.i { width: 20px; height: 20px; stroke-width: 2.4; }
.btn.gray { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); }
.btn.green { background: var(--success); color: #062016; } .btn.red { background: var(--error); color: #fff; }
.btn.plain { background: none; color: var(--accent-text); min-height: 48px; font: 700 15px var(--font-ui); }
.btn:disabled { background: var(--surface-2); color: var(--text-3); border: 1px dashed var(--line-strong); cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(.98); filter: brightness(.95); }
.row2 { display: flex; gap: var(--s2); } .row2 > * { flex: 1; }

/* pinned action area */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: var(--s3) var(--s4) calc(env(safe-area-inset-bottom) + var(--s3)); background: linear-gradient(transparent, var(--bg) 28%); }
.dock .in { max-width: 528px; margin: 0 auto; } .dock .hint { text-align: center; font-size: 13px; color: var(--text-2); margin-top: 8px; }
.sim .dock { padding-bottom: 34px; }
.dock.above-tabs { bottom: calc(env(safe-area-inset-bottom) + 84px); padding-top: 0; background: none; }
.sim .dock.above-tabs { bottom: 118px; padding-bottom: 8px; }

/* swipe to confirm */
.swipe { position: relative; height: 64px; border-radius: 18px; background: var(--accent); color: var(--accent-ink); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
.swipe.blue { background: var(--accent); }
.swipe[aria-disabled="true"] { background: var(--surface-2); color: var(--text-3); border: 1px dashed var(--line-strong); }
.swipe .lbl { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 52px; font: 700 15px var(--font-display); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.swipe:not([aria-disabled="true"]) .lbl { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%) -200% 0 / 200% 100% no-repeat; animation: shimmer 2.4s infinite; -webkit-background-clip: text; background-clip: text; }
@keyframes shimmer { to { background-position: 200% 0; } }
.swipe .thumb { position: absolute; top: 5px; left: 5px; width: 54px; height: 54px; border-radius: 14px; background: var(--accent-ink); color: var(--accent); display: grid; place-items: center; cursor: grab; transition: transform .25s cubic-bezier(.3,1.3,.5,1); }
.swipe[aria-disabled="true"] .thumb { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; }
.swipe .thumb svg.i { width: 26px; height: 26px; stroke-width: 2.6; }
.swipe.dragging .thumb { transition: none; }

/* floating pill tab bar */
.tabbar { position: fixed; left: var(--s3); right: var(--s3); bottom: calc(env(safe-area-inset-bottom) + 10px); z-index: 24; max-width: 536px; margin: 0 auto; background: var(--glass); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--line-strong); border-radius: 24px; box-shadow: var(--shadow); }
.sim .tabbar { bottom: 34px; }
.tabbar nav { display: flex; height: 66px; padding: 0 4px; }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 44px; font: 700 10.5px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tabbar a .tabic { position: relative; display: grid; place-items: center; width: 48px; height: 30px; border-radius: 10px; transition: background .2s; }
.tabbar a svg.i { width: 22px; height: 22px; }
.tabbar a.on { color: var(--text); } .tabbar a.on .tabic { background: var(--accent); color: var(--accent-ink); }
.bdg { position: absolute; top: -6px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; background: var(--error); color: #fff; font: 700 11px var(--font-display); display: grid; place-items: center; }

/* sheets */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); animation: fade .2s; backdrop-filter: blur(2px); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-width: 560px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 28px 28px 0 0; padding: 10px 0 calc(env(safe-area-inset-bottom) + 18px); max-height: 92dvh; overflow-y: auto; animation: up .32s cubic-bezier(.2,.9,.3,1); }
.sim .sheet { padding-bottom: 40px; }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--accent); margin: 0 auto 10px; }
.sheet .sheethead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--s4); min-height: 48px; }
.sheet .sheethead .t { font: 700 13px var(--font-display); letter-spacing: .14em; text-transform: uppercase; text-align: center; color: var(--text-2); }
.sheet .pad { padding: 0 var(--s4); }
.sheet .cell { background: var(--surface-2); }
.sheet.card-sheet { background: var(--surface); }
@keyframes up { from { transform: translateY(100%); } } @keyframes fade { from { opacity: 0; } }
/* action list (replaces iOS action sheet) */
.actionsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-width: 560px; margin: 0 auto; padding: 10px var(--s4) calc(env(safe-area-inset-bottom) + 16px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 28px 28px 0 0; animation: up .3s cubic-bezier(.2,.9,.3,1); }
.sim .actionsheet { padding-bottom: 40px; }
.actionsheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--accent); margin: 0 auto 12px; }
.actionsheet .grp { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.actionsheet .ttl { font: 700 12px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); padding: 4px 4px 6px; }
.actionsheet button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 var(--s4); border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--text); font: 700 16px var(--font-ui); cursor: pointer; text-align: left; }
.actionsheet button::after { content: "→"; color: var(--text-3); font-family: var(--font-display); }
.actionsheet button.d { color: var(--error); }
.actionsheet .grp.cancel button { justify-content: center; background: none; border: 0; color: var(--text-2); } .actionsheet .grp.cancel button::after { content: none; }

/* offer card */
.offer { position: fixed; left: var(--s3); right: var(--s3); bottom: calc(env(safe-area-inset-bottom) + 86px); z-index: 26; max-width: 536px; margin: 0 auto; background: var(--surface); border: 1.5px solid var(--accent); border-radius: 12px 28px 28px 12px; box-shadow: 0 0 0 6px var(--accent-soft), var(--shadow); padding: 14px var(--s4) var(--s4); animation: up .4s cubic-bezier(.2,.9,.3,1); }
.sim .offer { bottom: 112px; }
.offer > div:first-child { display: none; }
.offer .top { display: flex; align-items: center; gap: var(--s3); }
.offer .amt { font: 700 40px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ring { position: relative; width: 58px; height: 58px; flex: none; }
.ring svg { width: 58px; height: 58px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; } .ring .bgc { stroke: var(--surface-3); } .ring .fg { stroke: var(--accent); stroke-linecap: butt; transition: stroke-dashoffset 1s linear; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 18px var(--font-display); font-variant-numeric: tabular-nums; }
.legs { margin: 12px 0 14px; }
.leg { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; }
.leg .dot { width: 10px; height: 10px; border-radius: 3px; border: 2px solid var(--text); margin-top: 6px; flex: none; }
.leg .dot.sq { background: var(--accent); border-color: var(--accent); }
.leg + .leg { margin-top: 6px; }

/* progress segments */
.progress { display: flex; gap: 5px; margin: 2px var(--s4) 0; } .progress i { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); } .progress i.on { background: var(--accent); } .progress i.done { background: var(--success); }

/* hero, privacy, map, banner */
.hero { margin: var(--s3) var(--s4) 0; padding: 18px var(--s4); border-radius: 11px 26px 26px 11px; background: var(--surface); border: 1px solid var(--line); }
.hero .big { font: 700 44px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.privacy { margin: var(--s3) var(--s4) 0; padding: var(--s4); border-radius: 18px; background: repeating-linear-gradient(135deg, var(--surface) 0 10px, var(--surface-2) 10px 20px); border: 1px solid var(--line); display: flex; gap: var(--s3); align-items: flex-start; }
.privacy svg.i { width: 28px; height: 28px; color: var(--text-2); }
.mapprev { margin: var(--s3) var(--s4) 0; height: 160px; border-radius: 18px; overflow: hidden; position: relative; background: var(--map-bg); border: 1px solid var(--sensitive); }
.mapprev svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapprev .cap { position: absolute; left: 10px; bottom: 10px; font: 700 11px var(--font-display); letter-spacing: .08em; text-transform: uppercase; background: var(--sensitive); color: #140B33; padding: 5px 9px; border-radius: 6px; }
.banner { margin: var(--s3) var(--s4) 0; padding: var(--s4); border-radius: 11px 26px 26px 11px; background: var(--accent); color: var(--accent-ink); display: flex; gap: var(--s3); align-items: center; font-weight: 700; }
.banner b { font: 700 22px var(--font-display); letter-spacing: -.01em; }
.banner svg.i { width: 32px; height: 32px; stroke-width: 2.4; }

/* photos */
.thumbs { display: flex; gap: var(--s2); overflow-x: auto; padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: 14px;  }
.thumbs .th { width: 76px; height: 76px; border-radius: 12px; flex: none; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.thumbs .th img { width: 100%; height: 100%; object-fit: cover; }
.thumbs .add { background: var(--accent-soft); color: var(--accent-text); border: 1.5px dashed var(--accent-text); cursor: pointer; }
.thumbs .add svg.i { width: 26px; height: 26px; }
.check { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--text-3); display: grid; place-items: center; flex: none; }
.check.on { background: var(--success); border-color: var(--success); color: #062016; } .check svg.i { width: 16px; height: 16px; stroke-width: 3; }
.radio svg.i { color: var(--accent-text); width: 22px; height: 22px; stroke-width: 2.8; }
.temp-input { width: 96px; min-height: 44px; text-align: right; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); padding: 0 10px; font: 700 18px var(--font-display); color: var(--text); outline: none; }
.temp-input:focus { border-color: var(--accent); }
.textfield { width: 100%; border: 0; background: none; outline: none; font: 600 16px var(--font-ui); min-height: 24px; padding: 0; color: var(--text); }
textarea.textfield { resize: none; min-height: 88px; }
.sig { position: relative; margin: 0 var(--s4); background: #fff; border-radius: 16px; overflow: hidden; border: 2px solid var(--accent); }
.sig canvas { display: block; width: 100%; height: 200px; touch-action: none; }
.sig .base { position: absolute; left: 20px; right: 20px; bottom: 46px; border-bottom: 2px solid #CBD0D4; pointer-events: none; }
.sig .x { position: absolute; left: 22px; bottom: 52px; color: #5F6770; font-size: 20px; pointer-events: none; }

/* success */
.success { text-align: center; padding: 8px var(--s4) 4px; }
.success .badge { width: 76px; height: 76px; border-radius: 12px 28px 28px 12px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; margin: 4px auto 14px; animation: pop .45s cubic-bezier(.3,1.5,.5,1); }
.success .badge svg.i { width: 40px; height: 40px; stroke-width: 3; }
.success h2 { font: 700 30px/1.1 var(--font-display); letter-spacing: -.02em; margin: 0; }
@keyframes pop { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }

/* springboard (generic phone home mock) */
.springboard { min-height: 100dvh; background: radial-gradient(120% 80% at 80% 0%, #2a3140 0%, #0b0d0f 60%); color: #fff; display: flex; flex-direction: column; }
.springboard .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 0; padding: 26px 22px 0; }
.app-ic { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.app-ic .ic { width: 62px; height: 62px; border-radius: 15px; display: grid; place-items: center; }
.app-ic .ic svg.i { width: 30px; height: 30px; stroke: #fff; }
.app-ic.me { cursor: pointer; } .app-ic.me .ic { overflow: hidden; box-shadow: 0 0 0 2px var(--accent), 0 8px 24px rgba(25,211,197,.3); } .app-ic.me .ic img { width: 100%; height: 100%; }
.springboard .dots { margin: auto 0 12px; text-align: center; font-size: 8px; letter-spacing: 6px; opacity: .8; }
.springboard .dockbar { margin: 0 12px 30px; padding: 14px 18px; border-radius: 30px; background: rgba(255,255,255,.12); backdrop-filter: blur(20px); display: flex; justify-content: space-between; }
.springboard .dockbar .app-ic > span:last-child { display: none; }
.splash { min-height: 100dvh; display: grid; place-items: center; background: var(--bg); }
.splash img { width: 112px; height: 112px; border-radius: 30px; animation: pop .6s cubic-bezier(.3,1.5,.5,1); }

/* login */
.login { padding: 40px 0 0; }
.login .logo { width: 72px; height: 72px; border-radius: 11px 26px 26px 11px; display: block; margin: 16px 20px 22px; }
.login h1 { font: 700 40px/1.02 var(--font-display); letter-spacing: -.03em; margin: 0 20px; }
.login p.c { color: var(--text-2); margin: 10px 20px 0; font-size: 16px; }
.login .cell { min-height: 60px; }

/* earnings bars */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 16px 4px 0; }
.bars div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; font: 700 11px var(--font-display); color: var(--text-2); }
.bars i { width: 100%; border-radius: 6px 6px 2px 2px; background: var(--surface-3); min-height: 3px; } .bars .today i { background: var(--accent); }
.panel { margin: 0 var(--s4); padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: 11px 26px 26px 11px; }
.bignum { font: 700 44px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.eyebrow { font: 700 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }

/* segmented control (custom) */
.seg { display: flex; gap: 4px; margin: 0 var(--s4); padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.seg a, .seg button { flex: 1; min-height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: none; font: 700 13px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); cursor: pointer; }
.seg .on { background: var(--accent); color: var(--accent-ink); }

/* sync indicator */
.pillwrap { display: flex; margin: 4px var(--s4) 0; }
.syncpill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 12px; border-radius: 10px; font: 700 12px var(--font-display); letter-spacing: .08em; text-transform: uppercase; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); }
.syncpill svg.i { width: 16px; height: 16px; stroke-width: 2.4; }
.syncpill[data-state="ok"] { color: var(--success); } .syncpill[data-state="busy"] { color: var(--info); }
.syncpill[data-state="off"] { display: flex; width: 100%; min-height: 48px; padding: 12px 14px; font-size: 13px; background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.syncpill[data-state="off"] svg.i { width: 20px; height: 20px; }
.tabic { position: relative; display: inline-flex; }

/* scanner */
.viewfinder { position: relative; margin: 0 var(--s4); height: 210px; border-radius: 20px; overflow: hidden; background: #000; display: grid; place-items: center; }
.viewfinder video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewfinder .frame { position: relative; width: 78%; height: 58%; border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,.45); }
.viewfinder .frame::before, .viewfinder .frame::after { content: ""; position: absolute; inset: -2px; border: 3px solid var(--accent); border-radius: 12px; clip-path: polygon(0 0, 22% 0, 22% 3px, 3px 3px, 3px 30%, 0 30%, 0 70%, 3px 70%, 3px calc(100% - 3px), 22% calc(100% - 3px), 22% 100%, 78% 100%, 78% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 70%, 100% 70%, 100% 30%, calc(100% - 3px) 30%, calc(100% - 3px) 3px, 78% 3px, 78% 0, 100% 0, 100% 100%, 0 100%); }
.viewfinder .laser { position: absolute; left: 8%; right: 8%; height: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: laser 1.8s ease-in-out infinite alternate; top: 22%; }
@keyframes laser { to { top: 76%; } }
.viewfinder .vlbl { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font: 700 11px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.scanres { margin: var(--s3) var(--s4) 0; padding: var(--s4); border-radius: 18px; display: flex; gap: var(--s3); align-items: center; }
.scanres.ok { background: var(--success-soft); border: 1.5px solid var(--success); color: var(--success); }
.scanres.bad { background: var(--error-soft); border: 1.5px solid var(--error); color: var(--error); }
.scanres b { font: 700 20px var(--font-display); display: block; } .scanres .code { font: 700 14px var(--font-display); color: var(--text); letter-spacing: .04em; }
.scanres svg.i { width: 34px; height: 34px; stroke-width: 2.6; }
input.field { width: 100%; min-height: 52px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-2); padding: 0 14px; font: 700 16px var(--font-display); letter-spacing: .04em; color: var(--text); outline: none; }
input.field:focus { border-color: var(--accent); }

#toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 64px); transform: translateX(-50%); z-index: 60; background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 7px 18px 18px 7px; font-weight: 700; font-size: 15px; box-shadow: var(--shadow); max-width: 90vw; text-align: center; }
.sim #toast { top: 108px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* v4 polish */
.stats b { font-size: 24px; white-space: nowrap; }
.sh:not(:has(span)) { justify-content: flex-start; }
.nav { background: linear-gradient(var(--bg) 82%, transparent); }
.viewfinder .bars-ill { position: absolute; inset: 22% 18%; display: flex; gap: 3%; align-items: stretch; opacity: .22; }
.viewfinder .bars-ill i { background: #fff; flex: 1; } .viewfinder .bars-ill i:nth-child(3n) { flex: 2.4; } .viewfinder .bars-ill i:nth-child(4n) { flex: .5; }
.cell .tt { white-space: normal; overflow-wrap: anywhere; }
/* chips (client booking) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 var(--s4); }
.chip { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: 700 14px var(--font-ui); cursor: pointer; }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.lvt { width: 100%; border-collapse: collapse; font-size: 13px; } .lvt td { padding: 4px 0; vertical-align: top; }
/* v4 nav (Jae, Oct 26 9:18 PM): centered floating bar, equal margins, safe-area aware, raised + button */
.tabbar { left: 50%; right: auto; transform: translateX(-50%); margin: 0;
  width: calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width: 520px; }
.tabbar nav { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; height: 68px; padding: 0 2px; }
.tabbar a { min-width: 0; font: 700 11px/1.1 var(--font-ui); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.tabbar a .tabic { width: 44px; }
.tabplus { justify-self: center; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; background: none; cursor: pointer; }
.tabplus span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px 24px 24px 10px; background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 6px 18px rgba(0,0,0,.35); transition: transform .15s; }
.tabplus svg.i { width: 28px; height: 28px; stroke-width: 2.8; }
.tabplus:active span { transform: scale(.94) rotate(-6deg); }
.tabplus:focus-visible span { outline: 2px solid var(--text); outline-offset: 3px; }
@media (max-width: 359px) { .tabbar a { font-size: 10px; } .tabbar a .tabic { width: 38px; } }
.sh a { min-height: 44px; display: inline-flex; align-items: center; }
.pad { padding: 0 var(--s4); }

/* ---------- v6 (Oct 26, Jae's v5 review) ---------- */
.pillwrap:has(.syncpill[data-state="ok"]) { display: none; } /* only show sync when something is waiting or offline */
.cell.task { min-height: 60px; }
.cell.task .tt { white-space: normal; }
.evcam, .evbtn { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; padding: 0; overflow: hidden; background: var(--accent-soft); color: var(--accent-text); border: 1.5px dashed var(--accent-text); cursor: pointer; }
.evcam svg.i, .evbtn svg.i { width: 22px; height: 22px; }
.evth { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex: none; display: block; border: 1px solid var(--line-strong); }
.evth.lg { width: 56px; height: 56px; }
.evth img, .evbtn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tempcell .temp-input { width: 74px; }
.lvlist { margin-top: 8px; display: grid; gap: 4px; }
.lvrow { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text-3); font-weight: 600; }
.lvrow.ok span:last-child { color: var(--success); } .lvrow.ov span:last-child { color: var(--warning); }
.lvrow svg.i { width: 13px; height: 13px; vertical-align: -2px; stroke-width: 3; }
.linkbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 16px 0; padding: 0 4px; background: none; border: 0; color: var(--accent-text); font: 700 14px var(--font-ui); cursor: pointer; }
.linkbtn svg.i { width: 18px; height: 18px; }
.linkbtn.demo, .btn.plain.demo { color: var(--text-3); font: 600 13px var(--font-ui); min-height: 44px; }
.waitstrip { display: flex; align-items: center; gap: 10px; margin: 0 var(--s4) 0; min-height: 44px; padding: 8px 14px; border-radius: 12px; background: var(--warning-soft); color: var(--text); font-weight: 600; font-size: 14px; }
.waitstrip svg.i { width: 18px; height: 18px; color: var(--warning); flex: none; } .waitstrip > span:first-of-type { flex: 1; } .waitstrip b { font-variant-numeric: tabular-nums; }
.chips.inl { margin: 8px 0 0; }
.trackstrip { display: flex; align-items: center; gap: 10px; margin: var(--s3) var(--s4) 0; padding: 10px 14px; min-height: 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.trackstrip svg.i { width: 18px; height: 18px; flex: none; }
.pad2 { padding: 0 var(--s4); }
.reqlist .cell { min-height: 52px; }
/* done sheets: buttons always visible (sticky footer), compact facts grid */
.donesheet .grab { margin-bottom: 6px; }
.donehead { display: flex; align-items: center; gap: 14px; padding: 2px 20px 0; }
.donehead .badge { width: 56px; height: 56px; border-radius: 9px 22px 22px 9px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; flex: none; animation: pop .45s cubic-bezier(.3,1.5,.5,1); }
.donehead .badge svg.i { width: 30px; height: 30px; stroke-width: 3; }
.donehead h2 { font: 700 28px/1.05 var(--font-display); letter-spacing: -.02em; margin: 0 0 4px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 16px 0; }
.facts div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; min-width: 0; }
.facts b { display: block; margin-top: 2px; font-size: 15px; overflow-wrap: anywhere; }
.sheetfoot { position: sticky; bottom: calc(-1 * (env(safe-area-inset-bottom) + 18px)); background: var(--surface); padding: 10px 16px calc(env(safe-area-inset-bottom) + 4px); margin-top: 6px; display: grid; gap: 0; z-index: 2; }
.sim .sheetfoot { bottom: -40px; padding-bottom: 8px; }
.upnext { font-size: 13px; color: var(--text-2); text-align: center; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upnext b { color: var(--text); }
/* route card (Dashboard + Routes) */
.rcard { display: block; position: relative; margin: 0 var(--s4); padding: 16px 16px 14px; border-radius: 11px 26px 26px 11px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); text-decoration: none; }
.rcard:active { transform: scale(.985); }
.rcard .rtop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.rcard .rname { font: 700 24px/1.1 var(--font-display); margin-top: 4px; letter-spacing: -.01em; }
.rcard .progress { margin: 14px 0 0; }
.rcard .rmeta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 13px; color: var(--text-2); font-weight: 600; }
.rcard .rnext { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding: 12px 28px 0 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.rcard .rnext b { color: var(--text); } .rcard .rnext svg.i { width: 16px; height: 16px; color: var(--accent-text); flex: none; }
.rcard > .chev { position: absolute; right: 16px; bottom: 16px; width: 16px; height: 16px; stroke: var(--text-3); stroke-width: 2.2; fill: none; }
.tag.accent { background: var(--accent); color: var(--accent-ink); }
/* stop numbers */
.snum { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; font: 700 15px var(--font-display); background: var(--surface-3); color: var(--text); }
.snum.on { background: var(--accent); color: var(--accent-ink); } .snum.done { background: var(--success); color: #062016; } .snum.fail { background: var(--error); color: #fff; }
.snum.sens:not(.on):not(.done):not(.fail) { box-shadow: inset 0 0 0 2px var(--sensitive); }
.snum svg.i { width: 16px; height: 16px; stroke-width: 3; }
.cell.cur { border-color: var(--accent); }
/* planning map */
.routemap { position: relative; margin: 0 var(--s4); border-radius: 9px 22px 22px 9px; overflow: hidden; background: var(--map-bg); border: 1px solid var(--line-strong); }
.routemap svg { display: block; width: 100%; height: auto; }
.mapcap { position: absolute; left: 10px; top: 10px; font: 700 11px var(--font-display); letter-spacing: .08em; text-transform: uppercase; background: var(--surface); color: var(--text-2); border: 1px solid var(--line-strong); padding: 5px 9px; border-radius: 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 20px 0; font-size: 12px; color: var(--text-2); font-weight: 600; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.scanmiss { display: flex; align-items: center; gap: 8px; margin: 10px 16px 0; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--surface-2); color: var(--warning); font-weight: 700; font-size: 14px; }
.scanmiss svg.i { width: 18px; height: 18px; stroke-width: 2.6; }
.seg a { text-decoration: none; }
.syncpill { min-height: 44px; }
.waitstrip { margin-bottom: 12px; }
.facts > div > span { display: block; font: 700 11px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }