:root{
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  --font-num:"SF Mono","JetBrains Mono",ui-monospace,monospace;
  --surface:#FFFFFF;--surface-raised:#FFFFFF;--surface-sunken:#F2F2F7;
  --ink:#1C1C1E;--ink-secondary:#6C6C70;--ink-tertiary:#AEAEB2;
  --separator:rgba(60,60,67,.18);
  --ok:#34C759;--warn:#FF9F0A;--danger:#FF3B30;
  --accent:#0F766E;--accent-ink:#FFFFFF;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;
  --r-control:12px;--r-card:20px;--r-pill:999px;--h-control:44px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.06);
  --e-out:cubic-bezier(.32,.72,0,1);--e-inout:cubic-bezier(.4,0,.2,1);
  --d-micro:120ms;--d-state:200ms;--d-sheet:320ms;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --surface:#000000;--surface-raised:#1C1C1E;--surface-sunken:#2C2C2E;
  --ink:#FFFFFF;--ink-secondary:#98989D;--ink-tertiary:#636366;
  --separator:rgba(84,84,88,.65);--accent:#2DD4BF;--accent-ink:#06201C;
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;font-family:var(--font-ui);font-size:17px;line-height:25px;color:var(--ink);background:var(--surface);-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
body.red{filter:sepia(1) saturate(6) hue-rotate(-50deg) brightness(.55)}
body.red img{filter:grayscale(1)}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--accent)}
a.btn{text-decoration:none}

/* Layout */
#app{padding:calc(var(--sat) + var(--s-3)) var(--s-4) calc(var(--sab) + 88px);max-width:640px;margin:0 auto;min-height:100%}
.topbar{display:flex;align-items:center;gap:var(--s-2);min-height:var(--h-control);margin-bottom:var(--s-3)}
.back{display:inline-flex;align-items:center;height:var(--h-control);padding:0 var(--s-2) 0 0;color:var(--accent);font-weight:600}
.back::before{content:"";width:10px;height:10px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg);margin-right:6px}
h1{font-size:34px;line-height:40px;letter-spacing:-.025em;font-weight:700;margin:var(--s-2) 0 var(--s-4)}
h2{font-size:22px;line-height:28px;letter-spacing:-.015em;font-weight:600;margin:var(--s-6) 0 var(--s-3)}
h3{font-size:17px;line-height:22px;font-weight:600;margin:var(--s-4) 0 var(--s-2)}
p{margin:0 0 var(--s-3)}
.muted{color:var(--ink-secondary);font-size:15px;line-height:22px}
.caption{color:var(--ink-secondary);font-size:13px;line-height:18px;letter-spacing:.01em}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;left:-9999px}

/* Tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--separator);padding:var(--s-1) var(--s-2) calc(var(--sab) + var(--s-1));display:flex;justify-content:space-around;z-index:20}
.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;height:52px;gap:2px;color:var(--ink-secondary);font-size:11px;line-height:14px;font-weight:600;border-radius:var(--r-control)}
.tabbar button span{font-size:22px;line-height:24px}
.tabbar button.on{color:var(--accent)}

/* Controls */
.btn{display:flex;align-items:center;justify-content:center;gap:var(--s-2);height:var(--h-control);padding:0 var(--s-4);border-radius:var(--r-control);background:var(--surface-sunken);font-weight:600;white-space:nowrap;width:100%;transition:transform var(--d-micro) var(--e-inout),opacity var(--d-state)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.danger{background:var(--danger);color:#fff}
.btn.big{height:72px;font-size:22px;letter-spacing:-.01em;border-radius:var(--r-card)}
.btn.ghost{background:none;color:var(--accent)}
.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:var(--s-3)}
.row>*{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:var(--s-3)}
input[type=text],input[type=tel],input[type=date],input[type=number],select,textarea{width:100%;height:var(--h-control);padding:0 var(--s-3);border:0;border-radius:var(--r-control);background:var(--surface-sunken);-webkit-appearance:none;appearance:none}
textarea{height:auto;min-height:88px;padding:var(--s-3);resize:vertical}
label.f{display:block;margin-bottom:var(--s-3)}
label.f>span{display:block;font-size:13px;line-height:18px;color:var(--ink-secondary);margin:0 0 var(--s-1) var(--s-1)}
.seg{display:flex;background:var(--surface-sunken);border-radius:var(--r-pill);padding:3px}
.seg button{flex:1;height:38px;border-radius:var(--r-pill);font-weight:600;color:var(--ink-secondary);white-space:nowrap}
.seg button.on{background:var(--surface-raised);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* Lists */
.list{margin:0;padding:0;list-style:none;background:var(--surface-raised);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
@media (prefers-color-scheme:dark){.list{box-shadow:none}}
.list>li{display:flex;align-items:center;gap:var(--s-3);min-height:52px;padding:var(--s-2) var(--s-4);position:relative}
.list>li+li::before{content:"";position:absolute;left:var(--s-4);right:0;top:0;border-top:1px solid var(--separator)}
.list>li.ic+li::before{left:60px}
.list>li.tap{cursor:pointer}
.list>li .ico{font-size:24px;line-height:28px;width:32px;text-align:center;flex:none}
.list>li .t{flex:1;min-width:0}
.list>li .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list>li .t small{display:block;color:var(--ink-secondary);font-size:15px;line-height:20px}
.list>li .chev{width:8px;height:8px;border-right:2px solid var(--ink-tertiary);border-top:2px solid var(--ink-tertiary);transform:rotate(45deg);flex:none}
.list>li .v{font-variant-numeric:tabular-nums;color:var(--ink-secondary);text-align:right;flex:none}
.list>li.empty{color:var(--ink-secondary);font-size:15px}
.chk{width:28px;height:28px;border-radius:50%;border:2px solid var(--ink-tertiary);flex:none;display:grid;place-items:center;transition:background var(--d-state),border-color var(--d-state)}
.chk.on{background:var(--accent);border-color:var(--accent)}
.chk.on::after{content:"";width:6px;height:11px;border-right:2.5px solid var(--accent-ink);border-bottom:2.5px solid var(--accent-ink);transform:translateY(-1px) rotate(45deg)}
li.done .t{color:var(--ink-secondary);text-decoration:line-through}
.del{width:44px;height:44px;display:grid;place-items:center;color:var(--ink-tertiary);font-size:20px;flex:none;margin-right:-12px}

/* Grid of situations */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);padding:var(--s-4);min-height:96px;border-radius:var(--r-card);background:var(--surface-raised);box-shadow:var(--shadow);text-align:left;font-weight:600;line-height:21px;transition:transform var(--d-micro) var(--e-inout)}
.tile:active{transform:scale(.97)}
@media (prefers-color-scheme:dark){.tile{box-shadow:none}}
.tile .ico{font-size:28px;line-height:32px}
.tile small{display:block;font-weight:400;color:var(--ink-secondary);font-size:13px;line-height:18px}

/* Hero 112 */
.hero{padding:var(--s-5) 0 var(--s-3)}
.hero .brand{font-size:13px;line-height:18px;font-weight:600;color:var(--ink-secondary);letter-spacing:.01em}
.hero h1{margin:var(--s-1) 0 var(--s-4)}

/* Step view */
.step{padding:var(--s-5) 0}
.step .n{font-family:var(--font-num);font-size:13px;color:var(--ink-secondary);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.step .txt{font-size:28px;line-height:36px;letter-spacing:-.02em;font-weight:600;margin:var(--s-2) 0 var(--s-5)}
.step .txt.small{font-size:22px;line-height:30px}
.stepnav{display:flex;gap:var(--s-3);position:sticky;bottom:calc(var(--sab) + 72px);background:var(--surface);padding:var(--s-3) 0}
.dots{display:flex;gap:6px;margin:var(--s-3) 0}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-tertiary)}
.dots i.on{background:var(--accent);width:18px;border-radius:3px}

