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

/* ===== CUSTOM PROPERTIES ===== */
:root {
  --navy: #0f2744;
  --navy-light: #1a3a5c;
  --accent: #e8a838;
  --accent-hover: #d4922e;
  --accent-glow: rgba(232, 168, 56, 0.25);
  --text: #2d3748;
  --text-light: #64748b;
  --bg: #f8fafc;
  --white: #ffffff;
  --card-border: rgba(0, 0, 0, 0.06);
  --header-bg: rgba(255, 255, 255, 0.85);
  --header-border: rgba(0, 0, 0, 0.06);
  --input-bg: rgba(0, 0, 0, 0.04);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.1);
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Map elen's tokens to the shared gateka-core connect modal so its
     inputs/card pick up the light theme instead of the dark fallbacks
     baked into connect.css. */
  --gk-bg:          var(--white);
  --gk-bg-surface:  var(--white);
  --gk-text:        var(--text);
  --gk-text-muted:  var(--text-light);
  --gk-border:      var(--card-border);
  --gk-primary:     var(--accent);
  --gk-accent:      var(--accent);
  --gk-radius:      var(--radius-sm);
  --gk-font:        'Inter', -apple-system, system-ui, sans-serif;
}

[data-theme="dark"] {
  --navy: #e2e8f0;
  --navy-light: #94a3b8;
  --text: #e2e8f0;
  --text-light: #94a3b8;
  --bg: #0c1220;
  --white: #141e30;
  --card-border: rgba(255, 255, 255, 0.06);
  --header-bg: rgba(12, 18, 32, 0.88);
  --header-border: rgba(255, 255, 255, 0.06);
  --input-bg: rgba(255, 255, 255, 0.06);
  --shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.35);
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

ul { list-style: none; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===== LANG SWITCH FADE ===== */
body.lang-switching > *:not(.header) {
  opacity: 0.3 !important;
  filter: blur(3px) !important;
  transition: opacity 0.3s ease, filter 0.3s ease !important;
}

body.lang-fadein > *:not(.header) {
  animation: langFadeIn 0.35s ease forwards;
}

@keyframes langFadeIn {
  from { opacity: 0.3; filter: blur(3px); }
  to { opacity: 1; filter: blur(0); }
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ===== HEADER ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--header-border);
  transition: var(--transition);
}

/* Auth dropdown menu — bypass every stacking-context game by lifting
   z to 9999 (same tier as the beta banner + chat widget). Three prior
   z-index tweaks on .header / .hero couldn't reliably keep the menu
   above the hero on Chromium; this one rule does it without touching
   the stacking-context chain. */
.header-auth-menu { z-index: 9999 !important; }

.header.scrolled {
  box-shadow: var(--shadow);
}

.header-inner {
  display: grid;
  /* Three equal zones across the full viewport: logo (centered), nav
     (centered), actions (right-aligned). */
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 16px 32px;
  transition: padding var(--transition);
}
.header-inner > .header-logo { justify-self: center; }
/* Flatten .header-right so its children participate in header-inner's
   grid — nav and actions act as direct grid items. */
.header-inner > .header-right { display: contents; }
.header-inner > .header-right > nav { justify-self: center; }

.header.scrolled .header-inner {
  padding: 10px 32px;
}

.header-logo img {
  height: 38px;
  width: auto;
  transition: var(--transition);
}

.header-logo .logo-dark { display: none; }

[data-theme="dark"] .header-logo .logo-light { display: none; }
[data-theme="dark"] .header-logo .logo-dark { display: block; }

/* Right-aligned cluster: lang / theme / auth pill sit tight together. */
.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-list {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav-list a {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text);
  padding: 8px 16px;
  border-radius: 8px;
  transition: var(--transition);
  position: relative;
}

.nav-list a:hover {
  color: var(--accent);
  background: rgba(232, 168, 56, 0.08);
}

.nav-list a.active {
  color: var(--accent);
  background: rgba(232, 168, 56, 0.1);
}

.nav-separator {
  width: 1px;
  height: 20px;
  background: var(--card-border);
  align-self: center;
  margin: 0 4px;
}

.lang-toggle {
  position: relative;
  display: flex;
  align-items: center;
  padding: 3px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 100px;
  cursor: pointer;
  gap: 0;
  font-family: 'Inter', sans-serif;
}

.lang-option {
  position: relative;
  z-index: 1;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-light);
  transition: color var(--transition);
  user-select: none;
}

.lang-option--active {
  color: #fff;
}

.lang-slider {
  position: absolute;
  left: 3px;
  top: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  background: var(--accent);
  border-radius: 100px;
  transition: transform var(--transition);
  pointer-events: none;
}

.lang-toggle[data-lang="en"] .lang-slider {
  transform: translateX(100%);
}

.lang-toggle[data-lang="en"] #langFr {
  color: var(--text-light);
}

.lang-toggle[data-lang="en"] #langEn {
  color: #fff;
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  border-radius: 8px;
  transition: var(--transition);
}

.mobile-toggle:hover {
  background: var(--input-bg);
}

.mobile-toggle span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--text);
  border-radius: 2px;
  transition: var(--transition);
}

