/* ============================
ROOT VARIABLES - THEME COLORS
============================ */
:root {
  /* Dark mode (default) - Blue/Cyan palette */
  --bg-primary: #0a0e17;
  --bg-secondary: #131926;
  --bg-panel: #1a2233;
  --text-primary: #e8edf5;
  --text-secondary: #a0aec0;
  --accent: #22d3ee;
  --accent-hover: #67e8f9;
  --border-color: #2d3748;
  --text-muted: #8a94a6;
  --overlay: rgba(0, 0, 0, 0.6);
}
[data-theme="light"] {
  /* Light mode - Warm palette */
  --bg-primary: #fdf8f3;
  --bg-secondary: #ffffff;
  --bg-panel: #fff5eb;
  --text-primary: #2d2418;
  --text-secondary: #6b5d4f;
  --accent: #e07a3f;
  --accent-hover: #f0965c;
  --border-color: #e8ddd0;
  --text-muted: #9c8b78;
  --overlay: rgba(0, 0, 0, 0.3);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* ==============================================
HEADER
============================================== */
header{
  position: relative;
  z-index: 2000;
  overflow: visible;
}
html{
  overflow-x: hidden;
}
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Segoe UI' system-ui, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
}
/* ============================
NAVBAR
============================ */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2rem;
  background-color: rgba(19, 25, 38, 0.95);
  /* backdrop-filter: blur(14px); */
  /* -webkit-backdrop-filter: blur(14px); */
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background-color 0.3s ease, padding 0.3s ease;
}
[data-theme="light"] .navbar {
  background-color: rgba(255, 255, 255, 0.75);
}
.logo a {
  color: var(--accent);
  font-size: 1.15rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 12px var(--accent);
  transition: text-shadow 0.3s ease;
}
.logo a:hover {
  text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent-hover);
}
/* ============================
HAMBURGER BUTTON
============================ */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1002;
}
.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--text-primary);
  border-radius: 2px;
  transition: all 0.3s ease;
}
.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}
/* ============================
NAV OVERLAY (background dim)
============================ */
.nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nav-overlay.active {
  display: block;
  opacity: 1;
}
/* ============================
NAV LINKS - MOBILE SLIDE-IN PANEL
============================ */
.nav-links {
  list-style: none;
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100vh;
  background-color: var(--bg-panel);
  padding: 5rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  overflow-y: auto;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1001;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
  transform: translateZ(0);
  will-change: right;
}
.nav-links.active {
  right: 0;
}
.nav-links li a,
.nav-links li button {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--text-secondary);
  text-decoration: none;
  background: none;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 0.85rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: color 0.25s ease;
}
.nav-links li a::after,
.nav-links li button::after {
  content: '';
  position:absolute;
  left: 0.5rem;
  bottom: 4px;
  width: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  transition: width 0.25s ease;
}
.nav-links li a:hover,
.nav-links li button:hover,
.nav-links li a:active {
  background-color: transparent;
  color: var(--accent);
}
.nav-links li a:hover::after,
.nav-links li button:hover::after,
.nav-links li a:active::after,
.nav-links li button:active::after {
  width: calc(100% - 1rem);
}
/* ============================
DEPARTMENTS DROPDOWN (mobile: accordion style)
============================ */
.dropdown {
  position: relative;
}
.dropdown-toggle {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}
.dropdown-toggle .arrow {
  transition: transform 0.3s ease;
}
.dropdown-toggle.open .arrow {
  transform: rotate(180deg);
}
.dropdown-menu {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  padding-left: 1rem;
  transition: max-height 0.35s ease;
}
.dropdown-menu.open {
  max-height: 500px;
}
.dropdown-menu li a {
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: 0.6rem 0.5rem;
}
/* ============================
THEME TOGGLE BUTTON
=========================== */
.theme-toggle-item {
  margin-top: 1rem;
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
}
#themeToggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 0.7rem;
  border-radius: 10px;
}
.theme-icon {
  font-size: 1.2rem;
}
/* ============================
DESKTOP OVERRIDE (screens > 900px)
============================ */
@media (min-width: 900px) {
  .hamburger {
    display: none;
  }
  .nav-overlay {
    display: none !important;
  }
  .nav-links {
    position: static;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    background: none;
    padding: 0;
    box-shadow: none;
    gap: 0.5rem;
    overflow: visible;
  }
  .nav-links li {
    position: relative;
  }
  .nav-links li a,
  .nav-links li button {
    white-space: nowrap;
    padding: 0.5rem 0.9rem;
  }
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    max-height: none;
    overflow: visible;
    display: none;
    padding: 0.6rem;
    list-style: none;
    z-index: 1500;
  }
  .dropdown-menu.open {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  .dropdown-menu li a {
    display: block;
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
  }
  .dropdown-menu li a:hover {
    background-color: var(--bg-secondary);
    color: var(--accent);
  }
  .dropdown:hover .dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  .theme-toggle-item {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
  }
  #themeToggle {
    padding: 0.5rem 0.7rem;
  }
}
/* ======================================
GLOBAL PRESENCE MAP SECTION
====================================== */
.global-presence {
  width: 100%;
  padding: 4rem 1.5rem;
  text-align: center;
  background-color: var(--bg-primary);
  box-sizing: border-box;
}
.section-title {
  font-size: 2rem;
  color: var(--accent);
}
.section-subtitle {
  color: var(--text-secondary);
  margin-bottom: 3rem;
}
.world-map-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 2/1;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}
.world-map-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.map-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  scale: 0.5;
  transition: opacity 0.6s ease, scale 0.6s ease;
}
.map-marker.visible {
  opacity: 1;
  scale: 1;
}
.marker-dot {
  width: 14px;
  height: 14px;
  background-color: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.6);}
  70% { box-shadow: 0 0 0 14px rgba(34, 211, 238, 0);}
  100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);}
}
.marker-label {
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: var(--text-primary);
  background-color: var(--bg-panel);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  white-space: nowrap;
  border: 1px solid var(--border-color);
}
@media (max-width: 600px) {
  .marker-label {
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
  }
  .world-map-container {
    aspect-ratio: 4/3;
  }
  .global-presence {
    padding: 2.5rem 1rem;
  }
}
/* ===================================
FUTURE LOCATIONS (Coming Soon)
=================================== */
.future-dot {
  background-color: var(--text-secondary);
  animation: none;
  opacity: 0.6;
}
.map-marker.future .marker-label {
  color: var(--text-secondary);
  border-style: dashed;
  opacity: 0.75;
}
.map-marker.future .marker-label em{
  font-style: italic;
  font-size: 0.65rem;
  color: var(--accent);
}
/* ======================================
BEAR TOGGLE ANIMATION
====================================== */
#bearArm {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  transform: rotate(20deg);
  transition: transform 0.5s ease;
}
#bearGlow {
  transition: opacity 0.4s ease;
}
[data-theme="light"] #bearArm {
  transform: rotate(-25deg);
}
[data-theme="light"] #bearGlow {
  opacity: 0.5;
}
/* ==========================================
ANIMATED OCEAN & CONTINENTS
========================================== */
.ocean-rect {
  fill: var(--ocean-color-1);
  animation: oceanPulse 2s ease-in-out infinite;
}
@keyframes oceanPulse {
  0%, 100% { fill: var(--ocean-color-1); }
  50% { fill: var(--ocean-color-2);}
}
/* ===========================================
CLOUDS (simulated with blurred shapes)
=========================================== */
.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}
.cloud-1 {
  width: 140px;
  height: 40px;
  top: 15%;
  left: -20%;
  animation: driftCloud 45s linear infinite;
}
.cloud-2 {
  width: 200px;
  height: 55px;
  top: 45%;
  left: -25%;
  animation: driftCloud 65s linear infinite;
  animation-delay: -15s;
}
.cloud-3 {
  width: 100px;
  height: 30px;
  top: 70%;
  left: -15%;
  animation: driftCloud 55s linear infinite;
  animation-delay: -30s;
}
.cloud-4 {
  width: 180px;
  height: 37px;
  top: 60%;
  left: -10%;
  animation: driftCloud 50s linear infinite;
  animation-delay: -35s;
}
.cloud-5 {
  width: 130px;
  height: 46px;
  top: 50%;
  left: -13%;
  animation: driftCloud 70s linear infinite;
  animation-delay: -40s;
}
.cloud-6 {
  width: 250px;
  height: 40px;
  top: 450%;
  left: -35%;
  animation: driftCloud 59s linear infinite;
  animation-delay: -10s;
}
@keyframes driftCloud {
  from { transform: translateX(0);}
  to { transform: translateX(1400px);}
}
/* ================================================
MAP THEME - GREEN CONTINENTS + ANIMATED WATER
================================================ */
:root {
  --ocean-color-1: #0a2e42;
  --ocean-color-2: #0d3b52;
  --land-color: #1f4d3a;
  --land-highlight: #2d6b4f;
  --land-shadow: #12331f;
}
[data-theme="light"] {
  --ocean-color-1: #7ec4d8;
  --ocean-color-2: #a8d4e0;
  --land-color: #4a8f5c;
  --land-highlight: #6bb37d;
  --land-shadow: #2f5f3c;
}
.world-map-container {
  background: linear-gradient(135deg, var(--ocean-color-1), var(--ocean-color-2));
  background-size: 300% 300%;
  animation: oceanShift 12s ease infinite;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.025);
}
[data-theme="light"] .world-map-container {
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.08), 0 10px 30px rgba(0, 0, 0, 0.1);
}
@keyframes oceanShift {
  0%, 100% { background-position: 0% 50%;}
  50% { background-position: 100% 50%;}
}
.continent {
  fill: var(--land-color);
  stroke: var(--land-highlight);
  stroke-width: 1.5;
  filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.35));
}
[data-theme="light"] .continent {
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
}
.mountain-line {
  stroke: var(--land-shadow);
  stroke-width: 1;
  fill: none;
  opacity: 0.6;
}
.continent-label {
  fill: var(--accent);
  font-family: Segoe UI, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: var(--bg-primary);
  stroke-width: 3px;
  stroke-linejoin: round;
}
[data-theme="light"] .continent-label {
  fill: var(--land-shadow);
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 3px;
}
.wave-line {
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 2;
  fill: none;
  animation: waveMove 6s linear infinite;
}
.wave-line:nth-child(2) {
  animation-duration: 8s;
  stroke: rgba(255, 255, 255, 0.15);
}
@keyframes waveMove {
  0% { stroke-dashoffset: 0;}
  100% {stroke-dashoffset: -100;}
}
/* ===================================
ABOUT PAGE TABS (01 Mission · 02 Vision · 03 Board · 04 Leadership · 05 Department Directors · 06 Volunteers)
Mirrors the tab + animated underline pattern from Studio Legion's sl-tabs, fully theme-aware.
On narrow screens the bar scrolls sideways instead of wrapping.
=================================== */
.about-tabs-wrap {
  max-width: 1100px;
  margin: 0 auto 2rem;
  padding: 0 1.5rem;
}
.about-tabs-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.about-tabs-scroll::-webkit-scrollbar { display: none; }
.about-tabs-track {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  min-width: 100%;
}
.about-tabs {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: nowrap;
}
.about-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 0.25rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s ease;
}
.about-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.about-tab-num {
  color: var(--accent);
  margin-right: 0.4rem;
}
.about-tab.active,
.about-tab:hover {
  color: var(--text-primary);
}
.about-tab-line {
  position: relative;
  height: 2px;
  background: var(--border-color);
  margin-top: -1px;
}
.about-tab-line-fill {
  position: absolute;
  top: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  transition: left 0.3s ease, width 0.3s ease;
}
.about-panel {
  display: none;
  animation: aboutPanelIn 0.4s ease;
}
.about-panel.active {
  display: block;
}
@keyframes aboutPanelIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .about-tabs { justify-content: flex-start; gap: 1.4rem; padding: 0 0.25rem; }
  .about-tab { font-size: 0.85rem; }
}
/* ===================================
MISSION two-column text layout
=================================== */
.mission-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 2.5rem auto 0;
  padding: 0 1.5rem;
}
.mission-col h3 {
  color: var(--accent);
  font-size: 1.05rem;
  margin-bottom: 0.9rem;
}
.mission-col p {
  color: var(--text-primary);
  line-height: 1.7;
  font-size: 0.94rem;
  margin-bottom: 1.3rem;
}
.mission-group-label {
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 1.3rem 0 0.4rem;
}
.mission-list {
  list-style: none;
}
.mission-list li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border-color);
}
.mission-list li:last-child {
  border-bottom: none;
}
.mission-list-term {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
}
.mission-list-desc {
  color: var(--text-muted);
  font-size: 0.83rem;
  margin-top: 0.15rem;
}
.mission-tag {
  display: inline-block;
  font-size: 0.65rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 0.1rem 0.55rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}
