/* ── Reset & tokens ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@500;600;700;800&display=swap');

:root {
  --bg: #040507;
  --surface: #0a0b0e;
  --surface2: #12141a;
  --border: rgba(255, 255, 255, 0.05);
  --border2: rgba(255, 255, 255, 0.12);
  --ink: #f0f2f5;
  --muted: #949ba5;
  --subtle: #454b54;
  
  --accent: #e62314; /* Hot rod red */
  --accent-hover: #ff3322;
  --accent-dim: rgba(230, 35, 20, 0.15);
  
  --gold: #d4af37;
  --gold-dim: rgba(212, 175, 55, 0.15);
  
  --green: #2e994c;
  --yellow: #eab308;
  --red: #ef4444;
  
  --radius: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  
  --glass-bg: rgba(16, 18, 24, 0.45);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glow-color: rgba(230, 35, 20, 0.12);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
}

/* ── Background Layers ─────────────────────────────────────────────────────── */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.pointer-events-none { pointer-events: none !important; }

.stadium-lights {
  background:
    radial-gradient(ellipse 900px 700px at -5% -15%, rgba(255, 255, 255, 0.055) 0%, transparent 55%),
    radial-gradient(ellipse 900px 700px at 105% -15%, rgba(255, 255, 255, 0.055) 0%, transparent 55%);
}

.field-grid {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 100px 100px;
  background-position: center center;
  mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
}

#particlesCanvas {
  width: 100%;
  height: 100%;
}

