/* ==========================================================
   TABLE OF CONTENTS
   1.  CSS Variables
   2.  Reset
   3.  Base Styles
   4.  Typography
   5.  Utility Classes
   6.  Layout
   7.  Loading Screen
   8.  Navbar
   9.  Hero
   10. About
   11. Education
   12. Projects
   13. Current Projects
   14. Skills
   15. Competitive Programming
   16. Achievements
   17. Contact
   18. Footer
   19. Buttons
   20. Cards
   21. Forms
   22. Animations
   23. Responsive (Mobile → Desktop)
   24. Admin Panel
   ========================================================== */

/* ==========================================================
   1. CSS VARIABLES
   ========================================================== */
:root {
  /* Colors — approved palette only */
  --color-bg-primary: #051F20;
  --color-bg-secondary: #0B2B26;
  --color-bg-card: #163832;
  --color-accent: #235347;
  --color-accent-primary: #8EB69B;
  --color-text-primary: #DAF1DE;

  /* Derived shades */
  --color-bg-primary-alt: #08302f;
  --color-bg-card-hover: #1c433c;
  --color-accent-hover: #2b6353;
  --color-accent-primary-hover: #a3c9ae;
  --color-accent-primary-soft: rgba(142, 182, 155, 0.12);
  --color-border: rgba(142, 182, 155, 0.16);
  --color-border-strong: rgba(142, 182, 155, 0.32);
  --color-text-secondary: rgba(218, 241, 222, 0.85);
  --color-text-muted: rgba(218, 241, 222, 0.72);
  --color-glass-bg: rgba(22, 56, 50, 0.55);
  --color-glass-border: rgba(218, 241, 222, 0.1);
  --color-overlay: rgba(5, 31, 32, 0.72);

  /* Status colors (derived, kept within the same hue family) */
  --color-success: #8EB69B;
  --color-error: #e08a7a;
  --color-warning: #d9c07a;

  /* GitHub contribution-graph levels (0 = no activity → 4 = busiest) */
  --gh-level-0: rgba(142, 182, 155, 0.10);
  --gh-level-1: rgba(142, 182, 155, 0.30);
  --gh-level-2: rgba(142, 182, 155, 0.50);
  --gh-level-3: rgba(142, 182, 155, 0.72);
  --gh-level-4: #8EB69B;

  /* Typography */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-hero: 3.5rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Spacing — 8px grid */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.32);
  --shadow-glow: 0 0 32px rgba(142, 182, 155, 0.18);

  /* Transitions */
  --transition-fast: 200ms ease;
  --transition-base: 320ms ease;
  --transition-slow: 600ms ease;

  /* Z-index scale */
  --z-base: 1;
  --z-navbar: 100;
  --z-back-to-top: 150;
  --z-toast: 300;
  --z-modal: 400;
  --z-loading-screen: 500;

  /* Container */
  --container-width: 1200px;
  --container-padding: var(--space-3);
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

/*
 * Guarantees the native [hidden] attribute always wins, even over
 * components that set their own `display: flex/grid` (.modal-overlay,
 * .loading-state, .empty-state, .projects-grid, etc.). Without this,
 * an author rule with a plain class selector overrides the browser's
 * default `[hidden] { display: none }`, so anything JS marks hidden
 * (e.g. modals, loading/empty states) would incorrectly stay visible.
 */
[hidden] {
  display: none !important;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

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

ul,
ol {
  list-style: none;
}

input,
textarea {
  font: inherit;
  color: inherit;
}

/* ==========================================================
   3. BASE STYLES
   ========================================================== */
body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  overflow-x: hidden;
}

main {
  display: block;
}

section {
  scroll-margin-top: 84px;
}

/* Alternate section background rhythm */
.section:nth-of-type(even) {
  background-color: var(--color-bg-secondary);
}

/* ==========================================================
   4. TYPOGRAPHY
   ========================================================== */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-text-primary);
}

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

/* ==========================================================
   5. UTILITY CLASSES
   ========================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-2);
  z-index: 999;
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-2);
}

:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 3px;
}

.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ==========================================================
   6. LAYOUT
   ========================================================== */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section {
  padding-block: var(--space-7);
}

