@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700;800;900&display=swap');

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

:root {
  --red:      #C8102E;
  --ink:      #0F0F0F;   /* body text — flips light in dark mode */
  --card:     #FFFFFF;   /* card/panel surfaces */
  --red-dark: #9E0A22;
  --red-soft: #FFF1F3;
  --black:    #0F0F0F;
  --white:    #FFFFFF;
  --cream:    #FDFCF8;
  --light:    #F4F2ED;
  --border:   #E2E0D9;
  --muted:    #6E6A63;
  /* keep gray scale for browse page */
  --gray-900: #111827;
  --gray-700: #374151;
  --gray-600: #4B5563;
  --gray-500: #6B7280;
  --gray-400: #9CA3AF;
  --gray-200: #E5E7EB;
  --gray-100: #F3F4F6;
  --gray-50:  #F9FAFB;
  --shadow:   0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg:0 16px 48px rgba(0,0,0,0.12);
  --radius:   14px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--white);
  color: var(--ink);
  transition: background .2s ease, color .2s ease;
  -webkit-font-smoothing: antialiased;
}

/* ─── NAVBAR ──────────────────────────────────────────────────────── */
#navbar {
  background: var(--black);
  height: 60px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}
.nav-logo-badge {
  width: 34px; height: 34px; flex-shrink: 0;
  background: white;
  border-radius: 6px;
  display: grid; place-items: center;
  padding: 4px;
}
.nav-logo-badge img { width: 100%; height: 100%; object-fit: contain; }
.nav-logo-stack { display: flex; flex-direction: column; }
.nav-logo-name { font-size: 13px; font-weight: 800; color: white; letter-spacing: -.2px; }
.nav-logo-sub  { font-size: 10px; color: rgba(255,255,255,.4); font-weight: 500; }

.nav-spacer { flex: 1; }

.nav-btn {
  border: 1.5px solid rgba(255,255,255,.25);
  color: white;
  font-size: 13px; font-weight: 700;
  padding: 8px 20px;
  text-decoration: none;
  transition: all .15s;
  letter-spacing: .01em;
}
.nav-btn:hover { background: white; color: var(--ink); border-color: white; }

/* ─── HERO ────────────────────────────────────────────────────────── */
.hero {
  background: var(--black);
  position: relative;
  overflow: hidden;
}
.hero::before { content: ''; display: block; height: 4px; background: var(--red); }

.hero-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: gridDrift 18s linear infinite;
}
@keyframes gridDrift {
  from { background-position: 0 0; }
  to   { background-position: 56px 56px; }
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px 0;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: end;
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.42);
  margin-bottom: 28px;
}
.hero-eyebrow-line { width: 32px; height: 1px; background: rgba(255,255,255,.42); }

.hero-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(56px, 6vw, 88px);
  line-height: .98;
  letter-spacing: -1px;
  color: white;
  margin-bottom: 28px;
}
.hero-title em { font-style: italic; color: var(--red); }

.hero-sub {
  font-size: 16px; line-height: 1.7;
  color: rgba(255,255,255,.5);
  max-width: 480px;
  margin-bottom: 44px;
}

.hero-actions { display: flex; gap: 12px; align-items: center; margin-bottom: 64px; }

.btn-red {
  background: var(--red); color: white;
  font-size: 14px; font-weight: 800;
  padding: 14px 28px;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px;
  transition: background .15s;
}
.btn-red:hover { background: var(--red-dark); }

.btn-outline {
  border: 1.5px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.65);
  font-size: 14px; font-weight: 600;
  padding: 14px 24px;
  text-decoration: none;
  transition: all .15s;
}
.btn-outline:hover { border-color: rgba(255,255,255,.5); color: white; }

.hero-stats-panel {
  background: #1c1c1c;
  border: 1px solid rgba(255,255,255,.1);
  padding: 36px 32px;
  align-self: end;
  margin-bottom: 0;
}
.stat-row {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stat-row:first-child { padding-top: 0; }
.stat-row:last-child  { border-bottom: none; padding-bottom: 0; }
.s-num {
  font-family: 'DM Serif Display', serif;
  font-size: 48px; color: white;
  line-height: 1; letter-spacing: -1px;
}
.s-lbl {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.35); text-align: right;
}

/* ─── TICKER ──────────────────────────────────────────────────────── */
.ticker { background: var(--red); overflow: hidden; }
.ticker-inner {
  display: flex; white-space: nowrap;
  animation: marquee 30s linear infinite;
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px;
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,.85);
  border-right: 1px solid rgba(255,255,255,.18);
  flex-shrink: 0;
}
.ticker-item strong { color: white; }
.ticker-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.4); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─── SECTION COMMONS ─────────────────────────────────────────────── */
.section { max-width: 1200px; margin: 0 auto; padding: 72px 40px; }
.sec-header { margin-bottom: 36px; }
.sec-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red); margin-bottom: 10px;
}
.sec-title {
  font-family: 'DM Serif Display', serif;
  font-size: 36px; color: var(--ink);
  letter-spacing: -.5px; line-height: 1.1;
}

/* ─── INDUSTRIES ──────────────────────────────────────────────────── */
.industries-section { background: var(--cream); border-bottom: 1px solid var(--border); }

.ind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.ind-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 22px 24px;
  text-decoration: none; color: inherit;
  display: flex; align-items: center; gap: 16px;
  transition: all .15s;
  position: relative; overflow: hidden;
}
.ind-card::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--c, var(--red));
}
.ind-card:hover { border-color: var(--c, var(--black)); transform: translateX(3px); }
.ind-icon-wrap {
  width: 42px; height: 42px; flex-shrink: 0;
  background: color-mix(in srgb, var(--c, var(--red)) 10%, transparent);
  display: grid; place-items: center; font-size: 20px;
}
.ind-info { flex: 1; min-width: 0; }
.ind-name { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.ind-bar-wrap { height: 3px; background: var(--light); margin-top: 8px; }
.ind-bar { height: 100%; background: var(--c, var(--red)); opacity: .6; }
.ind-n { font-size: 15px; font-weight: 900; color: var(--ink); flex-shrink: 0; }

/* ─── FEATURED ────────────────────────────────────────────────────── */
.featured-bg { background: var(--light); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.feat-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 0;
}
.feat-big {
  background: var(--black); padding: 40px;
  position: relative; overflow: hidden;
}
.feat-big::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--red); }

.feat-big-avatar {
  width: 64px; height: 64px;
  background: var(--red);
  display: grid; place-items: center;
  font-family: 'DM Serif Display', serif;
  font-size: 24px; color: white;
  margin-bottom: 20px;
}
.feat-big-avatar-img {
  width: 64px; height: 64px;
  object-fit: cover; border-radius: 0;
  margin-bottom: 20px; display: block;
}
.feat-big-name {
  font-family: 'DM Serif Display', serif;
  font-size: 26px; color: white;
  line-height: 1.1; margin-bottom: 8px;
}
.feat-big-title { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.5; margin-bottom: 24px; }
.feat-big-rule  { height: 1px; background: rgba(255,255,255,.1); margin-bottom: 16px; }
.feat-big-tag   { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }

.feat-small-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feat-small {
  background: var(--white); border: 1px solid var(--border);
  padding: 20px; cursor: pointer; transition: border-color .15s;
}
.feat-small:hover { border-color: var(--red); }
.feat-small-letter {
  width: 40px; height: 40px;
  background: var(--light); border: 1px solid var(--border);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 900; color: var(--ink);
  margin-bottom: 12px;
}
.feat-small-photo {
  width: 40px; height: 40px;
  object-fit: cover; display: block;
  margin-bottom: 12px;
}
.feat-small-name  { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.feat-small-title { font-size: 12px; color: var(--muted); line-height: 1.4; margin-bottom: 10px; }
.feat-small-tag   { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--red); }

/* ─── FOOTER ──────────────────────────────────────────────────────── */
footer {
  background: var(--black);
  padding: 36px 40px;
  border-top: 4px solid var(--red);
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.footer-logo { display: flex; align-items: center; gap: 12px; }
.footer-logo-badge {
  width: 32px; height: 32px; flex-shrink: 0;
  background: white; border-radius: 5px;
  display: grid; place-items: center; padding: 3px;
}
.footer-logo-badge img { width: 100%; height: 100%; object-fit: contain; }
.footer-name { font-family: 'DM Serif Display', serif; font-size: 17px; color: white; }
.footer-sub  { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 2px; }
.footer-copy { font-size: 12px; color: rgba(255,255,255,.3); }

/* ─── BROWSE PAGE ─────────────────────────────────────────────────── */
.browse-page { background: var(--gray-50); }

.browse-header {
  background: var(--black);
  padding: 48px 32px 40px;
  margin-top: 0;
}
.browse-header-inner { max-width: 1200px; margin: 0 auto; }

.browse-title { font-size: 36px; font-weight: 900; letter-spacing: -1px; color: #fff; margin-bottom: 6px; }
.browse-sub   { font-size: 15px; color: rgba(255,255,255,0.45); margin-bottom: 28px; }

.browse-search-wrap { position: relative; max-width: 640px; }
.browse-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: rgba(255,255,255,0.3); pointer-events: none;
}
.browse-search {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 13px 48px 13px 42px;
  font-family: inherit; font-size: 15px;
  color: white; outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.browse-search::placeholder { color: rgba(255,255,255,0.3); }
.browse-search:focus {
  border-color: var(--red); background: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 3px rgba(200,16,46,0.2);
}
.browse-search-kbd {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 5px; padding: 2px 7px; font-size: 11px;
  color: rgba(255,255,255,0.4); pointer-events: none; font-family: monospace;
}

/* Filter bar */
.filter-bar {
  background: var(--white); border-bottom: 1px solid var(--gray-200);
  position: sticky; top: 60px; z-index: 49;
}
.filter-bar-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 12px 32px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.filter-group { display: flex; align-items: center; gap: 8px; }
.filter-group-label {
  font-size: 11px; font-weight: 700; color: var(--gray-400);
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.tag-pill-row { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-pill-btn {
  padding: 3px 10px; border-radius: 20px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--gray-200);
  background: var(--white); color: var(--gray-500);
  cursor: pointer; transition: all 0.12s; white-space: nowrap;
}
.tag-pill-btn:hover { border-color: var(--c,var(--gray-400)); color: var(--c,var(--gray-700)); }
.tag-pill-btn.active {
  background: color-mix(in srgb, var(--c,var(--red)) 12%, transparent);
  border-color: var(--c,var(--red));
  color: var(--c,var(--red));
}
.filter-select {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 7px; padding: 5px 24px 5px 8px;
  font-family: inherit; font-size: 12px; color: var(--gray-700);
  outline: none; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239CA3AF' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  min-width: 100px;
}
.filter-select:focus { border-color: var(--red); }

/* Multi-select (Majors) */
.filter-multiselect { position: relative; }
.filter-ms-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 7px; padding: 5px 10px 5px 8px;
  font-family: inherit; font-size: 12px; color: var(--gray-700);
  cursor: pointer; min-width: 110px; max-width: 200px;
  white-space: nowrap; overflow: hidden;
}
.filter-ms-trigger:hover { border-color: var(--gray-400); }
.filter-ms-trigger #major-trigger-label,
.filter-ms-trigger > span:first-child {
  flex: 1; overflow: hidden; text-overflow: ellipsis;
}
.filter-ms-trigger svg { flex-shrink: 0; color: var(--gray-400); }
.filter-ms-panel {
  position: absolute; top: calc(100% + 6px); left: 0;
  width: 300px; max-height: 380px;
  background: white; border: 1px solid var(--gray-200);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  z-index: 50; display: flex; flex-direction: column;
  overflow: hidden;
}
.filter-ms-panel[hidden] { display: none; }
.filter-ms-header {
  display: flex; gap: 8px; padding: 10px;
  border-bottom: 1px solid var(--gray-100);
}
.filter-ms-search {
  flex: 1; padding: 6px 10px;
  border: 1px solid var(--gray-200); border-radius: 6px;
  font-family: inherit; font-size: 12.5px; outline: none;
  color: var(--gray-700);
}
.filter-ms-search:focus { border-color: var(--red); }
.filter-ms-clear {
  padding: 0 12px; background: var(--gray-100);
  border: none; border-radius: 6px;
  font-family: inherit; font-size: 11px; font-weight: 700;
  color: var(--gray-700); cursor: pointer;
}
.filter-ms-clear:hover { background: var(--gray-200); }
.filter-ms-list { overflow-y: auto; flex: 1; padding: 6px; }
.filter-ms-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px;
  cursor: pointer; font-size: 12.5px;
  user-select: none;
}
.filter-ms-item:hover { background: var(--gray-50); }
.filter-ms-item.checked { background: rgba(200,16,46,0.06); }
.filter-ms-item input {
  margin: 0; cursor: pointer;
  accent-color: var(--red);
}
.filter-ms-name { flex: 1; color: var(--gray-700); }
.filter-ms-count { font-size: 11px; color: var(--gray-400); font-weight: 700; }
.filter-ms-empty { padding: 24px 16px; text-align: center; font-size: 12px; color: var(--gray-400); }

/* Toggle switch */
.filter-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  font-size: 12px; font-weight: 600; color: var(--gray-600);
}
.filter-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.filter-toggle-slider {
  position: relative; display: inline-block;
  width: 32px; height: 18px;
  background: var(--gray-200); border-radius: 999px;
  transition: background .15s;
  flex-shrink: 0;
}
.filter-toggle-slider::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: white; border-radius: 50%;
  transition: transform .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.filter-toggle input:checked + .filter-toggle-slider { background: var(--red); }
.filter-toggle input:checked + .filter-toggle-slider::after { transform: translateX(14px); }
.filter-toggle-label { white-space: nowrap; }
.filter-clear {
  padding: 4px 10px; border-radius: 6px;
  background: var(--red-soft); border: 1px solid #FECDD3;
  color: var(--red); font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: background 0.1s;
}
.filter-clear:hover { background: #FEE2E7; }

/* Browse body */
.browse-body { max-width: 1200px; margin: 0 auto; padding: 24px 32px 48px; }
.results-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.results-count { font-size: 13px; color: var(--gray-400); font-weight: 500; }
.active-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 10px;
  background: var(--red-soft); border: 1px solid #FECDD3;
  border-radius: 20px; font-size: 11.5px; font-weight: 600; color: var(--red);
}
.ac-chip button {
  background: none; border: none; cursor: pointer;
  color: var(--red); font-size: 15px; line-height: 1; padding: 0; opacity: 0.6;
}
.ac-chip button:hover { opacity: 1; }