/* ===== HERO ===== */
.hero {
  position: relative;
  z-index: 0;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: url('/static/images/image.jpg') center center / cover no-repeat;
  /* `background-attachment: fixed` was the actual cross-browser
     culprit — it makes the hero's bg paint against the viewport
     instead of the element, producing a paint-layer that punches
     through the fixed header's z:1000 on Chromium. Drop it; the
     hero's bg now scrolls naturally with the rest of the section. */
  /* margin-top: 70px removed 2026-05-05 — pre-elen-canonical-convergence
     it cleared the bespoke fixed `.header` (~70px tall). With the
     canonical _gk_nav.html (static on beta, fixed-overlay on prod),
     the margin produced an extra blank gap above the hero. Centered
     hero content (align-items: center on 92vh) stays well below the
     68px nav so nothing's hidden. */
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 39, 68, 0.88) 0%, rgba(15, 39, 68, 0.6) 50%, rgba(232, 168, 56, 0.15) 100%);
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 32px;
  width: 100%;
}

/* Home hero */
.hero-home .hero-content {
  display: flex;
  gap: 60px;
  align-items: center;
}

.hero-title-block {
  flex: 1;
}

.hero-title-block h1 {
  color: #fff;
  font-family: 'DM Serif Display', serif;
  font-size: 4rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1px;
}

.hero-title-block h1 span {
  display: block;
  color: var(--accent);
}

.hero-tagline {
  display: inline-block;
  margin-top: 24px;
  padding: 8px 20px;
  background: rgba(232, 168, 56, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(232, 168, 56, 0.3);
  border-radius: 100px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.hero-desc-block {
  flex: 1;
}

.hero-desc-block p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  line-height: 1.85;
  margin-bottom: 20px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 14px 32px;
  background: var(--accent);
  color: #fff;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(232, 168, 56, 0.35);
}

.hero-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(232, 168, 56, 0.45);
}

.hero-cta svg {
  transition: transform var(--transition);
}

.hero-cta:hover svg {
  transform: translateX(4px);
}

/* Page hero (services, expertise, blog) */
.hero-page {
  min-height: 50vh;
  justify-content: center;
  text-align: center;
}

.hero-page .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-page h1 {
  color: #fff;
  font-family: 'DM Serif Display', serif;
  font-size: 3.5rem;
  font-weight: 400;
  letter-spacing: -0.5px;
}

.hero-page .hero-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  margin-top: 16px;
  max-width: 500px;
}

.hero-page h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin: 20px auto 0;
  border-radius: 3px;
}

/* ===== SECTION HELPERS ===== */
.section {
  padding: 100px 32px;
}

.section-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.section-title {
  font-family: 'DM Serif Display', serif;
  font-size: 2rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 48px;
  letter-spacing: -0.3px;
}

.section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--accent);
  margin-top: 12px;
  border-radius: 3px;
}

.section-title.center {
  text-align: center;
}

.section-title.center::after {
  margin-left: auto;
  margin-right: auto;
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 12px;
}

/* ===== HOME: MISSION ===== */
.mission {
  display: flex;
  min-height: 500px;
  overflow: hidden;
  border-radius: 0;
}

.mission-text {
  flex: 1;
  background: var(--navy);
  color: #fff;
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mission-text .section-title {
  color: #fff;
}

.mission-text p {
  font-size: 1rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.8);
}

.mission-image {
  flex: 1;
  background: url('/static/images/visite-de-prévention-des-risques.jpg') center center / cover no-repeat;
  min-height: 400px;
  position: relative;
}

.mission-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--navy), transparent 30%);
}

/* ===== HOME: STATS ===== */
.stats {
  padding: 0;
  position: relative;
}

.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1280px;
  margin: -50px auto 0;
  position: relative;
  z-index: 2;
  padding: 0 32px;
}

.stat-item {
  text-align: center;
  padding: 48px 24px;
  background: var(--white);
  border: 1px solid var(--card-border);
  transition: var(--transition);
}

.stat-item:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}

.stat-item:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.stat-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  z-index: 1;
}

.stat-number {
  font-family: 'DM Serif Display', serif;
  font-size: 3rem;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-light);
}

/* ===== HOME: EXPERTISE GRID ===== */
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.expertise-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.expertise-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.expertise-card:hover img {
  transform: scale(1.08);
}

.expertise-card .card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 39, 68, 0.9) 0%, rgba(15, 39, 68, 0.1) 60%, transparent 100%);
  transition: var(--transition);
}

.expertise-card:hover .card-overlay {
  background: linear-gradient(to top, rgba(232, 168, 56, 0.85) 0%, rgba(15, 39, 68, 0.2) 60%, transparent 100%);
}

.expertise-card .card-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  padding: 32px 20px 24px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  z-index: 1;
}

.expertise-card .card-arrow {
  position: absolute;
  bottom: 24px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: translateX(-10px);
  transition: var(--transition);
  z-index: 1;
}

.expertise-card:hover .card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ===== HOME: EXPERIENCES ===== */
.experiences-carousel {
  display: flex;
  align-items: center;
  gap: 48px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 48px;
  box-shadow: var(--shadow);
  border: 1px solid var(--card-border);
}

.carousel-logo {
  flex-shrink: 0;
  width: 180px;
  padding: 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.carousel-logo img {
  width: 100%;
}

.carousel-text {
  flex: 1;
}

.carousel-text p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text-light);
}

.carousel-text p,
.carousel-logo img {
  transition: opacity 0.2s ease;
}

.carousel-dots {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 39, 68, 0.15);
  cursor: pointer;
  padding: 0;
  transition: var(--transition);
}

.carousel-dot.active {
  background: var(--accent);
  transform: scale(1.2);
}

[data-theme="dark"] .carousel-dot {
  background: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .carousel-dot.active {
  background: var(--accent);
}

.carousel-arrows {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.carousel-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(15, 39, 68, 0.15);
  background: transparent;
  color: var(--navy);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.carousel-arrow:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--navy);
  color: #fff;
  padding: 80px 32px 0;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(232, 168, 56, 0.08), transparent 70%);
  pointer-events: none;
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 80px;
}