.section-header {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-6);
}

.section-header__eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin-bottom: var(--space-1);
}

.section-header__title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-2);
}

.section-header__desc {
  color: var(--color-text-secondary);
}

/* Glassmorphism utility, reused across navbar/cards/modal */
.glass {
  background: var(--color-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-glass-border);
  box-shadow: inset 0 1px 0 rgba(218, 241, 222, 0.06);
}

/* Readable fallback when the browser lacks backdrop-filter: swap the
   translucent glass fills for solid surfaces so text keeps its contrast. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .navbar.is-scrolled,
  .navbar__nav,
  .loading-screen__logo,
  .navbar__logo,
  .project-card,
  .cp-card,
  .achievements-grid > *,
  .current-projects-grid > *,
  .toast,
  .social-icon,
  .back-to-top {
    background: var(--color-bg-card);
  }
}

/* ==========================================================
   7. LOADING SCREEN
   ========================================================== */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: var(--z-loading-screen);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-primary);
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

.loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-screen__logo {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-glass-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--color-glass-border);
  color: var(--color-accent-primary);
  animation: pulseGlow 1.6s ease-in-out infinite;
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--color-accent-primary);
  z-index: var(--z-navbar);
  transition: width var(--transition-fast);
}

/* ==========================================================
   8. NAVBAR
   ========================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-navbar);
  width: 100%;
  background: transparent;
  transition: background var(--transition-base), border-color var(--transition-base);
  border-bottom: 1px solid transparent;
}

.navbar.is-scrolled {
  background: var(--color-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-glass-border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

.navbar__inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding: var(--space-2) var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar__logo {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  color: var(--color-accent-primary);
  transition: transform var(--transition-fast);
}

.navbar__logo:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
  color: var(--color-accent-primary-hover);
}

.navbar__list {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.navbar__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  position: relative;
  padding-block: var(--space-1);
  transition: color var(--transition-fast);
}

.navbar__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent-primary);
  transition: width var(--transition-fast);
}

.navbar__link:hover,
.navbar__link.is-active {
  color: var(--color-text-primary);
}

.navbar__link:hover::after,
.navbar__link.is-active::after {
  width: 100%;
}

.navbar__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

/* Right-hand controls group (theme toggle + hamburger) so the nav links
   keep the whole middle of the bar to themselves. */
.navbar__controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Light/Dark switch. Same glass pill language as .navbar__logo so it
   reads as part of the bar rather than a bolted-on control. */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  color: var(--color-accent-primary);
  transition: transform var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), background var(--transition-fast);
}

.theme-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
  background: var(--color-accent-primary-soft);
}

/* Show the icon of the theme the click will switch TO. */
.theme-toggle__icon--light {
  display: none;
}

:root[data-theme='light'] .theme-toggle__icon--dark {
  display: none;
}

:root[data-theme='light'] .theme-toggle__icon--light {
  display: block;
}

.navbar__toggle-icon-close {
  display: none;
}

.navbar.is-menu-open .navbar__toggle-icon-open {
  display: none;
}

.navbar.is-menu-open .navbar__toggle-icon-close {
  display: block;
}

/* ==========================================================
   9. HERO
   ========================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-6);
  overflow: hidden;
  background: radial-gradient(circle at 50% 20%, var(--color-bg-primary-alt) 0%, var(--color-bg-primary) 60%);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
  background: var(--color-accent-primary);
  animation: floatSlow 10s ease-in-out infinite;
}

/* NOTE: the two bright side glows that used to sit left and right of the
   profile photo (.hero__blob--1 and a mirrored .hero__bg::after) were
   removed on request — the only glow in the hero is now the halo centred
   on the profile picture itself (see .hero__profile-wrap::before). */

.hero__blob--2 {
  width: 260px;
  height: 260px;
  bottom: 10%;
  right: 10%;
  background: var(--color-accent);
  animation-delay: -3s;
}

.hero__blob--3 {
  width: 200px;
  height: 200px;
  top: 45%;
  right: 25%;
  background: var(--color-bg-card);
  animation-delay: -6s;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  max-width: 640px;
}