/* Alumni grid */
.alumni-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.alumni-card {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 14px; padding: 18px;
  cursor: pointer; position: relative;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.alumni-card:hover {
  border-color: var(--red); transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(200,16,46,0.1);
}
.ac-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.ac-avatar-wrap { flex-shrink: 0; }
.ac-avatar, .ac-letter { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
.ac-letter {
  background: var(--black); display: grid; place-items: center;
  font-size: 16px; font-weight: 800; color: white;
}
.ac-info { flex: 1; min-width: 0; }
.ac-name  { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-title { font-size: 12px; color: var(--gray-500); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.ac-meta  { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11.5px; color: var(--gray-400); margin-bottom: 10px; }
.ac-company-link { color: var(--gray-400); text-decoration: none; transition: color .15s; }
.ac-company-link:hover { color: var(--red); text-decoration: underline; }
.ac-tags  { display: flex; flex-wrap: wrap; gap: 4px; }
.ac-tag   { padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 700; }

/* Loading */
.loading-state {
  grid-column: 1/-1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 80px;
  gap: 16px; color: var(--gray-400); font-size: 14px;
}
.loading-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--gray-200); border-top-color: var(--red);
  border-radius: 50%; animation: spin 0.65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Grid limit notice */
.grid-limit-notice {
  grid-column: 1/-1; text-align: center; padding: 10px 16px; margin-bottom: 4px;
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px;
  font-size: 12px; color: var(--gray-500);
}

/* Load more */
.load-more-wrap {
  grid-column: 1/-1; display: flex; justify-content: center; padding: 24px 0 8px;
}
.load-more-btn {
  background: var(--card); border: 1.5px solid var(--gray-200); border-radius: 10px;
  padding: 10px 28px; font-size: 14px; font-weight: 600; color: var(--gray-700);
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.load-more-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.load-more-btn:hover .load-more-count { color: rgba(255,255,255,0.75); }
.load-more-count { font-size: 12px; font-weight: 400; color: var(--gray-400); margin-left: 4px; }

/* Empty state */
.empty-state {
  grid-column: 1/-1; text-align: center; padding: 80px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.empty-icon { font-size: 40px; margin-bottom: 8px; }
.empty-state h3 { font-size: 18px; font-weight: 700; color: var(--gray-700); }
.empty-state p  { font-size: 13px; color: var(--gray-400); }
.clear-btn-inline {
  margin-top: 8px; padding: 8px 18px; border-radius: 8px;
  background: var(--red); color: white; border: none;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}

/* ─── PROFILE MODAL ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-overlay.open .modal-box { transform: translateY(0) scale(1); }

.modal-close-btn {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border-radius: 7px;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85); cursor: pointer; font-size: 13px;
  display: grid; place-items: center; transition: all 0.1s;
  z-index: 20;
}
.modal-close-btn:hover { background: rgba(0,0,0,0.65); color: white; }
.modal-loading { display: flex; align-items: center; justify-content: center; min-height: 200px; }

/* ─── FIELD SECTION ───────────────────────────────────────────────── */
.field-section {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  padding: 28px 0;
}
.field-section-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.field-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gray-400); margin-bottom: 14px;
}
.field-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.field-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px;
  background: var(--white); border: 2px solid var(--gray-200);
  border-radius: 14px; cursor: pointer; transition: all 0.15s;
  font-family: inherit; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.field-btn:hover {
  border-color: var(--c, var(--gray-400));
  background: color-mix(in srgb, var(--c, var(--gray-400)) 9%, var(--card));
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.09);
}
.field-btn.active {
  border-color: var(--c, var(--red));
  background: color-mix(in srgb, var(--c, var(--red)) 14%, var(--card));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--red)) 15%, transparent), 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.field-icon { font-size: 22px; line-height: 1; }
.field-name { font-size: 14px; font-weight: 700; color: var(--gray-700); transition: color 0.15s; }
.field-btn:hover .field-name { color: var(--gray-900); }
.field-btn.active .field-name { color: var(--c, var(--red)); }
.field-count {
  font-size: 12px; font-weight: 800;
  color: var(--c, var(--gray-500));
  background: color-mix(in srgb, var(--c, var(--gray-400)) 12%, transparent);
  padding: 3px 9px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--c, var(--gray-400)) 22%, transparent);
  min-width: 26px; text-align: center;
}
.field-clear-btn {
  margin-top: 12px; padding: 6px 14px; border-radius: 8px;
  background: var(--red-soft); border: 1px solid #FECDD3;
  color: var(--red); font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background 0.1s;
}
.field-clear-btn:hover { background: #FEE2E7; }

/* ─── COMPANY FILTER INPUT ────────────────────────────────────────── */
.filter-search-wrap { position: relative; display: flex; align-items: center; }
.filter-search-wrap svg { position: absolute; left: 8px; width: 12px; height: 12px; color: var(--gray-400); pointer-events: none; }
.filter-text-input {
  padding: 5px 10px 5px 26px;
  border: 1px solid var(--gray-200); border-radius: 7px;
  background: var(--gray-50); font-family: inherit; font-size: 12px;
  color: var(--gray-700); outline: none; width: 160px; transition: border-color 0.15s;
}
.filter-text-input:focus { border-color: var(--red); background: white; }
.filter-text-input::placeholder { color: var(--gray-400); }

/* ─── PROFILE MODAL — REDESIGN ────────────────────────────────────── */
.modal-box {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 20px; width: 100%; max-width: 580px; max-height: 92vh;
  overflow-y: auto; position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,0.18);
  transform: translateY(14px) scale(0.97);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mp-banner {
  height: 110px;
  background: linear-gradient(135deg, #0D0D0D 0%, #2A0D13 50%, #0D0D0D 100%);
  border-radius: 20px 20px 0 0;
  position: relative; overflow: hidden;
}
.mp-banner::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200,16,46,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,16,46,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}
.mp-banner::after {
  content: ''; position: absolute;
  width: 300px; height: 300px;
  background: var(--red); border-radius: 50%;
  top: -150px; right: -80px;
  opacity: 0.12; filter: blur(60px);
}
.mp-header-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 24px 0; margin-top: -48px; margin-bottom: 14px;
  position: relative; z-index: 2;
}
.mp-avatar-wrap { flex-shrink: 0; }
.mp-avatar {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 3px solid white; box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.mp-letter {
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--black);
  display: grid; place-items: center;
  font-size: 34px; font-weight: 800; color: white;
  border: 3px solid white; box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.mp-linkedin-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 22px;
  background: #0A66C2; color: white;
  font-family: inherit; font-size: 13px; font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 10px rgba(10,102,194,0.3); white-space: nowrap;
}
.mp-linkedin-btn:hover { background: #084fa3; transform: translateY(-1px); }
.mp-chat-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--black); color: white;
  font-size: 13px; font-weight: 700;
  padding: 10px 18px; border: none; border-radius: 8px;
  cursor: pointer; margin-bottom: 8px; transition: background .15s;
}
.mp-chat-btn:hover { background: var(--red); }
.mp-identity { padding: 0 24px 20px; border-bottom: 1px solid var(--gray-100); }
.mp-name     { font-size: 22px; font-weight: 900; letter-spacing: -0.5px; color: var(--ink); margin-bottom: 4px; }
.mp-headline { font-size: 14px; color: var(--gray-500); line-height: 1.5; margin-bottom: 12px; }
.mp-meta-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-meta-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 20px; font-size: 12px; color: var(--gray-600);
}
.mp-company-link { text-decoration: none; cursor: pointer; }
.mp-company-link:hover { background: var(--gray-200); color: var(--red); }
.mp-grad-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: rgba(200,16,46,0.06); border: 1px solid rgba(200,16,46,0.18);
  border-radius: 20px; font-size: 12px; font-weight: 700; color: var(--red);
}
.mp-section { padding: 18px 24px; border-bottom: 1px solid var(--gray-100); }
.mp-section:last-child { border-bottom: none; padding-bottom: 28px; }
.mp-section-title {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gray-400); margin-bottom: 14px;
}
.mp-about-text { font-size: 13px; color: var(--gray-600); line-height: 1.7; }
.mp-timeline { display: flex; flex-direction: column; gap: 2px; }
.mp-tl-item { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.mp-tl-item:last-child { padding-bottom: 0; }
.mp-tl-item:not(:last-child)::after {
  content: ''; position: absolute; left: 14px; top: 30px; bottom: 0;
  width: 1px; background: var(--gray-200);
}
.mp-tl-dot {
  width: 30px; height: 30px; flex-shrink: 0;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 8px; display: grid; place-items: center;
  font-size: 13px; position: relative; z-index: 1;
}
.mp-tl-body   { flex: 1; padding-top: 4px; }
.mp-tl-title  { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 2px; line-height: 1.3; }
.mp-tl-company{ font-size: 12px; color: var(--gray-600); margin-bottom: 2px; }
.mp-tl-dates  { font-size: 11.5px; color: var(--gray-400); }
.mp-tl-desc   { font-size: 12px; color: var(--gray-500); margin-top: 6px; line-height: 1.6; }
.mp-edu-item  { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
.mp-edu-item + .mp-edu-item { border-top: 1px solid var(--gray-100); margin-top: 4px; padding-top: 14px; }
.mp-edu-icon  {
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgba(200,16,46,0.07); border: 1px solid rgba(200,16,46,0.15);
  border-radius: 10px; display: grid; place-items: center; font-size: 20px;
}
.mp-edu-school { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.mp-edu-year   { font-size: 12px; color: var(--gray-400); }
.mp-skills     { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-skill      { padding: 5px 13px; border-radius: 20px; font-size: 12px; font-weight: 600; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.mp-contact    { display: flex; flex-direction: column; gap: 8px; }
.mp-contact-item { font-size: 13px; color: var(--gray-300); text-decoration: none; }
.mp-contact-item:hover { color: #fff; }
.mp-contact-no-info { font-size: 13px; color: var(--gray-500); margin-bottom: 10px; }
.mp-contact-li-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; background: #0a66c2; color: #fff;
  border-radius: 8px; font-size: 12px; font-weight: 600; text-decoration: none;
}
.mp-contact-li-btn:hover { background: #0856a8; }

/* ─── AI SUMMARY BOX ─────────────────────────────────────────────── */
.mp-ai-box {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 10px; padding: 16px; min-height: 52px;
  display: flex; flex-direction: column; gap: 10px;
}
.mp-ai-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; background: var(--black); color: white;
  border: none; border-radius: 8px;
  font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background .15s; align-self: flex-start;
}
.mp-ai-btn:hover { background: var(--red); }
.mp-ai-result   { font-size: 14px; line-height: 1.7; color: var(--gray-700); }
.mp-ai-bullets  { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mp-ai-bullets li { font-size: 13px; line-height: 1.55; color: var(--gray-700); padding-left: 14px; position: relative; }
.mp-ai-bullets li::before { content: '•'; position: absolute; left: 0; color: var(--red); font-weight: 700; }
.mp-ai-loading  { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gray-500); }
.mp-ai-error    { font-size: 12px; color: var(--red); }

/* ─── REACH OUT BUTTON ──────────────────────────────────────────── */
.mp-action-stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.mp-reach-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 22px;
  background: var(--red); color: white;
  font-family: inherit; font-size: 13px; font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 10px rgba(200,16,46,0.3); white-space: nowrap;
}
.mp-reach-btn:hover { background: var(--red-dark); transform: translateY(-1px); }

/* ─── TIMELINE LOGO ─────────────────────────────────────────────── */
.mp-tl-logo {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  display: grid; place-items: center;
  font-size: 13px; position: relative; z-index: 1;
}
.mp-tl-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }


/* ─── SCROLLBAR ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ─── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; padding-bottom: 40px; }
  .hero-stats-panel { display: none; }
  .feat-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  #navbar { padding: 0 20px; }
  .hero-inner { padding: 60px 20px 40px; }
  .hero-title { font-size: 48px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .section { padding: 48px 20px; }
  .browse-header { padding: 80px 20px 32px; }
  .filter-bar-inner { padding: 10px 20px; }
  .browse-body { padding: 16px 20px 40px; }
  .alumni-grid { grid-template-columns: 1fr; }
  .tag-pill-row { display: none; }
  footer { padding: 28px 20px; }
}

/* ══════════════════════════════════════════════
   AUTH PAGE
══════════════════════════════════════════════ */
.auth-page { background: var(--light); }

.auth-bg {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 60px;
}

.auth-wrap {
  width: 100%;
  max-width: 460px;
}

.auth-card {
  background: var(--white);
  border-radius: 20px;
  padding: 36px 40px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.10);
}
.auth-card-success {
  text-align: center;
  padding: 48px 40px 44px;
}

/* Tabs */
.auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--gray-100);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 28px;
}
.auth-tab {
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  border-radius: 7px;
  transition: all .15s;
  font-family: 'Inter', sans-serif;
}
.auth-tab.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* Login hint */
.auth-login-hint {
  background: var(--red-soft);
  border: 1px solid #ffc9d0;
  border-radius: 12px;
  padding: 16px 20px;
  text-align: center;
  margin-bottom: 20px;
}
.auth-hint-icon { font-size: 24px; margin-bottom: 8px; }
.auth-login-hint p { font-size: 14px; color: var(--gray-700); line-height: 1.5; }
.auth-hint-dismiss {
  margin-top: 12px;
  background: var(--red);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

/* Form fields */
.auth-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}
.auth-heading {
  font-family: 'DM Serif Display', serif;
  font-size: 28px;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.2;
}
.auth-sub {
  font-size: 13.5px;
  color: var(--gray-500);
  line-height: 1.6;
  margin-bottom: 24px;
}
.auth-field { margin-bottom: 16px; }
.auth-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
  letter-spacing: .01em;
}
.auth-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--gray-50);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.auth-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200,16,46,0.08);
  background: white;
}
.auth-primary-btn {
  width: 100%;
  background: var(--red);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  transition: background .15s, transform .1s;
}
.auth-primary-btn:hover { background: var(--red-dark); transform: translateY(-1px); }
.auth-primary-btn:active { transform: none; }
.auth-legal {
  font-size: 11.5px;
  color: var(--gray-400);
  margin-top: 14px;
  line-height: 1.5;
  text-align: center;
}
.auth-alt-row {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
}
.auth-alt-row a { color: var(--red); font-weight: 700; text-decoration: none; }
.auth-alt-row a:hover { text-decoration: underline; }

/* Step indicator */
.auth-steps-indicator {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.auth-step-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-400);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all .2s;
}
.auth-step-dot.done { background: var(--red); color: white; }
.auth-step-dot.active { background: var(--black); color: white; }
.auth-step-line {
  flex: 1;
  height: 2px;
  background: var(--gray-200);
}
.auth-step-line.filled { background: var(--red); }

/* Profile search */
.auth-search-row {
  position: relative;
  margin-bottom: 14px;
}
.auth-search-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--gray-400);
  pointer-events: none;
}
.auth-search-inp {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  background: var(--gray-50);
}
.auth-search-inp:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200,16,46,0.08);
  background: white;
}

/* Results list */
.auth-results {
  min-height: 64px;
  margin-bottom: 16px;
}
.auth-results-loading {
  display: flex;
  justify-content: center;
  padding: 20px;
}
.auth-spinner {
  width: 22px; height: 22px;
  border: 2.5px solid var(--gray-200);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.auth-no-results {
  text-align: center;
  color: var(--gray-400);
  font-size: 13px;
  padding: 16px 0;
}

/* Profile card in auth search */
.auth-profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--gray-200);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  margin-bottom: 8px;
  background: white;
}
.auth-profile-card:hover {
  border-color: var(--red);
  box-shadow: 0 2px 12px rgba(200,16,46,0.10);
  transform: translateY(-1px);
}
.auth-profile-card.is-demo {
  border-color: rgba(200,16,46,0.25);
  background: var(--red-soft);
}

.apc-av { flex-shrink: 0; }
.apc-av-img {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.apc-av-letter {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--red);
  color: white;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
}
.apc-body { flex: 1; min-width: 0; }
.apc-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.apc-demo-badge {
  font-size: 10px;
  font-weight: 700;
  background: var(--red);
  color: white;
  padding: 1px 7px;
  border-radius: 20px;
  letter-spacing: .03em;
}
.apc-title {
  font-size: 12.5px;
  color: var(--gray-500);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apc-college {
  font-size: 11.5px;
  color: var(--gray-400);
  margin-top: 2px;
}
.apc-select-btn {
  background: none;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  transition: all .15s;
  pointer-events: none;
}
.auth-profile-card:hover .apc-select-btn {
  background: var(--red);
  border-color: var(--red);
  color: white;
}

/* "I don't see my name" */
.auth-no-name-section { margin-top: 4px; }
.auth-no-name-btn {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-no-name-btn:hover { color: var(--red); }
.auth-no-name-panel {
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.6;
}
.auth-manual-btn {
  margin-top: 10px;
  background: var(--gray-100);
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-400);
  cursor: not-allowed;
  font-family: 'Inter', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.auth-coming-soon {
  font-size: 10px;
  background: var(--gray-300);
  color: white;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 700;
}

/* ── Step 3: Success ─────────────────────────────── */
.auth-checkmark-wrap {
  width: 84px; height: 84px;
  margin: 0 auto 24px;
}
.auth-check-svg {
  width: 100%; height: 100%;
  overflow: visible;
}

/* Circle draws from top, counter-clockwise */
.auth-check-circle {
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  transform-origin: center;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-check-circle.draw { stroke-dashoffset: 0; }

/* Tick draws in */
.auth-check-tick {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  transition: stroke-dashoffset 0.35s ease-out;
}
.auth-check-tick.draw { stroke-dashoffset: 0; }

.auth-success-title {
  font-family: 'DM Serif Display', serif;
  font-size: 32px;
  color: var(--ink);
  margin-bottom: 6px;
}
.auth-success-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 20px;
}
.auth-email-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  margin-bottom: 28px;
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.55;
}
.auth-email-notice svg { flex-shrink: 0; margin-top: 2px; color: var(--gray-400); }
.auth-explore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--red);
  color: white;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  transition: background .15s, transform .1s;
}
.auth-explore-btn:hover { background: var(--red-dark); transform: translateY(-1px); }
@keyframes pulse-explore {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,0.35); }
  50%       { box-shadow: 0 0 0 10px rgba(200,16,46,0); }
}
.auth-explore-btn.pulse {
  animation: pulse-explore 1.8s ease-in-out infinite;
}

