@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--bg-primary:#0f1117;--bg-secondary:#1a1d27;--bg-card:#1e2130;--bg-card-hover:#252839;--bg-sidebar:#151722;--bg-input:#252839;--border-color:#ffffff0f;--border-active:#63b3ed66;--text-primary:#e8eaed;--text-secondary:#9aa0b0;--text-muted:#5f6577;--shadow-card:0 4px 24px #0000004d;--shadow-glow:0 0 20px #63b3ed1a;--glass-bg:#1e2130b3;--glass-border:#ffffff14}[data-theme=light]{--bg-primary:#f0f2f5;--bg-secondary:#fff;--bg-card:#fff;--bg-card-hover:#f8f9fb;--bg-sidebar:#fff;--bg-input:#f0f2f5;--border-color:#00000014;--border-active:#3182ce66;--text-primary:#1a202c;--text-secondary:#4a5568;--text-muted:#a0aec0;--shadow-card:0 4px 24px #0000000f;--shadow-glow:0 0 20px #3182ce14;--glass-bg:#fffc;--glass-border:#0000000f}:root{--color-success:#38d97a;--color-warning:#f5a623;--color-danger:#ef4444;--color-info:#63b3ed;--color-accent:#805ad5;--gradient-primary:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-success:linear-gradient(135deg, #38d97a 0%, #2bb85f 100%);--gradient-warning:linear-gradient(135deg, #f5a623 0%, #e8930c 100%);--gradient-danger:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);--gradient-info:linear-gradient(135deg, #63b3ed 0%, #4299e1 100%)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#app{background:var(--bg-primary);height:100%;color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;transition:background .3s,color .3s;overflow:hidden}.sidebar,.main-content,.kpi-card,.machine-card,.panel,.data-table,.btn,.theme-toggle{transition:background .3s,color .3s,border-color .3s,box-shadow .3s}.app-layout{height:100vh;display:flex}.sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border-color);z-index:10;flex-direction:column;flex-shrink:0;width:240px;padding:0;transition:width .3s;display:flex}.sidebar-header{border-bottom:1px solid var(--border-color);padding:20px 20px 16px}.sidebar-logo{align-items:center;gap:10px;display:flex}.sidebar-logo h1{background:var(--gradient-primary);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;font-size:1.3rem;font-weight:800}.sidebar-logo span{color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;font-size:.65rem;font-weight:500}.sidebar-nav{flex-direction:column;flex:1;gap:2px;padding:12px 10px;display:flex}.nav-item{color:var(--text-secondary);cursor:pointer;border-radius:10px;align-items:center;gap:12px;padding:11px 14px;font-size:.875rem;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.nav-item:hover{background:var(--bg-card-hover);color:var(--text-primary)}.nav-item.active{color:var(--color-info);background:#63b3ed1f;font-weight:600}.nav-item .icon{text-align:center;width:24px;font-size:1.1rem}.sidebar-footer{border-top:1px solid var(--border-color);padding:14px}.theme-toggle{background:var(--bg-input);cursor:pointer;color:var(--text-secondary);border:none;border-radius:8px;align-items:center;gap:10px;width:100%;padding:8px 12px;font-family:inherit;font-size:.8rem;transition:all .2s;display:flex}.theme-toggle:hover{color:var(--text-primary);background:var(--bg-card-hover)}.main-content{flex:1;padding:28px 32px;overflow-y:auto}.page-header{margin-bottom:28px}.page-header h2{letter-spacing:-.3px;font-size:1.5rem;font-weight:700}.page-header p{color:var(--text-secondary);margin-top:4px;font-size:.85rem}.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:28px;display:grid}.kpi-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:14px;padding:20px;transition:all .3s;position:relative;overflow:hidden}.kpi-card:before{content:"";border-radius:14px 14px 0 0;height:3px;position:absolute;top:0;left:0;right:0}.kpi-card.success:before{background:var(--gradient-success)}.kpi-card.warning:before{background:var(--gradient-warning)}.kpi-card.info:before{background:var(--gradient-info)}.kpi-card.accent:before{background:var(--gradient-primary)}.kpi-card:hover{box-shadow:var(--shadow-card);border-color:var(--border-active);transform:translateY(-2px)}.kpi-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;font-size:.75rem;font-weight:600}.kpi-value{letter-spacing:-1px;font-size:1.8rem;font-weight:800;line-height:1}.kpi-sub{color:var(--text-secondary);margin-top:6px;font-size:.75rem}.machine-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:28px;display:grid}.machine-card{background:var(--bg-card);border:1px solid var(--border-color);cursor:pointer;border-radius:14px;padding:20px;transition:all .3s}.machine-card:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}.machine-card-header{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.machine-name{font-size:.95rem;font-weight:700}.machine-type{color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;font-size:.7rem;font-weight:500}.status-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:20px;align-items:center;gap:5px;padding:4px 10px;font-size:.7rem;font-weight:600;display:inline-flex}.status-badge.running{color:var(--color-success);background:#38d97a1f}.status-badge.idle{color:var(--color-warning);background:#f5a6231f}.status-badge.stopped{color:var(--color-danger);background:#ef44441f}.status-dot{border-radius:50%;width:6px;height:6px;animation:2s infinite pulse}.status-badge.running .status-dot{background:var(--color-success)}.status-badge.idle .status-dot{background:var(--color-warning)}.status-badge.stopped .status-dot{background:var(--color-danger)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.machine-info{flex-direction:column;gap:8px;display:flex}.machine-info-row{justify-content:space-between;align-items:center;font-size:.8rem;display:flex}.machine-info-row .label{color:var(--text-muted)}.machine-info-row .value{color:var(--text-primary);font-weight:600}.progress-bar-bg{background:var(--bg-input);border-radius:3px;height:6px;margin-top:4px;overflow:hidden}.progress-bar-fill{background:var(--gradient-info);border-radius:3px;height:100%;transition:width .6s}.data-table{border-collapse:separate;border-spacing:0;background:var(--bg-card);border:1px solid var(--border-color);border-radius:14px;width:100%;overflow:hidden}.data-table th{background:var(--bg-secondary);text-align:left;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--border-color);padding:12px 16px;font-size:.7rem;font-weight:600}.data-table td{border-bottom:1px solid var(--border-color);padding:12px 16px;font-size:.85rem}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover td{background:var(--bg-card-hover)}.panel{background:var(--bg-card);border:1px solid var(--border-color);border-radius:14px;margin-bottom:20px;padding:20px}.panel-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.panel-title{font-size:.95rem;font-weight:700}.btn{cursor:pointer;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-primary);border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-family:inherit;font-size:.8rem;font-weight:600;transition:all .2s;display:inline-flex}.btn:hover{background:var(--bg-card-hover);border-color:var(--border-active)}.btn-primary{background:var(--gradient-primary);color:#fff;border:none}.btn-primary:hover{opacity:.9;transform:translateY(-1px)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.placeholder-page{height:60vh;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;display:flex}.placeholder-page .icon{margin-bottom:16px;font-size:4rem}.placeholder-page h3{color:var(--text-secondary);margin-bottom:6px;font-size:1.1rem}