@charset "UTF-8";.light{--background: #F3F3F6;--text: #1A1C1E;--border: #C6C6C9;--highlight: #fff;--track: #86878A;--link: #2872E3;--ok-color: #28a745;--not-ok-color: #dc3545;--scrap-color: #ffc107;--downtime-color: #17a2b8;--oee-color: #007bff;--availability-color: #6f42c1;--performance-color: #fd7e14;--quality-color: #20c997;--cycle-time-color: #6610f2;--observation-color: #6c757d;--card-bg: #FFFFFF;--header-bg: #E9ECEF;--input-bg: #FFFFFF;--input-border: #CED4DA}.dark{--background: #1A1C1E;--text: #E0E0E0;--border: #37393C;--highlight: #2C2F33;--track: #37393C;--link: #87A9FF;--ok-color: #5cb85c;--not-ok-color: #d9534f;--scrap-color: #f0ad4e;--downtime-color: #5bc0de;--oee-color: #4dabf7;--availability-color: #ba8fff;--performance-color: #ffac5c;--quality-color: #63e6be;--cycle-time-color: #b197fc;--observation-color: #adb5bd;--card-bg: #23272A;--header-bg: #101012;--input-bg: #2C2F33;--input-border: #495057}*{margin:0;padding:0;box-sizing:border-box;font-variant-ligatures:none}:root{font-family:Space Mono,monospace}#root{width:100vw;height:100vh;overflow:hidden}h1,h2,h3,h4,h5,h6{font-weight:400;color:var(--text)}li{list-style:none}button,input[type=number],select{font-family:Space Mono,monospace;background:var(--input-bg);color:var(--text);border:1px solid var(--input-border);font-size:14px;padding:10px 15px;border-radius:6px;transition:background-color .2s,border-color .2s}input[type=number],select{padding:8px 10px}button{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;background:var(--highlight)}button:hover:not([disabled]){background-color:var(--border)}button:focus,input:focus,select:focus{outline:2px solid var(--link);outline-offset:2px;border-color:var(--link)}button:disabled{opacity:.6;cursor:not-allowed}button .icon.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:300;line-height:1;font-size:20px;font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 20}main{width:100%;height:100vh;display:flex;flex-direction:column;background:var(--background);color:var(--text);overflow:hidden}.app-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--header-bg);border-bottom:1px solid var(--border);flex-wrap:wrap;gap:10px}.app-header>div{display:flex;align-items:baseline;gap:15px;flex-wrap:wrap}.app-header h1{font-size:20px;margin:0}.controls button{font-size:14px}.content-area{display:grid;grid-template-areas:"settings settings" "video dashboard";grid-template-columns:3fr 2fr;grid-template-rows:auto 1fr;flex:1;overflow:hidden}.settings-section{grid-area:settings;padding:15px 20px;border-bottom:1px solid var(--border);background:var(--card-bg)}.settings-section h2{font-size:16px;margin-bottom:10px}.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px;align-items:end}.setting-item{display:flex;flex-direction:column;gap:6px}.setting-item.checkbox-item{flex-direction:row;align-items:center;justify-content:flex-start;padding-bottom:10px}.setting-item label{font-size:12px;font-weight:500;white-space:nowrap}.setting-item input[type=number],.setting-item select,.setting-item button{width:100%;height:36px;display:flex;align-items:center;justify-content:center}.setting-item input[type=checkbox]{width:auto;margin-right:8px}.start-shift-btn{background-color:var(--ok-color);color:#fff;border-color:var(--ok-color)}.start-shift-btn:hover:not([disabled]){background-color:color-mix(in srgb,var(--ok-color) 85%,black)}.shift-start-time{font-size:12px;margin-top:10px;opacity:.8}.video-section,.dashboard-section{padding:15px 20px;overflow-y:auto}.video-section{grid-area:video;display:flex;flex-direction:column;border-right:1px solid var(--border)}.dashboard-section{grid-area:dashboard}.video-section h2,.dashboard-section h2{font-size:18px;margin-bottom:15px;border-bottom:1px solid var(--border);padding-bottom:10px}.dashboard-section h3{font-size:16px;margin-top:20px;margin-bottom:10px}.video-player-container{width:100%;aspect-ratio:16 / 9;background:#000;position:relative;border-radius:8px;overflow:hidden;margin-bottom:10px}.live-video-feed{width:100%;height:100%;display:block;object-fit:cover}.video-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--text);background-color:var(--highlight);font-size:14px;text-align:center;padding:10px}.status-bar{font-size:13px;padding:8px 0;color:var(--text);min-height:2em;line-height:1.4}.loading-dots{display:inline-block}.loading-dots:after{content:"...";display:inline-block;animation:loading-dots steps(4,jump-none) 1s infinite;width:0;overflow:hidden;vertical-align:bottom}@keyframes loading-dots{to{width:1.2em}}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:15px;margin-bottom:20px}.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.metric-card{background:var(--card-bg);padding:15px;border-radius:8px;border:1px solid var(--border);box-shadow:0 2px 4px #0000000d}.metric-card small{font-size:11px;opacity:.7;display:block;margin-top:5px}.metric-card h3{font-size:13px;margin-top:0;margin-bottom:8px;color:var(--text);opacity:.8}.metric-value{font-size:26px;font-weight:700}.metric-value.ok{color:var(--ok-color)}.metric-value.not-ok{color:var(--not-ok-color)}.metric-value.scrap{color:var(--scrap-color)}.metric-value.downtime{color:var(--downtime-color)}.metric-value.oee{color:var(--oee-color)}.metric-value.availability{color:var(--availability-color)}.metric-value.performance{color:var(--performance-color)}.metric-value.quality{color:var(--quality-color)}.metric-value.cycle-time{color:var(--cycle-time-color)}.event-log,.ai-observations-log{max-height:300px;overflow-y:auto;border:1px solid var(--border);border-radius:6px;padding:10px;background:var(--card-bg);margin-bottom:20px}.event-log ul,.ai-observations-log ul{display:flex;flex-direction:column;gap:8px}.event-item{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:4px;font-size:13px;border-left:3px solid transparent;line-height:1.4}.event-item.event-ok{border-left-color:var(--ok-color);background-color:color-mix(in srgb,var(--ok-color) 5%,transparent)}.event-item.event-notok{border-left-color:var(--not-ok-color);background-color:color-mix(in srgb,var(--not-ok-color) 5%,transparent)}.event-item.event-scrap{border-left-color:var(--scrap-color);background-color:color-mix(in srgb,var(--scrap-color) 5%,transparent)}.event-item.event-downtime,.event-item.event-audio-anomaly{border-left-color:var(--downtime-color);background-color:color-mix(in srgb,var(--downtime-color) 5%,transparent)}.event-item.event-observation{border-left-color:var(--observation-color);background-color:color-mix(in srgb,var(--observation-color) 5%,transparent)}.event-timestamp{flex-shrink:0;min-width:70px;opacity:.7}.event-type{font-weight:700;flex-basis:120px;flex-shrink:0;text-transform:capitalize}.event-details{flex-grow:1;word-break:break-word}@media(max-width:900px){.content-area{grid-template-areas:"settings" "video" "dashboard";grid-template-columns:1fr;grid-template-rows:auto auto 1fr}.video-section{border-right:none;border-bottom:1px solid var(--border)}.metrics-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}@media(max-width:600px){.app-header h1{font-size:18px}.controls button{padding:8px 12px;font-size:13px}.metrics-grid{grid-template-columns:repeat(2,1fr)}.event-item{flex-wrap:wrap}.event-details{flex-basis:100%;margin-top:4px}.settings-grid{flex-direction:column;align-items:stretch}.setting-item input[type=number],.setting-item select{max-width:none;width:100%}}