.footer-left {
  flex: 1;
}

.footer-left .section-title {
  color: #fff;
}

.footer-left p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 32px;
}

.footer-left p a {
  color: var(--accent);
  font-weight: 500;
  transition: var(--transition);
}

.footer-left p a:hover {
  text-decoration: underline;
}

.footer-logo {
  margin-bottom: 20px;
}

.footer-logo img {
  height: 50px;
  width: auto;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  transition: var(--transition);
}

.footer-social a:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

.footer-social svg {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.8);
  transition: var(--transition);
}

.footer-social a:hover svg {
  color: #fff;
}

.footer-right {
  flex: 1;
}

/* contact-form and btn-send styles moved to floating label section */

.footer-bottom {
  margin-top: 60px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: center;
  gap: 32px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.35);
  flex-wrap: wrap;
  text-align: center;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.35);
  transition: var(--transition);
}

.footer-bottom a:hover {
  color: var(--accent);
}

/* ===== SERVICES PAGE ===== */
.services-section {
  padding: 100px 32px;
}

.services-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 80px;
}

.services-col {
  flex: 1;
}

.services-col h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 32px;
  text-align: center;
  letter-spacing: -0.3px;
}

.service-card {
  margin-bottom: 28px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
  border: 1px solid var(--card-border);
  transition: var(--transition);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.service-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-card:hover img {
  transform: scale(1.03);
}

.service-card .service-label {
  padding: 20px 24px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  text-align: center;
}

/* ===== EXPERTISE PAGE ===== */
.expertise-section {
  padding: 100px 32px;
}

.expertise-block {
  max-width: 1280px;
  margin: 0 auto 80px;
  display: flex;
  gap: 64px;
  align-items: stretch;
}

.expertise-block:last-child {
  margin-bottom: 0;
}

.expertise-block.reverse {
  flex-direction: row-reverse;
}

.expertise-block-image {
  flex: 1;
  min-height: 400px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.expertise-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.expertise-block:hover .expertise-block-image img {
  transform: scale(1.03);
}

.expertise-block-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 0;
}

.expertise-block-text h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 24px;
  letter-spacing: -0.3px;
}

.expertise-block-text h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--accent);
  margin-top: 12px;
  border-radius: 3px;
}

.expertise-block-text p {
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--text-light);
  margin-bottom: 12px;
}

.expertise-block-text ul {
  margin: 0 0 12px 20px;
  list-style: disc;
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.9;
}

.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 13px 32px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  align-self: flex-start;
  box-shadow: 0 4px 15px rgba(232, 168, 56, 0.3);
}

.btn-contact:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(232, 168, 56, 0.4);
}

/* ===== CHAT / CONVERSATION PAGE ===== */
.chat-page {
  margin-top: 70px;
  height: calc(100vh - 70px);
  background: var(--bg);
}

.chat-container {
  display: flex;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.chat-sidebar {
  width: 280px;
  border-right: 1px solid var(--card-border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--white);
}

.chat-sidebar-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.chat-agent-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-agent-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
}

.chat-agent-status {
  font-size: 0.72rem;
  color: var(--text-light);
  margin-top: 2px;
}

.chat-new-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 1px dashed var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text-light);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.chat-new-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(232, 168, 56, 0.05);
}

.chat-sidebar-docs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.chat-docs-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-docs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.chat-doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--card-border);
  transition: var(--transition);
}

.chat-doc-item--uploading {
  opacity: 0.5;
}

.chat-doc-icon {
  color: var(--accent);
  flex-shrink: 0;
}

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

.chat-doc-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-doc-meta {
  font-size: 0.68rem;
  color: var(--text-light);
}

.chat-doc-remove {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}

.chat-doc-remove:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.chat-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px dashed var(--card-border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-light);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.chat-upload-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(232, 168, 56, 0.05);
}

.chat-upload-hint {
  font-size: 0.65rem;
  color: var(--text-light);
  opacity: 0.6;
  text-align: center;
}

.chat-input-attach {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--text-light);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}

.chat-input-attach:hover {
  background: var(--input-bg);
  color: var(--accent);
}

.chat-input-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 6px;
}

.chat-input-docs:empty {
  display: none;
}

.chat-input-doc-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(232, 168, 56, 0.1);
  color: var(--accent);
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
}

.chat-dragover {
  outline: 2px dashed var(--accent) !important;
  outline-offset: -4px;
  background: rgba(232, 168, 56, 0.03) !important;
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Encyclopédie pane: chat fills the available width with the RAG
   intake (drop zone + URL) pinned to the viewport right edge on
   wide screens. Mobile stacks them. */
.enc-layout {
  /* Defined on the shared parent so both the intake panel and the chat
     column inherit the SAME duration + easing — otherwise their
     transitions drift and the rail snaps while the padding lags. */
  --enc-ease: cubic-bezier(0.2, 0, 0, 1);
  --enc-dur:  .28s;
  --enc-dur-body: .22s;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.enc-chat { min-width: 0; min-height: 480px; display: flex; flex-direction: column; }
.enc-chat .chat-page,
.enc-chat .chat-container { height: 100%; }

/* Intake aside with an expand/collapse rail. A single easing curve +
   coordinated delays drive the whole motion:
     - on collapse  → body fades & slides out first, THEN the panel shrinks
     - on expand    → panel widens first, THEN the body fades & slides in
   This keeps content from flashing off-panel mid-animation. */
.enc-intake {
  /* --enc-ease / --enc-dur / --enc-dur-body come from .enc-layout so
     the chat padding + the panel width share the same timing. */
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--white);
  transition: width var(--enc-dur) var(--enc-ease),
              background var(--enc-dur) var(--enc-ease),
              box-shadow var(--enc-dur) var(--enc-ease);
}
.enc-intake-body {
  padding: 14px;
  opacity: 1;
  transform: translateX(0);
  /* Expanding: let the panel widen ~70% before the body starts fading in,
     so the two motions overlap subtly instead of feeling sequential. */
  transition: opacity var(--enc-dur-body) var(--enc-ease) calc(var(--enc-dur) * .55),
              transform var(--enc-dur-body) var(--enc-ease) calc(var(--enc-dur) * .55);
}
.enc-intake-toggle {
  position: absolute; top: 8px; left: -14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--card-border);
  color: var(--text-light); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: color .15s ease, border-color .15s ease,
              transform var(--enc-dur) var(--enc-ease);
}
.enc-intake-toggle:hover { color: var(--accent); border-color: var(--accent); }
.enc-intake-toggle i { transition: transform var(--enc-dur) var(--enc-ease); }

