/* ═══════════════════════════════════════════════════════════════════
   NICE — App Stylesheet
   Mobile-first PWA styles. Inherits theme tokens from theme.css.
   Design: flat vector graphics — no box-shadows anywhere.
═══════════════════════════════════════════════════════════════════ */

/* Universal: no shadows — flat design */
*, *::before, *::after { box-shadow:none !important; }

/* Spacing scale (4px base) */
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;

  --pad-xs: 4px 8px;
  --pad-sm: 8px 12px;
  --pad-md: 10px 14px;
  --pad-lg: 16px;
  --pad-xl: 24px;

  --gap-tight: 4px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 16px;
  --gap-xl: 20px;

  --width-form: 680px;
  --width-content: 800px;
  --width-large: 1200px;
  --width-full: 1200px;
}

/* ─────────────────────────────────────────────────────────────────
   ICONS
───────────────────────────────────────────────────────────────── */
.icon { display:inline-block; vertical-align:middle; }
.icon-sm { width:18px; height:18px; }
.icon-tab { width:22px; height:22px; }

/* ─────────────────────────────────────────────────────────────────
   MATRIX CANVAS
───────────────────────────────────────────────────────────────── */
#matrix-canvas {
  position:fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:0; display:none;
}

/* ─────────────────────────────────────────────────────────────────
   APP HEADER (removed — layout now uses full-height sidebar)
───────────────────────────────────────────────────────────────── */
.app-hdr { display:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.app-brand {
  display:flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--accent);
}
.app-brand-text {
  font-family:var(--font-d); font-size:.9rem; font-weight:700;
  letter-spacing:.14em; color:var(--accent);
}
.app-hdr-btn {
  background:none; border:var(--border-width) solid var(--border);
  color:var(--text-muted); cursor:pointer; padding:5px 8px;
  font-family:var(--font-m); font-size:.55rem; letter-spacing:.1em;
  transition:color .2s, border-color .2s;
}
.app-hdr-btn:hover, .app-hdr-btn.active { color:var(--accent); border-color:var(--accent); }
.app-hdr-menu { display:none; background:none; border:none; color:var(--text-muted); cursor:pointer; padding:6px; }

/* User info (now in sidebar footer) */
.hdr-user { display:flex; align-items:center; gap:8px; }
.side-user-top { display:flex; align-items:center; gap:8px; min-width:0; }
.hdr-username { font-size:.75rem; font-family:var(--font-m); color:var(--text-muted); white-space:nowrap; }
.hdr-user-badge {
  font-size:.55rem; font-family:var(--font-m); letter-spacing:.1em;
  padding:2px 8px; border:1px solid var(--accent); color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius:4px; white-space:nowrap;
}

.app-bell { position:relative; }
.app-bell-badge {
  position:absolute; top:-4px; right:-4px;
  background:#ef4444; color:#fff; font-size:.5rem;
  font-family:var(--font-m); min-width:14px; height:14px;
  border-radius:7px; display:flex; align-items:center; justify-content:center;
  padding:0 3px;
}