@media (max-width: 760px) {
  .mission-columns {
    grid-template-columns: 1fr;
  }
}
/* ===================================
Hover focuses/enlarges a card; click expands it into a
media | typewriter-text split, dimming the other cards.
=================================== */
.vision-card-row {
  display: flex;
  gap: 1rem;
  max-width: 1100px;
  margin: 2rem auto 0;
  padding: 0 1.5rem;
  height: 380px;
}
.vision-card {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  transition: flex 0.4s ease, opacity 0.3s ease, border-color 0.3s ease;
}
.vision-card-media {
  position: absolute;
  inset: 0;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: center;
  padding: 0.5rem;
}
.vision-card-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1rem 1.1rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
}
.vision-card-label h3 {
  color: #fff;
  font-size: 0.95rem;
}
.vision-card-text-panel {
  display: none;
}
.vision-card-close {
  display: none;
}
.vision-card-row:hover .vision-card:not(:hover):not(.active) {
  opacity: 0.55;
}
.vision-card:hover:not(.active) {
  flex: 1.6;
  border-color: var(--accent);
}
.vision-card.dimmed {
  flex: 0.5;
  opacity: 0.4;
}
.vision-card.active {
  flex: 4;
  display: flex;
  align-items: stretch;
  cursor: default;
  border-color: var(--accent);
}
.vision-card.active .vision-card-media {
  position: relative;
  inset: auto;
  width: 45%;
  flex-shrink: 0;
}
.vision-card.active .vision-card-label {
  display: none;
}
.vision-card.active .vision-card-text-panel {
  display: block;
  width: 55%;
  padding: 1.5rem;
  overflow-y: auto;
  color: var(--text-primary);
  line-height: 1.7;
}
.vision-card.active .vision-card-text-panel h3 {
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.vision-card.active .vision-card-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
}
@media (max-width: 700px) {
  .vision-card-row {
    flex-direction: column;
    height: auto;
  }
  .vision-card {
    height: 110px;
  }
  .vision-card.active {
    flex-direction: column;
    height: auto;
  }
  .vision-card.active .vision-card-media {
    width: 100%;
    height: 180px;
  }
  .vision-card.active .vision-card-text-panel {
    width: 100%;
  }
}
/* ===================================
ABOUT · PEOPLE (Board · Leadership · Department Directors · Volunteers)
Same system as Studio Legion's board, in this site's theme variables (dark and light):
hover or first tap activates the card (photo fades into the video, LIVE pulses, Know More
appears), click or second tap opens the profile with the bio typed letter by letter.
=================================== */
.people-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}
.people-title {
  color: var(--text-primary);
  font-size: 1.9rem;
  margin: 1rem 0 0.5rem;
}
.people-hint {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 2rem auto 3rem;
  padding: 0 1.5rem;
}
.people-grid-sm {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.25rem;
}
.people-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  padding: 3rem 1rem;
  border: 1px dashed var(--border-color);
  border-radius: 16px;
  background: var(--bg-panel);
}
/* card */
.person-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  transition: border-color 0.3s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.person-card.hovered,
.person-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 22%, transparent);
  z-index: 2;
}
.person-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--bg-secondary);
  overflow: hidden;
}
.person-card-sm .person-media { aspect-ratio: 1 / 1; }
.person-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: radial-gradient(circle at 50% 40%, var(--bg-panel), var(--bg-secondary) 70%);
}
.person-photo,
.person-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transition: opacity 0.4s ease;
}
/* the photo gives way to the video only once the video is really playing */
.person-video { opacity: 0; }
.person-card.playing .person-video { opacity: 1; }
.person-card.playing .person-photo { opacity: 0; }
.person-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e8edf5;
  transition: all 0.3s ease;
}
.person-card.hovered .person-badge,
.person-card:focus-visible .person-badge {
  background: rgba(246, 74, 74, 0.15);
  border-color: rgba(246, 74, 74, 0.55);
  color: #f64a4a;
  box-shadow: 0 0 10px rgba(246, 74, 74, 0.3);
  animation: person-live 1s infinite;
}
@keyframes person-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.person-glitch {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px,
    color-mix(in srgb, var(--accent) 6%, transparent) 2px, color-mix(in srgb, var(--accent) 6%, transparent) 3px);
}
.person-card.hovered .person-glitch { opacity: 1; }
.person-sound {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 4;
  transform: translateX(-50%);
  display: none;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
}
.person-card.needs-sound .person-sound { display: block; }
.person-body {
  padding: 1.2rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.person-body h3 {
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0;
}
.person-card-sm .person-body h3 { font-size: 0.92rem; }
.person-role {
  color: var(--accent);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  margin: 0;
}
.person-place,
.person-email {
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.person-place::before { content: '📍 '; }
.person-dept {
  align-self: flex-start;
  margin-top: 0.35rem;
  font-size: 0.7rem;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
a.person-dept:hover { color: var(--accent); border-color: var(--accent); }
.person-more {
  margin-top: 0.6rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.person-card.hovered .person-more,
.person-card:focus-visible .person-more {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.person-more-btn {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.person-more-btn:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 25%, transparent);
}
.people-cta {
  max-width: 640px;
  margin: 0 auto 4rem;
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
}
.people-cta p {
  color: var(--text-secondary);
  margin-bottom: 1rem;
}
.people-cta-btn {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  background: var(--accent);
  color: #000;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}
.people-cta-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 18px var(--accent);
}
/* profile modal */
.person-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  visibility: hidden;
  transition: background 0.35s ease, visibility 0s 0.35s;
}
.person-modal-overlay.open {
  background: rgba(0, 0, 0, 0.75);
  pointer-events: auto;
  visibility: visible;
  transition: background 0.35s ease;
}
.person-modal {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  width: min(880px, 100%);
  max-height: 88vh;
  overflow: hidden;
  background: var(--bg-primary);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border-color));
  border-radius: 20px;
  box-shadow: 0 0 50px color-mix(in srgb, var(--accent) 14%, transparent), 0 20px 50px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.person-modal-overlay.open .person-modal {
  opacity: 1;
  transform: scale(1);
}
.person-modal-glitch {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px,
    color-mix(in srgb, var(--accent) 4%, transparent) 3px, color-mix(in srgb, var(--accent) 4%, transparent) 4px);
}
.person-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.person-modal-close:hover,
.person-modal-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}
.person-modal-side {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
}
.person-modal-media {
  position: relative;
  aspect-ratio: 4 / 5;
  flex-shrink: 0;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.person-modal-media video,
.person-modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  background: #000;
}
.person-modal-initials {
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.person-modal-identity {
  padding: 1.2rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.person-modal-identity h3 {
  color: var(--text-primary);
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0;
}
.person-modal-role {
  color: var(--accent);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  margin: 0;
}
.person-modal-place {
  color: var(--text-secondary);
  font-size: 0.74rem;
  margin: 0;
}
.person-modal-place::before { content: '📍 '; }
.person-modal-email {
  color: var(--text-secondary);
  font-size: 0.74rem;
  text-decoration: none;
  word-break: break-all;
}
.person-modal-email:hover { color: var(--accent); }
.person-modal-text {
  position: relative;
  z-index: 1;
  padding: 2.2rem 2rem 2rem;
  overflow-y: auto;
}
.person-modal-tag {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  margin: 0 0 1rem;
}
.person-modal-bio {
  color: var(--text-primary);
  line-height: 1.8;
  font-size: 0.93rem;
  white-space: pre-line;
  min-height: 120px;
  cursor: text;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 760px) {
  .person-modal {
    display: block;
    max-height: 92vh;
    overflow-y: auto;
  }
  .person-modal-side { border-right: 0; border-bottom: 1px solid var(--border-color); overflow: visible; }
  .person-modal-media { aspect-ratio: 4 / 3; }
  .person-modal-text { overflow: visible; padding: 1.4rem 1.2rem 1.6rem; }
  .people-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; padding: 0 1rem; }
  .people-grid-sm { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .person-body { padding: 0.8rem 0.85rem 1rem; }
  .person-body h3 { font-size: 0.9rem; }
  .person-initials { font-size: 2rem; }
  .person-card.hovered { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .about-panel, .person-card, .person-modal, .person-video, .person-photo, .person-more, .person-badge { animation: none !important; transition: none !important; }
}
/* ============================
DEPARTMENT PAGES MODULE (shared across all department pages)
============================ */
.dept-canvas-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
}
.dept-badge {
  display: block;
  width: fit-content;
  margin: 10px auto 30px auto;
  padding: 6px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}
.dept-section-title {
  text-align: center;
  max-width: 700px;
  margin: 60px auto 10px auto;
  font-size: 1.9rem;
  color: var(--text-primary);
}
.dept-section-hint {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 40px;
  font-size: 0.95rem;
}
/* ---- Card Row (services / team) ---- */
.dept-card-row {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 40px 30px 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.dept-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dept-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 242, 254, 0.15);
}
.dept-card.zoomed {
  transform: scale(1.04);
  box-shadow: 0 0 0 2px var(--accent), 0 20px 40px rgba(0, 0, 0, 0.4);
}
.dept-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: center;
  padding: 10px;
}
.dept-card-body {
  padding: 18px;
}
.dept-card-body h3 {
  font-size: 1.05rem;
  color: var(--accent);
  margin-bottom: 8px;
}
.dept-card-body p {
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 14px;
}
.dept-card-btn {
  font-size: 0.85rem;
  font-weight: 600;
  color: #000;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: filter 0.2s ease;
}
.dept-card-btn:hover {
  filter: brightness(1.15);
}
/* ---- Detail Block ---- */
.dept-detail-block {
  max-width: 1100px;
  margin: 0 auto 80px auto;
  padding: 0 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.dept-detail-block.visible {
  opacity: 1;
  transform: translateY(0);
}
.dept-detail-block.reverse {
  direction: rtl;
}
.dept-detail-block.reverse > * {
  direction: ltr;
}
.dept-detail-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-panel);
  border: 1px dashed var(--border-color);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
}
.dept-detail-text h3 {
  font-size: 1.6rem;
  color: var(--accent);
  margin-bottom: 14px;
}
.dept-detail-text p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.dept-detail-text .dept-credentials {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 14px;
  line-height: 1.6;
}
@media (max-width: 800px) {
  .dept-detail-block {
    grid-template-columns: 1fr;
  }
}
/* ---- Hours ---- */
.dept-hours {
  max-width: 600px;
  margin: 0 auto 60px auto;
  text-align: center;
  padding: 30px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 14px;
}
.dept-hours h3 {
  color: var(--accent);
  margin-bottom: 10px;
}
.dept-hours p {
  color: var(--text-primary);
  line-height: 1.6;
}
/* ---- Confidentiality Note ---- */
.dept-confidentiality-note {
  max-width: 700px;
  margin: 0 auto 80px auto;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0 20px;
  line-height: 1.6;
}
/* ---- Interactive canvas hint (used on pages where the canvas is clickable) ---- */
.dept-canvas-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  padding: 6px 14px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.9;
  white-space: nowrap;
}
/* ---- Featured interactive canvas "stage" (contained, not full-page) ---- */
.dept-infinity-stage {
  position: relative;
  max-width: 950px;
  height: 460px;
  margin: 10px auto 30px auto;
}
.dept-infinity-stage canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.dept-infinity-stage canvas.scattered {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1;
}
@media (max-width: 700px) {
  .dept-infinity-stage {
    height: 340px;
  }
}
/* ====================================================================================================================================================================================================================================================================================================================================================================================================================================
MARKETING DEPARTMENT standalone creative page (kept separate from departments.css/style.css since this page intentionally breaks from the clinical template; own file, own variables). Light/dark: listens to the same data-theme="light" attribute that app.js sets on <html> (shared toggle), but defines its own --mkt-* variable set so it never touches style.css's --bg-primary/--accent variables used by the other departments.
===================================================================================================================================================================================================================================================================================================================================================================================================================================== */
.mkt-body {
  /* ---- Dark mode (default) ---- */
  --mkt-bg: #0a0a0c;
  --mkt-bg-alt: #121014;
  --mkt-text-primary: #ffffff;
  --mkt-text-secondary: #d8d8e0;
  --mkt-text-muted: #8b8b96;
  --mkt-text-dim: #55535e;
  --mkt-footer-text: #6b6b76;
  --mkt-accent-pink: #ff2ee6;
  --mkt-accent-cyan: #4dd4e8;
  --mkt-accent-violet: #a78bfa;
  --mkt-accent-orange: #ffa733;
  --mkt-accent-green: #7ef29c;
  --mkt-glow-pink: rgba(255,46,230,0.5);
  --mkt-glow-cyan: rgba(77,212,232,0.5);
  --mkt-glow-violet: rgba(167,139,250,0.5);
  --mkt-glow-orange-border: rgba(255,167,51,0.35);
  --mkt-glow-orange-shadow: rgba(255,167,51,0.12);
  --mkt-glow-green-border: rgba(126,242,156,0.35);
  --mkt-glow-green-shadow: rgba(126,242,156,0.12);
  --mkt-glow-pink-border: rgba(255,46,230,0.35);
  --mkt-glow-pink-shadow: rgba(255,46,230,0.12);
  --mkt-glow-cyan-border: rgba(77,212,232,0.35);
  --mkt-glow-cyan-shadow: rgba(77,212,232,0.12);
  --mkt-card-bg-1: #1a1820;
  --mkt-card-bg-2: #0e0d10;
  --mkt-border: rgba(255,255,255,0.08);
  --mkt-border-strong: rgba(255,255,255,0.1);
  --mkt-border-bio: rgba(255,46,230,0.3);
  --mkt-navbar-bg: rgba(10,10,12,0.85);
  --mkt-hero-noise-1: rgba(255,255,255,0.03);
  --mkt-hero-noise-2: rgba(255,255,255,0.025);
  --mkt-hero-overlay-mid: rgba(10,10,12,0.4);
  --mkt-hero-overlay-end: rgba(10,10,12,0.85);
  background: var(--mkt-bg);
  background-image:
  radial-gradient(circle at 20% 20%, var(--mkt-hero-noise-1) 0%, transparent 40%),
  radial-gradient(circle at 80% 60%, var(--mkt-hero-noise-2) 0%, transparent 45%),
  linear-gradient(180deg, var(--mkt-bg) 0%, var(--mkt-bg-alt) 100%);
  transition: background-color 0.3s ease, color 0.3s ease;
}
/* ---- Light mode override ---- */
/* Marketing intentionally ignores the site's light/dark toggle the neon creative-agency look is the department's identity and always renders dark, the same way Cybersecurity's terminal look always renders dark regardless of data-theme. */
/* ---- Fixed navbar: stays put, page scrolls under it ---- */
.mkt-body .navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--mkt-navbar-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.3s ease;
}
/* ---- Hero: video/dark rock texture, neon headline ---- */
.mkt-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 40px 20px;
  padding-top: 110px; /* clears the fixed navbar; adjust to match real navbar height */
}
.mkt-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.mkt-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--mkt-hero-overlay-mid) 0%,
  var(--mkt-hero-overlay-end) 80%, var(--mkt-bg) 100%);
}
.mkt-hero-content {
  position: relative;
  z-index: 2;
}
.mkt-eyebrow {
  color: var(--mkt-accent-cyan);
  letter-spacing: 0.25em;
  font-size: 0.8rem;
  text-transform: uppercase;
  text-shadow: 0 0 12px var(--mkt-glow-cyan);
}
.mkt-title {
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 800;
  margin: 10px 0;
  color: var(--mkt-text-primary);
  text-shadow:
  0 0 8px var(--mkt-glow-pink),
  0 0 22px var(--mkt-glow-pink),
  0 0 45px var(--mkt-glow-cyan);
  letter-spacing: 0.02em;
}
.mkt-subtitle {
  font-size: 1.15rem;
  color: var(--mkt-text-secondary);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
}
.mkt-scroll-cue {
  margin-top: 40px;
  font-size: 0.75rem;
  color: var(--mkt-text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}
/* =================================================================================================================================================================================================================================================================================================
PIN-STAGE: Wix-style scroll behavior. Each .pin-stage is a tall scroll track. Its .pin-inner sticks to the viewport (navbar stays fixed above it, untouched) while the content inside fades in during the first part of the track, then holds fully visible until the stage releases into the next.
================================================================================================================================================================================================================================================================================================= */
.pin-stage {
  position: relative;
  height: 260vh; /* scroll distance the pin lasts for; ~35% fade-in, rest is a held pause before
  release */
}
.pin-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* content rises + fades in as --progress goes 0 -> 1, driven by marketing.js */
.mkt-reveal,
.mkt-feature-block {
  opacity: var(--progress, 0);
  transform: translateY(calc((1 - var(--progress, 0)) * 60px));
}
/* ---- Scroll-pinned statement blocks ---- */
.mkt-reveal {
  max-width: 760px;
  padding: 0 24px;
  text-align: center;
}
.mkt-reveal h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--mkt-text-primary);
  line-height: 1.3;
}
.mkt-reveal h2 .accent-pink { color: var(--mkt-accent-pink); text-shadow: 0 0 18px
  var(--mkt-glow-pink); }
.mkt-reveal h2 .accent-cyan { color: var(--mkt-accent-cyan); text-shadow: 0 0 18px
  var(--mkt-glow-cyan); }
.mkt-reveal h2 .accent-violet { color: var(--mkt-accent-violet); text-shadow: 0 0 18px
  var(--mkt-glow-violet); }
.mkt-reveal p {
  color: var(--mkt-text-secondary);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-top: 18px;
}
/* ---- Portfolio: pinned stacked cards ---- */
.mkt-section-title {
  text-align: center;
  color: var(--mkt-text-primary);
  font-size: 2rem;
  margin: 0 auto 6px auto;
  padding-top: 40px;
}
.mkt-section-note {
  text-align: center;
  color: var(--mkt-text-muted);
  font-size: 0.85rem;
  max-width: 620px;
  margin: 0 auto 60px auto;
  line-height: 1.6;
  padding: 0 24px;
}
.mkt-feature-block {
  max-width: 1100px;
  width: 100%;
  padding: 0 30px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 55px;
  align-items: center;
}
.mkt-feature-block.reverse {
  direction: rtl;
}
.mkt-feature-block.reverse > * {
  direction: ltr;
}
.mkt-feature-media {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(160deg, var(--mkt-card-bg-1) 0%, var(--mkt-card-bg-2)
  100%);
  border: 1px solid var(--mkt-border-strong);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mkt-text-dim);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.mkt-feature-block[data-glow="pink"] .mkt-feature-media { border-color:
  var(--mkt-glow-pink-border); box-shadow: 0 0 40px var(--mkt-glow-pink-shadow); }
.mkt-feature-block[data-glow="cyan"] .mkt-feature-media { border-color:
  var(--mkt-glow-cyan-border); box-shadow: 0 0 40px var(--mkt-glow-cyan-shadow); }
.mkt-feature-block[data-glow="orange"] .mkt-feature-media { border-color:
  var(--mkt-glow-orange-border); box-shadow: 0 0 40px var(--mkt-glow-orange-shadow); }
.mkt-feature-block[data-glow="green"] .mkt-feature-media { border-color:
  var(--mkt-glow-green-border); box-shadow: 0 0 40px var(--mkt-glow-green-shadow); }
.mkt-feature-text .mkt-client {
  font-size: 2rem;
  font-weight: 800;
  color: var(--mkt-text-primary);
  margin-bottom: 6px;
}
.mkt-feature-block[data-glow="pink"] .mkt-client { text-shadow: 0 0 20px var(--mkt-glow-pink);
}
.mkt-feature-block[data-glow="cyan"] .mkt-client { text-shadow: 0 0 20px
  var(--mkt-glow-cyan); }
.mkt-feature-block[data-glow="orange"] .mkt-client { text-shadow: 0 0 20px
  var(--mkt-glow-orange-shadow); }
.mkt-feature-block[data-glow="green"] .mkt-client { text-shadow: 0 0 20px
  var(--mkt-glow-green-shadow); }
