/* v2 chrome — sidebar + topbar restyle. Pure CSS, targets the existing
   selectors emitted by assets/js/layout/chrome.js. No JS changes here. */

/* ══════════════════════════════════════════════════════════════
   NUCLEAR RESET: strip ALL v1 visual properties from chrome
   elements so nothing bleeds through. The v2 rules below rebuild
   every element from scratch. We target backgrounds, borders,
   shadows, text-shadows, and filters — the properties most
   responsible for the "old stuff is still there" appearance.
   ══════════════════════════════════════════════════════════════ */
body[data-theme="v2"] .app-shell,
body[data-theme="v2"] .sidebar,
body[data-theme="v2"] .main,
body[data-theme="v2"] .main::before,
body[data-theme="v2"] .topbar,
body[data-theme="v2"] .brand-block,
body[data-theme="v2"] .brand-block-top,
body[data-theme="v2"] .brand-mark,
body[data-theme="v2"] .brand-meta,
body[data-theme="v2"] .brand-kicker,
body[data-theme="v2"] .brand-title,
body[data-theme="v2"] .brand-short,
body[data-theme="v2"] .nav-label,
body[data-theme="v2"] .nav-list,
body[data-theme="v2"] .nav-group,
body[data-theme="v2"] .nav-group-header,
body[data-theme="v2"] .nav-group-items,
body[data-theme="v2"] .nav-item,
body[data-theme="v2"] .nav-icon,
body[data-theme="v2"] .nav-badge,
body[data-theme="v2"] .sidebar-footer,
body[data-theme="v2"] .sidebar-user,
body[data-theme="v2"] .sidebar-user-meta,
body[data-theme="v2"] .sidebar-user-name,
body[data-theme="v2"] .sidebar-user-role,
body[data-theme="v2"] .sidebar-actions,
body[data-theme="v2"] .ghost-btn,
body[data-theme="v2"] .ghost-link,
body[data-theme="v2"] .avatar,
body[data-theme="v2"] .topbar-title-group,
body[data-theme="v2"] .topbar-title,
body[data-theme="v2"] .topbar-sub,
body[data-theme="v2"] .topbar-search,
body[data-theme="v2"] .topbar-actions,
body[data-theme="v2"] .topbar-pill,
body[data-theme="v2"] .topbar-icon,
body[data-theme="v2"] .topbar-profile,
body[data-theme="v2"] .topbar-profile-meta,
body[data-theme="v2"] .topbar-profile-name,
body[data-theme="v2"] .topbar-profile-role,
body[data-theme="v2"] .topbar-home-btn,
body[data-theme="v2"] .topbar-preview-btn,
body[data-theme="v2"] .topbar-menu,
body[data-theme="v2"] .keyboard-hint,
body[data-theme="v2"] .breadcrumbs,
body[data-theme="v2"] .breadcrumb-link,
body[data-theme="v2"] .breadcrumb-current,
body[data-theme="v2"] .sidebar-toggle,
body[data-theme="v2"] .sidebar-backdrop {
  background: transparent;
  border: none;
  box-shadow: none;
  text-shadow: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Also kill the .main::before gradient overlay from v1 */
body[data-theme="v2"] .main::before {
  display: none;
}

/* ──────────────────────────────────────────────────────────────
   App shell + main
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] {
  background:
    radial-gradient(1200px 800px at 0% -10%, rgba(108, 184, 255, .08), transparent 60%),
    radial-gradient(1000px 700px at 100% 110%, rgba(218, 187, 106, .06), transparent 60%),
    var(--bg);
  color: var(--text);
}

body[data-theme="v2"] .app-shell {
  background: transparent;
  display: flex;
  min-height: 100vh;
}

body[data-theme="v2"] .main {
  flex: 1;
  min-width: 0;
  position: relative;
  padding: var(--space-6) var(--space-7);
}

body[data-theme="v2"] .nav-list {
  display: grid;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

body[data-theme="v2"] .sidebar-user-meta {
  display: grid;
  gap: 2px;
}

body[data-theme="v2"] .topbar-profile-meta {
  display: grid;
  gap: 2px;
}

body[data-theme="v2"] .brand-meta {
  display: grid;
  gap: 5px;
}

@media (max-width: 768px) {
  body[data-theme="v2"] .main {
    padding: var(--space-5) var(--space-4);
  }
}

/* ──────────────────────────────────────────────────────────────
   Sidebar
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] .sidebar {
  background:
    linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border-right: var(--border-subtle);
  backdrop-filter: blur(14px);
  padding: var(--space-5) var(--space-3);
}

body[data-theme="v2"] .brand-block {
  padding: var(--space-3) var(--space-3) var(--space-5);
  border-bottom: var(--border-subtle);
  margin-bottom: var(--space-4);
}

body[data-theme="v2"] .brand-block-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

body[data-theme="v2"] .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #4a9eff, #93dcff);
  color: #04122a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  letter-spacing: .04em;
  box-shadow: var(--shadow-pop);
}

body[data-theme="v2"] .brand-kicker {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted-2);
  font-weight: var(--weight-strong);
}

body[data-theme="v2"] .brand-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  margin-top: var(--space-1);
}

body[data-theme="v2"] .brand-short {
  display: none;
}

body[data-theme="v2"] .nav-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
  font-weight: var(--weight-strong);
  padding: var(--space-3) var(--space-3) var(--space-2);
}

body[data-theme="v2"] .nav-group {
  margin-bottom: var(--space-2);
}

body[data-theme="v2"] .nav-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  letter-spacing: .04em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"] .nav-group-header:hover {
  background: var(--panel-3);
  color: var(--text-strong);
}

body[data-theme="v2"] .nav-group-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

body[data-theme="v2"] .nav-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  flex-shrink: 0;
}

body[data-theme="v2"] .nav-group-header:hover .nav-group-icon {
  color: var(--blue-2);
}

body[data-theme="v2"] .nav-group-chevron {
  font-size: var(--text-xs);
  color: var(--muted);
  transition: transform var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"] .nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-1) 0 var(--space-2);
}

body[data-theme="v2"] .nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              padding-left var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"] .nav-item:hover,
body[data-theme="v2"] .nav-item:active {
  background: var(--panel-3);
  color: var(--text-strong);
}

body[data-theme="v2"] .nav-item.active {
  background: linear-gradient(90deg, rgba(108, 184, 255, .22), rgba(108, 184, 255, .04));
  color: var(--text-strong);
  font-weight: var(--weight-strong);
}

body[data-theme="v2"] .nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  background: linear-gradient(180deg, #4a9eff, #93dcff);
  border-radius: var(--radius-pill);
}

body[data-theme="v2"] .nav-icon {
  color: var(--muted-2);
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .45;
  transition: opacity var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"] .nav-item:hover .nav-icon {
  opacity: .85;
}

body[data-theme="v2"] .nav-item.active .nav-icon {
  color: var(--blue-2);
  opacity: 1;
}

body[data-theme="v2"] .nav-label {
  /* differentiate from group label */
}