.hud-alert-badge {
  background:#ef4444; color:#fff; font-size:.5rem;
  font-family:var(--font-m); min-width:14px; height:14px;
  border-radius:7px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 3px; margin-right:4px; vertical-align:middle;
  cursor:pointer;
}
.hud-alert-dropdown {
  position:fixed; z-index:9999;
  width:280px; max-height:360px; overflow:hidden;
  background:var(--panel-bg); border:1px solid var(--border);
  border-radius:var(--radius); display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease;
}
.hud-alert-dropdown.open {
  opacity:1; pointer-events:auto; transform:translateY(0);
}
.hud-alert-hdr {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; border-bottom:1px solid var(--border);
}
.hud-alert-title { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); }
.hud-alert-mark {
  background:none; border:none; color:var(--accent); font-size:.65rem;
  cursor:pointer; font-family:var(--font-b);
}
.hud-alert-list { overflow-y:auto; flex:1; }
.hud-alert-empty { padding:24px 12px; text-align:center; color:var(--text-muted); font-size:.75rem; }
.hud-alert-item {
  display:flex; gap:8px; padding:8px 12px; border-bottom:1px solid var(--border);
  cursor:pointer; transition:background .15s;
}
.hud-alert-item:hover { background:var(--bg-alt); }
.hud-alert-item.unread { border-left:2px solid #ef4444; }
.hud-alert-item-icon { flex-shrink:0; width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
.hud-alert-item-body { flex:1; min-width:0; }
.hud-alert-item-title { display:block; font-size:.75rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hud-alert-item-msg { display:block; font-size:.65rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hud-alert-item-time { flex-shrink:0; font-size:.6rem; color:var(--text-muted); }
@media (max-width:768px) {
  .hud-alert-dropdown { left:12px !important; right:12px; width:auto; }
}

/* ── Bell Dropdown ── */
.bell-dropdown {
  position:absolute; top:100%; right:0; z-index:220;
  width:320px; max-height:420px; overflow:hidden;
  background:var(--panel-bg); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.4);
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease;
}
.bell-dropdown.open { opacity:1; pointer-events:auto; transform:translateY(0); }
.bell-dropdown-hdr {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; border-bottom:1px solid var(--border);
}
.bell-dropdown-title { font-family:var(--font-h); font-size:.82rem; font-weight:700; color:var(--text); }
.bell-dropdown-mark {
  background:none; border:none; color:var(--accent); cursor:pointer;
  font-size:.68rem; font-family:var(--font-m); padding:0;
}
.bell-dropdown-mark:hover { text-decoration:underline; }
.bell-dropdown-list { flex:1; overflow-y:auto; }
.bell-dropdown-item {
  display:flex; align-items:flex-start; gap:10px; padding:10px 14px;
  border-bottom:1px solid var(--border); cursor:pointer;
  transition:background .15s;
}
.bell-dropdown-item:last-child { border-bottom:none; }
.bell-dropdown-item:hover { background:var(--bg-alt); }
.bell-dropdown-item.unread { background:rgba(99,102,241,.06); }
.bell-item-icon { flex-shrink:0; margin-top:2px; }
.bell-item-body { flex:1; min-width:0; }
.bell-item-title { display:block; font-size:.75rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bell-item-msg { display:block; font-size:.68rem; color:var(--text-muted); margin-top:1px; line-height:1.3; }
.bell-item-time { flex-shrink:0; font-size:.6rem; color:var(--text-dim, var(--text-muted)); font-family:var(--font-m); margin-top:2px; }
.bell-dropdown-empty { padding:24px 14px; text-align:center; color:var(--text-muted); font-size:.78rem; }
.bell-dropdown-footer {
  display:block; text-align:center; padding:10px; border-top:1px solid var(--border);
  font-size:.72rem; color:var(--accent); text-decoration:none; font-family:var(--font-m);
}
.bell-dropdown-footer:hover { background:var(--bg-alt); }

/* ─────────────────────────────────────────────────────────────────
   HUD PANEL (inline sidebar, slides open pushing nav down)
───────────────────────────────────────────────────────────────── */
.app-hud-panel {
  max-height:0; overflow:hidden; opacity:0;
  padding:0 14px;
  border-bottom:0 solid var(--border);
  display:flex; flex-direction:column; gap:8px;
  transition:max-height .3s ease, opacity .25s ease, padding .3s ease, border-bottom-width .3s ease;
  flex-shrink:0;
}
.app-hud-panel.open {
  max-height:280px; opacity:1;
  padding:10px 14px;
  border-bottom:var(--border-width, 1px) solid var(--border);
}
.hud-row { display:flex; align-items:center; gap:5px; }
.hud-row-sep { height:1px; background:var(--border); margin:4px 0; }
.hud-notif-row { justify-content:space-between; padding:2px 0; }
.hud-notif-row .bell-dropdown { position:absolute; top:auto; left:0; right:0; margin-top:4px; }
.dock-lbl { font-family:var(--font-m); font-size:.55rem; letter-spacing:.14em; color:var(--text-muted); margin-right:2px; padding-right:6px; }
.dock-lbl-sep { color:var(--border-hi); margin:0 2px; }
.dock-lbl-val { color:var(--accent); letter-spacing:.08em; }

/* Theme dots */
.db {
  width:18px; height:18px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; flex-shrink:0; transition:border-color .15s, transform .15s;
}
.db:hover { transform:scale(1.2); }
.db.active { border-color:var(--accent); transform:scale(1.15); }
.d-sp { background:#888; }
.d-iv { background:#f0f0f0; }
.d-nv { background:#00e5ff; }
.d-sl { background:#ff8c00; }
.d-mx { background:#00ff41; }
.d-rt { background:#e86c3a; }
.d-lc { background:#ff9966; }
.d-px { background:#ffff00; }

/* Font buttons */
.fb {
  width:18px; height:18px;
  border:1px solid var(--border); background:transparent;
  color:var(--text-muted); cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; transition:border-color .15s, color .15s;
}
.fb:hover { border-color:var(--border-hi); color:var(--text); }
.fb.active { border-color:var(--accent); color:var(--accent); }
.fb-auto  { font-family:var(--font-m); font-size:10px; }
.fb-clean { font-family:'Inter', sans-serif; font-size:11px; font-weight:600; }
.fb-space { font-family:'Orbitron', sans-serif; font-size:7px; font-weight:700; }
.fb-tac   { font-family:'Rajdhani', sans-serif; font-size:12px; font-weight:700; }
.fb-code  { font-family:'Fira Code', monospace; font-size:9px; }
.fb-serif { font-family:'Playfair Display', serif; font-size:11px; font-style:italic; }
.fb-mono  { font-family:'Share Tech Mono', monospace; font-size:10px; }
.fb-pixel { font-family:'Press Start 2P', monospace; font-size:5px; }

/* ── Pixel theme font-size overrides (Press Start 2P renders ~2× larger) ── */
[data-theme="pixel"] .app-sidebar { font-size:9px; }
[data-theme="pixel"] .app-sidebar .nav-link { font-size:9px; padding:8px 12px; }
[data-theme="pixel"] .app-sidebar .sidebar-section-label { font-size:7px; }
[data-theme="pixel"] .app-sidebar .badge { font-size:7px; }
[data-theme="pixel"] .view-container { font-size:10px; }
[data-theme="pixel"] .view-container h1 { font-size:16px; }
[data-theme="pixel"] .view-container h2 { font-size:13px; }
[data-theme="pixel"] .view-container h3 { font-size:11px; }
[data-theme="pixel"] .nice-ai-input { font-size:10px; }
[data-theme="pixel"] .nice-ai-chip { font-size:8px; }
[data-theme="pixel"] .nice-ai-disclaimer { font-size:7px; }
[data-theme="pixel"] .app-hdr { font-size:9px; }
[data-theme="pixel"] .hud-row { font-size:8px; }
[data-theme="pixel"] .dock-lbl { font-size:7px; }
[data-theme="pixel"] .topbar-tab { font-size:8px; }
[data-theme="pixel"] .c-btn, [data-theme="pixel"] .btn { font-size:9px; }
[data-theme="pixel"] .filter-select, [data-theme="pixel"] .search-input { font-size:9px; }

/* ─────────────────────────────────────────────────────────────────
   SIDEBAR (Desktop always visible, mobile drawer)
───────────────────────────────────────────────────────────────── */
.app-sidebar {
  position:fixed; top:0; left:0; bottom:0; width:56px;
  background:var(--nav-bg); backdrop-filter:blur(18px);
  border-right:var(--border-width) solid var(--border);
  display:flex; flex-direction:column;
  overflow:hidden; z-index:200;
  transition:width .3s ease;
}
.app-sidebar.open { width:280px; }
.app-side-nav { flex:1; overflow-y:auto; }
.app-sidebar-overlay {
  display:none; position:fixed; inset:0; z-index:299;
  background:rgba(0,0,0,.5);
}
.app-sidebar-overlay.open { display:block; }

/* Sidebar header — logo + actions */
.side-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px 12px; flex-shrink:0;
  border-bottom:var(--border-width) solid var(--border);
}
.side-header .app-brand-text { font-size:1rem; }
.side-header-actions { display:flex; align-items:center; gap:6px; }
.app-sidebar.open .side-toggle-btn { order:1; }
.side-header .app-hdr-menu { display:none; }

/* Sidebar user card (footer) */
.side-footer-row {
  display:flex; align-items:center; gap:4px;
}
.side-user-card {
  display:flex; flex-direction:column; gap:4px;
  padding:8px 10px; border-radius:var(--radius);
  text-decoration:none; color:var(--text-muted);
  transition:background .15s, color .15s;
  flex:1; min-width:0;
}
.side-user-card:hover { background:var(--surface); color:var(--text); }
.side-more-btn {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex-shrink:0;
  background:transparent; border:none; border-radius:var(--radius);
  color:var(--text-muted); cursor:pointer;
  transition:color .2s, background .2s;
}
.side-more-btn:hover { color:var(--text); background:var(--surface); }
.side-footer { position:relative; }
.side-popover {
  display:none; position:absolute; bottom:100%; left:8px; right:8px;
  background:var(--panel-bg, var(--bg-alt)); border:1px solid var(--border);
  border-radius:var(--radius); padding:6px 0;
  box-shadow:0 -4px 24px rgba(0,0,0,.4);
  z-index:200;
  margin-bottom:6px;
}
.side-popover.open { display:block; }
.side-popover-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; width:100%;
  background:none; border:none;
  color:var(--text-muted); text-decoration:none;
  font-family:var(--font-b); font-size:.78rem;
  cursor:pointer; transition:background .15s, color .15s;
}
.side-popover-item:hover { background:var(--surface); color:var(--text); }

.app-side-nav { display:flex; flex-direction:column; padding:8px; gap:2px; flex:1; overflow-y:hidden; }
.side-link {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  color:var(--text-muted); text-decoration:none; font-family:var(--font-b);
  font-size:.78rem; border-radius:var(--radius);
  transition:background .15s, color .15s;
}
.side-link:hover { background:var(--surface); color:var(--text); }
.side-link[draggable="true"] { cursor:grab; }
.side-link[draggable="true"]:active { cursor:grabbing; }
.side-link.side-dragging { opacity:.35; transform:scale(.95); }
.side-link.side-drag-over { border-top:2px solid var(--accent); margin-top:-2px; }
.side-link.active { background:var(--surface2); color:var(--accent); }
.side-link.active svg { color:var(--accent); }
.side-group .side-link.active { background:transparent; }
.side-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--accent); color:var(--bg); font-family:var(--font-m); font-size:.55rem; font-weight:700; margin-left:auto; line-height:1; }
.side-badge.badge-warn { background:#f59e0b; }
.side-badge.badge-danger { background:#ef4444; }
.side-divider { height:1px; background:var(--border); margin:6px 12px; }
.side-picker-popup { position:fixed; z-index:300; background:var(--panel-bg, #111); border:1px solid var(--border); display:none; flex-direction:column; min-width:140px; box-shadow:0 4px 12px rgba(0,0,0,.4); }
.side-picker-popup .side-picker-item { color:var(--text); padding:8px 14px; font-family:var(--font-b); font-size:.78rem; text-decoration:none; }
.side-picker-popup .side-picker-item:hover { background:var(--accent); color:var(--bg); }
.side-picker-popup.open { display:flex; }

/* Collapsible nav group */
.side-group {
  display:flex; align-items:center; position:relative;
}
.side-group .side-link { flex:1; min-width:0; }
.side-group-toggle {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin-right:8px;
  background:transparent; border:1px solid transparent; border-radius:var(--radius, 6px);
  color:var(--text-muted); cursor:pointer;
  transition:color .2s, background .2s, border-color .2s;
  flex-shrink:0;
}
.side-group-toggle:hover { color:var(--accent); background:var(--bg-alt); border-color:var(--border); }
.side-group-toggle svg { transition:transform .25s ease; }
.side-group-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.side-group-items {
  overflow:hidden;
  transition:max-height .25s ease, opacity .2s ease;
  max-height:500px; opacity:1;
}
.side-group-items.collapsed {
  max-height:0; opacity:0;
}

.side-footer {
  flex-shrink:0;
  padding:12px 16px; border-top:var(--border-width) solid var(--border);
}

/* ─────────────────────────────────────────────────────────────────
   MESSAGE BAR (AI Communications Feed)
───────────────────────────────────────────────────────────────── */
.msg-bar {
  display:none; /* Message bar removed — layout uses full-height sidebar */
}
.msg-bar-ticker { width:100%; height:32px; overflow:hidden; display:flex; align-items:center; }
.msg-bar-track {
  display:flex; align-items:center; white-space:nowrap;
  animation:msg-scroll 60s linear infinite;
  font-family:var(--font-m); font-size:.65rem;
  color:var(--text-muted); letter-spacing:.06em;
  transition:color .4s;
}
.msg-bar-item {
  display:inline-flex; align-items:center; gap:6px;
  padding:0 24px; border-right:1px solid var(--border);
  color:var(--text-muted); text-decoration:none; cursor:pointer;
  transition:color .15s;
}
.msg-bar-item:hover { color:var(--accent); }
.msg-bar-dot {
  width:4px; height:4px; border-radius:50%;
  background:var(--accent); box-shadow:var(--glow);
  animation:blink 2s ease-in-out infinite; flex-shrink:0;
}
.msg-bar-text { white-space:nowrap; }
@keyframes msg-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Expanded state */
.msg-bar.expanded { height:240px; overflow:visible; }
.msg-bar.expanded .msg-bar-ticker { display:none; }
.msg-bar-feed {
  display:none; flex-direction:column; overflow-y:auto;
  height:calc(240px - 8px); padding:4px 0;
}
.msg-bar.expanded .msg-bar-feed { display:flex; }
.msg-bar-feed-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 16px; font-size:.72rem;
  color:var(--text-muted); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .15s, color .15s;
}
.msg-bar-feed-item:hover { background:rgba(255,255,255,.04); color:var(--text); }
.msg-bar-feed-text { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-bar-feed-time { font-size:.6rem; color:var(--text-muted); opacity:.6; white-space:nowrap; }

/* Toggle button */
.msg-bar-toggle {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:1px solid var(--border);
  color:var(--text-muted); cursor:pointer;
  padding:3px; border-radius:var(--radius);
  transition:color .15s, border-color .15s; z-index:1;
}
.msg-bar-toggle:hover { color:var(--accent); border-color:var(--accent); }
.msg-bar.expanded .msg-bar-toggle { top:8px; transform:none; }


/* ─────────────────────────────────────────────────────────────────
   MAIN CONTENT
───────────────────────────────────────────────────────────────── */
.app-main {
  margin-top:0; margin-left:56px;
  position:relative; z-index:1;
  transition:margin-left .3s ease;
}
.app-sidebar.open ~ .app-main { margin-left:280px; }


/* ── Sidebar collapsed state ── */
.app-sidebar:not(.open) .side-link span,
.app-sidebar:not(.open) .side-group-toggle,
.app-sidebar:not(.open) .app-brand-text,
.app-sidebar:not(.open) .side-footer .hdr-username,
.app-sidebar:not(.open) .side-footer .hdr-user-badge,
.app-sidebar:not(.open) .side-footer .side-more-btn,
.app-sidebar:not(.open) .side-footer .side-popover,
.app-sidebar:not(.open) .side-footer #sidebar-presence,
.app-sidebar:not(.open) .sidebar-favorites,
.app-sidebar:not(.open) .side-section-label,
.app-sidebar:not(.open) .sidebar-section-label,
.app-sidebar:not(.open) .side-divider,
.app-sidebar:not(.open) .app-hud-panel { display:none; }
.app-sidebar:not(.open) .side-header { justify-content:center; padding:8px; }
.app-sidebar:not(.open) .side-header-actions { flex-direction:column; gap:4px; }
.app-sidebar:not(.open) .side-link { justify-content:center; padding:10px 0; }
.app-sidebar:not(.open) .side-link svg { margin:0; }
.app-sidebar:not(.open) .side-footer { padding:8px; border-top:none; }
.app-sidebar:not(.open) .side-footer-row { justify-content:center; }
.app-sidebar:not(.open) .side-user-card { padding:0; justify-content:center; align-items:center; }

/* ── Sidebar toggle chevron ── */
.side-toggle-btn {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:var(--radius, 6px);
  background:none; border:1px solid transparent;
  color:var(--text-muted); cursor:pointer;
  transition:color .2s, background .2s, border-color .2s;
}
.side-toggle-btn:hover { color:var(--accent); background:var(--bg-alt); border-color:var(--border); }
.side-toggle-btn svg { transition:transform .3s ease; }
.app-sidebar.open .side-toggle-btn svg { transform:rotate(180deg); }

/* ── Mobile top bar (hidden by default, shown on mobile) ── */
.app-mobile-bar {
  display:none;
  position:fixed; top:0; left:0; right:0; height:48px;
  background:var(--nav-bg); backdrop-filter:blur(18px);
  border-bottom:var(--border-width) solid var(--border);
  align-items:center; justify-content:space-between; padding:0 12px; z-index:301;
}
.mobile-bar-btn {
  background:none; border:none; color:var(--text-muted);
  cursor:pointer; padding:8px; display:flex; align-items:center; text-decoration:none;
}
.mobile-bar-btn:hover { color:var(--accent); }
.app-mobile-bar .app-brand-text {
  font-family:var(--font-d); font-size:.85rem; font-weight:700;
  letter-spacing:.14em; color:var(--accent);
  position:absolute; left:50%; transform:translateX(-50%);
}

@media (max-width:768px) {
  .app-mobile-bar { display:flex; }
  .app-sidebar { width:280px; transform:translateX(-100%); transition:transform .3s ease; top:0; z-index:302; }
  .app-sidebar.open { width:280px; transform:translateX(0); }
  .app-mobile-bar { transition:transform .3s ease; }
  .app-sidebar.open ~ .app-mobile-bar { transform:translateX(280px); }
  .app-sidebar.open ~ .app-mobile-bar #mobile-sidebar-toggle { visibility:hidden; }
  .app-sidebar.open ~ .app-main { margin-left:0; transform:translateX(280px); transition:transform .3s ease; }
  .app-main { margin-left:0; margin-top:48px; }
  .app-sidebar.open ~ .nice-ai { left:50%; width:calc(100% - 48px); }
  .app-sidebar:not(.open) .side-link span,
  .app-sidebar:not(.open) .app-brand-text,
  .app-sidebar:not(.open) .side-footer { display:initial; }
  .app-sidebar:not(.open) .side-header { justify-content:space-between; padding:16px 16px 12px; }
  .app-sidebar:not(.open) .side-link { justify-content:initial; padding:10px 16px; }
  .app-main { padding:0; }
  .app-view-content { padding:8px; padding-bottom:140px; }
}


/* ─────────────────────────────────────────────────────────────────
   BOTTOM TAB BAR (Mobile only)
───────────────────────────────────────────────────────────────── */
.app-tabbar {
  display:none; /* shown via media query on mobile */
  position:fixed; bottom:0; left:0; right:0;
  height:64px; background:var(--nav-bg); backdrop-filter:blur(18px);
  border-top:var(--border-width) solid var(--border);
  z-index:200; padding-bottom:env(safe-area-inset-bottom, 0);
}
.tab {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; text-decoration:none; color:var(--text-muted);
  font-family:var(--font-m); font-size:.6rem; letter-spacing:.06em;
  text-transform:uppercase; padding:8px 0;
  transition:color .15s; position:relative; flex:1;
  border-top:2px solid transparent;
}
.tab.active { color:var(--accent); border-top-color:var(--accent); }
.tab.active svg { color:var(--accent); }
.tab:active { transform:scale(0.95); }
.tab-icon-wrap { position:relative; display:inline-flex; }
.tab-alert-badge {
  position:absolute; top:-4px; right:-6px;
  background:#ef4444; color:#fff; font-size:.45rem;
  font-family:var(--font-m); min-width:12px; height:12px;
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  padding:0 2px;
}

/* ─────────────────────────────────────────────────────────────────
   EMPTY STATE
───────────────────────────────────────────────────────────────── */
.app-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:80px 24px; gap:14px; min-height:60vh;
  grid-column:1 / -1;
}
.app-empty-icon { width:64px; height:64px; opacity:.2; color:var(--accent); }
.app-empty h2 { font-family:var(--font-h); font-size:1.15rem; color:var(--text); margin:0; }
.app-empty p { color:var(--text-muted); font-size:.82rem; margin:0; max-width:320px; line-height:1.65; }
.app-empty-acts { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px; }

/* ─────────────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border:var(--border-width) solid var(--border);
  background:transparent; color:var(--text); text-decoration:none;
  font-family:var(--font-m); font-size:.72rem; letter-spacing:.08em;
  cursor:pointer; transition:border-color .2s, color .2s, box-shadow .2s;
}
.btn:hover { border-color:var(--border-hi); box-shadow:var(--glow); }
.btn-sm { font-size:.62rem; padding:6px 10px; }
.btn-primary {
  background:var(--accent); color:var(--bg); border-color:var(--accent);
}
.btn-primary:hover { box-shadow:var(--glow-hi); }

/* Highlight text */
.hl { color:var(--accent); }
.mono { font-family:var(--font-m); }

/* ─────────────────────────────────────────────────────────────────
   STATUS DOTS (reused from main site)
───────────────────────────────────────────────────────────────── */
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dot-g { background:#22c55e; }
.dot-r { background:#ef4444; }
.dot-a { background:#f59e0b; }
.dot-pulse { }


/* ─────────────────────────────────────────────────────────────────
   BRIDGE VIEW
───────────────────────────────────────────────────────────────── */
.bridge-wrap { max-width:var(--width-full); margin:0 auto; display:flex; flex-direction:column; gap:0; }

/* Bridge Stats Strip */
.bridge-stats { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.bridge-stat { display:flex; align-items:center; gap:6px; }
.bridge-stat-label { font-family:var(--font-m); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.bridge-stat-value { font-family:var(--font-d,var(--font-h)); font-size:.85rem; font-weight:700; color:var(--text); }
.bridge-stat-xp { flex:1; min-width:0; }
.bridge-xp-bar { flex:1; height:4px; background:var(--border); border-radius:2px; overflow:hidden; min-width:40px; }
.bridge-xp-fill { height:100%; background:var(--accent); transition:width .3s; }
@media (max-width:640px) { .bridge-stats { flex-wrap:wrap; gap:8px; } }

/* Ship Hero (3-view carousel) */
.bridge-hero { margin-bottom:16px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.bridge-hero-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:40px; color:var(--text-muted); text-align:center; }
.bridge-hero-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--panel-bg,rgba(255,255,255,.02)); }
.bridge-hero-info { display:flex; flex-direction:column; gap:2px; }
.bridge-hero-name { font-size:.85rem; font-weight:600; color:var(--text); }
.bridge-hero-meta { font-family:var(--font-m); font-size:.55rem; letter-spacing:.08em; color:var(--text-muted); }
.bridge-hero-tabs { display:flex; gap:4px; }
.bridge-hero-tab { background:none; border:1px solid var(--border); border-radius:var(--radius); padding:4px 10px; font-family:var(--font-m); font-size:.55rem; letter-spacing:.08em; color:var(--text-muted); cursor:pointer; transition:all .15s; }
.bridge-hero-tab:hover { color:var(--text); border-color:var(--text-muted); }
.bridge-hero-tab.active { color:var(--accent); border-color:var(--accent); background:rgba(255,255,255,.03); }
.bridge-hero-content { padding:12px; min-height:200px; display:flex; align-items:center; justify-content:center; }
.bridge-hero-schematic { width:100%; max-width:500px; margin:0 auto; }
.bridge-hero-schematic svg { width:100%; height:auto; }

/* Schematic Wired Layout */
.schematic-wired { position:relative; display:flex; align-items:stretch; width:100%; gap:0; }
.schematic-col { display:flex; flex-direction:column; gap:6px; justify-content:center; flex:0 0 100px; z-index:1; position:relative; }
.schematic-col-right { align-items:flex-start; }
.schematic-col-left { align-items:flex-end; }
.schematic-col .schematic-card-slot:nth-child(even) { transform:translateX(110px); }
.schematic-col-right .schematic-card-slot:nth-child(even) { transform:translateX(-110px); }
.schematic-center { flex:1; min-width:40px; }
.schematic-svg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.schematic-card-slot { cursor:pointer; }
.schematic-wired .schematic-card-slot .tcg-card-mini { margin:0; font-size:.58em; width:80px; border-width:3px; border-radius:8px; padding:4px; gap:3px; }
.schematic-card-empty { opacity:.5; cursor:default; }
.schematic-empty-slot { padding:4px 6px; border:3px solid var(--border); border-radius:8px; background:var(--panel-bg); aspect-ratio:5/7; width:80px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.schematic-card-role { font-family:var(--font-m); font-size:.36rem; letter-spacing:.08em; color:var(--text-muted); text-transform:uppercase; }
.schematic-card-rarity { font-family:var(--font-m); font-size:.32rem; letter-spacing:.1em; font-weight:600; }
.schematic-wired .tcg-mini-art { width:38px; height:38px; }
.schematic-wired .tcg-mini-name { max-width:70px; font-size:.46rem; }
.schematic-wired .tcg-mini-badge { font-size:.34rem; padding:1px 4px; }
@media (max-width:600px) {
  .schematic-wired { flex-direction:column; gap:4px; align-items:center; }
  .schematic-col { flex-direction:row; flex-wrap:wrap; flex:none; justify-content:center; gap:4px; }
  .schematic-col-left, .schematic-col-right { align-items:center; }
  .schematic-col .schematic-card-slot:nth-child(even) { transform:none; }
  .schematic-center { min-height:100px; }
}

/* Crew Split (crew list + blueprint card side by side) */
.bridge-crew-split { display:flex; gap:16px; width:100%; align-items:start; }
.bridge-crew-list { flex:1; min-width:0; }
.bridge-crew-card { flex:0 0 auto; width:500px; padding:0 25px; }
.bridge-crew-card .tcg-card { margin:0; width:100%; pointer-events:none; }
@media (max-width:600px) {
  .bridge-crew-split { flex-direction:column; }
  .bridge-crew-card { width:100%; padding:0; order:-1; }
}

/* Crew Slots */
.bridge-crew-list { display:flex; flex-direction:column; gap:2px; width:100%; }
.bridge-slot { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius); cursor:default; transition:background .15s; }
.bridge-slot-filled { cursor:pointer; }
.bridge-slot-filled:hover { background:var(--surface,var(--bg-alt,rgba(255,255,255,.05))); }
.bridge-slot-label { font-family:var(--font-m); font-size:.55rem; letter-spacing:.1em; color:var(--text-muted); min-width:60px; }
.bridge-slot-name { font-size:.8rem; color:var(--text); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bridge-slot-rarity { font-family:var(--font-m); font-size:.55rem; letter-spacing:.05em; }
.bridge-slot-dock { font-family:var(--font-m); font-size:.55rem; letter-spacing:.08em; color:var(--accent); text-decoration:none; }
.bridge-slot-dock:hover { text-decoration:underline; }
.bridge-slot-empty .bridge-slot-label { color:var(--text-muted); opacity:.6; }

/* Mission Feed */
.bridge-feed { display:flex; flex-direction:column; gap:12px; }
.bridge-feed-section { margin-bottom:12px; }
.bridge-feed-heading { font-family:var(--font-m); font-size:.55rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); margin:0 0 6px; padding-bottom:4px; border-bottom:1px solid var(--border); }
.bridge-mission-item { display:flex; gap:8px; padding:6px 0; align-items:flex-start; }
.bridge-mission-icon { font-size:.75rem; flex-shrink:0; margin-top:2px; }
.bridge-mission-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.bridge-mission-title { font-size:.8rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bridge-mission-meta { font-family:var(--font-m); font-size:.55rem; color:var(--text-muted); }
.bridge-mission-progress { height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.bridge-mission-progress-fill { height:100%; background:#6366f1; transition:width .3s; }
.bridge-mission-priority { font-family:var(--font-m); font-size:.5rem; letter-spacing:.08em; text-transform:uppercase; padding:1px 4px; border-radius:2px; }
.bridge-priority-high, .bridge-priority-critical { color:#ef4444; }
.bridge-priority-medium { color:#f59e0b; }
.bridge-priority-low { color:var(--text-muted); }
.bridge-feed-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:40px 0; text-align:center; color:var(--text-muted); }

/* Bridge responsive — stack on mobile */
@media (max-width:768px) {
  .bridge-hero-header { flex-direction:column; gap:8px; align-items:flex-start; }
  .bridge-hero-content { min-height:150px; }
}

/* ─────────────────────────────────────────────────────────────────
   LOG VIEW
───────────────────────────────────────────────────────────────── */
.log-view-wrap { max-width:var(--width-full); margin:0 auto; }
.log-view-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:8px; }
.log-view-tab { padding:10px 20px; background:none; border:none; border-bottom:2px solid transparent; color:var(--text-muted); font-family:var(--font-m); font-size:.72rem; letter-spacing:.1em; cursor:pointer; transition:color .2s,border-color .2s; }
.log-view-tab:hover { color:var(--text); }
.log-view-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ─────────────────────────────────────────────────────────────────
   DOCK VIEW
───────────────────────────────────────────────────────────────── */
.dock-wrap { max-width:var(--width-full); margin:0 auto; padding:0 16px; }
.dock-ships { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.dock-ship-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:border-color .15s, background .15s; flex:1 1 200px; min-width:180px; }
.dock-ship-card:hover { border-color:var(--accent); }
.dock-ship-active { border-color:var(--accent); background:rgba(255,255,255,.03); }
.dock-ship-info { display:flex; flex-direction:column; gap:2px; }
.dock-ship-name { font-size:.82rem; font-weight:600; color:var(--text); }
.dock-ship-class { font-family:var(--font-m); font-size:.55rem; letter-spacing:.08em; color:var(--text-muted); }
.dock-ship-status { font-family:var(--font-m); font-size:.55rem; letter-spacing:.08em; font-weight:600; }
.dock-schematic-section { margin-bottom:24px; }
.dock-prog-section { margin-bottom:20px; }
.dock-section-title { font-family:var(--font-m); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); margin:0 0 10px; }
.dock-xp-bar { position:relative; height:8px; background:var(--border); border-radius:4px; overflow:hidden; margin-top:10px; }
.dock-xp-fill { height:100%; background:var(--accent); transition:width .3s; }
.dock-xp-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-m); font-size:.45rem; letter-spacing:.08em; color:var(--text); }
.dock-achievements { display:flex; flex-wrap:wrap; gap:6px; }
.dock-achievement { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--border); border-radius:var(--radius); font-size:1rem; cursor:default; }


/* ─────────────────────────────────────────────────────────────────
   AUTH / PROFILE VIEW
───────────────────────────────────────────────────────────────── */
.auth-wrap {
  display:flex; align-items:center; justify-content:center;
  min-height:calc(100vh - 112px); padding:24px;
}
.auth-card {
  width:100%; max-width:380px;
  border:var(--border-width) solid var(--border); background:var(--panel-bg);
  padding:24px; border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.auth-logo { display:flex; align-items:center; justify-content:center; }
.auth-logo-svg { width:48px; height:48px; color:var(--accent); }
.auth-title { font-family:var(--font-h); font-size:1.1rem; font-weight:700; margin:0; }
.auth-sub { font-family:var(--font-m); font-size:.62rem; letter-spacing:.1em; color:var(--text-muted); margin:0; }

.auth-tabs { display:flex; width:100%; border-bottom:var(--border-width) solid var(--border); }
.auth-tab {
  flex:1; padding:10px; background:none; border:none; cursor:pointer;
  font-family:var(--font-m); font-size:.68rem; letter-spacing:.1em;
  color:var(--text-muted); text-transform:uppercase;
  border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
}
.auth-tab:hover { color:var(--text); }
.auth-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

.auth-form { display:flex; flex-direction:column; gap:14px; width:100%; }
.auth-field { display:flex; flex-direction:column; gap:4px; }
.auth-field label {
  font-family:var(--font-m); font-size:.58rem; letter-spacing:.12em;
  color:var(--text-muted); text-transform:uppercase;
}
.auth-field input {
  padding:10px 12px; background:var(--surface); border:var(--border-width) solid var(--border);
  color:var(--text); font-family:var(--font-b); font-size:.82rem;
  border-radius:var(--radius); transition:border-color .2s;
}
.auth-field input:focus { outline:none; border-color:var(--accent); }
.auth-field input::placeholder { color:var(--text-dim); }

.auth-remember {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--font-b); font-size:.78rem; color:var(--text-muted);
}
.auth-remember input[type="checkbox"] {
  width:14px; height:14px; accent-color:var(--accent); cursor:pointer;
}
.auth-error { font-family:var(--font-m); font-size:.68rem; color:#ef4444; min-height:18px; }
.auth-submit {
  padding:10px 16px; background:var(--accent); color:var(--bg); border:none;
  font-family:var(--font-d); font-size:.78rem; font-weight:700; letter-spacing:.08em;
  cursor:pointer; transition:opacity .2s; border-radius:var(--radius);
}
.auth-submit:hover { opacity:.9; }
.auth-submit:disabled { opacity:.5; cursor:not-allowed; }


.auth-footer {
  font-family:var(--font-m); font-size:.5rem; letter-spacing:.14em;
  color:var(--text-dim); text-align:center; margin-top:8px;
}

/* Profile (logged in) */
.profile-wrap { max-width:var(--width-content); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.profile-wrap > .profile-card { grid-column:1/-1; }
@media (max-width:640px) { .profile-wrap { grid-template-columns:1fr; } }
.profile-card {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:28px; border:var(--border-width) solid var(--border);
  background:var(--panel-bg); border-radius:var(--radius);
}
.profile-avatar {
  width:64px; height:64px; border-radius:50%;
  background:var(--accent); color:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-d); font-size:1.2rem; font-weight:700;
}
.profile-name { font-family:var(--font-h); font-size:1.1rem; font-weight:700; margin:0; }
.profile-email { font-family:var(--font-m); font-size:.72rem; color:var(--text-muted); margin:0; }
.profile-badge {
  font-family:var(--font-m); font-size:.5rem; letter-spacing:.14em;
  padding:3px 10px; border:var(--border-width) solid var(--accent);
  color:var(--accent);
}

.profile-section {
  display:flex; flex-direction:column; gap:10px;
  border:var(--border-width) solid var(--border); background:var(--panel-bg);
  padding:18px; border-radius:var(--radius);
}
.profile-section-title {
  font-family:var(--font-m); font-size:.62rem; letter-spacing:.14em;
  color:var(--text-muted); text-transform:uppercase; margin-bottom:4px;
}
.profile-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--border);
}
.profile-row:last-child { border-bottom:none; }
.profile-row-label { font-size:.8rem; color:var(--text); }
.profile-row-val { font-family:var(--font-m); font-size:.72rem; color:var(--text-muted); }
.profile-action-btn {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; background:none; border:var(--border-width) solid var(--border);
  color:var(--text-muted); font-family:var(--font-b); font-size:.78rem;
  cursor:pointer; border-radius:var(--radius); transition:color .2s, border-color .2s;
}
.profile-action-btn:hover { color:#ef4444; border-color:#ef4444; }

/* ─────────────────────────────────────────────────────────────────
   MODAL
───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:300;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:var(--panel-bg); border:var(--border-width) solid var(--border);
  width:100%; max-width:440px; border-radius:var(--radius);
}
.modal-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:var(--border-width) solid var(--border);
}
.modal-title { font-family:var(--font-h); font-size:.88rem; font-weight:700; margin:0; }
.modal-close {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  padding:4px; transition:color .2s;
}
.modal-close:hover { color:var(--accent); }
.modal-body { padding:20px; }

/* Mobile top bar — base styles moved before media queries */

/* ─────────────────────────────────────────────────────────────────
   MOBILE RESPONSIVE
───────────────────────────────────────────────────────────────── */
@media (max-width:768px) {
  .app-main { padding:0; }
}

/* Mobile top bar — base styles defined above media query so display:flex wins */

@media (max-width:480px) {
  .app-mobile-bar .app-brand-text { display:none; }
}

/* ─────────────────────────────────────────────────────────────────
   SHARED VIEW COMPONENTS
───────────────────────────────────────────────────────────────── */

/* View Topbar */
.view-topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:20px; flex-wrap:wrap;
}
.view-topbar-l { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.search-box {
  display:flex; align-items:center; gap:6px;
  padding:6px 10px; border:var(--border-width) solid var(--border);
  background:var(--surface); border-radius:var(--radius);
}
.search-input {
  background:none; border:none; color:var(--text); font-family:var(--font-b);
  font-size:.78rem; outline:none; width:160px;
}
.search-input::placeholder { color:var(--text-dim); }
.filter-select {
  padding:8px 12px; background:var(--surface); border:var(--border-width) solid var(--border);
  color:var(--text); font-family:var(--font-m); font-size:.68rem;
  letter-spacing:.06em; border-radius:var(--radius); cursor:pointer;
}
.filter-select option { background:var(--bg); color:var(--text); }

/* Loading / Error */
.loading-state, .error-state { padding:40px; text-align:center; }
.loading-state p, .error-state p { color:var(--text-muted); font-size:.82rem; }
.loading-state p { position:relative; overflow:hidden; }
.loading-state p::after {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:transparent;
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer { to { left:100%; } }
@media(prefers-reduced-motion:reduce) { .loading-state p::after { animation:none; } }

/* ── Skeleton Loading Cards ── */
.skeleton-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; padding:4px 0; }
.skeleton-card {
  background:var(--panel-bg, #111); border:var(--border-width, 1px) solid var(--border);
  border-radius:var(--radius, 6px); padding:16px; display:flex; flex-direction:column; gap:12px;
}
.skeleton-line {
  height:12px; border-radius:4px; background:var(--border);
  position:relative; overflow:hidden;
}
.skeleton-line::after {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:transparent;
  animation:shimmer 1.5s infinite;
}
.skeleton-line.sk-title { width:70%; height:14px; }
.skeleton-line.sk-sub { width:45%; height:10px; }
.skeleton-line.sk-bar { width:100%; height:8px; }
.skeleton-line.sk-badge { width:60px; height:18px; border-radius:9px; }
.skeleton-row { display:flex; gap:12px; align-items:center; }
.skeleton-avatar { width:36px; height:36px; border-radius:50%; background:var(--border); flex-shrink:0;
  position:relative; overflow:hidden; }
.skeleton-avatar::after {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:transparent;
  animation:shimmer 1.5s infinite;
}
.skeleton-list { display:flex; flex-direction:column; gap:10px; }
.skeleton-list-row {
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  background:var(--panel-bg, #111); border:var(--border-width, 1px) solid var(--border);
  border-radius:var(--radius, 6px);
}
@media(prefers-reduced-motion:reduce) { .skeleton-line::after, .skeleton-avatar::after { animation:none; } }

.text-muted { color:var(--text-muted); }
.text-sm { font-size:.78rem; }

/* Detail Layout */
.detail-wrap { max-width:var(--width-content); margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.detail-back { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.detail-header { display:flex; align-items:flex-start; gap:16px; padding:20px; border:var(--border-width) solid var(--border); background:var(--panel-bg); border-radius:var(--radius); }
.detail-header-info { flex:1; }
.detail-header-icon-lg { width:28px; height:28px; color:var(--accent); }

/* Ship profile icon */
.ship-profile-icon {
  width:56px; height:56px; border-radius:12px; border:2px dashed var(--border);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  position:relative; overflow:hidden; flex-shrink:0;
  transition:border-color .2s, box-shadow .2s;
}
.ship-profile-icon:hover { border-color:var(--accent); box-shadow:0 0 12px rgba(255,255,255,.06); }
.ship-profile-img { width:100%; height:100%; object-fit:cover; border-radius:10px; }
.ship-profile-icon .detail-header-icon-lg { width:28px; height:28px; }
.ship-profile-icon-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5); opacity:0; transition:opacity .2s; border-radius:10px;
}
.ship-profile-icon:hover .ship-profile-icon-overlay { opacity:1; }

/* Ship profile name & description */
.detail-name { font-family:var(--font-h); font-size:1.2rem; font-weight:700; margin:0; outline:none; }
.detail-name:focus { border-bottom:1px solid var(--accent); }
.ship-profile-desc {
  font-size:.75rem; color:var(--text-muted); margin-top:4px; outline:none;
  min-height:1.2em; max-width:100%; line-height:1.4;
  transition:color .15s;
}
.ship-profile-desc:empty::before {
  content:attr(data-placeholder); color:var(--text-muted); opacity:.5;
}
.ship-profile-desc:focus { color:var(--text); border-bottom:1px solid var(--accent); }

.detail-meta-row { display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap; }
.detail-status { font-family:var(--font-m); font-size:.68rem; letter-spacing:.1em; text-transform:capitalize; color:var(--text-muted); }
.detail-section { border:var(--border-width) solid var(--border); background:var(--panel-bg); border-radius:var(--radius); padding:18px; }
.detail-section-title { font-family:var(--font-m); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin:0 0 12px 0; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.detail-kv { display:flex; flex-direction:column; gap:8px; }
.detail-kv-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); }
.detail-kv-row:last-child { border-bottom:none; }
.kv-label { font-family:var(--font-b); font-size:.78rem; color:var(--text-muted); }
.kv-val { font-family:var(--font-b); font-size:.78rem; color:var(--text); }

/* ─────────────────────────────────────────────────────────────────
   AGENTS VIEW
───────────────────────────────────────────────────────────────── */
.agents-wrap { max-width:var(--width-full); margin:0 auto; }
.agents-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:20px; }
.agents-grid .tcg-card { margin:0; }
/* Agent view modes */
.agents-view-modes { display:flex; gap:4px; align-items:center; }
.agents-view-full  { grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:20px; }
.agents-view-grid  { grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:12px; }
.agents-view-compact { grid-template-columns:1fr; gap:8px; }
.agents-view-compact .tcg-card-compact { flex-direction:row; align-items:center; gap:16px; padding:10px 16px; border:1px solid var(--border); border-radius:25px; background:var(--panel-bg); }
.agents-view-compact .tcg-compact-art { width:48px; height:48px; flex:0 0 48px; }
.agents-view-compact .tcg-compact-art svg { width:100%; height:100%; }
.agents-view-compact .tcg-compact-body { flex:1; display:flex; flex-direction:row; align-items:center; gap:16px; min-width:0; }
.agents-view-compact .tcg-compact-header { flex:0 0 auto; min-width:140px; display:flex; align-items:center; gap:8px; }
.agents-view-compact .tcg-compact-name { font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.agents-view-compact .tcg-compact-meta { flex:1; display:flex; flex-wrap:wrap; gap:4px; align-items:center; min-width:0; }
.agents-view-compact .tcg-compact-tools { flex:1; display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.agents-view-compact .tcg-compact-stats { flex:0 0 auto; display:flex; gap:10px; align-items:center; }
.agents-view-compact .tcg-compact-actions { flex:0 0 auto; display:flex; gap:6px; align-items:center; }
.agents-view-mini  { grid-template-columns:repeat(auto-fill, minmax(80px, 1fr)); gap:8px; }
/* Spaceship view modes — .fleet-grid prefix for specificity over base .fleet-grid rule */
.fleet-grid.ships-view-full    { grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:20px; }
.fleet-grid.ships-view-grid    { grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:12px; }
.fleet-grid.ships-view-compact { grid-template-columns:1fr; gap:8px; }
.fleet-grid.ships-view-compact .tcg-card-compact { flex-direction:row; align-items:center; gap:16px; padding:10px 16px; border:1px solid var(--border); border-radius:25px; background:var(--panel-bg); }
.fleet-grid.ships-view-compact .tcg-compact-art { width:48px; height:48px; flex:0 0 48px; }
.fleet-grid.ships-view-compact .tcg-compact-art svg { width:100%; height:100%; }
.fleet-grid.ships-view-compact .tcg-compact-body { flex:1; display:flex; flex-direction:row; align-items:center; gap:16px; min-width:0; }
.fleet-grid.ships-view-compact .tcg-compact-header { flex:0 0 auto; min-width:140px; display:flex; align-items:center; gap:8px; }
.fleet-grid.ships-view-compact .tcg-compact-name { font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.fleet-grid.ships-view-compact .tcg-compact-meta { flex:1; display:flex; flex-wrap:wrap; gap:4px; align-items:center; min-width:0; }
.fleet-grid.ships-view-compact .tcg-compact-stats { flex:0 0 auto; display:flex; gap:10px; align-items:center; }
.fleet-grid.ships-view-compact .tcg-compact-actions { flex:0 0 auto; display:flex; gap:6px; align-items:center; }
.fleet-grid.ships-view-mini    { grid-template-columns:repeat(auto-fill, minmax(80px, 1fr)); gap:8px; }
/* When old card classes are combined with .tcg-card, the TCG card styles must win */
.tcg-card.agent-card, .tcg-card.fleet-card, .tcg-card.ms-card {
  border:15px solid var(--border); border-radius:25px; padding:0; background:var(--panel-bg);
}
.agent-card {
  display:flex; flex-direction:column; gap:10px;
  padding:0; border:15px solid var(--border);
  background:var(--panel-bg); border-radius:25px;
  cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .15s;
}
.agent-card:hover { border-color:var(--border-hi); box-shadow:var(--glow); transform:translateY(-2px); }
.agent-card-hdr { display:flex; align-items:center; gap:10px; }
.agent-avatar {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-d); font-size:.7rem; font-weight:700;
  color:#fff; flex-shrink:0;
}
.agent-avatar-lg { width:52px; height:52px; font-size:.95rem; }
.agent-card-info { flex:1; min-width:0; }
.agent-card-name { font-family:var(--font-h); font-size:.88rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.agent-card-role { font-family:var(--font-m); font-size:.56rem; letter-spacing:.12em; color:var(--text-muted); text-transform:uppercase; }
.agent-card-meta { display:flex; gap:6px; flex-wrap:wrap; }
.agent-tag {
  font-family:var(--font-m); font-size:.52rem; letter-spacing:.08em;
  padding:2px 8px; border:1px solid var(--border); color:var(--text-muted);
  text-transform:capitalize;
}
.status-tag-active { border-color:#22c55e; color:#22c55e; }
.status-tag-idle { border-color:#f59e0b; color:#f59e0b; }
.status-tag-paused { border-color:var(--text-dim); color:var(--text-dim); }
.status-tag-error { border-color:#ef4444; color:#ef4444; }
.status-tag-deployed { border-color:#22c55e; color:#22c55e; }
.status-tag-standby { border-color:#f59e0b; color:#f59e0b; }
.agent-card-tools { display:flex; gap:4px; flex-wrap:wrap; }
.agent-tool-tag {
  font-family:var(--font-m); font-size:.48rem; letter-spacing:.06em;
  padding:2px 6px; background:var(--surface); color:var(--text-dim);
  border-radius:2px;
}
.agent-tools-list { display:flex; gap:6px; flex-wrap:wrap; }
.agent-caps-list { display:flex; flex-direction:column; gap:4px; }
.agent-cap-item { font-size:.78rem; color:var(--text-muted); line-height:1.4; }
.agent-card-actions { display:flex; gap:6px; padding-top:6px; border-top:1px solid var(--border); }
.agent-action-btn {
  font-family:var(--font-m); font-size:.56rem; letter-spacing:.08em;
  padding:4px 10px; background:none; border:1px solid var(--border);
  color:var(--text-muted); cursor:pointer; transition:color .2s, border-color .2s;
}
.agent-action-btn:hover { color:var(--accent); border-color:var(--accent); }
.agent-delete-btn:hover { color:#ef4444; border-color:#ef4444; }
.agent-toggle-btn { text-transform:uppercase; }

/* ─────────────────────────────────────────────────────────────────
   BUILDER VIEW
───────────────────────────────────────────────────────────────── */
.builder-wrap { max-width:var(--width-form); margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.builder-header { display:flex; align-items:center; gap:14px; }
.builder-header-icon { width:40px; height:40px; color:var(--accent); flex-shrink:0; }
.builder-title { font-family:var(--font-h); font-size:1.1rem; font-weight:700; margin:0; }
.builder-sub { font-family:var(--font-m); font-size:.62rem; letter-spacing:.1em; color:var(--text-muted); margin:2px 0 0 0; }
.builder-form { display:flex; flex-direction:column; gap:18px; }
.builder-section {
  border:var(--border-width) solid var(--border); background:var(--panel-bg);
  border-radius:var(--radius); padding:16px; margin:0;
}
.builder-legend {
  font-family:var(--font-m); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); padding:0 6px;
}
.builder-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:14px; }
.builder-select { width:100%; padding:8px 12px; }
.builder-range { width:100%; accent-color:var(--accent); }
.builder-range-val {
  font-family:var(--font-m); font-size:.72rem; color:var(--accent);
  display:inline-block; min-width:28px; text-align:center;
}
.builder-hint { font-family:var(--font-m); font-size:.62rem; color:var(--text-dim); margin:0 0 10px 0; }
.builder-actions { display:flex; align-items:center; gap:12px; }
.builder-actions .auth-error { flex:1; margin:0; }

/* Spaceship Builder — Crew Slots */
.builder-slot-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.builder-slot-card { border:1px solid var(--border); padding:12px; background:var(--bg-alt); transition:border-color .2s; }
.builder-slot-card.builder-slot-assigned { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 5%, var(--bg-alt)); }
.builder-slot-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.builder-slot-label { font-family:var(--font-m); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text); }
.builder-slot-rarity { font-family:var(--font-m); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; padding:1px 5px; border:1px solid; }
.builder-slot-select { width:100%; font-size:.78rem; }

/* Memory toggle */
.builder-toggle-field { display:flex; flex-direction:column; gap:6px; }
.builder-toggle {
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:var(--border-width) solid var(--border);
  padding:6px 12px; cursor:pointer; border-radius:var(--radius);
  transition:border-color .2s;
}
.builder-toggle.on { border-color:var(--accent); }
.builder-toggle-knob {
  width:14px; height:14px; border-radius:50%; border:2px solid var(--text-dim);
  transition:border-color .2s, background .2s;
}
.builder-toggle.on .builder-toggle-knob { border-color:var(--accent); background:var(--accent); }
.builder-toggle-label { font-family:var(--font-m); font-size:.62rem; letter-spacing:.1em; color:var(--text-muted); }

/* Tool chips */
.builder-tools-grid { display:flex; flex-wrap:wrap; gap:8px; }
.builder-tool-chip {
  display:flex; align-items:center; gap:6px;
  padding:6px 12px; border:var(--border-width) solid var(--border);
  font-family:var(--font-b); font-size:.72rem; cursor:pointer;
  color:var(--text-muted); transition:border-color .15s, color .15s;
  border-radius:var(--radius);
}
.builder-tool-chip input { display:none; }
.builder-tool-chip:hover { border-color:var(--border-hi); color:var(--text); }
.builder-tool-chip.selected { border-color:var(--accent); color:var(--accent); background:rgba(var(--accent-rgb, 100,100,100),0.08); }

/* ─────────────────────────────────────────────────────────────────
   TASKS VIEW
───────────────────────────────────────────────────────────────── */
.tasks-wrap { max-width:var(--width-large); margin:0; }
.task-stats-bar {
  display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px;
  padding:12px; border:var(--border-width) solid var(--border);
  background:var(--panel-bg); border-radius:var(--radius);
}
.task-stat { display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; min-width:60px; }
.task-stat-num { font-family:var(--font-h); font-size:1.1rem; font-weight:700; }
.task-stat-label { font-family:var(--font-m); font-size:.48rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }

.tasks-list { display:flex; flex-direction:column; gap:8px; }
.task-row {
  border:var(--border-width) solid var(--border); background:var(--panel-bg);
  border-radius:var(--radius); padding:14px; display:flex; flex-direction:column; gap:8px; align-items:stretch;
}
.task-row-main { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.task-row-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.task-row-title { font-family:var(--font-b); font-size:.82rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.task-row-agent { font-family:var(--font-m); font-size:.56rem; letter-spacing:.1em; color:var(--text-dim); }
.task-row-time { font-family:var(--font-m); font-size:.56rem; color:var(--text-dim); flex-shrink:0; }

/* Status badges */
.task-status-badge {
  font-family:var(--font-m); font-size:.52rem; letter-spacing:.1em;
  padding:3px 10px; text-transform:uppercase; flex-shrink:0;
}
.badge-queued { border:1px solid #f59e0b; color:#f59e0b; }
.badge-running { border:1px solid var(--accent); color:var(--accent); background:rgba(var(--accent-rgb,100,100,100),0.1); }
.badge-completed { border:1px solid #22c55e; color:#22c55e; }
.badge-failed { border:1px solid #ef4444; color:#ef4444; }

/* Priority tags */
.task-priority-tag {
  font-family:var(--font-m); font-size:.48rem; letter-spacing:.08em;
  padding:2px 8px; text-transform:uppercase; flex-shrink:0;
}
.priority-low { color:var(--text-dim); border:1px solid var(--border); }
.priority-medium { color:#f59e0b; border:1px solid #f59e0b; }
.priority-high { color:#f97316; border:1px solid #f97316; }
.priority-critical { color:#ef4444; border:1px solid #ef4444; }

/* Progress */
.task-progress { height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.task-progress-bar { height:100%; background:var(--accent); transition:width .3s ease; }

/* Task result */
.task-result { background:var(--surface); padding:8px 10px; border-radius:var(--radius); margin-top:6px; }
.task-result pre { font-family:var(--font-m); font-size:.68rem; color:var(--text-muted); white-space:pre-wrap; word-break:break-word; margin:0; }
.task-actions { display:flex; gap:6px; padding:6px 0 2px; }
.btn-xs { padding:3px 10px; font-size:.65rem; }
.task-row-clickable { cursor:pointer; transition:background .15s; }
.task-row-clickable:hover { background:var(--bg-alt); }
.mission-result-content { background:var(--surface, var(--bg-alt)); border:1px solid var(--border); border-radius:var(--radius); padding:14px; max-height:400px; overflow:auto; }
.mission-result-content pre { font-family:var(--font-m); font-size:.72rem; color:var(--text); white-space:pre-wrap; word-break:break-word; margin:0; line-height:1.6; }

/* Mini task list (used in agent detail) */
.task-mini-list { display:flex; flex-direction:column; gap:6px; }
.task-mini-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); }
.task-mini-row:last-child { border-bottom:none; }
.task-mini-title { flex:1; font-family:var(--font-b); font-size:.78rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-mini-time { font-family:var(--font-m); font-size:.52rem; color:var(--text-dim); flex-shrink:0; }

/* ─────────────────────────────────────────────────────────────────
   FLEET VIEW
───────────────────────────────────────────────────────────────── */
.fleet-wrap { max-width:var(--width-full); margin:0 auto; }
.fleet-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:20px; }
.fleet-grid .tcg-card { margin:0; }
.fleet-card {
  display:flex; flex-direction:column; gap:10px;
  padding:16px; border:var(--border-width) solid var(--border);
  background:var(--panel-bg); border-radius:var(--radius);
}
.fleet-card-hdr { display:flex; align-items:center; justify-content:space-between; }
.fleet-card-info { flex:1; }
.fleet-card-name { font-family:var(--font-d); font-size:.92rem; font-weight:700; }
.fleet-card-count { font-family:var(--font-m); font-size:.56rem; letter-spacing:.1em; color:var(--text-muted); margin-top:2px; }
.fleet-status-group { display:flex; align-items:center; gap:6px; }
.fleet-members { display:flex; flex-direction:column; gap:4px; padding:8px 0; border-top:1px solid var(--border); }
.fleet-member { display:flex; align-items:center; gap:8px; padding:4px 0; }
.fleet-member-dot { width:6px; height:6px; }
.fleet-member-name { font-family:var(--font-b); font-size:.78rem; color:var(--text); }
.fleet-member-role { font-family:var(--font-m); font-size:.52rem; color:var(--text-dim); }
.fleet-card-actions { display:flex; gap:6px; padding-top:6px; border-top:1px solid var(--border); }

/* Fleet Detail */
.fleet-detail-actions { display:flex; gap:10px; }
.fleet-member-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; }
.fleet-member-card {
  display:flex; align-items:center; gap:10px; padding:12px;
  border:var(--border-width) solid var(--border); background:var(--surface);
  border-radius:var(--radius); text-decoration:none; color:var(--text);
  transition:border-color .2s;
}
.fleet-member-card:hover { border-color:var(--border-hi); }
.fleet-member-card-info { flex:1; min-width:0; }
.fleet-member-card-name { font-family:var(--font-b); font-size:.78rem; display:block; }
.fleet-member-card-role { font-family:var(--font-m); font-size:.52rem; color:var(--text-dim); display:block; }

/* Fleet agent picker (modal) */
.fleet-agent-picker { display:flex; flex-wrap:wrap; gap:8px; }
.fleet-agent-chip {
  display:flex; align-items:center; gap:6px;
  padding:6px 12px; border:var(--border-width) solid var(--border);
  font-family:var(--font-b); font-size:.72rem; cursor:pointer;
  color:var(--text-muted); transition:border-color .15s;
  border-radius:var(--radius);
}
.fleet-agent-chip input { display:none; }
.fleet-agent-chip:has(input:checked) { border-color:var(--accent); color:var(--accent); }

/* Danger button */
.btn-danger { color:#ef4444; border-color:#ef4444; }
.btn-danger:hover { box-shadow:0 0 10px rgba(239,68,68,.3); }

/* ─────────────────────────────────────────────────────────────────
   BLUEPRINTS VIEW
───────────────────────────────────────────────────────────────── */
.bp-wrap { max-width:var(--width-full); margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.bp-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.bp-title { font-family:var(--font-h); font-size:1.2rem; font-weight:700; margin:0; }
.bp-sub { font-family:var(--font-m); font-size:.62rem; letter-spacing:.1em; color:var(--text-muted); margin:4px 0 0 0; }

.bp-activated-section { margin-bottom:16px; }
.bp-activated-title { font-family:var(--font-m); font-size:.75rem; letter-spacing:.1em; color:var(--text-muted); text-transform:uppercase; margin-bottom:12px; }
.bp-activated-count { color:var(--accent); margin-left:6px; }
.bp-activated-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; margin-bottom:16px; }
.bp-section-divider { border-top:1px solid var(--border); margin:20px 0; }
.bp-activated-empty { font-size:.82rem; color:var(--text-muted); padding:16px 0; }

.bp-categories { display:flex; gap:6px; flex-wrap:wrap; }
.bp-cat-btn {
  padding:5px 14px; background:none; border:var(--border-width) solid var(--border);
  color:var(--text-muted); font-family:var(--font-m); font-size:.6rem;
  letter-spacing:.1em; cursor:pointer; transition:color .15s, border-color .15s;
  border-radius:var(--radius);
}
.bp-cat-btn:hover { color:var(--text); border-color:var(--border-hi); }
.bp-cat-btn.active { color:var(--accent); border-color:var(--accent); background:rgba(var(--accent-rgb,100,100,100),0.08); }

.bp-rarity-filters { display:flex; gap:4px; }
.bp-rarity-btn {
  padding:4px 10px; background:none; border:var(--border-width) solid var(--border);
  color:var(--text-muted); font-family:var(--font-m); font-size:.6rem;
  letter-spacing:.1em; cursor:pointer; transition:color .15s, border-color .15s;
  border-radius:var(--radius);
}
.bp-rarity-btn:hover { color:var(--text); border-color:var(--border-hi); }
.bp-rarity-btn.active { color:var(--accent); border-color:var(--accent); background:rgba(var(--accent-rgb,100,100,100),0.08); }
.bp-search-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#bp-deactivate-all { margin-left:auto; white-space:nowrap; }

/* ── View Toggle Buttons ── */
.bp-view-toggle { display:flex; gap:2px; background:var(--bg-alt); border-radius:var(--radius); padding:2px; }
.bp-view-btn { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border:none; background:transparent; color:var(--text-muted); border-radius:calc(var(--radius) - 2px); cursor:pointer; transition:all .15s; }
.bp-view-btn:hover { color:var(--text); background:var(--panel-bg); }
.bp-view-btn.active { color:var(--accent); background:var(--panel-bg); box-shadow:0 0 4px var(--glow, rgba(255,255,255,.05)); }

/* ── Card Wrapper (card + buttons below) ── */
.bp-card-wrap { display:flex; flex-direction:column; }
.bp-card-wrap .tcg-card { margin:0; }
.bp-card-buttons { display:flex; gap:6px; padding:8px 4px; align-items:center; }
.bp-card-buttons .c-btn { flex:1; font-size:.62rem; padding:5px 10px; justify-content:center; }

/* ── View Modes ── */
.bp-view-card { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:26px; }
.bp-view-compact { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px; }
.bp-view-compact .tcg-card { font-size:.85em; }
.bp-view-compact .tcg-text-box { display:none; }
.bp-view-compact .tcg-marquee { display:none; }
.bp-view-compact .tcg-stats { gap:4px; }
.bp-view-compact .tcg-stat { padding:4px 0; }
.bp-view-compact .tcg-stat-val { font-size:.6rem; }
.bp-view-compact .tcg-stat-lbl { font-size:.4rem; }
.bp-view-compact .tcg-actions { padding:6px 8px; }
.bp-view-compact .tcg-actions .c-btn { font-size:.55rem; padding:4px 8px; }

/* ── Empty State ── */
.bp-view-empty { display:flex; justify-content:center; align-items:center; }

/* ── List View ── */
.bp-view-list { display:flex; flex-direction:column; gap:1px; }
.bpl-row { display:grid; grid-template-columns:24px 1.5fr .7fr 2fr 50px 50px 40px 60px 70px 16px 72px; gap:8px; align-items:center; padding:8px 12px; background:var(--panel-bg); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:border-color .15s, background .15s; font-size:.75rem; }
.bpl-row:hover { border-color:var(--border-hi); background:var(--bg-alt); }
.bpl-header { font-family:var(--font-m); font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); cursor:default; border-color:transparent; background:transparent; }
.bpl-header:hover { border-color:transparent; background:transparent; }
.bpl-sortable { cursor:pointer; user-select:none; }
.bpl-sortable:hover { color:var(--accent); }
.bpl-rarity { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.5rem; font-weight:700; color:#fff; font-family:var(--font-m); flex-shrink:0; }
.bpl-header .bpl-rarity { background:transparent !important; }
.bpl-name { font-family:var(--font-h); font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bpl-cat { color:var(--text-muted); font-family:var(--font-m); font-size:.65rem; white-space:nowrap; }
.bpl-desc { color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bpl-stat1, .bpl-stat2, .bpl-stat3 { font-family:var(--font-m); font-size:.65rem; color:var(--text); text-align:right; white-space:nowrap; }
.bpl-dl { color:var(--text-muted); font-family:var(--font-m); text-align:right; }
.bpl-rating { color:var(--accent); font-family:var(--font-m); text-align:right; }
.bpl-action { display:flex; align-items:center; justify-content:center; }
.bpl-action-btn { font-size:.6rem; font-family:var(--font-m); padding:3px 10px; border-radius:var(--radius); border:1px solid var(--accent); background:transparent; color:var(--accent); cursor:pointer; white-space:nowrap; transition:background .15s, color .15s; }
.bpl-action-btn:hover { background:var(--accent); color:var(--bg); }
.bpl-action-btn.bpl-activated { border-color:#22c55e60; color:#22c55e; background:#22c55e20; }
.bpl-action-btn.bpl-activated:hover { border-color:#8b3a3a; color:#cc5555; background:transparent; }

.bp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:26px; }
.bp-card {
  display:flex; flex-direction:column;
  border:var(--border-width) solid var(--border); background:var(--panel-bg);
  border-radius:var(--radius); overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .15s;
}
.bp-card:hover { border-color:var(--border-hi); box-shadow:var(--glow); transform:translateY(-2px); }
.bp-card-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px 0; gap:8px;
}
.bp-card-icon { width:28px; height:28px; color:var(--accent); flex-shrink:0; }
.bp-rarity {
  font-family:var(--font-m); font-size:.48rem; letter-spacing:.12em;
  padding:2px 8px; border:1px solid; text-transform:uppercase;
}
.bp-card-body { padding:10px 14px; flex:1; display:flex; flex-direction:column; gap:4px; }
.bp-card-name { font-family:var(--font-d); font-size:.88rem; font-weight:700; margin:0; }
.bp-card-cat { font-family:var(--font-m); font-size:.5rem; letter-spacing:.12em; color:var(--text-muted); text-transform:uppercase; }
.bp-card-desc { font-family:var(--font-b); font-size:.74rem; color:var(--text-muted); line-height:1.5; margin:4px 0 0 0; }
.bp-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-top:1px solid var(--border); gap:8px;
}
.bp-card-stats { display:flex; flex-direction:column; gap:2px; }
.bp-stars { font-size:.72rem; }
.bp-star { color:var(--text-dim); }
.bp-star.filled { color:#f59e0b; }
.bp-star.half { color:#f59e0b; opacity:.6; }
.bp-downloads { font-family:var(--font-m); font-size:.48rem; letter-spacing:.08em; color:var(--text-dim); }
.bp-card-actions { display:flex; align-items:center; gap:6px; }
.bp-nice-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.bp-cert-btn { flex:0 0 auto !important; aspect-ratio:1; min-width:0; display:inline-flex; align-items:center; justify-content:center; }
.bp-card-highlight { animation:bp-highlight 2s ease-out; }
@keyframes bp-highlight { 0%,30% { box-shadow:0 0 0 3px var(--accent), var(--glow-hi); } 100% { box-shadow:none; } }

/* ─────────────────────────────────────────────────────────────────
   ANALYTICS VIEW
───────────────────────────────────────────────────────────────── */
.ana-wrap { max-width:var(--width-large); margin:0; display:flex; flex-direction:column; gap:20px; }
.ana-tab-bar {
  display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:4px;
}
.ana-tab {
  padding:10px 20px; background:none; border:none; border-bottom:2px solid transparent;
  color:var(--text-muted); font-family:var(--font-m); font-size:.72rem; letter-spacing:.1em; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.ana-tab:hover { color:var(--text); }
.ana-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.ana-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ana-title { font-family:var(--font-d); font-size:1.2rem; font-weight:700; margin:0; }
.ana-sub { font-family:var(--font-m); font-size:.62rem; letter-spacing:.1em; color:var(--text-muted); margin:4px 0 0 0; }

.ana-stats { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
.ana-stat-card {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:16px 10px; border:var(--border-width) solid var(--border);
  background:var(--panel-bg); border-radius:var(--radius); text-align:center;
}
.ana-stat-num { font-family:var(--font-d); font-size:1.3rem; font-weight:700; }
.ana-stat-label { font-family:var(--font-m); font-size:.48rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }

.ana-charts { display:grid; grid-template-columns:1.4fr 1fr; gap:14px; }
.ana-chart-panel {
  border:var(--border-width) solid var(--border); background:var(--panel-bg);
  border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:10px;
}
.ana-chart-title { font-family:var(--font-m); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin:0; }
.ana-chart-box { position:relative; width:100%; min-height:180px; }
.ana-chart-box canvas { width:100%; height:100%; }
.ana-chart-donut-box { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.ana-donut-legend { display:flex; flex-direction:column; gap:6px; }
.ana-legend-item { display:flex; align-items:center; gap:6px; }
.ana-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ana-legend-label { font-family:var(--font-b); font-size:.72rem; color:var(--text-muted); }
.ana-legend-val { font-family:var(--font-m); font-size:.68rem; color:var(--text); margin-left:auto; }

.ana-section { display:flex; flex-direction:column; gap:10px; }
.ana-section-title { font-family:var(--font-m); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin:0; }
.ana-section-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }

.ana-table-wrap { overflow-x:auto; }
.ana-table {
  width:100%; border-collapse:collapse;
  border:var(--border-width) solid var(--border); background:var(--panel-bg);
  border-radius:var(--radius);
}
.ana-table th, .ana-table td {
  padding:10px 14px; text-align:left;
  font-family:var(--font-b); font-size:.78rem;
  border-bottom:1px solid var(--border);
}
.ana-table th {
  font-family:var(--font-m); font-size:.56rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted); background:var(--surface);
}
.ana-table tbody tr:last-child td { border-bottom:none; }
.ana-agent-link { display:flex; align-items:center; gap:6px; text-decoration:none; color:var(--text); }
.ana-agent-link:hover { color:var(--accent); }
.ana-rate { font-family:var(--font-m); font-size:.72rem; font-weight:600; }
.rate-good { color:#22c55e; }
.rate-ok { color:#f59e0b; }
.rate-bad { color:#ef4444; }

/* ─────────────────────────────────────────────────────────────────
   COST TRACKER VIEW
───────────────────────────────────────────────────────────────── */
.cost-wrap { max-width:var(--width-large); margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.cost-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cost-title { font-family:var(--font-d); font-size:1.2rem; font-weight:700; margin:0; }
.cost-sub { font-family:var(--font-m); font-size:.62rem; letter-spacing:.1em; color:var(--text-muted); margin:4px 0 0 0; }

.cost-overview { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.cost-ov-card {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:16px 10px; border:var(--border-width) solid var(--border);
  background:var(--panel-bg); border-radius:var(--radius); text-align:center;
}
.cost-ov-spend { border-color:var(--accent); }
.cost-ov-label { font-family:var(--font-m); font-size:.48rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }
.cost-ov-num { font-family:var(--font-d); font-size:1.3rem; font-weight:700; }
.cost-ov-sub { font-family:var(--font-m); font-size:.48rem; color:var(--text-dim); }

.cost-budget-bar { width:100%; height:4px; background:var(--border); border-radius:2px; margin-top:4px; overflow:hidden; }
.cost-budget-fill { height:100%; background:var(--accent); transition:width .4s ease; border-radius:2px; }
.cost-budget-fill.bar-warn { background:#f59e0b; }
.cost-budget-fill.bar-danger { background:#ef4444; }

.cost-chart-panel {
  border:var(--border-width) solid var(--border); background:var(--panel-bg);
  border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:10px;
}
.cost-section-title { font-family:var(--font-m); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin:0; }
.cost-chart-box { position:relative; width:100%; min-height:180px; }
.cost-chart-box canvas { width:100%; height:100%; }

.cost-section { display:flex; flex-direction:column; gap:10px; }
.cost-table-wrap { overflow-x:auto; }

.cost-log { display:flex; flex-direction:column; gap:4px; }
.cost-log-row {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border:var(--border-width) solid var(--border); background:var(--panel-bg);
  border-radius:var(--radius); flex-wrap:wrap;
}
.cost-log-agent { font-family:var(--font-b); font-size:.78rem; color:var(--text); flex:1; min-width:80px; }
.cost-log-model { font-size:.62rem; color:var(--text-dim); }
.cost-log-tokens { font-family:var(--font-m); font-size:.56rem; color:var(--text-muted); }
.cost-log-amount { font-family:var(--font-d); font-size:.78rem; font-weight:700; color:var(--accent); }
.cost-log-time { font-family:var(--font-m); font-size:.52rem; color:var(--text-dim); flex-shrink:0; }

/* ─────────────────────────────────────────────────────────────────
   INTEGRATIONS VIEW
───────────────────────────────────────────────────────────────── */
.integ-wrap { max-width:var(--width-large); margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.integ-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.integ-title { font-family:var(--font-d); font-size:1.2rem; font-weight:700; margin:0; }
.integ-sub { font-family:var(--font-m); font-size:.62rem; letter-spacing:.1em; color:var(--text-muted); margin:4px 0 0 0; }
.integ-stat { display:flex; align-items:center; gap:6px; }
.integ-stat-num { font-family:var(--font-d); font-size:1.1rem; font-weight:700; color:var(--accent); }
.integ-stat-label { font-family:var(--font-m); font-size:.5rem; letter-spacing:.12em; color:var(--text-muted); text-transform:uppercase; }
.integ-cats { display:flex; gap:6px; flex-wrap:wrap; }

.integ-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.integ-card {
  display:flex; flex-direction:column; gap:10px; padding:16px;
  border:var(--border-width) solid var(--border); background:var(--panel-bg);
  border-radius:var(--radius); transition:border-color .2s;
}
.integ-card.connected { border-color:var(--accent); }
.integ-card:hover { border-color:var(--border-hi); }
.integ-card-icon { color:var(--accent); }
.integ-card-body { flex:1; }
.integ-card-name { font-family:var(--font-d); font-size:.88rem; font-weight:700; margin:0; }
.integ-card-cat { font-family:var(--font-m); font-size:.48rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.integ-card-desc { font-family:var(--font-b); font-size:.74rem; color:var(--text-muted); margin:4px 0 0 0; line-height:1.5; }
.integ-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:8px; border-top:1px solid var(--border); }
.integ-status { display:flex; align-items:center; gap:5px; font-family:var(--font-m); font-size:.56rem; letter-spacing:.1em; color:#22c55e; }


.acad-cert-badge {
  display:flex; align-items:center; gap:8px; padding:10px 14px; margin-top:8px;
  border:1px dashed; border-radius:var(--radius);
  font-family:var(--font-m); font-size:.62rem; letter-spacing:.1em; color:var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────
   VAULT VIEW
───────────────────────────────────────────────────────────────── */
.vault-wrap { max-width:var(--width-content); margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.vault-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.vault-title { font-family:var(--font-d); font-size:1.2rem; font-weight:700; margin:0; }
.vault-sub { font-family:var(--font-m); font-size:.62rem; letter-spacing:.1em; color:var(--text-muted); margin:4px 0 0 0; }

.vault-stats { display:flex; gap:20px; flex-wrap:wrap; }
.vault-stat { display:flex; align-items:center; gap:6px; }
.vault-stat-num { font-family:var(--font-d); font-size:1rem; font-weight:700; }
.vault-stat-label { font-family:var(--font-m); font-size:.48rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }

.vault-list { display:flex; flex-direction:column; gap:6px; }
.vault-row {
  display:flex; align-items:center; gap:12px; padding:14px;
  border:var(--border-width) solid var(--border); background:var(--panel-bg);
  border-radius:var(--radius); flex-wrap:wrap;
}
.vault-row-icon { color:var(--accent); flex-shrink:0; }
.vault-row-info { flex:1; min-width:120px; }
.vault-row-name { font-family:var(--font-m); font-size:.78rem; font-weight:600; display:block; color:var(--text); }
.vault-row-service { font-family:var(--font-m); font-size:.48rem; letter-spacing:.1em; color:var(--text-dim); text-transform:uppercase; }
.vault-row-masked { font-size:.68rem; color:var(--text-dim); letter-spacing:.06em; }
.vault-row-meta { display:flex; align-items:center; gap:5px; }
.vault-row-used { font-family:var(--font-m); font-size:.48rem; color:var(--text-dim); }
.vault-row-actions { flex-shrink:0; }

/* Vault LLM Providers */
.vault-providers { margin-bottom:1.5rem; }
.vault-section-title { font-family:var(--font-d); font-size:1rem; font-weight:700; margin:0 0 .2rem 0; }
.vault-section-desc { font-family:var(--font-m); font-size:.6rem; color:var(--text-muted); margin:0 0 .8rem 0; }
.vault-provider-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.vault-provider-card {
  background:var(--panel-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem; display:flex; flex-direction:column; gap:.6rem; transition:border-color .2s;
}
.vault-provider-card.connected { border-color:var(--accent); }
.vault-provider-hdr { display:flex; align-items:center; gap:.5rem; }
.vault-provider-icon { font-size:1.2rem; }
.vault-provider-name { font-family:var(--font-d); font-size:.85rem; font-weight:600; }
.vault-provider-status { display:flex; align-items:center; gap:.4rem; font-family:var(--font-m); font-size:.55rem; color:var(--text-muted); }
.dot-off { width:6px; height:6px; border-radius:50%; background:var(--text-dim); display:inline-block; }

/* ── Agent Certificates ── */
.vault-certs { margin-top:8px; }
.cert-verify-bar { display:flex; gap:8px; margin-top:10px; }
.cert-verify-bar .search-input { flex:1; max-width:320px; }

.cert-card { margin-top:16px; border:2px solid var(--border); border-radius:var(--radius); padding:24px; text-align:center; position:relative; overflow:hidden; }
.cert-card::before { content:''; position:absolute; inset:0; background:transparent; pointer-events:none; }

.cert-badge { display:inline-block; padding:6px 16px; border-radius:20px; font-size:.75rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:16px; }
.cert-badge-pass { background:rgba(34,197,94,0.15); color:#22c55e; border:1px solid rgba(34,197,94,0.3); }
.cert-badge-fail { background:rgba(239,68,68,0.15); color:#ef4444; border:1px solid rgba(239,68,68,0.3); }

.cert-avatar { width:200px; height:120px; margin:0 auto 16px; }
.cert-avatar svg { width:100%; height:100%; }

.cert-agent-name { font-family:var(--font-h); font-size:1.3rem; margin:0 0 8px; }
.cert-meta { display:flex; gap:8px; justify-content:center; align-items:center; margin-bottom:12px; }
.cert-tag { font-size:.7rem; padding:2px 10px; border:1px solid; border-radius:12px; text-transform:uppercase; letter-spacing:1px; }
.cert-rarity { font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; }

.cert-serial { font-size:1.4rem; letter-spacing:4px; color:var(--accent); margin:12px 0; font-weight:700; }

.cert-flavor { font-style:italic; color:var(--text-muted); font-size:.85rem; margin:8px 0 16px; }

.cert-footer { display:flex; justify-content:space-between; font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; border-top:1px solid var(--border); padding-top:12px; margin-top:8px; }
.cert-issuer { opacity:0.7; }

.cert-verified { border-color:rgba(34,197,94,0.3); }
.cert-unverified { border-color:rgba(239,68,68,0.2); text-align:center; padding:32px; }
.cert-msg { color:var(--text); margin:8px 0; }
.cert-hint { color:var(--text-muted); font-size:.8rem; }
.cert-error { color:#ef4444; font-size:.85rem; margin-top:8px; }

/* ─────────────────────────────────────────────────────────────────
   SETTINGS VIEW
───────────────────────────────────────────────────────────────── */
.settings-wrap { max-width:var(--width-content); margin:0 auto; display:flex; flex-direction:column; gap:24px; }
.settings-title { font-family:var(--font-d); font-size:1.2rem; font-weight:700; margin:0; }
.settings-sub { font-family:var(--font-m); font-size:.62rem; letter-spacing:.1em; color:var(--text-muted); margin:0; }

.settings-section {
  border:var(--border-width) solid var(--border); background:var(--panel-bg);
  border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:4px;
}
.settings-section-title {
  font-family:var(--font-m); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-muted); margin:0 0 8px 0;
}
.settings-danger { border-color:#ef4444; }
.settings-danger .settings-section-title { color:#ef4444; }
.settings-collapse-toggle {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
}
.settings-collapse-toggle:hover { color: var(--text, #eee); }
.settings-chevron {
  transition: transform 0.2s ease;
  width: 16px; height: 16px;
}
.settings-chevron--open { transform: rotate(180deg); }

.settings-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.settings-row:last-child { border-bottom:none; }
.settings-row-info { flex:1; min-width:0; }
.settings-row-name { font-family:var(--font-b); font-size:.82rem; display:block; color:var(--text); }
.settings-row-desc { font-family:var(--font-b); font-size:.68rem; color:var(--text-dim); display:block; margin-top:2px; }

/* Toggle switch */
.settings-switch { position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
.settings-switch input { opacity:0; width:0; height:0; }
.settings-slider {
  position:absolute; cursor:pointer; inset:0;
  background:var(--border); border-radius:10px;
  transition:background .2s;
}
.settings-slider::before {
  content:''; position:absolute; width:16px; height:16px;
  left:2px; bottom:2px; background:var(--text-muted);
  border-radius:50%; transition:transform .2s, background .2s;
}
.settings-switch input:checked + .settings-slider { background:var(--accent); }
.settings-switch input:checked + .settings-slider::before { transform:translateX(16px); background:#fff; }

.settings-range-group { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* ── Blueprint Preview + Ratings ── */
.bp-card-clickable { cursor:pointer; }
.bp-preview-rarity { font-size:.78rem; font-weight:600; margin-bottom:.5rem; }
.bp-preview-desc { font-size:.82rem; color:var(--text-muted); line-height:1.5; margin-bottom:1rem; }
.bp-preview-stats { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.bp-preview-config { display:flex; flex-direction:column; gap:4px; margin-bottom:1rem; }
.bp-preview-tools { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:1rem; }
.bp-preview-activated {
  display:inline-block; padding:4px 12px; border-radius:4px;
  background:#22c55e20; color:#22c55e; font-size:.78rem;
  font-family:var(--font-m); margin-bottom:.75rem;
}
.c-btn.bp-activated {
  background:#22c55e20; color:#22c55e; border-color:#22c55e60;
}
.c-btn.bp-activated:hover { background:transparent; border-color:#8b3a3a; color:#cc5555; }
.bp-confirm-overlay {
  position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
}
.bp-confirm-modal {
  background:var(--panel-bg, #111); border:1px solid var(--border, #333); border-radius:var(--radius, 8px);
  padding:2rem; max-width:380px; width:90%; text-align:center;
}
.bp-confirm-modal h3 { margin:0 0 .5rem; font-family:var(--font-h); font-size:1rem; color:#ef4444; }
.bp-confirm-modal p { font-size:.82rem; color:var(--text-muted); margin:0 0 .75rem; line-height:1.5; }
.bp-confirm-name { font-weight:700; color:var(--text); }
.bp-confirm-warning { font-size:.75rem; color:#f59e0b; margin-bottom:1rem; }
.bp-confirm-actions { display:flex; gap:8px; justify-content:center; }
.bp-confirm-actions button { padding:8px 20px; border-radius:var(--radius, 6px); font-size:.82rem; cursor:pointer; border:1px solid var(--border); }
.bp-confirm-cancel { background:transparent; color:var(--text-muted); }
.bp-confirm-cancel:hover { border-color:var(--text-muted); }
.bp-confirm-submit { background:#ef444420; color:#ef4444; border-color:#ef444460; font-weight:600; }
.bp-confirm-submit:hover { background:#ef444440; }
.bp-rate-section { display:flex; align-items:center; gap:8px; margin-top:.5rem; }
.bp-rate-label { font-size:.75rem; color:var(--text-muted); }
.bp-rate-stars { display:flex; gap:2px; }
.bp-rate-star { font-size:1.2rem; cursor:pointer; color:var(--border); transition:color .15s; }
.bp-rate-star.active { color:#f59e0b; }
.bp-rate-star:hover { color:#f59e0b; }




/* ─────────────────────────────────────────────────────────────────
   NICE AI — Prompt Interface
───────────────────────────────────────────────────────────────── */
.nice-ai-toggle { display:none; }

/* ── App layout: flex column for monitor + prompt ── */
.app-main {
  height:100vh; overflow:hidden;
  display:flex; flex-direction:column;
  position:relative;
}
.app-view-content {
  flex:1; overflow-y:overlay; overflow-y:auto; padding:24px; padding-bottom:140px;
  transition:opacity .3s ease;
  scrollbar-width:thin; scrollbar-color:transparent transparent;
}
.app-view-content:hover { scrollbar-color:var(--border) transparent; }
.app-view-content::-webkit-scrollbar { width:6px; background:transparent; }
.app-view-content::-webkit-scrollbar-thumb { background:transparent; border-radius:3px; }
.app-view-content:hover::-webkit-scrollbar-thumb { background:var(--border); }
.app-main.monitor-active .app-view-content { opacity:0; pointer-events:none; }

/* ── Monitor: full-viewport AI response overlay ── */
.nice-monitor {
  position:absolute; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
  overflow-y:auto;
  background:var(--bg);
}
.app-main.monitor-active .nice-monitor {
  opacity:1; pointer-events:auto;
}
.nice-monitor-inner {
  flex:1; width:100%; max-width:760px;
  margin:0 auto; padding:32px 24px 120px;
}
.nice-monitor-back {
  background:none; border:none; color:var(--text-muted);
  font-family:var(--font-b); font-size:.78rem;
  cursor:pointer; padding:6px 0; margin-bottom:16px;
  transition:color .15s;
  display:inline-flex; align-items:center; gap:6px;
}
.nice-monitor-back:hover { color:var(--accent); }

/* Monitor content card */
.nice-monitor-content {
  min-height:80px;
}

/* Monitor response card */
.monitor-card {
  background:transparent;
  border:none;
  padding:16px 0 16px 0; margin-bottom:16px;
  animation:monitorFadeIn .4s ease;
}
.monitor-card-agent {
  font-family:var(--font-h); font-weight:700; color:var(--accent);
  font-size:.82rem; letter-spacing:.03em; margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
.monitor-card-agent::before {
  content:''; display:inline-block; width:8px; height:8px;
  border-radius:50%; background:var(--accent);
  animation:monitorPulse 2s ease-in-out infinite;
}
.monitor-card-text {
  font-family:var(--font-b); font-size:.88rem; line-height:1.7;
  color:var(--text);
}
.monitor-card-text p { margin:0 0 10px; }
.monitor-card-text p:last-child { margin-bottom:0; }
.monitor-card-text strong { color:var(--accent); font-weight:700; }
.monitor-card-text ul { margin:8px 0; padding-left:20px; list-style:none; }
.monitor-card-text li { position:relative; padding-left:14px; margin-bottom:4px; }
.monitor-card-text li::before {
  content:''; position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.6;
}
.monitor-actions {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;
}
.monitor-action-btn {
  padding:6px 14px; border-radius:20px;
  border:1px solid var(--accent); background:var(--accent);
  color:var(--bg); font-family:var(--font-b); font-size:.78rem; font-weight:600;
  cursor:pointer; transition:all .2s ease;
  white-space:nowrap;
  box-shadow:0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.monitor-action-btn:hover {
  opacity:.85;
  box-shadow:0 0 16px color-mix(in srgb, var(--accent) 50%, transparent);
}
.monitor-link {
  color:var(--accent); text-decoration:underline;
  text-underline-offset:2px; word-break:break-all;
}
.monitor-link:hover { opacity:.8; }
.monitor-card-meta {
  margin-top:12px; padding-top:8px;
  font-family:var(--font-m); font-size:.64rem;
  color:var(--text-muted); letter-spacing:.03em;
  display:flex; align-items:center; gap:6px;
}
/* Model badge */
.monitor-model-badge {
  display:inline-block; padding:2px 7px; border-radius:4px;
  background:var(--bg-alt); border:1px solid var(--border);
  font-family:var(--font-m); font-size:.58rem; letter-spacing:.06em;
  color:var(--text-muted); line-height:1.3;
}
/* Error card */
.monitor-card-error {
  border-color:color-mix(in srgb, #ff4444 40%, var(--border));
  background:color-mix(in srgb, #ff4444 5%, var(--panel-bg));
}
.monitor-retry-btn {
  display:inline-block; margin-top:10px; padding:6px 16px;
  background:var(--accent); color:var(--bg); border:none; border-radius:6px;
  font-family:var(--font-b); font-size:.78rem; cursor:pointer;
  transition:opacity .15s;
}
.monitor-retry-btn:hover { opacity:.85; }
/* Code blocks */
.monitor-code-block {
  background:var(--bg); border:1px solid var(--border); border-radius:6px;
  padding:12px 16px; margin:10px 0; overflow-x:auto;
  font-family:var(--font-m); font-size:.78rem; line-height:1.5;
  color:var(--text); white-space:pre; position:relative;
}
.monitor-code-block[data-lang]::before {
  content:attr(data-lang); position:absolute; top:4px; right:8px;
  font-size:.6rem; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.05em;
}
.monitor-code-block code {
  background:none; border:none; padding:0; font-size:inherit;
  color:inherit;
}
.monitor-inline-code {
  background:var(--bg-alt); border:1px solid var(--border); border-radius:3px;
  padding:1px 5px; font-family:var(--font-m); font-size:.82em;
}
/* Markdown headers in monitor */
.monitor-h {
  font-family:var(--font-h); margin:14px 0 6px; color:var(--accent);
  font-size:.95rem; letter-spacing:.02em;
}
@keyframes monitorFadeIn {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes monitorPulse {
  0%, 100% { opacity:.6; } 50% { opacity:1; }
}

/* Monitor user message (echo) */
.monitor-user-msg {
  text-align:right; margin-bottom:24px;
  animation:monitorFadeIn .3s ease;
}
.monitor-system-msg {
  text-align:center; margin-bottom:12px; padding:6px 12px;
  font-size:.75rem; color:var(--text-muted); font-family:var(--font-m);
  font-style:italic; opacity:.8;
  animation:monitorFadeIn .3s ease;
}
.monitor-user-bubble {
  display:inline-block; background:var(--accent); color:var(--bg);
  padding:10px 16px; border-radius:16px 16px 4px 16px;
  font-family:var(--font-b); font-size:.84rem; line-height:1.5;
  max-width:80%;
}

/* Monitor thinking state */
.monitor-thinking {
  display:flex; align-items:center; gap:12px;
  padding:24px; animation:monitorFadeIn .3s ease;
}
.monitor-thinking-dots {
  display:flex; gap:6px;
}
.monitor-thinking-dots span {
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  animation:chatBounce .6s infinite alternate;
}
.monitor-thinking-dots span:nth-child(2) { animation-delay:.2s; }
.monitor-thinking-dots span:nth-child(3) { animation-delay:.4s; }
.monitor-thinking-label {
  font-family:var(--font-m); font-size:.76rem; color:var(--text-muted);
  letter-spacing:.04em;
}

/* Monitor tool steps */
.monitor-steps { margin-top:16px; }
.monitor-step {
  margin:6px 0; padding:10px 14px;
  background:var(--bg-alt); border:1px solid var(--border);
  border-radius:var(--radius); font-size:.82rem;
  color:var(--text-muted); line-height:1.5;
}
.monitor-step summary {
  cursor:pointer; font-weight:600; color:var(--accent);
  font-size:.82rem; padding:2px 0;
}
.monitor-step summary:hover { color:var(--accent2); }
.monitor-step[open] summary { margin-bottom:6px; }
.monitor-step-detail {
  padding:4px 0; word-break:break-word; font-size:.76rem;
}
.monitor-step-detail strong { color:var(--text); }

/* Monitor navigation confirmation */
.monitor-nav-card {
  display:flex; align-items:center; gap:16px;
  background:var(--panel-bg, var(--bg-alt));
  border:1px solid var(--border);
  border-radius:var(--radius, 8px);
  padding:20px 24px; animation:monitorFadeIn .4s ease;
}
.monitor-nav-icon {
  font-size:1.4rem; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius:8px; flex-shrink:0;
}
.monitor-nav-text {
  font-family:var(--font-b); font-size:.88rem; color:var(--text);
}
.monitor-nav-sub {
  font-family:var(--font-m); font-size:.68rem; color:var(--text-muted);
  margin-top:2px;
}

/* ── Floating prompt bar ── */
.nice-ai {
  position:fixed; bottom:0; left:calc(50% + 28px); transform:translateX(-50%);
  z-index:200; width:calc(100% - 104px); max-width:820px;
  display:flex; flex-direction:column;
  pointer-events:none;
  padding:0 24px 12px;
  transition:left .3s ease, width .3s ease;
}
.app-sidebar.open ~ .nice-ai { left:calc(50% + 140px); width:calc(100% - 328px); }
/* Solid backdrop above prompt — prevents content from bleeding under */
.nice-ai::before {
  content:''; position:fixed; bottom:0; left:0; right:0;
  height:180px; pointer-events:none; z-index:-1;
  background:linear-gradient(to bottom, transparent, var(--bg, #080808) 65%);
}
/* All interactive children need pointer-events restored */
.nice-ai-input-area { pointer-events:auto; }
.nice-ai-close {
  position:absolute; top:-2px; right:0; z-index:5;
  pointer-events:auto; cursor:pointer;
  background:none; border:none; color:var(--text-muted, #888);
  font-size:16px; line-height:1; padding:2px 6px; border-radius:4px;
  opacity:.6; transition:opacity .15s;
}
.nice-ai-close:hover { opacity:1; color:var(--text, #fff); }

/* Input area — solid bg so nothing bleeds through */
.nice-ai-input-area {
  position:relative;
  background:var(--bg);
  padding:0;
}

/* Input container */
.nice-ai-input-container {
  display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:var(--prompt-radius, 0px);
  background:var(--panel-bg, var(--bg-alt));
  padding:12px 12px 8px;
  transition:border-color .2s;
  box-shadow:none;
}
.nice-ai-input-container:focus-within { border-color:var(--accent); }

.nice-ai-input-row {
  display:flex; flex:1;
}
.nice-ai-input {
  flex:1; resize:none; height:36px; max-height:120px;
  padding:0; border:none;
  background:transparent; color:var(--text);
  font-family:var(--font-b); font-size:.84rem;
  line-height:1.5; overflow-y:auto;
}
.nice-ai-input:focus { outline:none; }
.nice-ai-input::placeholder { color:var(--text-muted); }

/* Toolbar row below textarea */
.nice-ai-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:8px; margin-top:4px;
  border-top:1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.nice-ai-tool-btn {
  background:transparent; color:var(--text-muted);
  border:1px solid var(--border); border-radius:6px; cursor:pointer;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  font-size:.9rem; font-family:var(--font-b);
  transition:color .15s, border-color .15s;
}
.nice-ai-tool-btn:hover { color:var(--accent); border-color:var(--accent); }

.nice-ai-toolbar-right {
  display:flex; align-items:center; gap:8px;
}
.nice-ai-model-select {
  background:transparent; color:var(--text-muted);
  border:1px solid var(--border); border-radius:6px;
  padding:4px 8px; font-family:var(--font-m); font-size:.68rem;
  letter-spacing:.03em; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center;
  padding-right:20px;
}
.nice-ai-model-select:hover { border-color:var(--accent); color:var(--text); }
.nice-ai-model-select:focus { outline:none; border-color:var(--accent); }
.nice-ai-model-select option { background:var(--bg); color:var(--text); }
.nice-ai-voice-select {
  background:transparent; color:var(--text-muted);
  border:1px solid var(--border); border-radius:6px;
  padding:4px 8px; font-family:var(--font-m); font-size:.68rem;
  letter-spacing:.03em; cursor:pointer; max-width:110px;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center;
  padding-right:20px; text-overflow:ellipsis;
}
.nice-ai-voice-select:hover { border-color:var(--accent); color:var(--text); }
.nice-ai-voice-select:focus { outline:none; border-color:var(--accent); }
.nice-ai-voice-select option { background:var(--bg); color:var(--text); }

.nice-ai-voice-btn, .nice-ai-send-btn {
  background:transparent; color:var(--text-muted);
  border:1px solid var(--border); border-radius:6px;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s; padding:0;
}
.nice-ai-voice-btn:hover { color:var(--accent); border-color:var(--accent); }
.nice-ai-voice-btn.listening {
  color:#ef4444; border-color:#ef4444; background:rgba(239,68,68,.1);
  animation:voicePulse 1.2s ease-in-out infinite;
}
@keyframes voicePulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(239,68,68,.3); }
  50% { box-shadow:0 0 0 6px rgba(239,68,68,0); }
}
/* Keep listening (stop) button visible even when voice is filling input */
.nice-ai-input-container.has-text .nice-ai-voice-btn.listening { display:flex; }
.nice-ai-input-container.has-text .nice-ai-voice-btn.listening ~ .nice-ai-send-btn { display:none; }
.nice-ai-send-btn { display:none; background:var(--accent); color:var(--bg); border-color:var(--accent); }
.nice-ai-send-btn:hover { opacity:.85; }
/* When input has text: hide voice, show send */
.nice-ai-input-container.has-text .nice-ai-voice-btn { display:none; }
.nice-ai-input-container.has-text .nice-ai-send-btn { display:flex; }

/* Waveform canvas */
.nice-ai-waveform {
  display:none; width:100%; height:40px; border-radius:8px;
}
.nice-ai-waveform.active { display:block; margin:8px 0 4px; }

/* TTS toggle button */
.nice-ai-tts-btn {
  background:transparent; color:var(--text-muted);
  border:1px solid var(--border); border-radius:6px;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s; padding:0;
}
.nice-ai-tts-btn:hover { color:var(--accent); border-color:var(--accent); }
.nice-ai-tts-btn.active { color:var(--accent); border-color:var(--accent); background:rgba(255,255,255,.05); }

/* Contextual suggestion chips */
.nice-ai-chips { display:none; }
.nice-ai-chip {
  background:transparent; border:1px solid var(--border);
  color:var(--text-muted); border-radius:12px;
  padding:4px 12px; font-family:var(--font-m); font-size:.64rem;
  cursor:pointer; transition:border-color .15s, color .15s, background .15s;
  white-space:nowrap; letter-spacing:.02em;
}
.nice-ai-chip:hover {
  border-color:var(--accent); color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
}
.app-main.monitor-active .nice-ai-chips { display:none; }
.nice-ai-chips:has(.nice-flow-chip) { display:flex !important; flex-wrap:wrap; gap:6px; padding:6px 12px; }
.nice-flow-chip { border-color:var(--accent); color:var(--accent); }

/* Token disclaimer */
.nice-ai-disclaimer { display:none; }

/* Resume conversation button */
.nice-ai-resume {
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; padding:8px 0; margin-bottom:4px;
  background:none; border:1px solid var(--border);
  border-radius:var(--btn-radius, 0px); color:var(--accent);
  font-family:var(--font-b); font-size:.75rem; font-weight:600;
  letter-spacing:.03em; cursor:pointer;
  transition:all .2s ease;
}
.nice-ai-resume:hover {
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  border-color:var(--accent);
}

/* @mention autocomplete */
.nice-ai-mention-popup {
  position:absolute; bottom:100%; left:0; right:0;
  background:var(--panel-bg, var(--bg-alt)); border:1px solid var(--border);
  border-radius:8px; max-height:180px; overflow-y:auto;
  box-shadow:0 -4px 16px rgba(0,0,0,.3); display:none; z-index:5;
  margin-bottom:4px;
}
.nice-ai-mention-popup.visible { display:block; }
.nice-ai-mention-item {
  padding:8px 12px; cursor:pointer; font-size:.76rem; font-family:var(--font-b);
  color:var(--text); display:flex; align-items:center; gap:8px;
  transition:background .1s;
}
.nice-ai-mention-item:hover, .nice-ai-mention-item.active {
  background:color-mix(in srgb, var(--accent) 12%, transparent);
}
.nice-ai-mention-item .mention-name { font-weight:600; color:var(--accent); }
.nice-ai-mention-item .mention-role { color:var(--text-muted); font-size:.66rem; font-family:var(--font-m); }

@media (max-width:768px) {
  /* username and badge always visible in sidebar drawer */
  .nice-ai { max-width:100%; padding:0 8px 12px; left:50%; width:100%; }
  .nice-ai-input-container { border-radius:12px; }
  .nice-monitor-inner { padding:16px 12px 120px; }
}

/* ─────────────────────────────────────────────────────────────────
   NOTIFICATION TOASTS
───────────────────────────────────────────────────────────────── */
.notify-container {
  position:fixed; top:60px; right:12px; z-index:500;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.notify-toast {
  display:flex; align-items:stretch; background:var(--panel-bg);
  border:var(--border-width) solid var(--border); border-radius:var(--radius);
  min-width:280px; max-width:360px; pointer-events:auto;
  animation:notifyIn .3s ease; overflow:hidden;
}
.notify-toast.dismiss { animation:notifyOut .3s ease forwards; }
@keyframes notifyIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes notifyOut { to { opacity:0; transform:translateX(20px); } }
.notify-toast-bar { width:4px; flex-shrink:0; }
.notify-toast-body { flex:1; padding:10px 12px; }
.notify-toast-title { font-family:var(--font-b); font-size:.78rem; font-weight:600; display:block; color:var(--text); }
.notify-toast-msg { font-family:var(--font-b); font-size:.68rem; color:var(--text-muted); display:block; margin-top:2px; }
.notify-toast-close {
  background:none; border:none; color:var(--text-dim); cursor:pointer;
  padding:8px 10px; font-size:1rem; align-self:flex-start;
}

/* ─────────────────────────────────────────────────────────────────
   PHASE 2 + 3 + 4 MOBILE RESPONSIVE
───────────────────────────────────────────────────────────────── */
@media (max-width:768px) {
  .view-topbar { flex-direction:column; align-items:stretch; }
  .view-topbar-l { flex-direction:column; }
  .search-input { width:100%; }
  .agents-grid { grid-template-columns:1fr; }
  .fleet-grid { grid-template-columns:1fr; }
  .fleet-member-grid { grid-template-columns:1fr; }
  .detail-grid { grid-template-columns:1fr; }
  .builder-row { grid-template-columns:1fr; }
  .task-row-main { flex-wrap:wrap; }
  .bp-grid { grid-template-columns:1fr; }
  .bp-view-card, .bp-view-compact { grid-template-columns:1fr !important; }
  .bpl-row { grid-template-columns:24px 1fr .6fr auto; }
  .bpl-desc, .bpl-stat1, .bpl-stat2, .bpl-stat3, .bpl-dl { display:none; }
  .ana-stats { grid-template-columns:repeat(2, 1fr); }
  .ana-charts { grid-template-columns:1fr; }
  .cost-overview { grid-template-columns:repeat(2, 1fr); }
  .cost-log-row { font-size:.72rem; }
  .integ-grid { grid-template-columns:1fr; }
  .acad-progress-row { grid-template-columns:1fr; }
  .acad-track-hdr { flex-wrap:wrap; }
  .vault-row { flex-direction:column; align-items:flex-start; }
  .settings-row { flex-direction:column; align-items:flex-start; gap:8px; }
  .bell-dropdown { width:calc(100vw - 24px); right:-50px; }
}

/* ─────────────────────────────────────────────────────────────────
   PWA SAFE AREAS
───────────────────────────────────────────────────────────────── */
@supports (padding: env(safe-area-inset-top)) {
  .app-sidebar { padding-top:env(safe-area-inset-top); }
  .app-tabbar { padding-bottom:env(safe-area-inset-bottom); height:calc(64px + env(safe-area-inset-bottom)); }
}

/* ─────────────────────────────────────────────────────────────────
   GAMIFICATION — Ranks, XP, Health, Ship Classes
───────────────────────────────────────────────────────────────── */

/* Rank Badge (sidebar compact) */
.rank-badge-compact { display:flex; align-items:center; gap:6px; padding:6px 10px; font-size:.72rem; color:var(--text-muted); border-top:1px solid var(--border); margin-top:auto; }
.rank-icon { font-size:.9rem; }
.rank-name { font-family:var(--font-m); letter-spacing:.06em; text-transform:uppercase; }

/* Rank Card (home dashboard) */
.rank-card { background:var(--panel-bg); border:1px solid var(--border); border-radius:var(--radius); padding:14px; }
.rank-card-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.rank-icon-lg { font-size:1.6rem; }
.rank-card-info { display:flex; flex-direction:column; }
.rank-card-name { font-family:var(--font-h); font-weight:700; font-size:.95rem; color:var(--text); }
.rank-card-xp { font-size:.72rem; color:var(--accent); font-family:var(--font-m); }
.rank-progress { height:6px; background:var(--bg-alt); border-radius:3px; overflow:hidden; }
.rank-progress-bar { height:100%; background:var(--accent); border-radius:3px; transition:width .4s ease; }
.rank-progress-label { display:block; margin-top:6px; font-size:.68rem; color:var(--text-muted); font-family:var(--font-m); }

/* Health Bars (spaceship cards) */
.health-bars { display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.health-bar-row { display:flex; align-items:center; gap:6px; }
.health-label { font-size:.62rem; font-family:var(--font-m); text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); width:36px; }
.health-bar { flex:1; height:5px; background:var(--bg-alt); border-radius:3px; overflow:hidden; }
.health-fill { height:100%; border-radius:3px; transition:width .4s ease; }
.health-fill.hull { background:#22c55e; }
.health-fill.tokens { background:#f59e0b; }
.health-fill.shield { background:#6366f1; }
.health-val { font-size:.6rem; font-family:var(--font-m); color:var(--text-muted); width:28px; text-align:right; }

/* Ship Class Badge */
.ship-class-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; font-size:.62rem; font-family:var(--font-m); letter-spacing:.06em; border-radius:10px; border:1px solid var(--border); color:var(--text-muted); }
.ship-class-badge.class-scout { border-color:#22c55e40; color:#22c55e; }
.ship-class-badge.class-cruiser { border-color:#6366f140; color:#6366f1; }
.ship-class-badge.class-dreadnought { border-color:#f59e0b40; color:#f59e0b; }
.ship-class-badge.class-flagship { border-color:#a855f740; color:#a855f7; }

/* ── Achievement Gallery ── */
.ach-gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:.75rem; }
.ach-card { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; border-radius:var(--radius, 8px); border:1px solid var(--border, #222); background:var(--panel-bg, #111); transition:opacity .2s, border-color .2s; }
.ach-card.unlocked { border-color:var(--accent, #fff); }
.ach-card.locked { opacity:.4; filter:grayscale(1); }
.ach-icon { font-size:1.5rem; flex-shrink:0; }
.ach-info { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.ach-name { font-weight:600; font-size:.85rem; color:var(--text, #fff); }
.ach-desc { font-size:.72rem; color:var(--text-muted, #888); }
.ach-date { font-size:.65rem; color:var(--accent, #fff); font-family:var(--font-m, monospace); }

/* ── Resource Bar ── */
.res-bar { display:flex; gap:1rem; padding:.5rem .75rem; border-radius:var(--radius, 8px); background:var(--panel-bg, #111); border:1px solid var(--border, #222); }
.res-item { display:flex; align-items:center; gap:.3rem; font-size:.78rem; font-weight:500; color:var(--text, #fff); }
.res-icon { font-size:.9rem; }
.res-val { font-family:var(--font-m, monospace); }
.res-item.res-warning { color:#ef4444; }
.res-item.res-warning .res-icon { }


/* ── PRO Gate ── */
.pro-gate { text-align:center; padding:2.5rem 1.5rem; margin:1rem 0; border-radius:var(--radius, 8px); border:1px dashed var(--border, #333); background:var(--panel-bg, #111); }
.pro-gate-icon { font-size:2.5rem; margin-bottom:.75rem; }
.pro-gate-title { font-size:1.1rem; font-weight:700; color:var(--text, #fff); margin-bottom:.5rem; }
.pro-gate-desc { font-size:.82rem; color:var(--text-muted, #888); margin-bottom:1rem; max-width:400px; margin-left:auto; margin-right:auto; }
.pro-upgrade-btn { background:#6366f1; border:none; }

/* ── Fleets ── */
.ms-wrap { padding:1rem 0; }
.ms-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.5rem; gap:1rem; }
.ms-title { font-size:1.5rem; font-weight:700; }
.ms-sub { font-size:.82rem; color:var(--text-muted, #888); margin-top:.25rem; }
.ms-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:20px; }
.ms-grid .tcg-card { margin:0; }
.ms-card { padding:1.25rem; border-radius:var(--radius, 8px); border:1px solid var(--border, #222); background:var(--panel-bg, #111); display:flex; flex-direction:column; gap:.75rem; transition:border-color .2s; }
.ms-card:hover { border-color:var(--accent, #fff); }
.ms-card-hdr { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; }
.ms-card-info { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ms-card-name { font-weight:600; font-size:1rem; }
.ms-card-desc { font-size:.78rem; color:var(--text-muted, #888); line-height:1.4; }
.ms-card-stats { display:flex; flex-wrap:wrap; gap:.75rem; }
.ms-stat { font-size:.75rem; color:var(--text-muted, #888); }
.ms-card-actions { display:flex; gap:.5rem; }
.ms-bridge-desc { font-size:.85rem; color:var(--text-muted, #888); margin-bottom:1rem; line-height:1.5; }

/* ── Crew ── */
.ms-crew-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:.75rem; }
.ms-crew-card { display:flex; align-items:center; gap:.75rem; padding:.75rem; border-radius:var(--radius, 8px); border:1px solid var(--border, #222); background:var(--bg-alt, #0a0a0a); }
.ms-crew-avatar { width:36px; height:36px; border-radius:50%; background:var(--accent, #fff); color:var(--bg, #000); display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; flex-shrink:0; }
.ms-crew-info { display:flex; flex-direction:column; gap:.1rem; }
.ms-crew-name { font-size:.82rem; font-weight:600; }
.ms-crew-role { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; }

/* ── Bridge Stats ── */
.ms-bridge-stats { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:.75rem; }
.ms-bstat { text-align:center; padding:.75rem .5rem; border-radius:var(--radius, 8px); border:1px solid var(--border, #222); background:var(--bg-alt, #0a0a0a); }
.ms-bstat-val { display:block; font-size:1.5rem; font-weight:700; font-family:var(--font-m, monospace); color:var(--accent, #fff); }
.ms-bstat-label { font-size:.68rem; color:var(--text-muted, #888); text-transform:uppercase; letter-spacing:.03em; }
.ms-captain-actions { display:flex; gap:.5rem; flex-wrap:wrap; }


/* ═══════════════════════════════════════════════════════════════════
   PHASE 1: Error Boundaries + Accessibility
═══════════════════════════════════════════════════════════════════ */

/* ── Error Boundary ── */
.err-boundary {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:60px 24px; gap:12px; min-height:50vh;
}
.err-boundary-icon { font-size:2.5rem; opacity:.5; }
.err-boundary-title { font-family:var(--font-d, var(--font-h)); font-size:1.1rem; color:var(--text); margin:0; }
.err-boundary-msg { font-size:.82rem; color:var(--text-muted); margin:0; }
.err-boundary-detail {
  background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 14px; font-family:var(--font-m); font-size:.68rem; color:#ef4444;
  max-width:400px; word-break:break-word; white-space:pre-wrap;
}
.err-boundary-actions { display:flex; gap:8px; margin-top:8px; }

/* ── Skip to Content (a11y) ── */
.skip-to-content {
  position:absolute; top:-40px; left:0; z-index:999;
  background:var(--accent); color:var(--bg); padding:8px 16px;
  font-family:var(--font-m); font-size:.75rem; text-decoration:none;
  transition:top .2s;
}
.skip-to-content:focus { top:0; }

/* ── Focus Visible ── */
*:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.side-link:focus-visible { background:var(--surface, var(--bg-alt)); }

/* ── Screen Reader Only ── */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 2: Command Palette + Keyboard Shortcuts + Onboarding
═══════════════════════════════════════════════════════════════════ */

/* ── Command Palette ── */
.cmd-palette { position:fixed; inset:0; z-index:400; display:none; align-items:flex-start; justify-content:center; padding-top:20vh; }
.cmd-palette.open { display:flex; }
.cmd-palette-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); }
.cmd-palette-box {
  position:relative; width:100%; max-width:520px; background:var(--panel-bg, #111);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 16px 48px rgba(0,0,0,.5); overflow:hidden;
  animation:cmdSlideIn .15s ease;
}
@keyframes cmdSlideIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
.cmd-palette-input-wrap {
  display:flex; align-items:center; gap:8px; padding:12px 16px;
  border-bottom:1px solid var(--border);
}
.cmd-palette-input {
  flex:1; background:none; border:none; color:var(--text);
  font-family:var(--font-b); font-size:.88rem; outline:none;
}
.cmd-palette-input::placeholder { color:var(--text-dim, var(--text-muted)); }
.cmd-palette-kbd {
  font-family:var(--font-m); font-size:.55rem; padding:2px 6px;
  border:1px solid var(--border); border-radius:3px; color:var(--text-muted);
}
.cmd-palette-results { max-height:320px; overflow-y:auto; }
.cmd-result {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  cursor:pointer; transition:background .1s; border-left:2px solid transparent;
}
.cmd-result:hover, .cmd-result.selected { background:var(--surface, var(--bg-alt)); }
.cmd-result.selected { border-left-color:var(--accent); }
.cmd-result-label { flex:1; font-size:.82rem; color:var(--text); }
.cmd-result-type { font-family:var(--font-m); font-size:.55rem; color:var(--text-dim, var(--text-muted)); letter-spacing:.08em; text-transform:uppercase; }
.cmd-no-results { padding:24px 16px; text-align:center; color:var(--text-muted); font-size:.78rem; }

/* ── Keyboard Shortcut Help ── */
.kb-shortcut-grid { display:flex; flex-direction:column; gap:4px; }
.kb-section-title {
  font-family:var(--font-m); font-size:.58rem; letter-spacing:.14em;
  color:var(--text-muted); text-transform:uppercase; margin-top:10px;
  padding-bottom:4px; border-bottom:1px solid var(--border);
}
.kb-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0; font-size:.78rem; color:var(--text);
}
.kb-row kbd {
  font-family:var(--font-m); font-size:.62rem; padding:2px 8px;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:3px;
  color:var(--accent); min-width:22px; text-align:center;
}

/* ── Onboarding Tour ── */
.onb-overlay { position:fixed; inset:0; z-index:500; }
.onb-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.7); }
.onb-spotlight {
  position:fixed; border:2px solid var(--accent); border-radius:var(--radius);
  box-shadow:0 0 0 9999px rgba(0,0,0,.6); z-index:501;
  transition:all .3s ease; pointer-events:none;
}
.onb-tooltip {
  z-index:502; background:var(--panel-bg, #111); border:1px solid var(--accent);
  border-radius:var(--radius); padding:20px; width:300px;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.onb-tooltip-step { font-family:var(--font-m); font-size:.55rem; color:var(--accent); letter-spacing:.12em; margin-bottom:6px; }
.onb-tooltip-title { font-family:var(--font-d, var(--font-h)); font-size:.95rem; font-weight:700; margin:0 0 6px 0; color:var(--text); }
.onb-tooltip-text { font-size:.78rem; color:var(--text-muted); line-height:1.6; margin:0 0 14px 0; }
.onb-tooltip-actions { display:flex; gap:8px; justify-content:flex-end; }

/* ── Tutorial Mission Overlay ── */
.tut-mission-overlay .onb-spotlight {
  animation:tutSpotlightPulse 2s ease-in-out infinite;
}
@keyframes tutSpotlightPulse {
  0%,100% { box-shadow:0 0 0 9999px rgba(0,0,0,.6), 0 0 12px 2px var(--accent); }
  50% { box-shadow:0 0 0 9999px rgba(0,0,0,.6), 0 0 24px 6px var(--accent); }
}

.tut-mission-overlay .onb-tooltip {
  animation:tutTooltipEnter .3s ease forwards;
}
@keyframes tutTooltipEnter {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}

/* Tooltip arrow */
.tut-mission-overlay .onb-tooltip::before {
  content:''; position:absolute; width:0; height:0;
  border:8px solid transparent;
}
.tut-mission-overlay .onb-tooltip[data-arrow="left"]::before {
  left:-16px; top:20px; border-right-color:var(--accent);
}
.tut-mission-overlay .onb-tooltip[data-arrow="right"]::before {
  right:-16px; top:20px; border-left-color:var(--accent);
}
.tut-mission-overlay .onb-tooltip[data-arrow="top"]::before {
  top:-16px; left:24px; border-bottom-color:var(--accent);
}
.tut-mission-overlay .onb-tooltip[data-arrow="bottom"]::before {
  bottom:-16px; left:24px; border-top-color:var(--accent);
}

/* Step counter badge */
.tut-step-badge {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-m); font-size:.55rem; letter-spacing:.12em;
  color:var(--accent); background:var(--accent)15; border:1px solid var(--accent)40;
  border-radius:10px; padding:2px 10px; margin-bottom:6px;
}

/* Progress bar at overlay bottom */
.tut-progress-track {
  position:fixed; bottom:0; left:0; right:0; height:4px;
  background:rgba(255,255,255,.08); z-index:503;
}
.tut-progress-fill {
  height:100%; background:var(--accent); border-radius:0 2px 2px 0;
  transition:width .4s ease;
}

@media (prefers-reduced-motion:reduce) {
  .tut-mission-overlay .onb-spotlight { animation:none!important; }
  .tut-mission-overlay .onb-tooltip { animation:none!important; opacity:1!important; transform:none!important; }
  .tut-progress-fill { transition:none!important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 3: Agent Templates
═══════════════════════════════════════════════════════════════════ */
.builder-template-row {
  display:flex; align-items:center; gap:8px; padding:10px 0;
  margin-bottom:6px; border-bottom:1px solid var(--border);
}
.builder-template-label {
  font-family:var(--font-m); font-size:.62rem; letter-spacing:.1em;
  color:var(--text-muted); text-transform:uppercase; flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6: Responsive Fixes for New Features
═══════════════════════════════════════════════════════════════════ */
.app-main { overflow-x:hidden; }

@media (max-width:768px) {
  .cmd-palette { padding-top:10vh; }
  .cmd-palette-box { max-width:calc(100vw - 24px); margin:0 12px; }
  .onb-tooltip { width:calc(100vw - 48px); max-width:300px; }
  .kb-shortcut-grid { font-size:.72rem; }
  .builder-template-row { flex-wrap:wrap; }
}

@media (max-width:480px) {
  .cmd-palette { padding-top:5vh; }
  .cmd-result { min-height:44px; }
  .onb-tooltip-actions .btn { min-height:44px; }
  .kb-row kbd { min-height:28px; display:inline-flex; align-items:center; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE TRANSITIONS
═══════════════════════════════════════════════════════════════════ */
.view-exit { opacity:0; transform:translateY(-6px); transition:opacity 120ms ease,transform 120ms ease; }
.view-enter { animation:viewEnter 200ms ease forwards; }
@keyframes viewEnter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) {
  .view-exit,.view-enter { animation:none!important; transition:none!important; opacity:1!important; transform:none!important; }
}

/* ═══════════════════════════════════════════════════════════════════
   CAPTAIN'S LOG (Audit Log)
═══════════════════════════════════════════════════════════════════ */
.log-wrap { max-width:var(--width-large); margin:0; }
.log-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.log-title { font-family:var(--font-h); font-size:1.5rem; color:var(--text); margin:0 0 4px; }
.log-sub { color:var(--text-muted); font-size:.82rem; margin:0; }
.log-count { color:var(--text-muted); font-size:.78rem; font-family:var(--font-m); white-space:nowrap; }

.log-filter-bar { display:flex; gap:8px; margin-bottom:16px; align-items:center; flex-wrap:wrap; }
.filter-input { background:var(--surface,var(--bg)); border:1px solid var(--border); color:var(--text);
  padding:6px 10px; border-radius:var(--radius); font-size:.82rem; font-family:var(--font-m); flex:1; min-width:120px; }
.filter-input:focus { border-color:var(--accent); outline:none; }

.log-timeline { display:flex; flex-direction:column; gap:2px; }
.log-entry { display:flex; gap:10px; padding:10px 12px; border-radius:var(--radius);
  border:1px solid transparent; transition:border-color .15s; }
.log-entry:hover { border-color:var(--border); background:var(--surface,rgba(255,255,255,.03)); }
.log-entry-icon { flex-shrink:0; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,.04); }
.log-entry-body { flex:1; min-width:0; }
.log-entry-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:2px; }
.log-entry-badge { font-family:var(--font-m); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; }
.log-entry-time { font-family:var(--font-m); font-size:.7rem; color:var(--text-muted); }
.log-entry-desc { font-size:.82rem; color:var(--text); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.log-empty { text-align:center; padding:40px 20px; color:var(--text-muted); font-size:.85rem; }

/* ═══════════════════════════════════════════════════════════════════
   COMMAND PALETTE — Data Separator
═══════════════════════════════════════════════════════════════════ */
.cmd-result-sep { font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted);
  padding:8px 16px 4px; border-top:1px solid var(--border); margin-top:4px; font-family:var(--font-m); }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Phase 1 additions
═══════════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  .log-header { flex-direction:column; gap:8px; }
  .log-filter-bar { flex-direction:column; }
  .log-filter-bar .filter-select, .log-filter-bar .filter-input { width:100%; }
}
@media (max-width:480px) {
  .log-entry { padding:8px; gap:8px; }
  .log-entry-icon { width:24px; height:24px; }
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD WIDGETS — Draggable Home Cards
═══════════════════════════════════════════════════════════════════ */
.widget-card {
  position:relative;
  border:1px solid var(--border);
  border-radius:0;
  background:var(--panel-bg,rgba(255,255,255,.02));
  padding:16px;
  transition:border-color .2s, box-shadow .2s, opacity .2s, transform .15s;
}
.widget-card:hover { border-color:var(--border-hi,var(--accent)); }


/* ── Collapsible Widget ── */

/* Hero schematic + dock — full-width */
.mc-hero-schematic, .mc-hero-dock { width:100%; }


/* Dashboard stats strip */
.mc-stats-strip { display:flex; gap:12px; width:100%; }
.mc-stat-card {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:12px 8px; border:1px solid var(--border); background:var(--panel-bg);
  border-radius:0;
}
.mc-stat-label { font-family:var(--font-m); font-size:.55rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.mc-stat-value { font-family:var(--font-d,var(--font-h)); font-size:1rem; font-weight:700; color:var(--text); }
@media (max-width:640px) { .mc-stats-strip { flex-wrap:wrap; } .mc-stat-card { flex:1 1 calc(50% - 6px); min-width:0; } }

/* Reset button in schematic header */
.mc-reset-btn {
  background:none; border:1px solid var(--border); color:var(--text-muted);
  padding:4px; border-radius:var(--radius); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s, border-color .15s;
}
.mc-reset-btn:hover { color:var(--accent); border-color:var(--accent); }
.mc-ai-action-btn { font-size:.6rem; font-family:var(--font-m); letter-spacing:.08em; padding:4px 12px; border:1px solid var(--accent); color:var(--accent); background:transparent; border-radius:var(--radius); cursor:pointer; transition:background .2s, color .2s, box-shadow .2s; white-space:nowrap; }
.mc-ai-action-btn:hover { background:var(--accent); color:var(--bg); box-shadow:0 0 12px color-mix(in srgb, var(--accent) 40%, transparent); }

/* Widget card inner spacing adjustments */

@media (max-width:768px) {
  .widget-card { padding:12px; }
}
@media (max-width:480px) {
  .widget-card { padding:10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   SCHEMATIC
═══════════════════════════════════════════════════════════════════ */
.mc-schematic { position:relative; border:none; border-radius:var(--radius); background:var(--panel-bg,rgba(255,255,255,.02)); overflow:visible; }
.mc-schematic::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 30px rgba(255,255,255,.04); pointer-events:none;
}
.mc-schematic-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border);
}
.mc-schematic-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2px 10px;
}
.mc-schematic-bottombar {
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:8px 10px 6px;
}
.mc-schematic-bottombar-right { display:flex; align-items:center; gap:6px; }
.mc-ship-status {
  display:flex; align-items:center; gap:5px;
  font-size:.7rem; font-family:var(--font-m,monospace); text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted);
}
.mc-status-dot {
  width:8px; height:8px; border-radius:50%; display:inline-block;
}
.mc-status-deployed .mc-status-dot { background:#22c55e; box-shadow:0 0 6px #22c55e; }
.mc-status-deployed .mc-status-label { color:#22c55e; }
.mc-status-docked .mc-status-dot { background:#f59e0b; }
.mc-status-docked .mc-status-label { color:#f59e0b; }

/* NICE button states */
.mc-nice-btn { font-size:.7rem; padding:4px 12px; border-radius:4px; transition:all .3s; }
.mc-nice-disabled {
  opacity:.3; cursor:not-allowed; color:var(--text-muted); border-color:var(--border);
}
.mc-nice-ready {
  color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5);
  box-shadow:0 0 10px rgba(255,255,255,.15), inset 0 0 6px rgba(255,255,255,.05);

}
.mc-nice-ready:hover {
  background:rgba(255,255,255,.18); box-shadow:0 0 18px rgba(255,255,255,.3);
}
.mc-schematic-title { font-family:var(--font-m); font-size:.62rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.16em; margin:0; }
.mc-ship-select {
  background:var(--bg); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius); padding:4px 8px; font-size:.72rem; font-family:var(--font-m);
}
.mc-schematic-hud { position:relative; width:100%; min-height:120px; }
.mc-schematic-svg { display:block; width:100%; height:auto; }
.mc-schematic-slots { position:absolute; inset:0; pointer-events:none; }

/* Slot base */
.mc-slot {
  position:absolute; width:90px; height:110px; transform:translate(-50%,-50%);
  pointer-events:auto; border:2px dashed var(--border); border-radius:5px;
  background:rgba(255,255,255,.02); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; padding:6px;
  transition:border-color .2s, box-shadow .2s, background .2s; cursor:default;
}
.mc-slot-empty { cursor:pointer; }
.mc-slot-icon { font-size:1.4rem; opacity:.3; }
.mc-slot-label {
  font-size:.58rem; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.04em; font-family:var(--font-m); text-align:center;
}
.mc-slot-rarity {
  font-size:.5rem; padding:1px 6px; border-radius:8px; color:#fff;
  text-transform:uppercase; letter-spacing:.03em;
}
/* Filled slot — connected to ship */
.mc-slot-filled {
  border-style:solid; background:rgba(255,255,255,.06);
  box-shadow:0 0 12px rgba(var(--accent-rgb,100,200,255),.25), inset 0 0 8px rgba(var(--accent-rgb,100,200,255),.08);
  animation:mc-slot-dock-in .5s ease-out;
}
.mc-slot-filled::after {
  content:''; position:absolute; inset:-3px; border-radius:7px;
  border:1px solid currentColor; opacity:.15;
}
.mc-slot-filled .mc-slot-avatar { width:36px; height:36px; }
.mc-slot-filled .mc-slot-avatar svg { width:100%; height:100%; }
.mc-slot-filled .mc-slot-name {
  font-size:.58rem; color:var(--text); text-align:center; line-height:1.2;
  max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mc-slot-undock {
  position:absolute; top:2px; right:2px; width:16px; height:16px;
  border:none; background:rgba(239,68,68,.8); color:#fff; border-radius:50%;
  font-size:.6rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s; padding:0; line-height:1; z-index:2;
}
.mc-slot-filled:hover .mc-slot-undock { opacity:1; }

/* Dock-in animation when card first placed */
@keyframes mc-slot-dock-in {
  0%   { transform:translate(-50%,-50%) scale(.85); opacity:.5; box-shadow:0 0 0 rgba(var(--accent-rgb,100,200,255),0); }
  50%  { transform:translate(-50%,-50%) scale(1.05); box-shadow:0 0 24px rgba(var(--accent-rgb,100,200,255),.4); }
  100% { transform:translate(-50%,-50%) scale(1); }
}

/* DnD validation states */
.mc-slot-valid { border-color:#22c55e !important; box-shadow:0 0 12px rgba(34,197,94,.3); background:rgba(34,197,94,.08); }
.mc-slot-invalid { border-color:#ef4444 !important; box-shadow:0 0 12px rgba(239,68,68,.3); background:rgba(239,68,68,.05); }

@keyframes mc-slot-shake {
  0%,100% { transform:translate(-50%,-50%) rotate(0); }
  20%     { transform:translate(-50%,-50%) rotate(-3deg); }
  40%     { transform:translate(-50%,-50%) rotate(3deg); }
  60%     { transform:translate(-50%,-50%) rotate(-2deg); }
  80%     { transform:translate(-50%,-50%) rotate(2deg); }
}
.mc-slot-shake { animation:mc-slot-shake .4s ease; }

/* Schematic health bars */
.mc-schematic-health { display:flex; gap:12px; padding:10px 14px; border-top:1px solid var(--border); }
.mc-health-bar { flex:1; display:flex; flex-direction:column; gap:3px; }
.mc-health-label {
  font-size:.58rem; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.04em; font-family:var(--font-m); display:flex; justify-content:space-between;
}
.mc-health-track { height:4px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; }
.mc-health-fill { height:100%; border-radius:2px; transition:width .5s ease; }

/* Connection dot animation */
@keyframes mc-dot-travel {
  0% { offset-distance:0%; opacity:0; }
  10% { opacity:1; }
  90% { opacity:1; }
  100% { offset-distance:100%; opacity:0; }
}

/* ═══════════════════════════════════════════════════════════════════
   BLUEPRINT DOCK
═══════════════════════════════════════════════════════════════════ */
.mc-dock-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.mc-dock-title { font-family:var(--font-m); font-size:.62rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.16em; margin:0; white-space:nowrap; }
.mc-dock-search {
  flex:1; max-width:200px; padding:3px 8px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--panel-bg,rgba(255,255,255,.02)); color:var(--text); font-size:.65rem;
  font-family:var(--font-m); outline:none; transition:border-color .15s;
}
.mc-dock-search::placeholder { color:var(--text-muted); opacity:.6; }
.mc-dock-search:focus { border-color:var(--accent); }
.mc-dock-view-modes { display:flex; gap:2px; }
.mc-dock-view-btn {
  background:none; border:1px solid var(--border); color:var(--text-muted);
  padding:2px 6px; border-radius:var(--radius); font-size:.55rem; line-height:1;
  cursor:pointer; transition:border-color .15s, color .15s, background .15s;
}
.mc-dock-view-btn:hover, .mc-dock-view-btn.active {
  border-color:var(--accent); color:var(--accent); background:rgba(255,255,255,.04);
}
.mc-dock-filters { display:flex; gap:4px; margin-left:auto; }
.mc-dock-filter-btn {
  background:none; border:1px solid var(--border); color:var(--text-muted);
  padding:2px 8px; border-radius:var(--radius); font-size:.6rem;
  font-family:var(--font-m); cursor:pointer; text-transform:uppercase;
  transition:border-color .15s, color .15s, background .15s;
}
.mc-dock-filter-btn:hover, .mc-dock-filter-btn.active {
  border-color:var(--accent); color:var(--accent);
  background:rgba(255,255,255,.04);
}
.mc-dock-scroll {
  display:grid; gap:20px; padding-bottom:6px;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
}
.mc-dock-scroll.mc-dock-full { grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:20px; }
.mc-dock-scroll.mc-dock-grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
.mc-dock-scroll.mc-dock-compact { grid-template-columns:1fr; gap:6px; }
.mc-dock-scroll.mc-dock-mini { grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:8px; }
.mc-dock-scroll.mc-dock-dock {
  display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  gap:10px; padding-bottom:8px; scroll-snap-type:x mandatory;
}
.mc-dock-scroll.mc-dock-dock > * { flex:0 0 auto; scroll-snap-align:start; }
.mc-dock-scroll .tcg-card { margin:0; }
.mc-dock-scroll::-webkit-scrollbar { height:4px; }
.mc-dock-scroll::-webkit-scrollbar-track { background:transparent; }
.mc-dock-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.mc-dock-empty { color:var(--text-muted); font-size:.78rem; padding:16px 0; text-align:center; grid-column:1/-1; width:100%; flex:1 1 100%; }
.mc-dock-link { display:block; text-align:center; margin-top:10px; font-size:.72rem; color:var(--accent); text-decoration:none; }
.mc-dock-link:hover { text-decoration:underline; }

/* Mini Blueprint Card */
.mc-bp-mini {
  flex:0 0 90px; width:90px; height:110px; border:1px solid var(--border); border-radius:5px;
  background:var(--panel-bg,rgba(255,255,255,.02)); padding:6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  cursor:grab; user-select:none;
  transition:border-color .15s, box-shadow .15s, opacity .2s, transform .15s;
}
.mc-bp-mini:hover { border-color:var(--border-hi,var(--accent)); box-shadow:0 0 8px var(--glow,rgba(255,255,255,.05)); }
.mc-bp-mini:active { cursor:grabbing; }
.mc-bp-mini.dragging { opacity:.4; transform:scale(.95); }
.mc-bp-mini.assigned { opacity:.35; cursor:default; pointer-events:none; }
.mc-bp-mini.mc-bp-selected { border-color:var(--accent); box-shadow:0 0 12px var(--glow,rgba(255,255,255,.1)); }
.mc-bp-mini-art { width:40px; height:40px; }
.mc-bp-mini-art svg { width:100%; height:100%; }
.mc-bp-mini-name { font-size:.58rem; color:var(--text); text-align:center; line-height:1.2; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mc-bp-mini-rarity { font-size:.5rem; padding:1px 6px; border-radius:8px; color:#fff; text-transform:uppercase; letter-spacing:.03em; }

/* Grid TCG Card (medium density) */
.tcg-card-grid {
  border:15px solid var(--border); border-radius:25px; padding:0;
  background:var(--panel-bg); display:flex; flex-direction:column;
  align-items:center; gap:6px; cursor:grab; user-select:none;
  transition:border-color .15s, box-shadow .15s, opacity .2s;
  aspect-ratio:5/7; overflow:hidden;
}
.tcg-card-grid:hover { border-color:var(--accent); box-shadow:0 0 8px var(--glow,rgba(255,255,255,.05)); }
.tcg-card-grid.assigned { opacity:.35; cursor:default; pointer-events:none; }
.tcg-card-grid.mc-bp-selected { border-color:var(--accent); box-shadow:0 0 12px var(--glow,rgba(255,255,255,.1)); }
.tcg-grid-art { width:70px; height:70px; }
.tcg-grid-art svg { width:100%; height:100%; }
.tcg-grid-info { display:flex; flex-direction:column; align-items:center; gap:3px; width:100%; }
.tcg-grid-name { font-family:var(--font-h); font-size:.7rem; font-weight:700; color:var(--text); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.tcg-grid-badge { font-size:.5rem; padding:1px 6px; border:1px solid; border-radius:8px; text-transform:uppercase; letter-spacing:.04em; font-family:var(--font-m); }
.tcg-grid-stats { display:flex; gap:6px; justify-content:center; font-size:.5rem; color:var(--text-muted); font-family:var(--font-m); }
.tcg-grid-stats b { color:var(--text); }

/* Compact card dock overrides */
.mc-dock-scroll .tcg-card-compact { cursor:grab; user-select:none; }
.mc-dock-scroll .tcg-card-compact:hover { border-color:var(--accent); }
.mc-dock-scroll .tcg-card-compact.assigned { opacity:.35; cursor:default; pointer-events:none; }
.mc-dock-scroll .tcg-card-compact.mc-bp-selected { border-color:var(--accent); box-shadow:0 0 12px var(--glow,rgba(255,255,255,.1)); }

/* Mini card dock overrides */
.mc-dock-scroll .tcg-card-mini { cursor:grab; user-select:none; }
.mc-dock-scroll .tcg-card-mini:hover { border-color:var(--accent); }
.mc-dock-scroll .tcg-card-mini.mc-bp-selected { border-color:var(--accent); box-shadow:0 0 12px var(--glow,rgba(255,255,255,.1)); }

/* ═══════════════════════════════════════════════════════════════════
   THEME CREATOR
═══════════════════════════════════════════════════════════════════ */
.tc-wrap { max-width:100%; margin:0; padding:8px 0 0; display:flex; flex-direction:column; gap:24px; }
.tc-header { margin:0; }
.tc-title { font-family:var(--font-h); font-size:1.5rem; color:var(--text); margin:0 0 4px; }
.tc-sub { color:var(--text-muted); font-size:.82rem; margin:0; }

.tc-section { border:1px solid var(--border); border-radius:var(--radius); padding:18px; background:var(--panel-bg,rgba(255,255,255,.02)); }
.tc-panel { border:1px solid var(--border); border-radius:var(--radius); padding:18px; background:var(--panel-bg,rgba(255,255,255,.02)); }
.tc-panel-title { font-family:var(--font-h); font-size:.85rem; color:var(--text); margin:0 0 16px; text-transform:uppercase; letter-spacing:.06em; }

.tc-grid { display:grid; gap:14px; }
.tc-grid--colors { grid-template-columns:1fr 1fr 1fr; }
.tc-grid--typo { grid-template-columns:1fr 1fr; }
.tc-field { display:flex; flex-direction:column; gap:5px; }
.tc-label { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; font-family:var(--font-m); }

.tc-color-row { display:flex; gap:6px; align-items:center; }
.tc-color {
  width:32px; height:32px; padding:0; border:1px solid var(--border);
  border-radius:var(--radius); cursor:pointer; background:none;
}
.tc-color::-webkit-color-swatch-wrapper { padding:1px; }
.tc-color::-webkit-color-swatch { border:none; border-radius:2px; }
.tc-hex {
  flex:1; background:var(--surface,var(--bg)); border:1px solid var(--border);
  color:var(--text); padding:4px 8px; border-radius:var(--radius);
  font-size:.78rem; font-family:var(--font-m); max-width:80px;
}
.tc-hex:focus { border-color:var(--accent); outline:none; }

.tc-select {
  width:100%; background:var(--surface,var(--bg)); border:1px solid var(--border);
  color:var(--text); padding:6px 10px; border-radius:var(--radius);
  font-size:.82rem; font-family:var(--font-m);
}
.tc-select:focus { border-color:var(--accent); outline:none; }

.tc-range-row { display:flex; align-items:center; gap:10px; }
.tc-range { flex:1; accent-color:var(--accent); }
.tc-range-val { font-family:var(--font-m); font-size:.78rem; color:var(--text-muted); min-width:36px; }

.tc-actions {
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px;
  padding:12px 16px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--panel-bg,rgba(255,255,255,.02));
}

.tc-saved-list { display:flex; flex-direction:column; gap:6px; }
.tc-saved-item { display:flex; gap:6px; align-items:center; }
.tc-saved-item .tc-load-btn { flex:1; text-align:left; }
.tc-empty { color:var(--text-muted); font-size:.78rem; margin:0; }
.tc-code-row {
  display: flex; gap: 6px; align-items: center;
}
.tc-code-input {
  flex: 1; padding: 6px 8px;
  font-family: var(--font-m, monospace); font-size: 0.72rem;
  background: var(--bg, #080808); color: var(--text, #eee);
  border: 1px solid var(--border, #333); border-radius: var(--radius, 4px);
  letter-spacing: 0.5px;
}
.tc-code-input:focus { border-color: var(--accent, #6366f1); outline: none; }
.tc-code-msg {
  font-size: 0.68rem; margin-top: 4px; min-height: 1em;
}
.tc-code-ok { color: #22c55e; }
.tc-code-err { color: #ef4444; }

.tc-preview { border:1px solid var(--border); border-radius:var(--radius); padding:16px; background:var(--panel-bg,rgba(255,255,255,.02)); }
.tc-preview-box { padding:16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); }
.tc-preview-card h3 { font-family:var(--font-h); color:var(--text); margin:0 0 8px; font-size:1rem; }
.tc-preview-card p { color:var(--text-muted); font-size:.85rem; margin:0 0 12px; }
.tc-preview-btns { display:flex; gap:8px; margin-bottom:12px; }
.tc-preview-stats { display:flex; gap:16px; }
.tc-preview-accent { color:var(--accent); font-size:.82rem; font-family:var(--font-m); }
.tc-preview-muted { color:var(--text-muted); font-size:.82rem; font-family:var(--font-m); }

@media (max-width:768px) {
  .tc-grid--colors { grid-template-columns:1fr 1fr; }
  .tc-grid--typo { grid-template-columns:1fr; }
  .tc-actions { flex-direction:column; }
}
@media (max-width:480px) {
  .tc-wrap { padding:16px 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   THEME PREVIEW BAR
═══════════════════════════════════════════════════════════════════ */
.theme-preview-bar {
  position:fixed; bottom:60px; left:50%; transform:translateX(-50%);
  z-index:9999; display:flex; align-items:center; gap:16px;
  padding:10px 20px; border-radius:12px;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(12px);
  border:1px solid var(--accent, #fff); box-shadow:0 4px 24px rgba(0,0,0,0.5);
  font-family:var(--font-m); font-size:.78rem; color:var(--text, #eee);
  max-width:90vw;
}
.theme-preview-name { white-space:nowrap; }
.theme-preview-name strong { color:var(--accent, #fff); }
.theme-preview-actions { display:flex; gap:6px; }

/* ── Skin Cards ── */
.skin-card { border-color: #f59e0b !important; }
.skin-card .tcg-name-bar { background: rgba(245,158,11,0.15); }
.bp-skin-btn.bp-purchase { background: #f59e0b; color: #000; font-weight: 600; }
.bp-skin-btn.bp-activated { background: var(--accent); color: var(--bg); }

/* Toggle switch for themes/skins */
.bp-toggle-switch { display:inline-flex; align-items:center; cursor:pointer; gap:0; background:none; border:none; padding:0; }
.bp-toggle-switch .toggle-track { position:relative; width:36px; height:18px; border-radius:9px; background:var(--border, #333); transition:background .2s; }
.bp-toggle-switch.on .toggle-track { background:#22c55e; }
.bp-toggle-switch .toggle-knob { position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .2s; }
.bp-toggle-switch.on .toggle-knob { left:20px; }
.bp-toggle-switch:hover .toggle-track { filter:brightness(1.3); }
[data-skin] .tcg-card { border-color: var(--skin-card-border, var(--border)); }
[data-skin="matrix-reloaded"] .mc-schematic-hud { opacity: 0.8; }

/* ═══════════════════════════════════════════════════════════════════
   ACTIVITY FEED
═══════════════════════════════════════════════════════════════════ */
.activity-feed-wrap {
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--panel-bg,rgba(255,255,255,.02)); overflow:hidden;
}
.activity-feed-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; border-bottom:1px solid var(--border);
}
.activity-feed-title { font-family:var(--font-h); font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text); }
.activity-feed-toggle { font-size:.7rem; padding:2px 8px; }

.activity-feed { max-height:280px; overflow-y:auto; }
.af-item {
  display:flex; align-items:center; gap:8px; padding:7px 14px;
  border-bottom:1px solid rgba(255,255,255,.03); font-size:.8rem;
  transition:background .1s;
}
.af-item:hover { background:rgba(255,255,255,.02); }
.af-item:last-child { border-bottom:none; }
.af-icon { flex-shrink:0; font-size:.85rem; }
.af-desc { flex:1; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.af-time { flex-shrink:0; font-family:var(--font-m); font-size:.68rem; color:var(--text-muted); }
.af-empty { padding:20px; text-align:center; color:var(--text-muted); font-size:.82rem; }

/* ═══════════════════════════════════════════════════════════════════
   PRESENCE INDICATOR
═══════════════════════════════════════════════════════════════════ */
.presence-indicator { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0.75rem; font-size:0.75rem; color:var(--text-muted); }
.presence-dot {
  width:8px; height:8px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 4px #22c55e; animation:presencePulse 2s ease-in-out infinite;
}
.presence-count { font-family:var(--font-m); font-size:0.7rem; color:var(--text-muted); }
@keyframes presencePulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }

/* ═══════════════════════════════════════════════════════════════════
   AGENT BUSY BADGE
═══════════════════════════════════════════════════════════════════ */
.agent-busy-badge { display:inline-flex; align-items:center; gap:0.25rem; font-size:0.65rem; padding:0.15rem 0.5rem; border-radius:999px; background:rgba(99,102,241,0.15); color:#6366f1; }
.agent-busy-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:#6366f1; animation:presencePulse 1.5s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════════════
   MISSION RUNNING PULSE
═══════════════════════════════════════════════════════════════════ */
.mission-running-pulse { display:inline-flex; align-items:center; gap:0.5rem; }
.mission-running-pulse::before { content:''; width:10px; height:10px; border-radius:50%; background:#6366f1; }

/* ═══════════════════════════════════════════════════════════════════
   ACHIEVEMENT UNLOCK OVERLAY
═══════════════════════════════════════════════════════════════════ */
.achievement-unlock { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.8); animation:achieveFadeIn 0.5s ease-out; }
.achievement-unlock-card { text-align:center; padding:2rem 3rem; background:var(--panel-bg); border:2px solid var(--accent); border-radius:1rem; animation:achieveBounce 0.6s ease-out; }
.achievement-unlock-icon { font-size:3rem; margin-bottom:1rem; }
.achievement-unlock h3 { color:var(--accent); margin-bottom:0.5rem; font-family:var(--font-h); }
.achievement-unlock p { color:var(--text-muted); font-size:0.85rem; }
@keyframes achieveFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes achieveBounce { 0% { transform:scale(0.5); opacity:0; } 60% { transform:scale(1.1); } 100% { transform:scale(1); opacity:1; } }

/* ═══════════════════════════════════════════════════════════════════
   RANK-UP OVERLAY
═══════════════════════════════════════════════════════════════════ */
.rankup-overlay { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.85); animation:achieveFadeIn 0.5s ease-out; }
.rankup-card { text-align:center; padding:2.5rem 3.5rem; background:var(--panel-bg); border:2px solid gold; border-radius:0; animation:achieveBounce 0.6s ease-out; box-shadow:0 0 40px rgba(255,215,0,0.3); }
.rankup-card h2 { color:gold; font-family:var(--font-h); text-transform:uppercase; letter-spacing:0.1em; }
.rankup-card h3 { color:var(--text); margin-top:0.5rem; }
.rankup-card p { color:var(--text-muted); font-size:0.85rem; margin-top:0.5rem; }

/* ═══════════════════════════════════════════════════════════════════
   STREAK DISPLAY
═══════════════════════════════════════════════════════════════════ */
.streak-badge { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.78rem; padding:0.25rem 0.6rem; border-radius:var(--radius); background:rgba(245,158,11,0.12); color:#f59e0b; font-weight:600; }
.streak-badge-fire { font-size:1rem; }

/* ═══════════════════════════════════════════════════════════════════
   WORKFLOW LIST
═══════════════════════════════════════════════════════════════════ */
.wf-wrap { max-width:var(--width-large); margin:0; }
.wf-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.wf-card {
  display:block; position:relative; padding:14px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--panel-bg,rgba(255,255,255,.02));
  text-decoration:none; color:var(--text); transition:border-color .15s;
}
.wf-card:hover { border-color:var(--accent); }
.wf-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.wf-card-name { font-family:var(--font-h); font-size:.9rem; }
.wf-card-count { font-family:var(--font-m); font-size:.7rem; color:var(--text-muted); }
.wf-card-meta { display:flex; gap:12px; font-size:.72rem; color:var(--text-muted); }
.wf-del-btn { position:absolute; top:8px; right:8px; font-size:.7rem; padding:2px 6px; }

/* ═══════════════════════════════════════════════════════════════════
   WORKFLOW EDITOR
═══════════════════════════════════════════════════════════════════ */
.wfe-wrap { height:calc(100vh - 80px); display:flex; flex-direction:column; }
.wfe-toolbar {
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.wfe-name-input {
  flex:1; background:transparent; border:1px solid transparent; color:var(--text);
  font-family:var(--font-h); font-size:1rem; padding:4px 8px; border-radius:var(--radius);
}
.wfe-name-input:focus { border-color:var(--accent); outline:none; }
.wfe-toolbar-right { display:flex; gap:6px; }

.wfe-layout { display:flex; flex:1; min-height:0; }

/* Palette */
.wfe-palette {
  width:140px; flex-shrink:0; padding:12px; border-right:1px solid var(--border);
  overflow-y:auto; display:flex; flex-direction:column; gap:6px;
}
.wfe-palette-title { font-family:var(--font-h); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin:0; }
.wfe-palette-btn {
  display:flex; align-items:center; gap:6px; padding:8px 10px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--panel-bg,rgba(255,255,255,.02)); color:var(--text);
  font-size:.78rem; cursor:pointer; transition:border-color .15s;
}
.wfe-palette-btn:hover { border-color:var(--accent); }
.wfe-palette-icon { font-size:1rem; }
.wfe-sep { border:none; border-top:1px solid var(--border); margin:6px 0; }
.wfe-tool-btn { width:100%; }

/* Canvas area */
.wfe-canvas-wrap {
  flex:1; position:relative; overflow:hidden; background:
    radial-gradient(circle at 1px 1px, var(--border) .5px, transparent 0) 0 0 / 20px 20px;
}
.wfe-canvas { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.wfe-nodes { position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; }

/* Nodes */
.wfe-node {
  position:absolute; width:140px; background:var(--surface,var(--bg));
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 2px 8px rgba(0,0,0,.3); transition:box-shadow .15s, border-color .15s;
  cursor:default; user-select:none;
}
.wfe-node.selected { border-color:var(--accent); box-shadow:0 0 12px var(--glow,rgba(255,255,255,.1)); }
.wfe-node.connecting { border-color:#f59e0b; }
.wfe-node.running { border-color:#6366f1; animation:nodeRun .6s infinite alternate; }
.wfe-node.completed { border-color:#22c55e; }
@keyframes nodeRun { from { box-shadow:0 0 6px #6366f1; } to { box-shadow:0 0 16px #6366f1; } }

.wfe-node-header {
  display:flex; align-items:center; gap:6px; padding:8px 10px;
  border-bottom:2px solid var(--border); cursor:grab; font-size:.78rem;
}
.wfe-node-header:active { cursor:grabbing; }
.wfe-node-icon { font-size:.9rem; }
.wfe-node-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }

.wfe-node-ports { display:flex; justify-content:space-between; padding:6px 10px; }
.wfe-port {
  width:10px; height:10px; border-radius:50%; border:2px solid var(--accent);
  background:var(--bg); cursor:pointer; transition:background .1s;
}
.wfe-port:hover { background:var(--accent); }
.wfe-port-in { margin-left:-16px; }
.wfe-port-out { margin-right:-16px; }

/* Properties */
.wfe-props {
  width:220px; flex-shrink:0; padding:12px; border-left:1px solid var(--border);
  overflow-y:auto;
}
.wfe-props-empty { color:var(--text-muted); font-size:.82rem; }
.wfe-props-inner { display:flex; flex-direction:column; gap:10px; }
.wfe-props-type { font-family:var(--font-h); font-size:.85rem; color:var(--accent); }
.wfe-field { display:flex; flex-direction:column; gap:3px; }
.wfe-field label { font-size:.7rem; color:var(--text-muted); text-transform:uppercase; font-family:var(--font-m); }
.wfe-textarea {
  width:100%; min-height:60px; background:var(--surface,var(--bg)); border:1px solid var(--border);
  color:var(--text); padding:6px 8px; border-radius:var(--radius); font-size:.78rem;
  font-family:var(--font-m); resize:vertical;
}
.wfe-textarea:focus { border-color:var(--accent); outline:none; }
.wfe-props-actions { display:flex; gap:6px; margin-top:8px; }

@media (max-width:768px) {
  .wfe-layout { flex-direction:column; }
  .wfe-palette { width:100%; flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid var(--border); }
  .wfe-props { width:100%; border-left:none; border-top:1px solid var(--border); }
  .wfe-canvas-wrap { min-height:300px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MISSION BOARD (Kanban)
═══════════════════════════════════════════════════════════════════ */
.mb-wrap { padding:24px 0; }
.mb-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; flex-wrap:wrap; gap:12px; }
.mb-title { font-family:var(--font-h); font-size:1.5rem; color:var(--text); margin:0 0 4px; }
.mb-sub { color:var(--text-muted); font-size:.82rem; margin:0; }
.mb-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.mb-board {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
  min-height:400px;
}

.mb-col {
  display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--panel-bg,rgba(255,255,255,.02));
}
.mb-col-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-bottom:2px solid var(--border);
}
.mb-col-title { font-family:var(--font-h); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.mb-col-count { font-family:var(--font-m); font-size:.7rem; color:var(--text-muted); background:rgba(255,255,255,.05);
  padding:2px 6px; border-radius:8px; }

.mb-col-body { flex:1; padding:8px; display:flex; flex-direction:column; gap:6px; min-height:100px; transition:background .15s; }
.mb-col-body.mb-drop-target { background:rgba(255,255,255,.05); outline:2px dashed var(--accent); outline-offset:-4px; }

.mb-card {
  padding:10px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface,var(--bg)); cursor:grab; transition:border-color .15s, opacity .15s, transform .1s;
}
.mb-card:hover { border-color:var(--accent); }
.mb-card.mb-dragging { opacity:.4; transform:scale(.95); }
.mb-card-compact { padding:6px 10px; display:flex; justify-content:space-between; align-items:center; }

.mb-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:6px; margin-bottom:4px; }
.mb-card-title { font-size:.82rem; color:var(--text); font-weight:500; }
.mb-card-pri {
  font-family:var(--font-m); font-size:.62rem; text-transform:uppercase; padding:2px 6px;
  border-radius:3px; letter-spacing:.04em; white-space:nowrap;
}
.pri-high { background:rgba(239,68,68,.15); color:#ef4444; }
.pri-normal { background:rgba(255,255,255,.05); color:var(--text-muted); }
.pri-low { background:rgba(34,197,94,.1); color:#22c55e; }

.mb-card-meta { display:flex; justify-content:space-between; font-size:.72rem; color:var(--text-muted); }
.mb-card-agent { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.mb-empty { text-align:center; padding:20px 8px; color:var(--text-muted); font-size:.78rem; }

@media (max-width:900px) {
  .mb-board { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px) {
  .mb-board { grid-template-columns:1fr; }
  .mb-header { flex-direction:column; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE POLISH — Touch, Gestures, Landscape
═══════════════════════════════════════════════════════════════════ */

/* Touch feedback for interactive elements */
@media (hover:none) and (pointer:coarse) {
  .side-link, .tab, .btn, .cmd-result, .mb-card,
  .widget-card, .agents-card, .fleet-card {
    -webkit-tap-highlight-color: rgba(255,255,255,.08);
  }
  .side-link:active, .tab:active, .btn:active,
  .cmd-result:active, .mb-card:active {
    transform: scale(.97);
    transition: transform .08s ease;
  }
}

/* Smooth sidebar drawer transition */
.app-sidebar {
  will-change: transform;
  -webkit-overflow-scrolling: touch;
}

/* Full-screen command palette on mobile */
@media (max-width:768px) {
  .cmd-palette { padding-top:0; align-items:stretch; }
  .cmd-palette-box {
    max-width:100vw; width:100vw; margin:0;
    border-radius:0; max-height:100vh; height:100vh;
    display:flex; flex-direction:column;
  }
  .cmd-palette-box .cmd-results { flex:1; overflow-y:auto; }
  #cmd-input { font-size:16px; min-height:48px; } /* Prevent iOS zoom */
  .cmd-result { min-height:48px; padding:12px 16px; }
}

/* Landscape-specific adjustments */
@media (max-height:500px) and (orientation:landscape) {
  .side-header { padding:8px 12px; }
  .app-main { padding-top:12px; padding-bottom:60px; }
  .app-tabbar { height:52px; }
  .tab { font-size:.5rem; gap:2px; }
  .widget-card { padding:10px; }
  .mc-schematic-hud { min-height:100px; }
}

/* Better widget layout on tablet */
@media (min-width:769px) and (max-width:1024px) {
  .mc-canvas-main { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
  .widget-card[data-widget="stats"] { grid-column:1 / -1; }
  .widget-card[data-widget="missions"] { grid-column:1 / -1; }
  .widget-card[data-widget="comms"] { grid-column:1 / -1; }
  .widget-card[data-widget="log"] { grid-column:1 / -1; }
  .mc-schematic-hud { min-height:110px; }
}
@media (max-width:768px) {
  .mc-schematic-hud { min-height:100px; }
  .mc-slot { width:72px; height:92px; }
  .mc-slot-label { font-size:.5rem; }
  .mc-bp-mini { flex:0 0 72px; width:72px; height:92px; }
}

/* Prevent horizontal overflow everywhere on mobile */
@media (max-width:768px) {
  .app-main { overflow-x:hidden; }
  .bridge-wrap, .log-wrap, .log-view-wrap, .dock-wrap, .mb-wrap, .tc-wrap, .wfe-wrap,
  .agents-wrap, .fleet-wrap, .bp-wrap, .ana-wrap,
  .missions-wrap { overflow-x:hidden; max-width:100vw; }

  /* Ensure filter inputs don't overflow */
  .filter-select, .filter-input { max-width:100%; box-sizing:border-box; }

  /* Mission board cards: easier grab on mobile */
  .mb-card { padding:14px; }
  .mb-card-title { font-size:.88rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   QUICK NOTES PANEL
═══════════════════════════════════════════════════════════════════ */
.qn-panel {
  position:fixed; right:-360px; top:0; bottom:0;
  width:340px; max-width:90vw;
  background:var(--panel-bg, var(--bg));
  border-left:1px solid var(--border);
  z-index:250; display:flex; flex-direction:column;
  transition:right .25s ease;
  backdrop-filter:blur(18px);
}
.qn-panel.open { right:0; }

.qn-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; border-bottom:1px solid var(--border);
}
.qn-title { font-family:var(--font-h); font-size:.85rem; color:var(--text); letter-spacing:.04em; text-transform:uppercase; }
.qn-header-actions { display:flex; gap:6px; }
.qn-btn {
  background:none; border:1px solid var(--border); color:var(--text-muted);
  padding:4px 10px; border-radius:var(--radius); font-size:.72rem;
  cursor:pointer; font-family:var(--font-m); transition:color .15s, border-color .15s;
}
.qn-btn:hover { color:var(--text); border-color:var(--accent); }
.qn-close { font-size:1.1rem; padding:2px 8px; border:none; }

.qn-editor {
  flex:1; resize:none; padding:14px;
  background:transparent; border:none; color:var(--text);
  font-family:var(--font-m); font-size:.82rem; line-height:1.6;
  outline:none;
}
.qn-editor::placeholder { color:var(--text-muted); }

.qn-footer {
  display:flex; justify-content:space-between; padding:8px 14px;
  font-size:.65rem; color:var(--text-muted); font-family:var(--font-m);
  border-top:1px solid var(--border);
}

@media (max-width:480px) {
  .qn-panel { width:100vw; max-width:100vw; right:-100vw; }
}

/* ═══════════════════════════════════════════════════════════════════
   FAVORITES / BOOKMARKS
═══════════════════════════════════════════════════════════════════ */
.sidebar-favorites { padding:0 8px; }
.fav-section-label {
  font-family:var(--font-m); font-size:.6rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted); padding:8px 12px 4px;
}
.fav-link { position:relative; }
.fav-link .fav-remove {
  display:none; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:.9rem; padding:2px 6px; border-radius:var(--radius);
  line-height:1;
}
.fav-link:hover .fav-remove { display:block; }
.fav-link .fav-remove:hover { color:#ef4444; background:rgba(239,68,68,.1); }

/* Favorite button active state (filled star) */
#btn-favorite.active svg { fill:var(--accent); color:var(--accent); }
#btn-favorite { transition:transform .15s; }
#btn-favorite:active { transform:scale(.85); }

/* ═══════════════════════════════════════════════════════════════════
   RARITY SYSTEM — Badges + Premium Card Effects
═══════════════════════════════════════════════════════════════════ */
.rarity-badge {
  font-family:var(--font-m); font-size:.48rem; letter-spacing:.12em;
  padding:2px 8px; border:1px solid; text-transform:uppercase;
  border-radius:var(--radius); display:inline-block; line-height:1.4;
}
.rarity-common   { color:#94a3b8; border-color:#94a3b840; }
.rarity-rare     { color:#6366f1; border-color:#6366f140; }
.rarity-epic     { color:#a855f7; border-color:#a855f740; }
.rarity-legendary{ color:#f59e0b; border-color:#f59e0b40; }
.rarity-mythic   { color:#ff2d55; border-color:#ff2d5540; animation: mythic-badge-glow 6s linear infinite; }

/* Agent Progression Badge */
.agent-prog-badge { font-family:var(--font-m); font-size:.6rem; padding:1px 6px; border-radius:var(--radius); background:var(--accent2,#6366f1); color:#fff; opacity:.85; margin-left:auto; }

/* Card rarity borders — applied via data-rarity attribute */
.tcg-card[data-rarity="common"],
.tcg-card-grid[data-rarity="common"],
.tcg-card-compact[data-rarity="common"]    { border-color:#94a3b830; }
.tcg-card[data-rarity="rare"],
.tcg-card-grid[data-rarity="rare"],
.tcg-card-compact[data-rarity="rare"]      { border-color:#6366f140; box-shadow:0 0 8px rgba(99,102,241,.12); }
.tcg-card[data-rarity="epic"],
.tcg-card-grid[data-rarity="epic"],
.tcg-card-compact[data-rarity="epic"]      { border-color:#a855f740; box-shadow:0 0 12px rgba(168,85,247,.15); }
.tcg-card[data-rarity="legendary"],
.tcg-card-grid[data-rarity="legendary"],
.tcg-card-compact[data-rarity="legendary"] { border-color:#f59e0b; box-shadow:0 0 16px rgba(245,158,11,.3); }

/* Mythic RGB LED border */
@keyframes mythic-rgb-border {
  0%   { border-color:#ff2d55; box-shadow:0 0 12px #ff2d5560, 0 0 24px #ff2d5530; }
  16%  { border-color:#ff6b2d; box-shadow:0 0 12px #ff6b2d60, 0 0 24px #ff6b2d30; }
  33%  { border-color:#ffd32d; box-shadow:0 0 12px #ffd32d60, 0 0 24px #ffd32d30; }
  50%  { border-color:#2dff6b; box-shadow:0 0 12px #2dff6b60, 0 0 24px #2dff6b30; }
  66%  { border-color:#2d9fff; box-shadow:0 0 12px #2d9fff60, 0 0 24px #2d9fff30; }
  83%  { border-color:#a82dff; box-shadow:0 0 12px #a82dff60, 0 0 24px #a82dff30; }
  100% { border-color:#ff2d55; box-shadow:0 0 12px #ff2d5560, 0 0 24px #ff2d5530; }
}
@keyframes mythic-text-glow {
  0%   { color:#ff2d55; text-shadow:0 0 6px #ff2d5540; }
  16%  { color:#ff6b2d; text-shadow:0 0 6px #ff6b2d40; }
  33%  { color:#ffd32d; text-shadow:0 0 6px #ffd32d40; }
  50%  { color:#2dff6b; text-shadow:0 0 6px #2dff6b40; }
  66%  { color:#2d9fff; text-shadow:0 0 6px #2d9fff40; }
  83%  { color:#a82dff; text-shadow:0 0 6px #a82dff40; }
  100% { color:#ff2d55; text-shadow:0 0 6px #ff2d5540; }
}
@keyframes mythic-badge-glow {
  0%   { color:#ff2d55; border-color:#ff2d55; text-shadow:0 0 6px #ff2d5540; }
  16%  { color:#ff6b2d; border-color:#ff6b2d; text-shadow:0 0 6px #ff6b2d40; }
  33%  { color:#ffd32d; border-color:#ffd32d; text-shadow:0 0 6px #ffd32d40; }
  50%  { color:#2dff6b; border-color:#2dff6b; text-shadow:0 0 6px #2dff6b40; }
  66%  { color:#2d9fff; border-color:#2d9fff; text-shadow:0 0 6px #2d9fff40; }
  83%  { color:#a82dff; border-color:#a82dff; text-shadow:0 0 6px #a82dff40; }
  100% { color:#ff2d55; border-color:#ff2d55; text-shadow:0 0 6px #ff2d5540; }
}
.tcg-card[data-rarity="mythic"],
.tcg-card-grid[data-rarity="mythic"],
.tcg-card-compact[data-rarity="mythic"] {
  border-width:2px;
  animation: mythic-rgb-border 6s linear infinite;
}
/* Mythic badge — applied directly via class (no inline style conflict) */
.mythic-badge-animated {
  animation: mythic-badge-glow 6s linear infinite;
  border:1px solid #ff2d55;
}

/* Card tier borders — spaceship cards (data-tier) */
.tcg-card[data-tier="scout"],
.tcg-card-grid[data-tier="scout"],
.tcg-card-compact[data-tier="scout"]             { border-color:#94a3b830; }
.tcg-card[data-tier="frigate"],
.tcg-card-grid[data-tier="frigate"],
.tcg-card-compact[data-tier="frigate"]           { border-color:#22c55e40; box-shadow:0 0 8px rgba(34,197,94,.12); }
.tcg-card[data-tier="cruiser"],
.tcg-card-grid[data-tier="cruiser"],
.tcg-card-compact[data-tier="cruiser"]           { border-color:#6366f140; box-shadow:0 0 8px rgba(99,102,241,.12); }
.tcg-card[data-tier="dreadnought"],
.tcg-card-grid[data-tier="dreadnought"],
.tcg-card-compact[data-tier="dreadnought"]       { border-color:#a855f740; box-shadow:0 0 12px rgba(168,85,247,.15); }
.tcg-card[data-tier="flagship"],
.tcg-card-grid[data-tier="flagship"],
.tcg-card-compact[data-tier="flagship"]          { border-color:#f59e0b40; box-shadow:0 0 16px rgba(245,158,11,.2); }


/* ═══════════════════════════════════════════════════════════════════
   COMPUTING — Spaceship Slot Formation + Drag-and-Drop
═══════════════════════════════════════════════════════════════════ */
.computing-wrap {
  display:grid; grid-template-columns:1fr; gap:20px;
}

/* Inventory — dock style */
.computing-inventory {
  display:flex; flex-direction:column; gap:8px;
  padding:12px 0;
}
.computing-inv-header {
  display:flex; align-items:center; gap:10px; padding:0 4px;
}
.computing-inv-title {
  font-family:var(--font-m); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-muted); margin:0; white-space:nowrap;
}
.computing-inv-filter {
  display:flex; gap:4px; flex-wrap:wrap; margin-left:auto;
}
.computing-inv-filter .bp-cat-btn { font-size:.52rem; padding:2px 8px; }
#computing-inv-list {
  display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  gap:10px; padding:10px 4px 12px; scroll-snap-type:x mandatory;
  border:1px solid var(--border); border-radius:16px;
  background:var(--panel-bg,rgba(255,255,255,.02));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
#computing-inv-list::-webkit-scrollbar { height:4px; }
#computing-inv-list::-webkit-scrollbar-track { background:transparent; }
#computing-inv-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.computing-inv-card {
  flex:0 0 auto; scroll-snap-align:start;
  width:120px; height:140px; border:2px solid var(--border);
  border-radius:12px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  cursor:grab; padding:6px 4px;
  transition:border-color .2s, transform .15s, opacity .15s, box-shadow .2s;
}
.computing-inv-card:hover {
  border-color:var(--accent); transform:translateY(-4px) scale(1.04);
  box-shadow:0 6px 20px rgba(255,255,255,.06);
}
.computing-inv-card:active { cursor:grabbing; transform:scale(.95); }
.computing-inv-card.dragging { opacity:.35; transform:scale(.92); border-color:var(--accent); }
.computing-inv-card[data-rarity="Common"]   { border-color:#94a3b840; }
.computing-inv-card[data-rarity="Rare"]     { border-color:#6366f140; }
.computing-inv-card[data-rarity="Epic"]     { border-color:#a855f740; }
.computing-inv-card[data-rarity="Legendary"]{ border-color:#f59e0b40; }
.computing-inv-card[data-rarity="Mythic"]   { animation: mythic-rgb-border 6s linear infinite; border-width:2px; }
.computing-inv-card[data-rarity="Common"]:hover   { border-color:#94a3b8; }
.computing-inv-card[data-rarity="Rare"]:hover     { border-color:#6366f1; }
.computing-inv-card[data-rarity="Epic"]:hover     { border-color:#a855f7; }
.computing-inv-card[data-rarity="Legendary"]:hover{ border-color:#f59e0b; }
.computing-inv-card[data-rarity="Mythic"]:hover   { animation: mythic-rgb-border 3s linear infinite; }
.computing-inv-card.assigned { opacity:.4; pointer-events:none; border-style:solid; }
.computing-inv-avatar {
  width:32px; height:32px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:.56rem;
  font-weight:700; color:#fff; flex-shrink:0;
}
.computing-inv-name {
  font-family:var(--font-b); font-size:.6rem; font-weight:600;
  text-align:center; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; max-width:100px;
}
.computing-inv-role {
  font-family:var(--font-m); font-size:.5rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-muted); text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100px;
}

/* Formation panel */
.computing-formation {
  border:1px solid var(--border); background:var(--panel-bg);
  border-radius:var(--radius); padding:24px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.computing-formation-header {
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 4px; width:100%; align-self:flex-start;
}
.bridge-launch-btn.launched {
  background:transparent; border:1px solid var(--accent); color:var(--accent);
}
.bridge-launch-btn.launched:hover { opacity:1; border-color:var(--accent2,var(--accent)); }
.bridge-launch-icon { margin-right:4px; }
.computing-formation-title {
  font-family:var(--font-h); font-size:.88rem; font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.computing-class-badge {
  font-family:var(--font-m); font-size:.5rem; letter-spacing:.1em;
  padding:2px 8px; border-radius:var(--radius);
  text-transform:uppercase;
}
.computing-class-badge.badge-free { color:#22c55e; border:1px solid #22c55e40; }
.computing-class-badge.badge-pro  { color:#6366f1; border:1px solid #6366f140; }
.computing-class-badge.badge-elite{ color:#f59e0b; border:1px solid #f59e0b40; }

/* Slot grid */
.slot-grid {
  display:grid; gap:14px; justify-items:center; width:100%;
}
.slot-grid-2 { grid-template-columns:repeat(2, 1fr); max-width:300px; }
.slot-grid-3 { grid-template-columns:repeat(3, 1fr); max-width:420px; }
.slot-grid-4 { grid-template-columns:repeat(4, 1fr); max-width:560px; }
.slot-grid-5 { grid-template-columns:repeat(5, 1fr); max-width:700px; }
.slot-grid-6 { grid-template-columns:repeat(6, 1fr); max-width:840px; }
.slot-grid-7 { grid-template-columns:repeat(4, 1fr); max-width:560px; }
.slot-grid-8 { grid-template-columns:repeat(4, 1fr); max-width:560px; }
.slot-grid-9 { grid-template-columns:repeat(5, 1fr); max-width:700px; }
.slot-grid-10 { grid-template-columns:repeat(5, 1fr); max-width:700px; }
.slot-grid-11 { grid-template-columns:repeat(6, 1fr); max-width:840px; }
.slot-grid-12 { grid-template-columns:repeat(6, 1fr); max-width:840px; }

/* Individual slot */
.ship-slot {
  width:120px; height:140px; border:2px dashed var(--border);
  border-radius:12px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  transition:border-color .2s, box-shadow .2s, background .2s;
  position:relative;
}
.ship-slot-rare      { border-color:#6366f125; }
.ship-slot-epic      { border-color:#a855f725; }
.ship-slot-legendary { border-color:#f59e0b25; }

.ship-slot-label {
  font-family:var(--font-m); font-size:.5rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-muted);
}
.ship-slot-max {
  font-family:var(--font-m); font-size:.42rem; letter-spacing:.08em;
  padding:1px 6px; border:1px solid; text-transform:uppercase;
  border-radius:3px;
}
.ship-slot-empty-icon {
  font-size:1.2rem; opacity:.25; margin-bottom:2px;
}

/* Drag states */
.ship-slot.drag-valid {
  border-color:#22c55e; border-style:solid;
  box-shadow:0 0 14px rgba(34,197,94,.25);
  background:rgba(34,197,94,.04);
}
.ship-slot.drag-invalid {
  border-color:#ef4444; animation:slot-shake .35s;
}
@keyframes slot-shake {
  0%,100% { transform:translateX(0); }
  25%     { transform:translateX(-5px); }
  75%     { transform:translateX(5px); }
}

/* Filled slot — bright rarity border */
.ship-slot-filled {
  border-style:solid; cursor:default;
}
.ship-slot-filled[data-agent-rarity="Common"]   { border-color:#94a3b8; }
.ship-slot-filled[data-agent-rarity="Rare"]     { border-color:#6366f1; }
.ship-slot-filled[data-agent-rarity="Epic"]     { border-color:#a855f7; }
.ship-slot-filled[data-agent-rarity="Legendary"]{ border-color:#f59e0b; box-shadow:0 0 12px rgba(245,158,11,.2); }
.slot-agent-mini {
  display:flex; flex-direction:column; align-items:center;
  gap:3px; width:100%; padding:6px 4px;
}
.slot-agent-avatar {
  width:32px; height:32px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:.56rem;
  font-weight:700; color:#fff;
}
.slot-agent-name {
  font-family:var(--font-b); font-size:.6rem; font-weight:600;
  text-align:center; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; max-width:100px;
}
.slot-undock-btn {
  position:absolute; top:4px; right:4px; width:18px; height:18px;
  border:none; background:rgba(239,68,68,.12); color:#ef4444;
  font-size:.5rem; cursor:pointer; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s;
}
.ship-slot:hover .slot-undock-btn { opacity:1; }
.slot-undock-btn:hover { background:rgba(239,68,68,.25); }

/* Locked slot */
.ship-slot-locked {
  opacity:.4; pointer-events:none; position:relative;
}
.ship-slot-locked::after {
  content:attr(data-lock-label); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-m); font-size:.52rem; letter-spacing:.1em;
  color:var(--text-muted); background:rgba(0,0,0,.3);
  border-radius:12px;
}

/* Class selector in modal */
.class-selector { display:flex; gap:10px; margin:12px 0; }
.class-option {
  flex:1; border:1px solid var(--border); border-radius:var(--radius);
  padding:12px; cursor:pointer; text-align:center;
  transition:border-color .15s, box-shadow .15s;
}
.class-option:hover { border-color:var(--border-hi); }
.class-option.selected { border-color:var(--accent); box-shadow:0 0 0 2px var(--glow); }
.class-option-name {
  font-family:var(--font-h); font-size:.78rem; font-weight:700; margin-bottom:4px;
}
.class-option-tier {
  font-family:var(--font-m); font-size:.5rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-muted);
}
.class-option-slots {
  font-size:.62rem; color:var(--text-muted); margin-top:4px;
}

/* Mobile responsive */
@media (max-width:768px) {
  .computing-wrap { grid-template-columns:1fr; }
  .computing-inv-card { width:100px; height:120px; }
  .slot-grid-3 { grid-template-columns:repeat(3, 1fr); max-width:340px; }
  .slot-grid-4 { grid-template-columns:repeat(2, 1fr); max-width:280px; }
  .slot-grid-5 { grid-template-columns:repeat(3, 1fr); max-width:340px; }
  .slot-grid-6 { grid-template-columns:repeat(3, 1fr); max-width:420px; }
  .slot-grid-7 { grid-template-columns:repeat(3, 1fr); max-width:340px; }
  .slot-grid-8 { grid-template-columns:repeat(3, 1fr); max-width:340px; }
  .slot-grid-9 { grid-template-columns:repeat(3, 1fr); max-width:340px; }
  .slot-grid-10 { grid-template-columns:repeat(3, 1fr); max-width:340px; }
  .slot-grid-11 { grid-template-columns:repeat(4, 1fr); max-width:440px; }
  .slot-grid-12 { grid-template-columns:repeat(4, 1fr); max-width:440px; }
  .ship-slot { width:100px; height:120px; }
  .class-selector { flex-direction:column; }
}

/* ── Security View ──────────────────────────────────────────── */
.security-wrap { max-width:var(--width-large); margin:0 auto; display:flex; flex-direction:column; gap:24px; }
.security-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.security-title { font-family:var(--font-d); font-size:1.2rem; font-weight:700; margin:0; }
.security-sub { font-family:var(--font-m); font-size:.62rem; letter-spacing:.1em; color:var(--text-muted); margin:4px 0 0 0; }
.security-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border, #333);
  margin-bottom: 4px;
}
.security-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: none; border: none;
  color: var(--text-muted, #888);
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.security-tab:hover { color: var(--text, #eee); }
.security-tab--active {
  color: var(--accent, #6366f1);
  border-bottom-color: var(--accent, #6366f1);
}
.security-tab-content { display: flex; flex-direction: column; gap: 24px; }
.security-header-stats { display: flex; gap: 20px; flex-wrap: wrap; }

.security-stats { display:flex; gap:20px; flex-wrap:wrap; }
.security-stat { display:flex; align-items:center; gap:6px; }
.security-stat-num { font-family:var(--font-d); font-size:1rem; font-weight:700; }
.security-stat-label { font-family:var(--font-m); font-size:.48rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }

.security-section { display:flex; flex-direction:column; padding:16px; }
.security-section-title { font-family:var(--font-d); font-size:1rem; font-weight:700; margin:0 0 2px; display:flex; align-items:center; gap:6px; }

.security-score-section { display:flex; align-items:center; gap:32px; padding:20px; background:var(--panel-bg); border:var(--border-width) solid var(--border); border-radius:var(--radius); flex-wrap:wrap; }
.security-score-ring { position:relative; width:120px; height:120px; flex-shrink:0; }
.score-svg { width:100%; height:100%; }
.score-arc { transition:stroke-dashoffset .6s ease, stroke .3s ease; }
.score-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.score-grade { font-family:var(--font-d); font-size:1.8rem; font-weight:800; line-height:1; }
.score-num { font-family:var(--font-m); font-size:.55rem; color:var(--text-muted); letter-spacing:.08em; }
.security-score-detail { flex:1; min-width:200px; }
.score-breakdown { display:flex; flex-wrap:wrap; gap:6px; }
.score-tag { font-family:var(--font-m); font-size:.55rem; padding:3px 8px; border-radius:var(--radius); transition:background .3s, color .3s; }

.security-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.security-card {
  background:var(--panel-bg); border:var(--border-width) solid var(--border); border-radius:var(--radius);
  padding:14px; transition:border-color .2s;
}
.security-card:hover { border-color:var(--accent); }
.security-card-empty { grid-column:1 / -1; text-align:center; padding:24px; }
.security-card-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.security-card-header strong { font-family:var(--font-d); font-size:.85rem; }
.security-card-body { margin-top:10px; display:flex; flex-direction:column; gap:5px; }
.perm-row { display:flex; justify-content:space-between; align-items:center; font-size:.78rem; }
.perm-label { color:var(--text-muted); font-family:var(--font-m); font-size:.6rem; letter-spacing:.06em; }
.perm-val { font-family:var(--font-m); font-size:.68rem; font-weight:600; }

.toggle-switch { position:relative; display:inline-block; width:36px; height:20px; cursor:pointer; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:var(--border); border-radius:20px; transition:background .2s; }
.toggle-slider::before { content:''; position:absolute; width:14px; height:14px; left:3px; top:3px; background:var(--text); border-radius:50%; transition:transform .2s; }
.toggle-switch input:checked + .toggle-slider { background:var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(16px); background:#fff; }

.security-events { display:flex; flex-direction:column; gap:2px; }
.security-event {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border:var(--border-width) solid var(--border); border-radius:var(--radius);
  background:var(--panel-bg); font-size:.82rem;
}
.sev-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.event-msg { flex:1; font-family:var(--font-b); }
.event-time { font-family:var(--font-m); font-size:.55rem; color:var(--text-muted); white-space:nowrap; letter-spacing:.06em; }

.security-checklist { display:flex; flex-direction:column; gap:4px; }
.checklist-item {
  display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer;
  border:var(--border-width) solid var(--border); border-radius:var(--radius);
  background:var(--panel-bg); transition:border-color .2s;
}
.checklist-item:hover { border-color:var(--accent); }
.checklist-item input[type="checkbox"] { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
.checklist-label { flex:1; font-size:.82rem; font-family:var(--font-b); }

.badge-ok { background:rgba(46,204,113,.15); color:#2ecc71; }
.badge-warn { background:rgba(232,163,46,.15); color:#e8a32e; }

@media (max-width:600px) {
  .security-score-section { flex-direction:column; align-items:center; text-align:center; }
  .security-grid { grid-template-columns:1fr; }
}

/* ── Blueprint Connect Integration Button ── */
.bp-connect-btn { background:transparent; border:1px solid var(--accent); color:var(--accent); font-size:.7rem; padding:.25rem .5rem; border-radius:var(--radius); cursor:pointer; transition:all .2s; }
.bp-connect-btn:hover { background:var(--accent); color:var(--bg); }
.bp-connect-btn.connected { background:var(--accent); color:var(--bg); opacity:.85; }

/* ═══════════════════════════════════════════════════════════════════
   SHIP'S LOG VIEW
═══════════════════════════════════════════════════════════════════ */
.log-view-wrap { padding:0; }
.slog-entries { display:flex; flex-direction:column; gap:8px; padding:4px 0; }
.slog-entry {
  padding:12px 16px; border-radius:var(--radius); border:1px solid var(--border);
  background:var(--panel-bg,rgba(255,255,255,.02)); transition:border-color .2s;
}
.slog-entry:hover { border-color:var(--border-hi,var(--accent)); }
.slog-entry-header {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px;
}
.slog-role-badge {
  font-family:var(--font-m); font-size:.55rem; letter-spacing:.1em;
  padding:2px 8px; border-radius:3px; font-weight:600; text-transform:uppercase;
}
.slog-role-user { border-color:var(--accent)40; }
.slog-role-user .slog-role-badge,
.slog-role-badge.slog-role-user { background:var(--accent)20; color:var(--accent); }
.slog-role-agent { border-color:#6366f140; }
.slog-role-agent .slog-role-badge,
.slog-role-badge.slog-role-agent { background:#6366f120; color:#6366f1; }
.slog-role-system { border-color:var(--text-muted)30; }
.slog-role-system .slog-role-badge,
.slog-role-badge.slog-role-system { background:rgba(255,255,255,.05); color:var(--text-muted); }
.slog-agent-name { font-weight:600; font-size:.82rem; color:var(--text); }
.slog-time { font-size:.68rem; color:var(--text-muted); font-family:var(--font-m); margin-left:auto; }
.slog-meta-badges { display:flex; gap:6px; align-items:center; }
.slog-source { font-family:var(--font-m); font-size:.5rem; letter-spacing:.08em; padding:1px 6px; border-radius:3px; }
.slog-source-live { background:#22c55e20; color:#22c55e; }
.slog-source-mock { background:#f59e0b20; color:#f59e0b; }
.slog-model { font-family:var(--font-m); font-size:.58rem; color:var(--text-muted); }
.slog-tokens, .slog-duration { font-family:var(--font-m); font-size:.55rem; color:var(--text-muted); opacity:.7; }
.slog-entry-content {
  font-size:.82rem; line-height:1.5; color:var(--text); white-space:pre-wrap; word-break:break-word;
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH MODAL — Inline sign-in from any view
═══════════════════════════════════════════════════════════════════ */
.auth-modal-overlay {
  position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
.auth-modal-overlay.open { display:flex; }
.auth-modal {
  background:var(--bg-alt,#111); border:1px solid var(--border);
  border-radius:var(--radius); padding:2rem; max-width:380px; width:90%;
  position:relative;
}
.auth-modal-close {
  position:absolute; top:12px; right:12px; background:none; border:none;
  color:var(--text-muted); cursor:pointer; font-size:1.2rem;
}
.auth-modal-close:hover { color:var(--text); }
.auth-modal h2 { font-family:var(--font-h); font-size:1.1rem; margin:0 0 .5rem 0; color:var(--text); text-align:center; }
.auth-modal .auth-sub { font-size:.75rem; color:var(--text-muted); text-align:center; margin:0 0 1.25rem 0; }
.auth-modal .auth-tabs { display:flex; gap:4px; margin-bottom:1rem; }
.auth-modal .auth-tab {
  flex:1; padding:.5rem; border:1px solid var(--border); border-radius:var(--radius);
  background:transparent; color:var(--text-muted); cursor:pointer; font-family:var(--font-m);
  font-size:.72rem; text-align:center; transition:all .2s;
}
.auth-modal .auth-tab.active { background:var(--accent)20; border-color:var(--accent); color:var(--accent); }
.auth-modal .auth-footer { text-align:center; font-size:.58rem; color:var(--text-muted); font-family:var(--font-m); margin-top:1rem; letter-spacing:.08em; }
.auth-link { background:none; border:none; color:var(--text-muted); font-size:.75rem; cursor:pointer; padding:.25rem 0; width:100%; text-align:center; font-family:var(--font-b); }
.auth-link:hover { color:var(--accent); text-decoration:underline; }

/* ── Token Gauge Widget ── */
.token-gauge { display:flex; flex-direction:column; gap:.75rem; }
.token-gauge-bar { width:100%; height:12px; background:var(--bg-alt, #1a1a2e); border-radius:6px; overflow:hidden; border:1px solid var(--border); }
.token-gauge-fill { height:100%; border-radius:6px; transition:width .6s ease; }
.token-gauge-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:.5rem; }
.token-stat { display:flex; flex-direction:column; align-items:center; gap:.15rem; }
.token-stat-val { font-family:var(--font-m); font-size:.85rem; font-weight:700; color:var(--text); }
.token-stat-label { font-size:.65rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
@media(max-width:480px) { .token-gauge-stats { grid-template-columns:repeat(2, 1fr); } }

/* ── Token Purchase Modal ── */
.token-modal-overlay { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); animation:fadeIn .2s ease; }
.token-modal { background:var(--panel-bg, #0d0d1a); border:1px solid var(--border); border-radius:var(--radius, 8px); padding:2rem; max-width:520px; width:92%; box-shadow:0 8px 32px rgba(0,0,0,.4); }
.token-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.75rem; }
.token-modal-header h2 { margin:0; font-family:var(--font-h); font-size:1.3rem; color:var(--text); }
.token-modal-close { background:none; border:none; color:var(--text-muted); font-size:1.5rem; cursor:pointer; padding:0 .25rem; line-height:1; }
.token-modal-close:hover { color:var(--accent); }
.token-modal-desc { font-size:.82rem; color:var(--text-muted); margin-bottom:1.25rem; }
.token-packs { display:flex; flex-direction:column; gap:.75rem; }
.token-pack { position:relative; display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:1.1rem 1rem; border:1px solid var(--border); border-radius:var(--radius, 6px); background:var(--bg-alt, #111); cursor:pointer; transition:border-color .2s, box-shadow .2s; }
.token-pack:hover { border-color:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb, 100,200,255),.15); }
.token-pack--featured { border-color:var(--accent2, var(--accent)); }
.token-pack-tag { position:absolute; top:-8px; right:12px; background:var(--accent); color:var(--bg); font-size:.6rem; font-weight:700; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:.05em; }
.token-pack-name { font-family:var(--font-h); font-size:.95rem; color:var(--text); font-weight:600; }
.token-pack-tokens { font-family:var(--font-m); font-size:.8rem; color:var(--text-muted); }
.token-pack-price { font-family:var(--font-m); font-size:1.15rem; color:var(--accent); font-weight:700; }
.token-pack--loading { opacity:.6; pointer-events:none; }
.token-pack--loading::after { content:'Processing...'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.5); border-radius:var(--radius, 6px); color:var(--text); font-size:.8rem; }
.token-modal-footer { font-size:.7rem; color:var(--text-muted); text-align:center; margin-top:1rem; }
.btn-buy-tokens { background:var(--accent); color:var(--bg); border:none; font-weight:600; font-size:.8rem; cursor:pointer; }
.btn-buy-tokens:hover { opacity:.85; }

/* ── Spaceship Upgrade Modal ── */
.upgrade-modal-overlay { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); opacity:0; transition:opacity .2s ease; }
.upgrade-modal-overlay.open { opacity:1; }
.upgrade-modal { background:var(--panel-bg, #0d0d1a); border:1px solid var(--border); border-radius:var(--radius, 8px); padding:2rem; max-width:720px; width:94%; max-height:85vh; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,.4); }
.upgrade-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.upgrade-modal-header h2 { margin:0; font-family:var(--font-h); font-size:1.3rem; color:var(--text); }
.upgrade-modal-close { background:none; border:none; color:var(--text-muted); font-size:1.5rem; cursor:pointer; padding:0 .25rem; line-height:1; }
.upgrade-modal-close:hover { color:var(--accent); }
.upgrade-modal-desc { font-size:.82rem; color:var(--text-muted); margin-bottom:1rem; }
.upgrade-modal-current { display:flex; align-items:center; gap:10px; padding:.75rem 1rem; background:var(--bg-alt, #111); border:1px solid var(--border); border-radius:var(--radius, 6px); margin-bottom:1.25rem; }
.upgrade-current-label { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); }
.upgrade-current-name { font-family:var(--font-h); font-size:.95rem; color:var(--accent); font-weight:600; }
.upgrade-current-slots { font-size:.78rem; color:var(--text-muted); margin-left:auto; }
.upgrade-tier-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:.75rem; margin-bottom:1rem; }
.upgrade-tier-card { display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:1rem .75rem; border:1px solid var(--border); border-radius:var(--radius, 6px); background:var(--bg-alt, #111); text-align:center; transition:border-color .2s, box-shadow .2s; }
.upgrade-tier-card:hover { border-color:var(--tier-color, var(--accent)); box-shadow:0 0 12px color-mix(in srgb, var(--tier-color, var(--accent)) 25%, transparent); }
.upgrade-tier-current { border-color:var(--tier-color, var(--accent)); background:color-mix(in srgb, var(--tier-color, var(--accent)) 8%, var(--bg-alt, #111)); }
.upgrade-tier-past { opacity:.5; }
.upgrade-tier-icon { font-size:1.6rem; }
.upgrade-tier-name { font-family:var(--font-h); font-size:.85rem; color:var(--text); font-weight:600; }
.upgrade-tier-price { font-family:var(--font-m); font-size:.9rem; color:var(--tier-color, var(--accent)); font-weight:700; }
.upgrade-tier-slots { font-size:.72rem; color:var(--text-muted); }
.upgrade-tier-tokens { font-size:.65rem; color:var(--text-muted); }
.upgrade-tier-features { list-style:none; padding:0; margin:.5rem 0; font-size:.65rem; color:var(--text-muted); text-align:left; width:100%; }
.upgrade-tier-features li { padding:2px 0; display:flex; justify-content:space-between; gap:4px; }
.upgrade-rarity-tag { font-size:.6rem; font-weight:600; padding:1px 4px; border-radius:3px; }
.upgrade-rarity-common { color:#94a3b8; }
.upgrade-rarity-rare { color:#6366f1; }
.upgrade-rarity-epic { color:#a855f7; }
.upgrade-rarity-legendary { color:#f59e0b; }
.upgrade-rarity-mythic { animation: mythic-text-glow 6s linear infinite; }
.upgrade-tier-badge { font-size:.7rem; color:var(--tier-color, var(--accent)); font-weight:600; padding:4px 12px; border:1px solid var(--tier-color, var(--accent)); border-radius:var(--radius, 4px); }
.upgrade-tier-btn { width:100%; margin-top:auto; font-size:.72rem; }
.upgrade-tier-downgrade { background:transparent; color:var(--text-muted); border-color:var(--border); }
.upgrade-tier-downgrade:hover { color:#ef4444; border-color:#ef4444; }
.upgrade-modal-footer { font-size:.7rem; color:var(--text-muted); text-align:center; margin-top:.5rem; }
.btn-upgrade-ship { border-color:var(--accent); color:var(--accent); background:transparent; font-weight:600; }
.btn-upgrade-ship:hover { background:var(--accent); color:var(--bg); }
.upgrade-max-badge { font-size:.7rem; color:#f59e0b; font-weight:600; }
@media (max-width:768px) {
  .upgrade-tier-grid { grid-template-columns:repeat(3, 1fr); }
  .upgrade-tier-features { display:none; }
}
@media (max-width:480px) {
  .upgrade-tier-grid { grid-template-columns:repeat(2, 1fr); }
}

/* ── Skeleton loading ── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}
.skeleton { animation: skeleton-pulse 1.5s ease-in-out infinite; background: var(--border); border-radius: var(--radius); }
.skeleton-card { height: 120px; margin-bottom: 0.75rem; }
.skeleton-line { height: 14px; margin-bottom: 0.5rem; }
.skeleton-line.w75 { width: 75%; }
.skeleton-line.w50 { width: 50%; }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-row { display: flex; gap: 1rem; margin-bottom: 0.75rem; }


/* ── Empty states ── */
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); }
.empty-state h3 { color: var(--text); margin-bottom: 0.5rem; }
.empty-state p { margin-bottom: 1.5rem; max-width: 360px; margin-inline: auto; }


/* ── View transitions ── */
.view-enter { animation: viewFadeIn 0.2s ease-out; }
@keyframes viewFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Toast undo button ── */
.toast-undo { background: none; border: 1px solid var(--accent); color: var(--accent); padding: 0.25rem 0.75rem; border-radius: var(--radius); cursor: pointer; font-size: 0.75rem; margin-left: 0.5rem; }
.toast-undo:hover { background: var(--accent); color: var(--bg); }

/* ── Mobile bottom sheet ── */
@media (max-width: 768px) {
  .modal-content { border-radius: 1rem 1rem 0 0; margin-top: auto; max-height: 85vh; animation: sheetSlideUp 0.25s ease-out; }
  @keyframes sheetSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .modal.open { display: flex; flex-direction: column; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE F: Analytics & Intelligence Styles
═══════════════════════════════════════════════════════════════════ */

/* ── Step 39: Agent performance stats row ── */
.agent-perf-stats { font-size:.7rem; color:var(--text-muted); padding:4px 0 2px; border-top:1px solid var(--border); margin-top:6px; }
.agent-compare-label { position:absolute; top:6px; right:6px; z-index:2; cursor:pointer; }
.agent-compare-label input { cursor:pointer; }
.agent-card { position:relative; }

/* ── Step 40: Mission Funnel ── */
.ana-funnel { display:flex; flex-direction:column; gap:8px; }
.ana-funnel-row { display:flex; align-items:center; gap:10px; }
.ana-funnel-label { font-size:.75rem; color:var(--text-muted); width:80px; flex-shrink:0; }
.ana-funnel-bar-wrap { flex:1; height:20px; background:var(--bg-alt, #1a1a2e); border-radius:var(--radius, 4px); overflow:hidden; }
.ana-funnel-bar { height:100%; border-radius:var(--radius, 4px); transition:width .3s ease; min-width:2px; }
.ana-funnel-val { font-size:.72rem; color:var(--text); width:80px; text-align:right; font-family:var(--font-m); }

/* ── Step 41: Token Forecast ── */
.ana-token-forecast { padding:4px 0; }
.ana-token-stats { display:flex; gap:1.5rem; flex-wrap:wrap; }
.ana-token-stat { display:flex; flex-direction:column; gap:2px; }
.ana-token-stat-label { font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.ana-token-stat-val { font-size:1.1rem; font-weight:600; color:var(--text); font-family:var(--font-m); }
.ana-token-stat-val.token-warning { color:#ef4444; }
.token-warning-text { font-size:.78rem; color:#ef4444; margin-top:8px; padding:8px 12px; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); border-radius:var(--radius, 4px); }

/* ── Commander Progress ── */
.ana-rank-progress { margin-bottom:16px; }
.ana-rank-bar-wrap { height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.ana-rank-bar { height:100%; background:var(--accent); border-radius:4px; transition:width .4s ease; }
.ana-rank-labels { display:flex; justify-content:space-between; margin-top:4px; font-size:.7rem; color:var(--text-muted); font-family:var(--font-m); }
.ana-achievement-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.ana-achievement { display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius, 6px); font-size:.72rem; }
.ana-achievement.earned { background:var(--bg-alt, #1a1a2e); border-color:var(--accent); }
.ana-achievement.locked { opacity:.35; }
.ana-ach-icon { font-size:.9rem; }
.ana-ach-name { color:var(--text); }
.ana-sub-title { font-size:.78rem; color:var(--text-muted); margin:16px 0 8px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.ana-activity-list { display:flex; flex-direction:column; gap:2px; }
.ana-activity-item { display:flex; align-items:center; gap:10px; padding:5px 8px; font-size:.72rem; border-radius:3px; }
.ana-activity-item:nth-child(odd) { background:var(--bg-alt, rgba(255,255,255,.03)); }
.ana-act-cat { font-family:var(--font-m); font-size:.62rem; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; min-width:72px; }
.ana-act-desc { flex:1; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ana-act-time { color:var(--text-muted); font-family:var(--font-m); font-size:.65rem; min-width:48px; text-align:right; }

/* ── Recommendations (legacy) ── */
.ana-recommendations { display:flex; flex-direction:column; gap:8px; }
.ana-rec-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; background:var(--bg-alt, #1a1a2e); border:1px solid var(--border); border-radius:var(--radius, 6px); }
.ana-rec-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ana-rec-name { font-size:.82rem; font-weight:600; color:var(--text); }
.ana-rec-desc { font-size:.7rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Step 43: Weekly Summary ── */
.weekly-summary-grid { display:flex; gap:1rem; flex-wrap:wrap; }
.weekly-stat { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 14px; background:var(--bg-alt, #1a1a2e); border:1px solid var(--border); border-radius:var(--radius, 6px); min-width:60px; }
.weekly-stat-val { font-size:1.2rem; font-weight:700; color:var(--text); font-family:var(--font-m); }
.weekly-stat-label { font-size:.65rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }

/* ── Step 45: Mission Board heatmap ── */
.mission-fresh { border-left:3px solid #22c55e; }
.mission-stale { border-left:3px solid #f59e0b; }
.mission-overdue { border-left:3px solid #ef4444; }

/* ── Step 46: Leaderboard ── */
.leaderboard-list { display:flex; flex-direction:column; gap:4px; }
.leaderboard-row { display:flex; align-items:center; gap:10px; padding:6px 10px; font-size:.78rem; border-radius:var(--radius, 4px); background:var(--bg-alt, #1a1a2e); }
.leaderboard-current { border:1px solid var(--accent); background:rgba(99,102,241,.08); }
.leaderboard-rank { font-weight:700; color:var(--accent); min-width:28px; }
.leaderboard-name { flex:1; color:var(--text); }
.leaderboard-xp { font-family:var(--font-m); color:var(--text-muted); font-size:.72rem; }

/* ── Alerts View ── */
.alerts-view { max-width:600px; margin:0 auto; }
.alerts-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.alerts-title { font-family:var(--font-h); font-size:1.2rem; color:var(--text); margin:0; }
.alerts-list { display:flex; flex-direction:column; gap:1px; }
.alerts-empty { text-align:center; padding:48px 16px; color:var(--text-muted); }
.alerts-empty p { margin:4px 0; }
.alerts-item {
  display:flex; gap:12px; padding:12px; border-bottom:1px solid var(--border);
  cursor:pointer; transition:background .15s;
}
.alerts-item:hover { background:var(--bg-alt); }
.alerts-item.unread { border-left:3px solid #ef4444; }
.alerts-item-icon { flex-shrink:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.alerts-item-body { flex:1; min-width:0; }
.alerts-item-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.alerts-item-title { font-size:.8rem; font-weight:600; color:var(--text); }
.alerts-item-time { font-size:.65rem; color:var(--text-muted); white-space:nowrap; }
.alerts-item-msg { font-size:.75rem; color:var(--text-muted); margin:2px 0 0; }

/* ═══════════════════════════════════════════════════════════════════
   PHASE G: Mobile & Accessibility Styles
═══════════════════════════════════════════════════════════════════ */

/* ── Step 49: Mobile layout ── */

/* ── Step 50: Pull-to-refresh indicator ── */
.pull-refresh-indicator {
  position:absolute; top:-50px; left:50%; transform:translateX(-50%);
  width:36px; height:36px; border-radius:50%;
  background:var(--panel-bg, #1a1a2e); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition:top .2s ease, opacity .2s ease;
  opacity:0; z-index:10;
  font-size:.7rem; color:var(--text-muted);
}
.pull-refresh-indicator.visible { top:8px; opacity:1; }
.pull-refresh-indicator.refreshing { animation:spin .6s linear infinite; }
@keyframes spin { from { transform:translateX(-50%) rotate(0); } to { transform:translateX(-50%) rotate(360deg); } }

/* ── Step 51: Swipe gesture utilities ── */
/* Ready for JS integration — apply .swipeable to cards that support swipe actions */
.swipeable { position:relative; overflow:hidden; transition:transform .2s ease; touch-action:pan-y; }
.swipe-action-left, .swipe-action-right {
  position:absolute; top:0; bottom:0; width:80px;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:600; color:#fff;
}
.swipe-action-left { left:0; background:#ef4444; }
.swipe-action-right { right:0; background:#22c55e; }

/* ── Step 54: High contrast mode ── */
[data-contrast="high"] {
  --bg:#000 !important; --bg-alt:#111 !important;
  --text:#fff !important; --text-muted:#ccc !important;
  --accent:#ffff00 !important; --accent2:#00ffff !important;
  --border:#fff !important; --border-hi:#ffff00 !important;
  --panel-bg:#000 !important; --panel-border:#fff !important;
  --glow:none !important; --glow-hi:none !important;
  --nav-bg:rgba(0,0,0,.98) !important;
}
[data-contrast="high"] .btn { border-width:2px; }
[data-contrast="high"] .side-link.active { outline:2px solid #ffff00; }

/* ── Step 55: Reduce motion mode ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Setup Wizard
═══════════════════════════════════════════════════════════════════ */
.wizard-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.wizard-overlay.open { opacity: 1; }
.wizard-container {
  background: var(--panel-bg, #1a1a2e);
  border: 1px solid var(--border-hi, #333);
  border-radius: var(--radius, 8px);
  width: 95vw; max-width: 600px; max-height: 90vh;
  overflow-y: auto; position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.wizard-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; color: var(--text-muted, #888);
  font-size: 1.5rem; cursor: pointer; line-height: 1;
}
.wizard-close:hover { color: var(--text, #fff); }
.wizard-progress {
  display: flex; justify-content: center; gap: 12px;
  padding: 20px 24px 0;
}
.wizard-dot {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--border, #444);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: var(--text-muted, #888);
  transition: all 0.2s;
}
.wizard-dot.active {
  border-color: var(--accent, #6366f1);
  color: var(--accent, #6366f1);
  box-shadow: 0 0 12px rgba(99,102,241,0.3);
}
.wizard-dot.done {
  border-color: var(--accent, #6366f1);
  background: var(--accent, #6366f1);
  color: #fff;
}
.wizard-body { padding: 24px; }
.wizard-actions {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px; border-top: 1px solid var(--border, #333);
}
.wizard-title {
  font-family: var(--font-h, inherit);
  font-size: 1.25rem; margin: 0 0 4px;
}
.wizard-subtitle {
  color: var(--text-muted, #999);
  font-size: 0.85rem; margin: 0 0 20px;
}
.wizard-field { margin-bottom: 16px; }
.wizard-field label {
  display: block; font-size: 0.8rem; font-weight: 600;
  margin-bottom: 6px; color: var(--text, #eee);
}
.wizard-input {
  width: 100%; padding: 10px 12px;
  background: var(--bg-alt, #0f0f23);
  border: 1px solid var(--border, #333);
  border-radius: var(--radius, 6px);
  color: var(--text, #eee); font-size: 0.9rem;
  font-family: var(--font-b, inherit);
}
.wizard-input:focus {
  outline: none; border-color: var(--accent, #6366f1);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
}
.wizard-textarea { min-height: 80px; resize: vertical; }
.wizard-hint {
  display: block; font-size: 0.75rem;
  color: var(--text-muted, #666); margin-top: 4px;
}
.wizard-goals {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.wizard-goal {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: var(--radius, 6px);
  border: 1px solid var(--border, #333);
  cursor: pointer; transition: all 0.15s;
}
.wizard-goal:hover { border-color: var(--accent, #6366f1); }
.wizard-goal.selected {
  border-color: var(--accent, #6366f1);
  background: rgba(99,102,241,0.1);
}
.wizard-goal input { display: none; }
.wizard-goal-icon { font-size: 1.3rem; }
.wizard-goal-label { font-size: 0.8rem; }
.wizard-goal-hint { font-size: 0.65rem; color: var(--text-muted, #888); display: block; margin-top: 2px; }
.wizard-project-types { grid-template-columns: 1fr 1fr 1fr; }
.wizard-project-type { flex-direction: column; text-align: center; padding: 16px 10px; gap: 4px; }
.wizard-project-type .wizard-goal-icon { font-size: 1.6rem; }
.wizard-loading {
  text-align: center; padding: 40px 0;
}
.wizard-spinner {
  width: 40px; height: 40px; margin: 0 auto 16px;
  border: 3px solid var(--border, #333);
  border-top-color: var(--accent, #6366f1);
  border-radius: 50%; animation: wizard-spin 0.8s linear infinite;
}
@keyframes wizard-spin { to { transform: rotate(360deg); } }
.wizard-rec-card {
  border: 1px solid var(--border-hi, #444);
  border-radius: var(--radius, 8px);
  overflow: hidden;
}
.wizard-rec-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  background: rgba(99,102,241,0.08);
  border-bottom: 1px solid var(--border, #333);
}
.wizard-rec-name { font-weight: 700; font-size: 1rem; }
.wizard-rec-class {
  font-size: 0.7rem; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  background: var(--accent, #6366f1); color: #fff;
}
.wizard-rec-section { padding: 12px 16px; }
.wizard-rec-section h4 {
  font-size: 0.75rem; text-transform: uppercase;
  color: var(--text-muted, #888); margin: 0 0 8px;
  letter-spacing: 0.05em;
}
.wizard-rec-agent, .wizard-rec-workflow {
  padding: 6px 0; font-size: 0.85rem;
  display: flex; justify-content: space-between;
}
.wizard-review-section { margin-bottom: 16px; }
.wizard-review-section h4 {
  font-size: 0.8rem; font-weight: 600;
  margin: 0 0 8px;
}
.wizard-agent-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius, 6px);
  border: 1px solid var(--border, #333);
  margin-bottom: 6px; cursor: pointer; font-size: 0.85rem;
}
.wizard-agent-toggle:hover { border-color: var(--accent, #6366f1); }
.wizard-success {
  text-align: center; padding: 30px 0;
}
.wizard-success-icon { font-size: 3rem; margin-bottom: 12px; }
.wizard-xp {
  color: var(--accent, #6366f1);
  font-weight: 700; font-size: 0.9rem;
}
.wizard-shake {
  animation: wizard-shake 0.3s ease-in-out;
}
@keyframes wizard-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@media (max-width: 600px) {
  .wizard-goals { grid-template-columns: 1fr; }
  .wizard-project-types { grid-template-columns: 1fr 1fr; }
  .wizard-container { width: 100vw; max-width: none; border-radius: 0; max-height: 100vh; }
}

/* ── Ship Setup Wizard ── */
.ship-wizard-bp-preview {
  margin-top: 16px; padding: 12px 16px;
  background: var(--bg-alt, #1a1a2e);
  border: 1px solid var(--border, #333);
  border-radius: var(--radius, 8px);
  display: flex; align-items: center; gap: 12px;
}
.ship-wizard-bp-class {
  font-family: var(--font-h, sans-serif);
  font-weight: 700; font-size: 0.95rem;
  color: var(--accent, #00e5ff);
}
.ship-wizard-bp-slots {
  font-size: 0.8rem; color: var(--text-muted, #888);
  margin-top: 2px;
}
.ship-wizard-mode-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 16px 0;
}
.ship-wizard-mode-card {
  padding: 20px 16px; text-align: center;
  border: 1px solid var(--border, #333);
  border-radius: var(--radius, 8px);
  cursor: pointer; transition: border-color .15s, background .15s;
  background: var(--bg-alt, #1a1a2e);
}
.ship-wizard-mode-card:hover {
  border-color: var(--accent, #00e5ff);
  background: color-mix(in srgb, var(--accent, #00e5ff) 6%, transparent);
}
.ship-wizard-mode-card.selected {
  border-color: var(--accent, #00e5ff);
  background: color-mix(in srgb, var(--accent, #00e5ff) 12%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent, #00e5ff) 25%, transparent);
}
.ship-wizard-mode-icon {
  font-size: 1.6rem; margin-bottom: 8px;
}
.ship-wizard-mode-label {
  font-family: var(--font-h, sans-serif);
  font-weight: 700; font-size: 0.95rem;
  color: var(--text, #eee);
}
.ship-wizard-mode-hint {
  font-size: 0.78rem; color: var(--text-muted, #888);
  margin-top: 4px;
}
.ship-wizard-slots {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px;
}
.ship-wizard-slot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 12px;
  background: var(--bg-alt, #1a1a2e);
  border: 1px solid var(--border, #333);
  border-radius: var(--radius, 8px);
}
.ship-wizard-slot-info {
  display: flex; align-items: center; gap: 8px;
  min-width: 120px;
}
.ship-wizard-slot-label {
  font-weight: 600; font-size: 0.85rem;
  color: var(--text, #eee);
}
.ship-wizard-slot-rarity {
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ship-wizard-slot-select { flex: 1; }
.ship-wizard-slot-select select {
  width: 100%; padding: 6px 10px;
  background: var(--panel-bg, #111);
  color: var(--text, #eee);
  border: 1px solid var(--border, #333);
  border-radius: var(--radius, 8px);
  font-size: 0.82rem; cursor: pointer;
}
.ship-wizard-slot-select select:focus {
  outline: none; border-color: var(--accent, #00e5ff);
}
.ship-wizard-analysis {
  margin: 12px 0; padding: 12px 16px;
  background: color-mix(in srgb, var(--accent, #00e5ff) 8%, transparent);
  border-left: 3px solid var(--accent, #00e5ff);
  border-radius: var(--radius, 8px);
  font-size: 0.85rem; color: var(--text, #eee);
  line-height: 1.5;
}
.ship-wizard-slot-agent {
  flex:1; display:flex; align-items:center; gap:8px;
  padding:6px 10px; background:var(--panel-bg, #111);
  border:1px solid var(--border, #333); border-radius:var(--radius, 8px);
}
.ship-wizard-agent-name { font-weight:600; color:var(--text); }
.ship-wizard-agent-role { font-size:.75rem; color:var(--text-muted); }
.ship-wizard-slot-empty { color:var(--text-muted); font-style:italic; }
/* ── Class Selection Grid ── */
.ship-wizard-class-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px;
  margin:16px 0;
}
.ship-wizard-class-card {
  position:relative; padding:16px 12px; text-align:center;
  border:1px solid var(--border, #333); border-radius:var(--radius, 8px);
  cursor:pointer; transition:border-color .15s, background .15s;
  background:var(--bg-alt, #1a1a2e);
}
.ship-wizard-class-card:hover {
  border-color:var(--accent, #00e5ff);
  background:color-mix(in srgb, var(--accent) 6%, transparent);
}
.ship-wizard-class-card.selected {
  border-color:var(--accent, #00e5ff);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow:0 0 8px color-mix(in srgb, var(--accent) 25%, transparent);
}
.ship-wizard-class-name {
  font-family:var(--font-h, sans-serif); font-weight:700; font-size:.95rem;
  color:var(--text, #eee);
}
.ship-wizard-class-price {
  font-size:.85rem; font-weight:600; color:var(--accent, #00e5ff);
  margin:4px 0;
}
.ship-wizard-class-slots {
  font-size:.75rem; color:var(--text-muted, #888);
}
.ship-wizard-class-labels {
  font-size:.65rem; color:var(--text-muted, #666); margin-top:4px;
  line-height:1.3;
}
.ship-wizard-class-warn {
  font-size:.65rem; color:#f59e0b; margin-top:4px;
}
.ship-wizard-rec-badge {
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  background:var(--accent, #00e5ff); color:#000; font-size:.6rem; font-weight:700;
  padding:2px 8px; border-radius:10px; white-space:nowrap; text-transform:uppercase;
  letter-spacing:.03em;
}

@media (max-width: 600px) {
  .ship-wizard-mode-cards { grid-template-columns: 1fr; }
  .ship-wizard-class-grid { grid-template-columns: repeat(2, 1fr); }
  .ship-wizard-slot { flex-direction: column; align-items: stretch; }
  .ship-wizard-slot-info { min-width: auto; }
}

/* ── Spaceship Workflows Tab ── */
.ship-workflows { margin-top: 24px; }
.ship-workflows h3 {
  font-size: 0.85rem; text-transform: uppercase;
  color: var(--text-muted, #888); margin: 0 0 12px;
  letter-spacing: 0.05em;
}
.ship-wf-card {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--border, #333);
  border-radius: var(--radius, 6px);
  margin-bottom: 8px;
}
.ship-wf-card:hover { border-color: var(--accent, #6366f1); }
.ship-wf-name { font-weight: 600; font-size: 0.9rem; }
.ship-wf-meta { font-size: 0.75rem; color: var(--text-muted, #888); }

/* ─────────────────────────────────────────────────────────────────
   WALLET VIEW
───────────────────────────────────────────────────────────────── */
.wallet-wrap { max-width: 900px; margin: 0 auto; padding: 24px 16px; }
.wallet-title {
  font-family: var(--font-h, 'Inter', sans-serif);
  font-size: 1.4rem; margin: 0 0 20px;
  color: var(--text, #eee);
}

/* Balance + Subscription cards row */
.wallet-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 28px;
}
.wallet-card {
  background: var(--panel-bg, #111);
  border: 1px solid var(--border, #333);
  border-radius: var(--radius, 6px);
  padding: 20px;
}
.wallet-card-label {
  font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted, #888);
  margin-bottom: 8px;
}
.wallet-balance {
  font-size: 2rem; font-weight: 700;
  color: var(--accent, #6366f1);
  font-family: var(--font-m, monospace);
}
.wallet-gauge-track {
  height: 6px; border-radius: 3px;
  background: var(--bg-alt, #1a1a1a);
  margin: 10px 0 8px; overflow: hidden;
}
.wallet-gauge-fill {
  height: 100%; border-radius: 3px;
  background: #22c55e;
  transition: width 0.6s ease, background 0.4s ease;
}
.wallet-balance-sub {
  font-size: 0.72rem; color: var(--text-muted, #888);
}
.wallet-plan {
  font-size: 1.3rem; font-weight: 700;
  margin-bottom: 6px;
}
.wallet-plan-meta {
  font-size: 0.75rem; color: var(--text-muted, #888);
  margin-bottom: 12px;
}
.wallet-plan-actions { display: flex; gap: 8px; }

/* Sections */
.wallet-section { margin-bottom: 28px; }
.wallet-section-title {
  font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted, #888);
  margin: 0 0 12px;
}

/* Top-up grid */
.wallet-topup-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.wallet-topup-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 14px 10px;
  background: var(--panel-bg, #111);
  border: 1px solid var(--border, #333);
  border-radius: var(--radius, 6px);
  color: var(--text, #eee);
  font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: border-color 0.2s, transform 0.15s;
}
.wallet-topup-btn span {
  font-size: 0.72rem; font-weight: 400;
  color: var(--text-muted, #888);
}
.wallet-topup-btn:hover {
  border-color: var(--accent, #6366f1);
  transform: translateY(-1px);
}
.wallet-topup-featured {
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.15);
}

/* Tier upgrade cards */
.wallet-tiers {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.wallet-tier-card {
  background: var(--panel-bg, #111);
  border: 1px solid var(--border, #333);
  border-radius: var(--radius, 6px);
  padding: 16px 12px; text-align: center;
  transition: border-color 0.2s, transform 0.15s;
}
.wallet-tier-card:hover { transform: translateY(-2px); }
.wallet-tier-current {
  border-width: 2px;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.12);
}
.wallet-tier-icon { font-size: 1.6rem; margin-bottom: 6px; }
.wallet-tier-name {
  font-size: 0.85rem; font-weight: 700;
  margin-bottom: 4px;
}
.wallet-tier-price {
  font-size: 0.75rem; color: var(--text-muted, #888);
  margin-bottom: 8px;
}
.wallet-tier-details {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 0.68rem; color: var(--text-muted, #888);
  margin-bottom: 10px;
}
.wallet-tier-badge {
  display: inline-block;
  font-size: 0.65rem; font-weight: 600;
  padding: 3px 8px; border-radius: 10px;
  background: var(--accent, #6366f1);
  color: #fff;
}
.wallet-tier-btn {
  font-size: 0.72rem; padding: 4px 12px;
  border-radius: var(--radius, 6px);
  background: transparent; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.wallet-tier-btn:hover {
  background: var(--accent, #6366f1);
  color: #fff; border-color: var(--accent, #6366f1);
}

/* Transaction table */
.wallet-txn-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.78rem;
}
.wallet-txn-table th {
  text-align: left; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted, #888);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border, #333);
}
.wallet-txn-table td {
  padding: 8px; color: var(--text, #eee);
  border-bottom: 1px solid var(--border, #222);
}
.wallet-txn-table tbody tr:hover {
  background: var(--bg-alt, #1a1a1a);
}
.wallet-txn-type {
  display: inline-block;
  font-size: 0.65rem; font-weight: 600;
  padding: 2px 6px; border-radius: 8px;
}
.wallet-txn-credit { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.wallet-txn-debit  { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* Wallet responsive */
@media (max-width: 768px) {
  .wallet-cards { grid-template-columns: 1fr; }
  .wallet-topup-grid { grid-template-columns: repeat(2, 1fr); }
  .wallet-tiers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .wallet-tiers { grid-template-columns: 1fr; }
  .wallet-topup-grid { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════
   Blueprint Detail Drawer, Card Flip, Compare, Hangar
════════════════════════════════════════════════════════════ */

/* ── Detail Drawer (right-side panel) ── */
.bp-drawer {
  position:fixed; right:0; top:0; bottom:0; width:420px; z-index:250;
  background:var(--panel-bg); border-left:var(--border-width,1px) solid var(--border);
  transform:translateX(100%); transition:transform .3s ease;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:-4px 0 24px rgba(0,0,0,.3);
}
.bp-drawer.open { transform:translateX(0); }
.bp-drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:var(--border-width,1px) solid var(--border);
  flex-shrink:0; background:var(--bg);
}
.bp-drawer-header h3 {
  font-family:var(--font-h); font-size:.85rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--text);
  margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bp-drawer-nav {
  display:flex; align-items:center; gap:4px;
}
.bp-drawer-nav-btn {
  background:none; border:1px solid var(--border); color:var(--text-muted);
  width:28px; height:28px; border-radius:var(--radius); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, color .15s;
}
.bp-drawer-nav-btn:hover { border-color:var(--accent); color:var(--accent); }
.bp-drawer-close {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  padding:4px; display:flex; transition:color .15s;
}
.bp-drawer-close:hover { color:var(--text); }
.bp-drawer-body {
  flex:1; overflow-y:auto; padding:18px;
  display:flex; flex-direction:column; gap:16px;
}
.bp-drawer-hero { display:flex; justify-content:center; }
.bp-drawer-hero .tcg-card { pointer-events:none; max-width:280px; width:100%; }
.bp-drawer-hero .tcg-actions { display:none; }
.bp-drawer-section-title {
  font-size:.68rem; font-family:var(--font-m); text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-muted); margin:0 0 8px 0;
}
.bp-drawer-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:4px 16px;
}
.bp-drawer-stats .detail-kv-row {
  display:flex; justify-content:space-between; padding:5px 0;
  border-bottom:1px solid color-mix(in srgb, var(--border) 40%, transparent);
  font-size:.75rem;
}
.bp-drawer-stats .kv-label { color:var(--text-muted); font-family:var(--font-m); }
.bp-drawer-stats .kv-val { color:var(--text); font-weight:600; }
.bp-drawer-stats .bp-stat-full {
  grid-column:1 / -1; flex-direction:column; gap:6px;
}
.bp-formation-wrap {
  display:flex; flex-wrap:wrap; gap:4px;
}
.bp-formation-slot {
  display:inline-block; background:color-mix(in srgb, var(--accent) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius:var(--radius); padding:2px 8px; font-size:.7rem; white-space:nowrap;
}
.bp-formation-slot em {
  font-style:normal; color:var(--text-muted); font-weight:400;
}
.bp-drawer-caps {
  display:flex; flex-wrap:wrap; gap:6px;
}
.bp-drawer-caps .agent-tool-tag {
  font-size:.65rem; padding:3px 8px;
}
.bp-drawer-actions {
  display:flex; flex-wrap:wrap; gap:8px;
}
.bp-drawer-actions .btn { flex:1; min-width:100px; text-align:center; }
.bp-drawer-social {
  display:flex; align-items:center; gap:16px; font-size:.75rem; color:var(--text-muted);
}
.bp-drawer-social .bp-star { cursor:pointer; font-size:1rem; }
.bp-drawer-social .bp-star.filled { color:#f59e0b; }
.bp-drawer-social .bp-star:hover { color:#fbbf24; }
.bp-drawer-deps {
  background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.3);
  border-radius:var(--radius); padding:10px 14px; font-size:.75rem;
  color:var(--text); line-height:1.5;
}
.bp-drawer-deps a { color:var(--accent); text-decoration:underline; }
.bp-drawer-related { display:flex; flex-direction:column; gap:8px; }
.bp-drawer-related-scroll {
  display:flex; gap:10px; overflow-x:auto; padding-bottom:4px;
}
.bp-drawer-related-scroll .tcg-card {
  flex-shrink:0; width:180px; font-size:.75em; cursor:pointer;
  pointer-events:auto;
}
.bp-drawer-related-scroll .tcg-card:hover {
  border-color:var(--accent); box-shadow:var(--glow);
}
.bp-drawer-overlay {
  display:none; position:fixed; inset:0; z-index:249;
  background:rgba(0,0,0,.4); backdrop-filter:blur(2px);
}
.bp-drawer-overlay.open { display:block; }

/* Card selected highlight (for drawer + compare) */
.tcg-card.bp-card-selected,
.bpl-row.bp-card-selected {
  border-color:var(--accent) !important;
  box-shadow:0 0 12px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

/* ── Compare Mode ── */
.bp-compare-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  padding:12px 20px; display:flex; align-items:center; justify-content:space-between;
  background:var(--panel-bg); border-top:2px solid var(--accent);
  box-shadow:0 -4px 20px rgba(0,0,0,.3);
  transform:translateY(100%); transition:transform .3s ease;
}
.bp-compare-bar.visible { transform:translateY(0); }
.bp-compare-bar-info {
  display:flex; align-items:center; gap:12px; font-size:.78rem; color:var(--text);
}
.bp-compare-bar-count {
  background:var(--accent); color:var(--bg); padding:2px 8px;
  border-radius:10px; font-weight:700; font-size:.7rem;
}
.bp-compare-bar-actions { display:flex; gap:8px; }
.tcg-card.bp-compare-selected,
.bpl-row.bp-compare-selected {
  border-color:var(--accent2, var(--accent)) !important;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent2, var(--accent)) 40%, transparent) !important;
}
.bp-compare-panel {
  position:fixed; inset:0; z-index:280;
  background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
  display:flex; flex-direction:column; padding:24px;
  overflow-y:auto;
}
.bp-compare-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; flex-shrink:0;
}
.bp-compare-panel-header h2 {
  font-family:var(--font-h); font-size:1rem; color:var(--text); margin:0;
}
.bp-compare-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px; flex:1;
}
.bp-compare-col {
  background:var(--panel-bg); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px; display:flex;
  flex-direction:column; gap:10px; overflow:hidden;
}
.bp-compare-col .tcg-card { pointer-events:none; font-size:.8em; }
.bp-compare-stat-rows { display:flex; flex-direction:column; gap:2px; }
.bp-compare-stat-row {
  display:flex; justify-content:space-between; font-size:.72rem;
  padding:4px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.bp-compare-stat-row .kv-label { color:var(--text-muted); font-family:var(--font-m); }
.bp-compare-stat-row .kv-val { color:var(--text); font-weight:600; }

/* ── Hangar Cart ── */
.bp-hangar-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  height:68px; padding:0 20px; display:flex; align-items:center; gap:14px;
  background:var(--panel-bg); border-top:2px solid var(--accent);
  box-shadow:0 -4px 20px rgba(0,0,0,.3);
  transform:translateY(100%); transition:transform .3s ease;
}
.bp-hangar-bar.visible { transform:translateY(0); }
.bp-hangar-label {
  font-size:.72rem; font-family:var(--font-m); text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted); white-space:nowrap;
}
.bp-hangar-count {
  background:var(--accent); color:var(--bg); padding:1px 7px;
  border-radius:10px; font-weight:700; font-size:.65rem;
  margin-left:4px;
}
.bp-hangar-items {
  display:flex; gap:8px; overflow-x:auto; flex:1; padding:4px 0;
}
.bp-hangar-item {
  position:relative; flex-shrink:0; width:44px; height:52px;
  background:var(--bg-alt); border:1px solid var(--border);
  border-radius:4px; display:flex; align-items:center; justify-content:center;
  font-size:.55rem; font-family:var(--font-m); color:var(--text-muted);
  overflow:hidden; text-align:center; padding:2px;
}
.bp-hangar-item-x {
  position:absolute; top:1px; right:1px; width:14px; height:14px;
  background:rgba(0,0,0,.6); border:none; color:var(--text-muted);
  border-radius:50%; cursor:pointer; font-size:.55rem;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s;
}
.bp-hangar-item-x:hover { color:#ef4444; }
.bp-hangar-actions { display:flex; gap:8px; flex-shrink:0; }
.bp-hangar-add-btn {
  background:none; border:1px solid var(--border); color:var(--text-muted);
  width:22px; height:22px; border-radius:4px; cursor:pointer;
  font-size:.7rem; display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .15s, color .15s;
}
.bp-hangar-add-btn:hover { border-color:var(--accent); color:var(--accent); }


/* ── Related Mini Cards (drawer) ── */
.bp-drawer-related-card {
  flex-shrink:0; width:120px; padding:10px 8px;
  background:var(--bg-alt); border:1px solid var(--border);
  border-radius:var(--radius); cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.bp-drawer-related-card:hover {
  border-color:var(--accent); box-shadow:var(--glow);
}
.bp-related-mini-name {
  font-size:.7rem; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bp-related-mini-cat {
  font-size:.6rem; color:var(--text-muted); margin-top:2px;
}

/* ── Dependency Hints ── */
.bp-deps-icon { margin-right:6px; }
.bp-deps-link { margin-left:6px; }

/* ── Compare Panel Close ── */
.bp-compare-panel-close {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:1.5rem; line-height:1; transition:color .15s;
}
.bp-compare-panel-close:hover { color:var(--text); }
.bp-compare-panel-header h3 {
  font-family:var(--font-h); font-size:1rem; color:var(--text); margin:0;
}
.bp-compare-stats {
  display:flex; flex-direction:column; gap:2px;
}
.bp-compare-stats .detail-kv-row {
  display:flex; justify-content:space-between; font-size:.72rem;
  padding:3px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.bp-compare-caps {
  display:flex; flex-wrap:wrap; gap:4px;
}
.bp-compare-card .tcg-card { pointer-events:none; font-size:.8em; }

/* ── Hangar Item Name ── */
.bp-hangar-item-name {
  font-size:.5rem; line-height:1.2; word-break:break-all;
}

/* ═══════════════════════════════════════════════════════════════════
   PREVIEW PANEL — Slide-out from right (browser + agent output)
═══════════════════════════════════════════════════════════════════ */
.preview-panel {
  position:fixed; right:0; top:0; bottom:0; width:50%;
  background:var(--bg); border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  z-index:250; transform:translateX(100%);
  transition:transform .3s ease;
}
.preview-panel.open { transform:translateX(0); }

/* Drag handle between main and preview */
.preview-drag-handle {
  display:none; position:fixed; top:0; bottom:0; width:6px;
  cursor:col-resize; z-index:251;
  background:transparent; transition:background .15s;
}
.preview-drag-handle::after {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); width:2px; height:32px;
  background:var(--border); border-radius:1px; opacity:.5;
  transition:opacity .15s, height .15s;
}
.preview-drag-handle:hover::after,
.preview-drag-handle.dragging::after {
  opacity:1; height:48px; background:var(--accent);
}
.preview-drag-handle:hover { background:rgba(255,255,255,.03); }
.preview-drag-handle.dragging { background:rgba(255,255,255,.05); }
body.preview-active .preview-drag-handle { display:block; }
body.preview-dragging { cursor:col-resize !important; user-select:none !important; }
body.preview-dragging iframe { pointer-events:none; }

/* Push main content when open */
body.preview-active .app-main { margin-right:50%; transition:margin-right .3s ease; }
body.preview-active .nice-ai {
  left:calc(25% + 28px); width:calc(50% - 104px);
  transition:left .3s ease, width .3s ease;
}

.preview-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-bottom:1px solid var(--border);
  flex-shrink:0; gap:8px;
}
.preview-tabs { display:flex; gap:2px; }
.preview-tab {
  padding:6px 12px; font-family:var(--font-m); font-size:.7rem;
  letter-spacing:.06em; background:none; border:1px solid var(--border);
  border-radius:var(--radius, 6px); color:var(--text-muted);
  cursor:pointer; transition:color .15s, background .15s, border-color .15s;
}
.preview-tab:hover { color:var(--text); border-color:var(--text-muted); }
.preview-tab.active { color:var(--accent); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }

.preview-actions { display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
.preview-url {
  flex:1; min-width:0; padding:5px 10px; font-family:var(--font-m); font-size:.72rem;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius, 6px);
  color:var(--text); outline:none; transition:border-color .15s;
}
.preview-url:focus { border-color:var(--accent); }
.preview-url::placeholder { color:var(--text-muted); }

.preview-close {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; background:none; border:none;
  color:var(--text-muted); cursor:pointer; font-size:1.1rem;
  border-radius:var(--radius, 6px); transition:color .15s, background .15s;
  flex-shrink:0;
}
.preview-close:hover { color:var(--text); background:var(--bg-alt); }

/* Nav buttons (back/forward/refresh) */
.preview-nav-btn {
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; background:none; border:none;
  color:var(--text-muted); cursor:pointer; border-radius:var(--radius, 6px);
  transition:color .15s, background .15s; flex-shrink:0;
}
.preview-nav-btn:hover { color:var(--text); background:var(--bg-alt); }

/* Viewport toggle group */
.preview-viewport-group { display:flex; gap:2px; flex-shrink:0; }
.preview-viewport-btn {
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; background:none; border:1px solid transparent;
  color:var(--text-muted); cursor:pointer; border-radius:var(--radius, 6px);
  transition:color .15s, background .15s, border-color .15s;
}
.preview-viewport-btn:hover { color:var(--text); border-color:var(--border); }
.preview-viewport-btn.active { color:var(--accent); border-color:var(--accent); }

/* Body + iframe wrapper */
.preview-body { flex:1; overflow:hidden; position:relative; display:flex; flex-direction:column; }
.preview-iframe-wrap {
  flex:1; display:flex; justify-content:center; overflow:hidden;
  background:var(--bg-alt); transition:max-width .3s ease;
}
.preview-iframe { width:100%; height:100%; border:none; background:#fff; }
.preview-output {
  width:100%; height:100%; overflow-y:auto; padding:16px;
  font-family:var(--font-b); font-size:.82rem; color:var(--text);
  line-height:1.6;
}

/* Console tab */
.preview-console {
  flex-direction:column; width:100%; height:100%;
}
.preview-console-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 12px; border-bottom:1px solid var(--border);
  font-family:var(--font-m); font-size:.68rem; letter-spacing:.08em;
  color:var(--text-muted);
}
.preview-console-clear-btn {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-family:var(--font-m); font-size:.65rem; padding:2px 8px;
  border-radius:var(--radius, 6px); transition:color .15s, background .15s;
}
.preview-console-clear-btn:hover { color:var(--text); background:var(--bg-alt); }
.preview-console-list {
  flex:1; overflow-y:auto; padding:4px 0;
  font-family:var(--font-m); font-size:.72rem;
}
.preview-log {
  padding:3px 12px; border-bottom:1px solid rgba(255,255,255,.03);
  color:var(--text-muted); white-space:pre-wrap; word-break:break-all;
}
.preview-log-ts { color:var(--text-muted); opacity:.5; margin-right:8px; }
.preview-log-info { color:var(--text-muted); }
.preview-log-warn { color:#f59e0b; }
.preview-log-error { color:#ef4444; }

/* Mobile: full-width bottom sheet */
@media (max-width:768px) {
  .preview-panel {
    width:100%; top:auto; bottom:0; height:85vh;
    border-left:none; border-top:1px solid var(--border);
    border-radius:1rem 1rem 0 0;
    transform:translateY(100%);
  }
  .preview-panel.open { transform:translateY(0); }
  body.preview-active .app-main { margin-right:0; }
  body.preview-active .nice-ai { left:50%; width:calc(100% - 48px); }
}

/* ── Drawer Close Button (font-size fix) ── */
.bp-drawer-close { font-size:1.5rem; line-height:1; }

/* ── Mobile Responsive ── */
@media (max-width:768px) {
  .bp-drawer {
    width:100%; top:auto; bottom:0; height:85vh;
    border-left:none; border-top:var(--border-width,1px) solid var(--border);
    border-radius:1rem 1rem 0 0;
    box-shadow:0 -8px 32px rgba(0,0,0,.4);
  }
  .bp-drawer-overlay.open { display:block; }
  .bp-compare-bar, .bp-hangar-bar { left:0; }
  .bp-compare-panel { padding:12px; }
  .bp-compare-grid { grid-template-columns:1fr 1fr; gap:10px; }
}

/* ─────────────────────────────────────────────────────────────────
   AGENT PROGRESSION
───────────────────────────────────────────────────────────────── */
.agent-prog-badge { font-size: .65rem; padding: 1px 6px; border-radius: 8px; background: var(--accent); color: var(--bg); margin-left: 4px; font-weight: 600; opacity: .85; }
.agent-prog-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin: 8px 0; }
.agent-prog-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s; }
.agent-milestone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.agent-milestone-item { font-size: .78rem; padding: 8px 10px; background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius); }
.agent-milestone-item.met { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel-bg)); }
.agent-milestone-label { color: var(--text-muted); font-size: .7rem; display: block; margin-bottom: 2px; }
.agent-milestone-val { font-weight: 600; font-family: var(--font-m); }

/* ─────────────────────────────────────────────────────────────────
   BLUEPRINT UX IMPROVEMENTS
───────────────────────────────────────────────────────────────── */

/* ── Result count bar ── */
.bp-result-bar {
  display:flex; align-items:center; gap:8px;
  min-height:0; transition:min-height .2s;
}
.bp-result-bar:not(:empty) { min-height:28px; margin-bottom:4px; }
.bp-result-count {
  font-size:.75rem; color:var(--text-muted); font-family:var(--font-m);
}
.bp-clear-filters {
  background:none; border:1px solid var(--border); color:var(--text-muted);
  font-size:.65rem; font-family:var(--font-m); letter-spacing:.05em;
  padding:2px 10px; border-radius:var(--radius); cursor:pointer;
  transition:color .15s, border-color .15s;
}
.bp-clear-filters:hover { color:var(--accent); border-color:var(--accent); }

/* ── Load More + Loading ── */
.bp-load-more { text-align:center; padding:2rem 0 1rem; }
.bp-load-more-btn { min-width:220px; font-size:.85rem; }
.bp-load-more-count { color:var(--text-muted); font-size:.75rem; }
.bp-load-more-status { color:var(--text-muted); font-size:.8rem; }
.bp-loading { display:flex; align-items:center; justify-content:center; gap:.75rem; padding:4rem; color:var(--text-muted); font-size:.85rem; }
.bp-spinner { width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:bpSpin .6s linear infinite; display:inline-block; }
@keyframes bpSpin { to { transform:rotate(360deg); } }


/* ── Mobile: default compact, better list view ── */
@media (max-width:768px) {
  .bp-search-row { gap:6px; }
  .bp-rarity-filters { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .bp-rarity-btn { white-space:nowrap; flex-shrink:0; }
  .bp-view-card { grid-template-columns:1fr !important; }
  .bp-view-compact { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)) !important; }
  .bpl-row { grid-template-columns:24px 1fr .6fr auto; font-size:.7rem; }
  .bpl-desc, .bpl-stat1, .bpl-stat2, .bpl-stat3, .bpl-dl { display:none; }
  .bpl-header .bpl-desc, .bpl-header .bpl-stat1, .bpl-header .bpl-stat2, .bpl-header .bpl-stat3, .bpl-header .bpl-dl { display:none; }
}