.mkt-feature-text .mkt-campaign {
  font-size: 1.15rem;
  color: var(--mkt-text-secondary);
  margin-bottom: 16px;
}
.mkt-feature-text .mkt-agency-tag {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--mkt-text-muted);
  border: 1px solid var(--mkt-border-strong);
  border-radius: 999px;
  padding: 4px 12px;
}
@media (max-width: 800px) {
  .mkt-feature-block, .mkt-feature-block.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
}
/* ---- What We Do ---- */
.mkt-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto 100px auto;
  padding: 0 30px;
}
.mkt-service {
  background: linear-gradient(160deg, var(--mkt-card-bg-1) 0%, var(--mkt-card-bg-2)
  100%);
  border: 1px solid var(--mkt-border);
  border-radius: 16px;
  padding: 26px 22px;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.mkt-service h3 {
  color: var(--mkt-accent-pink);
  font-size: 1.1rem;
  margin-bottom: 10px;
  text-shadow: 0 0 10px var(--mkt-glow-pink-shadow);
}
.mkt-service p {
  color: var(--mkt-text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
}
/* ---- Team / bio ---- */
.mkt-bio-block {
  max-width: 1000px;
  margin: 0 auto 100px auto;
  padding: 0 30px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 50px;
  align-items: center;
}
.mkt-bio-media {
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, var(--mkt-card-bg-1) 0%, var(--mkt-card-bg-2)
  100%);
  border: 1px solid var(--mkt-border-bio);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mkt-text-dim);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.mkt-bio-text h3 {
  font-size: 1.7rem;
  color: var(--mkt-text-primary);
  margin-bottom: 6px;
}
.mkt-bio-text .mkt-role {
  color: var(--mkt-accent-cyan);
  font-size: 0.95rem;
  margin-bottom: 18px;
  text-shadow: 0 0 10px var(--mkt-glow-cyan-shadow);
}
.mkt-bio-text p {
  color: var(--mkt-text-secondary);
  line-height: 1.75;
  margin-bottom: 14px;
}
.mkt-bio-text .dept-credentials {
  color: var(--mkt-footer-text);
  font-size: 0.85rem;
}
@media (max-width: 800px) {
  .mkt-bio-block { grid-template-columns: 1fr; }
}
.mkt-footer {
  text-align: center;
  color: var(--mkt-footer-text);
  font-size: 0.85rem;
  padding: 40px 30px 70px 30px;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}
/* ==================================================================================================================================================================================
CYBERSECURITY DEPARTMENT standalone terminal/matrix page. Own file, own variables (--cyb-*), separate from style.css/app.js and from marketing.css, same way marketing was split off.
=================================================================================================================================================================================== */
.cyber-body {
  /* ---- Dark mode (default): classic black terminal ---- */
  --cyb-bg: #050805;
  --cyb-bg-alt: #0a0f0a;
  --cyb-terminal-bg: #060a06;
  --cyb-terminal-bar: #0f1a10;
  --cyb-text: #4dff8f;
  --cyb-text-dim: #2f9c5c;
  --cyb-text-bright: #b6ffce;
  --cyb-border: rgba(77,255,143,0.35);
  --cyb-border-soft: rgba(77,255,143,0.15);
  --cyb-glow: rgba(77,255,143,0.55);
  --cyb-canvas-alpha: 0.55;
  --cyb-canvas-fade: rgba(5,8,5,0.14);
  --cyb-canvas-text: #2f9c5c;
  --cyb-canvas-bright: #7dffb0;
  --cyb-overlay-scrim: rgba(5,8,5,0.6);
  --cyb-navbar-bg: rgba(5,8,5,0.85);
  --cyb-scanline: rgba(77,255,143,0.03);
  background: var(--cyb-bg);
  color: var(--cyb-text);
  font-family: 'Courier New', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  position: relative;
}
/* ---- Light mode: paper terminal screens stay dark, page lightens around them ---- */
/* Cybersecurity intentionally ignores the site's light/dark toggle a terminal/matrix aesthetic reads as a dark-mode-only interface, the same way a real IDE or terminal app doesn't switch to a white background. It always renders dark regardless of data-theme. */
/* =========================================================================================================================================================================================================
MATRIX CANVAS full-viewport fixed background, behind content. Driven by cybersecurity.js; color/density read from --cyb-* vars so light and dark mode both stay legible instead of one washing the other out.
========================================================================================================================================================================================================== */
.cyber-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: var(--cyb-bg);
}
.cyber-scanlines {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(
  180deg,
  var(--cyb-scanline) 0px,
  var(--cyb-scanline) 1px,
  transparent 2px,
  transparent 4px
  );
}
.cyber-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--cyb-overlay-scrim);
}
/* ---- Fixed navbar: stays put, page scrolls under it ---- */
.cyber-body .navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--cyb-navbar-bg);
  border-bottom: 1px solid var(--cyb-border-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* ============================================================
TERMINAL WINDOW shared building block for cards/bio/hours
============================================================ */
.cyber-window,
.cyber-hours {
  background: var(--cyb-terminal-bg);
  border: 1px solid var(--cyb-border);
  border-radius: 10px;
  box-shadow: 0 0 30px var(--cyb-glow), 0 10px 30px rgba(0,0,0,0.4);
  overflow: hidden;
}
.cyber-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--cyb-terminal-bar);
  border-bottom: 1px solid var(--cyb-border-soft);
}
.cyber-window-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyb-text-dim);
  opacity: 0.6;
}
.cyber-window-bar p {
  margin-left: 8px;
  font-size: 0.75rem;
  color: var(--cyb-text-dim);
  letter-spacing: 0.05em;
}
.cyber-window-body {
  padding: 22px;
}
/* ---- Hero ---- */
.cyber-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  padding-top: 110px; /* clears the fixed navbar; adjust to match real navbar height */
}
.cyber-eyebrow {
  color: var(--cyb-text-dim);
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  min-height: 1.2em;
}
.cyber-title {
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  font-weight: 800;
  margin: 14px 0;
  color: var(--cyb-text-bright);
  text-shadow: 0 0 12px var(--cyb-glow), 0 0 30px var(--cyb-glow);
  letter-spacing: 0.02em;
}
.cyber-subtitle {
  font-size: 1.05rem;
  color: var(--cyb-text);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
  min-height: 1.6em;
}
.cyber-badge {
  display: inline-block;
  margin-top: 26px;
  padding: 6px 18px;
  border: 1px solid var(--cyb-border);
  border-radius: 999px;
  color: var(--cyb-text);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
/* ---- Typewriter cursor: blinks at the end of text being typed ---- */
[data-typewriter].is-typing::after {
  content: '_';
  animation: cyber-blink 0.9s steps(1) infinite;
  color: var(--cyb-text-bright);
}
@keyframes cyber-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
/* ---- Sections ---- */
.cyber-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 30px;
}
.cyber-section-title {
  text-align: center;
  color: var(--cyb-text-bright);
  font-size: 1.8rem;
  margin: 0 auto 8px auto;
  min-height: 1.3em;
}
.cyber-section-note {
  text-align: center;
  color: var(--cyb-text-dim);
  font-size: 0.9rem;
  max-width: 620px;
  margin: 0 auto 40px auto;
  line-height: 1.6;
  min-height: 1.4em;
}
/* ---- Services grid ---- */
.cyber-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.cyber-window-body h3 {
  color: var(--cyb-text-bright);
  font-size: 1.05rem;
  margin-bottom: 10px;
  min-height: 1.3em;
}
.cyber-window-body p {
  color: var(--cyb-text);
  font-size: 0.9rem;
  line-height: 1.6;
  min-height: 1.6em;
}
/* ---- Director bio ---- */
.cyber-bio-block {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: start;
}
.cyber-bio-media {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--cyb-border);
  box-shadow: 0 0 30px var(--cyb-glow);
}
.cyber-bio-photo {
  aspect-ratio: 3/4;
  background: var(--cyb-terminal-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyb-text-dim);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
}
.cyber-bio-text h3 {
  font-size: 1.5rem;
  color: var(--cyb-text-bright);
  margin-bottom: 6px;
}
.cyber-bio-text .cyber-role {
  color: var(--cyb-text-dim);
  font-size: 0.9rem;
  margin-bottom: 18px;
}
.cyber-bio-text p {
  color: var(--cyb-text);
  line-height: 1.75;
  margin-bottom: 14px;
  min-height: 1.75em;
}
.cyber-bio-text .cyber-credentials {
  color: var(--cyb-text-dim);
  font-size: 0.8rem;
  margin-top: 10px;
  min-height: 0;
}
@media (max-width: 800px) {
  .cyber-bio-block { grid-template-columns: 1fr; }
}
/* ---- Hours ---- */
.cyber-hours {
  max-width: 500px;
  margin: 0 auto;
}
.cyber-hours-body {
  text-align: center;
}
.cyber-hours-body h3 {
  color: var(--cyb-text-bright);
  margin-bottom: 8px;
}
.cyber-hours-body p {
  color: var(--cyb-text);
}
.cyber-footer {
  text-align: center;
  color: var(--cyb-text-dim);
  font-size: 0.82rem;
  padding: 30px 30px 70px 30px;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}
/* =================================================================================================================================================================================================================================================================
RESEARCH editorial/library catalog Reuses the .catalog-hero / .catalog-intro / .catalog-row / .catalog-row-scroll / .catalog-cta-card layout skeleton from the Educational Games catalog. Only typography, tile shape, and the category-chip component are new here.
================================================================================================================================================================================================================================================================== */
.research-section h1,
.research-section h2,
.research-section h3 {
  font-family: Georgia, 'Times New Roman', serif;
}
.research-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  max-width: 1100px;
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
}
.research-chip {
  font-family: Georgia, serif;
  font-size: 0.85rem;
  color: var(--text-primary);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 0.5rem 1.1rem;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.research-chip:hover,
.research-chip.active {
  border-color: var(--accent);
  color: var(--accent);
}
/* Book tiles portrait cover ratio, subtle tilt on hover */
.book-tile {
  position: relative;
  flex: 0 0 190px;
  scroll-snap-align: start;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  text-decoration: none;
  display: block;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.book-tile:hover {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 0 14px 26px rgba(0,0,0,0.3);
}
.book-tile-cover {
  width: 100%;
  aspect-ratio: 2/3;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.7rem;
  text-align: center;
  padding: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}
.book-tile-tag {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.62rem;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
.book-tile-body {
  padding: 0.7rem 0.8rem 0.9rem;
}
.book-tile-body h3 {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
  line-height: 1.3;
}
.book-tile-body p {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
}
/* Accessibility format badges shown per title, varies by book */
.book-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0 0.8rem 0.75rem;
}
.format-badge {
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.12rem 0.4rem;
}
.format-badge.available {
  color: var(--accent);
  border-color: var(--accent);
}
.format-badge.in-development {
  opacity: 0.5;
  font-style: italic;
}
@media (max-width: 700px) {
  .book-tile {
    flex: 0 0 150px;
  }
}
/* ===============================================================================================================================================================
EDUCATIONAL GAMES AAA-style catalog hero spotlight, horizontal scrolling rows, hover-lift tiles With platform badges. Fully theme-aware via existing CSS variables.
================================================================================================================================================================ */
.catalog-hero {
  position: relative;
  height: 420px;
  border-radius: 20px;
  overflow: hidden;
  margin: 2rem auto;
  max-width: 1200px;
  background: var(--bg-secondary);
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--border-color);
}
.catalog-hero-media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.catalog-hero-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 2.5rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.78), transparent 75%);
}
.catalog-hero-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.2rem 0.7rem;
  border-radius: 20px;
  margin-bottom: 0.7rem;
}
.catalog-hero-overlay h1 {
  color: #fff;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.catalog-hero-overlay p {
  color: #e7e7e7;
  max-width: 600px;
  font-size: 0.95rem;
  line-height: 1.5;
}
/* Intro / "why this page exists" block */
.catalog-intro {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 0 1.5rem;
  text-align: center;
}
.catalog-intro h2 {
  color: var(--accent);
  margin-bottom: 1rem;
}
.catalog-intro p {
  color: var(--text-primary);
  line-height: 1.7;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.catalog-intro-media {
  max-width: 800px;
  margin: 1.5rem auto 0;
  height: 280px;
  border-radius: 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}
/* Catalog rows */
.catalog-row {
  max-width: 1200px;
  margin: 3rem auto 0;
  padding: 0 1.5rem;
}
.catalog-row-title {
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.catalog-row-title .row-accent {
  color: var(--accent);
}
.catalog-row-scroll {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scroll-snap-type: x proximity;
}
.catalog-row-scroll::-webkit-scrollbar {
  height: 6px;
}
.catalog-row-scroll::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 10px;
}
/* Game tiles */
.game-tile {
  position: relative;
  flex: 0 0 240px;
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  text-decoration: none;
  display: block;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.game-tile:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.game-tile-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: center;
  padding: 0.5rem;
}
.game-tile-platform {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  text-transform: uppercase;
}
.game-tile-platform.engine {
  border: 1px solid var(--accent);
}
.game-tile-body {
  padding: 0.85rem 0.9rem 1rem;
}
.game-tile-body h3 {
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}
.game-tile-body p {
  font-size: 0.78rem;
  color: var(--text-muted);
}
/* Bottom CTA cards (Team Training, etc.) */
.catalog-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  max-width: 1200px;
  margin: 3rem auto 0;
  padding: 0 1.5rem;
}
.catalog-cta-card {
  flex: 1 1 220px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1.5rem;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.catalog-cta-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.catalog-cta-card h3 {
  color: var(--accent);
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.catalog-cta-card p {
  color: var(--text-muted);
  font-size: 0.82rem;
}
@media (max-width: 700px) {
  .catalog-hero {
    height: 320px;
  }
  .catalog-hero-overlay h1 {
    font-size: 1.4rem;
  }
  .game-tile {
    flex: 0 0 190px;
  }
}
/* ============================================================
EDUCATIONAL GAMES CATALOG FOOTER (.research-footer) Bloque de
cierre independiente para public-catalog.html y las paginas de
cada juego. Separado del contenido con linea acento + espacio
propio, en vez de quedar pegado al fondo de la ventana.
============================================================ */
.research-footer {
  position: relative;
  max-width: 900px;
  margin: 3.5rem auto 0;
  padding: 2.2rem 1.5rem 3rem;
  text-align: center;
}
.research-footer::before {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  background: var(--accent);
  border-radius: 3px;
  margin: 0 auto 1.5rem;
  opacity: 0.85;
}
.research-footer p {
  color: var(--text-primary);
  font-size: 0.85rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  max-width: 640px;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .research-footer {
    padding: 1.8rem 1.2rem 2.4rem;
    margin-top: 2.5rem;
  }
}
/* ============================
CORPORATE SERVICES PAGE
============================ */
.corporate-entities,
.corporate-accessibility {
  padding: 3rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  text-align: left;
}
.entity-card {
  background-color: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1.75rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.entity-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}
.entity-card h3 {
  color: var(--accent);
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}
.entity-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}
/* =================================
IMPACT PROJECTS PAGE
================================= */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}
.impact-card {
  background: linear-gradient(160deg, var(--bg-panel), var(--bg-secondary));
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.impact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.impact-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: 0.05;
  pointer-events: none;
}
.impact-ring {
  display: block;
  margin: 0 auto 0.5rem;
  transform: rotate(-90deg);
}
.impact-ring-bg {
  fill: none;
  stroke: var(--border-color);
  stroke-width: 8;
}
.impact-ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  filter: drop-shadow(0 0 8px var(--accent));
  transition: stroke-dashoffset 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.impact-number {
  display: block;
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 0 15px var(--accent);
  margin-top: -80px;
  position: relative;
  z-index: 2;
}
.impact-label {
  margin-top: 1.5rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
  letter-spacing: 0.3px;
}
/* ===================================
NEON
=================================== */
.impact-card {
  position: relative;
  z-index: 1;
}
.impact-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 20px;
  background: conic-gradient(var(--accent), transparent 30%, transparent 70%,
  var(--accent));
  z-index: -1;
  animation: rotateBorder 3s linear infinite;
  opacity: 0.7;
}
@keyframes rotateBorder {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* ===================================
MODAL
================================== */
.impact-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.impact-modal-overlay.active {
  display: flex;
}
.impact-modal {
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  position: relative;
  box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
.impact-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
}
.impact-modal h3 {
  color: var(--accent);
  margin-bottom: 1rem;
}
.impact-modal p {
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 80px;
}
/* ============================
HERO-VIEO LOOP
=========================== */
.hero {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  animation: kenBurns 20s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.12);
  }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.7));
}
.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
}
.hero-content h1 {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 800;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
  max-width: 900px;
}
.hero-subtitle {
  color: #ffffff;
  font-size: 1.1rem;
  margin-top: 1rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
@media (max-width: 600px) {
  .hero {
    height: 55vh;
  }
  .hero-content h1 {
    font-size: 1.6rem;
  }
}
/* =====================================================
MODULE: TRANSPARENCY & GOVERNANCE (COMPLETE STYLES)
===================================================== */
/* Hero Centrado */
.central-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 20px;
}
.central-hero h1 {
  font-size: 2.2rem;
  margin-bottom: 15px; /*Espacio entre el Titulo y el subtitulo */
  color: var(--text-primary);
}
.central-hero .dept-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 0;
}
/* Contenedor Principal */
.transparency-container {
  max-width: 1200px;
  margin: 60px auto 80px auto;
  padding: 0 25px;
  display: flex;
  flex-direction: column;
  gap: 55px; /* Separación amplia entre tarjetas */
}
/* Tarjetas Principales (Nodos) con Animación al Scroll */
.trans-section-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 45px 48px; /* Padding holgado */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  /* Estado Inicial: Desplazada e invisible */
  opacity: 0;
  transform: translateY(60px) scale(0.98);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
  opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
  border-color 0.3s ease,
  box-shadow 0.3s ease;
}
/* Estado Activo (Al hacer scroll) */
.trans-section-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.trans-section-card:hover {
  border-color: var(--accent);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 242, 254, 0.12);
}
/* Disposición Grid Nodal (Mitad Texto / Mitad Imagen) */
.node-card {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 45px;
  align-items: center;
}
.reverse-card {
  grid-template-columns: 0.75fr 1.25fr;
}
.central-card {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 50px;
}
/* Tipografía y Textos */
.trans-section-card h2 {
  color: var(--accent);
  font-size: 1.6rem;
  margin-top: 5px;
  margin-bottom: 20px;
  line-height: 1.35;
}
.node-intro-text {
  line-height: 1.85; /* Flujo de lectura relajado */
  color: var(--text-primary);
  font-size: 1.05rem;
  margin-bottom: 25px;
}
/* LÍNEA DIVISORA SUTIL (ESTILO FOOTER) */
.section-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(
  90deg,
  rgba(0, 242, 254, 0) 0%,
  var(--border-color) 20%,
  var(--border-color) 80%,
  rgba(0, 242, 254, 0) 100%
  );
  margin: 30px 0 32px 0;
}
/* Sub-Grilla de Elementos Internos */
.trans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.trans-grid-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 24px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.trans-grid-item:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}
.trans-grid-item h3 {
  color: var(--accent);
  font-size: 1.15rem;
  margin-top: 0;
  margin-bottom: 12px;
}
.trans-grid-item p {
  line-height: 1.75;
  font-size: 0.98rem;
  color: var(--text-secondary);
  margin: 0;
}
/* Contenedores de Imagen */
.node-image-box {
  width: 100%;
  height: 100%;
  min-height: 300px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease;
}
.trans-section-card:hover .node-image-box {
  border-color: rgba(0, 242, 254, 0.3);
}
.node-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.trans-section-card:hover .node-image-box img {
  transform: scale(1.04);
}
/* Tabla Comparativa */
.comparison-table-wrapper {
  overflow-x: auto;
  margin-top: 25px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.comparison-table th,
.comparison-table td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.6;
}
.comparison-table th {
  background: var(--bg-secondary);
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.8px;
}
.comparison-table tr:hover {
  background: rgba(0, 242, 254, 0.04);
}
/* Badges */
.highlight-badge {
  display: inline-block;
  background: rgba(0, 242, 254, 0.12);
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 14px;
}
/* Footer Legal Notice */
.footer-tech-notice {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-top: 12px;
  line-height: 1.6;
}
/* Responsive (Móviles y Tablets) */
@media (max-width: 900px) {
  .node-card, .reverse-card {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }
  .node-image-box {
    min-height: 230px;
  }
}
/* ====================================
DONATE PAGE CUSTOM MODULES
==================================== */
.central-hero{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 30px;
}
.central-hero h1 {
  font-size: 2.2rem;
  color: var(--text-primary);
  margin-top: 10px;
  margin-bottom: 12px;
}
.central-hero .dept-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin-bottom: 0;
}
/* 1. Story Container & Typewriter Animation */
.story-container {
  max-width: 900px;
  margin: 40px auto 50px auto;
  padding: 40px 45px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  position: relative;
}
.story-typewriter-text {
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-primary);
  white-space: pre-wrap;
  min-height: 250px;
}
.cursor-blink {
  display: inline-block;
  width: 8px;
  height: 18px;
  background: var(--accent);
  margin-left: 4px;
  animation: blink 0.8s infinite;
  vertical-align: middle;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
/* 2. Interactive 3D Card (Pure CSS) */
.donation-3d-wrapper {
  perspective: 1000px;
  max-width: 700px;
  margin: 40px auto 60px auto;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.donation-3d-wrapper.visible {
  opacity: 1;
  transform: translateY(0);
}
.card-3d {
  background: linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 242, 254, 0.15);
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.card-3d-content {
  transform: translateZ(40px);
}
.card-3d h2 {
  font-size: 1.8rem;
  color: var(--accent);
  margin-bottom: 15px;
  text-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
}
.card-3d p {
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: 25px;
  line-height: 1.6;
}
.donate-action-btn {
  transform: translateZ(60px);
  padding: 16px 42px;
  background: var(--accent);
  color: #000;
  font-weight: 800;
  font-size: 1.1rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 242, 254, 0.4);
  transition: transform 0.2s ease, filter 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.donate-action-btn:hover {
  filter: brightness(1.15);
  transform: translateZ(70px) scale(1.05);
}
/* 3. Burst Energy Particle on Click */
.burst-heart-particle {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  animation: heartRise 1.2s ease-out forwards;
}
@keyframes heartRise {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.3);
  }
  50% {
    opacity: 0.9;
    transform: translate(-50%, -120px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -200px) scale(1.5);
  }
}
/* =================================
INTERACTIVE 3D ENVELOPE MODULE
==================================*/
.contact-container {
  max-width: 1100px;
  margin: 30px auto 60px auto;
  padding: 0 20px;
  perspective: 1200px;
}
.envelope-wrapper {
  position: relative;
  width: 100%;
  min-height: 480px;
}
/* Cubierta del sobre (Cerrado) */
.envelope-cover {
  background: linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--accent);
  border-radius: 20px;
  padding: 60px 30px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 242, 254, 0.15);
  max-width: 550px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
  cursor: pointer;
}
.envelope-cover.opened {
  transform: scale(0.8) translateY(-100px) rotateX(90deg);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
.envelope-seal {
  width: 70px;
  height: 70px;
  background: var(--bg-primary);
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
}
.envelope-cover h3 {
  font-size: 1.5rem;
  color: var(--accent);
  margin-bottom: 8px;
}
.envelope-cover p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 25px;
}
.open-envelope-btn {
  padding: 14px 32px;
  background: var(--accent);
  color: #000;
  font-weight: 800;
  font-size: 1rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(0, 242, 254, 0.3);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.open-envelope-btn:hover {
  filter: brightness(1.15);
  transform: scale(1.05);
}
/* Grid desplegado (Oculto al inicio) */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 30px;
  align-items: start;
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.contact-grid.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}
/* Left Panel */
.contact-info-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 35px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.contact-info-panel h2 {
  font-size: 1.6rem;
  color: var(--accent);
  margin-bottom: 15px;
}
.contact-info-panel p {
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 25px;
  font-size: 0.95rem;
}
.info-item {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.info-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  font-weight: 700;
}
.info-value, .info-link {
  font-size: 1rem;
  color: var(--text-primary);
  text-decoration: none;
}
.info-link:hover {
  color: var(--accent);
  text-decoration: underline;
}
/* Right Panel (Form Sheet) */
.contact-form-panel {
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 35px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 242, 254, 0.1);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.form-group.visible {
  opacity: 1;
  transform: translateY(0);
}
.form-group label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
}
.contact-submit-btn {
  padding: 15px 30px;
  background: var(--accent);
  color: #000;
  font-weight: 800;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.4s ease, filter 0.2s ease, transform 0.2s ease;
}
.contact-submit-btn.visible {
  opacity: 1;
}
.contact-submit-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}
.form-feedback {
  margin-top: 10px;
  font-size: 0.9rem;
  text-align: center;
  min-height: 20px;
}
.form-feedback.success { color: #00ff88; }
.form-feedback.error { color: #ff4d4d; }
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}
/* ==============================================================================================================================================================================================
COMMUNITY MODULE Puentes de Amor Shared styles across all /community/*.html pages. Namespaced with "community-" and "party-" so it never collides with dept-, mkt-, or cyber- prefixed rules above.
================================================================================================================================================================================================= */
/* ===========================================================================================================================================================================================
COMMUNITY MODULE Puentes de Amor Shared styles across all /community/*.html pages. Namespaced with "community-" so it never collides with dept-, mkt-, or cyber- prefixed rules in style.css.
============================================================================================================================================================================================= */
.community-canvas-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
}
/* ---- Gate hero (login / request-access) ---- */
.community-gate {
  min-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 80px 20px;
}
.community-seal {
  width: 84px;
  height: 84px;
  margin-bottom: 18px;
}
.community-gate-title {
  text-align: center;
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.community-gate-subtitle {
  text-align: center;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto 34px auto;
  line-height: 1.6;
  font-size: 0.95rem;
}
.community-panel {
  width: 100%;
  max-width: 420px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.community-restricted-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.community-restricted-note svg {
  flex: 0 0 auto;
  margin-top: 2px;
}
.community-field {
  margin-bottom: 18px;
}
.community-field label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.community-field input,
.community-field select,
.community-field textarea {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s ease;
}
.community-field input:focus,
.community-field select:focus,
.community-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.community-field textarea {
  resize: vertical;
  min-height: 90px;
}
.community-btn-primary {
  width: 100%;
  background: var(--accent);
  color: #000;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  border-radius: 10px;
  padding: 13px 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: filter 0.2s ease;
}
.community-btn-primary:hover {
  filter: brightness(1.12);
}
.community-btn-secondary {
  width: 100%;
  background: transparent;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 12px 18px;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s ease;
}
.community-btn-secondary:hover {
  background: rgba(34, 211, 238, 0.08);
}
.community-field-error {
  color: #ff6b6b;
  font-size: 0.8rem;
  margin: -6px 0 6px;
}
.community-field input.invalid {
  border-color: #ff6b6b !important;
}

/* ---- Staff ID Card login ---- */
.card-login-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9996;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.card-login-overlay.active {
  display: flex;
}
.card-login-modal {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.75rem;
  max-width: 420px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.card-login-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
}
.card-login-modal h3 {
  margin: 0 0 16px;
  color: var(--text-primary);
  font-size: 1.1rem;
  padding-right: 20px;
}
.card-login-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 4px;
}
.card-login-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}
.card-login-tab.active {
  background: var(--accent);
  color: #000;
}
.card-login-pane {
  display: none;
}
.card-login-pane.active {
  display: block;
}
#cardScanVideo {
  width: 100%;
  aspect-ratio: 1;
  background: #000;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 10px;
}
.card-login-hint {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.community-gate-footer {
  text-align: center;
  margin-top: 22px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.community-gate-footer a {
  color: var(--accent);
  text-decoration: none;
}
.community-gate-footer a:hover {
  text-decoration: underline;
}
/* ---- Status pill (used on request-access confirmation, portfolio, etc.) ---- */
.community-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}
.community-status-pill.pending {
  border-color: var(--accent);
  color: var(--accent);
}
@media (max-width: 480px) {
  .community-panel {
    padding: 26px 20px;
  }
  .community-gate-title {
    font-size: 1.6rem;
  }
}
/* ===========================================
PARTY LIVE EDUCATIONAL synced watch-party room
=========================================== */
.party-shell {
  max-width: 1400px;
  margin: 24px auto 60px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 20px;
}
.party-header {
  max-width: 1400px;
  margin: 20px auto 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.party-title-block h1 {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.party-title-block p {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.party-host-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 5px 14px;
}
/* ---- Stage: video + interpreter overlay ---- */
.party-stage {
  position: relative;
  background: #000;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.party-stage iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.party-age-lock {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 23, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 30px;
  color: var(--text-primary);
}
.party-age-lock svg {
  color: var(--accent);
}
.party-interpreter-box {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 26%;
  max-width: 220px;
  min-width: 120px;
  aspect-ratio: 4 / 3;
  background: var(--bg-panel);
  border: 2px solid var(--accent);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.party-interpreter-box.hidden {
  display: none;
}
.party-interpreter-placeholder {
  text-align: center;
  padding: 22px 10px 10px 10px;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}
.party-interpreter-label {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 0.65rem;
  color: var(--accent);
  background: rgba(0,0,0,0.5);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
/* ---- Controls bar under stage ---- */
.party-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.party-controls button {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.2s ease;
}
.party-controls button:hover {
  border-color: var(--accent);
}
.party-controls button.active {
  border-color: var(--accent);
  color: var(--accent);
}
/* ---- Chat panel ---- */
.party-chat {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  height: 640px;
  min-width: 0;
  max-width: 100%;
}
.party-chat-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 600;
}
.party-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.party-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.party-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--accent);
  flex: 0 0 auto;
}
.party-msg-body .party-msg-name {
  font-size: 0.78rem;
  color: var(--accent);
  margin-bottom: 2px;
}
.party-msg-body .party-msg-text {
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.5;
  word-break: break-word;
}
.party-msg-body img {
  max-width: 180px;
  border-radius: 10px;
  margin-top: 6px;
  display: block;
}
.party-msg-audio {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  width: fit-content;
}
.party-chat-input {
  border-top: 1px solid var(--border-color);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}
.party-chat-input input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
}
.party-chat-input input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}
.party-icon-btn {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.party-icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.party-send-btn {
  background: var(--accent);
  color: #000;
}
/* ---- Director-only room settings panel ---- */
.party-settings {
  margin-top: 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px 18px;
}
.party-settings summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--accent);
  list-style: none;
}
.party-settings summary::-webkit-details-marker {
  display: none;
}
.party-settings-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.party-settings-row input[type="checkbox"] {
  margin-top: 3px;
}
@media (max-width: 900px) {
  .party-shell {
    grid-template-columns: 1fr;
  }
  .party-chat {
    height: 480px;
  }
}
/* =============================================================================================================
COMMUNITY MODULE FEED (dashboard.html) Stories bar, Employee/Volunteer feed tabs, composer, posts, groups sidebar.
=============================================================================================================== */
.feed-shell {
  max-width: 1200px;
  margin: 24px auto 60px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
}
/* ---- Stories bar ---- */
.feed-stories {
  grid-column: 1 / -1;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 16px 2px;
  margin-bottom: 4px;
}
.feed-story {
  flex: 0 0 auto;
  width: 74px;
  text-align: center;
  cursor: pointer;
}
.feed-story-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  padding: 3px;
  margin: 0 auto 6px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feed-story-ring.viewed {
  background: var(--border-color);
}
.feed-story-ring.add-story {
  background: var(--bg-secondary);
  border: 2px dashed var(--border-color);
}
.feed-story-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 2px solid var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
}
.feed-story span {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-story {
  cursor: pointer;
}

/* ---- Story viewer (full-screen, IG/FB style) ---- */
.story-viewer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9995;
  align-items: center;
  justify-content: center;
}
.story-viewer-overlay.active {
  display: flex;
}
.story-viewer-card {
  position: relative;
  width: min(420px, 92vw);
  height: min(720px, 88vh);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--bg-panel), var(--bg-primary));
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.story-progress-row {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  z-index: 3;
}
.story-progress-seg {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.3);
  border-radius: 999px;
  overflow: hidden;
}
.story-progress-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 999px;
}
.story-progress-seg.done .story-progress-fill {
  width: 100%;
  transition: none;
}
.story-progress-seg.active .story-progress-fill {
  transition: width linear;
}
.story-viewer-header {
  position: absolute;
  top: 22px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
}
.story-viewer-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.8);
}
.story-viewer-name {
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.story-viewer-time {
  color: rgba(255,255,255,0.75);
  font-size: 0.72rem;
}
.story-viewer-close {
  margin-left: auto;
  background: rgba(0,0,0,0.35);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
}
.story-viewer-body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 24px;
}
.story-viewer-caption {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  line-height: 1.4;
}
.story-tap-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  z-index: 2;
  cursor: pointer;
}
.story-tap-zone.left { left: 0; }
.story-tap-zone.right { right: 0; }

