/* G2 OSINT — Design System (Linear / shadcn-inspired) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --background: #0c0d0f;
  --foreground: #e6e8eb;
  --surface: #111316;
  --surface-secondary: #15171a;
  --muted: #15171a;
  --muted-foreground: #7d838c;
  --secondary-foreground: #a5aab2;
  --border: #24272b;
  --border-subtle: rgba(255, 255, 255, 0.07);
  --accent: #7c8cff;
  --accent-muted: rgba(124, 140, 255, 0.12);
  --success: #4caf7a;
  --warning: #c9a227;
  --danger: #d97070;
  --info: #6b9fd4;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --sidebar-w: 232px;
  --sidebar-collapsed-w: 56px;
  --topbar-h: 50px;
  --panel-w: 380px;
  --transition: 150ms ease;
  --font: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  /* legacy aliases for JS inline styles */
  --bg-dark: var(--background);
  --bg-panel: var(--surface);
  --bg-card: var(--surface-secondary);
  --bg-input: var(--surface-secondary);
  --bg-hover: #1a1d21;
  --border-hover: #2e3238;
  --text: var(--foreground);
  --text-dim: var(--muted-foreground);
  --text-darker: #525860;
  --error: var(--danger);
  --gold: #a38454;
  --nft: #8a7aad;
  --music: #5a8a8a;
  --oldname: #9a7a8a;
  --accent-2: var(--accent);
  --accent-glow: transparent;
  --graph-bg: #0c0d0f;
  --graph-grid: rgba(255, 255, 255, 0.03);
  --graph-chip-text: #b8c0cc;
  --graph-chip-text-hover: #f0f3f7;
  --graph-node-label: #8b929e;
  --graph-node-label-hover: #f0f3f7;
  --graph-meta: #4a505b;
  --graph-placeholder: #161b22;
}

[data-theme="light"] {
  --background: #f4f5f7;
  --foreground: #121417;
  --surface: #ffffff;
  --surface-secondary: #f0f1f4;
  --muted: #eef0f3;
  --muted-foreground: #5c6370;
  --secondary-foreground: #3d4450;
  --border: #dde1e8;
  --border-subtle: rgba(0, 0, 0, 0.08);
  --accent: #5568f2;
  --accent-muted: rgba(85, 104, 242, 0.1);
  --bg-hover: #e8eaef;
  --border-hover: #c8ced8;
  --text-darker: #8b929e;
  --graph-bg: #eef0f4;
  --graph-grid: rgba(0, 0, 0, 0.06);
  --graph-chip-text: #4a5058;
  --graph-chip-text-hover: #121417;
  --graph-node-label: #5c6370;
  --graph-node-label-hover: #121417;
  --graph-meta: #7d838c;
  --graph-placeholder: #e2e5eb;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; min-width: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--foreground);
  background: var(--background);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── App shell ── */
.app-shell { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  transition: width var(--transition);
  z-index: 40;
}
.sidebar.collapsed { width: var(--sidebar-collapsed-w); }
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border-subtle);
  min-height: var(--topbar-h);
}
.sidebar-brand-mark {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  display: grid; place-items: center;
  font: 600 11px var(--mono); color: var(--accent);
  flex-shrink: 0;
}
.sidebar-brand-text { min-width: 0; overflow: hidden; }
.sidebar-brand-text strong { display: block; font-size: 13px; font-weight: 600; letter-spacing: -0.2px; }
.sidebar-brand-text span { display: block; font-size: 11px; color: var(--muted-foreground); margin-top: 1px; }
.sidebar.collapsed .sidebar-brand-text { display: none; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px; }
.nav-section { margin-bottom: 16px; }
.nav-section-label {
  font-size: 11px; font-weight: 500; color: var(--muted-foreground);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 10px 6px;
}
.sidebar.collapsed .nav-section-label { display: none; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 400; color: var(--secondary-foreground);
  cursor: pointer; border: none; background: none; width: 100%; text-align: left;
  transition: background var(--transition), color var(--transition);
}
.nav-item i { width: 16px; text-align: center; font-size: 14px; color: var(--muted-foreground); flex-shrink: 0; }
.nav-item:hover { background: color-mix(in srgb, var(--foreground) 4%, transparent); color: var(--foreground); }
.nav-item.active { background: color-mix(in srgb, var(--foreground) 6%, transparent); color: var(--accent); }
.nav-item.active i { color: var(--accent); }
a.nav-item { text-decoration: none; color: inherit; display: flex; }
.sidebar.collapsed .nav-item span { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 8px; }

.sidebar-foot { padding: 8px; border-top: 1px solid var(--border-subtle); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Topbar ── */
.topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
}
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-title { font-size: 14px; font-weight: 500; color: var(--foreground); white-space: nowrap; }
.sidebar-toggle {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); background: transparent;
  color: var(--muted-foreground); cursor: pointer;
  display: grid; place-items: center; font-size: 14px;
  transition: background var(--transition);
}
.sidebar-toggle:hover { background: rgba(255,255,255,0.04); color: var(--foreground); }

.topbar-search { flex: 1; max-width: 520px; display: flex; gap: 8px; min-width: 0; }
.search-wrapper {
  flex: 1; display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
}
.search-wrapper:focus-within { border-color: rgba(124,140,255,0.45); }
.search-icon { color: var(--muted-foreground); font-size: 13px; flex-shrink: 0; }
.search-input {
  flex: 1; border: none; outline: none; background: transparent;
  color: var(--foreground); font-size: 13px; font-family: var(--font);
}
.search-input::placeholder { color: var(--muted-foreground); }
.search-btn {
  height: 34px; padding: 0 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--accent-muted);
  color: var(--accent);
  font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background var(--transition);
}
.search-btn:hover:not(:disabled) { background: rgba(124,140,255,0.18); }
.search-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar-btn {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: transparent; color: var(--secondary-foreground);
  font-size: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: background var(--transition);
}
.topbar-btn:hover { background: rgba(255,255,255,0.04); }
.topbar-btn kbd {
  font: 500 10px var(--mono); color: var(--muted-foreground);
  padding: 2px 5px; border-radius: 4px;
  border: 1px solid var(--border-subtle); background: var(--surface-secondary);
}
.header-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--muted-foreground);
  padding: 0 8px; height: 32px;
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); flex-shrink: 0;
}
.status-dot.offline { background: var(--danger); }

/* ── Workspace ── */
.workspace { flex: 1; min-height: 0; overflow: hidden; }
.main-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-w);
  height: 100%;
  background: var(--background);
}
.graph-stage { position: relative; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
#graph-canvas {
  width: 100%; height: 100%; display: block; cursor: grab;
  touch-action: none; user-select: none;
  image-rendering: auto;
}
#graph-canvas.dragging { cursor: grabbing; }

/* Graph HUD */
.graph-hud { position: absolute; z-index: 20; pointer-events: none; }
.graph-hud > * { pointer-events: auto; }
.zoom-controls, .zoom-btn { pointer-events: auto; }
.graph-hud-tl { top: 12px; left: 12px; transition: left var(--transition); }
.graph-stage.sources-open .graph-hud-tl { left: calc(min(360px, 100% - 24px) + 20px); }
.graph-hud-tr { top: 12px; right: 12px; max-width: 180px; }
.graph-hud-bc {
  bottom: 12px; left: 50%; transform: translateX(-50%);
  width: min(100%, 680px); padding: 0 12px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.zoom-controls {
  display: none; flex-direction: row; gap: 2px;
  padding: 3px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border-subtle);
}
.zoom-controls.active { display: flex; }
.zoom-btn {
  width: 28px; height: 28px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted-foreground);
  cursor: pointer; font-size: 14px; font-family: var(--mono);
  transition: background var(--transition);
}
.zoom-btn:hover { background: rgba(255,255,255,0.05); color: var(--foreground); }
.zoom-level {
  font: 500 10px var(--mono); color: var(--muted-foreground);
  padding: 0 6px; display: flex; align-items: center;
}
.legend {
  display: none; flex-direction: column; gap: 5px;
  padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border-subtle);
  font-size: 11px;
}
.legend.active { display: flex; }
.legend-title {
  font-size: 11px; font-weight: 500; color: var(--muted-foreground);
  margin-bottom: 4px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}
