/* ── TK PYRO — Main Stylesheet (Mobile-first) ── */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:wght@800;900&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --pyro-orange:   #FF6B35;
  --flame-gold:    #FFB703;
  --midnight-navy: #0F172A;
  --soft-cream:    #FFF8EE;
  --electric-coral:#FF4D6D;
  --navy-800:      #1E293B;
  --navy-700:      #334155;
  --navy-400:      #94A3B8;
  --white:         #FFFFFF;

  --grad-rising:  linear-gradient(to top,  #FF5E2C, #FF8A00, #FFD166);
  --grad-forward: linear-gradient(to right, #FF5E2C, #FF8A00, #FFD166);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-card: 0 4px 24px rgba(0,0,0,.18);
  --shadow-glow: 0 0 24px rgba(255,107,53,.35);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', sans-serif;
  background: var(--midnight-navy);
  color: var(--soft-cream);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }

/* ── Utility ── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.text-orange { color: var(--pyro-orange); }
.text-gold   { color: var(--flame-gold); }
.text-cream  { color: var(--soft-cream); }

.badge {
  display: inline-flex; align-items: center;
  padding: .2rem .65rem; border-radius: 99px;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  white-space: nowrap; flex-shrink: 0;
}
.badge-thai          { background: rgba(255,183,3,.15);  color: var(--flame-gold); }
.badge-international { background: rgba(255,107,53,.15); color: var(--pyro-orange); }
.badge-athletics     { background: rgba(255,77,109,.12); color: var(--electric-coral); }
.badge-activity      { background: rgba(148,163,184,.15);color: var(--navy-400); }
.badge-open   { background: rgba(52,211,153,.15); color: #34D399; }
.badge-closed { background: rgba(148,163,184,.1);  color: var(--navy-400); }

/* ── Navbar ── */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(15,23,42,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,107,53,.15);
  padding: .75rem 0;
}
.navbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.navbar-logo {
  display: flex; align-items: center; gap: .6rem;
}
.navbar-logo img { height: 36px; width: auto; }
.navbar-logo-text {
  font-family: 'Anton', sans-serif;
  font-size: 1.2rem; letter-spacing: .08em;
  background: var(--grad-forward);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.navbar-actions { display: flex; gap: .5rem; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1.2rem; border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 600; cursor: pointer;
  border: none; transition: all .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad-forward);
  color: var(--midnight-navy);
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--pyro-orange);
  color: var(--pyro-orange);
}
.btn-outline:hover { background: rgba(255,107,53,.1); }

.btn-ghost {
  background: rgba(255,255,255,.07);
  color: var(--soft-cream);
}
.btn-ghost:hover { background: rgba(255,255,255,.12); }

.btn-danger {
  background: rgba(255,77,109,.15);
  border: 1.5px solid rgba(255,77,109,.4);
  color: #FCA5A5;
}
.btn-danger:hover { background: rgba(255,77,109,.28); border-color: rgba(255,77,109,.7); }

.btn-sm { padding: .35rem .85rem; font-size: .8rem; }
.btn-lg { padding: .75rem 2rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* ── Hero ── */
.hero {
  position: relative; overflow: hidden;
  min-height: 60svh;
  display: flex; align-items: center;
  background: var(--midnight-navy);
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(255,94,44,.28) 0%, transparent 70%);
}
.hero-content {
  position: relative; z-index: 1;
  text-align: center;
  padding: 2rem 1rem 3rem;
  width: 100%;
}
.hero-logo { height: 80px; width: auto; margin: 0 auto 1.5rem; }
.hero-sub {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: .85rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--pyro-orange); margin-bottom: .75rem;
}
.hero-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.8rem, 10vw, 6rem);
  line-height: 1; letter-spacing: .04em;
  background: var(--grad-rising);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: .5rem;
}
.hero-tagline {
  font-size: clamp(1rem, 3.5vw, 1.4rem);
  color: var(--soft-cream); opacity: .85;
  margin-bottom: 2rem;
}
.hero-cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* Floating orbs */
.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .18; pointer-events: none;
}
.hero-orb-1 { width: 300px; height: 300px; background: var(--pyro-orange); top: 10%; right: -5%; }
.hero-orb-2 { width: 200px; height: 200px; background: var(--flame-gold); bottom: 5%; left: 0%; }

