/* ============================================================
   Elite Strategies Ops — Shared Design System
   Inspired by melo.gg: near-black canvas, electric-cyan accent,
   oversized Inter type, generous whitespace, perspective-grid
   hero, large radii, smooth motion. One import, six pages.
   ============================================================ */

:root {
  --bg: #05070c;
  --bg-grad: radial-gradient(ellipse 1200px 640px at 50% -12%, rgba(56,189,248,0.10), transparent 60%),
             radial-gradient(ellipse 900px 500px at 100% 10%, rgba(56,189,248,0.05), transparent 55%),
             var(--bg);
  --surface: #12161f;
  --surface-2: #191f2c;
  --surface-3: #212938;
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.14);
  --accent: #38bdf8;
  --accent-2: #7dd3fc;
  --accent-glow: rgba(56,189,248,0.35);
  --accent-dim: rgba(56,189,248,0.10);
  --text: #f4f7fb;
  --text-muted: #8b96a8;
  --text-faint: #5b6577;
  --green: #34d399;
  --green-dim: rgba(52,211,153,0.12);
  --yellow: #fbbf24;
  --yellow-dim: rgba(251,191,36,0.12);
  --red: #f87171;
  --red-dim: rgba(248,113,113,0.12);
  --purple: #c084fc;
  --purple-dim: rgba(192,132,252,0.12);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 28px -10px rgba(0,0,0,0.55);
  --shadow-lift: 0 20px 48px -12px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Persistent faint grid texture behind every page — fixed so it reads
   as one ambient canvas rather than a hero-only effect that vanishes
   the moment you leave the landing page. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(56,189,248,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,0.09) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, black 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, black 0%, transparent 80%);
}

::selection { background: var(--accent-glow); color: #fff; }

/* Scrollbar polish — smooth, thin, on-brand */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }

/* ---------- Header / Nav (thin, restrained — melo-style) ---------- */
header.ops-header {
  background: rgba(5,7,12,0.6);
  /* Aug 22, 2026: reduced from blur(16px) saturate(140%) -- a sticky,
     always-on-screen backdrop-filter forces the browser to recompute
     the blur of everything scrolling underneath it on every single
     frame, which is a well-known real perf cost (distinct from the
     transition bug fixed below) and was very likely contributing to
     the reported scroll jank. blur(10px) with saturate dropped reads
     almost identically at this size/opacity but is meaningfully
     cheaper to recompute continuously. */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 14px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  /* Aug 22, 2026: consolidated into ONE transition declaration (was
     previously split across two separate `header.ops-header` rules in
     this file with different property lists -- the second declaration
     silently overwrote this one since `transition` shorthand replaces
     rather than merges, so background/padding stopped transitioning
     entirely while box-shadow eased in around them with a different
     duration/easing -- that mismatch of "some properties snap, one
     eases, on different timings" was the actual source of the
     reported "laggy/glitchy" scroll feel, not raw performance. All
     four properties now share one timing/easing so they move as a
     single, coherent motion. */
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), padding 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
header.ops-header.scrolled {
  background: rgba(5,7,12,0.86);
  padding: 10px 40px;
  border-bottom-color: var(--border-strong);
  box-shadow: 0 4px 24px -8px rgba(0,0,0,0.6);
}
.ops-header .brand {
  display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit;
}
.ops-header .brand .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: pulse-dot 2.4s var(--ease) infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(56,189,248,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(56,189,248,0); }
  100% { box-shadow: 0 0 0 0 rgba(56,189,248,0); }
}
.ops-header .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.ops-header h1 { font-size: 0.82rem; font-weight: 700; color: var(--text); letter-spacing: 0.3px; margin: 0; text-transform: uppercase; }
.ops-header .brand-sub { font-size: 0.64rem; color: var(--text-faint); font-weight: 500; letter-spacing: 0.4px; }

.ops-nav { display: flex; gap: 2px; align-items: center; }
.ops-nav a {
  position: relative;
  color: var(--text-muted); text-decoration: none; font-size: 0.79rem; font-weight: 600;
  padding: 7px 14px; border-radius: var(--radius-sm);
  transition: color 0.18s var(--ease);
  white-space: nowrap;
}
.ops-nav a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.ops-nav a:hover { color: var(--text); }
.ops-nav a:hover::after { transform: scaleX(1); }
.ops-nav a.active { color: var(--accent); }
.ops-nav a.active::after { transform: scaleX(1); }
.ops-nav a.logout-link { margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--border); color: var(--text-faint); }
.ops-nav a.logout-link:hover { color: var(--red); }
.ops-nav a.logout-link::after { display: none; }

