.calc{display:flex;flex-direction:column;justify-content:flex-end;height:100%;max-width:440px;margin:0 auto;padding:0 12px calc(16px + env(safe-area-inset-bottom));box-sizing:border-box}.calc-display{color:#fff;font-weight:200;font-size:clamp(64px,20vw,96px);text-align:right;padding:16px 12px;line-height:1.1;overflow:hidden;white-space:nowrap}.calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.btn{border:none;border-radius:999px;aspect-ratio:1 / 1;font-size:clamp(26px,8vw,36px);font-weight:400;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:filter .1s ease}.btn:active{filter:brightness(1.35)}.btn.num{background:#333}.btn.fn{background:#a5a5a5;color:#000;font-weight:500}.btn.op{background:#ff9f0a;font-weight:500}.btn.zero{grid-column:span 2;aspect-ratio:auto;border-radius:999px;text-align:left;padding-left:28px}.shell{display:flex;flex-direction:column;height:100%;color:#fff}.shell-top{display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;border-bottom:1px solid #222}.shell-title{font-size:18px;font-weight:600}.shell-lock{background:#333;color:#fff;border:none;border-radius:10px;padding:8px 16px;font-size:15px;cursor:pointer}.shell-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px}.shell-hint{color:#8e8e93;font-size:14px}.shell-actions{display:flex;gap:8px}.shell-btn{background:#333;color:#fff;border:none;border-radius:10px;padding:8px 14px;font-size:16px;cursor:pointer;min-width:44px}.shell-empty{text-align:center;color:#8e8e93}.shell-cta{margin-top:12px;background:#ff9f0a;color:#000;border:none;border-radius:12px;padding:12px 20px;font-size:16px;font-weight:600;cursor:pointer}.cam-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;align-content:start}.cam-tile{position:relative;background:#0a0a0a;border:1px solid #222;border-radius:14px;overflow:hidden;aspect-ratio:4 / 3}.cam-video{width:100%;height:100%;object-fit:cover;background:#000;display:block}.cam-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#8e8e93;font-size:14px;background:#00000080}.cam-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(transparent,#000000bf)}.cam-name{flex:1;color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cam-dot{width:9px;height:9px;border-radius:50%;flex:none}.cam-dot-connected{background:#30d158}.cam-dot-connecting{background:#ffd60a}.cam-dot-offline{background:#8e8e93}.cam-dot-failed{background:#ff453a}.cam-mini{background:#ffffff26;color:#fff;border:none;border-radius:8px;width:34px;height:34px;font-size:15px;cursor:pointer;flex:none}.modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0009;padding:16px;z-index:10}.modal-card{background:#1c1c1e;border-radius:16px;padding:20px;width:100%;max-width:360px}.modal-title{color:#fff;font-size:18px;margin-bottom:14px}.modal-input{width:100%;box-sizing:border-box;margin-bottom:10px;padding:12px;background:#2c2c2e;border:1px solid #3a3a3c;border-radius:10px;color:#fff;font-size:16px}.modal-err{color:#ff453a;font-size:13px;margin:2px 0 10px}.modal-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.modal-btn{background:#333;color:#fff;border:none;border-radius:10px;padding:10px 16px;font-size:15px;cursor:pointer}.modal-btn.primary{background:#ff9f0a;color:#000;font-weight:600}.qr{display:flex;flex-direction:column;gap:10px;align-items:center}.qr-video{width:100%;border-radius:12px;background:#000;aspect-ratio:1;object-fit:cover}.qr-unsupported{color:#8e8e93;font-size:14px;text-align:center}.cam-mini:disabled{opacity:.4;cursor:default}.cam-mini.recording{background:#ff453a}.cam-rec{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:6px;background:#0009;color:#fff;font-size:13px;padding:4px 8px;border-radius:8px}.cam-rec-dot{width:9px;height:9px;border-radius:50%;background:#ff453a;animation:cam-blink 1s steps(2,start) infinite}@keyframes cam-blink{to{visibility:hidden}}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{background:#000;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,system-ui,sans-serif;overflow:hidden;overscroll-behavior:none}
