/* ========================================
   StudentFlow Pro — visual system
   Calm dark navy, soft violet, sky blue and mint.
   ======================================== */
* { box-sizing: border-box; }

:root {
  --bg: #0e1528;
  --bg-deep: #0a1020;
  --surface: rgba(25, 35, 62, 0.88);
  --surface-strong: #1a2645;
  --surface-muted: #263557;
  --surface-hover: #2d3e66;
  --text: #f7f9ff;
  --muted: #aeb9d2;
  --muted-2: #7f8eaf;
  --line: rgba(168, 183, 220, 0.13);

  --violet: #8b7cf6;
  --violet-soft: #c8c0ff;
  --sky: #72c7f7;
  --mint: #71dfb4;
  --amber: #f5c56b;
  --rose: #f68aa1;

  --shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
  --shadow-strong: 0 30px 80px rgba(0, 0, 0, 0.48);
  --radius-xl: 24px;
  --radius-lg: 19px;
  --radius-md: 14px;
}

body.light {
  --bg: #edf3fb;
  --bg-deep: #dbe5f3;
  --surface: rgba(255, 255, 255, 0.89);
  --surface-strong: #ffffff;
  --surface-muted: #eef3fb;
  --surface-hover: #e4ebf7;
  --text: #1d2942;
  --muted: #66738e;
  --muted-2: #8490a8;
  --line: rgba(46, 68, 111, 0.13);
  --shadow: 0 18px 45px rgba(73, 93, 130, 0.12);
  --shadow-strong: 0 30px 80px rgba(31, 47, 75, 0.26);
}

html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  font-family: "DM Sans", Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 90% -5%, rgba(139, 124, 246, 0.20), transparent 31rem),
    radial-gradient(circle at 2% 31%, rgba(114, 199, 247, 0.11), transparent 27rem),
    radial-gradient(circle at 70% 100%, rgba(113, 223, 180, 0.08), transparent 29rem),
    var(--bg);
  line-height: 1.5;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.3), transparent 70%);
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: "Plus Jakarta Sans", "DM Sans", sans-serif; letter-spacing: -0.04em; }
h1 { margin-bottom: 0; font-size: clamp(1.35rem, 2vw, 2rem); }
h2 { margin-bottom: 0; font-size: 1.16rem; }
h3 { font-size: .98rem; margin-bottom: 0; }
a { color: inherit; }

.hidden { display: none !important; }

/* Sidebar */
.app-shell { min-height: 100vh; display: flex; }
.sidebar {
  position: sticky; top: 0; align-self: flex-start;
  z-index: 30; width: 258px; min-height: 100vh;
  display: flex; flex-direction: column;
  padding: 28px 17px 20px;
  border-right: 1px solid var(--line);
  background: rgba(10, 16, 32, .66);
  backdrop-filter: blur(22px);
}
body.light .sidebar { background: rgba(255,255,255,.68); }

