/* DealIQ — shared CSS, used by every page.
   Theme variables (dark/light), header elements (brand, badges, gear
   button), and input styling — anything that was previously duplicated
   byte-for-byte across all 15 pages now lives here once. */

:root {
  --navy: #0b1220; --navy-panel: #111a2c; --navy-border: #1e2b42;
  --teal: #2dd4bf; --amber: #f5b95c;
  --text-primary: #eef2f7; --text-muted: #8a97ab;
  --danger: #f28b82;
  --input-bg: #0d1526;
}

:root[data-theme="light"] {
  --navy: #f4f6f9; --navy-panel: #ffffff; --navy-border: #dce3ec;
  --teal: #0f9c8c; --amber: #b45f06;
  --text-primary: #16202e; --text-muted: #5b6b80;
  --danger: #d0342c;
  --input-bg: #eef1f6;
}
[data-theme="light"] body { background: var(--navy) !important; }
[data-theme="light"] .brand-mark { box-shadow: 0 0 0 1px var(--navy-border); }

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(circle at 20% 0%, #101b30 0%, var(--navy) 55%);
  color: var(--text-primary); font-family: 'Inter', sans-serif;
  padding: 40px 20px;
}

/* ── Header elements — all share the same 32px height, by construction,
   so nothing depends on font-metric guesswork lining them up. ── */
.brand { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--teal), var(--amber)); }
.brand-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; }

.header-pill, .new-report-link {
  height: 32px; box-sizing: border-box; display: inline-flex; align-items: center;
  font-size: 13px; color: var(--teal); text-decoration: none;
  border: 1px solid var(--navy-border); border-radius: 20px; padding: 0 14px;
}

.beta-badge {
  height: 32px; box-sizing: border-box; display: inline-flex; align-items: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber);
  padding: 0 10px; border-radius: 20px;
}

.admin-tag {
  height: 32px; box-sizing: border-box; display: inline-flex; align-items: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber);
  padding: 0 10px; border-radius: 20px;
}

.settings-gear-btn {
  background: none !important; border: 1px solid var(--navy-border) !important; border-radius: 50% !important;
  color: var(--text-muted); width: 32px !important; height: 32px !important; padding: 0 !important; cursor: pointer;
  display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s; box-sizing: border-box !important;
}
.settings-gear-btn:hover { color: var(--teal); border-color: var(--teal); }

.back-link { display: inline-block; margin-bottom: 16px; font-size: 13px; color: var(--teal); }

/* ── Inputs — shared background/behavior across every form on the site ── */
input, textarea {
  width: 100%; background: var(--input-bg); border: 1px solid var(--navy-border); border-radius: 8px;
  padding: 11px 13px; color: var(--text-primary); font-size: 14px; font-family: 'Inter', sans-serif; margin-bottom: 16px;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, textarea:focus { outline: none; border-color: var(--teal); }
input[type="password"] { border: 1px solid var(--amber) !important; }