.enc-intake.is-collapsed { background: var(--input-bg); }
.enc-intake.is-collapsed .enc-intake-body {
  opacity: 0;
  transform: translateX(14px);
  pointer-events: none;
  /* Collapsing: fade out IMMEDIATELY and a little faster than the width,
     so content clears before the rail shrinks into place. */
  transition: opacity var(--enc-dur-body) var(--enc-ease) 0s,
              transform var(--enc-dur-body) var(--enc-ease) 0s;
}
/* The body still needs to be removed from flow once faded out so it
   doesn't cause horizontal overflow inside the 36 px rail. Browser
   repaint after the fade finishes is fine. */
.enc-intake.is-collapsed .enc-intake-body { visibility: hidden; }
.enc-intake:not(.is-collapsed) .enc-intake-body { visibility: visible; }

@media (min-width: 1024px) {
  /* Pin the intake to the viewport's right edge, top stuck flush with
     the canonical nav. var(--nav-h) tracks the gk_base.html nav (68px
     desktop / 60px phone). On beta hosts the orange banner adds its
     own height (--gk-beta-banner-h, 36px) which body.gk-env-beta CSS
     already inherits — bumped here so the intake doesn't get hidden
     behind the banner+static-nav stack. */
  .enc-intake {
    position: fixed;
    top: var(--nav-h, 68px);
    right: 0;
    width: 340px;
    max-height: calc(100vh - var(--nav-h, 68px) - 16px);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    box-shadow: -4px 0 12px rgba(0,0,0,.05);
    z-index: 30;
  }
  body.gk-env-beta .enc-intake {
    top: calc(var(--nav-h, 68px) + var(--gk-beta-banner-h, 36px));
    max-height: calc(100vh - var(--nav-h, 68px) - var(--gk-beta-banner-h, 36px) - 16px);
  }
  .enc-intake.is-collapsed { width: 36px; }
  .enc-chat {
    padding-right: 356px;              /* panel width + 16 px gap */
    transition: padding-right var(--enc-dur) var(--enc-ease);
  }
  .enc-layout.is-intake-collapsed .enc-chat { padding-right: 52px; }
}

/* When the conversation pane runs without its left sidebar, the main
   column should claim the full container width. */
.chat-container--no-sidebar .chat-main { width: 100%; }

/* Compact empty state — used when the sidebar is hidden. Drops the big
   round icon; keeps the title, hint and suggestion chips. */
.chat-empty--compact { gap: 10px; padding: 8px 16px; }
.chat-empty--compact .chat-empty-icon { display: none; }
.chat-empty--compact h3 { font-family: inherit; font-size: 16px; font-weight: 700; margin: 0; }
.chat-empty--compact p  { font-size: 12.5px; max-width: 540px; margin: 0; }
.chat-empty--compact .chat-suggestions { margin-top: 6px; }
.chat-empty--compact .chat-suggestion { font-size: 12px; padding: 6px 12px; }

/* Welcome logo — replaces the h3 greeting in the compact empty state. */
.chat-empty-logo {
  max-height: 52px; width: auto;
  margin: 4px 0 2px;
  opacity: .95;
}
.chat-empty--compact .chat-empty-logo { max-height: 44px; }

/* Chat polish inside the Encyclopédie (hide_sidebar) layout: softer
   message bubbles, subtle shadow, accent tint, better spacing. */
.chat-container--no-sidebar .chat-messages { padding: 18px 22px 14px; gap: 14px; }
.chat-container--no-sidebar .chat-bubble {
  padding: 10px 16px;
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 78%;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.chat-container--no-sidebar .chat-bubble--user {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 95%, #fff),
    var(--accent));
  border-bottom-right-radius: 4px;
}
.chat-container--no-sidebar .chat-bubble--assistant {
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--card-border) 80%, transparent);
  border-bottom-left-radius: 4px;
}
.chat-container--no-sidebar .chat-input-area {
  padding: 10px 16px 14px;
  border-top: 1px solid color-mix(in srgb, var(--card-border) 50%, transparent);
}
.chat-container--no-sidebar .chat-input-wrap {
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

/* Intake aside: shrink typography + paddings so the drop zone + URL
   input fit comfortably next to the chat without drawing attention. */
.enc-intake { font-size: 11.5px; }
.enc-intake .feat-ex { padding: 0; background: transparent; border-top: none; }
.enc-intake .feat-ex-inner { max-width: none; }
.enc-intake .feat-ex-head { margin: 0 0 10px; text-align: left; max-width: none; }
.enc-intake .feat-ex-title { font-size: 13px; margin: 0 0 4px; line-height: 1.25; font-family: inherit; font-weight: 700; color: var(--text); }
.enc-intake .feat-ex-intro { font-size: 11px; line-height: 1.4; }
.enc-intake .feat-ex-drop-inner { padding: 14px 10px; gap: 6px; }
.enc-intake .feat-ex-drop-hint { font-size: 10.5px; }
.enc-intake .feat-ex-status { font-size: 10.5px; min-height: 14px; margin-top: 6px; }
.enc-intake .feat-ex-url-input { font-size: 11.5px; }
.enc-intake .feat-ex-url-submit { font-size: 11.5px; }

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

.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--text-light);
  gap: 12px;
}