/* The glow lives on the wrapper (not the image) and is centred on it, so
   it radiates evenly on all four sides. The float animation also moves to
   the wrapper so the glow travels with the photo and never drifts off it. */
.hero__profile-wrap {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  margin-bottom: var(--space-1);
  animation: floatSlow 6s ease-in-out infinite;
}

.hero__profile-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 155%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(142, 227, 194, 0.32) 0%,
      rgba(142, 227, 194, 0.14) 42%,
      rgba(142, 227, 194, 0) 70%);
  filter: blur(16px);
  z-index: -1;
  pointer-events: none;
}

.hero__profile-img {
  display: block;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  border: 3px solid var(--color-glass-border);
  /* 0 0 offsets = perfectly centred halo (no directional drop shadow). */
  box-shadow: 0 0 0 6px rgba(142, 227, 194, 0.06), 0 0 34px rgba(142, 227, 194, 0.26);
}

.hero__name {
  font-size: clamp(2.25rem, 2vw + 2rem, 3.75rem);
  font-weight: var(--fw-extrabold);
}

/* Availability pill ("Open to internships / research"). A quiet status
   chip — outlined, not filled — so it reads as a live signal without
   competing with the primary call-to-action buttons. */
.hero__availability {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px 14px 6px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: var(--color-accent-primary-soft);
  color: var(--color-accent-primary);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-align: left;
}

.hero__availability-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 0 var(--color-accent-primary-soft);
  animation: availabilityPulse 2.4s ease-out infinite;
}

.hero__typing {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-accent-primary);
  min-height: 1.5em;
}

.hero__typing-cursor {
  animation: blink 1s step-start infinite;
}

.hero__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.hero__socials {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.scroll-hint {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-muted);
  animation: floatSlow 2.4s ease-in-out infinite;
}

/* ==========================================================
   10. ABOUT
   ========================================================== */
.about__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-5);
  align-items: center;
}

.about__text p {
  font-size: var(--fs-md);
  /* Left-aligned for even word spacing. Justify left large gaps between
     words; hyphenation stays OFF (no stray "-" mid-word). */
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;
}

.about__stats {
  display: grid;
  gap: var(--space-2);
}

/* ==========================================================
   11. EDUCATION
   ========================================================== */
.timeline {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border);
}

.timeline__item {
  position: relative;
  margin-bottom: var(--space-3);
}

.timeline__item:last-child {
  margin-bottom: 0;
}

.timeline__marker {
  position: absolute;
  left: calc(-1 * var(--space-4) - 6px);
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-bg-primary);
}

.timeline__item--current .timeline__marker {
  background: var(--color-accent-primary);
  box-shadow: 0 0 0 4px var(--color-accent-primary-soft);
}

.timeline__degree {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
}

.timeline__institution {
  color: var(--color-accent-primary);
  font-size: var(--fs-sm);
  margin-top: 2px;
}

.timeline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  margin-top: var(--space-1);
}

.timeline__desc {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
}

/* ==========================================================
   12. PROJECTS
   ========================================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: center;
  margin-bottom: var(--space-4);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.filter-chip:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.filter-chip.is-active {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  border-color: var(--color-accent-primary);
  font-weight: var(--fw-semibold);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
  align-items: stretch;
}

/* Featured project: always a single full-width block centred in the
   container (its wrapper is a plain box, so the card itself is the grid). */
.featured-project-wrap {
  display: block;
  width: 100%;
}

.project-card--featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-4);
  min-height: 280px;
  align-items: center;
  width: 100%;
  margin-inline: auto;
}

/* ==========================================================
   13. CURRENT PROJECTS
   ========================================================== */
.current-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

.progress-bar {
  margin-top: var(--space-2);
}

.progress-bar__track {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(218, 241, 222, 0.08);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-accent-primary);
  transition: width var(--transition-slow);
}