/* ══════════════════════════════════════════════
   CONNECT BUTTON + TOAST
══════════════════════════════════════════════ */
.mp-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--red);
  color: white;
  border: none;
  border-radius: 9px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.mp-connect-btn:hover { background: var(--red-dark); transform: translateY(-1px); }
.mp-connect-btn svg { flex-shrink: 0; }

/* Registered badge on alumni card */
.ac-registered-badge {
  position: absolute;
  bottom: 14px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid rgba(200,16,46,0.2);
  padding: 3px 9px;
  border-radius: 20px;
}
.registered-card {
  border: 1.5px solid rgba(200,16,46,0.25) !important;
  box-shadow: 0 0 0 3px rgba(200,16,46,0.06);
}

/* Connect toast */
.connect-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #111827;
  color: white;
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
  white-space: nowrap;
}
.connect-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.connect-toast svg { color: #4ade80; flex-shrink: 0; }

/* ══════════════════════════════════════════════
   CONNECT CARD (inside modal)
══════════════════════════════════════════════ */
.cc-wrap { padding: 20px 24px 28px; }

.cc-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  padding: 0 0 22px;
  transition: color .15s;
}
.cc-back-btn:hover { color: var(--red); }

.cc-profile-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 22px;
}
.cc-av { flex-shrink: 0; }
.cc-av-img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
}
.cc-av-letter {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--red);
  color: white;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
}
.cc-mini-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.cc-mini-title { font-size: 13px; color: var(--gray-500); margin-top: 2px; }

.cc-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 10px;
}
.cc-email-display {
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 14px;
}
.cc-email-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
}
.cc-email-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 0;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  border: none;
  background: var(--black);
  color: white;
}
.cc-email-action-btn:hover { background: #374151; transform: translateY(-1px); }
.cc-email-action-btn.cc-copied { background: #16a34a; color: white; }
.cc-mailto-btn { background: var(--red); color: white; }
.cc-mailto-btn:hover { background: var(--red-dark); }

.cc-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  font-size: 12px;
  color: var(--gray-400);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cc-or::before, .cc-or::after { content: ''; flex: 1; height: 1px; background: var(--gray-100); }

.cc-linkedin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #0A66C2;
  color: white;
  text-decoration: none;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  transition: background .15s, transform .1s;
}
.cc-linkedin-btn:hover { background: #004182; transform: translateY(-1px); }

/* ══════════════════════════════════════════════
   AUTH SUCCESS SPLASH (Step 3)
══════════════════════════════════════════════ */
.auth-success-card {
  padding: 0;
  overflow: hidden;
}
.auth-success-banner {
  background: linear-gradient(135deg, #1a0a0f 0%, #C8102E 60%, #9E0A22 100%);
  padding: 32px 40px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.auth-success-banner .auth-checkmark-wrap {
  width: 72px; height: 72px;
  margin: 0;
}
.auth-banner-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.auth-success-body {
  padding: 28px 36px 36px;
}
.auth-success-title {
  font-family: 'DM Serif Display', serif;
  font-size: 28px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 6px;
}
.auth-success-title em { font-style: italic; color: var(--red); }
.auth-success-sub {
  font-size: 14px;
  color: var(--gray-500);
  margin-bottom: 18px;
}

/* Linked profile card inside success */
.auth-linked-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid #bbf7d0;
  background: #f0fdf4;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.alc-av { flex-shrink: 0; }
.alc-av-img {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.alc-av-letter {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--red);
  color: white;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
}
.alc-body { flex: 1; min-width: 0; }
.alc-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.alc-title { font-size: 12px; color: var(--gray-500); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alc-school { font-size: 11.5px; color: var(--gray-400); margin-top: 1px; }
.alc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
  background: white;
  border: 1.5px solid #bbf7d0;
  border-radius: 20px;
  padding: 4px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Stats row */
.auth-success-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  padding: 14px 0;
  margin-bottom: 16px;
}
.auth-ss-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.auth-ss-n {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.5px;
}
.auth-ss-l {
  font-size: 11px;
  color: var(--gray-400);
  font-weight: 500;
}
.auth-ss-div {
  width: 1px;
  height: 36px;
  background: var(--gray-200);
}

/* Greyed browse button on client.html (not logged in) */
.btn-red.disabled-auth {
  background: var(--gray-300);
  color: var(--gray-500);
  pointer-events: none;
  cursor: default;
  opacity: 1;
}
.btn-red.disabled-auth svg { display: none; }

/* ─── DEMO RESET BAR ─────────────────────────────────────────────── */
.demo-reset-bar {
  text-align: center;
  padding: 20px;
  border-top: 1px solid var(--gray-100);
}
.demo-reset-btn {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--gray-400);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}

/* ── DASHBOARD ──────────────────────────────────────────────────── */
.dash-welcome {
  background: linear-gradient(135deg, #1a0a0f 0%, #C8102E 55%, #9E0A22 100%);
  padding: 52px 40px;
}
.dash-welcome-inner { max-width: 1100px; margin: 0 auto; text-align: left; }
.dash-hi {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: white; margin-bottom: 8px;
  animation: fade-up 0.5s 0.05s ease both;
}
.dash-tagline {
  font-size: 15px; color: rgba(255,255,255,0.65);
  animation: fade-up 0.5s 0.18s ease both;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dash-section { padding: 56px 40px; }
.dash-section-tinted { background: var(--gray-50); }
.dash-section-dark {
  background: linear-gradient(135deg, #1a0a0f 0%, #2a0b10 100%);
  padding: 52px 40px;
}
.dash-section-inner { max-width: 1100px; margin: 0 auto; }

.dash-sh {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
  margin-bottom: 28px;
}
.dash-eyebrow {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); margin-bottom: 6px;
}
.dash-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.55rem; color: var(--ink); margin-bottom: 6px;
}
.dash-sub { font-size: 13.5px; color: var(--gray-500); max-width: 520px; line-height: 1.6; }

.dash-ai-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  color: var(--red); background: var(--red-soft);
  border: 1px solid rgba(200,16,46,0.2);
  border-radius: 20px; padding: 5px 11px;
  white-space: nowrap; height: fit-content; flex-shrink: 0;
}

/* Own profile card */
.dash-own-card {
  background: white;
  border: 1.5px solid var(--gray-200);
  border-radius: 18px;
  padding: 24px 28px;
  display: flex; align-items: center; gap: 22px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.dpc-av {
  width: 68px; height: 68px; border-radius: 50%; overflow: hidden;
  flex-shrink: 0; background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
}
.dpc-av-img { width: 100%; height: 100%; object-fit: cover; }
.dpc-av-letter {
  font-size: 24px; font-weight: 800;
  color: var(--ink); letter-spacing: -.5px;
}
.dpc-body { flex: 1; min-width: 0; }
.dpc-name  { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.dpc-role  { font-size: 13px; color: var(--gray-500); margin-bottom: 10px; }
.dpc-tags  { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.dpc-tag   { font-size: 11px; font-weight: 600; border-radius: 20px; padding: 3px 9px; }
.dpc-meta  { font-size: 12px; color: var(--gray-400); }
.dpc-view-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--red);
  text-decoration: none;
  border: 1.5px solid rgba(200,16,46,0.25); border-radius: 10px;
  padding: 9px 15px; white-space: nowrap;
  transition: background .15s;
}
.dpc-view-btn:hover { background: var(--red-soft); }

/* Skeleton shimmer */
.dash-skeleton-card {
  height: 195px; border-radius: 14px;
  background: linear-gradient(90deg, var(--gray-100) 25%, #e9eaec 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: dash-shimmer 1.5s infinite;
}
.dash-profile-skeleton { height: 118px; border-radius: 18px; }
@keyframes dash-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Search row */
.dash-search-row {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 28px;
}
.dash-query-input {
  flex: 1; padding: 14px 16px;
  border: 1.5px solid var(--gray-200); border-radius: 12px;
  font-family: 'Inter', sans-serif; font-size: 14px;
  color: var(--ink); line-height: 1.55; resize: vertical;
  transition: border-color .15s;
}
.dash-query-input:focus { outline: none; border-color: var(--red); }
.dash-query-input::placeholder { color: var(--gray-400); }
.dash-query-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  background: var(--red); color: white; border: none;
  border-radius: 12px; padding: 14px 22px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: opacity .15s; white-space: nowrap;
}
.dash-query-btn:hover { opacity: .9; }
.dash-query-btn:disabled { opacity: .5; cursor: not-allowed; }

.dash-results-label {
  font-size: 12.5px; font-weight: 600;
  color: var(--gray-400); margin-bottom: 14px;
  text-transform: uppercase; letter-spacing: .06em;
}
.dash-retry-btn {
  background: none; border: none; cursor: pointer;
  color: var(--red); font-weight: 600; font-family: 'Inter', sans-serif;
  font-size: inherit; text-decoration: underline;
}

/* Browse CTA */
.dash-cta-inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: 28px;
}
.dash-cta-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem; color: white; margin-bottom: 6px;
}
.dash-cta-sub { font-size: 14px; color: rgba(255,255,255,.55); }

/* Nav user indicator */
.nav-user {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.65);
  padding-left: 12px; border-left: 1px solid rgba(255,255,255,.12);
  margin-left: 4px;
}
.nav-user-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22C55E; flex-shrink: 0;
}

/* Card entrance animation (dashboard only) */
.dash-card-anim {
  animation: card-enter 0.35s ease both;
}
@keyframes card-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Profile card entrance */
.dash-own-card { animation: fade-up 0.4s 0.1s ease both; }

/* Generate more button */
.dash-gen-more-wrap {
  display: flex; justify-content: center; margin-top: 24px;
}
.dash-gen-more-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: white; border: 1.5px solid var(--gray-200);
  border-radius: 50px; padding: 11px 22px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--gray-600); cursor: pointer;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.dash-gen-more-btn:hover {
  border-color: var(--red); color: var(--red);
  box-shadow: 0 2px 12px rgba(200,16,46,0.1);
}
.dash-gen-more-btn:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 640px) {
  .dash-welcome { padding: 40px 20px; }
  .dash-section { padding: 40px 20px; }
  .dash-section-dark { padding: 40px 20px; }
  .dash-own-card { flex-direction: column; align-items: flex-start; gap: 16px; }
  .dpc-view-btn { align-self: stretch; justify-content: center; }
  .dash-search-row { flex-direction: column; }
  .dash-query-btn { width: 100%; justify-content: center; }
  .dash-cta-inner { flex-direction: column; text-align: center; }
  .dash-sh { flex-direction: column; }
}
.demo-reset-btn:hover { color: var(--red); }

/* ── COMPANY PAGE ─────────────────────────────────────────────────── */
.co-hero {
  background: var(--black);
  border-bottom: 3px solid var(--red);
  padding: 52px 0 48px;
}
.co-hero-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; gap: 40px;
}
.co-logo-wrap {
  flex-shrink: 0;
  width: 96px; height: 96px;
  background: white; border-radius: 20px;
  display: grid; place-items: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  overflow: hidden;
}
/* LinkedIn logo files ship with a whitespace ring baked into the image —
   oversize + negative margin crops it so the crest fills the tile. */
