:root{--bg: #14171c;--bg-panel: #1d2229;--bg-panel-2: #232a33;--border: #313a45;--text: #e6e9ed;--text-dim: #97a1ad;--accent: #3b82f6;--accent-hover: #2f6fd6;--danger: #ef4444;--ok: #2ecc71}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}button{font:inherit;cursor:pointer}input,select,textarea{font:inherit;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:7px 10px;width:100%}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}.app{display:flex;flex-direction:column;height:100vh}.app__header{padding:12px 20px;background:var(--bg-panel);border-bottom:1px solid var(--border)}.app__header h1{margin:0;font-size:17px;font-weight:600}.app__layout{display:flex;flex:1;min-height:0}.app__sidebar{width:300px;flex-shrink:0;background:var(--bg-panel);border-right:1px solid var(--border);overflow-y:auto;padding:14px}.app__sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;font-weight:600}.app__main{flex:1;overflow-y:auto;padding:18px 22px;min-width:0}.app__empty{color:var(--text-dim);padding:40px;text-align:center}.button{background:var(--bg-panel-2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:7px 12px}.button:hover:not(:disabled){border-color:var(--accent)}.button:disabled{opacity:.5;cursor:default}.button--primary{background:var(--accent);border-color:var(--accent);color:#fff}.button--primary:hover:not(:disabled){background:var(--accent-hover)}.button--danger{color:var(--danger)}.button--wide{width:100%;margin-bottom:8px}.icon-button{background:transparent;border:none;color:var(--text-dim);padding:4px 6px;border-radius:4px;font-size:14px}.icon-button:hover{color:var(--text);background:var(--bg-panel-2)}.icon-button--danger:hover{color:var(--danger)}.camera-list{list-style:none;margin:0;padding:0}.camera-list__empty{color:var(--text-dim);padding:12px 4px}.camera-list__item{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:9px 10px;border-radius:8px;cursor:pointer;border:1px solid transparent;margin-bottom:4px}.camera-list__item:hover{background:var(--bg-panel-2)}.camera-list__item--selected{background:var(--bg-panel-2);border-color:var(--accent)}.camera-list__main{display:flex;flex-direction:column;gap:3px;min-width:0}.camera-list__name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.camera-list__code{color:var(--text-dim);font-size:12px}.camera-list__actions{display:flex;flex-shrink:0}.badge{display:inline-block;font-size:11px;padding:1px 7px;border-radius:10px;background:var(--bg);color:var(--text-dim);border:1px solid var(--border);margin-right:4px}.badge--rtsp{color:#7fb2ff}.badge--image{color:#7fe0a5}.badge--video{color:#ffce7a}.badge--off{color:var(--danger)}.markup-page__header{margin-bottom:14px}.markup-page__header h2{margin:0 0 4px;font-size:19px}.markup-page__code{color:var(--text-dim);font-weight:400}.markup-page__header-info{display:flex;gap:14px;color:var(--text-dim);font-size:13px}.markup-page__version{color:var(--ok)}.markup-page__body{display:flex;gap:18px;align-items:flex-start}.markup-page__frame{flex:1;min-width:0}.markup-page__panel{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:14px}.frame-placeholder{background:var(--bg-panel);border:1px dashed var(--border);border-radius:10px;padding:48px 24px;text-align:center;color:var(--text-dim)}.frame-placeholder--error{border-color:var(--danger);color:#f3b0b0}.frame-placeholder--error p{margin-top:0}.markup-canvas{position:relative;display:inline-block;max-width:100%;border-radius:10px;overflow:hidden;border:1px solid var(--border)}.markup-canvas img{display:block;max-width:100%;height:auto;-webkit-user-select:none;user-select:none}.markup-canvas canvas{position:absolute;top:0;left:0;cursor:crosshair}.panel-section{background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:14px}.panel-section__title{font-weight:600;margin-bottom:10px}.line-buttons{display:flex;flex-direction:column;gap:6px}.line-button{display:flex;align-items:center;gap:9px;background:var(--bg-panel-2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:8px 10px;text-align:left}.line-button--active{border-color:var(--accent);background:#253143}.line-button__swatch{width:14px;height:14px;border-radius:4px;flex-shrink:0}.line-button__count{margin-left:auto;color:var(--text-dim);font-size:12px}.panel-hint{color:var(--text-dim);font-size:12.5px;line-height:1.45;margin:10px 0}.panel-actions{display:flex;flex-wrap:wrap;gap:6px}.status{margin-top:8px;padding:8px 10px;border-radius:7px;font-size:13px;line-height:1.4}.status--ok{background:#2ecc711f;color:var(--ok)}.status--error{background:#ef44441f;color:#f3a0a0}.zone-selector__title{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:10px}.zone-selector__options{display:flex;flex-direction:column;gap:7px}.zone-selector__option{display:flex;align-items:center;gap:8px;cursor:pointer}.zone-selector__option input{width:auto;accent-color:var(--accent)}.help-tooltip{position:relative;display:inline-flex}.help-tooltip__button{width:20px;height:20px;border-radius:50%;border:1px solid var(--border);background:var(--bg-panel-2);color:var(--text-dim);font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.help-tooltip__button:hover{color:var(--text);border-color:var(--accent)}.help-tooltip__popover{position:absolute;z-index:30;top:26px;right:-10px;width:300px;background:var(--bg-panel-2);border:1px solid var(--border);border-radius:8px;padding:12px;font-size:12.5px;font-weight:400;line-height:1.5;color:var(--text);box-shadow:0 8px 24px #00000073}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}.camera-form{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:20px;width:520px;max-width:100%;max-height:92vh;overflow-y:auto;display:flex;flex-direction:column;gap:11px}.camera-form h2{margin:0 0 4px;font-size:17px}.camera-form label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--text-dim)}.camera-form__row{display:flex;gap:10px}.camera-form__row label{flex:1}.camera-form__port{max-width:110px}.camera-form__hint{margin:0;font-size:12px;color:var(--text-dim)}.camera-form__checkbox{flex-direction:row!important;align-items:center}.camera-form__checkbox input{width:auto;accent-color:var(--accent)}.camera-form__buttons{display:flex;gap:8px;margin-top:6px}.form-error{background:#ef44441f;color:#f3a0a0;border-radius:7px;padding:8px 10px;font-size:13px}.analysis-panel__live{margin-left:8px;color:var(--ok);font-size:12px;font-weight:400}.analysis-result{margin-top:10px;display:flex;flex-direction:column;gap:8px}.analysis-result__main{display:flex;align-items:baseline;gap:10px}.analysis-result__percent{font-size:28px;font-weight:700}.analysis-result__level{font-size:14px;font-weight:600}.analysis-result__details{margin:0;display:flex;flex-direction:column;gap:4px;font-size:12.5px}.analysis-result__details div{display:flex;justify-content:space-between;gap:8px}.analysis-result__details dt{color:var(--text-dim)}.analysis-result__details dd{margin:0;text-align:right}.analysis-result__failed{color:var(--text-dim);font-size:13px}.analysis-result__overlay{display:block;width:100%;border-radius:8px;border:1px solid var(--border)}.analysis-panel__toggle-settings{margin-top:10px}.analysis-settings{margin-top:10px;display:flex;flex-direction:column;gap:8px}.analysis-settings__field{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--text-dim)}.analysis-settings__field input{width:90px}.app__header{display:flex;align-items:center;gap:24px}.app__tabs{display:flex;gap:6px}.app__tab{background:var(--bg-panel);border:1px solid var(--border);color:var(--text-dim);border-radius:7px;padding:7px 14px}.app__tab--active{color:var(--text);border-color:var(--accent);background:#253143}.app__mosaic-wrap{padding:16px;overflow-y:auto}.mosaic{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px}.camera-card{background:var(--bg-panel);border:2px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}.camera-card__header{display:flex;justify-content:space-between;align-items:center;gap:8px}.camera-card__name{font-weight:600}.camera-card__stream-state{font-size:12px;color:var(--text-dim)}.camera-card__stream-state--live{color:var(--ok)}.camera-card__stream-state--error{color:var(--danger)}.camera-card__preview{background:#0b0f16;border-radius:8px;overflow:hidden;min-height:180px;display:flex;align-items:center;justify-content:center}.camera-card__preview img{display:block;width:100%;height:auto}.camera-card__preview-error{text-align:center;color:var(--text-dim);padding:24px}.camera-card__width{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.camera-card__width-label{color:var(--text-dim);font-size:13px}.camera-card__width-value{font-size:26px;font-weight:700}.camera-card__status{color:#0b0f16;font-size:12px;font-weight:700;border-radius:6px;padding:3px 8px}.camera-card__meta{font-size:12.5px;color:var(--text-dim)}.camera-card__warning{background:#ef44441f;color:#f3a0a0;border-radius:7px;padding:6px 9px;font-size:12.5px}.analysis-panel__debug-toggle{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-dim);margin:8px 0 10px;cursor:pointer}.analysis-panel__debug-toggle input{width:auto;accent-color:var(--accent)}.status--warn{background:#eab3081f;color:#e8c96b}.stats-page{max-width:1100px;margin:0 auto;padding:16px 20px 40px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}.stats-filters{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px}.stats-filters label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-dim)}.stats-filters label select{width:200px}.stats-filters__periods{display:flex;gap:6px}.stats-period{background:var(--bg-panel);border:1px solid var(--border);color:var(--text-dim);border-radius:6px;padding:7px 12px}.stats-period--active{background:var(--bg-panel-2);border-color:var(--accent);color:var(--text)}.stats-filters__custom{display:flex;align-items:center;gap:6px;color:var(--text-dim)}.stats-filters__custom input{width:190px}.stats-download{margin-left:auto}.stats-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.stats-kpi{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:12px 14px}.stats-kpi__value{font-size:22px;font-weight:600}.stats-kpi__label{margin-top:4px;font-size:12px;color:var(--text-dim)}.stats-chart{position:relative}.stats-chart__svg{width:100%;height:auto;display:block}.stats-chart__grid{stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke}.stats-chart__ytick,.stats-chart__xtick{fill:var(--text-dim);font-size:10px}.stats-chart__ytick{text-anchor:end}.stats-chart__xtick{text-anchor:middle}.stats-chart__line{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}.stats-chart__crosshair{stroke:var(--text-dim);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}.stats-chart__dot{fill:var(--accent);stroke:var(--bg-panel);stroke-width:2}.stats-chart__tooltip{position:absolute;transform:translate(12px,-110%);background:var(--bg-panel-2);border:1px solid var(--border);border-radius:6px;padding:6px 10px;pointer-events:none;white-space:nowrap;font-size:12px;z-index:5}.stats-chart__tooltip-value{font-size:15px;font-weight:600}.stats-chart__tooltip-row{display:flex;align-items:center;gap:6px;color:var(--text)}.stats-chart__tooltip-time{color:var(--text-dim)}.stats-chart__empty{color:var(--text-dim);padding:24px 0;text-align:center}.stats-mode{display:inline-flex;align-items:center;gap:6px}.stats-mode-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}.stats-modes{display:flex;flex-direction:column;gap:8px}.stats-modes__row{display:grid;grid-template-columns:130px 1fr 80px;align-items:center;gap:10px}.stats-modes__label{display:flex;align-items:center;gap:6px;font-size:13px}.stats-modes__bar-wrap{background:var(--bg);border-radius:4px;height:14px;overflow:hidden}.stats-modes__bar{display:block;height:100%;border-radius:4px;min-width:2px}.stats-modes__value{font-size:13px;text-align:right;font-variant-numeric:tabular-nums}.stats-modes__ranges{margin-top:10px;font-size:12px;color:var(--text-dim)}.stats-table{width:100%;border-collapse:collapse;font-size:13px}.stats-table th{text-align:left;color:var(--text-dim);font-weight:500;padding:6px 10px;border-bottom:1px solid var(--border)}.stats-table td{padding:6px 10px;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}.stats-journal__title{display:flex;align-items:center;justify-content:space-between;gap:10px}.stats-journal__filter{width:auto;font-size:12px;padding:4px 8px}.stats-journal__scroll{max-height:420px;overflow-y:auto}.camera-card__state{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}.camera-card__state-badge{padding:2px 8px;border-radius:10px;font-size:12px;font-weight:600;color:#cbd5e1;background:#334155}.camera-card__state-motion{font-size:12px;color:#94a3b8}.app__booting{min-height:100vh;display:grid;place-items:center;color:var(--text-dim)}.login{min-height:100vh;display:grid;place-items:center;padding:24px}.login__card{width:100%;max-width:380px;background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;padding:30px 28px 26px;display:flex;flex-direction:column;gap:14px}.login__brand{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}.login__title{margin:0;font-size:20px;line-height:1.3}.login__hint{margin:0;color:var(--text-dim);font-size:13px}.login__field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-dim)}.login__field input{padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:#0b0f16;color:inherit;font-size:15px}.login__field input:focus{outline:2px solid #2563eb;outline-offset:1px}.login__error{background:#ef44441f;color:#f3a0a0;border-radius:8px;padding:9px 11px;font-size:13px}.login__warning{background:#eab3081f;color:#f0d68a;border-radius:8px;padding:9px 11px;font-size:13px}.login__submit{margin-top:4px;padding:11px;font-size:15px}.app__session{display:flex;align-items:center;gap:10px;margin-left:auto}.app__session-user{color:var(--text-dim);font-size:13px}.stats-nodata{padding:18px 16px;border:1px dashed var(--border);border-radius:10px;color:var(--text-dim);font-size:13.5px;line-height:1.5}.app__debug-badge{padding:2px 9px;border-radius:10px;border:1px solid #eab308;color:#eab308;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}.diagnostics{margin-top:10px;padding:10px 12px;border:1px dashed #eab308;border-radius:10px}.diagnostics__title{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#eab308;margin-bottom:8px}.diagnostics__warnings{margin-top:8px;font-size:12.5px;color:var(--text-dim);display:flex;flex-direction:column;gap:4px}