:root{
  --bg-overlay-1: rgba(8, 15, 10, 0.60);
  --bg-overlay-2: rgba(8, 12, 10, 0.82);

  --card-bg: rgba(20, 24, 22, 0.78);
  --card-border: rgba(120, 180, 120, 0.22);

  --text: #f4f7f2;
  --muted: rgba(230, 240, 228, 0.78);

  --primary-green: #4f9e2f;
  --accent-orange: #d97b17;

  --btn-bg-1: #4b8b25;
  --btn-bg-2: #d97b17;
  --btn-hover-1: #5aa82d;
  --btn-hover-2: #f08b1d;

  --input-bg: rgba(245, 247, 243, 0.92);
  --input-text: #162114;

  --glow: rgba(114, 190, 85, 0.30);
  --table-head: rgba(63, 127, 39, 0.40);
}

body[data-theme="light"]{
  --bg-overlay-1: rgba(244, 248, 242, 0.70);
  --bg-overlay-2: rgba(229, 237, 226, 0.88);

  --card-bg: rgba(255, 255, 255, 0.86);
  --card-border: rgba(79, 158, 47, 0.18);

  --text: #1a2517;
  --muted: rgba(26, 37, 23, 0.72);

  --btn-bg-1: #4f9e2f;
  --btn-bg-2: #d97b17;
  --btn-hover-1: #438626;
  --btn-hover-2: #bb6913;

  --input-bg: rgba(255,255,255,0.96);
  --input-text: #162114;

  --glow: rgba(79, 158, 47, 0.18);
  --table-head: rgba(79, 158, 47, 0.16);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

html, body{
  height:auto;
  margin:0;
  overflow-x:hidden;
}

body{
  min-height:100vh;
  display:block;
  padding:40px 0;
  font-family:"Segoe UI", Arial, sans-serif;
  color:var(--text);

  background:
    radial-gradient(circle at center, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(var(--bg-overlay-1), var(--bg-overlay-2)),
    url("school-logo-bg.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color:#0b120d;
}

/* glow layer */
body::before{
  content:"";
  position:fixed;
  inset:-40%;
  background:
    radial-gradient(circle at 25% 30%, rgba(79,158,47,.18), transparent 60%),
    radial-gradient(circle at 75% 65%, rgba(217,123,23,.16), transparent 60%),
    radial-gradient(circle at center, rgba(255,255,255,.06), transparent 70%);
  animation: moveGlow 20s linear infinite;
  z-index:0;
  pointer-events:none;
}

/* floating particles */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    radial-gradient(rgba(79,158,47,.10) 1px, transparent 1px),
    radial-gradient(rgba(217,123,23,.08) 1px, transparent 1px);
  background-size: 120px 120px, 180px 180px, 240px 240px;
  background-position: 0 0, 40px 60px, 120px 160px;
  animation: floatParticles 22s linear infinite;
  opacity:.22;
  z-index:1;
  pointer-events:none;
}

@keyframes moveGlow{
  0%{transform:translate(-6%,-6%)}
  50%{transform:translate(6%,4%)}
  100%{transform:translate(-6%,-6%)}
}

@keyframes floatParticles{
  0%{transform:translateY(0)}
  100%{transform:translateY(-120px)}
}

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

/* theme button */
.top-actions{
  position:fixed;
  top:14px;
  right:14px;
  display:flex;
  gap:10px;
  z-index:50;
}

.icon-btn{
  border:none;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  color:var(--text);
  background:rgba(20,24,22,.46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:1px solid var(--card-border);
  transition:.25s ease;
}

body[data-theme="light"] .icon-btn{
  background:rgba(255,255,255,.45);
  border:1px solid rgba(79, 158, 47, 0.16);
}

.icon-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}

/* cards */
.card{
  width:440px;
  min-height:420px;
  padding:40px 46px;
  border-radius:22px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  text-align:center;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow:
    0 22px 45px rgba(0,0,0,.58),
    inset 0 0 0 1px rgba(255,255,255,.03);

  position:relative;
  z-index:2;
  margin:0 auto 30px auto;
  animation: fadeSlideUp .65s ease forwards;
}

.card.wide{
  width:95%;
  max-width:1400px;
  min-height:auto;
  padding:50px 40px;
  align-items:stretch;
}

/* text */
h1,h2{
  margin:0 0 12px;
  font-weight:700;
  letter-spacing:.4px;
  color:var(--text);
}

.small{
  opacity:.95;
  font-size:14px;
  margin:0 0 18px;
  color:var(--muted);
}

hr{
  width:100%;
  border:none;
  border-top:1px solid rgba(255,255,255,.10);
  margin:18px 0;
}

/* logo */
.logo{
  width:82px;
  height:82px;
  object-fit:contain;
  margin:0 auto 14px;
  display:block;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.45));
}