.brand { display: flex; align-items: center; gap: 11px; padding: 0 9px; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px;
  color: white; font: 800 .77rem "Plus Jakarta Sans", sans-serif; letter-spacing: .05em;
  background: linear-gradient(135deg, var(--violet), #657df0);
  box-shadow: 0 12px 25px rgba(117, 100, 239, .32);
}
.brand strong { display: block; font: 800 1.07rem "Plus Jakarta Sans", sans-serif; }
.brand small { display: block; color: var(--muted); margin-top: 1px; font-size: .68rem; }

.side-nav { display: grid; gap: 7px; margin-top: 47px; }
.nav-link {
  display: flex; align-items: center; gap: 13px; min-height: 45px;
  padding: 0 13px; border-radius: 13px; color: var(--muted); text-decoration: none;
  font-size: .9rem; font-weight: 700; transition: .22s ease;
}
.nav-link > span:first-child { width: 18px; font-size: 1.13rem; text-align: center; }
.nav-link:hover, .nav-link.active { color: var(--text); background: rgba(139, 124, 246, .13); }
.nav-link.active { box-shadow: inset 0 0 0 1px rgba(200, 192, 255, .15); }

.sidebar-card {
  margin-top: auto; padding: 16px; border: 1px solid rgba(200,192,255,.15); border-radius: 17px;
  background: linear-gradient(145deg, rgba(139,124,246,.15), rgba(114,199,247,.05));
}
.sidebar-card-icon { display: block; color: var(--violet-soft); font-size: 1.25rem; margin-bottom: 9px; }
.sidebar-card strong { display: block; font-size: .84rem; }
.sidebar-card p { margin: 7px 0 12px; color: var(--muted); font-size: .73rem; line-height: 1.55; }

.sidebar-user {
  display: flex; align-items: center; gap: 10px; padding: 18px 7px 0; margin-top: 2px;
  border-top: 1px solid var(--line);
}
.mini-avatar, .avatar, .avatar-upload-preview {
  display: grid; place-items: center; color: white; font-weight: 800;
  background: linear-gradient(135deg, #6e98f1, var(--violet));
}
.mini-avatar { width: 32px; height: 32px; border-radius: 10px; font-size: .67rem; }
.sidebar-user strong { display: block; font-size: .76rem; }
.sidebar-user small { display: block; margin-top: 1px; color: var(--muted); font-size: .66rem; }

/* Main base */
.main-content { width: calc(100% - 258px); padding: 32px clamp(18px, 4vw, 62px) 20px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 25px; }
.topbar-title, .topbar-actions { display: flex; align-items: center; gap: 12px; }
.eyebrow { margin-bottom: 6px; color: var(--violet-soft); text-transform: uppercase; font-size: .66rem; font-weight: 800; letter-spacing: .13em; }

.icon-btn, .small-btn, .text-button, .primary-btn, .secondary-btn {
  border: 0; transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; color: var(--text);
  border-radius: 12px; background: var(--surface-strong); border: 1px solid var(--line); font-size: 1.1rem;
}
.icon-btn:hover { transform: translateY(-2px); background: var(--surface-hover); }
.menu-btn { display: none; }
.primary-btn {
  min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 15px; color: white; border-radius: 12px; font-weight: 800; font-size: .84rem;
  background: linear-gradient(135deg, #8676f1, #5f91e8);
  box-shadow: 0 11px 22px rgba(100, 118, 235, .28);
}
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 27px rgba(100,118,235,.4); }
.secondary-btn {
  min-height: 40px; padding: 0 14px; color: var(--text); border-radius: 11px; font-weight: 800; font-size: .81rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12);
}
body.light .secondary-btn { background: var(--surface-muted); border-color: var(--line); }
.secondary-btn:hover { transform: translateY(-2px); background: rgba(200,192,255,.16); }
.text-link { color: var(--violet-soft); text-decoration: none; font-size: .84rem; font-weight: 800; }
.text-link:hover { color: var(--text); }
.text-link span { margin-left: 5px; }

.panel, .stat-card, .hero-banner {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

/* Hero */
.hero-banner {
  min-height: 210px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.25fr .75fr;
  gap: 20px; padding: clamp(25px, 4vw, 39px); margin-bottom: 20px; border-radius: var(--radius-xl);
  background:
    linear-gradient(112deg, rgba(39,53,96,.92), rgba(32,42,78,.75)),
    var(--surface);
}
body.light .hero-banner { background: linear-gradient(112deg, rgba(248,250,255,.96), rgba(235,241,253,.8)); }
.hero-banner::after {
  content:""; position:absolute; right:-50px; bottom:-125px; width:330px; height:330px;
  border-radius: 50%; background: radial-gradient(circle, rgba(139,124,246,.25), transparent 64%);
}
.hero-copy { position: relative; z-index: 2; max-width: 680px; }
.hero-copy h2 { max-width: 600px; margin-bottom: 12px; font-size: clamp(1.43rem, 3vw, 2.35rem); line-height: 1.22; }
.hero-copy h2 span { color: var(--violet-soft); }
.hero-copy > p:not(.eyebrow) { max-width: 560px; color: var(--muted); font-size: .92rem; }
.hero-buttons { display: flex; align-items: center; gap: 17px; margin-top: 20px; }
.hero-visual { position: relative; min-height: 170px; z-index: 2; }
.orbit { position: absolute; border: 1px solid rgba(200,192,255,.22); border-radius: 50%; }
.orbit-one { width: 180px; height: 180px; right: 34px; top: -12px; }
.orbit-two { width: 118px; height: 118px; right: 65px; top: 20px; border-color: rgba(114,199,247,.28); }
.glow-orb { position: absolute; width: 97px; height: 97px; right: 76px; top: 30px; border-radius: 50%; background: radial-gradient(circle at 32% 26%, #d5ceff, #8b7cf6 44%, #4a5fd1 76%); box-shadow: 0 0 50px rgba(139,124,246,.55); }
.visual-card { position: absolute; z-index: 3; display: grid; gap: 2px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; background: rgba(18,27,54,.72); box-shadow: 0 16px 25px rgba(0,0,0,.18); backdrop-filter: blur(9px); }
body.light .visual-card { background: rgba(255,255,255,.7); border-color: var(--line); }
.visual-card strong { font: 800 1.22rem "Plus Jakarta Sans", sans-serif; }
.visual-card small { color: var(--muted); font-size: .67rem; }
.visual-card-main { right: 0; bottom: 0; }
.visual-card-main .visual-icon { color: var(--mint); font-size: .9rem; }
.visual-card-small { left: 15px; top: 10px; }
.visual-card-small > span { color: var(--sky); }

/* Stats */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat-card { min-height: 112px; display: flex; align-items: center; gap: 13px; padding: 17px; border-radius: var(--radius-lg); transition: .2s ease; }
.stat-card:hover { transform: translateY(-3px); border-color: rgba(200,192,255,.3); box-shadow: 0 20px 42px rgba(5,10,24,.24); }
.stat-icon, .quick-icon { display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; }
.stat-icon { width: 42px; height: 42px; font-size: 1.17rem; }
.icon-purple, .purple-bg { color: var(--violet-soft); background: rgba(139,124,246,.16); }
.icon-mint, .mint-bg { color: var(--mint); background: rgba(113,223,180,.13); }
.icon-blue, .blue-bg { color: var(--sky); background: rgba(114,199,247,.14); }
.icon-amber, .amber-bg { color: var(--amber); background: rgba(245,197,107,.14); }
.stat-card p { margin-bottom: 4px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.stat-card h3 { margin-bottom: 4px; font-size: 1.5rem; }
.stat-card small { color: var(--muted-2); font-size: .68rem; }

/* Panels & charts */
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(290px,.75fr); gap: 20px; margin-bottom: 20px; }
.panel { border-radius: var(--radius-xl); padding: 21px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.panel-heading select, .table-tools select, .date-control input {
  min-height: 35px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; outline: 0;
  color: var(--text); background: var(--surface-muted); font-size: .75rem;
}
.panel-heading select:focus, .table-tools select:focus, .date-control input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139,124,246,.12); }

.bar-chart-wrap { height: 248px; display: flex; gap: 12px; margin-top: 22px; }
.scale-labels { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 19px; color: var(--muted-2); font-size: .63rem; }
.bar-chart {
  flex: 1; position: relative; display: flex; align-items: end; gap: clamp(8px,1.4vw,15px); min-width: 0;
  padding: 0 4px 18px; border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 24.4%, var(--line) 24.7%, transparent 25%);
}
.chart-empty { margin: auto; color: var(--muted); font-size: .82rem; }
.bar-item { flex: 1; min-width: 15px; max-width: 55px; height: 100%; display:flex; flex-direction:column; justify-content:end; align-items:center; gap:7px; }
.chart-bar { width:100%; min-height: 5px; border-radius: 11px 11px 4px 4px; background: linear-gradient(180deg, #c6bdff, #8274ef); box-shadow: 0 8px 17px rgba(130,116,239,.22); transition: height .35s ease, filter .2s ease; }
.chart-bar:hover { filter: brightness(1.14); }
.bar-label { max-width: 54px; color: var(--muted-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .62rem; }
.chart-caption { display:flex; justify-content:space-between; gap:12px; margin-top:12px; color: var(--muted); font-size:.74rem; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.purple-dot { background: var(--violet); } .mint-dot { background: var(--mint); } .rose-dot { background: var(--rose); } .gray-dot { background: var(--muted-2); }

.attendance-panel { display:flex; flex-direction:column; }
.text-button { padding: 7px 0; color: var(--violet-soft); background: transparent; font-weight: 800; font-size: .75rem; }
.text-button:hover { color: var(--text); }
.progress-ring {
  --progress: 0deg; position:relative; width:164px; aspect-ratio:1; display:grid; place-items:center; margin:27px auto 18px;
  border-radius:50%; background: conic-gradient(var(--mint) var(--progress), rgba(174,185,210,.14) 0);
  box-shadow: 0 0 42px rgba(113,223,180,.1);
}
.progress-ring::before { content:""; position:absolute; inset:13px; border-radius:inherit; background: var(--surface-strong); }
.ring-center { position:relative; z-index:1; text-align:center; }
.ring-center strong { display:block; font: 800 1.7rem "Plus Jakarta Sans", sans-serif; }
.ring-center span { color:var(--muted); font-size:.67rem; }
.attendance-mini-list { display:grid; gap:10px; padding-top:16px; border-top:1px solid var(--line); }
.attendance-mini-list div { display:flex; align-items:center; color:var(--muted); font-size:.8rem; }
.attendance-mini-list strong { margin-left:auto; color:var(--text); font-size:.85rem; }

/* Quick */
.quick-panel { margin-bottom: 20px; }
.pill { display:inline-flex; align-items:center; border-radius:999px; font-size:.66rem; font-weight:800; padding:6px 9px; white-space:nowrap; }
.soft-pill { color:var(--violet-soft); background:rgba(139,124,246,.11); border:1px solid rgba(200,192,255,.12); }
.quick-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:20px; }
.quick-action { display:flex; gap:10px; align-items:center; min-height:73px; padding:12px; text-align:left; color:var(--text); border:1px solid var(--line); border-radius:15px; background:var(--surface-muted); transition:.2s ease; }
.quick-action:hover { transform:translateY(-3px); background:var(--surface-hover); border-color:rgba(200,192,255,.28); }
.quick-icon { width:36px; height:36px; font-size:1.08rem; }
.quick-action strong, .quick-action small { display:block; }
.quick-action strong { font-size:.77rem; }
.quick-action small { margin-top:3px; color:var(--muted); font-size:.64rem; line-height:1.35; }

/* Directory */
.directory-panel { scroll-margin-top: 18px; }
.directory-heading { align-items:center; }
.table-tools { display:flex; flex-wrap:wrap; justify-content:end; gap:8px; }
.search-field { min-height:35px; display:flex; align-items:center; gap:6px; padding:0 10px; color:var(--muted); border:1px solid var(--line); border-radius:10px; background:var(--surface-muted); }
.search-field span { font-size:1.03rem; }
.search-field input { width:196px; border:0; outline:0; color:var(--text); background:transparent; font-size:.75rem; }
.search-field input::placeholder { color:var(--muted-2); }
.bulk-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:17px; padding:10px 12px; border-radius:12px; background:rgba(139,124,246,.13); border:1px solid rgba(200,192,255,.16); color:var(--violet-soft); font-size:.75rem; font-weight:800; }
.bulk-toolbar > div { display:flex; flex-wrap:wrap; gap:7px; }
.small-btn { min-height:31px; padding:0 10px; color:var(--text); border-radius:9px; background:var(--surface-muted); border:1px solid var(--line); font-size:.7rem; font-weight:800; }
.small-btn:hover { background:var(--surface-hover); }
.danger-btn { color:var(--rose); }
.danger-btn:hover { background:rgba(246,138,161,.11); }
.table-wrap { overflow-x:auto; margin:20px -5px 0; }
table { width:100%; min-width:885px; border-collapse:collapse; }
th { padding:0 10px 13px; color:var(--muted-2); text-align:left; text-transform:uppercase; letter-spacing:.09em; font-size:.61rem; font-weight:800; }
td { padding:14px 10px; border-top:1px solid var(--line); font-size:.79rem; vertical-align:middle; }
input[type="checkbox"] { accent-color: var(--violet); width:15px; height:15px; }
.student-cell { display:flex; align-items:center; gap:10px; min-width:170px; }
.student-cell-click { appearance:none; border:0; padding:0; color:inherit; text-align:left; background:transparent; cursor:pointer; }
.student-cell-click:hover strong { color:var(--violet-soft); }
.avatar { width:36px; height:36px; flex:0 0 36px; border-radius:11px; overflow:hidden; font-size:.68rem; }
.avatar img, .profile-avatar img, .avatar-upload-preview img { width:100%; height:100%; object-fit:cover; }
.student-cell strong { display:block; font-size:.8rem; }
.student-cell small { display:block; max-width:160px; margin-top:2px; overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; font-size:.65rem; }
.course-label { display:block; font-weight:700; }.year-label { display:block; margin-top:2px; color:var(--muted); font-size:.65rem; }
.score-value { color:var(--violet-soft); font-weight:800; }.score-sub { display:block; margin-top:2px; color:var(--muted-2); font-size:.62rem; }
.status-pill { display:inline-flex; align-items:center; justify-content:center; min-width:66px; padding:5px 8px; border-radius:99px; font-size:.64rem; font-weight:800; }
.status-pill.present, .status-pill.good { color:var(--mint); background:rgba(113,223,180,.12); }
.status-pill.absent, .status-pill.risk { color:var(--rose); background:rgba(246,138,161,.12); }
.status-pill.unmarked, .status-pill.neutral { color:var(--muted); background:rgba(174,185,210,.11); }
.status-pill.medium { color:var(--amber); background:rgba(245,197,107,.13); }
.action-set { display:flex; gap:6px; }
.row-action { width:29px; height:29px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--surface-muted); }
.row-action:hover { color:var(--text); background:var(--surface-hover); }.row-action.delete:hover { color:var(--rose); background:rgba(246,138,161,.12); }
.empty-state { padding:50px 20px; text-align:center; }.empty-state > span { display:block; color:var(--violet-soft); font-size:2.6rem; }.empty-state h3 { margin:8px 0 6px; }.empty-state p { color:var(--muted); margin-bottom:15px; font-size:.82rem; }
.pagination { display:flex; justify-content:flex-end; align-items:center; gap:7px; padding:17px 0 2px; }.pagination span { margin-right:auto; color:var(--muted); font-size:.7rem; }.page-btn { width:31px; height:31px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--surface-muted); font-size:.72rem; font-weight:800; }.page-btn:hover,.page-btn.active{color:white;background:var(--violet);border-color:var(--violet);}.page-btn:disabled{opacity:.4;cursor:not-allowed;}

/* Attendance */
.two-column-section { display:grid; grid-template-columns:1.25fr .75fr; gap:20px; margin-top:20px; }
.attendance-manager { scroll-margin-top:18px; }.date-control { display:grid; gap:4px; color:var(--muted); font-size:.63rem; font-weight:800; }.date-control input { min-height:35px; }
.attendance-actions { display:flex; flex-wrap:wrap; gap:8px; margin:17px 0 12px; }
.attendance-register { max-height:370px; overflow:auto; padding-right:3px; }
.register-row { display:flex; align-items:center; gap:11px; padding:10px 3px; border-top:1px solid var(--line); }
.register-row:first-child { border-top:0; }.register-row .avatar { width:33px; height:33px; flex-basis:33px; border-radius:10px; }.register-info { min-width:0; flex:1; }.register-info strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.76rem; }.register-info small { display:block; margin-top:2px; color:var(--muted); font-size:.63rem; }
.register-actions { display:flex; gap:6px; }.register-status { min-width:65px; }
.line-chart-box { height:212px; margin-top:18px; }.line-chart-box svg { width:100%; height:100%; overflow:visible; }.trend-labels { display:flex; justify-content:space-between; gap:5px; color:var(--muted-2); font-size:.61rem; }.trend-note { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:.73rem; }

/* Analytics */
.analytics-section { margin-top:28px; scroll-margin-top:18px; }.section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }.section-heading h2 { font-size:1.32rem; }
.analytics-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.distribution-list { display:grid; gap:15px; margin-top:19px; }.distribution-item-top { display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; color:var(--muted); font-size:.74rem; }.distribution-item-top strong { color:var(--text); font-size:.75rem; }.distribution-bar { height:8px; overflow:hidden; border-radius:99px; background:var(--surface-muted); }.distribution-bar > i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--violet),var(--sky)); }.distribution-item:nth-child(2) .distribution-bar > i { background:linear-gradient(90deg,var(--sky),var(--mint)); }.distribution-item:nth-child(3) .distribution-bar > i { background:linear-gradient(90deg,var(--mint),var(--amber)); }.distribution-item:nth-child(4) .distribution-bar > i { background:linear-gradient(90deg,var(--amber),var(--rose)); }
.leader-list { display:grid; gap:11px; margin-top:17px; }.leader-row { display:flex; align-items:center; gap:10px; }.rank { width:22px; color:var(--violet-soft); text-align:center; font-weight:800; font-size:.72rem; }.leader-row .avatar { width:32px; height:32px; flex-basis:32px; border-radius:10px; }.leader-copy { flex:1; min-width:0; }.leader-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.75rem; }.leader-copy small { display:block; color:var(--muted); font-size:.63rem; }.leader-score { color:var(--violet-soft); font-weight:800; font-size:.75rem; }
.insights-panel { margin-top:20px; }.insight-list { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }.insight { display:flex; gap:10px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface-muted); }.insight-icon { width:31px; height:31px; display:grid; place-items:center; flex:0 0 31px; border-radius:10px; font-size:.86rem; }.insight strong { display:block; margin-bottom:3px; font-size:.73rem; }.insight p { margin:0; color:var(--muted); font-size:.67rem; line-height:1.5; }