.progress-bar__label {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ==========================================================
   14. SKILLS
   ========================================================== */
.skills-groups {
  display: grid;
  gap: var(--space-4);
}

.skill-group__title {
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
  color: var(--color-accent-primary);
}

.skill-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.skill-chip {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.skill-chip:hover {
  transform: translateY(-2px);
  background: var(--color-bg-card-hover);
}

/* ==========================================================
   15. COMPETITIVE PROGRAMMING
   ========================================================== */
.cp-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.cp-summary__label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cp-summary__value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent-primary);
}

.cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}

.cp-card__platform {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
}

.cp-card__stat {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.cp-card__stat:last-of-type {
  border-bottom: none;
}

/* ==========================================================
   16. ACHIEVEMENTS
   ========================================================== */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

/* ==========================================================
   17. CONTACT
   ========================================================== */
.contact-form {
  max-width: 560px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-3);
}

.contact-form__submit {
  position: relative;
  justify-self: center;
  min-width: 200px;
}

.contact-form__status {
  text-align: center;
  font-size: var(--fs-sm);
  min-height: 1.2em;
}

.contact-form__status.is-success {
  color: var(--color-success);
}

.contact-form__status.is-error {
  color: var(--color-error);
}

/* ==========================================================
   18. FOOTER
   ========================================================== */
.footer {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-5);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.footer__name {
  color: var(--color-accent-primary);
  font-weight: var(--fw-semibold);
}

.footer__socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.footer__copyright {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.footer__visits {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.footer__visits-count {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-primary);
}

/* ==========================================================
   19. BUTTONS
   ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.btn:hover {
  transform: translateY(-2px) scale(1.02);
}

.btn--primary {
  background: linear-gradient(135deg, var(--color-accent-primary-hover) 0%, var(--color-accent-primary) 100%);
  color: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  box-shadow: var(--shadow-glow);
}

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

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

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

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

/* Disabled / loading buttons: dimmed, no hover lift, not-allowed cursor */
.btn:disabled,
.btn[disabled],
.btn.is-loading {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.btn:disabled:hover,
.btn[disabled]:hover,
.btn.is-loading:hover {
  transform: none;
  box-shadow: none;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  color: var(--color-text-secondary);
  transition: transform var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.social-icon:hover {
  transform: translateY(-3px);
  color: var(--color-accent-primary);
  background: var(--color-accent-primary-soft);
}

.back-to-top {
  position: fixed;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: var(--z-back-to-top);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-glass-bg);
  border: 1px solid var(--color-glass-border);
  color: var(--color-accent-primary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-3px);
}

/* ==========================================================
   20. CARDS
   ========================================================== */
.card,
.project-card,
.timeline__item,
.cp-card,
.stat-card,
.achievements-grid > * {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: inset 0 1px 0 rgba(218, 241, 222, 0.05);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.project-card,
.cp-card,
.achievements-grid > *,
.current-projects-grid > * {
  background: var(--color-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.project-card:hover,
.cp-card:hover,
.achievements-grid > *:hover,
.current-projects-grid > *:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(218, 241, 222, 0.05);
  border-color: var(--color-border-strong);
}

.timeline__item {
  background: var(--color-bg-card);
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-card__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.stat-card__value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent-primary);
}

.project-card__image,
.card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  background: var(--color-bg-secondary);
}

/* Reserved blank slot used only when some cards in a list have an image
   and others don't, so every title still starts at the same height. */
.card__image--placeholder {
  display: block;
  border: 1px solid var(--color-border);
}

/* ---- Uniform card geometry ----------------------------------------
   Cards stretch to fill their grid cell, and the action row is pushed to
   the bottom with margin-top:auto. Result: a 2-line description and a
   6-line description produce cards of the same height whose GitHub /
   Live Demo / View Certificate buttons sit on the same baseline. */
.projects-grid > .project-card,
.current-projects-grid > *,
.achievements-grid > *,
.research-grid > * {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.card__body > .card__desc {
  flex: 1 1 auto;
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  margin-bottom: var(--space-1);
}

.card__desc {
  font-size: var(--fs-sm);
  /* Left-aligned so word spacing stays even. Justify created ugly gaps
     between words in the narrow card column. Hyphenation stays OFF. */
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;
}

.card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block: var(--space-2);
}

.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

/* Single bottom link (View Certificate / View Paper). */
.card__cta {
  margin-top: auto;
}

/* A bare badge/pill directly inside a flex column would stretch to the
   full card width; keep it hugging its own text as before. */
.card__body > .badge,
.research-grid > * > .badge {
  align-self: flex-start;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--space-1);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--color-accent-primary-soft);
  color: var(--color-accent-primary);
}

