/* =========================================================
   SchoolERP Elite — VIP / Premium UI Layer
   Local-first, no JS framework required.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root{
  --bg:#f4f7fc;
  --bg2:#eef2f8;
  --ink:#0b1220;
  --ink2:#182238;
  --muted:#6d7890;
  --muted2:#8a95aa;
  --line:#e3e8f1;
  --line2:#d7deea;
  --card:rgba(255,255,255,.94);
  --white:#fff;
  --nav:#07101f;
  --nav2:#0b1730;
  --nav3:#111f3d;
  --blue:#2563eb;
  --blue2:#4f7cff;
  --cyan:#27c4ff;
  --violet:#7957ff;
  --green:#16a878;
  --red:#e34d63;
  --amber:#d98b16;
  --shadow:0 18px 55px rgba(10,25,55,.08);
  --shadow2:0 28px 80px rgba(9,23,55,.14);
  --radius:22px;
  --radius2:15px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(900px 420px at 75% -10%,rgba(79,124,255,.10),transparent 60%),
    radial-gradient(700px 360px at 5% 25%,rgba(39,196,255,.06),transparent 60%),
    var(--bg);
  font-family:"DM Sans",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.01em;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(10,25,55,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(10,25,55,.018) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 72%);
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
::selection{background:rgba(37,99,235,.18)}

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

/* ---------- Premium sidebar ---------- */
.sidebar{
  position:fixed;
  z-index:50;
  inset:0 auto 0 0;
  width:282px;
  color:#dfe8ff;
  padding:20px 14px 18px;
  overflow:auto;
  border-right:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(500px 260px at 20% -5%,rgba(79,124,255,.30),transparent 62%),
    radial-gradient(420px 240px at 100% 45%,rgba(39,196,255,.08),transparent 70%),
    linear-gradient(180deg,#0a1530 0%,#07101f 48%,#050b16 100%);
  box-shadow:16px 0 55px rgba(5,12,28,.12);
}
.sidebar:after{
  content:"";
  position:absolute;
  top:110px;
  right:-1px;
  width:1px;
  height:210px;
  background:linear-gradient(transparent,var(--blue2),transparent);
  opacity:.65;
}
.sidebar .brand{
  padding:8px 13px 20px;
  font-family:Manrope,sans-serif;
  font-size:25px;
  font-weight:800;
  letter-spacing:-1.4px;
  color:#fff;
}
.brand span{
  background:linear-gradient(90deg,#fff,#9fc0ff 48%,#55d9ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.brand em{
  font-style:normal;
  font-family:"DM Sans",sans-serif;
  font-size:8px;
  letter-spacing:2.2px;
  padding:5px 7px;
  border:1px solid rgba(130,160,255,.22);
  border-radius:7px;
  color:#9db6ff;
  background:rgba(79,124,255,.09);
  vertical-align:middle;
  margin-left:6px;
}

.profile{
  display:flex;
  gap:12px;
  align-items:center;
  padding:13px;
  margin:0 4px 17px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.avatar{
  flex:0 0 42px;
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:14px;
  color:#fff;
  font-weight:800;
  background:linear-gradient(135deg,#5e7dff,#2c5ce9 55%,#27bfe9);
  box-shadow:0 10px 25px rgba(37,99,235,.28);
}
.profile b{display:block;font-size:13px;color:#fff}
.profile small{display:block;color:#8d9cba;font-size:10px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:175px}

.sidebar nav{display:grid;gap:4px}
.sidebar nav a{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:43px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:13px;
  color:#9eabc6;
  font-size:12.5px;
  font-weight:650;
  transition:transform .18s ease,background .18s ease,color .18s ease,border .18s ease,box-shadow .18s ease;
}
.sidebar nav a span{
  width:25px;
  text-align:center;
  color:#6f82aa;
  font-size:14px;
  transition:.18s;
}
.sidebar nav a:hover{
  color:#fff;
  transform:translateX(2px);
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.06);
}
.sidebar nav a:hover span{color:#bcd0ff}
.sidebar nav a.active{
  color:#fff;
  border-color:rgba(113,146,255,.18);
  background:linear-gradient(105deg,rgba(55,94,224,.95),rgba(68,91,190,.78));
  box-shadow:0 12px 28px rgba(29,65,180,.25),inset 0 1px 0 rgba(255,255,255,.12);
}
.sidebar nav a.active:before{
  content:"";
  position:absolute;
  left:-14px;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:0 5px 5px 0;
  background:linear-gradient(#63d8ff,#7190ff);
  box-shadow:0 0 14px rgba(78,172,255,.8);
}
.sidebar nav a.active span{color:#fff}
.logout{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 4px 0;
  padding:15px 12px 5px;
  color:#8997b3;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:12px;
}
.logout:hover{color:#fff}

/* ---------- Main shell ---------- */
.main{
  margin-left:282px;
  width:calc(100% - 282px);
  min-width:0;
  padding:30px 34px 70px;
}
.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:26px;
}
.topbar h1{
  margin:3px 0 5px;
  font:800 32px/1.1 Manrope,sans-serif;
  letter-spacing:-1.5px;
  color:#0a1222;
}
.eyebrow{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:2px;
  color:#73819b;
  text-transform:uppercase;
}
.muted{color:var(--muted)}
.topbar .muted{font-size:12px;margin:0}
.top-actions{display:flex;align-items:center;gap:9px}
.live{
  display:inline-flex;
  align-items:center;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  color:#56647d;
  background:rgba(255,255,255,.78);
  box-shadow:0 7px 20px rgba(20,40,80,.04);
  font-size:11px;
  font-weight:650;
}
.live i{
  width:7px;height:7px;
  margin-right:7px;
  border-radius:50%;
  background:#18bb7c;
  box-shadow:0 0 0 4px rgba(24,187,124,.10),0 0 13px rgba(24,187,124,.5);
}
.iconbtn{
  width:40px;height:40px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.9);
  box-shadow:0 7px 20px rgba(20,40,80,.05);
  color:#3b4b68;
  transition:.18s;
}
.iconbtn:hover{transform:translateY(-2px);border-color:#c8d5ee;box-shadow:0 12px 25px rgba(20,40,80,.10)}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  min-height:190px;
  padding:31px 34px;
  margin-bottom:21px;
  overflow:hidden;
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
  border-radius:26px;
  background:
    radial-gradient(600px 240px at 85% 10%,rgba(99,145,255,.35),transparent 65%),
    radial-gradient(500px 250px at 5% 120%,rgba(39,196,255,.16),transparent 65%),
    linear-gradient(120deg,#081329 0%,#10244f 45%,#2548b8 100%);
  box-shadow:0 24px 65px rgba(24,55,145,.22);
}
.hero:after{
  content:"";
  position:absolute;
  width:310px;height:310px;
  right:-90px;top:-145px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:0 0 0 35px rgba(255,255,255,.018),0 0 0 70px rgba(255,255,255,.012);
}
.hero h2{
  position:relative;
  z-index:1;
  margin:9px 0 8px;
  font:800 28px/1.14 Manrope,sans-serif;
  letter-spacing:-1px;
}
.hero p{
  position:relative;
  z-index:1;
  max-width:700px;
  margin:0;
  color:#b8c8e8;
  font-size:13px;
  line-height:1.7;
}
.chip{
  display:inline-flex;
  position:relative;
  z-index:2;
  padding:7px 10px;
  border:1px solid rgba(148,180,255,.25);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#cbd9ff;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.5px;
}
.hero-stat{
  position:relative;
  z-index:2;
  min-width:205px;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(4,12,28,.24);
  backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-stat small{display:block;color:#9eb2da;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.hero-stat strong{display:block;margin:6px 0;font:800 26px Manrope;color:#fff}
.hero-stat span{display:block;color:#b8c8e8;font-size:11px}

/* ---------- Metrics ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:21px;
}
.metric{
  position:relative;
  min-height:124px;
  padding:19px 20px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease,border .18s ease;
}
.metric:after{
  content:"";
  position:absolute;
  right:-22px;bottom:-45px;
  width:105px;height:105px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(79,124,255,.10),transparent 65%);
}
.metric:hover{transform:translateY(-3px);border-color:#d1dbee;box-shadow:0 24px 55px rgba(10,30,70,.11)}
.metric span{display:block;color:#7a879d;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px}
.metric b{display:block;margin:9px 0 5px;font:800 24px Manrope;color:#0b1427;letter-spacing:-.8px}
.metric small{color:#929db0;font-size:10.5px}

/* ---------- Panels / tables ---------- */
.panel{
  margin:0 0 18px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.91);
  box-shadow:var(--shadow);
}
.panel h2{
  margin:0 0 16px;
  font:800 18px Manrope,sans-serif;
  letter-spacing:-.5px;
}
.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  margin-bottom:16px;
}
.section-head h2{margin:3px 0 0}
.badge{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 9px;
  border:1px solid #dce4f0;
  border-radius:999px;
  background:#f7f9fc;
  color:#5c6b84;
  font-size:10px;
  font-weight:750;
}
.badge.green{color:#0a8b61;background:#eafaf4;border-color:#c7f0df}
.badge.red{color:#c93750;background:#fff0f2;border-color:#ffd3da}

.tablewrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
}
table{
  width:100%;
  min-width:650px;
  border-collapse:separate;
  border-spacing:0;
}
th{
  position:sticky;
  top:0;
  z-index:1;
  padding:12px 14px;
  background:#f6f8fc;
  border-bottom:1px solid var(--line);
  color:#758197;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:1px;
  text-align:left;
  text-transform:uppercase;
}
td{
  padding:13px 14px;
  border-bottom:1px solid #edf0f5;
  color:#35425a;
  font-size:12px;
  vertical-align:middle;
}
tr:last-child td{border-bottom:0}
tbody tr:hover,table tr:hover td{background:#fafcff}
td b{color:#111b2e}

/* ---------- Forms ---------- */
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
}
.form-grid .full{grid-column:1/-1}
label{
  display:grid;
  gap:7px;
  color:#55637b;
  font-size:11px;
  font-weight:750;
}
input,select,textarea{
  width:100%;
  border:1px solid #dfe5ef;
  border-radius:12px;
  outline:0;
  padding:11px 12px;
  color:#182238;
  background:#fbfcfe;
  transition:border .18s,box-shadow .18s,background .18s;
}
textarea{min-height:95px;resize:vertical}
input::placeholder,textarea::placeholder{color:#a8b1c1}
input:focus,select:focus,textarea:focus{
  background:#fff;
  border-color:#7193ef;
  box-shadow:0 0 0 4px rgba(79,124,255,.10);
}
.inline{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:39px;
  padding:9px 14px;
  border:1px solid #dbe2ed;
  border-radius:11px;
  background:#fff;
  color:#35425a;
  font-size:11.5px;
  font-weight:750;
  box-shadow:0 5px 14px rgba(15,30,60,.04);
  transition:transform .18s,box-shadow .18s,border .18s,background .18s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,30,60,.09);border-color:#cbd6e8}
.btn.primary{
  border-color:#2e63df;
  color:#fff;
  background:linear-gradient(105deg,#2459dc,#4d70ef 60%,#3b93e9);
  box-shadow:0 12px 26px rgba(37,91,221,.24),inset 0 1px 0 rgba(255,255,255,.17);
}
.btn.primary:hover{box-shadow:0 16px 32px rgba(37,91,221,.30)}
.btn.big{min-height:47px;padding:12px 18px;border-radius:13px;font-size:12px}
.btn.small{min-height:31px;padding:6px 9px;font-size:10px}

/* ---------- Alerts ---------- */
.alert{
  margin:0 0 17px;
  padding:12px 14px;
  border:1px solid #dfe6f0;
  border-radius:13px;
  background:#fff;
  color:#44516a;
  font-size:12px;
  box-shadow:0 9px 25px rgba(10,25,55,.05);
}
.alert.success{background:#effbf6;border-color:#c9efdf;color:#087a58}
.alert.bad{background:#fff1f3;border-color:#ffd2da;color:#b52e45}
.alert.warn{background:#fff8e9;border-color:#f7dfad;color:#9a6511}

/* ---------- Login / auth ---------- */
.auth-bg{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:30px 18px;
  background:
    radial-gradient(800px 480px at 80% -5%,rgba(71,116,255,.24),transparent 65%),
    radial-gradient(700px 420px at 0% 100%,rgba(39,196,255,.13),transparent 65%),
    #07101f;
}
.auth-bg:before{
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent);
}
.login-wrap{width:min(1180px,100%)}
.login-brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.login-brand .brand{font:800 26px Manrope;color:#fff;letter-spacing:-1.4px}
.secure-pill{
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  border:1px solid rgba(139,166,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:#aebde0;
  font-size:10px;
  font-weight:700;
}
.login-panel{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:30px;
  background:rgba(11,21,42,.68);
  box-shadow:0 35px 100px rgba(0,0,0,.38);
  backdrop-filter:blur(22px);
}
.login-copy{
  position:relative;
  padding:62px 55px;
  color:#fff;
  overflow:hidden;
  background:
    radial-gradient(500px 260px at 75% 20%,rgba(76,118,255,.22),transparent 65%),
    linear-gradient(145deg,rgba(22,42,83,.72),rgba(7,16,31,.70));
}
.login-copy:after{
  content:"";
  position:absolute;
  width:430px;height:430px;
  right:-210px;bottom:-220px;
  border-radius:50%;
  border:1px solid rgba(113,153,255,.14);
  box-shadow:0 0 0 35px rgba(113,153,255,.035),0 0 0 75px rgba(113,153,255,.025);
}
.login-copy h1{
  position:relative;
  z-index:1;
  max-width:610px;
  margin:14px 0;
  font:800 39px/1.08 Manrope;
  letter-spacing:-1.8px;
}
.login-copy p{
  position:relative;
  z-index:1;
  max-width:570px;
  color:#aebddd;
  line-height:1.75;
  font-size:13px;
}
.feature-row{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:25px;
}
.feature-row span{
  padding:8px 10px;
  border:1px solid rgba(138,166,255,.17);
  border-radius:9px;
  color:#b8c8e8;
  background:rgba(255,255,255,.045);
  font-size:9px;
  font-weight:800;
  letter-spacing:.8px;
}
.auth-card{
  border:1px solid var(--line);
  border-radius:23px;
  background:rgba(255,255,255,.97);
  box-shadow:0 25px 65px rgba(0,0,0,.17);
  padding:28px;
}
.login-card{margin:18px;background:rgba(255,255,255,.98)}
.auth-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:15px;
}
.auth-title span{font:800 20px Manrope;color:#0c1527}
.auth-title small{color:#8a95a8;font-size:10px}
.role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.role-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:67px;
  padding:10px;
  border:1px solid #e2e7f0;
  border-radius:14px;
  background:#fafbfe;
  transition:.18s;
}
.role-card:hover,.role-card.selected{
  transform:translateY(-2px);
  border-color:#9db3ee;
  background:linear-gradient(145deg,#f9fbff,#f0f5ff);
  box-shadow:0 12px 25px rgba(36,76,170,.10);
}
.role-icon{
  flex:0 0 35px;
  width:35px;height:35px;
  display:grid;place-items:center;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(135deg,#244ed1,#5e7fff);
  box-shadow:0 7px 16px rgba(44,91,216,.20);
}
.role-card b{display:block;font-size:11px;color:#17233a}
.role-card small{display:block;color:#8a95a8;font-size:8.5px;line-height:1.3;margin-top:3px}
.role-card>span:last-child{margin-left:auto;color:#8a99b4}
.selected-login{margin-top:14px;padding-top:14px;border-top:1px solid #e8ecf2}
.portal-label{margin-bottom:11px;color:#4b5a72;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.portal-label .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2f67eb;box-shadow:0 0 0 4px rgba(47,103,235,.10);margin-right:6px}
.selected-login form{display:grid;gap:11px}
.selected-login .btn{width:100%}
.forgot,.backlink,.reset-link{
  display:block;
  margin-top:12px;
  color:#3565ce;
  font-size:10.5px;
  font-weight:700;
  text-align:center;
}
.select-note{
  margin-top:15px;
  padding:13px;
  border:1px dashed #d9e0eb;
  border-radius:12px;
  color:#8995a8;
  background:#fafbfd;
  text-align:center;
  font-size:10.5px;
}
.login-footer{margin-top:16px;text-align:center;color:#7383a2;font-size:9px}
.credential{
  display:grid;
  gap:6px;
  padding:14px;
  margin:14px 0;
  border:1px solid #e2e7f0;
  border-radius:13px;
  background:#f8faff;
  color:#5b6880;
  font-size:11px;
}
.credential b{color:#1b2b4b}
code{padding:2px 5px;border-radius:5px;background:#eef2f8;color:#3d4d68}
.install-card{width:min(560px,100%);text-align:center}
.install-card .btn{width:100%}

/* ---------- Mobile ---------- */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login-copy{padding:45px 38px}
  .login-copy h1{font-size:32px}
}
@media (max-width:820px){
  .sidebar{position:relative;width:100%;height:auto;max-height:none;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sidebar nav a.active:before{display:none}
  .layout{display:block}
  .main{width:100%;margin-left:0;padding:23px 17px 45px}
  .topbar{align-items:center}
  .hero{padding:25px;align-items:flex-start;flex-direction:column}
  .hero-stat{width:100%}
  .login-panel{grid-template-columns:1fr}
  .login-copy{display:none}
}
@media (max-width:560px){
  .sidebar{padding:14px 10px}
  .sidebar .brand{padding:5px 9px 14px}
  .profile{margin-bottom:12px}
  .sidebar nav{grid-template-columns:1fr 1fr}
  .main{padding:17px 11px 35px}
  .topbar{margin-bottom:17px}
  .topbar h1{font-size:25px}
  .live{display:none}
  .cards{grid-template-columns:1fr 1fr;gap:9px}
  .metric{min-height:105px;padding:15px}
  .metric b{font-size:19px}
  .panel{padding:15px;border-radius:16px}
  .form-grid{grid-template-columns:1fr}
  .form-grid .full{grid-column:auto}
  .section-head{align-items:center}
  .hero{border-radius:19px;padding:21px}
  .hero h2{font-size:23px}
  .role-grid{grid-template-columns:1fr}
  .auth-bg{padding:13px}
  .login-brand{margin-bottom:10px}
  .secure-pill{display:none}
  .login-card{margin:0;padding:20px}
  .auth-card{border-radius:20px}
}
/* Advanced attendance intelligence */
.attendance-matrix{min-width:1100px;border-collapse:separate;border-spacing:0}
.attendance-matrix th{position:sticky;top:0;z-index:2;background:rgba(16,22,35,.96);color:#dbe7ff;text-align:center;font-size:11px;letter-spacing:.04em}
.attendance-matrix th:first-child,.attendance-matrix td:first-child{position:sticky;left:0;z-index:3;background:inherit;text-align:left;min-width:180px}
.attendance-matrix td{text-align:center;white-space:nowrap;font-size:12px}
.attendance-matrix tr:hover td{background:rgba(76,119,255,.07)}
.attendance-matrix td:nth-last-child(-n+5){font-weight:700}

/* ---------- Self-service school registration ---------- */
.school-register-cta{
  margin-top:18px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  padding:16px;
  border:1px solid rgba(37,99,235,.18);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(37,99,235,.07),rgba(39,196,255,.05));
  box-shadow:0 12px 35px rgba(10,25,55,.06);
}
.register-cta-icon{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  font-size:28px;font-weight:700;color:#fff;background:linear-gradient(135deg,#2563eb,#27bfe9);
  box-shadow:0 10px 25px rgba(37,99,235,.22);
}
.register-cta-copy strong{display:block;font-family:Manrope,sans-serif;font-size:15px;margin-top:2px}
.register-cta-copy p{margin:4px 0 0;color:var(--muted);font-size:12px}
.register-btn{white-space:nowrap;border:1px solid rgba(37,99,235,.15);background:#fff;color:var(--blue);font-weight:800}
.register-wrap{width:min(1180px,calc(100% - 34px));margin:0 auto;padding:30px 0 34px}
.register-brand{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}
.register-layout{display:grid;grid-template-columns:1fr 1.12fr;gap:24px;align-items:stretch}
.register-intro{
  padding:42px;border-radius:28px;color:#fff;min-height:650px;
  background:radial-gradient(500px 300px at 10% 0%,rgba(79,124,255,.35),transparent 65%),linear-gradient(145deg,#0b1730,#050b16);
  box-shadow:var(--shadow2);border:1px solid rgba(255,255,255,.08);
}
.register-intro h1{font-family:Manrope,sans-serif;font-size:clamp(36px,5vw,58px);line-height:1.02;letter-spacing:-2.8px;margin:14px 0 18px}
.register-intro p{max-width:600px;color:#b9c6df;font-size:16px;line-height:1.65}
.trial-benefits{display:grid;gap:12px;margin:34px 0}
.trial-benefits div{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.045)}
.trial-benefits b{color:#7db5ff;font-size:12px;letter-spacing:1px}
.trial-benefits span{font-weight:700}
.back-login{display:inline-block;margin-top:8px;color:#9fc0ff;font-weight:700}
.register-card{padding:30px}
.form-divider{height:1px;background:var(--line);position:relative;margin:2px 0}
.form-divider span{position:absolute;left:0;top:-10px;background:var(--white);padding-right:10px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px}
.trial-note{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:15px;border:1px solid rgba(22,168,120,.18);background:rgba(22,168,120,.06)}
.trial-note strong{white-space:nowrap;color:var(--green)}
.trial-note span{color:var(--muted);font-size:12px;line-height:1.5}
.register-foot{margin:18px 0 0;color:var(--muted2);font-size:11px;line-height:1.5}
.trial-inline{display:inline-block;margin-top:13px;padding:8px 11px;border-radius:10px;color:#0b684d;background:rgba(22,168,120,.09);border:1px solid rgba(22,168,120,.14);font-size:12px;font-weight:700}
@media(max-width:900px){
  .register-layout{grid-template-columns:1fr}
  .register-intro{min-height:auto;padding:30px}
  .school-register-cta{grid-template-columns:auto 1fr}
  .register-btn{grid-column:1/-1}
}
@media(max-width:560px){
  .register-wrap{width:min(100% - 20px,1180px);padding-top:15px}
  .register-brand{align-items:flex-start;flex-direction:column}
  .register-intro{padding:25px}
  .register-intro h1{font-size:38px}
  .register-card{padding:20px}
  .school-register-cta{padding:13px;grid-template-columns:auto 1fr}
  .register-cta-copy p{font-size:11px}
}

/* =========================================================
   ELITE UI v2 — visual overhaul
   ========================================================= */
:root{
  --bg:#f5f7fb; --surface:#ffffff; --surface-soft:#f8faff;
  --ink:#111827; --muted:#667085; --line:#e7ebf2;
  --nav:#0b1220; --nav2:#111c31; --blue:#2563eb; --blue-dark:#1747b5;
  --green:#059669; --red:#dc2626; --amber:#d97706;
  --shadow:0 12px 35px rgba(15,23,42,.07); --shadow-lg:0 24px 70px rgba(15,23,42,.12);
  --radius:18px;
}
html{background:var(--bg)}
body{background:linear-gradient(135deg,#f7f9fc 0%,#eef3fa 100%);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
body:before{opacity:.35;background-size:28px 28px}
.layout{min-height:100vh}
.sidebar{width:270px;padding:18px 13px;background:linear-gradient(180deg,#101b30 0%,#09111f 55%,#070d17 100%);border-right:1px solid rgba(255,255,255,.08);box-shadow:18px 0 55px rgba(2,8,23,.18)}
.brand{height:64px;display:flex;align-items:center;gap:6px;padding:0 15px;margin-bottom:16px;font-size:25px;font-weight:900;letter-spacing:-1.2px;color:#fff}
.brand span{color:#62a0ff}.brand em{font-style:normal;font-size:9px;letter-spacing:1.7px;padding:5px 7px;border-radius:6px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;margin-left:3px}
.profile{margin:0 2px 16px;padding:14px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.045);display:flex;gap:11px;align-items:center;backdrop-filter:blur(12px)}
.profile .avatar{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#3b82f6,#6366f1);display:grid;place-items:center;font-weight:800;color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.28)}
.profile b{display:block;color:#fff;font-size:13px}.profile small{display:block;color:#91a0b8;font-size:10px;margin-top:3px}
.sidebar nav{display:grid;gap:5px}.sidebar nav a{min-height:44px;padding:0 13px;border-radius:12px;display:flex;align-items:center;gap:11px;color:#aebbd0;font-size:13px;font-weight:650;transition:.2s ease;border:1px solid transparent}
.sidebar nav a span{width:20px;text-align:center;opacity:.9}.sidebar nav a:hover{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.07);transform:translateX(2px)}
.sidebar nav a.active{color:#fff;background:linear-gradient(90deg,rgba(37,99,235,.28),rgba(99,102,241,.12));border-color:rgba(96,165,250,.24);box-shadow:inset 3px 0 #4f8cff,0 8px 22px rgba(0,0,0,.12)}
.logout{margin:14px 2px 0!important;padding:12px 13px!important;border-radius:12px!important;color:#aebbd0!important}.logout:hover{background:rgba(220,38,38,.1)!important;color:#fff!important}
.main{margin-left:270px;width:calc(100% - 270px);padding:0 34px 50px;max-width:none}
.topbar{min-height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:25px;background:rgba(245,247,251,.72);backdrop-filter:blur(16px);position:sticky;top:0;z-index:30}
.topbar h1{font-size:25px;letter-spacing:-.7px;margin:3px 0 2px;font-weight:850}.topbar .muted{font-size:11px}.eyebrow{font-size:9px;font-weight:800;letter-spacing:1.4px;color:#6b7a93}.top-actions{display:flex;gap:9px;align-items:center}.live{font-size:11px;font-weight:700;padding:9px 12px;border:1px solid #dce5f2;background:#fff;border-radius:999px;box-shadow:0 5px 18px rgba(15,23,42,.05)}.live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#10b981;margin-right:6px;box-shadow:0 0 0 4px rgba(16,185,129,.12)}
.iconbtn{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;box-shadow:var(--shadow);font-weight:800}.iconbtn:hover{border-color:#b9cdf4;transform:translateY(-1px)}
.hero{position:relative;overflow:hidden;border:1px solid #dfe7f3;border-radius:24px;padding:30px 32px;margin-bottom:22px;background:linear-gradient(125deg,#0e1b33 0%,#142a51 58%,#1e3a78 100%);box-shadow:var(--shadow-lg);color:#fff;display:flex;justify-content:space-between;gap:30px;align-items:center}
.hero:before{content:"";position:absolute;width:420px;height:420px;right:-130px;top:-210px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.35),transparent 68%)}.hero:after{content:"";position:absolute;width:300px;height:300px;left:35%;bottom:-240px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.22),transparent 68%)}
.hero>div{position:relative;z-index:1}.hero h2{font-size:30px;line-height:1.1;letter-spacing:-1.1px;margin:9px 0 10px}.hero p{max-width:700px;color:#b9c7dc;font-size:13px;line-height:1.65;margin:0}.chip{display:inline-flex;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);font-size:9px;font-weight:800;letter-spacing:1.1px}.hero-stat{min-width:210px;text-align:right}.hero-stat small{display:block;color:#aebdd4;font-size:10px;text-transform:uppercase;letter-spacing:1px}.hero-stat strong{display:block;font-size:30px;margin:4px 0}.hero-stat span{font-size:10px;color:#9fb0c8}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:22px}.metric{position:relative;padding:20px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.9);box-shadow:var(--shadow);overflow:hidden}.metric:after{content:"";position:absolute;right:-25px;top:-25px;width:85px;height:85px;border-radius:50%;background:linear-gradient(135deg,rgba(37,99,235,.10),transparent)}.metric span,.metric small{display:block;color:var(--muted);font-size:10px;font-weight:650}.metric b{display:block;font-size:24px;margin:7px 0 5px;letter-spacing:-.7px}
.panel{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow);margin-bottom:18px}.panel h2{margin:0 0 6px;font-size:18px;letter-spacing:-.4px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:17px}.section-head h2{margin-top:4px}.muted{color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.form-grid .full{grid-column:1/-1}.form-grid label,.inline label{display:block;color:#475467;font-size:11px;font-weight:750}.form-grid input,.form-grid select,.form-grid textarea,.inline input,.inline select,input,select,textarea{width:100%;margin-top:7px;border:1px solid #dfe5ee;border-radius:11px;background:#fbfcfe;color:#182230;padding:11px 12px;outline:none;transition:.18s;box-shadow:inset 0 1px 1px rgba(15,23,42,.02)}input:focus,select:focus,textarea:focus{border-color:#79a4f6;box-shadow:0 0 0 4px rgba(37,99,235,.09);background:#fff}textarea{min-height:100px;resize:vertical}
.btn{display:inline-flex!important;align-items:center;justify-content:center;gap:7px;border:1px solid #d8e0eb!important;background:#fff;color:#344054!important;border-radius:10px!important;padding:9px 13px!important;font-size:11px!important;font-weight:800!important;transition:.18s!important;box-shadow:0 3px 10px rgba(15,23,42,.04)}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,23,42,.09)!important}.btn.primary{border-color:#2563eb!important;background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;color:#fff!important;box-shadow:0 8px 20px rgba(37,99,235,.22)!important}.btn.small{padding:7px 10px!important;font-size:10px!important}.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:#eef3fb;color:#3b4a62;font-size:9px;font-weight:800}.badge.green{background:#e8f8f1;color:#087443}.badge.red{background:#feecee;color:#b42318}
.tablewrap{overflow:auto}.tablewrap table{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}.tablewrap th{text-align:left;padding:11px 12px;background:#f6f8fc;color:#667085;border-top:1px solid #e7ebf2;border-bottom:1px solid #e7ebf2;font-size:9px;text-transform:uppercase;letter-spacing:.7px;white-space:nowrap}.tablewrap th:first-child{border-left:1px solid #e7ebf2;border-radius:10px 0 0 10px}.tablewrap th:last-child{border-right:1px solid #e7ebf2;border-radius:0 10px 10px 0}.tablewrap td{padding:13px 12px;border-bottom:1px solid #edf0f5;vertical-align:middle}.tablewrap tr:hover td{background:#fafcff}.tablewrap tr:last-child td{border-bottom:0}
.alert{padding:12px 15px;border-radius:12px;border:1px solid #dbe5f4;background:#f7faff;color:#31517f;margin-bottom:17px;font-size:11px;font-weight:650}.alert.warn{background:#fff9ed;border-color:#f6dfae;color:#8a5b09}.alert.error{background:#fff1f2;border-color:#fecdd3;color:#b42318}.notice{padding:15px 0;border-bottom:1px solid var(--line)}
.trial-inline{display:inline-block;margin-top:14px;padding:8px 11px;border-radius:9px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);font-size:10px}
@media(max-width:1100px){.sidebar{width:230px}.main{margin-left:230px;width:calc(100% - 230px);padding-left:22px;padding-right:22px}.cards{grid-template-columns:repeat(2,1fr)}.hero{padding:24px}.hero h2{font-size:25px}}
@media(max-width:760px){.sidebar{position:relative;width:100%;height:auto;min-height:0;padding:10px}.layout{display:block}.sidebar nav{grid-template-columns:repeat(2,1fr)}.sidebar nav a{min-height:40px}.logout{display:none}.profile{display:none}.brand{height:48px;margin:0}.main{margin:0;width:100%;padding:0 13px 35px}.topbar{position:relative;min-height:76px;margin-bottom:15px}.topbar h1{font-size:20px}.top-actions .live{display:none}.hero{display:block;border-radius:18px;padding:22px}.hero-stat{text-align:left;margin-top:18px}.cards{grid-template-columns:1fr 1fr;gap:10px}.metric{padding:15px}.metric b{font-size:20px}.panel{padding:16px;border-radius:15px}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.section-head{align-items:flex-start;flex-direction:column}}
@media(max-width:430px){.sidebar nav{grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr}.hero h2{font-size:23px}.topbar .eyebrow{font-size:8px}}

/* =========================================================
   SCHOOL ERP ELITE — FINAL FRONT-END POLISH
   ========================================================= */
.auth-bg{
  min-height:100vh;
  padding:28px;
  background:
    radial-gradient(700px 450px at 8% 8%,rgba(37,99,235,.18),transparent 65%),
    radial-gradient(650px 420px at 92% 92%,rgba(124,58,237,.16),transparent 65%),
    linear-gradient(135deg,#07101f 0%,#0b1730 48%,#111d39 100%);
}
.auth-bg:before{opacity:.16;background-size:34px 34px;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px)}
.login-wrap{width:min(1240px,100%);margin:auto;padding:30px 0 55px}
.login-brand{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.login-brand .brand{margin:0;padding:0;height:auto;font-size:28px}
.secure-pill{padding:9px 13px;border-radius:999px;color:#cbd8ef;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:10px;font-weight:800;letter-spacing:.4px;backdrop-filter:blur(12px)}
.login-panel{display:grid;grid-template-columns:1.05fr .95fr;min-height:650px;border:1px solid rgba(255,255,255,.12);border-radius:30px;overflow:hidden;background:rgba(255,255,255,.055);box-shadow:0 35px 100px rgba(0,0,0,.28);backdrop-filter:blur(20px)}
.login-copy{padding:62px;display:flex;flex-direction:column;justify-content:center;color:#fff;background:radial-gradient(500px 300px at 0 0,rgba(59,130,246,.16),transparent 70%)}
.login-copy .eyebrow{color:#86b6ff}
.login-copy h1{max-width:680px;font:800 clamp(40px,5vw,66px)/1.02 Manrope,sans-serif;letter-spacing:-3px;margin:14px 0 20px}
.login-copy p{max-width:620px;color:#aebed8;font-size:15px;line-height:1.75}
.feature-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.feature-row span{padding:8px 11px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:9px;font-weight:800;letter-spacing:.7px;color:#cbd8ef}
.login-panel>.login-card{margin:24px;background:rgba(255,255,255,.97);border-radius:24px;padding:30px;box-shadow:0 25px 70px rgba(0,0,0,.22);align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.login-card .auth-title{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-bottom:18px}.login-card .auth-title span{font:800 25px/1 Manrope,sans-serif;color:#111827}.login-card .auth-title small{color:#8a95a8;font-size:10px;font-weight:700}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.role-card{display:flex;align-items:center;gap:10px;padding:13px;border:1px solid #e5eaf2;border-radius:13px;background:#fbfcfe;transition:.2s;min-width:0}.role-card:hover{transform:translateY(-2px);border-color:#9bbaf0;box-shadow:0 10px 24px rgba(37,99,235,.09)}.role-card.selected{border-color:#4f7cff;background:#f5f8ff;box-shadow:0 0 0 3px rgba(37,99,235,.08)}.role-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:10px;background:#edf3ff;color:#2563eb;font-weight:900;flex:none}.role-card b{display:block;font-size:11px}.role-card small{display:block;color:#8994a7;font-size:9px;margin-top:3px}.role-card>span:last-child{margin-left:auto;color:#9aa6b8}.selected-login{margin-top:16px;padding-top:16px;border-top:1px solid #e8ecf2}.portal-label{display:inline-flex;align-items:center;gap:7px;padding:7px 9px;border-radius:999px;background:#eef4ff;color:#2454ae;font-size:9px;font-weight:850;margin-bottom:14px}.portal-label .dot{width:6px;height:6px;border-radius:50%;background:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.10)}
.auth-card label{display:block;color:#475467;font-size:11px;font-weight:750;margin-bottom:12px}.auth-card input{background:#fff}.auth-card .big{width:100%;padding:13px!important;border-radius:12px!important;font-size:12px!important;margin-top:3px}.forgot{display:block;text-align:center;margin-top:13px;color:#416bb7;font-size:10px;font-weight:700}.select-note{text-align:center;color:#8994a7;font-size:11px;padding:14px;background:#f7f9fc;border-radius:11px;margin-top:14px}

/* Front page if opened directly at /index.php */
.front-page{min-height:100vh;display:grid;place-items:center;padding:30px}.front-shell{width:min(1120px,100%);border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 30px 100px rgba(5,12,28,.25);display:grid;grid-template-columns:1.15fr .85fr}.front-copy{padding:70px;background:linear-gradient(145deg,#0a1530,#10264b 65%,#1c3d7c);color:#fff}.front-copy h1{font:800 clamp(42px,6vw,72px)/.98 Manrope,sans-serif;letter-spacing:-3px;margin:15px 0}.front-copy p{max-width:600px;color:#b9c8df;line-height:1.75}.front-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.front-badges span{padding:8px 11px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);border-radius:9px;font-size:9px;font-weight:800}.front-action{padding:55px;display:flex;flex-direction:column;justify-content:center}.front-action h2{font:800 28px Manrope,sans-serif;margin:0 0 10px}.front-action p{color:#667085;font-size:13px;line-height:1.65}.front-action .btn{margin-top:15px;width:100%;padding:14px!important;font-size:12px!important}

/* richer data/details surfaces */
.student-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;background:linear-gradient(120deg,#fff,#f4f8ff)}
.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line)}.detail-grid>div{padding:15px;background:#fff}.detail-grid span{display:block;color:#8a95a8;text-transform:uppercase;letter-spacing:.7px;font-size:8px;font-weight:800;margin-bottom:6px}.detail-grid b{font-size:12px;color:#273244}.detail-grid .full{grid-column:1/-1}
.actions{white-space:nowrap}.subpanel{padding:18px;border:1px dashed #d8e0eb;border-radius:14px;background:#fafcff;margin:16px 0}.subpanel h3{margin:0 0 12px;font-size:14px}
.badge.yellow{background:#fff5d9;color:#996b00}.empty{padding:30px;text-align:center;color:#8a95a8}
@media(max-width:900px){.login-panel{grid-template-columns:1fr}.login-copy{padding:42px}.login-panel{min-height:auto}.front-shell{grid-template-columns:1fr}.front-copy{padding:45px}.front-action{padding:35px}.detail-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.auth-bg{padding:12px}.login-wrap{padding-top:8px}.login-brand{align-items:flex-start;flex-direction:column}.secure-pill{font-size:9px}.login-copy{padding:30px 24px}.login-copy h1{font-size:39px;letter-spacing:-2px}.login-panel>.login-card{margin:10px;padding:20px}.role-grid{grid-template-columns:1fr}.student-hero{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.detail-grid .full{grid-column:auto}.front-page{padding:12px}.front-copy{padding:30px 24px}.front-action{padding:25px}}

/* =========================================================
   FRONT PAGE — reference-inspired white / navy / violet UI
   ========================================================= */
.front-page{min-height:100vh;overflow-x:hidden;color:#0b1738;background:#f8f9ff;font-family:"DM Sans",Inter,system-ui,sans-serif}
.front-page:before{display:none}
.front-shell{min-height:100vh;display:flex;flex-direction:column;background:
  radial-gradient(800px 360px at 74% 22%,rgba(110,80,255,.09),transparent 65%),
  radial-gradient(550px 260px at 5% 38%,rgba(255,193,72,.08),transparent 65%),
  linear-gradient(180deg,#ffffff 0%,#fbfbff 55%,#f3f1ff 100%)}
.front-topbar{height:106px;padding:0 clamp(24px,5vw,72px);display:flex;align-items:center;gap:34px;background:#050d2c;color:#fff;box-shadow:0 8px 35px rgba(4,12,45,.16);position:relative;z-index:2}
.front-logo{display:flex;align-items:center;gap:12px;min-width:270px}
.front-logo-mark{width:51px;height:62px;position:relative;display:grid;place-items:center;color:#ffbf22;font-size:29px;filter:drop-shadow(0 6px 12px rgba(255,190,35,.18))}
.front-logo-mark:before{content:"";position:absolute;inset:0;border:3px solid #ffbf22;border-radius:17px 17px 22px 22px;clip-path:polygon(50% 0,100% 23%,92% 75%,50% 100%,8% 75%,0 23%)}
.logo-cap{position:absolute;top:6px;font-size:23px;color:#fff;z-index:1}.logo-shield{font-size:25px;position:absolute;bottom:9px}
.front-logo-text{display:grid;grid-template-columns:auto auto;align-items:center;gap:8px 7px}.front-logo-text strong{font:800 27px/1 Manrope,sans-serif;letter-spacing:-1.5px}.front-logo-text strong span{color:#ffbd19}.front-logo-text em{font-style:normal;font:800 16px/1 Manrope,sans-serif;background:linear-gradient(135deg,#a36aff,#6d35de);padding:5px 10px;border-radius:6px;box-shadow:0 5px 16px rgba(126,75,255,.3)}.front-logo-text small{grid-column:1/-1;font-size:13px;color:#d3dcf6;margin-top:-3px}
.front-nav{display:flex;align-items:center;justify-content:center;gap:34px;flex:1}.front-nav a{position:relative;font-weight:700;font-size:15px;color:#f6f8ff;padding:14px 0;opacity:.95}.front-nav a:after{content:"";position:absolute;left:4px;right:4px;bottom:2px;height:3px;border-radius:999px;background:#ffc129;transform:scaleX(0);transition:.2s}.front-nav a:hover:after,.front-nav a.active:after{transform:scaleX(1)}
.front-secure{white-space:nowrap;padding:14px 22px;border:1.5px solid #f4b622;border-radius:17px;color:#ffc229;font-weight:800;font-size:14px;background:rgba(255,193,37,.02)}.front-secure span{margin-right:8px}
.front-main{width:min(1400px,94%);margin:0 auto;flex:1;display:grid;grid-template-columns:1.04fr .96fr;gap:44px;align-items:center;padding:44px 0 34px;position:relative}.front-main:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(250px 150px at 57% 5%,rgba(196,170,255,.17),transparent 70%),radial-gradient(320px 200px at 0 85%,rgba(168,194,255,.08),transparent 70%)}
.front-copy{padding:25px 0 24px 26px;position:relative}.front-eyebrow{display:flex;align-items:center;gap:10px;color:#6d42ee;font-size:13px;font-weight:900;letter-spacing:1.25px}.front-eyebrow span{display:block;width:17px;height:1px;background:#9a7cff}.front-copy h1{font:800 clamp(42px,5.1vw,74px)/1.03 Manrope,sans-serif;letter-spacing:-3.6px;color:#091437;margin:25px 0 24px}.front-copy h1 b{color:#7445ee}.front-copy h1>span{color:#ffb720}.front-copy p{max-width:680px;color:#56617a;font-size:18px;line-height:1.72;margin:0 0 33px}
.front-trust-card{width:min(690px,100%);display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid #e7e8f4;border-radius:22px;box-shadow:0 18px 44px rgba(25,41,90,.08);padding:16px 12px;margin-top:12px}.front-trust-card>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:3px 12px;border-right:1px solid #e6e8f0;text-align:center}.front-trust-card>div:last-child{border-right:0}.front-trust-card i{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:#f0edff;color:#7042ee;font-size:22px;font-style:normal;margin-bottom:3px}.front-trust-card>div:nth-child(2) i{background:#ebf1ff;color:#3367df}.front-trust-card>div:nth-child(3) i{background:#e8fbf2;color:#17ad82}.front-trust-card>div:nth-child(4) i{background:#fff0e8;color:#ff8e39}.front-trust-card strong{font-size:12px;color:#132042}.front-trust-card small{font-size:9px;color:#6f7890}.front-stats{display:grid;grid-template-columns:repeat(4,1fr);width:min(690px,100%);margin-top:30px}.front-stats div{padding-left:18px;border-left:1px solid #dcdfee}.front-stats div:first-child{padding-left:0;border-left:0}.front-stats b{display:block;font:800 31px/1 Manrope,sans-serif;color:#6d41ea;letter-spacing:-1px}.front-stats span{display:block;margin-top:7px;color:#5d6780;font-size:14px}
.front-action{position:relative;z-index:1}.front-login-card{background:rgba(255,255,255,.97);border:1px solid rgba(226,226,244,.95);border-radius:29px;box-shadow:0 30px 80px rgba(35,36,93,.15);padding:34px 34px 25px;max-width:665px;margin-left:auto}.front-login-head{text-align:center}.user-orb{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;margin:0 auto 13px;background:linear-gradient(145deg,#f2efff,#fbf9ff);color:#7043ea;font-size:39px}.front-login-head h2{font:800 28px/1 Manrope,sans-serif;color:#0e1836;margin:0}.front-login-head p{font-size:14px;color:#5e6680;margin:10px 0 15px}.title-underline{display:block;width:58px;height:3px;border-radius:99px;background:#7042ea;margin:0 auto 26px}.portal-heading{display:flex;align-items:center;gap:12px;color:#7141ec;font-size:15px;font-weight:900;margin-bottom:14px}.portal-heading span{height:1px;background:#e2e4ee;flex:1}
.front-role-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.front-role-card{min-height:78px;display:flex;align-items:center;gap:12px;padding:12px 13px;border:1px solid #e4e6f0;border-radius:15px;background:#fff;transition:.2s;box-shadow:0 6px 18px rgba(23,32,75,.03)}.front-role-card:hover,.front-role-card.selected{transform:translateY(-2px);border-color:#bcb0ff;box-shadow:0 12px 28px rgba(104,67,235,.10);background:#fbfaff}.front-role-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:22px;font-weight:900;flex:none}.role-superadmin{color:#7041ee;background:#eeeaff}.role-admin{color:#3771e7;background:#e9f1ff}.role-teacher{color:#10ad80;background:#e8f9f2}.role-parent{color:#ff8231;background:#fff0e7}.role-accountant{color:#efab15;background:#fff8e1}.front-role-copy{min-width:0}.front-role-copy b{display:block;font-size:14px;color:#0e1838;margin-bottom:4px}.front-role-copy small{display:block;color:#69728a;font-size:11px;line-height:1.35}.front-role-arrow{margin-left:auto;color:#6b7390;font-size:27px}.front-login-form-wrap{margin-top:17px;padding-top:17px;border-top:1px solid #e8e9f0}.front-selected{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:#efeaff;color:#6440db;font-size:11px;font-weight:900;margin-bottom:14px}.front-selected span{width:7px;height:7px;border-radius:50%;background:#6d40e6}.front-login-form label{display:block;color:#43506e;font-size:12px;font-weight:800;margin-bottom:12px}.front-login-form input{border-radius:12px;border:1px solid #dfe2ec;background:#fff;margin-top:7px;padding:13px 14px}.front-login-form input:focus{border-color:#8e6df3;box-shadow:0 0 0 4px rgba(111,67,238,.09)}.front-signin-btn{width:100%;border:0;border-radius:13px;background:linear-gradient(135deg,#713fe9,#5c32d3);color:#fff;font-weight:900;font-size:15px;padding:14px 16px;box-shadow:0 12px 24px rgba(105,60,226,.24);transition:.2s}.front-signin-btn:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(105,60,226,.30)}.front-signin-btn span{margin-right:6px;color:#ffd24a}.front-forgot{font-size:11px;margin-top:13px}.front-select-note{padding:14px 16px;border-radius:13px;background:#f8f8fd;color:#757e94;font-size:12px;text-align:center}.front-or{display:flex;align-items:center;gap:11px;margin:17px 0;color:#768098;font-size:11px;font-weight:900}.front-or:before,.front-or:after{content:"";height:1px;background:#e4e6ef;flex:1}.front-secondary-btn{display:block;text-align:center;border:1px solid #dddff0;border-radius:13px;padding:12px;color:#6a42df;font-weight:800;font-size:12px;background:#fff}.front-security-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;padding:15px 9px;background:#f7f5ff;border-radius:15px}.front-security-row div{display:flex;align-items:center;justify-content:center;gap:9px;color:#5a38d6}.front-security-row span{font-size:20px}.front-security-row small{font-size:10px;color:#4a5570;line-height:1.3}
.front-footer{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:25px;padding:20px 5vw 24px;background:linear-gradient(180deg,#221c68,#17114e);color:#fff;position:relative;overflow:hidden}.front-footer:before{content:"";position:absolute;left:-5%;right:-5%;top:-35px;height:80px;border-radius:50%;background:#f6f5ff}.front-footer>div{position:relative;z-index:1}.front-footer strong{display:block;font-size:15px}.front-footer small{display:block;margin-top:4px;color:#c1c9e7;font-size:11px}.front-footer-center{text-align:center;color:#d4d9ef;font-size:13px}.front-footer-social{display:flex;align-items:center;justify-content:flex-end;gap:10px}.front-footer-social span{margin-right:5px;color:#d3d8ef;font-size:13px}.front-footer-social i{width:38px;height:38px;border:1px solid #736ee4;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;color:#fff}
@media(max-width:1120px){.front-topbar{gap:18px;padding:0 28px}.front-nav{gap:18px}.front-secure{font-size:12px;padding:11px 14px}.front-logo{min-width:250px}.front-main{grid-template-columns:1fr .95fr;gap:25px}.front-copy h1{font-size:52px}.front-trust-card>div{padding:4px 7px}}
@media(max-width:900px){.front-topbar{height:auto;min-height:88px;flex-wrap:wrap;padding:16px 22px}.front-nav{order:3;flex-basis:100%;justify-content:flex-start;overflow:auto;padding-bottom:3px}.front-main{grid-template-columns:1fr;padding:34px 0}.front-copy{padding:0 8px}.front-action{width:100%}.front-login-card{margin:0 auto}.front-footer{grid-template-columns:1fr;gap:15px;text-align:center}.front-footer-social{justify-content:center}.front-footer-center{order:2}.front-footer>div:first-child{order:1}.front-footer-social{order:3}}
@media(max-width:560px){.front-topbar{padding:13px 15px}.front-logo{min-width:0}.front-logo-mark{width:42px;height:52px}.front-logo-text strong{font-size:22px}.front-logo-text small{font-size:10px}.front-logo-text em{font-size:12px;padding:4px 7px}.front-nav{gap:16px}.front-nav a{font-size:12px}.front-secure{display:none}.front-main{width:94%;padding-top:24px}.front-copy h1{font-size:39px;letter-spacing:-2.2px;margin-top:17px}.front-copy p{font-size:15px}.front-trust-card{grid-template-columns:1fr 1fr;border-radius:17px}.front-trust-card>div:nth-child(2){border-right:0}.front-trust-card>div:nth-child(1),.front-trust-card>div:nth-child(2){border-bottom:1px solid #e6e8f0;padding-bottom:13px;margin-bottom:3px}.front-stats{gap:14px}.front-stats div{padding-left:10px}.front-stats b{font-size:24px}.front-stats span{font-size:11px}.front-login-card{padding:23px 17px 18px;border-radius:20px}.front-role-grid{grid-template-columns:1fr}.front-login-head h2{font-size:25px}.front-security-row{grid-template-columns:1fr}.front-security-row div{justify-content:flex-start;padding-left:15px}.front-footer{padding-left:20px;padding-right:20px}.front-footer-center{font-size:11px}}


/* =========================================================
   FRONT REFERENCE MATCH — FINAL OVERRIDES
   Prevent legacy dashboard/login rules from bleeding into
   the front page and keep the reference composition intact.
   ========================================================= */
.front-page{
  min-height:100vh!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  place-items:initial!important;
  overflow-x:hidden!important;
  background:#f7f8fc!important;
}
.front-shell{
  width:100%!important;
  min-height:100vh!important;
  margin:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  box-shadow:none!important;
  display:flex!important;
  flex-direction:column!important;
  background:
    radial-gradient(560px 260px at 67% 22%,rgba(113,77,245,.11),transparent 70%),
    radial-gradient(360px 220px at 6% 58%,rgba(255,194,57,.08),transparent 70%),
    linear-gradient(180deg,#fff 0%,#fbfbff 62%,#f4f2ff 100%)!important;
}
.front-topbar{
  flex:0 0 94px!important;
  height:94px!important;
  padding:0 clamp(32px,5vw,58px)!important;
  gap:28px!important;
}
.front-logo{min-width:290px!important}
.front-nav{gap:36px!important}
.front-nav a{font-size:16px!important}
.front-main{
  width:min(1500px,94%)!important;
  margin:0 auto!important;
  flex:1 1 auto!important;
  min-height:0!important;
  grid-template-columns:minmax(0,1.06fr) minmax(520px,.94fr)!important;
  gap:58px!important;
  align-items:center!important;
  padding:34px 0 28px!important;
}
.front-copy{
  padding:12px 0 12px 24px!important;
  position:relative!important;
  background:transparent!important;
  color:#091437!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.front-copy h1{
  color:#091437!important;
  margin:22px 0 24px!important;
  font-size:clamp(50px,4.65vw,74px)!important;
  line-height:1.02!important;
  letter-spacing:-3.7px!important;
}
.front-copy p{color:#56617a!important;max-width:650px!important;font-size:17px!important}
.front-trust-card{margin-top:20px!important}
.front-action{padding:0!important;display:flex!important;align-items:stretch!important;justify-content:center!important}
.front-login-card{
  width:100%!important;
  max-width:650px!important;
  margin:0!important;
  padding:32px 32px 24px!important;
}
.front-login-head h2{font-size:29px!important}
.front-role-grid{gap:10px!important}
.front-role-card{min-height:78px!important}
.front-security-row{margin-top:18px!important}
.front-footer{
  flex:0 0 112px!important;
  min-height:112px!important;
  padding:25px clamp(32px,5vw,58px) 20px!important;
}

@media(max-width:1180px){
  .front-logo{min-width:250px!important}
  .front-nav{gap:22px!important}
  .front-main{grid-template-columns:minmax(0,1fr) minmax(470px,.95fr)!important;gap:32px!important}
  .front-copy h1{font-size:clamp(44px,5vw,62px)!important}
  .front-secure{font-size:12px!important;padding:12px 15px!important}
}
@media(max-width:980px){
  .front-topbar{flex-wrap:wrap;height:auto!important;padding:16px 24px!important}
  .front-nav{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:2px}
  .front-main{grid-template-columns:1fr!important;padding:30px 0!important}
  .front-copy{padding-left:8px!important}
  .front-action{width:100%!important}
  .front-login-card{margin:0 auto!important}
  .front-footer{grid-template-columns:1fr!important;min-height:auto!important;height:auto!important;text-align:center}
  .front-footer-social{justify-content:center!important}
}
@media(max-width:560px){
  .front-topbar{padding:13px 15px!important}
  .front-main{width:92%!important}
  .front-copy h1{font-size:40px!important;letter-spacing:-2.2px!important}
  .front-copy p{font-size:15px!important}
  .front-login-card{padding:23px 17px 18px!important}
}
/* SchoolERP Elite enhanced student + fee management */
.student-admission .form-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.upload-drop{position:relative;border:1.5px dashed rgba(91,118,190,.45);border-radius:18px;padding:18px;background:linear-gradient(135deg,rgba(55,94,224,.05),rgba(174,64,210,.04));cursor:pointer;display:flex;flex-direction:column;gap:7px;transition:.2s;}
.upload-drop:hover,.upload-drop.dragging{border-color:#7b5cff;background:rgba(123,92,255,.10);transform:translateY(-1px);}
.upload-drop input[type=file]{padding:10px;border:0;background:transparent;cursor:pointer;}
.student-photo-preview{width:74px;height:74px;border-radius:16px;object-fit:cover;border:3px solid rgba(255,255,255,.8);box-shadow:0 8px 20px rgba(20,30,70,.15);}
.class-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;margin-top:16px;}
.class-tile{padding:16px;border-radius:16px;background:linear-gradient(135deg,#f6f9ff,#fff);border:1px solid #e2e9f5;color:#14213d;text-decoration:none;display:flex;flex-direction:column;gap:4px;transition:.2s;}
.class-tile:hover,.class-tile.active{border-color:#6b5cff;box-shadow:0 10px 24px rgba(70,80,180,.12);transform:translateY(-2px);}
.class-tile strong{font-size:18px}.class-tile span{color:#64748b}.class-tile small{color:#7b5cff;font-weight:700;}
.student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;}
.student-card{background:#fff;border:1px solid #e5ebf4;border-radius:20px;padding:16px;box-shadow:0 8px 24px rgba(15,35,70,.06);}
.student-card-top{display:flex;gap:13px;align-items:center}.student-card-top img,.student-initial{width:64px;height:64px;border-radius:17px;object-fit:cover;flex:0 0 64px}.student-initial{display:grid;place-items:center;background:linear-gradient(135deg,#2477ff,#7b3fe4);color:#fff;font-size:24px;font-weight:800}.student-card h3{margin:0 0 4px}.student-card p{margin:0;color:#53627c}.student-card small{color:#8792a7}.student-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;padding-top:12px;border-top:1px solid #edf1f7}.student-meta span{font-size:11px;color:#7b879d}.student-meta b{font-size:13px;color:#1c2940}.student-detail-head{display:flex;gap:18px;align-items:center}.profile-photo{width:86px;height:86px;object-fit:cover;border-radius:20px;border:3px solid rgba(123,92,255,.2)}
.table-avatar{width:42px;height:42px;border-radius:12px;object-fit:cover;vertical-align:middle}.table-avatar.initial{display:inline-grid;place-items:center;background:#eef2ff;color:#5b4fe9;font-weight:800}.danger-money{color:#d92d4b}.hero-stat strong{white-space:nowrap}
@media(max-width:900px){.student-admission .form-grid{grid-template-columns:1fr 1fr;}.student-grid{grid-template-columns:1fr;}}
@media(max-width:560px){.student-admission .form-grid{grid-template-columns:1fr;}.class-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}.student-meta{grid-template-columns:1fr;}}
/* SchoolERP Elite enhanced student + fee management */
.student-admission .form-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.upload-drop{position:relative;border:1.5px dashed rgba(91,118,190,.45);border-radius:18px;padding:18px;background:linear-gradient(135deg,rgba(55,94,224,.05),rgba(174,64,210,.04));cursor:pointer;display:flex;flex-direction:column;gap:7px;transition:.2s;}
.upload-drop:hover,.upload-drop.dragging{border-color:#7b5cff;background:rgba(123,92,255,.10);transform:translateY(-1px);}
.upload-drop input[type=file]{padding:10px;border:0;background:transparent;cursor:pointer;}
.student-photo-preview{width:74px;height:74px;border-radius:16px;object-fit:cover;border:3px solid rgba(255,255,255,.8);box-shadow:0 8px 20px rgba(20,30,70,.15);}
.class-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;margin-top:16px;}
.class-tile{padding:16px;border-radius:16px;background:linear-gradient(135deg,#f6f9ff,#fff);border:1px solid #e2e9f5;color:#14213d;text-decoration:none;display:flex;flex-direction:column;gap:4px;transition:.2s;}
.class-tile:hover,.class-tile.active{border-color:#6b5cff;box-shadow:0 10px 24px rgba(70,80,180,.12);transform:translateY(-2px);}
.class-tile strong{font-size:18px}.class-tile span{color:#64748b}.class-tile small{color:#7b5cff;font-weight:700;}
.student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;}
.student-card{background:#fff;border:1px solid #e5ebf4;border-radius:20px;padding:16px;box-shadow:0 8px 24px rgba(15,35,70,.06);}
.student-card-top{display:flex;gap:13px;align-items:center}.student-card-top img,.student-initial{width:64px;height:64px;border-radius:17px;object-fit:cover;flex:0 0 64px}.student-initial{display:grid;place-items:center;background:linear-gradient(135deg,#2477ff,#7b3fe4);color:#fff;font-size:24px;font-weight:800}.student-card h3{margin:0 0 4px}.student-card p{margin:0;color:#53627c}.student-card small{color:#8792a7}.student-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;padding-top:12px;border-top:1px solid #edf1f7}.student-meta span{font-size:11px;color:#7b879d}.student-meta b{font-size:13px;color:#1c2940}.student-detail-head{display:flex;gap:18px;align-items:center}.profile-photo{width:86px;height:86px;object-fit:cover;border-radius:20px;border:3px solid rgba(123,92,255,.2)}
.table-avatar{width:42px;height:42px;border-radius:12px;object-fit:cover;vertical-align:middle}.table-avatar.initial{display:inline-grid;place-items:center;background:#eef2ff;color:#5b4fe9;font-weight:800}.danger-money{color:#d92d4b}.hero-stat strong{white-space:nowrap}
@media(max-width:900px){.student-admission .form-grid{grid-template-columns:1fr 1fr;}.student-grid{grid-template-columns:1fr;}}
@media(max-width:560px){.student-admission .form-grid{grid-template-columns:1fr;}.class-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}.student-meta{grid-template-columns:1fr;}}