/* ==========================================================================
   Ozmun AI — Warm Ivory / Espresso Design System
   Source of truth aligned with Roadmaps (oz-roadmaps.css)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── PART 1: Design tokens ── */
:root,
[data-theme="light"] {
  color-scheme: light;

  --oz-ivory: #E5DED4;
  --oz-beige: #C8B6A1;
  --oz-sand: #B29378;
  --oz-camel: #9D7353;
  --oz-caramel: #886142;
  --oz-chestnut: #76563D;
  --oz-cognac: #694A36;
  --oz-coffee: #503829;
  --oz-chocolate: #3C2A20;
  --oz-espresso: #251A16;

  --bg-gradient: #E5DED4;

  --color-page-bg: var(--oz-ivory);
  --color-bg: var(--oz-ivory);
  --color-surface: #F5F0E9;
  --color-surface-2: #FBF8F3;
  --color-surface-elevated: #FBF8F3;
  --color-surface-offset: #EFE8DE;
  --color-border: var(--oz-beige);
  --color-border-strong: var(--oz-sand);
  --color-divider: rgba(178, 147, 120, 0.35);

  --color-text: var(--oz-espresso);
  --color-text-secondary: var(--oz-coffee);
  --color-text-muted: rgba(80, 56, 41, 0.72);
  --color-text-soft: rgba(80, 56, 41, 0.55);
  --color-text-inverse: #FBF8F3;

  --color-primary: var(--oz-chestnut);
  --color-primary-end: var(--oz-cognac);
  --color-primary-gradient: linear-gradient(135deg, #76563D, #694A36);
  --color-primary-hover: var(--oz-cognac);
  --color-primary-active: var(--oz-espresso);
  --color-primary-highlight: #EFE8DE;
  --color-focus: var(--oz-caramel);
  --color-header: var(--oz-espresso);

  --color-cat-orange: var(--oz-camel);
  --color-cat-purple: var(--oz-chestnut);
  --color-cat-green: var(--oz-caramel);
  --color-cat-teal: var(--oz-sand);
  --color-cat-gold: var(--oz-beige);
  --color-cat-pink: var(--oz-cognac);

  --color-success: var(--oz-chestnut);
  --color-warning: var(--oz-camel);
  --color-error: var(--oz-cognac);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(80, 56, 41, 0.06), 0 1px 2px rgba(80, 56, 41, 0.04);
  --shadow-md: 0 4px 16px rgba(80, 56, 41, 0.08), 0 2px 6px rgba(80, 56, 41, 0.05);
  --shadow-lg: 0 12px 40px rgba(80, 56, 41, 0.10), 0 4px 12px rgba(80, 56, 41, 0.06);
  --shadow-card: 0 4px 16px rgba(80, 56, 41, 0.05);

  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  /* Shared vertical rhythm for sibling cards / major sections */
  --stack-gap-card: var(--space-4); /* ~16px peer cards */
  --stack-gap-section: var(--space-8); /* ~32px major sections */

  --font-body: 'Manrope', 'Noto Sans', 'DM Sans', system-ui, sans-serif;
  --font-display: 'Cormorant Garamond', 'Playfair Display', Lora, Georgia, serif;
  --font-sans: var(--font-body);
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --bg-primary: var(--color-bg);
  --bg-secondary: var(--color-surface);
  --text-primary: var(--color-text);
  --text-muted: var(--color-text-muted);
  --border-color: var(--color-border);
  --brand-indigo: var(--color-primary);
  --brand-gradient: var(--color-primary-gradient);
  --focus-ring: rgba(136, 97, 66, 0.35);
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #251A16;
  --color-page-bg: #251A16;
  --color-surface: #3C2A20;
  --color-surface-2: #503829;
  --color-surface-elevated: #503829;
  --color-surface-offset: #3C2A20;
  --color-border: rgba(200, 182, 161, 0.28);
  --color-border-strong: rgba(178, 147, 120, 0.45);
  --color-divider: rgba(200, 182, 161, 0.18);
  --color-text: #F5F0E9;
  --color-text-secondary: #C8B6A1;
  --color-text-muted: rgba(229, 222, 212, 0.72);
  --color-text-soft: rgba(229, 222, 212, 0.55);
  --color-primary-highlight: rgba(136, 97, 66, 0.28);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.48);
  --bg-gradient: #251A16;

  --bg-primary: var(--color-bg);
  --bg-secondary: var(--color-surface);
  --text-primary: var(--color-text);
}

/* ── PART 2: Global ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; scroll-behavior: smooth; overflow-x: clip; }
body.page-universities,
body.page-universities .site-shell,
body.page-universities .shell-main,
body.page-universities .shell-inner.uni-catalog {
  overflow-x: visible;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: clip;
  font-family: var(--font-body);
  background: var(--color-page-bg, var(--bg-gradient));
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

[data-theme="dark"] body { background: var(--color-bg); }

h1, h2, h3, .h1, .font-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  line-height: 1.15;
}

h1, .h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }

p { color: var(--color-text-muted); line-height: 1.65; }

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-hover); }

.text-gradient {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  color: var(--oz-chestnut, #76563D);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

.flex-grow { flex: 1; }

.site-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

/* ── Layout ── */
.shell-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  min-width: 0;
}

.shell-main { flex: 1; width: 100%; }

/* ── PART 3: Navbar ── */
.shell-head,
.navbar {
  background: var(--oz-espresso, #251A16);
  background-color: var(--oz-espresso, #251A16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--oz-chocolate, #3C2A20);
  padding: 0 var(--space-8);
  min-height: 80px;
  height: 80px;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
}

[data-theme="dark"] .shell-head,
[data-theme="dark"] .navbar {
  background: var(--oz-espresso, #251A16);
}

.shell-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 1280px;
  margin: 0 auto;
  min-width: 0;
}

.logo,
.navbar-logo {
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--oz-ivory, #E5DED4);
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.logo__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-gradient);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.logo-ai, .logo-accent { color: var(--color-primary); }

.logo__mark {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklch, var(--color-primary) 35%, var(--color-border));
  background: color-mix(in oklch, var(--color-surface-elevated) 88%, white 12%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 6px 16px color-mix(in oklch, var(--color-primary) 24%, transparent);
}

.logo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.shell-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
  min-width: 0;
  overflow: visible;
}

.shell-nav::-webkit-scrollbar {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  flex-shrink: 0;
}

.nav-toggle:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.nav-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.nav-toggle__bar {
  display: block;
  width: 1.125rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle.is-active .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-active .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-profile-wrap {
  position: relative;
  flex-shrink: 0;
}

.nav-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 0.2rem 0.6rem 0.2rem 0.25rem;
  font: inherit;
  cursor: pointer;
}

.nav-profile-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.nav-profile-avatar {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-primary) 18%, var(--color-surface));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.nav-profile-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-profile-avatar__initials {
  font-weight: 700;
  font-size: 0.8rem;
}

.nav-profile-name {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
}

.nav-profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 180px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  padding: 0.35rem;
  z-index: 150;
}

.nav-profile-menu__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  color: var(--color-text);
  text-decoration: none;
}

.nav-profile-menu__item:hover {
  background: var(--color-primary-highlight);
}

.nav-link {
  position: relative;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--oz-beige, #C8B6A1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  background: transparent;
}

.nav-link:hover {
  color: var(--oz-ivory, #E5DED4);
  background: transparent;
}

.nav-link.is-active {
  color: var(--oz-ivory, #E5DED4);
  background: transparent;
}

.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0.65rem;
  right: 0.65rem;
  bottom: 0.15rem;
  height: 2px;
  background: var(--oz-caramel, #886142);
  border-radius: 1px;
}

/* Header controls on espresso shell */
.shell-head .nav-toggle,
.navbar .nav-toggle {
  border-color: var(--oz-beige, #C8B6A1);
  background: var(--oz-chocolate, #3C2A20);
  color: var(--oz-ivory, #E5DED4);
}
.shell-head .nav-profile-btn,
.navbar .nav-profile-btn,
.shell-head .lang-switcher,
.navbar .lang-switcher,
.shell-head .theme-toggle,
.navbar .theme-toggle {
  border-color: rgba(200, 182, 161, 0.45);
  background: var(--oz-chocolate, #3C2A20);
  color: var(--oz-beige, #C8B6A1);
}
.shell-head .nav-profile-name,
.navbar .nav-profile-name {
  color: var(--oz-beige, #C8B6A1);
}
.shell-head .nav-chat-btn,
.navbar .nav-chat-btn {
  color: var(--oz-beige, #C8B6A1);
}
.shell-head .nav-chat-btn:hover,
.navbar .nav-chat-btn:hover {
  color: var(--oz-ivory, #E5DED4);
}
.shell-head .nav-profile-menu,
.navbar .nav-profile-menu,
.shell-head .lang-dropdown,
.navbar .lang-dropdown {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}


.shell-user {
  font-weight: 600;
  color: var(--color-text);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Language switcher */
.lang-switcher-wrapper,
.lang-dropdown-wrap {
  position: relative;
  flex-shrink: 0;
}

.lang-switcher,
.lang-lg-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}

.lang-switcher:hover,
.lang-lg-btn:hover {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.lang-switcher svg { flex-shrink: 0; }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 168px;
  overflow: hidden;
  z-index: 200;
  display: none;
}

.lang-dropdown.is-open,
.lang-dropdown[style*="block"] { display: block; }

.lang-dropdown-item,
.lang-flag-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition);
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
}

.lang-dropdown-item:hover,
.lang-flag-btn:hover { background: var(--color-surface-offset); }

.lang-dropdown-item.active,
.lang-flag-btn--active {
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  font-weight: 700;
}

.lang-flag-btn svg { display: none; }

/* Theme toggle */
.theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition: all var(--transition);
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

/* ── PART 4: Buttons ── */
.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.2;
}

.btn-primary,
.button--primary,
.button--gradient {
  background: var(--oz-chestnut, #76563D);
  color: var(--color-text-inverse);
  border: 1px solid var(--oz-chestnut, #76563D);
  box-shadow: 0 4px 16px rgba(80, 56, 41, 0.12);
}

.btn-primary:hover,
.button--primary:hover,
.button--gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(118, 86, 61, 0.45);
  color: var(--color-text-inverse);
}

.btn-secondary,
.button--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover,
.button--secondary:hover {
  background: var(--color-surface-offset);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.button--telegram {
  background: #694A36;
  color: var(--color-text-inverse);
}

.button--quiet {
  background: transparent;
  color: var(--color-text-muted);
  box-shadow: none;
}

.button--sm { padding: var(--space-2) var(--space-4); font-size: 0.85rem; }
.button--lg { padding: var(--space-4) var(--space-8); font-size: 1rem; }
.button--block { width: 100%; }

button:disabled, .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.button:focus-visible,
.btn:focus-visible,
.scope-tile:focus-visible,
.aud-tile:focus-visible,
.filter-tab:focus-visible,
.nav-link:focus-visible,
.nav-profile-btn:focus-visible,
.lang-switcher:focus-visible,
.theme-toggle:focus-visible,
.onboarding-subject:focus-within,
.onboarding-subject-pick:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.button--quiet:focus-visible {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}

.button--primary:active:not(:disabled),
.button--secondary:active:not(:disabled),
.button--quiet:active:not(:disabled) {
  transform: scale(0.98);
}

.button--block-mobile {
  min-height: 2.75rem;
}

/* ── PART 5: Cards ── */
.card,
.feature-card,
.alive-cat-card,
.alive-event-card,
.auth-card,
.profile-card,
.filter-panel,
.glass-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition), transform var(--transition);
}

.card-hover:hover,
.feature-card:hover,
.alive-cat-card:hover,
.alive-event-card:hover,
.ev-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  font-size: 1.3rem;
  color: var(--color-text-inverse);
}

.card-icon.orange  { background: var(--color-cat-orange); }
.card-icon.purple  { background: var(--color-cat-purple); }
.card-icon.green   { background: var(--color-cat-green); }
.card-icon.teal    { background: var(--color-cat-teal); }
.card-icon.gold    { background: var(--color-cat-gold); }
.card-icon.pink    { background: var(--color-cat-pink); }

.card h3, .alive-cat-card h3, .feature-card h3 {
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.card-link,
.alive-cat-card__link,
.ev-card__more {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  text-decoration: none;
  transition: gap var(--transition);
}

.card-link:hover, .alive-cat-card__link:hover { gap: var(--space-2); }

/* ── PART 6: Section badge ── */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-4);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.hero-banner__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

/* ── PART 7: Event cards (catalog) ── */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

.event-card,
.ev-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: 0;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all var(--transition);
  text-decoration: none;
  color: inherit;
}

.event-card:hover,
.ev-card--link:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.ev-card__visual {
  height: 9rem;
  background: var(--color-primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.ev-card__blob {
  color: var(--color-text-inverse);
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  line-height: 1.3;
}

.ev-card__full-title {
  padding: var(--space-3) var(--space-5) 0;
  font-size: 0.8rem;
  color: var(--color-text-soft);
}

.ev-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) 0;
}

.ev-card__txt {
  padding: var(--space-2) var(--space-5);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  flex: 1;
}

.ev-card__more {
  padding: var(--space-3) var(--space-5) var(--space-5);
  margin-top: 0;
}

.event-card-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text); line-height: 1.3; }

.event-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.event-tag,
.tag {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
}

.event-tag.subject, .tag.tag--subject { background: #EFE8DE; color: #76563D; }
.event-tag.active, .tag.tag--active { background: #EFE8DE; color: #76563D; }
.event-tag.past, .tag.tag--past { background: var(--color-surface-offset); color: var(--color-text-muted); }
.event-tag.upcoming { background: #EFE8DE; color: #694A36; }
.event-tag.school { background: #EFE8DE; color: #886142; }
.event-tag.student { background: #EFE8DE; color: #76563D; }

[data-theme="dark"] .event-tag.subject, [data-theme="dark"] .tag.tag--subject { background: rgba(118, 86, 61,0.2); color: #886142; }
[data-theme="dark"] .event-tag.active { background: rgba(16,185,129,0.15); color: #C8B6A1; }
[data-theme="dark"] .event-tag.past, [data-theme="dark"] .tag.tag--past { background: rgba(156,163,175,0.15); color: #9ca3af; }
[data-theme="dark"] .event-tag.upcoming { background: rgba(178, 147, 120, 0.18); color: #C8B6A1; }

.personalized-match {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: color-mix(in oklch, var(--color-success) 14%, var(--color-surface));
  color: var(--color-success);
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  border: 1px solid color-mix(in oklch, var(--color-success) 28%, transparent);
  white-space: nowrap;
}

[data-theme="dark"] .personalized-match {
  background: color-mix(in oklch, var(--color-success) 18%, var(--color-surface-2));
  color: #C8B6A1;
  border-color: color-mix(in oklch, var(--color-success) 35%, transparent);
}

/* ── PART 8: Stats / KPI ── */
.stat-tile,
.kpi-tile {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  text-align: center;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] .stat-tile,
[data-theme="dark"] .kpi-tile {
  background: rgba(255, 255, 255, 0.05);
}

.stat-tile .stat-number,
.kpi-tile__value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
}

.kpi-tile__value--green { color: var(--color-success); }
.kpi-tile__value--gold { color: var(--color-warning); }

.stat-tile .stat-label,
.kpi-tile__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-top: var(--space-1);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-6);
  max-width: 1280px;
  margin: calc(var(--space-8) * -1) auto var(--space-8);
  padding: 0 var(--space-6);
  position: relative;
  z-index: 2;
}

/* ── PART 9: Forms ── */
.form-input,
.form-select,
.auth-form input,
.auth-form select,
.lab input,
.lab select,
.lab textarea,
.filter-panel input,
.filter-panel select,
.test-subject-search,
.test-open-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus,
.form-select:focus,
.auth-form input:focus,
.lab input:focus,
.lab select:focus,
.filter-panel input:focus,
.filter-panel select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(118, 86, 61, 0.12);
}

.form-label,
.lab__t {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
  display: block;
}

.lab { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }

.auth-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 12rem);
  padding: var(--space-8) var(--space-4);
}

.auth-header-icon {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-gradient);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto var(--space-4);
}

.auth-lede, .hint { color: var(--color-text-muted); font-size: 0.95rem; }

.err {
  color: var(--color-error);
  background: rgba(239, 68, 68, 0.08);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  margin: var(--space-2) 0;
}

/* ── PART 10: Filter tabs ── */
.filter-tabs,
.scope-row,
.aud-grid {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.aud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}

.filter-tab,
.scope-tile,
.aud-tile {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  text-align: left;
}

.filter-tab:hover,
.scope-tile:hover,
.aud-tile:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.filter-tab.active,
.scope-tile--active,
.aud-tile--active {
  background: var(--color-primary-gradient);
  color: var(--color-text-inverse);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(118, 86, 61, 0.3);
}

.scope-tile__d, .aud-tile__sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 2px;
}

.scope-tile--active .scope-tile__d,
.aud-tile--active .aud-tile__sub { color: rgba(255,255,255,0.85); }

.filter-panel__head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: var(--color-text);
}

.filter-panel__head::-webkit-details-marker { display: none; }

.filter-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.filter-panel__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.search-bar-wrap {
  position: relative;
  margin-bottom: var(--space-4);
}

.search-bar-wrap .search-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary);
  pointer-events: none;
}

.search-bar-wrap input {
  padding-left: 2.75rem;
  border-radius: var(--radius-lg);
}

.cat-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.bar__meta { font-size: 0.9rem; color: var(--color-text-muted); font-weight: 600; }
.bar__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.dashboard-empty,
.lb-empty,
.catalog-empty,
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--color-surface-offset) 80%, transparent);
  color: var(--color-text-muted);
  margin: 0;
}

.empty-state__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.empty-state__title {
  margin: 0;
  font-weight: 700;
  color: var(--color-text);
  font-size: 1rem;
}

.empty-state__desc {
  margin: 0;
  max-width: 28rem;
  font-size: 0.9rem;
  line-height: 1.55;
}

.empty-state__action { margin-top: var(--space-2); }

.catalog-empty { padding: var(--space-16) var(--space-4); }
.catalog-empty__icon {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
  font-size: 2rem;
}
.catalog-empty__hint { color: var(--color-text-muted); max-width: 28rem; margin: 0 auto; }

/* ── PART 11: Test ── */
.test-page { padding: var(--space-8) 0; max-width: 720px; }

.test-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.test-progress-wrap {
  flex: 1;
  height: 8px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  position: relative;
  overflow: hidden;
}

.test-progress-bar {
  height: 100%;
  background: var(--color-primary-gradient);
  border-radius: var(--radius-full);
  width: 0%;
  transition: width 0.3s ease;
}

.test-progress-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.test-timer {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.question-card,
.test-q {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
}

.question-text,
.test-q__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-5);
  line-height: 1.5;
}

.option-item,
.test-mcq-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-2);
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: var(--space-2);
  font-size: 0.95rem;
  color: var(--color-text);
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.option-item:hover,
.test-mcq-option:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.option-item.selected,
.test-mcq-option.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  font-weight: 600;
}

.test-subject-picker { max-width: 36rem; margin: 0 auto var(--space-8); }
.test-subject-list {
  display: grid;
  gap: var(--space-2);
  max-height: 16rem;
  overflow-y: auto;
  margin-bottom: var(--space-4);
}

.test-subject-item {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  font-weight: 600;
}

.test-subject-item:hover { border-color: var(--color-primary); background: var(--color-primary-highlight); }
.test-subject-item.is-selected { border-color: var(--color-primary); background: var(--color-primary-highlight); color: var(--color-primary); }
.test-subject-item.is-unavailable {
  opacity: 0.7;
  cursor: not-allowed;
}
.test-subject-item.is-unavailable:hover {
  border-color: var(--color-border);
  background: transparent;
}
.test-subject-soon {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.test-pause-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 23, 48, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: var(--space-4);
}

.test-pause-overlay[hidden] { display: none !important; }

.test-pause-card { max-width: 24rem; text-align: center; }

.test-result-card { text-align: center; padding: var(--space-8); }
.test-result-card--speed {
  border: 2px solid #694A36;
  background: color-mix(in oklch, #fff1f2 88%, var(--color-surface));
}
.test-result-card--foundation {
  border: 2px solid #3C2A20;
  background: color-mix(in oklch, #fef2f2 85%, var(--color-surface));
}
.test-alert {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  text-align: left;
  max-width: 40rem;
  margin: 0 auto var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 2px solid #694A36;
  background: #fff1f2;
  color: #9f1239;
  box-shadow: var(--shadow-sm);
}
.test-alert--foundation {
  border-color: #3C2A20;
  background: #fef2f2;
  color: #991b1b;
}
.test-alert__icon {
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1;
  margin-top: 0.15rem;
}
.test-alert__title {
  margin: 0 0 var(--space-2);
  font-size: 1.15rem;
  font-weight: 700;
  color: inherit;
}
.test-alert__text {
  margin: 0 0 var(--space-4);
  line-height: 1.45;
}
.test-alert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
[data-theme="dark"] .test-alert,
[data-theme="dark"] .test-result-card--speed {
  background: rgba(225, 29, 72, 0.18);
  border-color: #fb7185;
  color: #fecdd3;
}
[data-theme="dark"] .test-alert--foundation,
[data-theme="dark"] .test-result-card--foundation {
  background: rgba(220, 38, 38, 0.2);
  border-color: #f87171;
  color: #fecaca;
}
.test-review-card {
  padding: var(--space-6);
  text-align: left;
  max-width: 36rem;
  margin: 0 auto;
}
.test-review-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: grid;
  gap: var(--space-2);
}
.test-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.test-q-actions {
  margin-top: var(--space-4);
  display: flex;
  justify-content: flex-start;
}
.level-badge--foundation_needed,
.level-badge--developing {
  color: #991b1b;
  background: rgba(239, 68, 68, 0.14);
}
[data-theme="dark"] .level-badge--foundation_needed,
[data-theme="dark"] .level-badge--developing {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.22);
}
.test-score-bar {
  height: 8px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  margin: var(--space-4) 0;
  overflow: hidden;
}
.test-score-fill {
  height: 100%;
  background: var(--color-primary-gradient);
  border-radius: var(--radius-full);
}
.test-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}

.test-feedback { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); }
.test-feedback--ok { background: rgba(16,185,129,0.12); color: #065f46; }
.test-feedback--bad { background: rgba(105, 74, 54, 0.12); color: #3C2A20; }

[data-theme="dark"] .test-feedback--ok { background: rgba(16,185,129,0.15); color: #C8B6A1; }
[data-theme="dark"] .test-feedback--bad { background: rgba(239,68,68,0.15); color: #fca5a5; }

/* ── Hero (landing / catalog) ── */
.hero-banner {
  text-align: left;
  padding: var(--space-10) var(--space-5) var(--space-8);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% -24%, color-mix(in oklch, var(--color-primary) 24%, transparent), transparent 58%),
    radial-gradient(circle at 88% 8%, color-mix(in oklch, #B29378 16%, transparent), transparent 44%),
    var(--color-surface-elevated);
  max-width: min(1280px, calc(100% - 2rem));
  margin: 0.9rem auto 0;
  box-shadow: 0 10px 28px color-mix(in oklch, var(--color-primary) 8%, transparent);
}

.hero-banner__deco {
  display: none;
}

.hero-banner__inner {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(0.8rem, 2.5vw, 1.4rem);
  row-gap: 0.4rem;
  align-items: center;
}

.hero-banner__avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-gradient);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin: 0;
  box-shadow: 0 8px 24px rgba(118, 86, 61, 0.3);
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
}

.hero-banner__title {
  grid-column: 2;
  margin: 0 0 var(--space-2);
}

.hero-banner__subtitle {
  grid-column: 2;
  font-size: 1.125rem;
  margin: 0;
  max-width: 44rem;
}
.hero-banner__quote { font-style: italic; font-size: 1rem; }

.hero-banner__actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: flex-start;
  margin-top: var(--space-3);
}

.hero-banner--compact { padding: var(--space-8) var(--space-5) var(--space-6); }

@media (max-width: 680px) {
  .hero-banner__inner {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
  }

  .hero-banner__avatar {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.2rem;
  }

  .hero-banner__subtitle {
    font-size: 0.95rem;
  }
}

/* Landing sections */
.landing { padding: var(--space-12) var(--space-6); }

.alive-categories__head,
.section-head {
  text-align: center;
  margin-bottom: var(--space-10);
}

.alive-cat-grid,
.features-grid,
.alive-events__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}

.alive-events { margin-top: var(--space-16); }
.features-section { margin-top: var(--space-16); }
.section-title { text-align: center; font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: var(--space-8); }
.feature-card { text-align: center; }
.feature-card .card-icon { margin-left: auto; margin-right: auto; }

.alive-event-card { text-decoration: none; color: inherit; display: block; }
.alive-event-card__title { font-weight: 700; font-size: 1.05rem; color: var(--color-text); margin-top: var(--space-3); }
.alive-event-card__meta { font-size: 0.875rem; color: var(--color-text-muted); margin-top: var(--space-2); }

.alive-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
}

.alive-badge--top { background: #EFE8DE; color: #92400e; }
.alive-badge--urgent { background: #F3EBE3; color: #3C2A20; }
.alive-badge--soon { background: var(--color-primary-highlight); color: var(--color-primary); }

.cta-banner {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  margin-top: var(--space-8);
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: stretch;
  margin-top: var(--space-8);
}

.cta-banner__actions .button {
  min-height: 3rem;
  min-width: 10rem;
  padding: var(--space-3) var(--space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.cta-banner__btn--light {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.cta-banner__btn--light:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.cta-banner .btn-secondary,
.cta-banner .button--inverse {
  background: var(--color-surface);
  color: var(--color-primary-end);
  box-shadow: var(--shadow-md);
}

/* ── Landing page — redesigned ─────────────────────── */

/* Keyframes */
@keyframes lndGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes lndFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(18px, -28px) scale(1.06); }
  66%      { transform: translate(-12px, 14px) scale(0.96); }
}

@keyframes lndFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-22px, 20px) scale(1.08); }
  70%      { transform: translate(16px, -16px) scale(0.94); }
}

@keyframes lndFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(10px, -20px) scale(1.04); }
}

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

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

@keyframes lndPulseGlow {
  0%, 100% { box-shadow: 0 0 20px color-mix(in oklch, var(--color-primary) 20%, transparent); }
  50%      { box-shadow: 0 0 40px color-mix(in oklch, var(--color-primary) 35%, transparent); }
}

/* Scroll reveal base */
.lnd-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

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

/* Badge */
.lnd-badge {
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #EFE8DE;
  color: #694A36;
  border: 1px solid #C8B6A1;
}

.lnd-badge--glow {
  animation: none;
  box-shadow: none;
}

/* ── Hero ── */
.lnd-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 10vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  background: #E5DED4;
}

.lnd-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(200, 182, 161, 0.35), transparent),
    radial-gradient(ellipse 60% 50% at 85% 30%, rgba(178, 147, 120, 0.22), transparent),
    radial-gradient(ellipse 50% 40% at 50% 90%, rgba(245, 240, 233, 0.8), transparent),
    #E5DED4;
  background-size: auto;
  animation: none;
}

.lnd-hero__grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200, 182, 161, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 182, 161, 0.35) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
}

.lnd-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
  will-change: transform;
}

.lnd-hero__orb--1 {
  width: 320px; height: 320px;
  top: -60px; left: -40px;
  background: rgba(200, 182, 161, 0.55);
  animation: lndFloat1 14s ease-in-out infinite;
}

.lnd-hero__orb--2 {
  width: 240px; height: 240px;
  top: 30%; right: 5%;
  background: rgba(178, 147, 120, 0.4);
  animation: lndFloat2 18s ease-in-out infinite;
}

.lnd-hero__orb--3 {
  width: 180px; height: 180px;
  bottom: -40px; left: 40%;
  background: rgba(245, 240, 233, 0.85);
  animation: lndFloat3 10s ease-in-out infinite;
}

.lnd-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-10);
  align-items: center;
}