.legend-item { display: flex; align-items: center; gap: 8px; color: var(--secondary-foreground); }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.graph-status {
  font: 500 11px var(--mono); color: var(--muted-foreground);
  padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border-subtle);
}
.stats-bar {
  display: none; flex-wrap: wrap; justify-content: center; gap: 4px;
  padding: 4px 6px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border-subtle);
  width: 100%;
}
.stats-bar.active { display: flex; }
.stat-item {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: var(--radius-sm);
  font-size: 12px;
}
.stat-item .k { color: var(--muted-foreground); font-size: 11px; display: flex; align-items: center; gap: 4px; }
.stat-item .k i { font-size: 11px; width: 12px; text-align: center; }
.stat-item .v { font: 500 12px var(--mono); color: var(--foreground); }

.sources-panel {
  position: absolute; top: 12px; left: 12px; bottom: 12px; width: min(360px, calc(100% - 24px));
  z-index: 25; display: none; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden;
}
.sources-panel.open { display: flex; }
.sources-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0;
}
.sources-title { font-size: 14px; font-weight: 500; }
.sources-sub { font-size: 11px; color: var(--muted-foreground); margin-top: 3px; }
.sources-sub a { color: var(--accent); text-decoration: none; }
.sources-list { flex: 1; overflow-y: auto; padding: 8px; }
.source-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px; margin-bottom: 4px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.source-row:hover { background: rgba(255,255,255,0.04); border-color: var(--border-subtle); }
.source-row i { width: 16px; margin-top: 2px; color: var(--muted-foreground); flex-shrink: 0; }
.source-row-body { flex: 1; min-width: 0; }
.source-row-name { font-size: 13px; font-weight: 500; color: var(--foreground); }
.source-row-desc { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; line-height: 1.4; }
.source-row-action {
  font-size: 11px; color: var(--accent); flex-shrink: 0; padding-top: 2px;
}

.empty-state, .loader {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; padding: 24px 28px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface); z-index: 10;
}
.empty-state { color: var(--muted-foreground); pointer-events: none; }
.empty-title { font-size: 13px; font-weight: 500; color: var(--secondary-foreground); margin-bottom: 6px; }
.empty-sub { font-size: 12px; color: var(--muted-foreground); }
.empty-state i { font-size: 24px; color: var(--muted-foreground); margin-bottom: 12px; display: block; opacity: 0.5; }
.loader { display: none; pointer-events: none; }
.loader.active { display: block; }
.loader-text { font-size: 13px; font-weight: 500; color: var(--secondary-foreground); }
.loader-sub { font-size: 12px; color: var(--muted-foreground); margin-top: 6px; }
.loader-bar {
  width: 160px; height: 2px; margin: 14px auto 0;
  background: var(--border); border-radius: 1px; overflow: hidden;
}
.loader-bar-fill {
  height: 100%; width: 30%; background: var(--accent);
  animation: loader-slide 1.2s ease-in-out infinite;
}
@keyframes loader-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }

/* ── Profile / entity panel ── */
.profile-panel {
  display: none; flex-direction: column;
  height: 100%; overflow-y: auto; overflow-x: hidden;
  background: var(--surface);
  border-left: 1px solid var(--border-subtle);
}
.profile-panel.active { display: flex; }
.profile-header {
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.profile-avatar {
  width: 64px; height: 64px; border-radius: var(--radius-md);
  object-fit: cover; margin-bottom: 12px;
  border: 1px solid var(--border-subtle);
}
.profile-name { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.profile-username { font-size: 13px; color: var(--accent); margin-top: 2px; font-family: var(--mono); }
.profile-meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
  font-size: 12px; color: var(--muted-foreground);
}
.profile-meta span {
  padding: 3px 8px; border-radius: var(--radius-sm);
  background: var(--surface-secondary); border: 1px solid var(--border-subtle);
}
.profile-meta strong { color: var(--foreground); font-weight: 500; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.badge-tag {
  font-size: 11px; font-weight: 500; padding: 3px 8px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);
}
.badge-tag.premium { color: var(--warning); background: rgba(201,162,39,0.08); }
.badge-tag.verified { color: var(--info); background: rgba(107,159,212,0.08); }
.badge-tag.bot { color: var(--accent); background: var(--accent-muted); }
.badge-tag.scam { color: var(--danger); background: rgba(217,112,112,0.08); }

.profile-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.profile-section-title {
  font-size: 11px; font-weight: 500; color: var(--muted-foreground);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.profile-section-title i { margin-right: 6px; font-size: 12px; }
.profile-section-title .count {
  font-size: 11px; padding: 2px 7px; border-radius: var(--radius-sm);
  background: var(--surface-secondary); color: var(--secondary-foreground);
  border: 1px solid var(--border-subtle);
}
.old-usernames-highlight {
  margin: 0; padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
}
.old-username-tag {
  display: inline-block; padding: 4px 8px; margin: 2px;
  font: 500 12px var(--mono); color: var(--foreground);
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--transition);
}
.old-username-tag:hover { background: var(--bg-hover); }

.gift-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.gift-stat {
  padding: 12px; text-align: center;
  background: var(--surface-secondary); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.gift-stat .num { font: 600 20px var(--mono); color: var(--foreground); }
.gift-stat .lbl { font-size: 11px; color: var(--muted-foreground); margin-top: 4px; }

.gift-item, .recipient-item, .channel-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px; margin-bottom: 6px;
  background: var(--surface-secondary); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); font-size: 13px;
}
.gift-icon, .recipient-icon, .channel-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border-subtle);
  display: grid; place-items: center; font-size: 13px; color: var(--muted-foreground);
}
.gift-info, .recipient-info, .channel-body { flex: 1; min-width: 0; }
.gift-from, .recipient-name, .channel-name { font-weight: 500; font-size: 13px; }
.gift-from-username, .recipient-username, .channel-username {
  font-size: 12px; color: var(--muted-foreground); margin-top: 2px;
  font-family: var(--mono);
}
.gift-from-phone, .gift-date { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.gift-stars, .gift-nft-label, .recipient-count {
  font-size: 11px; font-weight: 500; color: var(--secondary-foreground); flex-shrink: 0;
}

.error-box {
  display: none; margin: 12px 16px; padding: 10px 12px;
  font-size: 13px; color: var(--danger);
  background: rgba(217,112,112,0.06); border: 1px solid rgba(217,112,112,0.2);
  border-radius: var(--radius-md);
}
.error-box.active { display: block; }

.osint-sources { display: flex; flex-direction: column; gap: 8px; }
.osint-card {
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); background: var(--surface-secondary);
}
.osint-card.ok { border-color: rgba(90,138,106,0.35); }
.osint-card.warn { border-color: rgba(163,132,84,0.35); }
.osint-card-head { font-size: 12px; font-weight: 500; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.osint-card-body { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--muted-foreground); font-family: var(--mono); }
.osint-posts { display: flex; flex-direction: column; gap: 4px; }
.osint-post {
  display: block; font-size: 11px; line-height: 1.4; color: var(--secondary-foreground);
  padding: 6px 8px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.03);
  text-decoration: none; border: 1px solid transparent;
}
a.osint-post:hover { border-color: var(--border-subtle); color: var(--accent); }
.name-history-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 6px 10px; margin-bottom: 4px; border-radius: var(--radius-sm);
  font-size: 12px; background: var(--surface-secondary); border: 1px solid var(--border-subtle);
}
.name-history-row span:last-child { color: var(--muted-foreground); font-size: 11px; font-family: var(--mono); }

