/* NEXUS v2 — desktop layout
   Structure: the artist's 2026-08 layout (left sidebar + multi-card dashboard + floating chat).
   Finish: light references (Superpower / Vantary) — gray canvas, white cards, aura cards, dark control slabs. */
:root { --nx-css-shell: 1; --sb: 272px; } /* --nx-css-shell: boot guard marker */
.d-shell { position: relative; display: grid; grid-template-columns: var(--sb) minmax(0, 1fr); height: 100vh; overflow: hidden; }

/* dark slabs inside the page (the legacy navy control panel / network card) */
.slab, .dash .ctrl-panel, .net-card, .netv-main {
  --panel: rgba(16, 18, 22, .64); --panel-2: rgba(255, 255, 255, .05);
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .16);
  --ink: #F3F4F6; --ink-2: rgba(243, 244, 246, .68); --ink-3: rgba(243, 244, 246, .44); --ink-4: rgba(243, 244, 246, .16);
  --tile: rgba(255, 255, 255, .035); --tile-on: rgba(255, 255, 255, .085);
  --lime: #E3F35B; --lime-tx: #E3F35B; --floor-dot: rgba(255, 255, 255, .24);
  color: var(--ink);
  background:
    radial-gradient(70% 130% at 100% 0%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 62%),
    linear-gradient(165deg, #1D2027 0%, #0C0E12 100%);
  border: 0; box-shadow: 0 34px 60px -34px rgba(10, 14, 26, .6), 0 2px 8px rgba(10, 14, 26, .12);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---------------------------------------------------------------- sidebar */
.d-side { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 20px; height: 100vh; overflow-y: auto; padding: 28px 14px 16px 20px; scrollbar-width: none; }
.d-side::-webkit-scrollbar { display: none; }
.sb-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 6px 12px; }
.sb-brand .wm { font-size: 38px; }
.sb-nav { display: flex; flex-direction: column; gap: 3px; }
.sb-item {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 46px; padding: 0 14px; border-radius: 16px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-align: left; transition: background .2s, color .2s, box-shadow .2s;
}
.sb-item:hover { color: var(--ink); background: color-mix(in srgb, var(--card) 60%, transparent); }
.sb-item.on { color: var(--ink); font-weight: 700; background: var(--card); box-shadow: var(--sh-1); }
.sb-ic { display: grid; place-items: center; width: 22px; flex: none; }
.sb-lb { flex: 1; min-width: 0; }
.sb-sec { display: flex; flex-direction: column; gap: 4px; }
.sb-cap { font-size: 12px; font-weight: 500; color: var(--ink-3); padding: 0 14px 6px; }
.sb-spaces { display: flex; flex-direction: column; gap: 6px; }
.sb-space {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px 8px 8px; border-radius: 18px; text-align: left;
  background: color-mix(in srgb, var(--card) 46%, transparent); transition: background .2s, box-shadow .2s;
}
.sb-space:hover { background: var(--card); }
.sb-space.on { background: var(--card); box-shadow: var(--sh-1); }
.sb-sw { width: 34px; height: 34px; border-radius: 12px; flex: none; }
.sb-space-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.32; }
.sb-space-tx b { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-space-tx em { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--ink-3); }
.sb-pct { flex: none; font-size: 11.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; padding: 4px 8px; border-radius: 999px; background: var(--bg); }
.sb-space.on .sb-pct { background: var(--lime); color: var(--lime-ink); }
.sb-modes { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.sb-mode {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--ink-2); background: color-mix(in srgb, var(--card) 55%, transparent); transition: background .2s, color .2s;
}
.sb-mode:hover { background: var(--card); color: var(--ink); }
.sb-mode.on { background: var(--ink); color: var(--bg); }
.sb-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 22px; background: var(--card); box-shadow: var(--sh-1); }
.sb-prof { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; text-align: left; padding: 2px; border-radius: 16px; }
.sb-prof .avatar { width: 40px; height: 40px; font-family: 'Hanken Grotesk', var(--font); font-weight: 800; font-size: 15px; }
.sb-prof-tx { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sb-prof-tx b { font-family: 'Hanken Grotesk', var(--font); font-size: 15px; font-weight: 800; letter-spacing: .03em; }
.sb-prof-tx em { font-style: normal; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-theme, .sb-ibtn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ink-2); background: var(--bg-2); transition: color .2s, background .2s; }
.sb-theme:hover, .sb-ibtn:hover { color: var(--ink); }
.sb-ibtn.on { background: var(--ink); color: var(--bg); }

