/* school-portal/css/style.css */
:root {
  /* Primitive Color Tokens */
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-cream-50: rgba(252, 252, 249, 1);
  --color-cream-100: rgba(255, 255, 253, 1);
  --color-gray-200: rgba(245, 245, 245, 1);
  --color-gray-300: rgba(167, 169, 169, 1);
  --color-gray-400: rgba(119, 124, 124, 1);
  --color-slate-500: rgba(98, 108, 113, 1);
  --color-brown-600: rgba(94, 82, 64, 1);
  --color-charcoal-700: rgba(31, 33, 33, 1);
  --color-charcoal-800: rgba(38, 40, 40, 1);
  --color-slate-900: rgba(19, 52, 59, 1);
  --color-teal-300: rgba(50, 184, 198, 1);
  --color-teal-400: rgba(45, 166, 178, 1);
  --color-teal-500: rgba(33, 128, 141, 1);
  --color-teal-600: rgba(29, 116, 128, 1);
  --color-teal-700: rgba(26, 104, 115, 1);
  --color-teal-800: rgba(41, 150, 161, 1);
  --color-red-400: rgba(255, 84, 89, 1);
  --color-red-500: rgba(192, 21, 47, 1);
  --color-orange-400: rgba(230, 129, 97, 1);
  --color-orange-500: rgba(168, 75, 47, 1);

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  --color-slate-500-rgb: 98, 108, 113;
  --color-red-500-rgb: 192, 21, 47;
  --color-red-400-rgb: 255, 84, 89;
  --color-orange-500-rgb: 168, 75, 47;
  --color-orange-400-rgb: 230, 129, 97;

  /* Background color tokens (Light Mode) */
  --color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
  --color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
  --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
  --color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
  --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
  --color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
  --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
  --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-white);
  --color-surface: var(--color-gray-200);
  --color-text: var(--color-charcoal-700);
  --color-text-secondary: var(--color-brown-600);
  --color-primary: var(--color-teal-700);
  --color-primary-hover: var(--color-teal-800);
  --color-primary-active: var(--color-slate-900);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.15);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.25);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.3);
  --color-border: rgba(var(--color-brown-600-rgb), 0.25);
  --color-btn-primary-text: var(--color-white);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.15);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-700);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-900);
  --color-focus-ring: rgba(var(--color-teal-700-rgb), 0.4);
  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

  /* Common style patterns */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for opacity control */
  --color-success-rgb: 33, 128, 141;
  --color-error-rgb: 192, 21, 47;
  --color-warning-rgb: 168, 75, 47;
  --color-info-rgb: 98, 108, 113;

  /* Typography */
  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  /* Header / topbar height used for spacing calculations */
  --header-height: -180px;

  /* Hero tuning */
  --hero-blur-light: 6px;
  --hero-blur-dark: 6px;
  --hero-overlay-light-start: 0.45;
  --hero-overlay-light-end: 0.35;
  --hero-overlay-dark-start: 0.6;
  --hero-overlay-dark-end: 0.4;
}

/* Base styles */
html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

h1 {
  font-size: var(--font-size-4xl);
}
h2 {
  font-size: var(--font-size-3xl);
}
h3 {
  font-size: var(--font-size-2xl);
}
h4 {
  font-size: var(--font-size-xl);
}
h5 {
  font-size: var(--font-size-lg);
}
h6 {
  font-size: var(--font-size-md);
}

p {
  margin: 0 0 var(--space-16) 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-primary-hover);
}

code,
pre {
  font-family: var(--font-family-mono);
  font-size: calc(var(--font-size-base) * 0.95);
  background-color: var(--color-secondary);
  border-radius: var(--radius-sm);
}

code {
  padding: var(--space-1) var(--space-4);
}

pre {
  padding: var(--space-16);
  margin: var(--space-16) 0;
  overflow: auto;
  border: 1px solid var(--color-border);
}

pre code {
  background: none;
  padding: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  border: none;
  text-decoration: none;
  position: relative;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
}

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

.btn--primary:active {
  background: var(--color-primary-active);
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn--secondary:hover {
  background: var(--color-secondary-hover);
}

.btn--secondary:active {
  background: var(--color-secondary-active);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn--outline:hover {
  background: var(--color-secondary);
}

.btn--sm {
  padding: var(--space-4) var(--space-12);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: var(--space-10) var(--space-20);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
}

.btn--full-width {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form elements */
.form-control {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-control {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

select.form-control {
  padding: var(--space-8) var(--space-12);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--select-caret-light);
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  background-size: 16px;
  padding-right: var(--space-32);
}

/* Also handle data-color-scheme */
[data-theme="dark"] select.form-control {
  background-image: var(--select-caret-dark);
}

[data-theme="light"] select.form-control {
  background-image: var(--select-caret-light);
}

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

.form-label {
  display: block;
  margin-bottom: var(--space-8);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.form-group {
  margin-bottom: var(--space-16);

}

/* Card component */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__body {
  padding: var(--space-16);
}

.card__header,
.card__footer {
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-card-border-inner);
}

/* Status indicators - simplified with CSS variables */
.status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.status--success {
  background-color: rgba(
    var(--color-success-rgb, 33, 128, 141),
    var(--status-bg-opacity)
  );
  color: var(--color-success);
  border: 1px solid
    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}

.status--error {
  background-color: rgba(
    var(--color-error-rgb, 192, 21, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-error);
  border: 1px solid
    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}

.status--warning {
  background-color: rgba(
    var(--color-warning-rgb, 168, 75, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-warning);
  border: 1px solid
    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}

.status--info {
  background-color: rgba(
    var(--color-info-rgb, 98, 108, 113),
    var(--status-bg-opacity)
  );
  color: var(--color-info);
  border: 1px solid
    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}

/* Container layout */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-16);
  padding-left: var(--space-16);
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}
@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* Utility classes */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-4 {
  gap: var(--space-4);
}
.gap-8 {
  gap: var(--space-8);
}
.gap-16 {
  gap: var(--space-16);
}

.m-0 {
  margin: 0;
}
.mt-8 {
  margin-top: var(--space-8);
}
.mb-8 {
  margin-bottom: var(--space-8);
}
.mx-8 {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}
.my-8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.p-0 {
  padding: 0;
}
.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
.py-16 {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.px-16 {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}

.block {
  display: block;
}
.hidden {
  display: none;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);

  border-width: 0;
}

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* Dark mode specifics */
[data-theme="dark"] .btn--outline {
  border: 1px solid var(--color-border-secondary);
}

@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
    format('woff2');
}

/* END PERPLEXITY DESIGN SYSTEM */
/* Design System Variables */
:root {
  /* Primitive Color Tokens */
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-cream-50: rgba(252, 252, 249, 1);
  --color-cream-100: rgba(255, 255, 253, 1);
  --color-gray-200: rgba(245, 245, 245, 1);
  --color-gray-300: rgba(167, 169, 169, 1);
  --color-gray-400: rgba(119, 124, 124, 1);
  --color-slate-500: rgba(98, 108, 113, 1);
  --color-brown-600: rgba(94, 82, 64, 1);
  --color-charcoal-700: rgba(31, 33, 33, 1);
  --color-charcoal-800: rgba(38, 40, 40, 1);
  --color-slate-900: rgba(19, 52, 59, 1);
  --color-teal-300: rgba(50, 184, 198, 1);
  --color-teal-400: rgba(45, 166, 178, 1);
  --color-teal-500: rgba(33, 128, 141, 1);
  --color-teal-600: rgba(29, 116, 128, 1);
  --color-teal-700: rgba(26, 104, 115, 1);
  --color-teal-800: rgba(41, 150, 161, 1);
  --color-red-400: rgba(255, 84, 89, 1);
  --color-red-500: rgba(192, 21, 47, 1);
  --color-orange-400: rgba(230, 129, 97, 1);
  --color-orange-500: rgba(168, 75, 47, 1);

  /* Deep Red Theme Colors */
  --color-primary: #C62828;
  --color-primary-dark: #B71C1C;
  --color-primary-light: #D32F2F;
  --color-accent: #E53935;

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  --color-slate-500-rgb: 98, 108, 113;
  --color-red-500-rgb: 192, 21, 47;
  --color-red-400-rgb: 255, 84, 89;
  --color-orange-500-rgb: 168, 75, 47;
  --color-orange-400-rgb: 230, 129, 97;

  /* Background color tokens (Light Mode) */
  --color-bg-1: rgba(198, 40, 40, 0.08);
  --color-bg-2: rgba(245, 158, 11, 0.08);
  --color-bg-3: rgba(34, 197, 94, 0.08);
  --color-bg-4: rgba(239, 68, 68, 0.08);
  --color-bg-5: rgba(147, 51, 234, 0.08);
  --color-bg-6: rgba(249, 115, 22, 0.08);
  --color-bg-7: rgba(236, 72, 153, 0.08);
  --color-bg-8: rgba(6, 182, 212, 0.08);

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-primary);
  --color-success: #2E7D32;
  --color-warning: #FB8C00;
  --color-info: #1976D2;
  --color-focus-ring: rgba(198, 40, 40, 0.4);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);

  /* Typography */
  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}

[data-theme="dark"] {
  --color-gray-400-rgb: 119, 124, 124;
  --color-teal-300-rgb: 50, 184, 198;
  --color-gray-300-rgb: 167, 169, 169;
  --color-gray-200-rgb: 245, 245, 245;

  --color-bg-1: rgba(139, 26, 26, 0.2);
  --color-bg-2: rgba(180, 83, 9, 0.15);
  --color-bg-3: rgba(21, 128, 61, 0.15);
  --color-bg-4: rgba(185, 28, 28, 0.15);
  --color-bg-5: rgba(107, 33, 168, 0.15);
  --color-bg-6: rgba(194, 65, 12, 0.15);
  --color-bg-7: rgba(190, 24, 93, 0.15);
  --color-bg-8: rgba(8, 145, 178, 0.15);

  --color-background: var(--color-charcoal-700);
  --color-surface: var(--color-charcoal-800);
  --color-text: var(--color-gray-200);
  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
  --color-primary: #EF5350;
  --color-primary-light: #E57373;
  --color-primary-dark: #C62828;
  --color-accent: #EF5350;
  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
  --color-error: var(--color-red-400);
  --color-success: #66BB6A;
  --color-warning: #FFA726;
  --color-info: var(--color-gray-300);
  --color-focus-ring: rgba(239, 83, 80, 0.4);
  --color-btn-primary-text: var(--color-charcoal-700);
  --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  /* Dark theme hero tuning (can be tweaked via JS if needed) */
  --hero-blur-dark: 6px;
  --hero-overlay-dark-start: 0.6;
  --hero-overlay-dark-end: 0.42;
  /* Layout variables */
  --header-height: -180px; /* default header / topbar height */
  --z-topbar: 220;
  --z-overlay: 250;
  --z-sidebar: 300;
}

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') format('woff2');
}

