/* ── CSS VARIABLES ── */
:root {
  --bg: #0b0f1a;
  --surface: #111827;
  --surface2: #1a2235;
  --surface3: #1f2d45;
  --border: #1e2d47;
  --border2: #263552;
  --text: #e8edf5;
  --text2: #8fa3c1;
  --text3: #5a7090;
  --accent: #3b82f6;
  --accent2: #60a5fa;
  --accent-glow: rgba(59,130,246,0.15);
  --green: #10b981;
  --red: #ef4444;
  --amber: #f59e0b;
  --purple: #8b5cf6;
  --sidebar-w: 256px;
  --topbar-h: 64px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
}

[data-theme="light"] {
  --bg: #eef2f8;
  --surface: #ffffff;
  --surface2: #f4f7fc;
  --surface3: #e8edf6;
  --border: #d0daea;
  --border2: #b8c8de;
  --text: #0d1b30;
  --text2: #3a5272;
  --text3: #7a90aa;
  --accent: #1d5fd8;
  --accent2: #2563eb;
  --accent-glow: rgba(29,95,216,0.12);
  --green: #059669;
  --red: #dc2626;
  --amber: #d97706;
  --purple: #7c3aed;
  --shadow: 0 2px 20px rgba(13,27,48,0.1);
  --shadow-lg: 0 4px 40px rgba(13,27,48,0.14);
}

/* ── RESET ── */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s;}
input,select,button,textarea{font-family:inherit;font-size:14px;}
input:focus,select:focus,textarea:focus{outline:none;}
button{cursor:pointer;border:none;background:none;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px;}

/* ── THEME TOGGLE ── */
#theme-toggle,#auth-theme-toggle{
  width:40px;height:40px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);display:flex;align-items:center;justify-content:center;
  font-size:17px;transition:all .2s;flex-shrink:0;cursor:pointer;
}
#theme-toggle:hover,#auth-theme-toggle:hover{border-color:var(--accent);color:var(--accent);}

/* ── SIDEBAR ── */
#sidebar{
  position:fixed;top:0;left:-256px;width:var(--sidebar-w);height:100vh;
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:50;
  transition:left .25s cubic-bezier(.4,0,.2,1),background .25s,border-color .25s;
}
#sidebar.open{left:0;}
.sidebar-header{
  padding:20px 18px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;transition:border-color .25s;
}
.logo-mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.logo-mark svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.logo-name{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.3px;transition:color .25s;}
.logo-sub{font-size:11px;color:var(--text3);margin-top:1px;}
#sidebar nav{flex:1;padding:10px;overflow-y:auto;}
.nav-section{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;padding:14px 8px 6px;}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  color:var(--text2);font-size:13px;font-weight:500;cursor:pointer;width:100%;text-align:left;
  border:1px solid transparent;transition:all .15s;margin-bottom:2px;
}
.nav-item:hover{background:var(--surface2);color:var(--text);}
.nav-item.active{
  background:var(--accent-glow);color:var(--accent2);font-weight:600;
  border-color:rgba(59,130,246,0.2);
}
[data-theme="light"] .nav-item.active{
  background:rgba(29,95,216,0.08);
  border-color:rgba(29,95,216,0.18);
}
.nav-item .nav-icon{
  width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:15px;background:var(--surface3);transition:background .15s;
}
.nav-item.active .nav-icon{background:rgba(59,130,246,0.18);}
[data-theme="light"] .nav-item.active .nav-icon{background:rgba(29,95,216,0.12);}
.sidebar-footer{padding:10px;border-top:1px solid var(--border);}
.logout-btn{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  color:var(--red);font-size:13px;font-weight:500;width:100%;transition:background .15s;
}
.logout-btn:hover{background:rgba(239,68,68,0.08);}

/* ── OVERLAY ── */
#overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:40;backdrop-filter:blur(2px);}
#overlay.show{display:block;}

/* ── TOPBAR ── */
#topbar{
  background:var(--surface);border-bottom:1px solid var(--border);
  height:var(--topbar-h);padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:30;gap:12px;
  transition:background .25s,border-color .25s;
}
#menu-btn{
  width:38px;height:38px;border-radius:9px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text2);display:none;
  align-items:center;justify-content:center;font-size:18px;flex-shrink:0;cursor:pointer;
}
.topbar-left{display:flex;align-items:center;gap:10px;}
.topbar-right{display:flex;align-items:center;gap:10px;}
#page-title{font-size:16px;font-weight:700;color:var(--text);}
#page-breadcrumb{font-size:12px;color:var(--text3);}
.college-chip{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:6px 12px;font-size:12px;color:var(--text2);
  font-weight:500;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:background .25s,border-color .25s;
}
.college-chip strong{color:var(--accent2);display:block;font-size:11px;}
.topbar-avatar{
  width:36px;height:36px;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;flex-shrink:0;
}