/* ── Announcements ── */
.announcements { padding: 1.25rem 0; background: rgba(255,107,53,.08); border-bottom: 1px solid rgba(255,107,53,.15); }
.announcement-ticker { display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; padding: .25rem 0; }
.announcement-ticker::-webkit-scrollbar { display: none; }
.announcement-item {
  flex-shrink: 0;
  background: rgba(255,107,53,.12);
  border: 1px solid rgba(255,107,53,.25);
  border-radius: var(--radius-sm);
  padding: .5rem 1rem;
  font-size: .85rem; font-weight: 500;
}
.announcement-label {
  display: inline-block; padding: .1rem .5rem; border-radius: 4px;
  background: var(--pyro-orange); color: var(--midnight-navy);
  font-size: .7rem; font-weight: 700; margin-right: .5rem;
}

/* ── Section ── */
.section { padding: 3rem 0; }
.section-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  letter-spacing: .04em; margin-bottom: .35rem;
}
.section-subtitle { color: var(--navy-400); font-size: .9rem; margin-bottom: 2rem; }

/* ── Category Tabs ── */
.cat-tabs {
  display: flex; gap: .5rem; overflow-x: auto;
  scrollbar-width: none; padding-bottom: .25rem;
  margin-bottom: 1.75rem;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  flex-shrink: 0; padding: .45rem 1rem; border-radius: 99px;
  font-size: .82rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.12);
  background: transparent; color: var(--navy-400);
  transition: all .2s;
}
.cat-tab.active, .cat-tab:hover {
  background: var(--pyro-orange); border-color: var(--pyro-orange);
  color: var(--midnight-navy);
}

/* ── Sub-filters (level + gender) ── */
.sub-filters {
  display: flex; gap: .75rem 1.25rem; flex-wrap: wrap; align-items: center;
  padding: .65rem 1rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
}
.filter-divider {
  width: 1px; height: 1.4rem; background: rgba(255,255,255,.1);
  flex-shrink: 0;
}
@media (max-width: 480px) { .filter-divider { display: none; } }
.filter-group {
  display: flex; gap: .35rem; align-items: center; flex-wrap: wrap;
}
.filter-label {
  font-size: .68rem; font-weight: 700; color: var(--navy-400);
  text-transform: uppercase; letter-spacing: .06em;
  margin-right: .1rem; white-space: nowrap;
}
.fpill {
  padding: .22rem .7rem; border-radius: 99px;
  font-size: .74rem; font-weight: 600; cursor: pointer;
  background: transparent; transition: all .18s;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--navy-400);
}
.fpill-level:hover { border-color: rgba(255,107,53,.4); color: var(--soft-cream); }
.fpill-level.active {
  background: rgba(255,107,53,.15);
  border-color: var(--pyro-orange);
  color: var(--pyro-orange);
}
.fpill-gender:hover { border-color: rgba(255,183,3,.4); color: var(--soft-cream); }
.fpill-gender.active {
  background: rgba(255,183,3,.12);
  border-color: var(--flame-gold);
  color: var(--flame-gold);
}

/* ── Sport/Activity Cards ── */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem;
  align-items: stretch;
}
.sport-card-wrap { display: flex; }
.sport-card {
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex; flex-direction: column; gap: .65rem;
  transition: border-color .2s, transform .2s;
  cursor: pointer;
  flex: 1;
}
.sport-card:hover { border-color: rgba(255,107,53,.4); transform: translateY(-2px); }
.sport-card.closed { opacity: .6; pointer-events: none; }

.sport-card-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem;
}
.sport-card-name {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: .95rem; line-height: 1.3;
}
.sport-card-count {
  font-size: .75rem; color: var(--navy-400);
  display: flex; align-items: center; gap: .3rem;
}
.sport-card-count span { color: var(--flame-gold); font-weight: 700; }
.sport-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto;
}
.sport-card-level { font-size: .72rem; color: var(--navy-400); }

/* Athletics search */
.search-bar {
  display: flex; gap: .5rem; margin-bottom: 1.25rem;
}
.search-input {
  flex: 1; padding: .6rem 1rem; border-radius: var(--radius-sm);
  background: var(--navy-800); border: 1px solid rgba(255,255,255,.1);
  color: var(--soft-cream); font-size: .875rem;
}
.search-input::placeholder { color: var(--navy-400); }
.search-input:focus { outline: none; border-color: var(--pyro-orange); }