.ily-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 6px 0; font-size: 12px; border-bottom: 1px solid var(--border-subtle);
}
.ily-row span { color: var(--muted-foreground); }
.ily-row strong { font-family: var(--mono); color: var(--accent); font-weight: 500; }
.ily-block-title {
  font-size: 11px; font-weight: 500; color: var(--secondary-foreground);
  margin: 12px 0 6px; text-transform: uppercase; letter-spacing: 0.04em;
}
.ily-line {
  font-size: 11px; padding: 4px 0; color: var(--secondary-foreground);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.ily-line span { display: block; font-size: 10px; color: var(--muted-foreground); font-family: var(--mono); margin-bottom: 2px; }
.ily-cat { font-size: 12px; font-weight: 500; margin: 8px 0 4px; color: var(--foreground); }
.ily-cat em { font-size: 10px; color: var(--muted-foreground); font-style: normal; font-weight: 400; }
.ily-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ily-tags span {
  font-size: 10px; padding: 3px 7px; border-radius: var(--radius-sm);
  background: var(--surface-secondary); border: 1px solid var(--border-subtle);
  font-family: var(--mono); color: var(--secondary-foreground);
}

/* ── Tool panels (AI / Chain) ── */
.fab-dock {
  position: fixed; right: calc(var(--panel-w) + 12px); top: calc(var(--topbar-h) + 12px);
  z-index: 80; display: flex; flex-direction: column; gap: 6px;
}
.fab-btn {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); cursor: pointer;
  background: var(--surface); color: var(--secondary-foreground);
  font-size: 12px; font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.fab-btn:hover { background: var(--surface-secondary); color: var(--accent); }
.float-panel {
  position: fixed; z-index: 90; display: none; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
  max-height: min(72vh, 640px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.float-panel.open { display: flex; }
.float-panel.ai-panel {
  right: calc(var(--panel-w) + 12px); top: calc(var(--topbar-h) + 56px);
  width: min(440px, calc(100vw - var(--panel-w) - 48px));
}
.float-panel.chain-panel {
  left: calc(var(--sidebar-w) + 12px); top: calc(var(--topbar-h) + 56px);
  width: min(480px, calc(100vw - var(--sidebar-w) - var(--panel-w) - 48px));
}
.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--border-subtle);
}
.panel-head-title { font-size: 14px; font-weight: 500; }
.panel-head-sub { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.panel-close {
  border: none; background: none; color: var(--muted-foreground);
  cursor: pointer; font-size: 16px; padding: 4px;
}
.panel-close:hover { color: var(--foreground); }
.panel-progress {
  display: none; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle);
  font-size: 12px; color: var(--muted-foreground);
}
.panel-progress.is-active { display: block; }
.panel-progress-bar {
  height: 2px; margin-top: 6px; background: var(--border); border-radius: 1px; overflow: hidden;
}
.panel-progress-fill { height: 100%; background: var(--accent); transition: width 0.2s; }
.panel-body { flex: 1; overflow-y: auto; padding: 14px; font-size: 13px; line-height: 1.5; }
.panel-foot {
  display: flex; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--border-subtle);
}
.btn-primary {
  flex: 1; height: 34px; border: none; border-radius: var(--radius-sm);
  background: var(--accent-muted); color: var(--accent);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background var(--transition);
}
.btn-primary:hover:not(:disabled) { background: rgba(124,140,255,0.2); }
.btn-secondary {
  height: 34px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); background: transparent;
  color: var(--secondary-foreground); font-size: 12px; font-weight: 500; cursor: pointer;
}

/* ── Gift network controls ── */
.gift-network-box { padding: 10px 14px; border-top: 1px solid var(--border-subtle); background: rgba(240,168,62,.025); }
.gift-network-title { font-size: 11px; font-weight: 700; color: #f0a83e; letter-spacing: .04em; }
.gift-network-sub { margin-top: 3px; font-size: 10px; line-height: 1.4; color: var(--muted-foreground); }
.gift-network-controls { display: flex; gap: 6px; margin-top: 8px; }
.gift-network-input { min-width: 0; flex: 1; height: 32px; padding: 0 9px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-secondary); color: var(--foreground); font: 500 11px var(--mono); outline: none; }
.gift-network-input:focus { border-color: rgba(240,168,62,.4); }
.gift-network-status { margin-top: 7px; font-size: 9px; line-height: 1.35; color: var(--muted-foreground); }

/* ── Settings panel ── */
.settings-backdrop {
  position: fixed; inset: 0; z-index: 99980;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.settings-backdrop.show { opacity: 1; pointer-events: auto; }
[data-theme="light"] .settings-backdrop { background: rgba(15, 20, 30, 0.35); }
.settings-panel {
  position: fixed; z-index: 99985; top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(0.98);
  width: min(420px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  opacity: 0; pointer-events: none; transition: opacity var(--transition), transform var(--transition);
}
.settings-panel.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.settings-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 16px; }
.settings-group-label {
  font-size: 11px; font-weight: 500; color: var(--muted-foreground);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;
}
.settings-segment {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.seg-btn {
  flex: 1; min-width: 100px; height: 34px; padding: 0 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);
  background: var(--surface-secondary); color: var(--secondary-foreground);
  font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.seg-btn:hover { border-color: var(--border-hover); color: var(--foreground); }
.seg-btn.active {
  background: var(--accent-muted); border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
}
.settings-token-box {
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); background: var(--surface-secondary);
}
.settings-token-box p { font-size: 12px; color: var(--muted-foreground); margin-bottom: 8px; }
.settings-token-session {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 12px;
}
.settings-token-session.hidden { display: none; }
.settings-token-badge {
  padding: 2px 8px; border-radius: 999px;
  background: var(--accent-muted); color: var(--accent); font: 600 11px var(--mono);
}
.settings-token-meta { color: var(--muted-foreground); font: 500 11px var(--mono); }
.settings-token-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-token-actions .btn-secondary { flex: 1; min-width: 120px; height: 34px; }
.btn-danger { border-color: color-mix(in srgb, var(--destructive, #ef4444) 35%, transparent); color: var(--destructive, #ef4444); }
.auth-admin-hint {
  margin-top: 12px; font-size: 11px; color: var(--muted-foreground); text-align: center;
}

/* ── Auth gate ── */
.auth-gate {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0,0,0,0.75);
}
.auth-gate.hidden { display: none; }
.auth-card {
  width: min(400px, 100%); padding: 24px;
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.auth-logo {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--surface-secondary); border: 1px solid var(--border-subtle);
  display: grid; place-items: center; font: 600 12px var(--mono); color: var(--accent);
}
.auth-brand strong { font-size: 14px; font-weight: 600; }
.auth-brand span { display: block; font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin-bottom:16px; border:1px solid var(--border-subtle); border-radius:9px; background:rgba(255,255,255,.025); }
.auth-tab { border:0; background:transparent; color:var(--muted-foreground); border-radius:6px; padding:8px; cursor:pointer; font:600 12px inherit; }
.auth-tab.active { background:rgba(124,140,255,.14); color:var(--foreground); }
.auth-card .auth-label + .auth-input-wrap { margin-bottom:10px; }
.auth-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.auth-sub { font-size: 13px; color: var(--muted-foreground); line-height: 1.5; margin-bottom: 16px; }
.auth-label { display: block; font-size: 11px; font-weight: 500; color: var(--muted-foreground); margin-bottom: 6px; }
.auth-input-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px; height: 36px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--surface-secondary);
}
.auth-input-wrap:focus-within { border-color: rgba(124,140,255,0.45); }
.auth-key { color: var(--muted-foreground); font-size: 12px; }
.auth-input {
  flex: 1; border: none; outline: none; background: transparent;
  color: var(--foreground); font: 500 13px var(--mono);
}
.auth-btn {
  width: 100%; margin-top: 12px; height: 36px;
  border: none; border-radius: var(--radius-sm);
  background: var(--accent-muted); color: var(--accent);
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.auth-btn:hover:not(:disabled) { background: rgba(124,140,255,0.2); }
.auth-remember { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--muted-foreground); cursor: pointer; }
.auth-error { min-height: 16px; margin-top: 10px; font-size: 12px; color: var(--danger); }
.auth-status { margin-top: 14px; padding: 8px 10px; font-size: 11px; color: var(--muted-foreground); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }

/* ── Command palette ── */
.command-palette {
  position: fixed; inset: 0; z-index: 99990;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 15vh; background: rgba(0,0,0,0.5);
}
.command-palette.hidden { display: none; }
.command-dialog {
  width: min(560px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.command-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; height: 44px; border-bottom: 1px solid var(--border-subtle);
}
.command-input-wrap i { color: var(--muted-foreground); }
.command-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; color: var(--foreground);
}
.command-hints { padding: 8px 14px 12px; }
.command-hint { font-size: 12px; color: var(--muted-foreground); padding: 6px 0; }
.command-hint strong { color: var(--secondary-foreground); font-weight: 500; }

.mobile-graph-hint { display: none; }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

button:focus-visible, input:focus-visible { outline: 2px solid rgba(124,140,255,0.5); outline-offset: 1px; }

/* Responsive */
@media (max-width: 1280px) { :root { --panel-w: 340px; } }
@media (max-width: 1050px) {
  :root { --panel-w: 320px; }
  .fab-dock { right: 12px; }
  .float-panel.ai-panel { right: 12px; width: min(420px, calc(100vw - 24px)); }
  .float-panel.chain-panel { left: 12px; width: min(420px, calc(100vw - 24px)); }
}
@media (max-width: 820px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform var(--transition); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 35; }
  .sidebar-backdrop.show { display: block; }
  .main-area { display: block; }
  .profile-panel {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 50;
    height: min(55vh, 520px) !important; max-height: 72vh;
    border-left: none; border-top: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .graph-hud-tr { display: none; }
  .fab-dock { right: 10px; top: auto; bottom: calc(min(55vh, 520px) + 10px); flex-direction: row; }
  .mobile-graph-hint {
    display: flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    padding: 6px 12px; font-size: 11px; color: var(--muted-foreground);
    background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  }
  .mobile-graph-hint.hide { opacity: 0; pointer-events: none; }
}


/* ============================================================
   G2 NEXUS — Premium visual layer
   Keeps existing functionality while giving the workspace a
   cleaner, more spacious intelligence-dashboard appearance.
   ============================================================ */

:root {
  --panel-w: 390px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 14px;
}

body {
  letter-spacing: -0.01em;
}

.sidebar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--accent) 6%), var(--surface));
  box-shadow: 8px 0 30px rgba(0,0,0,.08);
}