.back-home {
  display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none;
}
.back-home .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow); animation: pulse-dot 2.4s var(--ease) infinite;
}
.back-home .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.back-home .label { font-size: 0.82rem; font-weight: 700; color: var(--text); letter-spacing: 0.3px; text-transform: uppercase; }
.back-home .sub { font-size: 0.64rem; color: var(--text-faint); font-weight: 500; letter-spacing: 0.4px; }
.back-home:hover .label { color: var(--accent); }

/* ---------- Layout ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px 96px; }
.container-narrow { max-width: 980px; margin: 0 auto; padding: 0 24px 96px; }

.eyebrow { font-size: 0.74rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; display: inline-block; }
.page-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 6px; }
.page-sub { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 28px; line-height: 1.6; max-width: 680px; }

/* ---------- Hero (melo-style: perspective grid + oversized type) ---------- */
.hero {
  position: relative;
  padding: 88px 24px 64px;
  margin-bottom: 8px;
  overflow: hidden;
  text-align: left;
}
.hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(56,189,248,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,0.16) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.9) 38%, transparent 92%),
                       radial-gradient(ellipse 70% 100% at 50% 30%, black 40%, transparent 78%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.9) 38%, transparent 92%),
              radial-gradient(ellipse 70% 100% at 50% 30%, black 40%, transparent 78%);
  mask-composite: intersect;
  transform: perspective(500px) rotateX(58deg) scale(1.7);
  transform-origin: 50% 0%;
  animation: grid-drift 14s linear infinite;
}
@keyframes grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 0 64px, 64px 0; } }
.hero-glow {
  position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 500px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse closest-side, rgba(56,189,248,0.20), transparent 72%);
  filter: blur(10px);
}
.hero-content { position: relative; z-index: 1; max-width: 760px; }
.hero h1.hero-title {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 18px;
}
.hero h1.hero-title .grad {
  background: linear-gradient(100deg, var(--accent-2), var(--accent) 60%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .hero-sub { font-size: 1.02rem; color: var(--text-muted); line-height: 1.65; max-width: 560px; margin-bottom: 0; }
.hero-meta { position: relative; z-index: 1; margin-top: 26px; font-size: 0.86rem; color: var(--text-faint); font-weight: 500; }
@media (max-width: 720px) { .hero { padding: 56px 20px 40px; } }

/* ---------- Page header (form/tool pages) — same type system as the hero, smaller stage ---------- */
.page-header { padding: 56px 0 36px; }
.page-header .crumb {
  display: inline-flex; align-items: center; gap: 7px; color: var(--text-faint); text-decoration: none;
  font-size: 0.82rem; font-weight: 600; margin-bottom: 26px; transition: color 0.18s var(--ease), transform 0.18s var(--ease);
}
.page-header .crumb:hover { color: var(--accent); transform: translateX(-2px); }
.page-header .eyebrow-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 7px; background: var(--accent-dim); border: 1px solid rgba(56,189,248,0.25);
  font-size: 0.8rem; margin-right: 8px; vertical-align: middle; transform: translateY(-1px);
}
.page-header .page-title { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; line-height: 1.06; }
.page-header .page-sub { font-size: 1rem; line-height: 1.65; color: var(--text-muted); max-width: 620px; }

/* ---------- Entrance motion ---------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fade-up 0.55s var(--ease) both; }
.fade-in-1 { animation: fade-up 0.55s var(--ease) 0.04s both; }
.fade-in-2 { animation: fade-up 0.55s var(--ease) 0.09s both; }
.fade-in-3 { animation: fade-up 0.55s var(--ease) 0.14s both; }
.fade-in-4 { animation: fade-up 0.55s var(--ease) 0.19s both; }
.fade-in-5 { animation: fade-up 0.55s var(--ease) 0.24s both; }

/* Scroll-reveal: elements start hidden, .in-view added via IntersectionObserver in shared.js */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- Cards / sections ---------- */
.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.section h2 {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text); margin: 0 0 4px; display: flex; align-items: center; gap: 8px;
}
.section .section-desc { font-size: 0.83rem; color: var(--text-muted); margin-bottom: 18px; line-height: 1.6; }
.section-head { border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 18px; }

