/* ============================================================
   Champion Scholars LMS — Main Stylesheet
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue: #2563eb; --blue-light: #dbeafe; --blue-dark: #1d4ed8;
  --purple: #7c3aed; --purple-light: #ede9fe;
  --green: #059669; --green-light: #d1fae5;
  --orange: #d97706; --orange-light: #fef3c7;
  --red: #dc2626; --red-light: #fee2e2;
  --teal: #0891b2; --teal-light: #cffafe;
  --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0;
  --gray-400: #94a3b8; --gray-600: #475569; --gray-800: #1e293b;
  --white: #ffffff;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.15);
  --radius: 12px; --radius-lg: 20px; --radius-sm: 8px;
  --font: 'Inter', sans-serif;
  --teacher-color: #2563eb;
  --student-color: #7c3aed;
}

body { font-family: var(--font); background: var(--gray-50); color: var(--gray-800); line-height: 1.6; }

/* ===== PAGES ===== */
.page { display: none; min-height: 100vh; }
.page.active { display: block; }
.fullscreen-page.active { display: flex; flex-direction: column; }
.dashboard-page.active { display: flex; }

/* ===== NAV BAR ===== */
.nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2.5rem; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); }
.nav-brand { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; font-weight: 800; color: var(--blue); }
.nav-brand i { font-size: 1.5rem; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-links a { text-decoration: none; color: var(--gray-600); font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: var(--blue); }

/* ===== HERO ===== */
.hero { display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding: 5rem 2.5rem 4rem; max-width: 1400px; margin: 0 auto; }
.hero-content { flex: 1; max-width: 560px; }
.hero-badge { display: inline-flex; align-items: center; gap: .4rem; background: var(--blue-light); color: var(--blue); padding: .35rem .9rem; border-radius: 100px; font-size: .8rem; font-weight: 600; margin-bottom: 1.2rem; }
.hero-badge i { font-size: .7rem; }
.hero h1 { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.2rem; color: var(--gray-800); }
.gradient-text { background: linear-gradient(135deg, var(--blue), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sub { font-size: 1.1rem; color: var(--gray-600); margin-bottom: 2rem; line-height: 1.7; }
.hero-btns { display: flex; gap: 1rem; margin-bottom: 2.5rem; }
.hero-stats { display: flex; align-items: center; gap: 1.5rem; }
.stat strong { display: block; font-size: 1.5rem; font-weight: 800; color: var(--gray-800); }
.stat span { font-size: .85rem; color: var(--gray-600); }
.stat-divider { width: 1px; height: 40px; background: var(--gray-200); }

/* Hero Visual */
.hero-visual { flex: 1; position: relative; max-width: 540px; }
.hero-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.2rem; border: 1px solid var(--gray-200); }
.card-main { width: 100%; }
.card-header { display: flex; gap: .4rem; margin-bottom: .8rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #ef4444; } .dot.yellow { background: #f59e0b; } .dot.green { background: #10b981; }
.class-preview { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.teacher-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,var(--blue),var(--purple)); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.1rem; }
.class-info strong { display: block; font-size: .9rem; }
.class-info span { font-size: .75rem; color: var(--gray-600); }
.live-badge { margin-left: auto; display: flex; align-items: center; gap: .3rem; background: #ef4444; color: white; padding: .2rem .6rem; border-radius: 100px; font-size: .7rem; font-weight: 700; }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
.whiteboard-preview { background: #f8fafc; border-radius: 8px; padding: .5rem; margin-bottom: .8rem; border: 1px solid var(--gray-200); }
.whiteboard-preview svg { width: 100%; }
.student-row { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--gray-600); }
.student-avatar { width: 24px; height: 24px; border-radius: 50%; border: 2px solid white; margin-left: -6px; }
.student-avatar:first-child { margin-left: 0; }
.av1{background:linear-gradient(135deg,#2563eb,#7c3aed)} .av2{background:linear-gradient(135deg,#059669,#0891b2)} .av3{background:linear-gradient(135deg,#d97706,#dc2626)} .av4{background:linear-gradient(135deg,#7c3aed,#ec4899)} .av5{background:linear-gradient(135deg,#0891b2,#059669)}
.card-quiz { position: absolute; bottom: -1rem; left: -1.5rem; width: 220px; display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; }
.card-quiz i { font-size: 1.4rem; color: var(--blue); }
.card-quiz strong { font-size: .85rem; }
.card-quiz small { color: var(--gray-600); font-size: .75rem; }
.quiz-progress { width: 100%; height: 5px; background: var(--gray-200); border-radius: 10px; margin-top: .4rem; }
.qp-bar { height: 100%; border-radius: 10px; background: linear-gradient(90deg,var(--blue),var(--purple)); }
.card-grade { position: absolute; top: 1rem; right: -1.5rem; width: 150px; display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; }
.grade-circle { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg,var(--green),#10b981); color: white; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; flex-shrink: 0; }
.card-grade strong { font-size: .9rem; }
.card-grade small { color: var(--gray-600); font-size: .75rem; }

/* ===== FEATURES ===== */
.features-section { padding: 4rem 2.5rem; max-width: 1400px; margin: 0 auto; text-align: center; }
.features-section h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: 3rem; }
.features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.feature-card { background: var(--white); border-radius: var(--radius); padding: 1.8rem; border: 1px solid var(--gray-200); text-align: left; transition: transform .2s, box-shadow .2s; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature-icon { width: 48px; height: 48px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 1rem; }
.feature-icon.blue { background: var(--blue-light); color: var(--blue); }
.feature-icon.purple { background: var(--purple-light); color: var(--purple); }
.feature-icon.green { background: var(--green-light); color: var(--green); }
.feature-icon.orange { background: var(--orange-light); color: var(--orange); }
.feature-icon.red { background: var(--red-light); color: var(--red); }
.feature-icon.teal { background: var(--teal-light); color: var(--teal); }
.feature-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.feature-card p { color: var(--gray-600); font-size: .9rem; }

/* ===== FOOTER ===== */
.footer { text-align: center; padding: 2rem; background: var(--gray-800); color: var(--gray-400); }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: .5rem; color: white; font-weight: 700; font-size: 1.1rem; margin-bottom: .5rem; }
.footer p { font-size: .85rem; }

/* ===== BUTTONS ===== */
.btn-primary { background: linear-gradient(135deg,var(--blue),var(--blue-dark)); color: white; border: none; padding: .75rem 1.5rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .95rem; cursor: pointer; transition: opacity .2s, transform .15s; display: inline-flex; align-items: center; gap: .5rem; }
.btn-primary:hover { opacity: .9; transform: translateY(-1px); }
.btn-primary.red { background: linear-gradient(135deg,#ef4444,#dc2626); }
.btn-outline { background: transparent; color: var(--blue); border: 2px solid var(--blue); padding: .7rem 1.4rem; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: .5rem; }
.btn-outline:hover { background: var(--blue-light); }
.btn-ghost { background: transparent; color: var(--gray-800); border: none; padding: .75rem 1.2rem; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; }
.btn-ghost:hover { background: var(--gray-100); }
.btn-sm { background: var(--blue); color: white; border: none; padding: .4rem .9rem; border-radius: 6px; font-size: .82rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.btn-sm.outline { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }
.btn-sm.red { background: var(--red); }
.btn-xs { background: var(--gray-100); color: var(--gray-800); border: none; padding: .3rem .7rem; border-radius: 6px; font-size: .78rem; font-weight: 600; cursor: pointer; }
.btn-xs:hover { background: var(--gray-200); }
.back-btn { background: var(--gray-100); border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gray-600); position: absolute; top: 1.5rem; left: 1.5rem; transition: background .2s; }
.back-btn:hover { background: var(--gray-200); }

/* ===== AUTH ===== */
.auth-container { max-width: 480px; margin: 4rem auto; background: var(--white); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); position: relative; }
.auth-logo { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem; font-weight: 700; color: var(--blue); margin-bottom: 1.5rem; }
.auth-logo.teacher-theme { color: var(--teacher-color); }
.auth-logo.student-theme { color: var(--student-color); }
.auth-logo i { font-size: 1.4rem; }
.auth-container h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: .3rem; }
.auth-sub { color: var(--gray-600); margin-bottom: 1.8rem; }
.auth-form .form-group { margin-bottom: 1.2rem; }
.auth-form label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .4rem; color: var(--gray-800); }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap i { position: absolute; left: .9rem; color: var(--gray-400); font-size: .9rem; }
.input-wrap input { width: 100%; padding: .75rem .9rem .75rem 2.4rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size: .95rem; transition: border-color .2s; }
.input-wrap input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
.form-check { display: flex; align-items: center; gap: .5rem; font-size: .85rem; margin-bottom: 1.2rem; }
.form-check input[type=checkbox] { width: 15px; height: 15px; }
.forgot { margin-left: auto; color: var(--blue); text-decoration: none; font-weight: 500; }
.btn-submit { width: 100%; padding: .85rem; border: none; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem; transition: opacity .2s; }
.teacher-btn { background: linear-gradient(135deg,#1d4ed8,#2563eb); color: white; }
.student-btn { background: linear-gradient(135deg,#6d28d9,#7c3aed); color: white; }
.btn-submit:hover { opacity: .9; }
.demo-hint { text-align: center; margin-top: 1rem; font-size: .82rem; color: var(--gray-400); display: flex; align-items: center; justify-content: center; gap: .4rem; }
.auth-footer { text-align: center; margin-top: 1.5rem; font-size: .88rem; color: var(--gray-600); }
.auth-footer a { color: var(--blue); font-weight: 600; text-decoration: none; }

/* Role Cards */
.role-cards { display: flex; gap: 1rem; margin: 1.5rem 0; }
.role-card { flex: 1; border: 2px solid var(--gray-200); border-radius: var(--radius); padding: 1.5rem; cursor: pointer; transition: all .2s; position: relative; }
.role-card:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-2px); }
.teacher-role:hover { border-color: var(--teacher-color); }
.student-role:hover { border-color: var(--student-color); }
.role-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; }
.teacher-role .role-icon { background: var(--blue-light); color: var(--blue); }
.student-role .role-icon { background: var(--purple-light); color: var(--purple); }
.role-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.role-card p { font-size: .82rem; color: var(--gray-600); }
.role-arrow { position: absolute; bottom: 1rem; right: 1rem; color: var(--gray-400); }
.teacher-role:hover .role-arrow { color: var(--teacher-color); }
.student-role:hover .role-arrow { color: var(--student-color); }

/* ===== SIDEBAR ===== */
.sidebar { width: 250px; min-height: 100vh; background: var(--white); border-right: 1px solid var(--gray-200); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar-logo { display: flex; align-items: center; gap: .6rem; padding: 1.5rem 1.2rem; font-weight: 800; font-size: 1rem; color: var(--blue); border-bottom: 1px solid var(--gray-100); }
.sidebar-logo i { font-size: 1.3rem; }
.sidebar-nav { flex: 1; padding: 1rem .75rem; display: flex; flex-direction: column; gap: .2rem; }
.nav-item { display: flex; align-items: center; gap: .75rem; padding: .65rem .9rem; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; font-size: .9rem; color: var(--gray-600); transition: all .15s; text-decoration: none; border: none; background: none; width: 100%; text-align: left; }
.nav-item:hover { background: var(--gray-100); color: var(--gray-800); }
.nav-item.active { background: var(--blue-light); color: var(--blue); font-weight: 600; }
.teacher-sidebar .nav-item.active { background: var(--blue-light); color: var(--blue); }
.student-sidebar .nav-item.active { background: var(--purple-light); color: var(--purple); }
.nav-item i { width: 18px; text-align: center; font-size: .9rem; }
.sidebar-footer { padding: 1rem; border-top: 1px solid var(--gray-200); display: flex; align-items: center; gap: .6rem; }
.user-info { flex: 1; display: flex; align-items: center; gap: .6rem; }
.user-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: .9rem; }
.teacher-avatar-sm { background: linear-gradient(135deg,var(--blue),var(--blue-dark)); }
.student-avatar-sm { background: linear-gradient(135deg,var(--purple),#6d28d9); }
.user-info strong { display: block; font-size: .85rem; font-weight: 700; }
.user-info small { color: var(--gray-600); font-size: .75rem; }
.logout-btn { background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: 1rem; padding: .4rem; border-radius: 6px; }
.logout-btn:hover { background: var(--gray-100); color: var(--red); }

/* ===== MAIN CONTENT ===== */
.main-content { flex: 1; overflow-y: auto; padding: 2rem; max-height: 100vh; }
.t-section, .s-section { display: none; }
.t-section.active, .s-section.active { display: block; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.8rem; }
.page-header h1 { font-size: 1.7rem; font-weight: 800; }
.page-header p { color: var(--gray-600); font-size: .9rem; margin-top: .2rem; }

/* ===== STATS ROW ===== */
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-bottom: 1.8rem; }
.stat-card { background: var(--white); border-radius: var(--radius); padding: 1.2rem; display: flex; align-items: center; gap: 1rem; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); }
.stat-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.stat-card.blue .stat-icon { background: var(--blue-light); color: var(--blue); }
.stat-card.green .stat-icon { background: var(--green-light); color: var(--green); }
.stat-card.purple .stat-icon { background: var(--purple-light); color: var(--purple); }
.stat-card.orange .stat-icon { background: var(--orange-light); color: var(--orange); }
.stat-card strong { display: block; font-size: 1.6rem; font-weight: 800; }
.stat-card span { font-size: .8rem; color: var(--gray-600); }

/* ===== DASHBOARD GRID ===== */
.dashboard-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem; }
.dash-card { background: var(--white); border-radius: var(--radius); padding: 1.4rem; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); }
.dash-card.wide { grid-column: span 2; }
.dash-card h3 { font-size: .95rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.dash-card h3 i { color: var(--blue); }

/* Schedule */
.schedule-list { display: flex; flex-direction: column; gap: .7rem; }
.schedule-item { display: flex; align-items: center; gap: .8rem; padding: .6rem; border-radius: 8px; background: var(--gray-50); }
.schedule-item.live { background: #fff0f0; }
.sch-time { font-size: .8rem; font-weight: 700; color: var(--gray-600); min-width: 55px; }
.sch-info strong { display: block; font-size: .88rem; }
.sch-info span { font-size: .78rem; color: var(--gray-600); }
.sch-badge { display: flex; align-items: center; gap: .3rem; }
.live-badge-sm { background: #ef4444; color: white; padding: .15rem .5rem; border-radius: 100px; font-size: .68rem; font-weight: 700; margin-left: auto; }

/* Activity */
.activity-list { display: flex; flex-direction: column; gap: .8rem; }
.activity-item { display: flex; align-items: flex-start; gap: .8rem; }
.act-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; }
.act-icon.blue{background:var(--blue-light);color:var(--blue)} .act-icon.green{background:var(--green-light);color:var(--green)} .act-icon.purple{background:var(--purple-light);color:var(--purple)} .act-icon.orange{background:var(--orange-light);color:var(--orange)}
.activity-item p { font-size: .85rem; }
.activity-item small { color: var(--gray-400); font-size: .75rem; }

/* Students List */
.students-list { display: flex; flex-direction: column; gap: .7rem; }
.student-item { display: flex; align-items: center; gap: .8rem; }
.rank { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; background: var(--gray-200); flex-shrink: 0; }
.rank.gold { background: #fef3c7; color: #d97706; }
.rank.silver { background: #f1f5f9; color: #64748b; }
.rank.bronze { background: #fef3c7; color: #92400e; }
.stu-info { flex: 1; }
.stu-info strong { display: block; font-size: .85rem; }
.stu-info small { color: var(--gray-600); font-size: .75rem; }
.score { font-weight: 700; font-size: .9rem; color: var(--green); }

/* Engagement */
.engagement-bars { display: flex; flex-direction: column; gap: .8rem; }
.eng-row { display: flex; align-items: center; gap: .8rem; font-size: .85rem; }
.eng-row span:first-child { min-width: 80px; }
.eng-bar { flex: 1; height: 8px; background: var(--gray-200); border-radius: 10px; overflow: hidden; }
.eng-fill { height: 100%; border-radius: 10px; }
.eng-fill.blue { background: var(--blue); }
.eng-fill.purple { background: var(--purple); }
.eng-fill.green { background: var(--green); }
.eng-fill.orange { background: var(--orange); }

/* ===== CLASSES GRID ===== */
.classes-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
.class-card { background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.class-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.class-color { height: 6px; }
.c1{background:linear-gradient(90deg,#2563eb,#7c3aed)} .c2{background:linear-gradient(90deg,#7c3aed,#ec4899)} .c3{background:linear-gradient(90deg,#059669,#0891b2)} .c4{background:linear-gradient(90deg,#d97706,#dc2626)}
.class-body { padding: 1.2rem; }
.class-body h3 { font-size: 1rem; font-weight: 700; margin-bottom: .2rem; }
.class-body p { font-size: .82rem; color: var(--gray-600); margin-bottom: .8rem; }
.class-meta { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.class-meta span { font-size: .78rem; color: var(--gray-600); display: flex; align-items: center; gap: .3rem; }
.class-actions { display: flex; gap: .5rem; }
.class-score { font-size: .85rem; color: var(--gray-600); margin-bottom: .8rem; }
.class-score strong { color: var(--green); }
.live-indicator { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; color: #ef4444; margin-bottom: .4rem; }
.add-class-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; border: 2px dashed var(--gray-300); background: var(--gray-50); color: var(--gray-600); min-height: 160px; }
.add-class-card i { font-size: 2rem; color: var(--gray-400); }
.add-class-card p { font-weight: 600; }

/* ===== FORM CARD ===== */
.form-card { background: var(--white); border-radius: var(--radius); padding: 2rem; border: 1px solid var(--gray-200); max-width: 700px; }
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .4rem; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: .7rem .9rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size: .9rem; font-family: var(--font); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--blue); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checkbox-group { display: flex; gap: .8rem; flex-wrap: wrap; }
.checkbox-group label { display: flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 500; }
.color-picker { display: flex; gap: .6rem; }
.cp-opt { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: transform .2s; }
.cp-opt.selected { border-color: var(--gray-800); transform: scale(1.2); }
.form-actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1.5rem; }

/* ===== QUIZZES ===== */
.quizzes-list { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.5rem; }
.quiz-item { background: var(--white); border-radius: var(--radius); padding: 1.1rem 1.3rem; border: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; }
.qi-left { display: flex; align-items: center; gap: 1rem; }
.qi-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.qi-icon.blue{background:var(--blue-light);color:var(--blue)} .qi-icon.purple{background:var(--purple-light);color:var(--purple)} .qi-icon.green{background:var(--green-light);color:var(--green)}
.qi-left strong { display: block; font-size: .9rem; font-weight: 700; }
.qi-left p { font-size: .8rem; color: var(--gray-600); }
.qi-right { display: flex; align-items: center; gap: 1rem; font-size: .82rem; color: var(--gray-600); }
.qi-badge { padding: .2rem .6rem; border-radius: 100px; font-size: .72rem; font-weight: 700; }
.qi-badge.active { background: var(--green-light); color: var(--green); }
.qi-badge.done { background: var(--blue-light); color: var(--blue); }
.qi-badge.pending { background: var(--orange-light); color: var(--orange); }

/* Quiz Creator */
.quiz-creator { background: var(--white); border-radius: var(--radius); padding: 1.8rem; border: 2px solid var(--blue); margin-top: 1rem; }
.quiz-creator h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.2rem; display: flex; align-items: center; gap: .5rem; color: var(--blue); }
.question-block { background: var(--gray-50); border-radius: var(--radius-sm); padding: 1.2rem; margin-bottom: 1rem; border: 1px solid var(--gray-200); }
.q-header { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.q-num { background: var(--blue); color: white; padding: .2rem .6rem; border-radius: 6px; font-size: .8rem; font-weight: 700; }
.q-type { border: 1px solid var(--gray-200); border-radius: 6px; padding: .3rem .6rem; font-size: .83rem; }
.btn-icon { background: none; border: none; color: var(--red); cursor: pointer; margin-left: auto; font-size: .9rem; padding: .3rem; }
.q-text { width: 100%; padding: .65rem .9rem; border: 1.5px solid var(--gray-200); border-radius: 8px; font-size: .9rem; margin-bottom: .8rem; }
.options-list { display: flex; flex-direction: column; gap: .5rem; }
.option-row { display: flex; align-items: center; gap: .6rem; }
.opt-input { flex: 1; padding: .5rem .8rem; border: 1.5px solid var(--gray-200); border-radius: 6px; font-size: .85rem; }
.btn-icon-sm { background: none; border: 1.5px solid var(--gray-300); color: var(--gray-400); cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; }
.btn-icon-sm.correct { border-color: var(--green); color: var(--green); background: var(--green-light); }
.quiz-creator-actions { display: flex; gap: 1rem; margin-top: 1.2rem; }
.full-input { width: 100%; padding: .65rem .9rem; border: 1.5px solid var(--gray-200); border-radius: 8px; font-size: .9rem; margin-bottom: .6rem; }

/* ===== STUDENTS TABLE ===== */
.search-input { padding: .55rem 1rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size: .88rem; width: 220px; }
.students-table { background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-200); overflow: hidden; }
.students-table table { width: 100%; border-collapse: collapse; }
.students-table th { background: var(--gray-50); padding: .8rem 1rem; text-align: left; font-size: .82rem; font-weight: 700; color: var(--gray-600); border-bottom: 1px solid var(--gray-200); }
.students-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--gray-100); font-size: .88rem; }
.stu-name { display: flex; align-items: center; gap: .7rem; }
.stu-av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.att-badge { padding: .2rem .6rem; border-radius: 100px; font-size: .75rem; font-weight: 700; }
.att-badge.high { background: var(--green-light); color: var(--green); }
.att-badge.med { background: var(--orange-light); color: var(--orange); }
.att-badge.low { background: var(--red-light); color: var(--red); }

/* ===== ANALYTICS ===== */
.analytics-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; }
.an-card { background: var(--white); border-radius: var(--radius); padding: 1.4rem; border: 1px solid var(--gray-200); }
.an-card.wide { grid-column: span 2; }
.an-card h3 { font-size: .95rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.chart-placeholder svg { width: 100%; }
.chart-legend { display: flex; gap: 1.5rem; margin-top: .5rem; font-size: .82rem; }
.avg-list { display: flex; flex-direction: column; gap: .9rem; }
.avg-row { display: flex; align-items: center; gap: .8rem; font-size: .85rem; }
.avg-row span { min-width: 90px; }
.avg-bar { flex: 1; height: 8px; background: var(--gray-200); border-radius: 10px; overflow: hidden; }
.avg-fill { height: 100%; background: var(--blue); border-radius: 10px; }
.avg-row strong { min-width: 35px; }

/* ===== RESOURCES ===== */
.resources-grid { display: flex; flex-direction: column; gap: .8rem; }
.res-card { background: var(--white); border-radius: var(--radius-sm); padding: 1rem 1.2rem; border: 1px solid var(--gray-200); display: flex; align-items: center; gap: 1rem; }
.res-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.res-icon.pdf { background: #fee2e2; color: #dc2626; }
.res-icon.ppt { background: #fef3c7; color: #d97706; }
.res-icon.vid { background: var(--purple-light); color: var(--purple); }
.res-info { flex: 1; }
.res-info strong { display: block; font-size: .9rem; }
.res-info small { color: var(--gray-600); font-size: .78rem; }

/* ===== LIVE CLASS ===== */
.live-class-layout { display: flex; height: 100vh; background: #0f172a; }
.live-left { flex: 1; display: flex; flex-direction: column; }
.live-header { display: flex; align-items: center; gap: 1rem; padding: .75rem 1.2rem; background: #1e293b; border-bottom: 1px solid #334155; flex-wrap: wrap; }
.live-title { display: flex; align-items: center; gap: .6rem; font-size: .95rem; font-weight: 700; color: white; }
.live-title .pulse-dot { background: #ef4444; }
.live-title strong { color: #ef4444; }
.teacher-tag { display: flex; align-items: center; gap: .4rem; background: #334155; padding: .2rem .7rem; border-radius: 100px; font-size: .78rem; color: #94a3b8; }
.live-actions { display: flex; gap: .5rem; margin-left: auto; flex-wrap: wrap; }
.live-btn { background: #334155; color: #e2e8f0; border: none; padding: .45rem .9rem; border-radius: 8px; font-size: .82rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: .4rem; transition: background .2s; }
.live-btn:hover { background: #475569; }
.live-btn.red { background: #dc2626; color: white; }
.live-btn.red:hover { background: #b91c1c; }
.live-timer { background: #334155; color: #94a3b8; padding: .3rem .7rem; border-radius: 8px; font-size: .82rem; font-family: monospace; }

/* Whiteboard */
.whiteboard-container { flex: 1; display: flex; flex-direction: column; position: relative; background: #0f172a; }
.wb-toolbar { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; background: #1e293b; border-bottom: 1px solid #334155; flex-wrap: wrap; }
.tool-group { display: flex; align-items: center; gap: .3rem; padding-right: .6rem; border-right: 1px solid #334155; }
.tool-group:last-child { border-right: none; }
.wb-tool { background: #334155; color: #e2e8f0; border: none; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .82rem; transition: background .15s; }
.wb-tool:hover { background: #475569; }
.wb-tool.active { background: var(--blue); color: white; }
.color-label { font-size: .75rem; color: #94a3b8; }
#wb-color { width: 32px; height: 32px; border: none; border-radius: 6px; cursor: pointer; padding: 2px; background: none; }
#wb-size { width: 80px; accent-color: var(--blue); }
#size-display { font-size: .78rem; color: #94a3b8; min-width: 16px; }
#wb-bg { background: #334155; color: #e2e8f0; border: none; border-radius: 6px; padding: .3rem .5rem; font-size: .78rem; cursor: pointer; }
.whiteboard-canvas { flex: 1; display: block; cursor: crosshair; width: 100%; }
.student-wb .whiteboard-canvas { cursor: default; }
.student-toolbar { background: #1a2d1a; border-color: #2d4a2d; }
.student-toolbar span { color: #4ade80; font-size: .8rem; display: flex; align-items: center; gap: .5rem; }

/* Live Bottom Bar */
.live-bottom-bar { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1.2rem; background: #1e293b; border-top: 1px solid #334155; }
.bb-btn { background: #334155; color: #e2e8f0; border: none; padding: .4rem .8rem; border-radius: 8px; font-size: .82rem; cursor: pointer; display: flex; align-items: center; gap: .4rem; }
.bb-btn:hover { background: #475569; }
.bottom-left, .bottom-right { display: flex; gap: .5rem; }
.bottom-center { color: #94a3b8; font-size: .82rem; }
#student-count-live { color: #94a3b8; font-size: .82rem; display: flex; align-items: center; gap: .4rem; }
.s-timer-info { color: #94a3b8; font-size: .82rem; display: flex; align-items: center; gap: .4rem; }
.s-timer-info strong { color: #60a5fa; }

/* Right Panel */
.live-right { width: 300px; background: #1e293b; display: flex; flex-direction: column; border-left: 1px solid #334155; }
.tabs { display: flex; border-bottom: 1px solid #334155; }
.tab { flex: 1; background: none; border: none; padding: .8rem; color: #94a3b8; font-size: .85rem; cursor: pointer; font-weight: 600; position: relative; display: flex; align-items: center; justify-content: center; gap: .4rem; }
.tab.active { color: white; border-bottom: 2px solid var(--blue); }
.notif-badge { background: #ef4444; color: white; border-radius: 50%; width: 18px; height: 18px; font-size: .7rem; display: flex; align-items: center; justify-content: center; }
.tab-content { display: none; flex: 1; overflow-y: auto; }
.tab-content.active { display: flex; flex-direction: column; }

/* Participants */
.participant-list { padding: .8rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.participant { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 8px; background: #334155; }
.participant.teacher-p { background: #1e3a5f; }
.participant.self-p { background: #1e3a3f; }
.p-av { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: .8rem; flex-shrink: 0; }
.av-t { background: linear-gradient(135deg,var(--blue),var(--blue-dark)); }
.p-info { flex: 1; }
.p-info strong { display: block; font-size: .82rem; color: #e2e8f0; font-weight: 600; }
.p-info small { font-size: .72rem; color: #94a3b8; }
.p-icons { display: flex; gap: .4rem; font-size: .75rem; color: #94a3b8; }
.p-icons .muted { color: #ef4444; }
.p-icons.hand-raised { color: #f59e0b; }

/* Chat */
.chat-messages { flex: 1; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .7rem; }
.chat-msg { display: flex; gap: .5rem; align-items: flex-start; }
.cm-av { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: .7rem; flex-shrink: 0; }
.cm-bubble { background: #334155; border-radius: 8px; padding: .5rem .7rem; }
.cm-bubble.teacher-bubble { background: #1e3a5f; }
.cm-bubble strong { display: block; font-size: .72rem; color: #94a3b8; margin-bottom: .2rem; }
.cm-bubble p { font-size: .82rem; color: #e2e8f0; }
.chat-input-row { display: flex; gap: .4rem; padding: .8rem; border-top: 1px solid #334155; }
.chat-input-row input { flex: 1; background: #334155; border: 1px solid #475569; color: white; padding: .5rem .8rem; border-radius: 8px; font-size: .85rem; }
.chat-input-row input::placeholder { color: #64748b; }
.chat-input-row button { background: var(--blue); color: white; border: none; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; }

/* Quiz Notification */
.quiz-notification { background: linear-gradient(135deg,#1e3a5f,#1e2d52); border: 1px solid #3b82f6; border-radius: var(--radius-sm); padding: 1rem; margin: .8rem; }
.qn-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.qn-header i { color: #f59e0b; }
.qn-header strong { color: white; font-size: .9rem; }
.quiz-notification p { font-size: .82rem; color: #94a3b8; margin-bottom: .8rem; }
.qn-timer { font-size: .85rem; color: #60a5fa; margin-bottom: .8rem; display: flex; align-items: center; gap: .4rem; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: white; border-radius: var(--radius); width: 440px; overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--gray-200); }
.modal-header h3 { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.modal-header button { background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--gray-600); }
.modal-body { padding: 1.5rem; }
.poll-options { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--gray-200); display: flex; justify-content: flex-end; }

/* ===== TEST PAGE ===== */
.test-layout { min-height: 100vh; background: var(--gray-50); display: flex; flex-direction: column; }
.test-header { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-sm); }
.test-title { display: flex; align-items: center; gap: .8rem; }
.test-title i { font-size: 1.4rem; color: var(--blue); }
.test-title h2 { font-size: 1.2rem; font-weight: 800; }
.test-title p { font-size: .82rem; color: var(--gray-600); }
.test-meta-bar { display: flex; align-items: center; gap: 1.5rem; }
.test-timer { display: flex; align-items: center; gap: .4rem; background: var(--red-light); color: var(--red); padding: .4rem .9rem; border-radius: 100px; font-weight: 700; font-size: .9rem; }
.test-progress-info { font-size: .88rem; color: var(--gray-600); font-weight: 600; }
.test-body { flex: 1; max-width: 760px; margin: 0 auto; padding: 2rem; width: 100%; }
.test-progress-bar { height: 6px; background: var(--gray-200); border-radius: 10px; overflow: hidden; margin-bottom: 2rem; }
.tpb-fill { height: 100%; background: linear-gradient(90deg,var(--blue),var(--purple)); border-radius: 10px; transition: width .3s; }
.test-content { background: var(--white); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); border: 1px solid var(--gray-200); }
.question-area { margin-bottom: 2rem; }
.question-number { font-size: .82rem; font-weight: 700; color: var(--blue); margin-bottom: .5rem; }
.question-text { font-size: 1.15rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--gray-800); line-height: 1.5; }
.options-grid { display: flex; flex-direction: column; gap: .7rem; }
.option-btn { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; border: 2px solid var(--gray-200); border-radius: var(--radius-sm); cursor: pointer; background: var(--white); text-align: left; font-size: .95rem; font-weight: 500; transition: all .15s; width: 100%; }
.option-btn:hover { border-color: var(--blue); background: var(--blue-light); }
.option-btn.selected { border-color: var(--blue); background: var(--blue-light); color: var(--blue); }
.option-btn.correct { border-color: var(--green); background: var(--green-light); color: var(--green); }
.option-btn.wrong { border-color: var(--red); background: var(--red-light); color: var(--red); }
.option-letter { width: 30px; height: 30px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; flex-shrink: 0; }
.option-btn.selected .option-letter { background: var(--blue); color: white; }
.tf-grid { display: flex; gap: 1rem; }
.option-btn.tf { flex: 1; justify-content: center; font-size: 1rem; }
.question-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; }
.q-dots { display: flex; gap: .4rem; flex-wrap: wrap; }
.q-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-300); cursor: pointer; transition: background .15s; }
.q-dot.answered { background: var(--blue); }
.q-dot.current { background: var(--purple); transform: scale(1.3); }

/* ===== RESULTS ===== */
.results-layout { min-height: 100vh; background: var(--gray-50); }
.results-header { padding: 1.5rem 2rem; }
.results-content { max-width: 760px; margin: 0 auto; padding: 0 2rem 3rem; }
.results-score-card { background: linear-gradient(135deg,var(--blue),var(--purple)); border-radius: var(--radius-lg); padding: 2.5rem; text-align: center; color: white; margin-bottom: 2rem; }
.score-trophy { font-size: 3rem; margin-bottom: .8rem; }
.score-trophy .fa-trophy { color: #fbbf24; }
.results-score-card h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: .3rem; }
.result-score { font-size: 1.2rem; opacity: .9; margin-bottom: .5rem; }
.results-score-card p { opacity: .85; margin-bottom: 1.5rem; }
.result-stats { display: flex; justify-content: center; gap: 2rem; }
.rs-item strong { display: block; font-size: 1.5rem; font-weight: 800; }
.rs-item span { font-size: .8rem; opacity: .8; }
.results-review { background: var(--white); border-radius: var(--radius); padding: 1.5rem; border: 1px solid var(--gray-200); margin-bottom: 1.5rem; }
.results-review h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1.2rem; }
.review-item { padding: .9rem; border-radius: 8px; margin-bottom: .7rem; border: 1px solid var(--gray-200); }
.review-item.correct-ans { border-color: var(--green); background: #f0fdf4; }
.review-item.wrong-ans { border-color: var(--red); background: #fef2f2; }
.review-q { font-size: .88rem; font-weight: 600; margin-bottom: .4rem; }
.review-ans { font-size: .82rem; color: var(--gray-600); }
.review-ans span { font-weight: 700; }
.correct-ans .review-ans span { color: var(--green); }
.wrong-ans .review-ans span { color: var(--red); }
.results-actions { display: flex; gap: 1rem; justify-content: center; }

/* ===== STUDENT SPECIFIC ===== */
.header-right { display: flex; align-items: center; gap: 1rem; }
.streak-badge { background: linear-gradient(135deg,#f59e0b,#d97706); color: white; padding: .4rem .9rem; border-radius: 100px; font-size: .82rem; font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.live-now-card { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg,#eff6ff,#f0fdf4); border: 1px solid var(--blue-light); border-radius: var(--radius-sm); padding: 1rem 1.2rem; gap: 1rem; cursor: pointer; }
.ln-left { display: flex; align-items: center; gap: .8rem; }
.ln-pulse { width: 12px; height: 12px; border-radius: 50%; background: #ef4444; animation: pulse 1.4s infinite; flex-shrink: 0; }
.live-now-card h4 { font-size: .95rem; font-weight: 700; margin-bottom: .2rem; }
.live-now-card p { font-size: .8rem; color: var(--gray-600); }
.pending-tests { display: flex; flex-direction: column; gap: .7rem; }
.pt-item { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem .8rem; background: var(--gray-50); border-radius: 8px; }
.pt-item.urgent { background: #fff7ed; border: 1px solid #fed7aa; }
.pt-info strong { display: block; font-size: .85rem; font-weight: 700; }
.pt-info span { font-size: .75rem; color: var(--gray-600); }
.badges-grid { display: flex; flex-wrap: wrap; gap: .8rem; }
.badge-item { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .9rem; border-radius: var(--radius-sm); font-size: .75rem; font-weight: 700; text-align: center; min-width: 70px; }
.badge-item.gold { background: var(--orange-light); color: var(--orange); }
.badge-item.blue { background: var(--blue-light); color: var(--blue); }
.badge-item.purple { background: var(--purple-light); color: var(--purple); }
.badge-item.gray { background: var(--gray-100); color: var(--gray-400); }
.badge-item.locked { opacity: .6; }
.badge-item i { font-size: 1.2rem; }
.tests-tabs { display: flex; gap: .5rem; margin-bottom: 1.2rem; }
.tt-tab { background: var(--gray-100); border: none; padding: .5rem 1rem; border-radius: 100px; font-size: .85rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: .4rem; }
.tt-tab.active { background: var(--blue); color: white; }
.badge-count { background: rgba(255,255,255,.3); padding: .1rem .4rem; border-radius: 100px; font-size: .72rem; }
.tests-list { display: flex; flex-direction: column; gap: .8rem; }
.test-item { background: var(--white); border-radius: var(--radius); padding: 1.1rem 1.3rem; border: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.test-item.urgent { border-left: 4px solid var(--orange); }
.test-item.done { opacity: .85; }
.test-left { display: flex; align-items: flex-start; gap: 1rem; }
.test-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.test-icon.blue{background:var(--blue-light);color:var(--blue)} .test-icon.purple{background:var(--purple-light);color:var(--purple)} .test-icon.green{background:var(--green-light);color:var(--green)} .test-icon.orange{background:var(--orange-light);color:var(--orange)}
.test-left strong { display: block; font-size: .9rem; font-weight: 700; margin-bottom: .2rem; }
.test-left p { font-size: .8rem; color: var(--gray-600); margin-bottom: .2rem; }
.test-meta { font-size: .75rem; color: var(--gray-400); display: flex; align-items: center; gap: .3rem; }
.urgent-icon { color: var(--orange); }
.test-score { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.score-circle { width: 52px; height: 52px; border-radius: 50%; background: var(--blue-light); color: var(--blue); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; }
.score-circle.high { background: var(--green-light); color: var(--green); }
.test-score small { font-size: .72rem; color: var(--gray-600); }

/* Grades */
.grades-summary { margin-bottom: 1.5rem; }
.gpa-card { background: linear-gradient(135deg,var(--blue),var(--purple)); border-radius: var(--radius); padding: 1.5rem; color: white; display: flex; align-items: center; gap: 1.5rem; max-width: 300px; }
.gpa-circle { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800; }
.gpa-card strong { display: block; font-size: 1rem; font-weight: 700; }
.gpa-card p { font-size: .9rem; opacity: .85; }
.grades-table { background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-200); overflow: hidden; }
.grades-table table { width: 100%; border-collapse: collapse; }
.grades-table th { background: var(--gray-50); padding: .8rem 1.2rem; text-align: left; font-size: .82rem; font-weight: 700; color: var(--gray-600); border-bottom: 1px solid var(--gray-200); }
.grades-table td { padding: .9rem 1.2rem; border-bottom: 1px solid var(--gray-100); font-size: .88rem; }
.grade-badge { padding: .25rem .7rem; border-radius: 100px; font-size: .8rem; font-weight: 700; }
.grade-badge.a { background: var(--green-light); color: var(--green); }
.grade-badge.b { background: var(--blue-light); color: var(--blue); }

/* Schedule */
.week-schedule { display: grid; grid-template-columns: repeat(5,1fr); gap: .8rem; }
.day-col { display: flex; flex-direction: column; gap: .6rem; }
.day-hdr { text-align: center; font-size: .8rem; font-weight: 700; color: var(--gray-600); padding: .4rem; background: var(--gray-100); border-radius: 6px; }
.today-hdr { background: var(--blue); color: white; }
.today-hdr span { display: block; font-size: .7rem; opacity: .8; }
.day-class { padding: .6rem .8rem; border-radius: 8px; font-size: .8rem; font-weight: 600; color: white; text-align: center; }
.day-class.c1{background:linear-gradient(135deg,#2563eb,#7c3aed)} .day-class.c2{background:linear-gradient(135deg,#7c3aed,#ec4899)} .day-class.c3{background:linear-gradient(135deg,#059669,#0891b2)} .day-class.c4{background:linear-gradient(135deg,#d97706,#dc2626)}
.day-class small { display: block; font-size: .72rem; opacity: .9; font-weight: 400; }
.today-col .day-class { box-shadow: 0 4px 12px rgba(0,0,0,.2); }

/* Utilities */
.hidden { display: none !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 10px; }

/* Animations */
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.page.active { animation: fadeIn .25s ease; }