/* ==========================================================================
   CAMPUS HUB - Modern Design System & Stylesheet
   Crafted with Dual Dark & Light Themes, Glassmorphism, and Premium Aesthetics
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Noto+Sans+Arabic:wght@400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   DESIGN TOKENS (DUAL THEME SYSTEM)
   -------------------------------------------------------------------------- */

:root,
[data-theme="light"] {
  /* Canvas & Surfaces */
  --bg-canvas: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  --bg-surface-secondary: #F1F5F9;
  --bg-card-hover: #FAFCFF;

  --surface-border: #E2E8F0;
  --surface-border-subtle: #F1F5F9;

  /* Typography */
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --text-light: #94A3B8;

  /* Brand Teal Accents */
  --teal-primary: #0D766E;
  --teal-hover: #115E59;
  --teal-active: #134E4A;
  --teal-light: #CCFBF1;
  --teal-light-text: #0F766E;

  /* Badges & Accents */
  --mint-badge-bg: #D1FAE5;
  --mint-badge-text: #065F46;

  --sky-badge-bg: #E0F2FE;
  --sky-badge-text: #0369A1;

  --purple-badge-bg: #EDE9FE;
  --purple-badge-text: #6D28D9;

  --amber-badge-bg: #FEF3C7;
  --amber-badge-text: #B45309;

  /* Sidebar & Header */
  --sidebar-bg: #081521;
  --sidebar-border: rgba(148, 163, 184, 0.09);
  --sidebar-text: #a5b2c2;
  --sidebar-text-hover: #f1f5f9;
  --sidebar-active-bg: rgba(10, 166, 153, 0.16);

  --topbar-bg: rgba(255, 255, 255, 0.88);
  --topbar-border: #E2E8F0;

  /* Elevations */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px -2px rgba(15, 23, 42, 0.03);
  --shadow-card-hover: 0 14px 28px -6px rgba(15, 23, 42, 0.09), 0 6px 12px -4px rgba(15, 23, 42, 0.04);

  /* Fonts */
  --font-serif: 'Newsreader', Georgia, Cambria, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-arabic: 'Noto Sans Arabic', 'Plus Jakarta Sans', sans-serif;

  /* Dimensions */
  --sidebar-width: 232px;
  --topbar-height: 50px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

/* --------------------------------------------------------------------------
   DARK THEME PALETTE
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  /* Canvas & Surfaces */
  --bg-canvas: #090D16;
  --bg-surface: #0F172A;
  --bg-surface-elevated: #162036;
  --bg-surface-secondary: #1E293B;
  --bg-card-hover: #141F36;

  --surface-border: rgba(255, 255, 255, 0.09);
  --surface-border-subtle: rgba(255, 255, 255, 0.05);

  /* Typography */
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-light: #64748B;

  /* Brand Accents */
  --teal-primary: #14B8A6;
  --teal-hover: #2DD4BF;
  --teal-active: #0D9488;
  --teal-light: rgba(20, 184, 166, 0.16);
  --teal-light-text: #5EEAD4;

  /* Badges & Accents */
  --mint-badge-bg: rgba(16, 185, 129, 0.16);
  --mint-badge-text: #6EE7B7;

  --sky-badge-bg: rgba(14, 165, 233, 0.16);
  --sky-badge-text: #7DD3FC;

  --purple-badge-bg: rgba(168, 85, 247, 0.16);
  --purple-badge-text: #D8B4FE;

  --amber-badge-bg: rgba(245, 158, 11, 0.16);
  --amber-badge-text: #FDE68A;

  /* Sidebar & Header */
  --sidebar-bg: #081521;
  --sidebar-border: rgba(148, 163, 184, 0.09);
  --sidebar-text: #a5b2c2;
  --sidebar-text-hover: #f1f5f9;
  --sidebar-active-bg: rgba(10, 166, 153, 0.16);

  --topbar-bg: rgba(9, 13, 22, 0.88);
  --topbar-border: rgba(255, 255, 255, 0.08);

  /* Elevations & Glows */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 4px 20px 0 rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 12px 30px 0 rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(20, 184, 166, 0.25);
}

/* --------------------------------------------------------------------------
   BASE RESETS & GLOBAL SETUP
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  font-family: var(--font-sans);
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* RTL Support */
body.rtl {
  direction: rtl;
  text-align: right;
  font-family: var(--font-arabic);
}

body.rtl .font-serif {
  font-family: var(--font-arabic) !important;
  font-weight: 700;
}

/* App Container Shell */
.app-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar {
  width: var(--sidebar-width);
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 28px 20px;
  z-index: 50;
  overflow-y: auto;
  transition: width 0.3s ease, background-color 0.25s ease;
}

body.rtl .sidebar {
  border-right: none;
  border-left: 1px solid var(--sidebar-border);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 28px;
  padding: 0 4px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-badge-container {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, #0EAFA4 0%, #087b79 54%, #043B44 100%);
  border: 0;
  box-shadow: 0 4px 12px rgba(4, 59, 68, 0.30);
  flex-shrink: 0;
}

.brand-logo-mark {
  display: block;
  width: 100%;
  height: 100%;
  flex: 0 0 100%;
  max-width: none;
  object-fit: cover;
  filter: none;
  opacity: 1;
}

.logo-text-group {
  display: flex;
  flex-direction: column;
}

.logo-title {
  color: #FFFFFF;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
}

.logo-subtitle {
  color: #94A3B8;
  font-size: 11.5px;
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* Sidebar Watermark (Subtle / Faded original C logo at bottom-left) */
.sidebar-watermark {
  margin-top: auto;
  padding-top: 24px;
  padding-bottom: 4px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  pointer-events: none;
  user-select: none;
}

body.rtl .sidebar-watermark {
  justify-content: flex-start;
}

.watermark-img {
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}

/* User Badge in Sidebar */
.sidebar-user {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 26px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-user:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.user-name {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-status-dot {
  width: 8.5px;
  height: 8.5px;
  border-radius: 50%;
  background-color: #10B981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.7);
}

.user-meta {
  color: #94A3B8;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.3;
}

/* Navigation Links */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  color: var(--sidebar-text);
  font-size: 15.5px;
  font-weight: 500;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: all 0.18s ease;
  position: relative;
}

body.rtl .nav-item {
  text-align: right;
}

.nav-item:hover {
  color: var(--sidebar-text-hover);
  background-color: rgba(255, 255, 255, 0.06);
}

.nav-item.active {
  color: #FFFFFF;
  background-color: var(--sidebar-active-bg);
  font-weight: 600;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3.5px;
  background-color: #14B8A6;
  border-radius: 0 4px 4px 0;
}

body.rtl .nav-item.active::before {
  left: auto;
  right: 0;
  border-radius: 4px 0 0 4px;
}

.nav-icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  opacity: 0.9;
}

.nav-item.active .nav-icon {
  opacity: 1;
  color: #2DD4BF;
}

.nav-badge {
  margin-left: auto;
  background-color: #10B981;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-full);
}

body.rtl .nav-badge {
  margin-left: 0;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   MAIN WRAPPER & TOP NAVBAR
   -------------------------------------------------------------------------- */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-canvas);
}

.top-navbar {
  height: var(--topbar-height);
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--topbar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  z-index: 40;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.top-nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.breadcrumb-tracker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}

.breadcrumb-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb-logo-img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: contain;
  display: inline-block;
}

[data-theme="light"] .logo-dark-asset {
  display: none !important;
}

[data-theme="dark"] .logo-light-asset {
  display: none !important;
}

.hub-pill {
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.crumb-separator {
  color: var(--text-light);
  font-size: 12px;
}

.active-page-title {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 13.5px;
}

.top-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 1. Header Global Search */
.header-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.header-search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.2s ease;
}

.header-search-input {
  height: 38px;
  width: 220px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--surface-border);
  padding: 0 38px 0 36px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-primary);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-sm);
}

.header-search-input:focus {
  width: 280px;
  border-color: var(--teal-primary);
  outline: none;
  background: var(--bg-surface-elevated);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16);
}

.header-search-input:focus ~ .header-search-icon {
  color: var(--teal-primary);
}

.header-search-input:focus + .header-search-kbd,
.header-search-input:not(:placeholder-shown) + .header-search-kbd {
  opacity: 0.3;
}

.header-search-kbd {
  position: absolute;
  right: 11px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--bg-surface-secondary);
  color: var(--text-muted);
  border: 1px solid var(--surface-border);
  font-family: monospace;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

body.rtl .header-search-icon {
  left: auto;
  right: 12px;
}

body.rtl .header-search-kbd {
  right: auto;
  left: 11px;
}

body.rtl .header-search-input {
  padding: 0 36px 0 38px;
}

/* Header Search Dropdown Results */
.header-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 340px;
  background: var(--bg-surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  z-index: 100;
  max-height: 380px;
  overflow-y: auto;
  padding: 8px;
  animation: fadeIn 0.18s ease;
}

body.rtl .header-search-dropdown {
  left: auto;
  right: 0;
}

.search-dropdown-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 8px 10px 4px;
}

.search-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease;
}

.search-dropdown-item:hover {
  background: var(--teal-light);
}

.search-dropdown-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.search-dropdown-item-sub {
  font-size: 11.5px;
  color: var(--text-muted);
}

.search-dropdown-item-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--bg-surface-secondary);
  color: var(--text-secondary);
}

/* Unified Header Icon Buttons (Theme, Notifications, Language) */
.header-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--surface-border);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  padding: 0;
}

.header-icon-btn:hover {
  border-color: var(--teal-primary);
  color: var(--teal-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 118, 110, 0.18);
}

/* 2. Theme Icon Controls */
.theme-icon-sun {
  display: none;
  color: #F59E0B;
}

.theme-icon-moon {
  display: flex;
  color: #818CF8;
}

[data-theme="dark"] .theme-icon-sun {
  display: flex;
}

[data-theme="dark"] .theme-icon-moon {
  display: none;
}

/* 3. Notifications Wrapper & Dropdown */
.notifications-wrapper {
  position: relative;
}

.notifications-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #EF4444;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--topbar-bg);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

body.rtl .notifications-badge {
  right: auto;
  left: -2px;
}

.notifications-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: var(--bg-surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  z-index: 100;
  overflow: hidden;
  animation: fadeIn 0.18s ease;
}

body.rtl .notifications-dropdown {
  right: auto;
  left: 0;
}

.notifications-header {
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--surface-border);
  background: var(--bg-surface);
}

.notifications-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.notifications-mark-read {
  background: none;
  border: none;
  color: var(--teal-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}

.notifications-mark-read:hover {
  text-decoration: underline;
}

.notifications-list {
  max-height: 340px;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--surface-border-subtle);
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background: var(--bg-card-hover);
}

.notification-item.unread {
  background: var(--teal-light);
}

.notif-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.notif-icon-research {
  background: rgba(13, 118, 110, 0.15);
  color: var(--teal-primary);
}

.notif-icon-message {
  background: rgba(99, 102, 241, 0.15);
  color: #6366F1;
}

.notif-icon-project {
  background: rgba(245, 158, 11, 0.15);
  color: #D97706;
}

.notif-content {
  flex: 1;
}

.notif-text {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.notif-time {
  font-size: 11px;
  color: var(--text-muted);
}

.notif-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-primary);
  margin-top: 6px;
  flex-shrink: 0;
}

/* 4. User Avatar & Name in Top Nav */
.top-nav-user {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 14px 4px 4px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--surface-border);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  flex-shrink: 0;
}

body.rtl .top-nav-user {
  padding: 4px 4px 4px 14px;
}

.top-nav-user:hover {
  border-color: var(--teal-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 118, 110, 0.16);
}

.top-avatar-circle {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0D766E, #14B8A6);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.top-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   MAIN VIEW CONTAINER
   -------------------------------------------------------------------------- */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 40px 52px;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-canvas);
  transition: background-color 0.25s ease;
}

.view-section {
  display: none;
  animation: fadeIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

.view-section.active {
  display: block;
}

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

/* Common Header Typography */
.page-header {
  margin-bottom: 32px;
}

.page-title {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: 6px;
  letter-spacing: -0.015em;
  transition: color 0.2s ease;
}

.page-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  font-weight: 400;
  transition: color 0.2s ease;
}

