
:root{--red:#b5121b;--red2:#8f0e15;--bg:#f3f4f6;--card:#fff;--text:#18181b;--muted:#6b7280;--green:#16803b;--amber:#b45309;--line:#e5e7eb;--shadow:0 6px 24px rgba(0,0,0,.08);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;min-height:100%;background:var(--bg)} body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)} button,input,select,textarea{font:inherit} button{cursor:pointer}
.appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .appbar h1{font-size:20px;margin:0;flex:1}.appbar .sub{font-size:12px;color:var(--muted)}
.container{max-width:760px;margin:0 auto;padding:14px 14px 96px}.card{background:var(--card);border:1px solid #e8e8ea;border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,.04);padding:16px;margin-bottom:12px}.card h2,.card h3{margin:0 0 12px}.muted{color:var(--muted);font-size:13px}.small{font-size:12px}.row{display:flex;gap:10px;align-items:center}.row.wrap{flex-wrap:wrap}.grow{flex:1}.stack{display:flex;flex-direction:column;gap:10px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}@media(min-width:620px){.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.btn{border:0;border-radius:12px;padding:12px 14px;font-weight:700;background:#eceef1;color:#222;min-height:46px}.btn:active{transform:scale(.99)}.btn.primary{background:var(--red);color:white}.btn.primary:hover{background:var(--red2)}.btn.success{background:#e7f7ec;color:var(--green)}.btn.danger{background:#fdebec;color:#a20f18}.btn.outline{background:white;border:1px solid #d1d5db}.btn.block{width:100%}.btn.icon{padding:10px;min-width:44px}.btn:disabled{opacity:.45;cursor:not-allowed}
label.lbl{display:block;font-size:12px;font-weight:700;color:#4b5563;margin:0 0 6px}.input,select,textarea{width:100%;border:1px solid #cfd3d8;border-radius:12px;background:white;padding:12px;min-height:46px}.input:focus,select:focus,textarea:focus{outline:2px solid rgba(181,18,27,.18);border-color:var(--red)}textarea{min-height:100px;resize:vertical}
.hero{text-align:center;padding:28px 18px}.hero .mark{width:74px;height:74px;border-radius:20px;background:var(--red);color:#fff;display:grid;place-items:center;margin:0 auto 14px;font-size:25px;font-weight:900;letter-spacing:1px}.hero h1{margin:0 0 6px}.hero p{margin:0;color:var(--muted)}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800;background:#eef0f3;color:#4b5563}.badge.ok{background:#e7f7ec;color:var(--green)}.badge.bad{background:#fdebec;color:#a20f18}.badge.warn{background:#fff4df;color:var(--amber)}
.linebtn{position:relative;text-align:left;padding:14px;border-radius:14px;border:1px solid #dfe2e6;background:#fff;min-height:86px}.linebtn strong{font-size:18px}.linebtn.complete{border-color:#afd9ba;background:#f3fbf5}.linebtn .progress{margin-top:10px;height:6px;border-radius:999px;background:#e9eaec;overflow:hidden}.linebtn .progress>i{display:block;height:100%;background:var(--red)}
.device{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid #eee}.device:last-child{border-bottom:0}.device .state-dot{width:12px;height:12px;border-radius:50%;background:#d1d5db;flex:0 0 auto}.device .state-dot.ok{background:#2aa150}.device .state-dot.bad{background:#d3222c}.device .name{font-weight:650;flex:1}.device .meta{font-size:12px;color:var(--muted);margin-top:2px}.device button{border:0;background:transparent;text-align:left;width:100%;padding:0;color:inherit}
.tabs{display:flex;gap:6px;padding:4px;background:#eceef1;border-radius:12px;margin-bottom:12px}.tabs button{flex:1;border:0;border-radius:9px;padding:9px 6px;font-weight:700;background:transparent;color:#555}.tabs button.active{background:white;box-shadow:0 1px 4px rgba(0,0,0,.10);color:#111}
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.44);display:flex;align-items:flex-end;justify-content:center}.modal{width:min(760px,100%);max-height:94vh;overflow:auto;background:var(--bg);border-radius:22px 22px 0 0;padding:0 0 calc(12px + env(safe-area-inset-bottom));box-shadow:0 -10px 35px rgba(0,0,0,.22)}.modal .modal-head{position:sticky;top:0;z-index:2;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);padding:12px 14px;display:flex;align-items:center;gap:10px}.modal .modal-head h2{font-size:18px;margin:0;flex:1}.modal .modal-body{padding:14px}.close{border:0;background:#eceef1;border-radius:999px;width:36px;height:36px;font-size:18px}
.state-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px}.state-choice{padding:18px 8px;border:2px solid transparent;border-radius:14px;background:white;font-weight:800}.state-choice.ok{color:var(--green);background:#edf9f0}.state-choice.bad{color:#a20f18;background:#fff0f1}.state-choice.selected{border-color:currentColor}.photos{display:flex;gap:8px;overflow:auto;padding-bottom:4px}.photo{position:relative;flex:0 0 92px;width:92px;height:92px;border-radius:12px;overflow:hidden;background:#ddd}.photo img{width:100%;height:100%;object-fit:cover}.photo button{position:absolute;right:3px;top:3px;width:26px;height:26px;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:white}
.scanner{position:relative;background:#111;border-radius:16px;overflow:hidden;min-height:280px}.scanner video{width:100%;display:block;max-height:65vh;object-fit:cover}.scan-frame{position:absolute;left:14%;right:14%;top:22%;bottom:22%;border:3px solid #fff;border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.25)}
.summary-table{width:100%;border-collapse:collapse;font-size:13px}.summary-table th,.summary-table td{padding:9px 6px;border-bottom:1px solid #eee;text-align:left}.summary-table th{color:#555}.unsent{border-left:4px solid var(--amber)}
.footer-actions{position:fixed;z-index:15;left:0;right:0;bottom:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);border-top:1px solid var(--line);backdrop-filter:blur(10px)}.footer-actions>div{max-width:760px;margin:auto;display:flex;gap:10px}.footer-actions .btn{flex:1}
.toast{position:fixed;z-index:200;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#1f2937;color:#fff;border-radius:12px;padding:11px 14px;max-width:90%;box-shadow:var(--shadow);font-weight:650;text-align:center}.splash{min-height:100vh;display:grid;place-content:center;text-align:center;gap:12px;color:#555}.splash .logo{width:72px;height:72px;background:var(--red);color:white;border-radius:20px;display:grid;place-items:center;font-size:24px;font-weight:900;margin:auto}.install-hint{background:#fff7e7;border:1px solid #f0d39b}.sep{height:1px;background:#e5e7eb;margin:12px 0}.danger-text{color:#a20f18}.ok-text{color:var(--green)}