.sidebar-brand {
  min-height: 58px;
  padding: 14px 16px;
}

.sidebar-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--accent-muted), var(--surface-secondary));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border-subtle));
  box-shadow: 0 0 22px rgba(124,140,255,.10);
}

.nav-item {
  min-height: 36px;
  margin: 2px 0;
}

.nav-item.active {
  background: linear-gradient(90deg, var(--accent-muted), transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}

.main-area {
  grid-template-columns: minmax(0, 1fr) var(--panel-w);
}

.graph-stage {
  background:
    radial-gradient(circle at 50% 48%, rgba(124,140,255,.055), transparent 46%),
    var(--graph-bg);
}

#graph-canvas {
  filter: saturate(1.05);
}

.graph-hud-tl {
  top: 16px;
  left: 16px;
}

.zoom-controls {
  padding: 4px;
  gap: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.zoom-btn {
  width: 32px;
  height: 30px;
  border-radius: 7px;
}

.zoom-btn:hover {
  background: var(--accent-muted);
  color: var(--accent);
}

.zoom-level {
  min-width: 52px;
  justify-content: center;
}

.legend {
  padding: 12px;
  min-width: 170px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
}

.graph-status {
  border-radius: 999px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}

.stats-bar {
  gap: 6px;
  padding: 6px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px rgba(0,0,0,.20);
}

.stat-item {
  padding: 5px 10px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-secondary) 78%, transparent);
}

.profile-panel {
  box-shadow: -14px 0 34px rgba(0,0,0,.10);
}

.profile-header {
  padding: 22px 18px 18px;
  background:
    radial-gradient(circle at 100% 0%, var(--accent-muted), transparent 42%),
    var(--surface);
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.profile-name {
  font-size: 18px;
}

.profile-section {
  padding: 16px 18px;
}

.old-usernames-highlight {
  margin: 0 12px 10px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-muted), var(--surface-secondary));
}

.old-username-tag {
  border-radius: 999px;
  padding: 5px 9px;
}

.gift-item, .recipient-item, .channel-item {
  border-radius: 11px;
  padding: 11px;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.gift-item:hover, .recipient-item:hover, .channel-item:hover {
  transform: translateY(-1px);
  border-color: var(--border-hover);
  background: var(--bg-hover);
}

.float-panel,
.settings-panel,
.command-dialog,
.auth-card {
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.32);
  backdrop-filter: blur(18px);
}

.auth-gate {
  background:
    radial-gradient(circle at 50% 30%, rgba(124,140,255,.13), transparent 38%),
    rgba(0,0,0,.78);
}

.auth-card {
  padding: 28px;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border-subtle));
}

.auth-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--accent-muted), var(--surface-secondary));
}

.auth-btn,
.btn-primary {
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent-muted), color-mix(in srgb, var(--accent) 8%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.search-bar,
.topbar {
  backdrop-filter: blur(12px);
}

@media (max-width: 1280px) {
  :root { --panel-w: 360px; }
}

@media (max-width: 1050px) {
  :root { --panel-w: 330px; }
}

@media (max-width: 820px) {
  .profile-panel {
    box-shadow: 0 -16px 40px rgba(0,0,0,.20);
    border-radius: 18px 18px 0 0;
  }

  .graph-hud-tl {
    top: 10px;
    left: 10px;
  }

  .stats-bar {
    max-width: calc(100vw - 20px);
    overflow-x: auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .stats-bar::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 520px) {
  .profile-header {
    padding: 16px;
  }

  .profile-section {
    padding: 13px 14px;
  }

  .graph-status {
    font-size: 10px;
  }
}


/* Sidebar credits */
.sidebar {
  position: relative;
}

.sidebar-footer {
  margin-top: auto;
  padding: 16px 16px 18px;
  border-top: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface-secondary) 55%, transparent));
}

.sidebar-credit {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--text-secondary);
  opacity: .82;
}

.sidebar-credit-secondary {
  margin-top: 2px;
  color: var(--text-tertiary);
  opacity: .62;
}


/* Final sidebar credit placement */
.sidebar-foot {
  margin-top: auto;
  padding-top: 10px;
}

.sidebar-credits {
  margin: 12px 10px 2px;
  padding: 11px 10px 4px;
  border-top: 1px solid var(--border-subtle);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.75;
  letter-spacing: .035em;
  color: var(--text-secondary);
  opacity: .85;
}

.sidebar-credit-secondary {
  margin-top: 3px;
  color: var(--text-tertiary);
  opacity: .68;
}

/* More obvious graph hierarchy */
.graph-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 24%, rgba(0,0,0,.035) 62%, rgba(0,0,0,.14) 100%);
  z-index: 1;
}

.graph-hud {
  z-index: 3;
}

.graph-hud-tl,
.graph-hud-tr,
.graph-hud-bc {
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.16));
}

@media (max-width: 820px) {
  .sidebar-credits {
    margin-bottom: 8px;
  }
}

/* ============================================================
   Syntax — NFT username + AI evidence graph layer
   ============================================================ */