.badge--status-completed {
  background: rgba(142, 182, 155, 0.18);
  color: var(--color-success);
}

.badge--status-ongoing {
  background: rgba(217, 192, 122, 0.18);
  color: var(--color-warning);
}

.badge--status-planned {
  background: rgba(218, 241, 222, 0.08);
  color: var(--color-text-muted);
}

/* Loading / Empty states */
.loading-state,
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-5);
  color: var(--color-text-muted);
  text-align: center;
}

.spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent-primary);
  animation: spin 0.8s linear infinite;
}

.spinner--btn {
  width: 18px;
  height: 18px;
  border-width: 2px;
  margin-left: var(--space-1);
}

/* Toast notifications */
.toast-container {
  position: fixed;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: min(360px, 90vw);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-glass-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  animation: slideUp var(--transition-base);
}

.toast--success {
  border-color: var(--color-success);
}

.toast--error {
  border-color: var(--color-error);
}

/* Modal (future-ready — used by Admin Panel CRUD forms) */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}

.modal {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  animation: scaleIn var(--transition-base);
}

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

.modal__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.modal__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.modal__close:hover {
  background: var(--color-accent-primary-soft);
  color: var(--color-text-primary);
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ==========================================================
   21. FORMS
   ========================================================== */
.form-field {
  position: relative;
}

.form-field__input {
  width: 100%;
  padding: var(--space-3) var(--space-2) var(--space-1);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-field__input:focus {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-accent-primary-soft);
}

.form-field__input--textarea {
  resize: vertical;
  min-height: 120px;
}

/* Native <select> re-skinned to match the text inputs on the dark
   theme: strip the OS chrome and draw our own accent chevron. The
   data-URI chevron is covered by the same `img-src data:` the hero
   monogram fallback already needs, so it adds no new CSP requirement. */
select.form-field__input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%238EB69B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  cursor: pointer;
}

.form-field__label {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  pointer-events: none;
  transition: top var(--transition-fast), font-size var(--transition-fast), color var(--transition-fast);
}

.form-field__input:focus + .form-field__label,
.form-field__input:not(:placeholder-shown) + .form-field__label {
  top: 6px;
  font-size: var(--fs-xs);
  color: var(--color-accent-primary);
}

.form-field__error {
  display: block;
  min-height: 1.2em;
  font-size: var(--fs-xs);
  color: var(--color-error);
  margin-top: 4px;
}

.form-field__hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.form-field.has-error .form-field__input {
  border-color: var(--color-error);
}

.form-field__input:disabled,
.form-field__input[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================
   22. ANIMATIONS
   ========================================================== */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--color-accent-primary-soft);
  }
  50% {
    box-shadow: 0 0 0 10px transparent;
  }
}

/* Availability dot: a soft outward ping, never a size change (so the
   pill's height stays perfectly stable). */
@keyframes availabilityPulse {
  0% {
    box-shadow: 0 0 0 0 var(--color-accent-primary-soft);
  }
  70% {
    box-shadow: 0 0 0 8px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

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

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Reveal-on-scroll (JS toggles .is-visible when a section enters the viewport) */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

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

/* 404 page (reuses .glass, .card, .btn, .section-header__title/__desc) */
.not-found {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background: radial-gradient(circle at 50% 20%, var(--color-bg-primary-alt) 0%, var(--color-bg-primary) 60%);
}

.not-found__card {
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.not-found__code {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  color: var(--color-accent-primary);
}

/* ==========================================================
   22a. GITHUB ACTIVITY
   Rendered from the public GitHub API by script.js. The whole
   block hides itself if the data can't be fetched, so a rate
   limit or an offline visitor never leaves an empty shell.

   NOTE: this block is a <div class="section">, not a <section>.
   The page's background rhythm uses .section:nth-of-type(even),
   which counts elements of the same TYPE — using a div keeps every
   real <section> on its original alternating background.
   ========================================================== */
.github-section {
  scroll-margin-top: 84px;
  border-top: 1px solid var(--color-border);
}

.github-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.github-stat {
  text-align: center;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-glass-bg);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.github-stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent-primary);
  line-height: 1.2;
}

.github-stat__label {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.github-graph {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-glass-bg);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: var(--space-4);
}

.github-graph__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.github-graph__title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

.github-graph__total {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* Horizontal scroll on phones instead of squashing the squares. */
.github-graph__scroll {
  overflow-x: auto;
  padding-bottom: var(--space-1);
}

.github-graph__grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 11px);
  gap: 3px;
  min-width: max-content;
}

