/* ── Midnight Theme ──────────────────────────────────
   Dark minimalist. Violet accent. Rounded everything.
───────────────────────────────────────────────────── */
:root {
  /* ── Base Palette ────────────────────────────────── */
  --bg-body: #07080c;
  --bg-panel: #0c0d12;
  --bg-dark: #050608;
  --bg-dark-mid: #090a0f;
  --navy: #101219;
  --navy-light: #9aa3d9;
  --teal: #6d4aff;
  --teal-dim: rgba(109, 74, 255, 0.10);
  --cyan: #a78bfa;
  --cyan-dim: rgba(167, 139, 250, 0.10);
  --magenta: #e879f9;
  --magenta-dim: rgba(232, 121, 249, 0.10);
  --grey-solid: #4a5068;
  --grey-mid: #1e2030;

  /* ── Text ────────────────────────────────────────── */
  --text-main: #e8eaf2;
  --text-muted: #6971a0;
  --text-light: #ffffff;
  --text-offwhite: #adb4cc;

  /* ── Fonts ───────────────────────────────────────── */
  --font-mono: 'JetBrains Mono', monospace;
  --font-display: 'Inter', sans-serif;

  /* ── Border Colors ───────────────────────────────── */
  --border-light-color: rgba(255, 255, 255, 0.07);

  /* ── Borders (full shorthand) ────────────────────── */
  --border-main: 1px solid rgba(255, 255, 255, 0.10);
  --border-light: 1px solid var(--border-light-color);
  --border-dark: 1px solid var(--dark-divider-accent);

  /* ── Surface Tints ──────────────────────────────── */
  --surface-tint-heavy: rgba(255, 255, 255, 0.08);
  --surface-tint: rgba(255, 255, 255, 0.05);
  --surface-tint-soft: rgba(255, 255, 255, 0.034);
  --surface-tint-faint: rgba(255, 255, 255, 0.022);
  --surface-tint-ghost: rgba(255, 255, 255, 0.014);
  --surface-tint-whisper: rgba(255, 255, 255, 0.009);
  --watermark-text: rgba(255, 255, 255, 0.020);

  /* ── Dark Surface Text ───────────────────────────── */
  --dark-text: rgba(200, 208, 232, 0.52);
  --dark-text-dim: rgba(200, 208, 232, 0.42);
  --dark-text-medium: rgba(200, 208, 232, 0.70);
  --dark-text-bright: rgba(200, 208, 232, 0.84);
  --dark-heading: rgba(255, 255, 255, 0.38);
  --dark-heading-sep: rgba(255, 255, 255, 0.8);
  --dark-text-faint: rgba(255, 255, 255, 0.26);

  /* ── Dark Surface Dividers ───────────────────────── */
  --dark-divider: rgba(255, 255, 255, 0.050);
  --dark-divider-subtle: rgba(255, 255, 255, 0.034);
  --dark-divider-faint: rgba(255, 255, 255, 0.022);
  --dark-divider-accent: rgba(255, 255, 255, 0.042);
  --dark-highlight: rgba(255, 255, 255, 0.020);

  /* ── Cyan/Violet Accent Scale ────────────────────── */
  --cyan-glow-strong: rgba(109, 74, 255, 0.44);
  --cyan-glow: rgba(109, 74, 255, 0.32);
  --cyan-glow-medium: rgba(109, 74, 255, 0.24);
  --cyan-glow-soft: rgba(109, 74, 255, 0.18);
  --cyan-glow-faint: rgba(109, 74, 255, 0.10);
  --cyan-tint: rgba(109, 74, 255, 0.052);
  --cyan-tint-faint: rgba(109, 74, 255, 0.034);
  --cyan-scanline: rgba(109, 74, 255, 0.009);
  --cyan-timestamp: rgba(167, 139, 250, 0.52);

  /* ── Teal/Violet Accent Scale ────────────────────── */
  --teal-glow: rgba(109, 74, 255, 0.34);
  --teal-glow-soft: rgba(109, 74, 255, 0.22);

  /* ── Status Colors ───────────────────────────────── */
  --color-success: #34d399;
  --color-success-glow: rgba(52, 211, 153, 0.30);
  --color-success-text: rgba(52, 211, 153, 0.85);
  --color-danger: #f87171;
  --color-danger-glow: rgba(248, 113, 113, 0.30);
  --color-warn-text: rgba(232, 121, 249, 0.88);

  /* ═══════════════════════════════════════════════════
     COMPONENT THEME TOKENS
  ═══════════════════════════════════════════════════ */

  /* ── Shape ───────────────────────────────────────── */
  --radius: 10px;
  --radius-lg: 16px;
  --stat-bar-radius: 4px;
  --indicator-radius: 50%;
  --indicator-warn-radius: 50%;

  /* ── Input ───────────────────────────────────────── */
  --input-radius: 10px;
  --input-accent-border: var(--border-light);
  --input-accent-shadow: none;
  --field-border-style: solid;

  /* ── Panel ───────────────────────────────────────── */
  --panel-shadow: 0 1px 4px rgba(0, 0, 0, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.030);
  --panel-hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.55),
    0 16px 32px rgba(0, 0, 0, 0.40),
    0 0 20px rgba(109, 74, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.042),
    inset 0 0 12px rgba(109, 74, 255, 0.038);
  --panel-hover-border: rgba(109, 74, 255, 0.5);
  --panel-header-accent: rgba(109, 74, 255, 0.0);
  --panel-header-bg: linear-gradient(
    90deg,
    rgba(109, 74, 255, 0.10) 0%,
    rgba(109, 74, 255, 0.04) 40%,
    transparent 100%
  );
  --panel-header-left-accent-width: 0px;
  --panel-header-border-bottom: none;

  /* ── Buttons ─────────────────────────────────────── */
  --btn-bg: transparent;
  --btn-border: rgba(109, 74, 255, 0.20);
  --btn-inset: none;
  --btn-hover-bg: rgba(109, 74, 255, 0.08);
  --btn-hover-border: rgba(167, 139, 250, 0.38);
  --btn-hover-inset: none;
  --btn-hover-glow: 0 0 12px rgba(109, 74, 255, 0.12);
  --btn-hover-color: var(--text-light);
  --focus-ring-color: rgba(109, 74, 255, 0.72);
  --green-hover: #34d399;

  /* ── Flyout ──────────────────────────────────────── */
  --flyout-bg: rgba(10, 11, 18, 0.97);
  --flyout-border: rgba(109, 74, 255, 0.18);
  --flyout-radius: 12px;
  --flyout-shadow:
    0 16px 40px rgba(0, 0, 0, 0.65),
    0 4px 10px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(109, 74, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ── Inputs / Interactive ────────────────────────── */
  --input-hover-border: rgba(109, 74, 255, 0.44);
  --input-hover-glow: rgba(109, 74, 255, 0.10);
  --input-copied-bg: rgba(109, 74, 255, 0.12);
  --input-copied-border: rgba(109, 74, 255, 0.42);

  /* ── Top Bar ─────────────────────────────────────── */
  --topbar-bg: rgba(255, 255, 255, 0.022);
  --topbar-border: rgba(255, 255, 255, 0.08);
  --topbar-accent: var(--teal);
  --topbar-bottom-border: 1px solid rgba(109, 74, 255, 0.14);
  --tb-badge-radius: 20px;
  --logo-mark-pattern: repeating-linear-gradient(
    45deg,
    var(--teal),
    var(--teal) 2px,
    transparent 2px,
    transparent 5px
  );

  /* ── Popups (tooltip + notification) ─────────────── */
  --popup-bg: rgba(7, 8, 12, 0.95);
  --popup-bg-hover: rgba(10, 11, 18, 0.98);
  --popup-border: rgba(109, 74, 255, 0.22);
  --popup-border-hover: rgba(109, 74, 255, 0.40);
  --popup-accent: var(--teal);
  --popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(109, 74, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --popup-text: var(--text-main);
}

/* ── Midnight: panel-header ──────────────────────────
   Gradient sweep + violet underline. No left accent.
─────────────────────────────────────────────────────── */
.panel-header {
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.40), 0 1px 0 rgba(109, 74, 255, 0.18);
}

.panel-header::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(109, 74, 255, 0.60) 0%,
    rgba(167, 139, 250, 0.25) 40%,
    transparent 100%
  );
}

/* ── Midnight: hide ph-dot ───────────────────────── */
.ph-dot {
  display: none;
}

/* ── Midnight: minimal ghost buttons ─────────────────
   Pill shape. Bottom-border accent. No fill by default.
─────────────────────────────────────────────────────── */
.panel button,
.btn-transmit,
.account-action,
.tb-icon-btn {
  border-radius: 20px;
  border-color: transparent;
  border-bottom-color: rgba(109, 74, 255, 0.28);
  background: transparent;
  box-shadow: none;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.panel button:hover,
.btn-transmit:hover,
.account-action:hover,
.tb-icon-btn:hover {
  background: rgba(109, 74, 255, 0.08);
  border-color: transparent;
  border-bottom-color: rgba(167, 139, 250, 0.45);
  box-shadow: 0 0 12px rgba(109, 74, 255, 0.12);
}