@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
  --bg:     #0b0d13;
  --bg2:    #111318;
  --bg3:    #181b22;
  --bg4:    #1e2129;
  --bg5:    #252830;
  --b1:     rgba(255,255,255,0.055);
  --b2:     rgba(255,255,255,0.10);
  --b3:     rgba(255,255,255,0.16);
  --txt:    #e2e4ec;
  --txt2:   #9096a8;
  --txt3:   #5a6070;
  --accent: #f59e0b;
  --acc2:   #fbbf24;
  --blue:   #60a5fa;
  --green:  #34d399;
  --red:    #f87171;
  --purple: #a78bfa;
  --teal:   #2dd4bf;
  --orange: #fb923c;
  --r:  10px;
  --r2:  7px;
  --r3:  5px;
  --sb: 220px;
  --f: 'Inter', sans-serif;
  --fd: 'Space Grotesk', sans-serif;
  --trans: all .18s ease;
}
.light {
  --bg:#f3f4f8; --bg2:#ffffff; --bg3:#eceef4; --bg4:#e3e5ed; --bg5:#d8dae4;
  --b1:rgba(0,0,0,0.06); --b2:rgba(0,0,0,0.10); --b3:rgba(0,0,0,0.16);
  --txt:#181b26; --txt2:#555d72; --txt3:#9096a8;
}
.ocean {
  --bg:#060c1e; --bg2:#0a1228; --bg3:#0f1a36; --bg4:#162040; --bg5:#1d2850;
  --b1:rgba(60,120,255,0.08); --b2:rgba(60,120,255,0.14); --b3:rgba(60,120,255,0.22);
  --txt:#d0d8f0; --txt2:#7888b8; --txt3:#4a5880; --accent:#38bdf8; --acc2:#7dd3fc;
}
.forest {
  --bg:#060f0a; --bg2:#0a1610; --bg3:#0f1e16; --bg4:#162820; --bg5:#1d3228;
  --b1:rgba(40,180,100,0.08); --b2:rgba(40,180,100,0.14); --b3:rgba(40,180,100,0.22);
  --txt:#c8e8d0; --txt2:#6a9878; --txt3:#3a5848; --accent:#34d399; --acc2:#6ee7b7;
}

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:var(--f);background:var(--bg);color:var(--txt);font-size:13px;line-height:1.5;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--b3);border-radius:3px;}
input,select,textarea,button{font-family:var(--f);}

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
#app { display:flex; min-height:100vh; }
.sidebar {
  width:var(--sb); min-height:100vh; background:var(--bg2);
  border-right:1px solid var(--b1); display:flex; flex-direction:column;
  position:fixed; top:0; bottom:0; left:0; z-index:200; transition:var(--trans);
}
.main { margin-left:var(--sb); flex:1; display:flex; flex-direction:column; min-height:100vh; }
.topbar {
  height:56px; background:var(--bg2); border-bottom:1px solid var(--b1);
  display:flex; align-items:center; padding:0 24px; gap:12px;
  position:sticky; top:0; z-index:100;
}
.page { padding:24px; flex:1; }

/* ═══════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════ */
.sb-logo { padding:20px 18px 14px; border-bottom:1px solid var(--b1); }
.sb-logomark { font-family:var(--fd); font-size:17px; font-weight:700; }
.sb-logomark span { color:var(--accent); }
.sb-sub { font-size:10px; color:var(--txt3); margin-top:2px; letter-spacing:.06em; }
.sb-nav { flex:1; padding:10px 8px; overflow-y:auto; }
.sb-section { font-size:10px; font-weight:700; color:var(--txt3); letter-spacing:.1em;
  text-transform:uppercase; padding:8px 10px 4px; }
.sb-group-label { font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt3); padding:10px 10px 3px; }
.sb-proj-header { display:flex; align-items:center; gap:6px; padding:10px 10px 6px;
  margin-top:4px; background:rgba(245,158,11,.06); border-radius:var(--r3);
  border:1px solid rgba(245,158,11,.15); margin-bottom:4px; }