html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  /* Use header height variable so fixed header spacing stays consistent */
  scroll-padding-top: var(--header-height);
    overflow-x: hidden; /* Prevent horizontal scroll and clip elements */
}

/* View Management */
.view {
  display: none;
}

.view.active {
  display: block;
}

/* Container */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-16);
  padding-left: var(--space-16);
  max-width: var(--container-xl);
}

/* LANDING PAGE STYLES */

/* Header */
.landing-header {
  background: rgba(38, 40, 40, 0.85);
  backdrop-filter: blur(8px);
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  line-height: var(--header-height);
  border-bottom: 1px solid var(--color-border);
  padding: 0; /* use height to control spacing */
  z-index: var(--z-topbar);
}

[data-theme="dark"] .landing-header {
  background: rgba(31, 33, 33, 0.9);
}

[data-theme="light"] .landing-header {
  background: rgba(255, 255, 255, 0.95);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.logo-circle {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  /* Remove decorative gradient so uploaded logo displays without a colored backdrop */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
}

.logo-circle.small {
  width: 40px;
  height: 40px;
  font-size: var(--font-size-base);
}

/* Logo image sizing: fit uploaded logo into existing circular containers */
.logo-circle img,
.school-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: inherit;
}

.school-name {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}

.landing-nav {
  display: flex;
  gap: var(--space-24);
}

.nav-link {
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: all var(--duration-fast) var(--ease-standard);
  position: relative;
  padding: var(--space-4) 0;
}

.nav-link:hover {
  color: var(--color-primary);
}

/* Add underline effect on hover */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--duration-normal) var(--ease-standard);
}

.nav-link:hover::after {
  width: 100%;
}

[data-theme="light"] .nav-link {
  color: var(--color-charcoal-700);
}

[data-theme="light"] .nav-link:hover {
  color: var(--color-primary);
}

[data-theme="light"] .school-name {
  color: var(--color-charcoal-700);
}

.hero-section {
    position: relative;
    min-height: 75vh;
    max-height: 75vh;
    display: flex;
    align-items: center;
    overflow: hidden;
  /* Ensure content appears below fixed header consistently */
  /* Make default (light theme) hero top match and add 20px for spacing */
  margin-top: calc(var(--header-height) + 20px);
    padding: 80px 0;
    z-index: 1;
    background-color: var(--color-background);
    color: var(--color-text);
    /* Ensure hero background images behave consistently */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
    /* Fallback image when no theme attribute is present yet */
    background-image: url(/images/background_light.jpg);
}

[data-theme="dark"] .hero-section {
  background-color: #0d1117;
  color: #e6edf3;
  /* Dark theme: add a subtle dark scrim for readable contrast over the image */
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.18)),
    url(/images/background_dark.jpg);
}

/* Light theme: explicit image + light scrim for contrast */
[data-theme="light"] .hero-section {
  background-color: var(--color-background);
  color: var(--color-text);
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.28)),
    url(/images/background_light.jpg);
}

.hero-pattern-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  color: var(--color-text);
}

/* Hide pattern layer inside hero when using photographic backgrounds */
.hero-section .hero-pattern-bg {
  display: none;
}

[data-theme="dark"] .hero-pattern-bg {
  color: #21262d;
  opacity: 0.4;
}

[data-theme="light"] .hero-pattern-bg {
  color: #d0d7de;
  opacity: 0.3;
}

/* Hero wrapper with left-aligned content and right illustration */
.hero-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding: 0 24px 0 2px;
  overflow: visible; /* Allow hexagon to extend beyond */
}

/* Left content area */
.hero-content {
  flex: 1;
  max-width: 720px;
  text-align: left;
  padding-right: 120px;
  margin-left: 0; /* reset negative nudge to avoid overlapping timeline */
}

/* Eyebrow label (TOOLS) */
.hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
  opacity: 0.8;
}

[data-theme="dark"] .hero-eyebrow {
  color: #7d8590;
}

/* Hero title with gradient */
.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 24px;

}

.hero-title-secondary {
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.02em;
  display: block; /* Force Portal to a new line */
}

[data-theme="dark"] .hero-title-secondary {
  color: #c9d1d9;
}

.text-gradient {
  background: linear-gradient(135deg, #ff6b9d 0%, #c62828 35%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  white-space: nowrap; /* Keep "Jeopardy Academy" on the same line */
}

[data-theme="dark"] .text-gradient {
  background: linear-gradient(135deg, #ff6b9d 0%, #f97583 50%, #79c0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Subtitle */
.hero-subtitle {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: 32px;
  max-width: 580px;
}

[data-theme="dark"] .hero-subtitle {
  color: #8b949e;
}

/* Meta information row (ACTION ITEMS, FREE BENEFITS, etc.) */
.hero-meta {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

[data-theme="dark"] .hero-meta {
  border-color: #21262d;
}

.hero-meta-item {
  flex: 0 0 auto;
}

.meta-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  opacity: 0.7;
}

[data-theme="dark"] .meta-label {
  color: #7d8590;
}

.meta-value {
  font-size: 13px;
  color: var(--color-text);
  font-weight: 500;
}

[data-theme="dark"] .meta-value {
  color: #e6edf3;
}

.meta-icons {
  display: flex;
  gap: 8px;
}

.meta-icons svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  opacity: 0.8;
}

/* CTA buttons */
.hero-cta-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
}

.btn--primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

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

[data-theme="dark"] .btn--secondary {
  background: #21262d;
  color: #e6edf3;
  border-color: #30363d;
}

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

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .btn--outline {
  border-color: #30363d;
  color: #e6edf3;
}

.btn--outline:hover {
  background: var(--color-secondary);
  border-color: var(--color-primary);
}

.btn--lg {
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 200ms ease;
}

.btn--lg svg {
  width: 18px;
  height: 18px;
}

/* Right illustration area */
.hero-illustration-wrapper {
  flex: 0 0 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-illustration {
  width: 100%;
  max-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-illustration svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.08));
}

[data-theme="dark"] .hero-illustration svg {
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
}