body[data-theme="v2"] .nav-item .nav-label {
  flex: 1;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-sm);
  color: inherit;
  font-weight: inherit;
}

body[data-theme="v2"] .nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: rgba(243, 124, 145, .22);
  color: var(--danger-soft);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

/* ── Sidebar footer ── */
body[data-theme="v2"] .sidebar-footer {
  margin-top: auto;
  padding: var(--space-4) var(--space-3);
  border-top: var(--border-subtle);
}

body[data-theme="v2"] .sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

body[data-theme="v2"] .sidebar-user-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  color: var(--text-strong);
}

body[data-theme="v2"] .sidebar-user-role {
  font-size: var(--text-xs);
  color: var(--muted);
}

body[data-theme="v2"] .avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--panel-3), var(--panel-2));
  border: var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

body[data-theme="v2"] .sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

body[data-theme="v2"] .sidebar-actions .meta {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--leading-normal);
}

/* ──────────────────────────────────────────────────────────────
   Topbar
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] .topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--panel);
  border: var(--border-subtle);
  border-radius: var(--radius);
  margin-bottom: var(--space-6);
  backdrop-filter: blur(14px);
}

body[data-theme="v2"] .topbar-title-group {
  flex-shrink: 0;
}

body[data-theme="v2"] .breadcrumbs {
  font-size: var(--text-xs);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

body[data-theme="v2"] .breadcrumb-link {
  color: var(--muted-2);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"] .breadcrumb-link:hover {
  color: var(--blue-2);
}

body[data-theme="v2"] .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--muted);
  margin: 0 var(--space-1);
}

body[data-theme="v2"] .breadcrumb-current {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

body[data-theme="v2"] .topbar-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  line-height: var(--leading-tight);
}

body[data-theme="v2"] .topbar-sub {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 2px;
}

body[data-theme="v2"] .topbar-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-soft);
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  transition: border-color var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"] .topbar-search:focus-within {
  border-color: var(--blue);
}

body[data-theme="v2"] .topbar-search > span {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  flex-shrink: 0;
}

body[data-theme="v2"] .topbar-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: var(--text-sm);
  padding: 0;
}

body[data-theme="v2"] .topbar-search input:focus {
  outline: none;
  background: transparent;
}

body[data-theme="v2"] .keyboard-hint {
  font-family: inherit;
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  background: var(--panel-3);
  border: var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--muted);
}

body[data-theme="v2"] .topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

body[data-theme="v2"] .topbar-pill {
  padding: var(--space-2) var(--space-3);
  background: var(--panel-3);
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  color: var(--text-secondary);
}

body[data-theme="v2"] .topbar-icon {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--panel-3);
  border: var(--border-subtle);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  transition: background var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"] .topbar-icon:hover {
  background: var(--panel-2);
}

body[data-theme="v2"] .topbar-home-btn,
body[data-theme="v2"] .topbar-preview-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--panel-3);
  border: var(--border-subtle);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"] .topbar-home-btn:hover {
  background: var(--panel-2);
}

body[data-theme="v2"] .topbar-preview-btn {
  background: linear-gradient(135deg, rgba(218, 187, 106, .25), rgba(245, 199, 115, .15));
  color: var(--warning-soft);
  border-color: rgba(245, 199, 115, .35);
}

body[data-theme="v2"] .topbar-profile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  background: var(--panel-3);
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"] .topbar-profile:hover {
  background: var(--panel-2);
}

body[data-theme="v2"] .topbar-profile-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  color: var(--text-strong);
  line-height: var(--leading-tight);
}

body[data-theme="v2"] .topbar-profile-role {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* ──────────────────────────────────────────────────────────────
   Mobile sidebar
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] .sidebar-toggle {
  background: var(--panel-3);
  border: var(--border-subtle);
  color: var(--text);
  border-radius: var(--radius-sm);
}

body[data-theme="v2"] .sidebar-backdrop {
  background: rgba(2, 6, 16, .72);
  backdrop-filter: blur(8px);
}

/* ──────────────────────────────────────────────────────────────
   Offline banner
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] .offline-banner {
  background: linear-gradient(135deg, rgba(243, 124, 145, .22), rgba(218, 187, 106, .18));
  border-bottom: 1px solid rgba(243, 124, 145, .35);
  color: var(--text-strong);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
}

/* ════════════════════════════════════════════════════════════════
   ▌ COMMAND CENTRE — cinematic dashboard chrome layer
   ▌
   ▌ Scope: body[data-theme="v2"][data-entry="app"]
   ▌
   ▌ Same vocabulary as the login (orbs, HUD frame, status pill,
   ▌ chrome wordmark) but TONED DOWN for an environment where users
   ▌ actually do work — slower motion, lower opacity, no scanline,
   ▌ no rising particles.
   ════════════════════════════════════════════════════════════════ */