/* ------------------------------------------------------------- main column */
.d-main { position: relative; z-index: 1; height: 100vh; overflow-y: auto; padding: 26px 28px 48px 8px; scrollbar-gutter: stable; animation: fadeUp .5s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
.d-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 4px 0 22px; padding-left: 6px; min-height: 46px; }
.d-head-l { min-width: 0; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px; }
.crumbs i { font-style: normal; opacity: .55; }
.d-h1 { font-size: 30px; font-weight: 400; letter-spacing: -.02em; line-height: 1.2; }
.d-sub { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 64ch; text-wrap: pretty; }
.d-head-r { display: flex; align-items: center; gap: 10px; flex: none; }
.wx { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 16px; border-radius: 999px; background: var(--card); box-shadow: var(--sh-1); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.wx b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.wx-place { display: inline-flex; align-items: center; gap: 7px; }
.wx-place i { width: 1px; height: 16px; margin: 0 4px; background: var(--line-2); }
.wx-place em { font-style: normal; }
.hbtn { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ink); background: var(--card); box-shadow: var(--sh-1); }
.hbtn .badge-dot { top: 12px; right: 13px; box-shadow: 0 0 0 2px var(--card); }

/* ---------------------------------------------------------- home dashboard */
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.hero { grid-column: span 8; position: relative; height: clamp(400px, 47vh, 500px); border-radius: 32px; background: var(--card); box-shadow: var(--sh-1); overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(56% 62% at 64% 52%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 72%), linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--acc) 6%, transparent));
}
.hero-stage { position: absolute; inset: 0 0 0 30%; }
.hero-top { position: absolute; top: 22px; left: 24px; z-index: 3; display: flex; align-items: center; gap: 10px; }
.hero-place { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-2); }
.hero-tx { position: absolute; left: 26px; bottom: 24px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: min(42%, 380px); animation: fadeUp .6s var(--ease) both; }
.hero .chips { flex-wrap: nowrap; }
.hero-name { font-size: clamp(32px, 2.7vw, 42px); font-weight: 400; letter-spacing: -.03em; line-height: 1.08; }
.hero-msg { font-size: 14px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.hero .chips { margin-top: 4px; }
.hero .chips .pill { background: var(--bg-2); border-color: transparent; }
.pill--ink { background: var(--ink); color: var(--bg); border-color: transparent; height: 26px; padding: 0 11px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; }

.dash .sync-card { grid-column: span 4; min-height: 0; height: 100%; border-radius: 32px; padding: 24px 24px 22px; box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--acc) 75%, transparent); }
.dash .sync-num .dn { height: 112px; width: auto; }
.dash .sync-num .sync-pct { font-size: 26px; padding-bottom: 14px; }
.sync-wave { color: #fff; height: 64px; margin-top: 18px; opacity: .9; }

.dash .ctrl-panel { grid-column: 1 / -1; padding: 20px 22px 22px; border-radius: 30px; gap: 16px; }
.dash .fam { grid-column: 1 / -1; }
.dash .fam-tile { height: clamp(108px, 8vw, 140px); }
.dash .ctrl-panel .btn { background: rgba(255, 255, 255, .06); border-color: var(--line-2); color: var(--ink); }
.dash .ctrl-panel .btn--lime { background: var(--lime); color: var(--lime-ink); border-color: transparent; }
.dash .tile { min-height: 108px; border-radius: 20px; }

.net-card { grid-column: span 7; position: relative; height: 340px; border-radius: 30px; padding: 0; overflow: hidden; }
.net-card .card-hd { position: absolute; top: 16px; left: 22px; right: 16px; z-index: 2; }
.net-card .scene { position: absolute; inset: 0; width: auto; height: auto; }
.net-card .legend { position: absolute; left: 22px; bottom: 16px; z-index: 2; pointer-events: none; }
.net-card .net-go { color: var(--ink-2); background: rgba(255, 255, 255, .07); border: 0; }
.net-card .net-go:hover { color: var(--ink); background: rgba(255, 255, 255, .14); }
.dash .env-card { grid-column: span 5; border-radius: 30px; padding: 20px; gap: 14px; background: var(--card); border: 0; box-shadow: var(--sh-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.dash .env-list { gap: 10px; flex: 1; }
.dash .env-row { background: var(--bg-2); border: 0; border-radius: 20px; padding: 15px 15px 14px; justify-content: space-between; }

.scene { position: relative; width: 100%; height: 100%; }
.scene canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.scene canvas.grabbing { cursor: grabbing; }

/* ---------------------------------------------------------------- network */
.netv { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; height: calc(100vh - 146px); min-height: 560px; }
.netv-main { position: relative; border-radius: 32px; overflow: hidden; }
.netv-scene { position: absolute; inset: 0; }
.netv-hd { position: absolute; top: 20px; left: 22px; right: 22px; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2); pointer-events: none; }
.netv-ft { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; pointer-events: none; }
.netv-side { display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.netv-side .card { border-radius: 28px; }
.forms-card { padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--card); box-shadow: var(--sh-1); }
.forms-card .card-hd { padding: 0 4px; }
.forms-note { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); padding: 0 4px; text-wrap: pretty; }

/* ------------------------------------------------------------------- chat */
.chatv { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; height: calc(100vh - 146px); min-height: 560px; }
.chatv-main { overflow: hidden; display: flex; flex-direction: column; min-height: 0; border-radius: 30px; background: var(--card); box-shadow: var(--sh-1); }
.chatv-side { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.orb-card { padding: 20px 22px 22px; border-radius: 30px; display: flex; flex-direction: column; gap: 16px; min-height: 330px; }
.orb-card .card-hd { color: #fff; font-size: 14px; }
.orb { position: relative; align-self: center; width: 150px; height: 150px; margin: 6px 0 0; border-radius: 50%; }
.orb::before, .orb::after, .orb span { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .45); animation: spin 26s linear infinite; }
.orb::after { inset: 16px; border-style: solid; border-color: rgba(255, 255, 255, .22); animation-duration: 40s; animation-direction: reverse; }
.orb span { inset: 38px; border: 0; background: radial-gradient(circle at 36% 30%, #fff 0, rgba(255, 255, 255, .7) 18%, transparent 70%); filter: blur(1px); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .75; } }
.orb-wave { color: #fff; height: 44px; }
.orb-card p { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .9); margin-top: auto; }
.log-card { flex: 1; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 12px; overflow: auto; min-height: 0; border-radius: 28px; background: var(--card); box-shadow: var(--sh-1); }
.log { display: flex; flex-direction: column; }
.log li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--line); animation: msgIn .35s var(--ease) both; }
.log li:first-child { border-top: 0; }
.log li > i { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); flex: 0 0 auto; }
.log li div { display: flex; flex-direction: column; line-height: 1.35; }
.log li b { font-size: 13.5px; font-weight: 600; }
.log li span { font-size: 12px; color: var(--ink-3); }

/* --------------------------------------------------------- scrolling pages */
.d-page { max-width: 1160px; padding: 0 6px; animation: fadeUp .5s var(--ease) both; }
.d-page .view-hd { display: none; }
.d-main .glass:not(.ctrl-panel) { background: var(--card); border-color: transparent; box-shadow: var(--sh-1); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ------------------------------------------------------ floating chat dock */
.fab {
  position: fixed; right: 30px; bottom: 30px; z-index: 60; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--acc) 55%, white) 0%, var(--acc) 38%, #0A0C11 100%);
  box-shadow: 0 20px 34px -14px color-mix(in srgb, var(--acc) 75%, transparent), 0 2px 6px rgba(0, 0, 0, .18); transition: transform .2s var(--ease);
}
.fab:hover { transform: translateY(-2px) scale(1.04); }
.fab.on { background: var(--ink); color: var(--bg); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .5); }
.fab-dot { position: absolute; top: 13px; right: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px #0A0C11; }
.dock {
  position: fixed; right: 30px; bottom: 106px; z-index: 60; width: 400px; height: min(600px, calc(100vh - 140px)); border-radius: 28px; overflow: hidden;
  display: flex; flex-direction: column; background: var(--card); box-shadow: 0 40px 90px -30px rgba(16, 24, 40, .45), 0 2px 8px rgba(16, 24, 40, .08); animation: popIn .25s var(--ease);
}
.d-shell .transit { left: calc(var(--sb) + (100vw - var(--sb)) / 2); top: 22px; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1360px) { :root { --sb: 248px; } .sb-brand .wm { font-size: 34px; } .wx-place { display: none; } }
@media (max-width: 1200px) {
  .hero { grid-column: 1 / -1; }
  .dash .sync-card, .dash .env-card { grid-column: span 6; }
  .net-card { grid-column: 1 / -1; }
  .dash .tiles { --cols: 4 !important; }
  .netv, .chatv { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 1100px) { .dash .fam { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-height: 820px) {
  .hero { height: 376px; }
  .dash .fam-tile { height: 96px; }
  .sb-item { height: 42px; }
  .d-side { gap: 16px; padding-top: 22px; }
}