/* ============================================================
   My School - BASE STYLES v3.0 (Fixed Light Theme)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --primary:#4361ee; --primary-rgb:67,97,238;
  --secondary:#7209b7; --secondary-rgb:114,9,183;
  --accent:#f72585; --accent-rgb:247,37,133;
  --success:#10b981; --warning:#f59e0b; --danger:#ef4444;
  --bg:#f0f4ff; --surface:#ffffff; --surface-rgb:255,255,255; --surface-2:#e8edf5;
  --text:#0f172a; --text-secondary:#475569; --muted:#94a3b8; --border:rgba(148,163,184,.2);
  --radius:20px; --radius-sm:12px; --radius-xs:8px; --radius-full:9999px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08),0 12px 32px rgba(0,0,0,.06);
  --shadow-lg:0 8px 24px rgba(0,0,0,.1),0 24px 64px rgba(0,0,0,.08);
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Space Grotesk','Inter',sans-serif;
  --gradient:linear-gradient(135deg,var(--primary),var(--secondary));
  --gradient-warm:linear-gradient(135deg,var(--primary),var(--accent));
  --hero-overlay:linear-gradient(135deg,rgba(var(--primary-rgb),.92),rgba(var(--secondary-rgb),.88));
  --glass:rgba(255,255,255,.8); --glass-border:rgba(255,255,255,.4);
  --transition:all .3s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  --bg:#0a0e1a; --surface:#111827; --surface-rgb:17,24,39; --surface-2:#1e293b;
  --text:#f1f5f9; --text-secondary:#cbd5e1; --muted:#64748b; --border:rgba(100,116,139,.2);
  --shadow:0 1px 3px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.2);
  --shadow-md:0 4px 12px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.3);
  --shadow-lg:0 8px 24px rgba(0,0,0,.5),0 24px 64px rgba(0,0,0,.4);
  --glass:rgba(17,24,39,.8); --glass-border:rgba(255,255,255,.08);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit;transition:var(--transition)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--text)}
.text-gradient{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:600;border:0;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden;text-decoration:none}
.btn-primary{background:var(--gradient);color:#fff;padding:12px 28px;border-radius:var(--radius-sm);box-shadow:0 4px 16px rgba(var(--primary-rgb),.3);font-size:.95rem}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(var(--primary-rgb),.4);color:#fff}
.btn-secondary{background:var(--surface);color:var(--text);padding:12px 28px;border-radius:var(--radius-sm);border:1.5px solid var(--border);font-size:.95rem;box-shadow:var(--shadow)}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--primary);padding:12px 28px;border-radius:var(--radius-sm);border:2px solid var(--primary);font-size:.95rem}
.btn-outline:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;padding:12px 28px;border-radius:var(--radius-sm)}
.btn-danger:hover{transform:translateY(-2px);color:#fff}
.btn-success{background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:12px 28px;border-radius:var(--radius-sm)}
.btn-success:hover{transform:translateY(-2px);color:#fff}
.btn-sm{padding:8px 16px;font-size:.85rem;border-radius:var(--radius-xs)}
.btn-xs{padding:5px 12px;font-size:.78rem;border-radius:var(--radius-xs)}
.btn-icon-only{width:44px;height:44px;padding:0;border-radius:50%;display:inline-grid;place-items:center}
.btn-icon-only.sm{width:36px;height:36px}

.btn-gradient{background:var(--gradient);color:#fff;border:0;border-radius:var(--radius-sm);font-weight:700;padding:12px 28px;box-shadow:0 4px 16px rgba(var(--primary-rgb),.3);font-family:var(--font);font-size:.95rem;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:var(--transition);text-decoration:none}
.btn-gradient:hover{color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(var(--primary-rgb),.4)}

/* ============================================================
   CARDS
   ============================================================ */
.card-modern{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);transition:var(--transition);overflow:hidden}
.card-modern:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.card-glass{background:var(--glass);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius)}

/* ============================================================
   INPUTS
   ============================================================ */
.form-control{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:.95rem;color:var(--text);background:var(--surface);transition:var(--transition);outline:none}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--primary-rgb),.08)}
.form-control::placeholder{color:var(--muted)}
.form-select{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:.95rem;color:var(--text);background:var(--surface);transition:var(--transition);outline:none;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 14px center}
.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--primary-rgb),.08)}
.form-label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px;color:var(--text)}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes zoomIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