.nft-username-section {
  background: linear-gradient(135deg, rgba(157,124,255,.055), rgba(98,168,255,.025));
}
.nft-username-card {
  padding: 12px;
  margin-top: 8px;
  border: 1px solid rgba(157,124,255,.22);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(157,124,255,.07), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.nft-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.nft-title {
  font: 800 13px var(--mono);
  color: #d9d2ff;
}
.nft-badge {
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(157,124,255,.32);
  background: rgba(157,124,255,.1);
  color: #bda9ff;
  font: 800 8px var(--mono);
  letter-spacing: .8px;
}
.nft-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.nft-grid > div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 8px;
  background: rgba(0,0,0,.12);
}
.nft-grid > .wide { grid-column: 1 / -1; }
.nft-grid span {
  display: block;
  margin-bottom: 2px;
  color: #6f7b8e;
  font: 700 8px var(--mono);
  text-transform: uppercase;
  letter-spacing: .65px;
}
.nft-grid b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d7deea;
  font: 600 10px var(--mono);
}
.wallet-muted { color: #737f91 !important; }
.nft-source-link { color: #8fb9ff; text-decoration: none; }
.nft-source-link:hover { text-decoration: underline; }
.nft-note {
  margin-top: 9px;
  color: #6f7b8e;
  font-size: 9px;
  line-height: 1.45;
}

.ai-graph-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(2,5,10,.72);
  backdrop-filter: blur(10px);
}
.ai-graph-modal.open { display: flex; }
.ai-graph-shell {
  width: min(1080px, calc(100vw - 30px));
  height: min(720px, calc(100vh - 44px));
  min-height: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(124,140,255,.2);
  border-radius: 18px;
  background: #090d14;
  box-shadow: 0 30px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.035);
}
.ai-graph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.065);
  background: rgba(12,17,27,.86);
}
.ai-graph-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#ai-graph-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.ai-graph-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #697487;
  font: 600 12px var(--mono);
  text-align: center;
  pointer-events: none;
}
.ai-graph-legend {
  position: absolute;
  left: 14px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background: rgba(9,13,20,.76);
  color: #7f8999;
  font: 600 9px var(--mono);
  backdrop-filter: blur(8px);
}
.ai-graph-legend .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  vertical-align: middle;
}
.ai-graph-legend .dot.target { background: #62a8ff; box-shadow: 0 0 8px rgba(98,168,255,.55); }
.ai-graph-legend .dot.evidence { background: #8d96a6; }
.ai-graph-legend .dot.source { background: #9d7cff; box-shadow: 0 0 8px rgba(157,124,255,.4); }

@media (max-width: 600px) {
  .nft-grid { grid-template-columns: 1fr; }
  .nft-grid > .wide { grid-column: auto; }
  .ai-graph-modal { padding: 8px; }
  .ai-graph-shell { width: 100%; height: calc(100vh - 16px); min-height: 0; border-radius: 14px; }
}


/* ============================================================
   Syntax — Search history / Overview
   ============================================================ */
.profile-panel.overview-mode {
  overflow: hidden;
}
.profile-panel.overview-mode > *:not(#overviewContent) {
  display: none !important;
}
.overview-content {
  display: none;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.profile-panel.overview-mode .overview-content {
  display: flex;
}
.overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--border-subtle);
  background:
    radial-gradient(circle at 100% 0%, var(--accent-muted), transparent 46%),
    var(--surface);
}
.overview-title {
  font-size: 15px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 8px;
}
.overview-title i { color: var(--accent); }
.overview-sub {
  margin-top: 6px;
  color: var(--muted-foreground);
  font-size: 11px;
  line-height: 1.5;
}
.overview-refresh {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--surface-secondary);
  color: var(--secondary-foreground);
  cursor: pointer;
}
.overview-refresh:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-subtle));
  background: var(--accent-muted);
}
.overview-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--muted-foreground);
  font: 500 10px var(--mono);
}
.overview-summary strong { color: var(--foreground); }
.history-token-note {
  color: var(--accent);
  opacity: .8;
}
.history-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
}
.history-card {
  padding: 12px;
  margin-bottom: 9px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--surface-secondary), var(--surface));
  transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}
.history-card:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border-subtle));
  transform: translateY(-1px);
}
.history-card-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.history-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-subtle));
  background: var(--accent-muted);
  color: var(--accent);
  font: 700 13px var(--mono);
}
.history-target { min-width: 0; }
.history-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
}
.history-username {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  font: 500 10px var(--mono);
}
.history-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 5px;
  color: var(--muted-foreground);
  font: 500 9px var(--mono);
}
.history-mode {
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  color: var(--muted-foreground);
}
.history-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 10px 0;
}
.history-stats span {
  min-width: 0;
  padding: 6px 5px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--muted-foreground);
  text-align: center;
  font: 500 8px var(--mono);
}
.history-stats b {
  display: block;
  margin-top: 2px;
  color: var(--foreground);
  font-size: 10px;
}
.history-open {
  width: 100%;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-subtle));
  border-radius: 8px;
  background: var(--accent-muted);
  color: var(--accent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}