/* Deep cinematic page background */
body[data-theme="v2"][data-entry="app"] {
  background:
    radial-gradient(80% 60% at 0% -10%, rgba(108, 184, 255, .10), transparent 60%),
    radial-gradient(70% 50% at 100% 110%, rgba(77, 111, 157, .12), transparent 65%),
    radial-gradient(60% 40% at 50% 50%, rgba(108, 184, 255, .04), transparent 70%),
    linear-gradient(180deg, #03081a 0%, #050d22 50%, #03081a 100%);
}

/* ──────────── World-map dot pattern (very faint, behind everything) ──────────── */
body[data-theme="v2"][data-entry="app"] .cc-worldmap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .12;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(108, 184, 255, .22) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 50%, transparent 85%);
          mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 50%, transparent 85%);
}

/* ──────────── Orb field — slower, lower opacity than login ──────────── */
body[data-theme="v2"][data-entry="app"] .cc-orb-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* Calmer, data-first shell: keep the orbs only as a faint sense of depth
     rather than visible glowing blobs. Scales all four orbs at once. */
  opacity: .5;
}

body[data-theme="v2"][data-entry="app"] .cc-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  will-change: transform;
}

body[data-theme="v2"][data-entry="app"] .cc-orb--1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, #6cb8ff 0%, rgba(108, 184, 255, 0) 70%);
  top: -12%; left: -8%;
  opacity: .32;
  animation: cc-orb-a 64s ease-in-out infinite alternate;
}
body[data-theme="v2"][data-entry="app"] .cc-orb--2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #93dcff 0%, rgba(147, 220, 255, 0) 70%);
  top: 30%; left: 65%;
  opacity: .22;
  animation: cc-orb-b 76s ease-in-out infinite alternate;
}
body[data-theme="v2"][data-entry="app"] .cc-orb--3 {
  width: 460px; height: 460px;
  background: radial-gradient(circle, #4d6f9d 0%, rgba(77, 111, 157, 0) 70%);
  top: 60%; left: -6%;
  opacity: .30;
  animation: cc-orb-c 84s ease-in-out infinite alternate;
}
body[data-theme="v2"][data-entry="app"] .cc-orb--4 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, #6cb8ff 0%, rgba(108, 184, 255, 0) 70%);
  top: 70%; left: 70%;
  opacity: .24;
  animation: cc-orb-d 72s ease-in-out infinite alternate;
}