/* ── MAIN ── */
#main-wrap{margin-left:0;display:flex;flex-direction:column;min-height:100vh;}
#main-content{flex:1;padding:24px;overflow-y:auto;max-width:1400px;width:100%;}

/* ── AUTH ── */
#auth-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(59,130,246,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(139,92,246,0.06) 0%, transparent 70%);
  transition:background .25s;
}
[data-theme="light"] #auth-screen{
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(29,95,216,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(124,58,237,0.05) 0%, transparent 70%);
}
.auth-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:36px 32px;width:100%;max-width:420px;
  box-shadow:var(--shadow-lg);transition:background .25s,border-color .25s;
}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:28px;}
.auth-brand-icon{
  width:42px;height:42px;border-radius:11px;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  display:flex;align-items:center;justify-content:center;
}
.auth-brand-icon svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.auth-brand-name{font-size:18px;font-weight:800;letter-spacing:-.4px;}
.auth-brand-sub{font-size:11px;color:var(--text3);}
.auth-heading{font-size:22px;font-weight:800;color:var(--text);margin-bottom:4px;letter-spacing:-.4px;}
.auth-sub{font-size:13px;color:var(--text2);margin-bottom:24px;}
.auth-alert{font-size:13px;margin-bottom:14px;border-radius:8px;padding:10px 14px;display:none;}
.auth-alert.error{background:rgba(239,68,68,0.1);color:var(--red);border:1px solid rgba(239,68,68,0.25);}
.auth-alert.success{background:rgba(16,185,129,0.1);color:var(--green);border:1px solid rgba(16,185,129,0.25);}
[data-theme="light"] .auth-alert.error{background:rgba(220,38,38,0.07);}
[data-theme="light"] .auth-alert.success{background:rgba(5,150,105,0.07);}
.form-group{margin-bottom:14px;}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px;letter-spacing:.2px;}
.form-input{
  width:100%;background:var(--surface2);border:1px solid var(--border2);
  border-radius:9px;padding:10px 13px;color:var(--text);font-size:14px;
  transition:border-color .15s,box-shadow .15s,background .25s,color .25s;
}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
select.form-input{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238fa3c1' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;
}
[data-theme="light"] select.form-input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233a5272' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.btn-primary{
  width:100%;background:linear-gradient(135deg,var(--accent),var(--purple));
  color:#fff;border:none;border-radius:10px;padding:12px;font-size:14px;font-weight:700;
  letter-spacing:.2px;transition:opacity .15s,transform .1s,box-shadow .15s;margin-top:4px;
}
.btn-primary:hover{opacity:.92;box-shadow:0 4px 16px rgba(59,130,246,0.35);}
.btn-primary:active{transform:scale(.99);}
[data-theme="light"] .btn-primary:hover{box-shadow:0 4px 16px rgba(29,95,216,0.3);}
.btn-link{background:none;border:none;color:var(--accent2);font-size:13px;text-decoration:none;font-weight:600;}
.btn-link:hover{text-decoration:underline;}
.auth-links{display:flex;justify-content:space-between;margin-top:14px;}
.demo-box{
  margin-top:16px;background:var(--surface2);border:1px solid var(--border);
  border-radius:9px;padding:12px 14px;font-size:12px;color:var(--text3);text-align:center;line-height:1.9;
  transition:background .25s,border-color .25s;
}
.demo-id{color:var(--accent2);font-weight:700;font-family:'JetBrains Mono',monospace;}
.info-box{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:10px 13px;font-size:13px;color:var(--text2);margin-bottom:14px;line-height:1.6;
  transition:background .25s,border-color .25s;
}
.success-id-box{
  background:var(--surface2);border:2px dashed var(--accent);
  border-radius:12px;padding:20px 16px;margin-bottom:16px;text-align:center;
}
.generated-id{font-size:24px;font-weight:800;color:var(--accent2);letter-spacing:2px;font-family:'JetBrains Mono',monospace;}
.warn-box{
  background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.25);
  border-radius:9px;padding:11px 14px;font-size:12px;color:var(--amber);margin-bottom:16px;line-height:1.8;
}
[data-theme="light"] .warn-box{background:rgba(217,119,6,0.07);border-color:rgba(217,119,6,0.2);}
.copy-btn{
  background:var(--surface2);border:1px solid var(--accent);
  color:var(--accent2);border-radius:8px;padding:9px 20px;font-size:13px;font-weight:600;margin-bottom:14px;
  transition:all .15s;
}
.copy-btn:hover{background:var(--accent-glow);}
.copy-btn.copied{color:var(--green);border-color:var(--green);background:rgba(16,185,129,0.08);}