/* Terminal / nav cards (dashboard grid) — editorial, melo-style */
.terminal-card {
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px 28px; text-decoration: none; color: inherit; display: block; position: relative;
  overflow: hidden; transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.terminal-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--card-accent, var(--accent)), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.terminal-card::after {
  content: ''; position: absolute; top: -60%; right: -30%; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, var(--card-accent, var(--accent)), transparent 70%);
  opacity: 0.10; filter: blur(20px); transition: opacity 0.35s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}
.terminal-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: transparent; }
.terminal-card:hover::before { opacity: 0.7; }
.terminal-card:hover::after { opacity: 0.22; transform: scale(1.3); }
.terminal-card .icon {
  font-size: 1.7rem; margin-bottom: 20px; display: inline-flex; width: 52px; height: 52px;
  align-items: center; justify-content: center; border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgba(56,189,248,0.18), rgba(56,189,248,0.06));
  border: 1px solid rgba(56,189,248,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 14px -6px rgba(56,189,248,0.35);
  transition: transform 0.35s var(--ease-snap), background 0.35s var(--ease);
  position: relative; z-index: 1;
}
.terminal-card:hover .icon { background: rgba(56,189,248,0.18); transform: scale(1.1) rotate(-4deg); }
.terminal-card h2 { font-size: 1.18rem; font-weight: 700; margin: 0 0 8px; color: var(--text); text-transform: none; letter-spacing: -0.01em; position: relative; z-index: 1; }
.terminal-card p { font-size: 0.86rem; color: var(--text-muted); line-height: 1.6; margin: 0; position: relative; z-index: 1; }
.terminal-card .arrow {
  position: absolute; top: 28px; right: 26px; color: var(--text-faint); font-size: 1.15rem;
  transition: transform 0.35s var(--ease), color 0.35s var(--ease); z-index: 1;
}
.terminal-card:hover .arrow { transform: translate(4px, -4px); color: var(--card-accent, var(--accent)); }
.terminal-card-wide { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 860px) { .terminal-card-wide { grid-column: span 1; } }

/* ---------- Form controls ---------- */
.field { margin-bottom: 24px; }
.field label {
  display: block; font-size: 0.74rem; font-weight: 700; color: #a7b2c4;
  margin-bottom: 11px; text-transform: uppercase; letter-spacing: 0.7px;
}
textarea, input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
input[type="date"], select {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text); padding: 12px 14px; font-size: 0.9rem; outline: none; font-family: inherit;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
textarea::placeholder, input::placeholder { color: #6b7690; }
textarea:focus, input:focus, select:focus { border-color: var(--accent); background: var(--surface-3); box-shadow: 0 0 0 3px var(--accent-dim); }
textarea { resize: vertical; line-height: 1.6; }
select {
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b96a8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Pill selectors (single/multi choice) */
.pill-group { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  padding: 10px 17px; border-radius: 20px; border: 1.5px solid var(--border); background: transparent;
  color: var(--text-muted); font-size: 0.83rem; cursor: pointer; user-select: none; text-align: center;
  transition: all 0.18s var(--ease); line-height: 1.4;
}
.pill small { display: block; font-size: 0.7rem; opacity: 0.75; font-weight: 400; margin-top: 2px; }
.pill:hover { border-color: var(--text-muted); color: var(--text); transform: translateY(-1px); background: var(--surface-2); }
.pill.selected { border-color: var(--accent); background: linear-gradient(160deg, rgba(56,189,248,0.22), rgba(56,189,248,0.08)); color: var(--accent-2); font-weight: 700; box-shadow: 0 0 0 1px var(--accent) inset, 0 4px 14px -6px var(--accent-glow); transform: translateY(-1px); }

/* Big tappable route/option buttons */
.choice-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.choice-btn {
  padding: 16px 14px; border-radius: var(--radius-md); border: 1.5px solid var(--border-strong);
  background: var(--surface-2); color: var(--text-muted); font-size: 0.86rem; font-weight: 600;
  cursor: pointer; text-align: center; transition: all 0.18s var(--ease); line-height: 1.45;
}
.choice-btn small { display: block; font-size: 0.72rem; font-weight: 400; opacity: 0.75; margin-top: 3px; }
.choice-btn:hover { border-color: var(--text-muted); color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.choice-btn.selected { border-color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--surface-2)); color: var(--c, var(--accent)); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--c, var(--accent)) inset, var(--shadow-card); }