/* HUD corner brackets retired for a calmer, data-first shell. The decorative
   markup stays in index.html (aria-hidden) so this is a one-line revert if the
   command-centre look is ever wanted back. */
body[data-theme="v2"][data-entry="app"] .cc-frame {
  display: none;
}

body[data-theme="v2"][data-entry="app"] .cc-corner {
  position: absolute;
  width: 28px; height: 28px;
  border: 2px solid rgba(108, 184, 255, .55);
  box-shadow: 0 0 10px rgba(108, 184, 255, .35), inset 0 0 4px rgba(108, 184, 255, .2);
  border-radius: 3px;
}
body[data-theme="v2"][data-entry="app"] .cc-corner--tl {
  top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 8px;
}
body[data-theme="v2"][data-entry="app"] .cc-corner--tr {
  top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 8px;
}
body[data-theme="v2"][data-entry="app"] .cc-corner--bl {
  bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 8px;
}
body[data-theme="v2"][data-entry="app"] .cc-corner--br {
  bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 8px;
}

/* Push the app shell above all decoration */
body[data-theme="v2"][data-entry="app"] #app,
body[data-theme="v2"][data-entry="app"] .app-shell {
  position: relative;
  z-index: 10;
}

/* ──────────── Sidebar — upgrade to HUD glass panel ──────────── */
body[data-theme="v2"][data-entry="app"] .sidebar {
  position: relative;
  background:
    linear-gradient(180deg,
      rgba(16, 28, 52, .88) 0%,
      rgba(8, 18, 38, .88) 100%);
  border-right: 1px solid rgba(108, 184, 255, .22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 0 32px rgba(108, 184, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* Glowing top edge accent on sidebar */
body[data-theme="v2"][data-entry="app"] .sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-2), transparent);
  box-shadow: 0 0 14px var(--blue-2);
  opacity: .8;
}

/* Glowing right edge accent on sidebar */
body[data-theme="v2"][data-entry="app"] .sidebar::after {
  content: '';
  position: absolute;
  right: -1px; top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--blue-2), transparent);
  opacity: .35;
  filter: blur(.5px);
}

/* ──────────── Brand block — chrome wordmark + favicon mark ──────────── */
body[data-theme="v2"][data-entry="app"] .brand-block {
  padding: var(--space-4) var(--space-3) var(--space-5);
  border-bottom: 1px solid rgba(108, 184, 255, .18);
  margin-bottom: var(--space-4);
  position: relative;
}

body[data-theme="v2"][data-entry="app"] .brand-block-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Switch the text "DM" brand mark to the favicon image when img is present */
body[data-theme="v2"][data-entry="app"] .brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  padding: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(108, 184, 255, .35), transparent 70%),
    rgba(8, 18, 38, .6);
  border: 1px solid rgba(108, 184, 255, .35);
  box-shadow:
    0 0 18px rgba(108, 184, 255, .35),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  color: transparent;
  font-size: 0;
  overflow: hidden;
}

body[data-theme="v2"][data-entry="app"] .brand-mark img {
  width: 36px;
  height: 36px;
  display: block;
  filter: drop-shadow(0 0 6px rgba(108, 184, 255, .5));
  animation: cc-mark-breathe-dash 5s ease-in-out infinite;
}

@keyframes cc-mark-breathe-dash {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(108, 184, 255, .5)); }
  50%      { filter: drop-shadow(0 0 12px rgba(108, 184, 255, .85)); }
}

body[data-theme="v2"][data-entry="app"] .brand-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--blue-2);
  font-weight: 800;
  text-shadow: 0 0 8px rgba(108, 184, 255, .4);
}