.co-logo-img   { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; padding: 12%; box-sizing: border-box; }
.co-logo-letter {
  font-family: 'DM Serif Display', serif;
  font-size: 44px; color: var(--ink); line-height: 1;
}
.co-logo-skeleton {
  width: 96px; height: 96px; border-radius: 20px;
  background: rgba(255,255,255,0.1);
  animation: shimmer 1.4s ease infinite;
}
.co-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red); margin-bottom: 8px;
}
.co-name {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: white; line-height: 1.05; letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.co-tagline {
  font-size: 15px; color: rgba(255,255,255,0.55);
  margin-bottom: 18px; line-height: 1.5;
}
.co-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.co-pill {
  font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 5px 12px; border-radius: 20px;
}
.co-about-section {
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  padding: 48px 0;
}
.co-alumni-section { padding: 52px 0 72px; }
.co-section-inner { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.co-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 700px) { .co-about-grid { grid-template-columns: 1fr; } }
.co-block-label {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red); margin-bottom: 12px;
}
.co-block-text { font-size: 14px; line-height: 1.75; color: var(--gray-700); }
.co-text-skeleton {
  height: 14px; border-radius: 4px; width: 100%;
  background: var(--border); margin-bottom: 10px;
  animation: shimmer 1.4s ease infinite;
}
.co-card-chat-btn {
  position: absolute; top: 12px; right: 12px;
  background: var(--black); color: white;
  font-size: 11px; font-weight: 700;
  padding: 5px 11px; border: none; border-radius: 20px;
  cursor: pointer; z-index: 2; transition: background .15s;
}
.co-card-chat-btn:hover { background: var(--red); }
.co-alumni-heading {
  font-family: 'Inter', sans-serif;
  font-size: 28px; font-weight: 900; letter-spacing: -0.5px;
  color: var(--ink); margin: 6px 0 6px;
}
.co-alumni-sub {
  font-size: 14px; color: var(--gray-500); line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
   REDWING CONNECT 2.0 — accounts, messaging, dev panel
══════════════════════════════════════════════════════════════════ */

/* ── Nav links + account chip ── */
.nav-links { display: flex; gap: 26px; margin-left: 42px; }
.nav-links a {
  color: rgba(255,255,255,.6); text-decoration: none;
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  transition: color .15s;
}
.nav-links a:hover, .nav-links a.active { color: #fff; }

.nav-account { position: relative; margin-left: 18px; }
.nav-account-btn {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px; padding: 5px 12px 5px 6px;
  color: rgba(255,255,255,.75); cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.nav-account-btn:hover { background: rgba(255,255,255,.12); }
.nav-account-av {
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
  background: var(--red); display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.nav-account-av img { width: 100%; height: 100%; object-fit: cover; }
.nav-account-role {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 100px;
}
.nav-role-student { background: #1d4ed8; color: #fff; }
.nav-role-alumni  { background: var(--red); color: #fff; }
.nav-role-admin   { background: #b45309; color: #fff; }
.nav-role-test    { background: #475569; color: #fff; }

.nav-account-menu[hidden] { display: none; }
.nav-account-menu {
  position: absolute; right: 0; top: calc(100% + 10px);
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); min-width: 230px; overflow: hidden; z-index: 300;
  display: flex; flex-direction: column; padding: 6px;
}
.nav-menu-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.nav-menu-name  { font-size: 14px; font-weight: 800; color: var(--ink); }
.nav-menu-email { font-size: 12px; color: var(--muted); word-break: break-all; }
.nav-account-menu a, .nav-account-menu button {
  text-align: left; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--gray-700);
  padding: 9px 12px; border-radius: 8px; text-decoration: none; transition: background .12s;
}
.nav-account-menu a:hover, .nav-account-menu button:hover { background: var(--gray-100); color: var(--ink); }

/* ── Auth v2 ── */
.auth-google-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 10px;
  padding: 13px 18px; margin: 22px 0 6px;
  font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink);
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.auth-google-btn:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.auth-google-btn:disabled { opacity: .55; cursor: wait; }

.auth-error {
  background: var(--red-soft); border: 1px solid rgba(200,16,46,.25);
  color: var(--red-dark); border-radius: 8px;
  font-size: 13px; padding: 10px 14px; margin-top: 12px;
}

.auth-role-explain {
  margin-top: 22px; display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--border); padding-top: 20px;
}
.auth-role-row { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--gray-600); line-height: 1.55; }
.auth-role-chip {
  flex-shrink: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 100px; margin-top: 2px;
}
.auth-role-chip-student { background: #dbeafe; color: #1d4ed8; }
.auth-role-chip-alumni  { background: var(--red-soft); color: var(--red-dark); }

.auth-skip-btn {
  background: none; border: none; font-family: inherit; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--muted);
  margin-top: 12px; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px;
}
.auth-skip-btn:hover { color: var(--ink); }

/* ── Messages page ── */
.msg-page { background: var(--light); }
.msg-shell {
  display: grid; grid-template-columns: 340px 1fr;
  height: calc(100vh - 60px); max-width: 1280px; margin: 0 auto;
  background: var(--card); border-left: 1px solid var(--border); border-right: 1px solid var(--border);
}
.msg-sidebar { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.msg-sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 12px;
}
.msg-sidebar-head h1 { font-family: 'DM Serif Display', serif; font-size: 26px; }
.msg-new-btn {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--red); color: #fff; text-decoration: none;
}
.msg-new-btn svg { display: block; }
.msg-safety-note {
  margin: 0 20px 12px; padding: 8px 12px; border-radius: 8px;
  background: var(--light); color: var(--muted); font-size: 11.5px; line-height: 1.5;
}
.msg-thread-list { flex: 1; overflow-y: auto; min-height: 0; padding: 0 10px 16px; }
.msg-thread {
  display: flex; gap: 12px; align-items: center; width: 100%;
  background: none; border: none; font-family: inherit; text-align: left;
  padding: 12px; border-radius: 12px; cursor: pointer; position: relative;
  transition: background .12s;
}
.msg-thread:hover { background: var(--gray-50); }
.msg-thread.active { background: var(--red-soft); }
.msg-av {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.msg-av-letter {
  background: var(--black); color: #fff; display: grid; place-items: center;
  font-size: 15px; font-weight: 800;
}
.msg-thread-body { flex: 1; min-width: 0; }
.msg-thread-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.msg-thread-name { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-thread-time { font-size: 11px; color: var(--gray-400); flex-shrink: 0; }
.msg-thread-preview {
  font-size: 12.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-thread.unread .msg-thread-name, .msg-thread.unread .msg-thread-preview { font-weight: 800; color: var(--ink); }
.msg-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.msg-empty-list { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13.5px; }
.msg-empty-list a { color: var(--red); font-weight: 700; }

.msg-main { display: flex; flex-direction: column; min-height: 0; }
.msg-placeholder { flex: 1; display: grid; place-items: center; padding: 40px; }
.msg-placeholder-inner { text-align: center; max-width: 380px; }
.msg-placeholder-ico { font-size: 44px; margin-bottom: 14px; }
.msg-placeholder-inner h2 { font-family: 'DM Serif Display', serif; font-size: 26px; margin-bottom: 8px; }
.msg-placeholder-inner p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.msg-placeholder-inner a { color: var(--red); font-weight: 700; }

.msg-pane { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.msg-pane-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
}
.msg-pane-av .msg-av { width: 40px; height: 40px; }
.msg-pane-name { font-size: 15px; font-weight: 800; }
.msg-pane-sub { font-size: 12px; color: var(--muted); }
.msg-scroll { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 4px; min-height: 0; background: var(--cream); }
.msg-day-divider { text-align: center; margin: 12px 0; }
.msg-day-divider span { font-size: 12px; color: var(--gray-400); }
.msg-row { display: flex; align-items: flex-end; gap: 8px; max-width: 72%; }
.msg-row.mine   { align-self: flex-end; flex-direction: row-reverse; }
.msg-row.theirs { align-self: flex-start; }
.msg-bubble {
  padding: 9px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.msg-row.mine   .msg-bubble { background: var(--red); color: #fff; border-bottom-right-radius: 5px; }
.msg-row.theirs .msg-bubble { background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.msg-time { font-size: 10.5px; color: var(--gray-400); flex-shrink: 0; }
.msg-report {
  background: none; border: none; cursor: pointer; font-size: 13px;
  color: var(--gray-400); opacity: 0; transition: opacity .12s; padding: 2px;
}
.msg-row:hover .msg-report { opacity: 1; }
.msg-report:hover { color: var(--red); }
.msg-composer {
  display: flex; gap: 10px; align-items: flex-end;
  padding: 14px 18px; border-top: 1px solid var(--border); background: var(--card);
}
.msg-input {
  flex: 1; resize: none; border: 1.5px solid var(--border); border-radius: 12px;
  font-family: inherit; font-size: 14px; padding: 10px 14px; outline: none;
  max-height: 120px; transition: border-color .15s;
}
.msg-input:focus { border-color: var(--red); }
.msg-send-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--red); color: #fff; display: grid; place-items: center; flex-shrink: 0;
  transition: background .15s;
}
.msg-send-btn:hover { background: var(--red-dark); }
.msg-error { color: var(--red-dark); font-size: 13px; padding: 12px; }

.msg-student-block { grid-column: 1 / -1; display: grid; place-items: center; padding: 40px; }
.msg-student-card {
  max-width: 460px; text-align: center; background: var(--card);
  border: 1px solid var(--border); border-radius: 16px; padding: 48px 40px; box-shadow: var(--shadow);
}
.msg-student-card h2 { font-family: 'DM Serif Display', serif; font-size: 26px; margin-bottom: 10px; }
.msg-student-card p { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 22px; }

@media (max-width: 800px) {
  .msg-shell { grid-template-columns: 1fr; }
  .msg-main { display: none; }
  .msg-pane:not([hidden]) ~ * { display: none; }
}

/* ── Dev panel ── */
.devp-page { background: var(--light); min-height: 100vh; }
.devp-shell { max-width: 1180px; margin: 0 auto; padding: 28px 32px 80px; }
.devp-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 26px; }
.devp-stat {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 2px;
}
.devp-stat-n { font-size: 28px; font-weight: 900; color: var(--ink); }
.devp-stat-l { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.devp-stat-alert .devp-stat-n { color: var(--red); }

.devp-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.devp-tab {
  background: none; border: 1px solid transparent; border-radius: 100px;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--muted);
  padding: 8px 18px; cursor: pointer; text-decoration: none; transition: all .12s;
}
.devp-tab:hover { color: var(--ink); }
.devp-tab.active { background: var(--black); color: #fff; }
.devp-tab-spacer { flex: 1; }
.devp-sweep-btn {
  background: var(--red); color: #fff; border: none; border-radius: 100px;
  font-family: inherit; font-size: 13px; font-weight: 800; padding: 9px 20px; cursor: pointer;
}
.devp-sweep-btn:hover { background: var(--red-dark); }
.devp-sweep-btn:disabled { opacity: .55; cursor: wait; }

.devp-panel { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.devp-filter-row { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.devp-select, .devp-input {
  font-family: inherit; font-size: 13.5px; border: 1.5px solid var(--border);
  border-radius: 8px; padding: 8px 12px; outline: none; background: var(--card);
}
.devp-input { min-width: 260px; }
.devp-select:focus, .devp-input:focus { border-color: var(--red); }
.devp-select-sm { padding: 5px 8px; font-size: 12.5px; }
.devp-hint { font-size: 12.5px; color: var(--muted); }
.devp-list { display: flex; flex-direction: column; gap: 12px; }
.devp-empty { padding: 36px; text-align: center; color: var(--muted); font-size: 14px; }
.devp-error { padding: 16px; color: var(--red-dark); background: var(--red-soft); border-radius: 8px; font-size: 13.5px; }
.devp-muted { color: var(--gray-400); font-size: 12.5px; }

.devp-flag { border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; padding: 14px 16px; }
.devp-flag.sev-1, .devp-flag.sev-2 { border-left-color: #f59e0b; }
.devp-flag.sev-3, .devp-flag.sev-4 { border-left-color: #ea580c; }
.devp-flag.sev-5 { border-left-color: var(--red); background: var(--red-soft); }
.devp-flag-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.devp-sev { font-size: 10.5px; font-weight: 900; letter-spacing: .06em; padding: 3px 9px; border-radius: 100px; color: #fff; }
.devp-sev-1, .devp-sev-2 { background: #f59e0b; }
.devp-sev-3, .devp-sev-4 { background: #ea580c; }
.devp-sev-5 { background: var(--red); }
.devp-source { font-size: 11.5px; font-weight: 700; color: var(--gray-600); }
.devp-cat {
  font-size: 10.5px; font-weight: 700; background: var(--gray-100); color: var(--gray-600);
  padding: 3px 9px; border-radius: 100px;
}
.devp-flag-time { margin-left: auto; font-size: 11.5px; color: var(--gray-400); }
.devp-flag-msg { font-size: 14px; color: var(--ink); line-height: 1.55; margin-bottom: 8px; }
.devp-flag-msg-gone { color: var(--gray-400); font-style: italic; }
.devp-flag-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 6px; }
.devp-flag-reason { font-size: 12.5px; color: var(--muted); font-style: italic; margin-bottom: 10px; }
.devp-flag-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.devp-act {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--gray-700);
  padding: 6px 13px; cursor: pointer; transition: all .12s;
}
.devp-act:hover { border-color: var(--ink); color: var(--ink); }
.devp-act-warn { color: #b45309; border-color: #fcd34d; }
.devp-act-warn:hover { background: #fffbeb; border-color: #b45309; color: #92400e; }
.devp-act-danger { color: var(--red-dark); border-color: rgba(200,16,46,.3); }
.devp-act-danger:hover { background: var(--red-soft); border-color: var(--red); }
.devp-status-chip {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 100px;
}
.devp-status-active    { background: #dcfce7; color: #15803d; }
.devp-status-suspended { background: #fef3c7; color: #b45309; }
.devp-status-banned    { background: var(--red-soft); color: var(--red-dark); }

.devp-user { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; flex-wrap: wrap; }
.devp-user-id { min-width: 220px; flex: 1; }
.devp-user-name { font-size: 14px; font-weight: 800; }
.devp-user-joined { margin-left: auto; }
.devp-user-actions { display: flex; gap: 8px; align-items: center; }

.devp-convo {
  display: grid; grid-template-columns: 1fr 2fr auto; gap: 14px; align-items: center;
  background: none; border: 1px solid var(--border); border-radius: 10px;
  font-family: inherit; text-align: left; padding: 13px 16px; cursor: pointer; transition: border-color .12s;
}
.devp-convo:hover { border-color: var(--ink); }
.devp-convo-names { font-size: 13.5px; font-weight: 800; }
.devp-convo-preview { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.devp-modal {
  position: fixed; inset: 0; z-index: 500; background: rgba(15,15,15,.55);
  display: none; align-items: center; justify-content: center; padding: 30px;
}
.devp-modal.open { display: flex; }
.devp-modal-box {
  background: var(--card); border-radius: 16px; width: 100%; max-width: 680px;
  max-height: 84vh; display: flex; flex-direction: column; overflow: hidden;
}
.devp-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.devp-modal-title { font-size: 17px; font-weight: 900; }
.devp-modal-sub { font-size: 12.5px; color: var(--muted); }
.devp-modal-close { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--gray-400); }
.devp-modal-body { overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.devp-cm-msg { border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; }
.devp-cm-msg.flagged { border-color: var(--red); background: var(--red-soft); }
.devp-cm-meta { display: flex; gap: 10px; align-items: baseline; font-size: 12px; color: var(--gray-400); margin-bottom: 4px; }
.devp-cm-meta strong { font-size: 13px; color: var(--ink); }
.devp-cm-flag { color: var(--red); font-weight: 800; }
.devp-cm-body { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

@media (max-width: 860px) {
  .devp-stats { grid-template-columns: repeat(2, 1fr); }
  .devp-convo { grid-template-columns: 1fr; gap: 4px; }
}

.conv-all-link {
  display: block; text-align: center; padding: 12px;
  font-size: 13px; font-weight: 800; color: var(--red); text-decoration: none;
}
.conv-all-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Auth role picker ── */
.auth-role-cards { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 4px; }
.auth-role-card {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 16px; cursor: pointer; font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-role-card:hover { border-color: var(--gray-400); }
.auth-role-card.selected {
  border-color: var(--red); background: var(--red-soft);
  box-shadow: 0 0 0 3px rgba(200,16,46,.10);
}
.auth-role-card-ico { font-size: 26px; flex-shrink: 0; }
.auth-role-card-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.auth-role-card-sub { font-size: 12.5px; color: var(--gray-600); line-height: 1.5; }
.auth-role-card-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border); transition: all .15s; position: relative;
}
.auth-role-card.selected .auth-role-card-check { border-color: var(--red); background: var(--red); }
.auth-role-card.selected .auth-role-card-check::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
/* Greyed-out option (e.g. alumni sign-up temporarily closed) */
.auth-role-card.locked { opacity: .5; filter: grayscale(.5); cursor: default; }
.auth-role-card.locked:hover { border-color: var(--border); }

/* ══════════════════════════════════════════════════════════════════
   POLISH LAYER — site-wide professional refinements
══════════════════════════════════════════════════════════════════ */

/* Brand selection color */
::selection { background: rgba(200,16,46,.16); }

/* Slim, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: #c9c5bc transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #c9c5bc; border-radius: 100px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background-color: #a8a49b; }

/* Visible, consistent keyboard focus */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Typographic rhythm for display headings */
.hero-title, .auth-heading, .auth-success-title, .browse-title,
.dash-title, .co-name, .msg-sidebar-head h1 {
  letter-spacing: -0.015em;
  text-wrap: balance;
}
p, .hero-sub, .dash-sub, .auth-sub { text-wrap: pretty; }

/* Unified interactive feedback */
a, button { -webkit-tap-highlight-color: transparent; }
.btn-red, .btn-outline, .auth-google-btn, .auth-primary-btn, .devp-act,
.dash-query-btn, .msg-send-btn, .apc-select-btn, .auth-explore-btn {
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-red:hover, .auth-explore-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(200,16,46,.28); }
.btn-red:active, .auth-google-btn:active, .auth-explore-btn:active,
.devp-act:active, .msg-send-btn:active { transform: translateY(0) scale(.98); }

/* Cards: calmer default, confident hover */
.alumni-card {
  transition: transform .16s ease, box-shadow .2s ease, border-color .16s ease;
}
.alumni-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(15,15,15,.10);
  border-color: #d5d2c9;
}

/* Navbar: hairline bottom edge for depth on light pages */
#navbar { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 14px rgba(0,0,0,.22); }

/* Inputs: consistent focus glow everywhere */
.browse-search:focus, .filter-text-input:focus, .filter-select:focus,
.dash-query-input:focus, .auth-search-inp:focus, .devp-input:focus,
.devp-select:focus, .msg-input:focus, .filter-ms-search:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200,16,46,.10);
}

/* Images never drag-ghost */
img { -webkit-user-drag: none; }

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

/* ══════════════════════════════════════════════════════════════════
   V2.1 — profile editor, dashboard v2, messages redesign
══════════════════════════════════════════════════════════════════ */

/* ── Dashboard v2 welcome band ── */
.dash-welcome-v2 .dash-welcome-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.dash-quick-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-qa {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.88); text-decoration: none;
  font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 100px;
  transition: background .15s, border-color .15s, transform .12s;
}
.dash-qa:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.dash-qa-primary { background: var(--red); border-color: var(--red); color: #fff; }
.dash-qa-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.dash-qa-badge {
  background: var(--card); color: var(--red); font-size: 11px; font-weight: 900;
  min-width: 18px; height: 18px; border-radius: 100px;
  display: inline-grid; place-items: center; padding: 0 5px;
}

/* ── Dashboard two-column cards ── */
.dash-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dash-two-col.single { grid-template-columns: 1fr; }
.dash-col-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 24px; box-shadow: 0 2px 10px rgba(15,15,15,.03);
  display: flex; flex-direction: column; min-height: 220px;
}
.dash-col-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.dash-col-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.dash-col-link {
  font-size: 12.5px; font-weight: 800; color: var(--red);
  text-decoration: none; white-space: nowrap; padding-top: 3px;
}
.dash-col-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.dash-col-card .dash-own-card { border: none; padding: 0; box-shadow: none; background: none; }
@media (max-width: 900px) { .dash-two-col { grid-template-columns: 1fr; } }

.conv-avatar-img {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.conv-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.conv-row.conv-unread .conv-name, .conv-row.conv-unread .conv-preview { font-weight: 800; color: var(--ink); }

/* ── Messages redesign ── */
.msg-search-wrap { position: relative; margin: 0 16px 10px; }
.msg-search-wrap svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--gray-400); pointer-events: none;
}
.msg-search {
  width: 100%; border: 1.5px solid var(--border); border-radius: 100px;
  font-family: inherit; font-size: 13px; padding: 8px 14px 8px 34px;
  outline: none; background: var(--gray-50); transition: border-color .15s, background .15s;
}
.msg-search:focus { border-color: var(--red); background: var(--card); }

.msg-safety-note {
  margin: 10px 16px 14px; padding: 8px 12px; border-radius: 8px;
  display: flex; align-items: center; gap: 7px;
  background: var(--light); color: var(--muted); font-size: 11px; line-height: 1.45;
}
.msg-safety-note svg { flex-shrink: 0; color: var(--gray-400); }

.msg-pane-actions { margin-left: auto; }
.msg-pane-btn {
  font-size: 12.5px; font-weight: 800; color: var(--gray-700); text-decoration: none;
  border: 1.5px solid var(--border); border-radius: 100px; padding: 7px 16px;
  transition: all .13s;
}
.msg-pane-btn:hover { border-color: var(--ink); color: var(--ink); }

.msg-av-sm { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.msg-av-sm.msg-av-letter, .msg-av-sm-letter {
  background: var(--black); color: #fff; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 800;
}
.msg-row-av { width: 28px; flex-shrink: 0; align-self: flex-end; }
.msg-row-av-spacer { height: 1px; }
.msg-row.grouped { margin-top: -1px; }
.msg-row.theirs.grouped .msg-bubble { border-top-left-radius: 8px; }
.msg-row.mine.grouped .msg-bubble { border-top-right-radius: 8px; }
.msg-row { margin-top: 8px; }
.msg-row.grouped { margin-top: 2px; }

.msg-day-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 20px 0 10px; text-align: center;
}
.msg-day-divider::before, .msg-day-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.msg-day-divider span {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gray-400);
}

.msg-convo-start { text-align: center; margin: auto; padding: 40px 20px; }
.msg-convo-start-av { display: inline-block; margin-bottom: 12px; }
.msg-convo-start-av .msg-av { width: 64px; height: 64px; font-size: 20px; }
.msg-convo-start-name { font-size: 18px; font-weight: 800; }
.msg-convo-start-sub { font-size: 13px; color: var(--muted); margin: 3px 0 14px; }
.msg-convo-start-hint {
  display: inline-block; font-size: 12.5px; color: var(--gray-500);
  background: var(--light); border-radius: 100px; padding: 7px 16px;
}

/* ── Profile editor ── */
.pf-page { background: var(--light); min-height: 100vh; }
.pf-shell { max-width: 880px; margin: 0 auto; padding: 36px 28px 120px; }
.pf-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 26px; flex-wrap: wrap;
}
.pf-title { font-family: 'DM Serif Display', serif; font-size: 38px; letter-spacing: -0.015em; }
.pf-sub { font-size: 14px; color: var(--muted); margin-top: 6px; }

.pf-preview-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--black); color: #fff; border-radius: 16px;
  padding: 16px 20px; min-width: 300px; position: relative;
  border-bottom: 3px solid var(--red);
}
.pf-pv-av img, .pf-pv-letter {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
}
.pf-pv-letter {
  background: var(--red); display: grid; place-items: center;
  font-size: 18px; font-weight: 800; color: #fff;
}
.pf-pv-name { font-size: 15px; font-weight: 800; }
.pf-pv-headline { font-size: 12.5px; color: rgba(255,255,255,.65); margin-top: 1px; }
.pf-pv-meta { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 3px; }

.pf-form { display: flex; flex-direction: column; gap: 18px; }
.pf-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px 26px;
}
.pf-card-title {
  font-size: 12px; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red); margin-bottom: 18px;
}
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
@media (max-width: 640px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-field { display: flex; flex-direction: column; gap: 6px; }
.pf-field > span {
  font-size: 12px; font-weight: 700; color: var(--gray-600);
  letter-spacing: .02em;
}
.pf-hint-inline { font-style: normal; font-weight: 500; color: var(--gray-400); }
.pf-input {
  border: 1.5px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: 14px; padding: 10px 14px;
  outline: none; background: var(--card); transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.pf-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,16,46,.10); }
.pf-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.pf-hint { font-size: 12px; color: var(--gray-400); margin-top: 12px; }
.pf-skill-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.pf-savebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  background: var(--savebar-bg, rgba(255,255,255,.92)); backdrop-filter: blur(8px);
  border-top: 1px solid var(--border); padding: 14px 28px;
}
.pf-savebar-msg { margin-right: auto; font-size: 13px; font-weight: 600; color: var(--muted); }
.pf-savebar-msg.ok  { color: #15803d; }
.pf-savebar-msg.err { color: var(--red-dark); }
.pf-save { border-radius: 100px; padding: 12px 28px; }
.pf-cancel { border-radius: 100px; padding: 12px 22px; color: var(--gray-700); border-color: var(--border); }
.pf-cancel:hover { border-color: var(--ink); color: var(--ink); }

/* The [hidden] attribute must always win, even over display:flex/grid
   classes (this bug made the account dropdown and the messages
   placeholder render when they should be hidden). */
[hidden] { display: none !important; }

/* ── Dashboard conversation rows (restored + refined) ── */
.conv-list { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.conv-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; text-align: left; font-family: inherit;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  transition: background .12s;
}
.conv-row:hover { background: var(--gray-50); }
.conv-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--black); color: #fff; display: grid; place-items: center;
  font-size: 14px; font-weight: 800;
}
.conv-body { flex: 1; min-width: 0; }
.conv-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.conv-preview {
  font-size: 12.5px; color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-time { font-size: 11px; color: var(--gray-400); flex-shrink: 0; }
.conv-empty { text-align: center; padding: 28px 16px; margin: auto; }
.conv-empty-icon { font-size: 30px; margin-bottom: 8px; }
.conv-empty-title { font-size: 14.5px; font-weight: 800; }
.conv-empty-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════
   V2.2 — student messaging, colleges
══════════════════════════════════════════════════════════════════ */

/* Student messaging banner */
.msg-student-banner {
  margin: 0 16px 12px; padding: 10px 14px; border-radius: 10px;
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
  font-size: 12px; line-height: 1.55;
}

/* ── Colleges index ── */
.col-page { background: var(--white); }
.col-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}
.col-card {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; transition: transform .15s, box-shadow .2s, border-color .15s;
}
.col-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(15,15,15,.10); border-color: #d5d2c9; }
.col-card-top { display: flex; align-items: center; justify-content: space-between; }
.col-card-letter {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: var(--black); color: #fff; font-family: 'DM Serif Display', serif; font-size: 22px;
}
.col-card-n {
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: var(--red-soft); color: var(--red-dark); border-radius: 100px; padding: 4px 11px;
}
.col-card-name { font-size: 16.5px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.col-card-meta { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.col-card-cta { font-size: 12.5px; font-weight: 800; color: var(--red); margin-top: auto; }

/* ── College detail ── */
.cl-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .cl-stats-grid { grid-template-columns: 1fr; } }
.cl-bars { display: flex; flex-direction: column; gap: 9px; }
.cl-bar-row { display: grid; grid-template-columns: minmax(90px, 40%) 1fr 26px; align-items: center; gap: 10px; }
.cl-bar-label { font-size: 12.5px; font-weight: 600; color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-bar-track { height: 8px; border-radius: 100px; background: var(--gray-100); overflow: hidden; }
.cl-bar-fill { height: 100%; border-radius: 100px; }
.cl-bar-n { font-size: 12px; font-weight: 800; color: var(--gray-500); text-align: right; }
.cl-employers { display: flex; flex-direction: column; gap: 7px; }
.cl-employer {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  text-decoration: none; color: var(--gray-700); font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 9px; padding: 8px 13px; transition: border-color .12s;
}
.cl-employer:hover { border-color: var(--ink); color: var(--ink); }
.cl-employer-n {
  font-size: 11px; font-weight: 800; background: var(--gray-100); color: var(--gray-600);
  border-radius: 100px; padding: 2px 9px;
}
.cl-insight { border-top: 1px solid var(--border); padding-top: 26px; }

/* ══════════════════════════════════════════════════════════════════
   APP TABS + THEME TOGGLE
══════════════════════════════════════════════════════════════════ */
#apptabs {
  position: sticky; top: 60px; z-index: 90;
  background: var(--card); border-bottom: 1px solid var(--border);
}
.apptabs-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
  display: flex; gap: 4px;
}
.apptab {
  position: relative; text-decoration: none;
  font-size: 13.5px; font-weight: 700; color: var(--muted);
  padding: 13px 18px 11px; border-bottom: 2.5px solid transparent;
  transition: color .13s;
}
.apptab:hover { color: var(--ink); }
.apptab.active { color: var(--red); border-bottom-color: var(--red); }
@media (max-width: 560px) {
  .apptabs-inner { padding: 0 10px; }
  .apptab { padding: 12px 10px 10px; font-size: 12.5px; }
}

/* messages shell sits right under the navbar (tabs live inside it) */
body.has-apptabs .msg-shell { height: calc(100vh - 60px); }

.theme-toggle {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; margin: 0 14px;
  background: transparent; border: 1.5px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.85); cursor: pointer;
  transition: background .15s, color .15s;
}
.theme-toggle:hover { background: rgba(255,255,255,.16); color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   DARK THEME
══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --ink:      #ECEAE6;
  --card:     #1B1B1B;
  --white:    #121212;
  --cream:    #161616;
  --light:    #0D0D0D;
  --border:   #2C2C2C;
  --muted:    #A09B92;
  --red-soft: rgba(200,16,46,.16);
  --gray-900: #F3F4F6;
  --gray-700: #D6D9DE;
  --gray-600: #B9BEC7;
  --gray-500: #9CA3AF;
  --gray-400: #6F7680;
  --gray-200: #33363B;
  --gray-100: #242628;
  --gray-50:  #1E2022;
  --shadow:    0 4px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.6);
  --savebar-bg: rgba(18,18,18,.92);
  color-scheme: dark;
}
/* Surfaces that hardcode light colors */
html[data-theme="dark"] .browse-header,
html[data-theme="dark"] .dash-welcome { border-bottom: 1px solid var(--border); }
html[data-theme="dark"] .alumni-card,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .devp-modal-box { background: var(--card); }
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .field-section { background: var(--white); border-color: var(--border); }
html[data-theme="dark"] .msg-row.theirs .msg-bubble { background: var(--gray-100); border-color: var(--gray-200); color: var(--ink); }
html[data-theme="dark"] .msg-composer,
html[data-theme="dark"] .msg-input { background: var(--card); color: var(--ink); }
html[data-theme="dark"] .msg-search { background: var(--gray-50); color: var(--ink); }
html[data-theme="dark"] .pf-input,
html[data-theme="dark"] .devp-select, html[data-theme="dark"] .devp-input,
html[data-theme="dark"] .devp-o-input,
html[data-theme="dark"] .filter-select, html[data-theme="dark"] .filter-text-input,
html[data-theme="dark"] .dash-query-input,
html[data-theme="dark"] .browse-search, html[data-theme="dark"] .auth-search-inp {
  background: var(--card); color: var(--ink); border-color: var(--border);
}
html[data-theme="dark"] .auth-google-btn { background: var(--card); color: var(--ink); border-color: var(--gray-200); }
html[data-theme="dark"] .msg-student-banner { background: #12233d; border-color: #1e3a5f; color: #9cc3f5; }
html[data-theme="dark"] .devp-status-active { background: #123a22; color: #4ade80; }
html[data-theme="dark"] .auth-role-chip-student { background: #142a4d; color: #7ab3f7; }
html[data-theme="dark"] img { opacity: .94; }

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD V3 — application-grade home (dbx-*)
══════════════════════════════════════════════════════════════════ */
.dbx-page { background: var(--light); min-height: 100vh; }
.dbx-shell { max-width: 1200px; margin: 0 auto; padding: 30px 32px 72px; }

/* Header */
.dbx-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 24px; flex-wrap: wrap;
}
.dbx-greeting {
  font-family: 'DM Serif Display', serif; font-size: 34px;
  letter-spacing: -0.015em; line-height: 1.1;
}
.dbx-subline { font-size: 14px; color: var(--muted); margin-top: 6px; }
.dbx-net-stats {
  display: flex; align-items: center; gap: 20px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 22px;
}
.dbx-net-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.dbx-net-stat span { font-size: 19px; font-weight: 900; color: var(--ink); line-height: 1.1; }
.dbx-net-stat label { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.dbx-net-div { width: 1px; height: 30px; background: var(--border); }

/* Grid */
.dbx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
@media (max-width: 1020px) { .dbx-grid { grid-template-columns: 1fr; } .dbx-rail { order: -1; } }
.dbx-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.dbx-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 77px; }
@media (max-width: 1020px) { .dbx-rail { position: static; } }

/* Cards */
.dbx-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(15,15,15,.04);
}
.dbx-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 16px;
}
.dbx-label {
  font-size: 11px; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red);
}
.dbx-card-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; margin-top: 4px; }
.dbx-head-action {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: none; border: 1.5px solid var(--border); border-radius: 100px;
  font-family: inherit; font-size: 12px; font-weight: 800; color: var(--gray-600);
  padding: 7px 15px; cursor: pointer; transition: all .13s;
}
.dbx-head-action:hover { border-color: var(--ink); color: var(--ink); }