.lnd-hero__copy {
  animation: lndFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lnd-hero__title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.12;
  margin: var(--space-4) 0 var(--space-5);
  color: #251A16;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
}

.lnd-hero__accent {
  color: #76563D;
}

.lnd-hero__lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #503829;
  max-width: 36rem;
  margin: 0 0 var(--space-6);
}

.lnd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.page-landing .lnd-hero__actions .button--primary,
.page-landing .lnd-btn-shine.button--primary {
  background: #76563D;
  border: 1px solid #76563D;
  color: #E5DED4;
  box-shadow: 0 4px 16px rgba(80, 56, 41, 0.14);
}

.page-landing .lnd-hero__actions .button--primary:hover,
.page-landing .lnd-btn-shine.button--primary:hover {
  background: #503829;
  border-color: #503829;
  color: #E5DED4;
}

.page-landing .lnd-hero__actions .button--secondary {
  background: #FBF8F3;
  border: 1.5px solid #694A36;
  color: #503829;
  box-shadow: none;
}

.page-landing .lnd-hero__actions .button--secondary:hover {
  background: #EFE8DE;
  border-color: #76563D;
  color: #503829;
}

/* Hero stat cards */
.lnd-hero__stats {
  display: grid;
  gap: var(--space-4);
  animation: lndFadeUp 0.8s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lnd-stat-card {
  background: #F5F0E9;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #C8B6A1;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 16px rgba(80, 56, 41, 0.05);
}

.lnd-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(80, 56, 41, 0.08);
}

.lnd-stat-card__icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  background: #EFE8DE;
  color: #76563D;
}

.lnd-stat-card__icon.purple,
.lnd-stat-card__icon.gold,
.lnd-stat-card__icon.teal,
.lnd-stat-card__icon.green,
.lnd-stat-card__icon.pink,
.lnd-stat-card__icon.orange {
  background: #EFE8DE;
  color: #694A36;
}

.lnd-stat-card__val {
  font-size: 1.5rem;
  font-weight: 800;
  color: #251A16;
  line-height: 1;
}

.lnd-stat-card__label {
  font-size: 0.8rem;
  color: #503829;
  line-height: 1.3;
}

/* ── Sections ── */
.page-landing .home-landing { padding-bottom: 0; }

.lnd-section {
  padding: clamp(3rem, 6vw, 5rem) var(--space-6);
}

.lnd-section--alt {
  background: var(--color-surface-offset);
  border-radius: var(--radius-xl);
  margin: var(--space-4) auto;
  max-width: min(1280px, calc(100% - 2rem));
}

.lnd-head {
  text-align: center;
  margin-bottom: var(--space-10);
}

.lnd-head__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin: var(--space-3) 0 0;
  color: #251A16;
}

.lnd-head__sub {
  max-width: 40rem;
  margin: var(--space-3) auto 0;
  color: #503829;
  line-height: 1.7;
}

/* ── KPIs grid ── */
.lnd-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
}

.lnd-kpi {
  background: #F5F0E9;
  border: 1px solid #C8B6A1;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 4px 16px rgba(80, 56, 41, 0.05);
}

.lnd-kpi:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(80, 56, 41, 0.08);
  border-color: #B29378;
}

.lnd-kpi__icon {
  width: 3rem; height: 3rem;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  margin: 0 auto var(--space-4);
  background: #EFE8DE;
  color: #76563D;
}

.lnd-kpi__icon.purple,
.lnd-kpi__icon.gold,
.lnd-kpi__icon.teal,
.lnd-kpi__icon.green,
.lnd-kpi__icon.pink,
.lnd-kpi__icon.orange {
  background: #EFE8DE;
  color: #694A36;
}

.lnd-kpi__val {
  font-size: 2rem;
  font-weight: 800;
  color: #251A16;
  margin-bottom: var(--space-2);
}

.lnd-kpi__label {
  font-size: 0.85rem;
  color: #503829;
}

/* ── Steps (timeline) ── */
.lnd-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  max-width: 40rem;
  margin: 0 auto;
}

.lnd-step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-4);
}

.lnd-step__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lnd-step__num {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-full);
  background: #76563D;
  color: #E5DED4;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(80, 56, 41, 0.14);
  transition: transform 0.3s ease;
}

.lnd-step:hover .lnd-step__num {
  transform: scale(1.12);
}

.lnd-step__connector {
  flex: 1;
  width: 2px;
  margin-top: var(--space-2);
  color: var(--color-primary);
  opacity: 0.4;
}

.lnd-step__body {
  padding-bottom: var(--space-4);
}

.lnd-step__body h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.1rem;
}

.lnd-step__body p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ── Features ── */
.lnd-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}

.lnd-feature {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
  will-change: transform;
}

.lnd-feature:hover {
  box-shadow: 0 20px 40px color-mix(in oklch, var(--color-primary) 12%, transparent);
  border-color: color-mix(in oklch, var(--color-primary) 40%, var(--color-border));
}

.lnd-feature__icon {
  width: 3rem; height: 3rem;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  margin-bottom: var(--space-4);
  transition: transform 0.3s ease;
  background: #EFE8DE;
  color: #76563D;
}

.lnd-feature__icon.purple,
.lnd-feature__icon.gold,
.lnd-feature__icon.teal,
.lnd-feature__icon.green,
.lnd-feature__icon.pink,
.lnd-feature__icon.orange {
  background: #EFE8DE;
  color: #694A36;
}

.lnd-feature:hover .lnd-feature__icon {
  transform: scale(1.15) rotate(-4deg);
}

.lnd-feature h3 {
  margin: 0 0 var(--space-3);
  font-size: 1.05rem;
}

.lnd-feature p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ── AI card ── */
.lnd-ai-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-8);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
}

.lnd-ai-card__glow {
  position: absolute;
  top: -30%;
  right: -20%;
  width: 50%;
  height: 160%;
  background: radial-gradient(ellipse, color-mix(in oklch, var(--color-primary) 12%, transparent), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.lnd-ai-card__copy h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  margin: var(--space-3) 0 var(--space-4);
}

.lnd-ai-card__copy p {
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0 0 var(--space-6);
}

.lnd-ai-card__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  align-content: center;
}

.lnd-ai-card__checks li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.lnd-ai-card__checks i {
  color: var(--color-primary-end);
  font-size: 1.1rem;
}

/* ── Certificates ── */
.lnd-certs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}

.lnd-cert {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lnd-cert:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.lnd-cert__icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-highlight);
  color: var(--color-primary-end);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* ── FAQ ── */
.lnd-faq {
  max-width: 48rem;
  margin: 0 auto;
  display: grid;
  gap: var(--space-3);
}

.lnd-faq__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.lnd-faq__item[open] {
  border-color: var(--color-primary);
}

.lnd-faq__item summary {
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  user-select: none;
}

.lnd-faq__item summary::-webkit-details-marker { display: none; }

.lnd-faq__item summary::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  transition: transform 0.3s ease;
}

.lnd-faq__item[open] summary::after {
  transform: rotate(180deg);
}

.lnd-faq__body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease;
  padding: 0 var(--space-5);
}

.lnd-faq__item[open] .lnd-faq__body {
  max-height: 400px;
  opacity: 1;
  padding-bottom: var(--space-5);
}

.lnd-faq__body p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ── CTA ── */
.lnd-cta {
  position: relative;
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) var(--space-8);
  border-radius: var(--radius-xl);
  background: #76563D;
  color: #E5DED4;
  overflow: hidden;
  border: none;
}

.lnd-cta__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  animation: lndShimmer 4s ease-in-out infinite;
  pointer-events: none;
}

.lnd-cta h2 {
  position: relative;
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin: 0 0 var(--space-3);
}

.lnd-cta p {
  position: relative;
  color: rgba(255,255,255,0.88);
  max-width: 40rem;
  margin: 0 auto var(--space-6);
  line-height: 1.65;
}

.lnd-cta__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: stretch;
}

.lnd-cta__secondary-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

.lnd-cta__primary {
  min-width: min(100%, 14rem);
}

.lnd-cta__btn-ghost {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.35) !important;
}

.lnd-cta__btn-ghost:hover {
  background: rgba(255,255,255,0.22) !important;
}

/* Shine button effect */
.lnd-btn-shine {
  position: relative;
  overflow: hidden;
}

.lnd-btn-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.2) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: none;
}

.lnd-btn-shine:hover::after {
  animation: lndShimmer 0.8s ease-out;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .lnd-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .lnd-hero__lead { margin-left: auto; margin-right: auto; }
  .lnd-hero__actions { justify-content: center; }
  .lnd-hero__stats { max-width: 400px; margin: 0 auto; }

  .lnd-ai-card {
    grid-template-columns: 1fr;
  }
}

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

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lnd-reveal { opacity: 1; transform: none; transition: none; }
  .lnd-hero__bg { animation: none; }
  .lnd-hero__orb { animation: none; }
  .lnd-cta__shimmer { animation: none; display: none; }
  .lnd-btn-shine::after { animation: none; display: none; }
  .lnd-badge--glow { animation: none; }
  .lnd-stat-card,
  .lnd-kpi,
  .lnd-feature,
  .lnd-cert { transition: none; }
}

/* ── Profile ── */
.profile-header-card { margin-bottom: var(--space-8); }
.profile-banner {
  border-radius: var(--radius-xl);
  background: var(--color-primary-gradient);
  padding: var(--space-8) var(--space-6);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}
.profile-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.profile-avatar-wrap { display: flex; gap: var(--space-6); align-items: flex-start; margin-top: 0; padding: 0; }
.profile-avatar {
  width: 5.5rem;
  height: 5.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 4px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-primary);
  position: relative;
}
.profile-header-info { padding-top: 0; flex: 1; min-width: 0; }
.profile-header-title { font-size: 1.75rem; font-weight: 700; color: #fff; margin: 0; }
.profile-banner__email { color: rgba(255, 255, 255, 0.9); margin-top: var(--space-1); }
.profile-banner .profile-muted,
.profile-banner .profile-banner__email {
  color: rgba(255, 255, 255, 0.9);
}
.profile-banner .friends-count-row {
  color: rgba(255, 255, 255, 0.92);
}
.profile-banner .friends-count-row i {
  color: rgba(255, 255, 255, 0.95);
}
.profile-banner .profile-friends-badge,
.profile-banner .profile-social-actions .button--secondary {
  color: var(--color-text);
}
.profile-level-line { margin-top: var(--space-3); }
.profile-level-line .level-badge { box-shadow: var(--shadow-sm); }
.profile__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 768px) { .profile__grid { grid-template-columns: 1fr; } }

.profile-card__h { font-size: 1.1rem; font-weight: 700; margin-bottom: var(--space-4); color: var(--color-text); }
.profile-muted { color: var(--color-text-muted); margin-top: var(--space-1); }
.profile-stat-label { font-size: 0.875rem; color: var(--color-text-muted); }
.profile-stat-value { font-size: 1.25rem; font-weight: 800; color: var(--color-primary); }
.profile-quick-card { background: linear-gradient(135deg, var(--color-primary-highlight), rgba(16,185,129,0.08)); }
.profile-quick-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  margin-bottom: var(--space-3);
  transition: box-shadow var(--transition);
}
.profile-quick-link:hover { box-shadow: var(--shadow-md); }
.profile-subject-levels { list-style: none; }
.profile-subject-levels__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.profile-subject-levels__date { color: var(--color-text-soft); font-size: 0.8125rem; margin-left: auto; }

.profile-toggle { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; font-weight: 600; color: var(--color-text); }
.profile-toggle__status { font-size: 0.875rem; color: var(--color-text-muted); margin-top: var(--space-2); }

.dl__row { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); }
.dl__row dt { color: var(--color-text-muted); font-weight: 600; }
.dl__row dd { color: var(--color-text); font-weight: 600; }

/* ── Event detail ── */
.event-detail { padding: var(--space-8) 0; }
.event-detail__back a { color: var(--color-text-muted); font-weight: 600; }
.event-detail__hero { margin: var(--space-6) 0; }
.event-detail__blob-wrap {
  height: 10rem;
  border-radius: var(--radius-xl);
  background: var(--color-primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
}
.event-detail__blob { color: var(--color-text-inverse); font-weight: 800; font-size: 1.25rem; text-align: center; padding: var(--space-4); }
.event-detail__title { margin-bottom: var(--space-4); }
.event-detail__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.event-detail__section { margin-bottom: var(--space-8); }
.event-detail__h { font-size: 1.25rem; margin-bottom: var(--space-4); }
.event-detail__prose { color: var(--color-text-muted); line-height: 1.7; }

.prep-resource-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border);
}

/* ── PART 13: Footer — warm academic card ── */
.shell-foot,
.footer {
  background: transparent;
  backdrop-filter: none;
  border-top: none;
  padding: 0;
  color: var(--oz-coffee);
  font-size: 1rem;
  margin: 64px auto 32px;
  max-width: min(1980px, calc(100% - 48px));
}

.oz-footer__card {
  overflow: hidden;
  background: #FBF8F3;
  border: 1px solid var(--oz-beige);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(80, 56, 41, 0.06);
}

.oz-footer__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.05fr;
  column-gap: clamp(48px, 5vw, 100px);
  row-gap: 48px;
  align-items: start;
  padding: clamp(48px, 6vw, 80px) clamp(32px, 6vw, 96px);
}

.oz-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  color: var(--oz-espresso);
}

.oz-footer__mark {
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 18px;
  background: #F5F0E9;
  border: 1px solid var(--oz-camel);
  box-shadow: 0 4px 14px rgba(80, 56, 41, 0.08);
}

.oz-footer__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.oz-footer__wordmark {
  font-size: clamp(2rem, 2.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--oz-chocolate);
}

.oz-footer__tagline {
  margin: 30px 0 0;
  max-width: 16.5rem;
  color: rgba(80, 56, 41, 0.78);
  font-size: clamp(1.05rem, 1.15vw, 1.25rem);
  font-weight: 400;
  line-height: 1.45;
}

.oz-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
}

.oz-footer__social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid var(--oz-beige);
  background: #F5F0E9;
  color: var(--oz-cognac);
  font-size: 1.35rem;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.oz-footer__social-btn:hover {
  background: #EFE8DE;
  border-color: var(--oz-cognac);
  color: var(--oz-cognac);
}

.oz-footer__social-btn:focus-visible {
  outline: 2px solid var(--oz-caramel);
  outline-offset: 2px;
}

.oz-footer__social-btn--disabled {
  opacity: 0.62;
  cursor: default;
}

.oz-footer__heading {
  margin: 0 0 40px;
  font-size: clamp(1.7rem, 2vw, 2.1rem);
  font-weight: 700;
  color: var(--oz-espresso);
  line-height: 1.15;
}

.oz-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 30px;
}

.oz-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--oz-coffee);
  font-size: clamp(1.05rem, 1.1vw, 1.25rem);
  font-weight: 500;
  text-decoration: none;
  line-height: 1.35;
  transition: color var(--transition);
}

.oz-footer__link i {
  color: var(--oz-caramel);
  font-size: 0.85rem;
  transition: transform var(--transition);
}

.oz-footer__link:hover {
  color: var(--oz-chestnut);
}

.oz-footer__link:hover i {
  transform: translateX(3px);
}

.oz-footer__link:focus-visible {
  outline: 2px solid var(--oz-caramel);
  outline-offset: 3px;
  border-radius: 4px;
}

.oz-footer__tg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 390px);
  min-height: 76px;
  margin: 0 0 38px;
  padding: 0 22px;
  border: 1.5px solid var(--oz-chestnut);
  border-radius: 12px;
  background: #FBF8F3;
  color: var(--oz-cognac);
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition), box-shadow var(--transition), color var(--transition);
}

.oz-footer__tg:hover {
  background: #EFE8DE;
  color: var(--oz-cognac);
  box-shadow: 0 4px 14px rgba(80, 56, 41, 0.08);
}

.oz-footer__tg:focus-visible {
  outline: 2px solid var(--oz-caramel);
  outline-offset: 2px;
}

.oz-footer__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 46px clamp(32px, 6vw, 96px);
  border-top: 1px solid var(--oz-beige);
}

.oz-footer__copy {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--oz-coffee);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.1vw, 1.2rem);
  line-height: 1.35;
}

.oz-footer__copy-icon {
  color: var(--oz-cognac);
  font-size: 1.9rem;
}

.oz-footer__langs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.oz-footer__lang {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(80, 56, 41, 0.72);
  font: inherit;
  font-size: clamp(1.05rem, 1.1vw, 1.2rem);
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  position: relative;
  min-height: 44px;
}

.oz-footer__lang + .oz-footer__lang {
  border-left: 1px solid var(--oz-sand);
}

.oz-footer__lang.is-active {
  color: var(--oz-espresso);
  font-weight: 600;
}

.oz-footer__lang:hover {
  color: var(--oz-chestnut);
}

.oz-footer__lang:focus-visible {
  outline: 2px solid var(--oz-caramel);
  outline-offset: 2px;
  border-radius: 4px;
}

.page-chat .shell-foot,
.page-admin-support .shell-foot,
.page-hamroh .shell-foot,
.page-test .shell-foot,
.oz-roadmaps--nofooter .shell-foot,
.oz-roadmaps .shell-foot {
  display: none !important;
}

@media (max-width: 1100px) {
  .shell-foot,
  .footer {
    max-width: calc(100% - 32px);
    margin: 48px auto 28px;
  }

  .oz-footer__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 40px;
    padding: 48px 36px;
  }

  .oz-footer__col--brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .shell-foot,
  .footer {
    max-width: calc(100% - 24px);
    margin: 36px auto 24px;
  }

  .oz-footer__grid {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px 22px;
  }

  .oz-footer__col--brand {
    grid-column: auto;
  }

  .oz-footer__mark {
    width: 88px;
    height: 88px;
  }

  .oz-footer__social-btn {
    width: 56px;
    height: 56px;
  }

  .oz-footer__tg {
    width: 100%;
    min-height: 64px;
  }

  .oz-footer__strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 22px 32px;
  }

  .oz-footer__langs {
    width: 100%;
  }
}

[data-theme="dark"] .shell-foot,
[data-theme="dark"] .footer {
  background: transparent;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-8);
  max-width: 1280px;
  margin: 0 auto;
}

.footer-col h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a { color: var(--color-text-muted); font-weight: 500; }
.footer-col a:hover { color: var(--color-primary); }

.footer-bottom {
  max-width: 1280px;
  margin: var(--space-8) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  text-align: center;
}

.footer-social a {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  margin-right: var(--space-2);
}

.footer-tagline { color: var(--color-text-muted); margin: var(--space-3) 0 var(--space-4); }

/* ── Toast / Modal ── */
.ozmun-toast {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 9999;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  max-width: 20rem;
}

.ozmun-toast--ok { border-color: var(--color-success); }
.ozmun-toast--err { border-color: var(--color-error); }

.ozmun-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(26, 23, 48, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.ozmun-modal[hidden] { display: none !important; }

.ozmun-modal__card {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  max-width: 24rem;
  width: 100%;
}

/* ── Admin (minimal) ── */
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
  color: var(--color-text);
}

/* Hide ambient scene if present */
.oz-scene { display: none !important; }

/* Active press feedback */
.btn-primary:active, .button--primary:active, .button--secondary:active,
.filter-tab:active, .scope-tile:active { transform: scale(0.97); }

.page-auth .shell-main { display: flex; align-items: center; }

.cat-page { padding: var(--space-8) var(--space-6) var(--space-12); }
.cat-page .filter-panel { margin-bottom: var(--space-8); }
.cat-page .cat-bar { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }

.profile-level-toggle, .catalog-level-toggle { margin-bottom: var(--space-4); }

/* Utilities */
.icon-accent { color: var(--color-primary); margin-right: var(--space-1); }
.icon-accent-error { color: var(--color-error); }
.lab__t .icon-accent { margin-right: var(--space-2); }

.auth-panel { max-width: 28rem; width: 100%; }
.auth-panel__head { text-align: center; margin-bottom: var(--space-8); }
.auth-form__submit { margin-top: var(--space-2); }
.hint--center { text-align: center; margin-top: var(--space-4); }

.shell-inner--page { padding: var(--space-8) var(--space-6) var(--space-12); }
.profile-card--spaced { margin-bottom: var(--space-6); }
.profile-card--spaced-top { margin-top: var(--space-6); }
.profile-header-info { padding-top: var(--space-4); }
.profile-header-title { font-size: 1.75rem; font-weight: 700; }
.profile-banner .profile-header-title { color: #fff; }
.profile-level-line { margin-top: var(--space-2); color: var(--color-text); }
.profile-sidebar-stat { display: flex; align-items: center; gap: var(--space-3); }
.profile-sidebar-stat--spaced { margin-bottom: var(--space-3); }
.profile-sidebar-stat__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-quick-link__row { display: flex; align-items: center; gap: var(--space-3); }
.profile-quick-link__label { font-weight: 500; color: var(--color-text); }
.profile-quick-link__chevron { color: var(--color-text-muted); }
.profile-quick-link--last { margin-bottom: 0; }
.lab--spaced { margin-top: var(--space-3); }

.filter-panel__body { margin-top: var(--space-5); }
.page-nav { display: flex; align-items: center; gap: var(--space-2); }
.catalog-more-wrap { text-align: center; margin-top: var(--space-8); }

.alive-categories__head p { margin-top: var(--space-2); }

/* ═══ Phase 1 ═══ */

/* Auth — centered layout */
.auth-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 10rem);
  padding: var(--space-10) var(--space-6);
  width: 100%;
}
.page-auth .shell-main { flex: 1; display: flex; align-items: stretch; justify-content: center; }

.button--google {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  gap: var(--space-3);
}
.button--google:hover { border-color: var(--color-primary); background: var(--color-surface-offset); }
.auth-divider {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-6) 0; color: var(--color-text-soft); font-size: 0.85rem;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--color-divider);
}

.pwd-field { position: relative; }
.pwd-field input { padding-right: 2.75rem; }
.pwd-field__toggle {
  position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
  background: transparent; border: none; color: var(--color-text-muted); cursor: pointer; padding: var(--space-2);
}
.pwd-meter { margin-top: var(--space-3); }
.pwd-meter__track {
  height: 6px; border-radius: var(--radius-full); background: var(--color-surface-offset); overflow: hidden;
}
.pwd-meter__bar {
  height: 100%; width: 0; border-radius: var(--radius-full); transition: width var(--transition), background var(--transition);
}
.pwd-meter__bar--weak { background: var(--color-error); }
.pwd-meter__bar--medium { background: var(--color-warning); }
.pwd-meter__bar--strong { background: var(--color-success); }
.pwd-criteria {
  list-style: none; margin-top: var(--space-3); display: grid; gap: var(--space-1); font-size: 0.82rem; color: var(--color-text-muted);
}
.pwd-criteria__item::before { content: "○ "; color: var(--color-text-soft); }
.pwd-criteria__item--ok { color: var(--color-success); }
.pwd-criteria__item--ok::before { content: "✓ "; }
.pwd-match-error { margin-top: var(--space-2); }

/* Filter tabs — readable subtitles */
.scope-tile__d, .aud-tile__sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 1;
  margin-top: 4px;
  color: var(--color-text-soft);
  line-height: 1.35;
}
.scope-tile:hover .scope-tile__d,
.aud-tile:hover .aud-tile__sub { color: var(--color-primary); }
.scope-tile--active .scope-tile__d,
.aud-tile--active .aud-tile__sub { color: rgba(255,255,255,0.92); }
.scope-tile, .aud-tile { padding: var(--space-3) var(--space-5); min-height: 3rem; }

/* ── Catalog filters: compact segmented reference layout ── */
.cat-page .cat-filters {
  display: flex;
  flex-direction: column;
  gap: 17px;
  margin: 20px 0 22px;
}

.cat-page .cat-filter-label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--oz-coffee);
  line-height: 1.2;
}

.cat-page .cat-filters__row2 {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(600px, 1.65fr);
  gap: 22px;
  align-items: end;
}

.cat-page .cat-filter-group {
  min-width: 0;
}

.cat-page .cat-seg {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--oz-beige);
  border-radius: 12px;
  box-shadow: none;
}

.cat-page .cat-seg--mode {
  width: min(100%, 450px);
  height: 60px;
  padding: 8px;
  box-sizing: border-box;
}

.cat-page .cat-seg--status {
  width: min(100%, 325px);
  height: 54px;
  padding: 6px;
  box-sizing: border-box;
}

.cat-page .cat-seg--audience {
  width: 100%;
  height: 54px;
  padding: 6px;
  box-sizing: border-box;
}

.cat-page .cat-seg .scope-tile,
.cat-page .cat-seg .aud-tile {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--oz-coffee);
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  position: relative;
  transition: background-color var(--transition), color var(--transition);
}

.cat-page .cat-seg .scope-tile + .scope-tile,
.cat-page .cat-seg .aud-tile + .aud-tile {
  box-shadow: inset 1px 0 0 var(--oz-sand);
}

.cat-page .cat-seg .scope-tile--active + .scope-tile,
.cat-page .cat-seg .aud-tile--active + .aud-tile,
.cat-page .cat-seg .scope-tile + .scope-tile--active,
.cat-page .cat-seg .aud-tile + .aud-tile--active {
  box-shadow: none;
}

.cat-page .cat-seg .scope-tile:hover,
.cat-page .cat-seg .aud-tile:hover {
  background: #EFE8DE;
  color: var(--oz-coffee);
  border-color: transparent;
}

.cat-page .cat-seg .scope-tile--active,
.cat-page .cat-seg .aud-tile--active,
.cat-page .cat-seg .scope-tile--active:hover,
.cat-page .cat-seg .aud-tile--active:hover {
  background: var(--oz-chestnut);
  color: var(--color-text-inverse);
  border-color: transparent;
  box-shadow: none;
}

.cat-page .cat-seg .cat-seg__icon {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
  color: var(--oz-cognac);
}

.cat-page .cat-seg .scope-tile--active .cat-seg__icon,
.cat-page .cat-seg .aud-tile--active .cat-seg__icon {
  color: var(--color-text-inverse);
}

.cat-page .cat-seg .scope-tile__d,
.cat-page .cat-seg .aud-tile__sub,
.cat-page .cat-seg [hidden] {
  display: none !important;
}

.cat-page .cat-seg .scope-tile:focus-visible,
.cat-page .cat-seg .aud-tile:focus-visible {
  outline: 2px solid var(--oz-caramel);
  outline-offset: 2px;
}

.cat-page.fx-page .cat-filters .scope-tile,
.cat-page.fx-page .cat-filters .aud-tile,
.cat-page.fx-page .cat-filters .scope-tile--active,
.cat-page.fx-page .cat-filters .aud-tile--active {
  animation: none !important;
}

.cat-page .cat-level-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}

.cat-page .catalog-level-prompt {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 480px);
  min-height: 54px;
  height: 54px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid var(--oz-cognac);
  border-radius: 12px;
  background: var(--color-surface-2);
  color: var(--oz-espresso);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--transition), border-color var(--transition);
}

.cat-page .catalog-level-prompt:hover {
  background: #EFE8DE;
  border-color: var(--oz-coffee);
}

.cat-page .catalog-level-prompt:focus-visible {
  outline: 2px solid var(--oz-caramel);
  outline-offset: 2px;
}

.cat-page .catalog-level-prompt > i:first-child {
  color: var(--oz-cognac);
  font-size: 15px;
}

.cat-page .catalog-level-prompt__chevron {
  margin-left: auto;
  color: var(--oz-cognac);
  font-size: 13px;
}

.cat-page .level-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 290px);
  min-height: 54px;
  height: 54px;
  margin: 0 0 0 auto;
  padding: 0 16px;
  border: 1px solid var(--oz-sand);
  border-radius: 12px;
  background: var(--color-surface-2);
  color: var(--oz-espresso);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--transition), border-color var(--transition);
}

.cat-page .level-toggle--on,
.cat-page .level-toggle--off {
  background: var(--color-surface-2);
  color: var(--oz-espresso);
  border-color: var(--oz-sand);
}