.github-day {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--gh-level-0);
}

.github-day--l1 { background: var(--gh-level-1); }
.github-day--l2 { background: var(--gh-level-2); }
.github-day--l3 { background: var(--gh-level-3); }
.github-day--l4 { background: var(--gh-level-4); }

.github-graph__legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.github-repos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--space-3);
  align-items: stretch;
}

.github-repo {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-glass-bg);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.github-repo:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.github-repo__name {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  word-break: break-word;
}

.github-repo:hover .github-repo__name {
  color: var(--color-accent-primary);
}

.github-repo__desc {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  flex: 1 1 auto;
}

.github-repo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.github-lang-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  margin-right: 5px;
  vertical-align: -1px;
}

.github-section__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

/* ==========================================================
   22b. PROJECT DETAIL MODAL
   Opened from a project card's "Details" button. Reuses the
   shared .modal-overlay / .modal shell (so it inherits the
   focus trap, Escape handling and scroll lock in script.js).
   ========================================================== */
.modal--wide {
  max-width: 720px;
}

.project-card--clickable {
  cursor: pointer;
}

.project-detail__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.project-detail__gallery img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.project-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.project-detail__block + .project-detail__block {
  margin-top: var(--space-3);
}

.project-detail__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent-primary);
  margin-bottom: 4px;
}

/* pre-line keeps the line breaks typed in the admin panel, so a
   "what I learned" list stays a list. */
.project-detail__text {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  white-space: pre-line;
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;
}

/* ==========================================================
   23. RESPONSIVE (Mobile → Desktop)
   Mobile-first base styles above target 320px–767px.
   ========================================================== */

/* Tablet — 768px and up */
@media (min-width: 768px) {
  .navbar__list {
    gap: var(--space-4);
  }

  .about__grid {
    grid-template-columns: 1.4fr 1fr;
  }

  .contact-form {
    grid-template-columns: 1fr 1fr;
  }

  .contact-form .form-field:nth-child(4),
  .contact-form .contact-form__submit,
  .contact-form .contact-form__status {
    grid-column: 1 / -1;
  }

  /* Side-by-side featured layout: the image is its own column, so it
     needs no bottom gap (that gap is only for the stacked phone view). */
  .project-card--featured > .card__image {
    margin-bottom: 0;
  }
}

/* Below small-laptop width: nav collapses to a drawer + hamburger.
   Set to 899px (not 1023) so that phones with "Desktop site" enabled —
   which render at ~980px CSS width — and small laptops keep the full
   horizontal nav (a proper desktop feel) instead of the side drawer. */
@media (max-width: 899px) {
  .navbar__nav {
    position: fixed;
    inset: 0 0 0 auto;
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: min(78vw, 320px);
    z-index: var(--z-navbar);
    background: var(--color-glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--color-glass-border);
    display: flex;
    align-items: flex-start;
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform var(--transition-base), visibility var(--transition-base);
  }

  .navbar.is-menu-open .navbar__nav {
    visibility: visible;
    transform: translateX(0);
  }

  .navbar__list {
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
  }

  .navbar__toggle {
    display: flex;
  }
}

/* 900–1199px (incl. phones in "Desktop site" mode at ~980px): show the
   full horizontal nav, but tighten link spacing so all 10 links fit on
   one row without wrapping or collapsing back to the drawer. */