/* ── STAT CARDS ── */
.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px;}
.stat-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px 18px;
  display:flex;flex-direction:column;gap:8px;cursor:pointer;
  transition:border-color .2s,box-shadow .2s,transform .15s,background .25s;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.stat-icon-wrap{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.stat-value{font-size:30px;font-weight:800;line-height:1;letter-spacing:-.5px;}
.stat-label{font-size:12px;color:var(--text3);font-weight:500;}
.stat-change{font-size:11px;font-weight:600;margin-top:2px;}

/* ── PANELS ── */
.grid-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;}
.panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px 22px;
  transition:background .25s,border-color .25s;
}
.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.panel-title{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-.1px;}
.panel-meta{font-size:11px;color:var(--text3);}

/* ── COURSE DROPDOWN ON DASHBOARD ── */
.course-filter-select{
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:8px;padding:6px 28px 6px 10px;color:var(--text);
  font-size:12px;font-weight:600;cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238fa3c1' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
  transition:border-color .15s,background .25s;
}
.course-filter-select:focus{border-color:var(--accent);outline:none;}
[data-theme="light"] .course-filter-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%233a5272' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ── STAT DETAIL MODAL LIST ── */
.stat-detail-row{
  display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--border);transition:border-color .25s;
}
.stat-detail-row:last-child{border-bottom:none;}

/* ── COURSE CARDS ── */
.grid-courses{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
.course-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:22px 18px;cursor:pointer;transition:all .18s;
  display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;
}
.course-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border2);}
.course-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--c-color,var(--accent));
}
.course-card-icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.course-card-name{font-size:18px;font-weight:800;letter-spacing:-.3px;}
.course-card-meta{font-size:12px;color:var(--text3);}
.course-card-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;
}
.course-card-actions{
  display:flex;gap:6px;margin-top:4px;opacity:0;transition:opacity .15s;
}
.course-card:hover .course-card-actions{opacity:1;}
.cc-edit-btn{
  font-size:11px;font-weight:600;padding:4px 10px;border-radius:7px;
  border:1px solid var(--border2);color:var(--text2);background:var(--surface2);
  cursor:pointer;transition:all .15s;
}
.cc-edit-btn:hover{border-color:var(--accent);color:var(--accent2);}

/* ── STUDENT ROWS ── */
.student-row{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 18px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px;
  transition:border-color .15s,box-shadow .15s,background .25s;
}
.student-row:hover{border-color:var(--border2);box-shadow:var(--shadow);}

/* ── AVATAR ── */
.avatar{
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;flex-shrink:0;letter-spacing:.5px;
}

/* ── BADGES ── */
.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;letter-spacing:.2px;}
.badge-present{background:rgba(16,185,129,0.12);color:var(--green);}
.badge-absent{background:rgba(239,68,68,0.1);color:var(--red);}
.badge-late{background:rgba(245,158,11,0.1);color:var(--amber);}
[data-theme="light"] .badge-present{background:rgba(5,150,105,0.1);}
[data-theme="light"] .badge-absent{background:rgba(220,38,38,0.08);}
[data-theme="light"] .badge-late{background:rgba(217,119,6,0.08);}

/* ── NOTIFICATION ── */
#notif{
  position:fixed;top:20px;right:20px;z-index:2000;
  padding:13px 20px;border-radius:12px;font-size:13px;font-weight:600;
  box-shadow:0 8px 32px rgba(0,0,0,0.25);max-width:320px;
  display:none;align-items:center;gap:10px;
}
#notif.show{display:flex;animation:slideIn .25s ease;}
@keyframes slideIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:none;}}
#notif.success{background:var(--green);color:#fff;}
#notif.error{background:var(--red);color:#fff;}
#notif.warn{background:var(--amber);color:#fff;}

