/* GDBS Web — SSMS-style database management UI */
:root {
  --bg: #1e1e1e;
  --bg-alt: #252526;
  --bg-panel: #2d2d30;
  --bg-input: #3c3c3c;
  --bg-hover: #383838;
  --bg-active: #094771;
  --border: #3c3c3c;
  --border-light: #4a4a4a;
  --text: #cccccc;
  --text-dim: #888;
  --text-bright: #e0e0e0;
  --accent: #0078d4;
  --accent-hover: #1a8ae8;
  --success: #4ec964;
  --warn: #e8a838;
  --error: #f14c4c;
  --green: #4ec964;
  --blue: #0078d4;
  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
/* Landing page needs scroll */
html:has(#landing-screen.active),
body:has(#landing-screen.active) { overflow-y: auto; height: auto; }
body { font-family: var(--font); font-size: 13px; color: var(--text); background: var(--bg); display: flex; flex-direction: column; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: var(--font); }
input, select, textarea { font-family: var(--font); font-size: 13px; color: var(--text); background: var(--bg-input); border: 1px solid var(--border); padding: 6px 8px; border-radius: 3px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { background: var(--bg-panel); color: var(--text-dim); text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; font-weight: 600; position: sticky; top: 0; z-index: 1; }
td { padding: 4px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
tr:hover td { background: var(--bg-hover); }

.hidden { display: none !important; }
.screen { display: none; height: 100%; }
.screen.active { display: flex; flex-direction: column; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); border-radius: 3px; font-size: 12px; white-space: nowrap; }
.btn:hover { background: var(--bg-hover); border-color: var(--border-light); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-sm { padding: 3px 8px; font-size: 11px; }
.btn-block { width: 100%; justify-content: center; padding: 8px; }
.btn-ghost { border: none; background: transparent; }
.btn-ghost:hover { background: var(--bg-hover); }
#btn-global-report { transition: opacity 0.2s; }
#btn-global-report.report-empty { opacity: 0.35; }
#btn-global-report:not(.report-empty) { color: var(--accent-cyan); }
.report-popover {
  position: fixed; width: 360px;
  background: var(--bg-panel, #1a1f2e); border: 1px solid var(--border, #2a3045);
  border-radius: 8px; padding: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.55); z-index: 9999;
}
.report-popover.hidden { display: none; }
.report-popover-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 600; font-size: 0.88rem; }
.report-popover-header button { background: none; border: none; color: var(--text-dim, #8899aa); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0 2px; }
.report-popover-desc { font-size: 0.78rem; color: var(--text-dim, #8899aa); margin-bottom: 10px; line-height: 1.5; }
.report-popover-label { font-size: 0.78rem; display: block; margin-bottom: 4px; }
.report-popover-label span { color: var(--text-dim, #8899aa); }
.report-popover textarea { font-family: monospace; font-size: 0.75rem; width: 100%; margin-bottom: 4px; resize: vertical; }
.report-popover-hint { font-size: 0.72rem; color: var(--text-dim, #8899aa); margin-bottom: 12px; }
.btn-link { border: none; background: transparent; color: var(--accent); padding: 4px; }
.btn-danger { border-color: var(--error); color: var(--error); }
.btn-danger:hover { background: var(--error); color: #fff; }

.badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; text-transform: uppercase; }
.badge-clickable { cursor: pointer; transition: filter 0.15s; }
.badge-clickable:hover { filter: brightness(1.3); }
.badge-trial { background: #553300; color: var(--warn); }
.badge-free { background: #2a2a2a; color: var(--text-dim); }
.badge-standard { background: #003355; color: #5bc0ff; }
.badge-pro { background: #1a3a1a; color: var(--green); }
.badge-research { background: #2a1a3a; color: #b388ff; }
.badge-beta { background: #1e1b4b; color: #a5b4fc; }

.error-msg { color: var(--error); font-size: 12px; margin-top: 8px; min-height: 18px; }
.status-text { font-size: 11px; color: var(--text-dim); }

.field { margin-bottom: 12px; }
.field label { display: block; margin-bottom: 4px; color: var(--text-dim); font-size: 12px; }
.field input, .field select, .field textarea { width: 100%; }

/* Auth Screen */
.auth-container { width: 380px; margin: auto; padding: 40px 0; }
.auth-logo { text-align: center; margin-bottom: 30px; }
.auth-logo i { font-size: 48px; color: var(--accent); }
.auth-logo h1 { font-size: 28px; color: var(--text-bright); margin: 10px 0 4px; font-weight: 300; }
.accent { color: var(--accent); font-weight: 600; }
.tagline { color: var(--text-dim); font-size: 13px; }
.auth-form { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px; padding: 24px; }
.auth-form h2 { font-size: 16px; color: var(--text-bright); margin-bottom: 16px; font-weight: 500; }
.auth-switch { text-align: center; margin-top: 14px; font-size: 12px; color: var(--text-dim); }
.license-key { background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; padding: 12px; text-align: center; font-family: var(--mono); font-size: 16px; color: var(--green); margin: 12px 0; letter-spacing: 1px; }
.license-info { color: var(--text-dim); font-size: 12px; margin-bottom: 4px; }

/* Top Bar */
.topbar { display: flex; align-items: center; height: 36px; background: var(--bg-panel); border-bottom: 1px solid var(--border); padding: 0 12px; flex-shrink: 0; }
.topbar-left { display: flex; align-items: center; gap: 8px; min-width: 180px; }
.topbar-left i { color: var(--accent); font-size: 14px; }
.brand { font-size: 14px; color: var(--text-bright); font-weight: 300; }
.topbar-center { flex: 1; display: flex; justify-content: center; }
.connection-status { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 12px; }
.topbar-right { display: flex; align-items: center; gap: 10px; min-width: 180px; justify-content: flex-end; }
.user-info { font-size: 12px; color: var(--text-dim); }

/* System notice banner — pinned below top bar, dismissable per session */
.system-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 12px;
  line-height: 1.45;
  color: #fbbf24;
  background: linear-gradient(90deg, rgba(251,191,36,0.10), rgba(79,195,247,0.06));
  border-bottom: 1px solid rgba(251,191,36,0.30);
  flex-shrink: 0;
}
.system-notice.hidden { display: none; }
.system-notice > i { color: #fbbf24; }
.system-notice-text { flex: 1; color: #cbd5e1; }
.system-notice-text strong { color: #fbbf24; }
.system-notice-close {
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
}
.system-notice-close:hover { color: #fff; background: rgba(148,163,184,0.15); }

/* Sidebar */
.main-layout { display: flex; flex: 1; overflow: hidden; }
.sidebar { width: 52px; background: var(--bg-alt); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
.sidebar-nav { display: flex; flex-direction: column; flex: 1; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; background: none; border: none; color: var(--text-dim); font-size: 9px; border-left: 2px solid transparent; cursor: pointer; }
.nav-item i { font-size: 15px; }
.nav-item:hover { color: var(--text); background: var(--bg-hover); }
.nav-item.active { color: var(--accent); border-left-color: var(--accent); background: var(--bg); }
.nav-item-bottom { margin-top: auto; border-top: 1px solid var(--border); }

/* Tier Selector Dots */
.tier-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}
.tier-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}
.tier-dot[data-tier="standard"] {
  background: #6b7280;
}
.tier-dot[data-tier="pro"] {
  background: #f59e0b;
}
.tier-dot[data-tier="ent"] {
  background: #10b981;
}
.tier-dot:hover {
  transform: scale(1.3);
  box-shadow: 0 0 8px currentColor;
}
.tier-dot.active {
  transform: scale(1.4);
  border-color: var(--text-bright);
  box-shadow: 0 0 10px currentColor;
}
.nav-tier-section {
  display: none;
  flex-direction: column;
}
.nav-tier-section.active {
  display: flex;
}

/* Premium vs Standard nav icons */
.nav-premium i { color: #60a5fa; } /* Blue for premium */
.nav-premium:hover i { color: #93c5fd; }
.nav-premium[data-view="plasma"] i { color: #f472b6; } /* Pink - plasma */
.nav-premium[data-view="molecular"] i { color: #4ade80; } /* Green - medical */
.nav-premium[data-view="cosmic"] i { color: #fbbf24; } /* Gold - cosmos */
.nav-premium[data-view="hpclab"] i { color: #fb923c; } /* Orange - HPC Lab */
.nav-premium[data-view="theory"] i { color: #a78bfa; } /* Purple - theory */
.nav-premium.active i { color: var(--accent); }
.nav-standard i { color: var(--text-dim); } /* Grey for standard */

/* Nav tier tooltips */
.nav-item[data-tier] { position: relative; }
.nav-item[data-tier]::after {
  content: attr(data-tier);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  padding: 4px 8px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 1000;
}
.nav-item[data-tier="Standard"]::after { color: #94a3b8; }
.nav-item[data-tier="Premium"]::after { color: #60a5fa; }
.nav-item[data-tier="Extension"]::after { color: #fb923c; }
.nav-item[data-tier]:hover::after { opacity: 1; }

/* Content / Views */
.content { flex: 1; overflow: hidden; }
.view { display: none; height: 100%; overflow-y: auto; }
.view.active { display: flex; flex-direction: column; }

/* Query View */
.query-panel { display: flex; flex-direction: column; height: 40%; border-bottom: 1px solid var(--border); }
.editor-toolbar { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.toolbar-label { font-size: 11px; color: var(--text-dim); margin-right: auto; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.editor-wrap { flex: 1; overflow: hidden; }
#query-input { width: 100%; height: 100%; resize: none; border: none; border-radius: 0; background: var(--bg); font-family: var(--mono); font-size: 14px; line-height: 1.5; padding: 12px; color: var(--text-bright); }
#query-input::placeholder { color: var(--text-dim); }

.results-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.results-tabs { display: flex; gap: 0; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.rtab { padding: 6px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 12px; cursor: pointer; }
.rtab:hover { color: var(--text); }
.rtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.results-view { display: none; flex: 1; overflow: auto; }
.results-view.active { display: block; }
#r-table { font-family: var(--mono); font-size: 12px; }
#r-json { padding: 12px; font-family: var(--mono); font-size: 12px; color: var(--text-bright); white-space: pre-wrap; word-break: break-all; }
.messages-log { padding: 8px 12px; font-family: var(--mono); font-size: 12px; }
.messages-log .msg { padding: 2px 0; }
.messages-log .msg-error { color: var(--error); }
.messages-log .msg-info { color: var(--text-dim); }
.messages-log .msg-success { color: var(--green); }
.results-empty { padding: 40px; text-align: center; color: var(--text-dim); }
.results-statusbar { display: flex; align-items: center; gap: 12px; padding: 4px 8px; background: var(--bg-alt); border-top: 1px solid var(--border); flex-shrink: 0; font-size: 11px; color: var(--text-dim); }
.results-statusbar .spacer { flex: 1; }

/* Browser View */
.browser-layout { display: flex; height: 100%; }
.schema-tree { width: 280px; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
.tree-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--bg-alt); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.tree-content { flex: 1; overflow: auto; padding: 4px 0; }
.tree-empty, .detail-empty { padding: 40px 20px; text-align: center; color: var(--text-dim); font-size: 12px; }
.tree-node { display: flex; align-items: center; gap: 6px; padding: 3px 10px; cursor: pointer; font-size: 12px; user-select: none; }
.tree-node:hover { background: var(--bg-hover); }
.tree-node.active { background: var(--bg-active); color: var(--text-bright); }
.tree-node i { font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; }
.tree-node .icon-db { color: var(--warn); }
.tree-node .icon-table { color: var(--accent); }
.tree-node .icon-col { color: var(--text-dim); }
.tree-children { padding-left: 16px; }
.tree-children.collapsed { display: none; }
.browser-detail { flex: 1; overflow: auto; padding: 12px; }
.detail-header { margin-bottom: 12px; }
.detail-header h3 { font-size: 14px; color: var(--text-bright); font-weight: 500; }
.detail-header .detail-type { font-size: 11px; color: var(--text-dim); text-transform: uppercase; }
.detail-table { margin-top: 8px; }

/* Import View */
.import-wizard { max-width: 700px; margin: 20px auto; width: 100%; }
.wizard-steps { display: flex; margin-bottom: 24px; }
.step { flex: 1; text-align: center; padding: 10px; font-size: 12px; color: var(--text-dim); border-bottom: 2px solid var(--border); }
.step.active { color: var(--accent); border-bottom-color: var(--accent); }
.step.done { color: var(--green); border-bottom-color: var(--green); }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-input); font-size: 11px; margin-right: 4px; }
.step.active .step-num { background: var(--accent); color: #fff; }
.step.done .step-num { background: var(--green); color: #fff; }
.wizard-panel { display: none; }
.wizard-panel.active { display: block; }
.upload-zone { border: 2px dashed var(--border); border-radius: 8px; padding: 48px; text-align: center; cursor: pointer; transition: border-color 0.2s; }
.upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); }
.upload-zone i { font-size: 36px; color: var(--accent); margin-bottom: 12px; display: block; }
.upload-zone p { color: var(--text-dim); }
.upload-options { margin-top: 16px; display: flex; gap: 16px; }
.upload-options .field { flex: 1; }
.preview-info { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.preview-table-wrap { max-height: 250px; overflow: auto; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 16px; }
.mapping-section h3 { font-size: 13px; color: var(--text-bright); margin-bottom: 8px; }
.wizard-nav { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }
.progress-bar { height: 8px; background: var(--bg-input); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.progress-fill { height: 100%; background: var(--accent); transition: width 0.3s; width: 0; }
.import-stats { display: flex; gap: 24px; justify-content: center; margin: 20px 0; }
.stat { text-align: center; }
.stat span { font-size: 28px; font-weight: 600; display: block; }
.stat label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; }

/* Plasma View */
.plasma-header { padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; }
.plasma-header h2 { font-size: 15px; font-weight: 500; color: var(--text-bright); }
.plasma-tabs { display: flex; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-shrink: 0; overflow: visible; gap: 0; position: relative; z-index: 50; }
.ptab { padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 12px; cursor: pointer; white-space: nowrap; }
.ptab:hover { color: var(--text); }
.ptab.active { color: var(--accent); border-bottom-color: var(--accent); }
.plasma-panel { display: none; flex: 1; overflow: auto; padding: 12px 16px; }
.plasma-panel.active { display: block; }
.plasma-panel fieldset { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.plasma-panel legend { font-size: 11px; color: var(--text-dim); padding: 0 4px; }
.plasma-panel fieldset label { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; font-size: 12px; color: var(--text-dim); }
.plasma-panel fieldset input, .plasma-panel fieldset select { width: 80px; padding: 3px 6px; font-size: 12px; }
.plasma-panel fieldset textarea { width: 100%; font-family: var(--mono); font-size: 12px; }
.plasma-actions { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.plasma-table { margin: 8px 0; font-family: var(--mono); }
.plasma-table tbody tr:hover { background: rgba(255,255,255,0.06); cursor: default; }
.plasma-table tbody tr:hover td { background: transparent !important; }
.chart-wrap { height: 300px; margin-top: 8px; }

/* MD 2x2 chart grid */
.md-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; min-width: 0; }
/* Cell holds a Chart.js canvas. Chart.js responsive sizing requires the    */
/* canvas's PARENT to have a defined height (not the canvas itself). The   */
/* earlier version had `width/height: 100% !important` on the canvas which */
/* fought Chart.js's measurement and produced silent blank cells in        */
/* ballistics. Now: cell has fixed 280px height, canvas has NO CSS sizing  */
/* so Chart.js owns it (and respects maintainAspectRatio:false in opts).   */
.md-chart-cell {
  position: relative; height: 280px;
  background: var(--bg-panel, #0f172a);   /* themed: flips with data-theme */
  border: 1px solid var(--border, #334155);
  border-radius: 6px;
  min-width: 0;          /* lets grid items shrink so wide canvases don't blow out */
}
.md-chart-cell canvas { display: block; }

/* Connections View */
.connections-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.connections-header h2 { font-size: 15px; font-weight: 500; color: var(--text-bright); }
.connections-grid { padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; overflow: auto; }
.conn-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px; padding: 14px; }
.conn-card:hover { border-color: var(--accent); }
.conn-card h4 { font-size: 13px; color: var(--text-bright); font-weight: 500; margin-bottom: 4px; }
.conn-card .conn-type { font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 8px; }
.conn-card .conn-actions { display: flex; gap: 6px; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-content { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; padding: 24px; width: 420px; max-width: 90vw; }
.modal-content h3 { font-size: 15px; color: var(--text-bright); margin-bottom: 16px; font-weight: 500; }
.modal-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.modal-actions .spacer { flex: 1; }

/* HPC Loading Spinner */
.hpc-loading-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: hpc-spin 0.8s linear infinite;
}
@keyframes hpc-spin {
  to { transform: rotate(360deg); }
}
#hpc-loading-modal .modal-content {
  background: var(--bg-alt);
  border: 1px solid var(--accent);
  box-shadow: 0 0 30px rgba(0, 120, 212, 0.2);
}

/* Pro / Premium Tabs */
.ptab-divider { display: inline-block; width: 1px; height: 20px; background: var(--border); margin: 0 4px; vertical-align: middle; }

/* Composite ptab groups — button + hover-revealed popup menu.
   Mirrors .hpc-group / .hpc-group-toggle / .hpc-group-menu over in the
   HPC Lab tab strip so the two surfaces feel identical. */
.ptab-group { position: relative; z-index: 100; display: inline-flex; align-items: stretch;
  border-bottom: 2px solid transparent; transition: border-color 0.15s; }
.ptab-group.active { border-bottom-color: var(--accent); }
.ptab-group-toggle {
  padding: 8px 14px; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); font-size: 12px; cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 6px; font-family: inherit;
  transition: color 0.15s, background 0.15s;
}
.ptab-group-toggle:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.ptab-group:hover > .ptab-group-toggle { color: var(--accent); background: rgba(99,102,241,0.08); }
.ptab-group.active > .ptab-group-toggle { color: var(--accent); }
.ptab-group-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 200;
  background: #12122a; border: 1px solid rgba(99,102,241,0.3); border-top: none;
  border-radius: 0 0 6px 6px; min-width: 200px; box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  padding: 4px 0;
}
.ptab-group:hover > .ptab-group-menu { display: block; }
/* Tabs *inside* a group menu render as full-width left-aligned rows like .hpc-tab;
   standalone .ptab buttons outside any group (Optimizer, Predictor, etc.) keep
   their horizontal-tab styling untouched. */
.ptab-group-menu .ptab {
  border-bottom: none; border-left: 2px solid transparent;
  width: 100%; text-align: left; padding: 8px 16px;
  display: flex; align-items: center; gap: 6px;
}
.ptab-group-menu .ptab:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.ptab-group-menu .ptab.active { color: var(--accent); border-left-color: var(--accent); background: rgba(99,102,241,0.1); }
.ptab-pro { color: var(--text-dim); position: relative; }
.ptab-pro i { font-size: 9px; margin-right: 2px; opacity: 0.6; }
.ptab-pro.active { color: var(--accent); border-bottom-color: var(--accent); }
.ptab-pro.ptab-unlocked i.fa-lock { display: none; }

/* Pro Gate Overlay */
.pro-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; gap: 12px; min-height: 400px; }
.gate-icon { font-size: 48px; color: var(--warn); margin-bottom: 8px; }
.pro-gate h3 { font-size: 18px; color: var(--text-bright); font-weight: 500; }
.pro-gate p { color: var(--text-dim); max-width: 440px; line-height: 1.6; font-size: 13px; }
.gate-cta { margin-top: 4px; color: var(--text-dim); font-size: 12px; }
.btn-upgrade { margin-top: 8px; }

/* Optimizer Ranges Toggle */
.opt-ranges.hidden { display: none; }

/* Badge Enterprise */
.badge-enterprise { background: #2d1a3a; color: #c084fc; }

/* Hints & API docs */
.hint { font-size: 11px; color: var(--text-dim); margin: 4px 0 8px; }
.api-key-box { display: flex; align-items: center; gap: 8px; background: var(--bg-input); padding: 8px 12px; border-radius: 4px; font-family: monospace; font-size: 12px; word-break: break-all; }
.api-key-box code { flex: 1; color: var(--green); }
.api-url { display: block; background: var(--bg-input); padding: 6px 10px; border-radius: 4px; font-size: 12px; color: var(--accent); }
.code-block { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 12px; overflow-x: auto; font-size: 12px; line-height: 1.5; }
.export-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.constraints-summary { margin-top: 16px; }
.constraints-summary h4 { font-size: 13px; color: var(--text-bright); margin-bottom: 8px; }
.api-docs-table td:first-child { font-weight: 600; color: var(--accent); }

/* Simulation tab */
#c-sim-stability { image-rendering: pixelated; }
#sim-beta-slider { -webkit-appearance: none; height: 4px; background: var(--border); border-radius: 2px; outline: none; }
#sim-beta-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--accent); border-radius: 50%; cursor: pointer; }

/* Pricing Modal */
/* Pricing modal scrolls the OVERLAY (not just the inner content) and anchors to
   the top with breathing room, so the title + close are always reachable even
   when the content is taller than the visible area (mobile toolbar / short
   viewports, where vh can exceed what's on screen). The header is sticky, so
   the close (x) stays pinned at the top while scrolling. */
#pricing-modal { align-items: flex-start; overflow-y: auto; padding: 4vh 10px; -webkit-overflow-scrolling: touch; }
.pricing-modal-content { width: 820px; max-width: 95vw; padding: 0; overflow: visible; }
/* Extra close affordances are mobile-only (desktop uses the header x). */
.pricing-close-float, .pricing-close-bottom { display: none; }
.pricing-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-alt); z-index: 3; }
.pricing-header h3 { font-size: 16px; color: var(--text-bright); font-weight: 500; }
.pricing-close { font-size: 14px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.pricing-card { padding: 24px 20px; border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.pricing-card:last-child { border-right: none; }
.pricing-featured { background: var(--bg-hover); }
.pricing-badge { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 9px; padding: 2px 10px; border-radius: 0 0 4px 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.pricing-tier { font-size: 14px; color: var(--text-bright); font-weight: 600; margin-bottom: 8px; margin-top: 12px; }
.pricing-price { font-size: 28px; color: var(--text-bright); font-weight: 700; }
.pricing-period { font-size: 11px; color: var(--text-dim); margin-bottom: 16px; }
.pricing-features { list-style: none; text-align: left; margin-bottom: 20px; flex: 1; }
.pricing-features li { font-size: 12px; color: var(--text); padding: 3px 0; }
.pricing-features li i { color: var(--green); margin-right: 6px; font-size: 10px; }
.pricing-subtitle { text-align: center; font-size: 12px; color: var(--text-dim); padding: 8px 20px 0; }
.pricing-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; padding: 16px 20px; }
.pricing-mod { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.pricing-mod:hover { border-color: var(--accent); background: var(--bg-hover); }
.pricing-mod i { font-size: 18px; color: var(--accent); width: 22px; text-align: center; flex-shrink: 0; }
.pricing-mod-name { flex: 1; font-size: 13px; color: var(--text-bright); font-weight: 500; }
.pricing-mod-price { font-size: 13px; color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.pricing-mod input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.pricing-mod.selected { border-color: var(--accent); background: rgba(0,120,212,0.08); }
.pricing-cart-footer { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pricing-cart-total { font-size: 16px; color: var(--text-bright); font-weight: 600; display: flex; gap: 8px; }
#cart-total-amount { color: var(--accent); font-size: 18px; font-weight: 700; }
#btn-cart-checkout:disabled { opacity: 0.4; cursor: not-allowed; }
.pm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
@media (max-width: 860px) { .pm-grid { grid-template-columns: repeat(2, 1fr); } }
/* Phones: full-screen sheet. The content is a flex column - the header (with
   the close button) is pinned at the top and never scrolls away, only the card
   grid scrolls. This guarantees the close (x) and title are always reachable,
   regardless of viewport/toolbar height. Single column so cards aren't squished. */
@media (max-width: 640px) {
  #pricing-modal { align-items: stretch; padding: 0; overflow: hidden; }
  .pricing-modal-content {
    width: 100%; max-width: 100%;
    height: 100vh; height: 100dvh; max-height: 100dvh;
    border-radius: 0; display: flex; flex-direction: column; overflow: hidden;
  }
  .pricing-header { position: static; flex: 0 0 auto; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  .pricing-header h3 { font-size: 17px; }
  .pricing-close { font-size: 1.5rem; padding: 6px 12px; }
  .pm-grid {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    grid-template-columns: 1fr;
  }
  .pricing-subtitle { flex: 0 0 auto; }
  .pm-card { border-right: none; border-bottom: 1px solid var(--border); }
  .pm-card:last-child { border-bottom: none; }
  /* Always-reachable close: a fixed floating x (safe-area-aware so the notch
     can't hide it) and a full-width Close at the bottom of the sheet. */
  .pricing-close-float {
    display: flex; align-items: center; justify-content: center;
    position: fixed; z-index: 20;
    top: calc(env(safe-area-inset-top, 0px) + 8px); right: 12px;
    width: 44px; height: 44px; border-radius: 50%;
    border: none; background: rgba(15,23,42,0.88); color: #fff;
    font-size: 28px; line-height: 1; cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.45);
  }
  .pricing-close-bottom {
    display: block; flex: 0 0 auto; width: 100%;
    padding: calc(14px + env(safe-area-inset-bottom, 0px)) 14px 14px;
    border: none; border-top: 1px solid var(--border);
    background: var(--bg-alt); color: var(--text);
    font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  }
}
.pm-card { padding: 20px 14px; border-right: 1px solid var(--border); display: flex; flex-direction: column; position: relative; }
.pm-card:last-child { border-right: none; }
.pm-featured { background: rgba(124,58,237,0.06); }
.pm-badge { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 9px; padding: 2px 10px; border-radius: 0 0 4px 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.pm-tier { font-size: 13px; font-weight: 700; margin-bottom: 6px; margin-top: 14px; }
.pm-price { font-size: 24px; color: var(--text-bright); font-weight: 700; line-height: 1; }
.pm-price small { font-size: 12px; color: var(--text-dim); font-weight: 400; }
.pm-period { font-size: 11px; color: var(--text-dim); margin: 4px 0 10px; line-height: 1.4; }
.pm-features { list-style: none; padding: 0; margin: 0 0 14px; flex: 1; }
.pm-features li { font-size: 11px; color: var(--text); padding: 2px 0; }
.pm-features li i { color: var(--green); margin-right: 5px; font-size: 9px; }
.pm-select { width: 100%; background: var(--bg-panel); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 6px 8px; font-size: 12px; cursor: pointer; }

/* Tiered Coherence Gradient Bar */
.tc-bar { display: flex; height: 16px; width: 100%; border-radius: 3px; overflow: visible; border: 1px solid var(--border); background: var(--bg); }
.tc-wrap { display: inline-block; width: 100%; }
.tc-bar .tc-seg { height: 100%; min-width: 1px; transition: opacity 0.2s; position: relative; cursor: pointer; }
.tc-seg-core { background: #2563eb; }
.tc-seg-magnitude { background: #16a34a; }
.tc-seg-phase { background: #e8a838; }
.tc-seg-proportion { background: #9333ea; }
/* Popover tooltip on hover */
.tc-tip { display: none; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--bg-input); color: var(--text-bright); font-size: 10px; padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border-light); white-space: nowrap; z-index: 100; pointer-events: none; text-align: center; line-height: 1.4; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.tc-seg:hover .tc-tip { display: block; }
/* Labels row under bar */
.tc-labels { display: flex; margin-top: 1px; }
.tc-lbl { font-size: 8px; color: var(--text-dim); text-align: center; overflow: hidden; }

/* Precision slider */
.precision-control { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; color: var(--text-dim); }
.precision-control label { white-space: nowrap; }
.precision-control input[type="range"] { width: 80px; accent-color: var(--accent); }
#precision-label { min-width: 50px; font-family: var(--mono); font-size: 11px; color: var(--text); }

/* Relational tier segment colors now applied via inline rgba in JS */

/* Molecular / Medical Module */
.molecular-header { padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; }
.molecular-header h2 { font-size: 15px; font-weight: 500; color: var(--text-bright); }
.molecular-tabs { display: flex; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; }
.mtab { padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 12px; cursor: pointer; white-space: nowrap; }
.mtab:hover { color: var(--text); }
.mtab.active { color: #64b5f6; border-bottom-color: #64b5f6; }
.molecular-panel { display: none; flex: 1; overflow: auto; padding: 12px 16px; }
.molecular-panel.active { display: block; }
.molecular-panel fieldset { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.molecular-panel legend { font-size: 11px; color: var(--text-dim); padding: 0 4px; }
.molecular-panel fieldset label { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; font-size: 12px; color: var(--text-dim); }
.molecular-panel fieldset input, .molecular-panel fieldset select { width: 80px; padding: 3px 6px; font-size: 12px; }
.molecular-panel fieldset textarea { width: 100%; font-family: var(--mono); font-size: 12px; }
.badge-medical { background: #1a2a3a; color: #64b5f6; }
#mol-content { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

/* Cosmos Module */
.cosmic-header { padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; }
.cosmic-header h2 { font-size: 15px; font-weight: 500; color: var(--text-bright); }
.cosmic-tabs { display: flex; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; }
.ctab { padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 12px; cursor: pointer; white-space: nowrap; }
.ctab:hover { color: var(--text); }
.ctab.active { color: #ffa726; border-bottom-color: #ffa726; }
.cosmic-panel { display: none; flex: 1; overflow: auto; padding: 12px 16px; }
.cosmic-panel.active { display: block; }
.cosmic-panel fieldset { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.cosmic-panel legend { font-size: 11px; color: var(--text-dim); padding: 0 4px; }
.cosmic-panel fieldset label { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; font-size: 12px; color: var(--text-dim); }
.cosmic-panel fieldset input, .cosmic-panel fieldset select { width: 80px; padding: 3px 6px; font-size: 12px; }
.cosmic-panel fieldset textarea { width: 100%; font-family: var(--mono); font-size: 12px; }
.badge-cosmic { background: #2a2a1a; color: #ffa726; }
#cos-content { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

/* Materials Science — purple accent */
.materials-header { padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; }
.materials-header h2 { font-size: 15px; font-weight: 500; color: var(--text-bright); }
.materials-tabs { display: flex; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; }
.mattab { padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 12px; cursor: pointer; white-space: nowrap; }
.mattab:hover { color: var(--text); }
.mattab.active { color: #ce93d8; border-bottom-color: #ce93d8; }

/* Topology sub-tabs — same shape as .mattab, accent in Topology yellow */
.toptab { padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 12px; cursor: pointer; white-space: nowrap; }
.toptab:hover { color: var(--text); }
.toptab.active { color: #fbbf24; border-bottom-color: #fbbf24; }

.materials-panel { display: none; flex: 1; overflow: auto; padding: 12px 16px; }
.materials-panel.active { display: block; }
.materials-panel fieldset { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.materials-panel legend { font-size: 11px; color: var(--text-dim); padding: 0 4px; }
.materials-panel fieldset label { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; font-size: 12px; color: var(--text-dim); }
.materials-panel fieldset input, .materials-panel fieldset select { width: 80px; padding: 3px 6px; font-size: 12px; }
.materials-panel fieldset textarea { width: 100%; font-family: var(--mono); font-size: 12px; }
.badge-materials { background: #2a1a2e; color: #ce93d8; }
#mat-content { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

/* Geophysics — green accent */
.geo-header { padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; }
.geo-header h2 { font-size: 15px; font-weight: 500; color: var(--text-bright); }
.geo-tabs { display: flex; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; }
.geotab { padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 12px; cursor: pointer; white-space: nowrap; }
.geotab:hover { color: var(--text); }
.geotab.active { color: #a5d6a7; border-bottom-color: #a5d6a7; }
.geo-panel { display: none; flex: 1; overflow: auto; padding: 12px 16px; }
.geo-panel.active { display: block; }
.geo-panel fieldset { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.geo-panel legend { font-size: 11px; color: var(--text-dim); padding: 0 4px; }
.geo-panel fieldset label { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; font-size: 12px; color: var(--text-dim); }
.geo-panel fieldset input, .geo-panel fieldset select { width: 80px; padding: 3px 6px; font-size: 12px; }
.geo-panel fieldset textarea { width: 100%; font-family: var(--mono); font-size: 12px; }
.badge-geo { background: #1a2e1a; color: #a5d6a7; }
#geo-content { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

/* Fluids — cyan accent */
.fluids-header { padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; }
.fluids-header h2 { font-size: 15px; font-weight: 500; color: var(--text-bright); }
.fluids-tabs { display: flex; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; }
.fltab { padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 12px; cursor: pointer; white-space: nowrap; }
.fltab:hover { color: var(--text); }
.fltab.active { color: #80deea; border-bottom-color: #80deea; }
.fluids-panel { display: none; flex: 1; overflow: auto; padding: 12px 16px; }
.fluids-panel.active { display: block; }
.fluids-panel fieldset { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.fluids-panel legend { font-size: 11px; color: var(--text-dim); padding: 0 4px; }
.fluids-panel fieldset label { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; font-size: 12px; color: var(--text-dim); }
.fluids-panel fieldset input, .fluids-panel fieldset select { width: 80px; padding: 3px 6px; font-size: 12px; }
.fluids-panel fieldset textarea { width: 100%; font-family: var(--mono); font-size: 12px; }
.badge-fluids { background: #1a2a2e; color: #80deea; }
#fl-content { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

/* Quantum — red accent */
.quantum-header { padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; }
.quantum-header h2 { font-size: 15px; font-weight: 500; color: var(--text-bright); }
.quantum-tabs { display: flex; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; }
.qtab { padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 12px; cursor: pointer; white-space: nowrap; }
.qtab:hover { color: var(--text); }
.qtab.active { color: #ef9a9a; border-bottom-color: #ef9a9a; }
.quantum-panel { display: none; flex: 1; overflow: auto; padding: 12px 16px; }
.quantum-panel.active { display: block; }
.quantum-panel fieldset { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.quantum-panel legend { font-size: 11px; color: var(--text-dim); padding: 0 4px; }
.quantum-panel fieldset label { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; font-size: 12px; color: var(--text-dim); }
.quantum-panel fieldset input, .quantum-panel fieldset select { width: 80px; padding: 3px 6px; font-size: 12px; }
.quantum-panel fieldset textarea { width: 100%; font-family: var(--mono); font-size: 12px; }
.badge-quantum { background: #2e1a1a; color: #ef9a9a; }
#qt-content { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

/* About Page */
.about-page { width: 100%; padding: 32px 24px; overflow-y: auto; }
.about-header { text-align: center; margin-bottom: 28px; }
.about-icon { font-size: 36px; color: var(--accent); margin-bottom: 8px; }
.about-header h2 { font-size: 24px; color: var(--text-bright); }
.about-version { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.about-disclaimer { font-size: 11px; color: var(--text-muted); margin-top: 12px; line-height: 1.5; font-style: italic; max-width: 600px; }
.about-section { margin-bottom: 24px; }
.about-section h3 { font-size: 15px; color: var(--accent); margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.about-section p { font-size: 13px; line-height: 1.6; color: var(--text); margin-bottom: 8px; }
.about-table { margin: 12px 0; }
.about-table th { background: var(--bg-active); font-size: 12px; }
.about-table td { font-size: 12px; font-family: var(--mono); }
.about-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 12px 0; }
.about-feature { display: flex; gap: 12px; padding: 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; }
.about-feature i { font-size: 18px; color: var(--accent); width: 22px; text-align: center; flex-shrink: 0; margin-top: 2px; }
.about-feature strong { font-size: 13px; color: var(--text-bright); display: block; margin-bottom: 4px; }
.about-feature p { font-size: 12px; line-height: 1.5; color: var(--text-dim); margin: 0; }
.about-modules { list-style: none; padding: 0; }
.about-modules li { padding: 4px 0; font-size: 13px; color: var(--text); border-bottom: 1px solid var(--border); }
.about-modules li:last-child { border-bottom: none; }
.about-cite { margin: 10px 0; padding: 10px 14px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; }
.about-cite a { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.about-cite img { height: 20px; }
.about-note { font-size: 11px; color: var(--text-dim); margin-top: 8px; }
.about-domain { font-size: 13px; color: var(--text-bright); margin: 16px 0 6px; }
.about-domain i { color: var(--accent); margin-right: 6px; width: 16px; text-align: center; }

/* History Panel */
.history-panel { padding: 16px; overflow: auto; height: 100%; }
.history-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.history-header h2 { font-size: 15px; font-weight: 500; color: var(--text-bright); }
.history-header h2 i { margin-right: 8px; color: var(--accent); }
.history-controls { display: flex; gap: 8px; align-items: center; }
.history-list { display: flex; flex-direction: column; gap: 4px; }
.history-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; transition: border-color 0.15s; }
.history-item:hover { border-color: var(--accent); }
.history-item-info { display: flex; gap: 12px; align-items: center; }
.history-item-module { font-size: 11px; font-weight: 500; text-transform: uppercase; color: var(--accent); background: rgba(79,195,247,0.1); padding: 2px 8px; border-radius: 10px; }
.history-item-scan { font-size: 13px; color: var(--text); }
.history-item-rows { font-size: 11px; color: var(--text-dim); }
.history-item-meta { display: flex; gap: 10px; align-items: center; }
.history-item-date { font-size: 11px; color: var(--text-dim); }
.history-empty { text-align: center; color: var(--text-dim); padding: 32px; }
.history-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.history-detail-header span { font-size: 13px; color: var(--text); flex: 1; }
.history-detail-table-wrap { overflow: auto; }

/* Save Run button */
.btn-save { color: #4ade80; border: 1px solid rgba(74,222,128,0.3); margin-left: 6px; }
.btn-save:hover { background: rgba(74,222,128,0.1); border-color: #4ade80; }

/* Admin Panel */
.nav-item-admin { border-top: 1px solid var(--border); }
.admin-panel { padding: 16px; overflow: auto; height: 100%; }
.admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.admin-header h2 { font-size: 15px; font-weight: 500; color: var(--text-bright); }
.admin-header h2 i { margin-right: 8px; color: var(--accent); }
.admin-table-wrap { overflow: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-table th { text-align: left; padding: 8px 10px; background: var(--bg-alt); border-bottom: 1px solid var(--border); color: var(--text-dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.admin-table tr:hover td { background: var(--bg-hover); }
.admin-cell-email { font-family: var(--mono); font-size: 11px; }
.admin-cell-modules { min-width: 240px; max-width: 340px; }
.mod-group { display: flex; align-items: center; gap: 4px; margin: 1px 0; flex-wrap: wrap; }
.mod-group-label { font-size: 8.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.6; margin-right: 2px; min-width: 36px; }
.admin-empty { text-align: center; color: var(--text-dim); padding: 24px !important; }
.admin-select { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 3px 6px; font-size: 11px; cursor: pointer; }
.admin-select:focus { border-color: var(--accent); outline: none; }
.mod-pill { display: inline-block; padding: 1px 6px; margin: 0; border-radius: 9px; font-size: 9.5px; cursor: pointer; border: 1px solid var(--border); color: var(--text-dim); background: var(--bg-input); transition: all 0.12s; user-select: none; line-height: 1.4; }
.mod-pill:hover { border-color: var(--accent); color: var(--text); }
.mod-pill.mod-active { background: rgba(79,195,247,0.15); color: var(--accent); border-color: var(--accent); font-weight: 500; }
/* Role pills (App Guide, NDA, DSO) — distinct purple accent so trust-grants */
/* don't get visually confused with paid module subscriptions.                */
.mod-pill.mod-role { color: rgba(167,139,250,0.85); border-color: rgba(167,139,250,0.35); }
.mod-pill.mod-role:hover { color: #a78bfa; border-color: #a78bfa; }
.mod-pill.mod-role.mod-active { background: rgba(167,139,250,0.18); color: #a78bfa; border-color: #a78bfa; }
.admin-cell-actions { white-space: nowrap; }
.admin-email { color: var(--accent); }
.admin-email:hover { background: rgba(79,195,247,0.1); }
.btn-danger { color: #ef4444; }
.btn-danger:hover { background: rgba(239,68,68,0.1); }

/* Admin sub-tabs (Users / Support Tickets) */
.admin-subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; padding: 0; }
.atab { background: none; border: none; color: var(--text-dim); padding: 10px 18px; cursor: pointer; font-size: 13px; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; display: flex; align-items: center; gap: 6px; }
.atab i { font-size: 12px; }
.atab:hover { color: var(--text); }
.atab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
.apanel.hidden { display: none; }

/* Admin ticket summary tiles */
#admin-tix-summary { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.atix-tile { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; min-width: 90px; }
.atix-tile-label { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.atix-tile-value { font-size: 22px; font-weight: 700; color: var(--accent); }

/* Admin ticket list cards */
.atix-card { padding: 10px 12px; border: 1px solid var(--border); border-radius: 5px; margin: 4px; cursor: pointer; background: transparent; transition: border-color 0.15s, background 0.15s; }
.atix-card:hover { border-color: var(--accent); }
.atix-card.active { border-color: var(--accent); background: var(--bg-alt); }
.atix-card-meta { display: flex; gap: 6px; align-items: center; font-size: 10px; color: var(--text-dim); margin-bottom: 3px; }
.atix-card-subject { color: var(--text-bright); font-weight: 600; font-size: 12px; margin: 3px 0; }

/* EFIT g-eqdsk file uploader */
.efit-uploader { display: flex; flex-direction: column; gap: 10px; }
.efit-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px 24px; background: var(--bg-alt); border: 2px dashed var(--border);
  border-radius: 6px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.efit-drop:hover { border-color: var(--accent); background: rgba(79,195,247,0.04); }
.efit-drop.drag-over { border-color: var(--accent); background: rgba(79,195,247,0.08); }
.efit-drop-title { color: var(--text-bright); font-size: 14px; font-weight: 500; }
.efit-drop-hint { color: var(--text-dim); font-size: 11px; margin-top: 4px; }
.efit-status { min-height: 18px; }

/* Status / priority badges */
.gdbs-badge { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.gdbs-badge-open       { background: rgba(79,195,247,0.18);  color: #93c5fd; }
.gdbs-badge-in_progress{ background: rgba(251,191,36,0.18);  color: #fbbf24; }
.gdbs-badge-waiting    { background: rgba(196,181,253,0.18); color: #c4b5fd; }
.gdbs-badge-resolved   { background: rgba(110,231,183,0.18); color: #6ee7b7; }
.gdbs-badge-closed     { background: rgba(107,114,128,0.18); color: #9ca3af; }
.gdbs-badge-p1         { background: rgba(252,165,165,0.18); color: #fca5a5; }
.gdbs-badge-p2         { background: rgba(251,191,36,0.18);  color: #fbbf24; }

/* API Docs View */
.apidocs-page { width: 100%; padding: 20px 24px; overflow-y: auto; }
.apidocs-header { margin-bottom: 20px; }
.apidocs-header h2 { font-size: 16px; font-weight: 500; color: var(--text-bright); }
.apidocs-header h2 i { color: var(--accent); margin-right: 8px; }
.apidocs-subtitle { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.apidocs-page fieldset { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.apidocs-page legend { font-size: 11px; color: var(--text-dim); padding: 0 4px; font-weight: 600; }
.apidocs-page legend i { margin-right: 4px; color: var(--accent); }

/* API Method Badges */
.api-post { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; background: #1a3a1a; color: #4ec964; letter-spacing: 0.3px; }
.api-get { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; background: #003355; color: #5bc0ff; letter-spacing: 0.3px; }
.api-put { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; background: #2d2a00; color: #e8a838; letter-spacing: 0.3px; }
.api-del { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; background: #2e1a1a; color: #f14c4c; letter-spacing: 0.3px; }

/* About Page — HPC comparison callouts */
.about-hpc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.about-hpc-card { padding: 14px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; }
.about-hpc-card h4 { font-size: 13px; color: var(--text-bright); margin-bottom: 6px; }
.about-hpc-card p { font-size: 12px; line-height: 1.5; color: var(--text-dim); margin: 0; }
.about-hpc-card.hpc-old { border-left: 3px solid var(--error); }
.about-hpc-card.hpc-new { border-left: 3px solid var(--success); }
.about-hpc-card .hpc-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; margin-bottom: 6px; }
.about-hpc-card.hpc-old .hpc-label { color: var(--error); }
.about-hpc-card.hpc-new .hpc-label { color: var(--success); }
.about-stat-row { display: flex; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.about-stat { flex: 1; min-width: 140px; padding: 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; text-align: center; }
.about-stat .stat-num { font-size: 22px; font-weight: 700; color: var(--accent); display: block; }
.about-stat .stat-label { font-size: 11px; color: var(--text-dim); margin-top: 4px; display: block; }

/* HPC Lab */
.hpc-lab { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.hpc-lab-header { padding: 12px 16px 0; flex-shrink: 0; }
.hpc-lab-header h2 { font-size: 18px; color: var(--text-bright); }
.hpc-lab-header h2 i { color: var(--accent); margin-right: 8px; }
.hpc-lab-subtitle { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.hpc-lab-tabs { display: flex; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-shrink: 0; overflow: visible; gap: 0; position: relative; z-index: 50; }
.hpc-group { position: relative; z-index: 100; }
.hpc-group-toggle { padding: 8px 14px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 12px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; font-family: inherit; }
.hpc-group-toggle:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.hpc-group:hover > .hpc-group-toggle { color: var(--accent); background: rgba(99,102,241,0.08); }
.hpc-group-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 200; background: #12122a; border: 1px solid rgba(99,102,241,0.3); border-top: none; border-radius: 0 0 6px 6px; min-width: 190px; box-shadow: 0 8px 24px rgba(0,0,0,0.6); padding: 4px 0; }
.hpc-group:hover > .hpc-group-menu { display: block; }
/* Right-edge groups: open the menu leftward so it doesn't clip off-screen. */
.hpc-group.flip-right > .hpc-group-menu { left: auto; right: 0; }
.hpc-tab { padding: 8px 16px; background: none; border: none; border-left: 2px solid transparent; color: var(--text-dim); font-size: 12px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; font-family: inherit; }
.hpc-tab:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.hpc-tab.active { color: var(--accent); border-left-color: var(--accent); background: rgba(99,102,241,0.1); }
.addon-badge { font-size: 9px; padding: 1px 5px; margin-left: auto; border-radius: 3px; background: rgba(245,158,11,0.18); color: #fbbf24; border: 1px solid rgba(245,158,11,0.4); text-transform: uppercase; letter-spacing: 0.5px; }
.ext-badge { font-size: 9px; padding: 1px 5px; margin-left: 4px; border-radius: 3px; background: rgba(245,158,11,0.18); color: #fbbf24; border: 1px solid rgba(245,158,11,0.4); text-transform: uppercase; letter-spacing: 0.5px; }
.ext-badge.unlicensed { background: rgba(100,116,139,0.15); color: #94a3b8; border-color: rgba(100,116,139,0.4); }

/* BSSN view: override the inline 80px-wide-input default with a stacked-label
   grid so selects show their full option text and numeric inputs aren't cramped. */
#view-bssn fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 14px;
  padding: 12px 14px;
}
#view-bssn fieldset legend { grid-column: 1 / -1; padding-bottom: 4px; }
#view-bssn fieldset label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  margin-right: 0;
  font-size: 11px;
  color: var(--text-dim);
}
#view-bssn fieldset select,
#view-bssn fieldset input {
  width: 100%;
  max-width: 100%;
  padding: 5px 8px;
  font-size: 12px;
  background: var(--bg-code, #0d1117);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 3px;
  box-sizing: border-box;
}
#view-bssn fieldset input[type="number"] { max-width: 140px; }
.hpc-panel { display: none; flex: 1; overflow: auto; padding: 12px 16px; }
.hpc-panel.active { display: flex; flex-direction: column; gap: 8px; }
.hpc-panel fieldset { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin-bottom: 8px; }
.hpc-panel legend { font-size: 11px; color: var(--text-dim); padding: 0 4px; }
.hpc-panel fieldset label { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; font-size: 12px; color: var(--text-dim); }
.hpc-panel fieldset input, .hpc-panel fieldset select { width: 90px; padding: 3px 6px; font-size: 12px; }
.hpc-panel fieldset input[type="text"] { width: 80px; }
.hpc-panel fieldset select { width: auto; max-width: 200px; }
.param-hints { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.param-hint { display: inline-block; padding: 2px 8px; font-size: 10px; border-radius: 3px; background: var(--bg-hover); color: var(--accent); border: 1px solid var(--border); cursor: pointer; }
.param-hint:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Ballistics Sub-tabs */
.ballistics-subtabs { display: flex; gap: 2px; background: var(--bg-alt); padding: 4px; border-radius: 4px; margin-bottom: 8px; }
.ballistics-subtab { padding: 6px 12px; background: none; border: none; border-radius: 3px; color: var(--text-dim); font-size: 11px; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.ballistics-subtab:hover { color: var(--text); background: var(--bg-hover); }
.ballistics-subtab.active { color: var(--accent); background: var(--bg-panel); }
.ballistics-subpanel { display: none; flex: 1; overflow: auto; flex-direction: column; gap: 8px; }
.ballistics-subpanel.active { display: flex; }
.form-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px; }
.form-grid-3 label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-dim); }
.form-grid-3 input, .form-grid-3 select { width: 100%; padding: 5px 8px; }
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.checkbox-label input[type="checkbox"] { width: auto; }

/* Ablation Results */
.ablation-results { padding: 12px; }
.ablation-result-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 16px; }
.ablation-result-card.ablating { border-left: 4px solid var(--warn); }
.ablation-result-card.safe { border-left: 4px solid var(--success); }
.ablation-result-card h4 { font-size: 14px; color: var(--text-bright); margin-bottom: 12px; text-align: center; }
.ablation-result-card.ablating h4 { color: var(--warn); }
.ablation-result-card.safe h4 { color: var(--success); }
.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.result-item { display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--bg); border-radius: 4px; }
.result-item .label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; }
.result-item .value { font-size: 14px; color: var(--text-bright); font-weight: 600; }
.result-item.highlight { background: var(--bg-active); }
.result-item.highlight .value { color: var(--accent); font-size: 16px; }

/* Bloom Field Stats */
.bloom-summary { margin: 12px 0; }
.bloom-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.bloom-stat { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 12px; text-align: center; }
.bloom-stat-label { display: block; font-size: 10px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 4px; }
.bloom-stat-value { display: block; font-size: 16px; color: var(--text-bright); font-weight: 600; }
.legend-info { margin-left: 6px; color: var(--text-dim); cursor: help; }
.legend-info:hover { color: var(--accent); }
#bloom-canvas { background: #0a0a0a; border-radius: 8px; border: 1px solid rgba(139,92,246,0.3); display: block; }

/* Theory Lab */
.theory-lab { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.theory-lab-header { padding: 12px 16px 0; flex-shrink: 0; }
.theory-lab-header h2 { font-size: 18px; color: var(--text-bright); }
.theory-lab-header h2 i { color: #6366f1; margin-right: 8px; }
.theory-lab-subtitle { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.theory-tabs { display: flex; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; }
.theory-tab { padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 12px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.theory-tab:hover { color: var(--text); }
.theory-tab.active { color: #6366f1; border-bottom-color: #6366f1; }
.theory-domain { display: none; flex: 1; flex-direction: column; overflow: hidden; padding: 8px 16px 12px; }
.theory-domain.active { display: flex; }
.theory-subtabs { display: flex; gap: 2px; background: var(--bg-alt); padding: 4px; border-radius: 4px; margin-bottom: 8px; flex-shrink: 0; }
.theory-subtab { padding: 6px 12px; background: none; border: none; border-radius: 3px; color: var(--text-dim); font-size: 11px; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.theory-subtab:hover { color: var(--text); background: var(--bg-hover); }
.theory-subtab.active { color: #6366f1; background: var(--bg-panel); }
.theory-subpanel { display: none; flex: 1; overflow: auto; flex-direction: column; gap: 8px; }
.theory-subpanel.active { display: flex; }
.theory-subpanel canvas { max-height: 280px; width: 100% !important; height: auto !important; }
.theory-subpanel fieldset { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin-bottom: 8px; }
.theory-subpanel legend { font-size: 11px; color: var(--text-dim); padding: 0 4px; }
.theory-subpanel fieldset label { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; font-size: 12px; color: var(--text-dim); }
.theory-subpanel fieldset input, .theory-subpanel fieldset select { width: 90px; padding: 3px 6px; font-size: 12px; }
.theory-subpanel fieldset input[type="text"] { width: 120px; }
.theory-subpanel fieldset select { width: auto; max-width: 200px; }
.seeth-info { margin-top: 12px; padding: 12px; background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1)); border: 1px solid rgba(99,102,241,0.3); border-radius: 6px; }
.seeth-info p { font-size: 11px; color: var(--text-dim); line-height: 1.5; }
.seeth-info strong { color: #6366f1; }

/* Adv Module */
.adv-tabs { display: flex; background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 8px 12px; gap: 8px; overflow-x: auto; }
.adv-tab-btn { padding: 8px 16px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim); font-size: 12px; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.adv-tab-btn:hover { color: var(--text); background: var(--bg-hover); }
.adv-tab-btn.active { color: #f59e0b; background: rgba(245,158,11,0.15); border-color: #f59e0b; }
.adv-tab-content { display: none; padding: 16px; }
.adv-tab-content.active { display: block; }
.adv-tab-content h3 { font-size: 14px; color: var(--text-bright); margin-bottom: 8px; }
.adv-tab-content p { font-size: 11px; color: var(--text-dim); margin-bottom: 12px; }
.adv-tab-content fieldset { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin-bottom: 12px; }
.adv-tab-content legend { font-size: 11px; color: var(--text-dim); padding: 0 4px; }
.adv-tab-content fieldset label { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; font-size: 12px; color: var(--text-dim); }
.adv-tab-content fieldset input, .adv-tab-content fieldset select { width: 90px; padding: 3px 6px; font-size: 12px; }
.adv-tab-content fieldset input[type="text"] { width: 120px; }
.adv-tab-content fieldset select { width: auto; max-width: 200px; }
.adv-species-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.adv-species-item { padding: 8px 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; display: flex; align-items: center; justify-content: space-between; }
.adv-species-fields { display: flex; gap: 12px; flex: 1; }
.adv-species-fields label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-dim); }
.adv-species-fields input { width: 70px; padding: 3px 6px; font-size: 11px; }
.adv-results { margin-top: 12px; padding: 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; }
.adv-results h4 { font-size: 12px; color: var(--text-bright); margin-bottom: 8px; }
.adv-results pre { background: var(--bg-input); border: 1px solid var(--border); border-radius: 3px; padding: 8px; font-size: 11px; font-family: var(--mono); overflow-x: auto; }
.adv-api-keys { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.adv-api-key-item { padding: 10px 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; display: flex; align-items: center; justify-content: space-between; }
.adv-api-key-info { flex: 1; }
.adv-api-key-info .key-name { font-size: 12px; color: var(--text-bright); margin-bottom: 4px; }
.adv-api-key-info .key-preview { font-size: 11px; font-family: var(--mono); color: var(--text-dim); }
.adv-api-key-info .key-created { font-size: 10px; color: var(--text-dim); margin-top: 4px; }

/* ── Tukey-Exponential Anomaly Detector ────────────────────────────────── */
.tukey-panel { display: none; flex: 1; overflow: auto; padding: 12px 16px; }
.tukey-panel.active { display: block; }
.tukey-panel fieldset { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.tukey-panel legend { font-size: 11px; color: var(--text-dim); padding: 0 4px; }
.tukeytab { padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 12px; cursor: pointer; white-space: nowrap; }
.tukeytab:hover { color: var(--text); }
.tukeytab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
.plasma-stat-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; }
.plasma-stat-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.plasma-stat-value { font-size: 13px; font-family: var(--mono); color: var(--text-bright); font-weight: 600; }
/* Reference verify popover */
.ref-verify { position: relative; display: inline-block; vertical-align: middle; margin-left: 4px; }
.ref-note { font-size: 11px; color: #94a3b8; padding: 6px 0; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.05); }
.ref-note a { color: #4fc3f7; text-decoration: none; }
.ref-note a:hover { text-decoration: underline; }
.tk-classify-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.82rem; }
.tk-classify-row:last-child { border-bottom: none; }
.tk-classify-row span:first-child { color: #94a3b8; }

/* DSO/Seeth Simulations */
.sim-intro { padding: 12px; background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(168,85,247,0.08)); border: 1px solid rgba(99,102,241,0.25); border-radius: 6px; margin-bottom: 12px; }
.sim-intro p { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin: 0; }
.sim-intro strong { color: #a78bfa; }
.sim-tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.sim-tab { padding: 8px 14px; font-size: 11px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-dim); border-radius: 4px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
.sim-tab:hover { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.3); color: var(--text-bright); }
.sim-tab.active { background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(168,85,247,0.2)); border-color: #6366f1; color: #a78bfa; }
.sim-tab i { font-size: 10px; }
.sim-panel { display: none; flex-direction: column; gap: 12px; }
.sim-panel.active { display: flex; }
.sim-results { overflow: visible; }
.sim-results .md-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.sim-results .md-chart-cell { position: relative; height: 280px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.sim-results .md-chart-cell canvas { width: 100% !important; height: 100% !important; }
.sim-note { padding: 12px 16px; border-radius: 6px; margin: 12px 0; }
.sim-note p { margin: 0; font-size: 12px; line-height: 1.5; }
.sim-note-red { background: rgba(239,83,80,0.1); border: 1px solid rgba(239,83,80,0.3); color: #ef5350; }
.sim-note-blue { background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.3); color: #6366f1; }
.sim-note-green { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); color: #10b981; }
.sim-note-purple { background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.3); color: #8b5cf6; }

/* Flyby Anomaly */
#flyby-canvas { background: #0a0a0a; border-radius: 8px; border: 1px solid rgba(139,92,246,0.3); display: block; }
.flyby-charts-container { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; margin: 16px 0; }
.flyby-charts-container > div:first-child { flex: 0 0 auto; }
.flyby-charts-container > div:last-child { flex: 1 1 400px; min-width: 320px; }

/* Geometry Gears */
.gears-params { transition: all 0.2s ease; }
.gears-params.hidden { display: none; }
.gears-params label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; max-width: 280px; }
.gears-params input[type="range"] { width: 100%; cursor: pointer; }
.gears-params span { font-weight: 600; color: #8b5cf6; font-size: 1.1em; }
.gears-hint { font-size: 11px; color: #888; font-style: italic; margin-top: 8px; padding: 8px; background: rgba(139,92,246,0.1); border-radius: 4px; max-width: 500px; }
.gears-canvas-container { margin: 16px 0; background: #0a0a15; border-radius: 8px; border: 1px solid rgba(139,92,246,0.3); overflow: hidden; max-width: 650px; }
#gears-canvas { width: 100%; height: 280px; display: block; }
#sim-gears .gradient-summary-box { max-width: 650px; grid-template-columns: repeat(4, auto) !important; gap: 20px !important; }
#sim-gears .sim-note { max-width: 650px; }

/* E-Pooling Prediction Box */
.ep-prediction { padding: 12px 16px; background: linear-gradient(135deg, rgba(74,222,128,0.1), rgba(34,197,94,0.08)); border: 1px solid rgba(74,222,128,0.3); border-radius: 6px; text-align: center; }
.ep-prediction p { font-size: 12px; color: var(--text-bright); margin: 0; }
.ep-prediction span { font-weight: 600; color: #4ade80; }

/* Planck Derivation */
.planck-derivation { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.derivation-step { display: flex; gap: 12px; padding: 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; }
.step-number { width: 28px; height: 28px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.step-content h4 { font-size: 12px; color: var(--text-bright); margin: 0 0 4px 0; }
.step-eq { font-family: var(--mono); font-size: 13px; color: #a78bfa; padding: 6px 10px; background: rgba(99,102,241,0.1); border-radius: 4px; margin: 6px 0; display: inline-block; }
.step-content p { font-size: 11px; color: var(--text-dim); margin: 0; line-height: 1.4; }
.planck-result { text-align: center; padding: 20px; background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(168,85,247,0.1)); border: 1px solid rgba(99,102,241,0.3); border-radius: 8px; margin-bottom: 16px; }
.planck-eq { font-family: var(--mono); font-size: 18px; color: #a78bfa; font-weight: 600; margin-bottom: 8px; }
.planck-compare { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }
.planck-error { font-size: 13px; color: #4ade80; font-weight: 600; }

/* Edge Cases Grid */
.edge-case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }
.edge-case-card { padding: 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; transition: all 0.2s; }
.edge-case-card:hover { border-color: rgba(99,102,241,0.4); transform: translateY(-2px); }
.ec-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ec-name { font-size: 12px; font-weight: 600; color: var(--text-bright); }
.ec-match { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.match-high { background: rgba(74,222,128,0.2); color: #4ade80; }
.match-med { background: rgba(251,191,36,0.2); color: #fbbf24; }
.match-low { background: rgba(239,83,80,0.2); color: #ef5350; }
.ec-desc { font-size: 10px; color: var(--text-dim); line-height: 1.4; margin-bottom: 8px; }
.ec-insight { font-size: 10px; color: #a78bfa; line-height: 1.4; }
.ec-insight i { margin-right: 4px; color: #fbbf24; }
.ec-resid { font-size: 11px; color: var(--text-dim); margin: 6px 0 0 0; }
.ec-resid strong { color: var(--warn, #d97706); font-family: var(--font-mono, monospace); }
/* Summary card 3-way: DSO derivation / Observed / Current Standard */
.ec-three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 8px 0; }
.ec3 { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 5px; background: var(--bg-input); min-width: 0; }
.ec3-lab { font-size: 8px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); }
.ec3-val { font-size: 11px; color: var(--text-bright); font-weight: 600; word-break: break-word; }
.ec3-form { font-size: 8px; color: var(--text-dim); font-family: var(--font-mono, monospace); line-height: 1.3; word-break: break-word; }
.ec3-dso { background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.08)); border: 1px solid rgba(99,102,241,0.25); }
.ec3-obs { border: 1px solid var(--border); }
.ec3-std { border: 1px solid var(--border); opacity: 0.85; }
/* Detail 3-column comparison + derivation formula */
.ec-comparison-3 { grid-template-columns: 1fr 1fr 1fr; }
.ec-form { font-size: 11px !important; color: var(--text-dim) !important; font-family: var(--font-mono, monospace); margin: 0 0 6px 0 !important; word-break: break-word; }
.ec-val { font-size: 14px !important; color: var(--text-bright) !important; font-weight: 600; margin: 0 0 8px 0 !important; }

/* Edge Case Detail View */
.edge-case-detail { padding: 16px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; }
.edge-case-detail h3 { font-size: 16px; color: var(--text-bright); margin: 0 0 8px 0; }
.edge-case-detail .ec-desc { font-size: 12px; margin-bottom: 16px; }
.ec-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.ec-col { padding: 12px; background: var(--bg-input); border-radius: 6px; }
.ec-col h4 { font-size: 11px; color: var(--text-dim); margin: 0 0 6px 0; text-transform: uppercase; letter-spacing: 0.5px; }
.ec-col p { font-size: 12px; color: var(--text-bright); margin: 0; }
.ec-dso { background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(168,85,247,0.08)); border: 1px solid rgba(99,102,241,0.2); }
.ec-interpretation { padding: 12px; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.2); border-radius: 6px; }
.ec-interpretation h4 { font-size: 11px; color: #fbbf24; margin: 0 0 6px 0; }
.ec-interpretation i { margin-right: 6px; }
.ec-interpretation p { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin: 0; }

/* Edge Case Card Animation Button */
.edge-case-card { position: relative; }
.btn-ec-anim { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; padding: 0; border: none; background: rgba(99,102,241,0.2); color: #6366f1; border-radius: 50%; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.btn-ec-anim:hover { background: var(--accent); color: #fff; transform: scale(1.1); }
.edge-case-card:hover .btn-ec-anim { opacity: 1; }

/* Export Validation Report Button */
.btn-export-report { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border: none; padding: 10px 18px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; margin-top: 12px; }
.btn-export-report i { font-size: 14px; }
.btn-export-report:hover { background: linear-gradient(135deg, #4f46e5, #7c3aed); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }

/* GQL Reference Page */
.gql-page { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.gql-header { padding: 20px 24px 12px; flex-shrink: 0; }
.gql-header h2 { font-size: 22px; color: var(--text-bright); margin-bottom: 4px; }
.gql-header h2 i { color: var(--accent); margin-right: 8px; }
.gql-subtitle { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
.gql-search-wrap { position: relative; max-width: 500px; }
.gql-search-wrap input { width: 100%; padding: 8px 12px 8px 34px; font-size: 13px; border-radius: 4px; }
.gql-search-wrap i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: 13px; }
.gql-body { flex: 1; overflow-y: auto; padding: 0 24px 24px; }
.gql-section { margin-bottom: 20px; }
.gql-section.gql-hidden { display: none; }
.gql-section h3 { font-size: 14px; color: var(--accent); margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.gql-section h3 .gql-toggle { font-size: 10px; color: var(--text-dim); transition: transform 0.2s; }
.gql-section h3 .gql-toggle.collapsed { transform: rotate(-90deg); }
.gql-section-body { padding-left: 4px; }
.gql-section-body.collapsed { display: none; }
.gql-cmd { margin-bottom: 16px; padding: 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; }
.gql-cmd-name { font-family: var(--mono); font-size: 13px; color: var(--success); font-weight: 700; margin-bottom: 4px; }
.gql-cmd-desc { font-size: 12px; color: var(--text); line-height: 1.5; margin-bottom: 8px; }
.gql-cmd-syntax { font-family: var(--mono); font-size: 12px; color: var(--text-bright); background: var(--bg); padding: 8px 10px; border-radius: 3px; margin-bottom: 6px; white-space: pre-wrap; }
.gql-cmd-example { font-family: var(--mono); font-size: 11px; color: var(--text-dim); background: var(--bg); padding: 6px 10px; border-radius: 3px; border-left: 3px solid var(--accent); margin-top: 6px; white-space: pre-wrap; }
.gql-cmd-example .gql-comment { color: #6a9955; }
.gql-cmd-result { font-family: var(--mono); font-size: 11px; color: var(--text-dim); padding: 4px 10px 4px 20px; white-space: pre-wrap; }
.gql-tag { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 600; margin-right: 4px; }
.gql-tag-read { background: #003355; color: #5bc0ff; }
.gql-tag-write { background: #1a3a1a; color: #4ec964; }
.gql-tag-admin { background: #2d2a00; color: #e8a838; }
.gql-tag-delete { background: #2e1a1a; color: #f14c4c; }
.gql-tip { padding: 10px 14px; background: var(--bg-panel); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 4px; margin: 10px 0; font-size: 12px; line-height: 1.5; color: var(--text); }
.gql-tip strong { color: var(--accent); }
.gql-no-results { text-align: center; padding: 40px; color: var(--text-dim); font-size: 14px; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-input); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ═══════════════════════════════════════════════════════════════════════════
   PHYSICS ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-animate {
  background: var(--success) !important;
  color: #fff !important;
  border-color: var(--success) !important;
  float: right;
  margin-top: 10px;
}
.btn-animate:hover {
  background: #3db854 !important;
  filter: brightness(1.1);
}
.btn-animate i { margin-right: 6px; }

.anim-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
}

.anim-container {
  background: #0a0a12;
  border: 1px solid #333;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  max-width: 95vw;
  max-height: 95vh;
}

.anim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #111;
  border-bottom: 1px solid #333;
}

.anim-title {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0e0;
  font-family: var(--mono);
}

.anim-controls {
  display: flex;
  gap: 8px;
}

.anim-btn {
  background: #222;
  border: 1px solid #444;
  color: #ccc;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.anim-btn:hover {
  background: #333;
  border-color: #555;
  color: #fff;
}
.anim-btn i { font-size: 12px; }

#anim-canvas {
  display: block;
  background: #050508;
}

.anim-info {
  padding: 10px 16px;
  background: #0f0f15;
  border-top: 1px solid #222;
  font-family: var(--mono);
  font-size: 11px;
  color: #888;
  text-align: center;
}

/* GeoNum Precision Display */
.geonum-result {
  margin-bottom: 12px;
  padding: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.geonum-label {
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 6px;
  font-size: 12px;
}

.geonum-comparison {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
}

.geonum-ieee {
  color: var(--text-dim);
  padding: 3px 0;
}

.geonum-geo {
  color: var(--success);
  padding: 3px 0;
  font-weight: 500;
}

.geonum-meta {
  color: var(--text-dim);
  font-size: 10px;
  padding: 3px 0;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}

/* Materials — Superconductor & Alloy Design tabs */
.mat-mode-row { margin-bottom: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mat-mode-row label { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.mat-mode-row select { background: var(--bg-alt); border: 1px solid var(--border); color: var(--text); font-size: 12px; padding: 3px 6px; border-radius: 4px; }
.mat-input-group { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; align-items: flex-end; }
.mat-input-group label { font-size: 12px; color: var(--text-dim); display: flex; flex-direction: column; gap: 4px; }
.mat-input-group input, .mat-input-group select { background: var(--bg-alt); border: 1px solid var(--border); color: var(--text); font-size: 12px; padding: 4px 6px; border-radius: 4px; }
.mat-derivation { margin: 10px 0; }
.deriv-block { background: var(--bg-panel); border: 1px solid rgba(100,180,255,0.2); border-radius: 6px; padding: 12px 16px; font-family: var(--mono); font-size: 11px; }
.deriv-title { font-size: 12px; font-weight: 600; color: var(--text-bright); margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.deriv-row { display: flex; justify-content: space-between; padding: 3px 0; color: var(--text-dim); gap: 16px; }
.deriv-row span:first-child { color: #90caf9; min-width: 120px; }
.deriv-row span:last-child { color: var(--text); text-align: right; }
.deriv-result { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
.deriv-result span:first-child { color: #ce93d8; font-weight: 600; }
.deriv-result span:last-child { color: #a5d6a7; font-weight: 600; }
.deriv-note { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 10px; font-style: italic; }

/* =========================================================
   LANDING PAGE
   ========================================================= */

/* Landing screen — scrollable */
#landing-screen { overflow-y: auto; display: none; flex-direction: column; background: var(--bg); }
#landing-screen.active { display: flex; }

.landing-wrap { display: flex; flex-direction: column; min-height: 100%; }
.landing-accent { color: var(--accent); }

/* --- Nav --- */
.landing-nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklch, var(--surface-0) 90%, transparent); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.landing-nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 2rem;
  height: 60px; display: flex; align-items: center; gap: 2rem;
}
.landing-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 300; color: var(--text-primary); white-space: nowrap;
}
.landing-logo i { color: var(--accent); font-size: 22px; }
.landing-logo span { font-size: 20px; }
.landing-nav-links { display: flex; gap: 0.25rem; flex: 1; }
.landing-nav-link {
  padding: 6px 14px; color: var(--text-secondary); font-size: 13px;
  border-radius: 4px; transition: all 0.2s; text-decoration: none;
}
.landing-nav-link:hover { color: var(--text-primary); background: color-mix(in oklch, var(--accent) 12%, transparent); text-decoration: none; }
.landing-nav-actions { display: flex; gap: 0.5rem; }

/* --- Buttons --- */
.landing-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 20px; background: var(--accent); color: var(--accent-text, #fff);
  border: none; border-radius: 5px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.landing-btn-primary i, .landing-btn-primary svg { color: inherit; }
.landing-btn-primary:hover { background: var(--accent-hover); }
.landing-btn-outline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 18px; background: transparent; color: var(--text-bright);
  border: 1px solid var(--border-light); border-radius: 5px; font-size: 13px;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.landing-btn-outline:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); }
.landing-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 20px; background: transparent; color: var(--text-bright);
  border: 1px solid var(--border); border-radius: 5px; font-size: 13px;
  cursor: pointer; transition: all 0.2s; text-decoration: none; white-space: nowrap;
}
.landing-btn-ghost:hover { background: color-mix(in oklch, var(--text-primary) 7%, transparent); text-decoration: none; color: var(--text-primary); }
.landing-btn-lg { padding: 12px 28px; font-size: 15px; border-radius: 6px; }
.landing-btn-full { width: 100%; justify-content: center; padding: 12px; font-size: 15px; border-radius: 6px; }

/* --- Hero --- */
.landing-hero {
  background: radial-gradient(ellipse at 60% 40%, rgba(79,195,247,0.07) 0%, transparent 60%),
              radial-gradient(ellipse at 20% 80%, rgba(129,196,132,0.05) 0%, transparent 50%),
              var(--bg);
  padding: 100px 2rem 80px;
  border-bottom: 1px solid var(--border);
}
.landing-hero-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.landing-badge-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; background: color-mix(in oklch, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 32%, transparent); border-radius: 20px;
  font-size: 12px; color: var(--accent); margin-bottom: 1.5rem;
}
.landing-h1 {
  font-size: clamp(32px, 5vw, 58px); font-weight: 300;
  color: var(--text-bright); line-height: 1.2; margin-bottom: 1.25rem;
}
.landing-hero-sub {
  max-width: 640px; margin: 0 auto 2.5rem;
  font-size: 16px; color: var(--text-dim); line-height: 1.7;
}
.landing-hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 4rem; }
.landing-hero-stats {
  display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap;
  padding-top: 2.5rem; border-top: 1px solid var(--border);
}
.landing-stat { text-align: center; }
.landing-stat span { display: block; font-size: 36px; font-weight: 300; color: #4fc3f7; line-height: 1; margin-bottom: 0.5rem; }
.landing-stat small { font-size: 12px; color: var(--text-dim); line-height: 1.5; }

/* --- Sections --- */
.landing-section { padding: 80px 2rem; }
.landing-section-alt { background: var(--bg-alt); }
.landing-section-inner { max-width: 1200px; margin: 0 auto; }
.landing-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: #4fc3f7; margin-bottom: 1rem;
}
.landing-h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 300; color: var(--text-bright); margin-bottom: 1rem; }
.landing-section-sub { font-size: 15px; color: var(--text-dim); line-height: 1.7; max-width: 680px; margin-bottom: 3rem; }

/* --- Features grid --- */
.landing-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.landing-feature-card {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 1.75rem; transition: border-color 0.2s;
}
.landing-feature-card:hover { border-color: var(--border-light); }
.landing-feature-icon { font-size: 28px; margin-bottom: 1rem; }
.landing-feature-card h3 { font-size: 15px; font-weight: 600; color: var(--text-bright); margin-bottom: 0.75rem; }
.landing-feature-card p { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 0; }

/* --- Domains grid --- */
.landing-domains-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.landing-domain-card {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 1.5rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: all 0.2s; cursor: default;
}
.landing-domain-card:hover { border-color: var(--border-light); background: var(--bg-hover); }
.landing-domain-card i { font-size: 24px; }
.landing-domain-card span { font-size: 14px; font-weight: 600; color: var(--text-bright); }
.landing-domain-card small { font-size: 11px; color: var(--text-dim); line-height: 1.4; }

/* --- Tiers grid --- */
.landing-tiers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; align-items: stretch; }
.landing-tier-card {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem;
}
.landing-tier-card-highlight {
  border-color: rgba(245,158,11,0.4);
  box-shadow: 0 0 0 1px rgba(245,158,11,0.15);
}
.landing-tier-label {
  display: inline-block; padding: 4px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; align-self: flex-start;
}
.landing-tier-price { font-size: 32px; font-weight: 300; color: var(--text-bright); }
.landing-tier-price small { font-size: 14px; color: var(--text-dim); }
.landing-tier-desc { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.landing-tier-features { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text); flex: 1; }
.landing-tier-features li { display: flex; align-items: center; gap: 8px; }
.landing-tier-features li i { width: 14px; font-size: 12px; }
.landing-tier-features li i.fa-check { color: #4ec964; }
.landing-tier-features li i.fa-times { color: #555; }
.landing-tier-features li.muted { color: var(--text-dim); }
.landing-tier-btn {
  margin-top: auto; padding: 10px 16px; width: 100%;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 5px; color: var(--text); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
}
.landing-tier-btn:hover { background: var(--bg-hover); border-color: var(--border-light); color: var(--text-bright); }
.landing-tier-btn-accent {
  background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.4); color: #f59e0b;
}
.landing-tier-btn-accent:hover { background: rgba(245,158,11,0.25); }

/* --- Feedback section --- */
.landing-feedback-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
@media (max-width: 768px) { .landing-feedback-wrap { grid-template-columns: 1fr; } }
.landing-contact-list { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }
.landing-contact-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 1.25rem; background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: 6px;
}
.landing-contact-item i { color: #4fc3f7; font-size: 16px; margin-top: 2px; }
.landing-contact-item strong { display: block; color: var(--text-bright); font-size: 13px; margin-bottom: 3px; }
.landing-contact-item a { font-size: 12px; color: var(--text-dim); }
.landing-contact-item a:hover { color: #4fc3f7; }

.landing-form { display: flex; flex-direction: column; gap: 1rem; }
.landing-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 540px) { .landing-form-row { grid-template-columns: 1fr; } }
.landing-field { display: flex; flex-direction: column; gap: 5px; }
.landing-field label { font-size: 12px; color: var(--text-dim); font-weight: 500; }
.landing-field input,
.landing-field select,
.landing-field textarea {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 5px; padding: 9px 12px; color: var(--text); font-size: 13px;
}
.landing-field input:focus,
.landing-field select:focus,
.landing-field textarea:focus { border-color: #4fc3f7; outline: none; }
.landing-field textarea { resize: vertical; min-height: 100px; }

.feedback-response { font-size: 13px; min-height: 20px; }
.feedback-success { color: #4ec964; }
.feedback-error { color: var(--error); }

/* --- Demo / GIF section --- */
.landing-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 0.5rem;
}
.landing-demo-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.landing-demo-card:hover { border-color: rgba(79,195,247,0.4); transform: translateY(-2px); }
.landing-demo-card img {
  width: 100%; display: block;
  border-bottom: 1px solid var(--border);
  background: #111;
}
.landing-demo-card-body { padding: 1rem 1.25rem; }
.landing-demo-card-body h4 { font-size: 14px; font-weight: 600; color: var(--text-bright); margin-bottom: 4px; }
.landing-demo-card-body p  { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 0; }

/* --- Footer --- */
.landing-footer {
  margin-top: auto; padding: 2rem;
  border-top: 1px solid var(--border); background: var(--bg-alt);
}
.landing-footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.landing-footer-copy { font-size: 12px; color: var(--text-dim); }
.landing-footer-copy a { color: var(--text-dim); }
.landing-footer-copy a:hover { color: #4fc3f7; }
.landing-footer-citation { font-size: 11px; color: var(--text-dim); margin-top: 6px; opacity: 0.7; }
.landing-footer-citation a { color: #81c784; text-decoration: none; }
.landing-footer-citation a:hover { color: #a5d6a7; text-decoration: underline; }

/* FAQ Accordion */
.landing-faq-section { background: var(--bg-surface); }
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 2px; }
.faq-item { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-card); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 18px 20px; font-size: 15px; font-weight: 600; color: var(--text-bright);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  transition: background 0.15s;
}
.faq-q:hover { background: var(--bg-hover); }
.faq-q::after { content: '+'; font-size: 20px; font-weight: 300; color: var(--text-dim); flex-shrink: 0; transition: transform 0.2s; }
.faq-q[aria-expanded="true"]::after { transform: rotate(45deg); color: #4fc3f7; }
.faq-a { display: none; padding: 0 20px 18px; }
.faq-item.open .faq-a { display: block; }
.faq-a p { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin: 0 0 10px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a ul { margin: 8px 0 10px 18px; padding: 0; }
.faq-a ul li { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 4px; }
.faq-a a { color: #4fc3f7; text-decoration: none; }
.faq-a a:hover { text-decoration: underline; }

/* ── GDBS Free section ── */
.landing-free-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0 28px;
}
@media (max-width: 760px) { .landing-free-grid { grid-template-columns: 1fr; } }
.landing-free-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px;
}
.landing-free-card-header {
  display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600;
  color: var(--text-bright); margin-bottom: 10px;
}
.landing-free-card-header i { font-size: 18px; }
.landing-free-card p { font-size: 13px; color: var(--text-muted); line-height: 1.65; margin: 0; }
.landing-free-actions {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; align-items: center;
}
.landing-free-snippet {
  background: #0d1117; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  overflow: hidden; max-width: 680px;
}
.landing-free-snippet-label {
  padding: 8px 16px; font-size: 11px; color: #8b949e;
  background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.07);
  font-family: var(--mono);
}
/* Self-contained dark snippet: must NOT inherit flux.css `pre{background:var(--code-bg)}`,
   which is near-white in the flux light theme and rendered the code white-on-white. */
.landing-free-snippet pre { margin: 0; padding: 16px; overflow-x: auto; background: transparent; border: 0; border-radius: 0; }
.landing-free-snippet code { font-family: var(--mono); font-size: 13px; color: #e6edf3; background: transparent; line-height: 1.6; }
.landing-free-note { font-size: 12px; color: var(--text-dim); margin-top: 20px; }

/* ── Try Live nav button ── */
.landing-btn-ghost-sm {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; background: rgba(79,195,247,0.08); color: #4fc3f7;
  border: 1px solid rgba(79,195,247,0.3); border-radius: 5px; font-size: 12px;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.landing-btn-ghost-sm:hover { background: rgba(79,195,247,0.15); border-color: #4fc3f7; }

/* ── Live Demo Modal ── */
.demo-modal-content {
  background: #1a1f2e; border: 1px solid rgba(79,195,247,0.2); border-radius: 12px;
  width: 600px; max-width: 95vw; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}
.demo-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid rgba(255,255,255,0.07);
  background: linear-gradient(135deg, rgba(79,195,247,0.06) 0%, transparent 100%);
}
.demo-modal-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.demo-modal-title span:first-of-type { font-size: 16px; font-weight: 600; color: #e0e0e0; }
.demo-modal-sub { font-size: 11px; color: var(--text-dim); width: 100%; margin-top: 2px; }
.demo-modal-close {
  background: none; border: none; color: var(--text-dim); font-size: 16px;
  cursor: pointer; padding: 4px; line-height: 1; flex-shrink: 0;
}
.demo-modal-close:hover { color: var(--text-bright); }
.demo-tabs {
  display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.2);
}
.demo-tab {
  flex: 1; padding: 10px 8px; background: none; border: none;
  border-bottom: 2px solid transparent; color: var(--text-dim);
  font-size: 12px; cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.demo-tab:hover { color: var(--text-bright); background: rgba(255,255,255,0.04); }
.demo-tab.active { color: #4fc3f7; border-bottom-color: #4fc3f7; background: rgba(79,195,247,0.05); }
.demo-body { padding: 20px 24px; min-height: 220px; }
.demo-panel { display: none; }
.demo-panel.active { display: block; }
.demo-problem { margin-bottom: 16px; }
.demo-problem-label { font-size: 14px; font-weight: 600; color: #e0e0e0; margin-bottom: 6px; }
.demo-problem-params { font-size: 12px; color: var(--text-dim); font-family: var(--mono); }
.demo-result-area { min-height: 140px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; }
.demo-run-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; background: rgba(79,195,247,0.12); color: #4fc3f7;
  border: 1px solid rgba(79,195,247,0.35); border-radius: 6px; font-size: 13px;
  cursor: pointer; transition: all 0.2s;
}
.demo-run-btn:hover { background: rgba(79,195,247,0.2); border-color: #4fc3f7; }
.demo-run-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.demo-result-card {
  width: 100%; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 16px; animation: demo-fadein 0.3s ease;
}
@keyframes demo-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.demo-result-main {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.demo-result-value { font-size: 28px; font-weight: 700; color: #4fc3f7; font-family: var(--mono); }
.demo-result-unit { font-size: 14px; color: var(--text-dim); }
.demo-result-compare {
  display: flex; gap: 20px; font-size: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.demo-result-lit { color: var(--text-dim); }
.demo-result-lit strong { color: var(--text-bright); }
.demo-result-err { color: #81c784; font-weight: 600; }
.demo-precision-row { display: flex; align-items: center; gap: 10px; }
.demo-precision-label { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.demo-precision-bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.demo-precision-bar { height: 100%; border-radius: 3px; transition: width 0.6s ease; background: linear-gradient(90deg, #4fc3f7, #81c784); }
.demo-precision-pct { font-size: 11px; color: #81c784; font-weight: 600; white-space: nowrap; }
.demo-drift-row { display: flex; gap: 16px; margin-top: 8px; font-size: 11px; color: var(--text-dim); }
.demo-drift-val { color: #ffb74d; font-family: var(--mono); }
.demo-modal-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px; border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.15); flex-wrap: wrap;
}
.demo-footer-note { font-size: 12px; color: var(--text-dim); }
.demo-footer-note i { color: #81c784; margin-right: 4px; }

/* ============================================================
   CORA Agent drawer
   ============================================================ */
#cora-agent-panel { position: fixed; top: 36px; right: 0; bottom: 0; width: 340px; background: var(--bg-alt); border-left: 1px solid var(--border); display: flex; flex-direction: column; z-index: 90; transform: translateX(100%); transition: transform 0.2s ease; }
#cora-agent-panel.open { transform: translateX(0); }
.ca-header { display: flex; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); gap: 8px; flex-shrink: 0; background: var(--bg-panel); }
.ca-header-title { flex: 1; font-weight: 600; font-size: 12px; color: var(--text-bright); }
.ca-header-status { font-size: 10px; color: #4ade80; }
.ca-body { flex: 1; overflow-y: auto; padding: 12px; font-size: 13px; }
.ca-answer { color: var(--text); line-height: 1.65; white-space: pre-wrap; }
.ca-hubs { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ca-label { font-size: 11px; color: var(--text-dim); margin-right: 2px; }
.ca-chip { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 3px; padding: 2px 7px; font-size: 11px; color: var(--accent); }
.ca-gap { margin-top: 10px; font-size: 11px; color: #f59e0b; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); border-radius: 3px; padding: 6px 9px; }
.ca-not-found { margin-top: 10px; font-size: 11px; color: var(--text-dim); font-style: italic; }
.ca-loading { color: var(--text-dim); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.ca-error { color: #f87171; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.ca-empty { color: var(--text-dim); font-size: 12px; line-height: 1.6; }
.ca-input-wrap { padding: 8px 10px; border-top: 1px solid var(--border); flex-shrink: 0; display: flex; gap: 6px; background: var(--bg-panel); }
#cora-agent-input { flex: 1; resize: none; height: 52px; font-size: 12px; }
#cora-agent-send { align-self: flex-end; }

/* Service-worker update prompt — appears when a new version is ready
   (mobile cannot hard-refresh). One tap reloads with fresh assets. */
#sw-update-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 70px;
  z-index: 9999; background: var(--accent, #6366f1); color: #fff; border: none;
  padding: 11px 20px; border-radius: 22px; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45); cursor: pointer;
  display: flex; align-items: center; gap: 8px; font-family: inherit;
  animation: swbar-in 0.3s ease;
}
#sw-update-bar:hover { filter: brightness(1.1); }
@keyframes swbar-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Mobile fly-up nav elements are hidden on desktop (shown only <=768px). */
#mobile-nav-toggle, #mobile-nav-backdrop { display: none; }

/* ============================================================
   Mobile responsive styles
   ============================================================ */
@media (max-width: 768px) {
  /* Hide connected status, Report and Print on mobile */
  .topbar-center { display: none; }
  .topbar-left { min-width: 0; }
  .topbar-right { min-width: 0; gap: 6px; }
  #btn-global-report, #btn-print-view { display: none; }

  /* ── Fly-up module navigation ──────────────────────────────────────────
     The 52px bottom bar crammed all ~20 modules across every tier into one
     scroll with no way to jump between Standard / Pro / HPC Lab. Replace it
     with a bottom-sheet: a single "Modules" button flies up a sheet with the
     STD / PRO / HPC tabs on top and the active tier's modules as big rows. */
  .main-layout { flex-direction: column; }

  #mobile-nav-toggle {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    position: fixed; bottom: 0; left: 0; width: 100%; height: 52px; z-index: 60;
    background: var(--bg-alt); border: none; border-top: 1px solid var(--border);
    color: var(--accent); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  }
  #mobile-nav-toggle i { font-size: 16px; }

  #mobile-nav-backdrop { display: none; position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,0.5); }
  #mobile-nav-backdrop.show { display: block; }

  /* the sidebar becomes the fly-up sheet */
  .sidebar {
    position: fixed; left: 0; bottom: 0; width: 100%; height: auto; max-height: 78vh;
    flex-direction: column; overflow-y: auto; z-index: 80;
    background: var(--bg-alt); border: none; border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,0.5);
    transform: translateY(100%); transition: transform 0.28s ease; padding-bottom: 12px;
  }
  .sidebar.flyup-open { transform: translateY(0); }
  .sidebar-nav { flex-direction: column; flex: none; overflow: visible; }

  /* STD / PRO / HPC tabs as the sticky sheet header */
  .tier-dots {
    display: flex; flex-direction: row; justify-content: center; gap: 8px;
    position: sticky; top: 0; z-index: 2; background: var(--bg-alt);
    padding: 14px 12px 10px; border-bottom: 1px solid var(--border);
  }
  .tier-dot { flex: 1; max-width: 110px; text-align: center; padding: 11px 8px; font-size: 13px; font-weight: 700; border-radius: 8px; }

  /* module rows */
  .nav-item {
    flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px;
    width: 100%; padding: 14px 22px; font-size: 15px; text-align: left;
    border-left: 3px solid transparent; border-top: none;
  }
  .nav-item i { font-size: 18px; width: 24px; text-align: center; }
  .nav-item.active { border-left-color: var(--accent); border-top-color: transparent; background: var(--bg); }
  .nav-item-bottom { margin-top: 0; border-top: none; border-left: 3px solid transparent; }
  .nav-tier-section { display: none; }
  .nav-tier-section.active { display: flex; flex-direction: column; }

  /* ── Module sub-tab bars: icon-only on small screens ───────────────────
     The flat tab rows (Molecular / Cosmos / Materials / Geophysics / Fluids /
     Quantum / Anomaly / Theory) ran off the right edge in portrait. Collapse
     each tab to its icon (the label is a bare text node, so font-size:0 on the
     button hides it while the icon keeps its own size) and let the row wrap, so
     every tab is visible without left-right scroll. The full label is set as a
     title (hover / long-press) by app.js setTabTitles(). */
  .molecular-tabs, .cosmic-tabs, .materials-tabs, .geo-tabs,
  .fluids-tabs, .quantum-tabs, .tukey-tabs, .theory-tabs {
    flex-wrap: wrap; overflow-x: visible; justify-content: center;
    gap: 2px; padding: 6px 4px;
  }
  .mtab, .ctab, .mattab, .geotab, .fltab, .qtab, .tukeytab, .theory-tab {
    font-size: 0 !important; padding: 9px 12px; gap: 0; white-space: nowrap;
  }
  .mtab > i, .ctab > i, .mattab > i, .geotab > i,
  .fltab > i, .qtab > i, .tukeytab > i, .theory-tab > i {
    font-size: 17px !important; margin: 0; width: auto;
  }

  /* pad content above the fixed toggle bar */
  .content-area, .plasma-panel, .module-panel,
  .pane-content, .detail-pane, .query-pane, .content, .view { padding-bottom: 60px; }

  /* Charts — ensure min size on small screens */
  .chart-wrap { min-height: 200px; height: 220px; }
  canvas { min-height: 160px; min-width: 0; }
  .md-chart-cell { min-height: 180px; }
  .theory-subpanel canvas { min-height: 160px; }

  /* Landing nav hamburger */
  .landing-hamburger {
    display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--border); color: var(--text-dim);
    border-radius: 4px; padding: 6px 10px; cursor: pointer; font-size: 16px;
    margin-left: 8px;
  }
  .landing-nav-links { display: none; }
  /* Keep the primary "Get Started" (signup) visible in the mobile top bar;
     Try Live / Sign In live in the hamburger menu. */
  .landing-nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .landing-nav-actions .landing-btn-outline { display: none; }
  .landing-nav-actions .landing-btn-primary { display: inline-flex; align-items: center; }
  .landing-mobile-menu {
    display: none; flex-direction: column;
    background: var(--bg-panel); border-top: 1px solid var(--border);
    padding: 8px 16px 12px;
  }
  .landing-mobile-menu.open { display: flex; }
  .landing-mobile-menu .landing-nav-link { padding: 10px 4px; font-size: 14px; border-bottom: 1px solid var(--border-faint, rgba(255,255,255,0.05)); }
  .landing-mobile-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; }
}

@media (min-width: 769px) {
  .landing-hamburger { display: none; }
  .landing-mobile-menu { display: none !important; }
}

/* ============================================================
   Mobile / small-screen usability for the interactive modules.
   The 52px icon sidebar already works and the plot grids collapse at
   980px; the remaining pain is the dense panel forms. On phones:
   stack each control on its own line, make tap targets full-width,
   and set inputs to 16px so iOS does NOT zoom-jump on focus. Shrink
   the charts so a panel is not an endless scroll. Desktop is untouched.
   ============================================================ */
@media (max-width: 700px) {
  .hpc-panel, .adv-tab-content { padding: 10px 10px; }
  .hpc-panel form label, .adv-tab-content form label,
  #hp-epr label, #hp-quasicrystal label, #hp-cavityqcp label, #hp-gwextract label,
  #hp-nem label, #hp-el label { display: block; margin: 8px 0 2px; }
  .hpc-panel form input[type="number"], .hpc-panel form select,
  .adv-tab-content form input[type="number"], .adv-tab-content form select,
  #hp-epr input[type="number"], #hp-epr select,
  #hp-quasicrystal input[type="number"], #hp-quasicrystal select,
  #hp-cavityqcp input[type="number"], #hp-cavityqcp select,
  #hp-gwextract input[type="number"], #hp-gwextract select {
    width: 100% !important; max-width: 340px; box-sizing: border-box;
    font-size: 16px !important; padding: 8px 10px;
  }
  /* charts re-fit (vchart/Plotly is responsive); cap height to reduce scroll */
  [id$="-plot"] { height: 240px !important; }
  /* tables fit the viewport */
  .plasma-table { font-size: 11px; }
  .plasma-table th, .plasma-table td { padding: 4px 5px; }
  /* tab rows scroll rather than overflow the screen */
  .adv-tabs { padding: 6px 8px; gap: 6px; -webkit-overflow-scrolling: touch; }
  .hpc-group-menu { min-width: 70vw; }
  /* action buttons stay tappable and wrap */
  .plasma-actions { flex-wrap: wrap; gap: 8px; }
  .plasma-actions .btn { min-height: 40px; }
  .status-text { width: 100%; }
}

/* ============================================================
   Print styles — triggered by topbar Print button.
   Hides chrome, sidebar, compute/animation buttons.
   Keeps charts, tables, results, input field values.
   ============================================================ */
@media print {
  .no-print,
  .topbar,
  .sidebar,
  .plasma-actions,
  .modal,
  .license-gate,
  #landing-screen,
  #report-modal,
  .theory-subtabs,
  .mat-tabs,
  .molecular-tabs,
  .geo-tabs,
  .fluids-tabs,
  .quantum-tabs,
  .cosmic-tabs,
  .ballistic-tabs,
  .hpc-tabs,
  .theory-domains,
  fieldset > button,
  fieldset > .btn { display: none !important; }

  body, html { background: #fff !important; color: #000 !important; }
  .main-layout { overflow: visible !important; display: block !important; }
  .content-area { overflow: visible !important; height: auto !important; width: 100% !important; }
  .view { overflow: visible !important; height: auto !important; display: block !important; }
  .view:not(.active) { display: none !important; }
  /* Within the active view, isolate the active sub-panel too — otherwise
     `window.print()` dumps every panel in the module (e.g. all plasma
     sub-panels) instead of just the tab the user is viewing. The :not
     (.active) selector matches any inactive panel under any visible view. */
  .plasma-panel:not(.active),
  .molecular-panel:not(.active),
  .cosmic-panel:not(.active),
  .materials-panel:not(.active),
  .geo-panel:not(.active),
  .fluids-panel:not(.active),
  .quantum-panel:not(.active),
  .hpc-panel:not(.active),
  .legal-panel:not(.active),
  .tukey-panel:not(.active),
  .sim-panel:not(.active),
  .demo-panel:not(.active),
  .ptab-pane:not(.active),
  .theory-domain:not(.active),
  .ballistics-subpanel:not(.active),
  .pcr-subpanel:not(.active),
  .results-view:not(.active),
  .wizard-panel:not(.active) { display: none !important; }
  canvas { max-width: 100% !important; page-break-inside: avoid; }
  table { page-break-inside: avoid; }
  fieldset { border: 1px solid #ccc !important; margin-bottom: 8px; }
  legend { color: #000 !important; }
  input, select, textarea { color: #000 !important; background: #f9f9f9 !important; border: 1px solid #ccc !important; }
  /* The user-menu dropdown was being lifted to z=99999 for screen — make
     sure it doesn't bleed into the printed output. */
  .user-menu, .user-menu-wrap, .system-notice, #gdbs-help-panel,
  #toast-stack, #theme-drawer, #cora-agent-panel { display: none !important; }
}

/* --- Security & Trust section (mirrors root_web/css/landing-shared.css) -- */
/* Used by #landing-security in the in-app landing and kept in sync with the */
/* marketing surface at getvaultsync.com so both render identically.        */
.security-h3 {
  font-size: clamp(18px, 2vw, 22px); font-weight: 500;
  color: var(--text-bright); margin: 48px 0 14px;
  /* No left border/padding - headings sit flush with the section body so
     paragraphs underneath read as a clean column, not indented. A small
     left-aligned accent bar above keeps the visual hierarchy. */
}
.security-h3::before {
  content: ''; display: block;
  width: 40px; height: 3px; background: var(--accent);
  margin: 0 0 12px; border-radius: 2px;
}
.security-p {
  font-size: 0.95rem; color: var(--text);
  line-height: 1.7; margin: 0 0 18px;
  max-width: 880px;
}
.security-2col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 3rem;
  max-width: 1080px;
  margin: 24px auto 32px;
  text-align: center;
}
.security-2col-grid .security-h3 {
  margin: 0 0 14px; text-align: center;
}
.security-2col-grid .security-h3::before {
  margin: 0 auto 12px;
}
.security-2col-grid .security-p {
  max-width: 100%; margin: 0; text-align: center;
}
@media (max-width: 720px) {
  .security-2col-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.security-table-wrap { margin: 0 auto; }  /* full-width within section-inner; centered */
.security-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 3rem;
  max-width: 1080px;
  margin: 8px auto 36px;
}
.security-intro-grid .security-h3 { margin-top: 0; }
.security-intro-grid .security-p { max-width: 100%; }
@media (max-width: 720px) {
  .security-intro-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.security-table {
  width: 100%; border-collapse: collapse;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.security-table th {
  background: color-mix(in oklch, var(--accent) 10%, var(--bg-panel));
  color: var(--text-bright); font-weight: 600; text-align: left;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.security-table td {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  color: var(--text); line-height: 1.6;
  vertical-align: top;
}
.security-table td:first-child {
  font-weight: 600; color: var(--text-bright); white-space: nowrap;
  width: 30%;
}
.security-table tbody tr:last-child td { border-bottom: 0; }
.security-table tbody tr:hover td { background: color-mix(in oklch, var(--accent) 4%, transparent); }
.security-table code {
  font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 0.84em;
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  padding: 1px 5px; border-radius: 3px;
}
@media (max-width: 640px) {
  .security-table td:first-child { width: auto; }
  .security-table th, .security-table td { padding: 10px 12px; font-size: 0.84rem; }
}