body[data-theme="v2"][data-entry="app"] .brand-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.2;
  margin-top: 4px;
  letter-spacing: .01em;
  /* Chrome gradient on brand title */
  background: linear-gradient(180deg, #f4f8ff 0%, #c9d6ea 50%, #8ab4e0 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* "powered by ControlMate" subtitle under the brand title (brand-short is
   hidden by default in v2; show it as a small muted caption in the app shell). */
body[data-theme="v2"][data-entry="app"] .brand-short {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted-2);
  margin-top: 3px;
}

/* ──────────── Nav items — glowing active state ──────────── */
body[data-theme="v2"][data-entry="app"] .nav-item.active {
  background: linear-gradient(90deg, rgba(108, 184, 255, .28), rgba(108, 184, 255, .04));
  color: var(--text-strong);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(108, 184, 255, .25), 0 0 14px rgba(108, 184, 255, .14);
}

body[data-theme="v2"][data-entry="app"] .nav-item.active::before {
  width: 3px;
  background: linear-gradient(180deg, #6cb8ff, #93dcff);
  box-shadow: 0 0 8px var(--blue-2), 0 0 14px rgba(108, 184, 255, .6);
  top: 14%;
  bottom: 14%;
  border-radius: var(--radius-pill);
  animation: cc-nav-active-pulse 3s ease-in-out infinite;
}

@keyframes cc-nav-active-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--blue-2), 0 0 14px rgba(108, 184, 255, .6); }
  50%      { box-shadow: 0 0 12px var(--blue-2), 0 0 24px rgba(108, 184, 255, .85); }
}

body[data-theme="v2"][data-entry="app"] .nav-item:hover,
body[data-theme="v2"][data-entry="app"] .nav-item:active {
  background: rgba(108, 184, 255, .08);
  color: var(--text-strong);
}

/* Subtle scan-light sweep on hover (very brief) */
body[data-theme="v2"][data-entry="app"] .nav-item {
  overflow: hidden;
  position: relative;
}
body[data-theme="v2"][data-entry="app"] .nav-item::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(108, 184, 255, .12), transparent);
  transition: left .6s ease-out;
  pointer-events: none;
}
body[data-theme="v2"][data-entry="app"] .nav-item:hover::after {
  left: 100%;
}

/* ──────────── Topbar — HUD glass panel with corner ticks ──────────── */
body[data-theme="v2"][data-entry="app"] .topbar {
  position: relative;
  background:
    linear-gradient(90deg, rgba(108, 184, 255, 0) 0%, rgba(108, 184, 255, .04) 50%, rgba(108, 184, 255, 0) 100%),
    rgba(12, 22, 42, .72);
  border: 1px solid rgba(108, 184, 255, .25);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 0 32px rgba(108, 184, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* Corner ticks on topbar */
body[data-theme="v2"][data-entry="app"] .topbar::before,
body[data-theme="v2"][data-entry="app"] .topbar::after {
  content: '';
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px;
  border: 2px solid var(--blue-2);
  box-shadow: 0 0 8px rgba(108, 184, 255, .55);
}
body[data-theme="v2"][data-entry="app"] .topbar::before {
  left: -6px;
  border-right: none; border-bottom: none;
}
body[data-theme="v2"][data-entry="app"] .topbar::after {
  right: -6px;
  border-left: none; border-top: none;
}

/* Topbar title — chrome gradient on the main title */
body[data-theme="v2"][data-entry="app"] .topbar-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .01em;
  background: linear-gradient(180deg, #f4f8ff 0%, #d6e3f5 35%, #8ab4e0 70%, #6cb8ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 4px 24px rgba(108, 184, 255, .25);
}

/* Today pill / pills — soft glow */
body[data-theme="v2"][data-entry="app"] .topbar-pill {
  background: rgba(8, 18, 38, .65);
  border: 1px solid rgba(108, 184, 255, .28);
  color: var(--blue-2);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 0 14px rgba(108, 184, 255, .12);
}

/* Search bar — glassier */
body[data-theme="v2"][data-entry="app"] .topbar-search {
  background: rgba(8, 18, 38, .55);
  border: 1px solid rgba(108, 184, 255, .25);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"][data-entry="app"] .topbar-search:focus-within {
  border-color: var(--blue-2);
  box-shadow: 0 0 0 4px rgba(108, 184, 255, .12), 0 0 24px rgba(108, 184, 255, .25);
}

body[data-theme="v2"][data-entry="app"] .topbar-icon {
  background: rgba(8, 18, 38, .65);
  border: 1px solid rgba(108, 184, 255, .28);
  transition:
    background var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"][data-entry="app"] .topbar-icon:hover {
  background: rgba(108, 184, 255, .15);
  border-color: rgba(108, 184, 255, .55);
  box-shadow: 0 0 14px rgba(108, 184, 255, .35);
}

/* Bell icon + unread badge. The count is a small corner badge; the JS hides
   it entirely when there are zero unread (so we never show a "0" badge). */
body[data-theme="v2"] .topbar-icon svg {
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
}
body[data-theme="v2"] .topbar-icon:hover svg {
  color: var(--text-strong);
}
body[data-theme="v2"] .topbar-icon #notification-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  border: 2px solid var(--panel-solid);
}
body[data-theme="v2"] .topbar-icon #notification-count[hidden] {
  display: none;
}
body[data-theme="v2"][data-entry="app"] .topbar-icon #notification-count {
  border-color: rgba(4, 9, 26, .9);
  box-shadow: 0 0 10px rgba(243, 124, 145, .5);
}

