:root{color-scheme:dark;--bg:#0b1020;--panel:#131b2e;--panel2:#10192a;--text:#f3f6ff;--muted:#8492aa;--line:#263149;--mint:#65f4c1;--mint-deep:#0f4c41;--blue:#5274ff;--danger:#ff738a;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-synthesis:none;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 50% -180px,#1a2c4f 0%,transparent 54%),var(--bg);color:var(--text)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}.shell{width:min(100%,510px);margin:0 auto;padding:0 18px 24px}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07)}.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:16px;font-weight:850;letter-spacing:.7px;color:var(--text)}.brand-accent{color:var(--mint)}.brand-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:rgba(101,244,193,.13);color:var(--mint)}.brand-icon svg{width:22px}.top-right{font-size:10px;color:#b5c3d5;display:flex;align-items:center;gap:7px;white-space:nowrap}.privacy-dot,.saved-dot{display:inline-block;background:var(--mint);width:6px;height:6px;border-radius:50%;box-shadow:0 0 10px rgba(101,244,193,.45)}.hero{padding:25px 0 19px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2.25px;color:var(--mint);margin-bottom:8px}h1{font-size:clamp(27px,7vw,34px);letter-spacing:-1.4px;line-height:1.15;margin:0;font-weight:820}.title-dot{color:var(--mint)}.subtitle{margin:9px 0 0;color:#abb7ca;font-size:12.5px;line-height:1.5}.camera-card{border:1px solid var(--line);background:var(--panel);overflow:hidden;border-radius:21px;box-shadow:0 10px 45px rgba(0,0,0,.14)}.camera-top{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}.status{display:flex;align-items:center;gap:8px;max-width:78%;font-size:11.5px;font-weight:650;color:#ccd6e7}.status span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-indicator{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:#facf72;box-shadow:0 0 0 3px rgba(250,207,114,.12)}.status-indicator.ready{background:var(--mint);box-shadow:0 0 0 3px rgba(101,244,193,.14)}.status-indicator.error{background:var(--danger);box-shadow:0 0 0 3px rgba(255,115,138,.14)}.camera-label{display:flex;align-items:center;gap:6px;color:#b3bcd1;font-weight:700;letter-spacing:1.15px;font-size:9px}.lens-dot{width:5px;height:5px;background:#ff747f;border-radius:100%}.camera-stage{height:clamp(315px,48dvh,475px);position:relative;background:#060b15;overflow:hidden;isolation:isolate}.camera-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.camera-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:18px;text-align:center;color:#c9d4e7;background:radial-gradient(circle at center,#1b2945,#070d17 80%)}.camera-placeholder[hidden]{display:none}.placeholder-art{width:70px;height:70px;display:grid;place-items:center;border-radius:20px;background:rgba(101,244,193,.09);color:var(--mint);margin-bottom:20px}.placeholder-art svg{width:43px}.camera-placeholder strong{font-size:17px}.camera-placeholder p{font-size:12px;line-height:1.6;color:#9eabc1;max-width:280px}.retry-camera{background:var(--mint);border:0;border-radius:11px;color:#061b19;padding:11px 18px;font-weight:800;margin-top:13px}.scan-frame{position:absolute;left:8%;top:36%;width:84%;height:23%;border:1px solid rgba(101,244,193,.74);border-radius:13px;box-shadow:0 0 0 9999px rgba(5,11,23,.54),0 0 26px rgba(101,244,193,.06) inset;z-index:3;touch-action:none;cursor:move;user-select:none;-webkit-user-select:none}.scan-frame:after{position:absolute;content:"";inset:8px;border:1px dashed rgba(101,244,193,.16);border-radius:6px;pointer-events:none}.frame-corner{position:absolute;width:22px;height:22px;border-color:var(--mint);border-style:solid;pointer-events:none}.frame-corner.top-left{top:-2px;left:-2px;border-width:3px 0 0 3px;border-radius:10px 0 0 0}.frame-corner.top-right{top:-2px;right:-2px;border-width:3px 3px 0 0;border-radius:0 10px 0 0}.frame-corner.bottom-left{bottom:-2px;left:-2px;border-width:0 0 3px 3px;border-radius:0 0 0 10px}.frame-corner.bottom-right{bottom:-2px;right:-2px;border-width:0 3px 3px 0;border-radius:0 0 10px 0}.frame-center-label{position:absolute;top:-29px;left:50%;transform:translateX(-50%);background:#bffbe8;color:#08372b;font-weight:800;font-size:9px;letter-spacing:1.15px;padding:6px 11px;border-radius:7px;white-space:nowrap;pointer-events:none}.target-icon{font-size:14px;line-height:0;vertical-align:-1px;margin-right:3px}.scan-line{position:absolute;left:8%;right:8%;top:10%;height:2px;opacity:.6;background:linear-gradient(to right,transparent,var(--mint),transparent);box-shadow:0 0 15px var(--mint);animation:sweep 2.7s ease-in-out infinite alternate;pointer-events:none}@keyframes sweep{to{top:88%}}.handle{position:absolute;width:29px;height:29px;z-index:4;touch-action:none}.handle-n{top:-14px;left:calc(50% - 14px);cursor:ns-resize}.handle-s{bottom:-14px;left:calc(50% - 14px);cursor:ns-resize}.handle-e{right:-14px;top:calc(50% - 14px);cursor:ew-resize}.handle-w{left:-14px;top:calc(50% - 14px);cursor:ew-resize}.handle-ne{right:-13px;top:-13px;cursor:nesw-resize}.handle-se{right:-13px;bottom:-13px;cursor:nwse-resize}.handle-sw{left:-13px;bottom:-13px;cursor:nesw-resize}.handle-nw{left:-13px;top:-13px;cursor:nwse-resize}.scan-feedback{pointer-events:none;position:absolute;z-index:5;bottom:18px;left:50%;transform:translate(-50%,12px);width:max-content;max-width:90%;padding:9px 13px;border-radius:10px;color:#09251f;background:var(--mint);font-size:11.5px;font-weight:800;opacity:0;transition:opacity .18s,transform .18s;text-align:center}.scan-feedback.visible{opacity:1;transform:translate(-50%,0)}.scan-feedback.duplicate{color:#2a2212;background:#f7d588}.camera-bottom{display:flex;align-items:center;justify-content:space-between;min-height:49px;padding:9px 14px;color:var(--muted)}.frame-hint{font-size:10.5px;line-height:1.4;display:flex;align-items:center;gap:8px}.frame-hint svg{width:18px;height:18px;flex-shrink:0;color:#8fa0b8}.icon-button{width:34px;height:34px;border-radius:10px;border:1px solid #3b4962;background:#1c2840;display:grid;place-items:center;color:#b1c4df}.icon-button[hidden]{display:none}.icon-button svg{width:19px;height:19px}.icon-button.active{background:rgba(101,244,193,.2);color:var(--mint);border-color:var(--mint)}.results-card{margin-top:17px;border:1px solid var(--line);background:var(--panel);border-radius:20px;overflow:hidden}.results-header{display:flex;align-items:center;justify-content:space-between;padding:18px 15px 14px;gap:8px}.results-title{display:flex;align-items:center;gap:9px;min-width:0}.results-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#202d48;color:#c0d1ee;flex-shrink:0}.results-icon svg{width:17px}.results-title h2{font-size:14px;font-weight:750;white-space:nowrap;margin:0}.counter{font-size:11px;padding:4px 7px;border-radius:7px;background:#263650;color:#b7c5dd;font-weight:700;min-width:24px;text-align:center}.send-btn{display:flex;gap:6px;align-items:center;border:1px solid #34455f;border-radius:9px;padding:7px 9px;font-size:10.5px;font-weight:700;color:#d2def0;background:#1d2a42;white-space:nowrap}.send-btn svg{width:15px;height:15px}.results-scroll{max-height:260px;min-height:125px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#475a74 transparent}.empty-state{min-height:139px;padding:12px 20px 23px;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center}.empty-state[hidden]{display:none}.empty-icon{font-size:21px;width:48px;height:48px;border:1px dashed #3c516a;border-radius:50%;display:grid;place-items:center;color:#8097af;margin-bottom:10px}.empty-state strong{color:#c9d3e3;font-size:12px}.empty-state p{max-width:260px;margin:7px 0 0;color:#7888a2;font-size:10.5px;line-height:1.6}.numbers-list{padding:0 13px 10px;margin:0;list-style:none}.number-row{border:1px solid #2d3c55;background:#172238;border-radius:12px;display:flex;align-items:center;gap:10px;padding:11px 9px 11px 12px;margin-bottom:8px;animation:enter .2s ease-out}@keyframes enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.row-index{font-size:11px;color:var(--mint);font-weight:750;min-width:20px}.number-body{flex:1;min-width:0}.number-main{font-size:14px;letter-spacing:.25px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}.number-time{font-size:10px;color:var(--muted);margin-top:5px}.row-actions{display:flex;align-items:center;gap:4px}.row-action{width:32px;height:32px;border:0;border-radius:9px;background:#273750;color:#a9bbd3;display:grid;place-items:center}.row-action:active{background:#39506f}.row-action.delete{color:#ed8996}.row-action svg{width:16px;height:16px}.results-footer{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:12px 15px;border-top:1px solid var(--line)}.results-footer>span{color:#8294ad;font-size:9.5px;display:flex;gap:7px;align-items:center}.text-button{background:none;border:0;padding:5px 0;color:var(--mint);font-size:10.5px;font-weight:800;white-space:nowrap}.footnote{text-align:center;font-size:10px;color:#5d6e88;line-height:1.5;max-width:390px;margin:17px auto 0}.toast{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 25px);left:50%;transform:translate(-50%,16px);max-width:min(400px,calc(100% - 30px));background:#caffeb;color:#063729;box-shadow:0 15px 50px #0007;padding:12px 17px;border-radius:12px;z-index:30;font-size:12px;font-weight:750;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s}.toast.visible{opacity:1;transform:translate(-50%,0)}.modal-backdrop{position:fixed;inset:0;background:#050a13cf;z-index:50;display:grid;place-items:center;padding:18px}.modal-backdrop[hidden]{display:none}.modal{width:min(100%,400px);border:1px solid #34435f;background:#19253a;box-shadow:0 20px 70px #0008;border-radius:20px;padding:22px}.modal-head{display:flex;align-items:center;justify-content:space-between}.modal h2{margin:0;font-size:19px;letter-spacing:-.3px}.modal-close{background:transparent;border:0;color:#b5c6df;font-size:27px;line-height:1}.modal-help{font-size:12px;color:#9cabc2;line-height:1.6}.input-label{font-size:11px;color:#d0dff0;font-weight:700;display:block;margin:20px 0 7px}.modal input{width:100%;padding:13px 12px;color:var(--text);background:#0f182a;outline:0;border:1px solid #394965;border-radius:10px;font-size:17px}.modal input:focus{border-color:var(--mint)}.form-error{min-height:22px;color:#ff94a2;font-size:11px;padding:5px 0}.modal-actions{display:flex;gap:9px;margin-top:14px}.secondary-button,.primary-button{flex:1;padding:12px;border:0;border-radius:10px;font-size:13px;font-weight:800}.secondary-button{background:#303f59;color:#d9e5f8}.primary-button{background:var(--mint);color:#0b2d22}@media(max-width:365px){.shell{padding-left:11px;padding-right:11px}.top-right{font-size:9px}.results-title h2{font-size:12.5px}.send-btn{padding:7px 8px;font-size:9.5px}.number-main{font-size:12.2px}.row-action{width:30px;height:30px}.results-footer>span{font-size:8px}}@media(min-width:700px){.shell{padding-top:16px}.camera-stage{height:450px}}@media(prefers-reduced-motion:reduce){.scan-line{animation:none}*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}


/* === v2 blue-white-black refresh === */
:root{
  color-scheme: dark;
  --bg:#06090f;
  --panel:#0d131d;
  --panel2:#121b28;
  --text:#f4f9ff;
  --muted:#8da3ba;
  --line:#25364d;
  --mint:#66c7ff;
  --mint-deep:#0e2f49;
  --blue:#8ddcff;
  --danger:#ff7f9e;
}
body{
  background:
    radial-gradient(circle at 50% -10%, rgba(102,199,255,.24) 0%, rgba(102,199,255,0) 38%),
    linear-gradient(180deg, #08111a 0%, #04070c 100%);
  color:var(--text);
}
.shell{width:min(100%,540px)}
.topbar{border-bottom:1px solid rgba(141,220,255,.12)}
.brand-accent,.eyebrow,.text-button,.row-index{color:var(--mint)}
.brand-icon{
  background:linear-gradient(180deg, rgba(102,199,255,.22), rgba(102,199,255,.08));
  color:#dff6ff;
  box-shadow:inset 0 0 0 1px rgba(141,220,255,.2);
}
.privacy-dot,.saved-dot{background:var(--mint);box-shadow:0 0 14px rgba(102,199,255,.55)}
.subtitle{color:#c2d2e4}
.camera-card,.results-card{
  background:linear-gradient(180deg, rgba(13,19,29,.98), rgba(8,12,19,.98));
  border:1px solid rgba(110,156,205,.22);
  box-shadow:0 22px 50px rgba(0,0,0,.33), inset 0 1px 0 rgba(255,255,255,.04);
}
.camera-top,.results-header,.results-footer{background:rgba(255,255,255,.015)}
.status{color:#dce8f6}
.status-indicator{background:#ffd166;box-shadow:0 0 0 3px rgba(255,209,102,.12)}
.status-indicator.ready{background:#7ce0ff;box-shadow:0 0 0 3px rgba(124,224,255,.14)}
.camera-label{color:#d4e7f7}
.lens-dot{background:#7ce0ff;box-shadow:0 0 10px rgba(124,224,255,.9)}
.camera-stage{
  background:linear-gradient(180deg,#03070d,#090f18 55%,#04080d 100%);
}
.camera-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(114,199,255,.08), rgba(0,0,0,0) 45%);
  pointer-events:none;
  z-index:1;
}
.camera-stage video,.camera-placeholder,.scan-frame,.scan-feedback{z-index:2}
.camera-placeholder{background:radial-gradient(circle at center, #16263a, #070d17 72%)}
.placeholder-art{background:rgba(102,199,255,.12); color:#9fe1ff}
.retry-camera,.primary-button{
  background:linear-gradient(180deg,#bfeeff,#6ccfff);
  color:#082136;
  font-weight:800;
  box-shadow:0 10px 25px rgba(102,199,255,.22);
}
.secondary-button{background:#121b27;color:#eaf6ff;border:1px solid rgba(141,220,255,.22)}
.scan-frame{
  border:1px solid rgba(141,220,255,.88);
  border-radius:18px;
  box-shadow:0 0 0 9999px rgba(2,5,10,.58), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 28px rgba(102,199,255,.16);
  cursor:default;
}
.scan-frame::after{border:1px dashed rgba(141,220,255,.22); border-radius:10px}
.frame-corner{border-color:#9fe1ff; filter:drop-shadow(0 0 8px rgba(102,199,255,.42))}
.frame-center-label{
  top:-35px;
  background:linear-gradient(180deg,#e4f7ff,#9fdfff);
  color:#0b2942;
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 8px 24px rgba(102,199,255,.28);
}
.scan-line{background:linear-gradient(to right, transparent, #9fe1ff, transparent); box-shadow:0 0 18px rgba(159,225,255,.95)}
.handle{
  width:30px; height:30px;
}
.handle::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:999px;
  background:#e9f7ff;
  border:2px solid rgba(102,199,255,.95);
  box-shadow:0 0 0 4px rgba(102,199,255,.18);
}
.scan-feedback{background:#dbf5ff;color:#0d3958}
.scan-feedback.duplicate{background:#fff0bf;color:#3e3212}
.frame-hint{color:#abc0d4}
.frame-hint svg{color:#8ddcff}
.icon-button{border:1px solid rgba(141,220,255,.18);background:#121d2b;color:#d7e9fa}
.icon-button.active{background:rgba(102,199,255,.2);color:#9fe1ff;border-color:#73cffd}
.results-icon{background:linear-gradient(180deg,#18283b,#101926); color:#bfeaff; box-shadow:inset 0 0 0 1px rgba(141,220,255,.14)}
.counter{background:#172434;color:#dff4ff}
.send-btn{border:0;background:linear-gradient(180deg,#bfeeff,#6ccfff);color:#082136;font-weight:800;box-shadow:0 10px 25px rgba(102,199,255,.22)}
.send-btn:disabled{opacity:.4;box-shadow:none;cursor:default}
.send-btn.busy:disabled{opacity:.85}
.empty-icon{border:1px dashed rgba(141,220,255,.26);color:#8eb3cc}
.number-row{border:1px solid rgba(141,220,255,.14);background:linear-gradient(180deg,#111b28,#0d151f)}
.number-main{color:#f6fbff}
.number-time,.results-footer>span,.footnote{color:#8ea5bb}
.row-action{background:#172636;color:#cfe2f7}
.row-action.delete{color:#ff99ae}
.toast{background:#e6f7ff;color:#0b3854}
.modal-backdrop{background:rgba(1,4,8,.72)}
.modal{background:linear-gradient(180deg,#0f1722,#0a1017); border:1px solid rgba(141,220,255,.18)}
.input-label,.modal-help{color:#acc0d6}
#numberInput{background:#0a121b;color:#f2f9ff;border:1px solid rgba(141,220,255,.22);border-radius:12px;padding:13px 14px;width:100%}
#numberInput:focus{outline:none;border-color:#8ddcff;box-shadow:0 0 0 4px rgba(141,220,255,.12)}
.form-error{min-height:18px;color:#ff94aa;font-size:12px;margin-top:8px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.primary-button,.secondary-button,.send-btn,.row-action,.retry-camera,.icon-button,.text-button,.modal-close{transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease}
.primary-button:active,.secondary-button:active,.send-btn:active,.row-action:active,.retry-camera:active,.icon-button:active{transform:translateY(1px) scale(.99)}
@media (max-width:420px){
  .scan-frame{border-radius:16px}
  .frame-center-label{font-size:8px;padding:5px 9px;top:-31px}
}