.cat-page .level-toggle__text {
  text-align: left;
  line-height: 1.25;
}

.cat-page .level-toggle__switch {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--oz-beige);
  transition: background-color var(--transition);
}

.cat-page .level-toggle__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-surface-2);
  box-shadow: 0 1px 2px rgba(80, 56, 41, 0.18);
  transition: transform var(--transition);
}

.cat-page .level-toggle--on .level-toggle__switch {
  background: var(--oz-chestnut);
}

.cat-page .level-toggle--on .level-toggle__switch::after {
  transform: translateX(20px);
}

.cat-page .level-toggle:focus-visible {
  outline: 2px solid var(--oz-caramel);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  .cat-page .cat-filters__row2 {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
  }

  .cat-page .cat-seg--status,
  .cat-page .cat-seg--mode {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .cat-page .cat-filters {
    gap: 14px;
    margin: 16px 0 18px;
  }

  .cat-page .cat-seg--mode,
  .cat-page .cat-seg--status,
  .cat-page .cat-seg--audience {
    width: 100%;
    height: auto;
    min-height: 48px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cat-page .cat-seg .scope-tile,
  .cat-page .cat-seg .aud-tile {
    min-height: 44px;
    padding: 10px 12px;
    white-space: nowrap;
  }

  .cat-page .cat-level-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .cat-page .catalog-level-prompt,
  .cat-page .level-toggle {
    width: 100%;
    margin-left: 0;
    height: auto;
    min-height: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Level / difficulty badges */
.level-badge,
.difficulty-badge {
  display: inline-flex; align-items: center;
  padding: 0.2rem 0.625rem; border-radius: var(--radius-full);
  font-size: 0.6875rem; font-weight: 700; line-height: 1.3;
  border: 1px solid transparent;
}
.level-badge--beginner, .level-badge--easy, .difficulty-badge--easy {
  background: rgba(34, 197, 94, 0.14); color: #15803d; border-color: rgba(34, 197, 94, 0.35);
}
.level-badge--intermediate, .level-badge--medium, .difficulty-badge--medium {
  background: rgba(245, 158, 11, 0.16); color: #b45309; border-color: rgba(245, 158, 11, 0.35);
}
.level-badge--advanced, .level-badge--hard, .difficulty-badge--hard {
  background: rgba(249, 115, 22, 0.16); color: #886142; border-color: rgba(249, 115, 22, 0.35);
}
.level-badge--expert, .level-badge--extreme, .level-badge--professional, .difficulty-badge--extreme {
  background: rgba(239, 68, 68, 0.14); color: #694A36; border-color: rgba(239, 68, 68, 0.35);
}
[data-theme="dark"] .level-badge--beginner, [data-theme="dark"] .level-badge--easy { color: #C8B6A1; background: rgba(34, 197, 94, 0.18); }
[data-theme="dark"] .level-badge--intermediate, [data-theme="dark"] .level-badge--medium { color: #fcd34d; background: rgba(245, 158, 11, 0.18); }
[data-theme="dark"] .level-badge--advanced, [data-theme="dark"] .level-badge--hard { color: #fdba74; background: rgba(249, 115, 22, 0.18); }
[data-theme="dark"] .level-badge--expert, [data-theme="dark"] .level-badge--extreme, [data-theme="dark"] .level-badge--professional { color: #fca5a5; background: rgba(239, 68, 68, 0.18); }

.tag--d { background: rgba(178, 147, 120, 0.18); color: #694A36; }
.tag--c { background: rgba(118, 86, 61, 0.12); color: #76563D; }
.tag--r { background: rgba(249, 115, 22, 0.12); color: #886142; }
.tag--i { background: rgba(239, 68, 68, 0.12); color: #694A36; }
[data-theme="dark"] .tag--d { color: #C8B6A1; }
[data-theme="dark"] .tag--c { color: #C8B6A1; }
[data-theme="dark"] .tag--r { color: #fdba74; }
[data-theme="dark"] .tag--i { color: #fca5a5; }

.event-resources--inline {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}

/* Event cards */
.ev-card__visual { position: relative; }
.ev-format {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 2rem; height: 2rem; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.25); color: var(--color-text-inverse);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.cat-bar__summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.cat-pdf-btn { margin-left: var(--space-2); }
.cat-pdf-btn {
  padding: 0.34rem 0.58rem;
  min-height: 2rem;
  border-radius: 9px;
  font-size: 0.74rem;
  gap: 0.32rem;
}

/* Event detail two-column */
.event-detail__layout {
  display: grid; grid-template-columns: 1fr 320px; gap: var(--space-8); align-items: start;
}
@media (max-width: 960px) { .event-detail__layout { grid-template-columns: 1fr; } }
.event-detail__facts {
  position: sticky;
  top: calc(4rem + var(--space-4));
  display: flex;
  justify-content: flex-start;
}

/* ── Variant 2: high-fidelity editorial sheet ── */
.event-details-mag {
  --mag-bg: #f7f4fb;
  --mag-bg-inset: #f0ebf8;
  --mag-bg-foot: #faf8fd;
  --mag-border: rgba(140, 120, 180, 0.14);
  --mag-label: #9b93b0;
  --mag-text: #2d2640;
  --mag-text-soft: #5c5470;
  --mag-icon: #B29378;
  --mag-chip-bg: rgba(118, 86, 61, 0.07);
  --mag-chip-text: #503829;

  width: 100%;
  max-width: 740px;
  padding: 30px 22px 22px;
  background: var(--mag-bg);
  border: 1px solid var(--mag-border);
  border-radius: 24px;
  box-shadow: none;
  color: var(--mag-text);
}
[data-theme="dark"] .event-details-mag {
  --mag-bg: #1e1b2e;
  --mag-bg-inset: #262238;
  --mag-bg-foot: #221f34;
  --mag-border: rgba(180, 160, 220, 0.12);
  --mag-label: #8a849c;
  --mag-text: #ece8f5;
  --mag-text-soft: #b8b2cc;
  --mag-icon: #B29378;
  --mag-chip-bg: rgba(118, 86, 61, 0.15);
  --mag-chip-text: #C8B6A1;
}

/* ── Hero ── */
.event-details-mag__hero {
  margin-bottom: 0;
}
.event-details-mag__kicker {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mag-label);
}
.event-details-mag__headline {
  margin: 0;
  max-width: 92%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 4.2vw, 2.375rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--mag-text);
}
.event-details-mag__rule {
  height: 1px;
  margin: 20px 0;
  background: var(--mag-border);
}

/* ── Shared label ── */
.event-details-mag__label {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--mag-label);
  line-height: 1.35;
}

/* ── Middle composition ── */
.event-details-mag__mid {
  display: grid;
  grid-template-columns: minmax(0, 1.58fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.event-details-mag__mid--solo {
  grid-template-columns: 1fr;
}

/* Mini-fact row: Country | Location | Subject */
.event-details-mag__mini-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--mag-border);
}
.event-details-mag__mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 10px;
  min-width: 0;
}
.event-details-mag__mini:first-child {
  padding-left: 0;
}
.event-details-mag__mini:last-child {
  padding-right: 0;
}
.event-details-mag__mini:not(:last-child) {
  border-right: 1px solid var(--mag-border);
}
.event-details-mag__mini-icon {
  font-size: 11px;
  color: var(--mag-icon);
  margin-bottom: 2px;
  opacity: 0.85;
}
.event-details-mag__mini-val {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--mag-text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-details-mag__mini-more {
  font-size: 11px;
  font-weight: 500;
  color: var(--mag-label);
  margin-left: 2px;
}

/* Compact fact stack */
.event-details-mag__stack {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.event-details-mag__row {
  margin: 0;
}
.event-details-mag__row dd {
  margin: 0;
}
.event-details-mag__val {
  margin: 5px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--mag-text);
}
.event-details-mag__val--soft {
  font-size: 14px;
  font-weight: 500;
  color: var(--mag-text-soft);
}
.event-details-mag__row--pills .event-details-mag__val {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.event-details-mag__chip {
  display: inline-block;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--mag-chip-text);
  background: var(--mag-chip-bg);
  border-radius: 999px;
}
.event-details-mag__chip--muted {
  color: var(--mag-text-soft);
  background: rgba(140, 120, 180, 0.08);
}

/* Quiet dates */
.event-details-mag__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-top: 4px;
}
.event-details-mag__date-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.event-details-mag__date-item time {
  font-size: 13px;
  font-weight: 500;
  color: var(--mag-text-soft);
}
.event-details-mag__date-item--deadline time {
  color: #b8860b;
}
[data-theme="dark"] .event-details-mag__date-item--deadline time {
  color: #d4a843;
}

/* Organizer featured inset */
.event-details-mag__organizer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 16px 16px;
  background: var(--mag-bg-inset);
  border: 1px solid var(--mag-border);
  border-radius: 18px;
  align-self: start;
}
.event-details-mag__organizer-icon {
  font-size: 14px;
  color: var(--mag-icon);
  margin-bottom: 10px;
  opacity: 0.8;
}
.event-details-mag__organizer-name {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mag-text);
}
.event-details-mag__organizer-rule {
  width: 32px;
  height: 1px;
  margin-top: 14px;
  background: var(--mag-border);
}

/* Foot row */
.event-details-mag__foot-rule {
  height: 1px;
  margin: 18px 0 16px;
  background: var(--mag-border);
}
.event-details-mag__foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.event-details-mag__foot-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 0;
  padding: 14px 16px;
  background: var(--mag-bg-foot);
  border: 1px solid var(--mag-border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms ease;
}
.event-details-mag__foot-card--link:hover {
  border-color: rgba(118, 86, 61, 0.28);
}
.event-details-mag__foot-val {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--mag-text);
  letter-spacing: -0.01em;
}
.event-details-mag__foot-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.event-details-mag__foot-link-row i {
  font-size: 11px;
  color: var(--mag-label);
  transition: transform 180ms ease;
}
.event-details-mag__foot-card--link:hover .event-details-mag__foot-link-row i {
  transform: translateX(2px);
}

.event-details-mag__reg-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--mag-label);
  text-decoration: none;
}
.event-details-mag__reg-link:hover {
  color: var(--mag-chip-text);
}

.event-details-mag__foot:has(.event-details-mag__foot-card:only-child) {
  grid-template-columns: 1fr;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .event-details-mag__mid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .event-details-mag__organizer {
    max-width: 280px;
  }
}

@media (max-width: 560px) {
  .event-details-mag {
    max-width: none;
    padding: 26px 18px 18px;
    border-radius: 20px;
  }
  .event-details-mag__headline {
    max-width: 100%;
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
  .event-details-mag__mini-row {
    grid-template-columns: 1fr 1fr;
  }
  .event-details-mag__mini:nth-child(2) {
    border-right: none;
  }
  .event-details-mag__mini:nth-child(3) {
    grid-column: 1 / -1;
    border-right: none;
    border-top: 1px solid var(--mag-border);
    padding-top: 12px;
    margin-top: 4px;
    padding-left: 0;
  }
  .event-details-mag__foot {
    grid-template-columns: 1fr;
  }
}

/* Mini profile bubble */
.mini-profile {
  position: fixed; left: var(--space-6); bottom: var(--space-6); z-index: 90;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-full); box-shadow: var(--shadow-lg);
  text-decoration: none; color: inherit; max-width: 16rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.mini-profile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--color-primary); }
.mini-profile__avatar {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full);
  background: var(--color-primary-gradient); color: var(--color-text-inverse);
  display: flex; align-items: center; justify-content: center; font-weight: 800; overflow: hidden; flex-shrink: 0;
}
.mini-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.mini-profile__info { min-width: 0; }
.mini-profile__name { display: block; font-size: 0.85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text); }
.mini-profile__email { display: block; font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="dark"] .mini-profile__email { color: #c4c0dc; }
[data-theme="dark"] .mini-profile { background: var(--color-surface-2); border-color: var(--color-border); }
@media (max-width: 640px) { .mini-profile { left: var(--space-4); bottom: var(--space-4); max-width: 12rem; } }

/* Footer telegram centered — legacy hooks kept inert under oz-footer */
.footer-telegram-center { display: none; }
.footer-telegram-btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
  background: transparent; color: var(--oz-cognac); font-weight: 700; text-decoration: none;
  border: 1.5px solid var(--oz-chestnut); box-shadow: none; transition: background-color var(--transition);
}
.footer-telegram-btn:hover { transform: none; color: var(--oz-cognac); background: #EFE8DE; }
.footer-telegram-btn--muted { cursor: default; box-shadow: none; transform: none; }

/* Profile avatar upload */
.profile-avatar--editable { position: relative; overflow: visible; }
.profile-avatar__img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-full); }
.profile-avatar__letter { font-weight: 800; font-size: 1.5rem; color: var(--color-primary); }
.profile-avatar__upload {
  position: absolute; bottom: 0; right: 0;
  width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full);
  background: var(--color-primary); color: var(--color-text-inverse);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.75rem;
  border: 2px solid var(--color-surface);
}

/* Test page spacing */
.page-test .test-page { max-width: 1180px; padding-top: var(--space-10); padding-bottom: var(--space-16); }
.page-test #subject-picker,
.page-test #test-app { max-width: 760px; margin-left: auto; margin-right: auto; }
.test-subject-picker { padding: var(--space-10); margin-bottom: var(--space-10); }
.test-subject-picker__title { margin-bottom: var(--space-4); }
.test-subject-picker__lead { margin-bottom: var(--space-6); font-size: 1.05rem; }
.test-subject-list { margin: var(--space-6) 0; gap: var(--space-3); }
.test-subject-item { padding: var(--space-4) var(--space-5); }
.test-start-btn { margin-top: var(--space-6); }
.test-header { margin-bottom: var(--space-8); }
.test-body { margin-top: var(--space-6); }
.test-q, .question-card { margin-bottom: var(--space-8); }
.test-mcq-option, .option-item { margin-bottom: var(--space-3); padding: var(--space-4) var(--space-5); }
.option-item__key {
  width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full);
  background: var(--color-surface-offset); color: var(--color-text-muted);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.option-item--correct { border-color: var(--color-success) !important; background: rgba(16,185,129,0.12) !important; color: #047857 !important; }
.option-item--wrong { border-color: var(--color-error) !important; background: rgba(239,68,68,0.1) !important; color: #694A36 !important; }
[data-theme="dark"] .option-item--correct { color: #C8B6A1 !important; }
[data-theme="dark"] .option-item--wrong { color: #fca5a5 !important; }
.test-feedback { margin-top: var(--space-6); padding: var(--space-5); border-radius: var(--radius-lg); }
.test-next-btn {
  width: 100%; justify-content: center; margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6); font-size: 1rem;
}
.test-open-input { margin: var(--space-5) 0; min-height: 8rem; }
.test-submit-open { margin-top: var(--space-4); }
.test-page__toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--space-4); }
.test-sound-toggle {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); cursor: pointer;
}
.test-sound-toggle.is-muted { opacity: 0.55; }

.test-loading-panel { text-align: center; padding: var(--space-16) var(--space-6); }
.test-loading-spinner {
  width: 3rem; height: 3rem; border: 3px solid var(--color-surface-offset);
  border-top-color: var(--color-primary); border-radius: 50%;
  margin: 0 auto var(--space-6); animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.test-loading-title { font-weight: 800; font-size: 1.25rem; margin-bottom: var(--space-3); color: var(--color-text); }
.test-loading-stage { color: var(--color-text-soft); font-size: 0.95rem; min-height: 1.5rem; }

.test-result-summary { margin: var(--space-4) 0; color: var(--color-text-muted); }
.test-result-pdf-row { margin: var(--space-6) 0; }
.test-breakdown { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.test-breakdown-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6); background: var(--color-surface);
}
.test-breakdown-card--ok { border-left: 4px solid var(--color-success); }
.test-breakdown-card--bad { border-left: 4px solid var(--color-error); }
.test-breakdown-card__head { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); align-items: flex-start; }
.test-breakdown-card__mark { font-weight: 800; font-size: 1.1rem; }
.test-breakdown-card__head h3 { font-size: 1rem; font-weight: 700; line-height: 1.4; }
.test-breakdown-card__row { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); }
.test-breakdown-card__row--wrong { background: rgba(239,68,68,0.08); }
.test-breakdown-card__row--correct { background: rgba(16,185,129,0.08); }
.test-breakdown-card__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--color-text-soft); }
.test-breakdown-card__exp { margin-top: var(--space-3); color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.6; }
.test-timer--warn { color: var(--color-warning); }
.test-timer--critical { color: var(--color-error); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.65; } }

.prep-resources {
  margin: var(--space-12) auto 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  scroll-margin-top: 96px;
}

.test-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto var(--space-5);
  padding: 0.55rem 0.9rem;
  max-width: 760px;
  width: fit-content;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-surface) 88%, var(--color-primary) 6%);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.2s ease;
}

.test-scroll-cue:hover {
  border-color: color-mix(in oklch, var(--color-primary) 40%, var(--color-border));
}

.test-scroll-cue:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.test-scroll-cue.is-hidden,
.test-scroll-cue[hidden] {
  display: none !important;
}

.test-scroll-cue i {
  font-size: 0.8rem;
  opacity: 0.8;
}

.prep-resources__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.prep-resources__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(118, 86, 61, 0.72);
}

.prep-resources__title {
  margin: 0;
  font-size: clamp(1.55rem, 2.3vw, 2rem);
  line-height: 1.08;
  color: #2e1f18;
}

.prep-filter-rail {
  position: relative;
  min-height: 2.8rem;
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.prep-filter-rail__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: default;
  padding: 0.3rem 0;
  touch-action: pan-y;
}

.prep-filter-rail.is-marquee .prep-filter-rail__viewport {
  cursor: grab;
}

.prep-filter-rail__viewport::-webkit-scrollbar {
  display: none;
}

.prep-filter-rail.is-dragging .prep-filter-rail__viewport {
  cursor: grabbing;
  touch-action: none;
}

.prep-filter-rail__track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: max-content;
  min-width: 100%;
}

.prep-filter-rail.is-marquee .prep-filter-rail__track {
  animation: prepRailMarquee 34s linear infinite;
  will-change: transform;
}

.prep-filter-rail.is-marquee:hover .prep-filter-rail__track,
.prep-filter-rail.is-marquee:focus-within .prep-filter-rail__track,
.prep-filter-rail.is-paused .prep-filter-rail__track,
.prep-filter-rail.is-interacting .prep-filter-rail__track {
  animation-play-state: paused;
}

.prep-filter-rail__group {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
  padding-right: 0.75rem;
  white-space: nowrap;
}

.prep-filter-rail__group--clone {
  pointer-events: none;
  user-select: none;
}
.prep-filter-rail:not(.is-marquee) .prep-filter-rail__group--clone,
.prep-filter-rail.is-reduced-motion .prep-filter-rail__group--clone {
  display: none;
}
.prep-filter-rail__group--clone .prep-filter-chip {
  cursor: default;
  pointer-events: none;
}
button.prep-filter-chip,
a.prep-card {
  cursor: pointer;
}
.prep-card {
  cursor: pointer;
}

.prep-filter-chip {
  cursor: default;
  min-height: 2.7rem;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid rgba(113, 74, 45, 0.18);
  background: rgba(255, 250, 244, 0.92);
  color: #6f513d;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.prep-filter-chip:hover,
.prep-filter-chip:focus-visible {
  border-color: rgba(113, 74, 45, 0.28);
  color: #503829;
  box-shadow: 0 8px 18px rgba(80, 56, 41, 0.06);
}

.prep-filter-chip.is-active {
  border-color: transparent;
  background: linear-gradient(180deg, #8d6342 0%, #76563d 100%);
  color: #fbf8f3;
  box-shadow: 0 10px 18px rgba(118, 86, 61, 0.14);
}

.prep-resources__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.prep-resources__empty {
  margin: 0 0 1rem;
  padding: 0.15rem 0 0.35rem;
  color: #76563d;
  font-weight: 600;
  text-align: center;
}

.prep-card {
  display: grid;
  grid-template-rows: 74% 26%;
  min-height: 280px;
  aspect-ratio: 4 / 5.1;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(113, 74, 45, 0.14);
  background: #fffaf4;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(80, 56, 41, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.prep-card:hover,
.prep-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(113, 74, 45, 0.28);
  box-shadow: 0 16px 30px rgba(80, 56, 41, 0.11);
  outline: none;
}

.prep-card:focus-visible {
  outline: 2px solid #8d6342;
  outline-offset: 3px;
}

.prep-card__cover {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #f4ebe1;
}

.prep-card__cover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transition: transform 220ms ease;
}

.prep-card:hover .prep-card__cover-image,
.prep-card:focus-visible .prep-card__cover-image {
  transform: scale(1.02);
}

.prep-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 250, 244, 0) 72%, rgba(141, 99, 66, 0.05) 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 180ms ease;
}

.prep-card:hover .prep-card__cover::after,
.prep-card:focus-visible .prep-card__cover::after {
  opacity: 1;
}

.prep-card__cover-art {
  position: absolute;
  inset: 0;
  --prep-ink: rgba(122, 89, 63, 0.2);
  --prep-accent: rgba(180, 150, 120, 0.24);
  --prep-glow: rgba(232, 216, 198, 0.82);
  background:
    radial-gradient(circle at 24% 22%, var(--prep-glow) 0%, rgba(255, 250, 244, 0) 38%),
    radial-gradient(circle at 84% 84%, rgba(255, 250, 244, 0) 0%, rgba(255, 250, 244, 0.32) 42%, rgba(255, 250, 244, 0.84) 100%);
}

.prep-card__cover-art--math {
  --prep-ink: rgba(122, 89, 63, 0.22);
  --prep-accent: rgba(176, 144, 111, 0.28);
}

.prep-card__cover-art--biology {
  --prep-ink: rgba(98, 97, 74, 0.2);
  --prep-accent: rgba(170, 160, 126, 0.26);
}

.prep-card__cover-art--ai,
.prep-card__cover-art--it {
  --prep-ink: rgba(92, 78, 66, 0.22);
  --prep-accent: rgba(165, 143, 124, 0.24);
}

.prep-card__cover-art--chemistry,
.prep-card__cover-art--astronomy {
  --prep-ink: rgba(111, 78, 58, 0.2);
  --prep-accent: rgba(192, 159, 126, 0.24);
}

.prep-card__cover-art--economics,
.prep-card__cover-art--geography,
.prep-card__cover-art--stem {
  --prep-ink: rgba(110, 84, 63, 0.2);
  --prep-accent: rgba(178, 149, 118, 0.24);
}

.prep-card__shape {
  position: absolute;
  display: block;
}

.prep-card__shape--halo {
  inset: 16% auto auto 12%;
  width: 42%;
  height: 42%;
  border-radius: 999px;
  border: 1px solid var(--prep-ink);
  opacity: 0.92;
}

.prep-card__shape--line {
  left: 24%;
  right: 18%;
  bottom: 26%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 250, 244, 0) 0%, var(--prep-ink) 20%, var(--prep-ink) 80%, rgba(255, 250, 244, 0) 100%);
  transform: rotate(-14deg);
}

.prep-card__shape--grid {
  right: 14%;
  top: 20%;
  width: 34%;
  height: 34%;
  border-radius: 18px;
  border: 1px solid rgba(113, 74, 45, 0.1);
  background-image:
    linear-gradient(var(--prep-accent) 1px, transparent 1px),
    linear-gradient(90deg, var(--prep-accent) 1px, transparent 1px);
  background-size: 12px 12px;
}

.prep-card__shape--accent {
  left: 18%;
  bottom: 16%;
  width: 46%;
  height: 28%;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 50%, var(--prep-accent) 0%, rgba(255, 250, 244, 0) 74%);
}

.prep-card__shape--dot {
  right: 22%;
  bottom: 18%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--prep-ink);
  opacity: 0.7;
}

.prep-card__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  align-self: stretch;
  padding: 16px 18px;
  border-top: 1px solid rgba(113, 74, 45, 0.12);
  color: #3c2a20;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  background: #fffaf4;
}

@media (max-width: 1100px) {
  .prep-resources__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 820px) {
  .prep-resources__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .prep-resources__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .prep-card {
    min-height: 260px;
  }
}

@keyframes prepRailMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .prep-filter-rail__track {
    animation: none !important;
    transform: none;
    will-change: auto;
  }

  .prep-filter-rail__group--clone {
    display: none;
  }

  .prep-filter-rail__viewport {
    cursor: default;
    scrollbar-width: thin;
  }

  .prep-filter-rail__viewport::-webkit-scrollbar {
    display: block;
    height: 6px;
  }

  .prep-card,
  .prep-filter-chip,
  .prep-card__cover-image,
  .prep-card__cover::after {
    transition: none;
  }

  .prep-card:hover,
  .prep-card:focus-visible {
    transform: none;
  }

  .prep-card:hover .prep-card__cover-image,
  .prep-card:focus-visible .prep-card__cover-image {
    transform: none;
  }
}

/* ── Split panel (event detail, review) ── */
.split-panel {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 20rem;
  margin: var(--space-6) 0;
}
.split-panel__left,
.split-panel__right {
  flex: 1 1 50%;
  min-width: 0;
  overflow: auto;
}
.split-panel__divider {
  flex: 0 0 10px;
  cursor: col-resize;
  background: var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: background var(--transition);
}
.split-panel__divider:hover,
.split-panel-dragging .split-panel__divider { background: var(--color-primary); }
.split-panel__handle { color: var(--color-text-muted); font-size: 0.75rem; pointer-events: none; }
@media (max-width: 767px) {
  .split-panel { flex-direction: column; }
  .split-panel__divider { display: none; }
  .split-panel__left, .split-panel__right { flex-basis: auto !important; }
}

.event-detail-split { margin-top: var(--space-8); }
.event-detail__desc { padding: var(--space-6); }
.event-detail__subh { font-size: 1rem; margin: var(--space-4) 0 var(--space-2); color: var(--color-text); }
.event-detail__prose--muted { color: var(--color-text-soft); font-style: italic; }
.event-detail__below { margin-top: var(--space-8); }

.feature-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.option-item--readonly {
  pointer-events: none;
  cursor: default;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
}

/* ── Test review page (standalone) ── */
.test-review-page { max-width: 80rem; padding-top: var(--space-8); padding-bottom: var(--space-16); }
.test-review-page__head { margin-bottom: var(--space-8); text-align: center; }
.test-review-page__back { margin-bottom: var(--space-4); }
.test-review-page__title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--space-2); }
.test-review-page__meta { color: var(--color-text-muted); font-size: 1rem; }

.review-page-split {
  min-height: 28rem;
  height: min(70vh, calc(100dvh - 14rem));
  max-height: calc(100dvh - 14rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.review-page-split.split-panel .split-panel__left,
.review-page-split.split-panel .split-panel__right {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.review-page-split__col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  padding: var(--space-6);
  overflow: hidden;
}
.review-page-split__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-divider);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  background: inherit;
}
.review-page-split__title--wrong { color: var(--color-error); }
.review-page-split__title--correct { color: var(--color-success); }
.review-page-split__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-right: var(--space-2);
  -webkit-overflow-scrolling: touch;
}

