/* Styling: odesyn brand tokens (Theme.swift) — light auth screen, dark scan overlay over the native camera. */
:root{
  --ink:#000; --paper:#fff; --surface:#FBFFEF;
  --label:rgba(0,0,0,.6); --line:rgba(0,0,0,.14); --muted:rgba(0,0,0,.55);
  --danger:#C0392B; --good:#33cc61; --need:#dc4747;
  --corner:12px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}

#scrim{position:fixed;inset:0;background:rgba(0,0,0,.15);z-index:1}
body.view-login #scrim{display:none}

#login{position:fixed;inset:0;z-index:10;background:var(--paper)}
#scan{position:fixed;inset:0;z-index:5}
body.view-login #scan{display:none}
body.view-scan #login{display:none}

.logo{width:auto;display:block;fill:currentColor}
.auth{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 28px;max-width:520px;margin:0 auto}
.auth-logo{height:38px;color:var(--ink)}
.auth-title{color:var(--ink);font-size:22px;font-weight:500;margin:44px 0 18px}
.fields{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field-label{font-size:11px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:var(--label)}
.outlined{font-size:16px;font-weight:400;color:var(--ink);background:var(--paper);width:100%;
  padding:13px 14px;border:1.5px solid var(--ink);border-radius:var(--corner);outline:none}
.outlined::placeholder{color:rgba(0,0,0,.35)}
.auth-msg{font-size:13px;color:var(--ink);margin-top:14px;line-height:1.4}
.auth-msg.err{color:var(--danger)}

.filled{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;
  padding:0 20px;margin-top:22px;font-size:16px;font-weight:500;color:var(--paper);background:var(--ink);
  border:0;border-radius:26px;cursor:pointer}
.filled:disabled{background:rgba(0,0,0,.35);cursor:default}
.filled.danger{background:var(--danger)}
.arrow{white-space:pre}
.auth-toggle{width:100%;margin-top:14px;font-size:14px;font-weight:400;color:var(--ink);
  background:none;border:0;cursor:pointer}

.scan-col{position:absolute;inset:0;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 8px);pointer-events:none}
.scan-col button{pointer-events:auto}
.scan-top{display:flex;justify-content:flex-end;padding:6px 12px 0}
.gear{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.7);background:none;border:0}
.guide{text-align:center;padding:10px 24px 0}
.guide-main{font-size:21px;font-weight:600;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.guide-hint{font-size:14px;font-weight:400;color:rgba(255,255,255,.82);min-height:20px;
  text-shadow:0 1px 10px rgba(0,0,0,.5)}
.scan-spacer{flex:1}

.viewfinder{position:relative;width:min(64vw,300px);aspect-ratio:.7;margin:0 auto}
.reticle{position:absolute;inset:0;width:100%;height:100%}
.center-line{position:absolute;left:50%;top:15%;bottom:15%;width:2.5px;transform:translateX(-50%);
  background:rgba(255,255,255,.5);border-radius:2px}
body.recording .center-line{display:none}

.coverage{position:relative;height:26px;margin:18px 44px 0}
.cb-track{position:absolute;inset:0;display:flex;gap:2px;align-items:center}
.cb-seg{flex:1;height:5px;border-radius:1px;background:var(--need);opacity:.55;
  transition:height .28s cubic-bezier(.2,.9,.3,1.2),background-color .2s,opacity .2s}
.cb-seg.on{height:16px;border-radius:2.5px;background:var(--good);opacity:1}
.cb-needle{position:absolute;top:0;width:3px;height:26px;background:#fff;border-radius:2px;
  transform:translateX(-50%);transition:left .06s linear;box-shadow:0 0 6px rgba(0,0,0,.5)}

.record-row{display:flex;justify-content:center;padding:0 0 12px}
.record{width:68px;height:68px;border-radius:50%;background:#fff;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.record .dot{width:24px;height:24px;border-radius:5px;background:#e0352b;opacity:0;transition:opacity .15s}
body.recording .record .dot{opacity:1}
.scan-logo{height:30px;color:#fff;margin:0 auto 6px}
.scan-status{text-align:center;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.6);min-height:16px}

.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.35)}
.sheet-card{width:100%;max-width:520px;background:var(--paper);border-radius:16px 16px 0 0;
  padding:22px 24px calc(env(safe-area-inset-bottom) + 22px);display:flex;flex-direction:column;gap:14px}
.sheet-row{display:flex;justify-content:space-between;font-size:15px;color:var(--ink)}
.sheet-row b{font-weight:500}

.hidden{display:none!important}