/* Progress ring */
.ring{width:56px;height:56px;flex:none}
.ring circle{fill:none;stroke-width:5}
.ring .bg{stroke:var(--surface-sunken)}
.ring .fg{stroke:var(--accent);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray var(--d-sheet) var(--e-out)}
.ring text{font-family:var(--font-num);font-size:13px;font-weight:600;fill:var(--ink);text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}

/* Tools */
.tool-screen{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;color:#fff;text-align:center;padding:var(--s-6)}
.tool-screen.white{background:#fff;color:#000}
.tool-screen.redlight{background:#3a0000;color:#ff5a5a}
.tool-screen .close{position:absolute;top:calc(var(--sat) + 8px);right:12px;height:44px;padding:0 var(--s-4);border-radius:var(--r-pill);background:rgba(128,128,128,.35);color:inherit;font-weight:600}
.tool-screen .big{font-size:40px;line-height:44px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.compass{width:260px;height:260px;border-radius:50%;background:var(--surface-sunken);position:relative;margin:var(--s-5) auto}
.compass .needle{position:absolute;left:50%;top:50%;width:6px;height:110px;margin:-110px 0 0 -3px;background:var(--danger);border-radius:3px;transform-origin:50% 100%;transition:transform 120ms linear}
.compass .n{position:absolute;left:50%;top:14px;transform:translateX(-50%);font-weight:700;font-size:20px}
.compass .center{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px;border-radius:50%;background:var(--ink)}
.heading{font-family:var(--font-num);font-size:56px;line-height:60px;font-weight:700;letter-spacing:-.03em;text-align:center;font-variant-numeric:tabular-nums}
.coords{font-family:var(--font-num);font-size:22px;line-height:30px;font-variant-numeric:tabular-nums;word-break:break-all}
.spelled{font-size:20px;line-height:28px;background:var(--surface-sunken);border-radius:var(--r-card);padding:var(--s-4);margin:var(--s-3) 0}
.bpm{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0}
.pulse{width:44px;height:44px;border-radius:50%;background:var(--danger);opacity:.25;flex:none}
.pulse.beat{opacity:1}

/* Cards */
.card{background:var(--surface-raised);border-radius:var(--r-card);box-shadow:var(--shadow);padding:var(--s-4);margin-bottom:var(--s-3)}
@media (prefers-color-scheme:dark){.card{box-shadow:none}}
.card h3{margin-top:0}
.badge{display:inline-block;min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-pill);background:var(--danger);color:#fff;font-size:13px;line-height:22px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.badge.warn{background:var(--warn);color:#000}
.pill{display:inline-block;padding:2px 10px;border-radius:var(--r-pill);background:var(--surface-sunken);font-size:13px;line-height:18px;font-weight:600;color:var(--ink-secondary)}
.pill.danger{background:var(--danger);color:#fff}.pill.warn{background:var(--warn);color:#000}.pill.ok{background:var(--ok);color:#000}
.photo{width:100%;border-radius:var(--r-control);display:block;margin:var(--s-2) 0}
.qr{display:block;margin:var(--s-4) auto;width:240px;height:240px;background:#fff;padding:12px;border-radius:var(--r-card)}
.qr svg{width:100%;height:100%}
.note{padding:var(--s-3) var(--s-4);border-radius:var(--r-control);background:var(--surface-sunken);font-size:15px;line-height:22px;margin:var(--s-3) 0}
.undo{position:fixed;left:50%;bottom:calc(var(--sab) + 80px);transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:0 var(--s-4);height:44px;display:flex;align-items:center;gap:var(--s-4);border-radius:var(--r-pill);z-index:30;box-shadow:var(--shadow)}
.undo button{color:var(--accent);font-weight:600}
@media (prefers-color-scheme:dark){.undo button{color:#2DD4BF}}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}

@media (prefers-reduced-motion:reduce){*{transition-duration:1ms!important;animation-duration:1ms!important}}

/* Print */
@media print{
  body{background:#fff;color:#000;filter:none!important}
  .tabbar,.topbar,.noprint,.undo{display:none!important}
  #app{padding:0;max-width:none}
  .sheet{page-break-after:always}
  .list,.card{box-shadow:none;border:1px solid #999}
  .chk{border-color:#000}
}