/* ---- Story editor ---- */
#storyEditorCard {
  display: flex;
  flex-direction: column;
  background: #000;
}
.story-editor-preview {
  flex: 1;
  background-size: cover;
  background-position: center;
  background-color: #111;
  position: relative;
}
.story-editor-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-editor-text-input {
  position: absolute;
  top: 46%;
  left: 8%;
  right: 8%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  z-index: 4;
}
.story-editor-text-input::placeholder {
  color: rgba(255,255,255,0.6);
}
.story-editor-text-input:focus {
  outline: 2px dashed rgba(255,255,255,0.5);
  outline-offset: 6px;
}
.story-editor-error {
  color: #ff6b6b;
  font-size: 0.8rem;
  text-align: center;
  padding: 8px 16px 0;
  background: #000;
}
.story-editor-post-btn {
  background: var(--accent);
  color: #000;
  border: none;
  padding: 14px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
/* ---- Feed tabs (Employee / Volunteer) ---- */
.feed-tabs {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 5px;
  width: fit-content;
}
.feed-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.feed-tab.active {
  background: var(--accent);
  color: #000;
}
/* ---- Composer ---- */
.feed-composer {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.feed-composer-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.feed-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
  flex: 0 0 auto;
}
.feed-composer textarea {
  flex: 1;
  min-width: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  resize: none;
  min-height: 44px;
}
.feed-composer textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.feed-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}
.feed-composer-tools {
  display: flex;
  gap: 6px;
}
.feed-tool-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.feed-tool-btn:hover {
  background: var(--bg-secondary);
  color: var(--accent);
}
.feed-composer-visibility {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.feed-post-btn {
  background: var(--accent);
  color: #000;
  border: none;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 9px 20px;
  border-radius: 8px;
  cursor: pointer;
}
.feed-post-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.feed-composer-preview {
  margin-top: 10px;
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.feed-composer-preview img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  display: block;
}
.feed-composer-preview video {
  max-width: 100%;
  max-height: 260px;
  border-radius: 10px;
  display: block;
  background: #000;
}
.composer-remove-media-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}
.composer-remove-media-btn:hover {
  background: rgba(255,107,107,0.85);
}
.feed-upload-error {
  color: #ff6b6b;
  font-size: 0.8rem;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(255,107,107,0.08);
  border: 1px solid rgba(255,107,107,0.3);
  border-radius: 8px;
}
/* ---- Posts ---- */
.feed-post {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.feed-post-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.feed-post-name {
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 600;
}
.feed-post-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.feed-post-text {
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.feed-post-image {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 12px;
  display: block;
}
.feed-post-actions {
  display: flex;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}
.feed-action-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8rem;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.feed-action-btn:hover {
  background: var(--bg-secondary);
  color: var(--accent);
}
.feed-action-btn.liked {
  color: var(--accent);
}
.feed-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  margin-left: 8px;
}
.feed-badge.employee { border-color: var(--accent); color: var(--accent); }
/* ---- Sidebar: groups ---- */
.feed-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.feed-sidebar-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px 18px;
}
.feed-sidebar-card h3 {
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feed-group-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}
.feed-group-item:last-child {
  border-bottom: none;
}
.feed-group-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--accent);
  flex: 0 0 auto;
}
.feed-group-item .name {
  font-size: 0.82rem;
  color: var(--text-primary);
}
.feed-group-item .members {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.feed-create-group-btn {
  width: 100%;
  background: transparent;
  border: 1px dashed var(--border-color);
  color: var(--accent);
  font-size: 0.82rem;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 12px;
}
.feed-create-group-form {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}
.feed-create-group-form.open {
  display: block;
}
.feed-create-group-form input,
.feed-create-group-form select {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text-primary);
  font-size: 0.82rem;
  margin-bottom: 8px;
  font-family: inherit;
}
@media (max-width: 900px) {
  .feed-shell {
    grid-template-columns: 1fr;
  }
}
/* ============================================================================================================================================
COMMUNITY MODULE GROUPS & EVENTS (groups.html) Chat circles, open groups, events with Guardian translation settings and travel stipend requests.
============================================================================================================================================= */
.groups-intro {
  max-width: 1200px;
  margin: 24px auto 0 auto;
  padding: 0 20px;
}
.groups-intro h1 {
  font-size: 1.6rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.groups-guardian-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 16px 0 24px 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.groups-guardian-note svg {
  flex: 0 0 auto;
  color: var(--accent);
  margin-top: 2px;
}
.groups-shell {
  max-width: 1200px;
  margin: 0 auto 60px auto;
  padding: 0 20px;
}
.groups-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.groups-filters {
  display: flex;
  gap: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 5px;
}
.groups-filter-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.groups-filter-btn.active {
  background: var(--accent);
  color: #000;
}
.groups-create-toggle {
  background: var(--accent);
  color: #000;
  border: none;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
}
/* ---- Create form ---- */
.groups-create-panel {
  display: none;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}
.groups-create-panel.open {
  display: block;
}
.groups-create-panel h3 {
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.groups-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.groups-form-row.single {
  grid-template-columns: 1fr;
}
.groups-field label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.groups-field input,
.groups-field select,
.groups-field textarea {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 13px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
}
.groups-field textarea {
  resize: vertical;
  min-height: 70px;
}
.groups-type-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.groups-type-card {
  flex: 1;
  min-width: 140px;
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.groups-type-card.selected {
  border-color: var(--accent);
}
.groups-type-card strong {
  display: block;
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.groups-type-card span {
  font-size: 0.72rem;
  color: var(--text-muted);
}
/* ---- Guardian translation block inside create form ---- */
.groups-guardian-block {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.groups-guardian-block .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.groups-guardian-block .toggle-row strong {
  font-size: 0.85rem;
  color: var(--text-primary);
}
.groups-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
}
.groups-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.groups-switch-track {
  position: absolute;
  inset: 0;
  background: var(--border-color);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.groups-switch-track::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.groups-switch input:checked + .groups-switch-track {
  background: var(--accent);
}
.groups-switch input:checked + .groups-switch-track::before {
  transform: translateX(18px);
}
.groups-translate-modes {
  display: flex;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.groups-translate-modes label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
/* ---- Event-only fields ---- */
.groups-event-fields {
  display: none;
  border-top: 1px dashed var(--border-color);
  padding-top: 14px;
  margin-top: 4px;
}
.groups-event-fields.visible {
  display: block;
}
.groups-stipend-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 4px;
}
.groups-field-error {
  color: #ff6b6b;
  font-size: 0.78rem;
  margin-top: 6px;
}
.groups-field input.invalid {
  border-color: #ff6b6b !important;
}
/* ---- Group cards grid ---- */
.groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.groups-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.groups-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.groups-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  position: relative;
}
.groups-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex: 0 0 auto;
}
.groups-card h4 {
  font-size: 0.95rem;
  color: var(--text-primary);
}
.groups-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.groups-tag {
  font-size: 0.68rem;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}
.groups-tag.lang { border-color: var(--accent); color: var(--accent); }
.groups-tag.event { border-color: #f0965c; color: #f0965c; }
.groups-card-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.groups-card-meta strong {
  color: var(--text-secondary);
}
.groups-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}
.groups-event-transport-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.groups-directions-btn,
.groups-cant-attend-btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.groups-directions-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.groups-cant-attend-btn:hover {
  border-color: #f0965c;
  color: #f0965c;
}
.groups-members-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.groups-join-btn {
  background: var(--accent);
  color: #000;
  border: none;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.groups-join-btn.joined {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.groups-join-btn.full {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  cursor: not-allowed;
}
@media (max-width: 640px) {
  .groups-form-row {
    grid-template-columns: 1fr;
  }
}
/* ===============================================================================
FEED post menu (edit/delete/report), reactions, and Guardian auto-translation note.
================================================================================ */
.feed-post-header {
  position: relative;
}
.feed-post-menu-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  line-height: 0;
}
.feed-post-menu-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.feed-post-menu {
  display: none;
  position: absolute;
  top: 36px;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  z-index: 5;
  min-width: 150px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.feed-post-menu.open {
  display: block;
}
.feed-post-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.82rem;
  padding: 10px 14px;
  cursor: pointer;
}
.feed-post-menu button:hover {
  background: var(--bg-panel);
}
.feed-post-menu button.danger {
  color: #ff6b6b;
}
.feed-post-edit-area {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  margin-bottom: 10px;
  resize: vertical;
  min-height: 60px;
}
.feed-post-edit-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.feed-post-edit-actions button {
  font-size: 0.78rem;
  padding: 6px 14px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
}
.feed-post-edit-actions button.save {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.feed-post-edited-tag {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-left: 6px;
}
/* ---- Reactions ---- */
.feed-reaction-wrap {
  position: relative;
  flex: 1;
}
.feed-reaction-picker {
  display: none;
  position: absolute;
  bottom: 42px;
  left: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 6px 8px;
  gap: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 5;
}
.feed-reaction-picker.open {
  display: flex;
}
.feed-reaction-option {
  background: transparent;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 50%;
  transition: transform 0.15s ease;
  line-height: 1;
}
.feed-reaction-option:hover {
  transform: scale(1.3);
}
.feed-action-btn.reacted {
  color: var(--accent);
  font-weight: 600;
}
/* ---- Guardian translation ---- */
.feed-translate-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: -6px 0 10px 0;
}
.feed-translate-note button {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.feed-translate-note svg {
  color: var(--accent);
  flex-shrink: 0;
}
.feed-translate-note-new {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: -2px 0 10px 0;
}
.feed-translate-note-new svg {
  color: var(--accent);
  flex-shrink: 0;
}
/* ============================
PORTFOLIO Volunteer / Employee role tabs
============================ */
.portfolio-role-tabs {
  max-width: 1000px;
  margin: 30px auto 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 5px 20px;
  width: fit-content;
}
.portfolio-role-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 8px;
  cursor: pointer;
}
.portfolio-role-tab.active {
  background: var(--accent);
  color: #000;
}
.portfolio-role-view {
  display: none;
}
.portfolio-role-view.active {
  display: block;
}
/* =======================================================================================
PORTFOLIO (portfolio.html) Member progress, hours timeline, and recommendation letter flow.
======================================================================================== */
.portfolio-hero {
  max-width: 1000px;
  margin: 30px auto 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.portfolio-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  padding: 3px;
  flex-shrink: 0;
}
.portfolio-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 3px solid var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
}
.portfolio-hero-info h1 {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.portfolio-hero-meta {
  color: var(--text-muted);
  font-size: 0.88rem;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.portfolio-hero-meta span:not(:last-child)::after {
  content: '·';
  margin-left: 10px;
  color: var(--border-color);
}
.portfolio-shell {
  max-width: 1000px;
  margin: 26px auto 60px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.portfolio-stat-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}
.portfolio-stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 6px;
}
.portfolio-stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.portfolio-section {
  grid-column: 1 / -1;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 24px;
  margin-top: 6px;
}
.portfolio-section h2 {
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: 18px;
}
/* ---- Progress toward letter eligibility ---- */
.portfolio-progress-track {
  width: 100%;
  height: 10px;
  background: var(--bg-secondary);
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 8px 0;
}
.portfolio-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: 999px;
  transition: width 0.6s ease;
}
.portfolio-progress-caption {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
}
/* ---- Timeline ---- */
.portfolio-timeline {
  position: relative;
  padding-left: 22px;
}
.portfolio-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border-color);
}
.portfolio-timeline-item {
  position: relative;
  padding-bottom: 20px;
}
.portfolio-timeline-item:last-child {
  padding-bottom: 0;
}
.portfolio-timeline-item::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-panel);
}
.portfolio-timeline-date {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.portfolio-timeline-title {
  font-size: 0.88rem;
  color: var(--text-primary);
}
.portfolio-timeline-hours {
  font-size: 0.76rem;
  color: var(--accent);
}
/* ---- Recommendation letter card ---- */
.portfolio-letter-locked {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}
.portfolio-letter-locked svg {
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}
.portfolio-letter-ready {
  display: none;
}
.portfolio-letter-ready.visible {
  display: block;
}
.portfolio-letter-pending {
  display: none;
  align-items: flex-start;
  gap: 14px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.6;
}
.portfolio-letter-pending.visible {
  display: flex;
}
.portfolio-letter-pending svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.portfolio-letter-approved {
  display: none;
}
.portfolio-letter-approved.visible {
  display: block;
}
/* ---- Letter preview (mirrors the actual PDF layout) ---- */
.portfolio-letter-preview {
  background: #fdfdfd;
  color: #1a1a1a;
  border-radius: 12px;
  padding: 40px 36px;
  font-family: Georgia, 'Times New Roman', serif;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  max-width: 640px;
  margin: 0 auto;
}
.portfolio-letterhead {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 2px solid #22d3ee;
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.portfolio-letterhead-text h3 {
  font-family: Georgia, serif;
  font-size: 1.05rem;
  color: #111;
  margin-bottom: 2px;
}
.portfolio-letterhead-text p {
  font-family: Georgia, serif;
  font-size: 0.72rem;
  color: #666;
}
.portfolio-letter-body p {
  font-size: 0.92rem;
  line-height: 1.75;
  margin-bottom: 14px;
  color: #222;
}
.portfolio-letter-signoff {
  margin-top: 30px;
  font-size: 0.9rem;
  color: #222;
}
.portfolio-letter-signoff .sig-line {
  margin-top: 34px;
  border-top: 1px solid #999;
  padding-top: 6px;
  width: 240px;
  font-size: 0.8rem;
  color: #444;
}
.portfolio-letter-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}
/* ---- Demo-only controls (for testing states; not shown in production) ---- */
.portfolio-demo-controls {
  grid-column: 1 / -1;
  background: repeating-linear-gradient(45deg, var(--bg-secondary), var(--bg-secondary)
  10px, var(--bg-panel) 10px, var(--bg-panel) 20px);
  border: 1px dashed var(--border-color);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.portfolio-demo-controls strong {
  color: var(--text-primary);
}
.portfolio-demo-controls select {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text-primary);
  font-size: 0.78rem;
}
@media (max-width: 700px) {
  .portfolio-shell {
    grid-template-columns: 1fr;
  }
  .portfolio-letter-preview {
    padding: 26px 20px;
  }
}
/* ===========================================================================================================
PROFILE (profile.html) profile: banner, avatar, tabs (Posts / About / Experience / Education / Certifications).
============================================================================================================ */
.profile-banner {
  height: 220px;
  background: linear-gradient(135deg, var(--bg-panel), var(--bg-secondary));
  position: relative;
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
}
.profile-banner-edit {
  position: absolute;
  bottom: 14px;
  right: 20px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.78rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(4px);
}
.profile-header {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}
.profile-avatar-wrap {
  position: relative;
  width: 140px;
  margin-top: -70px;
}
.profile-avatar-ring {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.profile-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 4px solid var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--accent);
}
.profile-avatar-edit {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  border: 3px solid var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.profile-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}
.profile-name-block h1 {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.profile-headline {
  color: var(--text-secondary);
  font-size: 0.92rem;
  margin-bottom: 6px;
}
.profile-meta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.profile-meta-row span:not(:last-child)::after {
  content: '·';
  margin-left: 10px;
  color: var(--border-color);
}
.profile-header-actions {
  display: flex;
  gap: 10px;
}
.profile-btn-outline {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 10px;
  cursor: pointer;
}
/* ---- Tabs ---- */
.profile-tabs {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
}
.profile-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 14px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.profile-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.profile-tab-panel {
  display: none;
  max-width: 1000px;
  margin: 24px auto 60px auto;
  padding: 0 24px;
}
.profile-tab-panel.active {
  display: block;
}
.profile-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 16px;
}
.profile-card h3 {
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.profile-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.65;
}
.profile-lang-chip {
  display: inline-block;
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  margin: 4px 6px 0 0;
}
/* ---- Experience / Education items ---- */
.profile-exp-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
  align-items: flex-start;
}
.profile-exp-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.profile-exp-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.profile-exp-title {
  font-size: 0.92rem;
  color: var(--text-primary);
  font-weight: 600;
}
.profile-exp-org {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.profile-exp-dates {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.profile-exp-desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.6;
}
/* ---- Certifications ---- */
.profile-cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.profile-cert-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  gap: 12px;
  position: relative;
}
.profile-item-actions {
  display: flex;
  gap: 4px;
  align-self: flex-start;
}
.profile-icon-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-icon-btn:hover {
  background: var(--bg-panel);
  color: var(--accent);
}
.profile-icon-btn.delete-item-btn:hover {
  color: #ff6b6b;
}
.profile-restricted-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.profile-restricted-note svg {
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 1px;
}
.lang-remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  margin-left: 4px;
  padding: 0;
  line-height: 1;
}
.lang-remove-btn:hover {
  color: #ff6b6b;
}
.profile-cert-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.profile-cert-name {
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 600;
}
.profile-cert-issuer {
  font-size: 0.76rem;
  color: var(--text-muted);
}
.profile-cert-date {
  font-size: 0.72rem;
  color: var(--accent);
  margin-top: 4px;
}
/* ---- Certification roadmap (aspirational / accredited pathways) ---- */
.profile-roadmap-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  margin-bottom: 10px;
}
.profile-roadmap-name {
  font-size: 0.88rem;
  color: var(--text-primary);
}
.profile-roadmap-issuer {
  font-size: 0.76rem;
  color: var(--text-muted);
}
.profile-roadmap-status {
  font-size: 0.7rem;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  white-space: nowrap;
}
.profile-roadmap-status.in-progress {
  border-color: var(--accent);
  color: var(--accent);
}
.profile-roadmap-status.planned {
  border-color: #f0965c;
  color: #f0965c;
}
@media (max-width: 640px) {
  .profile-avatar-wrap {
    width: 110px;
    margin-top: -55px;
  }
  .profile-avatar-ring, .profile-avatar-img {
    width: 110px;
    height: 110px;
  }
  .profile-header-row {
    flex-direction: column;
  }
}
/* ==================================================================================================================
SETTINGS (settings.html) Unified settings hub account, security, privacy, connected services, notifications, location.
=================================================================================================================== */
.settings-shell {
  max-width: 1100px;
  margin: 30px auto 60px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
}
.settings-nav {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 10px;
  height: fit-content;
  position: sticky;
  top: 20px;
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: left;
  padding: 11px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.settings-nav-item:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.settings-nav-item.active {
  background: var(--bg-secondary);
  color: var(--accent);
  font-weight: 600;
}
.settings-nav-item svg {
  flex-shrink: 0;
}
.settings-panel {
  display: none;
}
.settings-panel.active {
  display: block;
}
.settings-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
}
.settings-card h2 {
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.settings-card-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.location-status-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.location-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.location-status-row.granted { color: var(--accent); }
.location-status-row.denied { color: #ff6b6b; }
.settings-field {
  margin-bottom: 16px;
}
.settings-field label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.settings-field input, .settings-field select {
  width: 100%;
  max-width: 400px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 13px;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: inherit;
}
/* ---- Toggle rows (used across Privacy / Notifications / Location) ---- */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}
.settings-toggle-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.settings-toggle-text strong {
  display: block;
  font-size: 0.88rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.settings-toggle-text span {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.settings-select-inline {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text-primary);
  font-size: 0.8rem;
}
/* ---- Connected services ---- */
.settings-connect-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
}
.settings-connect-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.settings-connect-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-connect-info {
  flex: 1;
}
.settings-connect-info strong {
  display: block;
  font-size: 0.88rem;
  color: var(--text-primary);
}
.settings-connect-info span {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.settings-connect-btn {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
}
.settings-connect-btn.connected {
  background: var(--accent);
  color: #000;
}
.settings-connect-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--border-color);
  color: var(--text-muted);
}
.settings-coming-soon-tag {
  font-size: 0.65rem;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid #f0965c;
  color: #f0965c;
  margin-left: 8px;
}
/* ---- Danger zone ---- */
.settings-danger-card {
  border-color: #ff6b6b;
}
.settings-danger-btn {
  background: transparent;
  border: 1px solid #ff6b6b;
  color: #ff6b6b;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 10px;
  cursor: pointer;
}
@media (max-width: 800px) {
  .settings-shell {
    grid-template-columns: 1fr;
  }
  .settings-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    gap: 4px;
  }
  .settings-nav-item {
    white-space: nowrap;
    width: auto;
  }
}
/* =======================================================================================================================================================================================================================
MEETING ROOM (meeting-room.html) Camera-based video meetings for Chat Circles / Open Groups. Local camera works now via getUserMedia; remote participants are Placeholders until WebRTC signaling (Supabase) is connected.
======================================================================================================================================================================================================================== */
.meeting-shell {
  max-width: 1300px;
  margin: 20px auto 40px auto;
  padding: 0 20px;
}
.meeting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.meeting-header h1 {
  font-size: 1.3rem;
  color: var(--text-primary);
}
.meeting-header p {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.meeting-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.meeting-tile {
  position: relative;
  background: #000;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.meeting-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* mirror, like every video call app */
}
.meeting-tile.cam-off video {
  display: none;
}
.meeting-tile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 2px solid var(--accent);
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-weight: 700;
  font-size: 1.2rem;
}
.meeting-tile.cam-off .meeting-tile-avatar {
  display: flex;
}
.meeting-tile-label {
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-size: 0.72rem;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 3px 10px;
  border-radius: 999px;
}
.meeting-tile-mic-off {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,80,80,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.meeting-tile.mic-off .meeting-tile-mic-off {
  display: flex;
}
.meeting-tile.placeholder {
  background: var(--bg-panel);
}
.meeting-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
}
.meeting-control-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.meeting-control-btn:hover {
  border-color: var(--accent);
}
.meeting-control-btn.off {
  background: #ff6b6b;
  color: #fff;
  border-color: #ff6b6b;
}
.meeting-control-btn.leave {
  background: #ff6b6b;
  color: #fff;
  border-color: #ff6b6b;
}
.meeting-signal-note {
  text-align: center;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 12px;
}
/* ==================================================================================================================================================================
ADMIN INVITE (admin-invite.html) 4-signature approval chain: requesting department director, Director of Programs, Executive Director, Interim Director of Finance/HR.
====================================================================================================================================================================*/
.admin-shell {
  max-width: 1000px;
  margin: 30px auto 60px auto;
  padding: 0 20px;
}
.admin-tabs {
  display: flex;
  gap: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 5px;
  width: fit-content;
  margin-bottom: 24px;
}
.admin-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
}
@media (max-width: 800px) {
  .admin-tabs {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
}
.admin-tab.active {
  background: var(--accent);
  color: #000;
}
.admin-panel {
  display: none;
}
.admin-panel.active {
  display: block;
}
/* ---- Invitation card with 4-signature chain ---- */
.admin-invite-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.admin-invite-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}
.admin-invite-header h3 {
  font-size: 0.98rem;
  color: var(--text-primary);
}
.admin-invite-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.admin-conflict-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #f0965c;
  color: #f0965c;
  margin-left: 8px;
}
.admin-reason-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 12px 0 16px 0;
}
.admin-signature-chain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.admin-sig-slot {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 14px;
}
.admin-sig-slot.signed {
  border-color: var(--accent);
}
.admin-sig-role {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.admin-sig-name {
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 4px;
}
.admin-sig-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  color: var(--text-muted);
}
.admin-sig-status.approved {
  color: var(--accent);
}
.admin-sig-approve-btn {
  margin-top: 8px;
  background: var(--accent);
  color: #000;
  border: none;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  width: 100%;
}
.admin-invite-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}
.admin-bgcheck-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}
.admin-bgcheck-status.cleared {
  border-color: var(--accent);
  color: var(--accent);
}
.admin-bgcheck-status.pending {
  border-color: #f0965c;
  color: #f0965c;
}
.admin-final-status {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}
.admin-final-status.active {
  color: var(--accent);
}
.admin-role-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}
.admin-role-badge.volunteer {
  border-color: var(--accent);
  color: var(--accent);
}
.admin-role-badge.employee {
  border-color: var(--accent-hover);
  color: var(--accent-hover);
}
.admin-decision-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.admin-decision-btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border-color);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.admin-decision-btn.reject {
  color: #ff6b6b;
}
.admin-decision-btn.reject:hover {
  background: rgba(255,107,107,0.12);
  border-color: #ff6b6b;
}
.admin-decision-btn.defer {
  color: var(--text-secondary);
}
.admin-decision-btn.defer:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--text-secondary);
}
.admin-cancel-invite-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.74rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px 0 0;
  text-align: center;
}
.admin-cancel-invite-btn:hover {
  color: #ff6b6b;
}
.admin-history-remove-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  flex-shrink: 0;
}
.admin-history-remove-btn:hover {
  background: var(--bg-secondary);
  color: #ff6b6b;
}
.admin-capacity-banner {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
  max-width: 620px;
}
.admin-capacity-section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.admin-dept-capacity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.admin-dept-pill {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 7px 10px;
}
.admin-dept-pill-name {
  font-size: 0.68rem;
  color: var(--text-secondary);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-dept-pill-count {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-primary);
}
.admin-dept-pill.full .admin-dept-pill-count {
  color: #ff6b6b;
}
.admin-dept-pill.full {
  border-color: #ff6b6b;
}
.admin-capacity-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.admin-capacity-row strong {
  color: var(--text-primary);
}
.admin-capacity-bar {
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.admin-capacity-bar:last-child { margin-bottom: 0; }
.admin-capacity-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.admin-capacity-fill.full {
  background: #ff6b6b;
}
.admin-dept-request-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.admin-dept-request-row select {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.82rem;
}
.admin-mod-badge {
  background: #ff6b6b;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 5px;
}
.admin-report-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.admin-report-card-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.admin-report-card-snippet {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.admin-report-card-reason {
  font-size: 0.82rem;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.admin-onboard-checklist {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-color);
  font-size: 0.78rem;
  color: var(--accent);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.admin-mod-btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border-color);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.admin-mod-btn.remove {
  color: #ff6b6b;
}
.admin-mod-btn.remove:hover {
  background: rgba(255,107,107,0.12);
  border-color: #ff6b6b;
}
.admin-mod-btn.dismiss {
  color: var(--text-secondary);
}
.admin-mod-btn.dismiss:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--text-secondary);
}
.chat-new-badge {
  background: var(--accent);
  color: #000;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  align-self: center;
  flex-shrink: 0;
}
.chat-restricted-badge {
  font-size: 0.75rem;
  margin-left: 2px;
}
.chat-friend-item.restricted {
  opacity: 0.88;
}
.chat-group-header {
  padding: 10px 16px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.chat-group-header:not(:first-child) {
  margin-top: 6px;
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
}
.chat-retention-notice {
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 0.68rem;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.3;
}
.nav-search-msg-hint {
  color: var(--accent);
  font-size: 0.68rem;
  margin-left: 6px;
}
/* ---- New invitation form ---- */
.admin-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 640px) {
  .admin-form-row {
    grid-template-columns: 1fr;
  }
  .admin-signature-chain {
    grid-template-columns: 1fr;
  }
}
/* ===============================================================================================
   PAGE BACK BUTTON Consistent "go back" control across every community page except dashboard.html
   ==============================================================================================*/