/* Modal & drawer */
.modal-backdrop, .app-backdrop { position:fixed; inset:0; z-index:40; background:rgba(4,9,20,.62); backdrop-filter:blur(4px); }.app-backdrop { z-index:29; display:none; }
.modal { position:fixed; z-index:41; top:50%; left:50%; width:min(720px, calc(100% - 28px)); max-height:calc(100vh - 28px); overflow:auto; transform:translate(-50%,-50%); padding:23px; border:1px solid var(--line); border-radius:23px; background:var(--surface-strong); box-shadow:var(--shadow-strong); }
.modal-header, .drawer-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.close-modal { font-size:1.45rem; }
.profile-upload-area { display:flex; align-items:center; gap:13px; padding:13px; margin:19px 0 15px; border:1px dashed rgba(200,192,255,.25); border-radius:14px; background:rgba(139,124,246,.06); }.avatar-upload-preview { width:52px; height:52px; overflow:hidden; border-radius:15px; font-size:.8rem; }.profile-upload-area strong { display:block; font-size:.78rem; }.profile-upload-area p { margin:3px 0 7px; color:var(--muted); font-size:.67rem; }.upload-label { display:inline-flex; padding:6px 8px; border-radius:8px; color:var(--violet-soft); background:rgba(139,124,246,.13); cursor:pointer; font-size:.66rem; font-weight:800; }.upload-label:hover { color:var(--text); }.profile-upload-area .text-button { margin-left:7px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.form-grid label,.notes-field { display:grid; gap:6px; color:var(--muted); font-size:.68rem; font-weight:800; }.form-grid input,.form-grid select,.notes-field textarea { width:100%; padding:10px 11px; border:1px solid var(--line); outline:0; border-radius:10px; color:var(--text); background:var(--surface-muted); font-size:.78rem; }.form-grid input:focus,.form-grid select:focus,.notes-field textarea:focus { border-color:var(--violet); box-shadow:0 0 0 3px rgba(139,124,246,.12); }.notes-field { margin-top:15px; }.notes-field textarea { resize:vertical; }
.subject-section { margin-top:19px; }.subheading { display:flex; justify-content:space-between; gap:15px; align-items:center; }.subheading h3 { font-size:.86rem; }.subheading p { margin:3px 0 0; color:var(--muted); font-size:.67rem; }.subject-rows { display:grid; gap:8px; margin-top:10px; }.subject-row { display:grid; grid-template-columns:1fr 112px 31px; gap:8px; }.subject-row input { min-width:0; padding:9px 10px; border:1px solid var(--line); outline:0; border-radius:9px; color:var(--text); background:var(--surface-muted); font-size:.74rem; }.subject-row input:focus { border-color:var(--violet); }.remove-subject { width:31px; height:31px; border:1px solid var(--line); color:var(--rose); border-radius:9px; background:var(--surface-muted); }.modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:21px; }
.profile-drawer { position:fixed; z-index:42; top:0; right:0; width:min(440px,100%); height:100vh; overflow:auto; padding:22px; border-left:1px solid var(--line); background:var(--surface-strong); box-shadow:-22px 0 70px rgba(0,0,0,.32); }.drawer-header { align-items:center; }.drawer-header .icon-btn { font-size:1.35rem; }.profile-hero { display:flex; align-items:center; gap:13px; margin:21px 0; }.profile-avatar { width:70px; height:70px; display:grid; place-items:center; overflow:hidden; border-radius:20px; color:white; font-weight:800; font-size:1.1rem; background:linear-gradient(135deg,#6e98f1,var(--violet)); }.profile-hero h2 { margin-bottom:3px; font-size:1.28rem; }.profile-hero p { margin:0; color:var(--muted); font-size:.75rem; }.profile-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.profile-stat { padding:11px 8px; text-align:center; border-radius:12px; background:var(--surface-muted); }.profile-stat strong { display:block; font-size:.95rem; }.profile-stat small { display:block; margin-top:3px; color:var(--muted); font-size:.61rem; }.profile-section { margin-top:21px; }.profile-section h3 { margin-bottom:10px; font-size:.87rem; }.subject-progress { display:grid; gap:10px; }.subject-progress-top { display:flex; justify-content:space-between; color:var(--muted); font-size:.71rem; }.subject-progress-top strong { color:var(--text); }.small-progress { height:6px; overflow:hidden; border-radius:99px; background:var(--surface-muted); }.small-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--violet),var(--sky)); }.history-list { display:grid; gap:8px; }.history-row { display:flex; justify-content:space-between; align-items:center; padding:9px 10px; border-radius:10px; background:var(--surface-muted); color:var(--muted); font-size:.71rem; }.profile-note { padding:12px; border-radius:12px; color:var(--muted); background:var(--surface-muted); font-size:.74rem; white-space:pre-wrap; }.profile-contact { display:grid; gap:8px; color:var(--muted); font-size:.75rem; }.profile-contact span { color:var(--text); }

.toast { position:fixed; right:20px; bottom:20px; z-index:60; max-width:min(320px,calc(100% - 40px)); padding:12px 14px; border:1px solid rgba(200,192,255,.18); border-radius:13px; color:var(--text); background:var(--surface-strong); box-shadow:var(--shadow-strong); font-size:.78rem; font-weight:800; transform:translateY(80px); opacity:0; transition:.28s ease; }.toast.show { transform:translateY(0); opacity:1; }
.footer { padding:29px 0 5px; color:var(--muted-2); text-align:center; font-size:.68rem; }.footer span { color:var(--violet-soft); font-weight:800; }

/* Responsive */
@media (max-width: 1200px) {
  .quick-actions { grid-template-columns:repeat(2,1fr); }
  .analytics-grid { grid-template-columns:repeat(2,1fr); }
  .leaders-panel { grid-column:span 2; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 970px) {
  .sidebar { position:fixed; transform:translateX(-105%); transition:transform .25s ease; box-shadow:18px 0 50px rgba(0,0,0,.3); }
  .sidebar.open { transform:translateX(0); }.app-backdrop.show { display:block; }
  .main-content { width:100%; padding:23px 18px 20px; }.menu-btn { display:grid; }
  .dashboard-grid,.two-column-section { grid-template-columns:1fr; }.hero-banner { grid-template-columns:1fr; }.hero-visual { display:none; }
  .attendance-panel { min-height:340px; }.directory-heading { align-items:flex-start; flex-direction:column; }.table-tools { justify-content:flex-start; }
  .insight-list { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .topbar { align-items:flex-start; }.topbar-actions .icon-btn { display:none; }.topbar-actions .primary-btn { padding:0 11px; font-size:.75rem; }
  .stat-grid,.quick-actions,.analytics-grid { grid-template-columns:1fr; }.leaders-panel { grid-column:auto; }
  .hero-banner { padding:24px; }.hero-copy h2 { font-size:1.47rem; }.hero-buttons { flex-wrap:wrap; }
  .search-field { width:100%; }.search-field input { width:100%; }.table-tools { width:100%; }.table-tools select { flex:1; min-width:112px; }
  .bulk-toolbar { align-items:flex-start; flex-direction:column; }.pagination { flex-wrap:wrap; }
  .form-grid { grid-template-columns:1fr; }.subject-row { grid-template-columns:1fr 82px 31px; }.modal { padding:18px; }
}


/* ===================================================
   StudentFlow Pro+ — premium visual and UX upgrades
   =================================================== */
:root {
  --cyan: #38bdf8;
  --mint-bright: #66e3b4;
  --warning: #fbbf5c;
  --danger-bright: #fb7185;
}
body { background:
  radial-gradient(circle at 85% 10%, rgba(112, 92, 255, 0.17), transparent 28%),
  radial-gradient(circle at 30% 90%, rgba(56, 189, 248, 0.08), transparent 25%),
  var(--bg);
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }

.nav-link { position: relative; }
.nav-button { width: 100%; text-align: left; font-family: inherit; }
.nav-icon { width: 18px !important; }
.nav-badge { min-width: 20px; height: 20px; margin-left: auto; display: grid; place-items: center; color: var(--violet-soft); border-radius: 7px; background: rgba(139,124,246,.14); font-size: .62rem; }
.mint-badge { color: var(--mint); background: rgba(113,223,180,.12); }
.rose-badge { color: var(--rose); background: rgba(246,138,161,.12); }
.nav-link.active::before { content:""; position:absolute; left:-17px; width:3px; height:23px; border-radius: 0 5px 5px 0; background: linear-gradient(var(--violet),var(--cyan)); box-shadow: 0 0 12px rgba(139,124,246,.85); }
.collapse-sidebar-btn { display:flex; align-items:center; gap:9px; width:calc(100% - 4px); min-height:37px; margin:13px 2px 0; padding:0 11px; color:var(--muted); border:1px solid var(--line); border-radius:10px; background:var(--surface-muted); font-weight:800; font-size:.69rem; }
.collapse-sidebar-btn:hover { color:var(--text); background:var(--surface-hover); }
#sidebar.collapsed { width:82px; padding-left:13px; padding-right:13px; }
#sidebar.collapsed .brand > div, #sidebar.collapsed .nav-text, #sidebar.collapsed .nav-badge, #sidebar.collapsed .sidebar-card, #sidebar.collapsed .sidebar-user > div:not(.mini-avatar), #sidebar.collapsed .collapse-sidebar-btn .nav-text { display:none; }
#sidebar.collapsed .brand { padding:0 7px; }
#sidebar.collapsed .side-nav { margin-top:38px; }
#sidebar.collapsed .nav-link, #sidebar.collapsed .collapse-sidebar-btn { justify-content:center; padding-left:0; padding-right:0; }
#sidebar.collapsed .nav-link.active::before { left:-13px; }
#sidebar.collapsed + .main-content { width:calc(100% - 82px); }

.top-search-wrap { width:min(330px, 28vw); min-height:40px; display:flex; align-items:center; gap:8px; padding:0 10px; color:var(--muted); border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 9px 20px rgba(0,0,0,.08); }
.top-search-wrap span { font-size:1.04rem; }
.top-search-wrap input { width:100%; min-width:0; border:0; outline:0; color:var(--text); background:transparent; font-size:.74rem; }
.top-search-wrap input::placeholder { color:var(--muted-2); }
.top-search-wrap kbd, .command-search-line kbd { padding:2px 5px; color:var(--muted-2); border:1px solid var(--line); border-radius:5px; background:var(--surface-muted); white-space:nowrap; font-size:.6rem; font-family:inherit; }
.notification-btn { position:relative; }
.notification-btn i { position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; display:grid; place-items:center; color:white; border:2px solid var(--bg); border-radius:99px; background:var(--rose); font-style:normal; font-size:.55rem; }
.profile-chip { display:flex; align-items:center; gap:7px; min-height:40px; padding:4px 9px 4px 5px; color:var(--text); border:1px solid var(--line); border-radius:12px; background:var(--surface); font-family:inherit; }
.profile-chip:hover { background:var(--surface-hover); }
.profile-chip-copy { display:grid; text-align:left; }
.profile-chip-copy strong { font-size:.69rem; }.profile-chip-copy small { color:var(--muted); font-size:.59rem; }

.hero-banner { grid-template-columns:1.12fr .88fr; min-height:270px; }
.hero-workspace { position:relative; z-index:2; display:grid; grid-template-columns:1.13fr .87fr; grid-template-rows:1fr auto; gap:10px; align-items:stretch; }
.hero-schedule-card,.hero-progress-card,.hero-reminder-card { border:1px solid rgba(200,192,255,.16); border-radius:15px; background:rgba(17,27,55,.48); backdrop-filter:blur(9px); }
body.light .hero-schedule-card,body.light .hero-progress-card,body.light .hero-reminder-card { background:rgba(255,255,255,.68); border-color:var(--line); }
.hero-schedule-card { padding:12px; grid-row:span 2; }
.hero-card-heading { display:flex; align-items:center; justify-content:space-between; gap:9px; color:var(--muted); font-size:.66rem; font-weight:800; }
.sky-dot { background:var(--cyan); }.schedule-list { display:grid; gap:12px; margin-top:13px; }
.schedule-list > div { display:flex; gap:9px; align-items:flex-start; }
.schedule-list b { width:33px; color:var(--cyan); font-size:.62rem; line-height:1.4; }
.schedule-list strong,.schedule-list small { display:block; }.schedule-list strong { font-size:.67rem; }.schedule-list small { margin-top:2px; color:var(--muted); font-size:.59rem; }
.hero-progress-card { display:flex; align-items:center; gap:9px; padding:10px; }.hero-progress-card strong { display:block; font-size:.68rem; }.hero-progress-card small { display:block; margin-top:3px; color:var(--muted); font-size:.59rem; }
.hero-progress-ring { --hero-progress:0deg; width:70px; aspect-ratio:1; flex:0 0 70px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--cyan) var(--hero-progress), rgba(200,192,255,.13) 0); }
.hero-progress-ring::before { content:""; position:absolute; width:54px; height:54px; border-radius:50%; background:var(--surface-strong); }.hero-progress-ring { position:relative; }.hero-progress-ring span { position:relative; z-index:1; display:grid; text-align:center; }.hero-progress-ring strong { font-size:.8rem; }.hero-progress-ring small { color:var(--muted); font-size:.46rem; }
.hero-reminder-card { display:flex; align-items:center; gap:9px; padding:10px; }.reminder-icon { width:31px; height:31px; display:grid; place-items:center; color:var(--warning); border-radius:10px; background:rgba(245,197,107,.13); }.hero-reminder-card strong { display:block; font-size:.64rem; }.hero-reminder-card small { display:block; margin-top:2px; color:var(--muted); font-size:.57rem; }
.hero-cyan { border-color:rgba(56,189,248,.23); color:var(--cyan); }.hero-mint { border-color:rgba(102,227,180,.23); color:var(--mint-bright); }
.hero-export-link { border:0; background:transparent; cursor:pointer; font-family:inherit; }

.chart-heading { align-items:center; }.chart-controls { display:flex; align-items:center; gap:8px; }.chart-range { display:flex; padding:3px; border:1px solid var(--line); border-radius:9px; background:var(--surface-muted); }.chart-range button { padding:5px 7px; color:var(--muted); border:0; border-radius:6px; background:transparent; font-size:.61rem; font-weight:800; }.chart-range button.active { color:white; background:var(--violet); box-shadow:0 4px 9px rgba(139,124,246,.25); }
.course-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }.course-chip { padding:5px 8px; color:var(--muted); border:1px solid var(--line); border-radius:99px; background:var(--surface-muted); font-size:.64rem; font-weight:800; }.course-chip:hover,.course-chip.active { color:var(--violet-soft); border-color:rgba(200,192,255,.28); background:rgba(139,124,246,.13); }
.chart-bar { animation:chartRise .48s cubic-bezier(.2,.8,.2,1) both; transform-origin:bottom; } @keyframes chartRise { from { transform:scaleY(.04); opacity:.2; } to { transform:scaleY(1); opacity:1; } }

.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }.at-risk-list,.activity-timeline { display:grid; gap:10px; margin-top:17px; }
.at-risk-row { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:13px; background:var(--surface-muted); }.at-risk-row .avatar { width:34px; height:34px; flex-basis:34px; border-radius:10px; }.at-risk-copy { min-width:0; flex:1; }.at-risk-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.73rem; }.at-risk-copy small { display:block; margin-top:2px; color:var(--muted); font-size:.62rem; }.at-risk-actions { display:flex; gap:6px; }.at-risk-empty { padding:23px 6px; color:var(--mint); text-align:center; font-size:.75rem; }
.activity-item { display:flex; gap:10px; align-items:flex-start; }.activity-icon { width:29px; height:29px; display:grid; place-items:center; flex:0 0 29px; color:var(--violet-soft); border-radius:10px; background:rgba(139,124,246,.13); font-size:.76rem; }.activity-item:nth-child(2n) .activity-icon { color:var(--cyan); background:rgba(56,189,248,.12); }.activity-copy { min-width:0; flex:1; padding-bottom:10px; border-bottom:1px solid var(--line); }.activity-copy strong { display:block; font-size:.7rem; }.activity-copy p { margin:2px 0 0; color:var(--muted); font-size:.62rem; }.activity-copy small { display:block; margin-top:4px; color:var(--muted-2); font-size:.58rem; }