/* Traffic-light 3-way buttons */
.traffic-light { display: flex; gap: 10px; margin-bottom: 10px; }
.tl-btn {
  flex: 1; padding: 13px 8px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong);
  background: var(--surface-2); color: var(--text-muted); font-size: 0.85rem; font-weight: 700;
  cursor: pointer; text-align: center; transition: all 0.18s var(--ease);
}
.tl-btn small { display: block; font-size: 0.68rem; font-weight: 400; opacity: 0.8; margin-top: 2px; }
.tl-btn:hover:not(.green):not(.yellow):not(.red) { border-color: var(--text-muted); color: var(--text); }
.tl-btn.green { border-color: var(--green); background: var(--green-dim); color: var(--green); }
.tl-btn.yellow { border-color: var(--yellow); background: var(--yellow-dim); color: var(--yellow); }
.tl-btn.red { border-color: var(--red); background: var(--red-dim); color: var(--red); }

/* Toggle (yes/no) buttons */
.toggle-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toggle-btn {
  padding: 10px 22px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong);
  background: var(--surface-2); color: var(--text-muted); cursor: pointer; font-size: 0.87rem;
  font-weight: 600; transition: all 0.18s var(--ease);
}
.toggle-btn.yes { border-color: var(--red); color: var(--red); background: var(--red-dim); }
.toggle-btn.no { border-color: var(--green); color: var(--green); background: var(--green-dim); }

/* Slider */
.slider-wrap { display: flex; align-items: center; gap: 14px; }
input[type="range"] { flex: 1; accent-color: var(--accent); height: 4px; cursor: pointer; }
.slider-val { font-size: 1.25rem; font-weight: 800; color: var(--accent); min-width: 30px; text-align: center; }

/* ---------- Buttons ---------- */
.btn-primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #04202e; font-weight: 700; padding: 13px 28px; border: none; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 0.9rem; box-shadow: 0 4px 22px -4px var(--accent-glow);
  transition: transform 0.15s var(--ease-snap), box-shadow 0.2s var(--ease); display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px -4px var(--accent-glow); }
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Button loading→success morph (Aug 22, 2026 polish pass) ----------
   Used via shared.js setButtonState(). Inline spinner replaces text width
   smoothly (button keeps its width instead of jittering as text changes
   length), then a checkmark morphs in briefly on success before reset. */
.btn-primary, .btn-ghost { position: relative; }
.btn-state-inner { display: inline-flex; align-items: center; gap: 8px; justify-content: center; transition: opacity 0.15s ease; }
.btn-spin {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #0a0d13; animation: spin 0.7s linear infinite; flex-shrink: 0;
}
.btn-ghost .btn-spin { border: 2px solid var(--border-strong); border-top-color: var(--accent); }
.btn-check {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  animation: btn-check-pop 0.35s var(--ease-snap);
}
@keyframes btn-check-pop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

.btn-secondary {
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text);
  padding: 12px 20px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; font-weight: 600;
  transition: all 0.18s var(--ease); display: inline-flex; align-items: center; gap: 8px;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); transform: translateY(-1px); }

.btn-ghost {
  background: transparent; border: 1px solid transparent; color: var(--text-faint);
  padding: 12px 18px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; font-weight: 600;
  transition: all 0.18s var(--ease);
}
.btn-ghost:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }

.submit-bar { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 12px; }