/* Search module */
.dbx-search-row { display: flex; gap: 10px; align-items: stretch; }
.dbx-search-input {
  flex: 1; resize: none; border: 1.5px solid var(--border); border-radius: 12px;
  font-family: inherit; font-size: 14.5px; line-height: 1.5; padding: 13px 16px;
  outline: none; background: var(--card); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.dbx-search-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,16,46,.10); }
.dbx-search-btn {
  display: inline-flex; align-items: center; gap: 8px; align-self: stretch;
  background: var(--red); color: #fff; border: none; border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 800; padding: 0 26px;
  cursor: pointer; transition: background .15s, transform .12s;
}
.dbx-search-btn:hover { background: var(--red-dark); transform: translateY(-1px); }
.dbx-search-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.dbx-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.dbx-chip {
  background: var(--gray-50); border: 1px solid var(--border); border-radius: 100px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--gray-600);
  padding: 7px 14px; cursor: pointer; transition: all .13s;
}
.dbx-chip:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.dbx-results-label {
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  margin: 18px 0 12px; padding-top: 16px; border-top: 1px solid var(--border);
}
.alumni-grid.dbx-two { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .alumni-grid.dbx-two { grid-template-columns: 1fr; } }

/* Directory CTA */
.dbx-directory-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--black); border-radius: 14px; padding: 24px 28px;
  border-bottom: 3px solid var(--red); flex-wrap: wrap;
}
.dbx-cta-title { font-family: 'DM Serif Display', serif; font-size: 21px; color: #fff; }
.dbx-cta-sub { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 4px; max-width: 480px; }
.dbx-cta-btn { border-radius: 100px; padding: 12px 24px; flex-shrink: 0; }

/* Rail: profile */
.dbx-profile-id { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.dbx-profile-av, .dbx-profile-av img {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
}
.dbx-profile-av {
  background: var(--red); display: grid; place-items: center; overflow: hidden;
  color: #fff; font-size: 17px; font-weight: 800; flex-shrink: 0;
}
.dbx-profile-name { font-size: 15.5px; font-weight: 800; }
.dbx-profile-role { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.dbx-completeness { margin: 4px 0 14px; }
.dbx-comp-row {
  display: flex; justify-content: space-between;
  font-size: 12px; font-weight: 700; color: var(--gray-600); margin-bottom: 6px;
}
.dbx-comp-track { height: 7px; border-radius: 100px; background: var(--gray-100); overflow: hidden; }
.dbx-comp-fill { height: 100%; border-radius: 100px; background: var(--red); transition: width .5s ease; }
.dbx-comp-hint { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.dbx-rail-btn {
  display: block; text-align: center; text-decoration: none;
  border: 1.5px solid var(--border); border-radius: 100px;
  font-size: 13px; font-weight: 800; color: var(--ink); padding: 10px;
  transition: all .13s;
}
.dbx-rail-btn:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }

/* Rail: shared */
.dbx-rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dbx-rail-link { font-size: 12px; font-weight: 800; color: var(--red); text-decoration: none; }
.dbx-rail-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.dbx-rail-empty { font-size: 12.5px; color: var(--muted); line-height: 1.6; padding: 6px 0; }
.dbx-rail-empty a { color: var(--red); font-weight: 700; }

/* Rail: messages */
.dbx-msg-list { display: flex; flex-direction: column; gap: 2px; }
.dbx-msg-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; text-align: left; font-family: inherit;
  padding: 8px; margin: 0 -8px; border-radius: 10px; cursor: pointer;
  transition: background .12s;
}
.dbx-msg-row:hover { background: var(--gray-50); }
.dbx-msg-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dbx-msg-av-l { background: var(--black); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.dbx-msg-body { flex: 1; min-width: 0; }
.dbx-msg-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.dbx-msg-preview {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dbx-msg-row.unread .dbx-msg-name, .dbx-msg-row.unread .dbx-msg-preview { font-weight: 800; color: var(--ink); }

/* Rail: industries */
.dbx-ind-list { display: flex; flex-direction: column; gap: 9px; }
.dbx-ind-row {
  display: grid; grid-template-columns: minmax(70px, 44%) 1fr 24px;
  align-items: center; gap: 9px; text-decoration: none;
}
.dbx-ind-name {
  font-size: 12px; font-weight: 600; color: var(--gray-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dbx-ind-row:hover .dbx-ind-name { color: var(--ink); }
.dbx-ind-track { height: 6px; border-radius: 100px; background: var(--gray-100); overflow: hidden; }
.dbx-ind-fill { display: block; height: 100%; border-radius: 100px; }
.dbx-ind-n { font-size: 11px; font-weight: 800; color: var(--gray-400); text-align: right; }

/* Rail: colleges promo */
.dbx-colleges-promo { border-top: 3px solid var(--red); }
.dbx-promo-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin: 6px 0 6px; }
.dbx-promo-sub { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; }

@media (max-width: 640px) {
  .dbx-shell { padding: 20px 16px 56px; }
  .dbx-search-row { flex-direction: column; }
  .dbx-search-btn { padding: 13px; justify-content: center; }
  .dbx-net-stats { width: 100%; justify-content: space-around; }
}

/* ══════════════════════════════════════════════════════════════════
   FULL-WIDTH LAYOUT + INDUSTRY EXPLORER
══════════════════════════════════════════════════════════════════ */
/* Use the whole viewport — no 4:3 letterboxing */
.dbx-shell { max-width: none; padding: 30px 44px 72px; }
.apptabs-inner { max-width: none; padding: 0 44px; }
.dbx-grid { grid-template-columns: minmax(0, 1fr) 350px; gap: 26px; }
body.has-apptabs .msg-shell,
.msg-shell { max-width: none; border-left: none; border-right: none; }
.msg-shell { grid-template-columns: 380px 1fr; }
@media (max-width: 800px) { .msg-shell { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .dbx-shell, .apptabs-inner { padding-left: 20px; padding-right: 20px; } }

/* Cards flow wider now */
.alumni-grid.dbx-two, .alumni-grid.dbx-cols {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

/* Instant directory search */
.dbx-find-row { display: flex; align-items: center; gap: 14px; }
.dbx-find-ico { width: 20px; height: 20px; color: var(--gray-400); flex-shrink: 0; }
.dbx-find-input {
  flex: 1; border: none; outline: none; background: none;
  font-family: inherit; font-size: 16.5px; font-weight: 500; color: var(--ink);
  padding: 6px 0;
}
.dbx-find-input::placeholder { color: var(--gray-400); font-weight: 400; }
.dbx-find-all {
  flex-shrink: 0; font-size: 12.5px; font-weight: 800; color: var(--red);
  text-decoration: none; border: 1.5px solid var(--border); border-radius: 100px;
  padding: 8px 16px; transition: all .13s;
}
.dbx-find-all:hover { border-color: var(--red); background: var(--red-soft); }

/* Industry explorer */
.dbx-exp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.dbx-exp-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--gray-50); border: 1.5px solid var(--border); border-radius: 100px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--gray-600);
  padding: 7px 14px; cursor: pointer; transition: all .13s;
}
.dbx-exp-tag span {
  font-size: 10.5px; font-weight: 800; color: var(--gray-400);
  background: var(--gray-100); border-radius: 100px; padding: 1px 7px;
}
.dbx-exp-tag:hover { border-color: var(--c); color: var(--ink); }
.dbx-exp-tag.active { background: var(--c); border-color: var(--c); color: #fff; }
.dbx-exp-tag.active span { background: rgba(255,255,255,.22); color: #fff; }

.dbx-exp-companies {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px;
}
@media (max-width: 760px) { .dbx-exp-companies { grid-template-columns: 1fr; } }
.dbx-exp-co {
  display: grid; grid-template-columns: minmax(110px, 46%) 1fr 26px;
  align-items: center; gap: 12px; text-decoration: none;
  padding: 7px 10px; margin: 0 -10px; border-radius: 9px;
  transition: background .12s;
}
.dbx-exp-co:hover { background: var(--gray-50); }
.dbx-exp-co-name {
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dbx-exp-co-track { height: 7px; border-radius: 100px; background: var(--gray-100); overflow: hidden; }
.dbx-exp-co-track span { display: block; height: 100%; border-radius: 100px; }
.dbx-exp-co-n { font-size: 12px; font-weight: 800; color: var(--gray-500); text-align: right; }

/* ── Hero search prominence ── */
.dbx-search-card {
  margin-bottom: 26px; padding: 8px 10px 8px 24px;
  border-width: 2px; border-radius: 100px;
  box-shadow: 0 6px 24px rgba(15,15,15,.07);
  transition: border-color .15s, box-shadow .15s;
}
.dbx-search-card:focus-within { border-color: var(--red); }
.dbx-search-card .dbx-find-row { min-height: 52px; }
.dbx-find-ico { width: 24px; height: 24px; }
.dbx-find-input { font-size: 19px; font-weight: 600; }
.dbx-find-input::placeholder { font-weight: 400; }
.dbx-find-kbd {
  flex-shrink: 0; font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700;
  color: var(--gray-400); border: 1.5px solid var(--border); border-radius: 6px;
  padding: 3px 9px; background: var(--gray-50);
}
.dbx-search-card:focus-within .dbx-find-kbd { display: none; }
.dbx-find-all { padding: 10px 20px; font-size: 13px; }
/* results panel breaks out of the pill shape */
.dbx-search-card #dbx-find-results-wrap:not([hidden]) { padding: 0 14px 18px 0; }
.dbx-search-card:has(#dbx-find-results-wrap:not([hidden])) { border-radius: 26px; }
@media (max-width: 640px) {
  .dbx-search-card { border-radius: 18px; padding: 10px 14px; }
  .dbx-find-kbd, .dbx-find-all { display: none; }
  .dbx-find-input { font-size: 16px; }
}

/* ── College branding assets ── */
.col-card-logo {
  display: block; width: 44px; height: 44px; border-radius: 11px; overflow: hidden;
  background: #fff; border: 1px solid var(--border); flex-shrink: 0;
}
.col-card-logo img { width: 128%; height: 128%; margin: -14%; object-fit: contain; display: block; }
.cl-hero-banner { background-size: cover; background-position: center; }

/* ── Admin role-preview bar ── */
.preview-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  background: #b45309; color: #fff; padding: 10px 20px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 -4px 18px rgba(0,0,0,.25);
}
.preview-bar strong { font-weight: 900; }
.preview-bar button {
  background: #fff; color: #92400e; border: none; border-radius: 100px;
  font-family: inherit; font-size: 12.5px; font-weight: 800;
  padding: 7px 18px; cursor: pointer; transition: transform .12s;
}
.preview-bar button:hover { transform: translateY(-1px); }
body.has-preview-bar { padding-bottom: 52px; }
body.has-preview-bar .msg-shell { height: calc(100vh - 60px - 44px); }
body.has-preview-bar .pf-savebar { bottom: 44px; }

/* Dark refinements for the field grid */
html[data-theme="dark"] .field-btn {
  border-color: var(--gray-200);
  box-shadow: none;
}
html[data-theme="dark"] .field-btn.active {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--red)) 25%, transparent);
}
html[data-theme="dark"] .field-btn.active .field-name { color: color-mix(in srgb, var(--c, var(--red)) 70%, #fff); }
html[data-theme="dark"] .field-clear-btn { border-color: rgba(200,16,46,.35); }

/* Centered directory/colleges header */
.browse-header-inner { text-align: center; }
.browse-search-wrap { margin: 0 auto; }

/* ── Mobile navbar fit ──────────────────────────────────────────────
   The nav's fixed-width children (logo, toggle, buttons, account chip)
   can outgrow a phone viewport, collapsing the spacer and pushing the
   right-side button off-screen. Slim everything so it always fits.
   Kept at the end of the file so it wins the cascade. */
@media (max-width: 600px) {
  #navbar { padding: 0 14px; }
  .nav-logo-sub { display: none; }
  .nav-logo { gap: 9px; }
  .nav-btn { padding: 7px 12px; font-size: 12px; white-space: nowrap; }
  .theme-toggle { margin: 0 10px; width: 30px; height: 30px; }
  .nav-account { margin-left: 10px; }
  .nav-account-role { display: none; }
}

/* ── Blocking + account management (App Store compliance) ─────────── */
.mp-block-row { padding: 6px 36px 26px; text-align: center; }
.mp-block-btn {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; color: var(--gray-400);
  text-decoration: underline; text-underline-offset: 3px;
}
.mp-block-btn:hover { color: #DC2626; }
.mp-block-btn.unblock:hover { color: var(--ink); }

.pf-acct-block { padding: 14px 0; }
.pf-acct-block + .pf-acct-block { border-top: 1px solid var(--border); }
.pf-acct-label { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 10px; }
.pf-acct-desc { font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; max-width: 560px; }
.pf-delete-btn {
  background: none; border: 1.5px solid #DC2626; color: #DC2626;
  font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 9px 18px; border-radius: 8px; cursor: pointer;
  transition: background .15s, color .15s;
}
.pf-delete-btn:hover { background: #DC2626; color: #fff; }

.pf-blocked-list { display: flex; flex-direction: column; gap: 8px; }
.pf-blocked-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--gray-50); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 600;
  color: var(--ink); max-width: 420px;
}
.pf-unblock-btn {
  background: none; border: 1px solid var(--border); color: var(--muted);
  font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: 7px; cursor: pointer;
}
.pf-unblock-btn:hover { border-color: var(--ink); color: var(--ink); }

/* ── Legal pages ─────────────────────────────────────────────────── */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
.legal-title { font-family: 'DM Serif Display', serif; font-size: 40px; color: var(--ink); margin-bottom: 6px; }
.legal-updated { font-size: 12.5px; color: var(--gray-400); margin-bottom: 32px; }
.legal-wrap p, .legal-wrap li { font-size: 14.5px; line-height: 1.7; color: var(--gray-700); margin-bottom: 14px; }
.legal-wrap h2 { font-size: 17px; font-weight: 800; color: var(--ink); margin: 30px 0 10px; }
.legal-wrap ul { padding-left: 22px; margin-bottom: 14px; }
.legal-wrap li { margin-bottom: 8px; }
.legal-wrap a { color: var(--red); font-weight: 600; }
.footer-copy a { color: inherit; }

/* ══════════════════════════════════════════════════════════════════
   PHONE APP SHELL (≤768px) — bottom tab bar, app-formatted pages.
   iPad and desktop keep the top tab strip and wide layouts.
══════════════════════════════════════════════════════════════════ */
:root { --tabbar-h: 0px; }
#tabbar { display: none; }
.msg-back-btn { display: none; }

@media (max-width: 768px) {
  :root { --tabbar-h: calc(58px + env(safe-area-inset-bottom, 0px)); }

  /* ── Shell ── */
  #apptabs { display: none; }
  body.has-apptabs { padding-bottom: var(--tabbar-h); }
  #navbar { padding-top: env(safe-area-inset-top, 0px); height: calc(60px + env(safe-area-inset-top, 0px)); }

  #tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    height: var(--tabbar-h);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--card) 90%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border-top: 1px solid var(--border);
  }
  .tabbar-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; text-decoration: none; color: var(--gray-500);
    font-size: 10px; font-weight: 700; letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar-item svg { width: 23px; height: 23px; }
  .tabbar-item.active { color: var(--red); }

  /* ── Dashboard ── */
  .dbx-shell { padding: 18px 16px 40px; }
  .dbx-head { margin-bottom: 16px; gap: 14px; }
  .dbx-greeting { font-size: 27px; }
  .dbx-subline { font-size: 13px; }
  .dbx-net-stats { width: 100%; justify-content: space-around; padding: 10px 8px; }
  .dbx-search-card { padding: 5px 6px 5px 16px; margin-bottom: 18px; }
  .dbx-search-card .dbx-find-row { min-height: 46px; gap: 10px; }
  .dbx-find-ico { width: 20px; height: 20px; }
  .dbx-find-input { font-size: 16px; } /* ≥16px stops iOS zoom-on-focus */
  .dbx-find-all { padding: 9px 14px; font-size: 12px; white-space: nowrap; }
  .dbx-grid { gap: 16px; }

  /* ── Browse ── */
  .browse-header { padding: 26px 16px 22px; }
  .browse-title { font-size: 26px; letter-spacing: -.5px; }
  .browse-sub { font-size: 13.5px; margin-bottom: 16px; }
  .browse-search-wrap { max-width: none; }
  .browse-search { font-size: 16px; }
  .filter-bar-inner {
    padding: 10px 16px; gap: 12px; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .filter-bar-inner::-webkit-scrollbar { display: none; }
  .browse-body { padding: 14px 16px 32px; }
  .alumni-grid { grid-template-columns: 1fr; }

  /* ── Profile modal → full-screen sheet ── */
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal-box {
    max-width: none; width: 100%; height: 100dvh; max-height: none;
    border-radius: 0; border: none;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .modal-close-btn {
    position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px;
    width: 36px; height: 36px; border-radius: 50%; z-index: 10;
    background: rgba(0,0,0,.5); color: #fff; border: none;
    font-size: 16px; display: grid; place-items: center;
  }

  /* ── Messages: list-first, tap a thread to slide into the chat ── */
  .msg-page.has-apptabs { padding-bottom: 0; }
  .msg-shell, body.has-apptabs .msg-shell {
    grid-template-columns: 1fr;
    height: calc(100dvh - 60px - env(safe-area-inset-top, 0px) - var(--tabbar-h));
  }
  .msg-sidebar { border-right: none; }
  .msg-main { display: none; }
  .msg-shell.chat-open .msg-sidebar { display: none; }
  .msg-shell.chat-open .msg-main { display: flex; flex-direction: column; min-height: 0; }
  /* In an open chat the tab bar yields to the composer (iOS pattern) */
  .msg-shell.chat-open { height: calc(100dvh - 60px - env(safe-area-inset-top, 0px)); }
  .msg-shell.chat-open ~ #tabbar { display: none; }
  .msg-back-btn {
    display: grid; place-items: center; width: 36px; height: 36px;
    margin-right: 2px; flex-shrink: 0;
    background: none; border: none; color: var(--ink); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .msg-pane-head { padding: 10px 12px; gap: 10px; }
  .msg-input { font-size: 16px; }
  .msg-composer { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

  /* ── Colleges / college / company ── */
  .col-grid { grid-template-columns: 1fr; }
  .cl-stats-grid { grid-template-columns: 1fr; gap: 24px; }
  .co-hero-inner { padding: 0 16px; gap: 16px; }
  .co-logo-wrap, .co-logo-skeleton { width: 64px; height: 64px; border-radius: 14px; }
  .co-logo-letter { font-size: 30px; }
  .co-name { font-size: 24px; }
  .co-section-inner { padding: 0 16px; }
  .co-about-grid { grid-template-columns: 1fr; }

  /* ── Profile editor ── */
  .pf-grid { grid-template-columns: 1fr; }
  .pf-savebar { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--tabbar-h)); }
}

/* iPad portrait: single-column dashboard reads better */
@media (min-width: 769px) and (max-width: 1020px) {
  .dbx-shell { padding: 26px 28px 60px; }
  .browse-body, .filter-bar-inner { padding-left: 28px; padding-right: 28px; }
}

/* Fix: the full-width pass (unscoped .dbx-grid rule) was overriding the
   tablet breakpoint, leaving a squeezed 0-width rail column behind the
   main column on phones/iPad portrait. Re-assert single column here. */
@media (max-width: 1020px) {
  .dbx-grid { grid-template-columns: 1fr; }
  .dbx-rail { order: -1; position: static; }
}
@media (max-width: 768px) {
  .dbx-rail { order: 1; } /* phones: rail below the feed; tab bar covers nav */
  .msg-pane-btn { white-space: nowrap; font-size: 12px; padding: 6px 10px; }
}

/* ══ Rounded pass — softer, more app-like radii everywhere ══ */
.dbx-card, .alumni-card, .col-card, .pf-card, .dbx-directory-cta { border-radius: 22px; }
.dbx-net-stats { border-radius: 18px; }
.modal-box { border-radius: 26px; }
.dbx-head-action, .dbx-rail-btn, .dbx-find-all, .btn-red, .btn-outline,
.pf-delete-btn, .msg-pane-btn, .field-clear-btn { border-radius: 999px; }
.pf-input, .filter-select, .filter-text-input, .filter-ms-trigger,
.devp-input, .devp-select { border-radius: 14px; }
.msg-thread { border-radius: 16px; }
.msg-input { border-radius: 20px; }
.browse-search { border-radius: 999px; }
.ac-avatar, .ac-letter { border-radius: 16px; }
.co-logo-wrap, .co-logo-skeleton { border-radius: 22px; }
.field-btn { border-radius: 16px; }
.apc-av, .apc-av-img, .apc-av-letter { border-radius: 14px; }

@media (max-width: 768px) {
  /* Dashboard = search + recommended connections, phone-first */
  .dbx-search-card { border-radius: 999px; }
  .dbx-card { padding: 20px 18px; }
  .dbx-card-title { font-size: 20px; }
  .alumni-grid.dbx-two { grid-template-columns: 1fr; gap: 12px; }
  .dbx-directory-cta { flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
  .dbx-cta-btn { justify-content: center; }
  /* Full-screen sheets stay square-cornered at the screen edge */
  .modal-box { border-radius: 0; }
}

/* iPad landscape (~1024–1200): two columns, comfortable gutters */
@media (min-width: 1021px) and (max-width: 1200px) {
  .dbx-shell { padding: 28px 32px 64px; }
  .dbx-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; }
}

/* Phone search pill: input gets the full width, no inner link */
@media (max-width: 768px) {
  .dbx-find-all { display: none; }
  .dbx-find-input { min-width: 0; }
}

/* ── Benet Academy seal (primary brand mark) ────────────────────────
   The crest is round with its own white field — shown as a circular
   badge, larger than a typical favicon-sized mark so it reads at a
   glance on the black navbar. */
.nav-logo-badge, .footer-logo-badge {
  background: #fff; padding: 2px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 2px 10px rgba(0,0,0,.35);
}
.nav-logo-badge { width: 46px; height: 46px; }
.footer-logo-badge { width: 44px; height: 44px; }
.nav-logo-badge img, .footer-logo-badge img { width: 100%; height: 100%; object-fit: contain; }
.nav-logo { gap: 13px; }
.nav-logo-name { font-size: 15px; }
.nav-logo-sub { font-size: 10.5px; letter-spacing: .02em; }
@media (max-width: 600px) {
  .nav-logo-badge { width: 40px; height: 40px; }
  .nav-logo-name { font-size: 14px; }
}

/* ── Account-menu theme item: phones only (desktop keeps the navbar
   toggle; on phones the toggle hides when the account chip exists) ── */
#nav-menu-theme { display: none; }
@media (max-width: 600px) {
  body.has-account .theme-toggle { display: none; }
  #nav-menu-theme { display: block; }
}

/* ── Phone browse declutter ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* Apps don't show persistent scrollbars — hide them in all inner
     scrollers (page-level scrolling keeps the native iOS indicator). */
  *::-webkit-scrollbar { width: 0; height: 0; }
  * { scrollbar-width: none; }

  .browse-header { padding: 20px 16px 16px; }
  .browse-title { font-size: 22px; margin-bottom: 10px; }
  .browse-sub { display: none; }

  /* Field picker: one swipeable chip row instead of a wall of buttons */
  .field-section-inner { padding: 0 16px; }
  .field-grid {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px; padding: 2px 16px 6px;
  }
  .field-btn { padding: 9px 14px; border-width: 1.5px; flex-shrink: 0; }
  .results-bar { gap: 8px; }
}

/* Phones: the page itself never scrolls sideways — only designated
   rows (filter bar, field chips) scroll horizontally inside themselves. */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
}

/* Dashboard: rail removed — single centered column everywhere */
.dbx-grid { grid-template-columns: 1fr; }
.dbx-main { max-width: 860px; margin: 0 auto; width: 100%; }

/* Stats bar: three equal thirds, evenly spaced at every width */
.dbx-net-stat { flex: 1; min-width: 0; }
.dbx-net-stats { gap: 0; }
.dbx-net-div { flex-shrink: 0; }

/* Profile photo upload */
.pf-upload-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1.5px solid var(--border); color: var(--ink);
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  padding: 11px 18px; border-radius: 999px; cursor: pointer;
  transition: border-color .15s;
  align-self: flex-start;
}
.pf-upload-btn:hover { border-color: var(--red); }
#pf-upload-field { display: flex; flex-direction: column; gap: 8px; }
#photo-upl-msg { font-size: 12px; }

/* Student industry-interest chips */
.pf-int-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-int-chip {
  background: var(--card); border: 1.5px solid var(--border); color: var(--muted);
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  transition: all .15s; -webkit-tap-highlight-color: transparent;
}
.pf-int-chip.sel { background: var(--red-soft); border-color: var(--red); color: var(--red); }

/* ── iPad/desktop audit fixes ─────────────────────────────────────── */
/* Stats: equal thirds is a PHONE treatment; wider screens get their
   natural widths back with breathing room (fixes label collision). */
@media (min-width: 769px) {
  .dbx-net-stats { gap: 20px; }
  .dbx-net-stat { flex: 0 0 auto; }
}
/* Letter tiles sit on a white square in BOTH themes — the letter must
   stay dark or it vanishes in dark mode. */
.co-logo-letter { color: #191919; }
/* Composer focus: red border only — border + glow read as a double ring */
.msg-input:focus { box-shadow: none; }

/* Dev panel stats: never leave a dangling tile on tablet widths */
@media (max-width: 1100px) {
  .devp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }
  .devp-stat { width: auto; }
}

/* ══ iPad app polish round ═══════════════════════════════════════ */

/* 1. No visible scrollbars anywhere — app-like at every size.
   Content still scrolls; only the bars are hidden. */
*::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }

/* 2. Status bar (clock/battery) safe area at EVERY width — the app
   draws under it on iPad too. env() is 0 in normal browsers. */
#navbar { padding-top: env(safe-area-inset-top, 0px); height: calc(60px + env(safe-area-inset-top, 0px)); }
body.has-apptabs .msg-shell { height: calc(100dvh - 60px - env(safe-area-inset-top, 0px)); }

/* 3. Wide screens fit three suggestion cards per row */
@media (min-width: 900px) {
  .alumni-grid.dbx-two { grid-template-columns: repeat(3, 1fr); }
  .dbx-main { max-width: 980px; }
}

/* 5. Native app (Capacitor): bottom tab bar on iPad as well.
   Tab item styles live here (outside the phone media query). */
.tabbar-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; color: var(--gray-500);
  font-size: 10px; font-weight: 700; letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
}
.tabbar-item svg { width: 23px; height: 23px; }
.tabbar-item.active { color: var(--red); }

body.native-app { --tabbar-h: calc(58px + env(safe-area-inset-bottom, 0px)); }
body.native-app #apptabs { display: none; }
body.native-app.has-apptabs { padding-bottom: var(--tabbar-h); }
body.native-app.msg-page.has-apptabs { padding-bottom: 0; }
body.native-app #tabbar {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  height: var(--tabbar-h);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--card) 90%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border-top: 1px solid var(--border);
}
/* iPad app: two-pane messages keeps the tab bar; height accounts for it */
@media (min-width: 769px) {
  body.native-app .msg-shell,
  body.native-app.has-apptabs .msg-shell {
    height: calc(100dvh - 60px - env(safe-area-inset-top, 0px) - var(--tabbar-h));
  }
  body.native-app .msg-shell.chat-open ~ #tabbar { display: flex; }
}

/* Dashboard cards match the search bar's full width */
.dbx-main { max-width: none; margin: 0; }

/* Inline button spinner (Generate More feedback) */
.btn-mini-spin {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  display: inline-block; animation: spin .7s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Claim-step profile tiles: dark surfaces in dark mode (bg was
   hardcoded white — blinding when picking your account) */
html[data-theme="dark"] .auth-profile-card { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .auth-profile-card:hover { border-color: var(--red); }

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD V4 — living home (animated bg, hero search, network web)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Animated page background: drifting aurora + faint grid ── */
.dbx-page { position: relative; overflow-x: hidden; }
.dbx-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .35;
  mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, #000 30%, transparent 78%);
}
.dbx-orb {
  position: fixed; z-index: 0; pointer-events: none;
  width: 620px; height: 620px; border-radius: 50%;
  filter: blur(90px); opacity: .5; will-change: transform;
}
.dbx-orb-a {
  top: -260px; left: -140px;
  background: radial-gradient(circle, rgba(200,16,46,.20), transparent 65%);
  animation: orb-a 26s ease-in-out infinite alternate;
}
.dbx-orb-b {
  top: -180px; right: -220px;
  background: radial-gradient(circle, rgba(245,158,11,.13), transparent 65%);
  animation: orb-b 32s ease-in-out infinite alternate;
}
.dbx-orb-c {
  bottom: -320px; left: 32%;
  background: radial-gradient(circle, rgba(99,102,241,.10), transparent 65%);
  animation: orb-a 38s ease-in-out infinite alternate-reverse;
}
@keyframes orb-a { from { transform: translate(0,0) scale(1); } to { transform: translate(90px, 60px) scale(1.15); } }
@keyframes orb-b { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-110px, 80px) scale(.95); } }
.dbx-shell { position: relative; z-index: 1; }