@media (min-width: 900px) and (max-width: 1199px) {
  .navbar__list {
    gap: var(--space-2);
  }
}

/* Phone: single-column content layouts */
@media (max-width: 767px) {
  .about__grid,
  .project-card--featured {
    grid-template-columns: 1fr;
  }

  .project-card--featured {
    min-height: unset;
  }
}

/* Laptop — 1024px and up */
@media (min-width: 1024px) {
  :root {
    --container-padding: var(--space-4);
  }

  .section {
    padding-block: var(--space-7);
  }
}

/* Desktop — 1440px and up */
@media (min-width: 1440px) {
  :root {
    --container-width: 1280px;
  }
}

/* Large Desktop — 1920px and up */
@media (min-width: 1920px) {
  :root {
    --container-width: 1440px;
    --fs-hero: 4rem;
  }
}

/* ==========================================================
   24. ADMIN PANEL
   Reuses every token/component above (colors, cards, buttons,
   forms, modals, toasts); only new layout primitives specific
   to the Admin Panel shell are added here.
   ========================================================== */

.admin-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background: radial-gradient(circle at 50% 20%, var(--color-bg-primary-alt) 0%, var(--color-bg-primary) 60%);
}

.admin-auth__card {
  width: 100%;
  max-width: 380px;
  display: grid;
  gap: var(--space-2);
}

.admin-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.admin-sidebar {
  background: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-sidebar__nav ul {
  display: grid;
  gap: 4px;
}

.admin-sidebar__link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.3;
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.admin-sidebar__link .icon {
  flex-shrink: 0;
}

.admin-sidebar__link:hover {
  background: var(--color-accent-primary-soft);
  color: var(--color-text-primary);
}

.admin-sidebar__link.is-active {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  font-weight: var(--fw-semibold);
}

.admin-sidebar__logout {
  margin-top: auto;
  justify-content: center;
}

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

.admin-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: var(--color-bg-primary);
  z-index: var(--z-navbar);
}

.admin-topbar__toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.admin-topbar__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

#admin-main-content {
  padding: var(--space-4);
  flex: 1;
}

.admin-view__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.admin-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.admin-activity-list {
  display: grid;
  gap: var(--space-1);
}

.admin-activity-list li {
  padding: var(--space-2);
  background: var(--color-bg-card);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-glass-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.admin-table th,
.admin-table td {
  padding: var(--space-2);
  text-align: left;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--color-border);
}

.admin-table th {
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table tbody tr:hover {
  background: var(--color-accent-primary-soft);
}

.admin-table__actions {
  display: flex;
  gap: var(--space-1);
  white-space: nowrap;
}

/* Responsive: collapsible sidebar below tablet width */
@media (max-width: 1023px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(78vw, 280px);
    z-index: var(--z-navbar);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
  }

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

  .admin-topbar__toggle {
    display: flex;
  }
}

/* Narrow phones: let wide admin tables scroll horizontally instead of
   forcing the whole page to overflow sideways. */