/* ---------- Loading ---------- */
.loading-spinner {
  text-align: center; color: var(--text-muted); padding: 48px; font-size: 0.88rem;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.spin {
  width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--border-strong);
  border-top-color: var(--accent); animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

/* ---------- Skeleton loading screens (Aug 22, 2026 polish pass) ----------
   Replaces spinners for table/list content — shows content-shaped gray
   placeholder rows instead of a spinner, which research consistently shows
   reads as meaningfully faster even at identical real load time. Spinner
   is kept for short one-off actions (button loading state); skeletons are
   for table/list bodies specifically. */
.skeleton-table .skel-row {
  display: flex; gap: 16px; padding: 12px; border-bottom: 1px solid var(--border); align-items: center;
}
.skel-block {
  height: 14px; border-radius: 4px; flex: 1;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: skel-shimmer 1.6s ease-in-out infinite;
}
@keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- Avatar initials (Aug 22, 2026 polish pass) ----------
   Small deterministic-colored initial circle next to a name, used across
   dashboard tables, opener compliance, and employee scoring — cheap way to
   make repeated names scannable/recognizable at a glance instead of plain text. */
.avatar-initial {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; font-size: 0.68rem; font-weight: 800;
  color: #0a0d13; flex-shrink: 0; vertical-align: middle; margin-right: 8px;
  letter-spacing: -0.02em;
}
.name-with-avatar { display: inline-flex; align-items: center; white-space: nowrap; }

/* ---------- Trend arrows / count-up numbers ---------- */
.trend-arrow { font-weight: 800; display: inline-block; }
.trend-up { color: var(--green); }
.trend-down { color: var(--red); }
.trend-flat { color: var(--text-muted); }
.count-up { font-variant-numeric: tabular-nums; }

/* ---------- Sticky header scroll shadow ----------
   (Aug 22, 2026: this used to be a second, separate header.ops-header
   transition rule here that silently fought with the main declaration
   above -- transition shorthand replaces rather than merges, so this
   rule was wiping out the background/padding transitions declared on
   the main rule. Folded into the main rule; nothing left to declare
   here now, kept as a marker so the history/reason isn't lost.) */

/* ---------- Accessibility: respect reduced-motion preference ----------
   Aug 22, 2026 polish pass. Anyone with prefers-reduced-motion enabled at
   the OS level gets all decorative motion collapsed to near-instant —
   functional state changes still happen, they just don't animate. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Score/stat cards — melo "Our Impact" style: numbers first, chrome last ---------- */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px;
  margin-bottom: 40px; padding: 28px 8px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stat-card { text-align: center; padding: 8px; transition: transform 0.3s var(--ease); }
.stat-card:hover { transform: translateY(-2px); }
.stat-card .num {
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.stat-card .lbl { font-size: 0.7rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 1px; margin-top: 10px; font-weight: 700; }

.score-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 24px; }
@media (max-width: 700px) { .score-cards { grid-template-columns: 1fr; } }
.score-card { border-radius: var(--radius-md); padding: 20px; text-align: center; border: 1px solid var(--border); background: var(--surface-2); }
.score-card.tone-green { border-color: rgba(52,211,153,0.3); background: var(--green-dim); }
.score-card.tone-yellow { border-color: rgba(251,191,36,0.3); background: var(--yellow-dim); }
.score-card.tone-red { border-color: rgba(248,113,113,0.3); background: var(--red-dim); }
.score-card .big { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.score-card.tone-green .big { color: var(--green); }
.score-card.tone-yellow .big { color: var(--yellow); }
.score-card.tone-red .big { color: var(--red); }
.score-card .lbl { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 6px; font-weight: 600; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th {
  text-align: left; color: var(--text-faint); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.6px; padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 700;
}
/* Sticky table headers (Aug 22, 2026 polish pass, research-backed) —
   highest-value, lowest-risk scroll-linked behavior for a data-dense
   internal tool per research: keeps column headers pinned while scrolling
   a long table, pure utility, zero motion/trust risk. Opt-in via
   .sticky-head on the <table> element (not applied globally, since some
   tables sit inside modals/short views where it adds nothing).
   --sticky-head-offset is set by shared.js (initStickyTableHeaders) to the
   real measured header height, rather than a guessed pixel value here. */
table.sticky-head th {
  position: sticky; top: var(--sticky-head-offset, 60px); background: var(--surface); z-index: 5;
  box-shadow: 0 1px 0 var(--border);
}
td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
tr:last-child td { border-bottom: none; }
tr.clickable { cursor: pointer; transition: background 0.15s var(--ease); }
tr.clickable:hover td { background: var(--surface-2); }
tr.legacy-row td { color: var(--text-faint); }
.alert-cell { font-weight: 700; }
.alert-red { color: var(--red); }
.alert-yellow { color: var(--yellow); }
.alert-green { color: var(--green); }
.muted { color: var(--text-faint); }
.empty-state { text-align: center; color: var(--text-faint); padding: 32px 20px; font-size: 0.88rem; }

/* Badges / pills for table cells */
.badge, .pill-tag {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 20px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.badge-idt, .pill-clean { background: var(--green-dim); color: var(--green); }
.badge-irrs, .pill-critical { background: var(--red-dim); color: var(--red); }
.badge-ifpb { background: rgba(56,189,248,0.14); color: var(--accent-2); }
.badge-tv, .pill-minor { background: var(--yellow-dim); color: var(--yellow); }
.badge-nq, .pill-notreal { background: rgba(139,150,168,0.15); color: var(--text-muted); }
.badge-dual { background: var(--purple-dim); color: var(--purple); }
.pill-legacy { background: rgba(139,150,168,0.1); color: var(--text-faint); border: 1px dashed var(--border-strong); }

/* ---------- Tabs — thin underline style, matching top nav language ---------- */
.tabs {
  display: flex; gap: 28px; margin-bottom: 32px; border-bottom: 1px solid var(--border); width: 100%;
}
.tab {
  position: relative;
  padding: 0 0 14px; border: none; background: transparent;
  color: var(--text-faint); cursor: pointer; font-size: 0.87rem; font-weight: 600; transition: color 0.2s var(--ease);
}
.tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.tab.active { color: var(--text); }
.tab.active::after { transform: scaleX(1); }
.tab:not(.active):hover { color: var(--text-muted); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(24px) scale(0.96);
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text);
  padding: 13px 22px; border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 600;
  box-shadow: var(--shadow-lift); z-index: 200; opacity: 0; pointer-events: none;
  transition: all 0.35s var(--ease-snap); display: flex; align-items: center; gap: 10px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.toast.error { border-color: rgba(248,113,113,0.4); }
.toast .toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.toast.error .toast-dot { background: var(--red); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(5,8,14,0.75); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; z-index: 300;
  overflow-y: auto; opacity: 0; transition: opacity 0.25s var(--ease);
}
.modal-backdrop.hidden { display: none; opacity: 0; }
.modal-backdrop.show { opacity: 1; }
.modal {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  max-width: 820px; width: 100%; padding: 28px; box-shadow: 0 24px 64px -12px rgba(0,0,0,0.6);
  transform: translateY(12px) scale(0.98); transition: transform 0.3s var(--ease-snap);
  position: relative;
}
/* Scroll-progress indicator for long modal/detail views (Aug 22, 2026
   polish pass, research-backed) — legitimate wayfinding for a long
   compliance-review record (transcript, flags, lead intelligence, review
   panel all in one scrollable modal), not decoration. Sticks to the top
   of the modal card itself so it stays visible while scrolling the
   backdrop. Width is set by shared.js as the user scrolls. */
.modal-scroll-progress {
  position: sticky; top: 0; height: 3px;
  margin: -28px -28px 22px; background: var(--border-strong); z-index: 2;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden;
}
.modal-scroll-progress-bar {
  height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.1s linear;
}
.modal-backdrop.show .modal { transform: translateY(0) scale(1); }
.modal-close {
  float: right; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
  font-size: 1rem; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; line-height: 1;
  transition: all 0.18s var(--ease);
}
.modal-close:hover { color: var(--text); border-color: var(--border-strong); transform: rotate(90deg); }

/* ---------- Misc ---------- */
.subhead { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 12px; font-weight: 700; }
.legend-note {
  font-size: 0.78rem; color: var(--text-faint); margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--border); display: flex; align-items: flex-start; gap: 8px; line-height: 1.6;
}
.banner-auto {
  background: var(--accent-dim); border: 1px solid rgba(56,189,248,0.22); border-radius: var(--radius-md);
  padding: 16px 20px; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 24px; line-height: 1.55;
}
.banner-auto strong { color: var(--accent-2); }

/* ---------- Compliance-scan detail rendering ----------
   Moved here from compliance-review.html on Sep 1, 2026 alongside
   renderScanResult() (see shared.js) so any page can show the full
   scan-detail view (analytics.html's per-person call drill-down, in
   addition to compliance-review.html itself) with identical styling. */
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 4px; }
.field-card { border-radius: var(--radius-md); padding: 14px 16px; border: 1px solid var(--border); background: var(--surface-2); }
.field-card .field-name { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-faint); margin-bottom: 6px; font-weight: 600; }
.field-card .values { font-size: 0.88rem; color: var(--text); font-weight: 500; }

.interest-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.interest-tag {
  padding: 6px 13px; border-radius: 20px; font-size: 0.78rem; font-weight: 600;
  border: 1px solid rgba(56,189,248,0.3); color: var(--accent); background: var(--accent-dim);
}

.flag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.flag { padding: 7px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; border: 1px solid; display: inline-flex; align-items: center; gap: 6px; }
.flag.hard { background: var(--red-dim); border-color: rgba(248,113,113,0.35); color: var(--red); }
.flag.yellow { background: var(--yellow-dim); border-color: rgba(251,191,36,0.35); color: var(--yellow); }
.flag.green { background: var(--green-dim); border-color: rgba(52,211,153,0.35); color: var(--green); }
.flag-clean { color: var(--green); font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }

.phrase {
  background: var(--bg); border-left: 3px solid var(--accent); padding: 10px 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 8px; font-size: 0.87rem;
  font-style: italic; color: #cbd5e1;
}

/* Status/legacy pills used by renderScanResult() and history/queue tables. */
.status-pill { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.status-pill.clean { background: var(--green-dim); color: var(--green); }
.status-pill.minor { background: var(--yellow-dim); color: var(--yellow); }
.status-pill.critical { background: var(--red-dim); color: var(--red); }
.status-pill.notreal { background: rgba(139,150,168,0.15); color: var(--text-muted); }
.status-pill.legacy { background: rgba(139,150,168,0.1); color: var(--text-faint); border: 1px dashed var(--border-strong); }

/* Fireflies AI "at a glance" summary box (Aug 25, 2026 full-capture display). */
.ff-summary-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 16px; }
.ff-summary-box .ff-overview { font-size: 0.9rem; line-height: 1.6; color: var(--text); margin-bottom: 12px; }
.ff-action-items { margin: 0; padding-left: 18px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.7; }
.ff-keyword-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ff-keyword { padding: 3px 10px; border-radius: 14px; font-size: 0.72rem; background: rgba(139,150,168,0.12); color: var(--text-muted); }
.ff-talkstats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
.ff-talkstat-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--bg); }
.ff-talkstat-card .name { font-weight: 700; font-size: 0.82rem; color: var(--accent); margin-bottom: 4px; }
.ff-talkstat-card .stat-line { font-size: 0.74rem; color: var(--text-faint); }
.ff-sentiment-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.ff-sentiment-bar .neg { background: var(--red); }
.ff-sentiment-bar .neu { background: var(--text-faint); }
.ff-sentiment-bar .pos { background: var(--green); }
.ff-open-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--accent); text-decoration: none; margin-top: 10px; }
.ff-open-link:hover { text-decoration: underline; }