.review-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-2);
}
.review-card--wrong { border-left: 4px solid var(--color-error); }
.review-card--correct { border-left: 4px solid var(--color-success); }
.review-card__q {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: var(--space-4);
  line-height: 1.55;
  color: var(--color-text);
}
.review-card__options { display: flex; flex-direction: column; gap: var(--space-2); }
.review-card__exp {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.review-card__exp strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.review-empty { color: var(--color-text-soft); font-size: 1rem; padding: var(--space-6); text-align: center; }

.review-error-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.1);
  color: #694A36;
  font-size: 1rem;
  line-height: 1.55;
}
.review-error-banner i { font-size: 1.25rem; flex-shrink: 0; margin-top: 0.1rem; }
[data-theme="dark"] .review-error-banner { color: #fca5a5; background: rgba(239, 68, 68, 0.15); }

.page-test-review .option-item--readonly,
.page-test-review .test-mcq-option { font-size: 1.05rem; line-height: 1.55; }
.page-test-review .review-card__q { font-size: 1.12rem; line-height: 1.6; }

@media (max-width: 767px) {
  .review-page-split { border-radius: var(--radius-lg); height: auto; max-height: none; }
  .review-page-split__col { padding: var(--space-4); min-height: 16rem; }
  .review-page-split__list { max-height: 20rem; }
  .test-review-page { padding-left: var(--space-4); padding-right: var(--space-4); }
}

[data-theme="dark"] .review-card { background: var(--color-surface-offset); }
[data-theme="dark"] .review-card__exp { background: var(--color-surface-2); }
[data-theme="dark"] .review-page-split { background: var(--color-surface-2); }

.test-grade-summary {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.test-grade-summary ul { margin: var(--space-2) 0 0; padding-left: 1.25rem; color: var(--color-text-muted); }

/* ── Shared page hero ── */
.page-hero,
.mentor-hero,
.roadmap-hero,
.lb-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.1rem, 3vw, 1.75rem);
  background:
    radial-gradient(ellipse 80% 60% at 8% -10%, color-mix(in oklch, var(--color-primary) 18%, transparent), transparent 58%),
    radial-gradient(ellipse 60% 50% at 96% 0%, color-mix(in oklch, #694A36 14%, transparent), transparent 52%),
    var(--color-surface-2);
}

[data-theme="light"] .page-hero,
[data-theme="light"] .mentor-hero,
[data-theme="light"] .roadmap-hero,
[data-theme="light"] .lb-hero {
  background:
    radial-gradient(ellipse 80% 60% at 8% -10%, color-mix(in oklch, var(--color-primary) 12%, transparent), transparent 58%),
    radial-gradient(ellipse 60% 50% at 96% 0%, color-mix(in oklch, #B29378 12%, transparent), transparent 52%),
    linear-gradient(135deg, #E5DED4 0%, #F5F0E9 55%, #EFE8DE 100%);
}

[data-theme="dark"] .page-hero,
[data-theme="dark"] .mentor-hero,
[data-theme="dark"] .roadmap-hero,
[data-theme="dark"] .lb-hero {
  background:
    radial-gradient(ellipse 80% 60% at 8% -10%, color-mix(in oklch, var(--color-primary) 24%, transparent), transparent 58%),
    radial-gradient(ellipse 60% 50% at 96% 0%, color-mix(in oklch, #886142 18%, transparent), transparent 52%),
    linear-gradient(135deg, #251A16 0%, #251A16 50%, #1e1b3a 100%);
}

.page-hero__ambient,
.roadmap-hero__ambient,
.lb-hero__ambient,
.mentor-hero__ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.page-hero__ambient span,
.roadmap-hero__ambient span,
.lb-hero__ambient span,
.mentor-hero__ambient span {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 999px;
  filter: blur(56px);
  opacity: 0.16;
  animation: pageHeroFloat 9s ease-in-out infinite;
  pointer-events: none;
}

.page-hero__ambient span:nth-child(1),
.roadmap-hero__ambient span:nth-child(1),
.lb-hero__ambient span:nth-child(1),
.mentor-hero__ambient span:nth-child(1) { left: -48px; top: -72px; background: #886142; }
.page-hero__ambient span:nth-child(2),
.roadmap-hero__ambient span:nth-child(2),
.lb-hero__ambient span:nth-child(2),
.mentor-hero__ambient span:nth-child(2) { right: 18%; top: -78px; background: #B29378; animation-delay: -2.4s; }
.page-hero__ambient span:nth-child(3),
.roadmap-hero__ambient span:nth-child(3),
.lb-hero__ambient span:nth-child(3),
.mentor-hero__ambient span:nth-child(3) { right: -56px; bottom: -84px; background: #886142; animation-delay: -4.8s; }

@keyframes pageHeroFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.03); }
}

.page-hero__content,
.page-hero__head,
.roadmap-hero__content,
.roadmap-hero__actions,
.lb-hero__head,
.mentor-hero__head,
.mentor-hero__stats {
  position: relative;
  z-index: 1;
}

.page-hero__kicker,
.roadmap-hero__kicker,
.lb-kicker,
.mentor-hero__kicker {
  margin: 0 0 0.35rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--color-primary);
}

.page-hero__title,
.page-hero__head h1,
.roadmap-hero__head h1,
.lb-hero__head h1,
.mentor-hero__head h1 {
  margin: 0.25rem 0 0.5rem;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.15;
}

.page-hero__subtitle,
.page-hero__head p,
.roadmap-hero__subtitle,
.lb-hero__head p,
.mentor-hero__head p {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 65ch;
  line-height: 1.6;
}

.page-hero__icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.page-hero--center { text-align: center; }
.page-hero--center .page-hero__subtitle { margin-inline: auto; }

/* ── About / Contact pages ── */
.about-hero {
  background: var(--color-primary-gradient) !important;
  color: #fff;
  border: none;
}
.about-hero .page-hero__subtitle,
.about-hero .hero-banner__subtitle { color: rgba(255, 255, 255, 0.92); }
.about-hero .hero-banner__deco { color: #fff; opacity: 0.12; font-size: 14rem; }
.about-hero .hero-banner__avatar { width: 5.5rem; height: 5.5rem; font-size: 2.25rem; }

.about-stats-overlap {
  margin-top: calc(var(--space-8) * -1);
  position: relative;
  z-index: 1;
  padding-bottom: var(--space-10);
}
.about-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.about-mission-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.about-kpi-icon {
  margin: 0 auto var(--space-3);
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
}
.about-mission-title { font-size: 1.75rem; margin: var(--space-4) 0; }
.about-feature-card {
  border-top: 4px solid var(--color-primary);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}
.about-feature-card--green { border-top-color: var(--color-success); }
.about-feature-card--gold { border-top-color: var(--color-warning); }
.about-cta-banner {
  background: var(--color-primary-gradient);
  color: #fff;
  border-radius: var(--radius-xl);
  max-width: 1280px;
  margin: 0 auto var(--space-12);
}
.about-cta-banner__icon { font-size: 2.5rem; margin-bottom: var(--space-4); opacity: 0.9; }
.about-cta-banner__lead {
  color: rgba(255, 255, 255, 0.9);
  max-width: 32rem;
  margin: var(--space-3) auto 0;
}

.contact-hero .hero-banner__avatar { width: 5rem; height: 5rem; font-size: 2rem; }
.contact-hero .hero-banner__deco { color: #fff; opacity: 0.1; font-size: 12rem; }
.contact-page-inner { padding-top: var(--space-10); }
.contact-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.contact-why-card { padding: var(--space-4); text-align: center; }
.contact-why-card__icon {
  margin: 0 auto var(--space-3);
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.95rem;
}
.contact-why-card__desc { font-size: 0.85rem; margin-top: var(--space-2); }
.contact-form-section { padding: 0; overflow: hidden; }
.contact-form-header {
  background: var(--color-primary-gradient);
  color: #fff;
  padding: var(--space-6);
  text-align: center;
}
.contact-form-header__icon { font-size: 2rem; margin-bottom: var(--space-2); }
.contact-form-header__title { font-size: 1.25rem; margin: 0; }
.contact-form-header__lead { font-size: 0.9rem; opacity: 0.9; margin-top: var(--space-2); }
.contact-form-body { padding: var(--space-6); }
.contact-error {
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid var(--color-error);
  color: #694A36;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.contact-error--friendly {
  background: rgba(16, 185, 129, 0.12);
  border-left-color: #10b981;
  color: #065f46;
}
[data-theme="dark"] .contact-error { color: #fca5a5; }
[data-theme="dark"] .contact-error--friendly { color: #6ee7b7; }
#contact-error[hidden],
#contact-success[hidden],
#contact-partial[hidden],
#contact-telegram-link-panel[hidden],
#contact-telegram-linked-note[hidden] {
  display: none !important;
  margin: 0;
  padding: 0;
  border: none;
}
#contact-success,
#contact-partial { margin-bottom: var(--space-4); }

@media (max-width: 768px) {
  .about-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .about-mission-stats { grid-template-columns: 1fr; }
  .contact-why-grid { grid-template-columns: 1fr; }
}

.about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}
@media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; } }
.about-grid__main p { margin-bottom: var(--space-4); color: var(--color-text-muted); line-height: 1.7; }
.about-grid__aside { padding: var(--space-6); }
.about-grid__aside-title { font-size: 1.1rem; margin-bottom: var(--space-4); }
.about-contact-list { list-style: none; }
.about-contact-list li { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); color: var(--color-text-muted); }
.about-contact-list a { color: var(--color-primary); font-weight: 600; }

.ceo-block { padding: var(--space-8); margin-bottom: var(--space-8); }
.ceo-block__title { font-size: 1.25rem; margin-bottom: var(--space-6); }
.ceo-block__inner { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: flex-start; }
.ceo-block__avatar {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}
.ceo-block__name { font-size: 1.25rem; margin-bottom: var(--space-2); }
.ceo-block__name-en { font-weight: 500; color: var(--color-text-muted); font-size: 1rem; }
.ceo-block__meta { list-style: none; margin-bottom: var(--space-3); color: var(--color-text-muted); font-size: 0.9rem; }
.ceo-block__meta li { margin-bottom: var(--space-1); }
.ceo-block__bio { color: var(--color-text-muted); line-height: 1.65; max-width: 40rem; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { padding: var(--space-6); }
.contact-info__title { font-size: 1.1rem; margin-bottom: var(--space-5); }
.contact-info__list { list-style: none; }
.contact-info__list li { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.contact-info__icon { width: 2.25rem; color: var(--color-primary); text-align: center; }
.contact-form-wrap { padding: var(--space-6); }
.contact-form .lab { margin-bottom: var(--space-4); }
.contact-success {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-lg);
  color: var(--color-text);
}
.contact-success__badge {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.faq-section { margin-bottom: var(--space-12); }
.faq-section__title { margin-bottom: var(--space-6); font-size: 1.5rem; }
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  overflow: hidden;
  background: var(--color-surface);
}
.faq-item__q {
  padding: var(--space-4) var(--space-5);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  color: var(--color-text);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item[open] .faq-item__q { color: var(--color-primary); border-bottom: 1px solid var(--color-divider); }
.faq-item__a {
  padding: var(--space-4) var(--space-5);
  color: var(--color-text-muted);
  line-height: 1.65;
  animation: faq-open 0.25s ease;
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.footer-telegram-center { display: none; }
.footer-telegram-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--oz-cognac);
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid var(--oz-chestnut);
  transition: background-color var(--transition);
}
.footer-telegram-btn:hover { background: #EFE8DE; color: var(--oz-cognac); }

.admin-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.admin-table-wrap { overflow-x: auto; padding: var(--space-4); }
.admin-msg-row { cursor: pointer; }
.admin-msg-row--unread { background: rgba(136, 97, 66, 0.06); font-weight: 600; }
.admin-msg-row:hover { background: var(--color-surface-2); }

/* CHAT MODULE */
.page-chat {
  --chat-nav-height: var(--app-header-height, 4rem);
  --chat-sidebar-width: 320px;
  --chat-online: var(--color-success);
}

.page-chat .shell-main {
  padding: 0;
  max-width: none;
}

/* Friend chat inside shared app shell: fill workspace beside left sidebar */
body.page-chat .app-shell__workspace.shell-main {
  padding: var(--app-header-height) 0 0;
  min-height: 100dvh;
  height: 100dvh;
  max-width: none;
  overflow: hidden;
}

/* Navbar chat icon (used from base.html) */
.nav-chat-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}

.nav-chat-btn:hover {
  color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.chat-unread-badge {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.125rem;
  text-align: center;
}

.chat-unread-badge[hidden] {
  display: none;
}

/* Full-screen chat shell */
.chat-page {
  width: 100%;
  height: calc(100dvh - var(--chat-nav-height));
  overflow: hidden;
}

.chat-layout {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ── Left sidebar ── */
.chat-sidebar {
  width: var(--chat-sidebar-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: color-mix(in oklch, var(--color-surface) 94%, var(--color-primary) 6%);
  border-right: 1px solid var(--color-divider);
}

.chat-sidebar-search {
  padding: var(--space-3) var(--space-4);
  flex-shrink: 0;
}

.chat-search-wrap {
  position: relative;
}

.chat-search-input {
  width: 100%;
  padding: 0.58rem 0.9rem;
  border: 1px solid color-mix(in oklch, var(--color-primary) 18%, var(--color-border));
  border-radius: 12px;
  background: var(--color-surface-elevated);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.2;
  transition: border-color var(--transition), box-shadow var(--transition);
}

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

.chat-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--focus-ring), 0 10px 24px color-mix(in oklch, var(--color-primary) 18%, transparent);
}

.chat-search-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  z-index: 50;
  background: linear-gradient(160deg, color-mix(in oklch, var(--color-surface-elevated) 88%, var(--color-primary) 12%) 0%, var(--color-surface-elevated) 100%);
  border: 1px solid color-mix(in oklch, var(--color-primary) 24%, var(--color-border));
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(28, 20, 66, 0.2);
  padding: 0.45rem;
  max-height: 18rem;
  overflow-y: auto;
}

.chat-search-dropdown__results {
  display: grid;
  gap: 0.32rem;
}

.chat-search-dropdown[hidden] {
  display: none;
}

.chat-search-dropdown__empty {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-align: center;
}

.chat-search-dropdown__more {
  display: block;
  width: 100%;
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition);
}

.chat-search-dropdown__more:hover {
  background: var(--color-surface-offset);
}

.chat-search-result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0.45rem 0.58rem;
  border: 1px solid color-mix(in oklch, var(--color-primary) 14%, var(--color-border));
  border-radius: 11px;
  background: color-mix(in oklch, var(--color-surface) 92%, var(--color-primary) 8%);
  color: var(--color-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.chat-search-result:hover,
.chat-search-result:focus-visible {
  background: color-mix(in oklch, var(--color-primary) 10%, var(--color-surface-elevated));
  border-color: color-mix(in oklch, var(--color-primary) 42%, var(--color-border));
  transform: translateY(-1px);
  outline: none;
}

.chat-search-result__body {
  flex: 1;
  min-width: 0;
}

.chat-search-result__name {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: color-mix(in oklch, var(--color-text) 94%, #000 6%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-search-result__email {
  display: block;
  font-size: 0.74rem;
  color: color-mix(in oklch, var(--color-text-muted) 78%, var(--color-text) 22%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-search-result__level {
  flex-shrink: 0;
  padding: 0.14rem 0.45rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Conversation list */
.chat-conversation-list-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-conversation-list__label {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.chat-conversation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.chat-conversation-list__item {
  margin: 0;
}

.chat-conversation-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 4.5rem;
  padding: 0 var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: background 150ms ease;
}

.chat-conversation-row:hover {
  background: var(--color-surface-offset);
}

.chat-conversation-row--active {
  background: color-mix(in oklch, var(--color-primary) 10%, var(--color-surface));
}

.chat-conversation-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.chat-conversation-row__top,
.chat-conversation-row__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.chat-conversation-row__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-conversation-row__time {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.chat-conversation-row__preview {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-conversation-row__badge {
  flex-shrink: 0;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.125rem;
  text-align: center;
}

.chat-conversation-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.chat-conversation-empty__icon {
  color: var(--color-text-soft);
  margin-bottom: var(--space-4);
}

.chat-conversation-empty__title {
  margin: 0 0 var(--space-2);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

.chat-conversation-empty__sub {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Avatars */
.chat-avatar {
  position: relative;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  overflow: visible;
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.chat-avatar__img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.chat-avatar--list {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.875rem;
}

.chat-avatar--bar {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.8125rem;
}

.chat-avatar--header {
  width: 2.375rem;
  height: 2.375rem;
  font-size: 0.875rem;
}

.chat-avatar--search {
  width: 2rem;
  height: 2rem;
  font-size: 0.75rem;
}

.chat-avatar__online-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--chat-online);
  border: 2px solid var(--color-surface);
}

/* Profile bar + popup menu */
.chat-profile-bar-wrap {
  position: relative;
  flex-shrink: 0;
  border-top: 1px solid var(--color-divider);
}

.chat-profile-bar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  height: 4rem;
  padding: 0 var(--space-3);
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition);
}

.chat-profile-bar:hover {
  background: var(--color-surface-offset);
}

.chat-profile-bar__info {
  flex: 1;
  min-width: 0;
}

.chat-profile-bar__name {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-profile-bar__email {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-profile-bar__gear {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.chat-profile-menu {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: calc(100% + var(--space-2));
  z-index: 60;
  padding: var(--space-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.chat-profile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.chat-profile-menu[hidden]:not(.is-open) {
  display: none;
}

.chat-profile-menu.is-open[hidden] {
  display: block;
}

.chat-profile-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 2.25rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background var(--transition);
}

.chat-profile-menu__item:hover {
  background: var(--color-surface-offset);
}

/* ── Right column ── */
.chat-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface);
}

.chat-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 1.5rem;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      oklch(0.94 0.015 290) 0%,
      oklch(0.97 0.008 60) 100%
    );
  position: relative;
}

.chat-empty-state::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: radial-gradient(circle, oklch(0.5 0.1 290) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.chat-empty-state__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.65rem;
  max-width: 22rem;
}

.chat-empty-state__icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: color-mix(in oklch, var(--color-primary) 12%, var(--color-surface));
  border: 1px solid color-mix(in oklch, var(--color-primary) 18%, transparent);
}

.chat-empty-state__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.chat-empty-state__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.chat-empty-state__chip {
  position: relative;
  z-index: 1;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-full);
  background: oklch(0 0 0 / 0.25);
  color: var(--color-text-inverse);
  font-size: 0.875rem;
  font-weight: 500;
}

[data-theme="dark"] .chat-empty-state {
  background:
    linear-gradient(
      135deg,
      oklch(0.18 0.03 270) 0%,
      oklch(0.15 0.02 195) 100%
    );
}

[data-theme="dark"] .chat-empty-state::before {
  opacity: 0.04;
  background-image: radial-gradient(circle, oklch(0.8 0.05 290) 1px, transparent 1px);
}

/* Chat header */
.chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 3.75rem;
  padding: 0 1.25rem;
  flex-shrink: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}

.chat-header__back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.chat-header__back:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}

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

.chat-header__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-header__status {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
}

.chat-header__status-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: var(--chat-online);
}

.chat-header__status-online {
  color: var(--chat-online);
  font-weight: 500;
}

.chat-header__status-muted {
  color: var(--color-text-muted);
}

.chat-header {
  position: relative;
}

.chat-header__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.chat-header__menu-btn:hover {
  background: rgba(118, 86, 61, 0.12);
  color: var(--color-primary, #76563D);
}

.chat-header-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 12px;
  min-width: 200px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--color-border, #e2e8f0);
  background: var(--color-surface, #fff);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  z-index: 20;
}

.chat-header-menu[hidden] {
  display: none !important;
}

.chat-header-menu__item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text, #111);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.chat-header-menu__item:hover {
  background: rgba(118, 86, 61, 0.1);
}

.catalog-level-sections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.catalog-level-section__title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.catalog-level-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.catalog-level-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-muted, #B29378);
}

/* Messages area + gradient background */
.chat-messages-area {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(
      135deg,
      oklch(0.94 0.015 290) 0%,
      oklch(0.97 0.008 60) 100%
    );
}

.chat-messages-area::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: radial-gradient(circle, oklch(0.5 0.1 290) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

[data-theme="dark"] .chat-messages-area {
  background:
    linear-gradient(
      135deg,
      oklch(0.18 0.03 270) 0%,
      oklch(0.15 0.02 195) 100%
    );
}

[data-theme="dark"] .chat-messages-area::before {
  opacity: 0.04;
  background-image: radial-gradient(circle, oklch(0.8 0.05 290) 1px, transparent 1px);
}

.chat-messages-scroll {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  padding: var(--space-4) 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.chat-date-separator {
  display: flex;
  justify-content: center;
  margin: var(--space-2) 0;
}

.chat-date-separator span {
  padding: 0.25rem 0.875rem;
  border-radius: var(--radius-full);
  background: oklch(0 0 0 / 0.20);
  color: var(--color-text-inverse);
  font-size: 0.75rem;
  font-weight: 500;
}

/* Message bubbles */
.chat-message {
  display: flex;
  max-width: 65%;
}

.chat-message--received {
  margin-right: auto;
}

.chat-message--sent {
  margin-left: auto;
}

.chat-message__bubble {
  padding: 0.625rem 0.875rem;
  box-shadow: var(--shadow-sm);
  word-break: break-word;
}

.chat-message--received .chat-message__bubble {
  background: var(--color-surface);
  border-radius: 4px 18px 18px 18px;
  color: var(--color-text);
}

.chat-message--sent .chat-message__bubble {
  background: var(--color-primary);
  border-radius: 18px 4px 18px 18px;
  color: var(--color-text-inverse);
}

[data-theme="dark"] .chat-message--received .chat-message__bubble {
  background: var(--color-surface-2);
}

[data-theme="dark"] .chat-message--sent .chat-message__bubble {
  background: color-mix(in oklch, var(--color-primary) 85%, white 15%);
  color: var(--color-text-inverse);
}

[data-theme="dark"] .chat-message--sent .chat-message__text,
[data-theme="dark"] .chat-message--sent .chat-message__file-name {
  color: var(--color-text-inverse);
}

.chat-message--sent .chat-message__file-label {
  color: color-mix(in oklch, var(--color-text-inverse) 80%, transparent);
}

.chat-message__text {
  margin: 0 0 0.125rem;
  font-size: 0.875rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.chat-message__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.chat-message__time {
  font-size: 0.6875rem;
  line-height: 1.2;
}

.chat-message--received .chat-message__time {
  color: var(--color-text-muted);
}

.chat-message--sent .chat-message__time {
  color: color-mix(in oklch, var(--color-text-inverse) 78%, transparent);
}

.chat-message--sent .chat-message__text,
.chat-message--sent .chat-message__file-name {
  color: var(--color-text-inverse);
}

.chat-checkmarks {
  display: inline-flex;
  line-height: 0;
}

.chat-checkmarks__icon {
  color: color-mix(in oklch, var(--color-text-inverse) 60%, transparent);
}

.chat-checkmarks__icon--read {
  color: color-mix(in oklch, var(--color-primary-end) 80%, white 20%);
}

/* Image & file messages */
.chat-message__image-btn {
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.chat-message__image {
  display: block;
  max-width: 16.25rem;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.chat-message__file-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.625rem 0.875rem;
  margin-bottom: 0.375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-offset);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}

.chat-message--sent .chat-message__file-card {
  background: color-mix(in oklch, var(--color-primary) 80%, black 20%);
  border-color: color-mix(in oklch, var(--color-text-inverse) 20%, transparent);
  color: var(--color-text-inverse);
}

.chat-message__file-card:hover {
  border-color: var(--color-primary);
}

.chat-message__file-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.chat-message__file-meta {
  flex: 1;
  min-width: 0;
}

.chat-message__file-name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-message__file-label {
  display: block;
  font-size: 0.6875rem;
  opacity: 0.75;
}

.chat-message__file-download {
  font-size: 1rem;
  opacity: 0.7;
}

/* Typing indicator */
.chat-typing-indicator__bubble {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  min-width: 3.5rem;
}

.chat-typing-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  animation: typingBounce 0.9s ease-in-out infinite;
}

.chat-typing-dot:nth-child(1) { animation-delay: 0s; }
.chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }

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

.chat-typing-indicator[hidden] {
  display: none;
}

/* Input area */
.chat-input-wrap {
  position: sticky;
  bottom: 0;
  z-index: 6;
  flex-shrink: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.admin-blocked-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #fef2f2;
  border-top: 3px solid #694A36;
  color: #991b1b;
  font-size: 14px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.admin-blocked-banner[hidden] {
  display: none !important;
}

.admin-blocked-banner__icon {
  font-size: 24px;
  flex-shrink: 0;
}

.admin-blocked-banner__text {
  flex: 1;
  min-width: 200px;
}

.admin-blocked-banner__text strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: #7f1d1d;
}

.admin-blocked-banner__text p {
  margin: 0;
  color: #991b1b;
}

.admin-blocked-banner__btn {
  display: inline-block;
  padding: 8px 18px;
  background: #694A36;
  color: #ffffff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: background 0.2s;
}

.admin-blocked-banner__btn:hover {
  background: #3C2A20;
  color: #ffffff;
}

[data-theme="dark"] .admin-blocked-banner {
  background: #2d1515;
  border-top-color: #694A36;
  color: #fca5a5;
}

[data-theme="dark"] .admin-blocked-banner__text strong {
  color: #fca5a5;
}

[data-theme="dark"] .admin-blocked-banner__text p {
  color: #f87171;
}

.chat-main--admin-blocked .chat-input-wrap,
.chat-main--admin-blocked .chat-empty-state,
.chat-main--admin-blocked .chat-header,
.chat-main--admin-blocked .chat-messages-area {
  display: none !important;
}

.chat-file-preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) var(--space-4) 0;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  font-size: 0.75rem;
  color: var(--color-text);
}

.chat-file-preview[hidden] {
  display: none;
}

.chat-file-preview__name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-file-preview__remove {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}

.chat-attach-menu {
  position: absolute;
  left: var(--space-4);
  bottom: calc(100% + var(--space-2));
  z-index: 40;
  min-width: 11rem;
  padding: var(--space-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.chat-attach-menu[hidden] {
  display: none;
}

.chat-attach-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: 2.25rem;
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}

.chat-attach-menu__item:hover {
  background: var(--color-surface-offset);
}

.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.625rem;
  min-height: 3.75rem;
  padding: var(--space-2) var(--space-4);
}

.chat-input-bar__attach,
.chat-input-bar__send,
.chat-input-bar__ai {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 0 0.2rem;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, opacity 150ms ease;
}

.chat-input-bar__ai {
  width: auto;
  min-width: 2.25rem;
  padding: 0 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  background: color-mix(in oklch, var(--color-primary) 12%, var(--color-surface-offset));
  border: 1px solid color-mix(in oklch, var(--color-primary) 22%, transparent);
}

.chat-input-bar__ai:hover {
  background: color-mix(in oklch, var(--color-primary) 20%, var(--color-surface));
  color: var(--color-primary-hover);
}

/* Hide legacy floating AI FAB on chat pages (composer button replaces it). */
body.page-chat .ai-floating-button,
body.page-chat #aiAssistantFab {
  display: none !important;
}

.chat-input-bar__attach {
  background: transparent;
  color: var(--color-text-muted);
}

.chat-input-bar__attach:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}

.chat-input-bar__textarea {
  flex: 1;
  min-width: 0;
  min-height: 2.375rem;
  max-height: calc(1.4em * 8 + 1.125rem);
  padding: 0.5625rem 1rem;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  background: var(--color-surface-offset);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.4;
  resize: none;
  overflow-y: hidden;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--color-primary) 35%, transparent) transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.chat-input-bar__textarea::-webkit-scrollbar {
  width: 5px;
}
.chat-input-bar__textarea::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
.chat-input-bar__textarea::-webkit-scrollbar-track {
  background: transparent;
}
.chat-input-bar__textarea::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--color-primary) 35%, transparent);
  border-radius: 999px;
}

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

.chat-input-bar__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.chat-input-bar__send {
  background: var(--color-surface-offset);
  color: var(--color-text-soft);
}

.chat-input-bar__send:not(:disabled) {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.chat-input-bar__send:not(:disabled):hover {
  background: var(--color-primary-hover);
}

.chat-input-bar__send:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Lightbox */
.chat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-lightbox[hidden] {
  display: none;
}

.chat-lightbox__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: oklch(0 0 0 / 0.75);
  cursor: pointer;
}

.chat-lightbox__img {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 56rem);
  max-height: 88vh;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ── Mobile responsive (Step 8 spec) ── */