/* Student lens: cool-blue aurora so the two dashboards read differently */
.dbx-student .dbx-orb-a { background: radial-gradient(circle, rgba(37,99,235,.18), transparent 65%); }
.dbx-student .dbx-orb-b { background: radial-gradient(circle, rgba(20,184,166,.13), transparent 65%); }

/* ── Staggered entrance ── */
.dbx-reveal { opacity: 0; transform: translateY(18px); }
.dbx-in .dbx-reveal {
  animation: dbx-rise .7s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--rd, 0ms);
}
@keyframes dbx-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Demo entrance from the welcome flow: slower, more theatrical */
.dbx-entrance .dbx-reveal { animation-duration: 1s; }


/* ── Network web card ── */
.dbx-web-card { padding: 0; overflow: hidden; }
.dbx-web-head { padding: 22px 26px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.netweb {
  --nw-grid: rgba(110,106,99,.16);
  --nw-edge: rgba(200,16,46,.30);
  position: relative; height: 520px; width: 100%;
}
html[data-theme="dark"] .netweb { --nw-grid: rgba(236,234,230,.10); --nw-edge: rgba(228,87,79,.35); }
.dbx-student .netweb { --nw-edge: rgba(37,99,235,.32); }
.netweb-canvas { position: absolute; inset: 0; }
.netweb-nodes { position: absolute; inset: 0; }
.netweb-node {
  position: absolute; top: 0; left: 0;
  margin: -26px 0 0 -26px;                 /* center on its point */
  width: 52px; height: 52px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit;
  opacity: 0; animation: nw-pop .6s cubic-bezier(.22,1.4,.36,1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes nw-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
.netweb-av {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block;
  border: 2.5px solid var(--card);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
  background: var(--gray-100);
}
.netweb-av-letter { display: grid; place-items: center; font-size: 15px; font-weight: 800; color: var(--muted); }
.netweb-node:hover .netweb-av, .netweb-node:focus-visible .netweb-av {
  transform: scale(1.22); box-shadow: 0 8px 24px rgba(200,16,46,.35);
  border-color: var(--red);
}
.netweb-label {
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%) translateY(-4px);
  white-space: nowrap; font-size: 11.5px; font-weight: 700; color: var(--ink);
  background: var(--card); border: 1px solid var(--border); border-radius: 100px;
  padding: 3px 10px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.netweb-node:hover .netweb-label, .netweb-node:focus-visible .netweb-label { opacity: 1; transform: translateX(-50%) translateY(0); }
.netweb-node.label-up .netweb-label { top: auto; bottom: 56px; }
.netweb-node.label-left .netweb-label { left: 0; transform: translateY(-4px); }
.netweb-node.label-left:hover .netweb-label, .netweb-node.label-left:focus-visible .netweb-label { transform: translateY(0); }
.netweb-node.label-right .netweb-label { left: auto; right: 0; transform: translateY(-4px); }
.netweb-node.label-right:hover .netweb-label, .netweb-node.label-right:focus-visible .netweb-label { transform: translateY(0); }
.netweb-center { margin: -34px 0 0 -34px; width: 68px; height: 68px; cursor: default; }
.netweb-center .netweb-av, .netweb-av-big {
  width: 68px; height: 68px; border-width: 3px; border-color: var(--red);
  box-shadow: 0 0 0 6px rgba(200,16,46,.12), 0 8px 24px rgba(200,16,46,.28);
}

/* ── Recent messages card ── */
.dbx-msgs-empty { font-size: 13px; color: var(--muted); padding: 4px 0; }
.dbx-msgs-empty a { color: var(--red); font-weight: 700; }

/* ── Count-up stat polish ── */
.dbx-net-stat span { font-variant-numeric: tabular-nums; }

/* ── Network web: empty state (no connections yet) ── */
.netweb-empty {
  min-height: 300px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 10px; padding: 30px 24px;
}
.netweb-empty-t { font-size: 17px; font-weight: 800; color: var(--ink); }
.netweb-empty-s { font-size: 13.5px; color: var(--gray-600); max-width: 400px; line-height: 1.6; }
.netweb-empty .btn-red { margin-top: 8px; }

/* ── Landing hero: prominent join CTA ── */
.hero-join-cta {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  background: var(--red); color: #fff; text-decoration: none;
  font-size: 15.5px; font-weight: 800; font-family: inherit;
  padding: 14px 26px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(200,16,46,.35);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, background .18s;
}
.hero-join-cta:hover { transform: translateY(-2px) scale(1.02); background: var(--red-dark); box-shadow: 0 12px 32px rgba(200,16,46,.45); }
.nav-btn-cta { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
.nav-btn-cta:hover { background: var(--red-dark) !important; border-color: var(--red-dark) !important; }

/* The search pill's radius (and the results-open shape) lose to the
   later blanket `.dbx-card { border-radius: 22px }` — same specificity,
   later wins — so it rendered as a plain slab. Restate them here. */
.dbx-card.dbx-search-card { border-radius: 100px; }
.dbx-card.dbx-search-card:has(#dbx-find-results-wrap:not([hidden])) { border-radius: 26px; }
@media (max-width: 640px) {
  .dbx-card.dbx-search-card { border-radius: 18px; }
}

/* ── Motion & phone discipline ── */
@media (prefers-reduced-motion: reduce) {
  .dbx-orb { animation: none !important; }
  .dbx-reveal, .dbx-in .dbx-reveal { animation: none !important; opacity: 1; transform: none; }
  .netweb-node { animation-duration: .01s !important; }
}
@media (max-width: 768px) {
  .dbx-orb { width: 380px; height: 380px; filter: blur(70px); opacity: .35; }
  .dbx-orb-c { display: none; }
  .netweb { height: 340px; }
  .netweb-node { margin: -21px 0 0 -21px; width: 42px; height: 42px; }
  .netweb-av { width: 42px; height: 42px; }
  .netweb-center { margin: -27px 0 0 -27px; width: 54px; height: 54px; }
  .netweb-center .netweb-av, .netweb-av-big { width: 54px; height: 54px; }
  .netweb-label { top: 46px; }
  .dbx-web-head { padding-left: 16px; padding-right: 16px; }
  .hero-join-cta { font-size: 14.5px; padding: 12px 22px; }
}

/* Phones: the messages shell must clear the bottom tab bar. The desktop
   formula above (same specificity, later in the file) would override the
   media-scoped rule — restate the tabbar-aware height so it wins on phone
   web and in the native app. */
@media (max-width: 768px) {
  body.has-apptabs .msg-shell {
    height: calc(100dvh - 60px - env(safe-area-inset-top, 0px) - var(--tabbar-h));
  }
  body.has-apptabs .msg-shell.chat-open {
    height: calc(100dvh - 60px - env(safe-area-inset-top, 0px));
  }
}

/* ════════════════════════════════════════════════════════════════════
   LAUNCH — account dropdown, member agreement, feedback, settings
   ════════════════════════════════════════════════════════════════════ */

/* ── Account chip + dropdown ── */
body.has-account .theme-toggle { display: none; }   /* the dropdown owns theme */
.nav-account-btn { padding: 4px 10px 4px 4px; gap: 8px; }
.nav-account-av { width: 30px; height: 30px; font-size: 12px; }
.nav-role-staff { background: rgba(255,255,255,.12); color: #fff; letter-spacing: .06em; }
.nav-account-menu {
  min-width: 290px; padding: 8px; border-radius: 16px; top: calc(100% + 12px);
  box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12);
  transform-origin: top right; animation: navMenuIn .16s cubic-bezier(.22,1,.36,1);
}
@keyframes navMenuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.nav-menu-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.nav-menu-av {
  width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--red); color: #fff; display: grid; place-items: center;
  font-size: 15px; font-weight: 800;
}
.nav-menu-av img { width: 100%; height: 100%; object-fit: cover; }
.nav-menu-id { min-width: 0; }
.nav-menu-name { font-size: 14.5px; }
.nav-menu-email { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; }
.nav-menu-theme {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--gray-100); border-radius: 11px; padding: 4px; margin: 2px 2px 8px;
}
.nav-account-menu .nav-menu-theme button {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--gray-500);
}
.nav-account-menu .nav-menu-theme button:hover { background: transparent; color: var(--ink); }
.nav-account-menu .nav-menu-theme button.active {
  background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
.nav-menu-theme svg { width: 14px; height: 14px; }
.nav-menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.nav-account-menu > a, .nav-account-menu > button {
  display: flex; align-items: center; gap: 11px; padding: 10px 10px; white-space: nowrap;
}
.nav-account-menu > a svg, .nav-account-menu > button svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--gray-500); }
.nav-account-menu > a:hover svg, .nav-account-menu > button:hover svg { color: var(--ink); }
.nav-menu-tag {
  margin-left: auto; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; white-space: nowrap;
  text-transform: uppercase; color: var(--red); background: var(--red-soft); padding: 3px 7px; border-radius: 99px;
}
.nav-account-menu .nav-menu-signout { color: var(--red); }
.nav-account-menu .nav-menu-signout svg { color: var(--red); }
#nav-menu-theme { display: none !important; }
@media (max-width: 600px) {
  .nav-account-menu { position: fixed; left: 12px; right: 12px; top: calc(60px + env(safe-area-inset-top, 0px) + 6px); min-width: 0; }
}

/* ── Member agreement checkbox (sign-up + consent) ── */
.auth-seal {
  width: 76px; height: 76px; border-radius: 50%; background: #fff; padding: 2px;
  margin: 0 0 18px; box-shadow: 0 0 0 1px var(--border), 0 6px 22px rgba(0,0,0,.12);
}
.auth-seal img { width: 100%; height: 100%; object-fit: contain; display: block; }
.auth-agree {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  margin: 22px 0 0; padding: 14px 16px; cursor: pointer;
  background: var(--gray-50); border: 1.5px solid var(--border); border-radius: 12px;
  transition: border-color .15s, background .15s;
}
.auth-agree:hover { border-color: var(--gray-400); }
.auth-agree.on { border-color: var(--red); background: var(--red-soft); }
.auth-agree.locked { opacity: .5; pointer-events: none; }
.auth-agree input { position: absolute; opacity: 0; pointer-events: none; }
.auth-agree-box {
  width: 20px; height: 20px; border-radius: 6px; border: 1.6px solid var(--gray-400);
  flex-shrink: 0; display: grid; place-items: center; margin-top: 1px; transition: all .15s;
}
.auth-agree.on .auth-agree-box { background: var(--red); border-color: var(--red); }
.auth-agree-box svg { opacity: 0; } .auth-agree.on .auth-agree-box svg { opacity: 1; }
.auth-agree input:focus-visible + .auth-agree-box { outline: 2px solid var(--red); outline-offset: 2px; }
.auth-agree-t { font-size: 13px; line-height: 1.55; color: var(--gray-700); }
.auth-agree-t a { color: var(--ink); font-weight: 700; }
.auth-agree-t strong { color: var(--ink); }
.auth-google-btn:disabled { cursor: not-allowed; }

/* ── Legal callout ── */
.legal-callout {
  border: 1.5px solid var(--red); background: var(--red-soft);
  border-radius: 12px; padding: 18px 20px 6px; margin: 4px 0 18px;
}

/* ── Messages: opted-out states ── */
.msg-off-banner {
  margin: 0 14px 10px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5;
  background: var(--red-soft); color: var(--ink);
}
.msg-off-banner a, .msg-composer-off a { color: var(--red); font-weight: 700; }
.msg-composer-off {
  padding: 16px 20px; border-top: 1px solid var(--border); font-size: 13.5px;
  color: var(--muted); text-align: center; background: var(--card);
}

/* ── Profile → Settings link card ── */
.pf-settings-link { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.pf-settings-link .btn-outline { text-decoration: none; white-space: nowrap; }

/* ── Feedback modal ── */
.rc-fb-overlay {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px); animation: rcFade .15s ease;
}
@keyframes rcFade { from { opacity: 0; } to { opacity: 1; } }
.rc-fb {
  position: relative; width: 100%; max-width: 440px; background: var(--card); color: var(--ink);
  border: 1px solid var(--border); border-radius: 18px; padding: 26px 24px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35); font-family: inherit;
}
.rc-fb-x { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--gray-500); font-size: 16px; cursor: pointer; }
.rc-fb-title { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.rc-fb-sub { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-bottom: 18px; }
.rc-fb-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--gray-700); margin: 14px 0 7px; }
.rc-fb-label span { font-weight: 500; color: var(--gray-400); }
.rc-fb-rating { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rc-fb-rating button {
  padding: 10px 0; border-radius: 10px; border: 1.5px solid var(--border); background: var(--gray-50);
  font-family: inherit; font-size: 15px; font-weight: 800; color: var(--gray-500); cursor: pointer;
  transition: all .12s;
}
.rc-fb-rating button.on { background: var(--red); border-color: var(--red); color: #fff; }
.rc-fb-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--gray-400); margin-top: 5px; }
.rc-fb-input {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--gray-50);
  border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 12px; resize: vertical;
}
.rc-fb-input:focus { outline: none; border-color: var(--red); }
.rc-fb-err { color: var(--red); font-size: 12.5px; margin-top: 10px; }
.rc-fb-send {
  width: 100%; margin-top: 18px; padding: 12px; border: none; border-radius: 10px;
  background: var(--red); color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer;
}
.rc-fb-send:disabled { opacity: .45; cursor: default; }
.rc-fb-done { text-align: center; padding: 10px 0 0; }

