/* Weight Scan - styles. Design tokens live in :root at the top. */
:root{ --ink:#10171c; --steel:#2b3a44; --fog:#eef1f0; --paper:#f8faf9; --line:#c2cdcb;
    --signal:#e8590c; --signalSoft:#fbe7da; --sea:#0b6e6e; --seaSoft:#d8eceb; --warn:#b42318; }
  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body{ margin:0; }
  body{ background:var(--fog); color:var(--ink); font-family:'Inter',system-ui,-apple-system,sans-serif;
    min-height:100vh; padding:max(10px,env(safe-area-inset-top)) 12px calc(36px + env(safe-area-inset-bottom)); max-width:640px; margin:0 auto; }
  h1{ margin:0; font-size:24px; font-weight:800; letter-spacing:-0.5px; }
  .eyebrow{ font-size:11px; font-weight:800; letter-spacing:2px; color:var(--signal); }
  .sub{ font-size:12px; color:var(--steel); margin-top:2px; }
  .scanCard{ background:#0b0f12; border-radius:14px; overflow:hidden; box-shadow:0 6px 22px rgba(0,0,0,0.18); margin-top:10px; }
  .stage{ position:relative; width:100%; aspect-ratio:4/3; background:#000; overflow:hidden; transition:outline .1s; }
  video{ width:100%; height:100%; object-fit:cover; }
  .guideBox{ position:absolute; left:14%; top:36%; width:72%; height:24%; border:3px solid var(--signal);
    border-radius:10px; box-shadow:0 0 0 9999px rgba(0,0,0,0.30); display:flex; align-items:flex-start; justify-content:center; pointer-events:none; }
  .guideLabel{ background:var(--signal); color:#fff; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:5px; transform:translateY(-22px); white-space:nowrap; }
  .hud{ position:absolute; left:0; right:0; bottom:0; padding:10px 14px; background:linear-gradient(to top,rgba(8,11,13,0.92),rgba(8,11,13,0)); color:#fff; }
  .hudState{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; margin-bottom:7px; }
  .dot{ width:9px; height:9px; border-radius:50%; }
  .hudNums{ display:flex; gap:18px; }
  .hudCol{ display:flex; flex-direction:column; gap:1px; font-variant-numeric:tabular-nums; }
  .hudCol span{ font-size:10px; font-weight:700; letter-spacing:.5px; color:#8aa0a0; }
  .hudCol strong{ font-size:22px; font-weight:800; }
  .pips{ display:flex; gap:5px; margin-top:8px; }
  .pip{ width:24px; height:5px; border-radius:3px; background:rgba(255,255,255,0.25); }
  .pip.on{ background:var(--signal); }
  .flashBadge{ position:absolute; top:12px; left:50%; transform:translateX(-50%); background:var(--sea); color:#fff; font-size:13px; font-weight:800; letter-spacing:1px; padding:5px 12px; border-radius:8px; display:none; }
  .zoomRow{ display:none; align-items:center; gap:12px; padding:10px 14px; background:#11181d; border-top:1px solid #1d262c; }
  .zoomRow input[type=range]{ flex:1; accent-color:var(--signal); height:24px; }
  .zoomLbl{ color:#8aa0a0; font-size:17px; font-weight:800; width:14px; text-align:center; }
  .dbg{ position:absolute; left:8px; top:8px; display:flex; flex-direction:column; gap:3px; z-index:5; }
  .dbg canvas{ width:120px; border:2px solid var(--signal); border-radius:5px; background:#fff; }
  .dbg span{ font-size:10px; color:#fff; background:rgba(0,0,0,0.6); padding:2px 5px; border-radius:4px; font-variant-numeric:tabular-nums; }
  .scanError{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; padding:24px; font-size:15px; text-align:center; color:#ffd5c8; gap:16px; }
  .scanError button{ background:var(--signal); color:#fff; border:none; border-radius:10px; padding:13px 20px; font-size:16px; font-weight:700; }
  .controls{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; background:#11181d; }
  .pausebtn{ display:flex; align-items:center; gap:6px; background:#1d262c; border:1px solid #2b3a44; color:#fff; border-radius:9px; padding:9px 14px; font-size:14px; font-weight:600; }
  .panBlock{ display:flex; align-items:center; gap:10px; color:#fff; }
  .panLbl{ font-size:13px; color:#8aa0a0; font-weight:600; }
  .panStep{ display:flex; align-items:center; gap:12px; }
  .panStep button{ width:36px; height:36px; border-radius:8px; border:1px solid #2b3a44; background:#0b0f12; color:#fff; font-size:20px; font-weight:700; }
  .panStep strong{ font-size:17px; min-width:24px; text-align:center; }
  .statusChip{ font-size:13px; font-weight:700; color:var(--signal); }
  .statsCard{ display:grid; grid-template-columns:1.4fr 1fr 1.2fr 1.2fr; gap:8px; margin-top:12px; }
  .statBox{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:11px 10px; display:flex; flex-direction:column; gap:2px; }
  .statBox:first-child{ background:var(--sea); border-color:var(--sea); }
  .statBox:first-child .statLbl,.statBox:first-child .statUnit{ color:#bfe6e4; }
  .statBox:first-child .statBig{ color:#fff; }
  .statLbl{ font-size:9.5px; font-weight:800; letter-spacing:.6px; color:var(--steel); }
  .statBig{ font-size:28px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
  .statMid{ font-size:21px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
  .statUnit{ font-size:10px; color:var(--steel); font-weight:600; }
  @media(max-width:560px){ .statsCard{ grid-template-columns:1fr 1fr; } }
  .listCard{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px; margin-top:12px; }
  .listHead{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
  .listTitle{ font-size:15px; font-weight:700; }
  .listTotal{ font-size:14px; color:var(--sea); font-weight:700; margin-left:4px; }
  .ghost{ display:flex; align-items:center; gap:5px; background:transparent; border:1px solid var(--line); color:var(--steel); border-radius:7px; padding:7px 11px; font-size:13px; }
  .empty{ padding:22px 10px; text-align:center; font-size:14px; color:var(--steel); line-height:1.5; }
  .stripHead,.row{ display:grid; grid-template-columns:26px 90px 1fr 40px 1fr 30px; gap:8px; align-items:center; }
  .stripHead{ padding:4px 6px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#9aa7a4; }
  .row{ padding:9px 6px; border-top:1px solid var(--fog); font-variant-numeric:tabular-nums; animation:slideIn .25s ease; }
  @keyframes slideIn{ from{ background:var(--seaSoft);} to{ background:transparent;} }
  .cNo{ font-size:12px; color:#aeb8b6; font-weight:700; }
  .cTime{ font-size:12px; color:var(--steel); }
  .cGross{ font-size:15px; }
  .cDim{ font-size:13px; color:var(--steel); }
  .cNet{ font-size:17px; color:var(--sea); font-weight:700; }
  .rowx{ background:transparent; border:none; color:#c4cdcb; padding:4px; font-size:18px; line-height:1; }
  .foot{ text-align:center; font-size:11.5px; color:var(--steel); margin-top:12px; line-height:1.5; }
  button{ cursor:pointer; font-family:inherit; }
  /* last-read editable box */
  .lastCard{ display:flex; align-items:center; gap:12px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-top:12px; }
  .lastCard.fresh{ animation:freshPulse .6s ease; }
  @keyframes freshPulse{ 0%{ background:var(--seaSoft); border-color:var(--sea);} 100%{ background:var(--paper); border-color:var(--line);} }
  .lastLbl{ font-size:9.5px; font-weight:800; letter-spacing:.6px; color:var(--steel); }
  .lastMain{ flex:1; display:flex; flex-direction:column; gap:3px; }
  .lastRow{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .lastGrossWrap{ display:flex; align-items:baseline; gap:5px; }
  .lastGross{ font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; border:none; background:transparent; width:5ch; color:var(--ink); padding:0; border-bottom:2px dashed transparent; }
  .lastGross:focus{ outline:none; border-bottom:2px dashed var(--signal); }
  .lastUnit{ font-size:13px; color:var(--steel); font-weight:600; }
  .lastNet{ font-size:16px; color:var(--sea); font-weight:700; font-variant-numeric:tabular-nums; }
  .lastHint{ font-size:11px; color:var(--steel); }
  .lastEdit{ background:var(--signalSoft); color:var(--signal); border:none; border-radius:8px; padding:9px 13px; font-size:13px; font-weight:700; white-space:nowrap; }
  /* hail + progress */
  .hailCard{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px; margin-top:12px; }
  .hailTop{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .hailInputWrap{ display:flex; align-items:center; gap:8px; }
  .hailInputWrap label{ font-size:13px; font-weight:700; color:var(--steel); }
  .hailInput{ width:8ch; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; padding:7px 9px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); }
  .hailInput:focus{ outline:none; border-color:var(--signal); }
  .hailClear{ background:transparent; border:1px solid var(--line); color:var(--steel); border-radius:7px; padding:8px 11px; font-size:12px; }
  .progWrap{ margin-top:14px; display:none; }
  .progBarTrack{ height:14px; background:var(--fog); border-radius:8px; overflow:hidden; border:1px solid var(--line); }
  .progBarFill{ height:100%; width:0%; background:var(--sea); border-radius:8px 0 0 8px; transition:width .4s ease; }
  .progBarFill.over{ background:var(--signal); }
  .progStats{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:12px; }
  .progStat{ display:flex; flex-direction:column; gap:2px; }
  .progStat .pl{ font-size:9.5px; font-weight:800; letter-spacing:.5px; color:var(--steel); }
  .progStat .pv{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }
  .progStat .pu{ font-size:10px; color:var(--steel); }
  .etaRow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
  .etaBox{ background:var(--seaSoft); border:1px solid #bcdedc; border-radius:10px; padding:11px 12px; }
  .etaBox.recent{ background:var(--signalSoft); border-color:#f3cbb4; }
  .etaBox .el{ font-size:9.5px; font-weight:800; letter-spacing:.5px; color:var(--steel); }
  .etaBox .ev{ font-size:19px; font-weight:800; line-height:1.15; margin-top:3px; }
  .etaBox .ed{ font-size:11px; color:var(--steel); margin-top:2px; }