@media (max-width: 768px) {
  .chat-sidebar,
  .chat-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 300ms ease;
  }

  .chat-sidebar {
    z-index: 2;
    transform: translateX(0);
  }

  .chat-main {
    z-index: 3;
    transform: translateX(100%);
  }

  .chat-layout--conversation-open .chat-sidebar {
    transform: translateX(-100%);
  }

  .chat-layout--conversation-open .chat-main {
    transform: translateX(0);
  }

  .chat-header__back {
    display: flex;
  }

  .chat-layout {
    position: relative;
  }
}

/* CHAT SIDEBAR — persistent dock on all logged-in pages (LEFT side) */
:root,
[data-theme="light"] {
  --chat-sidebar-width: 280px;
  --chat-dock-profile-height: 6.5rem;
}

.chat-sidebar-dock {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  width: var(--chat-sidebar-width);
  height: 100vh;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: color-mix(in oklch, var(--color-surface) 94%, var(--color-primary) 6%);
  border-right: 1px solid var(--color-divider);
  border-left: none;
  box-shadow: 4px 0 18px rgba(80, 56, 41, 0.08);
  transition: height 200ms ease, top 200ms ease;
}

.chat-sidebar-dock--inline {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  height: 100%;
  width: var(--chat-sidebar-width);
  box-shadow: none;
  border-left: none;
}

.chat-sidebar-dock.is-collapsed {
  top: auto;
  bottom: 0;
  height: auto;
}

.chat-sidebar-dock__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: flex 200ms ease, max-height 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.chat-sidebar-dock__search {
  flex-shrink: 0;
  padding: 0.62rem 0.72rem 0.66rem;
  border-bottom: 1px solid var(--color-divider);
  background: color-mix(in oklch, var(--color-surface) 92%, var(--color-primary) 8%);
  z-index: 2;
}

.chat-sidebar-dock__search .chat-search-wrap {
  width: 100%;
  max-width: 100%;
}

.chat-sidebar-dock.is-collapsed .chat-sidebar-dock__body {
  flex: 0 0 0;
  max-height: 0;
  opacity: 0;
  transform: translateY(-0.5rem);
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.chat-sidebar-dock__toggle,
.chat-sidebar-dock__expand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition);
}

.chat-sidebar-dock__toggle {
  border-bottom: 1px solid var(--color-divider);
}

.chat-sidebar-dock__expand {
  border-bottom: 1px solid var(--color-divider);
}

.chat-sidebar-dock__expand[hidden] {
  display: none;
}

.chat-sidebar-dock__toggle:hover,
.chat-sidebar-dock__expand:hover {
  background: var(--color-surface-offset);
}

.chat-sidebar-dock__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 200ms ease;
}

.chat-sidebar-dock__label {
  flex: 1;
  min-width: 0;
  color: var(--color-text-muted);
}

.chat-sidebar-dock__list-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.chat-sidebar-dock__list {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: auto;
}

.chat-sidebar-dock__list .chat-conversation-row {
  height: 4rem;
  padding: 0 var(--space-3);
}

.chat-sidebar-dock__list .chat-avatar--list {
  width: 2rem;
  height: 2rem;
  font-size: 0.75rem;
}

.chat-sidebar-dock__empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.chat-sidebar-dock__empty p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.chat-sidebar-dock__empty[hidden] {
  display: none;
}

.chat-sidebar-dock__profile-wrap {
  position: relative;
  flex-shrink: 0;
  margin-top: auto;
  border-top: 1px solid var(--color-divider);
  background: color-mix(in oklch, var(--color-surface) 96%, var(--color-primary) 4%);
}

.chat-sidebar-dock__profile {
  width: 100%;
}

.chat-sidebar-dock__profile.chat-profile-bar {
  min-height: var(--chat-dock-profile-height);
  height: var(--chat-dock-profile-height);
  padding: var(--space-4) var(--space-5);
  gap: var(--space-4);
}

.chat-sidebar-dock .chat-avatar--bar {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.125rem;
}

.chat-sidebar-dock .chat-profile-bar__name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.chat-sidebar-dock .chat-profile-bar__email {
  font-size: 0.875rem;
  margin-top: 0.125rem;
  line-height: 1.3;
}

.chat-sidebar-dock .chat-profile-bar__gear {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.chat-sidebar-dock__profile-wrap .chat-profile-menu {
  left: var(--space-2);
  right: var(--space-2);
  bottom: calc(100% + var(--space-2));
}

/* /chat page — message panel only (list lives in sidebar) */
.page-chat .shell-foot,
.page-admin-support .shell-foot {
  display: none;
}

.page-chat .chat-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: calc(100dvh - var(--chat-nav-height));
  height: calc(100dvh - var(--chat-nav-height));
  overflow: hidden;
}

@media (max-width: 767px) {
  body.page-chat .app-shell__workspace.shell-main {
    padding: var(--app-header-height) 0 0;
    height: 100dvh;
  }
}

.page-chat .chat-page-search {
  display: none;
}

[data-theme="dark"] .chat-search-dropdown {
  background: linear-gradient(160deg, color-mix(in oklch, var(--color-surface-elevated) 90%, #0b1025 10%) 0%, color-mix(in oklch, var(--color-surface) 88%, #251A16 12%) 100%);
  border-color: color-mix(in oklch, var(--color-primary) 34%, var(--color-border));
}

[data-theme="dark"] .chat-search-result {
  color: #eef3ff;
  background: color-mix(in oklch, var(--color-surface) 80%, #3C2A20 20%);
  border-color: color-mix(in oklch, var(--color-primary) 25%, #503829 75%);
}

[data-theme="dark"] .chat-search-result:hover,
[data-theme="dark"] .chat-search-result:focus-visible {
  background: color-mix(in oklch, var(--color-primary) 22%, #3C2A20 78%);
  border-color: color-mix(in oklch, var(--color-primary) 58%, #503829 42%);
}

[data-theme="dark"] .chat-search-result__name {
  color: #f7f9ff;
}

[data-theme="dark"] .chat-search-result__email {
  color: #C8B6A1;
}

[data-theme="dark"] .chat-sidebar-dock__search {
  background: color-mix(in oklch, var(--color-surface) 90%, #251A16 10%);
}

.page-chat .chat-layout--single {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--chat-sidebar-width, 320px) 6px minmax(0, 1fr);
  overflow: hidden;
}

.chat-split-divider {
  width: 6px;
  margin: 0 -1px;
  cursor: col-resize;
  position: relative;
  z-index: 5;
  touch-action: none;
  background: transparent;
  border: 0;
  padding: 0;
  align-self: stretch;
  user-select: none;
}

.chat-split-divider::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-primary) 40%, transparent);
  opacity: 0;
  transition: opacity 180ms ease;
}

.chat-split-divider:hover::after,
.chat-split-divider:focus-visible::after,
.chat-split-divider.is-dragging::after {
  opacity: 1;
}

.chat-split-divider:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

body.chat-split-dragging {
  cursor: col-resize;
  user-select: none;
}

.page-chat .chat-layout--single .chat-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.page-chat .chat-header__back {
  display: none;
}

@media (max-width: 768px) {
  .chat-sidebar-dock--inline {
    display: none;
  }

  .chat-split-divider {
    display: none !important;
  }

  .page-chat .chat-header__back {
    display: flex;
  }

  .page-chat .chat-layout--single {
    grid-template-columns: minmax(0, 1fr);
  }
}

[data-theme="dark"] .chat-sidebar-dock {
  background: color-mix(in oklch, var(--color-surface) 96%, var(--color-primary) 4%);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .chat-sidebar-dock__profile-wrap {
  background: color-mix(in oklch, var(--color-surface) 98%, var(--color-primary) 2%);
}

[data-theme="dark"] .share-event-modal__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

[data-theme="dark"] .share-event-modal__recent-chip {
  background: var(--color-surface-2);
}

[data-theme="dark"] .ev-share-btn {
  background: color-mix(in oklch, var(--color-surface) 90%, transparent);
}

[data-theme="dark"] .ev-share-btn:hover {
  background: var(--color-surface-2);
}

/* Profile social + share event (social layer) */
.friends-count-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.friends-count-row i {
  font-size: 1rem;
  color: var(--color-primary);
}

.profile-social-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.profile-friends-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklch, var(--color-success) 15%, var(--color-surface));
  color: var(--color-success);
  font-size: 0.8125rem;
  font-weight: 700;
  border: 1px solid color-mix(in oklch, var(--color-success) 35%, transparent);
}

.ev-card-wrap {
  position: relative;
}

.ev-share-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: color-mix(in oklch, var(--color-surface) l c h / 0.9);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.ev-share-btn:hover {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.event-detail__hero--shareable {
  position: relative;
}

.event-detail__hero--shareable > .ev-share-btn {
  top: 0;
  right: 0;
}

.share-event-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.share-event-modal[hidden] {
  display: none;
}

.share-event-modal__overlay {
  position: absolute;
  inset: 0;
  background: oklch(0 0 0 / 0.5);
  border: none;
  cursor: pointer;
}

/* === Dashboard / Roadmap (Ozmun AI) === */
.dashboard-wrap,
.roadmap-wrap {
  display: grid;
  gap: var(--space-6);
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}

.dashboard-stats {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.dashboard-stat {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.dashboard-stat__value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-text);
}

.dashboard-stat__label {
  font-size: 0.86rem;
  color: var(--color-text-muted);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.dashboard-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.dashboard-card__head {
  padding: var(--space-5) var(--space-5) 0;
}

.dashboard-card__title {
  font-size: 1.1rem;
}

.dashboard-card__meta {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.dashboard-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.dashboard-line {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}

.dashboard-line:last-child {
  border-bottom: 0;
}

.dashboard-line__title {
  color: var(--color-text);
  font-weight: 700;
}

.dashboard-line__meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.dashboard-progress {
  margin-top: var(--space-2);
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--color-surface-offset);
  overflow: hidden;
}

.dashboard-progress > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary-gradient);
}

.dashboard-subtitle {
  font-size: 0.95rem;
  margin-bottom: var(--space-2);
}

.dashboard-reco-group + .dashboard-reco-group {
  margin-top: var(--space-4);
}

.dashboard-empty {
  /* inherits .empty-state */
}

@media (max-width: 980px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.share-event-modal__card {
  position: relative;
  z-index: 1;
  width: min(100%, 26.25rem);
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.75rem;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.share-event-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
}

.share-event-modal__title {
  margin: 0 0 var(--space-3);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
}

.share-event-modal__event-title {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.share-event-modal__event-date {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-soft);
}

.share-event-modal__divider {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin: var(--space-5) 0;
}

.share-event-modal__section-title {
  margin: 0 0 var(--space-3);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
}

.share-event-modal__search-wrap {
  position: relative;
}

.share-event-modal__dropdown {
  position: absolute;
  left: 0;
  right: 0;
}

.share-event-modal__result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.share-event-modal__result-body {
  flex: 1;
  min-width: 0;
}

.share-event-modal__send-btn--done {
  background: var(--color-success) !important;
  border-color: var(--color-success) !important;
}

.share-event-modal__recent {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.share-event-modal__recent-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 4.5rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-offset);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.share-event-modal__recent-chip:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.share-event-modal__recent-name {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  max-width: 4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-event-modal__toast {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-success) 12%, var(--color-surface));
  color: var(--color-success);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
}

.share-event-modal__toast[hidden] {
  display: none;
}

.share-event-modal__external {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.share-event-modal__ext-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface-offset);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.share-event-modal__ext-icon:hover {
  background: var(--color-surface-2);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.share-event-modal__ext-icon img {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}

.share-event-modal__ext-icon--copy.is-copied {
  border-color: var(--color-success);
  color: var(--color-success);
}

.share-event-modal__ext-icon--copy .share-event-modal__check-icon {
  display: none;
}

.share-event-modal__ext-icon--copy.is-copied .share-event-modal__copy-icon {
  display: none;
}

.share-event-modal__ext-icon--copy.is-copied .share-event-modal__check-icon {
  display: block;
}

[data-theme="dark"] .share-event-modal__ext-icon {
  background: var(--color-surface-2);
}

[data-theme="dark"] .share-event-modal__ext-icon img {
  filter: brightness(1.08);
}

.footer-telegram-btn--muted {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  font-weight: 700;
  opacity: 0.85;
}

.contact-status {
  background: rgba(16, 185, 129, 0.12);
  border-left: 3px solid var(--color-success);
  color: var(--color-success);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-base, 1rem);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.contact-success--partial.contact-status {
  background: rgba(245, 158, 11, 0.12);
  border-left-color: var(--color-warning);
  color: var(--color-warning);
}

[data-theme="dark"] .contact-status {
  color: #C8B6A1;
}

[data-theme="dark"] .contact-success--partial.contact-status {
  color: #fcd34d;
}

[data-theme="dark"] #contact-error {
  color: #fca5a5;
}

.share-event-modal__section-title,
.share-event-modal__event-title {
  color: var(--color-text);
}

.share-event-modal__event-date {
  color: var(--color-text-muted);
}

.profile-social-actions__msg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* SUPPORT MODULE */
.admin-support-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.admin-support-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: var(--space-4);
  min-height: 60vh;
}

.admin-support-list {
  padding: 0;
  overflow: hidden;
}

.admin-support-threads {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
}

.admin-support-thread {
  display: block;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
}

.admin-support-thread:hover,
.admin-support-thread.is-active {
  background: color-mix(in oklch, var(--color-primary) 8%, var(--color-surface));
}

.admin-support-thread--pending {
  border-left: 3px solid var(--color-warning);
}

.admin-support-thread__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 0.875rem;
}

.admin-support-thread__preview {
  margin: var(--space-2) 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-support-panel {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
}

.admin-support-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-support-msg {
  max-width: 85%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
}

.admin-support-msg--admin {
  align-self: flex-end;
  background: color-mix(in oklch, var(--color-primary) 10%, var(--color-surface));
}

.admin-support-msg__head {
  display: flex;
  gap: var(--space-2);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.admin-support-msg__delivery {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.admin-support-reply {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4);
}

.admin-support-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
}

.admin-support-badge--contact_form { background: color-mix(in oklch, var(--color-primary) 12%, transparent); }
.admin-support-badge--telegram_bot { background: color-mix(in oklch, #886142 15%, transparent); }

.telegram-link-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-align: center;
  padding: var(--space-4);
  margin: var(--space-4) 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
  border: 1px dashed var(--color-border);
}

.telegram-link-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.telegram-link-modal[hidden] {
  display: none;
}

.telegram-link-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.telegram-link-modal__card {
  position: relative;
  width: min(420px, 100%);
  padding: var(--space-6);
  z-index: 1;
}

.telegram-link-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text-muted);
}

.contact-telegram-link {
  margin-top: var(--space-4);
  padding: var(--space-5);
  text-align: center;
}

.contact-telegram-opt {
  margin: var(--space-3) 0;
}

@media (max-width: 768px) {
  .admin-support-layout,
  .admin-support-layout--thread {
    grid-template-columns: 1fr;
  }
  .admin-support-list {
    max-height: 220px;
  }
}

[data-theme="dark"] .admin-support-thread.is-active {
  background: color-mix(in oklch, var(--color-primary) 15%, var(--color-surface));
}

/* LMS + Mentor portal */
.lms-wrap,
.mentor-wrap {
  display: grid;
  gap: var(--space-5);
}

.mentor-hero {
  margin-bottom: var(--space-5);
  display: grid;
  gap: var(--space-4);
  box-shadow: 0 28px 55px color-mix(in oklch, var(--color-primary) 16%, transparent);
}

.mentor-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

.mentor-hero-stat {
  border: 1px solid color-mix(in oklch, var(--color-primary) 22%, var(--color-border));
  border-radius: 14px;
  padding: 0.62rem 0.72rem;
  background: color-mix(in oklch, var(--color-surface-elevated) 86%, white 14%);
}

.mentor-hero-stat span {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.mentor-hero-stat strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 1rem;
}

.lms-hero-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.lms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.lms-course-card,
.lesson-card,
.mentor-course-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--color-surface-elevated);
}

.lms-course-card__meta,
.course-hero__meta {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.lms-course-card__title {
  margin: var(--space-2) 0;
}

.lms-course-card__summary {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
}

.lms-course-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.favorites-wrap {
  display: grid;
  gap: var(--space-5);
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-4);
}

.favorite-card {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 0.95rem;
  background:
    radial-gradient(circle at 100% -10%, color-mix(in oklch, var(--color-primary) 18%, transparent), transparent 45%),
    var(--color-surface-elevated);
}

.favorite-card__meta {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.favorite-card__title {
  margin: 0.45rem 0 0.4rem;
}

.favorite-card__desc {
  margin: 0 0 0.8rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.favorite-card__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.favorites-suggestions {
  margin-top: var(--space-4);
}

.favorites-suggestions__title {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.favorites-suggestions__grid {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.favorites-suggestion-chip {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.36rem 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-surface);
}

.favorites-suggestion-chip:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.leader-row,
.cert-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
}

.cert-grid {
  display: grid;
  gap: 0.75rem;
}

.cert-card {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% -12%, color-mix(in oklch, var(--color-primary) 24%, transparent), transparent 42%),
    linear-gradient(130deg, color-mix(in oklch, var(--color-primary) 7%, var(--color-surface-elevated)) 0%, var(--color-surface-elevated) 90%);
  padding: 0.72rem 0.78rem;
  border-bottom: 1px solid var(--color-border);
}

.cert-card__medal {
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.06rem;
  background: color-mix(in oklch, var(--color-primary) 18%, var(--color-surface));
  border: 1px solid color-mix(in oklch, var(--color-primary) 30%, var(--color-border));
  box-shadow: 0 8px 18px color-mix(in oklch, var(--color-primary) 16%, transparent);
}

.cert-card__content {
  min-width: 0;
}

.cert-card__title {
  display: block;
  line-height: 1.25;
  font-size: 0.94rem;
}

.cert-card__code {
  margin: 0.18rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.76rem;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cert-pdf-btn--compact {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.6rem;
  border-radius: 9px;
  font-size: 0.75rem;
  min-height: 2rem;
  letter-spacing: 0.01em;
}

.cert-pdf-btn--compact i {
  color: #3C2A20;
  font-size: 0.84rem;
}

.leaderboard-wrap {
  display: grid;
  gap: var(--stack-gap-section);
  margin-top: var(--stack-gap-section);
}

.page-stack,
.stack-cards {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-card);
}

.page-stack--sections,
.stack-sections {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-section);
}

.lms-course-grid,
.courses-grid {
  gap: var(--stack-gap-card);
}

.lb-podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}

.lb-podium-card {
  position: relative;
  border-radius: 18px;
  padding: 1rem 1rem 1.1rem;
  border: 1px solid var(--color-border);
  background:
    radial-gradient(circle at 85% -10%, color-mix(in oklch, var(--color-primary) 25%, transparent), transparent 45%),
    var(--color-surface-elevated);
  overflow: hidden;
}

.lb-podium-card__badge {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 1.2rem;
}

.lb-podium-card h3 {
  margin: 0.2rem 0 0.35rem;
}

.lb-podium-card p {
  margin: 0;
  font-weight: 700;
  font-size: 1.2rem;
}

.lb-podium-card__meta {
  margin-top: 0.65rem;
  display: grid;
  gap: 0.25rem;
  color: var(--color-text-muted);
  font-size: 0.86rem;
}

.lb-rank-1 {
  border-color: color-mix(in oklch, #9D7353 55%, var(--color-border));
}

.lb-rank-2 {
  border-color: color-mix(in oklch, #B29378 55%, var(--color-border));
}

.lb-rank-3 {
  border-color: color-mix(in oklch, #fb7185 45%, var(--color-border));
}

.lb-table-wrap {
  overflow: auto;
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.lb-table th,
.lb-table td {
  padding: 0.65rem 0.7rem;
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
}

.lb-table thead th {
  color: var(--color-text-muted);
  font-size: 0.86rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.course-actions {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.course-progress-badge {
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  padding: 0.35rem 0.85rem;
  color: var(--color-text-muted);
}

.lesson-card__head,
.mentor-course-card header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: center;
}

.lesson-card.is-active {
  border-color: color-mix(in oklch, var(--color-primary) 65%, var(--color-border));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary) 18%, transparent);
}

.lesson-status {
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-primary) 16%, transparent);
  padding: 0.2rem 0.65rem;
  font-size: 0.8rem;
}

.lesson-task-checklist {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-offset);
  padding: 0.65rem 0.75rem;
  display: grid;
  gap: 0.55rem;
}

.lesson-task-checklist--detail {
  margin-top: 0.2rem;
}

.lesson-task-checklist__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.84rem;
  color: var(--color-text-muted);
}

.lesson-task-checklist__items {
  display: grid;
  gap: 0.45rem;
}

.lesson-task {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.5rem 0.55rem;
  background: var(--color-surface-elevated);
}

.lesson-task input[type="checkbox"] {
  margin-top: 0.12rem;
  accent-color: var(--color-primary);
}

.lesson-task span {
  display: grid;
  gap: 0.18rem;
}

.lesson-task b {
  font-size: 0.92rem;
}

.lesson-task small {
  color: var(--color-text-muted);
  font-size: 0.83rem;
}

.lesson-task em {
  font-style: normal;
  color: var(--color-text-muted);
  font-size: 0.76rem;
}

.lesson-task a {
  font-size: 0.78rem;
  text-decoration: none;
}

.lesson-task.is-done {
  border-color: color-mix(in oklch, var(--color-success) 44%, var(--color-border));
  background: color-mix(in oklch, var(--color-success) 8%, var(--color-surface-elevated));
}

.lesson-completion-hint {
  margin: 0.6rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.84rem;
}

.lesson-completion-hint--done {
  color: var(--color-success);
}

.lesson-quiz {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-offset);
  overflow: hidden;
}

.lesson-quiz summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  cursor: pointer;
  padding: 0.72rem 0.9rem;
  font-weight: 700;
  list-style: none;
}

.lesson-quiz summary::-webkit-details-marker {
  display: none;
}

.lesson-quiz__meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.lesson-quiz__form {
  display: grid;
  gap: var(--space-3);
  margin-top: 0;
  padding: 0 0.9rem 0.9rem;
}

.quiz-question {
  display: grid;
  gap: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.7rem;
  background: var(--color-surface);
}

.quiz-question legend {
  margin-bottom: 0.2rem;
}

.quiz-question__index {
  display: inline-flex;
  margin-right: 0.45rem;
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.quiz-question__text {
  font-weight: 600;
}

.quiz-options-grid {
  display: grid;
  gap: 0.45rem;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 0.48rem 0.55rem;
  background: var(--color-surface-elevated);
}

.quiz-option:has(input:checked) {
  border-color: color-mix(in oklch, var(--color-primary) 65%, var(--color-border));
  background: color-mix(in oklch, var(--color-primary) 11%, var(--color-surface-elevated));
}

.quiz-option input[type="radio"] {
  accent-color: var(--color-primary);
}

.lesson-quiz__actions {
  display: flex;
  justify-content: flex-end;
}

.quiz-result {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0.8rem;
  background: var(--color-surface-offset);
}

.quiz-result--pass {
  border-color: color-mix(in oklch, var(--color-success) 45%, var(--color-border));
}

.quiz-result--fail,
.quiz-result--warn {
  border-color: color-mix(in oklch, #694A36 45%, var(--color-border));
}

.quiz-result__top {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: baseline;
}

.quiz-result__details {
  margin: 0.8rem 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.quiz-result__detail {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.58rem 0.65rem;
  background: var(--color-surface);
}

.quiz-result__detail.is-correct {
  border-color: color-mix(in oklch, var(--color-success) 50%, var(--color-border));
}

.quiz-result__detail.is-wrong {
  border-color: color-mix(in oklch, #694A36 50%, var(--color-border));
}

.quiz-result__detail-head {
  display: flex;
  gap: 0.45rem;
  align-items: baseline;
}

.quiz-result__detail p {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
}

.quiz-result__ok {
  color: var(--color-success);
  font-weight: 600;
}

.quiz-result__bad {
  color: #3C2A20;
}

.mentor-form {
  display: grid;
  gap: var(--space-3);
}

.mentor-wrap .dashboard-card {
  border-radius: 18px;
  border-color: color-mix(in oklch, var(--color-primary) 15%, var(--color-border));
  background:
    radial-gradient(circle at 100% -10%, color-mix(in oklch, var(--color-primary) 12%, transparent), transparent 45%),
    var(--color-surface-elevated);
}

.mentor-wrap .dashboard-card__head {
  border-bottom: 1px solid color-mix(in oklch, var(--color-primary) 16%, var(--color-divider));
}

.mentor-panel {
  position: relative;
  overflow: hidden;
}

.mentor-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, color-mix(in oklch, var(--color-primary) 70%, #B29378), transparent 86%);
}

.mentor-panel__head {
  padding-top: var(--space-4);
}

.mentor-panel__title-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}

.mentor-panel__icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  background: color-mix(in oklch, var(--color-primary) 16%, var(--color-surface));
  border: 1px solid color-mix(in oklch, var(--color-primary) 30%, var(--color-border));
  box-shadow: 0 10px 22px color-mix(in oklch, var(--color-primary) 16%, transparent);
}

.mentor-panel__subtitle {
  margin: 0.25rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.mentor-panel--course::before {
  background: linear-gradient(90deg, color-mix(in oklch, #76563D 72%, #B29378), transparent 86%);
}

.mentor-panel--lesson::before {
  background: linear-gradient(90deg, color-mix(in oklch, #9D7353 78%, #B29378), transparent 86%);
}

.mentor-panel--quiz::before {
  background: linear-gradient(90deg, color-mix(in oklch, #9D7353 74%, #9D7353), transparent 86%);
}

.mentor-panel--library::before {
  background: linear-gradient(90deg, color-mix(in oklch, #886142 66%, #B29378), transparent 86%);
}

.mentor-form__row {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.mentor-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.mentor-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mentor-materials {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-offset);
  padding: var(--space-3);
  display: grid;
  gap: var(--space-3);
}

.mentor-materials__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.mentor-materials__head h3 {
  margin: 0;
  font-size: 1rem;
}

.mentor-materials__head .button {
  border-color: color-mix(in oklch, var(--color-primary) 32%, var(--color-border));
  background: color-mix(in oklch, var(--color-primary) 8%, var(--color-surface));
}

.mentor-materials__head .button:hover {
  border-color: var(--color-primary);
  background: color-mix(in oklch, var(--color-primary) 16%, var(--color-surface));
}

.mentor-materials__list {
  display: grid;
  gap: var(--space-2);
}

.mentor-material-row,
.mentor-quiz-question-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-surface-elevated);
  display: grid;
  gap: var(--space-2);
}

.mentor-task-row {
  border-style: dashed;
}

.mentor-form .input,
.mentor-form .textarea {
  border-color: color-mix(in oklch, var(--color-primary) 14%, var(--color-border));
}

.mentor-form .input:focus,
.mentor-form .textarea:focus {
  border-color: color-mix(in oklch, var(--color-primary) 55%, var(--color-border));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 22%, transparent);
}

.mentor-form textarea[name="content_markdown"],
.mentor-form textarea[name="practical_task"],
.mentor-form textarea[name="homework_text"] {
  min-height: 8.5rem;
}

.page-mentor .mentor-wrap {
  gap: clamp(1rem, 2.6vw, 1.4rem);
}

.page-mentor .dashboard-grid {
  gap: clamp(0.9rem, 2.4vw, 1.3rem);
  align-items: start;
}

.page-mentor .mentor-panel {
  border-radius: 20px;
  box-shadow:
    0 20px 40px color-mix(in oklch, var(--color-primary) 16%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 30%, transparent);
}

.page-mentor .mentor-panel__head {
  padding-top: var(--space-5);
}

.page-mentor .mentor-panel__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 13px;
}

.page-mentor .mentor-panel__subtitle {
  font-size: 0.9rem;
  line-height: 1.45;
}

.page-mentor .mentor-form {
  gap: 0.72rem;
}

.page-mentor .mentor-form .input,
.page-mentor .mentor-form .textarea,
.page-mentor .mentor-form select.input {
  width: 100%;
  min-height: 2.65rem;
  border-radius: 12px;
  border: 1px solid color-mix(in oklch, var(--color-primary) 20%, var(--color-border));
  background: color-mix(in oklch, var(--color-surface) 88%, var(--color-primary) 12%);
  color: var(--color-text);
  padding: 0.58rem 0.74rem;
  font-size: 0.93rem;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.page-mentor .mentor-form .textarea {
  min-height: 6.1rem;
  resize: vertical;
}

.page-mentor .mentor-form .input::placeholder,
.page-mentor .mentor-form .textarea::placeholder {
  color: color-mix(in oklch, var(--color-text-muted) 88%, transparent);
}

.page-mentor .mentor-form .input:focus,
.page-mentor .mentor-form .textarea:focus,
.page-mentor .mentor-form select.input:focus {
  border-color: color-mix(in oklch, var(--color-primary) 68%, var(--color-border));
  background: color-mix(in oklch, var(--color-surface) 92%, var(--color-primary) 8%);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 24%, transparent);
}

.page-mentor .mentor-form .lab {
  margin-bottom: 0;
}

.page-mentor .mentor-form .lab .lab__t {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--color-text-muted) 82%, var(--color-primary) 18%);
}

.page-mentor .mentor-checkbox {
  border: 1px solid color-mix(in oklch, var(--color-primary) 20%, var(--color-border));
  border-radius: 11px;
  padding: 0.48rem 0.6rem;
  background: color-mix(in oklch, var(--color-surface) 90%, var(--color-primary) 10%);
}

.page-mentor .mentor-checkbox input[type="checkbox"] {
  accent-color: color-mix(in oklch, var(--color-primary) 88%, #694A36);
}

.page-mentor .mentor-form__actions {
  margin-top: 0.3rem;
}

.page-mentor .mentor-form__actions .button,
.page-mentor .mentor-form__submit {
  min-height: 2.7rem;
  border-radius: 999px;
  font-weight: 700;
}

.page-mentor .mentor-form__actions .button--primary,
.page-mentor .mentor-form__submit {
  flex: 1 1 220px;
  box-shadow: 0 14px 28px color-mix(in oklch, var(--color-primary) 25%, transparent);
}

.page-mentor .mentor-form__actions .button--secondary {
  border-color: color-mix(in oklch, var(--color-primary) 34%, var(--color-border));
}

.page-mentor .mentor-materials {
  border-radius: 14px;
  border: 1px solid color-mix(in oklch, var(--color-primary) 22%, var(--color-border));
  background:
    radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--color-primary) 16%, transparent), transparent 38%),
    color-mix(in oklch, var(--color-surface-offset) 92%, var(--color-primary) 8%);
  padding: 0.8rem;
}

.page-mentor .mentor-material-row,
.page-mentor .mentor-quiz-question-row {
  border-radius: 12px;
  border-color: color-mix(in oklch, var(--color-primary) 26%, var(--color-border));
  background: color-mix(in oklch, var(--color-surface) 92%, var(--color-primary) 8%);
}

[data-theme="dark"] .page-mentor .mentor-form .input,
[data-theme="dark"] .page-mentor .mentor-form .textarea,
[data-theme="dark"] .page-mentor .mentor-form select.input {
  background: color-mix(in oklch, var(--color-surface) 84%, #0f172a 16%);
}

[data-theme="dark"] .page-mentor .mentor-materials {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--color-primary) 22%, transparent), transparent 40%),
    color-mix(in oklch, var(--color-surface-offset) 88%, #0f172a 12%);
}

.mentor-course-lessons {
  margin-top: var(--space-3);
  border-top: 1px dashed var(--color-divider);
  padding-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.mentor-course-lesson-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.mentor-questions {
  min-height: 170px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

/* ── Loading skeletons ── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-offset) 25%,
    color-mix(in oklch, var(--color-border) 60%, var(--color-surface-offset)) 50%,
    var(--color-surface-offset) 75%
  );
  background-size: 200% 100%;
  animation: skeletonPulse 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes skeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-stat {
  height: 5rem;
  border-radius: var(--radius-lg);
}

.skeleton-line {
  height: 1rem;
  margin-bottom: var(--space-3);
}

.skeleton-line--short { width: 60%; }
.skeleton-line--medium { width: 80%; }
.skeleton-block { height: 4.5rem; margin-bottom: var(--space-3); }

.dashboard-stats--loading {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
}

/* ── Toast notifications ── */
.toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: min(22rem, calc(100vw - 2rem));
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-text);
  animation: toastIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.toast.is-leaving {
  animation: toastOut 0.28s ease forwards;
}

.toast--success { border-left: 3px solid var(--color-success); }
.toast--error { border-left: 3px solid var(--color-error); }
.toast--info { border-left: 3px solid #694A36; }
.toast--warning { border-left: 3px solid var(--color-warning); }

.toast__icon { flex-shrink: 0; margin-top: 0.1rem; }
.toast--success .toast__icon { color: var(--color-success); }
.toast--error .toast__icon { color: var(--color-error); }
.toast--info .toast__icon { color: #694A36; }
.toast--warning .toast__icon { color: var(--color-warning); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(1rem); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(1rem); }
}

.lesson-video-placeholder {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-offset);
}

.lesson-video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border);
  background: #000;
}

.lesson-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lesson-content-markdown pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
}