/* ── Formula D1 V4 / Black-glass recruiting war table ───────────────────── */
:root { --bg:#030303; --surface:#0a0a0a; --surface2:#151515; --ink:#f3f0ea; --muted:#9b9891; --subtle:#56534e; --accent:#dc271c; --accent-hover:#f04435; --gold:#c6a45b; --glass-bg:rgba(13,13,13,.76); --glass-border:rgba(255,255,255,.11); --border:rgba(255,255,255,.075); --border2:rgba(255,255,255,.17); }
.stadium-lights{background:radial-gradient(ellipse 850px 560px at 82% 20%,rgba(199,164,91,.055),transparent 64%),radial-gradient(ellipse 560px 430px at 35% 78%,rgba(220,39,28,.055),transparent 72%)}
.field-grid{display:none}
.sidebar{background:rgba(7,7,7,.92);backdrop-filter:blur(18px);border-color:rgba(255,255,255,.08)}
.topbar{background:rgba(4,4,4,.7);border-color:rgba(255,255,255,.08)}
.main-content{padding:12px 28px 24px}
#pageLeadFinder{max-width:1520px}
#pageLeadFinder .lead-finder-grid{display:grid;grid-template-columns:250px minmax(0,1fr);grid-template-rows:auto minmax(580px,1fr);gap:0 22px;max-width:1460px;min-height:calc(100dvh - 92px);padding:0;margin:0 auto;align-items:stretch}
#pageLeadFinder .lead-finder-hero{grid-column:1/-1;align-items:center;text-align:center;padding:15px 0 8px;justify-content:start}
#pageLeadFinder .command-kicker{justify-content:center;color:#b5b0a8;margin:0 0 8px;font-size:10px}
#pageLeadFinder .command-kicker span,.live-dot{background:var(--accent);box-shadow:0 0 12px rgba(220,39,28,.5)}
#pageLeadFinder .search-title{font:600 clamp(22px,2vw,30px)/1 'Syne',sans-serif;letter-spacing:-.045em;text-align:center;margin:0 0 16px;color:#f5f2eb}
#pageLeadFinder .search-subheading{order:-1;margin:0 0 11px;max-width:none;text-align:center;font:500 11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.15em;color:#9f9a91}
#pageLeadFinder .hero-search-wrap{max-width:760px;width:min(760px,100%);height:58px;border-radius:5px;background:rgba(15,15,15,.82);border-color:rgba(255,255,255,.17)}
#pageLeadFinder .hero-add-btn{background:rgba(220,39,28,.18);border-color:rgba(220,39,28,.55);color:#fff}
#pageLeadFinder .search-prompt{display:none}
#pageLeadFinder .network-controls{grid-column:1;grid-row:2;padding:32px 14px 0 0;border-right:1px solid rgba(255,255,255,.09);position:relative;z-index:6}
.division-rail{display:flex;flex-direction:column;gap:6px;padding-bottom:23px;border-bottom:1px solid rgba(255,255,255,.1)}
.rail-label{font:500 10px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:#8d877d;margin-bottom:5px}
.division-tab{height:37px;text-align:left;padding:0 13px;background:transparent;border:1px solid rgba(255,255,255,.1);color:#8c8983;font:600 11px 'DM Mono',monospace;letter-spacing:.12em;cursor:pointer;transition:background .2s,transform .2s,color .2s,border-color .2s}
.division-tab:hover{color:#f4f1eb;border-color:rgba(255,255,255,.25)}
.division-tab.active{background:#171717;color:#fff;border-color:rgba(220,39,28,.7);box-shadow:inset 3px 0 var(--accent),0 0 18px rgba(220,39,28,.12)}
.activity-rail{padding:21px 0 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.activity-rail .rail-label{display:flex;align-items:center;gap:8px}.live-dot{width:5px;height:5px;border-radius:50%;display:inline-block}
.activity-feed{height:224px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:5px}
.activity-event{position:relative;padding:8px 8px 8px 12px;border-left:1px solid rgba(255,255,255,.17);font:400 11px/1.35 'DM Mono',monospace;color:#99948c;animation:feedIn .55s cubic-bezier(.2,.8,.2,1)}
.activity-event strong{display:block;color:#f3f0ea;font-weight:500}.activity-event b{color:var(--gold);font-weight:500}
@keyframes feedIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
#pageLeadFinder .school-queue-section{max-width:none;margin-top:20px}.school-queue-header{font-family:'DM Mono',monospace}
#pageLeadFinder .school-queue-list{max-height:120px}.school-queue-empty{font:11px/1.45 'DM Mono',monospace}
#pageLeadFinder .run-btn{width:100%;font-size:10px}.network-stage{grid-column:2;grid-row:2;min-height:0;height:calc(100dvh - 160px);border:0;overflow:visible}
.network-stage::before{inset:7% 1% 10%;background:radial-gradient(ellipse at 52% 55%,rgba(255,255,255,.055),transparent 54%),radial-gradient(ellipse at 80% 70%,rgba(220,39,28,.075),transparent 25%)}
.us-map{width:min(100%,1120px);height:100%;transform:translate(1%,0);filter:drop-shadow(0 22px 20px rgba(0,0,0,.72))}
.map-land{fill:#141414;stroke:#aaa59d;stroke-width:1.05}.map-shadow{fill:#090909;opacity:.95}.map-contours,.route-layer,.user-route-layer,.ambient-route{display:none!important}
.state-region{fill:#141414;stroke:#817d76;stroke-width:1}.state-region.is-hovered{fill:#22201d;stroke:#d4c293;filter:drop-shadow(0 0 5px rgba(220,39,28,.45))}.state-layer:has(.is-hovered) .state-region:not(.is-hovered){opacity:.86}
.school-nodes{transition:opacity .18s,transform .18s}.school-nodes.is-switching{opacity:0;transform:scale(.97)}
.map-node{cursor:pointer}.map-node .school-hit{fill:transparent}.map-node .school-point{fill:#f8f5ee;stroke:#fff;stroke-width:.4;filter:drop-shadow(0 0 4px rgba(255,255,255,.8))}.map-node .node-ring{stroke:#d6b66e}.map-node .school-badge,.map-node .school-name{display:none}.map-node.is-state-revealed .school-badge{display:block;animation:badgeIn .2s cubic-bezier(.2,.8,.2,1)}.map-node.is-state-revealed .school-badge rect{fill:#181716;stroke:#c6a45b;stroke-width:.8}.map-node.is-state-revealed .school-badge text{fill:#f5f2eb;font:600 7px 'DM Mono',monospace}.map-node:hover .school-point,.map-node.is-selected .school-point{fill:var(--accent);filter:drop-shadow(0 0 9px rgba(220,39,28,.95));transform:scale(1.55);transform-origin:center}.map-node.is-selected .node-ring{stroke:var(--gold)}@keyframes badgeIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.map-tooltip{position:fixed;z-index:80;pointer-events:none;transform:translate(12px,-50%);padding:8px 10px;border:1px solid rgba(198,164,91,.58);background:rgba(13,13,13,.96);box-shadow:0 10px 30px rgba(0,0,0,.6);color:#f4f0e9;font:500 10px 'DM Mono',monospace;letter-spacing:.05em;white-space:nowrap}.map-tooltip span{color:var(--gold);margin-left:8px}
.signal-arrival{fill:none;stroke:var(--gold);stroke-width:1;animation:arrival .5s ease-out forwards}@keyframes arrival{to{r:18;opacity:0}}
.network-readout,.map-caption,.network-stats{display:none}
@media(max-width:800px){.sidebar{width:68px}.sidebar-brand{margin-bottom:22px}.sidebar-logo-img{display:none}.nav-item{font-size:0;justify-content:center}.main-content{padding:8px 12px}#pageLeadFinder .lead-finder-grid{display:flex;gap:8px}#pageLeadFinder .lead-finder-hero{padding-top:10px}.network-controls{display:contents!important}.division-rail{order:2;flex-direction:row;border:0;padding:8px 0}.division-rail .rail-label{display:none}.division-tab{flex:1;text-align:center}.activity-rail{display:none}.network-stage{order:3;height:53vh;min-height:360px;width:100%}.school-queue-section{order:4}.options-group,.bulk-search-details{order:6}.progress-col{display:none!important}}

/* ── Utilities ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.mt-4 { margin-top: 16px; }
.mt-0 { margin-top: 0 !important; }
.mb-4 { margin-bottom: 24px; }
.text-center { text-align: center; }
.text-gold { color: var(--gold); }
.text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  display: inline-block;
}

/* ── Glow Effects ──────────────────────────────────────────────────────────── */
.glow-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.glow-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    800px circle at var(--mouse-x, -9999px) var(--mouse-y, -9999px),
    var(--glow-color),
    transparent 40%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 10;
}

/* ── App Layout (Sidebar + Main) ───────────────────────────────────────────── */
.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sidebar */
.sidebar {
  width: 260px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 50;
}

.sidebar-top {
  padding: 24px 16px;
}

.sidebar-bottom {
  padding: 16px;
  border-top: 1px solid var(--border);
}

.sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 56px;
  padding: 8px;
}

.sidebar-brand .sidebar-logo-img {
  height: auto;
  max-width: 100%;
  width: auto;
  transform: scale(1.25);
}

.sidebar-brand .beta-badge {
  margin-left: 0;
  margin-top: 4px;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 12px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  width: 100%;
}

.nav-item svg {
  color: var(--subtle);
  transition: color 0.2s;
}

.nav-item:hover {
  background: var(--surface2);
  color: var(--ink);
}

.nav-item:hover svg {
  color: var(--ink);
}

.nav-item.active {
  background: var(--accent-dim);
  color: var(--ink);
  border: 1px solid rgba(230,35,20,0.3);
}

.nav-item.active svg {
  color: var(--accent);
}

/* Main Wrapper */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Topbar ─────────────────────────────────────────────────────────────────── */
.topbar {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
  height: 60px;
  flex-shrink: 0;
}

.topbar-inner {
  height: 100%;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-icon { 
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.brand-name {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-name::after {
  content: 'D1';
  color: var(--gold);
  font-weight: 800;
  font-style: italic;
}

.brand-logo-img {
  display: block;
  object-fit: contain;
}

.sidebar-logo-img {
  height: auto;
  max-width: 180px;
  width: 100%;
}

.auth-logo-img {
  height: 64px;
  max-width: 100%;
  width: auto;
}

.beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(230, 35, 20, 0.35);
  background: #1e2026;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  margin-left: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.brand:hover .beta-badge,
.brand-name:hover + .beta-badge {
  border-color: rgba(230, 35, 20, 0.55);
  color: var(--ink);
}

.topbar-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.config-badge {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  transition: all 0.2s;
}

.config-badge.ready { color: var(--gold); border-color: var(--gold-dim); background: rgba(212,175,55,0.05); }
.config-badge.error { color: var(--red);   border-color: rgba(239,68,68,0.2); }

.user-menu {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
}

/* ── Main Content Area ──────────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
}

.page-view {
  max-width: 1100px;
  margin: 0 auto;
  animation: fadeIn 0.3s ease-out;
}

.page-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#pageMyDatabase .page-header,
#pageTemplates .page-header {
  justify-content: center;
}

#pageMyDatabase .page-title,
#pageTemplates .page-title {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
  background: linear-gradient(to right, #fff, #a0a5af);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.info-toggle {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all 0.2s;
}

.info-toggle:hover {
  color: var(--ink);
  background: var(--surface2);
}

.info-note {
  flex-basis: 100%;
  background: rgba(212,175,55,0.05);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-top: 8px;
}

/* ── Grid Layouts ───────────────────────────────────────────────────────────── */
.lead-finder-grid {
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: center;
  max-width: 1040px;
  margin: 40px auto 0;
  position: relative;
  z-index: 10;
  min-height: calc(100vh - 160px);
  justify-content: center;
}

.lead-finder-hero {
  width: 100%;
  text-align: center;
}

.progress-col {
  width: 100%;
  max-width: 720px;
}

.search-title {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
  margin: 0 0 14px;
  background: linear-gradient(to right, #fff, #a0a5af);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.search-subheading {
  text-align: center;
  font-size: 19px;
  color: var(--muted);
  margin: 0 0 40px;
}

.card {
  padding: 32px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

.field-input {
  display: block;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  padding: 14px 18px;
  transition: all 0.2s;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}

.field-input:focus { 
  border-color: var(--accent); 
  box-shadow: 0 0 0 1px var(--accent-dim), inset 0 1px 2px rgba(0,0,0,0.2);
}

textarea.field-input {
  min-height: 180px;
  resize: vertical;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}

.toggle-label:hover {
  color: #fff;
}

.toggle-label input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  margin: 0;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: all 0.2s;
}

.toggle-label input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--bg);
  background-color: var(--bg);
  transform-origin: center;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.toggle-label input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.toggle-label input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.options-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.run-btn {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 16px 0;
  background: linear-gradient(135deg, var(--accent), #b81a0e);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
}

.run-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.run-btn:hover:not(:disabled) { 
  background: linear-gradient(135deg, #ff3322, var(--accent-hover));
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35), 0 0 32px rgba(255, 51, 34, 0.45);
  transform: translateY(-3px);
}

.run-btn:hover:not(:disabled)::before {
  opacity: 1;
}

.run-btn:active:not(:disabled) { 
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(230,35,20,0.2);
}

.run-btn:disabled { 
  background: var(--surface2);
  border-color: var(--border);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed; 
}

.danger-btn {
  background: transparent;
  border-color: rgba(239,68,68,0.5);
  color: var(--red);
  box-shadow: none;
}
.danger-btn:hover:not(:disabled) {
  background: rgba(239,68,68,0.1);
  border-color: var(--red);
  box-shadow: none;
}

.ghost-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.ghost-btn:hover { 
  border-color: var(--muted); 
  background: var(--surface2);
}

/* ── Progress & Status ──────────────────────────────────────────────────────── */
.progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.progress-header .card-title { margin: 0; }

.progress-disclaimer {
  margin: -12px 0 16px;
  font-size: 12px;
  color: var(--subtle);
  line-height: 1.5;
}
.contacts-ready {
  margin-top: 16px;
  font-size: 13px; color: var(--muted); font-style: italic;
  text-align: center; padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

.status-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.view-in-vault-btn {
  white-space: nowrap;
}

.radar-sweep {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(230, 35, 20, 0.2);
  border: 1px solid rgba(230, 35, 20, 0.5);
  position: relative;
  overflow: hidden;
}

.radar-sweep::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  background: linear-gradient(45deg, transparent, rgba(230, 35, 20, 0.8));
  transform-origin: 0 0;
  animation: radar 1.5s linear infinite;
}

@keyframes radar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.status-pill {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 4px 10px;
  border: 1px solid;
}

.status-idle    { color: var(--muted);   border-color: var(--border); background: var(--surface2); }
.status-running { color: var(--ink); border-color: var(--border2); background: var(--surface2); box-shadow: 0 0 15px rgba(255, 255, 255, 0.05); }
.status-complete{ color: var(--green);   border-color: rgba(46,153,76,.3);  background: rgba(46,153,76,.1); }
.status-failed  { color: var(--accent);  border-color: rgba(230,35,20,.3);  background: rgba(230,35,20,.1); }

.progress-track {
  height: 6px;
  background: var(--surface2);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-hover), var(--accent));
  border-radius: 6px;
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.running-player {
  width: 20px;
  height: 20px;
  color: #fff;
  transform: translateX(50%);
  animation: runPlayer 0.45s infinite alternate ease-in-out;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.5));
}

@keyframes runPlayer {
  from { transform: translateX(50%) translateY(-1.5px) rotate(-6deg) scaleY(1.02); }
  to { transform: translateX(50%) translateY(1px) rotate(6deg) scaleY(0.98); }
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3) 50%, transparent);
  animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Finish line: player stops running once the job completes */
.progress-fill.is-complete .running-player {
  animation: none;
  transform: translateX(50%);
  filter: drop-shadow(0 0 6px rgba(46, 153, 76, 0.6));
}

.progress-fill.is-complete::after {
  animation: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .running-player { animation: none; }
  .progress-fill::after { animation: none; opacity: 0; }
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
  text-transform: uppercase;
}

.current-school-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 12px 16px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--gold);
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(212,175,55,0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Stats grid ─────────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 20px;
}

@media (max-width: 600px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Contact Vault layout: Programs Tracked main + Overview sidebar ── */
.vault-layout {
  display: flex; gap: 20px; align-items: flex-start;
}
.vault-main { flex: 1; min-width: 0; }
.vault-sidebar { width: 200px; flex-shrink: 0; position: sticky; top: 16px; }
.vault-stats-card { padding: 16px !important; }
.vault-stats-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin: 0 0 12px;
}
.vault-stats-grid {
  display: flex; flex-direction: column; gap: 10px;
}
.vault-stats-grid .stat-tile {
  padding: 10px 12px; text-align: left;
}
.vault-stats-grid .stat-val {
  font-size: 18px;
}
.vault-stats-grid .stat-lbl {
  font-size: 11px;
}
@media (max-width: 768px) {
  .vault-layout { flex-direction: column-reverse; }
  .vault-sidebar { width: 100%; position: static; }
  .vault-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
}

/* ── Lead Finder: national command center ─────────────────────────────────── */
#pageLeadFinder { max-width: 1440px; }
#pageLeadFinder .lead-finder-grid { display:grid; grid-template-columns:minmax(310px, .82fr) minmax(540px, 1.45fr); gap:26px; align-items:stretch; max-width:1360px; min-height:calc(100vh - 125px); margin:0 auto; padding:20px 0 28px; }
#pageLeadFinder .lead-finder-hero { text-align:left; padding:43px 16px 0 16px; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2; }
.command-kicker { font:500 10px/1 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.15em; color:#92a5b7; display:flex; align-items:center; gap:9px; margin-bottom:21px; }
.command-kicker span { width:6px; height:6px; border-radius:50%; background:#ee4e34; box-shadow:0 0 12px rgba(238,78,52,.55); }
.command-kicker b { color:#e4d8be; font-weight:500; margin-left:3px; }
#pageLeadFinder .search-title { font-family:'Syne',sans-serif; font-size:clamp(38px,4vw,67px); line-height:.98; letter-spacing:-.065em; text-align:left; color:#e9edf0; background:none; -webkit-text-fill-color:initial; margin:0 0 19px; }
#pageLeadFinder .search-subheading { text-align:left; font-size:15px; max-width:320px; letter-spacing:.01em; margin:0 0 31px; color:#81909f; }
#pageLeadFinder .hero-search-wrap { position:relative; width:100%; max-width:390px; display:flex; align-items:center; background:rgba(10,18,27,.62); border:1px solid rgba(185,204,218,.22); border-radius:3px; height:59px; box-shadow:inset 0 1px rgba(255,255,255,.035), 0 15px 55px rgba(0,0,0,.25); transition:border-color .35s ease, box-shadow .35s ease; }
#pageLeadFinder .hero-search-wrap:focus-within { border-color:rgba(231,82,53,.7); box-shadow:inset 0 1px rgba(255,255,255,.06), 0 0 0 3px rgba(231,82,53,.09),0 15px 55px rgba(0,0,0,.25); }
#pageLeadFinder .hero-search-icon { position:static; inset:auto; transform:none; width:18px; margin:0 12px 0 16px; color:#9aabba; flex:0 0 auto; }
#pageLeadFinder .hero-search-input { width:auto; min-width:0; flex:1; border:0; background:transparent; padding:0 62px 0 0; font:400 14px 'DM Mono',monospace; color:#edf1f3; box-shadow:none; }
#pageLeadFinder .hero-search-input:focus { box-shadow:none; }
#pageLeadFinder .hero-add-btn { height:35px; margin-right:9px; color:#e9dfc8; background:rgba(222,87,62,.13); border:1px solid rgba(226,96,68,.35); border-radius:2px; padding:0 13px; font:500 10px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.search-prompt { font:400 10px 'DM Mono',monospace; letter-spacing:.08em; color:#667585; margin:10px 0 25px; text-transform:uppercase; }
#pageLeadFinder .school-queue-section { max-width:390px; border-top:1px solid rgba(174,194,210,.1); padding-top:16px; }
#pageLeadFinder .school-queue-list { max-height:105px; }
#pageLeadFinder .school-queue-empty { text-align:left; background:none; border:0; padding:7px 0; color:#71808e; font-size:12px; }
#pageLeadFinder .options-group { max-width:390px; border:0; background:transparent; padding:0; margin-top:15px; }
#pageLeadFinder .bulk-search-details { max-width:390px; margin-top:16px; }
#pageLeadFinder .run-btn { width:390px; max-width:100%; margin-top:17px; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; border-radius:2px; background:#d54c35; border:0; font:600 11px 'DM Mono',monospace; letter-spacing:.13em; box-shadow:0 9px 28px rgba(159,42,27,.22); }
#pageLeadFinder .run-btn:hover:not(:disabled) { transform:translateY(-2px); background:#ec6249; box-shadow:0 12px 32px rgba(159,42,27,.28); }
.run-arrow { font-size:18px; line-height:0; }
#pageLeadFinder .progress-col { display:none; }
.network-stage { position:relative; min-height:665px; overflow:hidden; display:flex; align-items:center; justify-content:center; isolation:isolate; border-left:1px solid rgba(169,189,205,.1); }
.network-stage::before { content:""; position:absolute; inset:9% 4% 8%; background:radial-gradient(ellipse at 56% 52%,rgba(48,83,105,.16),transparent 50%),radial-gradient(ellipse at 82% 65%,rgba(203,68,46,.07),transparent 26%); filter:blur(18px); z-index:-2; }
.us-map { width:min(100%,920px); overflow:visible; transform:translate(1%, -2%) rotate(-1deg); filter:drop-shadow(0 21px 25px rgba(0,0,0,.3)); }
.map-shadow { fill:#162738; opacity:.28; filter:url(#softMapGlow); }
.map-land { fill:url(#mapFill); stroke:rgba(180,207,221,.4); stroke-width:1.15; }
.map-contours path { fill:none; stroke:#92b1c0; stroke-opacity:.13; stroke-width:1; }
.map-node { transform-box:fill-box; transform-origin:center; cursor:pointer; }
.map-node circle:first-child { fill:#c7d9e4; stroke:#f1e7d7; stroke-width:.6; filter:drop-shadow(0 0 5px rgba(220,237,246,.75)); }
.map-node:nth-child(3n) circle:first-child { fill:#e37a60; }
.node-ring { fill:none; stroke:#d8e8ed; stroke-width:.6; opacity:.12; transform:scale(.5); transform-origin:center; animation:nodeBreath 6s ease-in-out infinite; }
.map-node:hover circle:first-child,.map-node.is-selected circle:first-child { fill:#fa7457; transform:scale(2.2); transform-origin:center; filter:drop-shadow(0 0 13px rgba(239,94,66,.9)); }
.map-node.is-selected .node-ring { opacity:.9; stroke:#f2674e; animation:nodeBeacon 1.8s ease-out infinite; }
.route { fill:none; stroke:#a8c3cf; stroke-width:.75; opacity:.15; stroke-dasharray:.015 .032; }
.route-pulse { fill:#f0d7bd; filter:drop-shadow(0 0 5px #e8765d); opacity:.85; }
.p2 { opacity:.6; }.p3 { opacity:.5; }
.network-stage.has-target .route-layer { opacity:.3; transition:opacity .6s ease; }
.network-stage.has-target .map-land { stroke:rgba(210,225,232,.58); }
.network-readout.has-target { opacity:1; transform:translateX(-8px); }
.map-caption { position:absolute; bottom:111px; left:9%; color:#738797; font:400 9px 'DM Mono',monospace; letter-spacing:.13em; text-transform:uppercase; display:flex; gap:8px; align-items:center; }
.caption-rule { width:29px; border-top:1px solid #bd513c; }
.network-readout { position:absolute; right:2%; top:16%; width:215px; padding:15px 0 14px 16px; border-left:1px solid rgba(215,229,234,.28); background:linear-gradient(90deg,rgba(10,17,25,.34),transparent); opacity:.86; transition:opacity .4s,transform .4s; }
.readout-eyebrow { color:#d4644d; font:500 9px 'DM Mono',monospace; letter-spacing:.16em; text-transform:uppercase; margin-bottom:7px; }
.network-readout strong { display:block; color:#e7e7e0; font:600 13px 'Syne',sans-serif; letter-spacing:.02em; }
.network-readout span { display:block; color:#8997a3; font:400 10px 'DM Mono',monospace; margin:5px 0 12px; }
.network-readout button { border:0; background:transparent; padding:0; color:#d9c8ad; font:500 10px 'DM Mono',monospace; cursor:pointer; }.network-readout button span { display:inline; margin-left:5px; color:#e26048; font-size:14px; }
.network-stats { position:absolute; bottom:27px; left:9%; right:7%; display:flex; gap:clamp(16px,4vw,55px); border-top:1px solid rgba(165,189,204,.16); padding-top:15px; }
.network-stats div { display:flex; flex-direction:column; gap:2px; }.network-stats b { color:#dce5e5; font:500 13px 'DM Mono',monospace; }.network-stats span { color:#697986; text-transform:uppercase; font:400 8px 'DM Mono',monospace; letter-spacing:.12em; }
@keyframes nodeBreath { 0%,75%,100%{transform:scale(.5);opacity:.1} 85%{transform:scale(1.5);opacity:.45} }
@keyframes nodeBeacon { from{transform:scale(.5);opacity:.75} to{transform:scale(3.8);opacity:0} }
@media (max-width:900px){ #pageLeadFinder .lead-finder-grid{grid-template-columns:1fr;gap:0}.network-stage{order:-1;min-height:450px;border:0}.network-readout{right:7%;top:12%}#pageLeadFinder .lead-finder-hero{padding:20px 8px 40px;align-items:center}#pageLeadFinder .search-title,#pageLeadFinder .search-subheading{text-align:center}.network-stats{bottom:15px}.map-caption{bottom:83px} }
@media (max-width:560px){.network-stage{min-height:315px}.network-readout{transform:scale(.75);transform-origin:top right;right:2%;}.network-stats{left:6%;gap:16px}.network-stats div:nth-child(3){display:none}.map-caption{display:none}.us-map{width:110%;}.route-layer{display:none}#pageLeadFinder .lead-finder-grid{padding-top:0}.command-kicker{margin-top:10px}}
@media (prefers-reduced-motion:reduce){.node-ring,.route-pulse animateMotion{animation:none}.node-ring{display:none}.route-pulse{display:none}#particlesCanvas{display:none}}

.stat-tile {
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 12px;
  text-align: center;
  transition: transform 0.2s, border-color 0.2s;
}

.stat-tile:hover {
  transform: translateY(-2px);
  border-color: var(--border2);
}

.stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.stat-lbl {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: 0.05em;
}

.stat-green { color: var(--green); text-shadow: 0 0 10px rgba(46,153,76,0.3); }
.stat-yellow { color: var(--yellow); text-shadow: 0 0 10px rgba(234,179,8,0.3); }
.stat-red   { color: var(--accent); text-shadow: 0 0 10px rgba(230,35,20,0.3); }
.stat-blue  { color: var(--gold); }

/* ── Log panel ──────────────────────────────────────────────────────────────── */
.log-panel {
  margin-top: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 250px;
  overflow-y: auto;
  padding: 16px;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  scroll-behavior: smooth;
}

.log-line { 
  padding: 6px 0; 
  word-break: break-all;
  border-bottom: 1px solid var(--border);
  animation: slideUpFade 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0;
  transform: translateY(4px);
}

@keyframes slideUpFade {
  to { opacity: 1; transform: translateY(0); }
}
.log-line:last-child { border-bottom: none; }
.log-searching { color: var(--ink); }
.log-success   { color: var(--green); }
.log-warn      { color: var(--yellow); }
.log-error     { color: var(--accent); }
.log-sheets    { color: var(--gold); }

/* ── Recent Runs & Tables ──────────────────────────────────────────────────── */
.runs-list { display: flex; flex-direction: column; gap: 10px; }

.run-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: inherit;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.run-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: transparent;
  transition: background 0.2s;
}

.run-item:hover { 
  border-color: var(--border2); 
  background: var(--surface2); 
  transform: translateX(2px);
}

.run-item:hover::before {
  background: var(--accent);
}

.run-item-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.run-item-id { 
  font-weight: 700; 
  font-size: 13px; 
  font-family: 'JetBrains Mono', monospace;
}

.run-item-meta { 
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; 
  color: var(--muted); 
  text-transform: uppercase;
}

.run-results { 
  margin-top: 24px; 
  animation: fadeIn 0.3s ease-out;
}

.table-wrap { 
  overflow-x: auto; 
  border: 1px solid var(--border); 
  border-radius: var(--radius-sm); 
  background: #050608;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.results-table th, .results-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.results-table th {
  background: var(--surface2);
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
}
.results-table tbody tr { transition: background 0.15s; }
.results-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.results-table tbody tr:last-child td { border-bottom: none; }

/* ── Autocomplete ──────────────────────────────────────────────────────────── */
.autocomplete-results {
  position: absolute;
  width: calc(100% - 48px);
  margin-top: 8px;
  background: rgba(14, 16, 21, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 16px 40px rgba(0,0,0,0.65), 0 0 0 1px rgba(0,0,0,0.3);
}
.autocomplete-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: rgba(255, 255, 255, 0.09); }
.ac-logo-badge {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  flex-shrink: 0;
}
/* School logo used across Contact Vault, Lead Finder, autocomplete */
.school-logo {
  display: inline-block;
  width: 24px; height: 24px;
  border-radius: 5px; object-fit: contain; flex-shrink: 0;
}
.ac-logo-badge .school-logo {
  width: 28px !important;
  height: 28px !important;
}
.autocomplete-item .ac-name { font-size: 14px; font-weight: 600; grid-column: 2; }
.autocomplete-item .ac-alias { font-weight: 500; color: var(--muted); }
.autocomplete-item .ac-meta { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; grid-column: 2; }
.autocomplete-empty {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

/* ── Telemetry & Racing Line Accents ───────────────────────────────────────── */
.run-item, .nav-item {
  position: relative;
  overflow: hidden;
}

.run-item::after, .nav-item::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  border-radius: inherit;
}

.run-item:hover::after, .nav-item:hover::after {
  border-color: rgba(230, 35, 20, 0.3);
  box-shadow: inset 0 0 8px rgba(230, 35, 20, 0.08);
}

.school-card:hover {
  border-color: rgba(230, 35, 20, 0.45);
}

.school-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Templates Page (Recruiting Playbook) ─────────────────────────────────────── */
.playbook {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}

.playbook-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}

.playbook-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.playbook-nav-item:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.03);
}

.playbook-nav-item.active {
  background: var(--accent-dim);
  color: var(--ink);
  border-color: rgba(230, 35, 20, 0.3);
}

.playbook-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
}

.playbook-nav-item.active .playbook-nav-icon {
  color: var(--accent);
}

.playbook-viewer {
  min-height: 400px;
}

.playbook-doc {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px;
  max-width: 780px;
}

.playbook-doc-title {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.playbook-doc-usage {
  margin: 0 0 32px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
  max-width: 560px;
}

.playbook-doc-body {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink);
  white-space: pre-wrap;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

.playbook-doc-body.is-filled {
  color: var(--muted);
}

.tpl-placeholder {
  color: var(--gold);
  background: var(--gold-dim);
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 600;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.85em;
}

.playbook-doc-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.playbook-copy-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
  box-shadow: 0 8px 24px rgba(230, 35, 20, 0.25);
}

.playbook-copy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(230, 35, 20, 0.35);
}

.playbook-copy-btn:active {
  transform: translateY(0);
}

.playbook-copy-btn.is-copied {
  background: linear-gradient(135deg, #1f9d55, #17b26a);
  box-shadow: 0 8px 24px rgba(23, 178, 106, 0.25);
}

.playbook-preview-btn {
  padding: 14px 22px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.playbook-preview-btn:hover {
  color: var(--ink);
  border-color: var(--border2);
  background: rgba(255, 255, 255, 0.03);
}

.playbook-doc-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.playbook-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.playbook-meta-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
}

.playbook-meta-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.playbook-meta-value.rate-high { color: #17b26a; }
.playbook-meta-value.rate-medium { color: var(--gold); }
.playbook-meta-value.rate-low { color: var(--muted); }

@media (max-width: 900px) {
  .playbook {
    grid-template-columns: 1fr;
  }
  .playbook-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
  }
  .playbook-doc {
    padding: 28px;
  }
  .playbook-doc-meta {
    grid-template-columns: 1fr;
  }
}

/* ── Admin Page ─────────────────────────────────────────────────────────────── */

/* Shell & top bar */
.admin-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.admin-topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
  flex-shrink: 0;
}

.admin-topbar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Tab bar */
.admin-tab-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tab-bar::-webkit-scrollbar { display: none; }

.admin-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.admin-tab-btn:hover  { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.admin-tab-btn.active { color: var(--text-primary); background: rgba(255,255,255,0.08); font-weight: 600; }

/* Content area */
.admin-content {
  flex: 1;
  overflow-y: auto;
  padding: 28px;
}

.admin-tab-panel { }

/* Page header row */
.admin-page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.admin-page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.admin-page-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.admin-count-badge {
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
}

.admin-refresh-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.admin-refresh-btn:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.25); }

/* Overview stat tiles */
.admin-tile-group {
  margin-bottom: 28px;
}

.admin-tile-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.admin-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-stat-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  min-width: 140px;
}

.admin-stat-tile--link {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.admin-stat-tile--link:hover {
  border-color: rgba(230,35,20,0.3);
  background: rgba(230,35,20,0.04);
  transform: translateY(-1px);
}

.admin-stat-tile-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.admin-stat-tile-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.admin-stat-tile-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  opacity: 0.8;
}

/* Toolbar (filters) */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-toolbar--multi .admin-filter-input { max-width: 220px; }

.admin-filter-input {
  background: var(--input-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  padding: 7px 12px;
  outline: none;
  width: 240px;
  transition: border-color 0.15s;
}
.admin-filter-input::placeholder { color: var(--text-muted); }
.admin-filter-input:focus { border-color: rgba(255,255,255,0.25); }

.admin-filter-select {
  background: var(--input-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  cursor: pointer;
}
.admin-filter-select option { background: #1a1a1a; }

/* Table */
.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table thead tr {
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
}

.admin-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-secondary, var(--text-primary));
  vertical-align: middle;
  max-width: 280px;
}

.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: rgba(255,255,255,0.02); }

.admin-num     { text-align: right; font-variant-numeric: tabular-nums; }
.admin-center  { text-align: center; }
.admin-nowrap  { white-space: nowrap; }
.admin-cell-wrap { word-break: break-word; white-space: normal; }

.admin-empty-cell {
  text-align: center;
  color: var(--text-muted);
  padding: 16px;
  font-style: italic;
}

/* Status badges */
.admin-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

/* Status-specific badge colors */
.admin-badge--found,
.admin-badge--complete,
.admin-badge--completed,
.admin-badge--active    { color: #4ade80; background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.25); }
.admin-badge--running   { color: #60a5fa; background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.25); }
.admin-badge--trial     { color: var(--gold); background: rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.25); }
.admin-badge--failed,
.admin-badge--error     { color: #f87171; background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.25); }
.admin-badge--partial,
.admin-badge--missing-email,
.admin-badge--no-rows-extracted { color: #fb923c; background: rgba(251,146,60,0.1); border-color: rgba(251,146,60,0.25); }
.admin-badge--admin     { color: var(--red); background: rgba(230,35,20,0.1); border-color: rgba(230,35,20,0.25); }
.admin-badge--user      { color: var(--text-muted); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.admin-badge--div       { color: var(--text-muted); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); font-size: 10px; }
.admin-badge--fbs       { color: #c084fc; background: rgba(192,132,252,0.1); border-color: rgba(192,132,252,0.25); }
.admin-badge--fcs       { color: #38bdf8; background: rgba(56,189,248,0.1); border-color: rgba(56,189,248,0.25); }
.admin-badge--d2        { color: #94a3b8; background: rgba(148,163,184,0.1); border-color: rgba(148,163,184,0.2); }
.admin-badge--d3        { color: #64748b; background: rgba(100,116,139,0.1); border-color: rgba(100,116,139,0.2); }

/* Contact-specific cells */
.admin-email   { font-family: monospace; font-size: 12px; color: var(--text-primary); }
.admin-missing { color: var(--text-muted); font-style: italic; }
.admin-link    { color: var(--red); text-decoration: none; font-size: 12px; }
.admin-link:hover { text-decoration: underline; }
.admin-error-cell { color: #f87171; font-size: 12px; }

/* Pagination */
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 0 4px;
}

.admin-pg-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.admin-pg-btn:hover:not([disabled]) { background: rgba(255,255,255,0.1); }
.admin-pg-btn[disabled]  { opacity: 0.35; cursor: not-allowed; }

.admin-pg-info { font-size: 13px; color: var(--text-muted); }
.admin-pg-total { font-size: 11px; }

/* Loading / empty / error states */
.admin-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  color: var(--text-muted);
  font-size: 14px;
}

.admin-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.1);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: admin-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes admin-spin { to { transform: rotate(360deg); } }

.admin-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

.admin-empty--good { color: #4ade80; }

.admin-fetch-error {
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: var(--radius-sm);
  color: #f87171;
  font-size: 13px;
  padding: 14px 18px;
  margin: 20px 0;
}

/* API Usage layout */
.admin-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.admin-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.admin-meta-line {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: -16px;
  margin-bottom: 24px;
}

/* Period filter bar */
.admin-topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-topbar-left::-webkit-scrollbar { display: none; }

.admin-period-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.admin-period-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 4px;
  white-space: nowrap;
}

.admin-period-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.admin-period-btn:hover  { color: var(--text-primary); border-color: rgba(255,255,255,0.2); }
.admin-period-btn.active {
  color: var(--text-primary);
  background: rgba(230,35,20,0.12);
  border-color: rgba(230,35,20,0.4);
  font-weight: 600;
}

/* Stat tile variants */
.admin-stat-tile--warn {
  border-color: rgba(251,146,60,0.3);
}
.admin-stat-tile--warn .admin-stat-tile-value { color: #fb923c; }

.admin-stat-tile--na {
  opacity: 0.45;
}
.admin-stat-tile--na .admin-stat-tile-value { font-size: 16px; color: var(--text-muted); }

/* Stripe notice */
.admin-stripe-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: -8px 0 24px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.admin-stripe-notice strong { color: var(--text-primary); }

/* 3-column layout for API usage */
.admin-three-col {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.5fr;
  gap: 20px;
  margin-top: 20px;
}

/* Users table enhancements */
.admin-row--banned td { opacity: 0.6; }

.admin-action-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.admin-action-btn:hover { opacity: 0.8; }
.admin-action-btn--red {
  background: rgba(248,113,113,0.1);
  border-color: rgba(248,113,113,0.3);
  color: #f87171;
}
.admin-action-btn--green {
  background: rgba(74,222,128,0.1);
  border-color: rgba(74,222,128,0.3);
  color: #4ade80;
}

/* Account status badges */
.admin-badge--acct-active  { color: #4ade80; background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.2); }
.admin-badge--acct-banned  { color: #f87171; background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); }

/* Audit log action badge aliases */
.admin-badge--ban        { color: #f87171; background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.25); }
.admin-badge--reactivate { color: #4ade80; background: rgba(74,222,128,0.1);  border-color: rgba(74,222,128,0.25); }

/* Modal */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.admin-modal {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  overflow: hidden;
}

.admin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.admin-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.admin-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}
.admin-modal-close:hover { color: var(--text-primary); }

.admin-modal-body {
  padding: 18px 20px;
}

.admin-modal-msg {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}
.admin-modal-msg strong { color: var(--text-primary); }
.admin-modal-msg em { font-style: normal; color: var(--text-primary); font-weight: 600; }

.admin-modal-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.admin-required { color: var(--red); }

.admin-modal-textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  padding: 10px 12px;
  resize: vertical;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.admin-modal-textarea:focus { border-color: rgba(255,255,255,0.25); }
.admin-modal-textarea::placeholder { color: var(--text-muted); }

.admin-modal-error {
  font-size: 12px;
  color: #f87171;
  margin-top: 8px;
}

.admin-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.admin-modal-cancel {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 13px;
  padding: 8px 16px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.admin-modal-cancel:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.25); }

.admin-modal-confirm {
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.admin-modal-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-modal-confirm--danger { background: var(--red); color: #fff; }
.admin-modal-confirm--safe   { background: #22c55e; color: #fff; }

@media (max-width: 760px) {
  .admin-topbar { padding: 10px 16px; }
  .admin-topbar-left { flex-wrap: wrap; }
  .admin-three-col { grid-template-columns: 1fr; }
  .admin-two-col { grid-template-columns: 1fr; }
  .admin-content { padding: 16px; }
  .admin-filter-input { width: 100%; max-width: none !important; }
  .admin-period-bar { flex-wrap: wrap; }
}

/* ── Settings Page ──────────────────────────────────────────────────────────── */
.settings-card {
  max-width: 600px;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.settings-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.settings-value {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.settings-divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* ── FAQ ────────────────────────────────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-item {
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius-sm);
  padding: 16px;
  border-left: 2px solid var(--accent);
}

.faq-q {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.faq-a {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Auth screen ────────────────────────────────────────────────────────────── */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  background-image: 
    radial-gradient(circle at 50% -20%, rgba(230, 35, 20, 0.1), transparent 50%),
    radial-gradient(circle at 50% 120%, rgba(212, 175, 55, 0.05), transparent 50%);
  animation: fadeIn 0.25s ease-out forwards;
}

.auth-screen-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: color 0.2s, background 0.2s;
}
.auth-screen-close:hover {
  color: var(--ink);
  background: var(--surface2);
}

.guest-signin-btn {
  padding: 7px 18px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #000;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.guest-signin-btn:hover {
  opacity: 0.88;
}

.vault-guest-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}
.vault-guest-notice h3 {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.vault-guest-notice p {
  font-size: 13px;
  margin: 0;
  max-width: 320px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 40px 32px;
  position: relative;
}

.auth-brand {
  justify-content: center;
  font-size: 20px;
  margin-bottom: 8px;
}

.auth-subtitle {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 32px;
}

.auth-tabs {
  display: flex;
  gap: 8px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s;
}

.auth-tab:hover:not(.active) {
  color: var(--ink);
  background: rgba(255,255,255,0.03);
}

.auth-tab.active {
  background: var(--surface2);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.auth-form { display: flex; flex-direction: column; }

.password-wrap { position: relative; display: flex; flex-direction: column; }
.password-wrap .field-input { padding-right: 44px; }
.field-label + .password-wrap { margin-top: 0; }
.password-wrap + .field-label,
#confirmGroup .field-label { margin-top: 16px; }

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}
.pw-toggle:hover { color: var(--ink); }

.remember-me-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.remember-me-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

.auth-error {
  margin-top: 16px;
  padding: 12px;
  background: rgba(230, 35, 20, 0.1);
  border: 1px solid rgba(230, 35, 20, 0.3);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 13px;
  text-align: center;
}
.auth-error.auth-success {
  background: rgba(54, 179, 126, 0.1);
  border-color: rgba(54, 179, 126, 0.32);
  color: #77d6a5;
}
.auth-link-btn {
  align-self: center;
  margin-top: 14px;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: #cbb786;
  font: 600 13px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  cursor: pointer;
}
.auth-link-btn:hover { color: #f3ddaa; text-decoration: underline; }
.password-reset-panel .auth-subtitle { margin-bottom: 22px; line-height: 1.55; }
.password-reset-panel #resetPasswordGroup { display: flex; flex-direction: column; }
.password-reset-panel #resetPasswordGroup.hidden { display: none; }
.password-reset-panel .auth-submit,
.auth-form .auth-submit { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Per-school completion cards ───────────────────────────────────────────── */
.school-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.school-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  animation: slideUpFade 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.school-card-spinner {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
  border-top-color: var(--ink);
  flex-shrink: 0;
}

.school-card-icon { flex-shrink: 0; }
.icon-green { color: var(--green); }
.icon-red { color: var(--red); }

.school-card-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 500;
}

.school-card-meta {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--subtle);
}

.school-card.is-done { border-color: rgba(52, 199, 89, 0.25); }
.school-card.is-done .school-card-meta { color: var(--green); }
.school-card.is-failed { border-color: rgba(230, 35, 20, 0.3); }
.school-card.is-failed .school-card-meta { color: var(--red); }
.school-card-source-btn {
  margin-left: auto; flex-shrink: 0;
  font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 5px; border: 1px solid var(--border2);
  color: var(--muted); background: transparent;
  text-decoration: none; transition: color .12s, border-color .12s;
  white-space: nowrap;
}
.school-card-source-btn:hover { color: var(--text1); border-color: var(--border1); }

/* ── Mobile layout ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .app-layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; flex-direction: row; border-right: none; border-bottom: 1px solid var(--border); padding: 12px 24px; align-items: center; }
  .sidebar-top { padding: 0; display: flex; align-items: center; width: 100%; justify-content: space-between; }
  .sidebar-brand { margin-bottom: 0; }
  .sidebar-nav { flex-direction: row; }
  .sidebar-bottom { flex-direction: row; padding: 0; margin: 0; border-top: none; }
  .nav-item { width: auto; padding: 8px 12px; }
  .lead-finder-grid { grid-template-columns: 1fr; }
  .topbar-status { display: none; }
}

/* ── Hero search (Lead Finder) ─────────────────────────────────────────────── */
/* Outer pill owns all visual state — background, border, glow, focus ring */
.hero-search-wrap {
  position: relative;
  max-width: 720px;
  margin: 0 auto 28px;
  border-radius: 9999px;
  background: var(--surface);
  border: 1px solid var(--border2);
  box-shadow:
    0 0 40px rgba(230, 35, 20, 0.22),
    0 0 90px rgba(230, 35, 20, 0.11);
  transition: border-color 0.2s ease, box-shadow 0.35s ease;
}

.hero-search-wrap:hover {
  border-color: var(--border1);
  box-shadow:
    0 0 52px rgba(230, 35, 20, 0.32),
    0 0 110px rgba(230, 35, 20, 0.16);
}

.hero-search-wrap:focus-within {
  border-color: rgba(230, 35, 20, 0.4);
  box-shadow:
    0 0 64px rgba(230, 35, 20, 0.48),
    0 0 140px rgba(230, 35, 20, 0.25);
}

.hero-search-icon {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--subtle);
  pointer-events: none;
  z-index: 2;
}

/* Inner input is fully invisible — the pill wrapper provides all visuals */
.hero-search-input {
  width: 100%;
  padding: 26px 136px 26px 66px;
  font-size: 20px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--ink);
  font-family: 'Outfit', sans-serif;
  display: block;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
}

.hero-search-input:hover,
.hero-search-input:focus {
  outline: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

/* ── Search focus mode: dim everything else, spotlight the search ───────────── */
body.search-focused .sidebar,
body.search-focused .topbar,
body.search-focused .progress-col,
body.search-focused .school-queue-section,
body.search-focused .run-btn,
body.search-focused .options-group,
body.search-focused .bulk-search-details {
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

body.search-focused .lead-finder-hero {
  transition: opacity 0.3s ease;
}

.hero-add-btn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  padding: 14px 26px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.hero-add-btn:hover { background: var(--accent-hover, #c81e13); }
.hero-add-btn:active { transform: translateY(-50%) scale(0.97); }

.school-queue-section {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: left;
}

.school-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.school-queue-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
}

.school-queue-empty {
  font-size: 13px;
  color: var(--subtle);
  padding: 14px 12px;
  text-align: center;
  border: 1px dashed var(--border2);
  border-radius: var(--radius-sm);
}

.school-queue-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border2);
  border-radius: var(--radius-pill);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.school-queue-chip:hover {
  border-color: rgba(230, 35, 20, 0.45);
  background: rgba(255, 255, 255, 0.04);
}

.school-queue-chip--locked {
  opacity: 0.6;
  border-color: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.school-queue-chip--locked:hover {
  transform: none;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.08);
}
.school-queue-lock-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.queue-trial-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 4px 0;
  text-transform: uppercase;
}
.queue-trial-divider::before,
.queue-trial-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(212, 175, 55, 0.2);
}

.trial-context-banner {
  background: rgba(212, 175, 55, 0.07);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-sm);
  color: var(--gold);
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 14px;
  margin-bottom: 20px;
  text-align: center;
}
.trial-context-banner strong {
  color: #fff;
  font-weight: 600;
}

.school-queue-chip-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.school-queue-chip-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  color: var(--subtle);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.school-queue-chip-remove:hover {
  color: var(--accent);
  background: rgba(230, 35, 20, 0.1);
}

.lead-finder-hero .run-btn {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.lead-finder-hero .options-group {
  max-width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.secondary-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.secondary-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.bulk-search-details {
  margin-top: 28px;
  text-align: left;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.bulk-search-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
  user-select: none;
}

.bulk-search-details summary::-webkit-details-marker { display: none; }

.bulk-search-details summary::before {
  content: '+ ';
  color: var(--accent);
}

.bulk-search-details[open] summary::before {
  content: '– ';
}

/* ── Upgrade card (out of credits) ───────────────────────────────────────────── */
.upgrade-card {
  text-align: center;
  padding: 32px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--gold-dim);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.06), transparent 60%), var(--surface);
}

.upgrade-card-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.upgrade-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}

.upgrade-card-subtitle {
  font-size: 14px;
  color: var(--muted);
  max-width: 380px;
  margin: 0 auto 24px;
  line-height: 1.5;
}

.upgrade-card-features {
  list-style: none;
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  text-align: left;
}

.upgrade-card-features li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  color: var(--ink);
}

.upgrade-card-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.upgrade-card-price {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 20px;
}

.upgrade-card-price span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--subtle);
  margin-top: 4px;
}

.upgrade-btn {
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--gold), #b8952e);
  color: #1a1400;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.upgrade-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.25);
}

.upgrade-btn:active { transform: translateY(0); }

.upgrade-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}

/* ── Stat tile variants ────────────────────────────────────────────────────── */
.stat-lbl-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.info-toggle-sm {
  width: 18px;
  height: 18px;
  padding: 0;
}

/* ── Accessibility score ───────────────────────────────────────────────────── */
.accessibility-pill {
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}

.accessibility-pill.score-easy { color: var(--green); background: rgba(52, 199, 89, 0.12); }
.accessibility-pill.score-moderate { color: var(--yellow); background: rgba(230, 180, 20, 0.12); }
.accessibility-pill.score-hard { color: var(--red); background: rgba(230, 35, 20, 0.12); }

.school-card-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  margin-right: 4px;
}

/* ── Top Recruiting Contacts ───────────────────────────────────────────────── */
.top-contacts {
  margin: 16px 0;
  animation: fadeIn 0.4s ease-out;
}

.top-contacts-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.top-contact-card {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.top-contact-card:hover {
  transform: translateY(-2px);
  border-color: var(--border2);
  background: rgba(255, 255, 255, 0.04);
}

.top-contact-name { font-weight: 700; color: var(--ink); font-size: 15px; letter-spacing: -0.01em; }
.top-contact-title { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.03em; }
.top-contact-school { font-size: 12px; color: var(--subtle); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.top-contact-email { font-size: 12px; color: var(--green); margin-top: 6px; word-break: break-all; }
.top-contact-email-none { color: var(--subtle); font-style: italic; }

/* ── Contact Vault accordion ───────────────────────────────────────────────── */
.vault-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vault-item {
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.vault-item.is-open { border-color: var(--muted); }

.vault-item-top {
  display: flex;
  align-items: center;
  background: var(--surface);
  transition: background 0.2s ease;
}

.vault-item-top:hover { background: var(--surface2); }

.vault-item-header {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  color: var(--ink);
}

.vault-item-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.vault-item-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vault-item-name {
  font-weight: 600;
  font-size: 14px;
}

.vault-item-updated {
  font-size: 11px;
  color: var(--subtle);
  font-weight: 400;
}

.vault-item-meta {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--subtle);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.vault-meta-dot { color: var(--border2); }
.vault-meta-good { color: var(--green); }
.vault-meta-warn { color: var(--yellow); }

.vault-item-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.vault-source-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--subtle);
  text-decoration: none;
  border: 1px solid var(--border2);
  border-radius: 20px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.vault-source-link:hover {
  color: var(--ink);
  border-color: var(--muted);
  background: var(--surface2);
}

.vault-source-link svg { flex-shrink: 0; }

.vault-school-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  color: var(--subtle);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.vault-school-delete:hover {
  color: var(--accent);
  background: rgba(230, 35, 20, 0.1);
}

.vault-chevron {
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vault-item.is-open .vault-chevron { transform: rotate(180deg); }

.vault-item-body {
  padding: 0 18px 16px;
  animation: fadeIn 0.25s ease-out;
}

.vault-contact-actions {
  width: 32px;
  text-align: right;
}

.vault-contact-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  color: var(--subtle);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.vault-contact-delete:hover {
  color: var(--accent);
  background: rgba(230, 35, 20, 0.1);
}

.vault-contact-delete:disabled {
  opacity: 0.4;
  cursor: default;
}

.email-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  background: transparent;
  border: none;
  color: var(--subtle);
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
  vertical-align: middle;
}

.email-copy-btn:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
}

.email-copy-btn.is-copied {
  color: var(--green);
  background: rgba(23, 178, 106, 0.12);
}

.x-profile-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.x-profile-link:hover {
  color: var(--accent);
  border-bottom-color: rgba(230, 35, 20, 0.45);
}

.vault-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  background: transparent;
  border: none;
  color: var(--subtle);
  cursor: grab;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

.vault-drag-handle:hover {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.vault-item.is-dragging {
  opacity: 0.65;
  transform: scale(0.985);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  z-index: 10;
  cursor: grabbing;
}

.vault-item.is-dragging .vault-drag-handle {
  cursor: grabbing;
}

.vault-item.drag-over {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(230, 35, 20, 0.15);
}

.priority-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: middle;
}

.priority-badge-high {
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--gold-dim);
}

.priority-badge-recommended {
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border2);
}

/* ── Phase 10 — Stripe / subscription UI ────────────────────────────────── */

/* Small upgrade button used in the Settings subscription row */
.upgrade-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .1s;
}
.upgrade-btn-sm:hover   { background: #c01d10; }
.upgrade-btn-sm:active  { transform: translateY(1px); }
.upgrade-btn-sm:disabled { opacity: .5; cursor: not-allowed; }

/* Settings row — right-side action area */
.settings-row-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Hint line under settings value (e.g., next renewal date) */
.settings-sub-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Subscription status colours in Settings */
.sub-status-active   { color: #4ade80; }
.sub-status-trial    { color: var(--muted); }
.sub-status-past-due { color: #f87171; }
.sub-status-cancelled { color: #94a3b8; }

/* Dev-mode notice shown when Stripe keys are missing */
.stripe-dev-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(234,179,8,.08);
  border: 1px solid rgba(234,179,8,.25);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: #fbbf24;
  line-height: 1.5;
  margin-top: 16px;
}
.stripe-dev-notice strong { display: block; margin-bottom: 2px; color: #fde68a; }

/* ── Admin Phase 9 additions ─────────────────────────────────────────────── */

/* Wider generic form modal */
.admin-modal--lg { max-width: 640px; }

/* Blue action button variant */
.admin-action-btn--blue {
  background: #2563eb22;
  color: #60a5fa;
  border: 1px solid #2563eb55;
}
.admin-action-btn--blue:hover { background: #2563eb44; }

/* Action cell — flex row of buttons in a table cell */
.admin-action-cell { display: flex; gap: 6px; flex-wrap: wrap; }

/* Required asterisk */
.admin-required { color: #f87171; margin-left: 2px; }

/* Form labels inside the modal body */
.admin-modal-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}

/* Textarea inside modals */
.admin-modal-textarea {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.admin-modal-textarea:focus { outline: none; border-color: var(--accent); }

/* Error text inside generic modal */
.admin-modal-error { color: #f87171; font-size: 13px; margin-top: 10px; }

/* Inline paragraph text in confirmation modals */
.admin-modal-msg { font-size: 14px; color: var(--text); line-height: 1.5; margin: 0 0 4px; }

/* 2-column grid for form fields */
.afm-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
@media (max-width: 520px) { .afm-grid-2 { grid-template-columns: 1fr; } }

/* Full-width input within the modal */
.afm-fullwidth { width: 100%; box-sizing: border-box; }

/* Inline row (e.g., field selector + delta input) */
.afm-row-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Credit display rows */
.afm-credit-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border2);
  font-size: 14px;
  color: var(--text);
}
.afm-credit-total {
  font-weight: 700;
  border-bottom: 2px solid var(--border2);
  padding-bottom: 10px;
}

/* Live preview text for credit adjustment */
.afm-credit-preview {
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
  min-height: 18px;
}

/* Divider inside modal body */
.afm-divider { border: none; border-top: 1px solid var(--border2); margin: 16px 0 12px; }

/* Source badges for contacts */
.admin-badge--src-official { background: #16423215; color: #4ade80; border: 1px solid #4ade8040; }
.admin-badge--src-manual   { background: #7c3aed15; color: #a78bfa; border: 1px solid #a78bfa40; }
.admin-badge--src-import   { background: #92400e15; color: #fbbf24; border: 1px solid #fbbf2440; }
.admin-badge--src-serpapi  { background: #1d4ed815; color: #60a5fa; border: 1px solid #60a5fa40; }
.admin-badge--src-cache    { background: #0f172a15; color: #94a3b8; border: 1px solid #94a3b840; }

/* Admin notes tooltip indicator */
.admin-notes-indicator {
  cursor: help;
  font-size: 12px;
  margin-left: 4px;
  opacity: 0.8;
}

/* ── Phase 11: Position prompt card ─────────────────────────────────────────── */
.position-prompt-card { border-color: var(--accent-border, #7c3aed40); }

.position-prompt-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.position-prompt-icon { font-size: 24px; flex-shrink: 0; line-height: 1; }
.position-prompt-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.position-prompt-sub   { font-size: 13px; color: var(--muted); margin: 0; }

.position-prompt-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.pos-check-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 7px 12px 7px 8px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--surface2);
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.pos-check-item:hover { border-color: var(--accent); }
.pos-check-item--disabled {
  opacity: .4; cursor: not-allowed; pointer-events: none;
}

.pos-check-input { position: absolute; opacity: 0; width: 0; height: 0; }

.pos-check-box {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border2);
  border-radius: 4px;
  background: var(--surface3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.pos-check-input:checked ~ .pos-check-box {
  background: var(--accent);
  border-color: var(--accent);
}
.pos-check-input:checked ~ .pos-check-box::after {
  content: "";
  width: 9px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  display: block;
}
.pos-check-item:has(.pos-check-input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface2));
}

.pos-check-code  { font-size: 12px; font-weight: 700; color: var(--text1); line-height: 1; }
.pos-check-label { font-size: 11px; color: var(--muted); line-height: 1; }

.position-prompt-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pos-save-error { font-size: 12px; color: var(--error, #f87171); }

/* ── Recommendation card ─────────────────────────────────────────────────────── */
/* Compact horizontal recommendation card */
.rec-contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface2));
}

.rec-contact-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

.rec-contact-divider {
  width: 1px;
  height: 28px;
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  flex-shrink: 0;
}

.rec-contact-title-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rec-contact-name {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.rec-contact-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.rec-contact-links {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-left: auto; flex-shrink: 0;
}
.rec-contact-email { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.rec-contact-email-none { font-size: 12px; color: var(--muted); }
.rec-contact-x { font-size: 12px; }

.rec-copy-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--muted);
  opacity: 0.7;
  border-radius: 3px;
  transition: opacity 0.15s;
}
.rec-copy-btn:hover { opacity: 1; }

/* ── Vault contact card grid ── */
.vault-contacts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px 0;
}
@media (max-width: 860px) {
  .vault-contacts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .vault-contacts-grid { grid-template-columns: 1fr; }
}

.vault-contact-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  transition: border-color .15s;
  position: relative;
}
.vault-contact-card:hover { border-color: var(--border2); }

.vault-cc-position {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.vault-cc-name {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.vault-cc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.vault-cc-divider {
  height: 1px;
  background: var(--glass-border);
}
.vault-cc-contacts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vault-cc-email-row,
.vault-cc-x-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  min-width: 0;
}
.vault-cc-email-text {
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.vault-cc-none { color: var(--subtle); font-size: 11px; font-style: italic; }
.vault-cc-x-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.vault-cc-x-link:hover { color: var(--accent); border-bottom-color: rgba(230,35,20,.4); }

.vault-cc-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

/* ── Vault sort bar ─────────────────────────────────────────────────────────── */
.vault-sort-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
  padding: 0 2px;
}

.vault-sort-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-light, #a78bfa);
  background: none;
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.vault-sort-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ── Phase 11: Settings position row ─────────────────────────────────────────── */
.pos-settings-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.pos-settings-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface3));
  color: var(--accent-light, #a78bfa);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.settings-pos-editor {
  padding: 14px 0 4px;
}
.settings-pos-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.muted-text { color: var(--muted); }

/* ── Phase 12: Use for Outreach button ─────────────────────────────────────── */
.use-outreach-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: var(--accent, #7c3aed);
  color: #fff;
  transition: background 0.15s, opacity 0.15s;
}
.use-outreach-btn:hover { background: color-mix(in srgb, var(--accent) 80%, #fff); }
.use-outreach-btn.is-active {
  background: #16a34a;
  cursor: default;
}
.use-outreach-btn.is-active:hover { background: #16a34a; }

/* ── Outreach-ready banner ──────────────────────────────────────────────────── */
.outreach-ready-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 16px;
  background: color-mix(in srgb, #16a34a 8%, var(--surface2));
  border: 1px solid color-mix(in srgb, #16a34a 30%, transparent);
  border-radius: 10px;
  color: #4ade80;
  font-size: 13px;
}
.outreach-ready-banner svg { flex-shrink: 0; }
.outreach-ready-text { flex: 1; line-height: 1.5; }
.outreach-ready-title { font-weight: 700; display: block; margin-bottom: 1px; }
.outreach-ready-sub { font-size: 12px; color: var(--muted); }
.outreach-clear-btn {
  background: none;
  border: 1px solid currentColor;
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s;
}
.outreach-clear-btn:hover { color: var(--text1); }

/* ── Athlete profile modal ──────────────────────────────────────────────────── */
.ap-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 20px;
}
.ap-modal {
  background: var(--surface1, #13131a);
  border: 1px solid var(--border1, #27272a);
  border-radius: 14px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.ap-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}
.ap-modal-title { font-size: 16px; font-weight: 700; margin: 0; }
.ap-modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--muted); line-height: 1;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; transition: background 0.15s;
}
.ap-modal-close:hover { background: var(--surface2); }

.ap-modal-body {
  overflow-y: auto;
  padding: 18px 22px;
  flex: 1;
}
.ap-modal-intro {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 18px;
  line-height: 1.5;
}

.ap-form-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 16px 0 8px;
}
.ap-form-group-label:first-child { margin-top: 0; }

.ap-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}
.ap-form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 480px) {
  .ap-form-row, .ap-form-row--3 { grid-template-columns: 1fr; }
}

.ap-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ap-form-field--full { grid-column: 1 / -1; }
.ap-field-label { font-size: 12px; font-weight: 600; color: var(--text2, #a1a1aa); }

.ap-input {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 13px;
  color: var(--text1);
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.ap-input:focus { border-color: var(--accent); }

.ap-pos-display {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.ap-pos-value { font-size: 13px; color: var(--muted); }

.ap-optional { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 11px; }

.ap-save-error { font-size: 12px; color: var(--error, #f87171); margin-top: 8px; display: block; }

.ap-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border2);
  flex-shrink: 0;
}

/* ── Settings: Recruiting Profile section ────────────────────────────────────── */
.settings-athlete-card { margin-top: 12px; }
.settings-athlete-card .card-title { margin-bottom: 0; }

.athlete-profile-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin-top: 12px;
}
@media (max-width: 560px) { .athlete-profile-fields { grid-template-columns: 1fr; } }

.athlete-profile-field { display: flex; flex-direction: column; gap: 3px; }
.athlete-profile-field-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.athlete-profile-field-value { font-size: 13px; color: var(--text1); }
.athlete-profile-field-empty { font-size: 13px; color: var(--muted); font-style: italic; }

.athlete-profile-actions { margin-top: 16px; display: flex; gap: 10px; }

/* ── Phase 12 Part 2: Outreach Contact Selector (OCS) ─────────────────────── */

/* "Select Contacts" / "Edit Contacts" button in the ready banner */
.outreach-contacts-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, #16a34a 50%, transparent);
  background: color-mix(in srgb, #16a34a 12%, transparent);
  color: #4ade80;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.outreach-contacts-btn:hover {
  background: color-mix(in srgb, #16a34a 22%, transparent);
  border-color: #4ade80;
}

/* ── OCS overlay ────────────────────────────────────────────────────────────── */
.ocs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9100;
  padding: 16px;
}

.ocs-modal {
  background: var(--surface1, #13131a);
  border: 1px solid var(--border1, #27272a);
  border-radius: 14px;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 28px 90px rgba(0,0,0,0.7);
  overflow: hidden;
}

/* ── OCS header ─────────────────────────────────────────────────────────────── */
.ocs-header {
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}
.ocs-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 12px;
  gap: 12px;
}
.ocs-header-left { display: flex; flex-direction: column; gap: 4px; }
.ocs-title { font-size: 16px; font-weight: 700; margin: 0; }
.ocs-tpl-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
  width: fit-content;
}
.ocs-close {
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--muted); line-height: 1;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; transition: background 0.15s; flex-shrink: 0;
}
.ocs-close:hover { background: var(--surface2); color: var(--text1); }

.ocs-step-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 14px;
}
.ocs-step {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.ocs-step.is-active {
  color: var(--accent, #7c3aed);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.ocs-step-arrow { font-size: 12px; color: var(--muted); }

/* ── OCS body (scrollable) ──────────────────────────────────────────────────── */
.ocs-body {
  overflow-y: auto;
  flex: 1;
}

.ocs-loading, .ocs-empty, .ocs-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}
.ocs-error { color: var(--error, #f87171); }

@keyframes ocs-spin {
  to { transform: rotate(360deg); }
}
.ocs-spin {
  animation: ocs-spin 1s linear infinite;
  color: var(--accent);
}

/* ── OCS school groups ──────────────────────────────────────────────────────── */
.ocs-school-list { padding: 8px 0; }

.ocs-school-group {
  border-bottom: 1px solid var(--border2);
  padding: 14px 20px;
}
.ocs-school-group:last-child { border-bottom: none; }

.ocs-school-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ocs-school-name { font-size: 14px; font-weight: 700; }
.ocs-school-meta { font-size: 12px; color: var(--muted); }
.ocs-meta-muted { color: var(--muted); }

.ocs-no-email-notice {
  font-size: 12px; color: var(--muted); font-style: italic; margin: 0 0 8px;
}

/* ── OCS coach rows ─────────────────────────────────────────────────────────── */
.ocs-coach-list { display: flex; flex-direction: column; gap: 2px; }

.ocs-coach-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}
.ocs-coach-row:not(.ocs-no-email):hover {
  background: var(--surface2);
}
.ocs-coach-row.is-checked {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.ocs-coach-row.ocs-recommended {
  background: color-mix(in srgb, #ca8a04 5%, transparent);
  border-color: color-mix(in srgb, #ca8a04 20%, transparent);
}
.ocs-coach-row.ocs-recommended.is-checked {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.ocs-coach-row.ocs-no-email {
  opacity: 0.5;
  cursor: default;
}
@keyframes ocs-dup-flash {
  0%, 100% { background: transparent; }
  30%       { background: color-mix(in srgb, #f87171 20%, transparent); border-color: #f87171; }
}
.ocs-coach-row.ocs-dup-flash {
  animation: ocs-dup-flash 0.9s ease;
}

.ocs-coach-check {
  width: 16px; height: 16px; flex-shrink: 0;
  accent-color: var(--accent);
}
.ocs-check-placeholder { width: 16px; height: 16px; flex-shrink: 0; }

.ocs-coach-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ocs-coach-name { font-size: 13px; font-weight: 600; }
.ocs-coach-title-txt { font-size: 11px; color: var(--muted); }
.ocs-rec-badge {
  font-size: 10px;
  font-weight: 700;
  color: #ca8a04;
  background: color-mix(in srgb, #ca8a04 12%, transparent);
  border-radius: 4px;
  padding: 2px 6px;
  display: inline-block;
  width: fit-content;
  margin-top: 2px;
}

.ocs-coach-email-tag {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ocs-noemail-tag {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  font-style: italic;
}

/* ── OCS multi-school warning ───────────────────────────────────────────────── */
.ocs-multi-warn {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, #f59e0b 8%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 25%, transparent);
  border-radius: 7px;
  font-size: 12px;
  color: #fbbf24;
  line-height: 1.4;
}
.ocs-multi-warn svg { flex-shrink: 0; margin-top: 1px; }

/* ── OCS footer ─────────────────────────────────────────────────────────────── */
.ocs-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border2);
  flex-shrink: 0;
}
.ocs-count { font-size: 13px; color: var(--muted); }

.ocs-review-btn {
  background: var(--accent, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ocs-review-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ocs-review-btn:not(:disabled):hover { opacity: 0.88; }

.ocs-back-btn {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text1);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.ocs-back-btn:hover { background: var(--surface2); }

.ocs-confirm-btn {
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ocs-confirm-btn:hover { opacity: 0.88; }

/* ── OCS Step 2 review ──────────────────────────────────────────────────────── */
.ocs-review-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 20px 0;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.ocs-review-notice svg { flex-shrink: 0; margin-top: 1px; }
.ocs-review-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 20px 0;
  padding: 10px 14px;
  background: color-mix(in srgb, #f59e0b 8%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 25%, transparent);
  border-radius: 8px;
  font-size: 12px;
  color: #fbbf24;
  line-height: 1.5;
}
.ocs-review-warn svg { flex-shrink: 0; margin-top: 1px; }

.ocs-review-list { padding: 12px 20px 8px; display: flex; flex-direction: column; gap: 6px; }

.ocs-review-school-group { display: flex; flex-direction: column; gap: 4px; }
.ocs-review-school-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 8px 0 3px;
  border-top: 1px solid var(--border2);
  margin-top: 4px;
}
.ocs-review-school-group:first-child .ocs-review-school-label {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.ocs-review-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
}
.ocs-review-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.ocs-review-name  { font-size: 13px; font-weight: 600; }
.ocs-review-title { font-size: 11px; color: var(--muted); }
.ocs-review-email { font-size: 11px; color: var(--accent, #7c3aed); font-style: italic; }

.ocs-remove-btn {
  background: none;
  border: 1px solid var(--border2);
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.ocs-remove-btn:hover { color: #f87171; border-color: #f87171; }

/* ── Phase 13: Outreach Tab ──────────────────────────────────────────────────── */

/* Loading / empty / error */
.oc-loading {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 64px 24px; font-size: 14px; color: var(--muted);
}
@keyframes oc-spin { to { transform: rotate(360deg); } }
.oc-spin { animation: oc-spin 1s linear infinite; color: var(--accent); }
.oc-error { color: var(--error,#f87171); padding: 24px; font-size: 14px; }
.oc-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 72px 24px; text-align: center; color: var(--muted);
}
.oc-empty svg { opacity: 0.35; }
.oc-empty-title { font-size: 16px; font-weight: 700; color: var(--text1); }
.oc-empty-sub { font-size: 13px; max-width: 380px; line-height: 1.6; }
.oc-cta-btn {
  margin-top: 4px; padding: 10px 24px; border-radius: 8px;
  background: var(--accent,#7c3aed); color: #fff; border: none;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.oc-cta-btn:hover { opacity: .88; }

/* List view */
.oc-list-body { max-width: 780px; }
.oc-section { margin-bottom: 28px; }
.oc-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.oc-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0; }
.oc-archived-summary { cursor: pointer; list-style: none; }
.oc-archived-summary::-webkit-details-marker { display: none; }
.oc-new-btn {
  font-size: 12px; font-weight: 700; padding: 5px 12px;
  border-radius: 7px; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--text1);
  cursor: pointer; transition: background .15s;
}
.oc-new-btn:hover { background: var(--surface1); }
.oc-queue-list { display: flex; flex-direction: column; gap: 10px; }

/* Queue card */
.oc-queue-card {
  background: var(--surface1); border: 1px solid var(--border1);
  border-radius: 12px; padding: 16px 18px 14px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.oc-queue-card:hover { border-color: var(--border2); background: var(--surface2); }
.oc-qcard-body { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.oc-qcard-info { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.oc-qcard-name { font-size: 14px; font-weight: 700; }
.oc-qcard-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oc-tpl-chip {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 4px; background: var(--surface2); border: 1px solid var(--border2);
  color: var(--muted);
}
.oc-qcard-date { font-size: 11px; color: var(--muted); }
.oc-qcard-stats { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.oc-stat-pill {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 20px; white-space: nowrap;
}
.oc-sp-sent    { background: color-mix(in srgb,#16a34a 12%,transparent); color: #4ade80; border: 1px solid color-mix(in srgb,#16a34a 25%,transparent); }
.oc-sp-ready   { background: color-mix(in srgb,#3b82f6 10%,transparent); color: #60a5fa; border: 1px solid color-mix(in srgb,#3b82f6 25%,transparent); }
.oc-sp-opened  { background: color-mix(in srgb,#f59e0b 10%,transparent); color: #fbbf24; border: 1px solid color-mix(in srgb,#f59e0b 25%,transparent); }
.oc-sp-total   { font-size: 11px; color: var(--muted); }
.oc-qcard-footer { display: flex; align-items: center; gap: 12px; }
.oc-prog-bar { flex: 1; height: 5px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
.oc-prog-fill { height: 100%; background: #16a34a; border-radius: 3px; transition: width .3s; min-width: 3px; }
.oc-open-queue-btn {
  font-size: 12px; font-weight: 700; padding: 5px 13px;
  border-radius: 7px; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--text1);
  cursor: pointer; white-space: nowrap; transition: background .15s;
}
.oc-open-queue-btn:hover { background: var(--surface1); }

/* Queue shell layout */
.oc-queue-shell {
  display: flex; flex-direction: column;
  height: calc(100vh - 56px); /* topbar height */
  overflow: hidden;
}

/* Queue top bar */
.oc-queue-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}
.oc-back-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: none; border: none; cursor: pointer; padding: 4px 0;
  white-space: nowrap; transition: color .15s;
}
.oc-back-btn:hover { color: var(--text1); }
.oc-qname-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 15px; font-weight: 700; color: var(--text1);
  padding: 4px 6px; border-radius: 6px; transition: background .15s;
  min-width: 0;
}
.oc-qname-input:hover, .oc-qname-input:focus { background: var(--surface2); }
.oc-topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.oc-updated-txt { font-size: 11px; color: var(--muted); white-space: nowrap; }
.oc-archive-btn {
  font-size: 11px; font-weight: 600; padding: 4px 11px;
  border-radius: 6px; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--muted); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.oc-archive-btn:hover { color: #f87171; border-color: #f87171; }

/* Progress strip */
.oc-prog-strip {
  display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}
.oc-prog-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px; padding: 8px 20px; border-right: 1px solid var(--border2);
}
.oc-prog-item:last-child { border-right: none; }
.oc-prog-sep { opacity: .5; }
.oc-prog-num { font-size: 18px; font-weight: 800; line-height: 1; }
.oc-prog-lbl { font-size: 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.oc-pn-ready   { color: #60a5fa; }
.oc-pn-opened  { color: #fbbf24; }
.oc-pn-sent    { color: #4ade80; }
.oc-pn-skipped { color: var(--muted); }

/* Body split: list + editor */
.oc-body { display: flex; flex: 1; overflow: hidden; }
.oc-draft-list {
  width: 220px; flex-shrink: 0;
  border-right: 1px solid var(--border2);
  overflow-y: auto; padding: 8px 0;
}
.oc-draft-editor { flex: 1; overflow-y: auto; }

/* Draft list items */
.oc-draft-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s, border-color .12s;
}
.oc-draft-item:hover { background: var(--surface2); }
.oc-draft-item.is-active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-left-color: var(--accent);
}
.oc-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.oc-dot-ready   { background: #3b82f6; }
.oc-dot-opened  { background: #f59e0b; }
.oc-dot-sent    { background: #16a34a; }
.oc-dot-skipped { background: var(--muted); opacity: .5; }
.oc-draft-item-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; }
.oc-di-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-di-school { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Draft editor pane */
.oc-editor-empty {
  padding: 48px 24px; font-size: 13px; color: var(--muted); text-align: center;
}
.oc-editor-inner { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; max-width: 660px; }
.oc-editor-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.oc-editor-who { display: flex; flex-direction: column; gap: 2px; }
.oc-editor-coach { font-size: 16px; font-weight: 700; }
.oc-editor-sub-info { font-size: 12px; color: var(--muted); }

.oc-status-badge {
  font-size: 11px; font-weight: 700; padding: 3px 10px;
  border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}
.oc-badge-ready   { background: color-mix(in srgb,#3b82f6 12%,transparent); color: #60a5fa; border: 1px solid color-mix(in srgb,#3b82f6 30%,transparent); }
.oc-badge-opened  { background: color-mix(in srgb,#f59e0b 12%,transparent); color: #fbbf24; border: 1px solid color-mix(in srgb,#f59e0b 30%,transparent); }
.oc-badge-sent    { background: color-mix(in srgb,#16a34a 12%,transparent); color: #4ade80; border: 1px solid color-mix(in srgb,#16a34a 30%,transparent); }
.oc-badge-skipped { background: var(--surface2); color: var(--muted); border: 1px solid var(--border2); }

.oc-missing-warn {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 12px; border-radius: 8px;
  background: color-mix(in srgb,#f59e0b 8%,transparent);
  border: 1px solid color-mix(in srgb,#f59e0b 25%,transparent);
  font-size: 12px; color: #fbbf24; line-height: 1.5;
}
.oc-missing-warn svg { flex-shrink: 0; margin-top: 1px; }
.oc-missing-warn code {
  background: color-mix(in srgb,#f59e0b 15%,transparent);
  border-radius: 3px; padding: 0 4px; font-size: 11px;
}

/* Editor fields */
.oc-editor-field { display: flex; flex-direction: column; gap: 5px; }
.oc-field-lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.oc-field-input {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 8px; padding: 9px 12px; font-size: 13px;
  color: var(--text1); outline: none; transition: border-color .15s; width: 100%;
}
.oc-field-input:focus { border-color: var(--accent); }
.oc-field-textarea {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 8px; padding: 10px 12px; font-size: 13px;
  color: var(--text1); outline: none; transition: border-color .15s;
  resize: vertical; width: 100%; font-family: inherit; line-height: 1.55;
}
.oc-field-textarea:focus { border-color: var(--accent); }
.oc-input-row { display: flex; gap: 6px; align-items: flex-start; }
.oc-input-row .oc-field-input { flex: 1; }
.oc-msg-row { align-items: flex-start; }
.oc-msg-row .oc-field-textarea { flex: 1; }
.oc-copy-btn {
  padding: 8px 9px; border-radius: 7px; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--muted); cursor: pointer;
  flex-shrink: 0; transition: color .15s, border-color .15s;
}
.oc-copy-btn:hover { color: var(--text1); border-color: var(--border1); }
.oc-copy-msg { align-self: flex-start; margin-top: 0; }

/* Editor action buttons */
.oc-editor-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px;
}
.oc-gmail-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 8px; border: none;
  background: #d93025; color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.oc-gmail-btn:hover { opacity: .88; }
.oc-status-actions { display: flex; gap: 8px; }
.oc-action-btn {
  padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--text1);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.oc-mark-sent  { border-color: color-mix(in srgb,#16a34a 40%,transparent); color: #4ade80; }
.oc-mark-sent:hover  { background: color-mix(in srgb,#16a34a 12%,transparent); }
.oc-mark-skip  { border-color: var(--border2); color: var(--muted); }
.oc-mark-skip:hover  { color: var(--text1); background: var(--surface1); }
.oc-mark-ready { border-color: color-mix(in srgb,#3b82f6 40%,transparent); color: #60a5fa; }
.oc-mark-ready:hover { background: color-mix(in srgb,#3b82f6 12%,transparent); }
.oc-next-btn {
  margin-left: auto; padding: 8px 18px; border-radius: 8px;
  background: var(--accent,#7c3aed); color: #fff; border: none;
  font-size: 12px; font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.oc-next-btn:hover { opacity: .88; }
.oc-save-hint { font-size: 11px; color: var(--muted); margin: 0; padding-top: 2px; }

/* ── page-view height fix for Outreach queue view ───────────────────────────── */
#pageOutreach.page-view {
  padding: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* List view needs normal padding back */
#pageOutreach .oc-list-body,
#pageOutreach .page-header {
  padding-left: 24px;
  padding-right: 24px;
}
#pageOutreach .page-header {
  padding-top: 24px;
  padding-bottom: 0;
}

/* ── X DM Outreach additions ──────────────────────────────────────────────── */

/* X handle tag in OCS selector */
.ocs-x-tag {
  background: color-mix(in srgb,#1d9bf0 12%,transparent) !important;
  color: #60caff !important;
  border-color: color-mix(in srgb,#1d9bf0 30%,transparent) !important;
}
.ocs-x-tag-sm {
  font-size: 11px; color: #60caff;
}

/* Queue type chip (X DM badge on cards) */
.oc-type-chip {
  font-size: 10px; font-weight: 800; padding: 2px 7px;
  border-radius: 4px; letter-spacing: .04em; text-transform: uppercase;
}
.oc-type-x {
  background: color-mix(in srgb,#1d9bf0 15%,transparent);
  color: #60caff;
  border: 1px solid color-mix(in srgb,#1d9bf0 35%,transparent);
}

/* Queue-type badge in progress strip */
.oc-queue-type-badge {
  font-size: 10px; font-weight: 800; padding: 2px 9px;
  border-radius: 4px; letter-spacing: .05em; text-transform: uppercase;
  align-self: center; margin-left: 8px;
}
.oc-qtb-x {
  background: color-mix(in srgb,#1d9bf0 15%,transparent);
  color: #60caff;
  border: 1px solid color-mix(in srgb,#1d9bf0 35%,transparent);
}

/* Unable stat pill */
.oc-sp-unable {
  background: color-mix(in srgb,#f87171 10%,transparent);
  color: #f87171;
  border: 1px solid color-mix(in srgb,#f87171 25%,transparent);
}

/* Unable dot in draft list */
.oc-dot-unable { background: #f87171; opacity: .7; }

/* Unable progress number */
.oc-pn-unable { color: #f87171; }

/* Unable badge */
.oc-badge-unable {
  background: color-mix(in srgb,#f87171 12%,transparent);
  color: #f87171;
  border: 1px solid color-mix(in srgb,#f87171 30%,transparent);
}

/* X handle row in editor */
.oc-x-handle-row {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 8px;
  background: color-mix(in srgb,#1d9bf0 8%,transparent);
  border: 1px solid color-mix(in srgb,#1d9bf0 20%,transparent);
  font-size: 13px; font-weight: 600;
  color: #60caff;
}
.oc-x-handle-link {
  color: #60caff; text-decoration: none; font-weight: 700;
}
.oc-x-handle-link:hover { text-decoration: underline; }
.oc-x-handle-missing { color: var(--muted); font-weight: 400; }

/* Copy DM & Open X button */
.oc-x-open-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 8px; border: none;
  background: #1d9bf0; color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.oc-x-open-btn:hover { opacity: .88; }

/* Unable to DM button */
.oc-mark-unable {
  border-color: color-mix(in srgb,#f87171 40%,transparent);
  color: #f87171;
}
.oc-mark-unable:hover { background: color-mix(in srgb,#f87171 10%,transparent); }

/* Open Email App button (mailto fallback) */
.oc-mailto-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--border2);
  background: var(--surface2); color: var(--text1);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.oc-mailto-btn:hover { background: var(--surface1); }

/* X paste hint */
.oc-x-paste-hint {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 8px;
  background: color-mix(in srgb,#1d9bf0 8%,transparent);
  border: 1px solid color-mix(in srgb,#1d9bf0 20%,transparent);
  font-size: 12px; color: #60caff; margin: 0;
  transition: opacity .3s;
}
.oc-x-paste-hint.hidden { display: none; }

/* ── Phase 14: Outreach landing & Templates sub-view ─────────────────────── */

/* Give the page back normal scroll when showing landing/templates */
#pageOutreach .oc-landing,
#pageOutreach .oc-tpl-subview {
  overflow-y: auto;
  height: 100%;
}

/* Landing header */
.oc-landing {
  max-width: 820px;
  padding: 32px 28px 48px;
}
.oc-landing-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 36px; flex-wrap: wrap;
}
.oc-landing-title-block { flex: 1; min-width: 220px; }
.oc-landing-title {
  font-size: 26px; font-weight: 800; color: var(--text1);
  margin: 0 0 6px;
}
.oc-landing-sub {
  font-size: 14px; color: var(--muted); margin: 0; line-height: 1.5;
}
.oc-landing-ctas {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}

/* Primary red CTA */
.oc-start-btn {
  padding: 9px 20px; border-radius: 8px; border: none;
  background: var(--accent, #dc2626); color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity .15s;
  white-space: nowrap;
}
.oc-start-btn:hover { opacity: .88; }

/* Secondary outlined button */
.oc-manage-tpl-btn {
  padding: 8px 18px; border-radius: 8px;
  border: 1px solid var(--border2);
  background: transparent; color: var(--text1);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s;
  white-space: nowrap;
}
.oc-manage-tpl-btn:hover { background: var(--surface2); }

/* Saved Outreach section */
.oc-saved-section { }
.oc-saved-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin: 0 0 14px;
}

/* Campaign rows */
.oc-cr-list { display: flex; flex-direction: column; gap: 2px; }
.oc-cr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: 10px; gap: 16px;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.oc-cr:hover { background: var(--surface2); border-color: var(--border1); }

.oc-cr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

/* Type chip */
.oc-cr-type-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; padding: 3px 9px;
  border-radius: 5px;
  background: var(--surface2); color: var(--text1);
  border: 1px solid var(--border1);
}
.oc-cr-chip-x {
  background: color-mix(in srgb,#1d9bf0 12%,transparent);
  color: #60caff;
  border-color: color-mix(in srgb,#1d9bf0 30%,transparent);
}

/* Stats row */
.oc-cr-stats-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text2);
}
.oc-cr-dot { color: var(--muted); }
.oc-cr-progress { color: var(--text1); font-weight: 600; }

/* Dates row */
.oc-cr-dates-row { font-size: 11px; color: var(--muted); }

/* Actions column */
.oc-cr-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.oc-continue-btn {
  padding: 7px 16px; border-radius: 7px;
  border: 1px solid var(--border2);
  background: var(--surface2); color: var(--text1);
  font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s;
  white-space: nowrap;
}
.oc-continue-btn:hover { background: var(--surface1); }

.oc-archived-badge {
  font-size: 11px; font-weight: 600; color: var(--muted);
  padding: 3px 8px; border-radius: 5px;
  background: var(--surface2); border: 1px solid var(--border1);
}

/* Three-dot trigger */
.oc-dot-trigger {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
  border: 1px solid transparent;
  background: transparent; color: var(--muted);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.oc-dot-trigger:hover { background: var(--surface2); border-color: var(--border1); color: var(--text1); }

/* Three-dot floating menu */
.oc-dot-menu {
  position: fixed; z-index: 9999;
  min-width: 160px; padding: 5px;
  background: var(--surface2, #1e1e2e);
  border: 1px solid var(--border2);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.oc-dot-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border-radius: 6px; border: none;
  background: transparent; color: var(--text1);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .12s;
}
.oc-dot-item:hover { background: var(--surface1); }

/* Empty state */
.oc-empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 64px 24px; text-align: center; color: var(--muted);
}
.oc-empty-state svg { opacity: 0.3; }

/* Archived section */
.oc-archived-section { margin-top: 24px; }
.oc-archived-summary {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); cursor: pointer; list-style: none; padding: 8px 0;
  user-select: none;
}
.oc-archived-summary::-webkit-details-marker { display: none; }
.oc-cr-list-archived { margin-top: 8px; opacity: .7; }

/* ── Outreach Home (Drafts redesign) ────────────────────────────────────── */
#pageOutreach .od-home { overflow-y: auto; height: 100%; }
.od-home { max-width: 860px; padding: 32px 28px 80px; }

.od-home-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 36px;
}
.od-home-title { font-size: 26px; font-weight: 800; color: var(--text1); margin: 0; }

.od-section { margin-bottom: 40px; }
.od-section-lbl {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin: 0 0 14px;
}

/* ── Outreach type cards ── */
.od-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.od-type-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 14px; border-radius: 12px;
  background: var(--surface2); border: 1px solid var(--border1);
  cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
  outline: none;
}
.od-type-card:hover  { background: var(--surface1); border-color: var(--border2); transform: translateY(-1px); }
.od-type-card:active { transform: translateY(0); }
.od-type-card:focus-visible { border-color: var(--accent); }
.od-type-top { display: flex; align-items: center; justify-content: space-between; }
.od-type-icon { color: var(--text2); flex-shrink: 0; }
.od-type-badge {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  background: rgba(255,255,255,.06); color: var(--muted); border: 1px solid var(--border1);
  white-space: nowrap;
}
.od-type-badge-x {
  background: color-mix(in srgb,#1d9bf0 12%,transparent);
  color: #60caff;
  border-color: color-mix(in srgb,#1d9bf0 30%,transparent);
}
.od-type-name { font-size: 14px; font-weight: 700; color: var(--text1); }
.od-type-desc { font-size: 12px; color: var(--text2); line-height: 1.5; }

/* ── Empty state ── */
.od-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 48px 24px; text-align: center; color: var(--muted);
  border: 1px dashed var(--border2); border-radius: 12px;
}
.od-empty svg { opacity: .3; }
.od-empty-title { font-size: 15px; font-weight: 700; color: var(--text1); margin: 0; }
.od-empty-sub   { font-size: 13px; max-width: 380px; line-height: 1.6; margin: 0; }

/* ── Draft cards grid ── */
.od-drafts-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: start;
}
.od-drafts-list--done { margin-top: 10px; }
@media (max-width: 860px) {
  .od-drafts-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .od-drafts-list { grid-template-columns: 1fr; }
}

/* Individual draft card — vertical grid card */
.od-draft-card {
  display: flex; flex-direction: column;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 14px; overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.od-draft-card:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.od-draft-card--active {
  border-color: rgba(230, 35, 20, 0.4);
  background: color-mix(in srgb, var(--accent) 5%, var(--glass-bg));
}

/* Sub-card inside a group */
.od-draft-card--sub {
  border-radius: 10px; background: var(--surface);
  border-color: var(--glass-border);
}
.od-draft-card--sub:hover { border-color: rgba(230,35,20,0.25); transform: none; box-shadow: none; }

/* Card top: logo + name + dot menu */
.od-card-top {
  display: flex; align-items: flex-start;
  gap: 10px; padding: 16px 14px 12px;
}
.od-card-logo { flex-shrink: 0; }
.od-card-title-block { flex: 1; min-width: 0; }
.od-card-school {
  font-size: 14px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.od-card-type { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Card middle: status + progress + time */
.od-card-middle {
  display: flex; flex-direction: column; gap: 5px;
  padding: 0 14px 12px;
  flex: 1;
}
.od-card-progress { font-size: 12px; color: var(--text2); }
.od-card-time     { font-size: 11px; color: var(--muted); }

/* Card bottom: actions row */
.od-card-bottom {
  display: flex; align-items: center;
  gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--glass-border);
  margin-top: auto;
}

/* Status badges */
.od-status {
  font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 5px; white-space: nowrap; display: inline-block;
}
.od-status-draft    { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid var(--glass-border); }
.od-status-progress { background: rgba(251,191,36,.1);  color: #f59e0b;       border: 1px solid rgba(251,191,36,.25); }
.od-status-done     { background: rgba(52,199,89,.1);   color: var(--green);  border: 1px solid rgba(52,199,89,.25); }

/* Continue button */
.od-continue-btn {
  flex: 1; padding: 7px 12px; border-radius: 7px;
  background: var(--accent); color: #fff; border: none;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: opacity .15s; white-space: nowrap; text-align: center;
}
.od-continue-btn:hover { opacity: .88; }

/* Expand/collapse row */
.od-expand-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 0; margin: 0;
  background: transparent; border: none;
  color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer;
  transition: color .12s; text-align: left; white-space: nowrap; flex-shrink: 0;
}
.od-expand-btn:hover { color: var(--text2); }
.od-expand-icon { flex-shrink: 0; transition: transform .18s ease; }

/* Expanded recipients */
.od-recipients {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--glass-border);
  animation: fadeIn 0.15s ease-out;
}
.od-recipient-row {
  display: flex; align-items: baseline; gap: 6px;
  padding: 3px 0; font-size: 12px;
}
.od-recipient-name  { color: var(--text2); font-weight: 500; }
.od-recipient-sep   { color: var(--muted); }
.od-recipient-title { color: var(--muted); font-size: 11px; }

/* Multi-school group — spans full width in grid */
.od-draft-group {
  grid-column: 1 / -1;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 14px; overflow: hidden;
}
.od-group-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--glass-border);
}
.od-group-left  { display: flex; align-items: center; gap: 10px; min-width: 0; }
.od-group-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.od-group-name  { font-size: 14px; font-weight: 700; color: var(--ink); }
.od-group-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.od-group-schools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px; padding: 12px;
}
@media (max-width: 860px) {
  .od-group-schools { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .od-group-schools { grid-template-columns: 1fr; }
}

/* Completed collapsible */
.od-completed-wrap { margin-top: 32px; }
.od-completed-summary {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); cursor: pointer; list-style: none;
  padding: 6px 0; user-select: none;
}
.od-completed-summary::-webkit-details-marker { display: none; }
.od-completed-wrap[open] .od-completed-summary { color: var(--text2); }

/* Templates sub-view */
.oc-tpl-subview {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
}
.oc-tpl-subview-hdr {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border1);
  flex-shrink: 0;
}
.oc-tpl-subview-title {
  font-size: 18px; font-weight: 800; color: var(--text1); margin: 0;
}
.oc-back-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 7px;
  border: 1px solid var(--border1);
  background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
  white-space: nowrap;
}
.oc-back-btn:hover { background: var(--surface2); color: var(--text1); }

/* Playbook inside templates sub-view needs to fill the remaining height */
.oc-tpl-subview .playbook {
  flex: 1; overflow: hidden;
}

/* ── 3-Step Outreach Flow ─────────────────────────────────────────────────── */

/* Page container fills pageOutreach */
#pageOutreach .oflow-page {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
}
#pageOutreach .oflow-page-s2 {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
}

/* Shared page header (back + step bar) */
.oflow-page-hdr {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 24px 14px; border-bottom: 1px solid var(--border1);
  flex-shrink: 0;
}

/* Step indicator */
.oflow-steps {
  display: flex; align-items: center; gap: 8px; flex: 1;
  justify-content: center;
}
.oflow-step {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 4px 10px; border-radius: 20px;
}
.oflow-step-active {
  color: var(--text1);
  background: color-mix(in srgb, var(--accent, #dc2626) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #dc2626) 30%, transparent);
}
.oflow-step-done { color: #4ade80; }
.oflow-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface2); font-size: 11px; font-weight: 800;
}
.oflow-step-active .oflow-step-num {
  background: var(--accent, #dc2626); color: #fff;
}
.oflow-step-check { flex-shrink: 0; }
.oflow-step-sep { color: var(--muted); font-size: 12px; opacity: .5; }

/* Step 1 — scrollable content + sticky footer */
.oflow-page-scroll {
  flex: 1; overflow-y: auto; padding: 28px 28px 16px;
}
.oflow-page-footer {
  flex-shrink: 0; padding: 16px 28px;
  border-top: 1px solid var(--border1);
  background: var(--bg, #0f0f13);
  display: flex; justify-content: flex-end;
}
.oflow-footer-btn {
  min-width: 180px;
}
.oflow-footer-btn:disabled {
  opacity: .38; cursor: not-allowed;
}

/* Page title */
.oflow-page-title {
  font-size: 22px; font-weight: 800; color: var(--text1); margin: 0 0 20px;
}

/* Template card grid */
.oflow-tpl-grid {
  display: flex; flex-direction: column; gap: 8px; max-width: 640px;
}
.oflow-tpl-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 10px;
  border: 1.5px solid var(--border1);
  background: var(--surface2);
  cursor: pointer; transition: border-color .15s, background .15s;
  outline: none;
}
.oflow-tpl-card:hover { border-color: var(--border2); background: var(--surface1); }
.oflow-tpl-card:focus-visible { box-shadow: 0 0 0 2px var(--accent, #dc2626); }
.oflow-tpl-card.is-selected {
  border-color: var(--accent, #dc2626);
  background: color-mix(in srgb, var(--accent, #dc2626) 6%, var(--surface2));
}

/* Checkmark circle */
.oflow-tpl-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border2);
  background: transparent; transition: background .15s, border-color .15s;
  color: #fff;
}
.oflow-tpl-card.is-selected .oflow-tpl-check {
  background: var(--accent, #dc2626); border-color: var(--accent, #dc2626);
}

/* Card body */
.oflow-tpl-card-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.oflow-tpl-card-name { font-size: 14px; font-weight: 700; color: var(--text1); }
.oflow-tpl-card-usage { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* Type badge */
.oflow-tpl-badge {
  flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 3px 9px;
  border-radius: 5px; display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface1); color: var(--text2);
  border: 1px solid var(--border1);
}
.oflow-tpl-badge-x {
  background: color-mix(in srgb,#1d9bf0 12%,transparent);
  color: #60caff;
  border-color: color-mix(in srgb,#1d9bf0 30%,transparent);
}

/* ── Step 2 ── */

.oflow-s2-scroll {
  flex: 1; overflow-y: auto;
}
.oflow-s2-inner {
  max-width: 680px; padding: 24px 28px 100px;
}
/* Controls row: search + role filters side-by-side */
.oflow-controls-row {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px;
}
.oflow-filter-wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.oflow-filter-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); flex-shrink: 0;
}
.oflow-role-chip {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
  border: 1px solid var(--border2); background: var(--surface2);
  color: var(--text2); cursor: pointer; transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.oflow-role-chip:hover { border-color: var(--border2); background: rgba(255,255,255,.06); }
.oflow-role-chip--on {
  background: color-mix(in srgb,var(--accent,#dc2626) 15%,transparent);
  border-color: color-mix(in srgb,var(--accent,#dc2626) 40%,transparent);
  color: var(--accent,#dc2626);
}
.oflow-filter-clear {
  font-size: 11px; font-weight: 500; padding: 4px 8px; border-radius: 20px;
  border: none; background: transparent; color: var(--muted);
  cursor: pointer; transition: color .12s;
}
.oflow-filter-clear:hover { color: var(--text2); }

/* Search bar */
.oflow-search-wrap {
  position: relative;
}
.oflow-search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.oflow-search-input {
  width: 100%; padding: 10px 14px 10px 36px;
  border-radius: 8px; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--text1);
  font-size: 13px; outline: none; box-sizing: border-box;
  transition: border-color .15s;
}
.oflow-search-input:focus { border-color: var(--accent, #dc2626); }
.oflow-search-input::placeholder { color: var(--muted); }

/* Position bar */
.oflow-pos-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.oflow-pos-bar-text { font-size: 13px; color: var(--muted); }
.oflow-pos-bar-name { color: var(--text1); font-weight: 600; }
.oflow-pos-bar-empty { font-style: italic; }
.oflow-pos-change-btn {
  font-size: 12px; font-weight: 500; color: var(--accent, #dc2626);
  background: none; border: none; padding: 4px 8px; cursor: pointer;
  border-radius: 5px; transition: opacity .15s; flex-shrink: 0;
  text-decoration: none;
}
.oflow-pos-change-btn:hover { opacity: .75; }
.oflow-pos-counter {
  font-size: 12px; color: var(--muted); margin: 10px 0 0; text-align: right;
}

/* No results */
.oflow-no-results { font-size: 13px; color: var(--muted); padding: 20px 0; }

/* School list */
.oflow-school-list { display: flex; flex-direction: column; gap: 2px; }

/* School item */
.oflow-school-item {
  border: 1px solid transparent; border-radius: 10px;
  transition: border-color .15s;
  overflow: hidden;
}
.oflow-school-item:has(.oflow-school-expanded:not(.hidden)) {
  border-color: var(--border1);
  background: var(--surface2);
}

/* Collapsed header */
.oflow-school-collapsed {
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px; height: 58px; cursor: pointer;
  border-radius: 10px;
  transition: background .15s;
}
.oflow-school-collapsed:hover { background: var(--surface2); }
.oflow-school-item:has(.oflow-school-expanded:not(.hidden)) .oflow-school-collapsed {
  border-bottom: 1px solid var(--border1);
  border-radius: 10px 10px 0 0;
  background: transparent;
}

/* School logo */
.oflow-school-logo-wrap {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.oflow-school-logo-img {
  width: 34px; height: 34px; object-fit: contain; border-radius: 4px;
}
.oflow-school-logo-letter {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--surface1); color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; border: 1px solid var(--border1);
}

/* School meta */
.oflow-school-meta { flex: 1; min-width: 0; }
.oflow-school-name {
  display: block; font-size: 14px; font-weight: 700; color: var(--text1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oflow-school-sub { font-size: 11px; color: var(--muted); }

/* Selection badge */
.oflow-school-sel {
  font-size: 11px; font-weight: 700; color: var(--accent, #dc2626);
  white-space: nowrap;
}

/* Chevron */
.oflow-chevron {
  flex-shrink: 0; color: var(--muted); transition: transform .2s;
}
.oflow-chevron-open { transform: rotate(180deg); }

/* Expanded panel */
.oflow-school-expanded { padding: 12px 14px 14px; }

/* Recommended section */
.oflow-rec-section { margin-bottom: 0; }
.oflow-rec-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-bottom: 8px;
}

/* Contact rows */
.oflow-contact-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
  min-height: 52px;
}
.oflow-contact-row:hover { background: rgba(255,255,255,.04); }
.oflow-contact-row.is-checked {
  background: rgba(220,38,38,.06);
  border-color: rgba(220,38,38,.2);
}
.oflow-contact-row.is-rec { }

/* Checkbox */
.oflow-contact-chk {
  accent-color: var(--accent, #dc2626); flex-shrink: 0;
  width: 16px; height: 16px; cursor: pointer; margin-top: 1px;
}

/* Contact info — role first, name below */
.oflow-contact-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oflow-contact-role {
  font-size: 13px; font-weight: 600; color: var(--text1); text-transform: uppercase;
  letter-spacing: .03em; display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.oflow-contact-name { font-size: 12px; color: var(--muted); font-weight: 400; }
.oflow-contact-reason { font-size: 11px; color: var(--muted); opacity: .7; }

/* Recommended badge — keep existing red design */
.oflow-rec-badge {
  font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 4px;
  background: color-mix(in srgb, var(--accent, #dc2626) 12%, transparent);
  color: var(--accent, #dc2626);
  border: 1px solid color-mix(in srgb, var(--accent, #dc2626) 30%, transparent);
  letter-spacing: .03em; text-transform: none; vertical-align: middle;
}
.oflow-rec-badge--hp {
  background: rgba(251,191,36,.12); color: #f59e0b;
  border-color: rgba(251,191,36,.3);
}
.oflow-tier-hp { border-left: 2px solid rgba(251,191,36,.35); padding-left: 8px; margin-left: -8px; }

/* Right side: contact value + copy icon */
.oflow-contact-right {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  max-width: 180px;
}
.oflow-contact-tag {
  font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 140px;
}
.oflow-tag-x { color: #60caff; }
.oflow-copy-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  background: none; border: 1px solid rgba(255,255,255,.1); border-radius: 5px;
  color: var(--muted); cursor: pointer; padding: 0;
  transition: color .12s, border-color .12s, background .12s;
}
.oflow-copy-icon-btn:hover { color: var(--text1); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.05); }

/* See more button */
.oflow-see-more-btn {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; margin-top: 2px;
  font-size: 12px; color: var(--muted); font-weight: 500;
  background: none; border: none; cursor: pointer;
  transition: color .15s;
}
.oflow-see-more-btn:hover { color: var(--text1); }

/* Multi-coach warning */
.oflow-multi-warn {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 8px 10px; border-radius: 7px; margin-top: 6px;
  border-left: 2px solid rgba(245,158,11,.4);
  background: rgba(245,158,11,.05);
  font-size: 12px; color: var(--muted); line-height: 1.4;
}
.oflow-multi-warn svg { flex-shrink: 0; margin-top: 2px; color: #f59e0b; }

/* Sticky footer */
.oflow-sticky-footer {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px; border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  flex-wrap: wrap;
}
.oflow-sticky-footer.hidden { display: none; }
.oflow-footer-count { font-size: 13px; font-weight: 500; color: var(--text2); }
.oflow-footer-right { display: flex; align-items: center; gap: 12px; }
.oflow-clear-btn {
  font-size: 12px; color: var(--muted); background: none; border: none;
  cursor: pointer; padding: 6px 10px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.oflow-clear-btn:hover { color: var(--text1); background: rgba(255,255,255,.06); }
.oflow-more-contacts { display: flex; flex-direction: column; }

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 3 QUEUE EDITOR — Modernized (.ocq-* namespace)
   ═══════════════════════════════════════════════════════════════════════════ */

.ocq-shell {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
  background: var(--bg, #0f0f13);
}

/* ── Topbar ── */
.ocq-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px 0; flex-shrink: 0;
}
.ocq-topbar-center {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.ocq-name-input {
  background: transparent; border: none; outline: none;
  font-size: 14px; font-weight: 600; color: var(--text1);
  padding: 3px 6px; border-radius: 6px; margin-left: -6px;
  transition: background .15s; width: 100%; min-width: 0;
}
.ocq-name-input:hover, .ocq-name-input:focus { background: rgba(255,255,255,.05); }
.ocq-topbar-meta {
  display: flex; align-items: center; gap: 10px; padding-left: 6px;
}
.ocq-type-badge {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  background: rgba(255,255,255,.07); color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase;
}
.ocq-type-badge-x {
  background: color-mix(in srgb,#1d9bf0 14%,transparent);
  color: #60caff;
}
.ocq-progress-txt { font-size: 12px; color: var(--muted); }
.ocq-all-done { font-size: 12px; font-weight: 600; color: #4ade80; }
.ocq-topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ocq-archive-btn {
  font-size: 12px; font-weight: 500; padding: 5px 12px;
  border-radius: 7px; border: 1px solid rgba(255,255,255,.1);
  background: none; color: var(--muted); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.ocq-archive-btn:hover { color: #f87171; border-color: rgba(248,113,113,.4); }
.ocq-exit-btn {
  font-size: 12px; font-weight: 500; color: var(--muted);
  background: none; border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px; padding: 5px 14px; cursor: pointer;
  transition: color .15s, border-color .15s; white-space: nowrap;
}
.ocq-exit-btn:hover { color: var(--text1); border-color: rgba(255,255,255,.25); }

/* Thin campaign progress bar */
.ocq-campaign-bar {
  height: 3px; flex-shrink: 0; background: rgba(255,255,255,.06);
  margin-top: 10px;
}
.ocq-campaign-fill {
  height: 100%; border-radius: 0 2px 2px 0;
  background: var(--accent, #dc2626);
  transition: width .4s ease;
}

/* ── Body: coach list + editor column ── */
.ocq-body { display: flex; flex: 1; overflow: hidden; }

/* Left: coach list */
.ocq-coach-list {
  width: 300px; flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,.07);
  overflow-y: auto; padding: 8px 0;
  background: rgba(0,0,0,.18);
}
.ocq-coach-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer;
  border-left: 2px solid transparent;
  transition: background .1s, border-color .1s;
}
.ocq-coach-item:hover { background: rgba(255,255,255,.04); }
.ocq-coach-item.is-active {
  background: rgba(220,38,38,.07);
  border-left-color: var(--accent, #dc2626);
}
.ocq-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; }
.ocq-dot-draft   { background: rgba(255,255,255,.3); }
.ocq-dot-sent    { background: #22c55e; }
.ocq-dot-skipped { background: rgba(255,255,255,.15); }
.ocq-dot-unable  { background: #f59e0b; }
.ocq-ci-info {
  flex: 1; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
}
.ocq-ci-name {
  font-size: 13px; font-weight: 500; color: var(--text1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ocq-ci-school {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ocq-ci-status {
  font-size: 10px; color: var(--muted); font-weight: 500;
  flex-shrink: 0; white-space: nowrap;
}

/* Right: editor column */
.ocq-editor-col { flex: 1; overflow-y: auto; }
.ocq-editor-inner {
  padding: 36px 48px 48px;
  display: flex; flex-direction: column; gap: 28px;
  max-width: 900px;
}

/* ── Draft header ── */
.ocq-draft-hdr {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
}
.ocq-draft-who { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ocq-draft-role { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.01em; color: var(--ink); }
.ocq-draft-name { font-weight: 500; }
.ocq-draft-meta  { font-size: 13px; color: var(--muted); line-height: 1.5; }
.ocq-hdr-right   { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-top: 4px; }

/* Status chip */
.ocq-status-chip {
  font-size: 11px; font-weight: 600; padding: 4px 11px;
  border-radius: 20px; white-space: nowrap;
}
.ocq-chip-draft   { background: rgba(255,255,255,.07); color: var(--muted); }
.ocq-chip-sent    { background: rgba(34,197,94,.12); color: #4ade80; }
.ocq-chip-skipped { background: rgba(255,255,255,.05); color: var(--muted); opacity: .6; }
.ocq-chip-unable  { background: rgba(245,158,11,.1); color: #fbbf24; }

/* More menu */
.ocq-more-wrap { position: relative; }
.ocq-more-btn {
  font-size: 18px; font-weight: 400; padding: 2px 8px;
  border-radius: 6px; background: none;
  border: 1px solid rgba(255,255,255,.1); color: var(--muted);
  cursor: pointer; line-height: 1.2; transition: background .12s, color .12s;
  letter-spacing: .06em;
}
.ocq-more-btn:hover { background: rgba(255,255,255,.06); color: var(--text1); }
.ocq-more-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  background: #1a1d23; border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 5px; min-width: 172px;
  box-shadow: 0 12px 36px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 1px;
}
.ocq-more-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 13px; border: none; background: none;
  font-size: 13px; color: var(--text1); cursor: pointer;
  border-radius: 7px; transition: background .1s;
}
.ocq-more-item:hover { background: rgba(255,255,255,.06); }
.ocq-more-danger { color: #f87171; }
.ocq-more-danger:hover { background: rgba(248,113,113,.08); }

/* ── Field rows (To, Subject, X handle) ── */
.ocq-field-row {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0;
}
.ocq-field-label {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
  flex-shrink: 0; width: 58px;
}
.ocq-field-val {
  font-size: 14px; color: var(--text1); flex: 1; word-break: break-all;
}
.ocq-subject-val { color: var(--muted); font-size: 13px; }
.ocq-field-input {
  flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 7px 11px; font-size: 13px;
  color: var(--ink); outline: none; transition: border-color .15s;
  box-sizing: border-box; min-width: 0;
}
.ocq-field-input:focus { border-color: rgba(220,38,38,.6); background: rgba(255,255,255,.07); }
.ocq-to-inline { min-width: 0; }
.ocq-x-link { color: #60caff; text-decoration: none; font-size: 14px; }
.ocq-x-link:hover { text-decoration: underline; }

/* Copy icon button */
.ocq-copy-icon {
  flex-shrink: 0; width: 28px; height: 28px;
  background: none; border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .12s, background .12s, border-color .12s;
}
.ocq-copy-icon:hover { color: var(--ink); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }

/* Grouped field rows container */
.ocq-fields-group { display: flex; flex-direction: column; gap: 2px; }

/* ── Message area header ── */
.ocq-msg-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.ocq-msg-hdr-label {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
}

/* ── Quiet "Use another email app" link ── */
.ocq-email-app-link {
  display: inline-block; background: none; border: none; padding: 0;
  font-size: 12px; color: var(--muted); cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.2);
  text-underline-offset: 2px; transition: color .12s;
  align-self: flex-start;
}
.ocq-email-app-link:hover { color: var(--ink); }

/* ── Message textarea ── */
.ocq-msg-wrap { position: relative; }
.ocq-msg-ta {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px; padding: 18px 20px;
  font-size: 14px; font-family: inherit; line-height: 1.7;
  color: var(--text1); outline: none; resize: vertical; min-height: 220px;
  transition: border-color .15s, background .15s; box-sizing: border-box;
}
.ocq-msg-ta:focus {
  border-color: rgba(220,38,38,.45);
  background: rgba(255,255,255,.06);
}
.ocq-saved-ind {
  position: absolute; bottom: 12px; right: 16px;
  font-size: 11px; color: #4ade80; font-weight: 500;
  pointer-events: none; letter-spacing: .01em;
}

/* ── Missing info panel ── */
.ocq-missing-panel {
  padding: 14px 18px; border-radius: 10px;
  background: rgba(245,158,11,.05);
  border-left: 3px solid rgba(245,158,11,.45);
  display: flex; flex-direction: column; gap: 14px;
}
.ocq-miss-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: #d97706;
}
.ocq-miss-field-row { display: flex; flex-direction: column; gap: 6px; }
.ocq-miss-label {
  font-size: 11px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: .06em;
}
.ocq-miss-input {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 9px 12px; font-size: 13px;
  color: var(--text1); outline: none; transition: border-color .15s;
  box-sizing: border-box; width: 100%;
}
.ocq-miss-input:focus { border-color: rgba(220,38,38,.5); }
.ocq-miss-name-row { display: flex; gap: 8px; }
.ocq-miss-name-row .ocq-miss-input { flex: 1; }
.ocq-pos-grid { gap: 6px !important; }
.ocq-miss-actions { display: flex; align-items: center; gap: 10px; }
.ocq-miss-save-btn { font-size: 13px !important; padding: 9px 22px !important; }
.ocq-miss-err { font-size: 12px; color: #f87171; }

/* ── Action area ── */
.ocq-action-area {
  display: flex; flex-direction: column; gap: 14px; padding-top: 4px;
}
.ocq-primary-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 10px; border: none;
  background: var(--accent, #dc2626); color: #fff;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: opacity .15s, transform .1s; align-self: flex-start;
  letter-spacing: .01em; min-height: 48px; box-sizing: border-box;
}
.ocq-primary-btn:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.ocq-primary-btn:active:not(:disabled) { transform: none; }
.ocq-primary-btn:disabled { opacity: .3; cursor: not-allowed; transform: none; }
.ocq-email-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ocq-email-app-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 20px; border-radius: 10px; min-height: 48px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--text1);
  font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s;
  box-sizing: border-box;
}
.ocq-email-app-btn:hover:not(:disabled) { background: rgba(255,255,255,.09); }
.ocq-email-app-btn:disabled { opacity: .3; cursor: not-allowed; }

/* Confirmation area */
.ocq-confirm-q {
  font-size: 16px; font-weight: 600; color: var(--text1); margin: 0;
  letter-spacing: -.01em;
}
.ocq-confirm-btns {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ocq-not-yet-btn {
  padding: 12px 20px; border-radius: 10px; min-height: 48px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--text1);
  font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s;
  box-sizing: border-box;
}
.ocq-not-yet-btn:hover { background: rgba(255,255,255,.09); }
.ocq-unable-btn {
  padding: 8px 16px; border-radius: 8px;
  border: none; color: var(--muted);
  background: none; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: color .15s;
}
.ocq-unable-btn:hover { color: #fbbf24; }
.ocq-skip-txt-btn {
  background: none; border: none; padding: 6px 8px;
  font-size: 12px; color: var(--muted); cursor: pointer;
  opacity: .7; transition: opacity .15s;
}
.ocq-skip-txt-btn:hover { opacity: 1; }
.ocq-undo-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1);
  background: none; color: var(--muted);
  font-size: 13px; font-weight: 500; cursor: pointer; transition: color .15s, border-color .15s;
}
.ocq-undo-btn:hover { color: var(--text1); border-color: rgba(255,255,255,.2); }

/* Film note */
.ocq-film-note {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted); margin: 0;
}
.ocq-film-note svg { flex-shrink: 0; opacity: .6; }

/* X toast */
.ocq-x-toast {
  padding: 11px 16px; border-radius: 9px;
  background: rgba(29,155,240,.09);
  border-left: 3px solid rgba(29,155,240,.4);
  font-size: 13px; color: #7dd3fc; line-height: 1.5;
}

/* ── Recruiting Profile quick editor ── */
.ocq-profile-editor {
  border: 1px solid rgba(255,255,255,.09); border-radius: 12px;
  overflow: hidden; margin-top: 4px;
  background: rgba(255,255,255,.02);
}
.ocq-profile-sum {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; cursor: pointer; user-select: none; list-style: none;
  transition: background .12s;
}
.ocq-profile-sum:hover { background: rgba(255,255,255,.02); }
.ocq-profile-sum::-webkit-details-marker { display: none; }
.ocq-profile-sum-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ocq-profile-sum-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.ocq-profile-sum-sub { font-size: 11px; color: var(--muted); }
.ocq-profile-chevron {
  flex-shrink: 0; color: var(--muted);
  transition: transform .2s; display: block;
}
.ocq-profile-editor[open] .ocq-profile-chevron { transform: rotate(90deg); }
.ocq-profile-body { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 18px; border-top: 1px solid rgba(255,255,255,.06); }
.ocq-profile-body-hdr { padding-top: 14px; }
.ocq-profile-desc { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; }
.ocq-profile-edit-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-size: 12px; font-family: inherit;
  text-decoration: underline; text-decoration-color: rgba(230,35,20,.4);
  text-underline-offset: 2px; transition: opacity .15s;
}
.ocq-profile-edit-btn:hover { opacity: .75; }
.ocq-pe-section { display: flex; flex-direction: column; gap: 12px; }
.ocq-pe-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.ocq-pe-field { display: flex; flex-direction: column; gap: 6px; }
.ocq-pe-field-row { display: flex; gap: 12px; }
.ocq-pe-field-row .ocq-pe-field { flex: 1; }
.ocq-pe-label {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.ocq-pe-input {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 9px 11px; font-size: 13px;
  color: var(--text1); outline: none; transition: border-color .15s;
  box-sizing: border-box; width: 100%;
}
.ocq-pe-input:focus { border-color: rgba(220,38,38,.5); }
.ocq-pos-grid-sm { gap: 5px !important; margin-bottom: 5px; }
.pos-check-sm { padding: 3px 8px !important; font-size: 11px !important; }
.pos-check-sm .pos-check-label { font-size: 10px !important; }
.ocq-pe-save-pos-btn {
  align-self: flex-start; padding: 7px 16px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12); background: none;
  color: var(--text2); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background .15s, color .15s;
}
.ocq-pe-save-pos-btn:hover { background: rgba(255,255,255,.06); color: var(--text1); }
.ocq-pe-additional { border-top: 1px solid rgba(255,255,255,.06); padding-top: 12px; }
.ocq-pe-additional-sum {
  font-size: 12px; font-weight: 500; color: var(--muted);
  cursor: pointer; list-style: none; padding: 3px 0; display: flex; align-items: center;
}
.ocq-pe-additional-sum::after { content: " ›"; margin-left: 4px; }
.ocq-pe-additional[open] .ocq-pe-additional-sum::after { content: " ↑"; }
.ocq-pe-additional-sum::-webkit-details-marker { display: none; }
.ocq-pe-additional-body { padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.ocq-pe-saved { font-size: 12px; font-weight: 500; color: #4ade80; }

/* ── Mobile footer nav ── */
.ocq-mobile-footer {
  display: none; border-top: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
  padding: 10px 16px; align-items: center; gap: 0;
  background: rgba(0,0,0,.2);
}
.ocq-mob-nav-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 18px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1);
  background: none; color: var(--text1);
  font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s;
}
.ocq-mob-nav-btn:disabled { opacity: .3; cursor: not-allowed; }
.ocq-mob-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,.06); }
.ocq-mob-prog {
  flex: 1; text-align: center;
  font-size: 13px; font-weight: 500; color: var(--muted);
}

/* ── Delete confirmation modal ── */
.ocq-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  animation: ocq-overlay-in .15s ease;
}
@keyframes ocq-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.ocq-modal {
  background: #1a1d23; border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px; padding: 28px 32px; max-width: 400px; width: calc(100% - 40px);
  box-shadow: 0 24px 60px rgba(0,0,0,.8);
  animation: ocq-modal-in .15s ease;
}
@keyframes ocq-modal-in { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
.ocq-modal-title { font-size: 18px; font-weight: 700; margin: 0 0 10px; color: var(--ink); }
.ocq-modal-body { font-size: 14px; color: var(--muted); margin: 0 0 24px; line-height: 1.55; }
.ocq-modal-body strong { color: var(--ink); }
.ocq-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.ocq-modal-cancel {
  padding: 9px 18px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12);
  background: none; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer;
  font-family: inherit; transition: color .12s, border-color .12s;
}
.ocq-modal-cancel:hover { color: var(--ink); border-color: rgba(255,255,255,.24); }
.ocq-modal-confirm {
  padding: 9px 20px; border-radius: 8px; border: none;
  background: #dc2626; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: opacity .12s, transform .1s;
}
.ocq-modal-confirm:hover { opacity: .85; }
.ocq-modal-confirm:active { transform: scale(.97); }
.ocq-modal-secondary {
  padding: 10px 18px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15);
  background: transparent; color: var(--muted, #888); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background .12s, color .12s;
}
.ocq-modal-secondary:hover { background: rgba(255,255,255,.06); color: var(--text, #e5e5e5); }

/* ── Mobile responsive ── */
@media (max-width: 768px) {
  .ocq-coach-list { display: none; }
  .ocq-mobile-footer { display: flex; }
  .ocq-editor-inner { padding: 20px 20px 40px; }
  .ocq-draft-role { font-size: 19px; }
  .ocq-action-area {
    position: sticky; bottom: 48px;
    background: var(--bg, #0a0a0a);
    margin: 16px -20px -40px;
    padding: 14px 20px 20px;
    border-top: 1px solid rgba(255,255,255,.07);
    z-index: 10;
  }
}
@media (max-width: 480px) {
  .ocq-topbar { gap: 6px; padding: 10px 14px 0; }
  .ocq-exit-btn { display: none; }
  .ocq-editor-inner { padding: 16px 16px 40px; }
}

/* ── Accessible keyboard focus rings ── */
:focus-visible {
  outline: 2px solid var(--accent, #dc2626);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent, #dc2626);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PREMIUM VISUAL PASS — Outreach Command Center
   Iron Man-inspired: black/graphite base · Formula D1 red energy accents
   Semantic: red=active/primary  green=sent  amber=warning  blue=X-only
   Transitions: 150–250ms throughout
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Missing root tokens (used throughout but undefined) ── */
:root {
  --text1: #f0f2f5;
  --text2: #aab0ba;
  --surface1: #0e1015;
  --border1: rgba(255,255,255,0.07);

  /* Timing */
  --t-fast: 150ms ease;
  --t-base: 200ms ease;
  --t-soft: 250ms ease;

  /* Red glow shadows (hover-only) */
  --glow-red: 0 0 20px rgba(230,35,20,0.22), 0 0 6px rgba(230,35,20,0.1);
  --glow-red-strong: 0 0 32px rgba(230,35,20,0.32), 0 0 10px rgba(230,35,20,0.16);
}

/* ══ OUTREACH HOME ══════════════════════════════════════════════════════════ */

/* Let the workspace dominate — remove narrow centering */
#pageOutreach .od-home {
  max-width: none;
  padding: 36px 52px 88px;
}
@media (max-width: 1100px) { #pageOutreach .od-home { padding: 28px 32px 80px; } }
@media (max-width: 720px)  { #pageOutreach .od-home { padding: 20px 18px 72px; } }

/* Page title */
.od-home-title {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
}

/* Section label — quieter */
.od-section-lbl {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(148,155,165,0.65);
}

/* ── Outreach type cards ── */
.od-type-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 18px 16px;
  transition: background var(--t-base), border-color var(--t-base),
              transform var(--t-fast), box-shadow var(--t-base);
}
.od-type-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.11);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.od-type-card:active { transform: translateY(0); box-shadow: none; }
.od-type-card:focus-visible {
  border-color: rgba(230,35,20,0.45);
  box-shadow: 0 0 0 3px rgba(230,35,20,0.12);
}
.od-type-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.od-type-desc { font-size: 12px; color: rgba(148,155,165,0.8); line-height: 1.5; }
.od-type-icon { color: rgba(148,155,165,0.55); }

/* ── Draft cards grid ── */
.od-draft-card {
  background: rgba(255,255,255,0.022);
  border: 1px solid rgba(255,255,255,0.055);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color var(--t-base), transform var(--t-base),
              box-shadow var(--t-base);
}
.od-draft-card:hover {
  border-color: rgba(255,255,255,0.1);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.38);
}

/* Active draft — subtle red glass glow */
.od-draft-card--active {
  border-color: rgba(230,35,20,0.28);
  background: rgba(230,35,20,0.035);
  box-shadow: 0 0 22px rgba(230,35,20,0.09), inset 0 0 18px rgba(230,35,20,0.025);
}
.od-draft-card--active:hover {
  border-color: rgba(230,35,20,0.42);
  box-shadow: 0 0 30px rgba(230,35,20,0.13), inset 0 0 22px rgba(230,35,20,0.035),
              0 10px 26px rgba(0,0,0,0.35);
}

/* Sub-card inside group */
.od-draft-card--sub {
  background: rgba(255,255,255,0.015);
  border-color: rgba(255,255,255,0.05);
}
.od-draft-card--sub:hover { border-color: rgba(230,35,20,0.18); transform: none; box-shadow: none; }

/* Card text */
.od-card-school  { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.od-card-type    { font-size: 11px; color: rgba(148,155,165,0.6); margin-top: 2px; }
.od-card-progress{ font-size: 12px; color: rgba(148,155,165,0.85); }
.od-card-time    { font-size: 11px; color: rgba(148,155,165,0.48); }

/* Card bottom — tone-separated, no heavy border */
.od-card-bottom { border-top: 1px solid rgba(255,255,255,0.042); }

/* Continue button — red, glow on hover */
.od-continue-btn {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  min-height: 36px;
  transition: box-shadow var(--t-base), opacity var(--t-fast);
}
.od-continue-btn:hover { opacity: 1; box-shadow: var(--glow-red); }

/* Expand/see recipients */
.od-expand-btn {
  color: rgba(148,155,165,0.55);
  transition: color var(--t-fast);
}
.od-expand-btn:hover { color: rgba(240,242,245,0.8); }
.od-expand-icon { transition: transform 200ms ease; }

/* Recipients panel — smooth expand */
.od-recipients {
  border-top: 1px solid rgba(255,255,255,0.042);
  animation: od-recipients-in 200ms ease-out;
}
@keyframes od-recipients-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.od-recipient-name  { color: rgba(240,242,245,0.82); font-weight: 500; }
.od-recipient-title { color: rgba(148,155,165,0.58); }

/* Status badges */
.od-status { font-size: 10px; font-weight: 700; padding: 2px 8px; }
.od-status-draft    { background: rgba(255,255,255,0.04);  color: rgba(148,155,165,0.6); border-color: rgba(255,255,255,0.055); }
.od-status-progress { background: rgba(212,160,23,0.09);   color: #c49018; border-color: rgba(212,160,23,0.2); }
.od-status-done     { background: rgba(46,153,76,0.09);    color: #38b258; border-color: rgba(46,153,76,0.2); }

/* Empty state */
.od-empty {
  border: 1px dashed rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.012);
  border-radius: 16px;
}
.od-empty-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.od-empty-sub   { color: rgba(148,155,165,0.75); }

/* Multi-school group */
.od-draft-group {
  background: rgba(255,255,255,0.022);
  border: 1px solid rgba(255,255,255,0.055);
  backdrop-filter: blur(18px);
}
.od-group-hdr  { border-bottom: 1px solid rgba(255,255,255,0.045); }
.od-group-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.od-group-count{ color: rgba(148,155,165,0.6); }

/* Completed section */
.od-completed-summary { color: rgba(148,155,165,0.55); font-size: 11px; }

/* ── CTA buttons — sentence case, ~46-48 px primary, quiet secondary ── */

/* Primary red: Start Outreach */
.oc-start-btn {
  height: 46px;
  min-height: 46px;
  padding: 0 26px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: box-shadow var(--t-base), opacity var(--t-fast);
}
.oc-start-btn:hover { opacity: 1; box-shadow: var(--glow-red); }

/* Secondary: Manage templates */
.oc-manage-tpl-btn {
  height: 40px;
  padding: 0 18px;
  border-radius: 9px;
  border-color: rgba(255,255,255,0.08);
  color: rgba(240,242,245,0.68);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-fast);
}
.oc-manage-tpl-btn:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.13);
  color: var(--ink);
}

/* Three-dot trigger */
.oc-dot-trigger {
  color: rgba(148,155,165,0.4);
  border-color: transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.oc-dot-trigger:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
  color: var(--ink);
}

/* Three-dot floating menu */
.oc-dot-menu {
  background: #131519;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(255,255,255,0.025);
  animation: dot-menu-in 150ms ease;
}
@keyframes dot-menu-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.oc-dot-item {
  font-size: 13px;
  color: rgba(240,242,245,0.82);
  border-radius: 7px;
  transition: background var(--t-fast);
}
.oc-dot-item:hover { background: rgba(255,255,255,0.06); }

/* ══ OUTREACH QUEUE VIEW (ocq-*) ════════════════════════════════════════════ */

.ocq-shell { background: var(--bg); }

/* Topbar */
.ocq-topbar { padding: 16px 28px 0; }
.ocq-name-input {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: background var(--t-fast);
}
.ocq-name-input:hover, .ocq-name-input:focus { background: rgba(255,255,255,0.04); }
.ocq-progress-txt { font-size: 12px; font-weight: 500; color: rgba(148,155,165,0.7); }
.ocq-all-done     { font-size: 12px; font-weight: 600; color: #38b258; }

/* Thin progress bar */
.ocq-campaign-bar { height: 2px; margin-top: 14px; background: rgba(255,255,255,0.045); }
.ocq-campaign-fill {
  height: 100%; border-radius: 0 1px 1px 0;
  background: linear-gradient(90deg, rgba(200,25,14,0.85) 0%, #e62314 100%);
  transition: width 400ms ease;
}

/* Exit / Close button */
.ocq-exit-btn {
  height: 32px; padding: 0 16px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(148,155,165,0.6); font-size: 12px; font-weight: 500;
  transition: color var(--t-base), border-color var(--t-base);
}
.ocq-exit-btn:hover { color: var(--ink); border-color: rgba(255,255,255,0.18); }

/* Back button */
.oc-back-btn {
  height: 32px; padding: 0 12px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.07);
  color: rgba(148,155,165,0.6); font-size: 12px; font-weight: 500;
  transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.oc-back-btn:hover { color: var(--ink); border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.03); }

/* Coach list panel */
.ocq-coach-list {
  width: 276px;
  background: rgba(0,0,0,0.2);
  border-right: 1px solid rgba(255,255,255,0.05);
}
.ocq-coach-item {
  padding: 11px 18px;
  border-left: 2px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.ocq-coach-item:hover { background: rgba(255,255,255,0.033); }
.ocq-coach-item.is-active {
  background: rgba(230,35,20,0.06);
  border-left-color: var(--accent);
}

/* Status dots */
.ocq-dot         { width: 6px; height: 6px; }
.ocq-dot-draft   { background: rgba(255,255,255,0.22); }
.ocq-dot-sent    { background: #22c55e; box-shadow: 0 0 5px rgba(34,197,94,0.5); }
.ocq-dot-skipped { background: rgba(255,255,255,0.1); }
.ocq-dot-unable  { background: #f59e0b; }

/* Coach list text */
.ocq-ci-name   { font-size: 12px; font-weight: 500; color: rgba(240,242,245,0.88); }
.ocq-ci-school { font-size: 10px; color: rgba(148,155,165,0.6); }
.ocq-ci-status { font-size: 10px; color: rgba(148,155,165,0.42); }

/* Editor column — ambient red glow at top */
.ocq-editor-col {
  background: radial-gradient(
    ellipse 70% 40% at 50% 0%,
    rgba(230,35,20,0.05) 0%,
    transparent 65%
  );
}
.ocq-editor-inner {
  padding: 40px 56px 56px;
  max-width: 860px;
  gap: 26px;
}
@media (max-width: 1100px) { .ocq-editor-inner { padding: 32px 36px 48px; } }
@media (max-width: 768px)  { .ocq-editor-inner { padding: 22px 20px 40px; } }

/* Draft header */
.ocq-draft-role {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ocq-draft-meta { font-size: 13px; color: rgba(148,155,165,0.72); line-height: 1.5; }

/* Status chip */
.ocq-status-chip {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: 20px; white-space: nowrap;
  border: 1px solid transparent;
}
.ocq-chip-draft   { background: rgba(255,255,255,0.05);  color: rgba(148,155,165,0.65); border-color: rgba(255,255,255,0.055); }
.ocq-chip-sent    { background: rgba(34,197,94,0.1);     color: #38b258;  border-color: rgba(34,197,94,0.22); }
.ocq-chip-skipped { background: rgba(255,255,255,0.04);  color: rgba(148,155,165,0.45); border-color: rgba(255,255,255,0.04); }
.ocq-chip-unable  { background: rgba(245,158,11,0.09);   color: #c49018;  border-color: rgba(245,158,11,0.2); }

/* More button */
.ocq-more-btn {
  transition: background var(--t-fast), color var(--t-fast);
}
.ocq-more-menu {
  background: #131519;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 14px 44px rgba(0,0,0,0.75);
  animation: dot-menu-in 150ms ease;
}
.ocq-more-item {
  font-size: 13px; color: rgba(240,242,245,0.82);
  transition: background var(--t-fast);
}
.ocq-more-item:hover  { background: rgba(255,255,255,0.055); }
.ocq-more-danger      { color: rgba(248,113,113,0.85); }
.ocq-more-danger:hover{ background: rgba(248,113,113,0.07); color: #f87171; }

/* Field labels */
.ocq-field-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(148,155,165,0.55); width: 54px;
}
.ocq-field-val     { font-size: 14px; color: rgba(240,242,245,0.88); }
.ocq-subject-val   { color: rgba(148,155,165,0.78); font-size: 13px; }

/* Field inputs */
.ocq-field-input {
  background: rgba(255,255,255,0.038); border: 1px solid rgba(255,255,255,0.078);
  border-radius: 8px; color: var(--ink); font-size: 13px;
  transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.ocq-field-input:focus {
  border-color: rgba(230,35,20,0.45);
  background: rgba(255,255,255,0.055);
  box-shadow: 0 0 0 3px rgba(230,35,20,0.07);
}

/* Message header label */
.ocq-msg-hdr-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: rgba(148,155,165,0.55);
}

/* Message textarea */
.ocq-msg-ta {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 12px;
  font-size: 14px; line-height: 1.78;
  color: var(--ink);
  transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.ocq-msg-ta:focus {
  border-color: rgba(230,35,20,0.32);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 3px rgba(230,35,20,0.06);
}

/* Saved indicator */
.ocq-saved-ind { color: #38b258; font-size: 11px; }

/* ── Primary action button — red, glow on hover only ── */
.ocq-primary-btn {
  height: 48px; min-height: 48px;
  padding: 0 28px;
  border-radius: 10px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  align-self: flex-start;
  transition: box-shadow var(--t-base), transform var(--t-fast), opacity var(--t-fast);
}
.ocq-primary-btn:hover:not(:disabled) {
  opacity: 0.94;
  box-shadow: var(--glow-red);
  transform: translateY(-1px);
}
.ocq-primary-btn:active:not(:disabled) { transform: none; box-shadow: none; }

/* Confirm question */
.ocq-confirm-q { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }

/* Not-yet button */
.ocq-not-yet-btn {
  height: 48px; padding: 0 22px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.038); color: rgba(240,242,245,0.82);
  font-size: 14px; font-weight: 500;
  transition: background var(--t-base), border-color var(--t-base);
}
.ocq-not-yet-btn:hover { background: rgba(255,255,255,0.065); border-color: rgba(255,255,255,0.15); }

/* Unable / skip text buttons */
.ocq-unable-btn {
  height: 40px; padding: 0 14px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: rgba(148,155,165,0.58);
  background: none; border: none; cursor: pointer;
  transition: color var(--t-fast);
}
.ocq-unable-btn:hover { color: #c49018; }

.ocq-skip-txt-btn {
  font-size: 12px; color: rgba(148,155,165,0.4);
  background: none; border: none; padding: 6px 8px; cursor: pointer;
  transition: color var(--t-fast);
}
.ocq-skip-txt-btn:hover { color: rgba(148,155,165,0.75); }

/* Resume draft button */
.ocq-undo-btn {
  height: 40px; padding: 0 18px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.09);
  color: rgba(148,155,165,0.65); font-size: 13px; font-weight: 500;
  transition: color var(--t-base), border-color var(--t-base);
}
.ocq-undo-btn:hover { color: var(--ink); border-color: rgba(255,255,255,0.18); }

/* Copy icon button */
.ocq-copy-icon {
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.ocq-copy-icon:hover { color: var(--ink); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }

/* X link */
.ocq-x-link { color: #60caff; text-decoration: none; transition: opacity var(--t-fast); }
.ocq-x-link:hover { opacity: 0.82; text-decoration: underline; }

/* Film note */
.ocq-film-note { color: rgba(148,155,165,0.58); font-size: 12px; }

/* X toast */
.ocq-x-toast {
  background: rgba(29,155,240,0.06);
  border-left: 2px solid rgba(29,155,240,0.32);
  border-radius: 8px;
  font-size: 13px; color: #7dd3fc; line-height: 1.5;
  animation: pv-fade-up 200ms ease;
}

/* Missing info panel */
.ocq-missing-panel {
  border-left: 2px solid rgba(245,158,11,0.38);
  background: rgba(245,158,11,0.04);
  border-radius: 10px;
}
.ocq-miss-title { color: #b87c10; font-size: 13px; font-weight: 600; }
.ocq-miss-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: rgba(148,155,165,0.7); }
.ocq-miss-input {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px; font-size: 13px; color: var(--ink);
  transition: border-color var(--t-base);
}
.ocq-miss-input:focus { border-color: rgba(230,35,20,0.45); }

/* Save & continue button inside missing panel */
.ocq-miss-save-btn {
  height: 42px; padding: 0 22px !important;
  font-size: 13px !important; font-weight: 600 !important;
}
.ocq-miss-save-btn:hover { box-shadow: var(--glow-red) !important; opacity: 1 !important; }

/* Recruiting profile editor */
.ocq-profile-editor {
  border: 1px solid rgba(255,255,255,0.065);
  background: rgba(255,255,255,0.015);
  border-radius: 12px; overflow: hidden;
  transition: border-color var(--t-base);
}
.ocq-profile-sum {
  padding: 14px 18px; transition: background var(--t-fast);
}
.ocq-profile-sum:hover { background: rgba(255,255,255,0.02); }
.ocq-profile-sum-title { font-size: 13px; font-weight: 600; color: rgba(240,242,245,0.9); }
.ocq-profile-sum-sub   { font-size: 11px; color: rgba(148,155,165,0.6); }
.ocq-profile-chevron   { transition: transform var(--t-base); }
.ocq-profile-editor[open] .ocq-profile-chevron { transform: rotate(90deg); }

.ocq-profile-body { border-top: 1px solid rgba(255,255,255,0.055); }
.ocq-pe-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: rgba(148,155,165,0.6);
}
.ocq-pe-input {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px; font-size: 13px; color: var(--ink);
  transition: border-color var(--t-base);
}
.ocq-pe-input:focus { border-color: rgba(230,35,20,0.45); }
.ocq-pe-save-pos-btn {
  border: 1px solid rgba(255,255,255,0.1); color: rgba(240,242,245,0.7);
  transition: background var(--t-base), color var(--t-base);
}
.ocq-pe-save-pos-btn:hover { background: rgba(255,255,255,0.055); color: var(--ink); }
.ocq-pe-additional-sum {
  color: rgba(148,155,165,0.65); transition: color var(--t-fast);
}
.ocq-pe-additional-sum:hover { color: rgba(240,242,245,0.85); }
.ocq-pe-saved { color: #38b258; font-size: 12px; font-weight: 500; }

/* More details / see recipients expansion animations */
.ocq-pe-additional-body { animation: pv-fade-up 200ms ease; }
@keyframes pv-fade-up {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* Mobile footer */
.ocq-mobile-footer {
  background: rgba(4,5,7,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.048);
}
.ocq-mob-nav-btn {
  transition: background var(--t-base);
}
.ocq-mob-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.055); }

/* Delete modal */
.ocq-modal {
  background: #131519;
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow: 0 28px 70px rgba(0,0,0,0.9);
  animation: ocq-modal-in 180ms ease;
}
.ocq-modal-cancel {
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(148,155,165,0.7);
  transition: color var(--t-base), border-color var(--t-base);
}
.ocq-modal-cancel:hover { color: var(--ink); border-color: rgba(255,255,255,0.22); }
.ocq-modal-confirm {
  transition: box-shadow var(--t-base), opacity var(--t-fast);
}
.ocq-modal-confirm:hover { opacity: 0.9; box-shadow: var(--glow-red); }

/* ══ 3-STEP FLOW ════════════════════════════════════════════════════════════ */

.oflow-page-hdr  { border-bottom: 1px solid rgba(255,255,255,0.048); }
.oflow-page-footer {
  border-top: 1px solid rgba(255,255,255,0.048);
  background: rgba(4,5,7,0.96); backdrop-filter: blur(10px);
}

/* Step indicator */
.oflow-step-active {
  background: rgba(230,35,20,0.08);
  border: 1px solid rgba(230,35,20,0.22);
}
.oflow-step-active .oflow-step-num { background: var(--accent); }

/* Footer Continue / Generate button */
.oflow-footer-btn {
  height: 46px; padding: 0 30px; border-radius: 10px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  transition: box-shadow var(--t-base), opacity var(--t-fast);
}
.oflow-footer-btn:not(:disabled):hover { box-shadow: var(--glow-red); opacity: 0.94; }

/* Template cards */
.oflow-tpl-card {
  background: rgba(255,255,255,0.022);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.oflow-tpl-card:hover {
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.045);
}
.oflow-tpl-card.is-selected {
  border-color: rgba(230,35,20,0.38);
  background: rgba(230,35,20,0.05);
  box-shadow: 0 0 18px rgba(230,35,20,0.08);
}
.oflow-tpl-card-name  { font-size: 14px; font-weight: 600; color: var(--ink); }
.oflow-tpl-card-usage { font-size: 12px; color: rgba(148,155,165,0.78); }

/* Contact selector rows */
.oflow-school-collapsed { transition: background var(--t-base); }
.oflow-school-collapsed:hover { background: rgba(255,255,255,0.03); }
.oflow-contact-row { transition: background var(--t-base), border-color var(--t-base); }
.oflow-contact-row:hover { background: rgba(255,255,255,0.028); }
.oflow-contact-row.is-checked {
  background: rgba(230,35,20,0.05);
  border-color: rgba(230,35,20,0.18);
}

/* Search input in step 2 */
.oflow-search-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--ink); font-size: 13px;
  transition: border-color var(--t-base), background var(--t-base);
}
.oflow-search-input:focus { border-color: rgba(230,35,20,0.45); background: rgba(255,255,255,0.055); }
.oflow-search-input::placeholder { color: rgba(148,155,165,0.5); }

/* Sticky footer */
.oflow-sticky-footer {
  background: rgba(4,5,7,0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.oflow-clear-btn { transition: color var(--t-fast), background var(--t-fast); }
.oflow-clear-btn:hover { color: var(--ink); background: rgba(255,255,255,0.05); }

/* ══ CONTACT VAULT — matching premium treatment ══════════════════════════════ */

/* Vault items */
.vault-item {
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 12px;
  transition: border-color var(--t-base), box-shadow var(--t-base);
  background: rgba(255,255,255,0.015);
}
.vault-item:hover { border-color: rgba(255,255,255,0.1); }

/* Vault header button */
.vault-item-header { transition: background var(--t-fast); }

/* Contact cards */
.vault-contact-card {
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.vault-contact-card:hover { border-color: rgba(255,255,255,0.1); }

/* Stat tiles */
.stat-tile {
  transition: border-color var(--t-base), background var(--t-base);
}

/* Recommended card */
.rec-contact-card {
  border: 1px solid rgba(230,35,20,0.2);
  background: rgba(230,35,20,0.04);
  border-radius: 10px;
  box-shadow: 0 0 16px rgba(230,35,20,0.06);
}

/* ══ MISC — toast notifications, copy feedback ════════════════════════════== */

/* Accessible focus rings */
:focus-visible {
  outline: 2px solid rgba(230,35,20,0.6);
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgba(230,35,20,0.55);
  outline-offset: 3px;
  border-radius: 5px;
}

/* Position checker items */
.pos-check-item {
  transition: background var(--t-fast), border-color var(--t-fast);
}

/* ══ TOAST / SNACKBAR ════════════════════════════════════════════════════════ */
/* Generic toast that uses the dark premium style */
.pv-toast {
  background: #131519;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  font-size: 13px; font-weight: 500; color: var(--ink);
  padding: 11px 18px;
  animation: pv-toast-in 200ms ease;
}
@keyframes pv-toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ══ LEAD FINDER — NATIONAL NETWORK CANVAS REFINEMENT ═══════════════════════ */
#pageLeadFinder { max-width:none; }
#pageLeadFinder .lead-finder-grid {
  display:grid; grid-template-columns:1fr; grid-template-rows:auto minmax(440px,1fr) auto;
  max-width:1420px; min-height:calc(100dvh - 60px); padding:31px 36px 20px; margin:0 auto;
  gap:0; align-items:start;
}
#pageLeadFinder .lead-finder-hero {
  grid-row:1; width:min(760px,100%); justify-self:center; padding:0; text-align:center; display:block;
}
.network-controls {
  grid-row:3; width:min(980px,100%); justify-self:center; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:0 7px; margin-top:-8px; position:relative; z-index:4;
}
#pageLeadFinder .command-kicker { justify-content:center; margin:0 0 12px; font-size:9px; color:#8497a7; }
.command-kicker span { width:5px; height:5px; box-shadow:0 0 8px rgba(238,78,52,.38); }
#pageLeadFinder .search-title { display:none; }
#pageLeadFinder .search-subheading { max-width:none; text-align:center; margin:0 0 13px; color:#dbe5eb; font:500 15px 'Outfit',sans-serif; letter-spacing:.02em; }
#pageLeadFinder .hero-search-wrap {
  max-width:none; width:100%; height:62px; border-radius:5px; background:rgba(12,18,26,.88);
  border-color:rgba(175,204,222,.18); box-shadow:inset 0 1px rgba(255,255,255,.045),0 16px 48px rgba(0,0,0,.22);
}
#pageLeadFinder .hero-search-icon { margin-left:20px; color:#b2c7d4; }
#pageLeadFinder .hero-search-input { font-size:14px; letter-spacing:.015em; padding-right:18px; }
#pageLeadFinder .hero-add-btn { height:38px; margin-right:11px; padding:0 16px; background:rgba(218,78,53,.16); }
#pageLeadFinder .search-prompt { display:none; }
#pageLeadFinder .school-queue-section { width:100%; max-width:none; border:0; padding:0 0 4px; min-height:0; margin:0; }
#pageLeadFinder .school-queue-header { display:none; }
#pageLeadFinder .school-queue-list { max-height:47px; min-height:0; display:flex; justify-content:center; gap:6px; overflow:auto; }
#pageLeadFinder .school-queue-empty { display:none; }
#pageLeadFinder .school-queue-chip { border-radius:999px; padding:5px 9px; background:rgba(155,181,197,.08); border-color:rgba(155,181,197,.18); }
#pageLeadFinder .school-queue-chip-name { font-size:11px; }
#pageLeadFinder .options-group {
  position:static; display:inline-flex; width:auto; padding:0; margin:9px 7px 0;
  border:0; background:transparent; color:#758796; opacity:.72; vertical-align:top;
}
#pageLeadFinder .options-group .toggle-label { font-size:10px; }
#pageLeadFinder .bulk-search-details {
  position:relative; left:auto; display:inline-block; width:auto; max-width:360px;
  margin:9px 7px 0; padding:0; border:0; text-align:left; vertical-align:top;
}
#pageLeadFinder .bulk-search-details summary { font-size:10px; }
#pageLeadFinder .bulk-search-details[open] {
  padding:11px; background:rgba(9,14,20,.96); border:1px solid rgba(169,198,214,.14);
  border-radius:4px; z-index:8;
}
#pageLeadFinder .run-btn {
  width:auto; min-width:222px; margin:0; padding:11px 15px; border-radius:3px;
  font-size:10px; background:#c94633; box-shadow:0 8px 22px rgba(143,38,25,.18);
}
.network-stage {
  grid-row:2; min-height:0; height:clamp(445px,58vh,650px); width:100%; border:0; overflow:visible;
  align-self:center; margin-top:-8px;
}
.network-stage::before { inset:7% 10% 5%; background:radial-gradient(ellipse at 50% 48%,rgba(48,83,105,.15),transparent 48%),radial-gradient(ellipse at 78% 68%,rgba(203,68,46,.06),transparent 22%); }
.us-map {
  width:min(80vw,1120px); height:100%; transform:none; filter:drop-shadow(0 26px 28px rgba(0,0,0,.45));
}
.map-load-error {
  display:none; position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%);
  color:#8da0ad; font:500 11px 'Outfit',sans-serif; letter-spacing:.08em; text-transform:uppercase;
}
.network-stage:has(.us-map.map-fallback) .map-load-error { display:block; }
.state-region {
  fill:#101923; stroke:rgba(172,204,220,.34); stroke-width:.85;
  transition:fill .24s ease,stroke .24s ease,filter .24s ease; cursor:crosshair;
}
.state-region:nth-child(4n+1) { fill:#111c27; }
.state-region:hover,.state-region.is-hovered {
  fill:#182b3a; stroke:rgba(211,235,244,.82); filter:drop-shadow(0 0 7px rgba(112,178,210,.26));
}
.school-node { cursor:pointer; }
.school-hit {
  fill:transparent !important; stroke:none !important; filter:none !important;
  opacity:0; pointer-events:all;
}
.school-point { fill:#d9edf6; stroke:#f3f7f8; stroke-width:.45; filter:drop-shadow(0 0 4px rgba(200,231,246,.65)); }
.school-badge {
  opacity:0; transform:scale(.45); transform-origin:center; pointer-events:none;
  transition:opacity .2s ease,transform .28s cubic-bezier(.2,.8,.2,1);
}
.school-badge rect { fill:#101720; stroke:rgba(218,235,242,.62); stroke-width:.75; filter:drop-shadow(0 4px 8px rgba(0,0,0,.65)); }
.school-badge text { fill:#edf5f7; font:700 7px 'Outfit',sans-serif; letter-spacing:.03em; }
.school-name {
  opacity:0; pointer-events:none; fill:#eff6f8; font:600 8px 'Outfit',sans-serif;
  paint-order:stroke; stroke:#080b10; stroke-width:3px; transition:opacity .2s ease;
}
.school-node.is-state-revealed .school-badge,.school-node:hover .school-badge,.school-node:focus-visible .school-badge,.school-node.is-selected .school-badge {
  opacity:1; transform:scale(1);
}
.school-node:hover .school-badge,.school-node:focus-visible .school-badge { transform:scale(1.18); }
.school-node:hover .school-name,.school-node:focus-visible .school-name,.school-node.is-selected .school-name { opacity:1; }
.school-node.is-state-revealed .school-name { opacity:.82; }
.node-ring { animation:none; opacity:.08; }
.map-node.is-selected .school-point { fill:#f16e53; filter:drop-shadow(0 0 10px rgba(239,94,66,.65)); }
.map-node.is-selected .school-badge rect { fill:#2a1716; stroke:#f08069; }
.map-node.is-queued .school-point { fill:#e76750; filter:drop-shadow(0 0 7px rgba(231,103,80,.55)); }
.map-node.is-queued .school-badge { opacity:1; transform:scale(.82); }
.map-node.is-queued .school-badge rect { stroke:rgba(232,112,88,.72); }
.map-node.is-selected .node-ring { animation:nodeBeacon 2.4s ease-out infinite; }
.route { stroke:#b9d3df; stroke-width:.7; opacity:.105; }
.route-pulse { opacity:.7; }
.ambient-route { opacity:0; transition:opacity 1.1s ease; }
.ambient-route.is-active { opacity:1; }
.ambient-route .route { opacity:.18; }
.ambient-route .route-pulse { fill:#d4eafa; filter:drop-shadow(0 0 4px rgba(190,226,245,.8)); }
.network-stage.has-target .ambient-route { opacity:.14; }
.user-route { opacity:0; animation:userRouteReveal 4.8s ease both; }
.user-route path {
  fill:none; stroke:#ef6a50; stroke-width:1.05; opacity:.28;
  filter:drop-shadow(0 0 3px rgba(239,106,80,.35));
}
.user-route circle {
  fill:#fff4e8; filter:drop-shadow(0 0 7px rgba(242,104,77,.9));
}
@keyframes userRouteReveal {
  0%{opacity:0} 12%,72%{opacity:1} 100%{opacity:0}
}
.network-readout {
  left:50%; right:auto; bottom:11px; transform:translateX(-50%); width:max-content; min-width:0;
  background:rgba(10,15,21,.92); border:1px solid rgba(181,206,219,.17); border-radius:3px;
  padding:10px 14px; text-align:center; box-shadow:0 12px 32px rgba(0,0,0,.32);
  opacity:0; pointer-events:none; transition:opacity .35s ease,transform .35s ease;
}
.network-readout.has-target { opacity:1; pointer-events:auto; transform:translateX(-50%); }
.network-readout .readout-eyebrow { display:none; }
.network-readout strong { font-size:11px; letter-spacing:.11em; }
.network-readout span { font-size:10px; margin:2px 0 5px; }
.network-readout button { font-size:9px; }
.map-caption { bottom:19px; left:4%; font-size:8px; opacity:.7; }
.network-stats { display:none; }
#pageLeadFinder .progress-col { display:none; }
@media (max-width:768px) {
  #pageLeadFinder .lead-finder-grid { padding:25px 16px 18px; }
  .network-stage { height:48vh; min-height:370px; }
  .network-controls { margin-top:0; }
  .us-map { width:112%; }
  .map-caption { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .route-pulse, .map-node.is-selected .node-ring { animation:none !important; }
}

/* V4 cascade lock: preserve the war-table composition against legacy page rules. */
#pageLeadFinder .lead-finder-grid{display:grid;grid-template-columns:250px minmax(0,1fr);grid-template-rows:auto minmax(580px,1fr);gap:0 22px;max-width:1460px;min-height:calc(100dvh - 92px);padding:0;margin:0 auto}
#pageLeadFinder .lead-finder-hero{grid-column:1/-1;align-items:center;text-align:center;padding:15px 0 8px;justify-content:start}
#pageLeadFinder .command-kicker{justify-content:center;color:#b5b0a8;margin:0 0 8px;font-size:10px}
#pageLeadFinder .search-title{font:600 clamp(22px,2vw,30px)/1 'Syne',sans-serif;letter-spacing:-.045em;text-align:center;margin:0 0 16px;color:#f5f2eb;background:none;-webkit-text-fill-color:initial}
#pageLeadFinder .search-subheading{order:-1;margin:0 0 11px;max-width:none;text-align:center;font:500 11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.15em;color:#9f9a91}
#pageLeadFinder .hero-search-wrap{max-width:760px;width:min(760px,100%);height:58px;border-radius:5px;background:rgba(15,15,15,.82);border-color:rgba(255,255,255,.17)}
#pageLeadFinder .search-prompt{display:none}
#pageLeadFinder .network-controls{grid-column:1;grid-row:2;padding:32px 14px 0 0;border-right:1px solid rgba(255,255,255,.09);position:relative;z-index:6;margin:0}
#pageLeadFinder .school-queue-section{max-width:none;margin-top:20px}#pageLeadFinder .school-queue-list{max-height:120px}
#pageLeadFinder .run-btn{width:100%;font-size:10px}
#pageLeadFinder .network-stage{grid-column:2;grid-row:2;min-height:0;height:calc(100dvh - 160px);border:0;overflow:visible}
#pageLeadFinder .us-map{width:min(100%,1120px);height:100%;transform:translate(1%,0);filter:drop-shadow(0 22px 20px rgba(0,0,0,.72))}
#pageLeadFinder .network-stage::before{inset:7% 1% 10%;background:radial-gradient(ellipse at 52% 55%,rgba(255,255,255,.055),transparent 54%),radial-gradient(ellipse at 80% 70%,rgba(220,39,28,.075),transparent 25%)}
.map-land{fill:#141414!important;stroke:#aaa59d!important}.map-shadow{fill:#090909!important;opacity:.95!important}.map-contours,.route-layer,.user-route-layer,.ambient-route{display:none!important}
.state-region{fill:#141414!important;stroke:#817d76!important}.state-region.is-hovered{fill:#22201d!important;stroke:#d4c293!important}
.map-node .school-hit{fill:transparent!important;stroke:none!important;filter:none!important;transform:none!important}
.map-node .school-point{fill:#f8f5ee!important;stroke:#fff!important;stroke-width:.4!important;filter:drop-shadow(0 0 4px rgba(255,255,255,.8))!important}
.map-node:hover .school-point,.map-node.is-selected .school-point{fill:#dc271c!important;filter:drop-shadow(0 0 9px rgba(220,39,28,.95))!important;transform:scale(1.55)!important;transform-origin:center}
@media(max-width:800px){#pageLeadFinder .lead-finder-grid{display:flex;gap:8px}#pageLeadFinder .lead-finder-hero{padding-top:10px}#pageLeadFinder .network-controls{display:contents!important}.division-rail{order:2;flex-direction:row;border:0;padding:8px 0}.division-rail .rail-label{display:none}.division-tab{flex:1;text-align:center}.activity-rail{display:none}#pageLeadFinder .network-stage{order:3;height:53vh;min-height:360px;width:100%}#pageLeadFinder .school-queue-section{order:4}#pageLeadFinder .options-group,#pageLeadFinder .bulk-search-details{order:6}}

/* V4 projection map state, badges, and signal choreography. */
#pageLeadFinder .us-map.has-state-map .map-land,
#pageLeadFinder .us-map.has-state-map .map-shadow { display:none !important; }
.map-extrusion { transform:translateY(8px); }
#pageLeadFinder .us-map { overflow:visible; }
.map-extrusion path {
  fill:#070707; stroke:#070707; stroke-width:1.5; opacity:.98;
  filter:drop-shadow(0 10px 11px rgba(0,0,0,.74));
}
.state-region {
  fill:#151515 !important; stroke:#817d76 !important; stroke-width:.9;
  vector-effect:non-scaling-stroke;
  transition:opacity .22s ease,fill .22s ease,stroke .22s ease,filter .22s ease;
}
.state-region:nth-child(4n+1) { fill:#171717 !important; }
.us-map.has-state-hover .state-region:not(.is-hovered) { opacity:.2; }
.state-region.is-hovered {
  fill:#26231e !important; stroke:#d4c293 !important;
  filter:drop-shadow(0 0 7px rgba(220,39,28,.48));
}
.state-region.is-targeted { stroke:#dc271c !important; stroke-width:1.25; }
.school-halo { fill:rgba(255,255,255,.08); opacity:0; transition:opacity .18s ease; }
.school-point { transition:fill .18s ease,transform .18s ease,filter .18s ease; transform-box:fill-box; transform-origin:center; }
.school-node:hover .school-halo,.school-node:focus-visible .school-halo,
.school-node.is-selected .school-halo,.school-node.is-queued .school-halo { opacity:1; }
.school-node .school-badge-offset { transition:transform .24s cubic-bezier(.2,.8,.2,1); }
.school-nodes.is-laying-out .school-badge-offset { transition:none; }
.school-node .badge-leader {
  opacity:0; stroke:#8d877d; stroke-width:.65; stroke-dasharray:2 2;
  transition:opacity .2s ease;
}
.school-node.is-state-revealed.has-badge-offset .badge-leader { opacity:.74; }
.school-node .school-badge-hit { fill:transparent !important; stroke:none !important; filter:none !important; }
.school-node.is-state-revealed .school-badge { pointer-events:auto; }
.school-node.is-state-revealed .school-badge,
.school-node:hover .school-badge,
.school-node:focus-visible .school-badge,
.school-node.is-selected .school-badge,
.school-node.is-queued .school-badge {
  display:block; opacity:1; transform:scale(1);
}
.school-node.is-blooming .school-point {
  fill:#c6a45b !important; transform:scale(2.1) !important;
  filter:drop-shadow(0 0 12px rgba(198,164,91,.95)) !important;
}
.school-node.is-user-blooming .school-point {
  fill:#fff !important; transform:scale(2.5) !important;
  filter:drop-shadow(0 0 15px rgba(220,39,28,1)) !important;
}
.map-tooltip {
  position:absolute; transform:translateY(-50%); z-index:80;
  display:flex; align-items:center; gap:9px;
}
.map-tooltip strong { font:inherit; font-weight:500; }
.map-tooltip span { margin-left:0; }
.signal-layer { overflow:visible; pointer-events:none; }
.activity-signal { opacity:1; transition:opacity .28s ease; }
.signal-guide {
  fill:none; vector-effect:non-scaling-stroke;
  stroke:rgba(255,237,197,.18);stroke-width:.9;stroke-linecap:round;
}
.signal-orb { pointer-events:none; }
.signal-orb-glow { fill:url(#fdSignalGlow); }
.signal-orb-pin { fill:#fff9e9; }
.signal-orb-gold { fill:#ffdc8e; }
.signal-orb-hotspot { fill:#fff; }
.signal-terminal {
  fill:rgba(234,191,113,.1);
  stroke:rgba(255,215,148,.75);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.signal-terminal-core {
  fill:#fff2ca;
  filter:drop-shadow(0 0 3px rgba(255,206,119,.9));
}
.network-stage.has-user-signal .activity-signal:not(.is-user) { opacity:.13; }
.signal-arrival { transform-box:fill-box; transform-origin:center; animation:arrival .68s ease-out forwards; }
.signal-arrival.is-user { stroke:#dc271c; stroke-width:1.6; animation-duration:.9s; }
@keyframes arrival { to { r:21; opacity:0; } }
#pageLeadFinder #runButton:not(.is-queue-ready) { display:none; }
#pageLeadFinder .school-queue-chip {
  background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.14);
}
#pageLeadFinder .options-group { color:#8d8982; }
#pageLeadFinder .bulk-search-details[open] {
  background:rgba(10,10,10,.97); border-color:rgba(255,255,255,.14);
}
@media(prefers-reduced-motion:reduce) {
  .school-nodes,.state-region,.school-badge-offset { transition:none !important; }
  .signal-arrival { animation:none !important; }
}

/* ── Formula D1 2027 spatial surface ─────────────────────────────────────── */
:root{--bg:#030303;--surface:#11100f;--surface2:#1a1816;--ink:#f7f4ef;--muted:#aaa49c;--subtle:#6e6962;--accent:#df3025;--accent-hover:#f04b3d;--accent-dim:rgba(223,48,37,.17);--gold:#c8a565;--gold-dim:rgba(200,165,101,.16);--glass-bg:rgba(18,17,16,.68);--glass-border:rgba(255,255,255,.09)}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,sans-serif;background:#030303;letter-spacing:-.01em}
.stadium-lights{background:radial-gradient(ellipse 1000px 650px at 75% 35%,rgba(200,165,101,.045),transparent 64%),radial-gradient(ellipse 650px 540px at 45% 92%,rgba(223,48,37,.055),transparent 70%)}.field-grid{display:none}
.sidebar{width:232px;background:rgba(8,8,8,.78);border-right:1px solid rgba(255,255,255,.065);backdrop-filter:blur(28px)}.sidebar-top{padding:28px 14px}.sidebar-bottom{padding:16px 14px;border:0}.sidebar-brand{align-items:flex-start;margin:0 0 46px;padding:7px 11px}.sidebar-brand .sidebar-logo-img{transform:none;max-width:150px}.sidebar-brand .beta-badge{border:0;background:rgba(255,255,255,.07);border-radius:99px;text-transform:none;font-size:10px;color:var(--muted)}.sidebar-nav{gap:6px}.nav-item{border-radius:14px;padding:11px 13px;font-size:14px;color:#aaa59f}.nav-item svg{width:17px;color:#88827a}.nav-item:hover{background:rgba(255,255,255,.055)}.nav-item.active{border:0;background:linear-gradient(90deg,rgba(223,48,37,.22),rgba(223,48,37,.055));box-shadow:inset 0 1px rgba(255,255,255,.06)}.topbar{height:70px;background:rgba(3,3,3,.55);border:0}.topbar-inner{padding:0 32px}.user-menu{gap:12px}.user-email{font-size:13px;color:#c9c4bd}.user-credits{background:rgba(200,165,101,.12);border:1px solid rgba(200,165,101,.16);border-radius:999px;padding:5px 10px;color:#dbc08c}
.main-content{padding:0 28px 24px}.page-view{max-width:none}#pageLeadFinder{max-width:1560px;margin:auto}
#pageLeadFinder .lead-finder-grid{grid-template-columns:250px minmax(0,1fr);grid-template-rows:auto minmax(620px,1fr);gap:0 24px;min-height:calc(100dvh - 95px);max-width:1520px}
#pageLeadFinder .lead-finder-hero{padding:33px 0 14px}.command-kicker{font-size:11px!important;letter-spacing:.01em!important;color:#97918a!important}.command-kicker b{font-weight:500;color:#d7c297}.search-title{display:none}.search-subheading,#pageLeadFinder .search-subheading{font:600 clamp(27px,2.35vw,38px)/1.1 -apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif!important;letter-spacing:-.045em!important;text-transform:none!important;color:#f8f5ef!important;margin:0 0 18px!important}.hero-search-wrap,#pageLeadFinder .hero-search-wrap{height:64px!important;max-width:790px!important;border-radius:23px!important;background:rgba(24,22,21,.72)!important;border:1px solid rgba(255,255,255,.105)!important;box-shadow:inset 0 1px rgba(255,255,255,.09),0 18px 45px rgba(0,0,0,.3);backdrop-filter:blur(22px)}.hero-search-input{font:16px -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif!important}.hero-add-btn{border-radius:999px!important;background:var(--accent)!important;border:0!important;padding:9px 18px!important;margin-right:7px!important;font:600 13px -apple-system,BlinkMacSystemFont,sans-serif!important}.autocomplete-results{border-radius:18px!important;background:#191715!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:0 22px 50px rgba(0,0,0,.55)!important}
#pageLeadFinder .network-controls{padding:31px 10px 0 0;border:0}.division-rail{flex-direction:row;gap:3px;padding:4px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.06);border-radius:999px}.division-rail .rail-label{display:none}.division-tab{height:34px;flex:1;text-align:center;padding:0;border:0;border-radius:999px;font:500 12px -apple-system,BlinkMacSystemFont,sans-serif!important;letter-spacing:0;color:#9d9891}.division-tab.active{background:rgba(255,255,255,.12);box-shadow:inset 0 1px rgba(255,255,255,.12);color:#fff}.division-tab.active::after{content:"";display:inline-block;width:5px;height:5px;margin:0 0 1px 6px;border-radius:50%;background:var(--accent)}
.conference-rail{display:flex;gap:7px;overflow-x:auto;padding:20px 2px 13px;scrollbar-width:none}.conference-rail::-webkit-scrollbar{display:none}.conference-pill{white-space:nowrap;border:1px solid rgba(255,255,255,.07);border-radius:999px;padding:7px 11px;background:rgba(255,255,255,.035);color:#a8a29b;font:500 11px -apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer;transition:transform .2s ease,background .25s ease,color .25s ease}.conference-pill:hover{transform:translateY(-1px);color:#fff}.conference-pill.active{background:rgba(223,48,37,.16);border-color:rgba(223,48,37,.3);color:#fff}
.activity-rail{border:0;padding:22px 0 10px}.activity-rail .rail-label{font:500 11px -apple-system,BlinkMacSystemFont,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:#aaa49d}.activity-feed{height:195px;gap:8px}.activity-event{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid rgba(255,255,255,.075);border-radius:15px;background:rgba(21,20,19,.61);box-shadow:0 9px 22px rgba(0,0,0,.18);font:12px/1.3 -apple-system,BlinkMacSystemFont,sans-serif!important;color:#b8b2aa;animation:spatialIn .45s cubic-bezier(.22,.8,.25,1)}.activity-event i{display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#d0b06e,#80573a);color:#17120e;font-style:normal;font-size:10px;font-weight:700}.activity-event strong{display:inline;font-weight:650;color:#fff;margin-right:3px}.activity-event b{font-weight:600;color:#e5c785}@keyframes spatialIn{from{opacity:0;transform:translateY(10px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
.school-queue-section{margin-top:15px!important}.school-queue-header{font-family:-apple-system,BlinkMacSystemFont,sans-serif!important}.school-queue-list{display:flex;flex-wrap:wrap;gap:7px;max-height:140px!important;overflow:auto}.school-queue-empty{font:12px/1.5 -apple-system,BlinkMacSystemFont,sans-serif!important;color:#817c75}.school-queue-chip{border:1px solid rgba(255,255,255,.08)!important;border-radius:999px!important;background:rgba(255,255,255,.06)!important}.run-btn,#pageLeadFinder .run-btn{border:0!important;border-radius:999px!important;background:var(--accent)!important;font:600 13px -apple-system,BlinkMacSystemFont,sans-serif!important;letter-spacing:0!important;text-transform:none!important;padding:13px 18px!important;box-shadow:0 9px 25px rgba(112,18,13,.25)!important}.options-group{border:0!important;background:transparent!important;padding:10px 2px!important}
#pageLeadFinder .network-stage{height:calc(100dvh - 175px);min-height:610px;overflow:hidden;border-radius:28px;background:radial-gradient(ellipse at 55% 49%,rgba(255,255,255,.04),transparent 55%)}#pageLeadFinder .network-stage::before{background:radial-gradient(ellipse at 52% 55%,rgba(255,255,255,.04),transparent 48%),radial-gradient(ellipse at 80% 70%,rgba(223,48,37,.075),transparent 30%)}#pageLeadFinder .us-map{width:min(116%,1280px);height:100%;transform:translate(-5%,0);filter:drop-shadow(0 26px 17px rgba(0,0,0,.74))}.map-extrusion{transform:translate(0 7px);opacity:.8}.map-extrusion path{fill:#080807;stroke:rgba(200,165,101,.14);stroke-width:1}.state-region{fill:#171615!important;stroke:rgba(245,240,232,.18)!important;stroke-width:.75!important;transition:fill .3s ease,opacity .3s ease}.state-region:hover{fill:#211e1b!important}.school-nodes{transition:opacity .28s ease,transform .28s ease}.school-nodes.is-switching{opacity:0;transform:scale(.985)}.conference-cluster{cursor:pointer;transition:opacity .28s ease}.cluster-halo{fill:rgba(255,255,255,.035);stroke:rgba(200,165,101,.26);stroke-width:.75}.cluster-core{fill:#1c1916;stroke:rgba(255,255,255,.35);stroke-width:.7}.conference-cluster text{fill:#ebe4d8;font:600 6.5px -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.04em;pointer-events:none}.conference-cluster:hover .cluster-halo{fill:rgba(223,48,37,.16);stroke:#d9b36d}.conference-cluster:hover .cluster-core{fill:#2b211d}.school-node{opacity:0;animation:markerRise .48s cubic-bezier(.22,.8,.25,1) forwards;animation-delay:var(--delay)}@keyframes markerRise{from{opacity:0;transform:translate(var(--x,0),10px) scale(.72)}to{opacity:1}}.school-hit{fill:transparent!important}.school-pedestal{fill:rgba(223,48,37,.12);filter:blur(5px);opacity:.1}.school-badge circle{fill:#1d1a18;stroke:rgba(255,255,255,.42);stroke-width:1.1;filter:drop-shadow(0 5px 8px rgba(0,0,0,.6))}.school-badge image{pointer-events:none}.school-badge text{fill:#f7f2e9;font:700 7px -apple-system,BlinkMacSystemFont,sans-serif;pointer-events:none}.school-node:hover .school-badge,.school-node.is-selected .school-badge{transform:scale(1.25);transform-origin:center}.school-node:hover .school-badge circle,.school-node.is-selected .school-badge circle{stroke:#d9b36d;filter:drop-shadow(0 0 8px rgba(223,48,37,.45))}.school-node.is-queued .school-badge circle{stroke:#df3025;stroke-width:1.7}.school-node.is-blooming .school-pedestal{opacity:1;animation:bloom .65s ease-out}@keyframes bloom{to{transform:scale(2.1);opacity:0}}.map-tooltip{position:absolute!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:14px!important;padding:10px 12px!important;background:rgba(25,23,21,.84)!important;backdrop-filter:blur(16px);box-shadow:0 13px 32px rgba(0,0,0,.42);font-family:-apple-system,BlinkMacSystemFont,sans-serif!important;letter-spacing:0!important}.map-tooltip strong{font-size:12px}.map-tooltip span{display:block;margin:2px 0 0!important;color:#d8b87e!important;font-size:11px}.signal-path{fill:none;stroke:rgba(223,48,37,.27);stroke-width:1}.signal-core{fill:#fff;filter:drop-shadow(0 0 5px #df3025)}.network-readout{border-radius:16px!important;background:rgba(22,20,19,.72)!important;backdrop-filter:blur(18px);border-color:rgba(255,255,255,.1)!important}.network-readout strong{text-transform:none!important;letter-spacing:-.01em!important}
@media(max-width:800px){.sidebar{width:68px}.sidebar-brand{padding:4px;align-items:center}.sidebar-brand .sidebar-logo-img{display:none}.main-content{padding:0 12px 20px}#pageLeadFinder .lead-finder-grid{display:flex;min-height:0}.lead-finder-hero{order:0}.network-controls{display:flex!important;flex-direction:column;order:1;width:100%!important;padding:7px 0!important}.division-rail{order:0}.conference-rail{order:1;padding:14px 1px}.network-stage{order:2!important;width:100%!important;height:54vh!important;min-height:370px!important}.activity-rail{display:none}.school-queue-section{order:3}.options-group{order:5}.search-subheading{font-size:26px!important}}@media(prefers-reduced-motion:reduce){.school-node,.activity-event{animation:none!important}.conference-pill,.division-tab,.school-nodes{transition:none!important}}

/* Conference focus and geographic marker refinements. */
#pageLeadFinder .division-rail {
  display:flex;
  flex-direction:row;
  flex:0 0 auto;
  width:100%;
  box-sizing:border-box;
  gap:6px;
  padding:6px;
}
#pageLeadFinder .division-tab {
  flex:1 1 0;
  min-width:0;
  height:42px;
  padding:0 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
#pageLeadFinder .division-tab.active::after { flex-shrink:0; margin-left:5px; }
.conference-focused .state-region{opacity:.32}
.conference-focused .state-region.is-conference-state{opacity:1;fill:#1d1a17!important;stroke:rgba(217,179,109,.27)!important}
.school-node{animation-name:markerFade!important}
@keyframes markerFade{from{opacity:0}to{opacity:1}}
.school-marker-body>.school-badge{animation:markerBadgeRise .48s cubic-bezier(.22,.8,.25,1) both;animation-delay:var(--delay)}
@keyframes markerBadgeRise{from{opacity:0;transform:translateY(10px) scale(.72)}to{opacity:1;transform:none}}
.school-pedestal{display:none!important}
#pageLeadFinder .school-node .school-badge{display:none!important}
.school-logo-frame{fill:rgba(10,10,10,.94);stroke:rgba(255,255,255,.25);stroke-width:1.1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.68));transition:stroke .2s ease,filter .2s ease}
.school-logo-marker{overflow:visible;pointer-events:none}
.school-logo-marker-inner{display:grid;width:24px;height:24px;place-items:center;overflow:hidden;border-radius:50%}
.school-logo-marker-inner .school-logo{display:block;width:21px!important;height:21px!important;object-fit:contain!important;border-radius:4px!important}
.school-node:hover .school-logo-frame,.school-node:focus-visible .school-logo-frame{stroke:rgba(223,48,37,.9);filter:drop-shadow(0 0 8px rgba(223,48,37,.38))}
.school-node.is-selected .school-logo-frame,.school-node.is-queued .school-logo-frame{stroke:#d9b36c;filter:drop-shadow(0 0 8px rgba(217,179,108,.35))}
.map-tooltip-heading{display:flex;align-items:center;gap:9px}
.map-tooltip-logo{display:grid!important;place-items:center;flex:0 0 30px;width:30px;height:30px;margin:0!important;border-radius:9px;background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(200,165,101,.12));border:1px solid rgba(255,255,255,.12);color:#f8f4ec!important;font-size:9px!important;font-weight:750!important;letter-spacing:.02em!important;overflow:hidden}
.map-tooltip-logo img{display:block;width:24px;height:24px;object-fit:contain}
.map-tooltip-heading strong{max-width:190px;white-space:normal;line-height:1.18}
.map-tooltip>.map-tooltip-heading+span{margin:5px 0 0 39px!important}
.school-node:hover .school-badge,.school-node:focus-visible .school-badge,.school-node.is-selected .school-badge{transform:none!important}
.activity-event .activity-school-logo{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);overflow:hidden}
.activity-event .activity-school-logo .school-logo{width:22px!important;height:22px!important;border-radius:4px!important;object-fit:contain}
.school-node.is-blooming .school-badge circle{animation:schoolLogoBloom .65s ease-out}
.conference-cluster .cluster-logo{pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.68))}
.conference-cluster:hover .cluster-logo{filter:drop-shadow(0 0 5px rgba(223,48,37,.38))}
@keyframes schoolLogoBloom{50%{stroke:#df3025;filter:drop-shadow(0 0 10px rgba(223,48,37,.75))}100%{stroke:rgba(255,255,255,.42)}}
.school-nodes:has(.school-node:hover) .school-node:not(:hover){opacity:.38}
#pageLeadFinder .network-stage,#pageLeadFinder .us-map{overflow:visible}
@media(prefers-reduced-motion:reduce){.school-marker-body>.school-badge{animation:none!important}}

/* ── Living network atmosphere: restrained motion layer ───────────────────── */
#pageLeadFinder .network-stage {
  isolation:isolate;
  background:
    radial-gradient(ellipse 58% 42% at 50% 51%,rgba(255,255,255,.055),transparent 68%),
    radial-gradient(ellipse 36% 30% at 72% 66%,rgba(184,38,27,.105),transparent 72%),
    radial-gradient(ellipse 30% 24% at 27% 31%,rgba(190,145,63,.065),transparent 75%);
}
#pageLeadFinder .network-stage::after {
  content:""; position:absolute; inset:8% 8% 10%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 52%,rgba(220,39,28,.08),transparent 57%);
  filter:blur(22px); opacity:.78; animation:mapHaze 13s ease-in-out infinite alternate;
}
@keyframes mapHaze { from{transform:scale(.96);opacity:.48} to{transform:scale(1.05);opacity:.86} }
#pageLeadFinder .state-layer { transition:opacity .32s ease,filter .32s ease; }
#pageLeadFinder .conference-hover .state-layer { filter:drop-shadow(0 0 5px rgba(198,164,91,.16)); }
#pageLeadFinder .state-region.is-rippled {
  animation:geoRipple 2.6s ease-out infinite;
  stroke:rgba(219,178,100,.58)!important;
}
@keyframes geoRipple { 0%,100%{fill:#1d1a17} 45%{fill:#29231e} }
.cluster-halo {
  animation:conferenceBreath 4.8s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center;
}
.conference-cluster:nth-child(2n) .cluster-halo { animation-delay:-2.1s; }
@keyframes conferenceBreath { 0%,100%{opacity:.58;transform:scale(1)} 50%{opacity:1;transform:scale(1.16)} }
.conference-cluster:hover .cluster-halo,.conference-cluster:focus-visible .cluster-halo {
  animation-duration:2.1s; stroke:#e2c27c; filter:drop-shadow(0 0 6px rgba(223,48,37,.42));
}
.conference-member-ripples{pointer-events:none}
.conference-member-ripple{
  fill:rgba(255,255,255,.7);stroke:rgba(223,48,37,.7);stroke-width:.8;
  transform-box:fill-box;transform-origin:center;
  animation:memberLocationRipple 1.35s ease-out infinite;
  animation-delay:var(--ripple-delay);
}
@keyframes memberLocationRipple{
  0%{opacity:0;transform:scale(.35)}
  24%{opacity:.82}
  100%{opacity:0;transform:scale(3.1)}
}
.school-node .school-logo-frame {
  transition:stroke .25s ease,filter .25s ease,transform .25s cubic-bezier(.2,.8,.2,1);
  transform-box:fill-box;transform-origin:center;
}
.school-logo-aura{
  fill:rgba(223,48,37,.08);opacity:0;
  transform-box:fill-box;transform-origin:center;
  transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1),filter .25s ease;
}
.school-node:hover .school-logo-aura,.school-node:focus-visible .school-logo-aura{
  opacity:.82;transform:scale(1.52);filter:blur(2px) drop-shadow(0 0 8px rgba(223,48,37,.5));
}
.school-node:hover .school-logo-frame,.school-node:focus-visible .school-logo-frame {
  transform:scale(1.16); filter:drop-shadow(0 0 11px rgba(223,48,37,.62));
}
.school-node.is-blooming .school-logo-frame {
  stroke:#e4bf6e!important; transform:scale(1.3);
  filter:drop-shadow(0 0 13px rgba(223,48,37,.8));
}
.school-node .school-marker-motion {
  animation:logoLift .58s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:var(--delay);
}
@keyframes logoLift { from{opacity:0;transform:translateY(11px) scale(.78)} to{opacity:1;transform:translateY(0) scale(1)} }
.signal-arrival { fill:none;stroke:#e0b86e;stroke-width:1.1;animation:arrival .72s ease-out forwards; }
.activity-event { animation:activityClarity .68s cubic-bezier(.2,.8,.2,1); }
@keyframes activityClarity { from{opacity:0;transform:translateY(9px) scale(.96);filter:blur(6px)} to{opacity:1;transform:none;filter:blur(0)} }
body.search-focused #pageLeadFinder .network-stage .state-region { opacity:.88; }
body.search-focused #pageLeadFinder .network-stage .state-region.is-conference-state {
  opacity:1;filter:brightness(1.16) drop-shadow(0 0 4px rgba(255,255,255,.1));
}
body.search-focused #pageLeadFinder .network-stage .school-nodes { opacity:.94; }
body.search-focused #pageLeadFinder .network-stage .cluster-halo,
body.search-focused #pageLeadFinder .network-stage .school-logo-frame { filter:drop-shadow(0 0 8px rgba(255,255,255,.6)); }
body.search-focused #particlesCanvas { opacity:1; filter:brightness(1.38); }
@media(prefers-reduced-motion:reduce) {
  #pageLeadFinder .network-stage::after,.cluster-halo,.state-region.is-rippled,
  .activity-event,.signal-arrival,.conference-member-ripple { animation:none!important; }
  .school-node .school-logo-frame,.conference-cluster .cluster-halo { transition:none!important; }
  #particlesCanvas { opacity:.72; }
}

/* ── Lead Finder polish pass: matte map, readable marks, quiet glass ───────── */
#pageLeadFinder .hero-search-wrap {
  background:rgba(18,18,17,.78)!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.11), inset 0 -1px rgba(0,0,0,.55), 0 20px 52px rgba(0,0,0,.34)!important;
}
#pageLeadFinder .hero-search-wrap:focus-within {
  border-color:rgba(223,48,37,.58)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.12), 0 0 0 3px rgba(223,48,37,.08), 0 22px 55px rgba(0,0,0,.4)!important;
}
#pageLeadFinder .hero-add-btn {
  box-shadow:inset 0 1px rgba(255,255,255,.16), 0 6px 16px rgba(90,12,8,.24);
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease;
}
#pageLeadFinder .hero-add-btn:hover { transform:translateY(-1px); background:#e23a2f!important; box-shadow:inset 0 1px rgba(255,255,255,.2),0 9px 20px rgba(90,12,8,.32); }
#pageLeadFinder .network-stage {
  background:
    radial-gradient(ellipse 62% 52% at 48% 52%,rgba(255,255,255,.052),transparent 66%),
    radial-gradient(ellipse 40% 32% at 72% 68%,rgba(172,35,26,.09),transparent 74%),
    #080807!important;
  border:1px solid rgba(255,255,255,.105)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08), inset 0 -22px 46px rgba(0,0,0,.42), 0 24px 65px rgba(0,0,0,.36)!important;
}
#pageLeadFinder .network-stage::before {
  inset:5% 3% 7%!important;
  background:radial-gradient(ellipse at 50% 54%,rgba(255,255,255,.065),transparent 54%),radial-gradient(ellipse at 79% 73%,rgba(223,48,37,.10),transparent 29%)!important;
  filter:blur(20px);
}
#pageLeadFinder .network-stage::after { opacity:.6; }
#pageLeadFinder .us-map {
  width:min(124%,1360px)!important;
  transform:translate(-6%,0) scale(1.02)!important;
  filter:drop-shadow(0 30px 20px rgba(0,0,0,.82)) drop-shadow(0 0 18px rgba(200,165,101,.07))!important;
}
#pageLeadFinder .map-extrusion path {
  fill:#050505!important;
  stroke:rgba(200,165,101,.2)!important;
  stroke-width:1.3!important;
}
#pageLeadFinder .state-region {
  fill:url(#fdMapMaterial)!important;
  stroke:rgba(245,240,232,.3)!important;
  stroke-width:.9!important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.06));
}
#pageLeadFinder .conference-focused .state-region.is-conference-state {
  fill:#201d19!important;
  stroke:rgba(223,190,119,.48)!important;
}
.conference-cluster .cluster-halo {
  fill:rgba(190,177,153,.1)!important;
  stroke:rgba(223,190,119,.42)!important;
  stroke-width:1!important;
}
.conference-cluster .cluster-core {
  fill:#d7d1c7!important;
  stroke:rgba(255,255,255,.7)!important;
  stroke-width:.9!important;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.65));
}
.conference-cluster .cluster-logo {
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))!important;
}
.school-logo-frame {
  fill:#d3cec3!important;
  stroke:rgba(255,255,255,.68)!important;
  stroke-width:1.1!important;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.72))!important;
}
.school-logo-marker-inner {
  background:rgba(218,213,204,.9);
  box-shadow:inset 0 1px rgba(255,255,255,.5),inset 0 -2px 4px rgba(0,0,0,.16);
}
.school-logo-marker-inner .school-logo { mix-blend-mode:multiply; }
.school-node:hover .school-logo-frame,.school-node:focus-visible .school-logo-frame {
  stroke:#df3025!important;
  filter:drop-shadow(0 0 10px rgba(223,48,37,.52))!important;
}
.school-node.is-selected .school-logo-frame,.school-node.is-queued .school-logo-frame {
  stroke:#e0bb72!important;
  filter:drop-shadow(0 0 10px rgba(217,179,108,.42))!important;
}
#pageLeadFinder .conference-pill,
#pageLeadFinder .division-tab {
  transition:transform .22s ease,background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease;
}
#pageLeadFinder .conference-pill.active {
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 6px 15px rgba(92,17,12,.16);
}
#pageLeadFinder .activity-event,
#pageLeadFinder .school-queue-chip {
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.18);
}
@media(prefers-reduced-motion:reduce) {
  #pageLeadFinder .network-stage::after,
  #pageLeadFinder .network-stage::before,
  .cluster-halo,.state-region.is-rippled,.school-node .school-marker-motion,
  .school-node.is-blooming .school-logo-frame,.conference-member-ripple,
  .activity-event,.signal-arrival { animation:none!important; }
  #pageLeadFinder .hero-add-btn,.conference-pill,.division-tab,
  .school-logo-frame,.school-logo-aura,.school-nodes { transition:none!important; }
}

/* ── Lead Finder focused pass: floating map, no container surface ─────────── */
#pageLeadFinder .lead-finder-hero {
  padding-bottom:0;
}
#pageLeadFinder .network-stage {
  margin-top:-14px;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
#pageLeadFinder .network-stage::before {
  inset:7% 1% 4%!important;
  background:
    radial-gradient(ellipse 52% 28% at 53% 72%,rgba(223,48,37,.07),transparent 72%),
    radial-gradient(ellipse 38% 22% at 37% 78%,rgba(200,165,101,.045),transparent 74%)!important;
  filter:blur(25px);
  opacity:.72;
}
#pageLeadFinder .network-stage::after {
  inset:12% 8% 2%;
  background:radial-gradient(ellipse at 51% 68%,rgba(220,39,28,.055),transparent 62%);
  filter:blur(28px);
  opacity:.48;
}
#pageLeadFinder .us-map {
  width:min(136%,1480px)!important;
  height:108%!important;
  transform:translate(-5%, -2%) scale(1.02)!important;
  filter:drop-shadow(0 25px 18px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(200,165,101,.055))!important;
}
#pageLeadFinder .map-extrusion path {
  fill:#050505!important;
  stroke:rgba(200,165,101,.16)!important;
  stroke-width:1.15!important;
  filter:drop-shadow(0 8px 9px rgba(0,0,0,.58));
}
#pageLeadFinder .state-region {
  fill:url(#fdMapMaterial)!important;
  stroke:rgba(245,240,232,.34)!important;
  stroke-width:.92!important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.055));
}
#pageLeadFinder .conference-focused .state-region.is-conference-state {
  fill:#1d1a17!important;
  stroke:rgba(223,190,119,.44)!important;
}
#pageLeadFinder .network-controls {
  padding-top:22px;
}
#pageLeadFinder .division-rail {
  background:rgba(255,255,255,.042);
  border-color:rgba(255,255,255,.052);
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 12px 28px rgba(0,0,0,.12);
}
#pageLeadFinder .conference-pill {
  background:rgba(255,255,255,.026);
  border-color:rgba(255,255,255,.055);
}
#pageLeadFinder .conference-pill.active {
  background:rgba(223,48,37,.14);
}
@media(max-width:800px) {
  #pageLeadFinder .network-stage {
    margin-top:0;
  }
  #pageLeadFinder .us-map {
    width:124%!important;
    height:104%!important;
    transform:translate(-5%,-1%) scale(1.01)!important;
  }
}
@media(min-width:2200px) {
  #pageLeadFinder .network-controls {
    left:-190px;
  }
}
@media(prefers-reduced-motion:reduce) {
  #pageLeadFinder .network-stage::before,
  #pageLeadFinder .network-stage::after {
    animation:none!important;
  }
}

/* Map scene crossfades share the same uninterrupted camera transition. */
#pageLeadFinder .school-nodes .map-scene {
  opacity:1;
  transform:scale(1);
  transform-box:view-box;
  transform-origin:center;
  transition:opacity .34s cubic-bezier(.25,.1,.25,1),transform .48s cubic-bezier(.25,.1,.25,1);
}
#pageLeadFinder .school-nodes .map-scene.is-entering { opacity:0;transform:scale(.975);pointer-events:none; }
#pageLeadFinder .school-nodes .map-scene.is-leaving { opacity:0;transform:scale(1.02);pointer-events:none; }
#pageLeadFinder .map-scene .school-node,
#pageLeadFinder .map-scene .school-marker-motion { opacity:1;animation:none!important; }
#pageLeadFinder .school-leader {
  stroke:rgba(219,195,145,.36);
  stroke-width:.8;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}
/* A single map-level shadow is cheaper than a filter on every state during camera movement. */
#pageLeadFinder .state-region { filter:none; }
#pageLeadFinder .map-extrusion path { filter:none; }
@media(prefers-reduced-motion:reduce) {
  #pageLeadFinder .school-nodes .map-scene { transition:none!important; }
}

/* Athlete journey: small contextual actions without replacing the existing visual system. */
#pageLeadFinder .athlete-hero-description {
  margin:-8px 0 18px;
  color:#bbb2a7;
  font:400 14px/1.5 -apple-system,BlinkMacSystemFont,sans-serif;
}
#pageLeadFinder .school-snapshot {
  position:relative;
  z-index:35;
  max-width:790px;
  padding:16px 18px;
  margin:12px 0;
  border:1px solid rgba(214,184,124,.23);
  border-radius:18px;
  background:rgba(27,24,22,.97);
  box-shadow:0 16px 36px rgba(0,0,0,.34);
}
.school-snapshot-top { display:flex;align-items:center;justify-content:space-between;gap:16px;color:#f8f4ec;font-size:15px; }
.school-snapshot-top .snapshot-close { border:0;background:transparent;color:#b8ada1;cursor:pointer;font-size:22px; }
.school-snapshot-detail { display:flex;flex-wrap:wrap;gap:5px 15px;margin:9px 0 13px;color:#d5c6b0;font:12px/1.5 -apple-system,BlinkMacSystemFont,sans-serif;white-space:normal; }
.school-snapshot-detail b { color:#aaa19a;font-weight:500;margin-right:4px; }
.school-snapshot-actions { display:flex;gap:8px;flex-wrap:wrap; }
.school-snapshot-actions button,.athlete-school-outreach,.athlete-selection-bar button {
  border:1px solid rgba(223,48,37,.5);border-radius:10px;padding:9px 13px;
  background:#df3025;color:white;cursor:pointer;font:600 12px -apple-system,BlinkMacSystemFont,sans-serif;
}
.school-snapshot-actions .snapshot-add { background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#f5eee6; }
#pageLeadFinder .map-tooltip {
  display:block;width:270px;max-width:calc(100vw - 95px);padding:13px;
  white-space:normal;pointer-events:auto;transform:none;z-index:90;
}
#pageLeadFinder .map-tooltip .school-snapshot-detail { display:flex;gap:4px 12px;margin:10px 0; }
#pageLeadFinder .map-tooltip .school-snapshot-detail span { display:inline;color:#d5c6b0!important;font-size:11px;margin:0!important; }
#pageLeadFinder .map-tooltip .school-snapshot-actions button { padding:8px 10px; }
/* Map snapshots live at document level so the clipped map cannot cut off the card. */
body > .map-tooltip.school-map-snapshot {
  position:fixed!important;
  z-index:120;
  display:block;
  width:340px;
  max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
  padding:12px!important;
  border:1px solid rgba(214,184,124,.32)!important;
  border-radius:17px!important;
  background:rgba(22,20,19,.98)!important;
  box-shadow:0 22px 65px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.04) inset;
  color:#f7f1e8;
  white-space:normal;
  pointer-events:auto;
  transform:none;
  font:12px/1.45 -apple-system,BlinkMacSystemFont,sans-serif;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif!important;
  letter-spacing:normal;
  scrollbar-width:thin;
}
body > .map-tooltip.school-map-snapshot[data-kind="cluster"] {
  width:auto;
  padding:9px 12px;
  color:#e9d3aa;
  font:500 11px 'DM Mono',monospace;
}
.school-map-snapshot .snapshot-gallery {
  display:flex;
  gap:5px;
  height:82px;
  margin-bottom:9px;
}
.school-map-snapshot .snapshot-photo {
  position:relative;
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
  border-radius:9px;
  background:#24201d;
}
.school-map-snapshot .snapshot-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.school-map-snapshot .snapshot-photo span {
  position:absolute;
  bottom:6px;
  left:7px;
  margin:0;
  padding:2px 6px;
  border-radius:4px;
  background:rgba(12,11,10,.8);
  color:#f2eee7;
  font:600 9px 'DM Mono',monospace;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.school-map-snapshot .map-tooltip-heading {
  display:flex;
  align-items:center;
  gap:9px;
}
.school-map-snapshot .map-tooltip-logo {
  display:grid;
  place-items:center;
  flex:none;
  width:36px;
  height:36px;
  margin:0;
  border-radius:9px;
  background:#302a25;
  overflow:hidden;
}
.school-map-snapshot .map-tooltip-logo img { width:28px;height:28px;object-fit:contain; }
.school-map-snapshot .snapshot-title { display:grid;min-width:0;gap:1px; }
.school-map-snapshot .snapshot-title strong {
  color:#fff9ee;
  font:700 14px/1.2 -apple-system,BlinkMacSystemFont,sans-serif;
}
.school-map-snapshot .snapshot-title span {
  margin:0;
  color:#b9aa98;
  font:11px/1.3 -apple-system,BlinkMacSystemFont,sans-serif;
}
.school-map-snapshot .school-snapshot-detail {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin:8px 0;
  padding:8px 0;
  border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.school-map-snapshot .school-snapshot-detail span {
  display:grid;
  gap:2px;
  min-width:0;
  margin:0;
  color:#eee3d5;
  font:600 11px/1.3 -apple-system,BlinkMacSystemFont,sans-serif;
  overflow-wrap:anywhere;
}
.school-map-snapshot .school-snapshot-detail b,
.school-map-snapshot .snapshot-copy b {
  color:#a79378;
  font:600 9px/1.2 'DM Mono',monospace;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.school-map-snapshot .snapshot-copy p {
  margin:0 0 5px;
  color:#c8bdb0;
  font:11px/1.45 -apple-system,BlinkMacSystemFont,sans-serif;
}
.school-map-snapshot .snapshot-copy b { margin-right:4px; }
.school-map-snapshot .school-snapshot-actions { display:flex;gap:7px;margin-top:7px; }
.school-map-snapshot .school-snapshot-actions button {
  flex:1;
  min-width:0;
  padding:9px 6px;
  border:1px solid rgba(223,48,37,.5);
  border-radius:9px;
  background:#df3025;
  color:white;
  cursor:pointer;
  font:600 11px -apple-system,BlinkMacSystemFont,sans-serif;
}
.school-map-snapshot .school-snapshot-actions button:hover { filter:brightness(1.14); }
.school-map-snapshot .school-snapshot-actions button:focus-visible { outline:2px solid #efd09a;outline-offset:2px; }
.school-map-snapshot .school-snapshot-actions .snapshot-add {
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
  color:#f5eee6;
}
.school-map-snapshot .school-snapshot-actions .snapshot-add.is-added {
  border-color:rgba(214,184,124,.42);
  color:#e9d4a9;
}
#pageLeadFinder .athlete-search-feedback {
  margin:10px 0;padding:11px 14px;border-radius:12px;
  border:1px solid rgba(214,184,124,.24);background:rgba(214,184,124,.08);
  color:#e9d5ac;font-size:13px;
}
.athlete-flow-context { color:#ada59d;font-size:13px;line-height:1.5;margin:5px 0 18px; }
.athlete-recommended { margin:4px 0 25px;padding:18px;border:1px solid rgba(214,184,124,.22);border-radius:16px;background:rgba(214,184,124,.045); }
.athlete-recommended h3,.athlete-all-staff-title { margin:0 0 8px;color:#f7f0e8;font-size:17px; }
.athlete-recommended p { color:#aaa19a;font-size:12px;margin:0 0 14px; }
.athlete-recommended-list { display:grid;gap:8px;margin-bottom:16px; }
.athlete-recommended-row { display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06); }
.athlete-recommended-row strong { color:#f8f4ec; }
.athlete-recommended-row>span { color:#ada59d;font-size:12px; }
.athlete-contact-actions { display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:8px; }
.athlete-recommended-row .athlete-contact-actions { margin:0 0 0 auto; }
.athlete-contact-actions a,.athlete-contact-actions button,.athlete-action-unavailable {
  border:1px solid rgba(255,255,255,.17);border-radius:8px;background:rgba(255,255,255,.055);
  color:#f3e9df;padding:7px 10px;text-decoration:none;cursor:pointer;font:600 11px -apple-system,BlinkMacSystemFont,sans-serif;
}
.athlete-contact-actions .athlete-add-outreach { border-color:rgba(214,184,124,.38);color:#ebcb9d; }
.athlete-action-unavailable { opacity:.45;cursor:default; }
.athlete-contact-actions button:disabled { opacity:.45;cursor:not-allowed; }
.athlete-all-staff-title { margin:10px 0 14px; }
.athlete-selection-bar { position:sticky;top:10px;z-index:20;margin:10px 0 16px; }
.athlete-selection-bar button { width:100%;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.35); }
.athlete-result-banner {
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 18px;padding:14px 18px;border:1px solid rgba(214,184,124,.27);
  border-radius:15px;background:rgba(214,184,124,.07);
  color:#ede5d9;font-size:13px;
}
.athlete-result-banner strong { color:#f7f2e8;font-size:16px; }
.athlete-result-banner button {
  margin-left:auto;border:0;border-radius:9px;padding:10px 14px;
  color:#fff;background:#df3025;font-weight:600;cursor:pointer;
}
@media(max-width:800px) {
  #pageLeadFinder .athlete-hero-description { font-size:12px;margin:0 0 12px; }
  .athlete-recommended-row .athlete-contact-actions { width:100%;margin:6px 0 0; }
}

/* ── My Contacts / open vault treatment ─────────────────────────────────────
   A deliberate, single-column reading surface: schools are the index, people
   are the detail. Keep this block page-scoped so the rest of the app retains
   its existing glass/card language. */
#pageMyDatabase {
  max-width: 920px;
  margin: 0 auto;
  padding: 22px 0 84px;
  color: #f3f0ea;
}

#pageMyDatabase .page-header {
  justify-content: flex-start;
  align-items: flex-end;
  gap: 14px;
  margin: 0 0 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.13);
}

#pageMyDatabase .page-title,
#pageMyDatabase .page-header h1 {
  margin: 0;
  color: #f7f3ec;
  background: none;
  -webkit-text-fill-color: initial;
  font: 700 clamp(30px, 5vw, 48px)/.98 'Syne', sans-serif;
  letter-spacing: -.055em;
  text-align: left;
}

#pageMyDatabase .info-toggle {
  margin-bottom: 2px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
}

#pageMyDatabase .info-note {
  flex-basis: 100%;
  margin-top: 4px;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid rgba(198,164,91,.3);
  border-radius: 0;
  background: transparent;
  color: #cdbb91;
}

#pageMyDatabase .athlete-result-banner,
#pageMyDatabase .vault-sidebar,
#pageMyDatabase .vault-layout > .vault-sidebar {
  display: none !important;
}

#pageMyDatabase .vault-layout,
#pageMyDatabase .vault-main {
  display: block;
  width: 100%;
}

#pageMyDatabase .vault-main > .card,
#pageMyDatabase .vault-main > section.card,
#pageMyDatabase .glow-card {
  padding: 0 !important;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#pageMyDatabase .vault-main > .card::before,
#pageMyDatabase .vault-main > section.card::before {
  display: none;
}

#pageMyDatabase .vault-main > .card > .card-title,
#pageMyDatabase .vault-main > section.card > .card-title {
  margin: 0 0 10px;
  color: #8f8a81;
  font: 500 10px/1 'DM Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

#pageMyDatabase #positionPromptContainer {
  margin: 0 0 24px;
}

#pageMyDatabase #positionPromptContainer > * {
  padding: 12px 0;
  border: 0;
  border-top: 1px solid rgba(198,164,91,.38);
  border-bottom: 1px solid rgba(198,164,91,.22);
  border-radius: 0;
  background: rgba(198,164,91,.035);
  color: #cfc4aa;
  box-shadow: none;
}
#pageMyDatabase .contacts-position-setup summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 6px 12px;
  color: #dfcfaa;
  font: 500 12px 'Outfit', sans-serif;
  cursor: pointer;
  list-style: none;
}
#pageMyDatabase .contacts-position-setup summary::-webkit-details-marker { display: none; }
#pageMyDatabase .contacts-position-setup summary span {
  color: #9b907b;
  font: 10px 'DM Mono', monospace;
  white-space: nowrap;
}
#pageMyDatabase .contacts-position-content { padding: 12px; }
#pageMyDatabase .contacts-position-content .position-prompt-sub { margin: 0 0 12px; color: #aaa49b; font-size: 12px; }

#pageMyDatabase #positionPromptContainer button,
#pageMyDatabase #positionPromptContainer input,
#pageMyDatabase #positionPromptContainer select {
  position: relative;
  z-index: 1;
}

#pageMyDatabase .vault-accordion {
  display: block;
  border-top: 1px solid rgba(255,255,255,.14);
}

#pageMyDatabase .vault-item {
  position: relative;
  z-index: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  border-radius: 0;
  /* Solid-enough fallback keeps school rows readable without backdrop-filter. */
  background: rgba(18,17,15,.92);
  box-shadow: none;
  overflow: visible;
  transition: background-color .2s ease, opacity .2s ease, transform .2s ease;
}

#pageMyDatabase .vault-item:hover,
#pageMyDatabase .vault-item:focus-within,
#pageMyDatabase .vault-item.is-open {
  z-index: 6;
}

@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
  #pageMyDatabase .vault-item {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background: rgba(18,17,15,.78);
  }
}

#pageMyDatabase .vault-item:hover,
#pageMyDatabase .vault-item.is-open {
  border-color: rgba(255,255,255,.16);
  background: rgba(27,20,18,.84);
}

#pageMyDatabase .vault-item-top {
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 4px 15px 0;
  background: transparent;
}

#pageMyDatabase .vault-drag-handle {
  width: 25px;
  min-width: 25px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #64615c;
  cursor: grab;
}

#pageMyDatabase .vault-drag-handle:hover { color: var(--gold); }
#pageMyDatabase .vault-drag-handle:active { cursor: grabbing; }

#pageMyDatabase .vault-item-header {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(190px, 1.15fr) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

#pageMyDatabase .vault-item-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

#pageMyDatabase .vault-item-identity img,
#pageMyDatabase .vault-item-identity svg {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 34px;
}

#pageMyDatabase .vault-item-name-wrap { min-width: 0; }
#pageMyDatabase .vault-item-name {
  display: block;
  overflow: hidden;
  color: #f4f0e9;
  font: 600 17px/1.2 'Outfit', sans-serif;
  letter-spacing: -.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pageMyDatabase .vault-item-updated {
  display: block;
  margin-top: 4px;
  color: #77736c;
  font: 10px 'DM Mono', monospace;
}

#pageMyDatabase .vault-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: #aaa49b;
  font: 11px 'DM Mono', monospace;
}

#pageMyDatabase .vault-meta-good { color: #c6a45b; }
#pageMyDatabase .vault-meta-warn { color: #b8785f; }
#pageMyDatabase .vault-meta-dot { color: #4c4a46; }

#pageMyDatabase .vault-item-view {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  color: #c9c1b5;
  font: 500 10px 'DM Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
#pageMyDatabase .vault-item-header:hover .vault-item-view { color: #e5c982; }

#pageMyDatabase .vault-chevron {
  color: #8e8980;
  transition: transform .24s ease, color .2s ease;
}
#pageMyDatabase .vault-item-header:hover .vault-chevron { color: var(--gold); }

#pageMyDatabase .vault-item-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 2px;
}

#pageMyDatabase .vault-source-link,
#pageMyDatabase .vault-school-delete {
  color: #89847c;
  font-size: 11px;
}
#pageMyDatabase .vault-source-link:hover { color: var(--gold); }
#pageMyDatabase .vault-school-delete:hover { color: var(--accent-hover); }

#pageMyDatabase .contacts-school-menu {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  z-index: 5;
}
#pageMyDatabase .contacts-school-menu summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 44px;
  color: #aaa49b;
  font: 22px 'Outfit', sans-serif;
  list-style: none;
  cursor: pointer;
}
#pageMyDatabase .contacts-school-menu summary:hover { color: #d1b871; }
#pageMyDatabase .contacts-school-menu summary::-webkit-details-marker { display: none; }
#pageMyDatabase .contacts-school-menu-options {
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid rgba(198,164,91,.35);
  background: #1b1917;
  box-shadow: 0 14px 30px rgba(0,0,0,.5);
}
#pageMyDatabase .contacts-school-menu-options a,
#pageMyDatabase .contacts-school-menu-options button {
  display: block;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  text-align: left;
  font: 12px 'Outfit', sans-serif;
  cursor: pointer;
}
#pageMyDatabase .contacts-school-menu-options a:hover,
#pageMyDatabase .contacts-school-menu-options button:hover { background: rgba(255,255,255,.06); }

#pageMyDatabase .vault-item-body {
  margin: 0 0 18px 37px;
  padding: 0 0 8px;
  border-left: 1px solid rgba(255,255,255,.1);
  background: transparent;
}

#pageMyDatabase .vault-item-body.hidden { display: none; }

#pageMyDatabase .athlete-recommended {
  margin: 0 0 24px;
  padding: 17px 20px 18px;
  border: 0;
  border-top: 1px solid rgba(198,164,91,.4);
  border-bottom: 1px solid rgba(198,164,91,.2);
  border-radius: 0;
  background: rgba(198,164,91,.035);
}

#pageMyDatabase .athlete-recommended h3,
#pageMyDatabase .athlete-all-staff-title {
  margin: 0 0 6px;
  color: #f3eee5;
  font: 600 15px/1.2 'Syne', sans-serif;
}
#pageMyDatabase .athlete-recommended p {
  margin: 0 0 12px;
  color: #969087;
  font-size: 12px;
}
#pageMyDatabase .athlete-recommended-list { display: block; margin: 0; }

#pageMyDatabase .athlete-recommended-row,
#pageMyDatabase .contacts-coach-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: transparent;
}

#pageMyDatabase .athlete-recommended-row strong,
#pageMyDatabase .contacts-coach-name {
  color: #f3efe8;
  font-weight: 600;
}
#pageMyDatabase .athlete-recommended-row > span,
#pageMyDatabase .contacts-coach-role {
  color: #969087;
  font-size: 12px;
}

#pageMyDatabase .athlete-contact-actions {
  margin: 0 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

#pageMyDatabase .athlete-contact-actions a,
#pageMyDatabase .athlete-contact-actions button,
#pageMyDatabase .email-copy-btn {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 3px;
  background: rgba(255,255,255,.035);
  color: #e6dfd5;
  font: 500 11px 'DM Mono', monospace;
  text-decoration: none;
  cursor: pointer;
}
#pageMyDatabase .athlete-contact-actions a:hover,
#pageMyDatabase .athlete-contact-actions button:hover,
#pageMyDatabase .email-copy-btn:hover {
  border-color: rgba(198,164,91,.7);
  color: #e5c982;
}
#pageMyDatabase .athlete-contact-actions .contact-email-action:disabled,
#pageMyDatabase .athlete-contact-actions .contact-email-action:disabled:hover {
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.025);
  color: #89847c;
  opacity: .62;
  cursor: not-allowed;
}
#pageMyDatabase .athlete-contact-actions .athlete-add-outreach {
  border-color: rgba(220,39,28,.55);
  color: #ec8d82;
}
#pageMyDatabase .athlete-action-unavailable { opacity: 1; color: #c6a45b; }
#pageMyDatabase .athlete-contact-actions button:disabled:not(.contact-email-action) { opacity: 1; cursor: pointer; }

#pageMyDatabase .contacts-coach-info {
  min-width: 150px;
  flex: 1 1 190px;
}
#pageMyDatabase .contacts-coach-name,
#pageMyDatabase .contacts-coach-role { display: block; }
#pageMyDatabase .contacts-coach-role { margin-top: 3px; }

#pageMyDatabase .contacts-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 36px;
  flex: 0 0 auto;
  cursor: pointer;
}
#pageMyDatabase .contacts-select input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
#pageMyDatabase .contacts-checkbox-ui {
  width: 17px;
  height: 17px;
  display: block;
  border: 1px solid #65615a;
  border-radius: 2px;
  background: #101010;
}
#pageMyDatabase .contacts-select input:checked + .contacts-checkbox-ui {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px #101010;
}

#pageMyDatabase .contacts-all-staff {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
#pageMyDatabase .contacts-all-staff.is-expanded { grid-template-rows: 1fr; }
#pageMyDatabase .contacts-staff-toggle {
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: transparent;
  color: #c7c1b8;
  text-align: left;
  font: 500 11px 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .11em;
  cursor: pointer;
}
#pageMyDatabase .contacts-staff-toggle:hover { color: #e5c982; }
#pageMyDatabase .contacts-all-staff-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .28s ease;
}
#pageMyDatabase .contacts-all-staff.is-expanded .contacts-all-staff-inner {
  opacity: 1;
}
#pageMyDatabase .contacts-staff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 5px;
  color: #8d877e;
  font: 10px 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .1em;
}

#pageMyDatabase .vault-contacts-grid { display: block; }
#pageMyDatabase .vault-contact-card {
  display: grid;
  grid-template-columns: 20px minmax(120px,1fr) minmax(0,auto) 26px;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  background: transparent;
}
#pageMyDatabase .vault-contact-card:hover { background: rgba(255,255,255,.025); }
#pageMyDatabase .contacts-select-placeholder { display: block; width: 17px; height: 17px; }
#pageMyDatabase .contacts-select:has(input:focus-visible) .contacts-checkbox-ui {
  outline: 2px solid #e5c982;
  outline-offset: 3px;
}
#pageMyDatabase .vault-cc-position { color: #8e8981; font-size: 11px; }
#pageMyDatabase .vault-cc-name { color: #eee9e0; font-size: 14px; font-weight: 600; }
#pageMyDatabase .vault-cc-divider { display: none; }
#pageMyDatabase .vault-cc-contacts { color: #aaa39a; font: 11px 'DM Mono', monospace; }
#pageMyDatabase .vault-cc-actions { display: flex; align-items: center; gap: 8px; }
#pageMyDatabase .vault-contact-delete { color: #736e67; }
#pageMyDatabase .vault-contact-delete:hover { color: var(--accent-hover); }

#pageMyDatabase .athlete-selection-bar {
  position: sticky;
  top: 12px;
  z-index: 20;
  margin: 0 0 14px;
  padding: 8px;
  border: 1px solid rgba(220,39,28,.45);
  border-radius: 3px;
  background: rgba(22,8,7,.94);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
#pageMyDatabase .athlete-selection-bar button {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 2px;
  background: var(--accent);
  color: #fff;
  font: 600 12px 'DM Mono', monospace;
  cursor: pointer;
}

#pageMyDatabase button:focus-visible,
#pageMyDatabase a:focus-visible,
#pageMyDatabase [tabindex]:focus-visible {
  outline: 2px solid #e5c982;
  outline-offset: 3px;
}

#pageMyDatabase .vault-item.drag-over {
  border-top: 1px solid var(--gold);
  background: rgba(198,164,91,.055);
}
#pageMyDatabase .vault-item.is-dragging { opacity: .48; }

@media (max-width: 700px) {
  #pageMyDatabase { padding: 12px 0 60px; }
  #pageMyDatabase .page-header { margin-bottom: 22px; padding-bottom: 15px; }
  #pageMyDatabase .vault-item-top { align-items: flex-start; }
  #pageMyDatabase .vault-item-header {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 7px 10px;
  }
  #pageMyDatabase .vault-item-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-left: 47px;
  }
  #pageMyDatabase .vault-item-body { margin-left: 12px; }
  #pageMyDatabase .contacts-coach-row,
  #pageMyDatabase .athlete-recommended-row {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 12px 8px;
  }
  #pageMyDatabase .athlete-contact-actions {
    width: 100%;
    margin: 2px 0 0;
    justify-content: flex-start;
  }
  #pageMyDatabase .vault-contact-card {
    grid-template-columns: 20px minmax(0,1fr) 26px;
    gap: 8px;
    padding: 12px 8px;
  }
  #pageMyDatabase .contacts-coach-info { grid-column: 2; }
  #pageMyDatabase .vault-contact-delete { grid-column: 3; grid-row: 1; }
  #pageMyDatabase .athlete-contact-actions { grid-column: 2 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  #pageMyDatabase *,
  #pageMyDatabase *::before,
  #pageMyDatabase *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* Formula D1 native Gmail sending */
.ocq-chip-scheduled { background:rgba(212,175,55,.10); color:#d4af37; border-color:rgba(212,175,55,.24); }
.ocq-chip-sending { background:rgba(96,202,255,.08); color:#7dd3fc; border-color:rgba(96,202,255,.2); }
.ocq-chip-failed { background:rgba(248,113,113,.08); color:#f87171; border-color:rgba(248,113,113,.2); }

.ocq-native-send-row {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.ocq-schedule-btn,
.ocq-schedule-confirm {
  min-height:48px;
  padding:0 20px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  font:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .15s ease;
}
.ocq-schedule-btn:hover:not(:disabled),
.ocq-schedule-confirm:hover:not(:disabled) {
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}
.ocq-schedule-btn:disabled,
.ocq-schedule-confirm:disabled {
  opacity:.35;
  cursor:not-allowed;
  transform:none;
}
.ocq-schedule-panel {
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.ocq-schedule-panel > label {
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.ocq-schedule-panel > div {
  display:flex;
  gap:8px;
  align-items:center;
}
.ocq-schedule-panel input {
  min-height:44px;
  flex:1;
  min-width:0;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:9px;
  background:rgba(255,255,255,.04);
  color:var(--ink);
  color-scheme:dark;
  font:inherit;
}
.ocq-schedule-panel small {
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:11px;
}
.ocq-send-meta {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:11px;
}
.ocq-send-error {
  padding:10px 12px;
  border:1px solid rgba(248,113,113,.14);
  border-radius:9px;
  background:rgba(248,113,113,.05);
  color:#fca5a5;
  font-size:12px;
  line-height:1.45;
}
.ocq-connect-send,
.ocq-scheduled-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.ocq-connect-send > div,
.ocq-scheduled-card > div {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ocq-connect-send strong,
.ocq-scheduled-card strong {
  color:var(--ink);
  font-size:13px;
}
.ocq-connect-send span,
.ocq-scheduled-card span {
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}
.ocq-primary-secondary {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:var(--ink);
}
.ocq-tracking-card {
  padding:16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.ocq-tracking-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.ocq-tracking-head > div {
  display:flex;
  flex-direction:column;
  gap:3px;
}
.ocq-tracking-kicker {
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.ocq-tracking-head strong {
  color:var(--ink);
  font-size:14px;
}
.ocq-tracking-provider {
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  color:var(--muted);
  font-size:10px;
}
.ocq-tracking-metrics {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.ocq-tracking-metrics > div {
  padding:12px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  background:rgba(0,0,0,.12);
}
.ocq-tracking-metrics span,
.ocq-tracking-metrics small {
  display:block;
  color:var(--muted);
  font-size:10px;
}
.ocq-tracking-metrics strong {
  display:block;
  margin:4px 0;
  color:var(--ink);
  font-size:24px;
}
.ocq-tracking-note {
  margin:0;
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
}

@media (max-width: 640px) {
  .ocq-native-send-row,
  .ocq-schedule-panel > div,
  .ocq-connect-send,
  .ocq-scheduled-card {
    align-items:stretch;
    flex-direction:column;
  }
  .ocq-native-send-row > *,
  .ocq-schedule-panel button,
  .ocq-connect-send button,
  .ocq-scheduled-card button {
    width:100%;
  }
  .ocq-tracking-metrics {
    grid-template-columns:1fr;
  }
}