.settings-panel { margin-top:20px; }.settings-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }.setting-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:70px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface-muted); }.setting-row strong,.setting-row small { display:block; }.setting-row strong { font-size:.72rem; }.setting-row small { margin-top:3px; color:var(--muted); font-size:.61rem; line-height:1.4; }.setting-row input { appearance:none; width:32px; height:18px; flex:0 0 32px; border-radius:99px; background:var(--muted-2); cursor:pointer; position:relative; }.setting-row input::before { content:""; position:absolute; width:12px; height:12px; top:3px; left:3px; border-radius:50%; background:white; transition:.2s ease; }.setting-row input:checked { background:var(--violet); }.setting-row input:checked::before { transform:translateX(14px); }.setting-button { width:100%; text-align:left; font-family:inherit; cursor:pointer; }.setting-button:hover { background:rgba(246,138,161,.08); }.setting-danger { color:var(--rose); font-size:.68rem; font-weight:800; }

.command-backdrop { position:fixed; inset:0; z-index:70; background:rgba(5,9,20,.65); backdrop-filter:blur(5px); }.command-palette { position:fixed; z-index:71; top:16vh; left:50%; width:min(650px,calc(100% - 26px)); overflow:hidden; transform:translateX(-50%); border:1px solid rgba(200,192,255,.22); border-radius:18px; background:var(--surface-strong); box-shadow:var(--shadow-strong); }.command-search-line { display:flex; align-items:center; gap:10px; padding:14px; border-bottom:1px solid var(--line); color:var(--violet-soft); }.command-search-line input { width:100%; border:0; outline:0; color:var(--text); background:transparent; font-size:.9rem; }.command-hint { display:flex; justify-content:space-between; padding:9px 14px; color:var(--muted-2); font-size:.61rem; }.command-results { max-height:390px; overflow:auto; padding:5px 8px 10px; }.command-result { width:100%; display:flex; align-items:center; gap:10px; padding:10px; color:var(--text); border:0; border-radius:11px; background:transparent; text-align:left; }.command-result:hover { background:var(--surface-muted); }.command-result strong,.command-result small { display:block; }.command-result strong { font-size:.74rem; }.command-result small { margin-top:2px; color:var(--muted); font-size:.61rem; }.command-result .avatar { width:33px; height:33px; flex-basis:33px; border-radius:10px; }.command-empty { padding:25px 10px; color:var(--muted); text-align:center; font-size:.75rem; }