.lesson-materials-list {
  margin: var(--space-2) 0 0;
  padding-left: 1rem;
}

.lesson-detail-page {
  gap: var(--space-4);
}

.lesson-detail-page__top-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.lesson-focus-card {
  border-radius: 16px;
}

.lesson-focus-hero__eyebrow {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  font-weight: 700;
}

.lesson-focus-hero h1 {
  margin: 0.35rem 0 0.5rem;
}

.lesson-focus-hero p {
  margin: 0 0 0.6rem;
  color: var(--color-text-muted);
}

.lesson-focus-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.lesson-focus-section h3 {
  margin: 0 0 0.6rem;
}

.lesson-focus-topics {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.4rem;
}

.lesson-focus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.lesson-focus-materials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}

.lesson-focus-material {
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  background: var(--color-surface);
  color: var(--color-text);
  display: grid;
  gap: 0.3rem;
}

.lesson-focus-material strong {
  font-size: 0.92rem;
}

.lesson-focus-material span {
  font-size: 0.77rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.lesson-focus-material:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

@media (max-width: 900px) {
  .mentor-hero {
    border-radius: 16px;
  }

  .mentor-panel__title-wrap {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.55rem;
  }

  .mentor-panel__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
  }

  .page-mentor .mentor-form__actions .button,
  .page-mentor .mentor-form__submit {
    width: 100%;
  }

  .lesson-focus-grid {
    grid-template-columns: 1fr;
  }
}

@keyframes mentorGlow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.42;
  }
  50% {
    transform: scale(1.12);
    opacity: 0.65;
  }
}

.onboarding-profile-grid {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

@media (min-width: 640px) {
  .onboarding-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .onboarding-profile-grid .lab:last-child {
    grid-column: 1 / -1;
  }
}

/* ── Onboarding (first-login) ── */
.page-onboarding .shell-main {
  padding: var(--space-6) 0 var(--space-10);
}

.onboarding {
  display: flex;
  justify-content: center;
  padding-top: var(--space-4);
  padding-bottom: var(--space-8);
}

.onboarding__card {
  width: 100%;
  max-width: 42rem;
  padding: clamp(var(--space-5), 4vw, var(--space-8));
}

.onboarding__header {
  text-align: center;
  margin-bottom: var(--space-5);
}

.onboarding__kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 var(--space-3);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onboarding__title {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.35rem, 4.5vw, 1.85rem);
  line-height: 1.2;
}

.onboarding__lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.onboarding__lead--intro {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

.onboarding__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}

.onboarding__progress-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.onboarding__progress-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-offset);
  transition: all var(--transition);
}

.onboarding__progress-item.is-active span {
  border-color: transparent;
  background: var(--color-primary-gradient);
  color: var(--color-text-inverse);
  box-shadow: 0 2px 10px rgba(118, 86, 61, 0.35);
}

.onboarding__progress-item.is-done span {
  border-color: color-mix(in oklch, var(--color-success) 45%, var(--color-border));
  background: color-mix(in oklch, var(--color-success) 14%, var(--color-surface));
  color: var(--color-success);
}

.onboarding__progress-item:not(:last-child)::after {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 1px;
  background: var(--color-divider);
}

.onboarding__progress-item.is-done:not(:last-child)::after {
  background: color-mix(in oklch, var(--color-success) 55%, var(--color-divider));
}

.onboarding__error {
  margin-bottom: var(--space-4);
}

.onboarding-step__h {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.05rem, 3vw, 1.25rem);
}

.onboarding__benefits {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: color-mix(in oklch, var(--color-primary) 6%, var(--color-surface));
  display: grid;
  gap: var(--space-3);
}

.onboarding__benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.onboarding__benefits i {
  flex-shrink: 0;
  width: 1.5rem;
  margin-top: 0.1rem;
  text-align: center;
  color: var(--color-primary);
}

.onboarding-subjects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.onboarding-subjects--pick {
  grid-template-columns: 1fr;
}

.onboarding-subject {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
  user-select: none;
  text-align: center;
}

.onboarding-subject:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}

.onboarding-subject:has(input:checked) {
  border-color: transparent;
  background: var(--color-primary-gradient);
  color: var(--color-text-inverse);
  box-shadow: 0 4px 14px rgba(118, 86, 61, 0.32);
}

.onboarding-subject:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.onboarding-subject input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.onboarding-subject__label {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.onboarding-subject-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.onboarding-subject-pick:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}

.onboarding-subject-pick:active {
  transform: scale(0.98);
}

.onboarding-subject-pick__label {
  flex: 1;
  min-width: 0;
}

.onboarding-subject-pick i {
  flex-shrink: 0;
  color: var(--color-primary);
  opacity: 0.85;
}

.onboarding__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: stretch;
  margin-top: var(--space-2);
}

.onboarding__actions .button--primary {
  flex: 1 1 12rem;
}

@media (max-width: 768px) {
  .page-onboarding .onboarding__actions .button--primary {
    flex: none;
  }
}

.onboarding-step[hidden] {
  display: none !important;
}

.onboarding-step .lab {
  margin-bottom: var(--space-3);
}

.onboarding-step .lab select,
.onboarding-step .lab input,
.onboarding-step .lab textarea {
  min-height: 2.75rem;
}

.onboarding-step .lab textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.deadline-calendar {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.deadline-calendar__controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.65rem;
}

.deadline-calendar__select {
  min-height: 2rem;
  padding: 0.28rem 0.5rem;
}

.deadline-calendar__select--year {
  max-width: 6.2rem;
}

.deadline-calendar__head {
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.deadline-calendar__weekdays,
.deadline-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.deadline-calendar__weekdays span {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
}

.deadline-calendar__cell {
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  background: var(--color-surface);
  cursor: pointer;
  padding: 0;
}

.deadline-calendar__cell.is-empty {
  border-color: transparent;
  background: transparent;
}

.deadline-calendar__cell.has-deadline {
  border-color: color-mix(in oklch, var(--color-primary) 55%, var(--color-border));
  background: color-mix(in oklch, var(--color-primary) 12%, var(--color-surface));
}

.deadline-calendar__cell.is-selected {
  border-color: color-mix(in oklch, var(--color-primary) 72%, var(--color-border));
  background: color-mix(in oklch, var(--color-primary) 22%, var(--color-surface));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary) 20%, transparent);
}

.deadline-calendar__cell em {
  font-size: 0.68rem;
  font-style: normal;
  color: var(--color-text-muted);
}

.deadline-calendar__legend {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.55rem;
}

@keyframes fxFloatOrb {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(8px, -12px, 0) scale(1.06); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes fxCardIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fxPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-primary) 0%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in oklch, var(--color-primary) 12%, transparent); }
}

@keyframes evShine {
  0%, 72% { transform: translateX(-105%); }
  100% { transform: translateX(120%); }
}

.page-app .hero-banner {
  position: relative;
  overflow: hidden;
}

.page-app .hero-banner::before,
.page-app .hero-banner::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  filter: blur(2px);
  opacity: 0.55;
  animation: fxFloatOrb 12s ease-in-out infinite;
}

.page-app .hero-banner::before {
  width: 160px;
  height: 160px;
  top: -70px;
  right: 8%;
  background: radial-gradient(circle, color-mix(in oklch, var(--color-primary) 35%, transparent) 0%, transparent 72%);
}

.page-app .hero-banner::after {
  width: 120px;
  height: 120px;
  bottom: -52px;
  left: 8%;
  background: radial-gradient(circle, color-mix(in oklch, #886142 26%, transparent) 0%, transparent 72%);
  animation-delay: -5s;
}

.page-app .hero-banner > * {
  position: relative;
  z-index: 1;
}

.fx-page > .dashboard-card,
.fx-page .dashboard-grid > .dashboard-card,
.fx-page .lms-course-card,
.fx-page .favorite-card,
.fx-page .scope-tile,
.fx-page .aud-tile,
.fx-page .filter-panel,
.fx-page .cat-bar,
.fx-page .cert-card {
  animation: fxCardIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fx-page > .dashboard-card:nth-child(1),
.fx-page .dashboard-grid > .dashboard-card:nth-child(1),
.fx-page .lms-course-card:nth-child(1),
.fx-page .favorite-card:nth-child(1),
.fx-page .cert-card:nth-child(1) { animation-delay: 0.04s; }
.fx-page > .dashboard-card:nth-child(2),
.fx-page .dashboard-grid > .dashboard-card:nth-child(2),
.fx-page .lms-course-card:nth-child(2),
.fx-page .favorite-card:nth-child(2),
.fx-page .cert-card:nth-child(2) { animation-delay: 0.08s; }
.fx-page > .dashboard-card:nth-child(3),
.fx-page .dashboard-grid > .dashboard-card:nth-child(3),
.fx-page .lms-course-card:nth-child(3),
.fx-page .favorite-card:nth-child(3),
.fx-page .cert-card:nth-child(3) { animation-delay: 0.12s; }
.fx-page .lms-course-card:nth-child(n+4),
.fx-page .favorite-card:nth-child(n+4),
.fx-page .cert-card:nth-child(n+4) { animation-delay: 0.16s; }

.fx-page .lms-course-card:hover,
.fx-page .favorite-card:hover,
.fx-page .cert-card:hover,
.fx-page .dashboard-card:hover {
  transform: translateY(-3px);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.fx-page .scope-tile--active,
.fx-page .aud-tile--active {
  animation: fxPulseGlow 2.6s ease-in-out infinite;
}

.fx-page .events-grid .ev-card.ev-card--premium:nth-child(odd) .ev-card__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 22%, rgba(255, 255, 255, 0.2) 48%, transparent 72%);
  transform: translateX(-105%);
  animation: evShine 4.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .page-app .hero-banner::before,
  .page-app .hero-banner::after,
  .fx-page > .dashboard-card,
  .fx-page .dashboard-grid > .dashboard-card,
  .fx-page .lms-course-card,
  .fx-page .favorite-card,
  .fx-page .scope-tile,
  .fx-page .aud-tile,
  .fx-page .filter-panel,
  .fx-page .cat-bar,
  .fx-page .cert-card,
  .fx-page .scope-tile--active,
  .fx-page .aud-tile--active,
  .fx-page .events-grid .ev-card.ev-card--premium:nth-child(odd) .ev-card__cover::before {
    animation: none !important;
  }
}

/* ── Mobile layout (320px–768px) ── */
@media (max-width: 768px) {
  .shell-head,
  .navbar {
    padding: var(--space-3) var(--space-4);
  }

  .shell-inner,
  .shell-inner--page {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .shell-foot,
  .footer {
    padding: var(--space-8) 1rem;
    margin-top: var(--space-10);
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 110;
    border: none;
    padding: 0;
    background: rgba(37, 26, 22, 0.52);
    cursor: pointer;
  }

  [data-theme="light"] .nav-overlay {
    background: rgba(37, 26, 22, 0.38);
  }

  body.nav-open .shell-head,
  body.nav-open .navbar {
    z-index: 120;
    overflow: visible;
  }

  .shell-head__row {
    flex-wrap: nowrap;
    gap: var(--space-3);
  }

  .navbar-logo .font-display {
    font-size: 1rem;
  }

  .shell-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(80vw, 340px);
    max-width: 340px;
    z-index: 121;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.35rem;
    margin: 0;
    padding: calc(3.5rem + env(safe-area-inset-top, 0px)) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-text);
    opacity: 1;
    box-shadow: -8px 0 32px rgba(15, 13, 26, 0.18);
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s ease;
  }

  .shell-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  body.nav-open {
    overflow: hidden;
  }

  body.nav-open .site-shell {
    overflow: visible;
  }

  .shell-nav .nav-link,
  .shell-nav .button,
  .shell-nav .nav-chat-btn,
  .shell-nav .nav-profile-wrap,
  .shell-nav .lang-switcher-wrapper,
  .shell-nav .theme-toggle {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    opacity: 1;
    visibility: visible;
  }

  .shell-nav .nav-link,
  .shell-nav .nav-chat-btn {
    min-height: 2.75rem;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: transparent;
  }

  .shell-nav .nav-link:hover,
  .shell-nav .nav-link:focus-visible {
    color: var(--color-primary);
    background: var(--color-primary-highlight);
  }

  .shell-nav .nav-profile-btn {
    width: 100%;
    min-height: 2.75rem;
    justify-content: flex-start;
    border-radius: var(--radius-md);
  }

  .shell-nav .nav-profile-name {
    max-width: none;
    flex: 1;
  }

  .shell-nav .nav-profile-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0;
    margin-top: 0.25rem;
  }

  .shell-nav .lang-dropdown-wrap {
    width: 100%;
  }

  .shell-nav .lang-switcher,
  .shell-nav .lang-lg-btn {
    width: 100%;
    justify-content: space-between;
    min-height: 2.75rem;
  }

  .shell-nav .lang-dropdown {
    position: static;
    box-shadow: none;
    margin-top: 0.35rem;
    width: 100%;
  }

  .shell-nav .theme-toggle {
    align-self: flex-start;
    min-height: 2.75rem;
    min-width: 2.75rem;
  }

  .shell-nav .button--sm {
    width: 100%;
    min-height: 2.75rem;
  }

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

  .scope-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scope-row.scope-personalized {
    grid-template-columns: 1fr 1fr;
  }

  .scope-tile,
  .aud-tile {
    width: 100%;
    min-height: 2.75rem;
  }

  .cat-page .cat-seg.aud-grid,
  .cat-page .cat-seg.scope-row {
    display: flex;
    grid-template-columns: none;
  }

  .cat-page .cat-seg .scope-tile,
  .cat-page .cat-seg .aud-tile {
    width: auto;
    min-height: 44px;
  }

  .filter-panel__grid {
    grid-template-columns: 1fr !important;
  }

  .filter-panel__actions {
    flex-direction: column;
  }

  .filter-panel__actions .button {
    width: 100%;
    min-height: 2.75rem;
  }

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

  .lms-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lms-hero-actions .button {
    width: 100%;
    min-height: 2.75rem;
  }

  .bar__actions {
    width: 100%;
  }

  .bar__actions .button {
    flex: 1 1 auto;
    min-height: 2.75rem;
  }

  .test-page {
    padding: var(--space-4) 0;
  }

  .test-header {
    flex-direction: column;
    align-items: stretch;
  }

  .test-subject-picker {
    padding: var(--space-5);
  }

  .deadline-calendar__controls {
    grid-template-columns: 1fr 1fr;
  }

  .deadline-calendar__select--year {
    max-width: none;
  }

  .onboarding__actions {
    flex-direction: column;
    gap: var(--space-2);
  }

  .page-onboarding .onboarding__actions .button {
    width: 100%;
    min-height: 2.75rem;
    flex: none;
    padding: var(--space-3) var(--space-5);
    font-size: 0.95rem;
  }

  .onboarding-subjects {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6) var(--space-4);
    align-items: start;
  }

  .footer-col--brand {
    grid-column: 1 / -1;
  }

  .footer-col h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: var(--space-3);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .footer-col ul {
    display: grid;
    gap: 0.35rem;
  }

  .footer-col li {
    margin-bottom: 0;
  }

  .footer-col a {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.2rem 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .lnd-cta__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .lnd-cta__secondary-row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-3);
    width: 100%;
  }

  .lnd-cta__secondary-row .button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.75rem;
    white-space: normal;
    line-height: 1.25;
    font-size: 0.875rem;
    padding-inline: 0.75rem;
  }

  .lnd-cta__primary {
    width: 100%;
    min-height: 2.75rem;
  }

  .onboarding__progress-item:not(:last-child)::after {
    width: 1rem;
  }

  .share-event-modal__card {
    width: calc(100% - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: 1rem;
  }

  .ozmun-toast {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .shell-inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

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

@media (max-width: 390px) {
  .shell-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .onboarding__card {
    padding: var(--space-5);
  }

  .aud-grid,
  .scope-row {
    grid-template-columns: 1fr;
  }

  .hero-banner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 391px) and (max-width: 768px) {
  .shell-inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* -- Phase 4: scrollbars + chat profile links -- */
html {
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.ozmun-scroll-thin,
.chat-messages-scroll,
.chat-sidebar-dock__list-wrap,
.chat-search-dropdown__results {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--color-primary) 40%, transparent) transparent;
}
.ozmun-scroll-thin::-webkit-scrollbar,
.chat-messages-scroll::-webkit-scrollbar,
.chat-sidebar-dock__list-wrap::-webkit-scrollbar,
.chat-search-dropdown__results::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.ozmun-scroll-thin::-webkit-scrollbar-button,
.chat-messages-scroll::-webkit-scrollbar-button,
.chat-sidebar-dock__list-wrap::-webkit-scrollbar-button,
.chat-search-dropdown__results::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
.ozmun-scroll-thin::-webkit-scrollbar-track,
.chat-messages-scroll::-webkit-scrollbar-track,
.chat-sidebar-dock__list-wrap::-webkit-scrollbar-track,
.chat-search-dropdown__results::-webkit-scrollbar-track {
  background: transparent;
}
.ozmun-scroll-thin::-webkit-scrollbar-thumb,
.chat-messages-scroll::-webkit-scrollbar-thumb,
.chat-sidebar-dock__list-wrap::-webkit-scrollbar-thumb,
.chat-search-dropdown__results::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--color-primary) 40%, transparent);
  border-radius: 999px;
}

.chat-header__name-link {
  color: inherit;
  text-decoration: none;
}
.chat-header__name-link:hover .chat-header__name {
  color: var(--color-primary);
}
.chat-avatar--link {
  text-decoration: none;
  color: inherit;
}
.chat-avatar--link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 999px;
}
.lb-profile-link {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.lb-profile-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}


/* Hamroh warm chat */
.hamroh-msg {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: min(42rem, 100%);
}
.hamroh-msg--user {
  align-self: flex-end;
}
.hamroh-msg--assistant {
  align-self: flex-start;
}
.hamroh-msg__role {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.hamroh-msg--user .hamroh-msg__body {
  background: var(--oz-chestnut, #76563D);
  color: var(--oz-ivory, #E5DED4);
  border: 1px solid var(--oz-cognac, #694A36);
  border-radius: 14px;
  padding: 0.75rem 1rem;
}
.hamroh-msg--assistant .hamroh-msg__body {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 0.75rem 1rem;
}
.hamroh-memory-suggest {
  background: #EFE8DE;
  border: 1px solid var(--oz-beige, #C8B6A1);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-card);
}
.hamroh-status--error {
  color: var(--oz-cognac, #694A36);
  border-left: 3px solid var(--oz-chocolate, #3C2A20);
  padding-left: 0.5rem;
}
#hamrohSuggestionSlot .card,
#hamrohSuggestionSlot .dashboard-card,
.hamroh-suggest-card {
  background: #EFE8DE;
  border: 1px solid var(--oz-beige, #C8B6A1);
  border-radius: 14px;
}


/* ── Landing page warm ivory hard overrides (browser-visible) ── */
body.page-landing {
  background: #E5DED4;
  color: #251A16;
}
body.page-landing .shell-head,
body.page-landing .navbar {
  background: #251A16;
  background-color: #251A16;
  border-bottom: 1px solid #3C2A20;
}
body.page-landing .logo,
body.page-landing .navbar-logo,
body.page-landing .logo .font-display {
  color: #E5DED4;
}
body.page-landing .shell-nav .nav-link {
  color: #C8B6A1;
}
body.page-landing .shell-nav .nav-link:hover,
body.page-landing .shell-nav .nav-link.is-active {
  color: #E5DED4;
  background: transparent;
}
body.page-landing .home-landing,
body.page-landing .lnd-hero {
  background-color: #E5DED4;
}

/* ==========================================================================
   Auth App Shell
   ========================================================================== */

html {
  --app-sidebar-width: 256px;
  --app-sidebar-collapsed-width: 72px;
  --app-sidebar-current-width: var(--app-sidebar-width);
  --app-main-offset: var(--app-sidebar-current-width);
  --app-header-height: 68px;
}

body[data-user-id] .app-shell {
  min-height: 100vh;
  background: #f3ede4;
}

body[data-user-id] .app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--app-sidebar-current-width);
  height: 100vh;
  background: linear-gradient(180deg, #2a1d18 0%, #201612 100%);
  color: #f5f0e9;
  border-right: 1px solid rgba(200, 182, 161, 0.14);
  z-index: 120;
  transform: translateX(0);
  overflow: hidden;
}

body[data-user-id] .app-sidebar__inner {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: inherit;
  overflow: hidden;
}

body[data-user-id] .app-sidebar__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 68px;
  padding: 0 10px 0 12px;
  border-bottom: 1px solid rgba(200, 182, 161, 0.16);
}

body[data-user-id] .app-sidebar__collapse-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(245, 240, 233, 0.9);
  cursor: pointer;
}

body[data-user-id] .app-sidebar__collapse-btn:hover,
body[data-user-id] .app-sidebar__collapse-btn:focus-visible {
  background: rgba(136, 97, 66, 0.28);
  color: #fbf8f3;
  outline: none;
}

body[data-user-id] .app-sidebar__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 8px 12px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 182, 161, 0.3) transparent;
}

body[data-user-id] .app-sidebar__nav::-webkit-scrollbar {
  width: 5px;
}

body[data-user-id] .app-sidebar__nav::-webkit-scrollbar-track {
  background: transparent;
}

body[data-user-id] .app-sidebar__nav::-webkit-scrollbar-thumb {
  background: rgba(200, 182, 161, 0.3);
  border-radius: 999px;
}

body[data-user-id] .app-sidebar__brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  color: #f5f0e9;
  text-decoration: none;
  border-bottom: 0;
}

body[data-user-id] .app-sidebar__brand:hover { color: #fbf8f3; }

body[data-user-id] .app-sidebar__brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(200, 182, 161, 0.22);
  flex: 0 0 38px;
}

body[data-user-id] .app-sidebar__brand-title {
  font-size: 1.15rem;
  line-height: 1;
  color: inherit;
  white-space: nowrap;
}

body[data-user-id] .app-sidebar__group {
  margin-top: 16px;
}

body[data-user-id] .app-sidebar__group:first-child {
  margin-top: 4px;
}

body[data-user-id] .app-sidebar__group-label {
  margin: 0 8px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 182, 161, 0.72);
}

body[data-user-id] .app-sidebar__group-items {
  display: grid;
  gap: 6px;
}

body[data-user-id] .app-sidebar__link {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 12px;
  color: rgba(245, 240, 233, 0.9);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
}

body[data-user-id] .app-sidebar__link:hover,
body[data-user-id] .app-sidebar__link:focus-visible {
  background: rgba(136, 97, 66, 0.24);
  color: #fbf8f3;
  outline: none;
}

body[data-user-id] .app-sidebar__link.is-active {
  background: rgba(118, 86, 61, 0.78);
  color: #fbf8f3;
  box-shadow: inset 0 0 0 1px rgba(200, 182, 161, 0.12);
}

body[data-user-id] .app-sidebar__icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  color: inherit;
}

body[data-user-id] .app-sidebar__svg {
  display: block;
  width: 22px;
  height: 22px;
}