.page-back-btn,
.party-all-rooms-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 1200px;
    margin: 16px auto 0 auto;
    padding: 8px 16px 8px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    width: fit-content;
}
.page-back-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.page-back-btn-row {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
/* ==================================================================================================================================================================
   GROUPS CARD MENU (edit/delete) fixes cards that had no way to be corrected or removed after creation, including the 4 example cards already present in groups.html.
   ================================================================================================================================================================ */
.groups-card-menu-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    line-height: 0;
}
.groups-card-menu-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.groups-card-menu {
    display: none;
    position: absolute;
    top: 26px;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    z-index: 5;
    min-width: 130px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.groups-card-menu.open {
    display: block;
}
.groups-card-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.8rem;
    padding: 9px 12px;
    cursor: pointer;
}
.groups-card-menu button:hover {
    background: var(--bg-panel);
}
.groups-card-menu button.danger {
    color: #ff6b6b;
}

/* ============================
   APP SHELL (app.html)
   Single-page app for the whole social network: internal tab
   navigation + hash-based routing between views, so the browser's
   real back/forward buttons work naturally between sections.
   ============================ */
.app-tabbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 0 20px;
}

.app-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 14px 14px;
    cursor: pointer;
    white-space: nowrap;
}

.app-tab:hover {
    color: var(--text-primary);
}