/* ── MODAL ── */
#modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);
  z-index:1000;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(4px);
}
#modal-overlay.show{display:flex;}
.modal-box{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:20px;width:100%;max-width:500px;max-height:90vh;
  overflow-y:auto;box-shadow:0 25px 60px rgba(0,0,0,0.5);
  transition:background .25s,border-color .25s;
}
[data-theme="light"] .modal-box{box-shadow:0 16px 48px rgba(13,27,48,0.2);}
.modal-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 24px;border-bottom:1px solid var(--border);
  background:var(--surface);border-radius:20px 20px 0 0;
  position:sticky;top:0;z-index:1;transition:background .25s,border-color .25s;
}
.modal-title{font-size:16px;font-weight:700;color:var(--text);}
.modal-close{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface2);color:var(--text3);display:flex;align-items:center;justify-content:center;
  font-size:14px;cursor:pointer;transition:all .15s;
}
.modal-close:hover{border-color:var(--red);color:var(--red);}
.modal-body{padding:24px;}

/* ── BUTTONS ── */
.btn-sm{
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  padding:6px 12px;font-size:12px;cursor:pointer;color:var(--text2);
  transition:all .15s;font-weight:500;
}
.btn-sm:hover{border-color:var(--border2);color:var(--text);}
.btn-edit{color:var(--accent2);}
.btn-edit:hover{border-color:var(--accent);background:var(--accent-glow);}
.btn-delete{color:var(--red);}
.btn-delete:hover{border-color:var(--red);background:rgba(239,68,68,0.08);}
.btn-view{color:var(--text2);}
.btn-add{
  background:linear-gradient(135deg,var(--accent),var(--purple));
  color:#fff;border:none;border-radius:9px;padding:9px 18px;
  font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s,box-shadow .15s;
}
.btn-add:hover{opacity:.9;box-shadow:0 3px 12px rgba(59,130,246,0.3);}
.btn-back{
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text2);border-radius:8px;padding:8px 14px;font-size:13px;
  font-weight:500;cursor:pointer;transition:all .15s;
}
.btn-back:hover{border-color:var(--border2);color:var(--text);}
.btn-save{
  width:100%;background:linear-gradient(135deg,var(--accent),var(--purple));
  color:#fff;border:none;border-radius:10px;padding:12px;font-size:14px;font-weight:700;
  cursor:pointer;transition:opacity .15s,box-shadow .15s;
}
.btn-save:hover{opacity:.9;box-shadow:0 4px 14px rgba(59,130,246,0.3);}

/* ── ATTENDANCE BUTTONS ── */
.att-btn{
  border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;
  border:1px solid;cursor:pointer;transition:all .15s;
}
.att-present{border-color:rgba(16,185,129,0.3);color:var(--green);background:rgba(16,185,129,0.08);}
.att-present:hover{background:rgba(16,185,129,0.16);border-color:var(--green);}
.att-late{border-color:rgba(245,158,11,0.3);color:var(--amber);background:rgba(245,158,11,0.08);}
.att-late:hover{background:rgba(245,158,11,0.16);border-color:var(--amber);}
.att-absent{border-color:rgba(239,68,68,0.3);color:var(--red);background:rgba(239,68,68,0.08);}
.att-absent:hover{background:rgba(239,68,68,0.16);border-color:var(--red);}
.att-reset{
  border:1px solid var(--border);color:var(--text3);border-radius:7px;
  padding:4px 10px;font-size:11px;background:var(--surface2);cursor:pointer;transition:all .15s;
}
.att-reset:hover{color:var(--text);border-color:var(--border2);}

/* ── TOGGLES ── */
.toggle-group{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:10px;padding:3px;display:flex;gap:2px;
  transition:background .25s,border-color .25s;
}
.tgl-btn{
  background:none;border:none;color:var(--text3);border-radius:7px;
  padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;
}
.tgl-btn.active{
  background:var(--surface);color:var(--text);
  box-shadow:0 1px 6px rgba(0,0,0,0.15);
}
[data-theme="light"] .tgl-btn.active{
  background:#fff;box-shadow:0 1px 8px rgba(13,27,48,0.12);color:var(--accent);
}
.tgl-btn:hover:not(.active){color:var(--text2);}

