@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-Regular.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-Medium.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-display:swap;src:url(fonts/IBMPlexMono-SemiBold.woff2) format('woff2')}
:root{
  --bg:#eef2f2; --surface:#ffffff; --surface2:#f6f9f9; --ink:#11201f; --ink2:#4d5c5b;
  --muted:#788887; --line:#dde5e4; --line2:#eaf0ef; --accent:#00b39f; --accentSoft:#e2f6f3;
  --danger:#c9403a; --dangerSoft:#fbeceb; --warn:#b3821c; --warnSoft:#fbf3e2; --grid:#f2dede;
  --shadow:0 1px 2px rgba(17,32,31,.06), 0 8px 24px rgba(17,32,31,.05);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}
[data-theme="dark"]{
  --bg:#0b1110; --surface:#151d1c; --surface2:#1b2424; --ink:#e9f1f0; --ink2:#b3c1c0;
  --muted:#8a9a99; --line:#26302f; --line2:#1f2827; --accent:#2fd3bd; --accentSoft:#12302c;
  --danger:#f0665e; --dangerSoft:#331716; --warn:#e0a63a; --warnSoft:#2e2513; --grid:#2b1f20;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box;scrollbar-width:thin}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
#app{height:100dvh;display:flex;flex-direction:column;max-width:520px;margin:0 auto;background:var(--bg)}
.screen{flex:1;display:flex;flex-direction:column;min-height:0}
.scroll{flex:1;overflow:auto;min-height:0}
button{font-family:inherit;cursor:pointer;color:inherit}
a{color:var(--accent);text-decoration:none}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-family:var(--mono)}
.mono{font-family:var(--mono)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.btn{border:none;background:var(--accent);color:#04201c;font-size:15px;font-weight:600;padding:15px;border-radius:12px}
.btn.ghost{border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:400}
.btn:active{transform:scale(.98)}
.grid{background:var(--grid);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.09) 0 1px,transparent 1px 8px),repeating-linear-gradient(0deg,rgba(0,0,0,.09) 0 1px,transparent 1px 8px)}
.trace{width:100%;display:block}
.pill{font-size:11px;font-family:var(--mono);padding:4px 8px;border-radius:20px;background:var(--surface2);color:var(--ink2)}
.pill.danger{background:var(--dangerSoft);color:var(--danger)}
.pill.warn{background:var(--warnSoft);color:var(--warn)}
.pill.accent{background:var(--accentSoft);color:var(--accent)}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(220%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.sweep{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);width:40%;animation:sweep 3.4s linear infinite}
.pulse{animation:pulse 1.4s ease-in-out infinite}
/* nav */
.nav{flex:none;display:flex;background:var(--surface);border-top:1px solid var(--line)}
.nav button{flex:1;border:none;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:7px}
.nav .bar{height:2px;width:100%;background:transparent}
.nav .ico{width:16px;height:16px;border:2px solid var(--muted);margin-top:8px}
.nav .lbl{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.02em;padding-bottom:12px}
.nav button.on .bar{background:var(--accent)} .nav button.on .ico{border-color:var(--accent)} .nav button.on .lbl{color:var(--accent)}
/* tabs */
.tabs{display:flex;border-bottom:1px solid var(--line);background:var(--surface);flex:none}
.tabs button{flex:1;border:none;background:none;padding:14px 4px 12px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
/* camera */
.cam{flex:1;display:flex;flex-direction:column;background:#0a0f0f;color:#eef4f3}
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam .frame{position:absolute;left:20px;right:20px;top:64px;bottom:64px;border:1.5px solid rgba(47,211,189,.85);border-radius:6px;pointer-events:none}
.shutter{width:72px;height:72px;border-radius:50%;border:4px solid rgba(255,255,255,.3);background:#fff;padding:0}
.shutter div{width:100%;height:100%;border-radius:50%;background:#fff;border:3px solid #0a0f0f}
.sheet{background:var(--surface);border-radius:20px 20px 0 0;padding:22px 20px 24px}
.handle{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 18px}
.row{display:flex;align-items:center;gap:12px}
.step{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line2);align-items:flex-start}
.step:last-child{border-bottom:none}
input[type=range]{width:100%;accent-color:var(--accent)}
.hscroll{display:flex;gap:12px;overflow-x:auto;padding:4px 18px 8px;scroll-snap-type:x mandatory}
.hscroll>*{flex:none;scroll-snap-align:start}
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:20px;font-size:13px;z-index:9;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
.hidden{display:none!important}

.scroll{scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}