:root{--bg:#eef5fb;--panel:#ffffff;--ink:#102235;--muted:#6b7c8f;--line:#d9e5ef;--primary:#1167e8;--primary2:#11a9c9;--success:#10a36a;--warn:#b96a00;--danger:#d93838;--shadow:0 14px 34px rgba(18,54,88,.14);font-family:Inter,Arial,'Microsoft YaHei',sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0;background:linear-gradient(160deg,#dcecff 0,#f6fbff 42%,#e9f2f7 100%);min-height:100vh}body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 15% 0,rgba(17,103,232,.22),transparent 32%),radial-gradient(circle at 85% 12%,rgba(17,169,201,.18),transparent 28%);pointer-events:none}.app{position:relative;width:min(100vw,430px);min-height:100vh;margin:0 auto;padding:14px;background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(239,247,253,.92));backdrop-filter:blur(8px)}.brandline{position:relative;height:72px;margin:0 auto 14px}.brandmark{position:absolute;left:50%;top:0;transform:translateX(-50%);width:72px;height:72px;border-radius:24px;margin:0;display:grid;place-items:center;background:linear-gradient(135deg,#0d55c8,#11b7c7);color:#fff;font-weight:900;font-size:25px;letter-spacing:.5px;box-shadow:0 14px 28px rgba(17,103,232,.32)}.version-badge{position:absolute;left:calc(50% + 48px);top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;color:#195fb2;font-size:11px;font-weight:900;line-height:1.2;white-space:nowrap}.view{display:block;animation:fade .18s ease}.hidden{display:none!important}@keyframes fade{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}.card,.scanbox,.match,.qtyrow,.list .item{background:rgba(255,255,255,.92);border:1px solid rgba(210,226,239,.95);border-radius:22px;padding:15px;box-shadow:var(--shadow)}.hero{margin-top:30px;padding:28px 18px 22px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,250,255,.92));border-top:5px solid var(--primary)}h1,h2,h3{margin:8px 0 12px;letter-spacing:.2px}h1{font-size:25px;line-height:1.2}h2{font-size:22px}h3{font-size:17px}.muted,small{color:var(--muted)}.topbar,.header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.header{position:sticky;top:0;z-index:5;margin:-2px -2px 12px;padding:10px 2px;background:linear-gradient(180deg,rgba(248,252,255,.96),rgba(248,252,255,.78));backdrop-filter:blur(12px)}.topbar h2{margin-bottom:2px}.topbar small{display:inline-block;margin-top:2px;padding:3px 9px;border-radius:999px;background:#e8f2ff;color:#195fb2;font-weight:800}label{display:block;font-weight:900;margin:12px 0 7px;color:#24384d}input,select,button{width:100%;font-size:18px;border-radius:15px;border:1px solid #cbd9e7;padding:13px;background:#fff;outline:none;color:var(--ink)}input,select{box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(17,103,232,.13)}button{font-weight:900;background:#fff;margin:8px 0;transition:transform .08s ease,filter .12s ease,box-shadow .12s ease}button:active{transform:scale(.985)}button:disabled{opacity:.48;filter:grayscale(.2);box-shadow:none}.primary{background:linear-gradient(135deg,#0f63df,#0a91ff);color:#fff;border-color:#0f63df;box-shadow:0 10px 20px rgba(17,103,232,.25)}.success{background:linear-gradient(135deg,#0b8f5b,#18c68a);color:#fff;border-color:#0b8f5b;box-shadow:0 10px 20px rgba(16,163,106,.22)}.secondary{background:linear-gradient(180deg,#f4f8fc,#e8f0f8);color:#31506d;border-color:#c8d7e6}.danger-btn{background:linear-gradient(135deg,#d93838,#ff7676);color:#fff;border-color:#d93838}.ghost{width:auto;font-size:15px;padding:8px 12px;margin:0;background:#edf4fb;border-color:#d4e0eb;color:#2f526f}.collabbar{display:block;margin:0 0 7px;padding:7px 8px;border-radius:15px;background:linear-gradient(135deg,#e8f2ff 0%,#f3fbff 48%,#e9fff6 100%);border:1px solid #cfe0ef;color:#17415f;font-size:11px;font-weight:900;box-shadow:0 7px 16px rgba(18,54,88,.08)}.collab-row{display:grid;gap:5px}.collab-row.top{grid-template-columns:1fr 1fr 1.45fr;margin-bottom:5px}.collab-row.bottom{grid-template-columns:repeat(4,1fr)}.collabbar span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 5px;border-radius:10px;background:rgba(255,255,255,.62);border:1px solid rgba(207,224,239,.78);text-align:center}.collabbar b{font-size:14px;color:#0f63df}.collabbar .gainstat{background:#e6fff3;color:#087a49;border-color:#b7f1d4}.collabbar .gainstat b{color:#087a49}.collabbar .lossstat{background:#ffe9e9;color:#d93838;border-color:#ffc6c6}.collabbar .lossstat b{color:#d93838}.collabbar .samestat{background:#edf7ff;color:#1260c7;border-color:#c9e5ff}.collabbar .samestat b{color:#1260c7}.collabbar .warnstat{background:#fff3df;color:#b96a00;border-color:#ffd9a6}.collabbar .warnstat b{color:#b96a00}.collabbar small{display:block;color:#b96a00;font-weight:800;font-size:10px;line-height:1.1;min-height:0;text-align:center}.collabbar small:empty{display:none}.collabbar.offline{background:#fff3df;border-color:#ffd9a6}.collabbar.offline b{color:#b96a00}.scanbox{display:grid;grid-template-columns:1fr 78px 78px;gap:8px;margin-bottom:12px;align-items:center;border-left:5px solid var(--primary)}.myscanbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:15px;background:linear-gradient(135deg,#0f63df,#11a9c9);color:#fff;font-size:13px;font-weight:900;box-shadow:0 10px 22px rgba(17,103,232,.22)}.myscanbar span{display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center}.myscanbar b{font-size:22px;color:#fff;line-height:1.1}.pager{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin:12px 0 4px}.pager.hidden{display:none!important}.pager button{width:auto;margin:0;padding:9px 14px;font-size:15px}.pager-info{text-align:center;font-size:13px;font-weight:900;color:#31506d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scanbox button{margin:0;height:100%;padding-left:8px;padding-right:8px}.qtyrow{display:grid;grid-template-columns:1fr 98px;gap:10px;align-items:end;border-left:5px solid var(--success)}.qtyrow button{margin:0 0 6px}.msg{min-height:22px;color:var(--danger);font-size:14px;margin-top:7px;font-weight:700}.ok{color:var(--success)}.match{font-size:14px;line-height:1.58;margin-bottom:12px;border-left:5px solid var(--primary2);background:linear-gradient(180deg,#fff,#f5fbff)}.list{display:flex;flex-direction:column;gap:10px}.item{position:relative;font-size:14px;overflow:hidden}.item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--primary),var(--primary2))}.item:active{transform:scale(.99)}.item b{font-size:16px;color:#13263a}.row{display:flex;justify-content:space-between;gap:8px;align-items:center}.pill{display:inline-block;border-radius:999px;padding:4px 10px;background:#e7f1ff;color:#1260c7;font-size:12px;font-weight:900;white-space:nowrap}.warn{background:#fff3df;color:var(--warn)}.danger{background:#ffe9e9;color:var(--danger)}.gain{background:#e6fff3;color:#087a49}.dialogform{min-width:286px;padding:17px;background:#fff;border-radius:18px}.modegrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.modegrid label,.checkrow{display:flex;align-items:center;gap:7px;margin:0;background:linear-gradient(180deg,#f8fbff,#edf4fb);border:1px solid #d8e3ef;border-radius:15px;padding:12px;font-size:15px}.modegrid input,.checkrow input{width:auto}.checkrow{justify-content:flex-start;margin:8px 0}.summary{margin:10px 0}.sumcard{background:linear-gradient(135deg,#102235,#1c5f95 62%,#0aa2b7);color:#fff;border-radius:22px;padding:15px;font-size:14px;line-height:1.7;box-shadow:0 16px 32px rgba(16,34,53,.24)}.sumcard small{color:#d7ebfb}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:11px 0}.metrics span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:8px 6px;text-align:center}.metrics b{font-size:19px;color:#fff}.scan-gain{background:#f0fff6!important}.scan-gain:before{background:linear-gradient(180deg,#0b8f5b,#18c68a)!important}.scan-loss{background:#fff1f1!important}.scan-loss:before{background:linear-gradient(180deg,#d93838,#ff7676)!important}.scan-none{background:#fff8e8!important}.scan-none:before{background:linear-gradient(180deg,#b96a00,#ffc45c)!important}.reportitem{border-left:0}.reportitem:before{background:linear-gradient(180deg,#6c8aa8,#9eb7d4)}.action-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.mini-btn{font-size:14px!important;padding:8px 10px!important;border-radius:11px!important;margin:6px 0!important;box-shadow:none!important}.action-row .mini-btn{margin:0!important}dialog{border:0;border-radius:20px;padding:0;box-shadow:0 24px 80px rgba(0,0,0,.3)}.chartcard .chartitem{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:13px}.chartlabel{min-width:110px;text-align:right;color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chartbarwrap{flex:1;height:20px;background:#edf4fb;border-radius:10px;overflow:hidden}.chartbar{height:100%;border-radius:10px;min-width:4px;transition:width .4s ease}.chartbar.gain{background:linear-gradient(90deg,#0b8f5b,#18c68a)}.chartbar.danger{background:linear-gradient(90deg,#d93838,#ff7676)}.chartnum{font-size:13px;min-width:52px;text-align:left}.gainpill{color:#087a49}.dangerpill{color:var(--danger)}dialog::backdrop{background:rgba(9,22,38,.42);backdrop-filter:blur(2px)}menu{display:flex;gap:8px;padding:0;margin:13px 0 0}menu button{margin:0}.fullwidth{margin: -6px 0 12px}
#scannerDialog{width: min(94vw, 420px);max-height: 90vh;overflow: hidden}
.scanner-container{width: 100%}
.scanner-header{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 0}
.scanner-header h3{margin:0}
.scanner-header button{width:auto}
.video-wrapper{position:relative;width:100%;aspect-ratio:4/3;background:#000;margin-top:10px;overflow:hidden}
#scannerVideo{width:100%;height:100%;object-fit:cover}
.scan-overlay{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.scan-frame{width:70%;aspect-ratio:2.5/1;border:3px solid #0f63df;border-radius:12px;box-shadow:0 0 0 1000px rgba(0,0,0,.42),0 0 30px rgba(15,99,223,.6)}
.scanner-controls{padding:12px 14px 14px;text-align:center}
#scannerStatus{margin:0 0 10px;font-weight:700;color:#13263a}
#scannerStatus.success{color:#0b8f5b}
#scannerStatus.error{color:#d93838}
@media(max-width:360px){.app{padding:9px}input,select,button{font-size:16px;padding:11px}.scanbox{grid-template-columns:1fr 66px 66px}.modegrid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}h1{font-size:22px}}