.chat-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.chat-empty h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text);
}

.chat-empty p {
  font-size: 0.88rem;
  max-width: 400px;
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  justify-content: center;
}

.chat-suggestion {
  padding: 8px 16px;
  border: 1px solid var(--card-border);
  border-radius: 100px;
  background: var(--white);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transition);
}

.chat-suggestion:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(232, 168, 56, 0.05);
}

.chat-bubble-wrap {
  display: flex;
  animation: bubbleIn 0.25s ease;
}

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

.chat-bubble-wrap--user {
  justify-content: flex-end;
}

.chat-bubble-wrap--assistant {
  justify-content: flex-start;
}

.chat-bubble {
  max-width: 70%;
  padding: 12px 18px;
  border-radius: 18px;
  font-size: 0.9rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-bubble--user {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-bubble--assistant {
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--card-border);
  border-bottom-left-radius: 4px;
}

.chat-typing {
  display: flex;
  gap: 5px;
  padding: 14px 20px;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  border-bottom-left-radius: 4px;
}

.chat-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-light);
  opacity: 0.4;
  animation: typingBounce 1.2s infinite ease-in-out;
}

.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

.chat-input-area {
  padding: 16px 32px 20px;
  border-top: 1px solid var(--card-border);
  background: var(--white);
}

.chat-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 8px 8px 8px 18px;
  transition: var(--transition);
}

.chat-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.chat-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--text);
  resize: none;
  outline: none;
  line-height: 1.5;
  max-height: 150px;
  padding: 6px 0;
}

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

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

.chat-send-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: scale(1.05);
}

.chat-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chat-disclaimer {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-light);
  margin-top: 8px;
  opacity: 0.6;
}

@media (max-width: 768px) {
  .chat-sidebar {
    display: none;
  }
  .chat-messages {
    padding: 16px;
  }
  .chat-input-area {
    padding: 12px 16px 16px;
  }
  .chat-bubble {
    max-width: 85%;
  }
}

/* ===== ARTICLE BODY ===== */
.article-body {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 2;
}

.article-body p {
  margin-bottom: 16px;
}

.article-body h2, .article-body h3 {
  font-family: 'DM Serif Display', serif;
  color: var(--text);
  margin: 32px 0 12px;
  font-weight: 400;
}

.article-body h2 { font-size: 1.5rem; }
.article-body h3 { font-size: 1.2rem; }

.article-body ul, .article-body ol {
  margin: 12px 0 16px 24px;
}

.article-body li {
  margin-bottom: 6px;
}

.article-body img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  margin: 16px 0;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.article-body th, .article-body td {
  padding: 10px 14px;
  border: 1px solid var(--card-border);
  text-align: left;
  font-size: 0.88rem;
}

.article-body th {
  background: var(--input-bg);
  font-weight: 600;
}

/* ===== BLOG PAGE ===== */
.blog-section {
  padding: 100px 32px;
}

.blog-inner {
  max-width: 900px;
  margin: 0 auto;
}

.blog-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 40px;
  padding: 6px;
  background: var(--white);
  border-radius: 100px;
  box-shadow: var(--shadow);
  border: 1px solid var(--card-border);
  width: fit-content;
}

.blog-tab {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  padding: 10px 24px;
  border-radius: 100px;
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  transition: var(--transition);
}

.blog-tab.active {
  color: #fff;
  background: var(--navy);
}

.blog-tab:hover:not(.active) {
  color: var(--navy);
  background: rgba(15, 39, 68, 0.06);
}

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

.blog-card {
  display: flex;
  gap: 24px;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.blog-card-image {
  flex-shrink: 0;
  width: 220px;
  height: 160px;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

.blog-card-content {
  padding: 24px 24px 24px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-card-content h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}

.blog-card-content .blog-meta {
  font-size: 0.78rem;
  color: var(--text-light);
}

.blog-card-content .blog-tag {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 12px;
  background: rgba(232, 168, 56, 0.1);
  color: var(--accent);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: var(--transition);
}

.theme-toggle:hover {
  background: var(--input-bg);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  transition: var(--transition);
}

.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }

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

/* Dark mode overrides for elements with hardcoded colors */
[data-theme="dark"] .header-login-btn,
[data-theme="dark"] .header-user-btn {
  color: var(--text);
}

[data-theme="dark"] .login-form .form-eye {
  color: var(--text-light);
}

[data-theme="dark"] .btn-login {
  background: var(--accent);
}

[data-theme="dark"] .btn-login:hover {
  background: var(--accent-hover);
}

[data-theme="dark"] .blog-tab.active {
  background: var(--accent);
}

[data-theme="dark"] .carousel-arrow {
  border-color: var(--card-border);
  color: var(--text);
}

[data-theme="dark"] .carousel-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

[data-theme="dark"] .section-title,
[data-theme="dark"] .section-label {
  color: var(--text);
}

[data-theme="dark"] .section-label {
  color: var(--accent);
}

[data-theme="dark"] .mission-text {
  background: #0a1529;
}

[data-theme="dark"] .footer {
  background: #060d18;
}

[data-theme="dark"] .expertise-block-text h2,
[data-theme="dark"] .services-col h2,
[data-theme="dark"] .dash-section-title,
[data-theme="dark"] .dashboard-title,
[data-theme="dark"] .login-panel-title,
[data-theme="dark"] .login-panel-name,
[data-theme="dark"] .dash-card-value,
[data-theme="dark"] .dash-table-name,
[data-theme="dark"] .service-card .service-label,
[data-theme="dark"] .blog-card-content h3 {
  color: var(--text);
}

/* ===== LOGIN PANEL ===== */
.login-wrap {
  position: relative;
}

.header-login-btn,
.header-user-btn,
.header-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.header-login-btn:hover,
.header-user-btn:hover,
.header-logout-btn:hover {
  background: var(--input-bg);
}

.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.user-avatar--lg {
  width: 42px;
  height: 42px;
  font-size: 0.82rem;
  border-radius: 10px;
}

.login-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 340px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--card-border);
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: var(--transition);
  z-index: 100;
}