/* ── Settings page ── */
.st-shell { max-width: 820px; margin: 0 auto; padding: 36px 24px 110px; }
.st-title { font-family: 'DM Serif Display', serif; font-size: 36px; color: var(--ink); }
.st-sub { font-size: 14px; color: var(--muted); margin: 6px 0 28px; }
.st-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  margin-bottom: 18px; overflow: hidden;
}
.st-card-head { padding: 18px 22px 4px; }
.st-card-title { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); }
.st-row {
  display: flex; align-items: center; gap: 18px; padding: 16px 22px;
  border-top: 1px solid var(--border);
}
.st-card-head + .st-row { border-top: none; }
.st-row-body { flex: 1; min-width: 0; }
.st-row-t { font-size: 15px; font-weight: 700; color: var(--ink); }
.st-row-s { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 3px; }
.st-row-s a { color: var(--red); font-weight: 600; }
.st-status { font-size: 12px; font-weight: 700; margin-top: 6px; min-height: 16px; color: var(--muted); }
.st-status.ok { color: #16a34a; } .st-status.err { color: var(--red); }
.st-switch { position: relative; display: inline-block; flex-shrink: 0; cursor: pointer; }
.st-switch input { position: absolute; opacity: 0; pointer-events: none; }
.st-switch-track {
  display: block; width: 46px; height: 27px; border-radius: 999px; position: relative;
  background: var(--gray-200); transition: background .18s;
}
.st-switch-track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
  border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.st-switch input:checked + .st-switch-track { background: #16a34a; }
.st-switch input:checked + .st-switch-track::after { transform: translateX(19px); }
.st-switch input:focus-visible + .st-switch-track { outline: 2px solid var(--red); outline-offset: 2px; }
.st-switch input:disabled + .st-switch-track { opacity: .5; }
.st-seg { display: inline-grid; grid-template-columns: repeat(2, auto); gap: 4px; background: var(--gray-100); border-radius: 10px; padding: 4px; }
.st-seg button {
  border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--gray-500); padding: 7px 14px; border-radius: 7px; cursor: pointer;
}
.st-seg button.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.st-blocked-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--ink); }
.st-btn {
  border: 1.5px solid var(--border); background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap;
}
.st-btn:hover { border-color: var(--gray-400); }
.st-btn-danger { border-color: rgba(200,16,46,.4); color: var(--red); }
.st-btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.st-link-row { text-decoration: none; }
.st-link-row:hover .st-row-t { color: var(--red); }
.st-chev { color: var(--gray-400); font-size: 18px; }
@media (max-width: 600px) {
  .st-shell { padding: 24px 16px 110px; }
  .st-title { font-size: 28px; }
  .st-row { padding: 14px 16px; }
  .st-card-head { padding: 16px 16px 2px; }
}
#consent-btn:disabled { opacity: .45; cursor: not-allowed; animation: none; }