/* New right column for hero: hex grid + buttons */
.hero-right {
  flex: 0 0 640px;
  display: flex;
  flex-direction: column;
  align-items: center; /* center hex and buttons together */
  gap: 1px;
  margin-top: -50px;
  overflow: visible; /* Allow hexagon to extend beyond */
}

/* Hexagon grid */
.hex-grid {
  display: flex;
  justify-content: center; /* center within right column */
  width: 100%;
  overflow: visible;
  position: relative;
}

/* Stacked hex layout: one main hex with two shadow hexes behind */
.hex-stack {
  position: relative;
  width: 620px;  /* fits larger main hex */
  height: 620px; /* allows for larger shadows' offset */
  margin: 0 auto; /* center the hex stack */
}

.hex {
  width: 500px;
  height: 577px; /* width * 1.154 */
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  background-size: cover;
  background-position: center;
  border: 3px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
  transition: transform 320ms var(--ease-standard), box-shadow 320ms var(--ease-standard), opacity 320ms var(--ease-standard);
}

[data-theme="light"] .hex {
  border-color: rgba(0, 0, 0, 0.15);
}

/* No stagger needed with 3 hexes in one row */
/* removed row staggering; using stacked composition */
.hex:nth-child(odd) { margin-top: 0; }

/* Main (front) hex */
.hex.primary {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: transparent;
  overflow: hidden;
  animation: floatIdle 7s ease-in-out infinite alternate;
}

.hex.primary::after {
  /* subtle inner bevel */
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 12px; /* softened corners inside the hex silhouette */
  opacity: 0.25;
  pointer-events: none;
}

/* Image layers for crossfade */
.hex-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: opacity, transform, filter;
  opacity: 1;
  transition: opacity 900ms ease, transform 5600ms ease;
  transform: scale(1.06);
}

.hex-img.is-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 900ms ease, transform 5600ms ease;
  animation: kenburns 9s ease-in-out forwards;
}

.hex.primary.animating {
  animation: rotatePop 700ms ease both, floatIdle 7s ease-in-out 0.7s infinite alternate;
}

/* Shadow hexes behind */
.hex.shadow {
  position: absolute;
  width: 450px;
  height: 519px;
  z-index: 1;
  filter: blur(6px);
  opacity: 0.35;
  border: none;
  box-shadow: 0 24px 50px rgba(0,0,0,0.25);
  background: radial-gradient(120% 120% at 50% 40%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.2) 45%, transparent 100%);
}

.shadow-left { left: 36px; top: 16px; transform: rotate(-7deg) scale(0.96); }
.shadow-right { right: 28px; bottom: 26px; transform: rotate(8deg) scale(0.92); }

.hex:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

/* Hide left-side CTAs (we moved them to the right) */
.hero-content .hero-cta-group { display: none; }

/* Hide any leftover old illustration area if present */
.hero-illustration-wrapper { display: none; }

/* Hide hero meta row if it exists */
.hero-meta { display: none; }

@media (max-width: 1024px) {
  .hero-right {
    flex: 0 0 540px;
    align-items: center;
  }
  .hex-stack { width: 427px; height: 480px; margin: 0 auto; }
  .hex { width: 347px; height: 400px; }
  .hex.shadow { width: 313px; height: 361px; filter: blur(5px); }
}

@media (max-width: 768px) {
  .hero-right { width: 100%; align-items: center; }
  .hex-grid { justify-content: center; }
  .hex-stack { width: 320px; height: 373px; margin: 0 auto; }
  .hex { width: 245px; height: 283px; }
  .hex.shadow { width: 227px; height: 261px; filter: blur(4px); opacity: 0.28; }
  /* Avoid off-screen shift on small screens */
  .hero-content { margin-left: 0; }
}

/* Animations */
@keyframes kenburns {
  0% { transform: scale(1.06); filter: saturate(1.05) contrast(1.02); }
  100% { transform: scale(1); filter: saturate(1) contrast(1); }
}

@keyframes floatIdle {
  0% { transform: translate(-50%, -50%) translateY(0px); }
  100% { transform: translate(-50%, -50%) translateY(-8px); }
}

@keyframes rotatePop {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  40% { transform: translate(-50%, -50%) scale(1.03) rotate(2deg); }
  70% { transform: translate(-50%, -50%) scale(1.01) rotate(-1deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .hero-wrapper {
    gap: 48px;
  }
  
  .hero-title {
    font-size: 2.8rem;
  }
  
  .hero-title-secondary {
    font-size: 2.2rem;
  }
  
  .hero-illustration-wrapper {
    flex: 0 0 220px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    min-height: auto;
    padding: 60px 0;
    margin-top: 102px;
  }
  
  .hero-wrapper {
    flex-direction: column;
    gap: 48px;
    text-align: center;
  }
  
  .hero-content {
    text-align: center;
    max-width: 100%;
  }
  
  .hero-title {
    font-size: 2.4rem;
  }
  
  .hero-title-secondary {
    font-size: 1.8rem;
  }
  
  .hero-subtitle {
    max-width: 100%;
  }
  
  .hero-meta {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }
  
  .hero-cta-group {
    justify-content: center;
  }
  
  .hero-illustration-wrapper {
    flex: 0 0 auto;
    max-width: 240px;
  }
}

/* Vertical Timeline Connector */
.vertical-timeline {
  position: fixed;
  left: 12px; /* moved further left for better separation from content */
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--color-primary) 10%,
    var(--color-primary) 90%,
    transparent 100%
  );
  opacity: 0.3;
  z-index: 0; /* put behind page content so it doesn't overlap text */
  pointer-events: none;
}

[data-theme="dark"] .vertical-timeline {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #ff6b9d 10%,
    #79c0ff 90%,
    transparent 100%
  );
  opacity: 0.25;
}

/* Timeline nodes at each section */
.timeline-node {
  position: absolute;
  left: 12px; /* moved further left for better separation from content */
  transform: translateX(-50%);
  z-index: 1; /* ensure nodes sit behind main content but above background */
}

.hero-section {
  position: relative;
}

.hero-section .timeline-node {
  top: 100px;
}

.about-section,
.features-section,
.news-section,
.contact-section {
  position: relative;
}

.about-section .timeline-node,
.features-section .timeline-node,
.news-section .timeline-node,
.contact-section .timeline-node {
  top: 100px;
}

.timeline-dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-background);
  border: 3px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: all 300ms ease;
  will-change: transform, box-shadow, border-color;
}

[data-theme="dark"] .timeline-dot {
  background: #0d1117;
  border-color: #ff6b9d;
  box-shadow: 0 4px 16px rgba(255, 107, 157, 0.3);
}

.timeline-dot svg,
.timeline-dot i {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  position: relative;
  z-index: 1;
}

[data-theme="dark"] .timeline-dot svg,
[data-theme="dark"] .timeline-dot i {
  color: #ff6b9d;
}

/* Pulse animation on hover */
.timeline-dot:hover {
  transform: scale(1.15);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .timeline-dot:hover {
  box-shadow: 0 6px 24px rgba(255, 107, 157, 0.5);
}

/* Hide timeline on smaller screens */
@media (max-width: 1024px) {
  .vertical-timeline,
  .timeline-node {
    display: none;
  }
}

/* For very wide viewports align the timeline to the container edge so it never overlaps centered content */
@media (min-width: 1280px) {
  .vertical-timeline {
    /* move timeline further left by additional 20px for desktop */
    left: calc((100% - 1280px)/2 + var(--space-16) - 120px);
  }
  .timeline-node {
    /* move nodes together with the timeline */
    left: calc((100% - 1280px)/2 + var(--space-16) - 120px);
  }
  /* Restore the small left nudge for hero content on normal desktop widths
     so the layout matches the previous visual alignment. This keeps the
     timeline aligned to the container edge (above) to avoid overlap at
     common desktop widths like 1440px. */
  .hero-content {
    margin-left: -50px;
  }
  /* Increase top spacing of the hero slightly on desktop breakpoints to
     give more room between the fixed header and the hero content. */
  .hero-section {
    /* Raised per user request: add an extra 40px total (baseline +20 + this +20) to avoid header overlap */
    margin-top: calc(var(--header-height) + 240px);
  }
  /* Ensure the right hero column (hexagons) doesn't overlap the fixed header.
     Remove the negative offset used for decorative overlap on smaller screens. */
  .hero-right {
    margin-top: 0; /* override earlier negative top to keep hexes below header */
  }
}

/* Restore previous wide-screen layout for very large displays (e.g., 2560px wide)
   The site previously used a negative hero-content nudge and a left-fixed timeline
   at ~100px; re-enable those settings for ultra-wide viewports where that looked correct. */
@media (min-width: 2500px) {
  .hero-content { margin-left: -50px; }
  .vertical-timeline { left: 50px; z-index: 50; }
  .timeline-node { left: 50px; z-index: 51; }
}

/* Navigation toggle (hamburger) styles */
.nav-toggle {
  display: none; /* shown only on smaller/tablet screens via media query */
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text);
}
.nav-toggle svg { width: 22px; height: 22px; }