/* ── About ── */
.about-section { background: var(--navy-800); }
.about-inner {
  display: flex; flex-direction: column; gap: 1.5rem;
  align-items: center; text-align: center;
}
.about-logo { height: 60px; }
.about-name {
  font-family: 'Anton', sans-serif;
  font-size: 1.6rem; letter-spacing: .08em;
}
.about-desc { color: var(--navy-400); font-size: .9rem; max-width: 480px; }

/* ── Footer ── */
.footer {
  background: #0A1020;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 2rem 0;
  text-align: center;
}
.footer-logo img { height: 32px; margin: 0 auto .75rem; }
.footer-copy { font-size: .78rem; color: var(--navy-400); }
.footer-copy a { color: var(--pyro-orange); }

/* ── Modal ── */
.modal-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,23,42,.85);
  backdrop-filter: blur(6px);
  align-items: flex-end;
  justify-content: center;
}
.modal-backdrop.open { display: flex; }

.modal {
  background: var(--navy-800);
  border: 1px solid rgba(255,107,53,.2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%; max-height: 92svh;
  overflow-y: auto; padding: 1.5rem 1rem 2rem;
  animation: slideUp .25s ease;
}
@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.modal-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.2);
  margin: 0 auto 1.25rem;
}
.modal-title {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: 1.1rem; margin-bottom: 1.25rem;
}

/* ── Form ── */
.form-group { margin-bottom: 1rem; }
.form-label {
  display: block; font-size: .82rem; font-weight: 600;
  margin-bottom: .35rem; color: var(--soft-cream);
}
.form-label .req { color: var(--electric-coral); }
.form-control {
  width: 100%; padding: .65rem 1rem;
  background: var(--midnight-navy);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  color: var(--soft-cream); font-size: .9rem;
  transition: border-color .2s;
}
.form-control:focus { outline: none; border-color: var(--pyro-orange); }
.form-control::placeholder { color: var(--navy-400); }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.student-info-box {
  background: rgba(255,107,53,.08);
  border: 1px solid rgba(255,107,53,.2);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  margin-bottom: 1rem;
}
.student-info-box .name {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: 1rem; margin-bottom: .2rem;
}
.student-info-box .meta { font-size: .8rem; color: var(--navy-400); }