body[data-theme="v2"][data-entry="app"] .topbar-profile {
  background: rgba(8, 18, 38, .65);
  border: 1px solid rgba(108, 184, 255, .28);
  transition: background var(--duration-fast), box-shadow var(--duration-fast);
}

body[data-theme="v2"][data-entry="app"] .topbar-profile:hover {
  background: rgba(108, 184, 255, .10);
  box-shadow: 0 0 14px rgba(108, 184, 255, .22);
}

body[data-theme="v2"][data-entry="app"] .topbar-home-btn,
body[data-theme="v2"][data-entry="app"] .topbar-preview-btn {
  background: rgba(8, 18, 38, .65);
  border: 1px solid rgba(108, 184, 255, .28);
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"][data-entry="app"] .topbar-home-btn:hover {
  background: rgba(108, 184, 255, .12);
  border-color: rgba(108, 184, 255, .5);
  color: var(--text-strong);
  box-shadow: 0 0 14px rgba(108, 184, 255, .22);
}

/* ──────────── Status pill on the dashboard (fixed) ──────────── */
body[data-theme="v2"][data-entry="app"] .cc-status-pill {
  position: fixed;
  top: 28px;
  right: 28px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 12px;
  border: 1px solid rgba(108, 184, 255, .38);
  border-radius: 999px;
  background: rgba(8, 18, 38, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--blue-2);
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(108, 184, 255, .16);
  pointer-events: none;
}

body[data-theme="v2"][data-entry="app"] .cc-status-pill::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green), 0 0 20px rgba(47, 223, 163, .85);
  animation: cc-status-pulse-dash 2s ease-in-out infinite;
}

@keyframes cc-status-pulse-dash {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: .6; }
}