body[data-user-id] .app-sidebar__label {
  min-width: 0;
  white-space: nowrap;
}

body[data-user-id] .app-sidebar__utilities {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 12px 10px 14px;
  border-top: 1px solid rgba(200, 182, 161, 0.14);
  display: grid;
  gap: 8px;
  /* Allow language menu to open upward without clipping at the bottom. */
  overflow: visible;
  position: relative;
  z-index: 130;
}

body[data-user-id] .app-sidebar__utilities .lang-switcher-wrapper,
body[data-user-id] .app-sidebar__utilities .lang-dropdown-wrap {
  position: relative;
  z-index: 140;
  overflow: visible;
}

/* Near the bottom of the viewport: open language menu upward. */
body[data-user-id] .app-sidebar__utilities .lang-dropdown,
body[data-user-id] .app-sidebar .lang-dropdown.app-shell__dropdown {
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 100%;
  max-height: min(280px, calc(100vh - 120px));
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  z-index: 200;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.28);
}

body[data-user-id] .app-sidebar__utilities .lang-dropdown.is-open,
body[data-user-id] .app-sidebar .lang-dropdown.app-shell__dropdown.is-open {
  display: flex;
  flex-direction: column;
}

body[data-user-id] .app-sidebar__utility,
body[data-user-id] .app-sidebar__utility-btn {
  width: 100%;
}

body[data-user-id] .app-sidebar__utility-btn {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: rgba(245, 240, 233, 0.88);
  font: inherit;
  cursor: pointer;
}

body[data-user-id] .app-sidebar__utility-btn:hover,
body[data-user-id] .app-sidebar__utility-btn:focus-visible {
  background: rgba(136, 97, 66, 0.22);
  outline: none;
}

body[data-user-id] .app-sidebar__utility-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0;
}

body[data-user-id] .app-sidebar__utility-label {
  flex: 1 1 auto;
  text-align: left;
}

body[data-user-id] .app-sidebar__utility-chevron,
body[data-user-id] .app-sidebar__profile-chevron {
  margin-left: auto;
  display: inline-flex;
  color: rgba(245, 240, 233, 0.72);
}

body[data-user-id] .app-sidebar__profile {
  position: relative;
}

body[data-user-id] .app-sidebar__profile-btn {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #f5f0e9;
  cursor: pointer;
}

body[data-user-id] .app-sidebar__profile-btn:hover,
body[data-user-id] .app-sidebar__profile-btn:focus-visible {
  background: rgba(136, 97, 66, 0.22);
  outline: none;
}

body[data-user-id] .app-sidebar__profile-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

body[data-user-id] .app-sidebar__profile-text strong,
body[data-user-id] .app-sidebar__profile-text span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-user-id] .app-sidebar__profile-text strong {
  font-size: 13px;
  font-weight: 700;
}

body[data-user-id] .app-sidebar__profile-text span {
  font-size: 12px;
  color: rgba(200, 182, 161, 0.82);
}

body[data-user-id] .app-shell__main {
  margin-left: var(--app-main-offset);
  min-height: 100vh;
}

body[data-user-id] .app-header {
  position: fixed;
  top: 0;
  left: var(--app-main-offset);
  width: calc(100% - var(--app-main-offset));
  height: var(--app-header-height);
  background: #251a16;
  border-bottom: 1px solid rgba(200, 182, 161, 0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  z-index: 110;
}

body[data-user-id] .app-header__left,
body[data-user-id] .app-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

body[data-user-id] .app-header__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: #f5f0e9;
  line-height: 1;
}

body[data-user-id] .app-header__icon-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: #e5ded4;
  cursor: pointer;
}

body[data-user-id] .app-header__icon-btn:hover,
body[data-user-id] .app-header__icon-btn:focus-visible {
  background: rgba(245, 240, 233, 0.08);
  color: #fbf8f3;
}

body[data-user-id] .app-header__notification-wrap {
  position: relative;
}

body[data-user-id] .app-header__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #b29378;
  color: #251a16;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

body[data-user-id] .app-shell__workspace {
  min-height: 100vh;
  padding: calc(var(--app-header-height) + 24px) 28px 28px;
  background: #f3ede4;
  overflow-x: clip;
}

body[data-user-id] .app-page {
  max-width: 1320px;
  margin: 0 auto;
}

body[data-user-id] .app-shell__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  background: #fbf8f3;
  border: 1px solid rgba(200, 182, 161, 0.45);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(37, 26, 22, 0.18);
  color: #251a16;
  z-index: 140;
}

body[data-user-id] .app-notifications {
  width: min(360px, calc(100vw - 32px));
  padding: 10px;
}

body[data-user-id] .app-notifications__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 10px;
}

body[data-user-id] .app-notifications__mark-all {
  border: 0;
  background: transparent;
  color: #76563d;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

body[data-user-id] .app-notifications__list {
  display: grid;
  gap: 8px;
  max-height: min(420px, 65vh);
  overflow: auto;
}

body[data-user-id] .app-notifications__empty {
  padding: 10px 6px 14px;
  color: rgba(80, 56, 41, 0.75);
}

body[data-user-id] .app-notification {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 12px;
  background: #f7f2ea;
  border: 1px solid rgba(200, 182, 161, 0.28);
  cursor: pointer;
}

body[data-user-id] .app-notification.is-unread {
  background: #efe6d9;
}

body[data-user-id] .app-notification__icon {
  color: #76563d;
  padding-top: 2px;
}

body[data-user-id] .app-notification__title {
  color: #251a16;
  font-weight: 700;
  line-height: 1.3;
}

body[data-user-id] .app-notification__desc,
body[data-user-id] .app-notification__time {
  font-size: 12px;
  color: rgba(80, 56, 41, 0.75);
}

body[data-user-id] .app-notification__mark {
  border: 0;
  background: transparent;
  color: #76563d;
  font-size: 12px;
  cursor: pointer;
}

body[data-user-id] .app-shell__overlay {
  position: fixed;
  inset: 0;
  background: rgba(37, 26, 22, 0.45);
  z-index: 115;
}

body[data-user-id] .dashboard-top {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(172px, 186px) minmax(0, 0.78fr);
  grid-template-areas: "content action art";
  align-items: stretch;
  gap: 16px;
  position: relative;
  overflow: hidden;
  min-height: clamp(170px, 18vw, 205px);
  padding: 22px 24px;
  border-radius: 26px;
  border: none;
  background:
    radial-gradient(circle at 88% 42%, rgba(246, 232, 219, 0.88) 0%, rgba(246, 232, 219, 0.36) 33%, rgba(250, 247, 243, 0) 68%),
    linear-gradient(90deg, #faf7f3 0%, #faf7f3 55%, #f8eee5 78%, #f6e8db 100%);
  box-shadow: none;
}

body[data-user-id] .dashboard-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #faf7f3 0%, #faf7f3 39%, rgba(250, 247, 243, 0.97) 52%, rgba(249, 240, 232, 0.72) 67%, rgba(249, 240, 232, 0.18) 79%, rgba(249, 240, 232, 0) 92%),
    linear-gradient(180deg, rgba(250, 247, 243, 0.86) 0%, rgba(250, 247, 243, 0.34) 24%, rgba(250, 247, 243, 0) 54%);
  pointer-events: none;
  z-index: 1;
}

body[data-user-id] .dashboard-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(250, 247, 243, 0.74) 0%, rgba(250, 247, 243, 0.18) 34%, rgba(250, 247, 243, 0) 62%),
    radial-gradient(circle at 108% 100%, rgba(246, 232, 219, 0) 0%, rgba(246, 232, 219, 0.08) 34%, rgba(250, 247, 243, 0.54) 74%, rgba(250, 247, 243, 0.9) 100%),
    linear-gradient(0deg, rgba(250, 247, 243, 0.24) 0%, rgba(250, 247, 243, 0) 30%);
  pointer-events: none;
  z-index: 1;
}

body[data-user-id] .app-page--dashboard {
  max-width: 1460px;
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: 32px;
  background: linear-gradient(90deg, #faf7f3 0%, #faf7f3 55%, #f8eee5 78%, #f6e8db 100%);
}

body[data-user-id] .dashboard-top__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(118, 86, 61, 0.72);
  margin-bottom: 8px;
}

body[data-user-id] .dashboard-top__title {
  font-size: clamp(2.1rem, 3.3vw, 2.65rem);
  color: #251a16;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

body[data-user-id] .dashboard-top__subtitle {
  margin-top: 8px;
  max-width: 100%;
  font-size: 0.98rem;
  line-height: 1.48;
  color: rgba(80, 56, 41, 0.76);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body[data-user-id] .dashboard-top__content {
  grid-area: content;
  min-width: 0;
  position: relative;
  z-index: 2;
  max-width: 100%;
  align-self: center;
  padding-right: 4px;
}

body[data-user-id] .dashboard-top__action {
  grid-area: action;
  position: relative;
  z-index: 2;
  justify-self: end;
  align-self: start;
}

body[data-user-id] .dashboard-top__art {
  grid-area: art;
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  display: flex;
  align-items: end;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 0;
  min-height: 126px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(250, 247, 243, 0.82) 0%, rgba(249, 240, 232, 0.68) 100%);
}

body[data-user-id] .dashboard-top__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #faf7f3 0%, rgba(250, 247, 243, 0.96) 16%, rgba(249, 240, 232, 0.72) 34%, rgba(249, 240, 232, 0.18) 58%, rgba(249, 240, 232, 0) 86%),
    linear-gradient(180deg, rgba(250, 247, 243, 0.54) 0%, rgba(250, 247, 243, 0.14) 22%, rgba(250, 247, 243, 0) 46%);
  pointer-events: none;
  z-index: 1;
}

body[data-user-id] .dashboard-top__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 42%, rgba(246, 232, 219, 0.88) 0%, rgba(246, 232, 219, 0.36) 33%, rgba(250, 247, 243, 0) 68%),
    radial-gradient(circle at 106% 106%, rgba(250, 247, 243, 0) 0%, rgba(250, 247, 243, 0.14) 32%, rgba(250, 247, 243, 0.6) 76%, rgba(250, 247, 243, 0.9) 100%);
  pointer-events: none;
  z-index: 1;
}

body[data-user-id] .dashboard-top__art-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0.96;
  position: relative;
  z-index: 0;
}

body[data-user-id] .dashboard-top__button {
  min-height: 42px;
  width: min(186px, 100%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 0 16px;
  border-radius: 13px;
  background: linear-gradient(180deg, #8d6342 0%, #76563d 100%);
  color: #fbf8f3;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: none;
}

body[data-user-id] .dashboard-top__button::after {
  content: "→";
}

body[data-user-id] .dashboard-grid {
  display: grid;
  gap: 16px;
}

body[data-user-id] .dashboard-grid--top {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

body[data-user-id] .dashboard-grid--bottom {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.02fr) minmax(220px, 0.62fr);
}

body[data-user-id] .dashboard-panel {
  min-height: 246px;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid rgba(113, 74, 45, 0.08);
  background: rgba(255, 250, 244, 0.86);
  box-shadow: 0 3px 12px rgba(80, 56, 41, 0.03);
}

body[data-user-id] #dashboardDeadlineCard,
body[data-user-id] #dashboardStepCard {
  position: relative;
  overflow: hidden;
}

body[data-user-id] #dashboardDeadlineCard::before,
body[data-user-id] #dashboardStepCard::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 250, 244, 0.98) 0%, rgba(255, 250, 244, 0.96) 48%, rgba(255, 250, 244, 0.78) 64%, rgba(255, 250, 244, 0.32) 82%, rgba(255, 250, 244, 0) 94%),
    linear-gradient(180deg, rgba(255, 250, 244, 0.74) 0%, rgba(255, 250, 244, 0.2) 24%, rgba(255, 250, 244, 0) 48%);
  pointer-events: none;
  z-index: 1;
}

body[data-user-id] #dashboardDeadlineCard::after,
body[data-user-id] #dashboardStepCard::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 105% 0%, rgba(255, 250, 244, 0.82) 0%, rgba(255, 250, 244, 0.16) 34%, rgba(255, 250, 244, 0) 62%),
    radial-gradient(circle at 108% 108%, rgba(255, 250, 244, 0) 0%, rgba(255, 250, 244, 0.08) 40%, rgba(255, 250, 244, 0.48) 74%, rgba(255, 250, 244, 0.86) 100%);
  pointer-events: none;
  z-index: 1;
}

body[data-user-id] .dashboard-panel--feature {
  min-height: 252px;
}

body[data-user-id] .dashboard-panel--wide {
  min-height: 330px;
}

body[data-user-id] .dashboard-panel--stats {
  min-height: 330px;
}

body[data-user-id] .dashboard-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}

body[data-user-id] .dashboard-panel__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(118, 86, 61, 0.68);
}

body[data-user-id] .dashboard-panel__title {
  font-size: 1.34rem;
  color: #251a16;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

body[data-user-id] .dashboard-panel__title--feature {
  font-size: clamp(1.4rem, 1.55vw, 1.72rem);
}

body[data-user-id] .dashboard-panel__meta {
  margin-top: 8px;
  color: rgba(80, 56, 41, 0.74);
  line-height: 1.44;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body[data-user-id] .dashboard-panel__submeta {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(80, 56, 41, 0.64);
}

body[data-user-id] .dashboard-panel__arrow {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #f2e7da;
  color: #503829;
}

body[data-user-id] .dashboard-panel__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  z-index: 2;
  min-height: calc(100% - 48px);
}

body[data-user-id] .dashboard-panel__hero {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 100%;
  position: relative;
  z-index: 2;
}

body[data-user-id] .dashboard-panel__hero-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

body[data-user-id] .dashboard-panel__icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f2e8dc;
  color: #7a593f;
  flex: 0 0 44px;
}

body[data-user-id] .dashboard-panel__icon--lg {
  width: 72px;
  height: 72px;
  font-size: 1.2rem;
  flex-basis: 72px;
}

body[data-user-id] .dashboard-panel__icon-row {
  margin-bottom: 8px;
}

body[data-user-id] .dashboard-panel__footer {
  margin-top: auto;
  padding-top: 16px;
}

body[data-user-id] .dashboard-panel__button,
body[data-user-id] .dashboard-panel__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

body[data-user-id] .dashboard-panel__button {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 12px;
  background: #8d6342;
  color: #fbf8f3;
}

body[data-user-id] .dashboard-panel__link {
  color: #7a593f;
}

body[data-user-id] .dashboard-panel__link::after,
body[data-user-id] .dashboard-panel__button::after {
  content: "→";
}

body[data-user-id] .dashboard-progress {
  height: 8px;
  margin-top: 14px;
  border-radius: 999px;
  background: #efe4d7;
  overflow: hidden;
}

body[data-user-id] .dashboard-progress__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8d6342 0%, #b29378 100%);
}

body[data-user-id] .dashboard-event {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  position: relative;
  z-index: 2;
}

body[data-user-id] .dashboard-event__date {
  min-height: 86px;
  border-radius: 18px;
  background: #f3ebdf;
  border: 1px solid rgba(200, 182, 161, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #6e503b;
}

body[data-user-id] .dashboard-event__date strong {
  font-size: 2rem;
  line-height: 1;
  color: #251a16;
}

body[data-user-id] .dashboard-event__date span {
  margin-top: 6px;
  font-size: 0.9rem;
  text-transform: capitalize;
}

body[data-user-id] .dashboard-event__body {
  min-width: 0;
}

body[data-user-id] .dashboard-panel__art {
  position: absolute;
  right: -4px;
  bottom: -6px;
  width: clamp(118px, 31%, 172px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.72;
}

body[data-user-id] .dashboard-panel__art--step {
  width: clamp(126px, 33%, 184px);
}

body[data-user-id] .dashboard-panel__art--deadline {
  width: clamp(116px, 30%, 168px);
  right: 2px;
  bottom: 2px;
}

body[data-user-id] .dashboard-panel__art-image {
  width: 100%;
  height: auto;
  display: block;
}

body[data-user-id] .dashboard-roadmap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}

body[data-user-id] .dashboard-roadmap__copy {
  min-width: 0;
}

body[data-user-id] .dashboard-ring {
  width: 124px;
  height: 124px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(
    #8d6342 0 calc(var(--dashboard-ring-progress, 0) * 1%),
    #efe4d7 calc(var(--dashboard-ring-progress, 0) * 1%) 100%
  );
  color: #251a16;
  position: relative;
}

body[data-user-id] .dashboard-ring__value {
  width: 82px;
  height: 82px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fffaf4;
  font-weight: 700;
  box-shadow: 0 0 0 10px #fffaf4;
}

body[data-user-id] .dashboard-timeline {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

body[data-user-id] .dashboard-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

body[data-user-id] .dashboard-timeline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: -14px;
  width: 1px;
  background: rgba(200, 182, 161, 0.6);
}

body[data-user-id] .dashboard-timeline__dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #f2e8dc;
  color: #7a593f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body[data-user-id] .dashboard-timeline__item strong,
body[data-user-id] .dashboard-activity__title {
  display: block;
  color: #251a16;
}

body[data-user-id] .dashboard-timeline__item span,
body[data-user-id] .dashboard-activity__meta,
body[data-user-id] .dashboard-activity__label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(80, 56, 41, 0.7);
}

body[data-user-id] .dashboard-activity {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

body[data-user-id] .dashboard-activity__item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

body[data-user-id] .dashboard-activity__icon,
body[data-user-id] .dashboard-stats__icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #f2e8dc;
  color: #7a593f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body[data-user-id] .dashboard-stats {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

body[data-user-id] .dashboard-stats__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

body[data-user-id] .dashboard-stats__copy strong {
  display: block;
  font-size: 1.1rem;
  color: #251a16;
}

body[data-user-id] .dashboard-stats__copy span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: rgba(80, 56, 41, 0.72);
}

html.app-shell-collapsed {
  --app-sidebar-current-width: var(--app-sidebar-collapsed-width);
  --app-main-offset: var(--app-sidebar-current-width);
}

html.app-shell-collapsed body[data-user-id] .app-sidebar__header {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px;
  min-height: 0;
}

html.app-shell-collapsed body[data-user-id] .app-sidebar__brand-title,
html.app-shell-collapsed body[data-user-id] .app-sidebar__group-label,
html.app-shell-collapsed body[data-user-id] .app-sidebar__label,
html.app-shell-collapsed body[data-user-id] .app-sidebar__utility-label,
html.app-shell-collapsed body[data-user-id] .app-sidebar__utility-chevron,
html.app-shell-collapsed body[data-user-id] .app-sidebar__profile-text,
html.app-shell-collapsed body[data-user-id] .app-sidebar__profile-chevron {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

html.app-shell-collapsed body[data-user-id] .app-sidebar__nav {
  padding: 10px 8px 12px;
}

html.app-shell-collapsed body[data-user-id] .app-sidebar__utilities {
  padding: 10px 8px 12px;
}

html.app-shell-collapsed body[data-user-id] .app-sidebar__brand,
html.app-shell-collapsed body[data-user-id] .app-sidebar__link,
html.app-shell-collapsed body[data-user-id] .app-sidebar__utility-btn,
html.app-shell-collapsed body[data-user-id] .app-sidebar__profile-btn,
html.app-shell-collapsed body[data-user-id] .app-sidebar__collapse-btn {
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}

html.app-shell-collapsed body[data-user-id] .app-sidebar__link {
  width: 44px;
  min-height: 44px;
  margin-inline: auto;
  padding: 0;
}

html.app-shell-collapsed body[data-user-id] .app-sidebar__link.is-active {
  background: #8d6342;
  color: #fffaf4;
  box-shadow: none;
}

html.app-shell-collapsed body[data-user-id] .app-sidebar__icon,
html.app-shell-collapsed body[data-user-id] .app-sidebar__svg {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}

html.app-shell-collapsed body[data-user-id] .app-sidebar__utility-btn,
html.app-shell-collapsed body[data-user-id] .app-sidebar__profile-btn {
  width: 44px;
  min-height: 44px;
  margin-inline: auto;
  padding: 0;
}

html.app-shell-collapsed body[data-user-id] .app-sidebar__utility-icon {
  margin-right: 0;
}

html.app-shell-collapsed body[data-user-id] .app-sidebar__brand-mark {
  margin-inline: auto;
}

html.app-shell-collapsed body[data-user-id] .app-sidebar__group {
  margin-top: 12px;
}

@media (max-width: 1023px) {
  body[data-user-id] .app-page--dashboard {
    padding: 20px;
  }

  body[data-user-id] .dashboard-top {
    grid-template-columns: minmax(0, 1fr) minmax(208px, 0.42fr);
    grid-template-areas:
      "content action"
      "content art";
    min-height: 196px;
    padding: 22px;
  }

  body[data-user-id] .dashboard-top__action {
    width: auto;
  }

  body[data-user-id] .dashboard-top__content {
    max-width: 100%;
  }

  body[data-user-id] .dashboard-top__art {
    width: 100%;
    min-height: 116px;
    opacity: 0.78;
  }

  body[data-user-id] .dashboard-grid--top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-user-id] .dashboard-grid--bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-user-id] .dashboard-panel--stats {
    min-height: 240px;
  }

  body[data-user-id] .dashboard-roadmap {
    grid-template-columns: 1fr;
  }

  body[data-user-id] .dashboard-panel__art {
    width: clamp(108px, 28%, 156px);
    opacity: 0.62;
  }
}

@media (max-width: 767px) {
  html {
    --app-main-offset: 0px;
    --app-sidebar-current-width: var(--app-sidebar-width);
  }

  html.app-shell-collapsed body[data-user-id] .app-sidebar__brand-title,
  html.app-shell-collapsed body[data-user-id] .app-sidebar__group-label,
  html.app-shell-collapsed body[data-user-id] .app-sidebar__label,
  html.app-shell-collapsed body[data-user-id] .app-sidebar__utility-label,
  html.app-shell-collapsed body[data-user-id] .app-sidebar__utility-chevron,
  html.app-shell-collapsed body[data-user-id] .app-sidebar__profile-text,
  html.app-shell-collapsed body[data-user-id] .app-sidebar__profile-chevron {
    display: revert !important;
    width: auto !important;
    height: auto !important;
    margin: revert !important;
    padding: revert !important;
    overflow: visible !important;
    visibility: visible !important;
    position: static !important;
    pointer-events: auto !important;
  }

  html.app-shell-collapsed body[data-user-id] .app-sidebar__header {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 10px 0 12px;
    min-height: 68px;
  }

  html.app-shell-collapsed body[data-user-id] .app-sidebar__link,
  html.app-shell-collapsed body[data-user-id] .app-sidebar__utility-btn,
  html.app-shell-collapsed body[data-user-id] .app-sidebar__profile-btn {
    width: 100%;
    margin-inline: 0;
    padding: 9px 10px;
    justify-content: flex-start;
    gap: 11px;
  }

  body[data-user-id] .app-sidebar {
    transform: translateX(-100%);
    transition: transform 180ms ease;
  }

  html.app-shell-drawer-open body[data-user-id] .app-sidebar {
    transform: translateX(0);
  }

  body[data-user-id] .app-header {
    padding: 0 14px;
    width: 100%;
  }

  body[data-user-id] .app-shell__workspace {
    padding: calc(var(--app-header-height) + 16px) 14px 18px;
  }

  body[data-user-id] .dashboard-grid--top,
  body[data-user-id] .dashboard-grid--bottom {
    grid-template-columns: 1fr;
  }

  body[data-user-id] .dashboard-panel {
    min-height: 0;
    padding: 22px;
  }

  body[data-user-id] .app-page--dashboard {
    padding: 15px;
    border-radius: 24px;
  }

  body[data-user-id] .dashboard-panel__hero,
  body[data-user-id] .dashboard-event,
  body[data-user-id] .dashboard-roadmap {
    grid-template-columns: 1fr;
    display: grid;
  }

  body[data-user-id] .dashboard-panel__hero {
    display: flex;
    flex-direction: column;
  }

  body[data-user-id] .dashboard-top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "action"
      "content";
    min-height: 0;
    padding: 20px 18px;
    gap: 12px;
  }

  body[data-user-id] .dashboard-top__content {
    max-width: 100%;
  }

  body[data-user-id] .dashboard-top__art {
    display: none;
  }

  body[data-user-id] .dashboard-panel__icon--lg {
    width: 72px;
    height: 72px;
    flex-basis: 72px;
  }

  body[data-user-id] .dashboard-event__date,
  body[data-user-id] .dashboard-ring {
    width: 100px;
    height: 100px;
  }

  body[data-user-id] .dashboard-panel__art {
    width: 104px;
    opacity: 0.2;
  }

  body[data-user-id] .dashboard-panel__art--deadline,
  body[data-user-id] .dashboard-panel__art--step {
    width: 96px;
  }

  body[data-user-id] .app-header__title {
    font-size: 1.35rem;
  }
}

@media (max-width: 575px) {
  body[data-user-id] .dashboard-top__art {
    display: none;
  }

  body[data-user-id] .dashboard-panel__art {
    display: none;
  }
}


/* ── Universities catalog ── */
.page-universities {
  background: var(--oz-ivory, #e5ded4);
}

.page-university-detail {
  background: #ffffff;
}

/* Compact editorial hero — page-scoped only */
.page-universities .uni-hero {
  position: relative;
  display: block;
  min-height: 0;
  margin: 0 auto 24px;
  padding: 20px var(--space-5, 1.25rem);
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(113, 74, 45, 0.16);
  background: #f7f1ea;
  box-shadow: none;
}

.page-universities .uni-hero .page-hero__ambient {
  display: none;
}

.page-universities .uni-hero__glow {
  position: absolute;
  inset: -20% auto auto 35%;
  width: min(420px, 55%);
  height: 160%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 244, 0.55) 0%, rgba(247, 241, 234, 0) 70%);
  pointer-events: none;
}

.page-universities .uni-hero__layout {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 92px;
}

.page-universities .uni-hero__copy {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 0;
  max-width: 42rem;
}

.page-universities .uni-hero__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 2px 0 0;
  border-radius: 3px;
  background: #efe4d8;
  border: 1px solid rgba(113, 74, 45, 0.18);
  color: #5c4030;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.page-universities .uni-hero__text {
  min-width: 0;
}