.section-title {
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

/* Card Base */
.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-hoverable:hover {
  border-color: var(--teal-primary);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Tag Pills */
.tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tag {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  line-height: 1.3;
  transition: all 0.2s ease;
}

.tag-teal {
  background-color: var(--teal-light);
  color: var(--teal-light-text);
  border: 1px solid rgba(20, 184, 166, 0.2);
}

.tag-role {
  background-color: var(--bg-surface-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--surface-border);
}

.tag-neutral {
  background-color: var(--bg-surface-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--surface-border);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s ease;
}

.btn-primary {
  background-color: var(--teal-primary);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(13, 118, 110, 0.2);
}

.btn-primary:hover {
  background-color: var(--teal-hover);
  box-shadow: 0 6px 16px rgba(13, 118, 110, 0.35);
  transform: translateY(-1px);
}

[data-theme="dark"] .btn-primary {
  color: #042F2E;
  font-weight: 700;
}

.btn-outline {
  background-color: var(--bg-surface);
  border-color: var(--surface-border);
  color: var(--text-primary);
}

.btn-outline:hover {
  background-color: var(--bg-surface-secondary);
  border-color: var(--text-muted);
}

.btn-link {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--teal-primary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}

.btn-link:hover {
  color: var(--teal-hover);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   SCREEN 1: HOME VIEW
   -------------------------------------------------------------------------- */
.home-section-group {
  margin-bottom: 38px;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.quick-action-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.quick-action-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background-color: var(--teal-light);
  color: var(--teal-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border: 1px solid rgba(20, 184, 166, 0.2);
  transition: transform 0.2s ease;
}

.quick-action-card:hover .quick-action-icon-wrap {
  transform: scale(1.06);
}

.quick-action-title {
  font-family: var(--font-serif);
  font-size: 19.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.quick-action-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Recent Projects Grid */
.recent-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.project-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-card-title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.3;
}

.project-card-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 18px;
  flex: 1;
}

.project-card-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--surface-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   SCREEN 2: MY PROFILE VIEW
   -------------------------------------------------------------------------- */
.profile-banner-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  margin-bottom: 24px;
}

.profile-avatar-large {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: #1E3A8A;
  color: #FFFFFF;
  font-size: 32px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(30, 58, 138, 0.4);
  flex-shrink: 0;
  border: 3px solid var(--surface-border);
}

.profile-identity-name {
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.profile-identity-meta {
  font-size: 14px;
  color: var(--text-muted);
}

.profile-two-columns {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 24px;
}

.profile-card-title {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.profile-card-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.skills-subheading {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 18px 0 8px 0;
}

.prev-project-item {
  padding: 14px 16px;
  background-color: var(--bg-surface-secondary);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.prev-project-item:hover {
  border-color: var(--teal-primary);
  transform: translateX(3px);
}

body.rtl .prev-project-item:hover {
  transform: translateX(-3px);
}

.prev-project-item:last-child {
  margin-bottom: 0;
}

.prev-project-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.prev-project-role {
  font-size: 12.5px;
  color: var(--text-muted);
}

.prev-project-date {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   SCREEN 3: FIND A TEAM VIEW
   -------------------------------------------------------------------------- */
.filter-search-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.search-input-wrapper {
  flex: 1;
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--bg-surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 9px 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease;
}

.search-input-wrapper:focus-within {
  border-color: var(--teal-primary);
}

.search-input-wrapper svg {
  color: var(--text-light);
  flex-shrink: 0;
}

.search-input-wrapper input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
}

.search-input-wrapper input::placeholder {
  color: var(--text-light);
}

.filter-dropdown {
  background-color: var(--bg-surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 9px 14px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s;
}

.filter-dropdown:focus {
  border-color: var(--teal-primary);
}

.filter-dropdown option {
  background-color: var(--bg-surface);
  color: var(--text-primary);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.student-card {
  display: flex;
  flex-direction: column;
}

.student-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.avatar-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 19px;
  color: #FFFFFF;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.student-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.student-major {
  font-size: 12.5px;
  color: var(--text-muted);
}

.student-section-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 12px 0 6px 0;
}

.student-card-btn {
  margin-top: 18px;
  width: 100%;
  padding: 9px 0;
  background-color: var(--bg-surface-secondary);
  border: 1px solid var(--surface-border);
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.student-card-btn:hover {
  background-color: var(--teal-primary);
  border-color: var(--teal-primary);
  color: #FFFFFF;
}

[data-theme="dark"] .student-card-btn:hover {
  color: #042F2E;
}

/* --------------------------------------------------------------------------
   SCREEN 4: PROJECTS VIEW
   -------------------------------------------------------------------------- */
.projects-header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.projects-list-vertical {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-row-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 28px;
}

.project-row-content {
  flex: 1;
}

.project-row-title {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.project-row-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 16px;
}

.project-row-sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

body.rtl .project-row-sidebar {
  align-items: flex-start;
}

.seat-status-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--mint-badge-text);
  background-color: var(--mint-badge-bg);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.team-size-counter {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   SCREEN 5: PROJECT DETAILS (AI-POWERED STUDY ASSISTANT)
   -------------------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
}

.breadcrumb a:hover {
  color: var(--teal-primary);
  text-decoration: underline;
}

.project-detail-two-col {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.detail-overview-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.detail-overview-text {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 22px;
}

.team-status-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.status-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--surface-border-subtle);
}

.status-stat-label {
  font-size: 14px;
  color: var(--text-muted);
}

.status-stat-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.members-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.member-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background-color: var(--bg-surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.member-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #FFFFFF;
  flex-shrink: 0;
  overflow: hidden;
}

.member-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.member-role {
  font-size: 12px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   SCREEN 6: RESEARCH OPPORTUNITIES
   -------------------------------------------------------------------------- */
.research-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.research-card {
  padding: 26px 30px;
}

.research-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.research-title {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.faculty-meta {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal-primary);
  margin-bottom: 12px;
}

.research-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 18px;
}

.research-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--surface-border-subtle);
  flex-wrap: wrap;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   SCREEN 7: PREVIOUS PROJECTS & RESEARCH (ARCHIVE)
   -------------------------------------------------------------------------- */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.archive-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.archive-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ay-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
}

.type-pill {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--surface-border);
}

.archive-title {
  font-family: var(--font-serif);
  font-size: 18.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.3;
}

.archive-dept {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.archive-card-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--surface-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.members-count {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   SCREEN 8: MESSAGES VIEW
   -------------------------------------------------------------------------- */
.messages-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  background-color: var(--bg-surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  height: calc(100vh - 180px);
  min-height: 520px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

body.rtl .messages-container {
  grid-template-columns: 1fr 320px;
}

.conversations-pane {
  border-right: 1px solid var(--surface-border);
  display: flex;
  flex-direction: column;
  background-color: var(--bg-surface);
}

body.rtl .conversations-pane {
  border-right: none;
  border-left: 1px solid var(--surface-border);
}

.conversations-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--surface-border);
  font-family: var(--font-serif);
  font-size: 17.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.conversations-list {
  flex: 1;
  overflow-y: auto;
}

.conversation-item {
  padding: 14px 18px;
  border-bottom: 1px solid var(--surface-border-subtle);
  cursor: pointer;
  transition: background-color 0.15s;
}

.conversation-item:hover {
  background-color: var(--bg-surface-secondary);
}

.conversation-item.active {
  background-color: var(--bg-surface-secondary);
  border-left: 3px solid var(--teal-primary);
}

body.rtl .conversation-item.active {
  border-left: none;
  border-right: 3px solid var(--teal-primary);
}

.conv-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.conv-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.conv-time {
  font-size: 11.5px;
  color: var(--text-light);
}

.conv-snippet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.conv-snippet {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 230px;
}

.conv-unread-dot {
  width: 7px;
  height: 7px;
  background-color: #10B981;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

/* Chat Pane */
.chat-pane {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-canvas);
}

.chat-header {
  padding: 18px 24px;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-topic {
  font-family: var(--font-serif);
  font-size: 18.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.chat-participants {
  font-size: 12.5px;
  color: var(--text-muted);
}

.chat-status-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background-color: var(--mint-badge-bg);
  color: var(--mint-badge-text);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.chat-messages {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-bubble-row {
  display: flex;
  flex-direction: column;
  max-width: 75%;
}

.chat-bubble-row.incoming {
  align-self: flex-start;
}

.chat-bubble-row.outgoing {
  align-self: flex-end;
}

.message-sender-tag {
  font-size: 11.5px;
  color: var(--text-light);
  margin-bottom: 4px;
  padding: 0 4px;
}

.chat-bubble-row.outgoing .message-sender-tag {
  text-align: right;
}

body.rtl .chat-bubble-row.outgoing .message-sender-tag {
  text-align: left;
}

.message-bubble {
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}

.chat-bubble-row.incoming .message-bubble {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--surface-border);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-sm);
}

body.rtl .chat-bubble-row.incoming .message-bubble {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}

.chat-bubble-row.outgoing .message-bubble {
  background: linear-gradient(135deg, var(--teal-primary), var(--teal-hover));
  color: #FFFFFF;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 8px rgba(13, 118, 110, 0.35);
}

[data-theme="dark"] .chat-bubble-row.outgoing .message-bubble {
  background: linear-gradient(135deg, #0D9488, #14B8A6);
  color: #042F2E;
  font-weight: 600;
}

body.rtl .chat-bubble-row.outgoing .message-bubble {
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 4px;
}

.chat-input-bar {
  padding: 16px 24px;
  background-color: var(--bg-surface);
  border-top: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-input {
  flex: 1;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  background-color: var(--bg-canvas);
  transition: all 0.2s;
}

.chat-input:focus {
  border-color: var(--teal-primary);
  background-color: var(--bg-surface);
}

.chat-attach-btn {
  background: transparent;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: color 0.15s;
}

.chat-attach-btn:hover {
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   MODAL COMPONENT
   -------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(5px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeInBackdrop 0.2s ease;
}

.modal-backdrop.open {
  display: flex;
}

@keyframes fadeInBackdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-box {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  animation: scaleInModal 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--surface-border);
}

@keyframes scaleInModal {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: var(--font-serif);
  font-size: 20.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: color 0.15s;
}

.modal-close-btn:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  background-color: var(--bg-surface-secondary);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-control {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  background: var(--bg-surface);
  transition: border-color 0.15s;
}

.form-control:focus {
  border-color: var(--teal-primary);
}

textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

/* --------------------------------------------------------------------------
   TOAST NOTIFICATION COMPONENT
   -------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

body.rtl .toast-container {
  right: auto;
  left: 24px;
}

.toast {
  background: var(--bg-surface-elevated, #0F172A);
  color: var(--text-primary, #FFFFFF);
  border: 1px solid var(--surface-border);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideInToast 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

@keyframes slideInToast {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast.toast-success {
  border-left: 4px solid #10B981;
}

body.rtl .toast.toast-success {
  border-left: none;
  border-right: 4px solid #10B981;
}

/* --------------------------------------------------------------------------
   RESPONSIVE DESIGN BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .top-navbar {
    padding: 0 24px;
  }

  .main-content {
    padding: 32px 24px;
  }

  .quick-actions-grid,
  .recent-projects-grid,
  .team-grid,
  .archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .members-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-detail-two-col,
  .profile-two-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    padding: 16px;
    border-right: none;
    border-bottom: 1px solid var(--sidebar-border);
  }

  .top-navbar {
    padding: 0 16px;
    height: 56px;
  }

  .main-content {
    padding: 24px 16px;
  }

  .quick-actions-grid,
  .recent-projects-grid,
  .team-grid,
  .archive-grid,
  .members-grid {
    grid-template-columns: 1fr;
  }

  .messages-container {
    grid-template-columns: 1fr;
    height: 600px;
  }

  .conversations-pane {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   SHARED SIDEBAR - approved reference layout
   -------------------------------------------------------------------------- */
.sidebar {
  position: relative;
  width: var(--sidebar-width);
  padding: 18px 15px 0;
  background: var(--sidebar-bg);
  border-right-color: rgba(148, 163, 184, 0.09);
  overflow: hidden;
}

.sidebar-logo {
  gap: 14px;
  margin: 0 0 51px;
  padding: 0 9px;
  position: relative;
  z-index: 1;
}

.logo-badge-container {
  width: 54px;
  height: 54px;
  border-radius: 9px;
}

.logo-title {
  font-size: 14px;
  letter-spacing: 0.015em;
}

.logo-subtitle {
  font-size: 11px;
}

.sidebar-nav {
  gap: 10px;
  position: relative;
  z-index: 1;
}

.nav-item {
  min-height: 50px;
  padding: 11px 13px;
  gap: 15px;
  font-size: 13.5px;
  line-height: 1.45;
}

.nav-item.active {
  color: #20c7b7;
  background: rgba(10, 166, 153, 0.16);
}

.nav-item.active::before {
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  border-radius: 0 4px 4px 0;
}

body.rtl .nav-item.active::before {
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: 4px 0 0 4px;
}

.sidebar-watermark {
  position: absolute;
  left: -25px;
  bottom: -20px;
  width: 260px;
  height: auto;
  margin: 0;
  padding: 0;
  z-index: 0;
  display: block;
  overflow: visible;
  background: transparent;
}

.watermark-img {
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0.20;
}

.nav-badge {
  min-width: 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #12b9aa;
  color: #082b30;
  font-size: 10px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   FIND A TEAM VIEW - reference-matched content only
   -------------------------------------------------------------------------- */
body:has(#view-find-team.active) .breadcrumb-tracker {
  display: none;
}

body:has(#view-find-team.active) .main-content {
  padding: 40px 28px 28px;
  background: #07111e;
}

body:has(#view-find-team.active) #view-find-team {
  width: 100%;
  max-width: 1180px;
}

body:has(#view-find-team.active) .find-team-breadcrumb {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 13px;
  color: #98a9bb;
  font-size: 12px;
  line-height: 16px;
}

body:has(#view-find-team.active) .find-team-breadcrumb-separator {
  color: #5f7185;
}

body:has(#view-find-team.active) .find-team-breadcrumb [aria-current="page"] {
  color: #e7edf4;
}

body:has(#view-find-team.active) #view-find-team .page-header {
  margin-bottom: 22px;
}

body:has(#view-find-team.active) #view-find-team .page-title {
  margin-bottom: 3px;
  color: #f2f5f9;
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

body:has(#view-find-team.active) #view-find-team .page-subtitle {
  color: #9aadc0;
  font-size: 14px;
  line-height: 18px;
}

body:has(#view-find-team.active) #view-find-team .filter-search-bar {
  display: grid;
  grid-template-columns: minmax(280px, 2.3fr) repeat(4, minmax(125px, 0.95fr));
  gap: 12px;
  width: min(956px, 100%);
  margin-bottom: 22px;
  flex-wrap: nowrap;
}

body:has(#view-find-team.active) #view-find-team .search-input-wrapper,
body:has(#view-find-team.active) #view-find-team .filter-dropdown {
  height: 41px;
  min-width: 0;
  border: 1px solid #1b2b3d;
  border-radius: 9px;
  background: #0d1a28;
  box-shadow: none;
  color: #bdcbd9;
}

body:has(#view-find-team.active) #view-find-team .search-input-wrapper {
  padding: 0 12px;
  gap: 10px;
}

body:has(#view-find-team.active) #view-find-team .search-input-wrapper svg {
  width: 18px;
  height: 18px;
  color: #9eb4c7;
}

body:has(#view-find-team.active) #view-find-team .search-input-wrapper input {
  font-size: 12px;
  color: #e3ebf3;
}

body:has(#view-find-team.active) #view-find-team .search-input-wrapper input::placeholder {
  color: #8194a8;
  opacity: 1;
}

body:has(#view-find-team.active) #view-find-team .filter-dropdown {
  padding: 0 13px;
  font-size: 12px;
  font-weight: 500;
  color-scheme: dark;
}

body:has(#view-find-team.active) #view-find-team .team-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 246px;
  column-gap: 22px;
  row-gap: 18px;
}

body:has(#view-find-team.active) #view-find-team .student-card {
  min-width: 0;
  height: 246px;
  padding: 19px 20px 15px;
  overflow: hidden;
  border: 1px solid #1c2b3c;
  border-radius: 12px;
  background: #0c1927;
  box-shadow: none;
}

body:has(#view-find-team.active) #view-find-team .student-card-top {
  gap: 19px;
  margin-bottom: 13px;
}

body:has(#view-find-team.active) #view-find-team .avatar-circle {
  width: 53px;
  height: 53px;
  font-size: 19px;
  box-shadow: none;
}

body:has(#view-find-team.active) #view-find-team .student-name {
  overflow: hidden;
  margin-bottom: 3px;
  color: #edf2f7;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body:has(#view-find-team.active) #view-find-team .student-major {
  color: #94a7ba;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}

body:has(#view-find-team.active) #view-find-team .student-section-label {
  margin: 0 0 4px;
  color: #9aacbe;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0;
  text-transform: none;
}

body:has(#view-find-team.active) #view-find-team .student-card > div:nth-of-type(3) {
  margin-top: 8px;
}

body:has(#view-find-team.active) #view-find-team .student-card .tags-row {
  gap: 8px;
  min-height: 27px;
  overflow: hidden;
  flex-wrap: nowrap;
}

body:has(#view-find-team.active) #view-find-team .student-card .tag {
  padding: 6px 12px;
  border: 0;
  border-radius: 5px;
  background: #0c343a;
  color: #d7e7ed;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 15px;
  white-space: nowrap;
}

body:has(#view-find-team.active) #view-find-team .student-card > div:nth-of-type(3) .tag {
  background: #172b40;
  color: #d3e0ed;
}

body:has(#view-find-team.active) #view-find-team .student-card-btn {
  height: 34px;
  min-height: 34px;
  margin-top: auto;
  padding: 0;
  border: 1px solid #213246;
  border-radius: 8px;
  background: #192a3c;
  color: #e4ebf2;
  font-size: 12px;
  font-weight: 600;
}

body:has(#view-find-team.active) #view-find-team .student-card-btn:hover {
  border-color: #0e9186;
  background: #0e766f;
  color: #f5fffe;
}

@media (max-width: 1080px) {
  body:has(#view-find-team.active) #view-find-team .filter-search-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body:has(#view-find-team.active) #view-find-team .search-input-wrapper {
    grid-column: 1 / -1;
  }
  body:has(#view-find-team.active) #view-find-team .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body:has(#view-find-team.active) .main-content {
    padding: 24px 16px;
  }
  body:has(#view-find-team.active) #view-find-team .filter-search-bar,
  body:has(#view-find-team.active) #view-find-team .team-grid {
    grid-template-columns: 1fr;
  }
  body:has(#view-find-team.active) #view-find-team .search-input-wrapper {
    grid-column: auto;
  }
  body:has(#view-find-team.active) #view-find-team .team-grid {
    grid-auto-rows: auto;
  }
  body:has(#view-find-team.active) #view-find-team .student-card {
    min-height: 246px;
  }
}

body:has(#view-home.active) .top-navbar {
  height: 68px;
  padding: 0 26px 0 24px;
  background: #07111e;
  border-bottom-color: transparent;
}

/* Projects reference layout — scoped to this view so shared navigation and other pages stay intact. */
body:has(#view-projects.active) .main-content { padding: 12px 24px 30px; background: #07111e; }
body:has(#view-projects.active) #view-projects { max-width: none; width: 100%; }
body:has(#view-projects.active) .top-navbar { height: 68px; padding: 0 26px 0 24px; background: #07111e; border-bottom-color: transparent; }
body:has(#view-projects.active) .top-nav-left { flex: 1; }
body:has(#view-projects.active) .header-search-wrap { width: min(602px, 100%); }
body:has(#view-projects.active) .projects-page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin: 0 0 12px; }
body:has(#view-projects.active) #view-projects .page-title { margin:0 0 3px; color:#f4f7fb; font-family:var(--font-sans); font-size:30px; line-height:1.2; letter-spacing:-.035em; }
body:has(#view-projects.active) #view-projects .page-subtitle { color:#9aadc0; font-size:14px; line-height:18px; }
body:has(#view-projects.active) .projects-post-btn { height:42px; padding:0 18px; gap:10px; border-radius:7px; white-space:nowrap; color:#062129; background:#08c5b8; }
body:has(#view-projects.active) .projects-toolbar { display:grid; grid-template-columns:minmax(240px,2.5fr) minmax(96px,.78fr) minmax(125px,1.05fr) minmax(125px,1.05fr) auto minmax(145px,1.15fr); align-items:center; gap:12px; margin-bottom:10px; }
body:has(#view-projects.active) .projects-search, body:has(#view-projects.active) .projects-filter { height:38px; border:1px solid #1a2b3d; border-radius:8px; background:#0e1d2b; color:#c8d4e2; }
body:has(#view-projects.active) .projects-search { display:flex; align-items:center; gap:11px; padding:0 12px; }
body:has(#view-projects.active) .projects-search svg { width:17px; height:17px; fill:none; stroke:#9bb1c7; stroke-width:2; flex:none; }
body:has(#view-projects.active) .projects-search input { width:100%; min-width:0; border:0; outline:0; color:#dce6f1; background:transparent; font:400 12px var(--font-sans); }
body:has(#view-projects.active) .projects-search input::placeholder { color:#91a6bd; opacity:1; }
body:has(#view-projects.active) .projects-filter { width:100%; padding:0 12px; font:400 12px var(--font-sans); color:#c8d4e2; }
body:has(#view-projects.active) .projects-sort-label { padding-left:10px; color:#b5c2d1; font-size:12px; white-space:nowrap; }
body:has(#view-projects.active) .projects-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
body:has(#view-projects.active) .project-tile { height:268px; min-width:0; display:flex; flex-direction:column; padding:6px 7px 7px; border:1px solid #1b2d3f; border-radius:10px; background:#0b1927; overflow:hidden; }
body:has(#view-projects.active) .project-tile[hidden] { display:none; }
body:has(#view-projects.active) .project-banner { height:48px; flex:none; position:relative; overflow:hidden; border-radius:5px; background:#071421; }
body:has(#view-projects.active) .project-banner img { width:100%; height:100%; object-fit:cover; display:block; }
body:has(#view-projects.active) .project-banner.banner-navigation { background:radial-gradient(ellipse at 43% 130%,#9e2aff 0,transparent 43%),radial-gradient(ellipse at 63% 125%,#6d1cdf 0,transparent 42%),linear-gradient(110deg,#080b4f,#170b74 52%,#071044); }
body:has(#view-projects.active) .project-banner.banner-navigation img { display:none; }
body:has(#view-projects.active) .project-banner.banner-energy img { object-position:center 42%; filter:saturate(.8); }
body:has(#view-projects.active) .project-banner.banner-library img { object-position:center 36%; filter:grayscale(.85) brightness(1.45); }
body:has(#view-projects.active) .project-status { position:absolute; top:6px; right:5px; padding:4px 9px; border-radius:5px; color:#09202a; background:#63e2d0; font-size:10px; line-height:1.2; white-space:nowrap; }
body:has(#view-projects.active) .project-status.status-almost { background:#ffd85d; }
body:has(#view-projects.active) .project-status.status-complete { background:#d8e5f3; }
body:has(#view-projects.active) .project-tile h2 { margin:6px 3px 2px; color:#eff4fa; font-size:14px; line-height:18px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body:has(#view-projects.active) .project-description { height:32px; margin:0 3px 4px; overflow:hidden; color:#9aadc1; font-size:12px; line-height:16px; }
body:has(#view-projects.active) .project-tags { min-height:22px; display:flex; align-items:flex-start; gap:6px; margin:0 3px 4px; overflow:hidden; }
body:has(#view-projects.active) .project-tags span { display:inline-block; padding:3px 8px; border-radius:5px; color:#77e0d3; background:#073b40; font-size:10px; line-height:14px; white-space:nowrap; }
body:has(#view-projects.active) .project-tags.role-tags span { color:#c4d3e4; background:#1a3046; }
body:has(#view-projects.active) .project-card-meta { height:26px; min-height:26px; display:flex; align-items:center; gap:12px; margin:auto 2px 5px; border-top:1px solid transparent; color:#a8bacd; font-size:12px; }
body:has(#view-projects.active) .project-team-count { display:flex; align-items:center; gap:9px; padding-right:15px; border-right:1px solid #23384c; }
body:has(#view-projects.active) .project-team-count svg { width:18px; height:18px; fill:none; stroke:#9db8d5; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
body:has(#view-projects.active) .open-roles { white-space:nowrap; }
body:has(#view-projects.active) .project-bookmark { width:21px; height:26px; display:grid; place-items:center; margin-left:auto; padding:0; border:0; background:transparent; color:#9cb7d2; cursor:pointer; }
body:has(#view-projects.active) .project-bookmark svg { width:17px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
body:has(#view-projects.active) .project-bookmark.is-bookmarked { color:#13c5b6; }
body:has(#view-projects.active) .project-bookmark.is-bookmarked svg { fill:rgba(19,197,182,.28); }
body:has(#view-projects.active) .project-view-btn { width:100%; height:32px; flex:none; border:1px solid #203448; border-radius:6px; color:#e5edf5; background:#182a3b; font:600 13px var(--font-sans); cursor:pointer; }
body:has(#view-projects.active) .project-view-btn:hover { background:#20384d; }

/* Campus AI promotion — isolated to the Projects view. */
body:has(#view-projects.active) .campus-ai-section { margin:0 0 10px; }
body:has(#view-projects.active) .campus-ai-promo { min-height:88px; display:flex; align-items:center; gap:14px; padding:16px 24px; border:1px solid rgba(116,101,255,.78); border-radius:12px; background:radial-gradient(ellipse at 78% 50%,rgba(65,73,196,.22),transparent 42%),linear-gradient(105deg,#111a37 0%,#101b36 50%,#121b3a 100%); box-shadow:inset 0 0 28px rgba(94,75,255,.09); }
body:has(#view-projects.active) .campus-ai-sparkle { width:32px; height:32px; flex:none; display:grid; place-items:center; color:#bc83ff; }
body:has(#view-projects.active) .campus-ai-sparkle svg { width:28px; height:28px; fill:currentColor; filter:drop-shadow(0 0 10px rgba(167,102,255,.46)); }
body:has(#view-projects.active) .campus-ai-copy { min-width:0; }
body:has(#view-projects.active) .campus-ai-copy h2 { margin:0 0 1px; color:#f4f4ff; font:600 17px/1.2 var(--font-sans); letter-spacing:-.02em; }
body:has(#view-projects.active) .campus-ai-copy p { margin:0; color:#b5c4df; font-size:13px; line-height:17px; }
body:has(#view-projects.active) .campus-ai-cta { width:320px; height:54px; min-height:54px; flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-left:auto; padding:0 18px; border:1px solid rgba(220,192,255,.9); border-radius:11px; color:#fff; background:linear-gradient(105deg,#a73cf2,#5969f5); box-shadow:0 0 20px rgba(116,82,255,.22),inset 0 1px rgba(255,255,255,.24); font:600 13px var(--font-sans); white-space:nowrap; cursor:pointer; transition:filter .18s,transform .18s; }
body:has(#view-projects.active) .campus-ai-cta:hover { filter:brightness(1.1); transform:translateY(-1px); }
body:has(#view-projects.active) #campusAiRecommendations[hidden],
body:has(#view-projects.active) .projects-grid[hidden],
body:has(#view-projects.active) .campus-ai-collapsible-reasons[hidden] { display:none !important; }
body:has(#view-projects.active) .campus-ai-recommendations { margin:10px 0 12px; }
body:has(#view-projects.active) .campus-ai-recommendations-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 2px 10px; }
body:has(#view-projects.active) .campus-ai-recommendations-heading h2 { margin:0 0 4px; color:#f1f5fb; font:600 20px/1.3 var(--font-sans); letter-spacing:-.02em; }
body:has(#view-projects.active) .campus-ai-recommendations-heading h2 span { color:#b87aff; }
body:has(#view-projects.active) .campus-ai-recommendations-heading p { margin:0; color:#9aadc1; font-size:13px; line-height:18px; }
body:has(#view-projects.active) .campus-ai-demo-note { padding:6px 10px; border:1px solid #303852; border-radius:20px; color:#b9c3d9; background:#111c30; font-size:11px; white-space:nowrap; }
body:has(#view-projects.active) .campus-ai-recommendation-list { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-content:start; }
body:has(#view-projects.active) .campus-ai-recommendation { min-width:0; padding:16px; border:1px solid #1d3044; border-radius:11px; background:linear-gradient(145deg,#0e1d2c,#0b1927); box-shadow:0 5px 16px rgba(0,0,0,.12); }
body:has(#view-projects.active) .campus-ai-recommendation-featured { grid-column:1 / -1; padding:12px 16px; border-color:rgba(134,102,242,.62); background:radial-gradient(ellipse at 0 0,rgba(104,65,177,.16),transparent 58%),linear-gradient(130deg,#101c32,#0c1a28 65%); box-shadow:inset 3px 0 #9e68ef,0 7px 20px rgba(0,0,0,.15); }
body:has(#view-projects.active) .campus-ai-recommendation-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; }
body:has(#view-projects.active) .campus-ai-rank { min-width:30px; height:28px; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:0 8px; border:1px solid #2a4057; border-radius:8px; color:#c7d4e4; background:#15283a; font-size:12px; font-weight:700; }
body:has(#view-projects.active) .campus-ai-rank-first { color:#f0d99a; border-color:rgba(198,159,71,.35); background:rgba(147,109,30,.17); }
body:has(#view-projects.active) .campus-ai-match-score { padding:5px 10px; border:1px solid rgba(23,185,167,.27); border-radius:20px; color:#55d7c4; background:rgba(5,117,107,.17); font-size:12px; font-weight:700; white-space:nowrap; }
body:has(#view-projects.active) .campus-ai-recommendation-featured .campus-ai-match-score { color:#dec8ff; border-color:rgba(164,114,255,.36); background:rgba(120,77,210,.17); }
body:has(#view-projects.active) .campus-ai-recommendation h3 { margin:7px 0 8px; color:#f0f5fb; font:600 18px/1.3 var(--font-sans); }
body:has(#view-projects.active) .campus-ai-recommendation-meta { display:flex; flex-wrap:wrap; gap:22px; margin-bottom:8px; }
body:has(#view-projects.active) .campus-ai-meta-label { display:block; margin-bottom:6px; color:#8fa7bd; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
body:has(#view-projects.active) .campus-ai-tags { display:flex; flex-wrap:wrap; gap:7px; }
body:has(#view-projects.active) .campus-ai-tags span { padding:5px 9px; border:1px solid rgba(23,190,174,.15); border-radius:6px; color:#72dfd0; background:#07373c; font-size:11px; line-height:15px; white-space:nowrap; }
body:has(#view-projects.active) .campus-ai-tags.campus-ai-role-tags span { color:#bfd0e2; border-color:#263d54; background:#182e43; }
body:has(#view-projects.active) .campus-ai-featured-reasons { position:relative; padding:8px 14px 9px 15px; border:1px solid rgba(132,105,205,.24); border-radius:8px; background:rgba(16,29,49,.72); }
body:has(#view-projects.active) .campus-ai-featured-reasons h4,
body:has(#view-projects.active) .campus-ai-collapsible-reasons h4 { margin:0 0 5px; color:#e4e9f5; font-size:13px; font-weight:600; }
body:has(#view-projects.active) .campus-ai-featured-reasons ul,
body:has(#view-projects.active) .campus-ai-collapsible-reasons ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 18px; margin:0; padding:0; list-style:none; color:#aebfd2; font-size:12px; line-height:17px; }
body:has(#view-projects.active) .campus-ai-featured-reasons li span,
body:has(#view-projects.active) .campus-ai-collapsible-reasons li span { margin-right:5px; color:#59d9c6; font-weight:700; }
body:has(#view-projects.active) .campus-ai-featured-reasons p { margin:6px 0 0; color:#91a6bd; font-size:11px; line-height:16px; }
body:has(#view-projects.active) .campus-ai-view-project { min-height:36px; display:inline-flex; align-items:center; justify-content:center; gap:8px; margin:8px 0 0 auto; padding:0 17px; border:1px solid #264356; border-radius:7px; color:#e5edf5; background:#182d3f; font:600 12px var(--font-sans); cursor:pointer; }
body:has(#view-projects.active) .campus-ai-view-project:hover { color:#6ee2d0; border-color:#167b78; background:#10323b; }
body:has(#view-projects.active) .campus-ai-recommendation-compact { padding:13px 14px; }
body:has(#view-projects.active) .campus-ai-compact-main { display:flex; align-items:center; gap:11px; }
body:has(#view-projects.active) .campus-ai-compact-content { min-width:0; flex:1; }
body:has(#view-projects.active) .campus-ai-compact-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
body:has(#view-projects.active) .campus-ai-compact-title h3 { min-width:0; margin:0; overflow:hidden; color:#eaf1f8; font:600 14px/1.3 var(--font-sans); text-overflow:ellipsis; white-space:nowrap; }
body:has(#view-projects.active) .campus-ai-compact-title .campus-ai-match-score { padding:4px 8px; font-size:10px; }
body:has(#view-projects.active) .campus-ai-reason-toggle { width:28px; height:28px; flex:none; display:grid; place-items:center; padding:0; border:1px solid #2b4055; border-radius:7px; color:#b8c8da; background:#14283b; cursor:pointer; }
body:has(#view-projects.active) .campus-ai-reason-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .18s ease; }
body:has(#view-projects.active) .campus-ai-reason-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
body:has(#view-projects.active) .campus-ai-collapsible-reasons { margin:12px 0 0 41px; padding:11px 12px; border:1px solid #263b50; border-radius:8px; background:rgba(12,27,42,.8); }
body:has(#view-projects.active) .campus-ai-collapsible-reasons ul { grid-template-columns:1fr; gap:5px; }
body:has(#view-projects.active) .campus-ai-recommendations:not([hidden]) + .projects-grid { margin-top:0; }
@media(max-width:900px) {
  body:has(#view-projects.active) .campus-ai-recommendation-list { grid-template-columns:1fr; }
  body:has(#view-projects.active) .campus-ai-recommendation-featured { grid-column:auto; }
}
@media(max-width:680px) {
  body:has(#view-projects.active) .campus-ai-promo { align-items:flex-start; flex-wrap:wrap; gap:10px 12px; padding:13px; }
  body:has(#view-projects.active) .campus-ai-sparkle { width:36px; height:36px; }
  body:has(#view-projects.active) .campus-ai-sparkle svg { width:32px; height:32px; }
  body:has(#view-projects.active) .campus-ai-copy { flex:1; }
  body:has(#view-projects.active) .campus-ai-cta { width:100%; min-height:43px; margin:0; padding:0 12px; font-size:12px; }
  body:has(#view-projects.active) .campus-ai-recommendations-heading { align-items:flex-start; }
  body:has(#view-projects.active) .campus-ai-demo-note { display:none; }
  body:has(#view-projects.active) .campus-ai-recommendation { padding:12px; }
  body:has(#view-projects.active) .campus-ai-featured-reasons ul { grid-template-columns:1fr; }
  body:has(#view-projects.active) .campus-ai-compact-title { align-items:flex-start; flex-direction:column; }
  body:has(#view-projects.active) .campus-ai-collapsible-reasons { margin-left:0; }
}
@media(max-width:1050px) {
  body:has(#view-projects.active) .projects-toolbar { grid-template-columns:repeat(4,minmax(0,1fr)); }
  body:has(#view-projects.active) .projects-search { grid-column:span 2; }
  body:has(#view-projects.active) .projects-sort-label { display:none; }
  body:has(#view-projects.active) .projects-sort { grid-column:span 2; }
  body:has(#view-projects.active) .projects-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:680px) {
  body:has(#view-projects.active) .main-content { padding:18px 14px; }
  body:has(#view-projects.active) .projects-page-heading { align-items:flex-start; }
  body:has(#view-projects.active) .projects-post-btn { padding:0 10px; }
  body:has(#view-projects.active) .projects-toolbar { grid-template-columns:1fr 1fr; }
  body:has(#view-projects.active) .projects-search { grid-column:1 / -1; }
  body:has(#view-projects.active) .projects-sort { grid-column:auto; }
  body:has(#view-projects.active) .projects-grid { grid-template-columns:1fr; }
}

/* Shared desktop shell and controls: Home is the master reference for every view. */
body:has(#view-home.active) .top-navbar,
body:has(#view-profile.active) .top-navbar,
body:has(#view-find-team.active) .top-navbar,
body:has(#view-projects.active) .top-navbar,
body:has(#view-project-details.active) .top-navbar,
body:has(#view-research.active) .top-navbar,
body:has(#view-archive.active) .top-navbar,
body:has(#view-messages.active) .top-navbar {
  height:68px;
  min-height:68px;
  flex:0 0 68px;
  padding:0 26px 0 24px;
  background:#07111e;
  border-bottom:0;
}
body:has(#view-home.active) .top-nav-left,
body:has(#view-profile.active) .top-nav-left,
body:has(#view-find-team.active) .top-nav-left,
body:has(#view-projects.active) .top-nav-left,
body:has(#view-project-details.active) .top-nav-left,
body:has(#view-research.active) .top-nav-left,
body:has(#view-archive.active) .top-nav-left,
body:has(#view-messages.active) .top-nav-left { flex:1; min-width:0; }
body:has(#view-home.active) .header-search-wrap,
body:has(#view-profile.active) .header-search-wrap,
body:has(#view-find-team.active) .header-search-wrap,
body:has(#view-projects.active) .header-search-wrap,
body:has(#view-project-details.active) .header-search-wrap,
body:has(#view-research.active) .header-search-wrap,
body:has(#view-archive.active) .header-search-wrap,
body:has(#view-messages.active) .header-search-wrap { width:min(546px,100%); }
body:has(#view-home.active) .header-search-input,
body:has(#view-profile.active) .header-search-input,
body:has(#view-find-team.active) .header-search-input,
body:has(#view-projects.active) .header-search-input,
body:has(#view-project-details.active) .header-search-input,
body:has(#view-research.active) .header-search-input,
body:has(#view-archive.active) .header-search-input,
body:has(#view-messages.active) .header-search-input {
  width:100%; height:37px; border:1px solid #1b2a3b; border-radius:8px;
  padding:0 38px 0 36px; color:#dbe5ef; background:#0d1928; box-shadow:none;
  font:400 11px/1.2 var(--font-sans);
}
body:has(#view-home.active) .header-search-input:focus,
body:has(#view-profile.active) .header-search-input:focus,
body:has(#view-find-team.active) .header-search-input:focus,
body:has(#view-projects.active) .header-search-input:focus,
body:has(#view-project-details.active) .header-search-input:focus,
body:has(#view-research.active) .header-search-input:focus,
body:has(#view-archive.active) .header-search-input:focus,
body:has(#view-messages.active) .header-search-input:focus { width:100%; border-color:#168f88; }
body:has(#view-home.active) .top-nav-right,
body:has(#view-profile.active) .top-nav-right,
body:has(#view-find-team.active) .top-nav-right,
body:has(#view-projects.active) .top-nav-right,
body:has(#view-project-details.active) .top-nav-right,
body:has(#view-research.active) .top-nav-right,
body:has(#view-archive.active) .top-nav-right,
body:has(#view-messages.active) .top-nav-right { flex:0 0 auto; gap:15px; margin-left:20px; }
body:has(#view-home.active) .header-icon-btn,
body:has(#view-profile.active) .header-icon-btn,
body:has(#view-find-team.active) .header-icon-btn,
body:has(#view-projects.active) .header-icon-btn,
body:has(#view-project-details.active) .header-icon-btn,
body:has(#view-research.active) .header-icon-btn,
body:has(#view-archive.active) .header-icon-btn,
body:has(#view-messages.active) .header-icon-btn {
  width:34px; height:34px; padding:0; border:0; color:#d9e4ee;
  background:transparent; box-shadow:none;
}
body:has(#view-home.active) .top-nav-user,
body:has(#view-profile.active) .top-nav-user,
body:has(#view-find-team.active) .top-nav-user,
body:has(#view-projects.active) .top-nav-user,
body:has(#view-project-details.active) .top-nav-user,
body:has(#view-research.active) .top-nav-user,
body:has(#view-archive.active) .top-nav-user,
body:has(#view-messages.active) .top-nav-user { gap:12px; padding:0; border:0; background:transparent; box-shadow:none; }
body:has(#view-home.active) .top-avatar-circle,
body:has(#view-profile.active) .top-avatar-circle,
body:has(#view-find-team.active) .top-avatar-circle,
body:has(#view-projects.active) .top-avatar-circle,
body:has(#view-project-details.active) .top-avatar-circle,
body:has(#view-research.active) .top-avatar-circle,
body:has(#view-archive.active) .top-avatar-circle,
body:has(#view-messages.active) .top-avatar-circle { width:40px; height:40px; border:1px solid #1b2b40; background:#122136; font-size:13px; }
body:has(#view-home.active) .notifications-badge,
body:has(#view-profile.active) .notifications-badge,
body:has(#view-find-team.active) .notifications-badge,
body:has(#view-projects.active) .notifications-badge,
body:has(#view-project-details.active) .notifications-badge,
body:has(#view-research.active) .notifications-badge,
body:has(#view-archive.active) .notifications-badge,
body:has(#view-messages.active) .notifications-badge { top:3px; right:3px; width:7px; min-width:7px; height:7px; padding:0; overflow:hidden; border:0; background:#14c9b5; font-size:0; }
body:has(#view-home.active) .breadcrumb-tracker,
body:has(#view-profile.active) .breadcrumb-tracker,
body:has(#view-find-team.active) .breadcrumb-tracker,
body:has(#view-projects.active) .breadcrumb-tracker,
body:has(#view-project-details.active) .breadcrumb-tracker,
body:has(#view-research.active) .breadcrumb-tracker,
body:has(#view-archive.active) .breadcrumb-tracker,
body:has(#view-messages.active) .breadcrumb-tracker { display:none; }

body:has(#view-home.active) .main-content,
body:has(#view-profile.active) .main-content,
body:has(#view-find-team.active) .main-content,
body:has(#view-projects.active) .main-content,
body:has(#view-project-details.active) .main-content,
body:has(#view-research.active) .main-content,
body:has(#view-archive.active) .main-content,
body:has(#view-messages.active) .main-content {
  min-width:0; min-height:0; padding:12px 24px 24px; overflow-x:hidden; background:#07111e;
}
body:has(#view-home.active) .view-section.active,
body:has(#view-profile.active) .view-section.active,
body:has(#view-find-team.active) .view-section.active,
body:has(#view-projects.active) .view-section.active,
body:has(#view-project-details.active) .view-section.active,
body:has(#view-research.active) .view-section.active,
body:has(#view-archive.active) .view-section.active,
body:has(#view-messages.active) .view-section.active { width:100%; max-width:none; min-width:0; margin:0; }
body:has(#view-find-team.active) #view-find-team { width:100%; max-width:none; margin:0; }

/* Shared search, filter and button metrics, while placeholders and page actions remain specific. */
body:has(#view-find-team.active) #view-find-team .search-input-wrapper,
body:has(#view-find-team.active) #view-find-team .filter-dropdown,
body:has(#view-archive.active) .archive-controls .search-input-wrapper,
body:has(#view-archive.active) .archive-controls .filter-dropdown,
body:has(#view-projects.active) .projects-search,
body:has(#view-projects.active) .projects-filter,
body:has(#view-research.active) .research-local-search,
body:has(#view-research.active) .research-filter {
  height:37px; min-height:37px; border:1px solid #1b2a3b; border-radius:8px; background:#0d1928;
}
body:has(#view-find-team.active) #view-find-team .filter-search-bar,
body:has(#view-archive.active) .archive-controls.filter-search-bar { gap:12px; margin-bottom:16px; }
body:has(#view-projects.active) .projects-toolbar,
body:has(#view-research.active) .research-toolbar { gap:12px; margin-bottom:16px; }
html body:has(#view-projects.active) .projects-toolbar { margin-bottom:10px; }
body:has(#view-find-team.active) #view-find-team .search-input-wrapper input,
body:has(#view-archive.active) .archive-controls .search-input-wrapper input,
body:has(#view-projects.active) .projects-search input,
body:has(#view-research.active) .research-local-search input { font-size:11.5px; }
body:has(#view-find-team.active) #view-find-team .filter-dropdown,
body:has(#view-archive.active) .archive-controls .filter-dropdown,
body:has(#view-projects.active) .projects-filter,
body:has(#view-research.active) .research-filter { padding:0 12px; font-size:11.5px; }
body:has(#view-home.active) .view-section.active button.btn,
body:has(#view-profile.active) .view-section.active button.btn,
body:has(#view-find-team.active) .view-section.active button.btn,
body:has(#view-projects.active) .view-section.active button.btn,
body:has(#view-project-details.active) .view-section.active button.btn,
body:has(#view-research.active) .view-section.active button.btn,
body:has(#view-archive.active) .view-section.active button.btn,
body:has(#view-messages.active) .view-section.active button.btn,
body:has(#view-projects.active) .project-view-btn,
body:has(#view-research.active) .research-details-btn,
body:has(#view-archive.active) .archive-card-footer .btn-link,
body:has(#view-find-team.active) .student-card-btn,
body:has(#view-project-details.active) .project-detail-join-btn {
  min-height:38px; height:38px; border-radius:8px; font-size:12.5px;
}

@media(min-width:1025px) {
  body:has(#view-home.active) .main-content,
  body:has(#view-profile.active) .main-content,
  body:has(#view-find-team.active) .main-content,
  body:has(#view-projects.active) .main-content,
  body:has(#view-project-details.active) .main-content,
  body:has(#view-research.active) .main-content,
  body:has(#view-archive.active) .main-content,
  body:has(#view-messages.active) .main-content { overflow-y:hidden; }

  body:has(#view-archive.active) .archive-card { height:min(343px,calc((100vh - 290px)/2)); }
  body:has(#view-messages.active) .messages-container { height:min(calc(100vh - 246px),740px); min-height:0; }
}

@media(min-width:681px) and (max-width:1024px) {
  body:has(#view-home.active) .top-navbar,
  body:has(#view-profile.active) .top-navbar,
  body:has(#view-find-team.active) .top-navbar,
  body:has(#view-projects.active) .top-navbar,
  body:has(#view-project-details.active) .top-navbar,
  body:has(#view-research.active) .top-navbar,
  body:has(#view-archive.active) .top-navbar,
  body:has(#view-messages.active) .top-navbar { height:60px; min-height:60px; flex-basis:60px; padding:0 18px; }
  body:has(#view-home.active) .header-search-wrap,
  body:has(#view-profile.active) .header-search-wrap,
  body:has(#view-find-team.active) .header-search-wrap,
  body:has(#view-projects.active) .header-search-wrap,
  body:has(#view-project-details.active) .header-search-wrap,
  body:has(#view-research.active) .header-search-wrap,
  body:has(#view-archive.active) .header-search-wrap,
  body:has(#view-messages.active) .header-search-wrap { width:min(400px,100%); }
  body:has(#view-home.active) .main-content,
  body:has(#view-profile.active) .main-content,
  body:has(#view-find-team.active) .main-content,
  body:has(#view-projects.active) .main-content,
  body:has(#view-project-details.active) .main-content,
  body:has(#view-research.active) .main-content,
  body:has(#view-archive.active) .main-content,
  body:has(#view-messages.active) .main-content { padding:18px 24px; }
  body:has(#view-home.active) .top-nav-right,
  body:has(#view-profile.active) .top-nav-right,
  body:has(#view-find-team.active) .top-nav-right,
  body:has(#view-projects.active) .top-nav-right,
  body:has(#view-project-details.active) .top-nav-right,
  body:has(#view-research.active) .top-nav-right,
  body:has(#view-archive.active) .top-nav-right,
  body:has(#view-messages.active) .top-nav-right { gap:9px; margin-left:10px; }
}

@media(min-width:1025px) and (max-height:900px) {
  body:has(#view-archive.active) .archive-page-breadcrumb { margin-bottom:10px; }
  body:has(#view-archive.active) .archive-page-header { margin-bottom:12px; }
  body:has(#view-archive.active) .archive-page-header .page-title { font-size:30px; }
  body:has(#view-archive.active) .archive-page-header .page-subtitle { font-size:14px; line-height:20px; }
  body:has(#view-archive.active) .archive-controls.filter-search-bar { margin-bottom:12px; }
  body:has(#view-archive.active) .archive-card { padding:8px; }
  body:has(#view-archive.active) .archive-banner { height:64px; }
  body:has(#view-archive.active) .archive-top-meta { height:20px; margin:6px 4px 3px; }
  body:has(#view-archive.active) .archive-top-meta .type-pill { padding:3px 10px; font-size:10px; line-height:14px; }
  body:has(#view-archive.active) .archive-title { margin:0 4px 2px; font-size:15.5px; line-height:1.2; }
  body:has(#view-archive.active) .archive-dept { margin:0 4px 5px; font-size:12px; line-height:16px; }
  body:has(#view-archive.active) .archive-skills-row { gap:4px 6px; margin:0 4px; }
  body:has(#view-archive.active) .archive-skills-row .tag { padding:4px 9px; font-size:10.5px; line-height:14px; }
  body:has(#view-archive.active) .archive-card-footer { min-height:30px; padding:7px 4px 0; }
  body:has(#view-archive.active) .archive-card-footer .members-count { gap:6px; font-size:12px; }
  body:has(#view-archive.active) .archive-card-footer .members-count svg { width:18px; height:18px; }
  body:has(#view-archive.active) .archive-card-footer .btn-link { min-height:28px; height:28px; font-size:11.5px; }
  body:has(#view-messages.active) .chat-header { min-height:68px; padding:12px 22px; }
  body:has(#view-messages.active) .chat-messages { gap:10px; padding:16px 20px; }
  body:has(#view-messages.active) .message-sender-tag { font-size:11.5px; margin-bottom:3px; }
  body:has(#view-messages.active) .message-bubble { padding:9px 15px; font-size:14px; line-height:1.4; }
  body:has(#view-messages.active) .chat-input-bar { min-height:65px; padding:12px 20px; }
  body:has(#view-messages.active) .chat-input { height:37px; }
  body:has(#view-messages.active) .chat-input-bar .btn-primary { height:38px; min-height:38px; }
}

@media(max-width:1024px) {
  body:has(#view-home.active) .main-content,
  body:has(#view-profile.active) .main-content,
  body:has(#view-find-team.active) .main-content,
  body:has(#view-projects.active) .main-content,
  body:has(#view-project-details.active) .main-content,
  body:has(#view-research.active) .main-content,
  body:has(#view-archive.active) .main-content,
  body:has(#view-messages.active) .main-content { overflow-y:auto; }
}

/* Project Details reference view; shared shell and sidebar remain unchanged. */
body:has(#view-project-details.active) .main-content { padding:18px 24px 30px; background:#06111c; }
body:has(#view-project-details.active) #view-project-details { max-width:none; width:100%; }
body:has(#view-project-details.active) .top-navbar { height:64px; padding:0 26px 0 24px; background:#06111c; border-bottom-color:transparent; }
body:has(#view-project-details.active) .top-nav-left { flex:1; }
body:has(#view-project-details.active) .header-search-wrap { width:min(520px,100%); }
body:has(#view-project-details.active) .project-detail-crumb-row { display:flex; align-items:center; gap:12px; min-height:38px; margin:0 0 0; }
body:has(#view-project-details.active) .project-detail-back { width:36px; height:36px; display:grid; place-items:center; padding:0; border:1px solid #10263a; border-radius:50%; color:#c3d5e9; background:#0d2032; cursor:pointer; }
body:has(#view-project-details.active) .project-detail-back svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
body:has(#view-project-details.active) .project-detail-breadcrumb { display:flex; align-items:center; gap:14px; color:#f0f4f9; font-size:12px; }
body:has(#view-project-details.active) .project-detail-breadcrumb a { color:#a9bacd; cursor:pointer; }
body:has(#view-project-details.active) .project-detail-breadcrumb span:nth-child(2) { color:#71849a; }
body:has(#view-project-details.active) .project-detail-page-title { margin:0 0 14px 53px; color:#f1f5fa; font-size:30px; font-weight:700; line-height:1.2; letter-spacing:-.03em; }
body:has(#view-project-details.active) .project-detail-two-col { display:grid; grid-template-columns:minmax(0,1.67fr) minmax(300px,1fr); gap:20px; align-items:stretch; }
body:has(#view-project-details.active) .project-detail-overview-card,
body:has(#view-project-details.active) .project-team-status-card { min-width:0; height:328px; border:1px solid #12283a; border-radius:10px; background:#071725; }
body:has(#view-project-details.active) .project-detail-overview-card { padding:12px; }
body:has(#view-project-details.active) .project-detail-banner { height:90px; position:relative; overflow:hidden; border-radius:7px; background:#07142a; }
body:has(#view-project-details.active) .project-detail-banner img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 48%; }
body:has(#view-project-details.active) .project-detail-status { position:absolute; top:8px; right:9px; padding:5px 11px; border-radius:6px; color:#09222a; background:#66e5d2; font-size:11px; font-weight:600; white-space:nowrap; }
body:has(#view-project-details.active) .project-detail-overview-card h2,
body:has(#view-project-details.active) .project-team-status-card h2 { margin:13px 5px 9px; color:#edf3f9; font-size:17px; line-height:22px; font-weight:700; }
body:has(#view-project-details.active) .project-detail-description { margin:0 5px 9px; color:#b2c1d2; font-size:14px; line-height:21px; }
body:has(#view-project-details.active) .project-detail-tag-group { margin:0 5px 10px; }
body:has(#view-project-details.active) .project-detail-label { margin-bottom:4px; color:#8fa5bc; font-size:11px; }
body:has(#view-project-details.active) .project-detail-tags { display:flex; flex-wrap:wrap; gap:9px; }
body:has(#view-project-details.active) .project-detail-tags span { padding:6px 13px; border-radius:5px; color:#5ce0d2; background:#073b40; font-size:11px; line-height:16px; }
body:has(#view-project-details.active) .project-detail-tags.role-tags span { color:#d1dce9; background:#1a3046; }
body:has(#view-project-details.active) .project-team-status-card { display:flex; flex-direction:column; padding:6px 19px 33px; }
body:has(#view-project-details.active) .project-team-status-card h2 { margin:12px 0 17px; font-size:18px; }
body:has(#view-project-details.active) .project-status-stat { min-height:44px; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:14px; border-bottom:1px solid rgba(142,166,190,.09); color:#b7c6d6; font-size:12px; }
body:has(#view-project-details.active) .project-status-stat svg { width:23px; height:23px; fill:none; stroke:#a9c0db; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
body:has(#view-project-details.active) .project-status-stat strong { color:#edf3fa; font-size:14px; font-weight:600; }
body:has(#view-project-details.active) .project-status-stat strong.seats-left { color:#13d2c3; }
body:has(#view-project-details.active) .project-detail-join-btn { width:100%; height:42px; margin-top:auto; border:0; border-radius:8px; color:#05232b; background:#08c9bd; font:700 14px var(--font-sans); cursor:pointer; }
body:has(#view-project-details.active) .project-detail-join-btn:hover { background:#22d9ca; }
body:has(#view-project-details.active) .project-members-section { margin-top:20px; }
body:has(#view-project-details.active) .project-members-section > h2 { margin:0 0 12px; color:#eff4fa; font-size:20px; line-height:26px; font-weight:700; }
body:has(#view-project-details.active) .project-members-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
body:has(#view-project-details.active) .project-member-card { height:92px; min-width:0; position:relative; display:flex; align-items:center; gap:13px; padding:12px 14px; border:1px solid #12283a; border-radius:9px; background:#071725; }
body:has(#view-project-details.active) .project-member-avatar { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:50%; color:#f6f9ff; font-size:19px; font-weight:600; }
body:has(#view-project-details.active) .avatar-ahmad { background:#1264e8; }
body:has(#view-project-details.active) .avatar-john { background:#10b6ad; }
body:has(#view-project-details.active) .avatar-yuki { background:#f59b0b; }
body:has(#view-project-details.active) .avatar-omar { background:#7028e8; }
body:has(#view-project-details.active) .project-member-info { min-width:0; }
body:has(#view-project-details.active) .project-member-info h3 { margin:0 0 5px; overflow:hidden; color:#eef3f8; font-size:11px; font-weight:600; white-space:nowrap; text-overflow:ellipsis; }
body:has(#view-project-details.active) .project-member-info p { margin:0; overflow:hidden; color:#a8b9cc; font-size:11px; white-space:nowrap; text-overflow:ellipsis; }
body:has(#view-project-details.active) .team-leader-badge { position:absolute; top:7px; left:74px; padding:3px 7px; border-radius:5px; color:#05252e; background:#0bd0c1; font-size:9px; line-height:13px; }
body:has(#view-project-details.active) .project-member-card:first-child .project-member-info h3 { margin-top:12px; }
body:has(#view-project-details.active) .project-member-message { width:24px; height:26px; flex:0 0 24px; display:grid; place-items:center; margin-left:auto; padding:0; border:0; color:#a9c0dc; background:transparent; cursor:pointer; }
body:has(#view-project-details.active) .project-member-message svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:1000px) {
  body:has(#view-project-details.active) .project-detail-two-col { grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr); gap:14px; }
  body:has(#view-project-details.active) .project-members-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  body:has(#view-project-details.active) .main-content { padding:16px 14px 24px; }
  body:has(#view-project-details.active) .project-detail-two-col,
  body:has(#view-project-details.active) .project-members-grid { grid-template-columns:1fr; }
  body:has(#view-project-details.active) .project-detail-overview-card { height:auto; min-height:328px; }
  body:has(#view-project-details.active) .project-team-status-card { height:270px; }
}

/* Research Opportunities reference grid, scoped to its own view. */
body:has(#view-research.active) .main-content { padding:12px 8px 24px; background:#06111c; }
body:has(#view-research.active) #view-research { max-width:none; width:100%; }
body:has(#view-research.active) .top-navbar { height:64px; padding:0 24px 0 8px; background:#06111c; border-bottom-color:transparent; }
body:has(#view-research.active) .top-nav-left { flex:1; }
body:has(#view-research.active) .header-search-wrap { width:min(512px,100%); }
body:has(#view-research.active) .research-page-heading { margin:0 0 12px; }
body:has(#view-research.active) .research-page-heading h1 { margin:0 0 3px; color:#f2f6fb; font:700 30px/1.2 var(--font-sans); letter-spacing:-.035em; }
body:has(#view-research.active) .research-page-heading p { margin:0; color:#b1bfd0; font-size:14px; line-height:18px; }
body:has(#view-research.active) .research-toolbar { display:grid; grid-template-columns:minmax(220px,1.55fr) minmax(132px,1fr) minmax(135px,.95fr) minmax(120px,.86fr) minmax(135px,.92fr); gap:14px; margin-bottom:11px; }
body:has(#view-research.active) .research-local-search,
body:has(#view-research.active) .research-filter { height:38px; min-width:0; border:1px solid #10283b; border-radius:8px; background:#071a28; color:#ecf3fa; }
body:has(#view-research.active) .research-local-search { display:flex; align-items:center; gap:11px; padding:0 11px; }
body:has(#view-research.active) .research-local-search svg { width:17px; height:17px; flex:none; fill:none; stroke:#b8c9dc; stroke-width:2; }
body:has(#view-research.active) .research-local-search input { width:100%; min-width:0; border:0; outline:0; color:#e5eef7; background:transparent; font:400 11px var(--font-sans); }
body:has(#view-research.active) .research-local-search input::placeholder { color:#a8b8ca; opacity:1; }
body:has(#view-research.active) .research-filter { padding:0 11px; font:400 11px var(--font-sans); }
body:has(#view-research.active) .research-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 14px; }
body:has(#view-research.active) .research-opportunity-card { height:262px; min-width:0; display:flex; flex-direction:column; padding:4px 4px 9px; overflow:hidden; border:1px solid #11283a; border-radius:9px; background:#071725; }
body:has(#view-research.active) .research-opportunity-card[hidden] { display:none; }
body:has(#view-research.active) .research-opportunity-banner { height:80px; flex:none; position:relative; overflow:hidden; border-radius:7px; background:#0a2030; }
body:has(#view-research.active) .research-opportunity-banner img { width:100%; height:100%; display:block; object-fit:fill; }
body:has(#view-research.active) .research-field-tag,
body:has(#view-research.active) .research-seats-tag { position:absolute; bottom:3px; z-index:1; padding:4px 8px; border-radius:9px; font-size:9px; line-height:12px; white-space:nowrap; }
body:has(#view-research.active) .research-field-tag { left:8px; color:#25e2d6; background:#08767b; }
body:has(#view-research.active) .research-seats-tag { right:7px; color:#f1f5f9; background:#0b1a27; }
body:has(#view-research.active) .research-opportunity-card h2 { min-height:32px; margin:5px 7px 2px; overflow:hidden; color:#eff4f9; font-size:12px; line-height:15px; font-weight:700; }
body:has(#view-research.active) .research-faculty-line { position:relative; display:flex; flex-direction:column; gap:1px; min-height:29px; margin:0 7px 5px; padding-left:23px; color:#aabbd0; font-size:10px; line-height:13px; }
body:has(#view-research.active) .research-faculty-line::before { content:""; position:absolute; top:1px; left:1px; width:15px; height:17px; background:radial-gradient(circle at 50% 29%, transparent 2.5px,#a8c0da 3px,#a8c0da 4px,transparent 4.5px),radial-gradient(ellipse at 50% 100%,transparent 4px,#a8c0da 4.5px,#a8c0da 5.5px,transparent 6px); }
body:has(#view-research.active) .research-opportunity-card > p { max-height:45px; margin:0 7px; overflow:hidden; color:#aabbd0; font-size:10.5px; line-height:14px; }
body:has(#view-research.active) .research-details-btn { height:31px; flex:none; margin: auto 7px 0; border:1px solid #123042; border-radius:6px; color:#12d2c7; background:#07313f; font:700 11px var(--font-sans); cursor:pointer; }
body:has(#view-research.active) .research-details-btn:hover { background:#0a4654; }
@media(max-width:1050px) {
  body:has(#view-research.active) .main-content { padding:16px 18px; }
  body:has(#view-research.active) .research-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body:has(#view-research.active) .research-toolbar { grid-template-columns:repeat(4,minmax(0,1fr)); }
  body:has(#view-research.active) .research-local-search { grid-column:span 2; }
}
@media(max-width:640px) {
  body:has(#view-research.active) .main-content { padding:16px 14px; }
  body:has(#view-research.active) .research-card-grid,
  body:has(#view-research.active) .research-toolbar { grid-template-columns:1fr; }
  body:has(#view-research.active) .research-local-search { grid-column:auto; }
  body:has(#view-research.active) .research-opportunity-card { height:262px; }
}

/* Previous Projects & Research archive reference layout; all rules stay within this page. */
body:has(#view-archive.active) .main-content { padding:23px 26px 26px 50px; background:#06111c; }
body:has(#view-archive.active) #view-archive { max-width:none; width:100%; }
body:has(#view-archive.active) .top-navbar { height:76px; padding:0 26px 0 40px; background:#06111c; border-bottom-color:#10202e; }
body:has(#view-archive.active) .top-nav-left { flex:1; }
body:has(#view-archive.active) .header-search-wrap { width:min(668px,100%); }
body:has(#view-archive.active) .archive-page-breadcrumb { display:flex; align-items:center; gap:14px; margin:0 0 20px 2px; color:#91b4c9; font-size:14px; line-height:18px; }
body:has(#view-archive.active) .archive-page-breadcrumb span:nth-child(2) { color:#617c91; }
body:has(#view-archive.active) .archive-page-breadcrumb strong { color:#f0f4f8; font-weight:600; }
body:has(#view-archive.active) .archive-page-header { margin:0 0 19px; }
body:has(#view-archive.active) .archive-page-header .page-title { margin:0 0 6px; color:#f3f6fa; font-family:var(--font-sans); font-size:36px; line-height:1.15; font-weight:700; letter-spacing:-.035em; }
body:has(#view-archive.active) .archive-page-header .page-subtitle { color:#a9bfd1; font-size:17px; line-height:23px; }
body:has(#view-archive.active) .archive-controls.filter-search-bar { display:grid; grid-template-columns:minmax(300px,2.55fr) minmax(150px,1fr) minmax(145px,.93fr) minmax(145px,.93fr) minmax(150px,.93fr); gap:14px; margin:0 0 21px; }
body:has(#view-archive.active) .archive-controls .search-input-wrapper,
body:has(#view-archive.active) .archive-controls .filter-dropdown { height:48px; min-width:0; border:1px solid #122b3d; border-radius:10px; color:#f0f5fa; background:#081b29; }
body:has(#view-archive.active) .archive-controls .search-input-wrapper { display:flex; align-items:center; gap:12px; padding:0 15px; }
body:has(#view-archive.active) .archive-controls .search-input-wrapper svg { flex:none; color:#a6c1d7; }
body:has(#view-archive.active) .archive-controls .search-input-wrapper input { width:100%; min-width:0; border:0; outline:0; color:#e7eff7; background:transparent; font:400 14px var(--font-sans); }
body:has(#view-archive.active) .archive-controls .search-input-wrapper input::placeholder { color:#a7bbcf; opacity:1; }
body:has(#view-archive.active) .archive-controls .filter-dropdown { width:100%; padding:0 15px; font:400 14px var(--font-sans); }
body:has(#view-archive.active) .archive-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 18px; }
body:has(#view-archive.active) .archive-card { height:343px; min-width:0; padding:12px; overflow:hidden; border:1px solid #132b3e; border-radius:14px; background:#071724; box-shadow:none; }
body:has(#view-archive.active) .archive-banner { width:100%; height:89px; flex:none; display:block; object-fit:cover; border-radius:9px; }
body:has(#view-archive.active) .archive-top-meta { height:24px; flex:none; margin:10px 5px 5px; }
body:has(#view-archive.active) .archive-top-meta .ay-badge { color:#a8c0d3; font-size:14px; font-weight:400; }
body:has(#view-archive.active) .archive-top-meta .type-pill { padding:5px 14px; border:1px solid #20394e; border-radius:999px; color:#eff5fb; background:#173047; font-size:12px; font-weight:500; line-height:16px; }
body:has(#view-archive.active) .archive-title { margin:0 5px 4px; color:#f1f5f9; font:700 18px/1.25 var(--font-sans); }
body:has(#view-archive.active) .archive-dept { margin:0 5px 11px; color:#9fb6c9; font-size:14px; line-height:19px; }
body:has(#view-archive.active) .archive-skills-row { display:flex; flex-wrap:wrap; gap:6px 8px; margin:0 5px; }
body:has(#view-archive.active) .archive-skills-row .tag { padding:6px 13px; border-radius:6px; color:#26e2d6; background:#06494b; font-size:12px; line-height:17px; }
body:has(#view-archive.active) .archive-card-footer { min-height:38px; margin-top:auto; padding:10px 5px 0; border-top:1px solid #142d40; }
body:has(#view-archive.active) .archive-card-footer .members-count { display:flex; align-items:center; gap:9px; color:#a8bfd2; font-size:14px; font-weight:400; }
body:has(#view-archive.active) .archive-card-footer .members-count svg { width:22px; height:22px; fill:none; stroke:#9bb8d2; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
body:has(#view-archive.active) .archive-card-footer .btn-link { padding:0; border:0; color:#12d1c4; background:transparent; font:600 14px var(--font-sans); cursor:pointer; }
body:has(#view-archive.active) .archive-card-footer .btn-link:hover { color:#56eee2; }
@media(max-width:1050px) {
  body:has(#view-archive.active) .main-content { padding:22px 24px; }
  body:has(#view-archive.active) .archive-controls.filter-search-bar { grid-template-columns:repeat(4,minmax(0,1fr)); }
  body:has(#view-archive.active) .archive-controls .search-input-wrapper { grid-column:1 / -1; }
  body:has(#view-archive.active) .archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
  body:has(#view-archive.active) .main-content { padding:18px 14px; }
  body:has(#view-archive.active) .archive-controls.filter-search-bar,
  body:has(#view-archive.active) .archive-grid { grid-template-columns:1fr; }
  body:has(#view-archive.active) .archive-controls .search-input-wrapper { grid-column:auto; }
  body:has(#view-archive.active) .archive-page-header .page-title { font-size:29px; }
  body:has(#view-archive.active) .archive-card { height:343px; }
}

/* Messages reference design, including its page-specific sidebar variation. */
body:has(#view-messages.active) .sidebar { width:255px; flex:0 0 255px; padding:22px 16px 0; overflow:hidden; background:#031722; border-right-color:#0b2a3a; }
body:has(#view-messages.active) .sidebar-logo { gap:14px; margin:0 0 32px; padding:0 9px; }
body:has(#view-messages.active) .logo-badge-container { width:56px; height:56px; border-radius:10px; }
body:has(#view-messages.active) .logo-title { color:#f0f5f9; font-size:16px; }
body:has(#view-messages.active) .logo-subtitle { color:#9cb5c9; font-size:12px; }
body:has(#view-messages.active) .sidebar-nav { gap:16px; margin:0 -16px; position:relative; z-index:1; }
body:has(#view-messages.active) .nav-item { min-height:44px; padding:10px 12px 10px 32px; gap:22px; color:#d4e1ef; font-size:15px; line-height:1.35; }
body:has(#view-messages.active) .nav-icon { width:26px; height:26px; color:#a9c5df; }
body:has(#view-messages.active) .nav-item.active { color:#16e0d2; background:#06343a; font-weight:600; }
body:has(#view-messages.active) .nav-item.active::before { top:0; bottom:0; left:0; width:6px; border-radius:0 4px 4px 0; background:#05d5c7; }
body:has(#view-messages.active) .nav-item.active .nav-icon { color:#14e0d1; }
body:has(#view-messages.active) .nav-badge { width:28px; min-width:28px; height:28px; font-size:13px; color:#eaffff; background:#11cabb; }
body:has(#view-messages.active) .top-navbar { height:76px; padding:0 24px 0 17px; background:#03131e; border-bottom-color:#0e2635; }
body:has(#view-messages.active) .breadcrumb-tracker { display:none; }
body:has(#view-messages.active) .top-nav-left { flex:1; }
body:has(#view-messages.active) .header-search-wrap { width:min(663px,100%); }
body:has(#view-messages.active) .top-nav-right { gap:23px; margin-left:22px; }
body:has(#view-messages.active) .header-icon-btn { width:42px; height:42px; color:#c3d8e9; background:transparent; border-color:transparent; box-shadow:none; }
body:has(#view-messages.active) .header-icon-btn > svg,
body:has(#view-messages.active) .header-icon-btn .theme-icon-moon svg { width:24px; height:24px; }
body:has(#view-messages.active) .top-avatar-circle { width:42px; height:42px; font-size:15px; background:#102b4b; }

body:has(#view-messages.active) .main-content { padding:21px 27px 24px; background:#020f19; }
body:has(#view-messages.active) #view-messages { max-width:none; width:100%; }
body:has(#view-messages.active) .messages-breadcrumb { display:flex; align-items:center; gap:14px; margin:0 0 12px; color:#89b7d0; font-size:15px; line-height:19px; }
body:has(#view-messages.active) .messages-breadcrumb span:nth-child(2) { color:#68859a; }
body:has(#view-messages.active) .messages-breadcrumb strong { color:#edf3fa; font-weight:500; }
body:has(#view-messages.active) .messages-page-heading { margin:0 0 24px; }
body:has(#view-messages.active) .messages-page-heading .page-title { margin:0 0 3px; color:#f5f7fa; font:700 40px/1.16 var(--font-sans); letter-spacing:-.035em; }
body:has(#view-messages.active) .messages-page-heading .page-subtitle { color:#a7bfd4; font-size:18px; line-height:24px; }
body:has(#view-messages.active) .messages-container { height:calc(100vh - 284px); min-height:590px; grid-template-columns:minmax(340px,32.2%) minmax(0,1fr); border:1px solid #173147; border-radius:13px; background:#041321; box-shadow:none; }
body:has(#view-messages.active) .conversations-pane { min-width:0; border-right:1px solid #1a3349; background:#07182a; }
body:has(#view-messages.active) .conversations-header { height:64px; flex:none; display:flex; align-items:center; padding:0 22px; border-bottom:1px solid #1a3044; color:#f2f4f7; font:700 20px var(--font-serif); }
body:has(#view-messages.active) .conversations-list { min-height:0; overflow-y:auto; }
body:has(#view-messages.active) .conversation-item { min-height:86px; display:flex; align-items:center; gap:15px; padding:12px 19px 12px 22px; border-bottom:1px solid rgba(112,143,169,.11); background:transparent; }
body:has(#view-messages.active) .conversation-item.active { border-left:5px solid #08d5c8; padding-left:17px; background:#102b40; }
body:has(#view-messages.active) .conv-avatar { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:50%; color:#f2f7fc; font-size:16px; font-weight:700; }
body:has(#view-messages.active) .conv-avatar-microgrid { background:#086db5; }
body:has(#view-messages.active) .conv-avatar-concrete { background:#572eb2; }
body:has(#view-messages.active) .conv-avatar-medical-ai { background:#087e78; }
body:has(#view-messages.active) .conv-avatar-blockchain-nouri { background:#f18a0c; }
body:has(#view-messages.active) .conv-avatar-blockchain-voting { background:#7138e7; }
body:has(#view-messages.active) .conv-content { min-width:0; flex:1; }
body:has(#view-messages.active) .conv-top-row { gap:8px; margin-bottom:5px; }
body:has(#view-messages.active) .conv-title { max-width:none; min-width:0; flex:1; color:#f0f4f8; font-size:14px; font-weight:700; }
body:has(#view-messages.active) .conv-time { flex:none; color:#9eb4c9; font-size:12px; }
body:has(#view-messages.active) .conv-snippet { max-width:none; color:#9db4ca; font-size:12.5px; }
body:has(#view-messages.active) .conv-unread-dot { width:11px; height:11px; flex:0 0 11px; background:#08d4c5; box-shadow:none; }
body:has(#view-messages.active) .chat-pane { min-width:0; background:#020f19; }
body:has(#view-messages.active) .chat-header { min-height:86px; flex:none; padding:17px 24px; border-bottom:1px solid #1a3348; background:#071729; }
body:has(#view-messages.active) .chat-topic { margin:0 0 4px; color:#f1f4f8; font:700 20px/1.25 var(--font-serif); }
body:has(#view-messages.active) .chat-participants { color:#9fb7ce; font-size:14px; }
body:has(#view-messages.active) .chat-status-pill { padding:7px 14px; border:1px solid rgba(9,196,178,.25); color:#13e0cf; background:#04383a; font-size:13px; }
body:has(#view-messages.active) .chat-messages { min-height:0; gap:15px; padding:24px; background:#020f19; }
body:has(#view-messages.active) .chat-bubble-row { max-width:75%; }
body:has(#view-messages.active) .message-sender-tag { margin-bottom:5px; color:#91abc3; font-size:13px; }
body:has(#view-messages.active) .message-bubble { padding:12px 19px; border-radius:15px; font-size:16px; line-height:1.52; }
body:has(#view-messages.active) .chat-bubble-row.incoming .message-bubble { border:1px solid #1d3a52; border-bottom-left-radius:6px; color:#f1f5f8; background:#0a2032; box-shadow:none; }
body:has(#view-messages.active) .chat-bubble-row.outgoing .message-bubble,
body:has(#view-messages.active)[data-theme="dark"] .chat-bubble-row.outgoing .message-bubble { border-bottom-right-radius:6px; color:#002b2d; background:#08c9b8; box-shadow:none; font-weight:500; }
body:has(#view-messages.active) .chat-input-bar { min-height:85px; flex:none; gap:16px; padding:17px 25px; border-top:1px solid #1a3348; background:#071729; }
body:has(#view-messages.active) .chat-attach-btn { width:29px; height:40px; padding:4px; color:#9fc0dd; }
body:has(#view-messages.active) .chat-attach-btn svg { width:25px; height:25px; }
body:has(#view-messages.active) .chat-input { height:49px; padding:0 16px; border-color:#183349; border-radius:11px; color:#ecf2f8; background:#020f19; font-size:15px; }
body:has(#view-messages.active) .chat-input::placeholder { color:#8ea7bf; opacity:1; }
body:has(#view-messages.active) .chat-input:focus { background:#03131f; }
body:has(#view-messages.active) .chat-input-bar .btn-primary { height:49px; min-width:94px; border:0; border-radius:10px; color:#002629; background:#08cabb; font-size:15px; font-weight:700; }
@media(max-width:900px) {
  body:has(#view-messages.active) .main-content { padding:18px; }
  body:has(#view-messages.active) .messages-container { grid-template-columns:280px minmax(0,1fr); }
  body:has(#view-messages.active) .chat-bubble-row { max-width:90%; }
}
@media(max-width:680px) {
  body:has(#view-messages.active) .sidebar { width:100%; flex:0 0 auto; height:auto; padding:12px 16px; }
  body:has(#view-messages.active) .sidebar-logo { margin-bottom:12px; }
  body:has(#view-messages.active) .sidebar-nav { flex-direction:row; flex-wrap:wrap; gap:4px; margin:0; }
  body:has(#view-messages.active) .nav-item { width:auto; min-height:38px; padding:8px 10px; gap:8px; font-size:12px; }
  body:has(#view-messages.active) .sidebar-watermark { display:none; }
  body:has(#view-messages.active) .app-container { height:auto; min-height:100vh; overflow:auto; }
  body:has(#view-messages.active) .main-wrapper { height:auto; min-height:calc(100vh - 150px); }
  body:has(#view-messages.active) .messages-container { height:calc(100vh - 320px); min-height:540px; grid-template-columns:1fr; grid-template-rows:190px minmax(350px,1fr); }
  body:has(#view-messages.active) .conversations-pane { border-right:0; border-bottom:1px solid #1a3349; }
  body:has(#view-messages.active) .conversations-header { height:48px; }
  body:has(#view-messages.active) .conversation-item { min-height:66px; }
  body:has(#view-messages.active) .chat-header { min-height:76px; }
  body:has(#view-messages.active) .chat-input-bar { padding:12px; gap:8px; }
}

body:has(#view-home.active) .top-nav-left {
  flex: 1;
  min-width: 0;
}

body:has(#view-home.active) .breadcrumb-tracker {
  display: none;
}

body:has(#view-home.active) .header-search-wrap {
  width: min(546px, 100%);
}

body:has(#view-home.active) .header-search-input {
  width: 100%;
  height: 37px;
  border-radius: 8px;
  border-color: #1b2a3b;
  background: #0d1928;
  box-shadow: none;
  font-size: 11px;
}

body:has(#view-home.active) .header-search-input:focus {
  width: 100%;
  border-color: #168f88;
}

body:has(#view-home.active) .top-nav-right {
  gap: 15px;
  margin-left: 20px;
}

body:has(#view-home.active) .header-icon-btn {
  width: 34px;
  height: 34px;
  background: transparent;
  border-color: transparent;
  color: #d9e4ee;
  box-shadow: none;
}

body:has(#view-home.active) .theme-icon-sun { display: none; }
body:has(#view-home.active) .theme-icon-moon { display: flex; }
[data-theme="light"] body:has(#view-home.active) .theme-icon-sun { display: flex; }
[data-theme="light"] body:has(#view-home.active) .theme-icon-moon { display: none; }

body:has(#view-home.active) .notifications-badge {
  top: 3px;
  right: 3px;
  min-width: 7px;
  width: 7px;
  height: 7px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #14c9b5;
  font-size: 0;
}

body:has(#view-home.active) .top-nav-user {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  gap: 12px;
}

body:has(#view-home.active) .top-avatar-circle {
  width: 40px;
  height: 40px;
  background: #122136;
  border: 1px solid #1b2b40;
  font-size: 13px;
}

body:has(#view-home.active) .user-dropdown-chevron {
  color: #c4d0dc;
}

body:has(#view-home.active) .main-content {
  padding: 12px 24px 24px;
  background: #07111e;
}

body:has(#view-home.active) #view-home {
  max-width: none;
  width: 100%;
}

body:has(#view-home.active) #view-home .page-header {
  margin-bottom: 22px;
}

body:has(#view-home.active) #view-home .page-title {
  margin: 0 0 3px;
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.035em;
  color: #f4f7fb;
}

body:has(#view-home.active) #view-home .page-subtitle {
  font-size: 14px;
  color: #a5b4c6;
  line-height: 1.4;
}

body:has(#view-home.active) #view-home .home-section-group {
  margin-bottom: 28px;
}

body:has(#view-home.active) #view-home > .home-section-group:nth-of-type(1) {
  margin-bottom: 30px;
}

body:has(#view-home.active) #view-home > .home-section-group:nth-of-type(2) {
  margin-bottom: 16px;
}

body:has(#view-home.active) #view-home .quick-actions-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body:has(#view-home.active) #view-home .quick-action-card {
  height: 101px;
  padding: 15px 16px;
  border-radius: 9px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  box-shadow: none;
}

body:has(#view-home.active) #view-home .quick-action-team {
  background: #06292d;
  border-color: #0b373a;
}

body:has(#view-home.active) #view-home .quick-action-projects {
  background: #0b2035;
  border-color: #162d43;
}

body:has(#view-home.active) #view-home .quick-action-research {
  background: #1c1a31;
  border-color: #2b2941;
}

body:has(#view-home.active) #view-home .quick-action-icon-wrap {
  width: 60px;
  height: 60px;
  margin: 0;
  flex: 0 0 60px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 13px;
}

body:has(#view-home.active) #view-home .quick-action-team .quick-action-icon-wrap {
  background: #087b76;
  color: #9cfaf0;
}

body:has(#view-home.active) #view-home .quick-action-projects .quick-action-icon-wrap {
  background: #0870b6;
  color: #c6e9ff;
}

body:has(#view-home.active) #view-home .quick-action-research .quick-action-icon-wrap {
  background: #6a2bad;
  color: #e6baff;
}

body:has(#view-home.active) #view-home .quick-action-content {
  min-width: 0;
  flex: 1;
}

body:has(#view-home.active) #view-home .quick-action-title {
  margin: 0 0 5px;
  font: 600 13px/1.25 var(--font-sans);
  color: #e5edf5;
}

body:has(#view-home.active) #view-home .quick-action-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: #a3b2c2;
}

body:has(#view-home.active) #view-home .quick-action-arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  color: #b2e8e3;
}

body:has(#view-home.active) #view-home .section-header-row,
body:has(#view-home.active) #view-home .panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body:has(#view-home.active) #view-home .section-header-row {
  margin-bottom: 8px;
}

body:has(#view-home.active) #view-home .section-title-compact,
body:has(#view-home.active) #view-home .panel-title {
  margin: 0;
  color: #edf3f8;
  font: 600 14px/1.3 var(--font-sans);
}

body:has(#view-home.active) #view-home .section-view-all {
  padding: 0;
  border: 0;
  background: transparent;
  color: #11c7b3;
  font: 500 11px/1.2 var(--font-sans);
  cursor: pointer;
}

body:has(#view-home.active) #view-home .recent-projects-grid-dense {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body:has(#view-home.active) #view-home .project-card-dense {
  min-width: 0;
  height: 188px;
  overflow: hidden;
  border: 1px solid #1a2b3e;
  border-radius: 9px;
  background: #0c1826;
  box-shadow: none;
  cursor: pointer;
}

body:has(#view-home.active) #view-home .project-card-dense:hover {
  border-color: #168e88;
  transform: translateY(-1px);
}

body:has(#view-home.active) #view-home .project-card-thumb-wrap {
  height: 61px;
  margin: 9px 10px 0;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  background: #07111e;
}

body:has(#view-home.active) #view-home .project-card-thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body:has(#view-home.active) #view-home .project-card-badge {
  position: absolute;
  top: 7px;
  right: 4px;
  padding: 5px 8px;
  border-radius: 3px;
  color: #08202b;
  font: 500 9px/1.2 var(--font-sans);
  white-space: nowrap;
}

body:has(#view-home.active) #view-home .badge-teal-glow { background: #7be9e4; }
body:has(#view-home.active) #view-home .badge-blue-glow { background: #8cbff0; }
body:has(#view-home.active) #view-home .badge-green-glow { background: #b6f2da; }

body:has(#view-home.active) #view-home .project-card-body {
  padding: 9px 10px 8px;
}

body:has(#view-home.active) #view-home .project-card-dense-title {
  margin: 0 0 5px;
  overflow: hidden;
  color: #eef3f8;
  font: 600 12px/1.25 var(--font-sans);
  white-space: nowrap;
  text-overflow: ellipsis;
}

body:has(#view-home.active) #view-home .project-card-dense-desc {
  height: 31px;
  margin: 0 0 7px;
  overflow: hidden;
  color: #a6b4c4;
  font: 400 11px/1.45 var(--font-sans);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body:has(#view-home.active) #view-home .project-card-dense-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

body:has(#view-home.active) #view-home .project-dense-tags {
  display: flex;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
}

body:has(#view-home.active) #view-home .tag-mini {
  padding: 5px 7px;
  border-radius: 4px;
  color: #d8e5f0;
  background: #123244;
  font: 500 9px/1.2 var(--font-sans);
  white-space: nowrap;
}

body:has(#view-home.active) #view-home .tag-mini.tag-teal {
  background: #0c343d;
  color: #c9f4ed;
}

body:has(#view-home.active) #view-home .project-dense-members {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #d9e4ed;
  font-size: 11px;
  white-space: nowrap;
}

body:has(#view-home.active) #view-home .home-bottom-panels-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

body:has(#view-home.active) #view-home .dashboard-panel {
  height: 268px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #1a2b3e;
  border-radius: 9px;
  background: #0c1826;
  overflow: hidden;
}

body:has(#view-home.active) #view-home .panel-header-row {
  margin-bottom: 12px;
}

body:has(#view-home.active) #view-home .panel-title {
  font-size: 13px;
}

body:has(#view-home.active) #view-home .panel-list {
  display: flex;
  flex-direction: column;
}

body:has(#view-home.active) #view-home .activity-row-item,
body:has(#view-home.active) #view-home .deadline-row-item,
body:has(#view-home.active) #view-home .skill-row-item {
  display: flex;
  align-items: center;
  min-width: 0;
  cursor: pointer;
}

body:has(#view-home.active) #view-home .activity-row-item {
  min-height: 47px;
  gap: 13px;
}

body:has(#view-home.active) #view-home .activity-icon-badge,
body:has(#view-home.active) #view-home .skill-icon-cell {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: grid;
  place-items: center;
  border-radius: 8px;
}

body:has(#view-home.active) #view-home .act-teal,
body:has(#view-home.active) #view-home .act-cyan { background: #0b4146; color: #7cf1e4; }
body:has(#view-home.active) #view-home .act-rose { background: #402239; color: #ff83b1; }
body:has(#view-home.active) #view-home .act-purple { background: #382454; color: #d18cff; }

body:has(#view-home.active) #view-home .activity-text-col {
  min-width: 0;
  flex: 1;
}

body:has(#view-home.active) #view-home .activity-item-title {
  overflow: hidden;
  color: #d7e1eb;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body:has(#view-home.active) #view-home .activity-item-time {
  color: #9aaabc;
  font-size: 10px;
  white-space: nowrap;
}

body:has(#view-home.active) #view-home .deadline-row-item {
  min-height: 51px;
  gap: 12px;
}

body:has(#view-home.active) #view-home .deadline-date-box {
  width: 45px;
  height: 42px;
  flex: 0 0 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #15263a;
  color: #eef5fb;
}

body:has(#view-home.active) #view-home .deadline-date-month {
  font-size: 8px;
  line-height: 1.1;
}

body:has(#view-home.active) #view-home .deadline-date-day {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
}

body:has(#view-home.active) #view-home .deadline-info-col {
  min-width: 0;
}

body:has(#view-home.active) #view-home .deadline-task-name,
body:has(#view-home.active) #view-home .deadline-project-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body:has(#view-home.active) #view-home .deadline-task-name {
  color: #e3ebf2;
  font-size: 11px;
  line-height: 1.4;
}

body:has(#view-home.active) #view-home .deadline-project-name {
  color: #9eafc0;
  font-size: 10px;
  line-height: 1.4;
}

body:has(#view-home.active) #view-home .skill-row-item {
  min-height: 43px;
  gap: 10px;
}

body:has(#view-home.active) #view-home .skill-icon-cell {
  background: #15263a;
  color: #67d5ce;
}

body:has(#view-home.active) #view-home .skill-name-cell {
  width: 105px;
  flex: 0 0 105px;
  overflow: hidden;
  color: #d5e0ea;
  font-size: 10.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body:has(#view-home.active) #view-home .skill-progress-wrap {
  height: 5px;
  min-width: 20px;
  flex: 1;
  overflow: hidden;
  border-radius: 99px;
  background: #1b2b3d;
}

body:has(#view-home.active) #view-home .skill-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: #12b9aa;
}

body:has(#view-home.active) #view-home .skill-count-cell {
  width: 53px;
  flex: 0 0 53px;
  color: #9cabbc;
  font-size: 9px;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  body:has(#view-home.active) #view-home .recent-projects-grid-dense {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:has(#view-home.active) #view-home .home-bottom-panels-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body:has(#view-home.active) .header-search-wrap {
    width: min(400px, 100%);
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: auto;
    padding: 12px 16px;
  }
  .sidebar-logo { margin-bottom: 12px; }
  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }
  .nav-item {
    width: auto;
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .sidebar-watermark { display: none; }
  body:has(#view-home.active) .top-navbar {
    height: 60px;
    padding: 0 12px;
  }
  body:has(#view-home.active) .top-nav-right { gap: 4px; margin-left: 8px; }
  body:has(#view-home.active) .top-nav-user { display: none; }
  body:has(#view-home.active) .main-content { padding: 16px 14px; }
  body:has(#view-home.active) #view-home .quick-actions-grid,
  body:has(#view-home.active) #view-home .recent-projects-grid-dense,
  body:has(#view-home.active) #view-home .home-bottom-panels-grid {
    grid-template-columns: 1fr;
  }
  body:has(#view-home.active) #view-home .quick-action-card { height: auto; min-height: 86px; }
  body:has(#view-home.active) #view-home .dashboard-panel { height: auto; min-height: 220px; }
}

/* Final shared sizing pass: keep all non-sidebar UI aligned to the Home reference. */
body:has(#view-home.active) .top-navbar,
body:has(#view-profile.active) .top-navbar,
body:has(#view-find-team.active) .top-navbar,
body:has(#view-projects.active) .top-navbar,
body:has(#view-project-details.active) .top-navbar,
body:has(#view-research.active) .top-navbar,
body:has(#view-archive.active) .top-navbar,
body:has(#view-messages.active) .top-navbar {
  height:68px; min-height:68px; flex:0 0 68px; padding:0 26px 0 24px;
  background:#07111e; border-bottom:0;
}
body:has(#view-home.active) .header-search-wrap,
body:has(#view-profile.active) .header-search-wrap,
body:has(#view-find-team.active) .header-search-wrap,
body:has(#view-projects.active) .header-search-wrap,
body:has(#view-project-details.active) .header-search-wrap,
body:has(#view-research.active) .header-search-wrap,
body:has(#view-archive.active) .header-search-wrap,
body:has(#view-messages.active) .header-search-wrap { width:min(546px,100%); }
body:has(#view-home.active) .header-search-input,
body:has(#view-profile.active) .header-search-input,
body:has(#view-find-team.active) .header-search-input,
body:has(#view-projects.active) .header-search-input,
body:has(#view-project-details.active) .header-search-input,
body:has(#view-research.active) .header-search-input,
body:has(#view-archive.active) .header-search-input,
body:has(#view-messages.active) .header-search-input {
  height:37px; border:1px solid #1b2a3b; border-radius:8px; padding:0 38px 0 36px;
  color:#dbe5ef; background:#0d1928; box-shadow:none; font:400 11px/1.2 var(--font-sans);
}
body:has(#view-home.active) .top-nav-right,
body:has(#view-profile.active) .top-nav-right,
body:has(#view-find-team.active) .top-nav-right,
body:has(#view-projects.active) .top-nav-right,
body:has(#view-project-details.active) .top-nav-right,
body:has(#view-research.active) .top-nav-right,
body:has(#view-archive.active) .top-nav-right,
body:has(#view-messages.active) .top-nav-right { gap:15px; margin-left:20px; }
body:has(#view-home.active) .main-content,
body:has(#view-profile.active) .main-content,
body:has(#view-find-team.active) .main-content,
body:has(#view-projects.active) .main-content,
body:has(#view-project-details.active) .main-content,
body:has(#view-research.active) .main-content,
body:has(#view-archive.active) .main-content,
body:has(#view-messages.active) .main-content {
  min-width:0; min-height:0; padding:12px 24px 24px; overflow-x:hidden; background:#07111e;
}
body:has(#view-find-team.active) #view-find-team,
body:has(#view-home.active) .view-section.active,
body:has(#view-profile.active) .view-section.active,
body:has(#view-find-team.active) .view-section.active,
body:has(#view-projects.active) .view-section.active,
body:has(#view-project-details.active) .view-section.active,
body:has(#view-research.active) .view-section.active,
body:has(#view-archive.active) .view-section.active,
body:has(#view-messages.active) .view-section.active { width:100%; max-width:none; min-width:0; margin:0; }
body:has(#view-find-team.active) #view-find-team .search-input-wrapper,
body:has(#view-find-team.active) #view-find-team .filter-dropdown,
body:has(#view-archive.active) .archive-controls .search-input-wrapper,
body:has(#view-archive.active) .archive-controls .filter-dropdown,
body:has(#view-projects.active) .projects-search,
body:has(#view-projects.active) .projects-filter,
body:has(#view-research.active) .research-local-search,
body:has(#view-research.active) .research-filter {
  height:37px; min-height:37px; border:1px solid #1b2a3b; border-radius:8px; background:#0d1928;
}
body:has(#view-home.active) .view-section.active button.btn,
body:has(#view-profile.active) .view-section.active button.btn,
body:has(#view-find-team.active) #view-find-team .student-card-btn,
body:has(#view-projects.active) .view-section.active button.btn,
body:has(#view-projects.active) .project-view-btn,
body:has(#view-project-details.active) .view-section.active button.btn,
body:has(#view-project-details.active) .project-detail-join-btn,
body:has(#view-research.active) .view-section.active button.btn,
body:has(#view-research.active) .research-details-btn,
body:has(#view-archive.active) .view-section.active button.btn,
body:has(#view-archive.active) .archive-card-footer .btn-link,
body:has(#view-messages.active) .view-section.active button.btn {
  min-height:38px; height:38px; border-radius:8px; font-size:12.5px;
}
@media(min-width:1025px) {
  body:has(#view-home.active) .main-content,
  body:has(#view-profile.active) .main-content,
  body:has(#view-find-team.active) .main-content,
  body:has(#view-projects.active) .main-content,
  body:has(#view-project-details.active) .main-content,
  body:has(#view-research.active) .main-content,
  body:has(#view-archive.active) .main-content,
  body:has(#view-messages.active) .main-content { overflow-y:hidden; }
}
@media(min-width:681px) and (max-width:1024px) {
  body:has(#view-home.active) .top-navbar,
  body:has(#view-profile.active) .top-navbar,
  body:has(#view-find-team.active) .top-navbar,
  body:has(#view-projects.active) .top-navbar,
  body:has(#view-project-details.active) .top-navbar,
  body:has(#view-research.active) .top-navbar,
  body:has(#view-archive.active) .top-navbar,
  body:has(#view-messages.active) .top-navbar { height:60px; min-height:60px; flex-basis:60px; padding:0 18px; }
  body:has(#view-home.active) .header-search-wrap,
  body:has(#view-profile.active) .header-search-wrap,
  body:has(#view-find-team.active) .header-search-wrap,
  body:has(#view-projects.active) .header-search-wrap,
  body:has(#view-project-details.active) .header-search-wrap,
  body:has(#view-research.active) .header-search-wrap,
  body:has(#view-archive.active) .header-search-wrap,
  body:has(#view-messages.active) .header-search-wrap { width:min(400px,100%); }
  body:has(#view-home.active) .main-content,
  body:has(#view-profile.active) .main-content,
  body:has(#view-find-team.active) .main-content,
  body:has(#view-projects.active) .main-content,
  body:has(#view-project-details.active) .main-content,
  body:has(#view-research.active) .main-content,
  body:has(#view-archive.active) .main-content,
  body:has(#view-messages.active) .main-content { padding:18px 24px; }
}

/* Match research and archive cards to the Projects page tile proportions. */
body:has(#view-research.active) .research-opportunity-card,
body:has(#view-archive.active) .archive-card {
  height:295px;
  min-width:0;
  padding:8px 9px 9px;
  border:1px solid #1b2d3f;
  border-radius:10px;
  background:#0b1927;
  box-shadow:none;
  overflow:hidden;
}
body:has(#view-research.active) .research-opportunity-banner,
body:has(#view-archive.active) .archive-banner {
  width:100%;
  height:61px;
  flex:none;
  border-radius:5px;
  object-fit:cover;
}
body:has(#view-research.active) .research-opportunity-banner img { object-fit:cover; }
body:has(#view-research.active) .research-opportunity-card h2 {
  min-height:34px;
  margin:8px 3px 3px;
  font-size:13px;
  line-height:17px;
}
body:has(#view-research.active) .research-field-tag,
body:has(#view-research.active) .research-seats-tag { bottom:5px; padding:4px 9px; border-radius:5px; font-size:10px; line-height:14px; }
body:has(#view-research.active) .research-faculty-line {
  min-height:29px;
  gap:1px;
  margin:0 3px 5px;
  font-size:10.5px;
  line-height:14px;
}
body:has(#view-research.active) .research-opportunity-card > p {
  max-height:60px;
  margin:0 3px 7px;
  font-size:11px;
  line-height:15px;
}
body:has(#view-research.active) .research-details-btn {
  height:38px;
  min-height:38px;
  margin: auto 0 0;
  border-radius:6px;
  font-size:12px;
}

/* Restore the approved Home shell at narrow widths; keep the sidebar vertical. */
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .app-container {
  width:100vw; height:100vh; min-height:0; flex-direction:row; overflow:hidden;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .sidebar {
  position:relative; flex:0 0 var(--sidebar-width); width:var(--sidebar-width); min-width:var(--sidebar-width); height:100vh;
  padding:18px 15px 0; border-bottom:0; border-right:1px solid var(--sidebar-border); overflow:hidden; background:var(--sidebar-bg);
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .sidebar-logo { gap:14px; margin:0 0 51px; padding:0 9px; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .logo-badge-container { width:54px; height:54px; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .logo-title { font-size:14px; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .logo-subtitle { font-size:11px; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .sidebar-nav { display:flex; flex:1; flex-direction:column; flex-wrap:nowrap; gap:10px; margin:0; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .nav-item { width:100%; height:auto; min-height:50px; padding:11px 13px; gap:15px; font-size:13.5px; line-height:1.45; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .nav-icon { width:21px; height:21px; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .nav-item.active { color:#20c7b7; background:rgba(10,166,153,.16); }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .nav-item.active::before { top:0; bottom:0; left:0; width:5px; border-radius:0 4px 4px 0; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .nav-item.active .nav-icon { color:#2dd4bf; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .main-wrapper { flex:1 1 auto; width:auto; min-width:0; height:100vh; min-height:0; }
html body:has(#view-messages.active) .sidebar { width:var(--sidebar-width); flex-basis:var(--sidebar-width); min-width:var(--sidebar-width); }
html body:has(#view-messages.active) .sidebar-logo { margin-bottom:51px; }
html body:has(#view-messages.active) .sidebar-nav { gap:10px; margin:0; }
html body:has(#view-messages.active) .nav-item { min-height:50px; padding:11px 13px; gap:15px; font-size:13.5px; line-height:1.45; }
html body:has(#view-messages.active) .nav-icon { width:21px; height:21px; }
html body:has(#view-messages.active) .nav-item.active { color:#20c7b7; background:rgba(10,166,153,.16); }
html body:has(#view-messages.active) .nav-item.active::before { left:0; top:0; bottom:0; width:5px; border-radius:0 4px 4px 0; background:#14b8a6; }
html body:has(#view-messages.active) .nav-item.active .nav-icon { color:#2dd4bf; }
html body:has(#view-messages.active) .nav-item[data-view="messages"] { height:auto; min-height:50px; padding:11px 13px; }
html body:has(#view-messages.active) .nav-item[data-view="messages"] .nav-badge { top:50%; right:13px; transform:translateY(-50%); width:20px; min-width:20px; height:20px; margin:0; padding:0; color:#fff; font-size:10px; line-height:1; }

/* The Home reference supplies shared header dimensions at every desktop view. */
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .top-navbar { height:68px; min-height:68px; flex:0 0 68px; padding:0 26px 0 24px; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-search-wrap { width:min(546px,100%); flex:0 1 546px; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-search-input { width:100%; height:37px; border-radius:8px; padding:0 38px 0 36px; font:400 11px/1.2 var(--font-sans); }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-search-input:focus { width:100%; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-search-icon { left:12px; width:15px; height:15px; }
html body.rtl:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-search-icon { left:auto; right:12px; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .top-nav-right { gap:15px; margin-left:20px; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-icon-btn { width:34px; height:34px; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-icon-btn > svg,
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .theme-icon-moon svg { width:16px; height:16px; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .top-avatar-circle { width:40px; height:40px; font-size:13px; }

@media (max-width:1024px) {
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .top-navbar { height:60px; min-height:60px; flex-basis:60px; padding:0 18px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-search-wrap { width:min(400px,100%); flex-basis:400px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .top-nav-right { gap:9px; margin-left:10px; }
}
@media (max-width:768px) {
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .top-navbar { height:56px; min-height:56px; flex-basis:56px; padding:0 12px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-search-wrap { width:min(100%,400px); flex-basis:400px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-search-input { height:36px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .top-nav-right { gap:5px; margin-left:6px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-icon-btn { width:30px; height:30px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-icon-btn > svg,
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .theme-icon-moon svg { width:16px; height:16px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .top-nav-user { display:inline-flex; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .top-avatar-circle { width:32px; height:32px; }
  html body:has(#view-messages.active) .sidebar-logo { margin-bottom:36px; }
  html body:has(#view-messages.active) .messages-container { height:auto; min-height:620px; grid-template-columns:1fr; grid-template-rows:200px minmax(420px,1fr); }
  html body:has(#view-messages.active) .conversations-pane { display:flex; border-right:0; border-bottom:1px solid #1a3349; }
  html body:has(#view-messages.active) .conversations-header { height:48px; }
  html body:has(#view-messages.active) .conversation-item { min-height:66px; }
  html body:has(#view-messages.active) .chat-header { min-height:68px; }
  html body:has(#view-messages.active) .chat-input-bar { padding:12px; gap:8px; }
}

@media (min-width:769px) {
  html body:has(#view-messages.active) .messages-container { height:min(calc(100vh - 190px),740px); }
}
@media (min-width:1025px) {
  html body:has(#view-messages.active) .chat-messages { overflow-y:hidden; }
}
@media (min-width:769px) and (max-width:1024px) {
  html body:has(#view-messages.active) .chat-messages { overflow-y:auto; }
}

/* Compact archive cards, keeping the original grid and content intact. */
html body:has(#view-archive.active) .archive-grid { row-gap:10px; }
html body:has(#view-archive.active) .archive-card { height:276px; padding:7px 8px 7px; }
html body:has(#view-archive.active) .archive-banner { height:52px; }
html body:has(#view-archive.active) .archive-top-meta { height:22px; margin:5px 3px 2px; }
html body:has(#view-archive.active) .archive-title { margin:0 3px 2px; font-size:14.5px; line-height:17px; }
html body:has(#view-archive.active) .archive-dept { margin:0 3px 4px; font-size:12px; line-height:15px; }
html body:has(#view-archive.active) .archive-skills-row { gap:4px 6px; margin:0 3px; }
html body:has(#view-archive.active) .archive-skills-row .tag { padding:4px 9px; font-size:10.5px; line-height:14px; }
html body:has(#view-archive.active) .archive-card-footer { min-height:34px; padding:6px 3px 0; }
html body:has(#view-archive.active) .archive-card-footer .members-count { gap:6px; font-size:12px; }
html body:has(#view-archive.active) .archive-card-footer .members-count svg { width:18px; height:18px; }
html body:has(#view-archive.active) .archive-card-footer .btn-link { height:32px; min-height:32px; font-size:12px; }

/* Messages-only balance pass: fixed badge geometry and compact conversation UI. */
body:has(#view-messages.active) .nav-item[data-view="messages"] {
  width:100%;
  height:44px;
  min-height:44px;
  box-sizing:border-box;
  padding:10px 12px 10px 32px;
  transition:background-color .18s ease,color .18s ease;
}
body:has(#view-messages.active) .nav-item[data-view="messages"] .nav-badge {
  position:absolute;
  top:50%;
  right:16px;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  min-width:26px;
  height:26px;
  margin:0;
  padding:0;
  border-radius:50%;
  color:#fff;
  background:#11cabb;
  font-size:12px;
  font-weight:700;
  line-height:1;
}
body:has(#view-messages.active) .messages-breadcrumb { margin-bottom:8px; font-size:13px; line-height:17px; }
body:has(#view-messages.active) .messages-page-heading { margin-bottom:17px; }
body:has(#view-messages.active) .messages-page-heading .page-title { font-size:32px; line-height:1.15; letter-spacing:-.025em; }
body:has(#view-messages.active) .messages-page-heading .page-subtitle { font-size:15px; line-height:21px; }
body:has(#view-messages.active) .messages-container {
  height:min(calc(100vh - 226px),740px);
  min-height:0;
  grid-template-columns:minmax(320px,35%) minmax(0,1fr);
  border-radius:11px;
}
body:has(#view-messages.active) .conversations-header {
  height:58px;
  padding:0 18px;
  font:600 17px/1.25 var(--font-sans);
}
body:has(#view-messages.active) .conversation-item {
  min-height:78px;
  gap:12px;
  padding:10px 15px 10px 17px;
}
body:has(#view-messages.active) .conversation-item.active { padding-left:12px; }
body:has(#view-messages.active) .conv-avatar { width:44px; height:44px; flex-basis:44px; font-size:15px; }
body:has(#view-messages.active) .conv-title { font-size:13px; }
body:has(#view-messages.active) .conv-time { font-size:11px; }
body:has(#view-messages.active) .conv-snippet { font-size:11.5px; }
body:has(#view-messages.active) .chat-header { min-height:72px; padding:13px 20px; }
body:has(#view-messages.active) .chat-topic { font:600 18px/1.25 var(--font-sans); }
body:has(#view-messages.active) .chat-participants { font-size:13px; }
body:has(#view-messages.active) .chat-status-pill { padding:6px 12px; font-size:12px; }
body:has(#view-messages.active) .chat-messages { gap:12px; padding:18px 20px; }
body:has(#view-messages.active) .chat-bubble-row { max-width:78%; }
body:has(#view-messages.active) .message-sender-tag { font-size:12px; }
body:has(#view-messages.active) .message-bubble { padding:10px 16px; font-size:14px; line-height:1.45; }
body:has(#view-messages.active) .chat-input-bar { min-height:68px; gap:12px; padding:12px 18px; }
body:has(#view-messages.active) .chat-input { height:40px; font-size:13px; }
body:has(#view-messages.active) .chat-input-bar .btn-primary { height:40px; min-height:40px; min-width:82px; font-size:13px; }
@media(max-width:680px) {
  body:has(#view-messages.active) .nav-item[data-view="messages"] { height:auto; min-height:38px; padding-right:44px; }
  body:has(#view-messages.active) .nav-item[data-view="messages"] .nav-badge { right:7px; width:22px; min-width:22px; height:22px; }
  body:has(#view-messages.active) .messages-container { height:auto; min-height:540px; grid-template-columns:1fr; }
}
body:has(#view-archive.active) .archive-banner { display:block; }
body:has(#view-archive.active) .archive-top-meta { height:24px; margin:8px 3px 4px; }
body:has(#view-archive.active) .archive-top-meta .ay-badge { font-size:12px; }
body:has(#view-archive.active) .archive-top-meta .type-pill { padding:4px 10px; font-size:10.5px; line-height:14px; }
body:has(#view-archive.active) .archive-title { margin:0 3px 3px; font-size:15px; line-height:18px; }
body:has(#view-archive.active) .archive-dept { margin:0 3px 7px; font-size:12px; line-height:16px; }
body:has(#view-archive.active) .archive-skills-row { gap:5px 7px; margin:0 3px; }
body:has(#view-archive.active) .archive-skills-row .tag { padding:5px 10px; border-radius:5px; font-size:10.5px; line-height:14px; }
body:has(#view-archive.active) .archive-card-footer { min-height:38px; padding:8px 3px 0; }
body:has(#view-archive.active) .archive-card-footer .members-count { gap:7px; font-size:12px; }
body:has(#view-archive.active) .archive-card-footer .members-count svg { width:18px; height:18px; }
body:has(#view-archive.active) .archive-card-footer .btn-link { min-height:38px; height:38px; font-size:12.5px; }
body:has(#view-archive.active) .archive-page-header .page-title { font-size:30px; line-height:1.15; }

/* Keep the crescent theme icon consistent on the Post a Project route. */
body:has(#view-post-project.active) .theme-icon-sun { display:none; }
body:has(#view-post-project.active) .theme-icon-moon { display:flex; }
body:has(#view-post-project.active) .theme-icon-moon svg { width:24px; height:24px; }

/* Keep the Home crescent visible on the other page theme controls. */
body:has(#view-profile.active) .theme-icon-sun,
body:has(#view-find-team.active) .theme-icon-sun,
body:has(#view-projects.active) .theme-icon-sun,
body:has(#view-project-details.active) .theme-icon-sun,
body:has(#view-research.active) .theme-icon-sun,
body:has(#view-archive.active) .theme-icon-sun,
body:has(#view-messages.active) .theme-icon-sun { display:none; }
body:has(#view-profile.active) .theme-icon-moon,
body:has(#view-find-team.active) .theme-icon-moon,
body:has(#view-projects.active) .theme-icon-moon,
body:has(#view-project-details.active) .theme-icon-moon,
body:has(#view-research.active) .theme-icon-moon,
body:has(#view-archive.active) .theme-icon-moon,
body:has(#view-messages.active) .theme-icon-moon { display:flex; }
body:has(#view-profile.active) .theme-icon-moon svg,
body:has(#view-find-team.active) .theme-icon-moon svg,
body:has(#view-projects.active) .theme-icon-moon svg,
body:has(#view-project-details.active) .theme-icon-moon svg,
body:has(#view-research.active) .theme-icon-moon svg,
body:has(#view-archive.active) .theme-icon-moon svg,
body:has(#view-messages.active) .theme-icon-moon svg { width:16px; height:16px; }

/* Slightly tighten the archive cards while preserving the 3-column grid. */
body:has(#view-archive.active) .archive-grid { row-gap:11px; }
body:has(#view-archive.active) .archive-card { height:285px; padding:7px 8px 8px; }
body:has(#view-archive.active) .archive-banner { height:56px; }
body:has(#view-archive.active) .archive-top-meta { margin-top:6px; margin-bottom:3px; }
body:has(#view-archive.active) .archive-title { margin-bottom:2px; }
body:has(#view-archive.active) .archive-dept { margin-bottom:6px; }
body:has(#view-archive.active) .archive-skills-row { gap:4px 6px; }

/* Compact the Find a Team profiles without changing their three-column grid. */
body:has(#view-find-team.active) #view-find-team .team-grid {
  grid-auto-rows:230px;
  row-gap:14px;
}
body:has(#view-find-team.active) #view-find-team .student-card {
  height:230px;
  padding:15px 16px 12px;
}
body:has(#view-find-team.active) #view-find-team .student-card-top { gap:14px; margin-bottom:10px; }
body:has(#view-find-team.active) #view-find-team .avatar-circle { width:48px; height:48px; font-size:18px; }
body:has(#view-find-team.active) #view-find-team .student-section-label { margin-bottom:3px; }
body:has(#view-find-team.active) #view-find-team .student-card > div:nth-of-type(3) { margin-top:6px; }
body:has(#view-find-team.active) #view-find-team .student-card .tags-row { gap:6px; min-height:24px; }
body:has(#view-find-team.active) #view-find-team .student-card .tag { padding:5px 10px; }
body:has(#view-find-team.active) #view-find-team .student-card-btn {
  height:34px;
  min-height:34px;
  margin-top:auto;
  font-size:12px;
}

/* Global header dimensions now follow the Messages reference on every view. */
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-archive.active, #view-messages.active, #view-research-details.active) .top-navbar {
  height:76px;
  min-height:76px;
  flex:0 0 76px;
  padding:0 24px 0 17px;
  align-items:center;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-archive.active, #view-messages.active, #view-research-details.active) .top-nav-left {
  min-width:0;
  flex:1 1 auto;
  align-items:center;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-archive.active, #view-messages.active, #view-research-details.active) .header-search-wrap {
  width:min(663px,100%);
  min-width:0;
  flex:0 1 663px;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-archive.active, #view-messages.active, #view-research-details.active) .header-search-input {
  width:100%;
  height:48px;
  border:1px solid #173147;
  border-radius:11px;
  padding:0 50px;
  font:400 13.5px/1.2 var(--font-sans);
  box-shadow:none;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-archive.active, #view-messages.active, #view-research-details.active) .header-search-input:focus {
  width:100%;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-archive.active, #view-messages.active, #view-research-details.active) .header-search-icon {
  left:18px;
  width:20px;
  height:20px;
}
html body.rtl:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-archive.active, #view-messages.active, #view-research-details.active) .header-search-icon {
  left:auto;
  right:18px;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-archive.active, #view-messages.active, #view-research-details.active) .top-nav-right {
  align-items:center;
  flex:0 0 auto;
  gap:23px;
  margin-left:22px;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-archive.active, #view-messages.active, #view-research-details.active) .header-icon-btn {
  width:42px;
  height:42px;
  padding:0;
  border:0;
  color:#c3d8e9;
  background:transparent;
  box-shadow:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-archive.active, #view-messages.active, #view-research-details.active) .header-icon-btn > svg,
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-archive.active, #view-messages.active, #view-research-details.active) .theme-icon-moon svg {
  width:24px;
  height:24px;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-archive.active, #view-messages.active, #view-research-details.active) .top-nav-user {
  gap:12px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-archive.active, #view-messages.active, #view-research-details.active) .top-avatar-circle {
  width:42px;
  height:42px;
  border:1px solid #1b2b40;
  background:#102b4b;
  font-size:14px;
}

html body:has(#view-research-details.active) .breadcrumb-tracker { display:none; }

/* Messages page only: use the available desktop height for the two-panel view. */
html body:has(#view-messages.active) .main-content { padding:16px 27px 24px; }
html body:has(#view-messages.active) .messages-breadcrumb { display:none; }
html body:has(#view-messages.active) .messages-page-heading { margin:0 0 14px; }
html body:has(#view-messages.active) .messages-page-heading .page-title { font-size:32px; line-height:1.15; }
html body:has(#view-messages.active) .messages-page-heading .page-subtitle { font-size:15px; line-height:21px; }
html body:has(#view-messages.active) .messages-container {
  width:100%;
  height:min(calc(100vh - 205px),780px);
  min-height:0;
  grid-template-columns:minmax(320px,36%) minmax(0,1fr);
}
html body:has(#view-messages.active) .conversations-header { height:62px; font-size:17px; }
html body:has(#view-messages.active) .conversation-item { min-height:82px; }
html body:has(#view-messages.active) .chat-header { min-height:76px; }
html body:has(#view-messages.active) .chat-messages { gap:14px; }
html body:has(#view-messages.active) .chat-input-bar { min-height:72px; }

@media (min-width:681px) and (max-width:1024px) {
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .top-navbar {
    height:64px; min-height:64px; flex-basis:64px; padding:0 18px;
  }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-search-wrap { width:min(440px,100%); flex-basis:440px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-search-input { height:44px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .top-nav-right { gap:14px; margin-left:14px; }
  html body:has(#view-messages.active) .main-content { padding:14px 22px 20px; }
  html body:has(#view-messages.active) .messages-container { height:min(calc(100vh - 190px),740px); grid-template-columns:minmax(285px,36%) minmax(0,1fr); }
}
@media (max-width:680px) {
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .top-navbar {
    height:60px; min-height:60px; flex-basis:60px; padding:0 12px;
  }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-search-wrap { width:min(360px,100%); flex-basis:360px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-search-input { height:40px; padding:0 42px; font-size:12px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-search-icon { left:12px; width:18px; height:18px; }
  html body.rtl:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-search-icon { left:auto; right:12px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .top-nav-right { gap:8px; margin-left:8px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-icon-btn { width:36px; height:36px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .header-icon-btn > svg,
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .theme-icon-moon svg { width:21px; height:21px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active) .top-avatar-circle { width:36px; height:36px; }
  html body:has(#view-messages.active) .main-content { padding:14px; }
  html body:has(#view-messages.active) .messages-container { height:auto; min-height:620px; grid-template-columns:1fr; }
}

/* Projects card sizing matching the approved desktop reference. */
html body:has(#view-projects.active) .projects-grid {
  row-gap:12px;
  column-gap:16px;
}
html body:has(#view-projects.active) .project-tile {
  height:268px;
  padding:6px 7px 7px;
}
html body:has(#view-projects.active) .project-banner { height:48px; }
html body:has(#view-projects.active) .project-tile h2 {
  margin:6px 3px 2px;
}
html body:has(#view-projects.active) .project-description {
  margin:0 3px 4px;
}
html body:has(#view-projects.active) .project-tags {
  min-height:22px;
  gap:6px;
  margin-bottom:4px;
}
html body:has(#view-projects.active) .project-tags span {
  padding:3px 8px;
}
html body:has(#view-projects.active) .project-card-meta {
  height:26px;
  margin: auto 2px 5px;
}
html body:has(#view-projects.active) .project-view-btn {
  height:32px;
  min-height:32px;
}

/* Tighten Research Opportunity cards while keeping their content and grid intact. */
html body:has(#view-research.active) .research-card-grid {
  row-gap:12px;
  column-gap:14px;
}
html body:has(#view-research.active) .research-opportunity-card {
  height:274px;
  padding:6px 8px 8px;
}
html body:has(#view-research.active) .research-opportunity-banner {
  height:67px;
}
html body:has(#view-research.active) .research-opportunity-card h2 {
  min-height:34px;
  margin:6px 3px 2px;
}
html body:has(#view-research.active) .research-faculty-line {
  min-height:32px;
  margin:0 3px 4px;
}
html body:has(#view-research.active) .research-opportunity-card > p {
  max-height:60px;
  min-height:60px;
  margin:0 3px 6px;
  line-height:14.5px;
}
html body:has(#view-research.active) .research-details-btn {
  height:38px;
  min-height:38px;
  margin:0 3px;
}

/* Tighten the archive card footer spacing while keeping its three-column grid. */
html body:has(#view-archive.active) .archive-card {
  height:265px;
  padding:7px 8px 8px;
}
html body:has(#view-archive.active) .archive-card-footer {
  padding-top:6px;
}

/* Keep listing cards and their bottoms aligned row-by-row on all listing pages. */
html body:has(#view-projects.active) .projects-grid,
html body:has(#view-research.active) .research-card-grid,
html body:has(#view-archive.active) .archive-grid {
  align-items:stretch;
  grid-auto-rows:1fr;
}
html body:has(#view-projects.active) .project-tile,
html body:has(#view-research.active) .research-opportunity-card,
html body:has(#view-archive.active) .archive-card {
  align-self:stretch;
  box-sizing:border-box;
}

/* Clear typography and compact-height adjustment for archive cards only. */
html body:has(#view-archive.active) .archive-card {
  height:247px;
}
html body:has(#view-archive.active) .archive-title {
  font-size:17px;
  line-height:20px;
}
html body:has(#view-archive.active) .archive-dept {
  font-size:13px;
}
html body:has(#view-archive.active) .archive-skills-row .tag {
  font-size:11.5px;
}
html body:has(#view-archive.active) .archive-card-footer .members-count {
  font-size:13px;
}
html body:has(#view-archive.active) .archive-card-footer .btn-link {
  font-size:13.5px;
}

/* Shared breathing room after the final listing grid row. */
:root { --listing-grid-bottom-space:28px; }
html body:has(#view-projects.active) .main-content,
html body:has(#view-research.active) .main-content,
html body:has(#view-archive.active) .main-content,
html body:has(#view-find-team.active) .main-content {
  padding-bottom:var(--listing-grid-bottom-space);
}

/* Fill the listing viewport so the shared bottom padding is the visible grid gap. */
html body:has(#view-projects.active) #view-projects,
html body:has(#view-research.active) #view-research,
html body:has(#view-archive.active) #view-archive,
html body:has(#view-find-team.active) #view-find-team {
  display:flex;
  flex:1 0 auto;
  flex-direction:column;
}
html body:has(#view-projects.active) .projects-grid,
html body:has(#view-research.active) .research-card-grid,
html body:has(#view-archive.active) .archive-grid,
html body:has(#view-find-team.active) .team-grid {
  margin-top:auto;
}

/* Keep Find a Team content in natural flow with fixed, intentional grid gaps. */
html body:has(#view-find-team.active) #view-find-team {
  flex:0 0 auto;
}
html body:has(#view-find-team.active) #view-find-team .filter-search-bar {
  margin-bottom:0;
}
html body:has(#view-find-team.active) #view-find-team .team-grid {
  margin-top:30px;
  grid-auto-rows:246px;
  row-gap:18px;
}
html body:has(#view-find-team.active) #view-find-team .student-card {
  height:246px;
}

/* Match the Projects reference grid position and exact desktop row proportions. */
html body:has(#view-projects.active) .projects-search,
html body:has(#view-projects.active) .projects-filter {
  height:42px;
  min-height:42px;
}
html body:has(#view-projects.active) .projects-grid {
  margin-top:0;
  grid-auto-rows:268px;
}
@media(min-width:1051px) {
  html body:has(#view-projects.active) .projects-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:268px 268px;
    row-gap:12px;
  }
  html body:has(#view-projects.active) .project-tile {
    height:100%;
  }
}

/* Balance the Previous Projects grid within the available page height. */
html body:has(#view-archive.active) .archive-grid {
  margin-top:20px;
}
html body:has(#view-archive.active) .archive-card {
  height:257px;
}

/* Research opportunity detail page, using the shared Campus Hub shell. */
html body:has(#view-research-details.active) .main-content {
  padding:18px 26px 28px;
}
html body:has(#view-research-details.active) #view-research-details {
  width:100%;
  max-width:none;
}
.research-detail-crumb-row {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:38px;
  margin-bottom:8px;
}
.research-detail-back {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #10263a;
  border-radius:50%;
  color:#c3d5e9;
  background:#0d2032;
  cursor:pointer;
}
.research-detail-back svg {
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.research-detail-breadcrumb {
  display:flex;
  align-items:center;
  gap:13px;
  color:#e7eef7;
  font-size:13px;
}
.research-detail-breadcrumb a {
  color:#a9bacd;
  cursor:pointer;
}
.research-detail-breadcrumb span:nth-child(2) { color:#71849a; }
.research-detail-heading { margin:0 0 10px 48px; }
.research-detail-heading h1 {
  margin:0 0 7px;
  color:#f1f5fa;
  font:700 30px/1.2 var(--font-sans);
  letter-spacing:-.03em;
}
.research-detail-heading-tags,
.research-detail-skill-tags {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.research-detail-heading-tags span {
  min-height:32px;
  display:inline-flex;
  align-items:center;
  padding:0 18px;
  border-radius:9px;
  color:#25e0d3;
  background:#073b40;
  font-size:12px;
  font-weight:600;
}
.research-detail-heading-tags span + span {
  color:#d6e3f0;
  background:#102b40;
}
.research-detail-layout {
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);
  align-items:start;
  gap:22px;
}
.research-detail-card,
.research-information-card {
  min-width:0;
  border:1px solid #102b3e;
  border-radius:11px;
  background:#071725;
}
.research-detail-card { padding:14px 16px 12px; }
.research-detail-banner {
  display:block;
  width:100%;
  height:164px;
  object-fit:cover;
  object-position:center 50%;
  border-radius:8px;
  background:#0a2030;
}
.research-detail-section { padding:15px 2px 14px; }
.research-detail-section + .research-detail-section { border-top:1px solid rgba(142,166,190,.14); }
.research-detail-section-title { display:flex; align-items:center; gap:14px; }
.research-detail-section-title svg {
  width:26px;
  height:26px;
  flex:none;
  fill:none;
  stroke:#c7d8eb;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.research-detail-section-title h2,
.research-information-card h2 {
  margin:0;
  color:#f0f5fb;
  font:700 18px/1.3 var(--font-sans);
}
.research-detail-overview p {
  margin:10px 0 0 40px;
  color:#b4c4d7;
  font-size:14px;
  line-height:1.55;
}
.research-detail-objectives ol {
  display:grid;
  gap:7px;
  margin:10px 0 0 40px;
  padding:0;
  list-style:none;
}
.research-detail-objectives li { display:flex; align-items:flex-start; gap:14px; }
.research-detail-objectives li > span {
  width:30px;
  height:30px;
  display:grid;
  flex:none;
  place-items:center;
  border-radius:50%;
  color:#eff6fd;
  background:#173b5c;
  font-size:14px;
  font-weight:700;
}
.research-detail-objectives li p {
  margin:4px 0 0;
  color:#b4c4d7;
  font-size:14px;
  line-height:1.45;
}
.research-detail-skills { padding-bottom:5px; }
.research-detail-skill-tags { margin:10px 0 0 40px; }
.research-detail-skill-tags span {
  padding:8px 15px;
  border-radius:8px;
  color:#2be2d7;
  background:#073b40;
  font-size:12px;
  font-weight:600;
}
.research-information-card {
  min-height:355px;
  display:flex;
  flex-direction:column;
  padding:20px 20px 18px;
}
.research-information-card h2 { margin:0 0 13px; }
.research-information-row {
  min-height:53px;
  display:grid;
  grid-template-columns:30px minmax(104px,1fr) auto;
  align-items:center;
  gap:12px;
  border-bottom:1px solid rgba(142,166,190,.14);
  color:#afc1d5;
  font-size:13px;
}
.research-information-row svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:#c1d4e9;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.research-information-row strong {
  color:#edf4fb;
  font-size:13px;
  font-weight:600;
  text-align:right;
}
.research-information-row strong.research-seat-value { color:#20d9cf; }
.research-apply-button {
  width:100%;
  min-height:48px;
  margin-top:auto;
  border:0;
  border-radius:8px;
  color:#05222a;
  background:#08cfc3;
  font:700 14px var(--font-sans);
  cursor:pointer;
}
.research-apply-button:hover { background:#12dfd2; }
@media (max-width:900px) {
  .research-detail-layout { grid-template-columns:minmax(0,1.4fr) minmax(255px,1fr); gap:14px; }
  .research-detail-banner { height:140px; }
  .research-information-card { padding:16px; }
}
@media (max-width:700px) {
  html body:has(#view-research-details.active) .main-content { padding:14px; }
  .research-detail-heading { margin-left:0; }
  .research-detail-heading h1 { font-size:25px; }
  .research-detail-layout { grid-template-columns:1fr; }
  .research-information-card { min-height:300px; }
}

/* Archived project record modal: scoped so other dialogs keep their existing layout. */
.modal-box.archive-record-modal {
  width: min(800px, 100%);
  max-width: 800px;
  max-height: min(92vh, 940px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.archive-record-modal .modal-header {
  flex: 0 0 auto;
  padding: 16px 22px;
}
.archive-record-modal .modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 19px;
}
.archive-record-header-icon {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: #d9e9f8;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.archive-record-modal .modal-body {
  min-height: 0;
  overflow-y: auto;
  padding: 16px 22px 18px;
  display: block;
}
.archive-record-content { display: flex; flex-direction: column; }
.archive-record-image {
  display: block;
  width: 100%;
  height: 138px;
  object-fit: cover;
  border-radius: 9px;
  margin-bottom: 12px;
}
.archive-record-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--text-secondary);
  font-size: 13px;
}
.archive-record-meta > div { display: flex; align-items: center; gap: 8px; }
.archive-record-meta strong { color: var(--text-primary); font-weight: 600; }
.archive-record-meta .archive-record-type {
  border-radius: 999px;
  background: rgba(40, 116, 169, .28);
  padding: 4px 11px;
}
.archive-record-title {
  margin: 8px 0 6px;
  color: var(--text-primary);
  font: 700 25px/1.2 var(--font-sans);
}
.archive-record-submeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--surface-border);
  font-size: 14px;
}
.archive-record-info { display: inline-flex; align-items: center; gap: 8px; }
.archive-record-info svg {
  width: 19px; height: 19px; fill: none; stroke: #b7cce1; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.archive-record-separator { color: #67829d; }
.archive-record-section { padding: 12px 0; border-bottom: 1px solid var(--surface-border); }
.archive-record-section:last-child { padding-bottom: 0; border-bottom: 0; }
.archive-record-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.archive-record-section-heading svg {
  width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: #e0edf8;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.archive-record-section-heading h4 { margin: 0; color: var(--text-primary); font: 700 16px/1.25 var(--font-sans); }
.archive-record-section p { margin: 0 0 0 34px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.archive-record-objectives ol { list-style: none; display: grid; gap: 5px; margin: 7px 0 0 34px; padding: 0; }
.archive-record-objectives li { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.35; }
.archive-record-objectives li > span {
  display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px;
  border-radius: 50%; color: #f3f8ff; background: #174c72; font-weight: 700;
}
.archive-record-objectives li p { margin: 0; }
.archive-record-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0 34px; }
.archive-record-tags .tag { padding: 7px 11px; font-size: 12px; }
.archive-record-modal .modal-footer { flex: 0 0 auto; padding: 12px 22px; }
.archive-record-download { display: inline-flex; align-items: center; gap: 8px; }
.archive-record-download svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) {
  .modal-box.archive-record-modal { max-height: 94vh; }
  .archive-record-modal .modal-header { padding: 14px 16px; }
  .archive-record-modal .modal-body { padding: 13px 16px 15px; }
  .archive-record-image { height: 112px; }
  .archive-record-title { font-size: 21px; }
  .archive-record-section p, .archive-record-objectives ol, .archive-record-tags { margin-left: 0; }
  .archive-record-modal .modal-footer { padding: 11px 16px; }
}

/* My Profile refinement: preserve the shared shell and constrain changes to this view. */
#view-profile .page-title,
#view-profile .profile-identity-name,
#view-profile .profile-card-title,
#view-profile .prev-project-name,
#view-profile .current-project-copy h4 {
  font-family: var(--font-sans);
}
#view-profile .profile-banner-card {
  display: block;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 255px;
  min-height: 255px;
  margin-bottom: 18px;
}
body:has(#view-profile.active) #view-profile {
  width: auto;
  max-width: none;
  margin: 0 12px 0 19px;
}
#view-profile .profile-hero-visual { position: relative; flex: 0 0 129px; height: 129px; min-height: 129px; overflow: hidden; }
#view-profile .profile-cover-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 53%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
#view-profile .profile-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(3, 13, 27, .94) 0%, rgba(3, 13, 27, .82) 25%, rgba(3, 13, 27, .34) 58%, rgba(3, 13, 27, .12) 100%), linear-gradient(0deg, rgba(3, 13, 27, .18), rgba(3, 13, 27, .08));
}
#view-profile .profile-hero-copy { position: absolute; z-index: 1; left: 18px; top: 50%; transform: translateY(-50%); margin: 0; }
#view-profile .profile-hero-copy .page-title { margin: 0 0 6px; }
#view-profile .profile-hero-copy .page-subtitle { margin: 0; color: #cfdae7; }
#view-profile .profile-banner-content {
  box-sizing: border-box;
  flex: 0 0 124px;
  height: 124px;
  min-height: 124px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 24px;
}
#view-profile .profile-identity { min-width: 0; }
#view-profile .profile-identity-name { margin: 0 0 5px; }
#view-profile .profile-identity-meta { margin: 0 0 8px; }
#view-profile .profile-collaboration {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  color: #22e1d6;
  background: rgba(0, 201, 190, .13);
  border: 1px solid rgba(0, 201, 190, .22);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
#view-profile .profile-collaboration svg,
#view-profile .profile-edit-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#view-profile .profile-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
}
#view-profile .profile-two-columns {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 695fr) minmax(0, 554fr);
  align-items: stretch;
  gap: 16px;
}
#view-profile .profile-column { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#view-profile .profile-left-column > .card { box-sizing: border-box; padding: 16px 18px; }
#view-profile .profile-right-column > .card { box-sizing: border-box; padding: 12px 16px; }
#view-profile .profile-left-column > .card:nth-child(1) { height: 150px; min-height: 150px; }
#view-profile .profile-left-column > .card:nth-child(2) { height: 110px; min-height: 110px; }
#view-profile .profile-left-column > .card:nth-child(3) { height: 115px; min-height: 115px; }
#view-profile .profile-right-column > .card:nth-child(1) { height: 195px; min-height: 195px; }
#view-profile .profile-right-column > .card:nth-child(2) { height: 200px; min-height: 200px; }
#view-profile .profile-card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
#view-profile .profile-card-title { margin: 0; }
#view-profile .profile-section-icon { width: 23px; height: 23px; flex: 0 0 23px; fill: none; stroke: #18d6cf; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#view-profile .profile-view-all { margin-left: auto; color: #20d8cf; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
#view-profile .profile-view-all span { margin-left: 3px; }
#view-profile .profile-view-all:hover { color: #5ef1e8; }
#view-profile .profile-section-edit { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 6px 10px; font: 600 12px var(--font-sans); line-height: 1.2; }
#view-profile .profile-section-edit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#view-profile .profile-card-text { line-height: 1.35; }
#view-profile .profile-left-column .tags-row { gap: 6px; flex-wrap: nowrap; }
#view-profile .profile-left-column .tags-row .tag { flex-shrink: 0; }
#view-profile .prev-project-item,
#view-profile .current-project-item {
  box-sizing: border-box;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  margin-bottom: 8px;
  background: var(--bg-surface-secondary);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
}
#view-profile .prev-project-item:last-child,
#view-profile .current-project-item:last-child { margin-bottom: 0; }
#view-profile .profile-project-thumb {
  width: 80px;
  height: 48px;
  flex: 0 0 80px;
  object-fit: cover;
  border-radius: 7px;
}
#view-profile .prev-project-item > div,
#view-profile .current-project-copy { min-width: 0; flex: 1; }
#view-profile .prev-project-name,
#view-profile .current-project-copy h4 {
  margin: 0 0 3px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
}
#view-profile .prev-project-role,
#view-profile .current-project-copy p { margin: 0; color: var(--text-muted); font-size: 12px; }
#view-profile .prev-project-date { white-space: nowrap; }
#view-profile .profile-project-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 5px 7px;
  color: #2ae0d5;
  background: rgba(0, 201, 190, .13);
  border: 1px solid rgba(0, 201, 190, .2);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
#view-profile .profile-project-status i { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #08d5cb; }
@media (max-width: 800px) {
  body:has(#view-profile.active) #view-profile { margin: 0; }
  #view-profile .profile-two-columns { grid-template-columns: 1fr; }
  #view-profile .profile-banner-card { height: auto; min-height: 0; }
  #view-profile .profile-banner-content { height: auto; min-height: 124px; flex-basis: auto; }
  #view-profile .profile-left-column > .card:nth-child(n),
  #view-profile .profile-right-column > .card:nth-child(n) { height: auto; min-height: 0; }
  #view-profile .profile-left-column .tags-row { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  #view-profile .profile-hero-visual { height: 128px; }
  #view-profile .profile-cover-image { height: 100%; }
  #view-profile .profile-banner-content { flex-wrap: wrap; gap: 12px; padding: 14px; }
  #view-profile .profile-edit-button { margin-left: auto; }
  #view-profile .profile-hero-copy { left: 14px; right: 14px; }
}

/* Find a Team reference layout: equal top panels and a balanced 2x2 student grid. */
html body:has(#view-find-team.active) #view-find-team .page-header { margin-bottom:14px; }
html body:has(#view-find-team.active) .team-match-top-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
  margin-bottom:14px;
}
html body:has(#view-find-team.active) .team-project-select-card,
html body:has(#view-find-team.active) .team-ai-match-card {
  box-sizing:border-box;
  min-width:0;
  height:151px;
  padding:16px 18px;
  border:1px solid #1b3348;
  border-radius:11px;
  background:linear-gradient(145deg,#0b1a29,#0b1827);
}
html body:has(#view-find-team.active) .team-project-select-card { display:flex; flex-direction:column; justify-content:space-between; }
html body:has(#view-find-team.active) .team-match-card-heading { display:flex; align-items:center; gap:14px; min-width:0; }
html body:has(#view-find-team.active) .team-match-card-heading > svg {
  width:34px;
  height:34px;
  flex:none;
  fill:none;
  stroke:#12d6d0;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
html body:has(#view-find-team.active) .team-match-card-heading h2 { margin:0 0 3px; color:#edf3fa; font:600 16px/1.25 var(--font-sans); }
html body:has(#view-find-team.active) .team-match-card-heading p { margin:0; color:#a7b9cb; font:400 12px/1.4 var(--font-sans); }
html body:has(#view-find-team.active) .team-project-select {
  width:100%;
  height:42px;
  min-height:42px;
  padding:0 13px;
  border:1px solid #29445d;
  border-radius:8px;
  color:#e2eaf3;
  background:#091827;
  font:500 13px var(--font-sans);
  color-scheme:dark;
}
html body:has(#view-find-team.active) .team-ai-match-card {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-color:#5540a8;
  background:radial-gradient(ellipse at 45% 0,rgba(102,67,193,.17),transparent 65%),linear-gradient(135deg,#10152d,#0e1b32);
}
html body:has(#view-find-team.active) .team-ai-sparkle { width:34px; flex:none; color:#b76cff; font-size:34px; line-height:1; text-align:center; text-shadow:0 0 12px rgba(170,91,255,.48); }
html body:has(#view-find-team.active) .team-ai-match-button {
  width:100%;
  height:42px;
  min-height:42px;
  border:1px solid rgba(161,174,255,.72);
  border-radius:8px;
  color:#fff;
  background:linear-gradient(100deg,#5557f2,#1768ed);
  box-shadow:0 0 15px rgba(82,96,255,.18),inset 0 1px rgba(255,255,255,.15);
  font:600 12px var(--font-sans);
  cursor:pointer;
}
html body:has(#view-find-team.active) .team-ai-match-button span { display:inline-grid; width:16px; height:16px; margin-right:8px; vertical-align:-3px; }
html body:has(#view-find-team.active) .team-ai-match-button span svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
html body:has(#view-find-team.active) .team-students-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 10px; }
html body:has(#view-find-team.active) .team-students-heading-title { display:flex; align-items:center; gap:10px; }
html body:has(#view-find-team.active) .team-students-heading-title svg { width:25px; height:25px; fill:none; stroke:#16d1cb; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
html body:has(#view-find-team.active) .team-students-heading-title h2 { margin:0; color:#edf3fa; font:600 16px/1.25 var(--font-sans); }
html body:has(#view-find-team.active) .team-students-heading p { margin:3px 0 0; color:#9aadc0; font-size:12px; line-height:16px; }
html body:has(#view-find-team.active) #view-find-team .team-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:none;
  grid-auto-rows:156px;
  gap:12px;
  margin-top:0;
  height:0;
  min-height:0;
  flex:1 1 0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#08aef2 #12283a;
  align-items:stretch;
  align-content:start;
}
html body:has(#view-find-team.active) .main-content { min-height:0; overflow:hidden; }
html body:has(#view-find-team.active) #view-find-team { display:flex; height:100%; min-height:0; flex:1 1 auto; flex-direction:column; overflow:hidden; }
html body:has(#view-find-team.active) #view-find-team .page-header,
html body:has(#view-find-team.active) #view-find-team .team-match-top-grid,
html body:has(#view-find-team.active) #view-find-team .team-students-heading { flex:none; }
html body:has(#view-find-team.active) #view-find-team .team-grid::-webkit-scrollbar { width:10px; }
html body:has(#view-find-team.active) #view-find-team .team-grid::-webkit-scrollbar-track { border-radius:8px; background:#12283a; }
html body:has(#view-find-team.active) #view-find-team .team-grid::-webkit-scrollbar-thumb { border:2px solid #12283a; border-radius:8px; background:#08aef2; }
html body:has(#view-find-team.active) #view-find-team .student-card { height:156px; min-height:0; padding:12px; border-radius:10px; }
html body:has(#view-find-team.active) #view-find-team .student-card-top { min-width:0; gap:12px; margin-bottom:5px; }
html body:has(#view-find-team.active) #view-find-team .avatar-circle { width:44px; height:44px; font-size:16px; }
html body:has(#view-find-team.active) #view-find-team .student-card-top > div:nth-child(2) { min-width:0; flex:1; }
html body:has(#view-find-team.active) #view-find-team .student-name { font-size:13px; }
html body:has(#view-find-team.active) #view-find-team .student-major { font-size:10.5px; }
html body:has(#view-find-team.active) #view-find-team .student-section-label { margin:0 0 3px; font-size:10.5px; line-height:12px; }
html body:has(#view-find-team.active) #view-find-team .student-card > div:nth-of-type(3) { margin-top:3px; }
html body:has(#view-find-team.active) #view-find-team .student-card .tags-row { min-height:22px; gap:6px; }
html body:has(#view-find-team.active) #view-find-team .student-card .tag { padding:4px 9px; font-size:9.5px; line-height:14px; }
html body:has(#view-find-team.active) #view-find-team .student-card-btn { width:auto; min-width:100px; height:34px; min-height:34px; flex:none; margin:0 0 0 auto; padding:0 12px; align-self:center; font-size:11px; }
@media(max-width:768px) {
  html body:has(#view-find-team.active) .team-match-top-grid,
  html body:has(#view-find-team.active) #view-find-team .team-grid { grid-template-columns:1fr; }
  html body:has(#view-find-team.active) .main-content { overflow-y:auto; }
  html body:has(#view-find-team.active) #view-find-team { height:auto; min-height:0; flex:0 0 auto; overflow:visible; }
  html body:has(#view-find-team.active) .team-students-heading { align-items:flex-start; }
  html body:has(#view-find-team.active) #view-find-team .team-grid { height:auto; min-height:0; max-height:none; flex:none; grid-template-rows:none; grid-auto-rows:auto; overflow:visible; }
  html body:has(#view-find-team.active) #view-find-team .student-card { height:auto; min-height:156px; }
}

/* Activated Campus AI teammate recommendations */
html body:has(#view-find-team.active) #view-find-team .team-match-sort {
  min-width:118px;
  height:36px;
  padding:0 10px;
  border:1px solid #17354b;
  border-radius:8px;
  color:#d9e6f2;
  background:#0b1b2a;
  font:500 11px var(--font-sans);
  color-scheme:dark;
}
html body:has(#view-find-team.active) #view-find-team .team-match-sort[hidden] { display:none !important; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active #studentsGrid { display:none !important; }
html body:has(#view-find-team.active) #view-find-team .team-recommendations-grid[hidden] { display:none !important; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendations-grid:not([hidden]) {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:minmax(0,1fr);
  gap:12px;
  width:100%;
  min-height:0;
  flex:1 1 0;
  overflow:visible;
  align-items:stretch;
}
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-students-heading { flex:none; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-card {
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  padding:12px;
  border:1px solid #1b3b52;
  border-radius:11px;
  color:#edf3fa;
  background:linear-gradient(150deg,#0b1b2a 0%,#071827 100%);
}
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-1 {
  border-color:rgba(166,65,255,.88);
  background:radial-gradient(ellipse at 50% 0,rgba(125,40,222,.2),transparent 66%),linear-gradient(150deg,#17112d 0%,#0b192b 100%);
  box-shadow:0 0 15px rgba(148,57,255,.2),inset 0 0 0 1px rgba(195,118,255,.1);
}
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-topline { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-bottom:8px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-card .avatar-circle { width:44px; height:44px; flex:0 0 44px; font-size:17px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-match-badge {
  display:inline-flex;
  align-items:center;
  gap:3px;
  flex:none;
  padding:5px 7px;
  border-radius:7px;
  color:#fff;
  background:#7135c5;
  font:600 10px/1.2 var(--font-sans);
  white-space:nowrap;
}
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-1 .team-match-badge { background:linear-gradient(110deg,#a51df2,#7626d2); box-shadow:0 0 11px rgba(166,40,255,.4); }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-2 .team-match-badge { background:#8954dc; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-3 .team-match-badge { background:#399be9; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-4 .team-match-badge { background:#354faa; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity { min-width:0; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity h3 { margin:0 0 2px; color:#f0f4fa; font:600 13px/1.3 var(--font-sans); }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity p { margin:0; color:#a8bbcf; font-size:10px; line-height:1.35; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity .team-recommendation-university { margin-top:3px; color:#60d8d6; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-skills { display:flex; align-content:flex-start; flex-wrap:wrap; gap:5px; margin-top:8px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-skill { padding:4px 7px; border-radius:5px; color:#dceafa; background:rgba(23,91,123,.48); font-size:9px; line-height:1.2; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-1 .team-recommendation-skill,
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-2 .team-recommendation-skill { background:rgba(92,45,153,.58); }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-actions { display:flex; gap:6px; margin-top:auto; padding-top:10px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-actions button { min-width:0; min-height:32px; flex:1 1 50%; padding:0 5px; border:1px solid #344f69; border-radius:7px; color:#e7eef8; background:transparent; font:600 9px var(--font-sans); white-space:nowrap; cursor:pointer; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-actions .team-recommendation-request { border-color:transparent; color:#fff; background:linear-gradient(110deg,#8732dc,#345fe8); }
@media (max-width:1100px) {
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendations-grid:not([hidden]) { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; flex:1 1 auto; overflow-y:auto; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-card { min-height:180px; }
}
@media (max-width:560px) {
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendations-grid:not([hidden]) { grid-template-columns:1fr; }
}

/* Final Projects-only overrides: keep page chrome fixed and scroll the project list. */
html body:has(#view-projects.active) .main-content { min-height:0; overflow:hidden; }
html body:has(#view-projects.active) #view-projects {
  display:flex;
  height:100%;
  min-height:0;
  flex:1 1 auto;
  flex-direction:column;
  overflow:hidden;
}
html body:has(#view-projects.active) #view-projects .projects-page-heading,
html body:has(#view-projects.active) #view-projects .campus-ai-section,
html body:has(#view-projects.active) #view-projects .projects-toolbar { flex:none; }
html body:has(#view-projects.active) #view-projects .projects-grid {
  height:0;
  min-height:0;
  flex:1 1 0;
  margin-top:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#08aef2 #12283a;
  align-content:start;
}
html body:has(#view-projects.active) #view-projects .projects-grid::-webkit-scrollbar { width:10px; }
html body:has(#view-projects.active) #view-projects .projects-grid::-webkit-scrollbar-track { border-radius:8px; background:#12283a; }
html body:has(#view-projects.active) #view-projects .projects-grid::-webkit-scrollbar-thumb { border:2px solid #12283a; border-radius:8px; background:#08aef2; }
html body:has(#view-projects.active #campusAiRecommendations:not([hidden])) #view-projects .projects-toolbar { display:none !important; }

/* Trim only the featured Campus AI recommendation's unused lower space. */
html body:has(#view-projects.active) #campusAiRecommendations .campus-ai-recommendation-featured { padding-bottom:5px; }
html body:has(#view-projects.active) #campusAiRecommendations .campus-ai-recommendation-featured .campus-ai-view-project { margin-top:4px; }
html body:has(#view-projects.active) #campusAiRecommendations .campus-ai-recommendation-featured .campus-ai-view-project { display:flex; width:max-content; margin-left:auto; }

/* Keep the featured CTA directly under the AI-interest reason, aligned with its text. */
html body:has(#view-projects.active) #campusAiRecommendations .campus-ai-recommendation-featured .campus-ai-featured-reasons li .campus-ai-view-project {
  display:flex;
  width:max-content;
  margin:12px 0 0;
}
html body:has(#view-projects.active) #campusAiRecommendations .campus-ai-recommendation-featured .campus-ai-featured-reasons li .campus-ai-view-project > span {
  margin:0;
  color:inherit;
  font-weight:inherit;
}

/* Reference-matched sizing for the four recommendation cards only */
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-card {
  padding:24px 24px 21px;
  border-radius:14px;
}
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-topline { gap:10px; margin-bottom:14px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-card .avatar-circle { width:90px; height:90px; flex-basis:90px; font-size:38px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-match-badge { gap:5px; padding:12px 16px; border-radius:10px; font-size:16px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity h3 { margin-bottom:4px; font-size:24px; line-height:1.25; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity p { font-size:20px; line-height:1.35; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity .team-recommendation-university { margin-top:6px; font-size:18px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-skills { gap:9px 10px; margin-top:14px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-skill { padding:10px 15px; border-radius:8px; font-size:16px; line-height:1.35; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-actions { gap:14px; padding-top:20px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-actions button { min-height:62px; padding:0 12px; border-radius:11px; font-size:16px; }
@media (max-width:1100px) {
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-card { padding:18px; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-card .avatar-circle { width:64px; height:64px; flex-basis:64px; font-size:28px; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-match-badge { padding:8px 10px; font-size:12px; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity h3 { font-size:18px; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity p { font-size:14px; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity .team-recommendation-university { font-size:13px; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-skill { padding:6px 9px; font-size:12px; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-actions { gap:8px; padding-top:12px; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-actions button { min-height:42px; font-size:12px; }
}

/* Final slight inset/scale adjustment for recommendation cards only. */
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-card {
  width:calc(100% - 6px);
  height:calc(100% - 6px);
  justify-self:center;
  align-self:center;
  padding:21px 20px 18px;
}
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-card .avatar-circle { width:72px; height:72px; flex-basis:72px; font-size:31px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-match-badge { min-height:36px; padding:7px 12px; font-size:13px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity h3 { font-size:19px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity p { font-size:16px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity .team-recommendation-university { font-size:15px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-skill { padding:7px 13px; font-size:13px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-actions { padding-top:15px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-actions button { min-height:48px; font-size:12px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-1 .team-match-badge { font-size:13px; }
@media (max-width:1100px) {
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-card { width:calc(100% - 4px); height:auto; align-self:stretch; padding:17px; }
}

/* Keep the project select box unchanged and reposition only its chevron. */
html body:has(#view-find-team.active) #view-find-team .team-project-select {
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23dce7f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
}

/* Match only the content scale and spacing inside recommendation cards. */
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-card { padding:22px 21px 19px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-topline { gap:10px; margin-bottom:13px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-card .avatar-circle { width:74px; height:74px; flex-basis:74px; font-size:32px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-match-badge { gap:4px; min-height:38px; padding:8px 13px; border-radius:9px; font-size:14px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity h3 { margin-bottom:3px; font-size:20px; line-height:1.25; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity p { font-size:17px; line-height:1.35; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity .team-recommendation-university { margin-top:5px; font-size:16px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-skills { gap:8px 9px; margin-top:12px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-skill { padding:8px 14px; border-radius:8px; font-size:14px; line-height:1.25; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-actions { gap:12px; padding-top:17px; }
html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-actions button { min-height:50px; padding:0 9px; border-radius:10px; font-size:13px; }
@media (max-width:1100px) {
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-card { padding:18px; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-card .avatar-circle { width:64px; height:64px; flex-basis:64px; font-size:28px; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-match-badge { min-height:32px; padding:7px 10px; font-size:12px; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity h3 { font-size:18px; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity p { font-size:14px; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-identity .team-recommendation-university { font-size:13px; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-skill { padding:6px 9px; font-size:12px; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-actions { gap:8px; padding-top:12px; }
  html body:has(#view-find-team.active) #view-find-team.campus-ai-active .team-recommendation-actions button { min-height:42px; font-size:12px; }
}
/* Dedicated Post a Project route. The main content scrolls as a single page. */
html body:has(#view-post-project.active) .app-container { width:100vw; height:100vh; min-height:0; display:flex; flex-direction:row; overflow:hidden; }
html body:has(#view-post-project.active) .sidebar { position:relative; flex:0 0 var(--sidebar-width); width:var(--sidebar-width); min-width:var(--sidebar-width); height:100vh; padding:18px 15px 0; border-bottom:0; border-right:1px solid var(--sidebar-border); overflow:hidden; background:var(--sidebar-bg); }
html body:has(#view-post-project.active) .sidebar-logo { gap:14px; margin:0 0 51px; padding:0 9px; }
html body:has(#view-post-project.active) .logo-badge-container { width:54px; height:54px; }
html body:has(#view-post-project.active) .logo-title { font-size:14px; }
html body:has(#view-post-project.active) .logo-subtitle { font-size:11px; }
html body:has(#view-post-project.active) .sidebar-nav { display:flex; flex:1; flex-direction:column; flex-wrap:nowrap; gap:10px; margin:0; }
html body:has(#view-post-project.active) .nav-item { width:100%; height:auto; min-height:50px; padding:11px 13px; gap:15px; font-size:13.5px; line-height:1.45; }
html body:has(#view-post-project.active) .nav-icon { width:21px; height:21px; }
html body:has(#view-post-project.active) .nav-item.active { color:#20c7b7; background:rgba(10,166,153,.16); }
html body:has(#view-post-project.active) .nav-item.active::before { top:0; bottom:0; left:0; width:5px; border-radius:0 4px 4px 0; }
html body:has(#view-post-project.active) .nav-item.active .nav-icon { color:#2dd4bf; }
html body:has(#view-post-project.active) .main-wrapper { flex:1 1 auto; width:auto; min-width:0; height:100vh; min-height:0; }
html body:has(#view-post-project.active) .top-navbar { height:68px; min-height:68px; flex:0 0 68px; padding:0 26px 0 24px; background:#07111e; border-bottom-color:transparent; }
html body:has(#view-post-project.active) .top-nav-left { flex:1; }
html body:has(#view-post-project.active) .header-search-wrap { width:min(546px,100%); flex:0 1 546px; }
html body:has(#view-post-project.active) .header-search-input { width:100%; height:37px; border-radius:8px; padding:0 38px 0 36px; font:400 11px/1.2 var(--font-sans); }
html body:has(#view-post-project.active) .header-search-input:focus { width:100%; }
html body:has(#view-post-project.active) .header-search-icon { left:12px; width:15px; height:15px; }
html body:has(#view-post-project.active) .top-nav-right { gap:15px; margin-left:20px; }
html body:has(#view-post-project.active) .header-icon-btn { width:34px; height:34px; }
html body:has(#view-post-project.active) .top-avatar-circle { width:40px; height:40px; font-size:13px; }
html body:has(#view-post-project.active) .main-content { min-width:0; min-height:0; height:calc(100vh - 68px); padding:12px 24px 30px; overflow-x:hidden; overflow-y:auto; background:#07111e; }
html body:has(#view-post-project.active) #view-post-project { width:100%; max-width:none; min-width:0; margin:0; }
html body:has(#view-post-project.active) .breadcrumb-tracker { display:none; }
html body:has(#view-post-project.active) .notifications-badge { top:3px; right:3px; width:7px; min-width:7px; height:7px; padding:0; overflow:hidden; border:0; background:#14c9b5; font-size:0; }

html body:has(#view-post-project.active) .post-project-breadcrumb { display:flex; align-items:center; gap:12px; margin:4px 0 11px; color:#f0f4f9; font-size:12px; }
html body:has(#view-post-project.active) .post-project-breadcrumb a { color:#1fe0cd; text-decoration:none; cursor:pointer; }
html body:has(#view-post-project.active) .post-project-breadcrumb span:nth-child(2) { color:#7f91a6; font-size:18px; }
html body:has(#view-post-project.active) .post-project-heading { margin:0 0 13px; }
html body:has(#view-post-project.active) .post-project-heading h1 { margin:0 0 3px; color:#f4f7fb; font-size:30px; line-height:1.2; letter-spacing:-.035em; }
html body:has(#view-post-project.active) .post-project-heading p { margin:0; color:#a8bbcf; font-size:14px; }
html body:has(#view-post-project.active) .post-project-ai-card { display:grid; grid-template-columns:minmax(260px,1.2fr) minmax(380px,1.65fr) auto; align-items:center; gap:18px; min-height:102px; margin-bottom:12px; padding:14px 18px; border:1px solid #6542e4; border-radius:11px; background:linear-gradient(105deg,rgba(36,20,95,.68),rgba(18,31,87,.75) 58%,rgba(7,74,129,.62)); box-shadow:inset 0 0 26px rgba(87,66,218,.1); }
html body:has(#view-post-project.active) .post-ai-intro { display:flex; align-items:center; gap:14px; min-width:0; }
html body:has(#view-post-project.active) .post-ai-sparkle { width:54px; height:54px; flex:0 0 54px; display:grid; place-items:center; border-radius:50%; background:rgba(119,32,224,.22); }
html body:has(#view-post-project.active) .post-ai-sparkle svg { width:33px; height:33px; fill:#c26aff; }
html body:has(#view-post-project.active) .post-ai-title-line { display:flex; align-items:center; gap:10px; }
html body:has(#view-post-project.active) .post-ai-title-line h2 { margin:0; color:#f7f5ff; font-size:18px; }
html body:has(#view-post-project.active) .post-ai-optional { padding:4px 9px; border:1px solid rgba(151,129,255,.34); border-radius:999px; color:#ded5ff; background:rgba(68,67,177,.45); font-size:10px; }
html body:has(#view-post-project.active) .post-ai-intro p { margin:4px 0 0; color:#d0d9ef; font-size:12px; line-height:1.4; }
html body:has(#view-post-project.active) .post-ai-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; }
html body:has(#view-post-project.active) .post-ai-feature { display:flex; align-items:center; gap:9px; min-height:48px; padding:0 10px; border-right:1px solid rgba(145,164,208,.14); }
html body:has(#view-post-project.active) .post-ai-feature:last-child { border-right:0; }
html body:has(#view-post-project.active) .post-ai-feature > span { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:8px; color:#c6b5ff; background:#142b6c; }
html body:has(#view-post-project.active) .post-ai-feature svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
html body:has(#view-post-project.active) .post-ai-feature p { margin:0; color:#d0daef; font-size:10px; line-height:1.45; }
html body:has(#view-post-project.active) .post-ai-generate { min-height:48px; display:flex; align-items:center; justify-content:center; gap:9px; padding:0 17px; border:1px solid rgba(187,155,255,.7); border-radius:9px; color:#fff; background:linear-gradient(105deg,#a82def,#087ff0); box-shadow:0 0 16px rgba(105,68,255,.23); font:600 12px var(--font-sans); white-space:nowrap; cursor:pointer; }
html body:has(#view-post-project.active) .post-ai-generate:hover { filter:brightness(1.1); }
html body:has(#view-post-project.active) .post-ai-generate svg { width:18px; height:18px; fill:currentColor; }

html body:has(#view-post-project.active) .post-project-form { display:flex; flex-direction:column; gap:11px; }
html body:has(#view-post-project.active) .post-form-section { min-width:0; padding:14px 17px 16px; border:1px solid #133047; border-radius:10px; background:linear-gradient(120deg,#071b2a,#061725 70%); }
html body:has(#view-post-project.active) .post-form-section-heading { display:flex; align-items:center; gap:12px; margin-bottom:13px; }
html body:has(#view-post-project.active) .post-form-section-heading > span { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:50%; color:#e9fffd; background:linear-gradient(145deg,#0e8393,#056978); font-weight:700; }
html body:has(#view-post-project.active) .post-form-section-heading h2 { margin:0; color:#f1f5fa; font-size:15px; line-height:1.25; }
html body:has(#view-post-project.active) .post-form-section-heading p { margin:3px 0 0; color:#9eb2c8; font-size:11px; }
html body:has(#view-post-project.active) .post-basics-grid { display:grid; grid-template-columns:minmax(260px,1.45fr) minmax(220px,1fr) minmax(155px,.58fr); align-items:start; gap:20px; padding:0 4px; }
html body:has(#view-post-project.active) .post-field { position:relative; min-width:0; display:flex; flex-direction:column; gap:7px; color:#e8eef5; font-size:12px; }
html body:has(#view-post-project.active) .post-field input,
html body:has(#view-post-project.active) .post-field select,
html body:has(#view-post-project.active) .post-field textarea,
html body:has(#view-post-project.active) .post-chip-entry input,
html body:has(#view-post-project.active) .post-chip-entry select { width:100%; min-width:0; height:42px; padding:0 13px; border:1px solid #21435c; border-radius:7px; outline:0; color:#e5edf6; background:#061827; font:400 12px var(--font-sans); }
html body:has(#view-post-project.active) .post-field input::placeholder,
html body:has(#view-post-project.active) .post-field textarea::placeholder,
html body:has(#view-post-project.active) .post-chip-entry input::placeholder { color:#91a8bf; opacity:1; }
html body:has(#view-post-project.active) .post-field input:focus,
html body:has(#view-post-project.active) .post-field select:focus,
html body:has(#view-post-project.active) .post-field textarea:focus,
html body:has(#view-post-project.active) .post-chip-entry input:focus,
html body:has(#view-post-project.active) .post-chip-entry select:focus { border-color:#10c9bd; box-shadow:0 0 0 2px rgba(16,201,189,.1); }
html body:has(#view-post-project.active) .post-field select,
html body:has(#view-post-project.active) .post-chip-entry select { color-scheme:dark; }
html body:has(#view-post-project.active) .post-field-counter { align-self:flex-end; margin-top:-5px; color:#849bb2; font-size:10px; }
html body:has(#view-post-project.active) .post-team-size { height:42px; display:grid; grid-template-columns:46px 1fr 46px; overflow:hidden; border:1px solid #21435c; border-radius:7px; background:#061827; }
html body:has(#view-post-project.active) .post-team-size button { border:0; color:#e7eff9; background:#102e45; font-size:19px; cursor:pointer; }
html body:has(#view-post-project.active) .post-team-size output { display:grid; place-items:center; border-right:1px solid #21435c; border-left:1px solid #21435c; color:#f4f8fc; font-size:13px; }
html body:has(#view-post-project.active) .post-description-field { gap:0; padding:0 4px; }
html body:has(#view-post-project.active) .post-description-field .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html body:has(#view-post-project.active) .post-field textarea { height:88px; min-height:88px; padding:11px 13px 23px; resize:vertical; line-height:1.5; }
html body:has(#view-post-project.active) .post-description-field .post-field-counter { position:absolute; right:13px; bottom:8px; margin:0; }
html body:has(#view-post-project.active) .post-chip-entry { display:flex; gap:0; margin:0 4px; }
html body:has(#view-post-project.active) .post-chip-entry input,
html body:has(#view-post-project.active) .post-chip-entry select { flex:1; border-radius:7px 0 0 7px; }
html body:has(#view-post-project.active) .post-chip-entry > button { min-width:88px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid #21435c; border-left:0; border-radius:0 7px 7px 0; color:#e6edf6; background:#102c43; font:500 12px var(--font-sans); cursor:pointer; }
html body:has(#view-post-project.active) .post-chip-entry > button:hover { color:#5be1d0; border-color:#168b86; }
html body:has(#view-post-project.active) .post-chip-entry > button span { font-size:17px; }
html body:has(#view-post-project.active) .post-chip-list { display:flex; flex-wrap:wrap; gap:7px; margin:9px 4px 0; }
html body:has(#view-post-project.active) .post-chip-list:empty { display:none; }
html body:has(#view-post-project.active) .post-project-chip { display:inline-flex; align-items:center; gap:9px; padding:5px 8px 5px 10px; border:1px solid rgba(23,190,174,.18); border-radius:6px; color:#76dfd1; background:#073b40; font-size:11px; }
html body:has(#view-post-project.active) .post-project-chip.post-role-chip { border-color:#263d54; color:#c5d6e8; background:#182e43; }
html body:has(#view-post-project.active) .post-project-chip button { padding:0; border:0; color:inherit; background:transparent; font-size:16px; line-height:1; cursor:pointer; }
html body:has(#view-post-project.active) .post-project-actions { display:flex; justify-content:flex-end; gap:10px; padding:1px 0 10px; }
html body:has(#view-post-project.active) .post-project-actions button { min-width:142px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:8px; font:500 12px var(--font-sans); cursor:pointer; }
html body:has(#view-post-project.active) .post-cancel-button { border:1px solid #21435c; color:#e9eef5; background:transparent; }
html body:has(#view-post-project.active) .post-publish-button { border:1px solid #08cfc1; color:#03232b; background:#08cfc1; font-weight:700 !important; }
html body:has(#view-post-project.active) .post-publish-button:hover { background:#26dfcf; }
html body:has(#view-post-project.active) .post-publish-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

@media (max-width:1100px) {
  html body:has(#view-post-project.active) .post-project-ai-card { grid-template-columns:minmax(250px,1fr) minmax(0,1.3fr); }
  html body:has(#view-post-project.active) .post-ai-generate { grid-column:2; justify-self:end; }
  html body:has(#view-post-project.active) .post-ai-features { grid-column:1 / -1; grid-row:2; }
}
@media (max-width:1024px) {
  html body:has(#view-post-project.active) .main-content { height:calc(100vh - 60px); padding:18px 24px 30px; }
}
@media (max-width:760px) {
  html body:has(#view-post-project.active) .main-content { height:calc(100vh - 56px); padding:14px 14px 24px; }
  html body:has(#view-post-project.active) .post-project-ai-card { grid-template-columns:1fr; gap:12px; }
  html body:has(#view-post-project.active) .post-ai-features { grid-column:auto; grid-row:auto; }
  html body:has(#view-post-project.active) .post-ai-generate { grid-column:auto; justify-self:stretch; }
  html body:has(#view-post-project.active) .post-basics-grid { grid-template-columns:1fr; gap:12px; }
}
@media (max-width:600px) {
  html body:has(#view-post-project.active) .post-ai-features { grid-template-columns:1fr; }
  html body:has(#view-post-project.active) .post-ai-feature { border-right:0; }
  html body:has(#view-post-project.active) .post-project-actions { flex-direction:column-reverse; }
  html body:has(#view-post-project.active) .post-project-actions button { width:100%; }
}

/* Initial Campus AI idea-entry dialog */
.campus-ai-idea-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(1, 8, 19, .76);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.campus-ai-idea-overlay[hidden] { display: none !important; }
.campus-ai-idea-dialog {
  position: relative;
  width: min(744px, 100%);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 28px 30px 24px;
  color: #f5f7ff;
  background: linear-gradient(135deg, #111a49 0%, #09152d 62%, #0b1835 100%);
  border: 1px solid rgba(111, 89, 255, .82);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(43, 118, 255, .12), 0 22px 70px rgba(0, 0, 0, .55), 0 0 34px rgba(88, 63, 255, .16);
}
.campus-ai-idea-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-right: 30px;
}
.campus-ai-idea-mark {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #7d0bdc, #4d12c7);
  box-shadow: 0 0 24px rgba(153, 47, 255, .28);
}
.campus-ai-idea-mark svg { width: 42px; height: 42px; fill: #e59cff; }
.campus-ai-idea-heading-copy { min-width: 0; }
.campus-ai-idea-title-line { display: flex; align-items: center; gap: 16px; }
.campus-ai-idea-title-line h2 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 700; }
.campus-ai-idea-title-line .post-ai-optional { white-space: nowrap; }
.campus-ai-idea-heading-copy > p { margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: #edf0ff; }
.campus-ai-idea-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #f4f5ff;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 31px;
  line-height: 1;
  cursor: pointer;
}
.campus-ai-idea-capabilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
}
.campus-ai-idea-capability {
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px 0 0;
}
.campus-ai-idea-capability + .campus-ai-idea-capability {
  padding-left: 24px;
  border-left: 1px solid rgba(93, 116, 195, .25);
}
.campus-ai-idea-capability > span {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #e2e9ff;
  background: linear-gradient(145deg, #0758c9, #073f9c);
}
.campus-ai-idea-capability svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.campus-ai-idea-capability p { margin: 0; font-size: 12px; line-height: 1.55; color: #edf0ff; }
.campus-ai-idea-divider { height: 1px; margin: 22px 0 26px; background: rgba(119, 141, 210, .34); }
.campus-ai-idea-form-copy h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.campus-ai-idea-form-copy p { margin: 7px 0 16px; color: #b9c6e8; font-size: 15px; line-height: 1.55; }
.campus-ai-idea-input-wrap { position: relative; display: block; }
.campus-ai-idea-input-wrap .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.campus-ai-idea-input-wrap textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: 14px 14px 30px;
  color: #f1f3ff;
  background: rgba(7, 18, 48, .82);
  border: 1px solid #9652ff;
  border-radius: 11px;
  outline: none;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 0 14px rgba(138, 62, 255, .12);
}
.campus-ai-idea-input-wrap textarea::placeholder { color: #aab7d4; opacity: 1; }
.campus-ai-idea-input-wrap textarea:focus { border-color: #b06aff; box-shadow: 0 0 0 2px rgba(156, 78, 255, .17); }
.campus-ai-idea-counter { position: absolute; right: 14px; bottom: 11px; color: #b9c6e8; font-size: 12px; pointer-events: none; }
.campus-ai-idea-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.campus-ai-idea-actions button { min-height: 62px; border-radius: 11px; color: #f7f7ff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.campus-ai-idea-cancel { border: 1px solid #304575; background: rgba(7, 18, 45, .52); }
.campus-ai-idea-submit { border: 1px solid transparent; background: linear-gradient(105deg, #971fe8 0%, #5147ff 53%, #06a9ed 100%); box-shadow: 0 0 18px rgba(83, 62, 255, .22); }
.campus-ai-idea-actions button:focus-visible, .campus-ai-idea-close:focus-visible { outline: 2px solid #75ddff; outline-offset: 3px; }
body.campus-ai-modal-open { overflow: hidden; }
@media (max-width: 680px) {
  .campus-ai-idea-overlay { padding: 12px; }
  .campus-ai-idea-dialog { max-height: calc(100dvh - 24px); padding: 22px 18px 18px; }
  .campus-ai-idea-header { gap: 14px; padding-right: 24px; }
  .campus-ai-idea-mark { flex-basis: 54px; width: 54px; height: 54px; }
  .campus-ai-idea-mark svg { width: 32px; height: 32px; }
  .campus-ai-idea-title-line { flex-wrap: wrap; gap: 8px; }
  .campus-ai-idea-title-line h2 { font-size: 22px; }
  .campus-ai-idea-heading-copy > p { font-size: 14px; }
  .campus-ai-idea-capabilities { gap: 10px; }
  .campus-ai-idea-capability, .campus-ai-idea-capability + .campus-ai-idea-capability { display: block; padding: 0; border: 0; }
  .campus-ai-idea-capability > span { margin-bottom: 8px; }
  .campus-ai-idea-capability p { font-size: 11px; }
}
@media (max-width: 440px) {
  .campus-ai-idea-capabilities { grid-template-columns: 1fr; gap: 12px; }
  .campus-ai-idea-capability, .campus-ai-idea-capability + .campus-ai-idea-capability { display: flex; align-items: center; gap: 12px; }
  .campus-ai-idea-capability > span { margin: 0; }
  .campus-ai-idea-divider { margin: 18px 0 20px; }
  .campus-ai-idea-actions { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .campus-ai-idea-actions button { min-height: 52px; }
}

/* Generated Campus AI proposal state */
.campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) { width: min(800px, 100%); padding: 24px 18px 12px; }
.campus-ai-proposal-state[hidden], .campus-ai-refine-panel[hidden] { display: none !important; }
.campus-ai-progress { display:flex; align-items:center; justify-content:center; gap:12px; margin:24px auto 20px; color:#f5f7ff; }
.campus-ai-progress-step { display:flex; align-items:center; gap:10px; font-size:12px; white-space:nowrap; }
.campus-ai-progress-step > span { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; background:#1674ff; font-weight:700; box-shadow:0 0 14px rgba(23,113,255,.26); }
.campus-ai-progress-step.active > span { outline:2px solid #53a7ff; outline-offset:2px; }
.campus-ai-progress-line { width: min(150px, 19vw); height:2px; background:#328bff; }
.campus-ai-proposal-banner { min-height:82px; display:flex; align-items:center; gap:15px; margin-bottom:8px; padding:11px 12px; border:1px solid rgba(40,117,255,.7); border-radius:12px; background:linear-gradient(105deg,rgba(95,16,191,.38),rgba(8,44,113,.64)); box-shadow:inset 0 0 20px rgba(97,51,255,.12); }
.campus-ai-proposal-sparkle { flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; color:#fff; border-radius:50%; background:linear-gradient(145deg,#a10cff,#4e39ff); box-shadow:0 0 18px rgba(136,42,255,.48); font-size:29px; }
.campus-ai-proposal-banner-copy { flex:1; min-width:0; }
.campus-ai-proposal-banner-copy h3 { margin:0 0 4px; font-size:17px; line-height:1.2; }
.campus-ai-proposal-banner-copy p { margin:0; color:#c7d1ed; font-size:11px; line-height:1.4; }
.campus-ai-proposal-tools { display:flex; align-items:center; gap:8px; }
.campus-ai-proposal-tools button { min-height:40px; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 11px; border-radius:8px; color:#fff; font:inherit; font-size:11px; white-space:nowrap; cursor:pointer; }
.campus-ai-refine-open { border:1px solid #4a68ff; background:linear-gradient(105deg,#8d20ed,#0878e9); }
.campus-ai-regenerate { border:1px solid #244d87; background:rgba(3,22,54,.72); }
.campus-ai-proposal-state #campusAIProposalMount { display:flex; flex-direction:column; gap:7px; }
.campus-ai-result-card { min-height:72px; display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:start; gap:14px; padding:10px 12px; border:1px solid rgba(36,118,255,.68); border-radius:12px; background:linear-gradient(105deg,rgba(87,13,175,.35),rgba(10,39,99,.76) 68%,rgba(8,50,112,.7)); box-shadow:inset 0 0 18px rgba(85,57,255,.09); }
.campus-ai-result-icon { width:46px; height:46px; display:grid; place-items:center; color:#fff; border-radius:50%; background:linear-gradient(145deg,#1684ff,#164de3); font-size:19px; font-weight:700; }
.campus-ai-result-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.campus-ai-result-main { min-width:0; }
.campus-ai-result-heading { display:flex; align-items:center; flex-wrap:wrap; gap:10px; min-height:25px; margin-bottom:4px; }
.campus-ai-result-heading h3 { margin:0; font-size:14px; line-height:1.25; }
.campus-ai-generated-badge { padding:4px 10px; border-radius:999px; color:#fff; background:linear-gradient(100deg,#7d19e6,#392dd4); font-size:10px; line-height:1.3; white-space:nowrap; }
.campus-ai-result-edit { min-width:70px; min-height:34px; display:flex; align-items:center; justify-content:center; gap:5px; margin-top:0; padding:0 10px; color:#eef4ff; border:1px solid #155298; border-radius:8px; background:rgba(12,59,119,.68); font:inherit; font-size:11px; cursor:pointer; }
.campus-ai-result-edit svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.campus-ai-result-title-input, .campus-ai-result-description-input { display:block; width:100%; color:#f4f6ff; border:1px solid rgba(40,89,163,.55); border-radius:7px; background:rgba(3,19,52,.63); font:inherit; font-size:12px; line-height:1.45; }
.campus-ai-result-title-input { min-height:34px; padding:6px 10px; }
.campus-ai-result-description-input { min-height:62px; resize:vertical; padding:7px 10px; }
.campus-ai-result-title-input[readonly], .campus-ai-result-description-input[readonly] { border-color:rgba(40,89,163,.38); }
.campus-ai-result-title-input:not([readonly]), .campus-ai-result-description-input:not([readonly]), .campus-ai-size-input input:not([readonly]) { outline:1px solid #9a5bff; }
.campus-ai-size-input { width:max-content; height:34px; display:flex; overflow:hidden; border:1px solid #174a91; border-radius:8px; background:rgba(3,20,53,.55); }
.campus-ai-size-input button { width:34px; color:#fff; border:0; background:rgba(21,104,206,.55); font-size:17px; cursor:pointer; }
.campus-ai-size-input button:disabled { opacity:.55; cursor:default; }
.campus-ai-size-input input { width:48px; color:#fff; border:0; border-left:1px solid rgba(57,112,193,.36); border-right:1px solid rgba(57,112,193,.36); background:transparent; text-align:center; font:inherit; font-size:13px; }
.campus-ai-size-input input::-webkit-inner-spin-button, .campus-ai-size-input input::-webkit-outer-spin-button { margin:0; -webkit-appearance:none; }
.campus-ai-result-chips { display:flex; flex-wrap:wrap; gap:6px; padding-top:2px; }
.campus-ai-result-chip { min-height:29px; display:inline-flex; align-items:center; gap:9px; padding:4px 10px; border:1px solid rgba(23,104,186,.38); border-radius:999px; color:#e6f1ff; background:linear-gradient(100deg,rgba(6,66,130,.72),rgba(8,49,108,.78)); font-size:11px; line-height:1.2; }
.campus-ai-result-chip button { padding:0; color:#fff; border:0; background:none; font-size:16px; line-height:1; cursor:pointer; }
.campus-ai-chip-add { display:flex; gap:7px; margin-top:7px; }
.campus-ai-chip-add input { min-width:0; flex:1; height:30px; padding:0 8px; color:#fff; border:1px solid #3c57b4; border-radius:6px; background:#071a3a; font:inherit; font-size:11px; }
.campus-ai-chip-add button { padding:0 9px; color:#fff; border:1px solid #3d5ccc; border-radius:6px; background:#173f92; font:inherit; font-size:11px; cursor:pointer; }
.campus-ai-refine-panel { margin-top:8px; padding:12px; border:1px solid rgba(135,73,255,.65); border-radius:11px; background:linear-gradient(115deg,rgba(46,20,105,.72),rgba(7,32,78,.9)); }
.campus-ai-refine-panel label { display:block; margin-bottom:8px; font-size:13px; font-weight:600; }
.campus-ai-refine-panel textarea { width:100%; min-height:58px; padding:9px 10px; resize:vertical; color:#f4f6ff; border:1px solid #7252df; border-radius:8px; background:rgba(3,15,42,.82); font:inherit; font-size:12px; }
.campus-ai-refine-panel textarea::placeholder { color:#aab8d6; }
.campus-ai-refine-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.campus-ai-refine-actions button { min-height:32px; padding:0 11px; color:#fff; border-radius:7px; font:inherit; font-size:11px; cursor:pointer; }
.campus-ai-refine-cancel { border:1px solid #385080; background:#101d3c; }
.campus-ai-refine-submit { border:1px solid transparent; background:linear-gradient(100deg,#8e20eb,#087be9); }
.campus-ai-proposal-footer { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:9px; padding:10px 76px 0; border-top:1px solid rgba(124,144,203,.3); }
.campus-ai-proposal-footer button { min-height:52px; border-radius:9px; color:#f8f8ff; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.campus-ai-use-proposal { display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid transparent; background:linear-gradient(100deg,#981eea,#484bff 56%,#08a9e8); }
.campus-ai-use-proposal > span { font-size:19px; }
#view-post-project .post-form-section.post-ai-generated { border-color:rgba(128,75,255,.7); box-shadow:inset 0 0 22px rgba(104,57,255,.07),0 0 12px rgba(73,75,255,.08); }
@media (max-width: 680px) {
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) { padding:20px 12px 12px; }
  .campus-ai-proposal-banner { flex-wrap:wrap; }
  .campus-ai-proposal-banner-copy { flex-basis:calc(100% - 65px); }
  .campus-ai-proposal-tools { width:100%; }
  .campus-ai-proposal-tools button { flex:1; }
  .campus-ai-result-card { grid-template-columns:38px minmax(0,1fr); gap:9px; padding:9px; }
  .campus-ai-result-icon { width:38px; height:38px; }
  .campus-ai-result-edit { grid-column:2; justify-self:end; min-height:29px; margin-top:-2px; }
  .campus-ai-proposal-footer { padding:10px 0 0; }
}
@media (max-width: 440px) {
  .campus-ai-progress { gap:7px; margin:18px auto 14px; }
  .campus-ai-progress-step { gap:6px; font-size:10px; }
  .campus-ai-progress-step > span { width:27px; height:27px; }
  .campus-ai-progress-line { width:25px; }
  .campus-ai-proposal-footer { grid-template-columns:1fr; gap:8px; }
}

/* Compact desktop Post a Project layout for short, standard-height viewports. */
@media (min-width: 1280px) and (max-height: 950px) {
  html body:has(#view-post-project.active) .main-content { padding:6px 24px 8px; }
  html body:has(#view-post-project.active) .post-project-breadcrumb { margin:0 0 6px; }
  html body:has(#view-post-project.active) .post-project-heading { margin-bottom:8px; }
  html body:has(#view-post-project.active) .post-project-heading h1 { margin-bottom:2px; font-size:28px; }
  html body:has(#view-post-project.active) .post-project-heading p { font-size:13px; }
  html body:has(#view-post-project.active) .post-project-ai-card { min-height:78px; margin-bottom:8px; padding:9px 14px; gap:12px; }
  html body:has(#view-post-project.active) .post-ai-sparkle { width:46px; height:46px; flex-basis:46px; }
  html body:has(#view-post-project.active) .post-ai-sparkle svg { width:29px; height:29px; }
  html body:has(#view-post-project.active) .post-ai-feature { min-height:40px; padding:0 8px; }
  html body:has(#view-post-project.active) .post-ai-feature > span { width:30px; height:30px; flex-basis:30px; }
  html body:has(#view-post-project.active) .post-ai-generate { min-height:42px; padding:0 13px; }
  html body:has(#view-post-project.active) .post-project-form { gap:7px; }
  html body:has(#view-post-project.active) .post-form-section { padding:9px 13px 10px; }
  html body:has(#view-post-project.active) .post-form-section-heading { gap:10px; margin-bottom:8px; }
  html body:has(#view-post-project.active) .post-form-section-heading > span { width:30px; height:30px; flex-basis:30px; }
  html body:has(#view-post-project.active) .post-form-section-heading p { margin-top:2px; }
  html body:has(#view-post-project.active) .post-basics-grid { gap:16px; }
  html body:has(#view-post-project.active) .post-field { gap:5px; }
  html body:has(#view-post-project.active) .post-field input,
  html body:has(#view-post-project.active) .post-field select,
  html body:has(#view-post-project.active) .post-chip-entry input,
  html body:has(#view-post-project.active) .post-chip-entry select { height:36px; }
  html body:has(#view-post-project.active) .post-team-size { height:36px; }
  html body:has(#view-post-project.active) .post-field textarea { height:64px; min-height:64px; padding-top:8px; }
  html body:has(#view-post-project.active) .post-description-field .post-field-counter { bottom:6px; }
  html body:has(#view-post-project.active) .post-chip-list { gap:5px; margin-top:5px; }
  html body:has(#view-post-project.active) .post-project-chip { padding:4px 7px 4px 9px; }
  html body:has(#view-post-project.active) .post-project-actions { padding:0 0 2px; }
  html body:has(#view-post-project.active) .post-project-actions button { min-height:38px; }
}

/* Fit the complete generated proposal state in a desktop viewport. */
@media (min-width: 681px) {
  .campus-ai-idea-overlay:has(#campusAIProposalState:not([hidden])) { padding:16px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) {
    max-height:calc(100dvh - 32px);
    overflow:visible;
    padding:14px 14px 10px;
  }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-idea-header { gap:16px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-idea-mark { flex-basis:60px; width:60px; height:60px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-idea-mark svg { width:36px; height:36px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-progress { margin:12px auto 10px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-progress-step > span { width:28px; height:28px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-proposal-banner { min-height:62px; gap:11px; margin-bottom:5px; padding:7px 9px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-proposal-sparkle { flex-basis:40px; width:40px; height:40px; font-size:24px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-proposal-tools { gap:6px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-proposal-tools button { min-height:34px; padding:0 8px; font-size:10px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) #campusAIProposalMount { gap:4px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-result-card { min-height:0; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; padding:6px 8px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-result-icon { width:34px; height:34px; font-size:16px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-result-icon svg { width:19px; height:19px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-result-heading { min-height:20px; gap:8px; margin-bottom:3px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-result-heading h3 { font-size:13px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-generated-badge { padding:3px 8px; font-size:10px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-result-edit { min-width:64px; min-height:29px; padding:0 8px; font-size:10px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-result-title-input { min-height:30px; padding:4px 8px; font-size:12px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-result-description-input { min-height:48px; height:48px; padding:5px 8px; font-size:12px; line-height:1.35; resize:none; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-size-input { height:29px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-size-input button { width:30px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-size-input input { width:40px; font-size:12px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-result-chips { gap:5px; padding-top:0; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-result-chip { min-height:25px; padding:3px 8px; font-size:11px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-proposal-footer { gap:10px; margin-top:6px; padding:7px 60px 0; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-proposal-footer button { min-height:42px; font-size:13px; }
}

/* Match the main description field's initial size and vertical resize behavior. */
.campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-result-description-input {
  min-height:88px;
  height:88px;
  padding:11px 13px 23px;
  line-height:1.5;
  overflow-y:hidden;
  resize:vertical;
  border-color:#21435c;
  border-radius:7px;
  background:#061827;
}
.campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-result-description {
  align-items:start;
}

/* Slightly roomier generated proposal modal, while retaining the viewport fit. */
@media (min-width: 681px) {
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) {
    width:min(850px, 100%);
    padding:18px 16px 14px;
  }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-idea-header { gap:18px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-idea-mark { flex-basis:64px; width:64px; height:64px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-progress { margin:14px auto 12px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-proposal-banner { min-height:66px; margin-bottom:7px; padding:8px 10px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) #campusAIProposalMount { gap:5px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-result-card { padding:7px 9px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-proposal-footer { margin-top:7px; padding-top:8px; }
  .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-proposal-footer button { min-height:44px; }
}

/* Final header alignment for the Post a Project route (same as Projects). */
html body:has(#view-post-project.active) .top-nav-right { flex:0 0 auto; gap:15px; margin-left:20px; }
html body:has(#view-post-project.active) .header-icon-btn { width:42px; height:42px; padding:0; border:0; color:#c3d8e9; background:transparent; box-shadow:none; display:inline-flex; align-items:center; justify-content:center; }
html body:has(#view-post-project.active) .header-icon-btn > svg,
html body:has(#view-post-project.active) .theme-icon-moon svg { width:24px; height:24px; }
html body:has(#view-post-project.active) .top-nav-user { gap:12px; padding:0; border:0; background:transparent; box-shadow:none; }
html body:has(#view-post-project.active) .top-avatar-circle { width:42px; height:42px; border:1px solid #1b2b40; background:#102b4b; font-size:14px; }
html body:has(#view-post-project.active) .user-dropdown-chevron { color:#c3d8e9; }
@media (max-width:1024px) {
  html body:has(#view-post-project.active) .top-nav-right { gap:9px; margin-left:10px; }
  html body:has(#view-post-project.active) .header-icon-btn { width:36px; height:36px; }
  html body:has(#view-post-project.active) .header-icon-btn > svg,
  html body:has(#view-post-project.active) .theme-icon-moon svg { width:21px; height:21px; }
}
@media (max-width:768px) {
  html body:has(#view-post-project.active) .top-nav-right { gap:8px; margin-left:8px; }
  html body:has(#view-post-project.active) .header-icon-btn { width:30px; height:30px; }
  html body:has(#view-post-project.active) .header-icon-btn > svg,
  html body:has(#view-post-project.active) .theme-icon-moon svg { width:16px; height:16px; }
  html body:has(#view-post-project.active) .top-avatar-circle { width:32px; height:32px; }
}

/* Research page: keep its chrome stationary while only opportunity cards scroll. */
html body:has(#view-research.active) .main-content { min-height:0; overflow:hidden; }
html body:has(#view-research.active) #view-research {
  height:100%;
  min-height:0;
  flex:1 1 auto;
  overflow:hidden;
}
html body:has(#view-research.active) #view-research > :not(.research-card-grid) { flex:none; }
html body:has(#view-research.active) #view-research .research-card-grid {
  height:0;
  min-height:0;
  flex:1 1 0;
  grid-auto-rows:274px;
  align-content:start;
  margin-top:14px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#08aef2 #12283a;
}
html body:has(#view-research.active) #view-research .research-card-grid::-webkit-scrollbar { width:10px; }
html body:has(#view-research.active) #view-research .research-card-grid::-webkit-scrollbar-track { border-radius:8px; background:#12283a; }
html body:has(#view-research.active) #view-research .research-card-grid::-webkit-scrollbar-thumb { border:2px solid #12283a; border-radius:8px; background:#08aef2; }

/* Archive page: keep its title and filters stationary; scroll only the cards. */
html body:has(#view-archive.active) .main-content { min-height:0; overflow:hidden; }
html body:has(#view-archive.active) #view-archive {
  height:100%;
  min-height:0;
  flex:1 1 auto;
  overflow:hidden;
}
html body:has(#view-archive.active) #view-archive .archive-page-header,
html body:has(#view-archive.active) #view-archive .archive-controls { flex:none; }
html body:has(#view-archive.active) #view-archive .archive-grid {
  height:0;
  min-height:0;
  flex:1 1 0;
  grid-auto-rows:247px;
  align-content:start;
  margin-top:20px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#08aef2 #12283a;
}
html body:has(#view-archive.active) #view-archive .archive-grid::-webkit-scrollbar { width:10px; }
html body:has(#view-archive.active) #view-archive .archive-grid::-webkit-scrollbar-track { border-radius:8px; background:#12283a; }
html body:has(#view-archive.active) #view-archive .archive-grid::-webkit-scrollbar-thumb { border:2px solid #12283a; border-radius:8px; background:#08aef2; }

/* Contextual Campus AI logo treatments: same sparkle identity, adapted to each surface. */
.campus-ai-logo-definitions { position:absolute; width:0; height:0; overflow:hidden; }
.campus-ai-logo { display:grid; place-items:center; overflow:hidden; border-radius:50%; color:#fff; }
.campus-ai-logo > .campus-ai-logo-mark { display:block; overflow:visible; }

/* Projects banner: compact violet badge scaled for its horizontal layout. */
html body:has(#view-projects.active) .campus-ai-promo .campus-ai-sparkle.campus-ai-logo {
  width:44px; height:44px;
  background:radial-gradient(circle at 34% 28%, #8e37df 0%, #5e2baa 72%, #342765 100%);
  box-shadow:0 0 14px rgba(127,78,220,.25);
}
html body:has(#view-projects.active) .campus-ai-promo .campus-ai-sparkle.campus-ai-logo > .campus-ai-logo-mark { width:62%; height:62%; }

/* Find a Team: cool teal-blue glow fits the page's cyan accents. */
html body:has(#view-find-team.active) .team-ai-sparkle.campus-ai-logo {
  width:38px; height:38px;
  background:radial-gradient(circle at 35% 30%, #8d56cb 0%, #6037a0 72%, #34275f 100%);
  box-shadow:0 0 12px rgba(155,108,225,.22);
}
html body:has(#view-find-team.active) .team-ai-sparkle.campus-ai-logo > .campus-ai-logo-mark { width:62%; height:62%; }

/* Post a Project banner: retain its larger existing slot with a softened violet treatment. */
html body:has(#view-post-project.active) .post-ai-sparkle.campus-ai-logo {
  background:radial-gradient(circle at 35% 28%, #8130d3 0%, #54239c 72%, #29275f 100%);
  box-shadow:0 0 16px rgba(126,57,207,.27);
}
html body:has(#view-post-project.active) .post-ai-sparkle.campus-ai-logo > .campus-ai-logo-mark { width:62%; height:62%; }

/* Generation dialog: prominent violet header logo. */
html body .campus-ai-idea-mark.campus-ai-logo {
  background:radial-gradient(circle at 34% 26%, #9827ef 0%, #6d16cf 66%, #43108f 100%);
  box-shadow:0 0 22px rgba(148,44,239,.34);
}
html body .campus-ai-idea-mark.campus-ai-logo > .campus-ai-logo-mark { width:64%; height:64%; }

/* Generated proposal header: smaller, quieter logo; keep the sparkle comfortably inside its compact slot. */
html body .campus-ai-proposal-sparkle.campus-ai-logo {
  background:radial-gradient(circle at 34% 28%, #812be0 0%, #5526bb 72%, #2b267b 100%);
  box-shadow:0 0 13px rgba(127,67,226,.29);
}
html body .campus-ai-proposal-sparkle.campus-ai-logo > .campus-ai-logo-mark { width:60%; height:60%; }
html body .campus-ai-idea-dialog:has(#campusAIProposalState:not([hidden])) .campus-ai-proposal-sparkle.campus-ai-logo > .campus-ai-logo-mark { width:60%; height:60%; }

/* Small Recommendations heading uses the same recognizable mark without a circular badge. */
html body:has(#view-projects.active) .campus-ai-recommendations-heading h2 .campus-ai-inline-mark {
  display:inline-grid; width:1em; height:1em; place-items:center; margin-right:2px; vertical-align:-.12em;
}
html body:has(#view-projects.active) .campus-ai-recommendations-heading h2 .campus-ai-inline-mark svg {
  display:block; width:100%; height:100%; filter:drop-shadow(0 0 5px rgba(168,111,255,.28));
}
@media (max-width:700px) {
  html body:has(#view-projects.active) .campus-ai-promo .campus-ai-sparkle.campus-ai-logo { width:36px; height:36px; }
}
/* Open Roles: retain the native select behavior while suppressing only its visual dropdown arrow. */
html body:has(#view-post-project.active) #postRoleSelect {
  appearance:none;
  -webkit-appearance:none;
  background-image:none;
}
html body:has(#view-post-project.active) #postRoleSelect::-ms-expand { display:none; }

/* Light theme completion. Keep these overrides scoped to Light Mode so the
   established dark palette and all layout metrics remain unchanged. */
html[data-theme="light"] {
  color-scheme: light;
  --bg-canvas: #e1f0f3;
  --bg-surface: #eaf6f8;
  --bg-surface-elevated: #eaf6f8;
  --bg-surface-secondary: #dfedf0;
  --bg-card-hover: #edf7f8;
  --surface-border: #c3dfe4;
  --surface-border-subtle: #d7e9ec;
  --text-primary: #16394d;
  --text-secondary: #40566c;
  --text-muted: #61778d;
  --text-light: #8296a9;
  --sidebar-bg: #dceff2;
  --sidebar-border: #c9e2e7;
  --sidebar-text: #456a7d;
  --sidebar-text-hover: #16394d;
  --sidebar-active-bg: #c5e9ea;
  --topbar-bg: rgba(234,246,248,.96);
  --topbar-border: #c9e2e7;
}

html[data-theme="light"] body,
html[data-theme="light"] .app-container,
html[data-theme="light"] .main-wrapper,
html[data-theme="light"] .main-content,
html[data-theme="light"] .view-section.active {
  background-color: #e1f0f3 !important;
  color: #16394d;
}

html[data-theme="light"] .sidebar {
  color: #26394c;
  background: #dceff2 !important;
  border-color: #c9e2e7 !important;
}
html[data-theme="light"] .logo-title { color: #173044 !important; }
html[data-theme="light"] .logo-subtitle,
html[data-theme="light"] .user-meta { color: #647b90 !important; }
html[data-theme="light"] .sidebar-user { background: #e4f2f4; border-color: #d8e3ec; }
html[data-theme="light"] .sidebar-user:hover { background: #dceef1; border-color: #bfdbe0; }
html[data-theme="light"] .user-name { color: #16394d !important; }
html[data-theme="light"] .nav-item { color: #456a7d !important; }
html[data-theme="light"] .nav-item:hover { color: #16394d !important; background: #e8f0f6 !important; }
html[data-theme="light"] .nav-item.active { color: #087d76 !important; background: #c5e9ea !important; }
html[data-theme="light"] .nav-item.active .nav-icon { color: #078b82 !important; }

html[data-theme="light"] .top-navbar {
  color: #26394c;
  background: rgba(220,239,242,.97) !important;
  border-bottom: 1px solid #c9e2e7 !important;
}
html[data-theme="light"] .header-icon-btn,
html[data-theme="light"] .user-dropdown-chevron { color: #536b80 !important; }
html[data-theme="light"] .top-avatar-circle { color: #fff !important; }
html[data-theme="light"] .header-search-input {
  color: #24384c !important;
  background: #eaf5f7 !important;
  border-color: #c3dfe4 !important;
}
html[data-theme="light"] .header-search-input::placeholder { color: #8295a8 !important; }
html[data-theme="light"] .header-search-kbd { color: #456a7d; background: #dfedf0; border-color: #c9e2e7; }

/* General surface, typography, and form controls across every routed view. */
html[data-theme="light"] .view-section.active :is(h1,h2,h3,h4,h5,p,label,li,small,strong),
html[data-theme="light"] .view-section.active :is(.page-title,.section-title,.panel-title,.card-title) {
  color: #24384c;
}
html[data-theme="light"] .view-section.active :is(.page-subtitle,.muted,.text-muted) { color: #61778d; }
html[data-theme="light"] .view-section.active :is(.card,.dashboard-panel,.panel-card,.member-card,.project-card,
  .project-card-dense,.project-detail-overview-card,.project-team-status-card,.project-member-card,
  .research-card,.research-opportunity-card,.research-detail-card,.research-information-card,
  .archive-card,.archive-record-content,.student-card,.team-recommendation-card,
  .post-form-section,.conversation-item,.conversations-pane,.chat-pane) {
  color: #24384c !important;
  background: #eaf6f8 !important;
  border-color: #c3dfe4 !important;
  box-shadow: 0 2px 10px rgba(26,55,82,.045);
}
html[data-theme="light"] .view-section.active :is(input,textarea,select,.form-control,.search-input-wrapper,
  .filter-dropdown,.projects-search,.projects-filter,.projects-sort,.research-local-search,.research-filter,
  .team-project-select,.chat-input,.post-field input,.post-field textarea,.post-field select,
  .post-chip-entry input,.post-chip-entry select) {
  color: #24384c !important;
  background-color: #e9f5f7 !important;
  border-color: #bdd9df !important;
  color-scheme: light;
}
html[data-theme="light"] .view-section.active :is(input,textarea,select)::placeholder { color: #7895a4 !important; opacity: 1; }
html[data-theme="light"] .view-section.active :is(button.btn,.btn-outline,.student-card-btn,.project-view-btn,
  .research-details-btn,.project-detail-join-btn,.team-match-sort,.campus-ai-reason-toggle) {
  color: #304a60;
  background-color: #deeff2;
  border-color: #bdd9df;
}

/* Restore readable light surfaces on pages whose original rules use fixed dark colors. */
html[data-theme="light"] body:has(#view-home.active) .main-content,
html[data-theme="light"] body:has(#view-profile.active) .main-content,
html[data-theme="light"] body:has(#view-find-team.active) .main-content,
html[data-theme="light"] body:has(#view-projects.active) .main-content,
html[data-theme="light"] body:has(#view-project-details.active) .main-content,
html[data-theme="light"] body:has(#view-research.active) .main-content,
html[data-theme="light"] body:has(#view-archive.active) .main-content,
html[data-theme="light"] body:has(#view-messages.active) .main-content,
html[data-theme="light"] body:has(#view-post-project.active) .main-content {
  color: #24384c !important;
  background: #e1f0f3 !important;
}
html[data-theme="light"] body:has(#view-home.active, #view-profile.active, #view-find-team.active,
  #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active,
  #view-messages.active, #view-post-project.active) .top-navbar {
  color: #24384c !important;
  background: #eaf6f8 !important;
  border-color: #c9e2e7 !important;
}
html[data-theme="light"] body:has(#view-home.active) .home-bottom-panels-grid :is(.card,.dashboard-panel),
html[data-theme="light"] body:has(#view-home.active) .quick-action-card,
html[data-theme="light"] body:has(#view-profile.active) #view-profile .card { background: #eaf6f8 !important; border-color: #c3dfe4 !important; }
html[data-theme="light"] body:has(#view-profile.active) #view-profile .profile-hero-copy .page-subtitle { color: #e7f0f8 !important; }
html[data-theme="light"] body:has(#view-profile.active) #view-profile .profile-cover-image + * { color: #fff; }

/* Find a Team cards and controls. Keep the AI action's purple/blue brand treatment. */
html[data-theme="light"] body:has(#view-find-team.active) #view-find-team :is(.team-project-select-card,.team-ai-match-card) {
  color: #24384c !important;
  background: linear-gradient(145deg,#eaf6f8,#e1f0f3) !important;
  border-color: #c3dfe4 !important;
}
html[data-theme="light"] body:has(#view-find-team.active) #view-find-team :is(.team-match-card-heading h2,.team-students-heading-title h2,.student-name,.team-recommendation-identity h3) { color: #24384c !important; }
html[data-theme="light"] body:has(#view-find-team.active) #view-find-team :is(.team-match-card-heading p,.student-major,.student-section-label,.team-students-heading p,.team-recommendation-identity p) { color: #61778d !important; }
html[data-theme="light"] body:has(#view-find-team.active) #view-find-team .student-card { background: #eaf6f8 !important; border-color: #c3dfe4 !important; }
html[data-theme="light"] body:has(#view-find-team.active) #view-find-team :is(.search-input-wrapper,.filter-dropdown,.team-project-select) { color: #24384c !important; background: #e9f5f7 !important; border-color: #bdd9df !important; color-scheme: light; }
html[data-theme="light"] body:has(#view-find-team.active) #view-find-team .search-input-wrapper input { color: #24384c !important; }
html[data-theme="light"] body:has(#view-find-team.active) #view-find-team .search-input-wrapper input::placeholder { color: #7895a4 !important; }
html[data-theme="light"] body:has(#view-find-team.active) #view-find-team .student-card .tag { background: #ccebed !important; color: #08786f !important; }
html[data-theme="light"] body:has(#view-find-team.active) #view-find-team .student-card > div:nth-of-type(3) .tag { background: #dfedf1 !important; color: #476078 !important; }
html[data-theme="light"] body:has(#view-find-team.active) #view-find-team .team-recommendation-actions button { color: #304a60 !important; background: #e5f2f4 !important; border-color: #bdd9df !important; }

/* Projects, project detail, research, and archive cards/filters. */
html[data-theme="light"] body:has(#view-projects.active) #view-projects :is(.project-card,.campus-ai-recommendation,.campus-ai-recommendation-compact) { background: #eaf6f8 !important; border-color: #c3dfe4 !important; }
html[data-theme="light"] body:has(#view-projects.active) #view-projects :is(.project-card-title,.campus-ai-recommendation h3,.campus-ai-compact-title h3) { color: #24384c !important; }
html[data-theme="light"] body:has(#view-projects.active) #view-projects :is(.project-card-desc,.project-description,.campus-ai-copy p,.campus-ai-collapsible-reasons ul) { color: #61778d !important; }
html[data-theme="light"] body:has(#view-projects.active) #view-projects :is(.projects-search,.projects-filter,.projects-sort) { color: #24384c !important; background: #e9f5f7 !important; border-color: #bdd9df !important; color-scheme: light; }
html[data-theme="light"] body:has(#view-projects.active) #view-projects .campus-ai-demo-note { color: #5b4a81 !important; background: #e8eafb !important; border-color: #d8d5ec !important; }
html[data-theme="light"] body:has(#view-project-details.active) #view-project-details :is(.project-detail-overview-card,.project-team-status-card,.project-member-card) { color: #24384c !important; background: #eaf6f8 !important; border-color: #c3dfe4 !important; }
html[data-theme="light"] body:has(#view-project-details.active) #view-project-details :is(.project-detail-page-title,.project-team-status-card h2,.project-members-section > h2,.project-member-info h3,.project-status-stat strong) { color: #24384c !important; }
html[data-theme="light"] body:has(#view-project-details.active) #view-project-details :is(.project-detail-description,.project-status-stat,.project-member-info p) { color: #61778d !important; }
html[data-theme="light"] body:has(#view-research.active) #view-research :is(.research-opportunity-card,.research-card) { color: #24384c !important; background: #eaf6f8 !important; border-color: #c3dfe4 !important; }
html[data-theme="light"] body:has(#view-research.active) #view-research :is(.research-page-heading h1,.research-title) { color: #24384c !important; }
html[data-theme="light"] body:has(#view-research.active) #view-research :is(.research-page-heading p,.research-opportunity-card p,.research-faculty-line) { color: #61778d !important; }
html[data-theme="light"] body:has(#view-research.active) #view-research :is(.research-local-search,.research-filter) { color: #24384c !important; background: #e9f5f7 !important; border-color: #bdd9df !important; color-scheme: light; }
html[data-theme="light"] body:has(#view-archive.active) #view-archive :is(.archive-card,.archive-record-content) { color: #24384c !important; background: #eaf6f8 !important; border-color: #c3dfe4 !important; }
html[data-theme="light"] body:has(#view-archive.active) #view-archive :is(.archive-title,.archive-card h2,.archive-record-title) { color: #24384c !important; }
html[data-theme="light"] body:has(#view-archive.active) #view-archive :is(.archive-controls .search-input-wrapper,.archive-controls .filter-dropdown) { color: #24384c !important; background: #e9f5f7 !important; border-color: #bdd9df !important; color-scheme: light; }

/* Post a Project: make every fixed-dark form surface and modal readable in light mode. */
html[data-theme="light"] body:has(#view-post-project.active) #view-post-project .post-project-heading h1,
html[data-theme="light"] body:has(#view-post-project.active) #view-post-project .post-ai-title-line h2,
html[data-theme="light"] body:has(#view-post-project.active) #view-post-project .post-form-section-heading h2 { color: #24384c !important; }
html[data-theme="light"] body:has(#view-post-project.active) #view-post-project :is(.post-project-breadcrumb,.post-project-heading p,.post-form-section-heading p,.post-field) { color: #536b80 !important; }
html[data-theme="light"] body:has(#view-post-project.active) #view-post-project .post-form-section { color: #24384c !important; background: linear-gradient(120deg,#e9f5f7,#dfedf0 70%) !important; border-color: #d5e1eb !important; }
html[data-theme="light"] body:has(#view-post-project.active) #view-post-project :is(.post-field input,.post-field select,.post-field textarea,.post-chip-entry input,.post-chip-entry select,.post-team-size) { color: #24384c !important; background: #e9f5f7 !important; border-color: #c5d5e2 !important; color-scheme: light; }
html[data-theme="light"] body:has(#view-post-project.active) #view-post-project .post-team-size button,
html[data-theme="light"] body:has(#view-post-project.active) #view-post-project .post-chip-entry > button { color: #304a60 !important; background: #e8f0f6 !important; border-color: #c5d5e2 !important; }
html[data-theme="light"] body:has(#view-post-project.active) #view-post-project .post-team-size output { color: #24384c !important; border-color: #c5d5e2 !important; }
html[data-theme="light"] body:has(#view-post-project.active) #view-post-project :is(.post-project-chip,.post-project-chip.post-role-chip) { color: #08786f !important; background: #ccebed !important; border-color: #aedadd !important; }
html[data-theme="light"] body:has(#view-post-project.active) #view-post-project .post-cancel-button { color: #304a60 !important; border-color: #c5d5e2 !important; background: #eaf6f8 !important; }
html[data-theme="light"] body:has(#view-post-project.active) #view-post-project .post-ai-intro p,
html[data-theme="light"] body:has(#view-post-project.active) #view-post-project .post-ai-feature p { color: #e8eaff !important; }
html[data-theme="light"] body:has(#view-post-project.active) #view-post-project .post-project-ai-card { box-shadow: inset 0 0 26px rgba(87,66,218,.08); }

/* Messages, notifications, and shared dialogs. */
html[data-theme="light"] body:has(#view-messages.active) #view-messages :is(.messages-container,.conversations-pane,.chat-pane,.chat-header,.chat-messages,.chat-input-bar) { color: #24384c !important; background: #eaf6f8 !important; border-color: #c3dfe4 !important; }
html[data-theme="light"] body:has(#view-messages.active) #view-messages :is(.chat-topic,.conv-title,.message-bubble) { color: #24384c !important; }
html[data-theme="light"] body:has(#view-messages.active) #view-messages :is(.conversation-item,.chat-input) { color: #304a60 !important; background: #e5f2f4 !important; border-color: #c3dfe4 !important; }
html[data-theme="light"] body:has(#view-messages.active) #view-messages .chat-bubble-row.incoming .message-bubble { color: #304a60 !important; background: #e4f2f4 !important; border-color: #c3dfe4 !important; }
html[data-theme="light"] .notifications-dropdown,
html[data-theme="light"] .header-search-dropdown,
html[data-theme="light"] .modal-box { color: #24384c !important; background: #eaf6f8 !important; border-color: #c3dfe4 !important; }
html[data-theme="light"] :is(.notifications-header,.notifications-list,.notification-item,.modal-header,.modal-body,.modal-footer) { color: #304a60; background: #eaf6f8; border-color: #c3dfe4; }
html[data-theme="light"] .modal-title,
html[data-theme="light"] .modal-box :is(h1,h2,h3,h4,p,label,li) { color: #24384c !important; }
html[data-theme="light"] .modal-box :is(input,textarea,select) { color: #24384c !important; background: #e9f5f7 !important; border-color: #bdd9df !important; color-scheme: light; }

/* Campus AI proposal and idea dialogs keep their identity, with light surfaces. */
html[data-theme="light"] .campus-ai-idea-dialog { color: #24384c !important; background: linear-gradient(145deg,#eaf6f8,#e1f0f3) !important; border-color: #a99af2 !important; }
html[data-theme="light"] .campus-ai-idea-dialog :is(.campus-ai-idea-title-line h2,.campus-ai-idea-form-copy h3,.campus-ai-progress,.campus-ai-result-heading h3) { color: #24384c !important; }
html[data-theme="light"] .campus-ai-idea-dialog :is(.campus-ai-idea-heading-copy > p,.campus-ai-idea-capability p,.campus-ai-idea-form-copy p,.campus-ai-proposal-banner-copy p) { color: #536b80 !important; }
html[data-theme="light"] .campus-ai-idea-dialog :is(.campus-ai-proposal-banner,.campus-ai-result-card) { color: #24384c !important; background: linear-gradient(105deg,#e7eafa,#e1eef7) !important; border-color: #c8b8f7 !important; }
html[data-theme="light"] .campus-ai-idea-dialog :is(.campus-ai-result-title-input,.campus-ai-result-description-input,.campus-ai-refine-panel textarea,.campus-ai-chip-add input,.campus-ai-idea-input-wrap textarea) { color: #24384c !important; background: #eaf6f8 !important; border-color: #c7b8f2 !important; }
html[data-theme="light"] .campus-ai-idea-dialog :is(.campus-ai-result-title-input,.campus-ai-result-description-input,.campus-ai-refine-panel textarea,.campus-ai-idea-input-wrap textarea)::placeholder { color: #7895a4 !important; }
html[data-theme="light"] .campus-ai-idea-dialog .campus-ai-result-edit { color: #40566c !important; background: #e2edf5 !important; border-color: #c3dfe4 !important; }
html[data-theme="light"] .campus-ai-idea-dialog .campus-ai-result-chip { color: #344d68 !important; background: #dcecf5 !important; border-color: #c3dfe4 !important; }
html[data-theme="light"] .campus-ai-idea-dialog .campus-ai-idea-cancel { color: #304a60 !important; background: #eaf6f8 !important; border-color: #bdd9df !important; }
html[data-theme="light"] .campus-ai-idea-dialog .campus-ai-idea-close { color: #40566c !important; }

/* Additional fixed-color components used in less common views. */
html[data-theme="light"] body:has(#view-home.active) #view-home :is(.activity-row-item,.deadline-row-item,.quick-action-card,.dashboard-panel,.activity-item) {
  color: #304a60 !important;
  background: #eaf6f8 !important;
  border-color: #c3dfe4 !important;
}
html[data-theme="light"] body:has(#view-home.active) #view-home :is(.activity-item-title,.deadline-project-name,.deadline-task-name,.quick-action-title,.panel-title) { color: #24384c !important; }
html[data-theme="light"] body:has(#view-home.active) #view-home :is(.activity-item-time,.deadline-date-box,.quick-action-desc) { color: #61778d !important; }
html[data-theme="light"] body:has(#view-research-details.active) #view-research-details :is(.research-detail-card,.research-detail-section,.research-information-card) {
  color: #304a60 !important;
  background: #eaf6f8 !important;
  border-color: #c3dfe4 !important;
}
html[data-theme="light"] body:has(#view-research-details.active) #view-research-details :is(.research-detail-heading h1,.research-detail-section-title h2) { color: #24384c !important; }
html[data-theme="light"] body:has(#view-research-details.active) #view-research-details :is(.research-detail-card p,.research-detail-section p,.research-information-row) { color: #536b80 !important; }

/* AI banners retain their purple identity with lighter surfaces in Light Mode. */
html[data-theme="light"] body:has(#view-projects.active) #view-projects .campus-ai-promo,
html[data-theme="light"] body:has(#view-find-team.active) #view-find-team .campus-ai-promo,
html[data-theme="light"] body:has(#view-post-project.active) #view-post-project .post-project-ai-card {
  color: #32264d !important;
  background: linear-gradient(105deg,#e1eef3 0%,#e5eff5 58%,#dceff1 100%) !important;
  border-color: #cbbaf5 !important;
  box-shadow: inset 0 0 26px rgba(87,66,218,.06);
}
html[data-theme="light"] body:has(#view-projects.active) #view-projects .campus-ai-promo :is(.campus-ai-copy h2,.campus-ai-copy p),
html[data-theme="light"] body:has(#view-find-team.active) #view-find-team .campus-ai-promo :is(.campus-ai-copy h2,.campus-ai-copy p),
html[data-theme="light"] body:has(#view-post-project.active) #view-post-project .post-project-ai-card :is(.post-ai-title-line h2,.post-ai-intro p,.post-ai-feature p) { color: #433761 !important; }
html[data-theme="light"] body:has(#view-find-team.active) #view-find-team .team-ai-match-card { background:linear-gradient(135deg,#e8eefa,#e3f0f5) !important; }

/* Light-theme dialog content outside the routed view, plus readable icon strokes. */
html[data-theme="light"] .modal-box :is(.modal-header,.modal-body,.modal-footer) { background: #eaf6f8 !important; }
html[data-theme="light"] .modal-box :is(.form-label,.form-group label,.detail-overview-text,.detail-overview-title) { color: #40566c !important; }
html[data-theme="light"] .view-section.active :is(.project-team-count,.members-count,.research-faculty-line,.faculty-meta,.archive-record-info) { color: #536b80 !important; }
html[data-theme="light"] .view-section.active :is(.project-detail-back,.project-member-message,.project-bookmark) { color: #526b80 !important; }
html[data-theme="light"] .campus-ai-idea-dialog .campus-ai-idea-divider { background: #d9dced !important; }
html[data-theme="light"] .campus-ai-idea-dialog .campus-ai-idea-capability > span { color: #6846b8 !important; background: #eee8ff !important; }
html[data-theme="light"] select { color-scheme: light; }

html[data-theme="light"] body:has(#view-projects.active) #view-projects :is(.project-row-card,.project-tile) {
  color: #24384c !important;
  background: #eaf6f8 !important;
  border-color: #c3dfe4 !important;
}
html[data-theme="light"] body:has(#view-projects.active) #view-projects :is(.project-row-title,.project-tile h2,.project-tile h3) { color: #24384c !important; }
html[data-theme="light"] body:has(#view-projects.active) #view-projects :is(.project-row-desc,.project-tile p) { color: #61778d !important; }
html[data-theme="light"] body:has(#view-projects.active) #view-projects .campus-ai-collapsible-reasons { background:#e7edf6 !important; border-color:#d8d2ee !important; }
html[data-theme="light"] body:has(#view-projects.active) #view-projects .campus-ai-collapsible-reasons :is(h4,li) { color:#4b4263 !important; }
html[data-theme="light"] body:has(#view-projects.active) #view-projects .campus-ai-rank { color:#42566b !important; background:#e3eef1 !important; border-color:#c3dfe4 !important; }
html[data-theme="light"] body:has(#view-projects.active) #view-projects .campus-ai-rank-first { color:#765b12 !important; background:#fff7df !important; border-color:#eadba7 !important; }
html[data-theme="light"] body:has(#view-projects.active) #view-projects .campus-ai-tags span { color:#08786f !important; background:#ccebed !important; border-color:#aedadd !important; }
html[data-theme="light"] body:has(#view-projects.active) #view-projects .campus-ai-tags.campus-ai-role-tags span { color:#476078 !important; background:#dfedf1 !important; border-color:#c3dfe4 !important; }
html[data-theme="light"] body:has(#view-projects.active) #view-projects :is(.campus-ai-view-project,.campus-ai-reason-toggle) { color:#304a60 !important; background:#deeff2 !important; border-color:#bdd9df !important; }
html[data-theme="light"] .header-search-dropdown :is(.search-dropdown-item,.search-dropdown-item-title) { color: #304a60 !important; background: #eaf6f8 !important; }
html[data-theme="light"] .header-search-dropdown :is(.search-dropdown-item-sub,.search-dropdown-group-title) { color: #61778d !important; }
html[data-theme="light"] :is(.toast,.notifications-dropdown,.header-search-dropdown) { color: #304a60 !important; background: #eaf6f8 !important; border-color: #c3dfe4 !important; }
html[data-theme="light"] .chat-status-pill { color: #08786f !important; background: #ccebed !important; border-color: #aedadd !important; }

/* End Light Mode completion */

/* Shared Research Opportunities header chrome across all routed pages. */
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .top-navbar {
  height:76px;
  min-height:76px;
  flex:0 0 76px;
  padding:0 24px 0 17px;
  align-items:center;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .top-nav-left {
  min-width:0;
  flex:1 1 auto;
  align-items:center;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .header-search-wrap {
  width:min(663px,100%);
  min-width:0;
  flex:0 1 663px;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .header-search-input {
  width:100%;
  height:48px;
  border:1px solid #173147;
  border-radius:11px;
  padding:0 50px;
  font:400 13.5px/1.2 var(--font-sans);
  box-shadow:none;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .header-search-input:focus { width:100%; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .header-search-icon { left:18px; width:20px; height:20px; }
html body.rtl:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .header-search-icon { left:auto; right:18px; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .top-nav-right {
  align-items:center;
  flex:0 0 auto;
  gap:23px;
  margin-left:22px;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .header-icon-btn {
  width:42px;
  height:42px;
  padding:0;
  border:0;
  color:#c3d8e9;
  background:transparent;
  box-shadow:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .header-icon-btn > svg,
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .theme-icon-sun svg,
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .theme-icon-moon svg { width:24px; height:24px; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .top-nav-user { gap:12px; padding:0; border:0; background:transparent; box-shadow:none; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .top-avatar-circle { width:42px; height:42px; border:1px solid #1b2b40; background:#102b4b; font-size:14px; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .user-dropdown-chevron { color:#c3d8e9; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .breadcrumb-tracker { display:none; }
html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .notifications-badge {
  top:3px; right:3px; width:7px; min-width:7px; height:7px; padding:0; overflow:hidden; border:0; background:#14c9b5; font-size:0;
}
html body.rtl:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .notifications-badge { right:auto; left:3px; }

/* Theme glyph reflects the active mode on every page. */
html[data-theme="dark"] .theme-icon-moon { display:flex !important; }
html[data-theme="dark"] .theme-icon-sun { display:none !important; }
html[data-theme="light"] .theme-icon-moon { display:none !important; }
html[data-theme="light"] .theme-icon-sun { display:flex !important; }

@media (min-width:681px) and (max-width:1024px) {
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .top-navbar { height:64px; min-height:64px; flex-basis:64px; padding:0 18px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .header-search-wrap { width:min(440px,100%); flex-basis:440px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .header-search-input { height:44px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .top-nav-right { gap:14px; margin-left:14px; }
}
@media (max-width:680px) {
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .top-navbar { height:60px; min-height:60px; flex-basis:60px; padding:0 12px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .header-search-wrap { width:min(360px,100%); flex-basis:360px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .header-search-input { height:40px; padding:0 42px; font-size:12px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .header-search-icon { left:12px; width:18px; height:18px; }
  html body.rtl:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .header-search-icon { left:auto; right:12px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .top-nav-right { gap:8px; margin-left:8px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .header-icon-btn { width:36px; height:36px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .header-icon-btn > svg,
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .theme-icon-sun svg,
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .theme-icon-moon svg { width:21px; height:21px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .top-avatar-circle { width:36px; height:36px; }
  html body:has(#view-home.active, #view-profile.active, #view-find-team.active, #view-projects.active, #view-project-details.active, #view-research.active, #view-research-details.active, #view-archive.active, #view-messages.active, #view-post-project.active) .top-nav-user { display:inline-flex; }
}

/* Hide only the Research Opportunity Details content scrollbar; scrolling remains enabled. */
html body:has(#view-research-details.active) .main-content {
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html body:has(#view-research-details.active) .main-content::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
}

/* Projects Campus AI recommendations: single-open accordion state. */
html body:has(#view-projects.active) #campusAiRecommendations .campus-ai-recommendation-featured.is-collapsed .campus-ai-featured-reasons,
html body:has(#view-projects.active) #campusAiRecommendations .campus-ai-recommendation-featured.is-collapsed .campus-ai-recommendation-meta > div:nth-child(2) {
  display:none;
}
html body:has(#view-projects.active) #campusAiRecommendations .campus-ai-recommendation-featured.is-collapsed .campus-ai-recommendation-meta {
  margin-bottom:0;
}
html body:has(#view-projects.active) #campusAiRecommendations .campus-ai-recommendation.is-collapsed .campus-ai-rank {
  display:none;
}

/* Keep the three recommendation headers identical in both accordion states. */
html body:has(#view-projects.active) #campusAiRecommendations .campus-ai-recommendation.is-collapsed {
  padding:10px 14px;
}
html body:has(#view-projects.active) #campusAiRecommendations .campus-ai-recommendation .campus-ai-compact-main {
  min-height:50px;
  align-items:center;
}
html body:has(#view-projects.active) #campusAiRecommendations .campus-ai-recommendation .campus-ai-compact-title {
  margin-bottom:5px;
}
html body:has(#view-projects.active) #campusAiRecommendations .campus-ai-recommendation .campus-ai-compact-title .campus-ai-match-score {
  flex:none;
  margin-left:12px;
}
html body:has(#view-projects.active) #campusAiRecommendations .campus-ai-recommendation .campus-ai-reason-toggle {
  margin-left:0;
  align-self:center;
}
html body:has(#view-projects.active) #campusAiRecommendations .campus-ai-recommendation .campus-ai-featured-reasons[hidden],
html body:has(#view-projects.active) #campusAiRecommendations .campus-ai-recommendation .campus-ai-collapsible-reasons[hidden] {
  display:none !important;
}

/* Hide viewport and page-container scrollbars on Research Opportunity Details only. */
html:has(#view-research-details.active),
body:has(#view-research-details.active),
body:has(#view-research-details.active) .app-container,
body:has(#view-research-details.active) .main-wrapper,
body:has(#view-research-details.active) .main-content {
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html:has(#view-research-details.active)::-webkit-scrollbar,
body:has(#view-research-details.active)::-webkit-scrollbar,
body:has(#view-research-details.active) .app-container::-webkit-scrollbar,
body:has(#view-research-details.active) .main-wrapper::-webkit-scrollbar,
body:has(#view-research-details.active) .main-content::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
}