.sb-proj-dot { width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; }
.sb-proj-name { font-size:11px; font-weight:600; color:var(--txt2); flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-proj-close { background:none; border:none; color:var(--txt3); cursor:pointer;
  padding:2px; display:flex; align-items:center; flex-shrink:0; border-radius:3px; }
.sb-proj-close:hover { color:var(--txt); background:var(--bg4); }
.sb-item-disabled { display:flex; align-items:center; gap:10px; padding:9px 10px;
  border-radius:var(--r3); color:var(--txt3); font-size:12px; font-weight:500;
  margin-bottom:2px; opacity:.55; cursor:default; }
.sb-item-disabled svg { width:15px; height:15px; flex-shrink:0; }
.sb-soon-badge { margin-left:auto; font-size:8px; background:rgba(167,139,250,.15);
  color:#a78bfa; padding:2px 5px; border-radius:8px; font-weight:700; letter-spacing:.04em; }
.sb-divider { height:1px; background:var(--b1); margin:8px 4px; }
.sb-item {
  display:flex; align-items:center; gap:10px; padding:9px 10px;
  border-radius:var(--r3); cursor:pointer; color:var(--txt2); font-size:12px;
  font-weight:500; transition:var(--trans); margin-bottom:2px;
  border:none; background:transparent; width:100%; text-align:left;
}
.sb-item svg { width:15px; height:15px; flex-shrink:0; opacity:.7; }
.sb-item:hover { background:var(--bg3); color:var(--txt); }
.sb-item.active { background:rgba(245,158,11,.12); color:var(--accent); border:1px solid rgba(245,158,11,.2); }
.sb-item.active svg { opacity:1; }
.sb-bottom { padding:12px 8px; border-top:1px solid var(--b1); }

/* ── Project Hub ─── */
.hub-module-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hub-module-card { background:var(--bg2); border:1px solid var(--b1); border-radius:10px;
  padding:16px; display:flex; align-items:flex-start; gap:14px; cursor:pointer;
  transition:border-color .15s, box-shadow .15s; }
.hub-module-card:hover { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.hub-module-card--soon { cursor:default; opacity:.65; }
.hub-module-card--soon:hover { border-color:var(--b1); box-shadow:none; }
.hub-mod-icon { width:40px; height:40px; border-radius:10px; display:flex;
  align-items:center; justify-content:center; flex-shrink:0; }
.hub-mod-icon--led     { background:rgba(245,158,11,.15); color:#f59e0b; }
.hub-mod-icon--rack    { background:rgba(96,165,250,.15);  color:#60a5fa; }
.hub-mod-icon--wiring  { background:rgba(45,212,191,.15);  color:#2dd4bf; }
.hub-mod-icon--diagram { background:rgba(167,139,250,.15); color:#a78bfa; }
.hub-mod-icon--audio   { background:rgba(244,114,182,.15); color:#f472b6; }
.hub-mod-icon--boq     { background:rgba(52,211,153,.15);  color:#34d399; }
.hub-mod-icon--analysis{ background:rgba(248,113,113,.15); color:#f87171; }
.hub-mod-title { font-family:var(--fd); font-size:13px; font-weight:700; margin-bottom:3px; }
.hub-mod-desc  { font-size:11px; color:var(--txt3); margin-bottom:5px; }
.hub-mod-status { font-size:10px; font-weight:600; letter-spacing:.04em; }
.hub-mod-status--active { color:#34d399; }
.hub-mod-status--idle   { color:var(--txt3); }
.hub-mod-status--soon   { color:var(--txt3); }
.hub-section-title { font-family:var(--fd); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--txt2); margin:0 0 10px; }
.hub-metrics-bar { display:flex; }
.hub-stat-item { flex:1; text-align:center; padding:0 10px;
  border-right:1px solid var(--b1); }
.hub-stat-item:last-child { border-right:none; }
.hub-stat-val { font-family:var(--fd); font-size:17px; font-weight:700; color:var(--txt1); }
.hub-stat-label { font-size:10px; color:var(--txt3); margin-top:2px; }
.user-card {
  display:flex; align-items:center; gap:10px; padding:10px;
  border-radius:var(--r2); background:var(--bg3); cursor:pointer; transition:var(--trans);
}
.user-card:hover { background:var(--bg4); }
.avatar {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#000; flex-shrink:0;
}
.user-name { font-size:12px; font-weight:600; }
.user-role { font-size:10px; color:var(--txt3); }

/* ═══════════════════════════════════════
   COMPONENTS
═══════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
  border-radius:var(--r2); font-size:12px; font-weight:600; cursor:pointer;
  border:none; transition:var(--trans); letter-spacing:.01em; white-space:nowrap;
}
.btn svg { width:14px; height:14px; flex-shrink:0; }
.btn-primary { background:var(--accent); color:#000; }
.btn-primary:hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn-ghost { background:transparent; border:1px solid var(--b2); color:var(--txt2); }
.btn-ghost:hover { background:var(--bg3); color:var(--txt); }
.btn-blue { background:rgba(96,165,250,.12); color:var(--blue); border:1px solid rgba(96,165,250,.25); }
.btn-red  { background:rgba(248,113,113,.12); color:var(--red);  border:1px solid rgba(248,113,113,.25); }
.btn-green{ background:rgba(52,211,153,.12); color:var(--green); border:1px solid rgba(52,211,153,.25); }
.btn-purple{background:rgba(167,139,250,.12);color:var(--purple);border:1px solid rgba(167,139,250,.25);}
.btn-sm { padding:5px 11px; font-size:11px; }
.btn-xs { padding:3px 8px; font-size:11px; }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }

.card { background:var(--bg2); border:1px solid var(--b1); border-radius:var(--r); padding:20px; }
.card-sm { background:var(--bg3); border:1px solid var(--b1); border-radius:var(--r2); padding:12px 14px; }

.inp {
  background:var(--bg3); border:1px solid var(--b1); border-radius:var(--r3);
  padding:8px 10px; color:var(--txt); font-size:12px; outline:none;
  width:100%; transition:border-color .15s;
}
.inp:focus { border-color:var(--accent); }
.inp::placeholder { color:var(--txt3); }
select.inp { cursor:pointer; }
textarea.inp { resize:vertical; }

.label { font-size:10px; font-weight:700; color:var(--txt3); text-transform:uppercase; letter-spacing:.09em; margin-bottom:5px; }

.badge {
  display:inline-flex; align-items:center; gap:3px; font-size:10px;
  font-weight:700; padding:2px 8px; border-radius:4px;
  text-transform:uppercase; letter-spacing:.05em;
}
.b-green  { background:rgba(52,211,153,.12); color:var(--green); border:1px solid rgba(52,211,153,.25); }
.b-amber  { background:rgba(245,158,11,.12); color:var(--accent);border:1px solid rgba(245,158,11,.25); }
.b-blue   { background:rgba(96,165,250,.12); color:var(--blue);  border:1px solid rgba(96,165,250,.25); }
.b-red    { background:rgba(248,113,113,.12);color:var(--red);   border:1px solid rgba(248,113,113,.25);}
.b-purple { background:rgba(167,139,250,.12);color:var(--purple);border:1px solid rgba(167,139,250,.25);}
.b-gray   { background:var(--bg4); color:var(--txt3); border:1px solid var(--b2); }

.stat { background:var(--bg3); border:1px solid var(--b1); border-radius:var(--r2); padding:14px 16px; }
.stat-val { font-family:var(--fd); font-size:24px; font-weight:700; line-height:1; }
.stat-sub { font-size:11px; color:var(--txt3); margin-top:4px; }

.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.grid5 { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }

.divider { height:1px; background:var(--b1); margin:16px 0; }
.section-hd {
  font-family:var(--fd); font-size:14px; font-weight:600; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.section-hd .line { flex:1; height:1px; background:var(--b1); }

.alert { border-radius:var(--r2); padding:10px 14px; font-size:12px; line-height:1.6;
  display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; }
.alert svg { flex-shrink:0; margin-top:1px; }
.alert-warn  { background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.2); color:#fbbf24; }
.alert-green { background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.2); color:#6ee7b7; }
.alert-info  { background:rgba(96,165,250,.08); border:1px solid rgba(96,165,250,.2); color:#93c5fd; }
.alert-red   { background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.2);color:#fca5a5; }

/* ═══════════════════════════════════════
   ZONE PILLS
═══════════════════════════════════════ */
.zone-bar { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.zpill {
  display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px;
  font-size:12px; font-weight:600; cursor:pointer; border:1px solid var(--b2);
  background:transparent; color:var(--txt2); transition:var(--trans);
}
.zpill.active { background:var(--bg3); color:var(--txt); border-color:var(--b3); }
.zpill:hover:not(.active) { background:var(--bg3); }
.zpill .zdot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.zpill .zdel { opacity:.4; transition:opacity .15s; margin-left:3px; font-size:11px; cursor:pointer; }
.zpill:hover .zdel { opacity:.8; }

/* ═══════════════════════════════════════
   ZONE EDITOR
═══════════════════════════════════════ */
.zone-editor { border:1px solid var(--b1); border-radius:var(--r); overflow:hidden; }
.zone-editor-head {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:var(--bg3); border-bottom:1px solid var(--b1);
}
.zone-editor-body { display:grid; grid-template-columns:repeat(4,1fr); }
.ze-col { padding:14px 16px; border-right:1px solid var(--b1); }
.ze-col:last-child { border-right:none; }
.ze-col-title { font-size:10px; font-weight:700; color:var(--txt3); text-transform:uppercase; letter-spacing:.09em; margin-bottom:10px; }
.kv { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-bottom:8px; }
.kv .k { color:var(--txt2); }
.kv .v { font-weight:600; font-family:var(--fd); }

/* ═══════════════════════════════════════
   SIGNAL CHAIN
═══════════════════════════════════════ */
.chain { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:10px 16px; background:var(--bg); border-top:1px solid var(--b1); }
.cnode { padding:3px 10px; border-radius:4px; font-size:11px; font-weight:600; border:1px solid var(--b2); color:var(--txt2); }
.cnode.media  { border-color:rgba(52,211,153,.4);  color:var(--green);  background:rgba(52,211,153,.05); }
.cnode.ctrl   { border-color:rgba(96,165,250,.4);  color:var(--blue);   background:rgba(96,165,250,.05); }
.cnode.spl    { border-color:rgba(245,158,11,.4);  color:var(--accent); background:rgba(245,158,11,.05); }
.carr { color:var(--txt3); font-size:14px; }

/* ═══════════════════════════════════════
   BOQ TABLE
═══════════════════════════════════════ */
.boq-scroll { overflow-x:auto; }
.boq { width:100%; border-collapse:collapse; min-width:820px; }
.boq th {
  padding:9px 12px; font-size:10px; font-weight:700; color:var(--txt3);
  text-transform:uppercase; letter-spacing:.08em; text-align:left;
  border-bottom:1px solid var(--b2); background:var(--bg3); white-space:nowrap;
}
.boq th.r,.boq td.r { text-align:right; }
.boq td { padding:9px 12px; font-size:12px; border-bottom:1px solid var(--b1); color:var(--txt); vertical-align:middle; }
.boq tr.grp td { background:var(--bg4); font-size:10px; font-weight:700; color:var(--txt3);
  text-transform:uppercase; letter-spacing:.08em; padding:6px 12px; }
.boq tr.subtotal td { background:rgba(245,158,11,.05); border-top:1px solid rgba(245,158,11,.15);
  font-weight:700; color:var(--accent); font-family:var(--fd); }
.boq tr:hover:not(.grp):not(.subtotal) td { background:rgba(255,255,255,.015); }
.boq .boq-inp { background:var(--bg4); border:1px solid var(--b1); border-radius:4px;
  padding:4px 8px; color:var(--accent); font-family:var(--fd); font-size:12px; font-weight:600;
  outline:none; width:100px; text-align:right; transition:border-color .15s; }
.boq .boq-inp:focus { border-color:var(--accent); }
.boq .boq-qty { background:var(--bg4); border:1px solid var(--b1); border-radius:4px;
  padding:4px 8px; color:var(--txt); font-size:12px; outline:none; width:70px; text-align:right; }
.boq .boq-desc { background:transparent; border:none; border-bottom:1px dashed transparent;
  color:var(--txt2); font-size:12px; outline:none; width:100%; transition:border-color .15s; }
.boq .boq-desc:focus { border-bottom-color:var(--b2); }
.del-btn { background:none; border:none; color:var(--txt3); cursor:pointer; padding:2px 6px; font-size:14px; border-radius:3px; transition:var(--trans); }
.del-btn:hover { color:var(--red); background:rgba(248,113,113,.1); }

/* ═══════════════════════════════════════
   MODAL
═══════════════════════════════════════ */
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:500;
  align-items:center; justify-content:center; }
.overlay.open { display:flex; }
.modal { background:var(--bg2); border:1px solid var(--b2); border-radius:var(--r);
  width:520px; max-height:85vh; overflow-y:auto; padding:24px; box-shadow:0 24px 80px rgba(0,0,0,.5); }
.modal-hd { display:flex; justify-content:space-between; align-items:center;
  font-family:var(--fd); font-size:16px; font-weight:700; margin-bottom:20px; }
.modal-close { background:none; border:none; color:var(--txt3); cursor:pointer; font-size:18px; padding:4px; border-radius:4px; }
.modal-close:hover { color:var(--txt); background:var(--bg3); }

/* ═══════════════════════════════════════
   LOGIN SCREEN
═══════════════════════════════════════ */
.login-wrap { display:none; position:fixed; inset:0; z-index:1000; }
.login-wrap.open { display:flex; }

/* Left panel — brand showcase */
.login-left {
  flex:0 0 58%; position:relative; overflow:hidden;
  background:#06060c; display:flex; align-items:center; justify-content:center;
}
.ll-glow { position:absolute; border-radius:50%; pointer-events:none; filter:blur(90px); }
.ll-glow--amber {
  width:600px; height:600px; top:-140px; left:-100px;
  background:radial-gradient(circle, rgba(245,158,11,.22) 0%, transparent 65%);
}
.ll-glow--blue {
  width:480px; height:480px; bottom:-120px; right:-60px;
  background:radial-gradient(circle, rgba(59,130,246,.16) 0%, transparent 65%);
}
.ll-grid {
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,.075) 1px, transparent 1px);
  background-size:28px 28px;
}
.ll-content {
  position:relative; z-index:1; padding:56px 64px; max-width:560px; width:100%;
  overflow-y:auto;
}
.ll-logo {
  font-family:var(--fd); font-size:11px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--accent); margin-bottom:36px;
  display:flex; align-items:center; gap:10px;
}
.ll-logo::before {
  content:''; display:block; width:28px; height:2px;
  background:var(--accent); border-radius:2px; flex-shrink:0;
}
.ll-headline {
  font-family:var(--fd); font-size:40px; font-weight:800; line-height:1.14;
  color:#fff; margin-bottom:16px; letter-spacing:-0.6px;
}
.ll-desc {
  font-size:13px; color:rgba(255,255,255,.42); line-height:1.8; margin-bottom:32px;
}
/* Platform content type pills */
.ll-features { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:36px; }
.ll-feat {
  font-size:11px; font-weight:600; letter-spacing:0.2px;
  color:rgba(255,255,255,.45); padding:5px 13px; border-radius:20px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
  display:inline-flex; align-items:center; gap:7px;
}
.ll-feat::before {
  content:''; display:block; width:5px; height:5px; border-radius:50%;
  background:var(--accent); flex-shrink:0;
}
.ll-brands-label {
  font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,.2); margin-bottom:12px;
}
.ll-brands { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:36px; }
.lb {
  border-radius:6px; font-weight:600; letter-spacing:0.2px; border:1px solid;
  transition:color .18s, border-color .18s, background .18s; cursor:default;
}
.lb--hi {
  font-size:12px; padding:6px 14px;
  color:rgba(245,158,11,.9); border-color:rgba(245,158,11,.28); background:rgba(245,158,11,.07);
}
.lb--md {
  font-size:11px; padding:5px 12px;
  color:rgba(255,255,255,.55); border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.03);
}
.lb--sm {
  font-size:10px; padding:4px 10px;
  color:rgba(255,255,255,.28); border-color:rgba(255,255,255,.06); background:transparent;
}
.lb:hover {
  color:rgba(245,158,11,.95) !important; border-color:rgba(245,158,11,.35) !important;
  background:rgba(245,158,11,.09) !important;
}
.ll-stats { display:flex; align-items:stretch; gap:0; }
.ll-stat { padding-right:24px; }
.ll-stat-sep { width:1px; background:rgba(255,255,255,.1); margin-right:24px; }
.ll-stat-num {
  font-family:var(--fd); font-size:22px; font-weight:800; color:#fff; line-height:1;
}
.ll-stat-lbl {
  font-size:9px; color:rgba(255,255,255,.3); text-transform:uppercase;
  letter-spacing:1px; margin-top:5px;
}

/* Right panel — login form */
.login-right {
  flex:1; display:flex; align-items:center; justify-content:center;
  background:#0a0a12; border-left:1px solid rgba(255,255,255,.05);
  overflow-y:auto; padding:40px 24px;
}
.login-box {
  width:360px; background:rgba(255,255,255,.015);
  border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:40px 36px;
}
.login-logo {
  font-family:var(--fd); font-size:13px; font-weight:700; text-align:center;
  letter-spacing:1.5px; color:rgba(255,255,255,.3); margin-bottom:24px;
}
.login-logo span { color:var(--accent); }
.login-welcome {
  font-family:var(--fd); font-size:26px; font-weight:800; color:#fff;
  letter-spacing:-0.5px; margin-bottom:6px;
}
.login-welcome-sub { font-size:13px; color:var(--txt3); margin-bottom:28px; }
/* Underline-style tabs */
.login-tabs {
  display:flex; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:28px;
}
.ltab {
  flex:1; padding:10px 4px 12px; background:transparent; border:none;
  border-bottom:2px solid transparent; color:var(--txt3); font-size:13px;
  font-weight:600; cursor:pointer; margin-bottom:-1px; text-align:center;
  transition:color .18s, border-color .18s;
}
.ltab.active { color:var(--accent); border-bottom-color:var(--accent); }
.ltab:hover:not(.active) { color:var(--txt2); }
.login-field { margin-bottom:16px; }
.login-error { background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3);
  color:#fca5a5; padding:9px 12px; border-radius:var(--r2); font-size:12px;
  margin-bottom:16px; display:none; }
/* Input icon wrapper */
.lf-wrap { position:relative; }
.lf-icon {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--txt3); font-size:15px; pointer-events:none; z-index:1; line-height:1;
}
.lf-inp { padding-left:38px !important; }
.lf-label-row {
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;
}
.lf-label-row .label { margin-bottom:0; }
.lf-forgot { font-size:11px; color:var(--accent); text-decoration:none; opacity:.7; transition:opacity .15s; }
.lf-forgot:hover { opacity:1; }
/* Gradient CTA button */
.btn-login-cta {
  display:block; width:100%; padding:12px 16px; border-radius:var(--r2); border:none;
  cursor:pointer; margin-top:8px; font-size:14px; font-weight:700; letter-spacing:0.3px;
  background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color:#000;
  transition:opacity .18s, transform .1s;
}
.btn-login-cta:hover { opacity:.88; }
.btn-login-cta:active { transform:scale(.99); }
.btn-login-cta:disabled { opacity:.5; cursor:default; transform:none; }
.login-demo-hint { text-align:center; margin-top:16px; font-size:11px; color:var(--txt3); }
@media (max-width:860px) {
  .login-left { display:none; }
  .login-right { flex:1; background:#06060c; }
  .login-box { border:none; background:transparent; padding:40px 24px; }
}

/* ═══════════════════════════════════════
   ANALYSIS PANEL
═══════════════════════════════════════ */
.diagram-container { background:var(--bg3); border-radius:var(--r); padding:20px; border:1px solid var(--b1); overflow:auto; min-height:400px; display:flex; justify-content:center; }
.mermaid { width:100%; height:100%; }
.power-card { background:var(--bg3); border-radius:var(--r); padding:16px; border:1px solid var(--b1); margin-top:16px; }
.power-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:10px; }
.p-stat { text-align:center; padding:10px; background:var(--bg2); border-radius:var(--r3); border:1px solid var(--b1); }
.p-val { font-family:var(--fd); font-size:16px; font-weight:700; color:var(--accent); }
.p-lbl { font-size:9px; color:var(--txt3); text-transform:uppercase; margin-top:2px; }
.score-ring { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.score-ring svg { transform:rotate(-90deg); }
.score-inner { position:absolute; text-align:center; }
.score-num { font-family:var(--fd); font-size:28px; font-weight:700; }
.score-lbl { font-size:10px; color:var(--txt3); }
.issue-item { display:flex; gap:10px; padding:8px 10px; border-radius:var(--r3);
  font-size:12px; line-height:1.5; margin-bottom:4px; }
.issue-error   { background:rgba(248,113,113,.08); color:#fca5a5; }
.issue-warning { background:rgba(245,158,11,.08); color:#fbbf24; }
.issue-info    { background:rgba(96,165,250,.08); color:#93c5fd; }
.issue-suggest { background:rgba(52,211,153,.08); color:#6ee7b7; }

/* ═══════════════════════════════════════
   DASHBOARD CARDS
═══════════════════════════════════════ */
.project-card-list { display:flex; flex-direction:column; gap:10px; }
.proj-card {
  background:var(--bg2); border:1px solid var(--b1); border-radius:var(--r);
  padding:16px 18px; display:flex; align-items:center; gap:16px;
  cursor:pointer; transition:var(--trans);
}
.proj-card:hover { border-color:var(--b3); background:var(--bg3); }
.proj-card--active { border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.04); }
.proj-card-icon { width:38px; height:38px; border-radius:8px;
  background:rgba(245,158,11,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.proj-card-title { font-weight:600; font-size:13px; }
.proj-card-sub { font-size:11px; color:var(--txt3); margin-top:2px; }
.proj-card-actions { margin-left:auto; display:flex; gap:6px; opacity:0; transition:opacity .15s; }
.proj-card:hover .proj-card-actions { opacity:1; }

/* ═══════════════════════════════════════
   TOAST
═══════════════════════════════════════ */
#toast {
  position:fixed; bottom:24px; right:24px; z-index:9999;
  background:var(--bg2); border:1px solid var(--b2); border-radius:var(--r2);
  padding:12px 18px; font-size:12px; font-weight:500;
  box-shadow:0 8px 32px rgba(0,0,0,.4); transition:all .3s;
  transform:translateY(20px); opacity:0; pointer-events:none; max-width:320px;
}
#toast.show { transform:translateY(0); opacity:1; }
#toast.t-success { border-color:rgba(52,211,153,.4); color:var(--green); }
#toast.t-error   { border-color:rgba(248,113,113,.4); color:var(--red); }
#toast.t-info    { border-color:rgba(96,165,250,.4);  color:var(--blue); }

/* ═══════════════════════════════════════
   THEME PICKER
═══════════════════════════════════════ */
.theme-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.theme-opt {
  border:2px solid var(--b2); border-radius:var(--r2); padding:10px;
  cursor:pointer; transition:var(--trans); text-align:center;
}
.theme-opt.active { border-color:var(--accent); }
.theme-swatches { display:flex; gap:3px; justify-content:center; margin-bottom:5px; }
.theme-swatch { width:14px; height:14px; border-radius:50%; }
.theme-opt-label { font-size:11px; font-weight:600; color:var(--txt2); }

/* ═══════════════════════════════════════
   MISC UTILS
═══════════════════════════════════════ */
.spin { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.skeleton { background:var(--bg3); border-radius:4px; animation:pulse 1.5s ease infinite; }
@keyframes pulse { 0%,100%{opacity:.6} 50%{opacity:1} }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.gap-8 { gap:8px; }
.mt-4 { margin-top:4px; }
.mb-14 { margin-bottom:14px; }
.mb-20 { margin-bottom:20px; }
.w-full { width:100%; }
.text-accent { color:var(--accent); }
.text-muted  { color:var(--txt2); }
.text-hint   { color:var(--txt3); font-size:11px; }
.font-mono   { font-family:var(--fd); font-weight:600; }
.auto-save-indicator { font-size:10px; color:var(--txt3); display:flex; align-items:center; gap:4px; }
.pulse-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 2s ease infinite; }

@media(max-width:900px) {
  .sidebar { width:56px; }
  .sb-logomark, .sb-sub, .sb-item span, .user-name, .user-role, .sb-section { display:none; }
  .sb-item { justify-content:center; padding:10px; }
  .user-card { justify-content:center; }
  .main { margin-left:56px; }
  .grid4 { grid-template-columns:1fr 1fr; }
  .zone-editor-body { grid-template-columns:1fr 1fr; }
  .ze-col { border-right:none; border-bottom:1px solid var(--b1); }
  .ze-col:nth-child(odd) { border-right:1px solid var(--b1); }
}

/* ═══════════════════════════════════════
   19" CABINET SYSTEM RACK STYLING
   ═══════════════════════════════════════ */
.device-chassis {
  display: flex;
  width: 100%;
  background: #111317;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
.rack-ear {
  width: 20px;
  background: linear-gradient(90deg, #2d323f, #1e222b);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-right: 1px solid rgba(0,0,0,0.4);
  flex-shrink: 0;
  box-sizing: border-box;
}
.ear-right {
  border-right: none;
  border-left: 1px solid rgba(0,0,0,0.4);
  background: linear-gradient(270deg, #2d323f, #1e222b);
}
.ear-screw {
  border-radius: 50%;
  background: radial-gradient(circle, #8a94a6 20%, #404652 70%);
  border: 1px solid #1a1c23;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3);
}
.faceplate-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-left: 1px solid rgba(255,255,255,0.05);
  border-right: 1px solid rgba(255,255,255,0.05);
  box-sizing: border-box;
}
.device-brand-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--fd);
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  text-transform: uppercase;
  box-sizing: border-box;
}
.device-brand-novastar { background: linear-gradient(90deg, #c79a00, #5c4700); }
.device-brand-bose     { background: linear-gradient(90deg, #d35400, #873600); }
.device-brand-icron    { background: linear-gradient(90deg, #8e44ad, #5b2c6f); }
.device-brand-dell     { background: linear-gradient(90deg, #2980b9, #1c5980); }
.device-brand-generic  { background: linear-gradient(90deg, #7f8c8d, #34495e); }

.device-spec-row {
  display: flex;
  justify-content: space-between;
  color: var(--txt3);
  font-weight: 600;
  box-sizing: border-box;
}
.ports-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
}
.socket {
  font-size: 7px;
  font-weight: 700;
  padding: 1px 3px;
  border-radius: 2px;
  text-align: center;
  cursor: help;
  user-select: none;
  box-sizing: border-box;
}
.socket-hdmi    { background: #FFE6EE; color: #D9537F; border: 1px solid #D9537F; clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%); }
.socket-dp      { background: #E8F4FD; color: #2F80ED; border: 1px solid #2F80ED; clip-path: polygon(0% 0%, 90% 0%, 100% 30%, 100% 100%, 0% 100%); }
.socket-lan     { background: #EBF3F9; color: #2D9CDB; border: 1px solid #2D9CDB; border-radius: 1px; }
.socket-usb     { background: #e0fcfc; color: #008b8b; border: 1px solid #008b8b; }
.socket-phoenix { background: #E6F4EA; color: #137333; border: 1px solid #137333; }
.socket-power   { background: #333; color: #eee; border: 1px solid #111; }