/* Mobile / Tablet: hide normal horizontal nav, show hamburger and render an overlay menu */
@media (max-width: 1024px) {
  .landing-nav {
    display: none; /* default hidden on tablet/phone */
  }
  .nav-toggle { display: inline-flex; }

  /* When nav is opened via JS, display as a vertical, elevated popover */
  .landing-nav.open {
    display: flex;
    position: absolute;
    top: 64px; /* below header */
    right: 16px;
    flex-direction: column;
    gap: 8px;
    background: var(--color-surface);
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    z-index: 300;
    min-width: 220px;
    border: 1px solid var(--color-card-border);
  }

  .landing-nav.open .nav-link {
    display: block;
    padding: 10px 12px;
    white-space: nowrap;
  }

  /* Ensure theme toggle fits inside the popover if present */
  .landing-nav.open .theme-toggle { margin-left: 0; }

  /* Slightly increase link hit area */
  .landing-nav.open .nav-link { border-radius: 6px; }
}

/* When the nav is open we prevent body scroll on small screens via JS (CSS fallback) */
body.nav-open { overflow: hidden; }

/* Animation keyframes */
/* Active section animates its timeline dot through a long sequence */
.section-active .timeline-dot {
  animation: nodeSequence 14s ease-in-out infinite;
}

/* Add a subtle ripple ring while active */
.section-active .timeline-dot::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.0;
  animation: nodeRipple 2.8s ease-out infinite;
}

@keyframes nodeRipple {
  0% { transform: scale(0.8); opacity: 0; }
  20% { opacity: 0.35; }
  70% { transform: scale(1.25); opacity: 0.1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* 10+ stage composite animation */
@keyframes nodeSequence {
  /* 0-10%: zoom in */
  0%   { transform: scale(1) translateY(0) rotate(0deg); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
  5%   { transform: scale(1.18) translateY(0) rotate(0deg); }
  10%  { transform: scale(1) translateY(0) rotate(0deg); }

  /* 10-20%: gentle jump */
  15%  { transform: scale(1.02) translateY(-8px) rotate(0deg); }
  20%  { transform: scale(1) translateY(0) rotate(0deg); }

  /* 20-30%: wiggle */
  22%  { transform: scale(1.02) translateY(0) rotate(6deg); }
  26%  { transform: scale(1.02) translateY(0) rotate(-6deg); }
  30%  { transform: scale(1) translateY(0) rotate(0deg); }

  /* 30-40%: pulse/glow */
  35%  { box-shadow: 0 8px 24px rgba(198,40,40,0.35); }
  40%  { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

  /* 40-50%: tilt-bounce */
  45%  { transform: scale(1.06) translateY(-4px) rotate(-3deg); }
  50%  { transform: scale(1) translateY(0) rotate(0deg); }

  /* 50-60%: spin half turn */
  55%  { transform: scale(1.04) translateY(0) rotate(180deg); }
  60%  { transform: scale(1) translateY(0) rotate(360deg); }

  /* 60-70%: squash-stretch */
  65%  { transform: scale(0.9,1.08) translateY(0) rotate(0deg); }
  70%  { transform: scale(1.08,0.92) translateY(0) rotate(0deg); }

  /* 70-80%: pop */
  75%  { transform: scale(1.2) translateY(0) rotate(0deg); }
  80%  { transform: scale(1) translateY(0) rotate(0deg); }

  /* 80-90%: little shake */
  84%  { transform: scale(1) translateY(0) rotate(2deg); }
  88%  { transform: scale(1) translateY(0) rotate(-2deg); }
  90%  { transform: scale(1) translateY(0) rotate(0deg); }

  /* 90-100%: hover float */
  95%  { transform: scale(1.03) translateY(-4px) rotate(0deg); }
  100% { transform: scale(1) translateY(0) rotate(0deg); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .section-active .timeline-dot,
  .section-active .timeline-dot::after {
    animation: none !important;
  }
}
@keyframes heroPulse {
  0% { transform: translateY(0) scale(1); opacity: 0.9; }
  100% { transform: translateY(-2%) scale(1.02); opacity: 1; }
}

@keyframes gradientShift {
  0%, 100% { transform: scale(1.05) rotate(0deg); }
  50% { transform: scale(1.08) rotate(1deg); }
}

/* Fade-in animations */
.fade-in {
  animation: fadeInUp 0.6s ease-out forwards;
}

.fade-in-delay {
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
  opacity: 0;
}

.fade-in-delay-2 {
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
  opacity: 0;
}

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

/* Old hero styles removed - using new GitHub-inspired layout */

/* Keep eyebrow for backward compatibility if needed */
.hero-eyebrow-old {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  color: var(--color-white);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  backdrop-filter: blur(6px);
}

.text-gradient {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Enhanced title for dark theme */
[data-theme="dark"] .hero-title {
  color: var(--color-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Enhanced title for light theme */
[data-theme="light"] .hero-title {
  color: var(--color-charcoal-700);
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8);
}

.hero-subtitle {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-32);
  line-height: 1.6;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.btn--ghost {
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.6);
  color: var(--color-white);
}

[data-theme="light"] .btn--ghost {
  color: var(--color-charcoal-700);
  border-color: rgba(0,0,0,0.35);
}

.hero-meta {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  color: var(--color-white);
  font-size: 12px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
}

[data-theme="light"] .meta-chip {
  background: rgba(0,0,0,0.06);
  color: var(--color-charcoal-700);
  border-color: rgba(0,0,0,0.1);
}

.scroll-cue {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  color: var(--color-white);
  text-decoration: none;
  opacity: 0.9;
}

[data-theme="light"] .scroll-cue { color: var(--color-charcoal-700); }

.scroll-dot {
  width: 10px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid currentColor;
  position: relative;
}

.scroll-dot::after {
  content: '';
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 999px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 4px;
  animation: scrollDot 1.6s ease-in-out infinite;
}

@keyframes scrollDot {
  0% { top: 4px; opacity: 0; }
  30% { opacity: 1; }
  100% { top: 10px; opacity: 0; }
}

/* Responsive hero tweaks */
@media (max-width: 900px) {
  .hero-title { font-size: 38px; }
}

@media (max-width: 600px) {
  .hero-title { font-size: 32px; }
  .hero-cta-group { gap: 8px; }
}

/* Tablet / iPad specific tweaks */
/* Targets common tablet widths (iPad portrait 768px, landscape ~1024px) and devices with coarse pointers */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* Slightly larger base font for tablets for readability */
  html { font-size: 15px; }

  /* Header / nav adjustments to avoid overflow on tablet widths */
  .landing-header { padding: 12px 0; }
  .logo-circle { width: 48px; height: 48px; }
  .logo-circle.small { width: 36px; height: 36px; font-size: var(--font-size-sm); }
  .school-name { font-size: 1.6rem; }
  .landing-nav { gap: var(--space-16); }

  /* Hero tuning for tablets */
  .hero-section { min-height: 68vh; padding: 60px 0; margin-top: 92px; }
  .hero-wrapper { gap: 36px; padding: 0 16px; }
  .hero-content { padding-right: 40px; max-width: 520px; margin-left: 0; }
  .hero-title { font-size: 2.6rem; }
  .hero-title-secondary { font-size: 2rem; }
  .hero-subtitle { font-size: 1.05rem; max-width: 520px; }

  /* Right column and hex sizes tuned for tablet screens */
  .hero-right { flex: 0 0 480px; margin-top: -20px; }
  .hex-stack { width: 420px; height: 470px; }
  .hex { width: 340px; height: 392px; }
  .hex.shadow { width: 300px; height: 346px; }

  .hero-cta-group { display: flex; justify-content: flex-start; gap: 12px; }
  /* Ensure hero CTAs are visible on tablet by overriding the earlier more-specific rule */
  .hero-content .hero-cta-group { display: flex; justify-content: flex-start; gap: 12px; }
  /* Hide the right-column CTA on tablet so we don't show duplicate buttons
    (the primary CTAs are shown inside `.hero-content` at this breakpoint). */
  .hero-right .hero-cta-group { display: none; }

  /* Move timeline slightly in for tablet layouts */
  .vertical-timeline { left: 12px; }
  .timeline-node { left: 12px; transform: translateX(-50%); }

  /* Section paddings */
  .about-section, .features-section, .news-section, .contact-section { padding-left: 48px; padding-right: 48px; }
}

/* iPad-specific portrait tweaks (common device widths like 768 and 834) */
@media only screen and (device-width: 768px) and (orientation: portrait),
only screen and (device-width: 834px) and (orientation: portrait) {
  /* Increase touch targets and slightly reduce title sizes on portrait tablets */
  .nav-link { padding: 10px 6px; font-size: var(--font-size-md); }
  .btn--lg { padding: 14px 22px; font-size: var(--font-size-lg); }
  .btn--hero { padding: 14px 26px; }
  .hero-title { font-size: 2.4rem; }
  .hero-illustration-wrapper { display: block; max-width: 220px; }
  .hero-right { flex-basis: 420px; }
}

/* Improve touch targets for coarse pointers on medium/large tablets */
@media (pointer: coarse) and (min-width: 600px) and (max-width: 1200px) {
  .nav-link, .btn, .form-control, .meta-chip { touch-action: manipulation; }
  .nav-link { padding: 12px 8px; }
  .btn { min-height: 44px; }
}

/* Enhanced subtitle for dark theme */
[data-theme="dark"] .hero-subtitle {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* Enhanced subtitle for light theme */
[data-theme="light"] .hero-subtitle {
  color: var(--color-slate-900);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.login-buttons {
  display: flex;
  gap: var(--space-16);
  justify-content: center;
  flex-wrap: wrap;
}

.btn--hero {
  padding: var(--space-16) var(--space-32);
  font-size: var(--font-size-lg);
  gap: var(--space-8);
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-fast) var(--ease-standard), 
  box-shadow var(--duration-fast) var(--ease-standard);
  box-shadow: var(--shadow-md);
}

/* Animations */
.fade-in {
  animation: fadeIn 0.8s ease-out;
}

.fade-in-delay {
  animation: fadeIn 0.8s ease-out 0.2s both;
}

.fade-in-delay-2 {
  animation: fadeIn 0.8s ease-out 0.4s both;
}

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

/* Section Styles */
.about-section{
  position: relative; /* Needed for z-index stacking */
  z-index: 1;
  padding: var(--space-80) 0;
  scroll-margin-top: 82px; /* Height of the fixed header */
  margin-top: 50px;
}
.features-section,
.news-section,
.contact-section {
  position: relative; /* Needed for z-index stacking */
  z-index: 1;
  padding: var(--space-80) 0;
  scroll-margin-top: 82px; /* Height of the fixed header */
}

.features-section {
  margin: 75px 0 0 0;
  padding-left: 75px;
  padding-right: 75px;
}

.news-section,
.contact-section {
  margin-top: 50px;
}
.landing-footer {
    position: relative; /* Needed for z-index stacking */
    z-index: 1; 
    padding: var(--space-80) 0;
    margin-top: 50px;
    
}

.section-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-bottom: 60px;
  color: var(--color-text);
}

/* About Section */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-32);
}

.about-card {
  background: var(--color-surface);
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
}

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

.card-icon {
  font-size: 48px;
  margin-bottom: var(--space-16);
}

.about-card h3 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-16);
  color: var(--color-text);
}

.about-card p {
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-16);
  margin-top: var(--space-20);
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
}