.alert {
  padding: .75rem 1rem; border-radius: var(--radius-sm);
  font-size: .875rem; margin-bottom: 1rem;
}
.alert-error   { background: rgba(255,77,109,.12); border: 1px solid rgba(255,77,109,.3); color: #FCA5A5; }
.alert-success { background: rgba(52,211,153,.1);  border: 1px solid rgba(52,211,153,.25); color: #6EE7B7; }
.alert-info    { background: rgba(255,183,3,.08);  border: 1px solid rgba(255,183,3,.2);  color: var(--flame-gold); }

/* Steps */
.modal-step { display: none; }
.modal-step.active { display: block; }

/* Success */
.success-icon {
  font-size: 3rem; text-align: center; margin-bottom: 1rem;
}
.success-title {
  font-family: 'Anton', sans-serif; font-size: 1.5rem;
  text-align: center; margin-bottom: .5rem;
  background: var(--grad-forward);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.success-sub { text-align: center; color: var(--navy-400); font-size: .875rem; margin-bottom: 1.5rem; }

/* ── Status page ── */
.status-card {
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.status-card-title { font-weight: 700; font-size: .95rem; }
.status-card-meta  { font-size: .8rem; color: var(--navy-400); }
.status-badge {
  display: inline-flex; align-items: center;
  padding: .2rem .65rem; border-radius: 99px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.status-badge.pending  { background: rgba(251,191,36,.12); color: #FBBF24; }
.status-badge.approved { background: rgba(52,211,153,.12); color: #34D399; }
.status-badge.rejected { background: rgba(255,77,109,.12); color: var(--electric-coral); }

/* ── Tablet+ ── */
@media (min-width: 640px) {
  .cards-grid { grid-template-columns: repeat(3, 1fr); }
  .modal { border-radius: var(--radius-lg); max-width: 480px; max-height: 90svh; margin: auto; }
  .modal-backdrop { align-items: center; }
}
@media (min-width: 1024px) {
  .container { padding: 0 2rem; }
  .cards-grid { grid-template-columns: repeat(4, 1fr); }
  .about-inner { flex-direction: row; text-align: left; gap: 3rem; }
}

/* ── Cream Theme (Light) ── */
[data-theme="cream"] {
  --midnight-navy: #F5F0E8;
  --soft-cream:    #1E293B;
  --navy-800:      #FFFFFF;
  --navy-700:      #EDE8DF;
  --navy-400:      #64748B;
  --shadow-card:   0 4px 24px rgba(0,0,0,.08);
  --shadow-glow:   0 0 24px rgba(255,107,53,.2);
}
[data-theme="cream"] .navbar {
  background: rgba(245,240,232,.95);
  border-bottom-color: rgba(255,107,53,.2);
}
[data-theme="cream"] .btn-ghost { background: rgba(0,0,0,.05); color: #1E293B; }
[data-theme="cream"] .btn-ghost:hover { background: rgba(0,0,0,.09); }
[data-theme="cream"] .hero-bg {
  background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(255,94,44,.12) 0%, transparent 70%);
}
[data-theme="cream"] .announcements { background: rgba(255,107,53,.06); border-bottom-color: rgba(255,107,53,.15); }
[data-theme="cream"] .announcement-item { background: rgba(255,107,53,.08); border-color: rgba(255,107,53,.2); }
[data-theme="cream"] .cat-tab { border-color: rgba(0,0,0,.12); color: #64748B; }
[data-theme="cream"] .sub-filters { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }
[data-theme="cream"] .filter-divider { background: rgba(0,0,0,.1); }
[data-theme="cream"] .fpill { border-color: rgba(0,0,0,.1); color: #64748B; }
[data-theme="cream"] .fpill-level:hover,
[data-theme="cream"] .fpill-gender:hover { color: #1E293B; }
[data-theme="cream"] .sport-card { border-color: rgba(0,0,0,.08); }
[data-theme="cream"] .sport-card:hover { border-color: rgba(255,107,53,.4); }
[data-theme="cream"] .search-input { background: #FFFFFF; border-color: rgba(0,0,0,.12); color: #1E293B; }
[data-theme="cream"] .search-input::placeholder { color: #94A3B8; }
[data-theme="cream"] .form-control { background: #FFFFFF; border-color: rgba(0,0,0,.12); color: #1E293B; }
[data-theme="cream"] .modal-backdrop { background: rgba(30,41,59,.6); }
[data-theme="cream"] .modal { border-color: rgba(255,107,53,.2); }
[data-theme="cream"] .modal-handle { background: rgba(0,0,0,.15); }
[data-theme="cream"] .about-section { background: #FFFFFF; }
[data-theme="cream"] .footer { background: #EDE8DF; border-top-color: rgba(0,0,0,.08); }
[data-theme="cream"] .status-card { border-color: rgba(0,0,0,.08); }

/* ── Ocean Theme (Dark Blue) ── */
[data-theme="ocean"] {
  --pyro-orange:   #38BDF8;
  --flame-gold:    #7DD3FC;
  --midnight-navy: #07101E;
  --soft-cream:    #E0F2FE;
  --electric-coral:#0EA5E9;
  --navy-800:      #0D1F35;
  --navy-700:      #162B48;
  --navy-400:      #7CB9E8;
  --grad-rising:   linear-gradient(to top,  #0284C7, #38BDF8, #BAE6FD);
  --grad-forward:  linear-gradient(to right, #0284C7, #38BDF8, #BAE6FD);
  --shadow-glow:   0 0 24px rgba(56,189,248,.35);
}
[data-theme="ocean"] .navbar { background: rgba(7,16,30,.92); border-bottom-color: rgba(56,189,248,.15); }
[data-theme="ocean"] .hero-bg {
  background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(2,132,199,.28) 0%, transparent 70%);
}
[data-theme="ocean"] .announcements { background: rgba(56,189,248,.08); border-bottom-color: rgba(56,189,248,.15); }
[data-theme="ocean"] .announcement-item { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.25); }
[data-theme="ocean"] .announcement-label { background: #38BDF8; color: #07101E; }
[data-theme="ocean"] .sport-card:hover { border-color: rgba(56,189,248,.4); }
[data-theme="ocean"] .modal { border-color: rgba(56,189,248,.2); }
[data-theme="ocean"] .footer { background: #040D18; }
[data-theme="ocean"] .student-info-box { background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.2); }

/* ── Gold Theme (Dark Gold) ── */
[data-theme="gold"] {
  --pyro-orange:   #FFD60A;
  --flame-gold:    #FFC300;
  --midnight-navy: #0D0D0D;
  --soft-cream:    #FFFDE7;
  --electric-coral:#FFB700;
  --navy-800:      #1A1A1A;
  --navy-700:      #252525;
  --navy-400:      #8A8060;
  --grad-rising:   linear-gradient(to top,  #B8860B, #FFD700, #FFFACD);
  --grad-forward:  linear-gradient(to right, #B8860B, #FFD700, #FFFACD);
  --shadow-glow:   0 0 24px rgba(255,214,10,.35);
}
[data-theme="gold"] .navbar { background: rgba(13,13,13,.92); border-bottom-color: rgba(255,214,10,.15); }
[data-theme="gold"] .hero-bg {
  background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(184,134,11,.28) 0%, transparent 70%);
}
[data-theme="gold"] .announcements { background: rgba(255,214,10,.08); border-bottom-color: rgba(255,214,10,.15); }
[data-theme="gold"] .announcement-item { background: rgba(255,214,10,.12); border-color: rgba(255,214,10,.25); }
[data-theme="gold"] .announcement-label { background: #FFD60A; color: #0D0D0D; }
[data-theme="gold"] .sport-card:hover { border-color: rgba(255,214,10,.4); }
[data-theme="gold"] .modal { border-color: rgba(255,214,10,.2); }
[data-theme="gold"] .footer { background: #080808; }
[data-theme="gold"] .student-info-box { background: rgba(255,214,10,.08); border-color: rgba(255,214,10,.2); }

/* ── Rose Theme ── */
[data-theme="rose"] {
  --pyro-orange:   #FF6B8A;
  --flame-gold:    #FFB3C6;
  --midnight-navy: #1A0A10;
  --soft-cream:    #FFE4E8;
  --electric-coral:#FF8FAB;
  --navy-800:      #2A1520;
  --navy-700:      #3D1F2D;
  --navy-400:      #B07080;
  --grad-rising:   linear-gradient(to top,  #C2185B, #FF6B8A, #FFB3C6);
  --grad-forward:  linear-gradient(to right, #C2185B, #FF6B8A, #FFB3C6);
  --shadow-glow:   0 0 24px rgba(255,107,138,.35);
}
[data-theme="rose"] .navbar { background: rgba(26,10,16,.92); border-bottom-color: rgba(255,107,138,.15); }
[data-theme="rose"] .hero-bg { background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(194,24,91,.28) 0%, transparent 70%); }
[data-theme="rose"] .announcements { background: rgba(255,107,138,.08); border-bottom-color: rgba(255,107,138,.15); }
[data-theme="rose"] .announcement-item { background: rgba(255,107,138,.12); border-color: rgba(255,107,138,.25); }
[data-theme="rose"] .announcement-label { background: #FF6B8A; color: #1A0A10; }
[data-theme="rose"] .sport-card:hover { border-color: rgba(255,107,138,.4); }
[data-theme="rose"] .modal { border-color: rgba(255,107,138,.2); }
[data-theme="rose"] .footer { background: #120608; }
[data-theme="rose"] .student-info-box { background: rgba(255,107,138,.08); border-color: rgba(255,107,138,.2); }

/* ── Forest Theme ── */
[data-theme="forest"] {
  --pyro-orange:   #34D399;
  --flame-gold:    #86EFAC;
  --midnight-navy: #0A1A0F;
  --soft-cream:    #DCFCE7;
  --electric-coral:#10B981;
  --navy-800:      #132A1A;
  --navy-700:      #1C3D26;
  --navy-400:      #6B9A78;
  --grad-rising:   linear-gradient(to top,  #059669, #34D399, #BBF7D0);
  --grad-forward:  linear-gradient(to right, #059669, #34D399, #BBF7D0);
  --shadow-glow:   0 0 24px rgba(52,211,153,.35);
}
[data-theme="forest"] .navbar { background: rgba(10,26,15,.92); border-bottom-color: rgba(52,211,153,.15); }
[data-theme="forest"] .hero-bg { background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(5,150,105,.28) 0%, transparent 70%); }
[data-theme="forest"] .announcements { background: rgba(52,211,153,.08); border-bottom-color: rgba(52,211,153,.15); }
[data-theme="forest"] .announcement-item { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.25); }
[data-theme="forest"] .announcement-label { background: #34D399; color: #0A1A0F; }
[data-theme="forest"] .sport-card:hover { border-color: rgba(52,211,153,.4); }
[data-theme="forest"] .modal { border-color: rgba(52,211,153,.2); }
[data-theme="forest"] .footer { background: #060F09; }
[data-theme="forest"] .student-info-box { background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.2); }

/* ── Violet Theme ── */
[data-theme="violet"] {
  --pyro-orange:   #A78BFA;
  --flame-gold:    #C4B5FD;
  --midnight-navy: #0F0A1E;
  --soft-cream:    #EDE9FE;
  --electric-coral:#8B5CF6;
  --navy-800:      #1A1230;
  --navy-700:      #271B47;
  --navy-400:      #8B7DB8;
  --grad-rising:   linear-gradient(to top,  #7C3AED, #A78BFA, #DDD6FE);
  --grad-forward:  linear-gradient(to right, #7C3AED, #A78BFA, #DDD6FE);
  --shadow-glow:   0 0 24px rgba(167,139,250,.35);
}
[data-theme="violet"] .navbar { background: rgba(15,10,30,.92); border-bottom-color: rgba(167,139,250,.15); }
[data-theme="violet"] .hero-bg { background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(124,58,237,.28) 0%, transparent 70%); }
[data-theme="violet"] .announcements { background: rgba(167,139,250,.08); border-bottom-color: rgba(167,139,250,.15); }
[data-theme="violet"] .announcement-item { background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.25); }
[data-theme="violet"] .announcement-label { background: #A78BFA; color: #0F0A1E; }
[data-theme="violet"] .sport-card:hover { border-color: rgba(167,139,250,.4); }
[data-theme="violet"] .modal { border-color: rgba(167,139,250,.2); }
[data-theme="violet"] .footer { background: #090615; }
[data-theme="violet"] .student-info-box { background: rgba(167,139,250,.08); border-color: rgba(167,139,250,.2); }

/* ── Sunset Theme ── */
[data-theme="sunset"] {
  --pyro-orange:   #F472B6;
  --flame-gold:    #FB923C;
  --midnight-navy: #1A0A1A;
  --soft-cream:    #FFF0F9;
  --electric-coral:#EC4899;
  --navy-800:      #2D1030;
  --navy-700:      #3F1840;
  --navy-400:      #B080A0;
  --grad-rising:   linear-gradient(to top,  #DB2777, #F472B6, #FB923C);
  --grad-forward:  linear-gradient(to right, #DB2777, #F472B6, #FB923C);
  --shadow-glow:   0 0 24px rgba(244,114,182,.35);
}
[data-theme="sunset"] .navbar { background: rgba(26,10,26,.92); border-bottom-color: rgba(244,114,182,.15); }
[data-theme="sunset"] .hero-bg { background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(219,39,119,.28) 0%, transparent 70%); }
[data-theme="sunset"] .announcements { background: rgba(244,114,182,.08); border-bottom-color: rgba(244,114,182,.15); }
[data-theme="sunset"] .announcement-item { background: rgba(244,114,182,.12); border-color: rgba(244,114,182,.25); }
[data-theme="sunset"] .announcement-label { background: #F472B6; color: #1A0A1A; }
[data-theme="sunset"] .sport-card:hover { border-color: rgba(244,114,182,.4); }
[data-theme="sunset"] .modal { border-color: rgba(244,114,182,.2); }
[data-theme="sunset"] .footer { background: #120610; }
[data-theme="sunset"] .student-info-box { background: rgba(244,114,182,.08); border-color: rgba(244,114,182,.2); }

/* ── Silver Theme ── */
[data-theme="silver"] {
  --pyro-orange:   #C0C0C0;
  --flame-gold:    #E8E8E8;
  --midnight-navy: #111111;
  --soft-cream:    #F0F0F0;
  --electric-coral:#AAAAAA;
  --navy-800:      #1E1E1E;
  --navy-700:      #2A2A2A;
  --navy-400:      #808080;
  --grad-rising:   linear-gradient(to top,  #606060, #C0C0C0, #F0F0F0);
  --grad-forward:  linear-gradient(to right, #606060, #C0C0C0, #F0F0F0);
  --shadow-glow:   0 0 24px rgba(192,192,192,.25);
}
[data-theme="silver"] .navbar { background: rgba(17,17,17,.92); border-bottom-color: rgba(192,192,192,.15); }
[data-theme="silver"] .hero-bg { background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(128,128,128,.2) 0%, transparent 70%); }
[data-theme="silver"] .announcements { background: rgba(192,192,192,.08); border-bottom-color: rgba(192,192,192,.15); }
[data-theme="silver"] .announcement-item { background: rgba(192,192,192,.12); border-color: rgba(192,192,192,.25); }
[data-theme="silver"] .announcement-label { background: #C0C0C0; color: #111111; }
[data-theme="silver"] .sport-card:hover { border-color: rgba(192,192,192,.4); }
[data-theme="silver"] .modal { border-color: rgba(192,192,192,.2); }
[data-theme="silver"] .footer { background: #080808; }
[data-theme="silver"] .student-info-box { background: rgba(192,192,192,.08); border-color: rgba(192,192,192,.2); }

/* ── Egypt Theme (Light Desert) ── */
[data-theme="egypt"] {
  --pyro-orange:   #B8860B;
  --flame-gold:    #D4AF37;
  --midnight-navy: #F5E6C8;
  --soft-cream:    #3D2A12;
  --electric-coral:#9A6800;
  --navy-800:      #FFFBF0;
  --navy-700:      #EDD9A3;
  --navy-400:      #9A7A50;
  --grad-rising:   linear-gradient(to top,  #8B6914, #B8860B, #D4AF37);
  --grad-forward:  linear-gradient(to right, #8B6914, #B8860B, #D4AF37);
  --shadow-card:   0 4px 24px rgba(0,0,0,.1);
  --shadow-glow:   0 0 24px rgba(184,134,11,.3);
}
[data-theme="egypt"] .navbar {
  background: rgba(245,230,200,.95);
  border-bottom-color: rgba(184,134,11,.25);
}
[data-theme="egypt"] .btn-ghost { background: rgba(0,0,0,.06); color: #3D2A12; }
[data-theme="egypt"] .btn-ghost:hover { background: rgba(0,0,0,.1); }
[data-theme="egypt"] .hero-bg {
  background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(184,134,11,.18) 0%, transparent 70%);
}
[data-theme="egypt"] .announcements { background: rgba(184,134,11,.08); border-bottom-color: rgba(184,134,11,.2); }
[data-theme="egypt"] .announcement-item { background: rgba(184,134,11,.1); border-color: rgba(184,134,11,.25); }
[data-theme="egypt"] .announcement-label { background: #B8860B; color: #FFFBF0; }
[data-theme="egypt"] .cat-tab { border-color: rgba(0,0,0,.14); color: #9A7A50; }
[data-theme="egypt"] .sub-filters { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.09); }
[data-theme="egypt"] .filter-divider { background: rgba(0,0,0,.12); }
[data-theme="egypt"] .fpill { border-color: rgba(0,0,0,.12); color: #9A7A50; }
[data-theme="egypt"] .fpill-level:hover,
[data-theme="egypt"] .fpill-gender:hover { color: #3D2A12; }
[data-theme="egypt"] .sport-card { border-color: rgba(0,0,0,.09); }
[data-theme="egypt"] .sport-card:hover { border-color: rgba(184,134,11,.45); }
[data-theme="egypt"] .search-input { background: #FFFBF0; border-color: rgba(0,0,0,.14); color: #3D2A12; }
[data-theme="egypt"] .search-input::placeholder { color: #9A7A50; }
[data-theme="egypt"] .form-control { background: #FFFBF0; border-color: rgba(0,0,0,.14); color: #3D2A12; }
[data-theme="egypt"] .modal-backdrop { background: rgba(61,42,18,.6); }
[data-theme="egypt"] .modal { border-color: rgba(184,134,11,.25); }
[data-theme="egypt"] .modal-handle { background: rgba(0,0,0,.15); }
[data-theme="egypt"] .about-section { background: #FFFBF0; }
[data-theme="egypt"] .footer { background: #EDD9A3; border-top-color: rgba(0,0,0,.1); }
[data-theme="egypt"] .status-card { border-color: rgba(0,0,0,.09); }
[data-theme="egypt"] .student-info-box { background: rgba(184,134,11,.08); border-color: rgba(184,134,11,.2); }