.popover { position:fixed; z-index:65; top:79px; right:122px; width:min(330px,calc(100% - 30px)); padding:11px; border:1px solid var(--line); border-radius:16px; background:var(--surface-strong); box-shadow:var(--shadow-strong); }.profile-popover { right:70px; width:235px; }.popover-heading,.profile-popover-head { display:flex; align-items:center; justify-content:space-between; gap:9px; padding:6px 5px 11px; border-bottom:1px solid var(--line); }.popover-heading strong { font-size:.78rem; }.profile-popover-head { justify-content:flex-start; }.profile-popover-head strong,.profile-popover-head small { display:block; }.profile-popover-head strong { font-size:.71rem; }.profile-popover-head small { color:var(--muted); font-size:.61rem; }.notification-list { display:grid; gap:4px; padding-top:6px; }.notification-item { display:flex; gap:8px; padding:9px 5px; border-radius:9px; }.notification-item:hover { background:var(--surface-muted); }.notification-item .activity-icon { width:25px; height:25px; flex-basis:25px; font-size:.67rem; }.notification-item strong { display:block; font-size:.68rem; }.notification-item small { display:block; margin-top:2px; color:var(--muted); font-size:.59rem; }.popover-action { width:100%; padding:10px 6px; color:var(--muted); border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left; font-weight:700; font-size:.71rem; }.popover-action:last-child { border:0; }.popover-action:hover { color:var(--text); }