.transcript-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; padding: 10px 0; font-weight: 600; font-size: 0.88rem; color: var(--accent); }
.transcript-toggle .chev { transition: transform 0.18s var(--ease); }
.transcript-toggle.open .chev { transform: rotate(90deg); }
.transcript-body { display: none; max-height: 480px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); padding: 4px 0; }
.transcript-body.open { display: block; }
.t-row { display: flex; gap: 12px; padding: 8px 16px; font-size: 0.85rem; line-height: 1.5; border-bottom: 1px solid rgba(139,150,168,0.08); }
.t-row:nth-child(even) { background: rgba(139,150,168,0.04); }
.t-row .t-time { flex: 0 0 52px; color: var(--text-faint); font-size: 0.72rem; padding-top: 2px; font-family: monospace; }
.t-row .t-speaker { flex: 0 0 130px; font-weight: 700; color: var(--accent); }
.t-row .t-text { flex: 1; color: var(--text); }
.t-row .t-tag { display: inline-block; margin-left: 6px; font-size: 0.65rem; padding: 1px 6px; border-radius: 8px; background: var(--yellow-dim); color: var(--yellow); vertical-align: middle; }

/* score-card / score-cards used by renderScanResult()'s top summary row. */
.score-cards { display: flex; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.score-card { flex: 1; min-width: 140px; border-radius: var(--radius-md); padding: 16px 18px; border: 1px solid var(--border); background: var(--surface-2); text-align: center; }
.score-card .big { font-size: 1.8rem; font-weight: 800; color: var(--text); }
.score-card .lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint); margin-top: 4px; }
.score-card.tone-green .big { color: var(--green); }
.score-card.tone-yellow .big { color: var(--yellow); }
.score-card.tone-red .big { color: var(--red); }