.camera-capture{margin-bottom:.3rem}.camera-container{position:relative;background:#050607;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 26px 50px #00000073}.camera-top-bar{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.7rem;background:linear-gradient(180deg,#06080cd1,#06080c00)}.camera-top-bar p{color:#d3deea;font-size:.82rem;line-height:1.25}.camera-video{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}.camera-grid{pointer-events:none;position:absolute;inset:0;background-image:linear-gradient(to right,rgba(88,212,255,.18) 1px,transparent 1px),linear-gradient(to bottom,rgba(88,212,255,.18) 1px,transparent 1px);background-size:26px 26px;opacity:.32}.camera-controls{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;flex-direction:column;gap:.42rem;padding:.9rem;background:linear-gradient(0deg,#030406eb,#03040600)}.camera-placeholder{background:linear-gradient(180deg,#ffffff08,#ffffff03);border-radius:16px;padding:2rem 1rem;text-align:center;border:1px dashed rgba(255,255,255,.25)}.placeholder-icon{width:76px;height:76px;margin:0 auto 1rem;border-radius:50%;border:2px solid rgba(88,212,255,.5);box-shadow:inset 0 0 0 12px #58d4ff14}.camera-placeholder h3{font-size:1.2rem;margin-bottom:.45rem}.camera-helper{color:var(--text-dim);margin-bottom:1rem;font-size:.95rem}.btn{padding:.75rem 1.2rem;border:1px solid transparent;border-radius:12px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .22s ease;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn-primary{background:linear-gradient(125deg,#58d4ff,#44c0ec);color:#061018;width:100%;margin-bottom:.65rem;justify-content:center;border-color:#ffffff59}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 24px #58d4ff52}.btn-secondary{background:#ffffff14;color:var(--text-main);justify-content:center}.btn-secondary:hover:not(:disabled){background:#ffffff29;transform:translateY(-1px)}.btn-snap{border:none;background:transparent;width:84px;height:84px;padding:0;border-radius:50%;display:grid;place-items:center}.btn-snap:hover:not(:disabled){transform:scale(1.03)}.snap-ring{width:72px;height:72px;border-radius:50%;border:3px solid rgba(255,255,255,.85);position:absolute}.snap-dot{width:54px;height:54px;border-radius:50%;background:linear-gradient(160deg,#ffbc58,#ff9d38);box-shadow:0 8px 24px #ff9c3866}.snap-caption{font-weight:600;font-size:.88rem;color:#e4ecf7;letter-spacing:.02em}@media (max-width: 600px){.camera-placeholder{padding:1.6rem .85rem}.camera-top-bar p{font-size:.74rem}.btn-snap{width:76px;height:76px}.snap-ring{width:66px;height:66px}.snap-dot{width:48px;height:48px}}.modal-backdrop{position:fixed;inset:0;background:#090b0fc7;backdrop-filter:blur(7px);display:grid;place-items:center;padding:1rem;z-index:50;animation:modal-fade .18s ease}@keyframes modal-fade{0%{opacity:0}to{opacity:1}}.reading-modal{width:min(100%,560px);max-height:92vh;overflow-y:auto;background:linear-gradient(180deg,#18202a,#131920);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 24px 60px #00000080;color:var(--text-main)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:.95rem 1rem;border-bottom:1px solid rgba(255,255,255,.08)}.modal-header h3{font-size:1rem}.modal-close{border:none;width:32px;height:32px;border-radius:10px;background:#ffffff14;color:var(--text-main);cursor:pointer}.modal-close:hover{background:#ffffff29}.capture-preview{width:100%;max-height:260px;object-fit:cover;border-bottom:1px solid rgba(255,255,255,.08)}.preview-wrap{position:relative}.scan-line{position:absolute;left:6%;right:6%;top:8%;height:2px;background:linear-gradient(90deg,transparent 0%,#58d4ff 35%,#58d4ff 65%,transparent 100%);box-shadow:0 0 12px #58d4ffe6;animation:scan-sweep 1.3s ease-in-out infinite}.scan-mask{position:absolute;inset:0;background:linear-gradient(180deg,#58d4ff0f,#58d4ff03,#58d4ff14 70%,#58d4ff05);pointer-events:none}@keyframes scan-sweep{0%{top:8%}50%{top:58%}to{top:8%}}.modal-state,.modal-content{padding:1rem}.modal-state.loading,.modal-state.error{display:grid;gap:.5rem}.modal-state.error h4{color:#ffd2d2}.modal-state.error p{color:#ffbcbc}.spinner{width:34px;height:34px;border:3px solid rgba(88,212,255,.2);border-top:3px solid var(--accent-cyan);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.reading-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.reading-panel{border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#ffffff08;padding:.9rem}.reading-label{font-size:.73rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.45rem}.reading-number{font-size:1.5rem;line-height:1.1;font-weight:700;font-family:JetBrains Mono,Consolas,monospace}.reading-confidence{margin-top:.5rem;font-size:.82rem;color:#b1f3d0}.raw-text-box{margin-top:.9rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#ffffff08;padding:.8rem}.raw-text-box p{color:#dbe6f1;word-break:break-word}@media (max-width: 600px){.reading-modal{border-radius:14px}.reading-grid{grid-template-columns:1fr}}.app{display:flex;flex-direction:column;min-height:100vh;color:var(--text-main)}.app-header{padding:2.4rem 1rem 1rem;text-align:center}.app-kicker{letter-spacing:.2em;font-size:.72rem;color:var(--accent-amber);margin-bottom:.6rem}.app-header h1{font-size:clamp(1.8rem,4vw,2.7rem);margin-bottom:.45rem;font-weight:700;line-height:1.1;text-wrap:balance}.app-header p{color:var(--text-dim);max-width:560px;margin:0 auto}.status-badge{display:inline-block;margin-top:1rem;padding:.45rem .9rem;border-radius:999px;font-size:.82rem;font-weight:600;background:#58d4ff1f;border:1px solid rgba(88,212,255,.35);color:var(--accent-cyan)}.status-badge.healthy{background:#58d89a21;border-color:#58d89a66;color:var(--accent-green)}.status-badge.offline{background:#ff6b6b26;border-color:#ff6b6b6b;color:var(--accent-red)}.app-main{flex:1;padding:1.4rem 1rem 2rem;max-width:720px;margin:0 auto;width:100%}.scan-card{border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#ffffff08,#ffffff03);border-radius:22px;padding:1.1rem;box-shadow:0 20px 45px #00000059}.scan-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}.scan-header h2{font-size:1.12rem;letter-spacing:.02em}.btn-reset{padding:.56rem .95rem;background:#58d4ff1a;color:var(--accent-cyan);border:none;border-radius:12px;font-size:.86rem;font-weight:600;cursor:pointer;transition:all .22s ease}.btn-reset:hover{transform:translateY(-1px);background:#58d4ff33}.error-banner{margin-top:1rem;padding:1rem;background:#ff6b6b1c;border:1px solid rgba(255,107,107,.28);border-radius:12px;text-align:left}.error-banner p{margin-bottom:.7rem;color:#ffc5c5}.btn-retry{padding:.6rem 1rem;background:#ffffff14;color:var(--text-main);border:none;border-radius:10px;cursor:pointer;font-weight:600;transition:background .22s ease}.btn-retry:hover{background:#ffffff26}.app-footer{padding:1.2rem 1rem 1.5rem;text-align:center;color:var(--text-dim);font-size:.85rem}@media (max-width: 600px){.app-header{padding-top:1.8rem}.app-header h1{font-size:1.55rem}.app-main{padding:.8rem}.scan-card{border-radius:16px;padding:.8rem}.scan-header{flex-direction:column;align-items:flex-start;gap:.6rem}}:root{--bg-strong: #111316;--bg-panel: #1a2028;--line-soft: #2b3645;--text-main: #f7f8fa;--text-dim: #98a8ba;--accent-cyan: #58d4ff;--accent-amber: #ffbc58;--accent-green: #58d89a;--accent-red: #ff6b6b}*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:Space Grotesk,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:radial-gradient(circle at 15% 20%,rgba(255,188,88,.18),transparent 28%),radial-gradient(circle at 85% 10%,rgba(88,212,255,.12),transparent 30%),linear-gradient(165deg,#0f1115,#151a21 55%,#10131a);min-height:100vh;color:var(--text-main)}#root{width:100%;height:100%}