/* Hide status pill on narrow screens so it doesn't overlap topbar buttons */
@media (max-width: 1100px) {
  body[data-theme="v2"][data-entry="app"] .cc-status-pill { display: none; }

  /* Mobile/tablet: sidebar becomes off-screen drawer */
  body[data-theme="v2"][data-entry="app"] .sidebar,
  body[data-theme="v2"] .sidebar {
    position: fixed !important;
    top: 0; left: 0;
    width: min(82vw, 300px) !important;
    height: 100vh !important;
    z-index: 9999;
    transform: translateX(-106%);
    transition: transform .22s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto !important;
  }
  body[data-theme="v2"][data-entry="app"] .sidebar.mobile-open,
  body[data-theme="v2"] .sidebar.mobile-open,
  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }
  body.sidebar-open .sidebar * {
    pointer-events: auto !important;
  }
  body.sidebar-open .sidebar .nav-item {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(108, 184, 255, 0.2);
    touch-action: manipulation;
    min-height: 44px;
  }

  /* Main area fills full width */
  body[data-theme="v2"][data-entry="app"] .app-shell,
  body[data-theme="v2"] .app-shell {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  body[data-theme="v2"][data-entry="app"] .main,
  body[data-theme="v2"] .main {
    width: 100% !important;
    padding: var(--space-4) var(--space-3);
  }

  /* Topbar stacks */
  body[data-theme="v2"][data-entry="app"] .topbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  body[data-theme="v2"][data-entry="app"] .topbar-search {
    order: 10;
    width: 100%;
  }
  body[data-theme="v2"][data-entry="app"] .topbar-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ──────────── Mobile touch feedback ──────────── */
/* Every tappable element gets a visible pressed state on mobile */
@media (hover: none) and (pointer: coarse) {
  body[data-theme="v2"] button:active,
  body[data-theme="v2"] a:active,
  body[data-theme="v2"] [role="button"]:active,
  body[data-theme="v2"] .btn:active,
  body[data-theme="v2"] .tab-btn:active,
  body[data-theme="v2"] .filter-chip:active,
  body[data-theme="v2"] .card:active,
  body[data-theme="v2"] .ghost-btn:active,
  body[data-theme="v2"] .topbar-home-btn:active,
  body[data-theme="v2"] .topbar-icon:active,
  body[data-theme="v2"] .topbar-profile:active,
  body[data-theme="v2"] [data-route]:active,
  body[data-theme="v2"] [data-page]:active,
  body[data-theme="v2"] [data-bc-tab]:active {
    opacity: 0.7;
    transform: scale(0.97);
    transition: opacity 0.05s, transform 0.05s;
  }
  body[data-theme="v2"] .nav-item:active {
    background: rgba(108, 184, 255, .18) !important;
    color: #fff !important;
    transform: scale(0.97);
  }
}

/* Hide HUD frame on narrow screens */
@media (max-width: 900px) {
  body[data-theme="v2"][data-entry="app"] .cc-frame { display: none; }
}

/* ──────────── Sidebar footer — sign out button glow ──────────── */
body[data-theme="v2"][data-entry="app"] .ghost-btn {
  background: rgba(8, 18, 38, .55);
  border: 1px solid rgba(108, 184, 255, .28);
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"][data-entry="app"] .ghost-btn:hover {
  background: rgba(108, 184, 255, .12);
  border-color: rgba(108, 184, 255, .55);
  color: var(--text-strong);
  box-shadow: 0 0 12px rgba(108, 184, 255, .22);
}

/* ──────────────────────────────────────────────────────────────
   Nav layout: horizontal top header (data-nav-layout="topbar")
   Default is the sidebar; the top nav is hidden until toggled, and
   only on wide screens (mobile keeps the sidebar drawer + hamburger).
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] .topbar-nav { display: none; }

@media (min-width: 769px) {
  body[data-theme="v2"][data-nav-layout="topbar"] .sidebar { display: none; }

  body[data-theme="v2"][data-nav-layout="topbar"] .topbar-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) 0 var(--space-4);
    margin-bottom: var(--space-2);
    border-bottom: var(--border-subtle);
    position: relative;
    z-index: 25;
  }
}

body[data-theme="v2"] .tnav-group { position: relative; }

body[data-theme="v2"] .tnav-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--panel-3);
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
body[data-theme="v2"] .tnav-trigger:hover,
body[data-theme="v2"] .tnav-group:focus-within .tnav-trigger {
  background: var(--panel-2);
  color: var(--text-strong);
}
body[data-theme="v2"] .tnav-group.is-active .tnav-trigger {
  color: var(--text-strong);
  border-color: var(--line-strong);
  background: linear-gradient(90deg, rgba(108, 184, 255, .18), rgba(108, 184, 255, .04));
}
body[data-theme="v2"] .tnav-trigger-icon { display: inline-flex; align-items: center; color: var(--muted-2); }
body[data-theme="v2"] .tnav-caret { font-size: 10px; color: var(--muted); }

body[data-theme="v2"] .tnav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--panel-solid);
  border: var(--border-subtle);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              visibility var(--duration-fast);
  z-index: 60;
}
body[data-theme="v2"] .tnav-group:hover .tnav-menu,
body[data-theme="v2"] .tnav-group:focus-within .tnav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* keep the last few menus from overflowing the right edge */
body[data-theme="v2"] .tnav-group:nth-last-child(-n+3) .tnav-menu { left: auto; right: 0; }

/* ──────────── Reduced motion ──────────── */
@media (prefers-reduced-motion: reduce) {
  body[data-theme="v2"][data-entry="app"] .cc-orb,
  body[data-theme="v2"][data-entry="app"] .brand-mark img,
  body[data-theme="v2"][data-entry="app"] .nav-item.active::before,
  body[data-theme="v2"][data-entry="app"] .cc-status-pill::before {
    animation: none !important;
  }
}

/* Hide the legacy A/B/C theme picker in v2 mode — Command Centre is "the"
   theme now. Users who want palette variants can come back to it later. */
body[data-theme="v2"][data-entry="app"] #theme-picker {
  display: none;
}