/* Features Section */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-24);
}

.feature-card {
  background: var(--color-surface);
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  text-align: center;
  transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
}

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

.feature-icon {
  font-size: 56px;
  margin-bottom: var(--space-16);
}

.feature-card h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-12);
  color: var(--color-text);
}

.feature-card p {
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Carousel */
.carousel-container {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.carousel-wrapper {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.carousel-track {
  display: flex;
  transition: transform var(--duration-normal) var(--ease-standard);
}

.carousel-item {
  min-width: 100%;
  flex: 0 0 100%;
  
}

.news-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.news-image {
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

.news-content {
  /* vertical | horizontal -> tighter horizontal padding for better line length */
  padding: 10px;
  /* ensure comfortable reading space */
  line-height: 1.75;
  color: var(--color-text);
}

.news-date {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-8);
}

.news-card h3 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-12);
  color: var(--color-text);
}

.news-card p {
  color: var(--color-text-secondary);
  line-height: 1.85;
  margin-bottom: var(--space-12);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-size-3xl);
  color: var(--color-text);
  transition: all var(--duration-fast) var(--ease-standard);
  z-index: 10;
}

.carousel-btn:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.carousel-btn.prev {
  left: -20px;
}

.carousel-btn.next {
  right: -20px;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-24);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

.dot.active {
  background: var(--color-primary);
  width: 30px;
}

/* Responsive adjustments: keep cards readable on small screens */
@media (max-width: 900px) {
  .carousel-container {
    max-width: 780px;
  }

  .news-image {
    height: 300px;
  }

  .news-content {
    padding: var(--space-32);
  }
}

@media (max-width: 480px) {
  .carousel-container {
    max-width: 100%;
    padding: 0 var(--space-16);
  }

  .news-image {
    height: 220px;
  }

  .news-content {
    padding: var(--space-20);
  }
}

/* Contact Section */
.contact-section {
  position: relative;
  z-index: 1;
  padding: var(--space-80) 0;
  scroll-margin-top: 82px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-white);
}

[data-theme="dark"] .contact-section {
  background-image: linear-gradient(rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.88)), url('/images/contact-bg.jpg');
}

[data-theme="light"] .contact-section {
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('/images/contact-bg.jpg');
}

.contact-section .section-title {
  color: var(--color-white);
  margin-bottom: var(--space-48);
  font-size: var(--font-size-4xl);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  font-weight: var(--font-weight-bold);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  column-gap: 100px;
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 var(--space-24);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  color: var(--color-white);
}

.contact-item {
  display: flex;
  gap: var(--space-16);
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.08);
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  transition: all var(--duration-normal) var(--ease-standard);
}

.contact-item:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.contact-icon {
  font-size: 24px;
  flex-shrink: 0;
  color: var(--color-white);
  opacity: 0.95;
}

.contact-item h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-8);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
}

.contact-item p {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  font-size: var(--font-size-base);
}

.social-links {
  display: flex;
  gap: var(--space-32);
  margin-top: var(--space-8);
  padding: var(--space-12);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  transition: all var(--duration-normal) var(--ease-standard);
}

.social-links:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.social-link {
  padding: var(--space-10) var(--space-20);
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-base);
  text-decoration: none;
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  transition: all var(--duration-normal) var(--ease-standard);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.social-link:hover {
  background: var(--color-white);
  color: var(--color-charcoal-700);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.contact-form {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transition: all var(--duration-normal) var(--ease-standard);
}

.contact-form:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

.contact-form .form-control {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-base);
  padding: var(--space-12);
  color: var(--color-white);
  font-size: var(--font-size-md);
  transition: all var(--duration-fast) var(--ease-standard);
}

.contact-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.contact-form .form-control:focus {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
  outline: none;
}

.contact-form .form-label {
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  opacity: 0.95;
  margin-bottom: var(--space-8);
}

.contact-form .btn--primary {
  background: var(--color-white);
  color: var(--color-charcoal-700);
  border: none;
  font-weight: var(--font-weight-semibold);
  width: 100%;
  padding: var(--space-12) var(--space-24);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.contact-form .btn--primary:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

/* Mobile fixes for Contact section: stack grid, reduce padding, and improve form layout */
@media (max-width: 768px) {
  .contact-section {
    padding: 40px 0;
    background-attachment: scroll; /* fixed backgrounds can behave poorly on mobile */
  }

  .contact-section .section-title {
    font-size: 1.6rem;
    margin-bottom: 24px;
    text-align: center;
  }

  .contact-grid {
    grid-template-columns: 1fr; /* single column stack on small screens */
    gap: 20px;
    column-gap: 20px;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--space-16);
  }

  .contact-item {
    flex-direction: column; /* stack icon above text */
    align-items: center;
    text-align: center;
    padding: var(--space-16);
    gap: var(--space-12);
  }

  .contact-icon {
    font-size: 28px;
    margin-bottom: 8px;
  }

  .contact-item h4 {
    text-align: center;
    margin-bottom: 6px;
  }

  .contact-item p {
    text-align: center;
  }

  .social-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: var(--space-8);
  }

  .contact-form {
    padding: var(--space-20);
    width: 100%;
    box-shadow: none; /* lighter on small screens */
    background: rgba(255,255,255,0.06);
  }

  .contact-form .form-control {
    font-size: var(--font-size-md);
    padding: var(--space-10);
  }

  .contact-form .btn--primary {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .contact-section { padding: 28px 0; }
  .contact-section .section-title { font-size: 1.4rem; }
  .contact-grid { padding: 0 var(--space-8); gap: 12px; }
  .contact-item { padding: var(--space-12); }
}