/* ── Sign-in page: Apple / Google / email ── */
.auth-providers { display: grid; gap: 10px; margin-top: 22px; }
.auth-providers .auth-google-btn { margin: 0; }
.auth-apple-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #000; color: #fff; border: 1.5px solid #000; border-radius: 10px;
  padding: 13px 18px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: opacity .15s, box-shadow .15s;
}
.auth-apple-btn:hover { box-shadow: var(--shadow); opacity: .9; }
html[data-theme="dark"] .auth-apple-btn { background: #fff; color: #000; border-color: #fff; }
.auth-providers button:disabled { opacity: .55; cursor: wait; }
.auth-or {
  display: flex; align-items: center; gap: 12px; margin: 20px 0 14px;
  font-size: 12px; font-weight: 600; color: var(--gray-400);
}
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-email-form { display: grid; gap: 12px; }
.auth-field { display: grid; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--gray-700); }
.auth-field-row { display: flex; justify-content: space-between; align-items: baseline; }
.auth-forgot { font-weight: 600; color: var(--red); text-decoration: none; font-size: 12px; }
.auth-forgot:hover { text-decoration: underline; }
.auth-input {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.auth-input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
html[data-theme="dark"] .auth-input { background: var(--gray-50); }
.auth-submit-btn {
  width: 100%; margin-top: 4px; padding: 13px; border: none; border-radius: 10px;
  background: var(--red); color: #fff; font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  transition: background .15s;
}
.auth-submit-btn:hover { background: var(--red-dark); }
.auth-submit-btn:disabled { opacity: .6; cursor: wait; }
.auth-info {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  background: var(--gray-100); color: var(--ink);
}
#step-signin .auth-alt-row { margin-top: 18px; }
#step-signin .auth-agree { margin-top: 18px; }
/* Sign-up: every way in stays visibly locked until the agreement is checked */
#step-signin.gated .auth-providers button,
#step-signin.gated .auth-submit-btn { opacity: .45; }
.auth-agree.shake { animation: authShake .45s ease; }
@keyframes authShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 60% { transform: translateX(6px); } 80% { transform: translateX(-3px); } }
html[data-theme="dark"] .auth-error { color: #ff8a8a; border-color: rgba(228,57,79,.4); }

/* ══════════════════════════════════════════════════════════════════
   TOP BAR — one row: crest · tabs · account
   The tabs live inside #navbar (js/apptabs.js), so the crest, the
   navigation and the profile button read as a single black bar. Phones
   and the native app still hide #apptabs for the bottom tab bar.
══════════════════════════════════════════════════════════════════ */
#navbar #apptabs {
  position: relative; top: auto; z-index: auto;
  align-self: stretch; margin-left: 30px; padding-left: 22px;
  background: none; border: 0;
}
/* Hairline divider between the crest and the tabs */
#navbar #apptabs::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 26px; background: rgba(255,255,255,.12);
}
#navbar .apptabs-inner {
  height: 100%; max-width: none; margin: 0; padding: 0;
  display: flex; align-items: stretch; gap: 2px;
}
#navbar .apptab {
  display: flex; align-items: center; padding: 0 14px;
  font-size: 14px; font-weight: 600; letter-spacing: -.1px;
  color: rgba(255,255,255,.56); border-bottom: 0;
  transition: color .15s;
}
#navbar .apptab:hover { color: rgba(255,255,255,.92); }
#navbar .apptab.active { color: #fff; }
/* Active tab: red bar flush with the bottom edge of the navbar */
#navbar .apptab::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--red);
  transform: scaleX(0); transition: transform .2s ease;
}
#navbar .apptab.active::after { transform: scaleX(1); }
#navbar .apptab:focus-visible { outline: none; color: #fff; }
#navbar .apptab:focus-visible::after { transform: scaleX(1); opacity: .5; }

/* Narrower desktops / iPad: drop the location line, then the wordmark,
   so the crest + tabs + account always fit on one row */
@media (max-width: 1120px) {
  #navbar .nav-logo-sub { display: none; }
  #navbar #apptabs { margin-left: 22px; padding-left: 14px; }
  #navbar .apptab { padding: 0 11px; }
  #navbar .apptab::after { left: 11px; right: 11px; }
}
@media (max-width: 920px) {
  #navbar { padding-left: 20px; padding-right: 20px; }
  #navbar .nav-logo-stack { display: none; }
  #navbar #apptabs { margin-left: 16px; }
}

/* ── Profile photo cropper (js/photo-crop.js) ── */
.rc-crop { max-width: 400px; }
.rc-crop-stage {
  position: relative; width: min(320px, calc(100vw - 80px)); aspect-ratio: 1; margin: 0 auto;
  overflow: hidden; border-radius: 14px; background: #000;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.rc-crop-stage.dragging { cursor: grabbing; }
.rc-crop-stage:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.rc-crop-stage img {
  position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0;
  pointer-events: none; -webkit-user-drag: none;
}
/* Round frame: everything outside the circle is dimmed */
.rc-crop-ring {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 999px rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.85);
}
.rc-crop-zoom { display: flex; align-items: center; gap: 10px; margin: 18px 4px 0; }
.rc-crop-zoom svg {
  width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--muted);
  stroke-width: 2; stroke-linecap: round;
}
.rc-crop-zoom input { flex: 1; accent-color: var(--red); }
.rc-crop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.rc-crop-actions .rc-fb-send { margin-top: 0; }
.rc-crop-cancel {
  padding: 12px; border-radius: 10px; border: 1.5px solid var(--border); background: transparent;
  color: var(--ink); font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.rc-crop-cancel:hover { border-color: var(--ink); }