:root{font-family:Segoe UI,system-ui,sans-serif;line-height:1.5;color:#e8eaed;background:#12141a;--panel: #1c1f28;--border: #2e3340;--accent: #5eb8ff;--ok: #3dd68c;--warn: #f0b429}*{box-sizing:border-box}body{margin:0;min-height:100vh}.app{max-width:1400px;margin:0 auto;padding:1.25rem 1.5rem 2rem}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.25rem}.topbar h1{margin:0;font-size:1.75rem}.topbar .app-intro{max-width:52rem;margin:.5rem 0 0;line-height:1.5}.topbar .app-limits{max-width:52rem;margin:.35rem 0 0;line-height:1.45}.topbar-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}.lang-switch{display:flex;align-items:center;gap:.35rem}.lang-switch select{font:inherit;font-size:.85rem;padding:.4rem .5rem;min-height:2.125rem;border-radius:6px;border:1px solid var(--border);background:#0d0f14;color:#e8eaed;color-scheme:dark;min-width:7rem;cursor:pointer}.lang-switch select:focus{outline:2px solid rgba(94,184,255,.45);outline-offset:1px}.topbar-cam-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}.grid{display:grid;gap:1rem}.cameras{grid-template-columns:1fr 1fr}.codes{grid-template-columns:1fr 1fr;margin-top:1rem}@media(max-width:900px){.cameras,.codes{grid-template-columns:1fr}}.camera-panel,.color-info,.mix-panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1rem}.camera-panel header{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin-bottom:.75rem}.camera-panel h2{margin:0;font-size:1.1rem}.camera-panel header p{margin:0;color:#9aa3b2;font-size:.9rem}.video-wrap{position:relative;width:100%;aspect-ratio:16 / 9;min-height:220px;max-height:min(52vh,420px);background:#000;border-radius:8px;overflow:hidden}.video-wrap .video,.video-wrap .video-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;min-height:0;margin:0;object-fit:contain}.video-wrap .roi-overlay{position:absolute;top:0;right:0;bottom:0;left:0}.camera-error,.camera-warn{margin:0 0 .5rem;padding:.35rem .5rem;border-radius:4px;font-size:.85rem}.camera-warn{color:#e8c547;background:#e8c5471a}.camera-error{color:#f5a8a8;background:#f5a8a81a}.roi-hint{position:absolute;bottom:0;left:0;right:0;margin:0;padding:.5rem;font-size:.8rem;background:linear-gradient(transparent,#000000bf);color:#ddd}.swatch{position:relative;height:2.75rem;margin-top:.75rem;border-radius:6px;border:1px solid var(--border);overflow:hidden;display:flex;align-items:flex-end}.swatch-caption{width:100%;padding:.35rem .5rem;font-size:.8rem;background:linear-gradient(transparent,#000000bf);color:#f0f0f0;text-shadow:0 1px 2px rgba(0,0,0,.8)}.swatch-hex{font-family:ui-monospace,Consolas,monospace;font-size:inherit;background:none;padding:0;color:inherit}.swatch-capture{font-size:inherit;opacity:.95}.color-info-toggle{display:flex;align-items:flex-start;gap:.5rem;width:100%;margin:0;padding:0;border:none;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}.color-info-toggle:hover .color-info-title{color:var(--accent)}.color-info-toggle-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}.color-info-title{font-size:1rem;font-weight:600}.color-info-subtitle{line-height:1.3}.color-info-meta{line-height:1.3;word-break:break-all}.color-info-body{margin-top:.75rem}.color-info dl{margin:0;display:grid;gap:.5rem}.color-info dl>div{display:grid;grid-template-columns:4rem 1fr;gap:.5rem}.color-info dt{color:#9aa3b2;font-size:.85rem}.color-info dd{margin:0;font-family:ui-monospace,Consolas,monospace}.mix-panel{margin-top:1rem}.mix-panel h2{margin:0;font-size:1.15rem}.mix-panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin-bottom:.75rem}.mix-panel-head h2{margin:0}.mix-precise-toggle{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:#c8d0dc;cursor:pointer;-webkit-user-select:none;user-select:none}.mix-precise-toggle input{margin:0;accent-color:var(--accent)}.delta-e-line{margin:.5rem 0 .25rem}.delta-e-value{display:inline-block;min-width:3.5rem;font-variant-numeric:tabular-nums}.delta-e-hint{margin:0 0 .75rem}.mix-body{margin-top:.25rem}.mix-unavailable{min-height:12rem}.mix-subtitle{margin:1rem 0 .35rem;font-size:1rem;font-weight:600}.mix-intro{margin:0 0 .5rem;line-height:1.45}.mix-practical{margin:0 0 .75rem;min-height:2.75rem;padding:.5rem .65rem;background:#5eb8ff14;border-radius:6px;border-left:3px solid var(--accent);color:#c8d0dc;line-height:1.45}.mix-list-fixed{min-height:15.75rem}.mix-list-item-empty .mix-swatch{background:transparent;border-style:dashed;opacity:.35}.mix-item-placeholder{color:#6b7280}.mix-item-name{flex:1 1 auto;min-width:0}.mix-list{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-direction:column;gap:.75rem}.mix-list-item{display:flex;align-items:flex-start;gap:.75rem;min-height:4.75rem}.mix-item-body{flex:1;min-width:0}.mix-item-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .5rem;margin-bottom:.35rem}.mix-rank{color:#9aa3b2;font-size:.85rem}.mix-percent{margin-left:auto;font-size:.85rem;color:var(--accent);font-variant-numeric:tabular-nums}.mix-bar{height:4px;border-radius:2px;background:var(--accent);opacity:.85;max-width:100%;margin-bottom:.25rem}.mix-item-hint{display:block;min-height:1.25rem}.mix-swatch{width:1.5rem;height:1.5rem;border-radius:4px;border:1px solid var(--border);flex-shrink:0}.badge{font-size:.75rem;padding:.15rem .5rem;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}.badge-ok{background:#3dd68c33;color:var(--ok)}.badge-off{background:#f0646433;color:#f08080}.badge-mock{background:#f0b42933;color:var(--warn)}.banner{padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem}.banner-warn{background:#f0b4291f;border:1px solid rgba(240,180,41,.35)}.muted{color:#9aa3b2}.small{font-size:.85rem}.error{color:#f08080}code{font-family:ui-monospace,Consolas,monospace;font-size:.9em;background:#0d0f14;padding:.1em .35em;border-radius:4px}.footer{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--border)}.btn{font:inherit;cursor:pointer;border-radius:8px;padding:.5rem 1rem;border:1px solid var(--border)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#0d1118;border-color:transparent;font-weight:600}.btn-secondary{background:#2a3140;color:#e8eaed}.btn-ghost{background:transparent;color:#9aa3b2}.badge-held{background:#5eb8ff33;color:var(--accent)}.badge-live{background:#3dd68c2e;color:var(--ok)}.roi-controls{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem;padding:.5rem .65rem;background:#0d0f14;border-radius:8px;border:1px solid var(--border)}.roi-mode-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.roi-mode-label{display:flex;flex-direction:row;align-items:center;gap:.5rem;font-size:.85rem;color:#9aa3b2;flex-shrink:0}.roi-mode-title{white-space:nowrap}.roi-hint-inline{margin:0;flex:1;min-width:10rem;line-height:1.35}.roi-redraw-btn{flex-shrink:0;white-space:nowrap}.roi-size-label{display:flex;flex-direction:row;align-items:center;gap:.35rem;font-size:.85rem;color:#9aa3b2}.roi-size-label input{width:4.5rem;font:inherit;padding:.3rem .4rem;border-radius:6px;border:1px solid var(--border);background:#1c1f28;color:#e8eaed}.roi-mode-label select{font:inherit;padding:.35rem .5rem;border-radius:6px;border:1px solid var(--border);background:#1c1f28;color:#e8eaed;min-width:8rem}.btn-sm{padding:.35rem .65rem;font-size:.85rem}.roi-overlay{position:absolute;top:0;right:0;bottom:0;left:0;cursor:crosshair;z-index:2}.roi-svg{width:100%;height:100%;display:block}.roi-square{fill:#00ffff1f;stroke:#0ff;stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:all;cursor:grab}.roi-overlay-grabbing .roi-square{cursor:grabbing}.roi-handle{fill:#0ff;stroke:#003;stroke-width:1;pointer-events:all;cursor:nwse-resize}.roi-poly-open{fill:none;stroke:#0ff;stroke-width:2;vector-effect:non-scaling-stroke}.roi-poly-fill{fill:#00ffff26;stroke:#0ff;stroke-width:2;vector-effect:non-scaling-stroke}.roi-point{fill:#0ff;stroke:#012;stroke-width:1;pointer-events:none}.roi-point-first{fill:#f0b429;stroke:#012;stroke-width:1;pointer-events:none}.badge-switching{background:#9aa3b233;color:#9aa3b2}.video-placeholder{display:flex;align-items:center;justify-content:center;color:#9aa3b2;font-size:.9rem;padding:1rem;text-align:center;box-sizing:border-box}.camera-panel-held{outline:1px solid rgba(94,184,255,.45)}.camera-panel-titles h2{margin:0;font-size:1.1rem}.camera-panel-titles p{margin:0;color:#9aa3b2;font-size:.9rem}.camera-panel header{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;margin-bottom:.5rem}.camera-panel-badges{display:flex;gap:.35rem;flex-shrink:0}.camera-toolbar{display:flex;flex-wrap:wrap;align-items:stretch;gap:.5rem;margin-bottom:.75rem}.camera-select-label{display:flex;flex-direction:row;align-items:center;gap:.5rem;font-size:.85rem;color:#9aa3b2;flex:1 1 12rem;min-width:0}.camera-select-title{flex-shrink:0;white-space:nowrap}.camera-select-label select{font:inherit;padding:.4rem .5rem;min-height:2.125rem;border-radius:6px;border:1px solid var(--border);background:#0d0f14;color:#e8eaed;flex:1;min-width:8rem}.camera-toolbar-btn{flex-shrink:0;min-height:2.125rem;padding:.4rem .75rem;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.camera-toolbar-actions{display:flex;flex-shrink:0;align-items:stretch;gap:.35rem}.camera-toolbar-icon-btn{min-width:2.125rem;padding:.4rem}.camera-upload-icon{display:block}.bases-panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1rem;margin-top:1rem}.bases-toggle{display:flex;align-items:flex-start;gap:.5rem;width:100%;margin:0;padding:0;border:none;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}.bases-toggle:hover .bases-toggle-title{color:var(--accent)}.bases-chevron{flex-shrink:0;width:1.25rem;line-height:1.5;font-size:1rem;color:#9aa3b2}.bases-toggle-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}.bases-toggle-title{font-size:1.15rem;font-weight:600}.bases-toggle-meta{line-height:1.3}.bases-body{margin-top:.75rem}.bases-intro{margin:0 0 .5rem}.bases-subtitle{margin:0 0 .5rem;font-size:1rem}.bases-block{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}.bases-block:first-of-type{border-top:none;padding-top:0;margin-top:.75rem}.bases-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.5rem}.bases-row-between{justify-content:space-between}.bases-row select,.bases-label-inline select,.bases-field{font:inherit;padding:.4rem .5rem;border-radius:6px;border:1px solid var(--border);background:#0d0f14;color:#e8eaed;color-scheme:dark}.bases-field:focus{outline:2px solid rgba(94,184,255,.45);outline-offset:1px}.bases-field:read-only{opacity:.9;cursor:default;background:#14161c}.bases-field:read-only:focus{outline:none}.bases-label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:#9aa3b2;flex:1;min-width:12rem}.bases-color-list{list-style:none;margin:.5rem 0;padding:0;display:flex;flex-direction:column;gap:.35rem}.bases-label-inline{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:#9aa3b2;flex:1;min-width:14rem}.bases-select{width:100%;min-width:12rem}.bases-color-row{display:grid;grid-template-columns:1fr auto 2.25rem 2.25rem 2.25rem;gap:.35rem;align-items:center}.bases-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;margin-top:.5rem}.bases-toolbar-select{flex:1 1 14rem;min-width:0}.bases-toolbar-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:.5rem;flex-shrink:0}.bases-toolbar-btn{min-height:2.125rem;padding:.4rem .75rem;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:6px}.bases-color-picker-wrap{position:relative;flex-shrink:0;width:4.75rem;height:2.125rem;border:1px solid var(--border);border-radius:6px;overflow:hidden;cursor:pointer}.bases-color-picker-wrap.is-readonly{cursor:default}.bases-color-picker-face{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--picker-bg, #808080)}.bases-picker-hex{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:0 .15rem;font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:.58rem;font-weight:600;line-height:1.1;letter-spacing:.01em;color:#fff;text-shadow:0 0 4px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.85);pointer-events:none;text-align:center}.bases-color-picker-input{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:none;opacity:0;cursor:pointer}.bases-pick-btn{min-width:2.25rem;padding:.35rem .25rem;font-weight:600;line-height:1}.bases-name{min-width:0;width:100%}.bases-error{margin:.5rem 0 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;background:#0000008c}.modal-card{width:min(100%,24rem);background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1.25rem;box-shadow:0 12px 40px #00000073}.modal-title{margin:0 0 .5rem;font-size:1.1rem}.modal-label{display:flex;flex-direction:column;gap:.35rem;margin:1rem 0 .5rem;font-size:.85rem;color:#9aa3b2}.modal-warn{margin:.5rem 0 0;font-size:.85rem;color:var(--warn)}.modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}@media(max-width:700px){.bases-color-row{grid-template-columns:minmax(0,1fr) auto}.bases-pick-btn{min-width:2.5rem}}