.camera-app{width:100%;max-width:1100px;margin:auto;background:#fff;border:1px solid #e5eaf2;border-radius:18px;box-shadow:0 14px 40px rgb(28 50 90 / .10);overflow:hidden}.app-header{padding:24px 26px;border-bottom:1px solid #e9eef5;background:linear-gradient(135deg,#fff,#f0f6ff)}.app-header h1{font-size:clamp(1.4rem,3vw,1.8rem);font-weight:750;margin:0 0 6px;text-align:center}.app-header p{color:#66748a;margin:0;font-size:.94rem;text-align:center}.app-content{padding:22px}.panel{border:1px solid #e4eaf2;border-radius:14px;padding:18px;background:#fff;box-shadow:0 4px 14px rgb(20 42 80 / .04)}.panel-title{font-size:1rem;font-weight:750;margin:0 0 15px;display:flex;align-items:center;gap:9px}.title-dot{width:9px;height:9px;border-radius:50%;background:#2563eb;display:inline-block}.preview{width:100%;aspect-ratio:4 / 3;min-height:220px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:12px;background:radial-gradient(ellipse at center,#1d2b43,#0a1220 75%)}#cameraVideo{display:none;width:100%;height:100%;object-fit:contain;transform-origin:center}.preview-placeholder{padding:22px;text-align:center;color:#d6deec}.camera-icon{font-size:2.8rem;margin-bottom:8px}.preview-placeholder strong{display:block;font-size:1rem;margin-bottom:5px;color:#fff}.preview-placeholder span{font-size:.82rem;color:#aebbd0}.preview-top{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:8px;pointer-events:none}.status-pill{border-radius:30px;padding:5px 10px;font-size:.73rem;color:#fff;background:rgb(7 15 29 / .75)}.status-led{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;background:#94a3b8}.status-led.live{background:#34d399;box-shadow:0 0 0 3px rgb(52 211 153 / .16)}.preview-bottom{position:absolute;bottom:12px;right:12px}.icon-btn{border:1px solid rgb(255 255 255 / .18);color:#fff;background:rgb(7 15 29 / .75);border-radius:9px;width:38px;height:38px;cursor:pointer;font-size:1.2rem}.icon-btn:hover{background:#2563eb}.btn-blue{color:#fff;border:0;border-radius:9px;padding:10px 15px;font-weight:650;background:linear-gradient(135deg,#3b82f6,#1d4ed8);box-shadow:0 5px 12px rgb(37 99 235 / .20);transition:.15s}.btn-blue:hover,.btn-blue:focus{color:#fff;background:linear-gradient(135deg,#2563eb,#1e40af);transform:translateY(-1px)}.btn-blue:disabled,.btn-stop:disabled{opacity:.5;transform:none;cursor:not-allowed}.btn-soft{color:#1d4ed8;border:1px solid #cbdcfb;background:#eff6ff;border-radius:9px;padding:9px 13px;font-weight:650}.btn-soft:hover{background:#dbeafe;color:#1e40af}.btn-stop{color:#fff;border:0;border-radius:9px;padding:10px 15px;font-weight:650;background:linear-gradient(135deg,#ef4444,#b91c1c)}.control-label{display:flex;justify-content:space-between;align-items:center;font-size:.84rem;font-weight:650;margin-bottom:7px;color:#344054}.form-select{border-color:#d9e1ec;border-radius:9px;min-height:42px;font-size:.9rem}.form-select:focus{border-color:#7aa7fa;box-shadow:0 0 0 .2rem rgb(59 130 246 / .12)}.form-range{accent-color:#2563eb}.form-check-input{cursor:pointer}.form-check-input:checked{background-color:#2563eb;border-color:#2563eb}.switch-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #edf1f6}.switch-row label{font-size:.88rem;font-weight:600;color:#344054;cursor:pointer}.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px}.stat-box{padding:11px 9px;background:#f7f9fc;border:1px solid #e9eef5;border-radius:10px;min-width:0}.stat-label{font-size:.69rem;color:#748197;margin-bottom:4px}.stat-value{font-size:.92rem;font-weight:750;overflow-wrap:anywhere}.helper-text{font-size:.78rem;color:#748197;line-height:1.5}.message{display:none;padding:10px 12px;border-radius:9px;font-size:.83rem;margin-top:12px}.message.show{display:block}.message.info{background:#eff6ff;color:#1d4ed8;border:1px solid #dbeafe}.message.error{background:#fff1f2;color:#be123c;border:1px solid #ffe4e6}.snapshot-empty{border:1px dashed #cbd5e1;border-radius:11px;padding:20px 12px;color:#7b8798;font-size:.84rem;text-align:center}.snapshot-item{border:1px solid #e5eaf2;border-radius:10px;padding:8px;display:flex;align-items:center;gap:10px}.snapshot-item img{width:72px;height:54px;object-fit:cover;border-radius:6px;background:#e2e8f0}.snap-name{font-size:.8rem;font-weight:650;flex:1}.snap-actions{display:flex;gap:5px}.snap-actions button{border:1px solid #d8e1ef;background:#fff;color:#334155;border-radius:7px;padding:5px 8px;font-size:.76rem}.snap-actions button:hover{background:#eff6ff;color:#1d4ed8}.app-footer{padding:15px 24px;border-top:1px solid #e9eef5;background:#fbfcfe;color:#748197;font-size:.78rem}.fullscreen-preview{position:fixed!important;inset:0!important;z-index:9999;width:100vw!important;height:100vh!important;aspect-ratio:auto!important;border-radius:0!important;background:#020617!important}.fullscreen-preview #cameraVideo{object-fit:contain}@media (max-width:767.98px){body{padding:10px 8px}.app-header{padding:20px 18px}.app-content{padding:13px}.panel{padding:14px}.preview{min-height:210px}.app-footer{padding:14px 17px}}@media (max-width:390px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.snapshot-item{flex-wrap:wrap}}