body { font-family:'Inter',sans-serif; background:#0f172a; color:#e2e8f0; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:#1e293b; }
::-webkit-scrollbar-thumb { background:#475569; border-radius:3px; }
.glass-panel { background:rgba(30,41,59,.7); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.05); }
.status-indicator { width:8px; height:8px; border-radius:50%; display:inline-block; }
.status-normal { background:#10b981; box-shadow:0 0 6px #10b981; }
.status-warning { background:#f59e0b; box-shadow:0 0 6px #f59e0b; }
.status-critical { background:#ef4444; box-shadow:0 0 6px #ef4444; animation:pulse-r 1.5s infinite; }
@keyframes pulse-r { 0%,100%{opacity:1} 50%{opacity:.4} }
.chart-container { position:relative; height:200px; width:100%; }
.chart-sm { position:relative; height:170px; width:100%; }
.chart-xs { position:relative; height:130px; width:100%; }
.nav-item.active { background:linear-gradient(90deg,rgba(59,130,246,.2),transparent); border-left:3px solid #3b82f6; color:#60a5fa; }
input[type=range] { -webkit-appearance:none; height:5px; background:#334155; border-radius:9999px; outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#3b82f6; cursor:pointer; box-shadow:0 0 0 3px rgba(59,130,246,.2); }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.view-enter { animation:fadeIn .25s ease-out; }
@keyframes modalIn { from{opacity:0;transform:translateY(12px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
.modal-enter { animation:modalIn .2s cubic-bezier(.22,1,.36,1); }
.tab-btn.active { background:#2563eb; color:#fff; }
.thresh-tab { padding:6px 14px; font-size:12px; border-radius:6px; color:#94a3b8; transition:all .15s; }
.thresh-tab.active { background:#2563eb; color:#fff; }

#sidebar { width:224px; transition:width .25s ease; }
#sidebar.collapsed { width:60px; }
#sidebar.collapsed .sidebar-text { display:none !important; }
#sidebar.collapsed .sidebar-header { justify-content:center; padding:12px 0; }
#sidebar.collapsed .nav-item { justify-content:center; padding:10px 0; }
#sidebar.collapsed .nav-item > span { display:none; }
#sidebar.collapsed .nav-item i { margin:0 !important; width:auto !important; }
#sidebar.collapsed .collapse-icon { transform:rotate(180deg); }
#sidebar.collapsed .cloud-status { display:none; }

/* ===== Workshop overlay ===== */
.machine-tag {
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:6px;
  font-size:11px; font-weight:500; white-space:nowrap;
  backdrop-filter:blur(8px); border:1px solid;
  transition:all .2s;
  cursor:pointer;
}
.machine-tag:hover { transform:translate(-50%,-50%) scale(1.08); z-index:30; }
.machine-tag .dot { width:6px; height:6px; border-radius:50%; }
.mt-running { background:rgba(16,185,129,.22); border-color:rgba(16,185,129,.6); color:#6ee7b7; }
.mt-running .dot { background:#10b981; box-shadow:0 0 6px #10b981; }
.mt-idle    { background:rgba(245,158,11,.22); border-color:rgba(245,158,11,.6); color:#fcd34d; }
.mt-idle .dot { background:#f59e0b; box-shadow:0 0 6px #f59e0b; }
.mt-warning { background:rgba(239,68,68,.22); border-color:rgba(239,68,68,.7); color:#fca5a5; animation:pulse-tag 1.6s infinite; }
.mt-warning .dot { background:#ef4444; box-shadow:0 0 8px #ef4444; }
.mt-offline { background:rgba(100,116,139,.22); border-color:rgba(100,116,139,.5); color:#94a3b8; }
.mt-offline .dot { background:#64748b; }
@keyframes pulse-tag {
  0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,.4); }
  50% { box-shadow:0 0 0 8px rgba(239,68,68,0); }
}
.workshop-bg {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(59,130,246,.08) 0%, transparent 60%),
    linear-gradient(180deg, #0b1120 0%, #1e293b 100%);
}

.atab { background: transparent; }
.atab.active { background: #2563eb; color: #fff; }