/* ============================================================
   DATACENTER BUILDER — Blueprint UI
   ============================================================ */
:root {
  --bg-0:#04070f; --bg-1:#060d1c;
  --cyan:#46d4ff; --cyan-dim:#2b93c4; --cyan-soft:rgba(70,212,255,.55);
  --amber:#ffcf6b; --red:#ff6b6b; --green:#5be0a0;
  --line:rgba(70,212,255,.20); --line-2:rgba(70,212,255,.42);
  --panel:rgba(7,15,29,.86); --panel-2:rgba(9,20,38,.72);
  --text:#cfeaff; --dim:#6f93b3; --white:#eaf7ff;
  --glow:0 0 12px rgba(70,212,255,.32);
  --font:"SFMono-Regular","JetBrains Mono","Consolas","Roboto Mono",ui-monospace,monospace;
  --exp:280px; --insp:320px; --top:56px; --bot:38px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { width:100%; height:100%; overflow:hidden; font-family:var(--font);
  color:var(--text); background:radial-gradient(ellipse at 50% 40%,#0a1830,var(--bg-1) 46%,var(--bg-0) 100%);
  -webkit-font-smoothing:antialiased; user-select:none; }
button { font-family:var(--font); cursor:pointer; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:rgba(70,212,255,.2); }
::-webkit-scrollbar-track { background:transparent; }

#viewport { position:fixed; inset:0; z-index:1; }
#viewport canvas { display:block; }
.label-layer { position:fixed; inset:0; z-index:2; pointer-events:none; }

/* Blueprint overlay */
#bp-overlay { position:fixed; inset:0; z-index:3; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px; opacity:.10;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 45%,transparent 90%);
  mask-image:radial-gradient(ellipse at center,#000 45%,transparent 90%); }
.corner { position:absolute; width:22px; height:22px; border:1px solid var(--cyan-soft); opacity:.6; }
.corner.tl{top:calc(var(--top) + 10px);left:calc(var(--exp) + 12px);border-right:0;border-bottom:0;}
.corner.tr{top:calc(var(--top) + 10px);right:calc(var(--insp) + 12px);border-left:0;border-bottom:0;}
.corner.bl{bottom:calc(var(--bot) + 10px);left:calc(var(--exp) + 12px);border-right:0;border-top:0;}
.corner.br{bottom:calc(var(--bot) + 10px);right:calc(var(--insp) + 12px);border-left:0;border-top:0;}

/* ---------- Top bar ---------- */
#topbar { position:fixed; top:0; left:0; right:0; height:var(--top); z-index:10;
  display:flex; align-items:center; gap:14px; padding:0 16px;
  background:var(--panel); border-bottom:1px solid var(--line-2); backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; gap:10px; padding-right:6px; flex:none; }
.brand-mark { width:26px; height:26px; border:1px solid var(--cyan); position:relative; box-shadow:var(--glow); flex:none; }
.brand-mark::before,.brand-mark::after { content:""; position:absolute; background:var(--cyan); }
.brand-mark::before { left:50%; top:5px; bottom:5px; width:1px; transform:translateX(-50%); }
.brand-mark::after { top:50%; left:5px; right:5px; height:1px; transform:translateY(-50%); }
.brand-text { white-space:nowrap; }
.brand-text h1 { font-size:15px; letter-spacing:3px; color:var(--white); font-weight:700; text-shadow:var(--glow); white-space:nowrap; }
.brand-text h1 .brand-full { font-size:11px; letter-spacing:2px; font-weight:600; color:var(--cyan-dim); }
@media (max-width:700px){ .brand-text h1 .brand-full { display:none; } }
.brand-text p { font-size:9px; letter-spacing:1.5px; color:var(--dim); margin-top:2px; }
.tb-sep { width:1px; height:26px; background:var(--line-2); }
.tb-spacer { flex:1; }

/* ---------- Menubar with dropdown submenus ---------- */
.menubar { display:flex; align-items:center; gap:2px; margin-left:6px; }
.menu { position:relative; }
.menu-btn {
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px;
  background:transparent; border:1px solid transparent; color:var(--text);
  font-family:var(--font); font-size:11px; letter-spacing:2px; font-weight:600; transition:all .14s;
}
.menu-btn .caret { width:9px; height:6px; fill:none; stroke:currentColor; stroke-width:1.4; opacity:.6; transition:transform .18s; }
.menu-btn:hover { background:rgba(70,212,255,.08); color:var(--white); }
.menu.open > .menu-btn { background:rgba(70,212,255,.14); border-color:var(--line-2); color:var(--white); box-shadow:inset 0 0 14px rgba(70,212,255,.08); }
.menu.open > .menu-btn .caret { transform:rotate(180deg); opacity:1; }

.menu-drop {
  position:absolute; top:calc(100% + 6px); left:0; min-width:200px; z-index:20;
  background:var(--panel-solid); border:1px solid var(--line-2);
  box-shadow:0 10px 34px rgba(0,0,0,.55), inset 0 0 22px rgba(70,212,255,.05);
  padding:5px; display:none; animation:menu-in .14s ease;
}
.menu-drop.wide { min-width:220px; }
.menu.open > .menu-drop { display:block; }
@keyframes menu-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

.menu-item {
  display:flex; align-items:center; gap:9px; width:100%; height:32px; padding:0 11px;
  background:transparent; border:none; border-left:2px solid transparent;
  color:var(--text); font-family:var(--font); font-size:11.5px; letter-spacing:.6px;
  text-align:left; cursor:pointer; transition:all .12s; white-space:nowrap;
}
.menu-item:hover { background:rgba(70,212,255,.12); border-left-color:var(--cyan); color:var(--white); }
.menu-item .hint {
  margin-left:auto; font-size:9px; letter-spacing:1px; color:var(--dim);
  border:1px solid var(--line); border-radius:2px; padding:1px 5px; min-width:16px; text-align:center;
}
.menu-item:hover .hint { color:var(--cyan); border-color:var(--cyan-soft); }
.menu-item.danger:hover { background:rgba(255,107,107,.14); border-left-color:var(--red); color:var(--red); }
.menu-sep { height:1px; margin:4px 6px; background:var(--line); }

/* toggle rows inside a menu */
.menu-item.tgi i {
  width:12px; height:12px; flex:none; border:1px solid var(--cyan-dim); border-radius:2px; position:relative; transition:all .12s;
}
.menu-item.tgi.active i { background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 7px var(--cyan); }
.menu-item.tgi.active i::after { content:""; position:absolute; left:3px; top:0; width:4px; height:8px; border:solid var(--bg-0); border-width:0 2px 2px 0; transform:rotate(40deg); }
.menu-item.tgi.active { color:var(--white); }

.tb-btn.primary-ai { flex:none; }
@media (max-width:640px){ .tb-btn.primary-ai span { display:inline; } .menu-btn { padding:0 10px; letter-spacing:1px; } }
.tb-group { display:flex; align-items:center; gap:6px; }
.tb-group.toggles { margin-left:auto; }
.tb-btn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 11px;
  background:rgba(70,212,255,.06); border:1px solid var(--line-2); color:var(--text);
  font-size:10px; letter-spacing:1.5px; font-weight:600; transition:all .15s; }
.tb-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tb-btn:hover { background:rgba(70,212,255,.16); border-color:var(--cyan); color:var(--white); box-shadow:var(--glow); }
.tb-btn:active { transform:translateY(1px); }
.tb-btn.ghost { background:transparent; padding:0 9px; }
.tb-btn.mini { height:28px; padding:0 9px; font-size:9px; letter-spacing:1px; }
.tb-group.views { gap:3px; }
.tb-btn.danger:hover { border-color:var(--red); color:var(--red); box-shadow:0 0 12px rgba(255,107,107,.3); }
.tg { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 9px; background:transparent;
  border:1px solid var(--line); color:var(--dim); font-size:9px; letter-spacing:1.5px; transition:all .15s; }
.tg i { width:8px; height:8px; border:1px solid var(--cyan-dim); transition:all .15s; }
.tg.active { color:var(--white); border-color:var(--line-2); }
.tg.active i { background:var(--cyan); box-shadow:0 0 7px var(--cyan); border-color:var(--cyan); }
.tg:hover { border-color:var(--cyan); color:var(--text); }
/* REALISTIC toggle gets an amber accent when engaged */
.tg.solid.active { color:#ffe6b0; border-color:rgba(255,207,107,.6); }
.tg.solid.active i { background:var(--amber); box-shadow:0 0 7px var(--amber); border-color:var(--amber); }

/* Realistic render mode: dim the blueprint chrome for a cleaner solid look */
body.realistic { background:radial-gradient(ellipse at 50% 42%,#111925,#080d15 55%,#03060b 100%); }
body.realistic #bp-overlay { opacity:0; }
body.realistic .lbl-enc { background:rgba(10,16,24,.82); border-bottom-color:#8fb8d6; }
body.realistic .lbl-rack { background:rgba(10,16,24,.6); }

/* ---------- Breadcrumb ---------- */
#breadcrumb {
  position: fixed; top: calc(var(--top) + 10px); left: 50%; transform: translateX(-50%);
  z-index: 8; display: flex; align-items: center; gap: 2px;
  max-width: calc(100vw - var(--exp) - var(--insp) - 60px);
  padding: 5px 8px; background: var(--panel); border: 1px solid var(--line-2);
  backdrop-filter: blur(10px); box-shadow: inset 0 0 16px rgba(70,212,255,.05);
  overflow: hidden;
}
#breadcrumb .crumb {
  background: none; border: none; color: var(--dim); font-family: var(--font);
  font-size: 10px; letter-spacing: 1.5px; padding: 3px 7px; white-space: nowrap;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; transition: color .15s;
}
#breadcrumb .crumb:hover { color: var(--cyan); }
#breadcrumb .crumb.cur { color: var(--white); text-shadow: var(--glow); }
#breadcrumb .cr-sep { color: var(--cyan-dim); opacity: .55; font-size: 11px; flex: none; }
#breadcrumb .cr-arrows { display: flex; gap: 2px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--line); flex: none; }
#breadcrumb .cr-arrows button {
  width: 20px; height: 20px; background: rgba(70,212,255,.06); border: 1px solid var(--line-2);
  color: var(--text); font-size: 13px; line-height: 1; transition: all .15s;
}
#breadcrumb .cr-arrows button:hover { border-color: var(--cyan); color: var(--white); box-shadow: var(--glow); }
@media (max-width: 820px) { #breadcrumb { max-width: calc(100vw - 24px); } }

/* ---------- Side panels ---------- */
#explorer,#inspector { position:fixed; top:var(--top); bottom:var(--bot); z-index:9;
  background:var(--panel); backdrop-filter:blur(10px); display:flex; flex-direction:column; }
#explorer { left:0; width:var(--exp); border-right:1px solid var(--line-2); }
#inspector { right:0; width:var(--insp); border-left:1px solid var(--line-2); }
.panel-head { display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; border-bottom:1px solid var(--line); font-size:10px; letter-spacing:2.5px; color:var(--cyan); }
.panel-head .count,.panel-head .badge { font-size:9px; color:var(--bg-0); background:var(--cyan); padding:1px 7px; letter-spacing:1px; font-weight:700; }
.panel-head .badge { background:var(--dim); }

/* ---------- AI Build toolbar button ---------- */
.tb-btn.accent { border-color: rgba(255,207,107,.55); color: #ffe6b0; }
.tb-btn.accent:hover { border-color: var(--amber); color: #fff4dc; box-shadow: 0 0 12px rgba(255,207,107,.3); background: rgba(255,207,107,.12); }

/* ---------- Text Build panel (slide-in, left) ---------- */
#build {
  position: fixed; top: var(--top); bottom: var(--bot); left: 0;
  width: 360px; z-index: 13;
  background: var(--panel-solid); border-right: 1px solid rgba(255,207,107,.5);
  backdrop-filter: blur(12px); box-shadow: 6px 0 30px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
#build.closed { transform: translateX(-104%); pointer-events: none; }
#build .head-sub { color: var(--amber); font-size: 9px; letter-spacing: 1px; }
.build-status { padding: 7px 14px; font-size: 10px; letter-spacing: .5px; border-bottom: 1px solid var(--line); color: var(--dim); }
.build-status.ok { color: var(--green); }
.build-status.warn { color: var(--amber); }
.build-body { flex: 1; overflow-y: auto; padding: 12px; }
.build-label { display: block; font-size: 9px; letter-spacing: 2px; color: var(--dim); margin-bottom: 6px; }
#build-input {
  width: 100%; min-height: 92px; resize: vertical; padding: 10px;
  background: rgba(4,10,20,.7); border: 1px solid var(--line-2); color: var(--white);
  font-family: var(--font); font-size: 12px; line-height: 1.5; letter-spacing: .3px;
}
#build-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 12px rgba(255,207,107,.25); }
.build-examples { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0; }
.build-examples button {
  background: rgba(70,212,255,.06); border: 1px solid var(--line); color: var(--dim);
  font-family: var(--font); font-size: 9px; letter-spacing: .5px; padding: 4px 8px; cursor: pointer; transition: all .12s;
}
.build-examples button:hover { border-color: var(--cyan); color: var(--text); }
.build-hint { font-size: 9px; color: var(--dim); text-align: center; margin-top: 6px; }
.build-preview { margin-top: 12px; }
.bp-empty { padding: 16px 6px; font-size: 11px; line-height: 1.6; color: var(--dim); text-align: center; }
.bp-empty .dimtext { color: var(--red); font-size: 10px; }
.bp-summary { font-size: 10px; letter-spacing: 1px; color: var(--cyan); padding: 8px 0; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.bp-summary .bp-ai { color: var(--amber); }
.bp-list { display: flex; flex-direction: column; gap: 2px; }
.bp-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(4,10,20,.5); border-left: 2px solid var(--cyan-soft); font-size: 11px; }
.bp-row.warn { border-left-color: var(--amber); }
.bp-row.danger { border-left-color: var(--red); background: rgba(40,10,14,.5); }
.bp-op { font-size: 8px; letter-spacing: 1px; color: var(--dim); width: 62px; flex: none; }
.bp-label { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-flag { color: var(--amber); flex: none; }
.bp-warnings { margin-top: 8px; padding: 8px; border: 1px solid rgba(255,207,107,.35); font-size: 10px; line-height: 1.6; color: var(--amber); }
.bp-buttons { display: flex; gap: 8px; margin-top: 12px; }
.bp-buttons .btn-primary { flex: 1; }
.bp-buttons .btn-line { width: 80px; margin-top: 0; }
@media (max-width: 820px) { #build { width: 88vw; } }

/* ---------- Component Library (slide-in) ---------- */
#library {
  position: fixed; top: var(--top); bottom: var(--bot); left: 0;
  width: 340px; z-index: 12;
  background: var(--panel-solid); border-right: 1px solid var(--cyan-soft);
  backdrop-filter: blur(12px); box-shadow: 6px 0 30px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
#library.closed { transform: translateX(-104%); pointer-events: none; }
.lib-close { background: none; border: none; color: var(--dim); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.lib-close:hover { color: var(--red); }
.lib-target { padding: 8px 14px; font-size: 10px; letter-spacing: 1px; color: var(--cyan); border-bottom: 1px solid var(--line); }
.lib-target.warn { color: var(--amber); }
.lib-search { position: relative; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.lib-search svg { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; fill: none; stroke: var(--dim); stroke-width: 1.8; }
.lib-search input {
  width: 100%; height: 34px; padding: 0 10px 0 32px;
  background: rgba(4,10,20,.7); border: 1px solid var(--line-2); color: var(--white);
  font-family: var(--font); font-size: 12px; letter-spacing: .5px;
}
.lib-search input:focus { outline: none; border-color: var(--cyan); box-shadow: var(--glow); }
.lib-list { flex: 1; overflow-y: auto; padding: 6px 6px 14px; }
.lib-grp {
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 1;
  padding: 8px 8px 5px; margin-top: 4px;
  font-size: 9px; letter-spacing: 2px; color: var(--cyan);
  background: var(--panel-solid); border-bottom: 1px solid var(--line);
}
.lib-grp span { color: var(--dim); font-size: 8px; letter-spacing: 1px; }
.lib-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; margin: 2px 0;
  background: transparent; border: 1px solid transparent; border-radius: 2px;
  color: var(--text); font-family: var(--font); font-size: 11px; letter-spacing: .3px;
  text-align: left; cursor: pointer; transition: all .12s;
}
.lib-item:hover { background: rgba(70,212,255,.1); border-color: var(--cyan-soft); }
.lib-item:active { transform: translateY(1px); }
.lib-item:disabled { opacity: .4; cursor: not-allowed; }
.lib-item .li-chip { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 6px currentColor; }
.lib-item .li-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-item .li-u { color: var(--cyan); font-size: 10px; flex: none; }
.lib-item:hover .li-name { color: var(--white); }
.lib-empty { padding: 24px 14px; font-size: 11px; color: var(--dim); text-align: center; }
@media (max-width: 820px) { #library { width: 86vw; } }

/* ---------- Tree ---------- */
.tree { flex:1; overflow-y:auto; padding:8px 6px; }
.node { display:flex; align-items:center; gap:5px; padding:5px 6px; font-size:11px; letter-spacing:.5px;
  color:var(--text); border:1px solid transparent; cursor:pointer; border-radius:2px; }
.node:hover { background:rgba(70,212,255,.07); }
.node.sel { background:rgba(70,212,255,.14); border-color:var(--cyan-soft); box-shadow:inset 0 0 0 1px rgba(70,212,255,.15); }
.node .tw { width:14px; text-align:center; color:var(--dim); flex:none; font-size:9px; }
.node .tw-t { cursor:pointer; border-radius:2px; }
.node .tw-t:hover { color:var(--cyan); background:rgba(70,212,255,.14); }
.node .ic { width:14px; height:14px; flex:none; opacity:.85; }
.node .ic svg { width:14px; height:14px; fill:none; stroke:var(--cyan); stroke-width:1.5; }
.node .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.node .tag { font-size:8px; color:var(--dim); letter-spacing:1px; }
.node .del { opacity:0; color:var(--dim); font-size:14px; padding:0 3px; line-height:1; border:none; background:none; }
.node:hover .del { opacity:1; }
.node .del:hover { color:var(--red); }
.node.lvl1 { margin-left:0; }
.node.lvl2 { margin-left:16px; }
.node.lvl3 { margin-left:32px; font-size:10px; color:var(--dim); }
.node.lvl3 .ic svg { stroke:var(--cyan-dim); }
.tree-empty { padding:20px 14px; font-size:11px; line-height:1.7; color:var(--dim); }

/* ---------- Inspector body / forms ---------- */
.insp-body { flex:1; overflow-y:auto; padding:14px; }
.insp-empty { font-size:11.5px; line-height:1.75; color:var(--dim); }
.field { margin-bottom:12px; }
.field > label { display:block; font-size:9px; letter-spacing:2px; color:var(--dim); margin-bottom:5px; }
.field input[type=text],.field input[type=number],.field select {
  width:100%; height:32px; padding:0 9px; background:rgba(4,10,20,.7);
  border:1px solid var(--line-2); color:var(--white); font-family:var(--font); font-size:12px; letter-spacing:.5px; }
.field input:focus,.field select:focus { outline:none; border-color:var(--cyan); box-shadow:var(--glow); }
.field-row { display:flex; gap:8px; }
.field-row .field { flex:1; }
.chk { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text); cursor:pointer; margin-bottom:12px; }
.chk input { width:14px; height:14px; accent-color:var(--cyan); }

.btn-primary,.btn-line { width:100%; height:34px; font-size:10px; letter-spacing:2px; font-weight:600; transition:all .15s; }
.btn-primary { background:rgba(70,212,255,.14); border:1px solid var(--cyan); color:var(--white); margin-top:4px; }
.btn-primary:hover { background:rgba(70,212,255,.26); box-shadow:var(--glow); }
.btn-line { background:transparent; border:1px solid var(--line-2); color:var(--text); margin-top:8px; }
.btn-line:hover { border-color:var(--cyan); color:var(--white); }
.btn-line.danger:hover { border-color:var(--red); color:var(--red); }

.insp-sec { margin:16px 0 10px; padding-top:14px; border-top:1px solid var(--line); font-size:9px; letter-spacing:2.5px; color:var(--cyan); }
.insp-sec:first-child { border-top:none; padding-top:0; margin-top:0; }
.meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.meta { border:1px solid var(--line); padding:7px 9px; }
.meta span { display:block; font-size:8px; letter-spacing:1.5px; color:var(--dim); }
.meta b { display:block; margin-top:3px; font-size:13px; color:var(--cyan); font-weight:600; }
.insp-desc { font-size:11px; line-height:1.6; color:var(--dim); margin:6px 0 10px; }

/* device list inside rack inspector */
.dev-list { display:flex; flex-direction:column; gap:3px; margin-bottom:6px; max-height:180px; overflow-y:auto; }
.dev-row { display:flex; align-items:center; gap:8px; padding:5px 8px; background:rgba(4,10,20,.5);
  border:1px solid var(--line); font-size:10px; cursor:pointer; }
.dev-row:hover { border-color:var(--cyan-soft); background:rgba(70,212,255,.07); }
.dev-row .u { color:var(--cyan); width:52px; flex:none; letter-spacing:.5px; }
.dev-row .dn { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.dev-row .x { color:var(--dim); font-size:13px; line-height:1; padding:0 2px; }
.dev-row .x:hover { color:var(--red); }
.slotmap { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; margin:8px 0 10px; }
.warn { color:var(--amber); font-size:10px; letter-spacing:.5px; margin-top:6px; }

/* ---------- Status bar ---------- */
#statusbar { position:fixed; left:0; right:0; bottom:0; height:var(--bot); z-index:10;
  display:flex; align-items:center; gap:22px; padding:0 16px;
  background:var(--panel); border-top:1px solid var(--line-2); backdrop-filter:blur(10px); }
.st-item { display:flex; align-items:baseline; gap:7px; font-size:9px; letter-spacing:2px; color:var(--dim); }
.st-item b { font-size:13px; color:var(--cyan); letter-spacing:1px; font-weight:600; text-shadow:var(--glow); }
.st-spacer { flex:1; }
.st-hint { font-size:9px; letter-spacing:1.5px; color:var(--dim); opacity:.75; }

/* ---------- Tooltip ---------- */
#tooltip { position:fixed; z-index:14; pointer-events:none; background:rgba(6,16,32,.94);
  border:1px solid var(--cyan-soft); padding:6px 10px; transform:translate(14px,14px); box-shadow:var(--glow); transition:opacity .1s; }
#tooltip.hidden { opacity:0; }
#tooltip .tt-k { display:block; font-size:8px; letter-spacing:2px; color:var(--cyan); }
#tooltip .tt-n { display:block; margin-top:2px; font-size:12px; letter-spacing:1px; color:var(--white); }

/* ---------- CSS2D labels ---------- */
.lbl { font-family:var(--font); white-space:nowrap; pointer-events:none; text-shadow:0 0 6px rgba(70,212,255,.4); transition:opacity .2s; }
.lbl-enc { font-size:12px; letter-spacing:2px; color:var(--white); padding:3px 9px; background:rgba(6,16,32,.7);
  border:1px solid var(--line-2); border-bottom:2px solid var(--cyan); }
.lbl-rack { font-size:9px; letter-spacing:1px; color:var(--text); padding:2px 6px; background:rgba(6,16,32,.6); border:1px solid var(--line); }
.lbl.hot { color:var(--white); border-color:var(--cyan); background:rgba(10,26,48,.9); }

/* ---------- Project status + user menu (topbar) ---------- */
.proj-status { display:flex; align-items:center; gap:8px; padding:0 12px; margin-right:4px; white-space:nowrap; }
.proj-label { font-size:9px; letter-spacing:2px; color:var(--dim); }
#proj-name { font-size:12px; letter-spacing:1px; color:var(--white); max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.save-status { font-size:9px; letter-spacing:1px; padding:2px 6px; border:1px solid var(--line); }
.save-status.saved { color:var(--green); border-color:rgba(91,224,160,.3); }
.save-status.saving { color:var(--dim); }
.save-status.error { color:var(--red); border-color:rgba(255,107,107,.4); }
.user-btn { gap:8px; }
.uc-avatar { width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),#2b6f9e); flex:none; box-shadow:0 0 8px rgba(70,212,255,.3); }
.user-btn .uc-email { font-size:11px; letter-spacing:.5px; color:var(--text); max-width:160px; overflow:hidden; text-overflow:ellipsis; text-transform:none; }
@media (max-width:1100px){ .proj-status .proj-label{display:none} .user-btn .uc-email{display:none} }

/* ---------- Auth overlay ---------- */
#auth-overlay { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 35%,#0a1830,#060d1c 46%,#03060b 100%); }
#auth-overlay.hidden { display:none; }
#auth-overlay::before { content:""; position:absolute; inset:0; opacity:.1; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 40%,transparent 88%); mask-image:radial-gradient(ellipse at center,#000 40%,transparent 88%); }
.auth-card { position:relative; width:360px; max-width:92vw; padding:26px 26px 20px; background:var(--panel-solid);
  border:1px solid var(--cyan-soft); box-shadow:var(--glow),0 20px 60px rgba(0,0,0,.6); }
.auth-brand { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.auth-brand h1 { font-size:22px; letter-spacing:4px; color:var(--white); font-weight:700; text-shadow:var(--glow); }
.auth-brand p { font-size:9px; letter-spacing:2px; color:var(--dim); margin-top:2px; }
.auth-tabs { display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.auth-tabs button { flex:1; background:none; border:none; border-bottom:2px solid transparent; color:var(--dim);
  font-family:var(--font); font-size:11px; letter-spacing:1.5px; padding:9px 0; cursor:pointer; transition:all .15s; }
.auth-tabs button.active { color:var(--white); border-bottom-color:var(--cyan); }
.auth-tabs button:hover { color:var(--text); }
#auth-form { display:flex; flex-direction:column; gap:12px; }
#auth-form label { display:flex; flex-direction:column; gap:5px; font-size:9px; letter-spacing:2px; color:var(--dim); }
#auth-form input { height:38px; padding:0 11px; background:rgba(4,10,20,.7); border:1px solid var(--line-2);
  color:var(--white); font-family:var(--font); font-size:13px; letter-spacing:.5px; }
#auth-form input:focus { outline:none; border-color:var(--cyan); box-shadow:var(--glow); }
.auth-error { min-height:14px; font-size:11px; color:var(--red); letter-spacing:.3px; }
#auth-form .btn-primary { height:40px; margin-top:2px; }
.auth-note { margin-top:14px; font-size:10px; color:var(--dim); text-align:center; letter-spacing:.5px; }

/* ---------- Dashboard (full-screen folders + project cards) ---------- */
#dashboard { position:fixed; inset:0; z-index:56; display:flex;
  background:radial-gradient(ellipse at 30% 0%,#0b1a30,#060d1c 48%,#03060b 100%); }
#dashboard.hidden { display:none; }
#dashboard::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.08;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 40% 30%,#000 40%,transparent 90%); mask-image:radial-gradient(ellipse at 40% 30%,#000 40%,transparent 90%); }

.dash-side { position:relative; width:260px; flex:none; display:flex; flex-direction:column;
  background:rgba(6,13,26,.7); border-right:1px solid var(--line-2); backdrop-filter:blur(8px); }
.dash-brand { display:flex; align-items:center; gap:12px; padding:20px 20px 16px; }
.dash-brand h1 { font-size:20px; letter-spacing:4px; color:var(--white); font-weight:700; text-shadow:var(--glow); }
.dash-brand p { font-size:8px; letter-spacing:2px; color:var(--dim); margin-top:3px; }
.dash-side-head { display:flex; align-items:center; justify-content:space-between; padding:10px 18px 8px;
  font-size:9px; letter-spacing:2.5px; color:var(--cyan); border-top:1px solid var(--line); }
.dash-side-head button { width:22px; height:22px; background:rgba(70,212,255,.08); border:1px solid var(--line-2);
  color:var(--text); font-size:15px; line-height:1; cursor:pointer; transition:all .14s; }
.dash-side-head button:hover { border-color:var(--cyan); color:var(--white); box-shadow:var(--glow); }
.dash-files { flex:1; overflow-y:auto; padding:6px 10px; }
.dash-file { display:flex; align-items:center; gap:8px; padding:10px 12px; margin:2px 0; font-size:12px; letter-spacing:.4px;
  border:1px solid transparent; border-left:2px solid transparent; cursor:pointer; transition:all .12s; }
.dash-file:hover { background:rgba(70,212,255,.07); }
.dash-file.sel { background:rgba(70,212,255,.14); border-left-color:var(--cyan); box-shadow:inset 0 0 0 1px rgba(70,212,255,.12); }
.dash-file .df-ic { width:15px; height:15px; flex:none; opacity:.85; }
.dash-file .df-ic svg { width:15px; height:15px; fill:none; stroke:var(--cyan); stroke-width:1.5; }
.dash-file .df-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.dash-file .df-cnt { font-size:9px; color:var(--dim); padding:1px 6px; border:1px solid var(--line); }
.dash-file .df-x { background:none; border:none; color:var(--dim); font-size:14px; padding:0 2px; cursor:pointer; opacity:0; }
.dash-file:hover .df-x { opacity:1; } .df-x:hover { color:var(--red); }
.dash-user { display:flex; align-items:center; gap:10px; padding:14px 18px; border-top:1px solid var(--line); }
.dash-user .uc-avatar { width:26px; height:26px; }
.dash-email { flex:1; font-size:11px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-user button { background:none; border:1px solid var(--line-2); color:var(--dim); width:28px; height:28px; cursor:pointer; transition:all .14s; }
.dash-user button:hover { border-color:var(--red); color:var(--red); }

.dash-main { position:relative; flex:1; display:flex; flex-direction:column; min-width:0; }
.dash-head { display:flex; align-items:flex-end; justify-content:space-between; padding:32px 40px 20px; }
.dash-title h2 { font-size:24px; letter-spacing:1px; color:var(--white); font-weight:600; }
.dash-title p { margin-top:6px; font-size:11px; letter-spacing:1.5px; color:var(--dim); }
.dash-head-acts { display:flex; gap:10px; align-items:center; }
.dash-head-acts .btn-line, .dash-head-acts .btn-primary { width:auto; padding:0 18px; height:38px; margin:0; }
.dash-grid { flex:1; overflow-y:auto; padding:8px 40px 40px; display:grid; align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.dash-card { position:relative; display:flex; flex-direction:column; text-align:left; cursor:pointer;
  background:var(--panel); border:1px solid var(--line-2); overflow:hidden; transition:all .16s; font-family:var(--font); padding:0; }
.dash-card:hover { border-color:var(--cyan); box-shadow:var(--glow),0 12px 30px rgba(0,0,0,.4); transform:translateY(-2px); }
.card-thumb { height:96px; position:relative; background:linear-gradient(160deg,#0c1b30,#081120); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.card-thumb::after { content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:16px 16px; }
.card-thumb svg { position:relative; width:46px; height:46px; fill:none; stroke:var(--cyan); stroke-width:1.2; opacity:.85; filter:drop-shadow(0 0 6px rgba(70,212,255,.4)); }
.card-body { padding:12px 14px 14px; }
.card-name { font-size:14px; letter-spacing:.5px; color:var(--white); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-stats { display:flex; gap:12px; margin-top:9px; }
.card-stats .cs { font-size:9px; letter-spacing:1px; color:var(--dim); }
.card-stats .cs b { display:block; font-size:14px; color:var(--cyan); font-weight:600; margin-bottom:1px; }
.card-foot { margin-top:11px; font-size:9px; letter-spacing:1px; color:var(--dim); }
.card-acts { position:absolute; top:8px; right:8px; display:flex; gap:3px; opacity:0; transition:opacity .12s; }
.dash-card:hover .card-acts { opacity:1; }
.card-acts button { width:24px; height:24px; background:rgba(6,14,28,.85); border:1px solid var(--line-2); color:var(--dim); font-size:12px; line-height:1; cursor:pointer; }
.card-acts button:hover { color:var(--cyan); border-color:var(--cyan); }
.card-acts button.del:hover { color:var(--red); border-color:var(--red); }
.dash-card.new { align-items:center; justify-content:center; min-height:196px; border-style:dashed; color:var(--dim); }
.dash-card.new:hover { color:var(--white); transform:translateY(-2px); }
.dash-card.new .plus { font-size:30px; font-weight:200; }
.dash-card.new span { display:block; }
.dash-card.new small { font-size:10px; letter-spacing:1.5px; margin-top:6px; display:block; }
.dash-empty { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:70px 20px; text-align:center; color:var(--dim); }
.dash-empty .de-ic { width:52px; height:52px; margin-bottom:18px; opacity:.55; }
.dash-empty .de-ic svg { width:52px; height:52px; fill:none; stroke:var(--cyan); stroke-width:1; filter:drop-shadow(0 0 8px rgba(70,212,255,.3)); }
.dash-empty .de-title { font-size:16px; letter-spacing:.5px; color:var(--white); }
.dash-empty .de-sub { font-size:12px; line-height:1.6; color:var(--dim); max-width:340px; margin:10px 0 20px; }
.dash-empty .btn-primary { width:auto; padding:0 22px; height:40px; }
.dash-head-acts .btn-primary:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }

/* danger primary (destructive confirm) */
.btn-primary.danger { background:rgba(255,107,107,.16); border-color:var(--red); color:#ffd9d9; }
.btn-primary.danger:hover { background:rgba(255,107,107,.26); box-shadow:0 0 12px rgba(255,107,107,.3); }

/* ---------- In-app modal ---------- */
#modal { position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; background:rgba(3,7,14,.78); backdrop-filter:blur(4px); }
#modal.hidden { display:none; }
.modal-card { width:400px; max-width:92vw; background:var(--panel-solid); border:1px solid var(--cyan-soft); box-shadow:var(--glow),0 24px 60px rgba(0,0,0,.6); }
.modal-head { padding:16px 20px; font-size:12px; letter-spacing:2px; color:var(--white); border-bottom:1px solid var(--line); }
.modal-body { padding:20px; }
.modal-label { display:block; font-size:9px; letter-spacing:2px; color:var(--dim); margin-bottom:7px; }
.modal-body input { width:100%; height:40px; padding:0 12px; background:rgba(4,10,20,.7); border:1px solid var(--line-2);
  color:var(--white); font-family:var(--font); font-size:14px; letter-spacing:.5px; }
.modal-body input:focus { outline:none; border-color:var(--cyan); box-shadow:var(--glow); }
.modal-msg { font-size:13px; line-height:1.6; color:var(--text); letter-spacing:.3px; }
.modal-acts { display:flex; gap:10px; justify-content:flex-end; padding:0 20px 18px; }
.modal-acts .btn-line, .modal-acts .btn-primary { width:auto; padding:0 20px; height:38px; margin:0; }

/* ---------- AR preview (QR) ---------- */
.ar-baking { display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px 0; color:var(--text); font-size:13px; }
.ar-spin { width:34px; height:34px; border:2px solid var(--line-2); border-top-color:var(--cyan); border-radius:50%; animation:ar-spin .8s linear infinite; }
@keyframes ar-spin { to { transform:rotate(360deg); } }
.ar-modal { display:flex; flex-direction:column; align-items:center; text-align:center; }
.ar-qr { width:200px; height:200px; padding:10px; background:#fff; border-radius:4px; }
.ar-qr svg { width:100%; height:100%; display:block; }
.ar-label { margin-top:14px; font-size:14px; letter-spacing:1px; color:var(--white); }
.ar-hint { margin:8px 0 12px; font-size:11px; line-height:1.6; color:var(--dim); max-width:300px; }
.ar-url { width:100%; padding:8px 10px; background:rgba(4,10,20,.7); border:1px solid var(--line-2);
  font-size:10px; color:var(--cyan); word-break:break-all; user-select:all; }
.ar-expiry { margin-top:8px; font-size:10px; letter-spacing:.5px; color:var(--dim); }
.ar-modal #ar-revoke { margin-top:16px; width:auto; padding:0 18px; height:34px; }

@media (max-width:760px){ .dash-side{ width:200px } .dash-head{ padding:20px } .dash-grid{ padding:8px 20px 30px } }

/* ---------- Loader / error ---------- */
#loader { position:fixed; inset:0; z-index:30; background:var(--bg-0);
  display:flex; align-items:center; justify-content:center; transition:opacity .6s; }
#loader.done { opacity:0; pointer-events:none; }
.load-frame { width:280px; text-align:center; }
.load-bar { height:2px; background:rgba(70,212,255,.15); overflow:hidden; }
.load-bar span { display:block; height:100%; width:40%; background:var(--cyan); box-shadow:var(--glow); animation:load 1.1s ease-in-out infinite; }
@keyframes load { 0%{transform:translateX(-120%);} 100%{transform:translateX(320%);} }
.load-text { margin-top:14px; font-size:10px; letter-spacing:3px; color:var(--dim); }
#error { position:fixed; inset:0; z-index:40; background:var(--bg-0); display:flex; align-items:center; justify-content:center; }
#error.hidden { display:none; }
.err-box { max-width:460px; padding:30px; border:1px solid rgba(255,90,90,.5); background:rgba(30,8,12,.6); }
.err-box h3 { color:#ff7a7a; letter-spacing:2px; font-size:15px; }
.err-box p { margin-top:12px; font-size:12px; color:var(--dim); line-height:1.6; }
.err-box code { color:var(--cyan); }

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
  :root { --exp:238px; --insp:270px; }
  .tb-btn span { display:none; }
  .tb-btn { padding:0 9px; }
}
@media (max-width:820px) {
  :root { --exp:0px; --insp:0px; }
  #explorer,#inspector { display:none; }
  .corner { display:none; }
  .st-hint { display:none; }
  .tb-group.toggles { display:none; }
}