/* Footer */


.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-32);
  margin-bottom: var(--space-32);
}

.footer-section h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-16);
  color: var(--color-text);
}

.footer-section p,
.footer-section a {
  color: var(--color-text-secondary);
  line-height: 1.8;
  display: block;
  margin-bottom: var(--space-8);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer-section a:hover {
  color: var(--color-primary);
}

.footer-bottom {
  text-align: center;
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  border: none;
  text-decoration: none;
  position: relative;
  font-family: var(--font-family-base);
}

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

.btn--primary {
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
}

.btn--primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn--secondary:hover {
  background: var(--color-secondary-hover);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn--outline:hover {
  background: var(--color-secondary);
}

.btn--sm {
  padding: var(--space-4) var(--space-12);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: var(--space-10) var(--space-20);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
}

.btn--full-width {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* FORM ELEMENTS */
.form-group {
  margin-bottom: var(--space-16);
}

.form-label {
  display: block;
  margin-bottom: var(--space-8);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.form-control {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  font-family: var(--font-family-base);
}

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

textarea.form-control {
  font-family: var(--font-family-base);
  resize: vertical;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  margin-bottom: var(--space-12);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.form-footer {
  margin-top: var(--space-16);
  text-align: center;
}

.text-link {
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--duration-fast) var(--ease-standard);
}

.text-link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* MODAL */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn 0.3s var(--ease-standard);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-modal {
  padding: var(--space-32);
}

.modal-header {
  margin-bottom: var(--space-24);
}

.modal-header h2 {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-8);
  color: var(--color-text);
}

.modal-header p {
  color: var(--color-text-secondary);
}

.modal-close {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}

.modal-close:hover {
  background: var(--color-error);
  color: white;
}

/* DASHBOARD LAYOUT */
.dashboard-view {
  min-height: 100vh;
  background: var(--color-background);
}

.dashboard-layout {
  display: flex;
  height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 260px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-normal) var(--ease-standard);
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: var(--z-sidebar);
}

.sidebar-header {
  padding: var(--space-20);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.sidebar-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-16);
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-base);
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: all var(--duration-fast) var(--ease-standard);
  margin-bottom: var(--space-4);
}

.nav-item:hover {
  background: var(--color-secondary);
}

.nav-item.active {
  background: var(--color-primary);
  color: white;
}

.nav-item svg {
  flex-shrink: 0;
}

.sidebar-footer {
  padding: var(--space-16);
  border-top: 1px solid var(--color-border);
}

/* Main Content */
.dashboard-main {
  flex: 1;
  margin-left: 260px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Topbar */
.topbar {
  height: var(--header-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between; 
  padding: 0 var(--space-24);
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
}

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-text);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text);
  transition: background var(--duration-fast) var(--ease-standard);
  position: relative;
}

/* Duplicate header theme toggle is hidden by default (only shown on small screens) */
.header-theme-toggle { display: none; }

.icon-btn:hover {
  background: var(--color-secondary);
}

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

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

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

.notification-wrapper {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--color-error);
  color: white;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  min-width: 18px;
  text-align: center;
}

.notification-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 350px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
}

.notification-panel.active {
  display: block;
  animation: fadeIn 0.2s ease-out;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.notification-header h3 {
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

.notification-list {
  padding: var(--space-8);
}

.notification-item {
  display: flex;
  gap: var(--space-12);
  padding: var(--space-12);
  border-radius: var(--radius-base);
  transition: background var(--duration-fast) var(--ease-standard);
  cursor: pointer;
}

.notification-item:hover {
  background: var(--color-secondary);
}

.notification-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.notification-icon.unread {
  position: relative;
}

.notification-icon.unread::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.notification-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.notification-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.user-profile {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
}

.avatar.large {
  width: 80px;
  height: 80px;
  font-size: var(--font-size-3xl);
}

.user-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

/* Content Wrapper */
.content-wrapper {
  flex: 1;
  padding: var(--space-24);
  overflow-y: auto;
}

.content-section {
  display: none;
}

.content-section.active {
  display: block;
  animation: fadeIn 0.3s ease-out;
}

/* Improve vertical spacing between dashboard sections to avoid visual overlap */
.content-section {
  /* keep display controlled by .active, but ensure each section has breathing room */
  margin-bottom: var(--space-32);
  padding-bottom: var(--space-16);
}

/* Ensure cards inside sections have a small vertical gap when stacked (safe non-breaking change) */
.card + .card {
  margin-top: var(--space-16);
}

/* For narrow screens ensure stacked layout has sufficient spacing */
@media (max-width: 900px) {
  .content-wrapper {
    padding: var(--space-20);
  }

  .profile-grid,
  .dashboard-grid,
  .charts-grid {
    gap: var(--space-24);
  }
}

.section-header {
  margin-bottom: var(--space-24);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.section-header h1 {
  font-size: var(--font-size-3xl);
  color: var(--color-text);
  margin: 0;
}

.section-subtitle {
  color: var(--color-text-secondary);
  margin-top: var(--space-8);
}

.section-actions {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
}

/* Cards */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__header {
  padding: var(--space-16) var(--space-20);
  border-bottom: 1px solid var(--color-card-border-inner);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card__header h3 {
  font-size: var(--font-size-xl);
  color: var(--color-text);
  margin: 0;
}

.card__body {
  padding: var(--space-20);
}

/* Stats Grid */
.stats-grid-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-20);
  margin-bottom: var(--space-32);
}

.stat-card {
  background: var(--color-surface);
  padding: var(--space-20);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  display: flex;
  gap: var(--space-16);
  align-items: center;
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-details {
  flex: 1;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.stat-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-24);
}

/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.timeline-item {
  display: flex;
  gap: var(--space-16);
  position: relative;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 24px;
  bottom: -16px;
  width: 2px;
  background: var(--color-border);
}

.timeline-item:last-child::before {
  display: none;
}

.timeline-marker {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  border: 3px solid var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-primary);
  flex-shrink: 0;
  margin-top: 4px;
}

.timeline-title {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.timeline-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Tables */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-base);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.data-table thead {
  background: var(--color-secondary);
  border-bottom: 2px solid var(--color-border);
}

.data-table th {
  padding: var(--space-12) var(--space-16);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);

}

.data-table td {
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.data-table tbody tr:hover {
  background: var(--color-secondary);
}

.data-table tfoot {
  border-top: 2px solid var(--color-border);
  background: var(--color-secondary);
}

.total-row td {
  font-weight: var(--font-weight-semibold);
  padding: var(--space-16);
}

.timetable-table {
  width: 100%;
  border-collapse: collapse;
}

.timetable-table th,
.timetable-table td {
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  text-align: center;
}

.timetable-table th {
  background: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.timetable-cell {
  min-height: 80px;
  vertical-align: top;
  text-align: left;
}

.timetable-cell.filled {
  background: var(--color-bg-1);
}

.timetable-cell strong {
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-4);
}

/* Status Badges */
.status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.status--success {
  background: rgba(46, 125, 50, 0.15);
  color: var(--color-success);
  border: 1px solid rgba(46, 125, 50, 0.25);
}

.status--error {
  background: rgba(198, 40, 40, 0.15);
  color: var(--color-error);
  border: 1px solid rgba(198, 40, 40, 0.25);
}

.status--warning {
  background: rgba(251, 140, 0, 0.15);
  color: var(--color-warning);
  border: 1px solid rgba(251, 140, 0, 0.25);
}

.status--info {
  background: rgba(25, 118, 210, 0.15);
  color: var(--color-info);
  border: 1px solid rgba(25, 118, 210, 0.25);
}

/* Charts */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: var(--space-24);
}

.chart-container {
  position: relative;
  height: 300px;
}

.chart-container canvas {
  max-width: 100%;
}

/* Profile */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-24);
}