.login-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.login-panel-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 20px;
}

.login-panel-user {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

.login-panel-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--navy);
}

.login-panel-email {
  font-size: 0.78rem;
  color: var(--text-light);
}

.login-panel-divider {
  height: 1px;
  background: var(--card-border);
  margin: 16px 0;
}

.login-panel-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  transition: var(--transition);
}

.login-panel-link:hover {
  background: var(--input-bg);
}

.login-panel-link--danger {
  color: #dc2626;
}

.login-panel-link--danger:hover {
  background: rgba(220, 38, 38, 0.06);
}

.login-alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 16px;
}

.login-alert--error {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.15);
}

.login-panel-footer {
  margin-top: 16px;
  text-align: center;
  font-size: 0.78rem;
}

.login-panel-footer a {
  color: var(--text-light);
  transition: var(--transition);
}

.login-panel-footer a:hover {
  color: var(--accent);
}

.btn-login {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-login:hover {
  background: #0a1e36;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(15, 39, 68, 0.3);
}

/* ===== FLOATING LABEL FORM ===== */
.form-group {
  position: relative;
}

.form-input {
  width: 100%;
  padding: 16px 16px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  outline: none;
  transition: var(--transition);
}

.form-input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-label {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.88rem;
  pointer-events: none;
  transition: var(--transition);
}

.form-textarea ~ .form-label {
  top: 20px;
}

.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label {
  top: 8px;
  transform: translateY(0);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent);
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
  padding-top: 24px;
}

.form-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  transition: var(--transition);
}

.form-eye:hover {
  color: var(--accent);
}

/* Login panel form inputs (on white bg) */
.login-panel .form-group { margin-bottom: 14px; }

.login-form .form-input {
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  color: var(--text);
}

.login-form .form-input:focus {
  border-color: var(--accent);
  background: var(--bg);
}

.login-form .form-label {
  color: var(--text-light);
}

.login-form .form-input:focus ~ .form-label,
.login-form .form-input:not(:placeholder-shown) ~ .form-label {
  color: var(--accent);
}

.login-form .form-eye {
  color: var(--text-light);
}

/* Footer contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-form .form-input::placeholder {
  color: transparent;
}

.btn-send {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(232, 168, 56, 0.3);
}

.btn-send:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(232, 168, 56, 0.4);
}

/* ===== DASHBOARD ===== */
.dashboard {
  margin-top: 70px;
  padding: 48px 32px 100px;
  background: var(--bg);
  min-height: calc(100vh - 70px);
}

.dashboard-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 48px;
}

.dashboard-title {
  font-family: 'DM Serif Display', serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--navy);
  margin: 4px 0 8px;
}

.dashboard-subtitle {
  color: var(--text-light);
  font-size: 0.95rem;
}

.dashboard-date {
  color: var(--text-light);
  font-size: 0.85rem;
  padding: 8px 16px;
  background: var(--white);
  border-radius: 100px;
  border: 1px solid var(--card-border);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.dash-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: var(--transition);
}

.dash-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.dash-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-card-icon--blue { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.dash-card-icon--amber { background: rgba(232, 168, 56, 0.1); color: var(--accent); }
.dash-card-icon--green { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.dash-card-icon--red { background: rgba(220, 38, 38, 0.1); color: #dc2626; }

.dash-card-value {
  font-family: 'DM Serif Display', serif;
  font-size: 2rem;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}

.dash-card-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-light);
}

.dash-section {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
}

.dash-section-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 24px;
}

.dash-table-header,
.dash-table-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 0.8fr 1fr;
  gap: 16px;
  padding: 14px 16px;
  align-items: center;
}

.dash-table-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-light);
  border-bottom: 1px solid var(--card-border);
}

.dash-table-row {
  border-bottom: 1px solid var(--card-border);
  transition: var(--transition);
}

.dash-table-row:last-child {
  border-bottom: none;
}

.dash-table-row:hover {
  background: var(--input-bg);
  border-radius: 8px;
}

.dash-table-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
}

.dash-table-tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(232, 168, 56, 0.1);
  color: var(--accent);
  width: fit-content;
}

.dash-table-status {
  font-size: 0.78rem;
  font-weight: 600;
}