/* ── PROGRESS ── */
.progress-track{background:var(--surface3);border-radius:4px;height:5px;overflow:hidden;transition:background .25s;}
.progress-fill{height:100%;border-radius:4px;transition:width .6s ease;}
.progress-track-lg{background:var(--surface3);border-radius:6px;height:8px;overflow:hidden;transition:background .25s;}
.progress-fill-lg{height:100%;border-radius:6px;transition:width .6s ease;}

/* ── ATT ROW ── */
.att-row{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:13px 18px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px;
  transition:border-color .15s,background .25s;
}

/* ── REPORT ROWS ── */
.report-row{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:13px 18px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px;
  transition:background .25s,border-color .25s;
}
.pct-row{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:10px;
  transition:background .25s,border-color .25s;
}

/* ── PROFILE ── */
.profile-hero{
  background:linear-gradient(135deg,var(--accent-glow),rgba(139,92,246,0.08));
  border:1px solid rgba(59,130,246,0.2);border-radius:var(--radius-lg);
  padding:24px;margin-bottom:20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  transition:background .25s,border-color .25s;
}
[data-theme="light"] .profile-hero{
  background:linear-gradient(135deg,rgba(29,95,216,0.06),rgba(124,58,237,0.04));
  border-color:rgba(29,95,216,0.15);
}
.profile-icon{
  width:60px;height:60px;border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;
}
.profile-row{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 18px;
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px;align-items:center;
  transition:background .25s,border-color .25s;
}
.profile-label{font-size:12px;color:var(--text3);width:160px;flex-shrink:0;font-weight:500;}
.profile-val{font-size:13px;font-weight:600;}

/* ── QR PANEL ── */
.qr-tabs{display:flex;margin-bottom:16px;border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .25s;}
.qr-tab{
  flex:1;padding:10px 14px;text-align:center;font-size:13px;font-weight:600;
  color:var(--text3);background:var(--surface2);border:none;cursor:pointer;transition:all .15s;
}
.qr-tab.active{background:var(--surface);color:var(--accent2);}
[data-theme="light"] .qr-tab.active{color:var(--accent);background:#fff;}
.qr-panel-content{display:none;}
.qr-panel-content.active{display:block;}
.upload-zone{
  border:2px dashed var(--border2);border-radius:12px;padding:32px 20px;
  text-align:center;color:var(--text3);cursor:pointer;transition:all .15s;
}
.upload-zone:hover{border-color:var(--accent);color:var(--accent2);background:var(--accent-glow);}
.camera-box{
  background:var(--surface2);border:1px solid var(--border);border-radius:12px;
  overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  color:var(--text3);font-size:13px;
}
#qr-video{width:100%;height:100%;object-fit:cover;display:none;}
.camera-placeholder{text-align:center;padding:20px;}

/* ── COURSE COLOR SWATCH ── */
.course-color-swatch{
  width:28px;height:28px;border-radius:7px;cursor:pointer;border:2px solid transparent;
  transition:transform .15s,border-color .15s;
}
.course-color-swatch:hover,.course-color-swatch.sel{transform:scale(1.18);border-color:var(--text);}

/* ── LAYOUT UTILS ── */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px;}
.page-heading{font-size:20px;font-weight:800;letter-spacing:-.4px;}
.page-sub{font-size:12px;color:var(--text3);margin-top:2px;}

/* ── LIGHT MODE EXTRA POLISH ── */
[data-theme="light"] .stat-card{box-shadow:0 1px 8px rgba(13,27,48,0.06);}
[data-theme="light"] .panel{box-shadow:0 1px 8px rgba(13,27,48,0.06);}
[data-theme="light"] .student-row:hover{box-shadow:0 2px 14px rgba(13,27,48,0.09);}
[data-theme="light"] #topbar{box-shadow:0 1px 0 var(--border);}
[data-theme="light"] #sidebar{box-shadow:1px 0 0 var(--border);}
[data-theme="light"] .form-input{background:#f9fbfd;}
[data-theme="light"] .form-input:focus{background:#fff;}

/* ── RESPONSIVE ── */
@media(min-width:768px){
  #sidebar{left:0;}
  #main-wrap{margin-left:var(--sidebar-w);}
  #menu-btn{display:none !important;}
}
@media(max-width:767px){
  #menu-btn{display:flex !important;}
  #main-content{padding:16px;}
  .grid-stats{grid-template-columns:repeat(2,1fr);}
}