.profile-header {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  margin-bottom: var(--space-24);
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-border);
}

.profile-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-bottom: var(--space-20);
}

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

.detail-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.detail-value {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.inline-edit {
  max-width: 200px;
}

/* Fee Summary */
.fee-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-20);
  margin-bottom: var(--space-24);
}

/* Contact Enquiry */
.contact-enquiry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-24);
}

.enquiry-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.enquiry-item {
  padding: var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background: var(--color-background);
}

.enquiry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-8);
}

.enquiry-text {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-12);
  font-size: var(--font-size-sm);
}

.enquiry-footer {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
}

/* Filter Bar */
.filter-bar {
  display: flex;
  gap: var(--space-12);
  margin-bottom: var(--space-20);
  flex-wrap: wrap;
}

.search-input {
  min-width: 250px;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: var(--space-12);
  margin-top: var(--space-20);
}

/* Schedule List */
.schedule-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.schedule-item {
  display: flex;
  gap: var(--space-16);
  padding: var(--space-12);
  border-left: 3px solid var(--color-primary);
  background: var(--color-background);
  border-radius: var(--radius-base);
}

.schedule-time {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  min-width: 100px;
}

.schedule-details strong {
  display: block;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.schedule-details p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* Alert List */
.alert-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.alert-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-12);
  background: var(--color-bg-4);
  border-radius: var(--radius-base);
  border-left: 3px solid var(--color-warning);
}

/* Classes Grid */
.classes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-24);
}

.class-card {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-20);
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.class-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.class-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-16);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.class-header h3 {
  font-size: var(--font-size-xl);
  color: var(--color-text);
  margin: 0;
}

.class-details {
  margin-bottom: var(--space-16);
}

.class-details p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

.class-actions {
  display: flex;
  gap: var(--space-8);
}

/* Activity List */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.activity-item {
  display: flex;
  gap: var(--space-16);
  align-items: flex-start;
}

.activity-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.activity-content strong {
  display: block;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.activity-content p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.activity-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Tabs */
.tabs {
  display: flex;
  gap: var(--space-4);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-20);
}

.tab-btn {
  padding: var(--space-12) var(--space-20);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  margin-bottom: -2px;
  font-family: var(--font-family-base);
}

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

.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Reports Grid */
.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-24);
}

.report-card {
  background: var(--color-surface);
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  text-align: center;
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.report-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.report-icon {
  font-size: 56px;
  margin-bottom: var(--space-16);
}

.report-card h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-12);
  color: var(--color-text);
}

.report-card p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-20);
  line-height: 1.6;
}

/* Settings Grid */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-24);
}

/* Messages Layout */
.messages-layout {
  max-width: 800px;
}

.message-tabs {
  display: flex;
  gap: var(--space-8);
  margin-bottom: var(--space-20);
}

.message-list {
  display: flex;
  flex-direction: column;
}

.message-item {
  display: flex;
  gap: var(--space-16);
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

.message-item:hover {
  background: var(--color-secondary);
}

.message-item.unread {
  background: var(--color-bg-1);
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.message-content {
  flex: 1;
}

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

.message-header strong {
  color: var(--color-text);
}

.message-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.message-preview {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: var(--space-24);
  right: var(--space-24);
  padding: var(--space-16) var(--space-24);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  min-width: 300px;
  display: none;
  animation: toastSlideIn 0.3s var(--ease-standard);
}

.toast.show {
  display: block;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scroll Reveal */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Shimmer Loading */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--color-surface) 25%,
    var(--color-secondary) 50%,
    var(--color-surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Text Utilities */
.text-secondary {
  color: var(--color-text-secondary);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .dashboard-grid,
  .charts-grid,
  .profile-grid,
  .contact-enquiry-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }
  
  .contact-info {
    margin-right: 0;
  }
  
  .contact-form {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 32px;
  }

  .hero-subtitle {
    font-size: var(--font-size-base);
  }

  .login-buttons {
    flex-direction: column;
    width: 100%;
  }

  .btn--hero {
    width: 100%;
  }

  .landing-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    justify-content: center;
    align-items: center;
  }

  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  .dashboard-main {
    margin-left: 0;
  }

  .menu-toggle {
    display: flex;
  }

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

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .user-name {
    display: none;
  }

  .about-grid,
  .features-grid,
  .classes-grid,
  .reports-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .carousel-btn {
    display: none;
  }

  .filter-bar {
    flex-direction: column;
  }

  .search-input {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .stats-grid-dashboard {
    grid-template-columns: 1fr;
  }

  .stat-card {
    flex-direction: column;
    text-align: center;
  }

  .table-wrapper {
    font-size: var(--font-size-xs);
  }

  .data-table th,
  .data-table td {
    padding: var(--space-8);
  }
}

/* Print Styles */
@media print {
  .sidebar,
  .topbar,
  .section-actions,
  .btn,
  .landing-header,
  .landing-footer {
    display: none !important;
  }

  .dashboard-main {
    margin-left: 0;
  }

  .card {
    box-shadow: none;
    border: 1px solid #000;
  }
}

/* Attendance Summary */
.attendance-summary {
  display: flex;
  gap: var(--space-24);
  padding: var(--space-16);
  background: var(--color-background);
  border-radius: var(--radius-base);
  margin-bottom: var(--space-20);
  justify-content: center;
}

.attendance-summary span {
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* Report Header */
.report-header {
  text-align: center;
  padding: var(--space-24) 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-24);
}

.report-header h2 {
  font-size: var(--font-size-3xl);
  color: var(--color-text);
  margin-bottom: var(--space-12);
}

.report-header p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

/* Editable Table */
.editable-table input {
  width: 100%;
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
}

.editable-table input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Style for Feather Icons */
.feather {
  width: 24px;
  height: 24px;
  stroke: currentColor; /* Use the current text color */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Hero Button Icon Styling */
.btn--hero .feather {
  width: 50px;
  
  
  margin-right: 8px; /* Add space between icon and text */
}

/* About Section Icon Container */
.about-card .card-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-bg-1); /* Use the theme's background color */
  color: var(--color-primary); /* Use the theme's primary color */
  margin-bottom: var(--space-24);
  font-size: 0; /* Hide the old emoji text if any */
}

/* Adjust Feather Icon size inside the container */
.about-card .card-icon .feather {
  width: 32px;
  height: 32px;
}

/* Features Section Icon Container */
.feature-card .feature-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
  color: var(--color-primary);
  margin: 0 auto var(--space-24) auto; /* Center the icon box */
  font-size: 0; /* Hide old emoji text */
}

/* Adjust Feather Icon size inside the container */
.feature-card .feature-icon .feather {
  width: 36px;
  height: 36px;
  stroke-width: 1.5;
}

/* Contact Section Icon Container */
.contact-item .contact-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  color: var(--color-primary);
  font-size: 0; /* Hide old emoji text */
}

/* Adjust Feather Icon size inside the container */
.contact-item .contact-icon .feather {
  width: 24px;
  height: 24px;
}


.about-card {
    position: relative;
    overflow: hidden;
    padding-bottom: 120px; 
}

.about-card-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px; /* Fixed height for consistency */
    object-fit: cover; /* Cover the area, cropping if necessary */
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    opacity: 0.7; /* Make it subtle */
    transition: transform 0.3s ease;
    filter: grayscale(100%); /* Make it monochrome for professionalism */
}

.about-card:hover .about-card-image {
    transform: translateY(-5px); /* Little lift on hover */
    filter: grayscale(0%); /* Color on hover */
}

/* News Section Carousel Image Styling */
.news-card .news-image {
    height: 325px; /* Adjust height as needed */
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    /* Remove linear-gradient from here as it's now inline for specific images */
}

.contact-section {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
    background-color: var(--color-bg-body); /* Fallback */
}

.contact-section::before { /* Use a pseudo-element for background to easily apply overlay */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/background_dark.jpg'); /* Your contact background image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.1; /* Subtle opacity */
    z-index: -1;
}

/* General overlay for sections that have background images with dark content */
.hero-section .container,
.contact-section .container {
    position: relative;
    z-index: 2; /* Bring content above background image and overlay */
    padding: 60px;
}

.features-scroll-container {
  width: 100%;
  overflow: hidden; /* Hide the overflowing content */
  padding: var(--space-16) 0; /* Add some vertical padding */
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); /* Optional: fade edges */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); /* Optional: fade edges */
}