.dash-table-status--active { color: #3b82f6; }
.dash-table-status--review { color: var(--accent); }
.dash-table-status--done { color: #22c55e; }

.dash-table-date {
  font-size: 0.82rem;
  color: var(--text-light);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hero-home .hero-content {
    flex-direction: column;
    gap: 40px;
  }

  .hero { min-height: 70vh; }

  .hero-title-block h1 {
    font-size: 3rem;
  }

  .mission {
    flex-direction: column;
  }

  .mission-text {
    padding: 60px 40px;
  }

  .mission-image {
    min-height: 300px;
  }

  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    margin-top: -30px;
  }

  .stat-item:first-child {
    border-radius: var(--radius) 0 0 0;
  }

  .stat-item:nth-child(2) {
    border-radius: 0 var(--radius) 0 0;
  }

  .stat-item:nth-child(3) {
    border-radius: 0 0 0 var(--radius);
  }

  .stat-item:last-child {
    border-radius: 0 0 var(--radius) 0;
  }

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

  .services-inner {
    flex-direction: column;
    gap: 48px;
  }

  .expertise-block,
  .expertise-block.reverse {
    flex-direction: column;
    gap: 32px;
  }

  .expertise-block-image {
    min-height: 300px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 48px;
  }

  .experiences-carousel {
    flex-direction: column;
    text-align: center;
    gap: 32px;
  }

  .carousel-logo { width: 150px; }
  .carousel-arrows { justify-content: center; }
}

@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-table-header,
  .dash-table-row {
    grid-template-columns: 1.5fr 1fr 0.8fr;
  }
  .dash-table-date { display: none; }
}

@media (max-width: 640px) {
  .header-inner {
    /* Grid → flex: logo left, actions right; the nav drawer absolute-
       positions under the header when toggled open. This keeps the auth
       pill + lang + theme visible even when the nav is collapsed. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 12px 16px;
    grid-template-columns: none;
  }
  /* `.header-right` had `display: contents` — put its children back into a
     flex row so they sit together on the right. */
  .header-inner > .header-right {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }
  .header-inner > .header-right > nav { justify-self: auto; }

  .nav-list {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 4px;
    padding: 16px;
    /* Drawer under the fixed header when opened by the hamburger. */
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--header-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--header-border);
    z-index: 999;
  }

  .nav-list.open {
    display: flex;
  }

  .nav-list a {
    width: 100%;
    text-align: center;
    padding: 12px;
  }

  .mobile-toggle {
    display: flex;
  }

  /* Compact action pills so everything fits in the right cluster. */
  .lang-toggle { transform: scale(.9); transform-origin: right center; }
  .theme-toggle { width: 34px; height: 34px; }
  .header-auth--in { padding: 4px 10px 4px 4px; }
  .header-auth--out { padding: 7px 12px; }

  .hero {
    min-height: 60vh;
    background-attachment: scroll;
    margin-top: 60px;
  }

  .hero-content {
    padding: 48px 20px;
  }

  .hero-title-block h1 {
    font-size: 2.2rem;
  }

  .hero-page h1 {
    font-size: 2rem;
  }

  .section {
    padding: 60px 20px;
  }

  .expertise-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .expertise-card {
    aspect-ratio: 4/3;
  }

  .stats-bar {
    grid-template-columns: 1fr 1fr;
    padding: 0 20px;
  }

  .stat-number {
    font-size: 2.2rem;
  }

  .stat-item {
    padding: 32px 16px;
  }

  .blog-card {
    flex-direction: column;
  }

  .blog-card-image {
    width: 100%;
    height: 180px;
  }

  .blog-card-content {
    padding: 20px;
  }

  .blog-tabs {
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
  }

  .mission-text {
    padding: 48px 24px;
  }

  .footer {
    padding: 60px 20px 0;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    margin-top: 40px;
  }

  .services-section,
  .expertise-section,
  .blog-section {
    padding: 60px 20px;
  }

  .login-panel {
    width: 300px;
    right: -20px;
  }

  .dashboard {
    padding: 32px 20px 60px;
  }

  .dashboard-header {
    flex-direction: column;
    gap: 12px;
  }

  .dashboard-title {
    font-size: 1.6rem;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dash-table-header,
  .dash-table-row {
    grid-template-columns: 1fr 0.7fr;
  }
  .dash-table-tag,
  .dash-table-date { display: none; }
}

/* ── Project page ── */
.project-page {
  margin-top: 70px;
  padding: 48px 32px 100px;
  background: var(--bg);
  min-height: calc(100vh - 70px);
}

.project-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.project-header {
  margin-bottom: 36px;
}

.project-title {
  font-family: 'DM Serif Display', serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--navy);
  margin: 4px 0 8px;
}

.project-subtitle {
  color: var(--text-light);
  font-size: 0.95rem;
}

