:root{--bg:#101418;--card:#1a2027;--text:#e8eaed;--text2:#9aa3ad;--accent:#ff7a28;--accent2:#c73e3a;--ok:#4caf7d;--danger:#e05b5b;--border:#2a323b}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);overscroll-behavior:none;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app{min-height:100%;padding:env(safe-area-inset-top) 14px env(safe-area-inset-bottom) 14px;flex-direction:column;max-width:480px;margin:0 auto;display:flex}.topbar{letter-spacing:1px;justify-content:space-between;align-items:center;padding:12px 0;font-size:12px;display:flex}.brand{font-weight:800}.status{color:var(--text2)}.home{flex-direction:column;gap:14px;display:flex}.packcard{background:var(--card);border:1px solid var(--border);text-align:center;border-radius:16px;padding:14px 0 12px}.packcard .big{font-size:52px;font-weight:800;line-height:1}.packcard .label{color:var(--text2);margin-top:4px;font-size:12px}button{font:inherit;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;border-radius:12px;width:100%;padding:14px;font-size:16px;font-weight:600}button:active{transform:scale(.98)}button.ghost{color:var(--text2);background:0 0;font-weight:500}.primary{background:var(--accent);border-color:var(--accent);color:#101418;letter-spacing:4px;padding:22px;font-size:24px;font-weight:800}h2{margin:6px 0 10px;font-size:16px}.step{background:var(--card);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:10px;padding:14px;display:flex}.step.anomaly button{text-align:left}.step .hint{color:var(--text2);margin:0;font-size:13px}.chips{gap:8px;display:flex}.chip{border-radius:12px;flex:1;padding:14px 0;font-size:20px;font-weight:700}.chip.expected{border-color:var(--accent);color:var(--accent)}.chip.selected{background:var(--accent);color:#101418;border-color:var(--accent)}.chipBtn{padding:10px;font-size:14px}input,select{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:10px;width:100%;padding:12px}input[type=number]{text-align:center;font-size:22px}label{color:var(--text2);flex-direction:column;gap:6px;font-size:13px;display:flex}.confirm{background:var(--accent);border-color:var(--accent);color:#101418;font-weight:800}.secondary{gap:8px;display:flex}.secondary button{letter-spacing:1px;padding:12px 6px;font-size:13px}.history ul{flex-direction:column;gap:8px;padding:0;list-style:none;display:flex}.history h2{margin:12px 0}.history li{background:var(--card);border:1px solid var(--border);border-radius:12px;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;font-size:13px;display:flex}.history li>span:first-child{flex:1}.history .type{color:var(--accent);font-size:11px;font-weight:700;display:block}.history .when{color:var(--text2);font-size:11px}.history .value{margin-top:2px}.history .sync{border:1px solid var(--border);border-radius:99px;padding:3px 8px;font-size:10px}.sync.synced{color:var(--ok);border-color:var(--ok)}.sync.pending{color:var(--accent);border-color:var(--accent)}.sync.error,.sync.syncing{color:var(--danger);border-color:var(--danger)}.history .actions{gap:6px;display:flex}button.mini{width:auto;padding:6px 10px;font-size:12px}button.mini.danger{color:var(--danger);border-color:var(--danger)}.toast{left:50%;bottom:calc(24px + env(safe-area-inset-bottom));background:var(--card);border:1px solid var(--ok);z-index:10;white-space:nowrap;border-radius:99px;padding:10px 20px;font-size:13px;position:fixed;transform:translate(-50%)}.foot{margin-top:auto;padding-top:18px}.packsize{flex-direction:row;align-items:center;gap:10px}.packsize input{width:90px;padding:8px;font-size:15px}.syncbar{gap:8px}.syncline{color:var(--text2);align-items:center;gap:8px;font-size:13px;display:flex}.syncdot{border-radius:99px;width:8px;height:8px;display:inline-block}.syncdot.ok{background:var(--ok)}.syncdot.warn{background:var(--accent)}.syncdot.off{background:var(--border)}.syncmsg{font-size:11px}