.app-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.app-view {
    display: none;
}

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

/* The login/request-access gate needs flex (not block) to stay
   centered — more specific selector wins over the generic .app-view
   rule above without touching app.html's tab views. */
.community-gate.app-view.active {
    display: flex;
}


/* ============================
   SCREENSHOT DETERRENT + WATERMARK
   True screenshot blocking is not possible from a website (OS-level
   tools like Snipping Tool / Win+Shift+S capture outside the browser's
   control). This is the realistic version: a traceable watermark plus
   a blur-on-window-blur deterrent, same approach real platforms use.
   ============================ */
.screenshot-watermark {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.05;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
    overflow: hidden;
}

.screenshot-watermark span {
    font-size: 0.78rem;
    color: var(--text-primary);
    transform: rotate(-28deg);
    white-space: nowrap;
    margin: 30px;
}

.screenshot-blur-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    text-align: center;
    padding: 30px;
    background: rgba(10, 14, 23, 0.92);
    backdrop-filter: blur(20px);
}

.screenshot-blur-overlay.active {
    display: flex;
}

.screenshot-blur-overlay svg {
    color: #ff6b6b;
}

.screenshot-blur-overlay h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
}

.screenshot-blur-overlay p {
    color: var(--text-muted);
    font-size: 0.85rem;
    max-width: 420px;
}

.screenshot-blur-overlay .device-tag {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-family: monospace;
}


/* ============================
   JITSI MEETING (meeting view inside app.html)
   Real video infrastructure — not reinvented. Jitsi already handles
   fullscreen, grid/list view, mic/camera status, participant list,
   the way Zoom does. This just embeds it and matches our theme.
   Testing on the free public server; swap JITSI_DOMAIN in app.js
   once the NGO's own server is funded and running.
   ============================ */
.meeting-header-controls {
    display: flex;
    gap: 8px;
}

.meeting-toolbar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
}

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

.jitsi-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.jitsi-wrap:fullscreen {
    aspect-ratio: unset;
    border-radius: 0;
}

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

#jitsiMeetContainer iframe {
    width: 100%;
    height: 100%;
    border: none;
}


/* ============================
   PARTY LIVE — room browser (Rave-style)
   Pick which watch party to join. No access restriction between
   departments: closed, already-vetted NGO system, so there's no
   reason to wall off one department's room from another.
   ============================ */
.party-rooms-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.party-room-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.party-room-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.party-room-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg-secondary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin-bottom: 12px;
}

.party-room-card h4 {
    font-size: 0.92rem;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.party-room-dept {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.party-room-viewers {
    font-size: 0.72rem;
    color: var(--accent);
}

/* Fullscreen for the video stage — same real browser API used by the
   Jitsi meeting room, applied here to the YouTube stage + chat overlay. */
.party-stage:fullscreen {
    border-radius: 0;
}


/* ============================
   PARTY ROOM CARD MENU (edit/delete) + create room panel spacing
   ============================ */
.party-room-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    margin-bottom: 12px;
}

.party-room-menu-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    line-height: 0;
}

.party-room-menu-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.party-room-menu {
    display: none;
    position: absolute;
    top: 26px;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    z-index: 5;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.party-room-menu.open {
    display: block;
}

.party-room-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: #ff6b6b;
    font-size: 0.8rem;
    padding: 9px 12px;
    cursor: pointer;
}

.party-room-menu button:hover {
    background: var(--bg-panel);
}


/* ============================
   SOCIAL NETWORK UPGRADES
   Comments, working Share, working Add Story, Notifications bell,
   Search, and an FB-style Chat widget with a friends list.
   ============================ */

/* ---- Comments (expand under each post) ---- */
.feed-comments-section {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.feed-comments-section.open {
    display: block;
}

.feed-comment-item {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.feed-comment-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--accent);
    flex-shrink: 0;
}

.feed-comment-bubble {
    background: var(--bg-secondary);
    border-radius: 14px;
    padding: 8px 13px;
    flex: 1;
}

.feed-comment-name {
    font-size: 0.78rem;
    color: var(--accent);
    font-weight: 600;
}

.feed-comment-text {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.feed-comment-empty {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.feed-comment-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.feed-comment-input-row input {
    flex: 1;
    min-width: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 8px 14px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
}

.feed-comment-input-row input:focus {
    outline: none;
    border-color: var(--accent);
}

.feed-comment-send-btn {
    background: var(--accent);
    color: #000;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

/* ---- Toast (used by Share) ---- */
.toast-notice {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-panel);
    border: 1px solid var(--accent);
    color: var(--text-primary);
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 0.82rem;
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast-notice.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---- Notifications bell ---- */
.notif-bell-wrap {
    position: relative;
}

.notif-bell-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    position: relative;
    display: flex;
    align-items: center;
}

.notif-bell-btn:hover {
    color: var(--accent);
}

/* Same leaked .nav-links li button::after underline as the delete
   button had. The bell is an icon toggle, not a text link, and on
   mobile the tap leaves a "sticky hover" that keeps the line visible
   even after the panel is closed. Cancel the pseudo-element here too. */
.notif-bell-wrap .notif-bell-btn::after {
    content: none;
}

.notif-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    background: #ff6b6b;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.notif-badge.hidden {
    display: none;
}

.notif-panel {
    display: none;
    position: absolute;
    top: 44px;
    right: 0;
    width: 320px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    z-index: 200;
}

.notif-panel.open {
    display: block;
}

/* Pre-existing bug (confirmed present before any of today's changes):
   on the mobile slide-in nav (<900px), .notif-panel is 320px wide but
   its positioned ancestor (.notif-bell-wrap, inside a 300px nav panel
   with overflow-y:auto) is much narrower, so the panel overflows and
   gets clipped/cut off on the left. Fix: below 900px, position it
   relative to the viewport instead, sized to fit and above the nav. */
@media (max-width: 899px) {
    .notif-panel {
        position: fixed;
        top: 64px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: 340px;
        margin-left: auto;
        z-index: 1600;
    }
}

.notif-panel-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notif-clear-all-btn {
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.notif-item:hover {
    background: var(--bg-secondary);
}

/* Brief flash used to point at the post/section a notification links to */
.notif-target-highlight {
    animation: notifTargetPulse 2.2s ease;
}
@keyframes notifTargetPulse {
    0% { box-shadow: 0 0 0 3px var(--accent); }
    75% { box-shadow: 0 0 0 3px var(--accent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.notif-item-body {
    flex: 1;
    min-width: 0;
}

.notif-bell-wrap .notif-delete-btn {
    background: transparent;
    border: none;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    flex: 0 0 auto;
    flex-shrink: 0;
    align-self: center;
}

.notif-bell-wrap .notif-delete-btn:hover {
    background-color: var(--bg-secondary);
    color: #ff6b6b;
}

/* .nav-links li button::after (nav underline animation) still matches
   this button because it lives inside a nav <li>. It's an icon-only
   delete (X) button, not a text link, so the underline bar makes no
   sense here — cancel the pseudo-element for this one button only.
   .notif-bell-btn and .notif-clear-all-btn keep the underline as before. */
.notif-bell-wrap .notif-delete-btn::after {
    content: none;
}

.notif-empty-msg {
    padding: 30px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

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

.notif-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}

.notif-item-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.notif-item-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ---- Search ---- */
.nav-search-wrap {
    position: relative;
    margin: 0 10px;
}

.nav-search-input {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 7px 14px 7px 32px;
    color: var(--text-primary);
    font-size: 0.82rem;
    width: 180px;
    font-family: inherit;
}

.nav-search-input:focus {
    outline: none;
    border-color: var(--accent);
    width: 220px;
}

.nav-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.nav-search-results {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    width: 280px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    z-index: 200;
}

.nav-search-results.open {
    display: block;
}

.nav-search-group-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 10px 14px 4px 14px;
}

.nav-search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.nav-search-result-item:hover {
    background: var(--bg-secondary);
}

.nav-search-result-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--accent);
    flex-shrink: 0;
}

.nav-search-empty {
    padding: 16px 14px;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
}

/* ---- Chat widget (Messenger/FB style) ---- */
.chat-widget-toggle {
    position: fixed !important;
    bottom: 22px;
    right: 22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #000;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 9990;
}

.bug-report-toggle {
    position: fixed !important;
    bottom: 22px;
    left: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-panel);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    z-index: 9990;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.bug-report-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.admin-ticket-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.admin-ticket-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.admin-ticket-urgency {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.admin-ticket-urgency.low { border: 1px solid var(--border-color); color: var(--text-muted); }
.admin-ticket-urgency.medium { border: 1px solid var(--accent-hover); color: var(--accent-hover); }
.admin-ticket-urgency.high { border: 1px solid #ff6b6b; color: #ff6b6b; }
.admin-ticket-desc {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.admin-ticket-status-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.admin-ticket-status-select {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.8rem;
}

.chat-widget-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ff6b6b;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.chat-widget-badge.hidden {
    display: none;
}

.chat-widget-panel {
    position: fixed !important;
    bottom: 90px;
    right: 22px;
    width: 320px;
    height: 440px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 9991;
}

.chat-widget-panel.open {
    display: flex;
}

.chat-widget-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.chat-widget-header h4 {
    font-size: 0.9rem;
    color: var(--text-primary);
    flex: 1;
}

.chat-widget-back {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px;
}

.chat-widget-back.visible {
    display: flex;
}

.chat-widget-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}

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

.chat-friend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
}

.chat-friend-item:hover {
    background: var(--bg-secondary);
}

.chat-friend-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.chat-friend-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--accent);
}

.chat-online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3ddc84;
    border: 2px solid var(--bg-panel);
}

.chat-online-dot.offline {
    background: var(--text-muted);
}

.chat-friend-info {
    flex: 1;
    min-width: 0;
}

.chat-friend-name {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 600;
}