.quick-marks-modal { width:min(500px,calc(100% - 28px)); }.marks-helper { margin:12px 0 0; color:var(--muted); font-size:.68rem; }.help-modal { width:min(650px,calc(100% - 28px)); }.help-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:19px; }.help-grid article { padding:13px; border:1px solid var(--line); border-radius:13px; background:var(--surface-muted); }.help-grid span { width:max-content; display:block; padding:4px 6px; margin-bottom:8px; color:var(--violet-soft); border-radius:7px; background:rgba(139,124,246,.13); font-size:.65rem; font-weight:800; }.help-grid strong { display:block; font-size:.74rem; }.help-grid p { margin:4px 0 0; color:var(--muted); font-size:.64rem; line-height:1.5; }

.mobile-bottom-nav { display:none; }

@media(max-width:1170px) {
  .top-search-wrap { width:230px; }.profile-chip-copy { display:none; }.profile-chip { padding:4px; }
  .hero-banner { grid-template-columns:1fr; }.hero-workspace { grid-template-columns:1fr 1fr; }.hero-schedule-card { grid-row:auto; }
  .settings-grid { grid-template-columns:1fr; }
}
@media(max-width:970px) {
  #sidebar.collapsed + .main-content { width:100%; }
  .top-search-wrap { display:none; }.feature-grid { grid-template-columns:1fr; }.settings-panel { margin-bottom:72px; }
}
@media(max-width:640px) {
  .profile-chip,.notification-btn { display:none; }.hero-workspace { grid-template-columns:1fr; }.hero-schedule-card { grid-row:auto; }.hero-buttons { gap:9px; }.hero-buttons .secondary-btn { min-height:36px; padding:0 10px; font-size:.7rem; }.chart-heading { align-items:flex-start; flex-direction:column; }.chart-controls { width:100%; justify-content:space-between; }.chart-controls select { flex:1; }.chart-range { flex:1; justify-content:space-between; }.feature-grid { margin-bottom:18px; }.at-risk-actions .small-btn { padding:0 7px; }.help-grid { grid-template-columns:1fr; }
  .mobile-bottom-nav { position:fixed; z-index:55; bottom:0; left:0; right:0; display:flex; justify-content:space-around; padding:7px 6px env(safe-area-inset-bottom); border-top:1px solid var(--line); background:rgba(15,21,40,.88); backdrop-filter:blur(16px); }.mobile-bottom-nav a { display:grid; place-items:center; gap:2px; min-width:58px; color:var(--muted); text-decoration:none; font-size:1rem; }.mobile-bottom-nav small { font-size:.54rem; font-weight:700; }.mobile-bottom-nav a:active,.mobile-bottom-nav a:hover { color:var(--violet-soft); }
  body.light .mobile-bottom-nav { background:rgba(255,255,255,.88); }
}