*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:#111;width:100%;height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}.app{width:100vw;height:100vh;position:relative;overflow:hidden}.canvas-wrapper{width:100%;height:100%;position:absolute;top:0;left:0}.viewer-controls{z-index:10;color:#f4efe6;-webkit-user-select:none;user-select:none;width:min(360px,100vw - 36px);position:fixed;top:18px;right:18px}.panel-toggle-button{color:#f1eadf;cursor:pointer;-webkit-backdrop-filter:blur(18px);background:#191b19e6;border:1px solid #e7dbc72e;border-radius:8px;justify-content:center;align-items:center;gap:9px;min-height:38px;padding:0 14px;font-size:12px;font-weight:700;display:inline-flex;box-shadow:0 12px 34px #00000047}.viewer-controls.open .panel-toggle-button{justify-content:space-between;width:100%;margin-bottom:8px}.viewer-controls.closed{width:auto}.panel-toggle-icon{gap:3px;width:15px;display:grid}.panel-toggle-icon span{background:#89c9cd;border-radius:2px;height:2px;display:block}.control-panel{-webkit-backdrop-filter:blur(18px);scrollbar-width:thin;scrollbar-color:#89c9cd6b transparent;background:linear-gradient(#1f211ef5,#141514f0),#121211f2;border:1px solid #e7dbc729;border-radius:8px;width:100%;max-height:calc(100vh - 76px);padding:18px;overflow-y:auto;box-shadow:0 18px 54px #00000057}.control-panel::-webkit-scrollbar{width:6px}.control-panel::-webkit-scrollbar-thumb{background:#89c9cd6b;border-radius:8px}.panel-header{justify-content:space-between;align-items:flex-start;gap:14px;padding-bottom:14px;display:flex}.panel-eyebrow{letter-spacing:0;text-transform:uppercase;color:#89c9cd;margin-bottom:5px;font-size:10px;font-weight:700}.panel-title{color:#faf4ea;font-size:20px;font-weight:800;line-height:1.2}.panel-chip{color:#bde3e5;background:#89c9cd1f;border:1px solid #89c9cd4d;border-radius:8px;flex-shrink:0;padding:6px 9px;font-size:11px;font-weight:700}.panel-section{border-top:1px solid #e7dbc717;padding-top:14px}.panel-section-title{letter-spacing:0;text-transform:uppercase;color:#969085;margin-bottom:9px;font-size:10px;font-weight:700}.toggle-btn{color:#ddd5c9;cursor:pointer;text-align:left;background:#ffffff0b;border:1px solid #e7dbc71a;border-radius:8px;justify-content:space-between;align-items:center;width:100%;min-height:38px;margin-bottom:7px;padding:8px 10px 8px 12px;font-size:13px;font-weight:650;transition:background .18s,border-color .18s,color .18s;display:flex}.toggle-btn:hover{background:#ffffff14;border-color:#ffffff26}.toggle-btn.active{color:#c6ecee;background:#89c9cd24;border-color:#89c9cd6b}.toggle-pill{background:#ffffff26;border-radius:9px;flex-shrink:0;width:32px;height:18px;margin-left:8px;transition:background .18s;position:relative}.toggle-pill:after{content:"";background:#fff;border-radius:50%;width:13px;height:13px;transition:transform .18s;position:absolute;top:2.5px;left:2.5px}.toggle-btn.active .toggle-pill{background:#89c9cd}.toggle-btn.active .toggle-pill:after{transform:translate(14px)}.camera-grid{grid-template-columns:1fr 1fr;gap:7px;display:grid}.camera-btn,.package-btn{color:#d5cabd;cursor:pointer;background:#ffffff0d;border:1px solid #e7dbc71f;border-radius:8px;min-height:36px;padding:8px 10px;font-size:12px;font-weight:650;transition:background .15s,border-color .15s,color .15s}.camera-btn:hover,.package-btn:hover{color:#f2ece1;background:#ffffff1a;border-color:#fff3}.camera-btn.active,.package-btn.active{color:#c6ecee;background:#89c9cd29;border-color:#89c9cd}.package-grid{grid-template-columns:1fr 1fr 1fr;gap:7px;display:grid}.metric-grid{grid-template-columns:1fr 1fr;gap:7px;display:grid}.metric-card{background:#ffffff0d;border:1px solid #e7dbc71a;border-radius:8px;flex-direction:column;justify-content:space-between;min-height:58px;padding:10px;display:flex}.metric-card span{color:#a9a49a;font-size:10px;line-height:1.2}.metric-card strong{color:#f5f1e9;word-break:break-word;margin-top:6px;font-size:15px;line-height:1.2}@media (width<=760px){.viewer-controls{width:auto;inset:12px 12px auto}.viewer-controls.closed{width:auto;left:12px;right:auto}.viewer-controls.closed .panel-toggle-button{min-width:118px}.viewer-controls.open .panel-toggle-button{min-height:40px}.control-panel{max-height:min(68vh,580px);padding:16px}.panel-header{padding-bottom:12px}.package-grid,.camera-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=460px){.package-grid,.camera-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel-title{font-size:18px}}