.chat-friend-preview {
    font-size: 0.76rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-conversation-view {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.chat-conversation-view.active {
    display: flex;
}

.chat-messages-area {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-msg-row {
    display: flex;
}

.chat-msg-row.sent {
    justify-content: flex-end;
}

.chat-msg-bubble {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 0.83rem;
    line-height: 1.4;
}

.chat-msg-row.received .chat-msg-bubble {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.chat-msg-row.sent .chat-msg-bubble {
    background: var(--accent);
    color: #000;
    border-bottom-right-radius: 4px;
}

.chat-input-row {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border-color);
}

.chat-input-row input {
    flex: 1;
    min-width: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 8px 14px;
    color: var(--text-primary);
    font-size: 0.83rem;
    font-family: inherit;
}

.chat-input-row input:focus {
    outline: none;
    border-color: var(--accent);
}

.chat-send-btn {
    background: var(--accent);
    color: #000;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .nav-search-wrap { display: none; }
    .chat-widget-panel { width: calc(100vw - 24px); right: 12px; }
    .chat-widget-toggle { right: 12px; }
}

/* ============================
   BOARD DASHBOARD (private to board members)
   Uses the app's own theme variables, so it follows light/dark mode
   automatically (data-theme on <html>) and fills the whole tab width.
   ============================ */
.bd{--gl:color-mix(in srgb,var(--accent) 28%,transparent);--soft:color-mix(in srgb,var(--accent) 12%,transparent);display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;align-items:start;width:100%;min-height:calc(100vh - 110px);padding:18px 20px 40px;color:var(--text-primary)}
.bd *{box-sizing:border-box}
.bd-side{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:14px;padding:14px 10px;display:flex;flex-direction:column;gap:4px;position:sticky;top:64px;max-height:calc(100vh - 90px);overflow-y:auto}
.bd-brand{font-weight:700;padding:4px 10px 12px;line-height:1.2;color:var(--text-primary)}.bd-brand small{display:block;color:var(--text-muted);font-weight:400;font-size:.7rem;margin-top:3px}
.bd-nav{display:flex;align-items:center;gap:10px;background:none;border:0;border-left:3px solid transparent;color:var(--text-muted);padding:10px;border-radius:10px;cursor:pointer;font-size:.88rem;text-align:left;min-height:42px}
.bd-nav:hover{background:var(--bg-panel);color:var(--text-primary)}.bd-nav.on{background:var(--soft);color:var(--accent);border-left-color:var(--accent);font-weight:600}
.bd-nav em{margin-left:auto;background:var(--accent);color:var(--bg-primary);border-radius:99px;font-style:normal;font-size:.7rem;font-weight:700;padding:1px 7px}
.bd-me{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px;border-top:1px solid var(--border-color);font-size:.78rem;color:var(--text-muted)}
.bd-me b,.bd-seat b{flex:0 0 38px;height:38px;border-radius:50%;border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:.8rem;background:var(--soft)}
.bd-main{min-width:0}.bd-h1{font-size:1.5rem;margin:0 0 14px;color:var(--text-primary)}
.bd-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:14px;padding:16px;margin-bottom:14px}
.bd-card h3{margin:0 0 10px;font-size:.95rem;color:var(--text-primary)}.bd-mu{color:var(--text-muted);font-size:.85rem}
.bd-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:14px}.bd-kpis .bd-card{margin:0}
.bd-kl{color:var(--text-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}.bd-kv{font-size:1.9rem;font-weight:700;color:var(--accent);line-height:1.2}.bd-kc{color:var(--text-muted);font-size:.78rem;margin-bottom:8px}
.bd-prog{height:5px;background:var(--border-color);border-radius:9px;overflow:hidden}.bd-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover))}
.bd-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:14px}.bd-grid2 .bd-card{margin-bottom:0}.bd-grid2+.bd-card,.bd-kpis+.bd-grid2{margin-top:0}.bd-grid2{margin-bottom:14px}
.bd-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bd-donut{width:min(150px,40vw);height:auto;aspect-ratio:1}.bd-dn{fill:var(--text-primary);font-size:22px;font-weight:700}.bd-dl{fill:var(--text-muted);font-size:8px}
.bd-leg{list-style:none;padding:0;margin:0;font-size:.85rem}.bd-leg li{display:flex;align-items:center;gap:8px;margin:5px 0}.bd-leg b{width:10px;height:10px;border-radius:3px;flex:none}.bd-leg span{color:var(--text-muted);margin-left:auto;padding-left:14px}
.bd-bar{display:flex;height:9px;border-radius:9px;overflow:hidden;background:var(--border-color);margin:8px 0}.bd-bar i{display:block}.bd-vr{margin-bottom:10px;font-size:.85rem}.bd-vr small,.bd-card small{color:var(--text-muted)}
.bd-act{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-color);font-size:.85rem}.bd-act:last-child{border:0}
.bd-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.bd-pill{background:var(--soft);color:var(--accent);border-radius:99px;padding:2px 10px;font-size:.72rem;white-space:nowrap}.bd-pill.Approved{background:#34d39922;color:#16a870}.bd-pill.Rejected,.bd-pill.No{background:#f8717122;color:#e0504f}.bd-pill.amber{background:#fbbf2426;color:#c98a04}
.bd-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.bd-btn{background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-color);border-radius:10px;padding:8px 14px;cursor:pointer;font-size:.85rem;min-height:38px}.bd-btn:hover:not(:disabled){border-color:var(--accent)}
.bd-btn.on{background:var(--accent);color:var(--bg-primary);font-weight:600;border-color:transparent}.bd-btn.on:hover:not(:disabled){background:var(--accent-hover)}.bd-btn.ghost{background:none}.bd-btn:disabled{opacity:.4;cursor:not-allowed}
.bd-x{background:none;border:0;color:var(--text-muted);cursor:pointer;padding:6px}.bd-x:hover{color:#e0504f}
.bd-in{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:10px;color:var(--text-primary);padding:9px 12px;font:inherit;font-size:.88rem;width:100%;margin:6px 0}.bd-in:focus{outline:2px solid var(--accent);outline-offset:0}.bd-acts .bd-in{flex:1;min-width:150px;width:auto;margin:0}textarea.bd-in{min-height:70px;resize:vertical}
details.bd-card summary{cursor:pointer;color:var(--accent);font-weight:600}.bd-list{padding-left:18px;margin:8px 0}.bd-list li{margin:6px 0;display:flex;justify-content:space-between;gap:8px}ol.bd-list li{display:list-item}
.bd-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.bd-tb{width:100%;border-collapse:collapse;font-size:.85rem;min-width:420px}.bd-tb th{color:var(--text-muted);text-align:left;font-weight:500;padding:10px 8px;border-bottom:1px solid var(--border-color)}.bd-tb td{padding:10px 8px;border-bottom:1px solid var(--border-color);vertical-align:middle}.bd-tb select.bd-in{margin:0;width:auto}
.bd-seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:12px;margin-bottom:14px}
.bd-seat{display:flex;gap:12px;align-items:center;text-align:left;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:14px;padding:14px;cursor:pointer;color:var(--text-primary);transition:.15s;min-height:74px}.bd-seat:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 0 18px var(--gl)}.bd-seat.open{border-style:dashed}.bd-seat span{display:flex;flex-direction:column;min-width:0}.bd-seat small{color:var(--text-muted);font-size:.76rem;margin-top:2px}
.bd-chat{display:grid;grid-template-columns:210px minmax(0,1fr);gap:12px;align-items:start}.bd-chans{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:4px}.bd-chan{background:none;border:0;color:var(--text-muted);text-align:left;padding:10px;border-radius:9px;cursor:pointer;font-size:.84rem}.bd-chan:hover{background:var(--bg-panel)}.bd-chan.on{background:var(--soft);color:var(--accent);font-weight:600}
.bd-msgs{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:14px;padding:14px;min-width:0}.bd-mlist{height:clamp(240px,50vh,480px);overflow-y:auto;display:flex;flex-direction:column;gap:8px}.bd-msg{background:var(--bg-panel);border-radius:12px;padding:8px 12px;max-width:80%;align-self:flex-start;font-size:.88rem;overflow-wrap:anywhere}.bd-msg.me{align-self:flex-end;background:var(--soft)}.bd-msg small{display:block;font-size:.68rem}
.bd-modal{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}.bd-modal[hidden]{display:none}.bd-mbox{position:relative;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:22px;max-width:460px;width:100%;max-height:90vh;overflow-y:auto;color:var(--text-primary);box-shadow:0 0 30px var(--gl)}.bd-close{position:absolute;top:8px;right:10px}
@media(max-width:1100px){.bd{grid-template-columns:200px minmax(0,1fr);gap:14px;padding:14px}}
@media(max-width:860px){.bd{grid-template-columns:minmax(0,1fr);padding:12px 12px 32px;min-height:0}.bd-side{position:sticky;top:0;z-index:15;flex-direction:row;overflow-x:auto;overflow-y:hidden;max-height:none;padding:6px;gap:2px;-webkit-overflow-scrolling:touch}.bd-brand,.bd-me{display:none}.bd-nav{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;flex:none;min-height:44px}.bd-nav.on{border-bottom-color:var(--accent)}.bd-chat{grid-template-columns:minmax(0,1fr)}.bd-chans{flex-direction:row;overflow-x:auto}.bd-chan{white-space:nowrap;flex:none;min-height:40px}.bd-h1{font-size:1.25rem}.bd-msg{max-width:92%}}
@media(max-width:520px){.bd-in,.bd-btn{font-size:16px}.bd-btn{flex:1 1 auto}.bd-card{padding:14px}.bd-kv{font-size:1.6rem}.bd-donut{width:120px}}
/* --- v3: hero, gauges, Scrum board, funding, customization --- */
.bd-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}.bd-top .bd-h1{margin:0}
.bd-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:linear-gradient(135deg,var(--soft),var(--bg-secondary) 65%);border-color:var(--gl)}
.bd-hero h2{font-size:1.3rem;margin:0 0 4px;color:var(--text-primary)}.bd-hero-t{flex:1 1 240px}
.bd-rings{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}.bd-ringbtn{background:none;border:0;cursor:pointer;color:var(--text-muted);font-size:.78rem;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border-radius:14px}.bd-ringbtn:hover{background:var(--soft);color:var(--text-primary)}
.bd-gauge{width:min(120px,28vw);height:auto;aspect-ratio:1}.bd-chart{width:100%;height:auto;display:block;margin-bottom:6px}
.bd-ph{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}.bd-me b,.bd-seat b{overflow:hidden}
.bd-kan{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.bd-col{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;padding:10px;min-height:160px}.bd-col h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:2px 4px 10px;display:flex;justify-content:space-between}.bd-col h4 em{font-style:normal;color:var(--accent)}
.bd-tk{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:10px;margin-bottom:8px;cursor:grab;display:flex;flex-direction:column;gap:6px;font-size:.85rem}.bd-tk:hover{border-color:var(--accent)}.bd-tk:active{cursor:grabbing}
.bd-sub{margin:14px 0 6px;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.bd-chk{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.9rem}
.bd-sw{display:flex;gap:10px}.bd-swb{width:34px;height:34px;border-radius:50%;border:3px solid transparent;cursor:pointer}.bd-swb.on{border-color:var(--text-primary)}
@media(max-width:520px){.bd-rings{gap:8px}.bd-hero{padding:12px}.bd-kan{grid-auto-columns:minmax(78vw,1fr)}}
/* --- v4: My Profile (gradient hero, chips, fun facts, availability) --- */
.bd-phero{color:#fff;text-align:center;padding:28px 16px 22px;display:flex;flex-direction:column;align-items:center;gap:2px}
.bd-phero h2{margin:10px 0 0;font-size:1.3rem}.bd-phero p{margin:0;opacity:.92;font-size:.9rem}.bd-phero small{opacity:.8;font-size:.78rem;margin-bottom:6px}
.bd-pavatar{position:relative;width:84px;height:84px;margin:0 auto}
.bd-pcircle{width:100%;height:100%;border-radius:50%;background:#0004;border:3px solid #fff8;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;overflow:hidden}
.bd-pavatar .bd-ph{width:100%;height:100%;object-fit:cover}
.bd-pcam{position:absolute;bottom:0;right:0;background:#fff;color:#111;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;line-height:1;cursor:pointer;box-shadow:0 2px 6px #0006;z-index:2}
.bd-pshare{margin-top:10px;background:#ffffff26;border-color:#ffffff55;color:#fff;backdrop-filter:blur(2px)}.bd-pshare:hover{border-color:#fff}
.bd-chips{display:flex;flex-wrap:wrap;gap:8px}
button.bd-chip{background:var(--bg-panel);border:1px solid var(--border-color);color:var(--text-primary);border-radius:99px;padding:8px 14px;font-size:.82rem;cursor:pointer;transition:.15s}
button.bd-chip.on{color:#fff;border-color:transparent;box-shadow:0 2px 10px #0003}
button.bd-chip:hover{border-color:var(--accent)}
span.bd-chip{border:0;border-radius:99px;padding:8px 14px;font-size:.82rem;color:#fff}
.bd-fun{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;padding:12px;margin-bottom:8px}
.bd-fun b{display:block;font-size:.85rem;margin-bottom:6px}.bd-fun p{margin:0;color:var(--text-muted);font-size:.88rem}
.bd-toggle{width:48px;height:28px;border-radius:99px;background:var(--border-color);border:0;cursor:pointer;position:relative;flex:none}
.bd-toggle i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.15s;display:block}
.bd-toggle.on{background:var(--accent-grad,var(--accent))}.bd-toggle.on i{left:23px}
/* --- v5: document tabs, requirement tags, embedded board video --- */
.bd-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.bd-tab{background:var(--bg-panel);border:1px solid var(--border-color);color:var(--text-muted);border-radius:10px;padding:8px 14px;cursor:pointer;font-size:.85rem}
.bd-tab.on{background:var(--soft);color:var(--accent);border-color:var(--accent);font-weight:600}
.bd-tab em{font-style:normal;opacity:.8;margin-left:4px}
.bd-tag{display:inline-block;background:var(--soft);color:var(--accent);border-radius:99px;padding:1px 8px;font-size:.68rem;margin-left:6px;white-space:nowrap;vertical-align:middle}
.bd-jitsi{width:100%;height:min(70vh,560px);border-radius:12px;overflow:hidden;background:#0a0e17}


/* ==========================================================================================
   SITE ART (generative artwork for slots without real media yet)
   ========================================================================================== */
.lb-art { position: relative; overflow: hidden; padding: 0 !important; border-style: solid !important; background: radial-gradient(120% 120% at 30% 20%, var(--bg-panel), var(--bg-secondary)) !important; }
.lb-art-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lb-art-dots { fill: var(--text-muted); opacity: .25; }
.lb-art-orbit { animation: lb-orbit 38s linear infinite; }
.lb-art-glyph { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 45%, transparent)); }
.lb-art-blobs { animation: lb-breathe 9s ease-in-out infinite alternate; transform-origin: center; }
[data-theme="light"] .lb-art-blobs { opacity: .55; }
[data-theme="light"] .lb-art-dots { opacity: .35; }
.lb-art-label { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--bg-primary) 75%, transparent); border: 1px solid var(--border-color); color: var(--text-secondary); white-space: nowrap; }
@keyframes lb-orbit { to { transform: rotate(360deg); } }
@keyframes lb-breathe { from { transform: scale(1); } to { transform: scale(1.08) translate(2%, -2%); } }
@media (prefers-reduced-motion: reduce) { .lb-art-orbit, .lb-art-blobs { animation: none; } }

/* Department director: coming soon */
.dept-card-soon { cursor: default; }
.dept-card-soon .dept-card-body h3 { color: var(--accent); }
a.dept-card-btn { display: inline-block; text-decoration: none; }

/* Nutrition and Dentistry stages: touch moves the bowl/brush horizontally but still lets the page scroll */
#deptCanvas.lb-touch { touch-action: pan-y; cursor: none; }
.dept-infinity-stage .dept-canvas-hint { pointer-events: none; }

/* ==========================================================================================
   SITE FOOTER
   ========================================================================================== */
.lb-footer { position: relative; margin-top: 60px; padding: 56px 24px 28px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-secondary) 85%, transparent) 30%); border-top: 1px solid var(--border-color); color: var(--text-secondary); font-size: .9rem; }
.lb-footer::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .7; }
.lb-footer-top { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.lb-footer-name { display: inline-block; font-family: Georgia, 'Times New Roman', serif; font-size: 1.3rem; font-weight: 700; line-height: 1.25; color: var(--accent); text-decoration: none; letter-spacing: .02em; }
.lb-footer-tag { margin: .6rem 0 .5rem; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-primary); }
.lb-footer-mission { margin: 0 0 1rem; line-height: 1.6; color: var(--text-muted); max-width: 360px; }
.lb-footer-help { padding: .55rem 1rem; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; font-size: .85rem; color: #fb7185; background: color-mix(in srgb, #fb7185 10%, transparent); border: 1px solid color-mix(in srgb, #fb7185 45%, transparent); }
.lb-footer-help:hover, .lb-footer-help:focus-visible { background: color-mix(in srgb, #fb7185 20%, transparent); outline: none; }
.lb-footer-col { display: flex; flex-direction: column; gap: .45rem; }
.lb-footer-col h4 { margin: 0 0 .4rem; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-primary); }
.lb-footer-col a { color: var(--text-secondary); text-decoration: none; transition: color .2s ease; width: fit-content; }
.lb-footer-col a:hover, .lb-footer-col a:focus-visible { color: var(--accent); }
.lb-footer-places { max-width: 1200px; margin: 36px auto 0; padding-top: 20px; border-top: 1px solid var(--border-color); display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: .84rem; }
.lb-footer-places b { color: var(--text-primary); font-weight: 600; margin-right: .35rem; }
.lb-footer-places .lb-soon { color: var(--text-muted); }
.lb-footer-places em { font-style: normal; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; margin-left: .35rem; color: var(--accent); }
.lb-footer-bottom { max-width: 1200px; margin: 18px auto 0; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .78rem; color: var(--text-muted); }
.lb-footer-bottom a { color: var(--text-muted); text-decoration: none; }
.lb-footer-bottom a:hover { color: var(--accent); }
@media (max-width: 980px) { .lb-footer-top { grid-template-columns: 1fr 1fr; } .lb-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .lb-footer { padding: 44px 18px 96px; } .lb-footer-top { grid-template-columns: 1fr 1fr; gap: 24px 16px; } .lb-footer-bottom { flex-direction: column; } }

/* Marketing: overflow-x:hidden on <body> turned it into a scroll box, so the pinned statements never stuck */
body.mkt-body { overflow-x: clip !important; overflow-y: visible !important; }


/* ==========================================================================================
   LBIM INTRO · "EL VÉRTIGO"  (index.html only; always cinematic dark, any theme)
   ========================================================================================== */
html.lbi-pending { background: #03050c; }
html.lbi-pending body { visibility: hidden; }
html.lbi-open, html.lbi-open body { overflow: hidden; }
html.lbi-open body > :not(.lbi):not(script) { visibility: hidden; }
html.lbi-revealing body > :not(.lbi):not(script) { visibility: visible; animation: lbiSiteIn 1.2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes lbiSiteIn { from { opacity: 0; filter: blur(14px); transform: scale(1.03); } to { opacity: 1; filter: none; transform: none; } }

.lbi { position: fixed; inset: 0; z-index: 2147483000; background: #03050c; color: #eef4ff; overflow: hidden; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; transition: opacity 1.2s ease, filter 1.2s ease, transform 1.2s ease; }
.lbi * { box-sizing: border-box; }
.lbi-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lbi-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0,0,0,.72) 100%); }
.lbi-vignette::after { content: ''; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px); }
.lbi-closing { opacity: 0; filter: blur(10px); transform: scale(1.06); pointer-events: none; }

/* ---------- gate ---------- */
.lbi-gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 16px; text-align: center; transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .7s; overflow-y: auto; }
.lbi-playing .lbi-gate { opacity: 0; transform: scale(.94); filter: blur(8px); pointer-events: none; }
.lbi-mark { width: clamp(96px, 16vw, 150px); filter: drop-shadow(0 0 18px rgba(34,211,238,.45)) drop-shadow(0 0 40px rgba(167,139,250,.3)); animation: lbiBreath 4.5s ease-in-out infinite; }
.lbi-mark svg { width: 100%; height: auto; display: block; }
.lbi-mark path, .lbi-mark circle { stroke-dasharray: 260; stroke-dashoffset: 260; animation: lbiDraw 2.4s cubic-bezier(.6,0,.2,1) forwards; }
.lbi-mark path:nth-of-type(2) { animation-delay: .4s; } .lbi-mark path:nth-of-type(3) { animation-delay: .8s; }
@keyframes lbiDraw { to { stroke-dashoffset: 0; } }
@keyframes lbiBreath { 50% { filter: drop-shadow(0 0 26px rgba(34,211,238,.7)) drop-shadow(0 0 60px rgba(167,139,250,.45)); } }
.lbi-gate-title { margin: 6px 0 0; font: 700 clamp(1.5rem, 4.6vw, 3rem)/1.1 Georgia, 'Times New Roman', serif; letter-spacing: .01em; background: linear-gradient(100deg, #e0f7ff 0%, #22d3ee 35%, #a78bfa 70%, #f9a8d4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.lbi-choose { margin: 8px 0 0; font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: #8fb3cf; }
.lbi-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; }
.lbi-lang { appearance: none; border: 1px solid rgba(125,211,252,.22); background: rgba(10,18,36,.6); color: #dbe8f7; padding: 9px 14px; border-radius: 999px; font: 500 .9rem system-ui, sans-serif; cursor: pointer; backdrop-filter: blur(6px); transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.lbi-lang:hover { border-color: rgba(34,211,238,.7); transform: translateY(-1px); }
.lbi-lang[aria-checked="true"] { border-color: #22d3ee; background: linear-gradient(120deg, rgba(34,211,238,.22), rgba(167,139,250,.22)); color: #fff; box-shadow: 0 0 0 1px rgba(34,211,238,.4), 0 0 22px rgba(34,211,238,.25); }
.lbi-gate-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }
.lbi-btn { appearance: none; border: 0; cursor: pointer; padding: 14px 28px; border-radius: 999px; font: 700 1rem system-ui, sans-serif; letter-spacing: .02em; color: #03050c; background: linear-gradient(110deg, #22d3ee, #a78bfa 60%, #f472b6); box-shadow: 0 10px 40px -10px rgba(34,211,238,.7); transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; }
.lbi-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: lbiSheen 3.6s ease-in-out 1.5s infinite; }
@keyframes lbiSheen { 40%, 100% { transform: translateX(120%); } }
.lbi-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -12px rgba(167,139,250,.8); }
.lbi-btn:focus-visible, .lbi-lang:focus-visible, .lbi-hud-btn:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }
.lbi-ghost { background: transparent; color: #dbe8f7; border: 1px solid rgba(219,232,247,.35); box-shadow: none; }
.lbi-ghost::after { display: none; }
.lbi-ghost:hover { border-color: #fff; color: #fff; box-shadow: none; }
.lbi-note { margin: 4px 0 0; font-size: .82rem; color: #7f97ad; max-width: 420px; }

/* ---------- stage ---------- */
.lbi-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 8vh max(16px, 6vw) 18vh; text-align: center; pointer-events: none; opacity: 0; transition: opacity .6s; }
.lbi-playing .lbi-stage { opacity: 1; }
.lbi[data-scene="modes"] .lbi-stage, .lbi[data-scene="mark"] .lbi-stage, .lbi[data-scene="lineage"] .lbi-stage { justify-content: flex-end; padding-bottom: 9vh; }
.lbi[data-scene="sign"] .lbi-stage { padding-bottom: 8vh; }
.lbi[data-scene="prologue"] .lbi-stage { justify-content: flex-start; padding-top: 14vh; }
.lbi-kicker { margin: 0; min-height: 1em; font: 600 .78rem/1.4 system-ui, sans-serif; letter-spacing: .42em; text-transform: uppercase; color: #22d3ee; opacity: 0; transform: translateY(8px); transition: opacity .8s, transform .8s; text-shadow: 0 0 18px rgba(34,211,238,.6); }
.lbi-kicker.lbi-in { opacity: 1; transform: none; }
.lbi-line, .lbi-sub { margin: 0; max-width: 980px; text-wrap: balance; transition: opacity .6s ease, filter .6s ease, transform .6s ease; }
.lbi-line { font: 600 clamp(1.35rem, 3.6vw, 2.6rem)/1.25 system-ui, sans-serif; color: #f4f8ff; text-shadow: 0 0 30px rgba(125,211,252,.35); }
.lbi-sub { font: 400 clamp(1rem, 2.1vw, 1.45rem)/1.6 Georgia, 'Times New Roman', serif; color: #c9d8ea; max-width: 760px; }
.lbi-out { opacity: 0 !important; filter: blur(8px); transform: translateY(-10px); }
.lbi-serif { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-style: italic; }
.lbi-big { font-size: clamp(1.8rem, 5.6vw, 4.2rem); font-style: normal; font-weight: 700; letter-spacing: -.01em; }
.lbi[data-scene="vertigo"] .lbi-big { text-shadow: 0 0 40px rgba(251,146,60,.35); }
.lbi-cite { margin-top: 38vh; font: italic 400 clamp(.9rem, 1.6vw, 1.1rem) Georgia, serif; letter-spacing: .08em; color: #fbbf24; text-shadow: 0 0 20px rgba(251,191,36,.5); }
.lbi-mode { font-weight: 500; max-width: 760px; }
.lbi-mode1 { color: #cffafe; text-shadow: 0 0 24px rgba(34,211,238,.45); }
.lbi-mode2 { color: #fce7f3; text-shadow: 0 0 24px rgba(244,114,182,.45); }
.lbi[data-scene="modes"] .lbi-kicker { font-size: 1rem; letter-spacing: .5em; }
.lbi-title { display: flex; flex-direction: column; align-items: center; gap: .15em; }
.lbi-title span:first-child { font: 800 clamp(2.2rem, 7.4vw, 5.6rem)/1 Georgia, 'Times New Roman', serif; letter-spacing: -.01em; background: linear-gradient(100deg, #e0f7ff 0%, #22d3ee 30%, #a78bfa 65%, #f472b6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 28px rgba(34,211,238,.35)); }
.lbi-title span:last-child { font: 500 clamp(.8rem, 1.8vw, 1.25rem)/1.2 system-ui, sans-serif; letter-spacing: .55em; text-transform: uppercase; color: #dbe8f7; padding-left: .55em; }
.lbi-reveal span { animation: lbiReveal 1.4s cubic-bezier(.2,.7,.2,1) both; }
.lbi-reveal span:last-child { animation-delay: .35s; }
@keyframes lbiReveal { from { opacity: 0; letter-spacing: .9em; filter: blur(14px); } }

/* signature */
.lbi-signing { gap: 14px; }
.lbi-signing .lbi-kicker { order: 3; margin-top: 18px; }
.lbi-sig { font: 500 clamp(1rem, 2.4vw, 1.6rem)/1.4 'Courier New', ui-monospace, monospace; color: #e2f3ff; letter-spacing: .02em; }
.lbi-signing .lbi-sub { font: italic 400 clamp(1.1rem, 2.8vw, 1.9rem)/1.4 Georgia, serif; color: #fff; }
.lbi-signing .lbi-sub:not(:empty)::before { content: ''; display: block; width: min(320px, 60vw); height: 1px; margin: 0 auto 14px; background: linear-gradient(90deg, transparent, #22d3ee, #a78bfa, transparent); }
.lbi-approved { font-size: .82rem; letter-spacing: .3em; color: #fbbf24; text-shadow: 0 0 18px rgba(251,191,36,.6); border: 1px solid rgba(251,191,36,.45); padding: 10px 18px; border-radius: 4px; max-width: 92vw; }
.lbi-sig:not(:empty)::after, .lbi-signing .lbi-sub:not(.lbi-glitch):not(:empty)::after { content: '▍'; margin-left: 2px; animation: lbiCaret .8s steps(1) infinite; color: #22d3ee; }
@keyframes lbiCaret { 50% { opacity: 0; } }

/* glitch: RGB split + slice */
.lbi-glitch { position: relative; animation: lbiShake .12s steps(2) infinite; }
.lbi-glitch::before, .lbi-glitch::after { content: attr(data-text) !important; position: absolute; inset: 0; pointer-events: none; margin: 0 !important; animation: none; opacity: .9; }
.lbi-glitch::before { color: #22d3ee; transform: translate(-3px, 0); clip-path: inset(10% 0 55% 0); animation: lbiSlice1 .24s steps(3) infinite; mix-blend-mode: screen; }
.lbi-glitch::after { color: #f472b6; transform: translate(3px, 0); clip-path: inset(60% 0 8% 0); animation: lbiSlice2 .2s steps(3) infinite; mix-blend-mode: screen; }
@keyframes lbiSlice1 { 0% { clip-path: inset(10% 0 55% 0); transform: translate(-4px, -1px); } 50% { clip-path: inset(45% 0 30% 0); transform: translate(3px, 1px); } 100% { clip-path: inset(70% 0 5% 0); transform: translate(-2px, 0); } }
@keyframes lbiSlice2 { 0% { clip-path: inset(60% 0 8% 0); transform: translate(4px, 1px); } 50% { clip-path: inset(5% 0 70% 0); transform: translate(-3px, -1px); } 100% { clip-path: inset(30% 0 40% 0); transform: translate(2px, 0); } }
@keyframes lbiShake { 0% { transform: translate(0); } 50% { transform: translate(1px, -1px) skewX(-2deg); } 100% { transform: translate(-1px, 1px); } }
.lbi-signing .lbi-sub.lbi-glitch::before { display: block; width: auto; height: auto; margin: 0; background: none; }

/* HUD */
.lbi-hud { position: absolute; right: 16px; bottom: 18px; display: flex; gap: 8px; opacity: 0; pointer-events: none; transition: opacity .6s .4s; }
.lbi-playing .lbi-hud { opacity: 1; pointer-events: auto; }
.lbi-hud-btn { appearance: none; border: 1px solid rgba(219,232,247,.28); background: rgba(3,5,12,.55); color: #dbe8f7; padding: 8px 14px; border-radius: 999px; font: 500 .82rem system-ui, sans-serif; white-space: nowrap; cursor: pointer; backdrop-filter: blur(6px); transition: border-color .2s, color .2s; }
.lbi-hud-btn:hover { border-color: #fff; color: #fff; }
.lbi-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.06); opacity: 0; transition: opacity .6s; }
.lbi-playing .lbi-progress { opacity: 1; }
.lbi-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6); box-shadow: 0 0 10px #22d3ee; }

@media (max-width: 600px) {
  .lbi-stage { padding: 7vh 16px 20vh; gap: 14px; }
  .lbi-kicker { letter-spacing: .28em; font-size: .7rem; }
  .lbi-title span:last-child { letter-spacing: .3em; padding-left: .3em; }
  .lbi-approved { letter-spacing: .14em; font-size: .72rem; }
  .lbi-hud { right: 50%; transform: translateX(50%); bottom: 14px; }
  .lbi-lang { padding: 8px 12px; font-size: .85rem; }
}
@media (max-height: 520px) { .lbi-gate { justify-content: flex-start; gap: 8px; } .lbi-mark { width: 70px; } }
@media (prefers-reduced-motion: reduce) {
  .lbi-mark, .lbi-btn::after, .lbi-glitch, .lbi-glitch::before, .lbi-glitch::after, .lbi-reveal span { animation: none !important; }
  .lbi-mark path, .lbi-mark circle { stroke-dashoffset: 0; animation: none; }
  html.lbi-revealing body > :not(.lbi):not(script) { animation-duration: .01s; }
}

/* reserved board seats (nominee pending confirmation) */
.person-card-open .person-media { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent) 0 12px, transparent 12px 24px), var(--bg-secondary); outline: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -10px; }
.person-card-open .person-initials { flex-direction: column; font-size: 4.2rem; font-weight: 300; color: var(--accent); opacity: .85; }
.person-card-open .person-initials::before { content: 'SEAT'; display: block; font-size: .7rem; letter-spacing: .3em; font-weight: 700; opacity: .7; }
.person-card-open .person-badge { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.person-card-open h3 { color: var(--text-secondary); font-style: italic; }
/* Puentes de Amor: Sign out */
.app-signout { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; align-self: center; background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 999px; padding: 7px 14px; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .2s, color .2s, background .2s; }
.app-signout:hover, .app-signout:focus-visible { border-color: #f87171; color: #f87171; background: color-mix(in srgb, #f87171 8%, transparent); outline: none; }
.app-signout-who { font-weight: 500; color: var(--text-muted); max-width: 170px; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; border-right: 1px solid var(--border-color); }
@media (max-width: 700px) { .app-signout-who { display: none; } .app-signout { padding: 7px 11px; } }


/* ==========================================================================================
   HOME · Where we stand + Connect (index.html)
   ========================================================================================== */
.lb-stand, .lb-connect { max-width: 1180px; margin: 0 auto; padding: 90px 20px 40px; color: var(--text-primary); }
.lb-kicker { margin: 0 0 10px; font: 700 .74rem/1.4 system-ui, sans-serif; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); }
.lb-stand-head { max-width: 760px; }
.lb-stand h2, .lb-connect h2 { margin: 0 0 14px; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.12; color: var(--text-primary); }
.lb-lead { margin: 0; font-size: 1.05rem; line-height: 1.7; color: var(--text-secondary); }

/* roadmap */
.lb-road { list-style: none; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.lb-step { position: relative; padding: 22px 22px 20px; border-radius: 16px; background: var(--bg-panel); border: 1px solid var(--border-color); counter-increment: step; transition: transform .25s, border-color .25s; }
.lb-step:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border-color)); }
.lb-step::after { content: counter(step, decimal-leading-zero); position: absolute; top: 16px; right: 18px; font: 700 1.6rem/1 Georgia, serif; color: color-mix(in srgb, var(--text-muted) 40%, transparent); }
.lb-step-dot { display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text-muted); margin-bottom: 14px; }
.lb-step.is-done .lb-step-dot { background: #34d399; border-color: #34d399; box-shadow: 0 0 12px #34d39988; }
.lb-step.is-now .lb-step-dot { border-color: var(--accent); background: var(--accent); animation: lbPulse 1.8s ease-in-out infinite; }
@keyframes lbPulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 18%, transparent); } }
.lb-step-tag { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.lb-step.is-done .lb-step-tag { color: #34d399; }
.lb-step.is-now .lb-step-tag { color: var(--accent); }
.lb-step h3 { margin: 6px 0 8px; font-size: 1.12rem; color: var(--text-primary); }
.lb-step p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--text-secondary); }
.lb-step a { display: inline-block; margin-top: 12px; font-weight: 600; font-size: .9rem; color: var(--accent); text-decoration: none; }
.lb-step a:hover { text-decoration: underline; }

/* now vs later */
.lb-now { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lb-now-col { padding: 24px; border-radius: 16px; border: 1px solid var(--border-color); background: var(--bg-secondary); }
.lb-now-col h3 { margin: 0 0 12px; font-size: 1.05rem; display: flex; gap: 10px; align-items: center; color: var(--text-primary); }
.lb-now-col h3 span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .9rem; }
.lb-now-yes h3 span { background: color-mix(in srgb, #34d399 20%, transparent); color: #34d399; }
.lb-now-wait h3 span { background: color-mix(in srgb, #fbbf24 22%, transparent); color: #d97706; }
.lb-now-col ul { margin: 0; padding-left: 1.1rem; color: var(--text-secondary); line-height: 1.75; font-size: .95rem; }

/* governance rules */
.lb-rules-title { margin: 56px 0 18px; font-size: 1.4rem; color: var(--text-primary); }
.lb-rules { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.lb-rule { padding: 20px 18px; border-radius: 16px; background: var(--bg-panel); border: 1px solid var(--border-color); border-top: 3px solid var(--accent); }
.lb-rule-n { font: 700 .78rem system-ui, sans-serif; letter-spacing: .2em; color: var(--accent); }
.lb-rule h4 { margin: 8px 0 8px; font-size: 1rem; line-height: 1.3; color: var(--text-primary); }
.lb-rule p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--text-secondary); }
.lb-stand-note { margin: 22px 0 0; font-size: .8rem; color: var(--text-muted); }

/* connect: the bridge */
.lb-connect { text-align: center; padding-bottom: 70px; }
.lb-connect .lb-lead { margin-bottom: 28px; }
.lb-bridge { position: relative; width: min(760px, 100%); height: 300px; margin: 0 auto; }
.lb-bridge-arc { position: absolute; inset: 0 0 50px; width: 100%; height: calc(100% - 50px); overflow: visible; }
.lb-arc, .lb-deck { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lb-arc { stroke-dasharray: 900; stroke-dashoffset: 900; opacity: .55; transition: stroke-dashoffset 1s cubic-bezier(.6,0,.2,1); }
.lb-deck { opacity: .25; }
.lb-bridge.is-open .lb-arc { stroke-dashoffset: 0; }
.lb-nodes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0 0 50px; }
.lb-nodes li { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.lb-node { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--text-primary); background: var(--bg-panel); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border-color)); box-shadow: 0 8px 26px rgba(0,0,0,.25); cursor: pointer; text-decoration: none; padding: 0;
  opacity: 0; transform: translateY(80px) scale(.3); pointer-events: none; transition: transform .55s cubic-bezier(.34,1.56,.64,1) var(--d), opacity .35s var(--d), background .2s, color .2s, border-color .2s; }
.lb-node svg { width: 23px; height: 23px; }
.lb-bridge.is-open .lb-node { opacity: 1; transform: none; pointer-events: auto; }
.lb-node:hover, .lb-node:focus-visible { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); outline: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 30px rgba(0,0,0,.3); }
.lb-node.is-soon { color: var(--text-muted); border-style: dashed; }
.lb-node.is-soon:hover, .lb-node.is-soon:focus-visible { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--text-muted); box-shadow: none; }
.lb-node.is-share { border-color: #34d399; color: #34d399; }
.lb-node.is-share:hover, .lb-node.is-share:focus-visible { background: #34d399; color: #04121a; }
.lb-node-name { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 .72rem system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--text-primary); pointer-events: none; }
.lb-node-soon { position: absolute; top: -6px; right: -10px; font: 700 .56rem system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 2px 5px; border-radius: 6px; background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border-color); }
.lb-bridge-core { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 26px 12px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border-color)); background: var(--bg-panel); color: var(--accent); cursor: pointer; font: 700 .82rem system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 14px 40px rgba(0,0,0,.25); transition: transform .25s, box-shadow .25s, background .25s, color .25s; }
.lb-bridge-core svg { width: 64px; height: 48px; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.lb-bridge-core:hover, .lb-bridge-core:focus-visible { transform: translateX(-50%) translateY(-3px); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent), 0 18px 46px rgba(0,0,0,.3); outline: none; }
.lb-bridge.is-open .lb-bridge-core { background: var(--accent); color: var(--bg-primary); }
.lb-bridge.is-open .lb-bridge-core svg { transform: scale(1.08); }
.lb-bridge:not(.is-open) .lb-bridge-core::before { content: ''; position: absolute; inset: -6px; border-radius: 26px; border: 1px solid var(--accent); opacity: 0; animation: lbRing 2.6s ease-out infinite; }
@keyframes lbRing { 0% { opacity: .6; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.12); } }
.lb-connect-status { min-height: 1.4em; margin: 22px 0 0; font-size: .92rem; color: var(--text-secondary); }

@media (max-width: 980px) { .lb-road { grid-template-columns: repeat(2, 1fr); } .lb-rules { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .lb-stand, .lb-connect { padding: 64px 16px 30px; }
  .lb-road, .lb-now, .lb-rules { grid-template-columns: 1fr; }
  .lb-bridge { height: 250px; }
  .lb-node { width: 42px; height: 42px; left: -21px; top: -21px; }
  .lb-node svg { width: 19px; height: 19px; }
  .lb-node-name { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) { .lb-node, .lb-arc { transition: none; } .lb-step.is-now .lb-step-dot, .lb-bridge-core::before { animation: none !important; } }

/* AI pinned inside Messages (uses the app theme variables, light and dark) */
.chat-ai-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: transparent; border: 0; border-bottom: 1px solid var(--border-color); color: var(--text-primary); cursor: pointer; text-align: left; font: inherit; }
.chat-ai-row:hover, .chat-ai-row:focus-visible { background: rgba(127, 127, 127, 0.08); outline: none; }
.chat-ai-row[hidden] { display: none; }
.chat-ai-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--accent); color: var(--accent); font-weight: 800; }
.chat-ai-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.chat-ai-txt b { font-size: 0.9rem; }
.chat-ai-txt small { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-ai-pin { flex: none; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; padding: 2px 8px; border-radius: 50px; border: 1px solid var(--accent); color: var(--accent); }
.chat-ai-back { flex: none; width: 30px; height: 30px; margin-right: 6px; border-radius: 50%; border: 1px solid var(--border-color, rgba(127,127,127,.3)); background: transparent; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.chat-ai-back:hover, .chat-ai-back:focus-visible { border-color: var(--accent, currentColor); outline: none; }

/* Guardian opens in the Messages corner; its own floating launcher is not shown on Puentes de Amor */
.g-puentes .g-launcher, .g-puentes .g-teaser { display: none !important; }
html body .guardian-root.g-puentes { left: auto; right: max(22px, env(safe-area-inset-right)); bottom: 12px; }
html body .g-puentes .g-panel { left: auto; right: 0; transform-origin: bottom right; }
@media (max-width: 600px) { html body .guardian-root.g-puentes { right: max(12px, env(safe-area-inset-right)); } html body .g-puentes .g-panel { left: 8px; right: 8px; } }