:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f3f5f2;color:#17201b;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(180deg,#f3f5f2f0,#e9ede8f5),#f3f5f2}button,input,select,textarea{font:inherit}button{min-height:42px;border:1px solid #1f2b24;border-radius:8px;padding:0 16px;background:#1f2b24;color:#fff;cursor:pointer}button:hover{background:#314135}button:disabled{border-color:#b8c0b8;background:#d7ddd6;color:#747c74;cursor:not-allowed}input,select,textarea{width:100%;border:1px solid #aab5ad;border-radius:8px;background:#fff;color:#17201b}input:disabled,select:disabled,textarea:disabled{background:#eef1ee;color:#747c74;cursor:not-allowed}input,select{min-height:42px;padding:0 12px}input[type=range]{padding:0}textarea{min-height:180px;resize:vertical;padding:12px;line-height:1.5}progress{width:100%;height:14px;accent-color:#257061}.app-shell{width:min(1360px,100%);margin:0 auto;padding:24px}.topbar,.panel-head,.button-row,.sender-layout,.receiver-layout{display:flex;gap:16px}.topbar{align-items:center;justify-content:space-between;margin-bottom:20px}.topbar h1,.panel h2{margin:0;letter-spacing:0}.topbar h1{font-size:32px;line-height:1.1}.panel h2{font-size:22px}.eyebrow{margin:0 0 4px;color:#4c6055;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.mode-switch{display:grid;grid-template-columns:1fr 1fr;min-width:240px;overflow:hidden;border:1px solid #9dac9f;border-radius:8px;background:#fff}.mode-button{border:0;border-radius:0;background:transparent;color:#223129}.mode-button.is-active{background:#1f2b24;color:#fff}.workspace{display:grid}.panel{border:1px solid #c7d0c8;border-radius:8px;background:#fbfcfa;padding:20px;box-shadow:0 18px 50px #3040361f}.panel.is-hidden{display:none}.panel-head{align-items:flex-start;justify-content:space-between;margin-bottom:18px}.status-pill{display:inline-flex;align-items:center;min-height:30px;border:1px solid #b6c3ba;border-radius:999px;padding:0 12px;background:#eef3ef;color:#26352c;font-size:13px;white-space:nowrap}.control-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:18px}.control-grid label{display:grid;gap:7px;color:#445449;font-size:13px;font-weight:700}.toggle-row{align-items:center;grid-template-columns:auto 1fr;padding-top:24px}.toggle-row input{width:20px;height:20px}.passphrase-row{grid-column:span 2}.file-drop{display:flex;align-items:center;gap:14px;min-height:88px;margin-bottom:18px;border:1px dashed #90a296;border-radius:8px;background:#fff;padding:16px;color:#26352c;cursor:pointer}.file-drop.is-dragging{border-color:#257061;background:#eef7f2}.file-drop input{width:auto;min-height:auto}.file-drop span{display:grid;gap:4px}.file-drop strong,.file-drop small{overflow-wrap:anywhere}.file-drop small{color:#58675d}.sender-layout,.receiver-layout{align-items:stretch}.qr-stage,.video-stage{display:grid;place-items:center;min-width:0;border:1px solid #cad3cb;border-radius:8px;background:#fff}.qr-stage{flex:0 0 min(48vw,660px);min-height:520px;padding:24px}.qr-grid{display:grid;gap:10px;width:100%;justify-content:center;place-items:center}.qr-grid canvas{width:100%;height:auto;image-rendering:pixelated}.qr-jump{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;width:100%;margin-top:12px;font-size:13px}.qr-jump label{display:flex;align-items:center;gap:6px}.qr-jump input{width:96px}.jump-actions{display:flex;gap:6px;flex-wrap:wrap}.qr-jump button{min-height:36px}.qr-stage.is-present .qr-jump,.qr-stage:fullscreen .qr-jump{position:absolute;top:0;left:0;right:0;margin-top:0;padding:10px 16px;background:#f3f5f2eb}.present-bar{display:none}.qr-stage.is-present,.qr-stage:fullscreen{position:fixed;inset:0;z-index:1000;border:0;border-radius:0;padding:16px;background:#fff}.qr-stage.is-present .qr-grid,.qr-stage:fullscreen .qr-grid{width:min(96vw,82vh);aspect-ratio:1 / 1}.qr-stage.is-present .present-bar,.qr-stage:fullscreen .present-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:10px 16px;background:#f3f5f2eb;color:#17201b;font-size:14px}.present-actions{display:flex;gap:8px}.present-actions button{min-height:38px}.video-stage{position:relative;flex:1 1 58%;min-height:520px;overflow:hidden;background:#121714}#camera-preview,#scan-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#scan-canvas{opacity:0;pointer-events:none}.stack{flex:1 1 360px;min-width:320px;display:flex;flex-direction:column;gap:16px}.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.metric-grid div{min-height:76px;border:1px solid #d4ddd5;border-radius:8px;background:#fff;padding:12px}.metric-grid span{display:block;margin-bottom:6px;color:#58675d;font-size:12px;font-weight:700}.metric-grid strong{display:block;overflow-wrap:anywhere;font-size:16px;font-weight:750;letter-spacing:0}.button-row{flex-wrap:wrap}.button-row button{flex:1 1 110px}.receiver-controls{grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto;align-items:end}.receiver-controls .button-row{display:grid;grid-template-columns:repeat(3,minmax(128px,1fr))}.log-list{display:grid;gap:6px;min-height:86px;max-height:150px;overflow:auto;border:1px solid #d4ddd5;border-radius:8px;background:#fff;padding:10px;color:#405045;font-size:13px;line-height:1.35}@media(max-width:960px){.topbar,.sender-layout,.receiver-layout{flex-direction:column}.mode-switch{width:100%}.control-grid,.receiver-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.passphrase-row{grid-column:span 2}.receiver-controls .button-row{grid-template-columns:repeat(3,minmax(108px,1fr))}.qr-stage,.video-stage{flex-basis:auto;min-height:380px}}@media(max-width:640px){.app-shell,.panel{padding:14px}.control-grid,.receiver-controls,.metric-grid{grid-template-columns:1fr}.passphrase-row{grid-column:auto}.receiver-controls .button-row{grid-template-columns:1fr}.panel-head{flex-direction:column}.qr-stage,.video-stage{min-height:300px}}