.reveal{opacity:0;transform:translateY(30px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-40px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal-left.in{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(40px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal-right.in{opacity:1;transform:none}

/* ============================================================
   NAVIGATION
   ============================================================ */
.school-nav{background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;transition:var(--transition);padding:0}
.school-nav.scrolled{box-shadow:var(--shadow-md);background:var(--surface)}
.nav-link{font-weight:600;border-radius:var(--radius-xs);padding:8px 16px !important;color:var(--text-secondary);transition:var(--transition);position:relative;font-size:.92rem}
.nav-link:hover,.nav-link.active{color:var(--primary);background:rgba(var(--primary-rgb),.06)}
.brand-badge{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--gradient);color:#fff;display:grid;place-items:center;font-size:22px;box-shadow:0 4px 12px rgba(var(--primary-rgb),.4);transition:var(--transition)}
.brand-badge:hover{transform:scale(1.1) rotate(-5deg)}
.brand-name{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--text)}

/* Notification Bell */
.notif-bell{position:relative;width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:var(--transition)}
.notif-bell:hover{background:rgba(var(--primary-rgb),.06);border-color:var(--primary);color:var(--primary)}
.notif-badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;background:var(--danger);color:#fff;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--surface)}
.notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:360px;max-height:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;z-index:1001}
.notif-dropdown-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.notif-dropdown-body{max-height:300px;overflow-y:auto}
.notif-item{padding:14px 20px;border-bottom:1px solid var(--border);transition:var(--transition);cursor:pointer;display:flex;gap:12px;align-items:flex-start}
.notif-item:hover{background:var(--surface-2)}
.notif-item.unread{background:rgba(var(--primary-rgb),.04);border-left:3px solid var(--primary)}
.notif-item .notif-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:.9rem}
.notif-item .notif-icon.type-exam{background:rgba(16,185,129,.1);color:var(--success)}
.notif-item .notif-icon.type-fee{background:rgba(247,37,133,.1);color:var(--accent)}
.notif-item .notif-icon.type-announcement{background:rgba(67,97,238,.1);color:var(--primary)}
.notif-item .notif-icon.type-system{background:rgba(148,163,184,.1);color:var(--muted)}
.notif-dropdown-footer{padding:12px 20px;text-align:center;border-top:1px solid var(--border)}

/* ============================================================
   BADGES
   ============================================================ */
.badge{font-weight:600;border-radius:var(--radius-xs);padding:4px 10px;font-size:.78rem;display:inline-flex;align-items:center;gap:4px}
.badge-primary{background:rgba(var(--primary-rgb),.1);color:var(--primary)}
.badge-success{background:rgba(16,185,129,.1);color:#059669}
.badge-warning{background:rgba(245,158,11,.1);color:#d97706}
.badge-danger{background:rgba(239,68,68,.1);color:#dc2626}
.badge-info{background:rgba(6,182,212,.1);color:#0891b2}
.badge-secondary{background:var(--surface-2);color:var(--text-secondary)}

/* ============================================================
   TABLES
   ============================================================ */
.table{border-collapse:separate;border-spacing:0;width:100%}
.table thead{background:var(--surface-2)}
.table th{font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:14px 16px;border-bottom:2px solid var(--border)}
.table td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)}
.table tbody tr{transition:var(--transition)}
.table tbody tr:hover{background:rgba(var(--primary-rgb),.03)}

/* ============================================================
   ALERTS
   ============================================================ */
.alert{border-radius:var(--radius-sm);border:0;padding:14px 18px;font-weight:500;display:flex;align-items:center;gap:10px}
.alert-success{background:rgba(16,185,129,.1);color:#059669}
.alert-danger{background:rgba(239,68,68,.1);color:#dc2626}
.alert-warning{background:rgba(245,158,11,.1);color:#d97706}
.alert-info{background:rgba(67,97,238,.1);color:var(--primary)}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:100px 0;position:relative}
.section-title{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;color:var(--text)}
.section-sub{color:var(--muted);font-size:1.05rem;line-height:1.7}
.section-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(var(--primary-rgb),.06);color:var(--primary);border-radius:var(--radius-full);padding:6px 18px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}

/* ============================================================
   FOOTER
   ============================================================ */
.school-footer{background:#0f172a;color:#e2e8f0;margin-top:60px;position:relative;overflow:hidden}
.footer-links a{display:block;padding:6px 0;color:#94a3b8;transition:var(--transition);font-size:.92rem}
.footer-links a:hover{color:#fff;padding-left:6px}
.social-links a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);color:#94a3b8;display:inline-grid;place-items:center;margin-right:8px;transition:var(--transition);font-size:.9rem;border:1px solid rgba(255,255,255,.1)}
.social-links a:hover{background:var(--gradient);color:#fff;transform:translateY(-3px);border-color:transparent}
.back-top{position:fixed;bottom:28px;right:28px;width:48px;height:48px;border-radius:50%;background:var(--gradient);color:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(var(--primary-rgb),.4);opacity:0;pointer-events:none;transition:var(--transition);z-index:99}
.back-top.show{opacity:1;pointer-events:auto}
.back-top:hover{transform:translateY(-3px)}

/* ============================================================
   UTILITIES
   ============================================================ */
.fw-semibold{font-weight:600}
.fw-bold{font-weight:700}
.text-primary{color:var(--primary) !important}
.text-secondary{color:var(--text-secondary) !important}
.text-muted{color:var(--muted) !important}
.text-success{color:var(--success) !important}
.text-danger{color:var(--danger) !important}
.bg-primary{background:var(--primary) !important;color:#fff}
.bg-gradient{background:var(--gradient) !important;color:#fff}
.rounded-custom{border-radius:var(--radius)}
.shadow-custom{box-shadow:var(--shadow)}
.shadow-md{box-shadow:var(--shadow-md)}
.shadow-lg{box-shadow:var(--shadow-lg)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:768px){
  .section{padding:60px 0}
  .section-title{font-size:1.8rem}
  .btn-lg{padding:14px 28px;font-size:.95rem}
}