:root {
    --maroon: #6b1a2a;
    --maroon-dark: #4a1019;
    --maroon-light: #8a2239;
    --gold: #c9972c;
    --gold-light: #e8b84b;
    --gold-pale: #f5e6c0;
    --cream: #fdf8f0;
    --white: #ffffff;
    --gray-50: #f8f6f3;
    --gray-100: #ede9e2;
    --gray-300: #c8c0b4;
    --gray-500: #7a7068;
    --gray-700: #4a4238;
    --gray-900: #1e1810;
    --red: #c0392b;
    --green: #1a5c30;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: 'DM Sans', sans-serif; color: var(--gray-900); background: var(--white); }
  h1,h2,h3,h4 { font-family: 'Playfair Display', serif; }

  /* ===== NAVBAR ===== */
  nav {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    background: rgba(74,16,25,0.98); backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--gold);
  }
  .nav-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 2rem; height: 72px;
  }
  .logo { display: flex; align-items: center; gap: 10px; cursor: pointer; }
  .logo img { height: 54px; width: auto; object-fit: contain; }
  .logo-text { color: var(--white); }
  .logo-text span { display: block; }
  .logo-name { font-size: 16px; font-weight: 600; letter-spacing: 0.5px; font-family: 'Playfair Display', serif; }
  .logo-sub { font-size: 10px; color: var(--gold-light); letter-spacing: 2.5px; text-transform: uppercase; }
  .nav-links { display: flex; gap: 2px; align-items: center; }
  .nav-link {
    color: rgba(255,255,255,0.85); text-decoration: none;
    padding: 8px 14px; border-radius: 6px; font-size: 14px; font-weight: 500;
    cursor: pointer; border: none; background: none;
    transition: all 0.2s; letter-spacing: 0.3px; font-family: 'DM Sans', sans-serif;
  }
  .nav-link:hover, .nav-link.active { color: var(--white); background: rgba(201,151,44,0.2); }
  .nav-link.active { color: var(--gold-light); }
  .nav-admin-btn:hover { background: var(--gold-light); }

  .mobile-menu-toggle {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 10px; z-index: 1001;
  }
  .mobile-menu-toggle span {
    display: block; width: 25px; height: 2px; background: var(--white);
    transition: all 0.3s; border-radius: 2px;
  }
  .mobile-nav-overlay {
    position: fixed; inset: 0; background: rgba(74,16,25,0.98);
    backdrop-filter: blur(15px); z-index: 999; display: flex;
    align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .mobile-nav-overlay.active { opacity: 1; visibility: visible; }
  .mobile-nav-content { display: flex; flex-direction: column; gap: 1rem; width: 85%; text-align: center; }
  .mobile-nav-content button {
    background: none; border: none; color: var(--white);
    font-size: 1.5rem; font-weight: 600; padding: 12px;
    font-family: 'Playfair Display', serif; cursor: pointer;
    transition: color 0.2s; border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .mobile-nav-content button:hover { color: var(--gold); }
  .mobile-nav-content .m-admin { color: var(--gold); border-bottom-color: var(--gold); margin-top: 1rem; }
  .mobile-menu-close { margin-top: 2rem; font-size: 14px !important; color: var(--gold-light) !important; opacity: 0.7; border: none !important; }

  /* ===== PAGE SYSTEM ===== */
  .page { 
    display: none; 
    padding-top: 72px; 
    min-height: 100vh; 
    opacity: 0;
  }
  .page.active { 
    display: block; 
    animation: pageReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @keyframes pageReveal {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ===== HERO ===== */
  .hero {
    background: linear-gradient(135deg, var(--maroon-dark) 0%, var(--maroon) 40%, var(--maroon-light) 100%);
    min-height: calc(100vh - 72px); display: flex; align-items: center;
    position: relative; overflow: hidden;
  }
  /* Subtle texture overlay */
  .hero::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04; mix-blend-mode: overlay; pointer-events: none;
  }
  .hero::after {
    content: ''; position: absolute; bottom: -80px; right: -80px;
    width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201,151,44,0.12), transparent 70%);
  }
  .hero-content {
    max-width: 1200px; margin: 0 auto; padding: 4rem 2rem;
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center;
  }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(201,151,44,0.15); border: 1px solid rgba(201,151,44,0.45);
    color: var(--gold-light); padding: 6px 16px; border-radius: 20px;
    font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
    margin-bottom: 1.5rem;
  }
  .hero h1 {
    font-size: 3.4rem; color: var(--white); line-height: 1.15; margin-bottom: 1.5rem;
  }
  .hero h1 em { font-style: normal; color: var(--gold-light); }
  .hero p { color: rgba(255,255,255,0.75); font-size: 1.05rem; line-height: 1.85; margin-bottom: 2rem; }
  .hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
  .btn-primary {
    background: var(--gold); color: var(--maroon-dark); padding: 14px 28px;
    border-radius: 8px; font-weight: 700; font-size: 15px; border: none;
    cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-block;
    font-family: 'DM Sans', sans-serif;
  }
  .btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); }
  .btn-outline {
    background: transparent; color: var(--white); padding: 14px 28px;
    border-radius: 8px; font-weight: 600; font-size: 15px;
    border: 1.5px solid rgba(255,255,255,0.4); cursor: pointer;
    transition: all 0.2s; text-decoration: none; display: inline-block;
    font-family: 'DM Sans', sans-serif;
  }
  .btn-outline:hover { border-color: var(--gold-light); color: var(--gold-light); }
  .hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
  .stat-card {
    background: rgba(255,255,255,0.07); border: 1px solid rgba(201,151,44,0.25);
    border-radius: 12px; padding: 1.4rem; text-align: center; backdrop-filter: blur(8px);
  }
  .stat-num { font-family: 'Playfair Display', serif; font-size: 2.3rem; color: var(--gold-light); font-weight: 700; }
  .stat-lbl { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 4px; }

  /* Gold accent bar */
  .gold-bar { height: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold)); }

  /* ===== SECTIONS COMMON ===== */
  section { padding: 5rem 2rem; }
  .section-inner { max-width: 1200px; margin: 0 auto; }
  .section-label {
    font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
    color: var(--gold); margin-bottom: 10px;
  }
  .section-title { font-size: 2.4rem; color: var(--maroon); margin-bottom: 1rem; }
  .section-sub { font-size: 1.05rem; color: var(--gray-500); max-width: 620px; line-height: 1.8; }
  .divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 2px; margin: 1rem 0 2rem; }

  /* ===== QUICK LINKS ===== */
  .quick-links { background: var(--maroon-dark); padding: 2.5rem; }
  .quick-links .section-inner { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
  .ql-card {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(201,151,44,0.22);
    border-radius: 12px; padding: 1.5rem; color: var(--white);
    cursor: pointer; transition: all 0.25s;
  }
  .ql-card:hover { background: rgba(201,151,44,0.18); border-color: var(--gold); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
  .ql-icon { font-size: 1.8rem; margin-bottom: 0.75rem; transition: transform 0.3s ease; }
  .ql-card:hover .ql-icon { transform: scale(1.15) rotate(5deg); }
  .ql-card h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; font-family: 'DM Sans', sans-serif; color: var(--gold-light); }
  .ql-card p { font-size: 13px; color: rgba(255,255,255,0.6); }

  /* ===== NEWS ===== */
  .news-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2.5rem; }
  .news-card {
    background: var(--white); border: 1px solid var(--gray-100);
    border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(107,26,42,0.07);
    transition: all 0.25s;
  }
  .news-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(107,26,42,0.13); }
  .news-img {
    height: 175px; background: linear-gradient(135deg, var(--maroon), var(--maroon-light));
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; position: relative; overflow: hidden;
  }
  .news-img img { width: 100%; height: 100%; object-fit: cover; }
  .news-date {
    position: absolute; top: 12px; left: 12px;
    background: var(--gold); color: var(--maroon-dark); font-size: 11px;
    font-weight: 700; padding: 4px 10px; border-radius: 4px; letter-spacing: 0.5px;
  }
  .news-body { padding: 1.25rem; }
  .news-cat { font-size: 11px; font-weight: 700; color: var(--maroon); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; }
  .news-card h4 { font-size: 1rem; color: var(--maroon-dark); margin-bottom: 8px; line-height: 1.5; }
  .news-card p { font-size: 13px; color: var(--gray-500); line-height: 1.7; }

  /* ===== ABOUT ===== */
  .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-top: 2rem; }
  .about-visual {
    background: linear-gradient(135deg, var(--maroon-dark), var(--maroon));
    border-radius: 16px; height: 420px; display: flex; align-items: center;
    justify-content: center; position: relative; overflow: hidden;
    border: 2px solid rgba(201,151,44,0.3);
  }
  .about-visual::after {
    content: ''; position: absolute; bottom: -30px; right: -30px;
    width: 180px; height: 180px; background: var(--gold); opacity: 0.08; border-radius: 50%;
  }
  .about-visual-inner { text-align: center; color: var(--white); position: relative; z-index: 1; }
  .about-visual-inner img { width: 140px; height: auto; filter: drop-shadow(0 4px 20px rgba(201,151,44,0.4)); }
  .about-visual-inner h3 { font-size: 1.3rem; color: var(--gold-light); margin-top: 1rem; }
  .about-visual-inner p { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 6px; }
  .about-text h2 { font-size: 2.1rem; color: var(--maroon); margin-bottom: 1rem; }
  .about-text p { font-size: 1rem; color: var(--gray-700); line-height: 1.9; margin-bottom: 1.2rem; }
  .values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
  .value-item {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--cream); border-radius: 10px; padding: 1rem;
    border-left: 3px solid var(--gold);
  }
  .value-icon { font-size: 1.4rem; flex-shrink: 0; }
  .value-item h5 { font-size: 14px; font-weight: 600; color: var(--maroon); margin-bottom: 3px; font-family: 'DM Sans', sans-serif; }
  .value-item p { font-size: 12px; color: var(--gray-500); }
  .team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 3rem; }
  .team-card { text-align: center; }
  .team-avatar {
    width: 96px; height: 96px; border-radius: 50%;
    background: linear-gradient(135deg, var(--maroon), var(--maroon-light));
    margin: 0 auto 1rem; display: flex; align-items: center;
    justify-content: center; font-size: 2.5rem; border: 3px solid var(--gold);
  }
  .team-card h4 { font-size: 1rem; color: var(--maroon-dark); margin-bottom: 4px; }
  .team-card p { font-size: 13px; color: var(--gold); font-weight: 600; }

  /* ===== COURSES ===== */
  .courses-filter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 2.5rem; }
  .filter-btn {
    padding: 10px 24px; border-radius: 30px; border: 1.5px solid var(--gray-100);
    background: var(--white); font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: var(--gray-700); font-family: 'DM Sans', sans-serif;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
  }
  .filter-btn:hover { border-color: var(--gold); color: var(--maroon); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(201,151,44,0.15); }
  .filter-btn.active { background: var(--maroon); color: var(--white); border-color: var(--maroon); box-shadow: 0 8px 20px rgba(107,26,42,0.25); }
  .courses-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
  .course-card {
    border: 1px solid var(--gray-100); border-radius: 14px; overflow: hidden;
    background: var(--white); box-shadow: 0 2px 12px rgba(107,26,42,0.06);
    transition: all 0.25s;
  }
  .course-card:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(107,26,42,0.14); }
  .course-header {
    padding: 1.5rem; border-bottom: 1px solid var(--gray-100);
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, rgba(253,248,240,0.8), rgba(255,255,255,0.8));
    backdrop-filter: blur(5px);
  }
  .course-icon {
    width: 52px; height: 52px; border-radius: 10px;
    background: linear-gradient(135deg, var(--maroon), var(--maroon-light));
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  }
  .course-header h3 { font-size: 1rem; color: var(--maroon-dark); line-height: 1.4; flex: 1; }
  .course-body { padding: 1.25rem; }
  .course-meta { display: flex; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
  .meta-tag {
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: 0.3px;
  }
  .meta-tag.duration { background: var(--gold-pale); color: var(--maroon-dark); }
  .meta-tag.level { background: #f0ebe8; color: var(--maroon); }
  .meta-tag.cert { background: #e8f5e9; color: #2e7d32; }
  .course-body p { font-size: 13px; color: var(--gray-500); line-height: 1.7; margin-bottom: 1rem; }
  .course-fee { font-size: 1.1rem; font-weight: 700; color: var(--gold); }
  .course-fee span { font-size: 12px; font-weight: 400; color: var(--gray-500); }
  .course-enroll {
    width: 100%; margin-top: 1rem; background: var(--maroon); color: var(--white);
    border: none; padding: 10px; border-radius: 8px; font-weight: 600;
    font-size: 14px; cursor: pointer; transition: background 0.2s; font-family: 'DM Sans', sans-serif;
  }
  .course-enroll:hover { background: var(--maroon-light); }

  /* ===== GALLERY ===== */
  .gallery-filter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 2rem; }
  .gallery-grid { columns: 3; gap: 16px; }
  .gallery-item {
    break-inside: avoid; margin-bottom: 16px; border-radius: 10px; overflow: hidden;
    position: relative; cursor: pointer;
  }
  .g-img {
    width: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: rgba(255,255,255,0.4); transition: transform 0.3s;
  }
  .gallery-item:hover .g-img { transform: scale(1.04); }
  .g-overlay {
    position: absolute; inset: 0; background: rgba(74,16,25,0.8);
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; opacity: 0; transition: opacity 0.25s; color: var(--white);
    text-align: center; padding: 1rem;
  }
  .gallery-item:hover .g-overlay { opacity: 1; }
  .g-overlay h4 { font-size: 0.95rem; margin-bottom: 4px; }
  .g-overlay p { font-size: 12px; color: var(--gold-light); }

  /* ===== ADMISSIONS ===== */
  .admissions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2rem; }
  .requirements-list { list-style: none; }
  .requirements-list li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 1rem; border-bottom: 1px solid var(--gray-100);
  }
  .req-num {
    width: 28px; height: 28px; background: var(--maroon); color: var(--white);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; flex-shrink: 0;
  }
  .req-text h5 { font-size: 14px; font-weight: 600; color: var(--maroon); margin-bottom: 3px; }
  .req-text p { font-size: 13px; color: var(--gray-500); }
  .apply-form { background: var(--cream); border-radius: 16px; padding: 2rem; border: 1px solid var(--gold-pale); }
  .apply-form h3 { font-size: 1.4rem; color: var(--maroon); margin-bottom: 1.5rem; }
  .form-group { margin-bottom: 1.2rem; }
  .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
  .form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 10px 14px; border: 1.5px solid var(--gray-300);
    border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 14px;
    transition: border-color 0.2s; background: var(--white); color: var(--gray-900);
  }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--maroon);
  }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .submit-btn {
    width: 100%; background: var(--maroon); color: var(--white); border: none;
    padding: 14px; border-radius: 8px; font-weight: 700; font-size: 15px;
    cursor: pointer; transition: background 0.2s; font-family: 'DM Sans', sans-serif;
  }
  .submit-btn:hover { background: var(--maroon-light); }

  /* ===== CONTACT ===== */
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2rem; }
  .contact-info-cards { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
  .contact-card {
    display: flex; gap: 16px; align-items: center;
    background: var(--cream); border-radius: 12px; padding: 1.25rem;
    border-left: 4px solid var(--gold);
  }
  .contact-icon { font-size: 1.8rem; flex-shrink: 0; }
  .contact-card h5 { font-size: 12px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; }
  .contact-card p { font-size: 15px; font-weight: 500; color: var(--maroon); }
  .map-placeholder {
    background: linear-gradient(135deg, var(--maroon-dark), var(--maroon));
    border-radius: 16px; height: 340px; display: flex; align-items: center;
    justify-content: center; flex-direction: column; color: var(--white); text-align: center;
    border: 2px solid rgba(201,151,44,0.25);
  }
  .map-placeholder span { font-size: 4rem; margin-bottom: 1rem; }
  .map-placeholder h4 { color: var(--gold-light); font-size: 1.1rem; }
  .map-placeholder p { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 8px; }

  /* ===== ADMIN ===== */
  #page-admin { background: var(--gray-50); }
  .admin-header {
    background: var(--maroon-dark); color: var(--white); padding: 2rem;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 2px solid var(--gold);
  }
  .admin-header h2 { font-size: 1.5rem; color: var(--gold-light); }
  .admin-header p { font-size: 13px; color: rgba(255,255,255,0.55); }
  .admin-layout { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 72px - 108px); }
  .admin-sidebar { background: var(--white); border-right: 1px solid var(--gray-100); padding: 1.5rem 0; }
  .admin-nav-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 1.5rem;
    cursor: pointer; font-size: 14px; font-weight: 500; color: var(--gray-700);
    transition: all 0.2s; border-left: 3px solid transparent;
  }
  .admin-nav-item:hover { background: var(--cream); color: var(--maroon); }
  .admin-nav-item.active { background: #f8eef0; color: var(--maroon); border-left-color: var(--maroon); font-weight: 600; }
  .admin-nav-icon { font-size: 1.1rem; }
  .admin-content { padding: 2rem; overflow-y: auto; }
  .admin-panel { display: none; }
  .admin-panel.active { display: block; }
  .admin-section-title { font-size: 1.3rem; color: var(--maroon); margin-bottom: 1.5rem; font-family: 'Playfair Display', serif; display: flex; align-items: center; justify-content: space-between; }
  .admin-btn {
    background: var(--maroon); color: var(--white); border: none;
    padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 13px;
    cursor: pointer; transition: background 0.2s; font-family: 'DM Sans', sans-serif;
  }
  .admin-btn:hover { background: var(--maroon-light); }
  .admin-btn.gold { background: var(--gold); color: var(--maroon-dark); }
  .admin-btn.gold:hover { background: var(--gold-light); }
  .admin-btn.danger { background: var(--red); color: var(--white); }
  .admin-btn.sm { padding: 6px 12px; font-size: 12px; }
  .upload-zone {
    border: 2px dashed var(--gray-300); border-radius: 12px;
    padding: 3rem; text-align: center; cursor: pointer; transition: all 0.2s;
    background: var(--white); margin-bottom: 1.5rem;
  }
  .upload-zone:hover, .upload-zone.drag-over { border-color: var(--gold); background: var(--cream); }
  .upload-zone span { font-size: 3rem; display: block; margin-bottom: 1rem; }
  .upload-zone h4 { color: var(--maroon); font-size: 1rem; margin-bottom: 8px; font-family: 'Playfair Display', serif; }
  .upload-zone p { font-size: 13px; color: var(--gray-500); }
  .hidden-input { display: none; }
  .preview-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 1rem; }
  .preview-item { position: relative; border-radius: 8px; overflow: hidden; background: var(--gray-100); aspect-ratio: 1; }
  .preview-item img { width: 100%; height: 100%; object-fit: cover; }
  .preview-remove {
    position: absolute; top: 6px; right: 6px; background: rgba(192,57,43,0.9);
    color: var(--white); border: none; width: 24px; height: 24px; border-radius: 50%;
    cursor: pointer; font-size: 14px; line-height: 1;
  }
  .gallery-manage-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
  .gm-item { border: 1px solid var(--gray-100); border-radius: 10px; overflow: hidden; background: var(--white); }
  .gm-thumb { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
  .gm-info { padding: 0.75rem; }
  .gm-info p { font-size: 12px; color: var(--gray-500); margin-bottom: 8px; line-height: 1.5; }
  .gm-actions { display: flex; gap: 6px; }
  .news-form { background: var(--white); border: 1px solid var(--gray-100); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
  .news-form h4 { font-size: 1rem; color: var(--maroon); margin-bottom: 1rem; font-family: 'Playfair Display', serif; }
  .news-img-upload { padding: 1.5rem !important; margin-bottom: 0 !important; }
  .news-img-upload span { font-size: 2rem !important; margin-bottom: 0.5rem !important; }
  .news-img-upload h4 { font-size: 0.9rem !important; margin-bottom: 4px !important; }
  .news-list { display: flex; flex-direction: column; gap: 1rem; }
  .news-manage-item {
    background: var(--white); border: 1px solid var(--gray-100); border-radius: 10px;
    padding: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .nmi-left { display: flex; gap: 12px; align-items: center; flex: 1; }
  .nmi-icon { font-size: 2rem; flex-shrink: 0; }
  .nmi-text h5 { font-size: 14px; font-weight: 600; color: var(--maroon-dark); }
  .nmi-text p { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
  .nmi-meta { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
  .badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 700; }
  .badge-maroon { background: #f8eef0; color: var(--maroon); }
  .badge-gold { background: var(--gold-pale); color: var(--maroon-dark); }
  .badge-green { background: #e8f5e9; color: #2e7d32; }
  .nmi-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .admin-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-bottom: 2rem; }
  .astat { background: var(--white); border: 1px solid var(--gray-100); border-radius: 10px; padding: 1.25rem; display: flex; gap: 12px; align-items: center; }
  .astat-icon { font-size: 2rem; }
  .astat-num { font-size: 1.8rem; font-weight: 700; color: var(--maroon); font-family: 'Playfair Display', serif; }
  .astat-lbl { font-size: 12px; color: var(--gray-500); }

  /* ===== FOOTER ===== */
  footer { background: var(--maroon-dark); color: rgba(255,255,255,0.7); padding: 3rem 2rem 1.5rem; border-top: 3px solid var(--gold); }
  .footer-inner { max-width: 1200px; margin: 0 auto; }
  .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 2.5rem; }
  .footer-brand { display: flex; flex-direction: column; gap: 0.75rem; }
  .footer-brand img { height: 50px; width: auto; align-self: flex-start; object-fit: contain; margin-bottom: 0.5rem; }
  .footer-brand h3 { color: var(--white); font-size: 1.2rem; }
  .footer-brand p { font-size: 13px; line-height: 1.8; }
  .footer-col h5 { color: var(--gold-light); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-family: 'DM Sans', sans-serif; font-weight: 700; margin-bottom: 1rem; }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .footer-col ul li { font-size: 13px; cursor: pointer; transition: color 0.2s; }
  .footer-col ul li:hover { color: var(--white); }
  .footer-contact li { display: flex; align-items: center; gap: 4px; }
  .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
  .social-link { color: var(--gold-light); transition: all 0.2s; opacity: 0.8; }
  .social-link:hover { color: var(--white); opacity: 1; transform: translateY(-2px); }
  .admin-footer-link {
    color: rgba(255,255,255,0.15); font-size: 12px; cursor: pointer;
    transition: color 0.3s; user-select: none;
  }
  .admin-footer-link:hover { color: var(--gold-light); }

  #back-to-top {
    position: fixed; bottom: 30px; right: 30px;
    width: 45px; height: 45px; background: var(--gold);
    color: var(--maroon-dark); border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0; visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); z-index: 2000;
  }
  #back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
  #back-to-top:hover { background: var(--maroon); color: var(--white); transform: scale(1.1); }

  /* ===== LIGHTBOX ===== */
  .lightbox {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(74,16,25,0.95); align-items: center; justify-content: center;
  }
  .lightbox.active { display: flex; }
  .lightbox-close {
    position: absolute; top: 1.5rem; right: 1.5rem; background: rgba(255,255,255,0.1);
    border: none; color: var(--white); width: 40px; height: 40px; border-radius: 50%;
    font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .lightbox-content { text-align: center; color: var(--white); max-width: 600px; padding: 2rem; }
  .lightbox-img-placeholder {
    width: 480px; height: 320px; max-width: 90vw;
    background: linear-gradient(135deg, var(--maroon), var(--maroon-light));
    border-radius: 12px; display: flex; align-items: center;
    justify-content: center; font-size: 5rem; margin: 0 auto 1rem;
    border: 2px solid rgba(201,151,44,0.3);
  }
  .toast {
    position: fixed; bottom: 2rem; right: 2rem; z-index: 9999;
    background: var(--green); color: var(--white); padding: 14px 24px;
    border-radius: 10px; font-weight: 500; font-size: 14px;
    transform: translateY(100px); opacity: 0; transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  }
  .toast.show { transform: translateY(0); opacity: 1; }
  .modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 5000;
    background: rgba(74,16,25,0.55); align-items: center; justify-content: center;
  }
  .modal-overlay.active { display: flex; }
  .modal-box { background: var(--white); border-radius: 16px; padding: 2rem; width: 500px; max-width: 95vw; max-height: 90vh; overflow-y: auto; border-top: 4px solid var(--gold); transition: all 0.3s; }
  .modal-box h3 { color: var(--maroon); margin-bottom: 1.5rem; }
  .modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 1.5rem; }
  .btn-cancel { background: var(--white); border: 1.5px solid var(--gray-300); color: var(--gray-700); padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; font-family: 'DM Sans', sans-serif; }
  .why-card { text-align: center; padding: 2rem; background: var(--cream); border-radius: 16px; border: 1px solid var(--gold-pale); }
  .why-card:hover { border-color: var(--gold); }
  .accred-tag { background: var(--cream); padding: 1.25rem 2rem; border-radius: 10px; border: 1px solid var(--gold-pale); font-weight: 600; color: var(--maroon); font-size: 15px; display: inline-block; transition: all 0.2s; }
  .accred-tag:hover { background: var(--gold-pale); }

  /* ===== UTILITIES ===== */
  .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1); }
  .reveal.visible { opacity: 1; transform: translateY(0); }

  @media (max-width: 1024px) {
    .hero h1 { font-size: 2.8rem; }
    .hero-content { gap: 2rem; }
    .about-grid { gap: 2rem; }
  }

  @media (max-width: 900px) {
    .nav-links { display: none; }
    .mobile-menu-toggle { display: flex; }
    .hero-content { grid-template-columns: 1fr; text-align: center; padding: 3rem 1.5rem; }
    .hero h1 { font-size: 2.5rem; }
    .hero-btns { justify-content: center; }
    .hero-stats { grid-template-columns: repeat(3,1fr); margin-top: 2rem; }
    .quick-links .section-inner { grid-template-columns: 1fr 1fr; }
    .about-grid, .admissions-grid, .contact-grid { grid-template-columns: 1fr; }
    .news-grid, .courses-grid { grid-template-columns: 1fr 1fr; }
    .team-grid { grid-template-columns: repeat(2,1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .admin-layout { grid-template-columns: 1fr; }
    .admin-sidebar { display: flex; overflow-x: auto; padding: 0.5rem; border-right: none; border-bottom: 1px solid var(--gray-100); }
    .admin-nav-item { padding: 10px 1rem; border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
    .admin-nav-item.active { border-left: none; border-bottom-color: var(--maroon); }
    .gallery-grid { columns: 2; }
  }

  @media (max-width: 600px) {
    .hero h1 { font-size: 2rem; }
    .hero-stats { grid-template-columns: 1fr 1fr; }
    .quick-links .section-inner { grid-template-columns: 1fr; }
    .news-grid, .courses-grid, .team-grid { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr; }
    .section-title { font-size: 1.8rem; }
    .admin-stats { grid-template-columns: 1fr 1fr; }
    .gallery-grid { columns: 1; }
    section { padding: 3rem 1rem; }
    
    /* Admin Panel Mobile Refinement */
    .news-manage-item { flex-direction: column; align-items: flex-start; }
    .nmi-actions { width: 100%; justify-content: flex-end; margin-top: 1rem; border-top: 1px solid var(--gray-50); padding-top: 1rem; }
    .admin-stats { grid-template-columns: 1fr; }
    .gallery-manage-grid { grid-template-columns: 1fr 1fr; }
    .gm-thumb { height: 140px; }
    .admin-header { flex-direction: column; text-align: center; gap: 1rem; }
    .modal-box { padding: 1.25rem; }
    .hero-stats { grid-template-columns: 1fr; }
    .upload-zone { padding: 1.5rem; }
    .about-visual { height: 300px; }
  }