/* ──────────────────────────────────────────────────────────────
   MOBILE NAV DRAWER (v2)  —  ≤900px
   ------------------------------------------------------------------
   The v2 chrome sets `[data-entry="app"] .sidebar { position: relative }`
   and, in topbar layout, `[data-nav-layout="topbar"] .sidebar { display:none }`.
   Both have higher specificity than the dashboard.css mobile drawer rules, so
   on a phone the sidebar either left a dead 100vh band (relative, in-flow) or
   vanished entirely — and the inner nav clipped instead of scrolling. This
   block re-establishes a proper fixed off-canvas drawer for BOTH nav layouts,
   makes the inner nav the scroll region, and surfaces the backdrop. Must stay
   at the end of the file so it wins on source order.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Always drive the sidebar as an off-canvas drawer on mobile, regardless of
     the chosen desktop nav layout. !important is deliberate: it has to beat the
     [data-entry][data-theme] and [data-nav-layout] rules above. */
  body[data-theme="v2"] .sidebar,
  body[data-theme="v2"][data-entry="app"] .sidebar,
  body[data-theme="v2"][data-nav-layout="topbar"] .sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 320px);
    height: 100dvh;
    max-width: none;
    transform: translateX(-100%);
    transition: transform .26s ease;
    z-index: 1300;
    overflow: hidden;               /* the inner nav scrolls, not the panel */
    padding: 18px 14px;
  }
  body[data-theme="v2"].sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  /* Brand + footer stay pinned; the nav list between them is the scroll area. */
  body[data-theme="v2"] .sidebar .brand-block,
  body[data-theme="v2"] .sidebar .sidebar-footer {
    flex: 0 0 auto;
  }
  body[data-theme="v2"] .sidebar #sidebar-nav,
  body[data-theme="v2"] .sidebar .nav-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* The horizontal top-nav uses hover/focus dropdowns that are unusable on
     touch — never show it on mobile; the drawer is the single nav surface. */
  body[data-theme="v2"][data-nav-layout="topbar"] .topbar-nav,
  body[data-theme="v2"] .topbar-nav {
    display: none !important;
  }

  /* Backdrop: the JS toggles the [hidden] attribute but the base rule keeps it
     at opacity:0, so it never dimmed. Surface it (below the drawer, above the
     topbar) whenever the drawer is open. */
  body[data-theme="v2"] .sidebar-backdrop:not([hidden]),
  body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    z-index: 1290;
  }

  /* Make sure the hamburger sits above the topbar content and is easy to hit. */
  body[data-theme="v2"] .sidebar-toggle {
    display: inline-flex !important;
    z-index: 1310;
  }
}

/* ──────────────────────────────────────────────────────────────
   MOBILE TOPBAR — compact to a single row  (≤640px)
   ------------------------------------------------------------------
   On a phone the full topbar (search + Back-to-Home + date pill + appearance
   switch + layout toggle + profile block) wraps into a tall stack. Collapse it
   to: ☰  ·  page title  ·  notifications + avatar. The hidden controls are
   desktop conveniences (search has Ctrl+K, layout toggle is moot on mobile
   since the drawer is forced, appearance is a set-once preference).
   ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body[data-theme="v2"] .topbar {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px 12px;
    align-items: center;
  }
  body[data-theme="v2"] .topbar-title-group {
    flex: 1 1 auto;
    min-width: 0;
  }
  body[data-theme="v2"] .topbar .breadcrumbs,
  body[data-theme="v2"] .topbar-sub {
    display: none;
  }
  body[data-theme="v2"] .topbar-title {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Desktop-only controls — hidden on phones to declutter. */
  body[data-theme="v2"] .topbar-search,
  body[data-theme="v2"] .topbar-home-btn,
  body[data-theme="v2"] .topbar-pill,
  body[data-theme="v2"] .appearance-switch,
  body[data-theme="v2"] #nav-layout-toggle,
  body[data-theme="v2"] .topbar-profile-meta {
    display: none !important;
  }
  /* Tight right-hand cluster: notifications + avatar only. */
  body[data-theme="v2"] .topbar-actions {
    margin-left: auto;
    flex: 0 0 auto;
    gap: 8px;
  }
  body[data-theme="v2"] .topbar-profile {
    padding: 0;
    gap: 0;
  }
  /* The role-preview exit pill stays (it's important when active) but compact. */
  body[data-theme="v2"] .topbar-preview-btn {
    font-size: var(--text-xs, .72rem);
    padding: 6px 10px;
  }
}