.project-embed {
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

.project-embed iframe {
  display: block;
  width: 100%;
  min-height: 600px;
}

@media (max-width: 768px) {
  .project-page {
    padding: 32px 16px 60px;
  }
  .project-title {
    font-size: 1.6rem;
  }
  .project-embed iframe {
    min-height: 400px;
  }
}

/* ── Feature examples drop strip (present on every public page) ────────── */
.feat-ex {
  padding: 72px 32px 48px;
  background: var(--bg);
  border-top: 1px solid var(--card-border);
}
.feat-ex-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.feat-ex-head {
  text-align: center;
  margin: 0 auto 32px;
  max-width: 640px;
}
.feat-ex-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--navy);
  margin: 8px 0 10px;
  line-height: 1.15;
}
.feat-ex-intro {
  color: var(--text-light);
  font-size: 0.95rem;
  margin: 0;
}
.feat-ex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.feat-ex-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius, 14px);
  padding: 18px 18px 16px;
  transition: border-color .2s ease, transform .2s ease;
}
.feat-ex-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.feat-ex-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.feat-ex-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
}
.feat-ex-lifecycle {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--text-light);
  background: var(--input-bg);
}
.feat-ex-lifecycle[data-lifecycle="live"] { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.feat-ex-lifecycle[data-lifecycle="beta"] { background: rgba(232, 168, 56, 0.18); color: #b8860b; }
.feat-ex-lifecycle[data-lifecycle="in_progress"] { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.feat-ex-lifecycle[data-lifecycle="planned"] { background: rgba(148, 163, 184, 0.2); color: #64748b; }
.feat-ex-card-summary {
  font-size: 12px;
  color: var(--text-light);
  margin: 0 0 14px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feat-ex-drop {
  display: block;
  margin-top: auto;
  border: 1.5px dashed var(--card-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  background: var(--input-bg);
}
.feat-ex-drop:hover,
.feat-ex-drop.is-drag {
  border-color: var(--accent);
  background: rgba(232, 168, 56, 0.08);
}
.feat-ex-drop.is-loading {
  opacity: 0.6;
  pointer-events: none;
}
.feat-ex-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  color: var(--text-light);
}
.feat-ex-drop-hint {
  font-size: 11.5px;
  text-align: center;
  line-height: 1.4;
}
.feat-ex-status {
  min-height: 18px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-light);
  text-align: center;
}
.feat-ex-status.is-ok { color: #16a34a; }
.feat-ex-status.is-err { color: #ef4444; }

@media (max-width: 640px) {
  .feat-ex { padding: 48px 16px 32px; }
  .feat-ex-title { font-size: 1.5rem; }
  .feat-ex-grid { grid-template-columns: 1fr; }
}

/* ── Per-feature drop zone inside a feature pane ──────────────────────── */
.feat-drop-zone {
  max-width: 640px;
  margin: 20px auto 0;
}
.feat-drop-zone-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-light);
}
.feat-drop-zone-head i { color: var(--accent, #e8a838); font-size: 13px; }

/* ── URL row inside a feature drop zone ───────────────────────────────── */
.feat-ex-url-row { margin-top: 12px; }
.feat-ex-url-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  transition: border-color 0.15s ease;
}
.feat-ex-url-wrap:focus-within { border-color: var(--accent); }
.feat-ex-url-wrap > i { color: var(--text-light); font-size: 13px; }
.feat-ex-url-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.feat-ex-url-input::placeholder { color: var(--text-light); }
.feat-ex-url-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.feat-ex-url-submit:hover { opacity: 0.9; }
.feat-ex-url-submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Uploaded examples list (files + URLs) ────────────────────────────── */
.feat-ex-list { margin-top: 12px; }
.feat-ex-list-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-light); margin-bottom: 8px;
}
.feat-ex-list-items {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 280px; overflow-y: auto;
}
.feat-ex-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  font-size: 12px;
}
.feat-ex-list-icon { color: var(--text-light); font-size: 13px; flex: none; }
.feat-ex-list-item--url .feat-ex-list-icon { color: var(--accent); }
.feat-ex-list-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.feat-ex-list-name {
  color: var(--text);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600;
}
a.feat-ex-list-name:hover { color: var(--accent); text-decoration: underline; }
.feat-ex-list-meta {
  font-size: 10.5px; color: var(--text-light);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.feat-ex-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: transparent; border: 1px solid transparent;
  border-radius: 6px; color: var(--text-light);
  cursor: pointer; font-size: 11px;
  transition: all 0.12s ease;
}
.feat-ex-del:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #dc2626;
}

/* ── In-header auth pill (stealth-style, elen-themed) ─────────────────── */
.header-auth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.3px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  line-height: 1;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.header-auth--out {
  background: var(--accent);
  color: #fff;
}
.header-auth--out:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.header-auth--out svg { transition: transform var(--transition); }
.header-auth--out:hover svg { transform: translateX(3px); }

.header-auth--in {
  padding: 4px 6px 4px 4px;
  gap: 4px;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--card-border);
  box-shadow: none;
}
.header-auth-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px 2px 2px;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  transition: background var(--transition);
}
.header-auth-user:hover { background: var(--card-border); }
.header-auth-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  overflow: hidden;
  flex: none;
}
.header-auth-avatar--img { padding: 0; background: var(--input-bg); }
.header-auth-avatar--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.header-auth-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}
.header-auth-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-light);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.header-auth-logout:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

@media (max-width: 768px) {
  .header-auth-name { display: none; }
  .header-auth--out { padding: 7px 12px; }
}

/* ── Header auth dropdown (signed-in) ─────────────────────────────────── */
.header-auth-wrap { position: relative; }
.header-auth-chev {
  color: var(--text-light);
  transition: transform var(--transition);
  margin-left: 2px;
  margin-right: 4px;
}
.header-auth-wrap.is-open .header-auth-chev { transform: rotate(180deg); }
.header-auth--in {
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.header-auth--in:hover { border-color: var(--text-light); }

.header-auth-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  z-index: 1001;
}
.header-auth-wrap.is-open .header-auth-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.header-auth-menu-head {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 6px;
}
.header-auth-menu-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.header-auth-menu-email {
  font-size: 0.72rem;
  color: var(--text-light);
  margin-top: 2px;
  word-break: break-all;
}
.header-auth-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.header-auth-menu-item:hover {
  background: var(--input-bg);
  color: var(--accent);
}
.header-auth-menu-item--danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}