.features-scroll-track {
  display: flex; /* Arrange cards horizontally */
  gap: var(--space-24); /* Space between cards */
  width: calc((300px + var(--space-24)) * 12); /* (Card Width + Gap) * Total Cards (6 original + 6 duplicated) */
  animation: horizontalScroll 100s linear infinite; /* Adjust duration as needed */
  will-change: transform; /* Optimize animation performance */
}

/* Pause animation on hover */
.features-scroll-container:hover .features-scroll-track {
  animation-play-state: paused;
}

/* Individual feature card styling for the scrolling layout */
.features-scroll-track .feature-card {
  flex: 0 0 300px; /* Set a fixed width for each card */
  margin: 0; /* Remove potential grid margins */
  transition: transform 0.3s var(--ease-standard), box-shadow 0.3s var(--ease-standard); /* Transition for hover */
}

/* Hover animation for feature cards */
.features-scroll-track .feature-card:hover {
  transform: translateY(-8px) scale(1.03); /* Lift and slightly scale up */
  box-shadow: var(--shadow-lg); /* Enhance shadow on hover */
  z-index: 10; /* Bring hovered card to the front */
}

/* Define the scrolling animation */
@keyframes horizontalScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Scroll by the width of the original 6 cards + gaps */
    transform: translateX(calc((300px + var(--space-24)) * -6));
  }
}

/* Ensure Feather Icons render correctly within flex items */
.feature-icon .feather {
    display: inline-block; /* Helps with alignment */
}

.btn--hero:hover {
  transform: translateY(-3px); /* Lift the button slightly */
  box-shadow: var(--shadow-lg); /* Increase the shadow for emphasis */
}

/* Optional: Add a slight effect when the button is actively pressed */
.btn--hero:active {
  transform: translateY(-1px); /* Reduce the lift slightly */
  box-shadow: var(--shadow-sm); /* Reduce shadow slightly */
}

body {
   
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    transition: background-color var(--duration-normal) var(--ease-standard);
}

/* Optional: Add a subtle overlay if needed */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); /* Adjust color and opacity */
    z-index: -1; /* Ensure it's behind content but above the background image if needed */
 }

/* Make header slightly transparent to show background */
.landing-header {
    /* Adjust existing background property */
    background: rgba(38, 40, 40, 0.85); /* Example for dark theme - adjust color and opacity */
    backdrop-filter: blur(8px);
    /* Ensure other header styles remain */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-16) 0;
    z-index: 100;
}

/* Small screen optimizations */
@media (max-width: 600px) {
  /* Base type & spacing */
  html { font-size: 13px; }
  .container { padding-left: 12px; padding-right: 12px; }

  /* Header: compact and touch-friendly */
  .landing-header { padding: 8px 0; }
  .header-content { gap: 8px; }
  .logo-circle { width: 40px; height: 40px; }
  .logo-circle.small { width: 32px; height: 32px; }
  .school-name { font-size: 1rem; margin-left: 8px; }

  /* Show nav toggle reliably and hide horizontal nav */
  .landing-nav { display: none !important; }
  .nav-toggle { display: inline-flex; }

  /* Show the header theme toggle duplicate on small screens */
  .header-theme-toggle { display: inline-flex; }

  /* Hero: stack content, hide heavy illustrations */
  .hero-section { padding: 48px 0; margin-top: 77px; }
  .hero-wrapper { flex-direction: column; gap: 28px; padding: 0 8px; }
  .hero-content { padding-right: 0; margin-left: 0; text-align: center; }
  .hero-right, .hero-illustration-wrapper, .hex-grid, .hex-stack { display: none !important; }

  .hero-title { font-size: 1.9rem; line-height: 1.15; }
  .hero-title-secondary { font-size: 1.4rem; display: block; }
  .hero-subtitle { font-size: 0.95rem; max-width: 100%; margin: 0 auto 12px; }

  /* CTA buttons: full width and larger touch targets */
  .hero-cta-group { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
  /* Override earlier desktop rule that hid CTAs inside .hero-content */
  .hero-content .hero-cta-group { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
  .hero-cta-group .btn, .btn--lg { width: 100%; padding: 12px 14px; font-size: 14px; }
  .btn { min-height: 44px; }

  /* Reduce heavy shadows for performance on mobile */
  .card, .btn--hero, .hex { box-shadow: none; }

  /* Tables: horizontal scroll and smaller text */
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { font-size: 12px; }
  .data-table th, .data-table td { padding: 8px 10px; }

  /* Dashboard: keep sidebar off-canvas and make main content full-width; avoid display:none so JS can open it */
  .sidebar { transform: translateX(-100%); display: block; }
  .sidebar.mobile-open { transform: translateX(0); z-index: 200; }
  .dashboard-main { margin-left: 0 !important; padding: 12px; }

  /* Dashboard-specific mobile fixes */
  .stats-grid-dashboard {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stat-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px;
  }

  .stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .stat-details { flex: 1; }

  /* Charts stack vertically and shrink height for mobile */
  .charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .chart-container { min-height: 180px; }

  /* Cards: reduce padding and ensure full-width */
  .card { border-radius: 10px; box-shadow: none; }
  .card__body { padding: 12px; }

  /* Filter bar: stack controls and full width */
  .filter-bar { display: flex; flex-direction: column; gap: 8px; }
  .filter-bar .form-control, .filter-bar .btn { width: 100%; }

  /* Table: ensure it can scroll horizontally cleanly */
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Content header: make title and action buttons stack */
  .section-header { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

  /* Reduce topbar padding to save vertical space */
  .topbar { padding: 0 12px; height: 56px; }
  .topbar .user-profile { gap: 6px; }

  /* Ensure menu toggle is visible */
  .menu-toggle { display: flex; }

/* Overlay shown when mobile sidebar is open (created/removed via JS) */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: var(--z-overlay); /* below sidebar but above main content */
}

  /* Footer: stack sections */
  .landing-footer .footer-content { flex-direction: column; gap: 12px; text-align: center; }

  /* Navigation popover: make full-width for easier tapping */
  .landing-nav.open { right: 8px; left: 8px; min-width: auto; width: calc(100% - 32px); padding: 14px; }

  /* Increase hit area for nav links inside popover */
  .landing-nav.open .nav-link { padding: 14px; font-size: 16px; }

  /* Hide vertical timeline entirely on very small screens */
  .vertical-timeline { display: none !important; }

  /* Larger interactive controls */
  .nav-link, .btn, .form-control { touch-action: manipulation; }
}

/* Ensure theme toggle is visible and tappable on small screens (dashboards) */
@media (max-width: 600px) {
  .topbar-right {
    gap: 8px;
    align-items: center;
  }

  .topbar-right .theme-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: transparent; /* keep it subtle */
    color: var(--color-text);
    z-index: 220; /* above overlay */
  }

  .topbar-right .theme-toggle svg { color: currentColor; stroke: currentColor; }
}

/* Make features-scroll-container truly edge-to-edge on small screens (override container padding) */
@media (max-width: 600px) {
  .features-scroll-container {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw; /* pull to viewport left edge */
    margin-right: -50vw; /* pull to viewport right edge */
    width: 100vw; /* ensure full viewport width */
    padding: 0; /* remove any vertical padding */
    -webkit-mask-image: none; /* remove edge fade */
    mask-image: none;
  }

  /* Slightly smaller cards on very small devices */
  .features-scroll-track .feature-card { flex: 0 0 240px; }
}

/* Remove padding on mobile for horizontally-scrolling feature lists so cards reach the screen edges */
@media (max-width: 600px) {
  .features-scroll-container {
    padding: 0; /* remove vertical padding so the scroll area aligns with edges */
    -webkit-mask-image: none; /* disable fade mask on small screens to avoid clipping */
    mask-image: none;
  }

  .features-scroll-track {
    gap: 12px; /* tighter gap for small screens */
    width: auto; /* allow flexible width for variable card counts */
    animation-duration: 60s; /* speed up slightly on small screens */
  }

  .features-scroll-track .feature-card {
    flex: 0 0 260px; /* slightly smaller cards on phones */
  }
}

@media (max-width: 420px) {
  /* Extra small phones: further scale down headings */
  .hero-title { font-size: 1.6rem; }
  .hero-title-secondary { font-size: 1.2rem; }
  .school-name { display: none; } /* save space in header */
  .logo-circle { width: 36px; height: 36px; }
  .logo-circle.small { width: 28px; height: 28px; }
  .container { padding-left: 10px; padding-right: 10px; }
  .hero-subtitle { font-size: 0.9rem; }
}