/* QuantX — portal "app-echo" layer.
 *
 * Loaded ONLY on post-login pages (account.html, login.html), after
 * css/styles.css and css/tokens.css. A small set of qx- classes that
 * make the signed-in web surfaces echo the desktop app: terminal-dark
 * cards, hairline borders, bright-blue accents, display type for
 * headings, and JetBrains Mono for data readouts (license keys,
 * timestamps, usernames).
 *
 * It deliberately layers on top of the existing .card / .btn-* /
 * .badge grammar instead of replacing it, so the marketing pages and
 * any page that doesn't opt in are untouched.
 */

/* ---- Shell: app type ramp for the whole signed-in page ---- */
.qx-shell {
  background: var(--qx-bg);
  color: var(--qx-ink);
  font-family: var(--qx-font-body);
}
.qx-shell h1, .qx-shell h2, .qx-shell h3,
.qx-display {
  font-family: var(--qx-font-display);
  letter-spacing: -0.015em;
}

/* ---- Nav: flatter, app-chrome top bar ---- */
.qx-nav {
  background: rgba(6, 9, 17, 0.86);
  border-bottom: 1px solid var(--qx-border);
}

/* ---- Card: terminal panel (tightens the marketing .card) ---- */
.qx-card {
  background: var(--qx-surface);
  border: 1px solid var(--qx-border);
  border-radius: var(--qx-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.qx-card:hover {
  border-color: var(--qx-blue-ring);
  transform: none;               /* app panels don't float on hover */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---- Kicker: app section label (panel headers) ---- */
.qx-kicker {
  font-family: var(--qx-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qx-ink-mute);
}

/* ---- Buttons ---- */
.qx-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--qx-font-body);
  font-weight: 600;
  border-radius: var(--qx-radius-sm);
  border: 1px solid var(--qx-border-strong);
  background: var(--qx-surface-2);
  color: var(--qx-ink);
  transition: border-color 160ms ease, background 160ms ease, filter 160ms ease;
}
.qx-btn:hover { border-color: var(--qx-blue-bright); background: var(--qx-blue-tint); }
.qx-btn-primary {
  background: var(--qx-blue);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: 0 6px 18px -8px rgba(59, 130, 246, 0.6);
}
.qx-btn-primary:hover {
  background: var(--qx-blue-bright);
  border-color: rgba(255, 255, 255, 0.18);
  filter: none;
}

/* ---- Mono data readouts ---- */
.qx-mono {
  font-family: var(--qx-font-mono) !important;  /* beats Tailwind .font-mono on the same node */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ---- License-key well: sunken terminal row ---- */
.qx-key {
  background: var(--qx-bg-deep);
  border: 1px solid var(--qx-border);
  border-radius: var(--qx-radius-sm);
}
.qx-key:hover { border-color: var(--qx-blue-ring); }

/* ---- Tier badge: desktop sidebar grammar ---- */
/* Glyphs ride on ::before so the DOM text stays the plain tier name
   (screen readers + copy/paste read "FOUNDER", not "✦ FOUNDER"). */
.qx-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--qx-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--qx-radius-pill);
  line-height: 1;
  color: var(--qx-ink-mute);
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.qx-badge::before { font-size: 11px; line-height: 1; }
.qx-badge--founder   { color: var(--qx-tier-founder);   background: rgba(251, 191, 36, 0.10);  border-color: rgba(251, 191, 36, 0.35); }
.qx-badge--founder::before   { content: '\2726'; }   /* ✦ */
.qx-badge--analyst   { color: var(--qx-tier-analyst);   background: rgba(34, 211, 238, 0.10);  border-color: rgba(34, 211, 238, 0.35); }
.qx-badge--analyst::before   { content: '\25C6'; }   /* ◆ */
.qx-badge--prodigy   { color: var(--qx-tier-prodigy);   background: rgba(232, 121, 249, 0.10); border-color: rgba(232, 121, 249, 0.35); }
.qx-badge--prodigy::before   { content: '\2726'; }   /* ✦ */
.qx-badge--quant     { color: var(--qx-tier-quant);     background: rgba(52, 211, 153, 0.10);  border-color: rgba(52, 211, 153, 0.35); }
.qx-badge--reversion { color: var(--qx-tier-reversion); background: rgba(74, 140, 255, 0.10);  border-color: rgba(74, 140, 255, 0.35); }
.qx-badge--edge      { color: var(--qx-tier-edge);      background: rgba(56, 189, 248, 0.10);  border-color: rgba(56, 189, 248, 0.35); }
.qx-badge--desk      { color: var(--qx-tier-desk);      background: rgba(148, 163, 184, 0.10); border-color: rgba(148, 163, 184, 0.30); }
.qx-badge--floor     { color: var(--qx-tier-floor);     background: rgba(100, 116, 139, 0.10); border-color: rgba(100, 116, 139, 0.30); }

/* ---- Status chips (key status, subscription state) ---- */
.qx-badge--ok   { color: var(--qx-green); background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.35); }
.qx-badge--off  { color: var(--qx-red);   background: rgba(239, 68, 68, 0.08);  border-color: rgba(239, 68, 68, 0.30); }