.page-universities .uni-hero .page-hero__title,
.page-universities .uni-hero .hero-banner__title {
  margin: 0;
  color: #241810;
  font-size: clamp(1.6rem, 2.5vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.page-universities .uni-hero .page-hero__subtitle,
.page-universities .uni-hero .hero-banner__subtitle {
  margin: 8px 0 0;
  max-width: 36rem;
  color: #76563d;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
}

.page-universities .uni-hero__art {
  flex: 0 0 auto;
  width: min(240px, 30vw);
  color: #8d6342;
  opacity: 0.72;
  pointer-events: none;
}

.page-universities .uni-hero__svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-universities .uni-explore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0 auto 22px;
  padding: 0 var(--space-5, 1.25rem);
}

.page-universities .uni-explore[hidden] {
  display: none !important;
}

.page-universities .uni-explore__label {
  margin: 0;
  color: #76563d;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.page-universities .uni-explore__label[hidden] {
  display: none !important;
}

.page-universities .uni-explore__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.page-universities .uni-explore__chip {
  appearance: none;
  border: 1px solid rgba(113, 74, 45, 0.2);
  background: #faf6f1;
  color: #503829;
  border-radius: 2px;
  padding: 6px 11px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.25;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.page-universities .uni-explore__chip:hover {
  border-color: rgba(113, 74, 45, 0.34);
  background: #fffaf4;
}

.page-universities .uni-explore__chip.is-active {
  border-color: rgba(80, 56, 41, 0.42);
  background: #efe4d8;
  color: #241810;
}

.page-universities .uni-explore__chip--all {
  color: #3c2a20;
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-inline: 6px;
  border-radius: 2px;
}

.page-universities .uni-explore__chip--all.is-active {
  background: transparent;
  border-color: transparent;
}

.page-universities .uni-explore__chip:focus-visible {
  outline: 2px solid #8d6342;
  outline-offset: 2px;
}

.page-universities .uni-catalog {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding-right: max(0px, env(safe-area-inset-right));
  padding-bottom: calc(48px + 88px);
  /* Sticky filters require ancestors not to clip overflow on the Y axis */
  overflow: visible;
}

.page-universities .uni-results {
  padding-right: 12px;
  min-width: 0;
}

.page-universities .uni-sidebar {
  align-self: start;
  position: relative;
  z-index: 2;
}

.page-universities .uni-sidebar__card {
  background: #fbf7f2;
  border: 1px solid rgba(113, 74, 45, 0.16);
  border-radius: 4px;
  box-shadow: none;
  padding: 0;
  position: sticky;
  top: calc(var(--shell-header-offset, 72px) + 16px);
  max-height: calc(100vh - var(--shell-header-offset, 72px) - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 1024px) {
  .page-universities .uni-sidebar__card {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

.page-universities .uni-card {
  background: #faf6f1;
  border: 1px solid rgba(113, 74, 45, 0.16);
  border-radius: 4px;
  box-shadow: none;
}

.page-universities .uni-sidebar__card > .uni-chips,
.page-universities .uni-sidebar__card > .uni-clear-all {
  margin: 14px 16px 0;
}

.page-universities .uni-sidebar__card > .uni-clear-all {
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #8a6a52;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.9;
}

.page-universities .uni-sidebar__card > .uni-clear-all:hover {
  color: #503829;
  opacity: 1;
}

.page-universities .uni-filter-group {
  border-bottom: 1px solid rgba(113, 74, 45, 0.12);
}

.page-universities .uni-filter-group:last-child {
  border-bottom: 0;
}

.page-universities .uni-filter-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  margin: 0;
  border: 0;
  background: transparent;
  color: #2e1f18;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.page-universities .uni-filter-group__header:hover {
  background: rgba(255, 250, 244, 0.65);
}

.page-universities .uni-filter-group__header:focus-visible {
  outline: 2px solid #8d6342;
  outline-offset: -2px;
}

.page-universities .uni-filter-group__label {
  flex: 1;
  min-width: 0;
}

.page-universities .uni-filter-group__chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #76563d;
  border-bottom: 1.5px solid #76563d;
  transform: rotate(45deg);
  transition: transform 160ms ease;
  margin-top: -3px;
  opacity: 0.85;
}

.page-universities .uni-filter-group.is-open .uni-filter-group__chevron {
  transform: rotate(-135deg);
  margin-top: 3px;
}

.page-universities .uni-filter-group__panel {
  display: none;
  padding: 0 16px 16px;
}

.page-universities .uni-filter-group.is-open .uni-filter-group__panel {
  display: block;
}

.page-universities .uni-filter-group__body--scroll {
  max-height: 240px;
  overflow: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(118, 86, 61, 0.35) transparent;
}

.page-universities .uni-filter-group__body--scroll::-webkit-scrollbar {
  width: 5px;
}

.page-universities .uni-filter-group__body--scroll::-webkit-scrollbar-thumb {
  background: rgba(118, 86, 61, 0.3);
  border-radius: 2px;
}

.page-universities .uni-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 7px;
  color: #503829;
  font-size: 0.88rem;
  line-height: 1.35;
  cursor: pointer;
}

.page-universities .uni-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  border: 1.5px solid rgba(80, 56, 41, 0.42);
  border-radius: 2px;
  background: #fffaf4;
  cursor: pointer;
  position: relative;
  accent-color: #503829;
}

.page-universities .uni-check input[type="checkbox"]:checked {
  background: #503829;
  border-color: #503829;
}

.page-universities .uni-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 7px;
  border: solid #f7f1ea;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.page-universities .uni-check input[type="checkbox"]:focus-visible {
  outline: 2px solid #8d6342;
  outline-offset: 2px;
}

.page-universities .uni-search-input {
  width: 100%;
  margin: 0 0 10px;
  padding: 8px 11px;
  border-radius: 3px;
  border: 1px solid rgba(113, 74, 45, 0.18);
  background: #fffaf4;
  color: #3c2a20;
}

.page-universities .uni-search-input:focus-visible {
  outline: 2px solid #8d6342;
  outline-offset: 1px;
}

.page-universities .uni-link-btn,
.page-universities .uni-clear-all {
  margin-top: 4px;
  border: 0;
  background: transparent;
  color: #76563d;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.page-universities .uni-link-btn:focus-visible,
.page-universities .uni-clear-all:focus-visible {
  outline: 2px solid #8d6342;
  outline-offset: 2px;
}

.page-universities .uni-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.page-universities .uni-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(113, 74, 45, 0.18);
  background: #fffaf4;
  color: #503829;
  border-radius: 2px;
  padding: 5px 9px;
  cursor: pointer;
  font-size: 0.8rem;
}

.page-universities .uni-results__head {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(113, 74, 45, 0.12);
}

.page-universities .uni-results__title {
  margin: 0 0 6px;
  color: #241810;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.22;
}

.page-universities .uni-results__count {
  margin: 0;
  color: #8a6a52;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.page-universities .uni-results__sort,
.page-universities .uni-muted,
.page-universities .uni-result-card__place,
.page-universities .uni-result-card__desc {
  color: #76563d;
}

.page-universities .uni-results__sort {
  margin: 6px 0 0;
  font-size: 0.82rem;
}

.page-universities .uni-state {
  margin: 18px 0;
  padding: 16px;
  border-radius: 4px;
  background: #f7f1ea;
  border: 1px solid rgba(113, 74, 45, 0.14);
  color: #503829;
}

.page-universities .uni-state--error {
  border-color: rgba(140, 60, 40, 0.28);
}

.page-universities .uni-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-universities .uni-result-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 196px;
  padding: 20px 20px 18px;
  text-decoration: none;
  color: inherit;
  background: #fffaf6;
  border: 1px solid rgba(113, 74, 45, 0.16);
  border-radius: 4px;
  box-shadow: none;
  overflow: hidden;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.page-universities .uni-result-card:hover {
  border-color: rgba(113, 74, 45, 0.32);
  box-shadow: none;
  background: #fff8f2;
}

.page-universities .uni-result-card:focus-visible {
  outline: 2px solid #8d6342;
  outline-offset: 2px;
  border-color: rgba(113, 74, 45, 0.36);
}

.page-universities .uni-result-card__row {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.page-universities .uni-result-card__main {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 18px;
}

.page-universities .uni-result-card__facts {
  flex: 0 0 128px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  padding: 2px 16px;
  border-left: 1px solid rgba(113, 74, 45, 0.14);
  min-width: 0;
}

.page-universities .uni-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-universities .uni-fact__label {
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #9a7d64;
}

.page-universities .uni-fact__value {
  font-size: 0.86rem;
  font-weight: 600;
  color: #2e1f18;
  line-height: 1.3;
}

.page-universities .uni-result-card__visual,
.page-universities .uni-visual {
  position: relative;
  flex: 0 0 142px;
  width: 142px;
  max-width: 142px;
  min-width: 0;
  align-self: stretch;
  min-height: 148px;
  margin: -4px -4px -4px 0;
  border-radius: 3px;
  overflow: hidden;
  color: #8d6342;
  background: #efe6db;
  border: 1px solid rgba(113, 74, 45, 0.14);
  border-left: 1px solid rgba(113, 74, 45, 0.16);
  pointer-events: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.page-universities .uni-visual__svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-universities .uni-visual__wash {
  fill: rgba(255, 250, 244, 0.28);
}

.page-universities .uni-visual__mono {
  position: absolute;
  right: 11px;
  bottom: 9px;
  z-index: 1;
  font-family: inherit;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: rgba(80, 56, 41, 0.26);
  user-select: none;
}

.page-universities .uni-visual__photo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  object-fit: cover;
  object-position: center;
  transition: filter 160ms ease;
}

.page-universities .uni-visual__photo[hidden] {
  display: none !important;
}

.page-universities .uni-result-card:hover .uni-visual--has-photo .uni-visual__photo:not([hidden]),
.page-universities .uni-result-card:focus-visible .uni-visual--has-photo .uni-visual__photo:not([hidden]) {
  filter: brightness(0.96);
}

.page-universities .uni-visual--arches {
  color: #8a6244;
  background: #efe6db;
}

.page-universities .uni-visual--facade {
  color: #7a573c;
  background: #ebe1d4;
}

.page-universities .uni-visual--globe {
  color: #856142;
  background: #f0e7dc;
}

.page-universities .uni-visual--constellation {
  color: #7d5c40;
  background: #eee5d9;
}

.page-universities .uni-visual--towers {
  color: #815f43;
  background: #ece2d5;
}

.page-universities .uni-result-card:hover .uni-visual,
.page-universities .uni-result-card:focus-visible .uni-visual {
  background: #e6d9c9;
  border-color: rgba(113, 74, 45, 0.22);
  color: #6f4e34;
  opacity: 1;
  filter: none;
}

.page-universities .uni-result-card__logo {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
}

.page-universities .uni-result-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
}

.page-universities .uni-result-card__name {
  margin: 0;
  color: #241810;
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.26;
}

.page-universities .uni-result-card__place {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #8a6a52;
}

.page-universities .uni-result-card__modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.page-universities .uni-result-card__desc {
  margin: 8px 0 0;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.55;
  max-width: 52ch;
  color: #76563d;
}

.page-universities .uni-result-card__cta {
  margin-top: auto;
  align-self: flex-end;
  display: inline-block;
  padding: 0 4px 0 0;
  border: 0;
  background: transparent;
  color: #2e1f18;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  text-underline-offset: 3px;
  width: auto;
  min-height: 0;
  border-radius: 0;
}

.page-universities .uni-result-card:hover .uni-result-card__cta,
.page-universities .uni-result-card:focus-visible .uni-result-card__cta {
  text-decoration: underline;
}

.page-universities .uni-logo,
.page-universities .uni-logo-fallback {
  width: 56px;
  height: 56px;
  border-radius: 3px;
  flex: 0 0 auto;
  object-fit: contain;
  background: #efe4d8;
  border: 1px solid rgba(113, 74, 45, 0.16);
  box-shadow: none;
}

.page-universities .uni-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5c4030;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

.page-universities .uni-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 2px;
  background: #f1e8de;
  border: 1px solid rgba(113, 74, 45, 0.16);
  color: #5c4030;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.35;
}

.page-universities .uni-badge--mode {
  background: #efe4d8;
}

/* Shared University surfaces used by detail (unchanged soft geometry) */
.uni-card {
  background: #faf6f1;
  border: 1px solid rgba(113, 74, 45, 0.14);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(80, 56, 41, 0.04);
}

.uni-logo,
.uni-logo-fallback {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  flex: 0 0 auto;
  object-fit: contain;
  background: #efe4d8;
}

.uni-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(113, 74, 45, 0.14);
  color: #5c4030;
  font-weight: 800;
  font-size: 0.92rem;
}

.uni-muted,
.uni-verified-placeholder,
.uni-detail__location {
  color: #76563d;
}

/* Detail page — editorial profile (scoped to .page-university-detail only) */
.page-university-detail .shell-main,
.page-university-detail .uni-detail {
  background: #f7f1e8;
}

.page-university-detail .uni-detail {
  --upd-ink: #2a1d18;
  --upd-muted: #6f5240;
  --upd-rule: rgba(113, 74, 45, 0.18);
  --upd-surface: #faf6f1;
  --upd-accent: #8d6342;
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 0 56px;
  color: var(--upd-ink);
}

.page-university-detail .uni-detail__back {
  margin: 0 0 18px;
}

.page-university-detail .uni-detail__back a {
  color: var(--upd-muted);
  font-weight: 650;
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-university-detail .uni-detail__back a:hover,
.page-university-detail .uni-detail__back a:focus-visible {
  color: var(--upd-ink);
  border-bottom-color: rgba(113, 74, 45, 0.35);
  outline: none;
}

.page-university-detail .uni-detail__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.85fr);
  gap: 22px;
  align-items: stretch;
  padding: 22px;
  margin: 0 0 18px;
  background: var(--upd-surface);
  border: 1px solid var(--upd-rule);
  border-radius: 5px;
  overflow: hidden;
}

.page-university-detail .uni-detail__hero-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-university-detail .uni-detail__brand {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
}

.page-university-detail .uni-detail__logo,
.page-university-detail .uni-detail__logo-fallback {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border-radius: 5px;
  object-fit: contain;
  background: #efe4d8;
  border: 1px solid rgba(113, 74, 45, 0.16);
}

.page-university-detail .uni-detail__logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5c4030;
  font-weight: 750;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}

.page-university-detail .uni-detail__identity {
  min-width: 0;
}

.page-university-detail .uni-detail__title {
  margin: 0;
  color: var(--upd-ink);
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.page-university-detail .uni-detail__location {
  margin: 6px 0 0;
  color: var(--upd-muted);
  font-size: 0.95rem;
  font-weight: 550;
}

.page-university-detail .uni-detail__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-university-detail .uni-detail__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 3px;
  background: #efe4d8;
  border: 1px solid rgba(113, 74, 45, 0.16);
  color: #5c4030;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.35;
}

.page-university-detail .uni-detail__lede {
  margin: 0;
  max-width: 46ch;
  color: #5f4636;
  font-size: 1rem;
  line-height: 1.55;
}

.page-university-detail .uni-detail__actions {
  margin: 2px 0 0;
}

.page-university-detail .uni-detail__cta,
.page-university-detail .uni-detail__ext-link {
  color: var(--upd-ink);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  word-break: break-word;
}

.page-university-detail .uni-detail__cta:hover,
.page-university-detail .uni-detail__ext-link:hover,
.page-university-detail .uni-detail__cta:focus-visible,
.page-university-detail .uni-detail__ext-link:focus-visible {
  color: #5a3d2a;
  outline: 2px solid rgba(113, 74, 45, 0.35);
  outline-offset: 3px;
}

.page-university-detail .uni-detail__visual {
  position: relative;
  min-height: 180px;
  border-radius: 4px;
  overflow: hidden;
  background: #efe6db;
  border: 1px solid rgba(113, 74, 45, 0.14);
  color: var(--upd-accent);
}

.page-university-detail .uni-detail__visual-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-university-detail .uni-detail__visual-svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.page-university-detail .uni-detail__visual-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border: 0;
}

.page-university-detail .uni-detail__visual-photo[hidden] {
  display: none !important;
}

.page-university-detail .uni-detail__section {
  padding: 20px 22px;
  margin: 0 0 14px;
  background: var(--upd-surface);
  border: 1px solid var(--upd-rule);
  border-radius: 5px;
}

.page-university-detail .uni-detail__section-head {
  margin: 0 0 14px;
}

.page-university-detail .uni-detail__h {
  margin: 0;
  color: var(--upd-ink);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-university-detail .uni-detail__rule {
  margin-top: 10px;
  height: 1px;
  background: var(--upd-rule);
}

.page-university-detail .uni-detail__facts {
  margin: 0;
  display: grid;
  gap: 0;
}

.page-university-detail .uni-detail__fact {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 12px 18px;
  padding: 12px 0;
  border-top: 1px solid rgba(113, 74, 45, 0.1);
}

.page-university-detail .uni-detail__fact:first-child {
  border-top: 0;
  padding-top: 2px;
}

.page-university-detail .uni-detail__fact dt {
  margin: 0;
  color: #8a6a52;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.page-university-detail .uni-detail__fact dd {
  margin: 0;
  color: var(--upd-ink);
  font-size: 0.95rem;
  line-height: 1.45;
  min-width: 0;
}

.page-university-detail .uni-detail__prose {
  margin: 0;
  color: #5f4636;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 68ch;
}

.page-university-detail .uni-detail__fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.page-university-detail .uni-detail__field {
  padding: 8px 10px;
  border-radius: 3px;
  background: #f3ebe2;
  border: 1px solid rgba(113, 74, 45, 0.12);
  color: #503829;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
}

.page-university-detail .uni-detail__empty {
  margin: 0;
  padding: 14px 16px;
  border-radius: 4px;
  background: #f3ebe2;
  border: 1px dashed rgba(113, 74, 45, 0.22);
  color: var(--upd-muted);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
}

.page-university-detail .uni-detail__programmes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-university-detail .uni-detail__programme {
  padding: 14px 16px;
  border-radius: 8px;
  background: #fffaf4;
  border: 1px solid rgba(113, 74, 45, 0.14);
}

.page-university-detail .uni-detail__programme-title {
  margin: 0 0 8px;
  font-size: 1.02rem;
  color: var(--upd-ink, #251a16);
  line-height: 1.35;
}

.page-university-detail .uni-detail__programme-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  color: #5f4636;
  font-size: 0.9rem;
  line-height: 1.45;
}

.page-university-detail .uni-detail__programme-note {
  margin: 10px 0 0;
  font-size: 0.85rem;
}

.page-university-detail .uni-detail__programme-actions {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-university-detail .uni-detail__badge-inline {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(141, 99, 66, 0.12);
  color: #6d4b34;
  font-weight: 700;
  font-size: 0.8rem;
}

.page-university-detail .uni-detail__review-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.page-university-detail .uni-detail__stars {
  color: #8d6342;
  letter-spacing: 1px;
}

.page-university-detail .uni-detail__verified {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(70, 120, 80, 0.14);
  color: #2f5a3a;
  font-size: 0.75rem;
  font-weight: 700;
}

.page-university-detail .uni-detail__review-meta {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.82rem;
}

.page-university-detail .uni-detail__review-form {
  margin-top: 16px;
  padding: 16px;
  border-radius: 8px;
  background: #f8f1e8;
  border: 1px solid rgba(113, 74, 45, 0.14);
  display: grid;
  gap: 8px;
  max-width: 640px;
}

.page-university-detail .uni-detail__h--sub {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.page-university-detail .uni-detail__form-error {
  margin: 0;
  color: #8a2f2f;
  font-weight: 600;
}

.page-university-detail .uni-detail__form-success {
  margin: 0;
  color: #2f5a3a;
  font-weight: 600;
}

.page-university-detail .uni-detail__reviews {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-university-detail .uni-detail__review {
  padding: 12px 14px;
  border-radius: 4px;
  background: #fffaf4;
  border: 1px solid rgba(113, 74, 45, 0.12);
}

.page-university-detail .uni-detail__review-title {
  margin: 0 0 6px;
  color: var(--upd-ink);
  font-size: 0.98rem;
}

.page-university-detail .uni-detail__review-body {
  margin: 0;
  color: #5f4636;
  line-height: 1.55;
}

@media (max-width: 1023px) {
  .page-university-detail .uni-detail__hero {
    grid-template-columns: 1fr;
  }

  .page-university-detail .uni-detail__visual {
    display: none;
  }
}

@media (max-width: 768px) {
  .page-university-detail .uni-detail {
    padding-bottom: 40px;
  }

  .page-university-detail .uni-detail__hero,
  .page-university-detail .uni-detail__section {
    padding: 16px;
    border-radius: 4px;
  }

  .page-university-detail .uni-detail__fact {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .page-university-detail .uni-detail__fields {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 375px) {
  .page-university-detail .uni-detail__fields {
    grid-template-columns: 1fr;
  }

  .page-university-detail .uni-detail__brand {
    gap: 12px;
  }

  .page-university-detail .uni-detail__logo,
  .page-university-detail .uni-detail__logo-fallback {
    width: 60px;
    height: 60px;
  }

  .page-university-detail .uni-detail__title {
    font-size: 1.28rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-university-detail .uni-detail__cta,
  .page-university-detail .uni-detail__ext-link,
  .page-university-detail .uni-detail__back a {
    transition: none;
  }
}

.uni-muted,
.uni-verified-placeholder,
.uni-detail__location {
  color: #76563d;
}

.uni-verified-placeholder {
  margin: 0;
  font-weight: 600;
}

@media (max-width: 1023px) {
  .page-universities .uni-hero__art {
    width: min(200px, 26vw);
    opacity: 0.66;
  }

  .page-universities .uni-result-card__visual,
  .page-universities .uni-visual {
    display: none;
  }

  .page-universities .uni-result-card__main {
    padding-right: 0;
  }
}

@media (max-width: 900px) {
  .page-universities .uni-result-card__facts {
    display: none;
  }

  .page-universities .uni-result-card__row {
    display: block;
  }
}

@media (max-width: 960px) {
  .page-universities .uni-hero {
    margin-bottom: 18px;
    padding: 16px 16px;
    border-radius: 4px;
  }

  .page-universities .uni-hero__layout {
    min-height: 0;
  }

  .page-universities .uni-hero__art {
    display: none;
  }

  .page-universities .uni-explore {
    margin-bottom: 16px;
  }

  .page-universities .uni-explore__label[hidden] {
    display: none !important;
  }

  .page-universities .uni-catalog {
    grid-template-columns: 1fr;
    padding-bottom: calc(40px + 96px);
  }

  .page-universities .uni-sidebar__card {
    position: static;
  }

  .page-universities .uni-results {
    padding-right: 0;
  }

  .page-universities .uni-result-card {
    min-height: 0;
    padding: 16px;
    border-radius: 4px;
  }

  .page-universities .uni-result-card__cta {
    align-self: flex-start;
  }
}

@media (max-width: 560px) {
  .page-universities .uni-hero {
    padding: 14px;
    border-radius: 4px;
  }

  .page-universities .uni-hero__copy {
    gap: 12px;
  }

  .page-universities .uni-hero__icon {
    width: 40px;
    height: 40px;
    border-radius: 3px;
  }

  .page-universities .uni-result-card__main {
    gap: 12px;
  }

  .page-universities .uni-result-card__logo,
  .page-universities .uni-logo,
  .page-universities .uni-logo-fallback {
    width: 52px;
    height: 52px;
    border-radius: 3px;
  }

  .page-universities .uni-result-card__name {
    font-size: 1.05rem;
  }

  .page-universities .uni-catalog {
    padding-bottom: calc(36px + 104px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-universities .uni-result-card,
  .page-universities .uni-result-card:hover,
  .page-universities .uni-result-card:focus-visible,
  .page-universities .uni-visual,
  .page-universities .uni-filter-group__chevron,
  .page-universities .uni-filter-group__header,
  .page-universities .uni-explore__chip {
    transition: none;
  }
}

/* International opportunities catalog */
.page-opportunities .opp-catalog {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 1.5rem;
  padding-block: 1.25rem 2.5rem;
}
.page-opportunities .opp-sidebar {
  position: sticky;
  top: 5.5rem;
  align-self: start;
}
.page-opportunities .opp-filters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.page-opportunities .opp-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.page-opportunities .opp-field input,
.page-opportunities .opp-field select {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--border, #c9c4bb) 80%, transparent);
  background: var(--surface, #fff);
  color: inherit;
  border-radius: 6px;
  padding: 0.45rem 0.55rem;
}
.page-opportunities .opp-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.page-opportunities .opp-load-error {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, #b42318 35%, transparent);
  background: color-mix(in srgb, #b42318 10%, transparent);
  color: inherit;
  font-size: 0.9rem;
}

.page-opportunities .opp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
.page-opportunities .opp-card {
  border: 1px solid color-mix(in srgb, var(--border, #c9c4bb) 70%, transparent);
  border-radius: 8px;
  background: var(--surface, #fff);
}
.page-opportunities .opp-card__link {
  display: block;
  padding: 1rem 1.1rem;
  color: inherit;
  text-decoration: none;
}
.page-opportunities .opp-card__title {
  margin: 0.45rem 0 0.25rem;
  font-size: 1.05rem;
  line-height: 1.3;
}
.page-opportunities .opp-card__org,
.page-opportunities .opp-card__meta,
.page-opportunities .opp-card__themes {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  opacity: 0.85;
}
.page-opportunities .opp-card__badges,
.page-opportunity-detail .opp-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.opp-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--border, #c9c4bb) 80%, transparent);
  background: color-mix(in srgb, var(--surface, #fff) 92%, #888 8%);
}
.opp-badge--open {
  border-color: color-mix(in srgb, #1f7a4d 45%, transparent);
  background: color-mix(in srgb, #1f7a4d 14%, transparent);
}
.opp-badge--monitor,
.opp-badge--unconfirmed,
.opp-badge--closed,
.opp-badge--not-eligible,
.opp-badge--upcoming,
.opp-badge--rolling {
  opacity: 0.95;
}
.page-opportunity-detail .opp-detail__hero {
  margin-bottom: 1.5rem;
}
.page-opportunity-detail .opp-detail__title {
  margin: 0.35rem 0 0.75rem;
}
.page-opportunity-detail .opp-detail__organizer {
  margin: 0;
  opacity: 0.8;
}
.page-opportunity-detail .opp-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem 1.25rem;
  margin: 0 0 1.5rem;
}
.page-opportunity-detail .opp-detail__grid dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
}
.page-opportunity-detail .opp-detail__grid dd {
  margin: 0.2rem 0 0;
}
.page-opportunity-detail .opp-detail__section {
  margin-bottom: 1.25rem;
}
.page-opportunity-detail .opp-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
@media (max-width: 900px) {
  .page-opportunities .opp-catalog {
    grid-template-columns: 1fr;
  }
  .page-opportunities .opp-sidebar {
    position: static;
  }
}
.page-opportunities .opp-load-error {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, #b42318 35%, transparent);
  background: color-mix(in srgb, #b42318 10%, transparent);
  font-size: 0.9rem;
}


/* App shell profile link + logout */
.app-sidebar__profile {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.app-sidebar__profile-link {
  flex: 1;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.app-sidebar__profile-link:hover,
.app-sidebar__profile-link:focus-visible {
  outline: 2px solid rgba(118, 86, 61, 0.45);
  outline-offset: 2px;
  border-radius: 12px;
}
.app-sidebar__logout-form { margin: 0; flex-shrink: 0; }
.app-sidebar__logout-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid rgba(182, 157, 132, 0.35);
  background: rgba(246, 239, 231, 0.9);
  color: #6B4328;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-sidebar__logout-btn:hover,
.app-sidebar__logout-btn:focus-visible {
  background: #6B4328;
  color: #fff;
}
.app-header__logout-form { margin: 0; display: inline-flex; }

/* Lesson evidence */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  cursor: pointer;
}
.form-check__input {
  margin-top: 0.15rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--oz-chestnut, #76563D);
  flex-shrink: 0;
}
.form-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text, #3F281B);
}
.form-textarea,
textarea.form-textarea {
  display: block;
  width: 100%;
  min-height: 6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(182, 157, 132, 0.4);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text, #3F281B);
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}
.form-textarea:focus,
textarea.form-textarea:focus {
  outline: 2px solid var(--oz-chestnut, #76563D);
  outline-offset: 1px;
  border-color: var(--oz-chestnut, #76563D);
}

.lesson-evidence-panel {
  margin-top: 0.75rem;
  padding: 0.85rem;
  border: 1px solid rgba(182, 157, 132, 0.35);
  border-radius: 12px;
  background: #F6EFE7;
}
.lesson-evidence-panel .form-textarea,
.lesson-evidence-panel textarea {
  width: 100%;
  min-height: 6rem;
  margin: 0.4rem 0;
}
.lesson-evidence-panel__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.lesson-evidence-trigger.form-check {
  margin: 0;
}
.lesson-status-pill {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(118, 86, 61, 0.12);
  color: #3F281B;
}
.lesson-status-pill--approved,
.lesson-status-pill--completed { background: rgba(34, 160, 107, 0.16); color: #1b7a4f; }
.lesson-status-pill--needs_revision { background: rgba(200, 120, 40, 0.16); color: #9a5a18; }
.lesson-status-pill--pending,
.lesson-status-pill--manual_review,
.lesson-status-pill--in_review { background: rgba(180, 130, 50, 0.14); color: #8a6420; }


.courses-help__details {
  border: 1px solid rgba(80, 56, 41, 0.14);
  border-radius: 12px;
  background: rgba(255, 252, 248, 0.8);
  padding: 0.4rem 1rem 0.85rem;
}
.courses-help__details summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.5rem 0;
}
.courses-help__list {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.4rem;
  color: rgba(80, 56, 41, 0.88);
}