@media (max-width: 640px) {
  .admin-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ==========================================================
   25. LIGHT THEME
   Opt-in only: theme-init.js writes data-theme="light" on <html>
   from localStorage before first paint, and the navbar toggle
   flips it at runtime. Dark stays the default everywhere.

   The palette is the SAME brand family, inverted: the deep green
   (#235347) becomes the accent/ink on near-white surfaces, so the
   site keeps its identity instead of turning into a generic
   white template.

   Everything below is either (a) a token re-declaration or
   (b) an override for a value that was hardcoded in the dark
   rules above (glass insets, mint glows, black shadows, the
   <select> chevron data-URI). Kept last in the file so it wins.
   ========================================================== */
:root[data-theme='light'] {
  color-scheme: light;

  /* Core surfaces */
  --color-bg-primary: #F4F8F5;
  --color-bg-secondary: #EAF2EC;
  --color-bg-card: #FFFFFF;
  --color-accent: #A8C9B4;
  --color-accent-primary: #235347;
  --color-text-primary: #08201C;

  /* Derived shades */
  --color-bg-primary-alt: #E7F0E9;
  --color-bg-card-hover: #F2F7F3;
  --color-accent-hover: #C7DCCD;
  --color-accent-primary-hover: #163832;
  --color-accent-primary-soft: rgba(35, 83, 71, 0.10);
  --color-border: rgba(35, 83, 71, 0.18);
  --color-border-strong: rgba(35, 83, 71, 0.34);
  --color-text-secondary: rgba(8, 32, 28, 0.82);
  --color-text-muted: rgba(8, 32, 28, 0.62);
  --color-glass-bg: rgba(255, 255, 255, 0.74);
  --color-glass-border: rgba(35, 83, 71, 0.14);
  --color-overlay: rgba(8, 32, 28, 0.45);

  /* Status colors — darkened so they stay legible on white */
  --color-success: #1F6B4F;
  --color-error: #B4462F;
  --color-warning: #8A6D12;

  /* Contribution-graph levels */
  --gh-level-0: rgba(35, 83, 71, 0.09);
  --gh-level-1: rgba(35, 83, 71, 0.28);
  --gh-level-2: rgba(35, 83, 71, 0.48);
  --gh-level-3: rgba(35, 83, 71, 0.70);
  --gh-level-4: #235347;

  /* Shadows — much softer; heavy black shadows look dirty on white */
  --shadow-sm: 0 1px 3px rgba(8, 32, 28, 0.08);
  --shadow-md: 0 8px 22px rgba(8, 32, 28, 0.10);
  --shadow-lg: 0 18px 44px rgba(8, 32, 28, 0.14);
  --shadow-glow: 0 0 28px rgba(35, 83, 71, 0.16);
}

/* The dark rules paint a 1px white "inner top light" on glass and cards.
   On white surfaces that is invisible, so swap it for a real soft shadow. */
:root[data-theme='light'] .glass {
  box-shadow: 0 1px 2px rgba(8, 32, 28, 0.05);
}

:root[data-theme='light'] .card,
:root[data-theme='light'] .project-card,
:root[data-theme='light'] .timeline__item,
:root[data-theme='light'] .cp-card,
:root[data-theme='light'] .stat-card,
:root[data-theme='light'] .achievements-grid > * {
  box-shadow: 0 1px 3px rgba(8, 32, 28, 0.06);
}

:root[data-theme='light'] .project-card:hover,
:root[data-theme='light'] .cp-card:hover,
:root[data-theme='light'] .achievements-grid > *:hover,
:root[data-theme='light'] .current-projects-grid > *:hover {
  box-shadow: var(--shadow-md);
}

:root[data-theme='light'] .navbar.is-scrolled {
  box-shadow: 0 6px 20px rgba(8, 32, 28, 0.07);
}

/* Hero halo + photo ring: mint reads as a smudge on white, so use the
   brand green at a low alpha instead. */
:root[data-theme='light'] .hero__profile-wrap::before {
  background: radial-gradient(circle,
      rgba(35, 83, 71, 0.20) 0%,
      rgba(35, 83, 71, 0.09) 42%,
      rgba(35, 83, 71, 0) 70%);
}

:root[data-theme='light'] .hero__profile-img {
  border-color: rgba(35, 83, 71, 0.20);
  box-shadow: 0 0 0 6px rgba(35, 83, 71, 0.05), 0 0 30px rgba(35, 83, 71, 0.14);
}

/* Background blobs are pure texture; keep them faint on a light page. */
:root[data-theme='light'] .hero__blob {
  opacity: 0.22;
}

:root[data-theme='light'] .progress-bar__track {
  background: rgba(35, 83, 71, 0.12);
}

:root[data-theme='light'] .badge--status-completed {
  background: rgba(31, 107, 79, 0.13);
}

:root[data-theme='light'] .badge--status-ongoing {
  background: rgba(138, 109, 18, 0.14);
}

:root[data-theme='light'] .badge--status-planned {
  background: rgba(8, 32, 28, 0.07);
}

/* The <select> chevron is a data-URI with the accent baked in. */
:root[data-theme='light'] select.form-field__input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23235347' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}