/* inputs */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="time"],
input[type="date"],
select{
  width:100%;
  padding:14px;
  margin:0 0 14px;
  border-radius:12px;
  border:1px solid transparent;
  outline:none;
  background:var(--input-bg);
  color:var(--input-text);
  font-size:15px;
  transition:.25s ease;
}

input:focus,
select:focus{
  border:1px solid rgba(79, 158, 47, .72);
  box-shadow:0 0 12px var(--glow);
}

/* buttons */
.btn,
button{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:none;
  background:linear-gradient(145deg,var(--btn-bg-1),var(--btn-bg-2));
  color:#fff;
  font-size:16px;
  cursor:pointer;
  transition:.25s ease;
  text-decoration:none;
  display:block;
  letter-spacing:.4px;
  margin-top:10px;
  font-weight:600;
  text-align:center;
}

.btn:hover,
button:hover{
  transform:translateY(-2px);
  background:linear-gradient(145deg,var(--btn-hover-1),var(--btn-hover-2));
  box-shadow:0 10px 22px rgba(0,0,0,.42);
}

.row{
  display:flex;
  gap:12px;
  width:100%;
}

.row > *{
  flex:1;
}

/* show password */
.show-password{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:100%;
  margin:4px 0 10px;
  font-size:14px;
  opacity:.92;
  user-select:none;
  color:var(--muted);
}

.show-password input{
  width:auto;
  margin:0;
}

/* messages */
.error{
  width:100%;
  color:#ff6d6d;
  margin:0 0 12px;
  font-size:14px;
}

.success{
  width:100%;
  color:#95f2a4;
  margin:0 0 12px;
  font-size:14px;
}

/* topbar */
.topbar{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:18px;
}

.topbar .btn{
  width:auto;
  margin:0;
  padding:10px 14px;
}

/* table */
.table-wrap{
  margin-top:18px;
  overflow-x:auto;
  overflow-y:visible;
  border-radius:16px;
  border:1px solid rgba(120, 180, 120, 0.14);
  width:100%;
}

table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  background:rgba(13,16,14,.28);
}

th,td{
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.12);
  text-align:left;
}

th{
  background:var(--table-head);
  font-size:15px;
  letter-spacing:.4px;
  color:#f5f7f2;
}

tbody tr:nth-child(odd){
  background: rgba(255,255,255,.025);
}

tbody tr:nth-child(even){
  background: rgba(79,158,47,.045);
}

tbody tr:hover{
  background: rgba(217,123,23,.09);
}

/* badges */
.badge{
  padding:6px 14px;
  border-radius:999px;
  display:inline-block;
  font-size:13px;
  font-weight:600;
}

.badge.present{
  background:rgba(79, 158, 47, .24);
  color:#bff0a6;
}

.badge.late{
  background:rgba(217, 123, 23, .24);
  color:#ffd199;
}

/* search */
.searchbar{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,12,11,.30);
  color: white;
  outline: none;
  margin: 10px 0 18px;
}

.searchbar::placeholder{
  color: rgba(255,255,255,.65);
}

/* toast */
.toast{
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(20,24,22,.72);
  border:1px solid var(--card-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding:12px 16px;
  border-radius:14px;
  z-index:60;
}

/* sticky header */
.sticky-header{
  position:sticky;
  top:14px;
  z-index:40;
  margin:0 auto 18px;
  width:95%;
  max-width:1400px;
  background: rgba(20,24,22,.70);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.42);
}

.sticky-header .title{
  font-size:20px;
  font-weight:700;
  letter-spacing:.5px;
  margin:0;
}

.sticky-header .sub{
  margin-top:4px;
  font-size:13px;
  opacity:.85;
}

/* scroll top */
.scroll-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  background: rgba(20,24,22,.60);
  color: white;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: .25s ease;
}

.scroll-top.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top:hover{
  transform: translateY(-2px);
}

body::-webkit-scrollbar{
  width:12px;
}

body::-webkit-scrollbar-thumb{
  background:rgba(79,158,47,.28);
  border-radius:999px;
}

body::-webkit-scrollbar-track{
  background:rgba(0,0,0,.25);
}

/* responsive */
@media (max-width:520px){
  body{
    padding:16px;
  }

  .card{
    width:92vw;
    min-height:auto;
    padding:36px 22px;
  }

  .card.wide{
    padding:36px 20px;
  }

  .row{
    flex-direction:column;
  }

  .top-actions{
    top:10px;
    right:10px;
  }
}