/* ==============================================================================
   AC2 — Command Center theme. Overlays app.css to give the logged-in panel a
   modern, futuristic game-server-control-room feel. Scoped under .ui-cc so the
   landing page and email templates keep their existing styling.

   Aesthetic anchors:
     • Deep void background + animated dot grid + radial corner glow
     • Glass-morphism cards with thin borders + tasteful neon edge on hover
     • Punchy neon accents: cyan, violet, lime, magenta
     • Live status indicators with pulse animations
     • Sharp 6-8px corners (no big rounded Bootstrap blobs)
     • Monospace for any tech / metric value
     • Subtle scanline overlay on hero panels
     • Springy hover lifts + smooth fade-in transitions
   ============================================================================== */

:root {
  /* Re-tinted brand tokens — picked up by .ui-cc surfaces below */
  --cc-bg-0:          #06080d;   /* page void */
  --cc-bg-1:          #0a0d14;   /* sidebar / topbar */
  --cc-bg-2:          #0d111b;   /* card surface */
  --cc-bg-3:          #131826;   /* elevated row */
  --cc-bg-4:          #181f30;   /* hover */
  --cc-line:          rgba(255,255,255,.07);
  --cc-line-2:        rgba(255,255,255,.12);
  --cc-line-hot:      rgba(124,109,255,.45);

  --cc-text:          #d7dcec;
  --cc-text-soft:     #9aa3bd;
  --cc-text-muted:    #6c7591;

  --cc-cyan:          #00e5ff;
  --cc-violet:        #7c6dff;
  --cc-lime:          #84ff3d;
  --cc-magenta:       #ff3d8b;
  --cc-amber:         #ffb547;

  --cc-ok:            #2ee676;
  --cc-warn:          #ffb547;
  --cc-bad:           #ff5b6e;
  --cc-info:          #50d2ff;

  --cc-glow-cyan:     0 0 0 1px rgba(0,229,255,.35), 0 0 24px rgba(0,229,255,.15);
  --cc-glow-violet:   0 0 0 1px rgba(124,109,255,.40), 0 0 28px rgba(124,109,255,.18);
  --cc-glow-ok:       0 0 0 1px rgba(46,230,118,.40), 0 0 18px rgba(46,230,118,.20);
  --cc-glow-bad:      0 0 0 1px rgba(255,91,110,.45), 0 0 22px rgba(255,91,110,.22);

  --cc-radius:        10px;
  --cc-radius-sm:     6px;
  --cc-mono:          'JetBrains Mono', 'Fira Code', 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* ============================================================================
   Global page chrome — only applied when body carries .ui-cc.
   ============================================================================ */
body.ui-cc {
  background: var(--cc-bg-0);
  color: var(--cc-text);
  font-feature-settings: 'cv11','ss01','ss03';
  letter-spacing: -.005em;
}
body.ui-cc::before {
  /* Ambient dot grid + radial corner glow — animated subtly so the panel
     feels alive without the user actually focusing on it. */
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(800px 600px at 12% -10%, rgba(124,109,255,.10), transparent 60%),
    radial-gradient(900px 700px at 110% 10%, rgba(0,229,255,.08), transparent 55%),
    radial-gradient(600px 500px at 50% 120%, rgba(255,61,139,.06), transparent 55%),
    radial-gradient(1px 1px at 25px 25px, rgba(255,255,255,.04) 1px, transparent 0),
    radial-gradient(1px 1px at 75px 75px, rgba(255,255,255,.025) 1px, transparent 0);
  background-size: auto, auto, auto, 50px 50px, 100px 100px;
  background-attachment: fixed;
  animation: cc-ambient 30s ease-in-out infinite;
}
@keyframes cc-ambient {
  0%, 100% { opacity: 1; }
  50%      { opacity: .85; }
}

/* App shell sits above the ambient layer */
body.ui-cc .app-shell,
body.ui-cc .topbar,
body.ui-cc .main-content,
body.ui-cc .app-main { position: relative; z-index: 1; }

/* ============================================================================
   Sidebar — narrow dark column with icon-first labels + sharp edges.
   ============================================================================ */
body.ui-cc .sidebar {
  background: linear-gradient(180deg, #0a0d14 0%, #07090f 100%);
  border-right: 1px solid var(--cc-line);
  box-shadow: 1px 0 0 rgba(255,255,255,.02), 8px 0 30px rgba(0,0,0,.35);
}
body.ui-cc .brand-card,
body.ui-cc .brand-card--wordmark {
  background: transparent;
  border-bottom: 1px solid var(--cc-line);
  padding: 18px 18px 16px;
}
body.ui-cc .brand-tag {
  color: var(--cc-text-muted);
  font-family: var(--cc-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Active-server picker becomes a glowing capsule */
body.ui-cc .dmw-active-server-btn {
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border: 1px solid var(--cc-line-2);
  border-radius: var(--cc-radius);
  padding: 10px 12px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  position: relative;
  overflow: hidden;
}
body.ui-cc .dmw-active-server-btn::after {
  /* Subtle inner scanline that drifts to make the chip feel "online". */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,229,255,.04) 50%, transparent 100%);
  background-size: 100% 200%;
  animation: cc-scan 6s linear infinite;
  pointer-events: none;
}
@keyframes cc-scan { 0%{background-position:0 -100%} 100%{background-position:0 100%} }
body.ui-cc .dmw-active-server-btn:hover {
  border-color: var(--cc-line-hot);
  box-shadow: 0 0 24px rgba(124,109,255,.12);
  transform: translateY(-1px);
}
body.ui-cc .dmw-active-server-name {
  font-weight: 700; letter-spacing: -.01em; color: var(--cc-text);
}
body.ui-cc .dmw-active-server-meta {
  color: var(--cc-text-muted);
  font-family: var(--cc-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.ui-cc .dmw-active-server-icon {
  border-radius: 8px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Nav items — flat, icon-led, with a left-rail glow when active */
body.ui-cc .sidebar-nav .nav-section-label,
body.ui-cc .sidebar-nav .nav-section {
  font-family: var(--cc-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--cc-text-muted);
  text-transform: uppercase;
  padding: 14px 18px 6px;
}
body.ui-cc .sidebar-nav .nav-link,
body.ui-cc .sidebar-nav a {
  position: relative;
  padding: 9px 16px 9px 18px;
  border-radius: 0;
  color: var(--cc-text-soft);
  font-weight: 500;
  font-size: 13.5px;
  display: flex; align-items: center; gap: 12px;
  transition: color .15s ease, background .15s ease;
}
body.ui-cc .sidebar-nav .nav-link::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: transparent;
  border-radius: 0 3px 3px 0;
  transition: background .15s ease, box-shadow .2s ease;
}
body.ui-cc .sidebar-nav .nav-link:hover {
  color: var(--cc-text);
  background: linear-gradient(90deg, rgba(124,109,255,.08), transparent 60%);
}
body.ui-cc .sidebar-nav .nav-link.active,
body.ui-cc .sidebar-nav .nav-link[aria-current="page"] {
  color: var(--cc-text);
  background: linear-gradient(90deg, rgba(0,229,255,.08), transparent 60%);
}
body.ui-cc .sidebar-nav .nav-link.active::before {
  background: linear-gradient(180deg, var(--cc-cyan), var(--cc-violet));
  box-shadow: 0 0 14px rgba(0,229,255,.55);
}
body.ui-cc .sidebar-nav .nav-link i.bi { font-size: 15px; width: 18px; text-align: center; }

/* ============================================================================
   Topbar — minimal command bar with global search + live-pulse dot
   ============================================================================ */
body.ui-cc .topbar, body.ui-cc .app-topbar {
  background: linear-gradient(180deg, rgba(8,11,18,.85), rgba(8,11,18,.65));
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid var(--cc-line);
}
body.ui-cc .topbar-search,
body.ui-cc .topbar input[type="search"] {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: var(--cc-radius);
  font-family: var(--cc-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--cc-text);
}
body.ui-cc .topbar-search:focus-within,
body.ui-cc .topbar input[type="search"]:focus {
  border-color: rgba(0,229,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,.10), 0 0 24px rgba(0,229,255,.10);
}
body.ui-cc .topbar-search kbd {
  background: rgba(255,255,255,.06);
  color: var(--cc-text-muted);
  border: 1px solid var(--cc-line);
  font-family: var(--cc-mono);
  font-size: 10px;
  padding: 2px 6px;
}

body.ui-cc .dmw-topbar-server {
  background: rgba(255,255,255,.025) !important;
  border-radius: var(--cc-radius) !important;
  padding: 5px 10px !important;
  font-family: var(--cc-mono);
  font-size: 11.5px !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body.ui-cc .dmw-topbar-server:hover { box-shadow: 0 0 18px rgba(124,109,255,.18); }

body.ui-cc .icon-btn {
  border-radius: var(--cc-radius-sm);
  border: 1px solid transparent;
  color: var(--cc-text-soft);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
body.ui-cc .icon-btn:hover {
  color: var(--cc-text);
  background: rgba(124,109,255,.08);
  border-color: var(--cc-line-hot);
}

/* ============================================================================
   Card surface — glass panel with thin border + hover glow ring
   ============================================================================ */
body.ui-cc .card {
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 100%);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 2px 20px rgba(0,0,0,.25);
  transition: border-color .2s ease, transform .15s ease, box-shadow .25s ease;
  position: relative;
}
body.ui-cc .card::before {
  /* Subtle inner top-edge highlight — gives the glass a real edge */
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 16%);
  opacity: .85;
}
body.ui-cc .card:hover { border-color: var(--cc-line-2); }
body.ui-cc .card.card--hot {
  border-color: var(--cc-line-hot);
  box-shadow: var(--cc-glow-violet);
}

/* Stat-card → futuristic readout */
body.ui-cc .stat-card {
  padding: 16px 18px 14px;
}
body.ui-cc .stat-card .stat-label {
  font-family: var(--cc-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
}
body.ui-cc .stat-card .stat-value {
  font-family: var(--cc-mono);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -.01em;
  color: var(--cc-text);
  line-height: 1.05;
  margin-top: 4px;
  text-shadow: 0 0 18px rgba(0,229,255,.12);
}
body.ui-cc .stat-card .stat-value small {
  font-size: 14px; font-weight: 600; opacity: .55; margin-left: 2px;
  text-shadow: none;
}
body.ui-cc .stat-card .stat-sub {
  margin-top: 6px;
  color: var(--cc-text-muted);
  font-size: 11.5px;
  font-family: var(--cc-mono);
  letter-spacing: .02em;
}
body.ui-cc .stat-card .stat-icon {
  background: linear-gradient(135deg, rgba(0,229,255,.18), rgba(124,109,255,.18)) !important;
  color: var(--cc-cyan) !important;
  border: 1px solid rgba(0,229,255,.30) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 18px rgba(0,229,255,.15);
}
body.ui-cc .stat-card .stat-icon.cyan { color: var(--cc-cyan) !important; }
body.ui-cc .stat-card .stat-icon.pink {
  color: var(--cc-magenta) !important;
  background: linear-gradient(135deg, rgba(255,61,139,.18), rgba(124,109,255,.18)) !important;
  border-color: rgba(255,61,139,.30) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 18px rgba(255,61,139,.15);
}
body.ui-cc .stat-card .stat-icon.violet, body.ui-cc .stat-card .stat-icon.purple {
  color: var(--cc-violet) !important;
}

/* ============================================================================
   Buttons — sharp, with glow-on-hover for primary actions
   ============================================================================ */
body.ui-cc .btn {
  border-radius: var(--cc-radius-sm);
  font-weight: 600;
  letter-spacing: .01em;
  font-size: 13px;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
body.ui-cc .btn-primary {
  background: linear-gradient(135deg, var(--cc-violet) 0%, #5840f3 100%);
  border: none;
  color: #fff;
  box-shadow: 0 6px 18px rgba(124,109,255,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
body.ui-cc .btn-primary:hover {
  background: linear-gradient(135deg, #9583ff 0%, #6a52ff 100%);
  box-shadow: 0 8px 26px rgba(124,109,255,.48), inset 0 1px 0 rgba(255,255,255,.22);
  transform: translateY(-1px);
}
body.ui-cc .btn-primary:active { transform: translateY(0); }

body.ui-cc .btn-outline-light,
body.ui-cc .btn-ghost {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--cc-line-2);
  color: var(--cc-text-soft);
}
body.ui-cc .btn-outline-light:hover,
body.ui-cc .btn-ghost:hover {
  background: rgba(124,109,255,.10);
  border-color: var(--cc-line-hot);
  color: var(--cc-text);
}

body.ui-cc .btn-success {
  background: linear-gradient(135deg, #18c46b, #0ea35a);
  border: none;
  box-shadow: 0 6px 18px rgba(46,230,118,.25), inset 0 1px 0 rgba(255,255,255,.16);
}
body.ui-cc .btn-danger {
  background: linear-gradient(135deg, #ff5b6e, #d63a4e);
  border: none;
  box-shadow: 0 6px 18px rgba(255,91,110,.28), inset 0 1px 0 rgba(255,255,255,.16);
}

/* ============================================================================
   Forms — neon focus rings
   ============================================================================ */
body.ui-cc .form-control,
body.ui-cc .form-select {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--cc-line-2);
  color: var(--cc-text);
  border-radius: var(--cc-radius-sm);
}
body.ui-cc .form-control:focus,
body.ui-cc .form-select:focus {
  background: rgba(255,255,255,.04);
  border-color: rgba(0,229,255,.55);
  box-shadow: 0 0 0 3px rgba(0,229,255,.10);
  color: var(--cc-text);
}
body.ui-cc .form-label,
body.ui-cc .text-muted {
  color: var(--cc-text-muted) !important;
}

/* ============================================================================
   Tables — glassy rows with hover glow
   ============================================================================ */
body.ui-cc .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--cc-text);
  color: var(--cc-text);
}
body.ui-cc .table > :not(caption) > * > * {
  background: transparent;
  border-bottom-color: var(--cc-line);
  padding: 12px 16px;
}
body.ui-cc .table thead th {
  font-family: var(--cc-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--cc-line-2);
}
body.ui-cc .table tbody tr {
  transition: background .15s ease, box-shadow .2s ease;
}
body.ui-cc .table tbody tr:hover {
  background: linear-gradient(90deg, rgba(124,109,255,.05), transparent 70%);
  box-shadow: inset 3px 0 0 var(--cc-violet);
}

/* ============================================================================
   Status pills + dot pulses
   ============================================================================ */
body.ui-cc .status-pill,
body.ui-cc .dmw-pill {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--cc-line-2);
  color: var(--cc-text-soft);
  font-family: var(--cc-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
body.ui-cc .status-pill.live,
body.ui-cc .status-pill:not(.offline):not(.warn):not(.bad),
body.ui-cc .dmw-pill--success {
  color: var(--cc-ok);
  background: rgba(46,230,118,.10);
  border-color: rgba(46,230,118,.35);
}
body.ui-cc .dmw-pill--warning { color: var(--cc-warn); background: rgba(255,181,71,.10); border-color: rgba(255,181,71,.35); }
body.ui-cc .dmw-pill--danger,
body.ui-cc .status-pill.offline { color: var(--cc-bad); background: rgba(255,91,110,.10); border-color: rgba(255,91,110,.35); }
body.ui-cc .dmw-pill--info { color: var(--cc-info); background: rgba(80,210,255,.10); border-color: rgba(80,210,255,.35); }

body.ui-cc .dmw-pill-dot,
body.ui-cc .status-dot {
  width: 7px; height: 7px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
  animation: cc-pulse 1.6s ease-in-out infinite;
  display: inline-block;
}
body.ui-cc .status-dot.offline { animation: none; opacity: .55; }
@keyframes cc-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 4%, transparent); }
}

/* ============================================================================
   page_header() — bigger, with glow on the icon
   ============================================================================ */
body.ui-cc .dmw-page-header { margin: 6px 0 22px; }
body.ui-cc .dmw-page-header-icon {
  background: linear-gradient(135deg, rgba(0,229,255,.18), rgba(124,109,255,.20));
  border-color: rgba(0,229,255,.35);
  color: var(--cc-cyan);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 28px rgba(0,229,255,.18);
}
body.ui-cc .dmw-page-header h1 {
  font-weight: 700;
  letter-spacing: -.02em;
}
body.ui-cc .dmw-page-header-sub { font-size: 13px; }

/* Breadcrumbs */
body.ui-cc .dmw-crumbs ol { gap: 6px; }
body.ui-cc .dmw-crumb {
  font-family: var(--cc-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
}
body.ui-cc .dmw-crumb a { color: var(--cc-text-soft); text-decoration: none; }
body.ui-cc .dmw-crumb a:hover { color: var(--cc-cyan); }
body.ui-cc .dmw-crumb.is-current span { color: var(--cc-text); }
body.ui-cc .dmw-crumb-sep { color: var(--cc-text-muted); opacity: .45; font-size: 10px; }

/* ============================================================================
   Card title rows — clean section heads
   ============================================================================ */
body.ui-cc .card-title-row {
  padding: 14px 18px 6px;
  border-bottom: 1px dashed var(--cc-line);
}
body.ui-cc .card-title-row h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--cc-text);
  letter-spacing: -.005em;
  display: flex; align-items: center; gap: 8px;
  margin: 0;
}
body.ui-cc .card-title-row h2 i.bi { color: var(--cc-cyan); font-size: 15px; }

/* ============================================================================
   Dashboard hero — animated grid + scanline + giant server name
   ============================================================================ */
body.ui-cc .dmw-cc-hero {
  position: relative;
  overflow: hidden;
  padding: 24px 26px 22px;
  border-radius: var(--cc-radius);
  background:
    linear-gradient(135deg, rgba(124,109,255,.06), rgba(0,229,255,.03) 60%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  border: 1px solid var(--cc-line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 30px rgba(0,0,0,.35);
}
body.ui-cc .dmw-cc-hero::before {
  /* grid overlay */
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0,229,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 60% 40%, #000 0%, transparent 70%);
  opacity: .6;
}
body.ui-cc .dmw-cc-hero::after {
  /* scanline drift */
  content: '';
  position: absolute; left: 0; right: 0; height: 80px;
  background: linear-gradient(180deg, transparent, rgba(0,229,255,.07), transparent);
  pointer-events: none;
  animation: cc-hero-scan 7s linear infinite;
}
@keyframes cc-hero-scan { 0%{top:-80px} 100%{top:100%} }
body.ui-cc .dmw-cc-hero-title {
  font-family: var(--cc-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--cc-text-muted);
  text-transform: uppercase;
}
body.ui-cc .dmw-cc-hero-name {
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #ffffff 0%, #b8c2e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 28px rgba(0,229,255,.18);
  line-height: 1.1;
  margin: 4px 0 6px;
}
body.ui-cc .dmw-cc-hero-meta {
  display: inline-flex; gap: 14px; flex-wrap: wrap;
  color: var(--cc-text-soft);
  font-family: var(--cc-mono);
  font-size: 12px;
  letter-spacing: .04em;
}

/* ============================================================================
   Live console (AC1.C.1) — terminal glow
   ============================================================================ */
body.ui-cc .dmw-console {
  background: #04060b;
  border-color: var(--cc-line);
  color: #cfe6ff;
  text-shadow: 0 0 8px rgba(0,229,255,.12);
}
body.ui-cc .dmw-console-line--chat { color: var(--cc-cyan); }
body.ui-cc .dmw-console-line--kill { color: var(--cc-amber); }
body.ui-cc .dmw-console-line--err  { color: var(--cc-bad); background: rgba(255,91,110,.05); }
body.ui-cc .dmw-console-line--warn { color: var(--cc-warn); }
body.ui-cc .dmw-console-prompt { color: var(--cc-lime); text-shadow: 0 0 10px rgba(132,255,61,.45); }
body.ui-cc .dmw-console-filters .btn {
  border-radius: var(--cc-radius-sm);
}
body.ui-cc .dmw-console-filters .btn.active {
  background: rgba(124,109,255,.18);
  border-color: var(--cc-line-hot);
  color: var(--cc-text);
  box-shadow: inset 0 0 0 1px rgba(124,109,255,.30);
}

/* ============================================================================
   Empty-state — friendlier, with a soft glow ring around the icon
   ============================================================================ */
body.ui-cc .empty-state > .bi {
  color: var(--cc-violet);
  background: linear-gradient(135deg, rgba(124,109,255,.18), rgba(0,229,255,.10));
  width: 64px; height: 64px;
  border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px;
  border: 1px solid rgba(124,109,255,.35);
  box-shadow: 0 0 28px rgba(124,109,255,.20);
}
body.ui-cc .empty-state h3 {
  font-weight: 700; letter-spacing: -.01em; color: var(--cc-text);
}
body.ui-cc .empty-state p { color: var(--cc-text-soft); }

/* ============================================================================
   Command palette (Ctrl+K) — modal with fuzzy nav
   ============================================================================ */
.cc-cmdk-backdrop {
  position: fixed; inset: 0;
  background: rgba(4,6,10,.65);
  backdrop-filter: blur(6px);
  z-index: 2000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  animation: cc-fade-in .12s ease-out;
}
.cc-cmdk-backdrop.is-open { display: flex; }
.cc-cmdk {
  width: 100%;
  max-width: 600px;
  background: linear-gradient(180deg, #0c1018 0%, #07090f 100%);
  border: 1px solid var(--cc-line-hot);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 60px rgba(124,109,255,.20);
  overflow: hidden;
}
.cc-cmdk-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--cc-line);
}
.cc-cmdk-input-row i { color: var(--cc-cyan); font-size: 18px; }
.cc-cmdk-input {
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--cc-text);
  font-size: 15px;
  flex: 1;
  font-family: var(--cc-mono);
  letter-spacing: -.01em;
}
.cc-cmdk-input::placeholder { color: var(--cc-text-muted); }
.cc-cmdk-list {
  max-height: 56vh;
  overflow-y: auto;
  padding: 6px 0 10px;
}
.cc-cmdk-section {
  font-family: var(--cc-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
  padding: 10px 18px 4px;
}
.cc-cmdk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  color: var(--cc-text-soft);
  cursor: pointer;
  font-size: 13.5px;
  border-left: 3px solid transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.cc-cmdk-item:hover, .cc-cmdk-item.is-active {
  background: linear-gradient(90deg, rgba(0,229,255,.06), transparent 60%);
  color: var(--cc-text);
  border-left-color: var(--cc-cyan);
}
.cc-cmdk-item i.bi { color: var(--cc-cyan); font-size: 15px; width: 18px; text-align: center; }
.cc-cmdk-item-meta { margin-left: auto; color: var(--cc-text-muted); font-family: var(--cc-mono); font-size: 10.5px; letter-spacing: .06em; }
.cc-cmdk-foot {
  border-top: 1px solid var(--cc-line);
  padding: 8px 18px;
  display: flex; gap: 14px;
  font-family: var(--cc-mono);
  font-size: 10.5px;
  color: var(--cc-text-muted);
  letter-spacing: .04em;
}
.cc-cmdk-foot kbd {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--cc-line);
  color: var(--cc-text-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--cc-mono);
  margin: 0 3px;
}

@keyframes cc-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============================================================================
   Misc — modals, alerts, scrollbar, links
   ============================================================================ */
body.ui-cc .modal-content {
  background: linear-gradient(180deg, #0d111b 0%, #080a12 100%);
  border: 1px solid var(--cc-line-2);
  border-radius: var(--cc-radius);
}
body.ui-cc .modal-header, body.ui-cc .modal-footer {
  border-color: var(--cc-line);
}
body.ui-cc .alert {
  border-radius: var(--cc-radius);
  border: 1px solid var(--cc-line-2);
}
body.ui-cc .alert-danger { background: rgba(255,91,110,.08); border-color: rgba(255,91,110,.30); color: #ffd7db; }
body.ui-cc .alert-info   { background: rgba(80,210,255,.08); border-color: rgba(80,210,255,.30); color: #d6f1ff; }
body.ui-cc .alert-success{ background: rgba(46,230,118,.08); border-color: rgba(46,230,118,.30); color: #d9f7e6; }
body.ui-cc .alert-warning{ background: rgba(255,181,71,.08); border-color: rgba(255,181,71,.30); color: #ffeacc; }

body.ui-cc a { color: var(--cc-cyan); transition: color .15s ease; }
body.ui-cc a:hover { color: #66f0ff; }

body.ui-cc ::-webkit-scrollbar { width: 10px; height: 10px; }
body.ui-cc ::-webkit-scrollbar-track { background: transparent; }
body.ui-cc ::-webkit-scrollbar-thumb { background: rgba(124,109,255,.25); border-radius: 6px; }
body.ui-cc ::-webkit-scrollbar-thumb:hover { background: rgba(124,109,255,.50); }

/* dropdown menu polish */
body.ui-cc .dropdown-menu {
  background: linear-gradient(180deg, #0d111b 0%, #08090f 100%);
  border: 1px solid var(--cc-line-2);
  border-radius: var(--cc-radius);
  box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.02);
  padding: 6px;
}
body.ui-cc .dropdown-item {
  color: var(--cc-text-soft);
  border-radius: 6px;
  font-size: 13px;
}
body.ui-cc .dropdown-item:hover, body.ui-cc .dropdown-item:focus {
  background: rgba(124,109,255,.10);
  color: var(--cc-text);
}

/* ============================================================================
   Page-load fade — soft entrance so navigation feels less jarring
   ============================================================================ */
body.ui-cc .main-content > *,
body.ui-cc .app-main > * {
  animation: cc-page-in .35s cubic-bezier(.16,1,.3,1);
}
@keyframes cc-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Small refinement: keep landing/admin pages unaffected. */
body:not(.ui-cc) .cc-cmdk-backdrop { display: none !important; }