.history-open:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.history-open:disabled { opacity: .55; cursor: wait; }
.history-empty {
  min-height: 180px;
  padding: 30px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted-foreground);
  text-align: center;
  font-size: 11px;
}
.history-empty i {
  color: var(--accent);
  font-size: 22px;
  margin-bottom: 4px;
}
.history-empty strong {
  color: var(--foreground);
  font-size: 13px;
}
.history-empty span {
  max-width: 280px;
  line-height: 1.5;
}
@media (max-width: 820px) {
  .overview-head { padding: 15px; }
  .overview-summary { padding: 9px 15px; }
  .history-list { padding: 10px; }
}
@media (max-width: 520px) {
  .history-stats { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   ENTITY PROFILE — Screenshot-inspired workspace
   ============================================================ */
:root { --panel-w: 430px; }

.profile-panel {
  background:
    radial-gradient(circle at 50% 0%, rgba(38,91,190,.07), transparent 34%),
    #0a1017;
  border-left: 1px solid #1c2a3a;
}

.entity-profile-tabs {
  display:flex;
  gap:5px;
  padding:8px 10px 7px;
  overflow-x:auto;
  scrollbar-width:thin;
  border-bottom:1px solid #172331;
  background:#0b121a;
  position:sticky;
  top:0;
  z-index:30;
}
.entity-profile-tabs::-webkit-scrollbar{height:3px}
.entity-profile-tabs::-webkit-scrollbar-thumb{background:#27364a;border-radius:9px}
.entity-tab{
  flex:0 0 auto;
  height:32px;
  border:1px solid #182737;
  border-radius:7px;
  background:#0d1721;
  color:#8493a7;
  padding:0 11px;
  display:flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  font:500 10px var(--font);
  white-space:nowrap;
  transition:.15s ease;
}
.entity-tab i{font-size:10px}
.entity-tab:hover{color:#dbe5f3;border-color:#2a405a;background:#111c28}
.entity-tab.active{
  color:#fff;
  border-color:#3267db;
  background:linear-gradient(180deg,#285bd0,#1c47a9);
  box-shadow:0 0 16px rgba(39,95,218,.18);
}

.profile-header{
  padding:18px 17px 16px;
  min-height:175px;
  background:
    radial-gradient(circle at 12% 45%,rgba(45,96,255,.13),transparent 35%),
    linear-gradient(120deg,#0b141e,#0b1118);
  border-bottom:1px solid #1b2a3a;
}
.profile-avatar{
  width:78px;height:78px;border-radius:50%;padding:3px;
  border:2px solid #3767ff;
  box-shadow:0 0 18px rgba(52,92,255,.7),0 0 34px rgba(52,92,255,.2);
  margin-bottom:10px;
}
.profile-name{font-size:18px;font-weight:700;color:#eef3fb}
.profile-username{font-size:12px;color:#47bfff;margin-top:3px}
.profile-meta{margin-top:8px}
.profile-meta span{background:#0c1722;border-color:#203246;font-size:10px}
.badge-tag{font-size:9px;padding:3px 7px;border-radius:10px}

.entity-basic-card{
  margin:10px;
  padding:13px;
  border:1px solid #1c2b3b;
  border-radius:9px;
  background:linear-gradient(145deg,#0c151f,#0b121a);
}
.entity-section-title{
  color:#e1e8f2;
  font-size:12px;
  font-weight:600;
  margin-bottom:10px;
}
.entity-section-title i{color:#6c96ff;margin-right:7px}
.entity-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.entity-info-grid>div{
  min-width:0;
  min-height:51px;
  padding:8px 9px;
  border:1px solid #172534;
  border-radius:7px;
  background:#0d1721;
}
.entity-info-grid span{
  display:block;
  color:#718095;
  font-size:9px;
  margin-bottom:5px;
}
.entity-info-grid b{
  display:block;
  color:#d9e2ee;
  font:500 10px var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.profile-section{
  padding:13px;
  border-bottom:1px solid #172331;
}
.profile-section-title{
  color:#8493a7;
  font-size:10px;
  letter-spacing:.06em;
}
.old-usernames-highlight{
  margin:0;
  padding:13px;
  background:#0c151f;
  border-bottom:1px solid #172534;
}
.old-username-tag{
  padding:5px 8px;
  font-size:10px;
  background:#0c1824;
  border-color:#1e3952;
  color:#43c6ff;
}
.gift-stat{
  padding:10px;
  background:#0c151f;
  border-color:#1a2938;
}
.gift-stat .num{font-size:19px}
.gift-item,.recipient-item,.channel-item{
  background:#0c151f;
  border-color:#1a2938;
  padding:9px;
}
.nft-username-card{
  background:#0c151f!important;
  border:1px solid #2b2350!important;
}
.geo-card{
  padding:12px;
  border:1px solid #1a2c3d;
  border-radius:9px;
  background:#0c151f;
}
.geo-row{
  display:flex;justify-content:space-between;gap:12px;
  padding:8px 0;border-bottom:1px solid #172534;
  font-size:10px;
}
.geo-row span{color:#748399}.geo-row b{color:#dbe4f0;font-family:var(--mono);font-weight:500;text-align:right}
.geo-note{margin-top:10px;color:#69788b;font-size:9px;line-height:1.5}
.geo-note i{color:#568cff;margin-right:5px}

.profile-panel:not(.overview-mode) .profile-tab-content[data-profile-content]{
  display:none;
}
.profile-panel:not(.overview-mode) .profile-tab-content[data-profile-content="profile"]{
  display:block;
}
.profile-panel.profile-tab-connections .profile-tab-content[data-profile-content="connections"],
.profile-panel.profile-tab-usernames .profile-tab-content[data-profile-content="usernames"],
.profile-panel.profile-tab-gifts .profile-tab-content[data-profile-content="gifts"],
.profile-panel.profile-tab-groups .profile-tab-content[data-profile-content="groups"],
.profile-panel.profile-tab-geo .profile-tab-content[data-profile-content="geo"],
.profile-panel.profile-tab-sources .profile-tab-content[data-profile-content="sources"]{
  display:block;
}
.profile-panel.profile-tab-connections .profile-header,
.profile-panel.profile-tab-usernames .profile-header,
.profile-panel.profile-tab-gifts .profile-header,
.profile-panel.profile-tab-groups .profile-header,
.profile-panel.profile-tab-geo .profile-header,
.profile-panel.profile-tab-sources .profile-header{
  display:block;
}
.profile-panel .profile-header{display:block}

@media(max-width:1100px){
  :root{--panel-w:390px}
}
@media(max-width:820px){
  :root{--panel-w:min(100vw,430px)}
  .entity-profile-tabs{padding-left:7px;padding-right:7px}
}
@media(max-width:520px){
  .entity-info-grid{grid-template-columns:1fr}
  .profile-header{padding:14px}
}

.profile-tab-empty{
  margin:12px;
  min-height:160px;
  border:1px dashed #223449;
  border-radius:10px;
  background:#0b131c;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#718096;
  text-align:center;
}
.profile-tab-empty i{font-size:22px;color:#4d78d8}
.profile-tab-empty strong{font-size:12px;color:#dce5f1}
.profile-tab-empty span{font-size:10px;max-width:280px;line-height:1.5}

/* A section may belong to more than one entity tab. */
.profile-panel:not(.overview-mode) .profile-tab-content[data-profile-content]{
  display:none;
}
.profile-panel:not(.overview-mode).profile-tab-profile .profile-tab-content[data-profile-content~="profile"],
.profile-panel:not(.overview-mode).profile-tab-connections .profile-tab-content[data-profile-content~="connections"],
.profile-panel:not(.overview-mode).profile-tab-usernames .profile-tab-content[data-profile-content~="usernames"],
.profile-panel:not(.overview-mode).profile-tab-gifts .profile-tab-content[data-profile-content~="gifts"],
.profile-panel:not(.overview-mode).profile-tab-groups .profile-tab-content[data-profile-content~="groups"],
.profile-panel:not(.overview-mode).profile-tab-geo .profile-tab-content[data-profile-content~="geo"],
.profile-panel:not(.overview-mode).profile-tab-sources .profile-tab-content[data-profile-content~="sources"]{
  display:block;
}

.profile-panel.overview-mode .entity-profile-tabs,
.profile-panel.overview-mode .profile-header,
.profile-panel.overview-mode .profile-tab-content,
.profile-panel.overview-mode .profile-section:not(.profile-tab-content),
.profile-panel.overview-mode .old-usernames-highlight{
  display:none !important;
}
.profile-panel.overview-mode .overview-content{display:flex}


/* ============================================================
   SYNTAX PROFILE + GRAPH FIX — 2026-09
   Keeps existing API/JS behavior and fixes the two visible issues:
   1) graph labels/chips colliding;
   2) entity profile looking too compressed inside the right panel.
   ============================================================ */

:root{
  --panel-w: 450px;
}

.profile-panel{
  min-width:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  background:
    radial-gradient(circle at 55% 0%, rgba(48,96,190,.10), transparent 34%),
    #0a1017;
  border-left:1px solid #1d2b3b;
  box-shadow:-18px 0 42px rgba(0,0,0,.18);
}

.profile-panel::-webkit-scrollbar{width:7px}
.profile-panel::-webkit-scrollbar-track{background:transparent}
.profile-panel::-webkit-scrollbar-thumb{background:#253447;border-radius:99px}

.entity-profile-tabs{
  position:sticky;
  top:0;
  z-index:40;
  padding:9px 10px 8px;
  background:rgba(10,16,23,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid #1b2a3a;
}

.entity-tab{
  height:31px;
  padding:0 10px;
  border-radius:8px;
  font-size:10px;
}

.profile-header{
  min-height:132px;
  display:grid !important;
  grid-template-columns:88px minmax(0,1fr);
  grid-template-rows:auto auto auto auto;
  column-gap:13px;
  align-items:center;
  padding:16px 16px 15px;
  background:
    radial-gradient(circle at 8% 48%, rgba(55,103,255,.18), transparent 34%),
    linear-gradient(125deg,#0b151f,#0b1118 68%,#0b1017);
  border-bottom:1px solid #1b2a3a;
}

.profile-avatar{
  grid-column:1;
  grid-row:1 / span 4;
  width:84px;
  height:84px;
  margin:0;
  border-radius:50%;
  object-fit:cover;
  padding:3px;
  border:2px solid #3d6dff;
  background:#111a26;
  box-shadow:0 0 18px rgba(52,92,255,.68),0 0 34px rgba(52,92,255,.18);
}

.profile-name{
  grid-column:2;
  grid-row:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:19px;
  line-height:1.2;
  font-weight:750;
  color:#eef3fb;
}

.profile-username{
  grid-column:2;
  grid-row:2;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#42bfff;
  font:600 11px var(--mono);
}

.profile-meta{
  grid-column:2;
  grid-row:3;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:6px;
}

.profile-meta span{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:4px 7px;
  border-radius:7px;
  background:#0c1722;
  border:1px solid #203246;
  color:#8998aa;
  font-size:9px;
}

.profile-meta strong{
  color:#dce5f1;
  font-family:var(--mono);
  font-weight:600;
}

.profile-header .badges{
  grid-column:2;
  grid-row:4;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:5px;
}

.profile-header .badge-tag{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid #26364a;
  background:#0d1721;
  color:#aebbd0;
  font:600 8px var(--mono);
  letter-spacing:.03em;
}

.profile-header .badge-tag.premium{
  color:#d3b6ff;
  border-color:#53388a;
  background:rgba(126,75,207,.12);
}
.profile-header .badge-tag.verified{
  color:#7eb4ff;
  border-color:#285a9d;
  background:rgba(43,106,190,.12);
}
.profile-header .badge-tag.bot{
  color:#64e0ac;
  border-color:#176d4a;
  background:rgba(24,116,78,.12);
}
.profile-header .badge-tag.scam{
  color:#ff8293;
  border-color:#803544;
  background:rgba(145,40,61,.12);
}

.entity-basic-card{
  margin:10px;
  padding:13px;
  border:1px solid #1d2d3e;
  border-radius:10px;
  background:linear-gradient(145deg,#0c151f,#0b121a);
  box-shadow:inset 0 1px rgba(255,255,255,.02);
}

.entity-section-title{
  display:flex;
  align-items:center;
  gap:5px;
  margin-bottom:10px;
  color:#e1e8f2;
  font-size:11px;
  font-weight:650;
}
.entity-section-title i{color:#6c96ff;margin-right:2px}

.entity-info-grid{
  grid-template-columns:1fr 1fr;
  gap:7px;
}

.entity-info-grid>div{
  min-height:55px;
  padding:8px 9px;
  border:1px solid #18293a;
  border-radius:8px;
  background:linear-gradient(145deg,#0d1721,#0c151e);
}

.entity-info-grid span{
  margin-bottom:5px;
  color:#738298;
  font-size:8px;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.entity-info-grid b{
  color:#dbe4ef;
  font:500 10px var(--mono);
}

.old-usernames-highlight{
  margin:0 10px 10px;
  padding:13px;
  border:1px solid #1b2d40;
  border-radius:10px;
  background:linear-gradient(145deg,#0c1722,#0b121a);
}

.old-usernames-highlight .profile-section-title{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:9px;
  color:#a5b2c4;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.old-usernames-highlight #pOldUsernames{
  display:flex !important;
  flex-wrap:wrap;
  gap:6px !important;
  margin-top:0 !important;
}

.old-username-tag{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:5px 8px !important;
  border:1px solid #1d3d57 !important;
  border-radius:999px !important;
  background:#0c1824 !important;
  color:#3fc7ff !important;
  font:600 9px var(--mono);
  transition:.15s ease;
}
.old-username-tag:hover{
  transform:translateY(-1px);
  border-color:#2e76a6 !important;
  background:#102438 !important;
}

.profile-section{
  padding:13px 14px;
  border-bottom:1px solid #172534;
}

.profile-section-title{
  display:flex;
  align-items:center;
  gap:5px;
  color:#8493a7;
  font-size:9px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.count{
  margin-left:auto;
  padding:3px 7px;
  border-radius:999px;
  background:#123b79;
  color:#72a7ff;
  font:700 8px var(--mono);
}

.nft-username-card{
  margin-top:8px;
  padding:11px;
  border:1px solid #2c2750 !important;
  border-radius:10px;
  background:linear-gradient(145deg,rgba(157,124,255,.075),rgba(255,255,255,.015)) !important;
}

.gift-item,.recipient-item,.channel-item{
  margin-top:6px;
  border-radius:9px;
  background:#0c151f;
  border:1px solid #1a2938;
}

.geo-card{
  border-radius:10px;
  background:#0c151f;
  border:1px solid #1a2c3d;
}

/* Graph canvas: give it a stable visual stage and keep HUD above the canvas. */
.graph-stage{
  background:
    radial-gradient(circle at 50% 46%,rgba(45,91,190,.075),transparent 48%),
    #070b10;
}
#graph-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}
.graph-hud{z-index:5}

/* Wider desktop panel; keep enough graph width for the radial layout. */
@media(max-width:1280px){
  :root{--panel-w:410px}
}
@media(max-width:1100px){
  :root{--panel-w:390px}
}
@media(max-width:820px){
  :root{--panel-w:min(100vw,460px)}
  .profile-header{
    grid-template-columns:76px minmax(0,1fr);
    column-gap:11px;
    padding:15px;
  }
  .profile-avatar{width:72px;height:72px}
}
@media(max-width:520px){
  :root{--panel-w:100vw}
  .profile-header{grid-template-columns:68px minmax(0,1fr);padding:14px}
  .profile-avatar{width:64px;height:64px}
  .profile-name{font-size:17px}
  .entity-info-grid{grid-template-columns:1fr 1fr}
}

/* ── Graph AI OSINT enrichment ── */
.graph-enrich-fab {
  width: 36px; height: 36px; margin-top: 7px; border-radius: var(--radius-sm);
  border: 1px solid rgba(124,140,255,.42); cursor: pointer;
  background: var(--surface); color: var(--accent); font-size: 14px;
  box-shadow: 0 5px 18px rgba(0,0,0,.24); transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.graph-enrich-fab:hover { transform: translateY(-1px); background: var(--surface-secondary); border-color: rgba(124,140,255,.72); }
.graph-enrich-panel {
  position: fixed; z-index: 95; display: none; flex-direction: column;
  right: calc(var(--panel-w) + 58px); top: calc(var(--topbar-h) + 12px);
  width: min(360px, calc(100vw - var(--panel-w) - 90px));
  max-height: min(72vh, 620px); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.42);
}
.graph-enrich-panel.open { display: flex; }
.graph-enrich-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border-subtle); }
.graph-enrich-body { padding:14px; overflow:auto; }
.graph-enrich-label { display:block; margin:0 0 6px; font-size:11px; color:var(--muted-foreground); }
.graph-enrich-label span { opacity:.7; }
.graph-enrich-input { width:100%; box-sizing:border-box; margin-bottom:11px; padding:9px 10px; border:1px solid var(--border-subtle); border-radius:8px; background:var(--surface-secondary); color:var(--foreground); font:12px var(--mono); }
.graph-enrich-input:focus { outline:2px solid rgba(124,140,255,.25); border-color:rgba(124,140,255,.55); }
.graph-enrich-anchor { margin:2px 0 12px; padding:8px 10px; border-radius:8px; background:rgba(98,168,255,.06); border:1px solid rgba(98,168,255,.18); color:var(--muted-foreground); font:10px var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.graph-enrich-actions { display:flex; gap:8px; }
.graph-enrich-actions button { flex:1; }
.graph-enrich-status { min-height:16px; margin-top:9px; font-size:11px; color:var(--muted-foreground); }
@media (max-width:1050px) {
  .graph-enrich-panel { right:12px; width:min(380px, calc(100vw - 24px)); top:calc(var(--topbar-h) + 58px); }
}
@media (max-width:820px) {
  .graph-enrich-fab { margin-top:0; margin-left:6px; }
  .graph-enrich-panel { right:10px; left:10px; width:auto; top:auto; bottom:calc(min(55vh, 520px) + 58px); max-height:55vh; }
}

/* HIT CODE panel */
.hit-code-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(4px);z-index:1200;opacity:0;pointer-events:none;transition:.18s ease}
.hit-code-backdrop.show{opacity:1;pointer-events:auto}
.hit-code-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-48%) scale(.98);width:min(430px,calc(100vw - 28px));background:var(--surface);border:1px solid var(--border-subtle);border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.45);z-index:1201;opacity:0;pointer-events:none;transition:.18s ease}
.hit-code-panel.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.hit-code-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border-subtle)}
.hit-code-title{font-size:14px;font-weight:700}.hit-code-sub{font-size:10px;color:var(--muted-foreground);margin-top:3px}
.hit-code-body{padding:16px}.hit-code-input{width:100%;box-sizing:border-box;height:42px;border:1px solid var(--border-subtle);border-radius:9px;background:var(--surface-secondary);color:var(--foreground);padding:0 12px;font:12px var(--mono);outline:none}.hit-code-input:focus{border-color:rgba(124,140,255,.55)}
.hit-code-actions{display:flex;gap:8px;margin-top:12px}.hit-code-actions button{flex:1;height:38px}
.hit-code-status{min-height:18px;margin-top:10px;font-size:11px;color:var(--muted-foreground);line-height:1.5}.hit-code-status.ok{color:var(--success)}.hit-code-status.err{color:var(--danger)}
.hit-code-active{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:9px 10px;border-radius:9px;background:rgba(72,220,153,.06);border:1px solid rgba(72,220,153,.18);font-size:11px}

/* ============================================================
   THEME CONSISTENCY FIX — 2026-09-18
   The entity/profile layer previously contained hard-coded dark
   colors, so changing the global theme only recolored the shell.
   Everything below intentionally uses the design-system variables.
   ============================================================ */
.profile-panel,
.entity-profile-tabs,
.entity-tab,
.entity-basic-card,
.entity-info-grid>div,
.old-usernames-highlight,
.old-username-tag,
.gift-stat,
.gift-item,
.recipient-item,
.channel-item,
.geo-card,
.profile-tab-empty,
.nft-username-card {
  color: var(--foreground);
}

.profile-panel {
  background:
    radial-gradient(circle at 55% 0%, var(--accent-muted), transparent 34%),
    var(--surface);
  border-left-color: var(--border-subtle);
  box-shadow: -18px 0 42px rgba(0,0,0,.12);
}
.entity-profile-tabs {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom-color: var(--border-subtle);
}
.entity-tab {
  border-color: var(--border-subtle);
  background: var(--surface-secondary);
  color: var(--muted-foreground);
}
.entity-tab:hover {
  color: var(--foreground);
  border-color: var(--border-hover);
  background: var(--bg-hover);
}
.entity-tab.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff 0%), color-mix(in srgb, var(--accent) 62%, #000 0%));
}
.profile-header {
  background:
    radial-gradient(circle at 12% 45%, var(--accent-muted), transparent 35%),
    var(--surface);
  border-bottom-color: var(--border-subtle);
}
.profile-name { color: var(--foreground); }
.profile-meta span { background: var(--surface-secondary); border-color: var(--border-subtle); }
.entity-basic-card,
.entity-info-grid>div,
.gift-stat,
.gift-item,
.recipient-item,
.channel-item,
.geo-card,
.profile-tab-empty,
.old-usernames-highlight {
  background: var(--surface-secondary);
  border-color: var(--border-subtle);
}
.entity-section-title { color: var(--foreground); }
.entity-info-grid span,
.profile-section-title,
.geo-row span { color: var(--muted-foreground); }
.entity-info-grid b,
.geo-row b { color: var(--foreground); }
.old-username-tag { background: var(--surface); border-color: var(--border-subtle); color: var(--foreground); }
.old-username-tag:hover { background: var(--bg-hover); }
.nft-username-card { background: var(--surface-secondary) !important; border-color: color-mix(in srgb, var(--accent) 28%, var(--border-subtle)) !important; }
.profile-tab-empty { color: var(--muted-foreground); }
.profile-tab-empty strong { color: var(--foreground); }
.profile-tab-empty span { color: var(--muted-foreground); }
.profile-panel::-webkit-scrollbar-thumb { background: var(--border-hover); }

/* Other overlays/cards must follow the same theme too. */
.float-panel,
.settings-panel,
.command-dialog,
.hit-code-panel,
.graph-enrich-panel,
.ai-graph-shell,
.auth-card {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--foreground);
  border-color: var(--border-subtle);
}

/* Auth preference controls are available before login/registration. */
.auth-preferences {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0 12px;
}
.auth-pref-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 7px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--surface-secondary);
}
.auth-pref-group > span {
  width: 100%;
  font-size: 10px;
  color: var(--muted-foreground);
  margin-bottom: 2px;
}
.auth-pref-group button {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted-foreground);
  padding: 5px 6px;
  cursor: pointer;
  font: 500 10px var(--font);
}
.auth-pref-group button:hover { background: var(--bg-hover); color: var(--foreground); }
.auth-pref-group button.active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-subtle));
  background: var(--accent-muted);
}

@media (max-width: 520px) {
  .auth-preferences { grid-template-columns: 1fr; }
}

/* Keep the graph stage itself in sync with the selected theme. */
.graph-stage {
  background:
    radial-gradient(circle at 50% 46%, var(--accent-muted), transparent 48%),
    var(--graph-bg);
}
[data-theme="light"] .graph-stage {
  background:
    radial-gradient(circle at 50% 46%, rgba(85,104,242,.06), transparent 48%),
    var(--graph-bg);
}
[data-theme="light"] .entity-tab.active { color:#fff; }


/* ============================================================
   MOBILE / TABLET HARDENED LAYOUT
   ============================================================ */
html.is-mobile, html.is-mobile body { width: 100%; max-width: 100%; }
@media (max-width: 820px), (pointer: coarse) and (max-width: 1100px) {
  :root {
    --topbar-h: 56px;
    --mobile-pad: 10px;
  }
  html, body { min-height: 100%; height: 100%; overflow: hidden; }
  body { overscroll-behavior: none; }
  .app-shell { min-height: 100dvh; height: 100dvh; }
  .app-main { min-width: 0; width: 100%; }
  .topbar {
    height: var(--topbar-h);
    padding: 0 10px;
    gap: 8px;
    padding-top: env(safe-area-inset-top);
  }
  .topbar-left { flex: 0 0 auto; }
  .topbar-title { display: none; }
  .sidebar-toggle { width: 36px; height: 36px; }
  .topbar-search { order: 2; max-width: none; min-width: 0; gap: 6px; }
  .search-wrapper { height: 38px; padding: 0 9px; }
  .search-input { min-width: 0; font-size: 14px; }
  .search-btn { height: 38px; padding: 0 11px; }
  .topbar-right { order: 3; margin-left: 0; gap: 5px; }
  .topbar-right .topbar-btn { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .topbar-right .topbar-btn kbd { display: none; }
  .header-status { display: none; }

  .workspace { min-height: 0; height: calc(100dvh - var(--topbar-h)); }
  .main-area { display: block; position: relative; height: 100%; }
  .graph-stage { width: 100%; height: 100%; min-height: 0; }
  #graph-canvas { width: 100%; height: 100%; touch-action: none; }

  /* The graph stays the primary mobile view. Profile is a bottom sheet. */
  .profile-panel {
    position: absolute;
    left: 6px; right: 6px; bottom: 6px;
    width: auto !important;
    height: min(58dvh, 620px) !important;
    max-height: calc(100dvh - var(--topbar-h) - 12px);
    z-index: 60;
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    box-shadow: 0 -18px 45px rgba(0,0,0,.28);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .profile-header { padding: 15px 14px 13px; }
  .profile-avatar { width: 58px; height: 58px; border-radius: 14px; }
  .profile-name { font-size: 16px; }
  .profile-section { padding: 12px 14px; }
  .profile-panel .entity-profile-tabs { position: sticky; top: 0; z-index: 3; background: var(--surface); overflow-x: auto; }

  .graph-hud-tl { top: 8px; left: 8px; }
  .graph-hud-tr { display: none !important; }
  .graph-hud-bc { bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100% - 16px); padding: 0; }
  .graph-status { font-size: 9px; padding: 5px 9px; }
  .stats-bar { max-width: 100%; padding: 5px; gap: 3px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .stats-bar::-webkit-scrollbar { display: none; }
  .stat-item { flex: 0 0 auto; padding: 4px 7px; font-size: 11px; }
  .stat-item .k { font-size: 9px; }
  .stat-item .v { font-size: 10px; }

  .zoom-controls.active { display: flex; }
  .zoom-btn { width: 34px; height: 34px; }
  .graph-enrich-fab { width: 38px !important; height: 38px !important; }
  .mobile-graph-hint { top: 45%; max-width: calc(100% - 36px); text-align: center; white-space: nowrap; }

  .sources-panel { left: 8px; right: 8px; bottom: 8px; width: auto; top: 8px; border-radius: 16px; }
  .float-panel, .float-panel.ai-panel, .float-panel.chain-panel {
    left: 8px !important; right: 8px !important; top: 8px !important; bottom: 8px !important;
    width: auto !important; max-height: none; height: auto;
    border-radius: 16px;
  }
  .panel-body { -webkit-overflow-scrolling: touch; }

  .auth-gate { padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)); overflow-y: auto; }
  .auth-card { width: min(100%, 430px); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 20px 16px; }
  .auth-preferences { flex-wrap: wrap; gap: 8px; }
  .auth-input { min-width: 0; font-size: 16px; } /* prevents iOS zoom */
  .auth-btn { min-height: 44px; }
  .auth-tab { min-height: 42px; }

  button, .nav-item, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  button, .nav-item { touch-action: manipulation; }
}

@media (max-width: 520px) {
  .topbar { padding-left: 7px; padding-right: 7px; gap: 5px; }
  .topbar-search { gap: 5px; }
  .search-btn { padding: 0 9px; font-size: 12px; }
  .search-input { font-size: 16px; }
  .profile-panel { left: 4px; right: 4px; bottom: 4px; height: min(62dvh, 650px) !important; }
  .profile-header { padding: 13px 12px; }
  .profile-section { padding: 11px 12px; }
  .gift-stats { gap: 6px; }
  .gift-stat { padding: 9px 7px; }
  .gift-stat .num { font-size: 17px; }
  .graph-hud-tl { top: 7px; left: 7px; }
  .zoom-controls { max-width: calc(100vw - 14px); }
}

@media (max-height: 600px) and (max-width: 820px) {
  .profile-panel { height: min(72dvh, 460px) !important; }
  .profile-header { padding: 10px 12px; }
  .profile-avatar { width: 48px; height: 48px; margin-bottom: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}