*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-primary: #4F46E5;--color-primary-hover: #4338CA;--color-success: #10B981;--color-warning: #F59E0B;--color-danger: #EF4444;--color-bg: #F8FAFC;--color-surface: #FFFFFF;--color-text: #1E293B;--color-muted: #64748B;--radius: 8px;--shadow: 0 1px 3px rgba(0,0,0,.12);--font-size-base: 16px;--font-size-label: 14px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:var(--font-size-base);background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh}.btn-primary{background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius);padding:12px 24px;font-size:var(--font-size-base);cursor:pointer;width:100%;transition:background .15s}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:transparent;color:var(--color-primary);border:1.5px solid var(--color-primary);border-radius:var(--radius);padding:10px 20px;cursor:pointer}.annotation{position:relative;cursor:pointer}.annotation-grammar{border-bottom:2px solid var(--color-danger)}.annotation-lexical{border-bottom:2px solid var(--color-warning)}.annotation-cohesion{border-bottom:2px dashed var(--color-primary)}.annotation-task{background:#f59e0b26}.annotation-tooltip{display:none;position:absolute;bottom:100%;left:0;z-index:100;background:#1e293b;color:#fff;padding:8px 12px;border-radius:var(--radius);min-width:240px;font-size:13px}.annotation:hover .annotation-tooltip{display:flex;flex-direction:column;gap:4px}.annotated-text{font-size:15px;line-height:1.8;padding:16px;background:var(--color-surface);border-radius:var(--radius)}.score-card{background:var(--color-surface);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.score-overall{font-size:48px;font-weight:700;color:var(--color-primary)}.vocab-card{background:var(--color-surface);border-radius:var(--radius);padding:24px;text-align:center;box-shadow:var(--shadow)}.context-sentence{font-size:18px;line-height:1.8;margin-bottom:16px}.quality-buttons{display:flex;gap:8px;justify-content:center;margin-top:16px}.btn-hard{background:var(--color-danger);color:#fff;border:none;border-radius:var(--radius);padding:10px 20px;cursor:pointer}.btn-ok{background:var(--color-warning);color:#fff;border:none;border-radius:var(--radius);padding:10px 20px;cursor:pointer}.btn-easy{background:var(--color-success);color:#fff;border:none;border-radius:var(--radius);padding:10px 20px;cursor:pointer}.auth-page{max-width:400px;margin:80px auto;padding:32px;background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow)}.auth-page h1{margin-bottom:8px}.auth-page form{display:flex;flex-direction:column;gap:12px;margin:24px 0}.auth-page input{padding:12px;border:1px solid #E2E8F0;border-radius:var(--radius);font-size:var(--font-size-base)}.error{color:var(--color-danger);font-size:14px}@media (min-width: 768px){.skill-grid{grid-template-columns:repeat(2,1fr)}.btn-primary{width:auto}}@media (min-width: 1280px){.skill-grid{grid-template-columns:repeat(4,1fr)}.dashboard{max-width:1200px;margin:0 auto}}.xp-card{background:var(--color-surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.level-badge{display:inline-block;padding:4px 14px;border-radius:99px;font-size:14px;font-weight:600;color:#fff;margin-bottom:12px}.level-0{background:#94a3b8}.level-1{background:#10b981}.level-2{background:#3b82f6}.level-3{background:#8b5cf6}.level-4{background:#f59e0b}.level-5{background:#ef4444}.xp-bar-track{height:12px;background:#e2e8f0;border-radius:99px;overflow:hidden}.xp-bar-fill{height:100%;background:var(--color-primary);border-radius:99px;transition:width .4s ease}.xp-numbers{margin-top:8px;font-size:var(--font-size-label);color:var(--color-muted)}.skill-history{background:var(--color-surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-top:16px}.skill-history h2{font-size:16px;font-weight:600;margin-bottom:12px}.bar-chart{display:flex;align-items:flex-end;gap:12px;height:120px}.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}.bar-fill{width:100%;background:var(--color-primary);border-radius:4px 4px 0 0;min-height:4px;transition:height .3s ease}.bar-label{font-size:var(--font-size-label);color:var(--color-muted)}.milestone-section{background:var(--color-surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-top:16px}.milestone-section h2{font-size:16px;font-weight:600;margin-bottom:12px}.milestone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.badge-tile{background:var(--color-bg);border-radius:var(--radius);padding:16px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}.badge-tile.badge-locked{opacity:.35}.badge-tile.badge-earned{border:2px solid var(--color-success);background:var(--color-surface)}.badge-icon{font-size:28px}.badge-label{font-size:12px;font-weight:500;line-height:1.3}.badge-date{font-size:11px;color:var(--color-muted)}.progress-page{max-width:600px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.progress-page>h1{font-size:22px;font-weight:700}.dashboard{max-width:640px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.dashboard-header{display:flex;justify-content:space-between;align-items:center}.dashboard-header h1{font-size:24px;font-weight:700}.exam-countdown{display:flex;flex-direction:column;align-items:center;background:var(--color-primary);color:#fff;border-radius:var(--radius);padding:8px 16px}.countdown-number{font-size:28px;font-weight:700;line-height:1}.countdown-label{font-size:11px;opacity:.85}.session-cta{background:var(--color-primary);color:#fff;border-radius:var(--radius);padding:20px;text-align:center}.session-cta p{margin-bottom:12px;font-weight:500}.session-cta .btn-primary{background:#fff;color:var(--color-primary)}.skill-scores{background:var(--color-surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.skill-scores h2{font-size:15px;font-weight:600;margin-bottom:12px;color:var(--color-muted)}.skill-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.skill-card{background:var(--color-bg);border-radius:var(--radius);padding:16px}.skill-name{font-size:var(--font-size-label);color:var(--color-muted);margin-bottom:4px}.skill-score{font-size:28px;font-weight:700;color:var(--color-primary)}.skill-bar{height:4px;background:var(--color-primary);border-radius:2px;margin-top:8px;max-width:100%}.streak-card{background:var(--color-surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:8px}.streak-main{display:flex;align-items:center;gap:10px}.streak-fire{font-size:32px}.streak-number{font-size:40px;font-weight:700;color:var(--color-warning)}.streak-label{font-size:var(--font-size-label);color:var(--color-muted)}.btn-freeze{background:#e0f2fe;color:#0369a1;border:1.5px solid #BAE6FD;border-radius:99px;padding:6px 16px;font-size:14px;cursor:pointer;transition:background .15s}.btn-freeze:hover:not(:disabled){background:#bae6fd}.btn-freeze:disabled{opacity:.5;cursor:not-allowed}.freeze-success{font-size:var(--font-size-label);color:var(--color-success);font-weight:500}.transcript-section{background:var(--color-surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-top:16px}.transcript-section h3{font-size:15px;font-weight:600;margin-bottom:12px;color:var(--color-muted)}.transcript-text{font-size:15px;line-height:2}.word-token{cursor:pointer;border-radius:2px;padding:1px 0;transition:background .1s}.word-token:hover{background:#eef2ff;color:var(--color-primary)}.word-token.saved{color:var(--color-success);border-bottom:2px solid var(--color-success)}.word-panel{position:fixed;bottom:0;left:0;right:0;background:var(--color-surface);border-radius:16px 16px 0 0;padding:20px;box-shadow:0 -4px 24px #00000026;z-index:200;max-height:60vh;overflow-y:auto}.word-panel-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.word-panel-word{font-size:22px;font-weight:700}.word-panel-phonetic{font-size:14px;color:var(--color-muted);margin-top:2px}.word-panel-pos{display:inline-block;font-size:12px;background:#eef2ff;color:var(--color-primary);padding:2px 8px;border-radius:99px;margin-bottom:8px}.word-panel-meaning{font-size:15px;line-height:1.6;margin-bottom:8px}.word-panel-example{font-size:14px;color:var(--color-muted);font-style:italic;border-left:3px solid #E2E8F0;padding-left:10px}.word-panel-context{font-size:13px;background:#f8fafc;border-radius:var(--radius);padding:8px 12px;margin-top:8px}.word-panel-actions{display:flex;gap:8px;margin-top:16px}.btn-close-panel{background:none;border:none;font-size:22px;cursor:pointer;color:var(--color-muted);padding:0;line-height:1}.btn-save-word{flex:1;background:var(--color-success);color:#fff;border:none;border-radius:var(--radius);padding:12px;font-size:var(--font-size-base);cursor:pointer;font-weight:600}.btn-save-word:disabled{opacity:.5;cursor:not-allowed}.panel-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:199}.weekly-calendar{background:var(--color-surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.weekly-calendar h3{font-size:15px;font-weight:600;margin-bottom:12px;color:var(--color-muted)}.calendar-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.calendar-day{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:var(--radius);font-size:13px}.calendar-day-label{font-size:var(--font-size-label);color:var(--color-muted)}.calendar-day-icon{font-size:16px}.calendar-day--completed{background:#d1fae5}.calendar-day--missed{background:#fee2e2;color:var(--color-danger)}.calendar-day--today{background:#eef2ff;color:var(--color-primary);font-weight:600}.calendar-day--future{background:#f1f5f9;color:var(--color-muted)}.learning-plan-card{background:var(--color-surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}.learning-plan-card h3{font-size:15px;font-weight:600;color:var(--color-muted)}.plan-days-to-goal{font-size:var(--font-size-base)}.plan-week-progress{display:flex;flex-direction:column;gap:6px;font-size:var(--font-size-label)}.plan-progress-bar{height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden}.plan-progress-fill{height:100%;background:var(--color-primary);border-radius:99px;transition:width .4s}.plan-forecast{display:flex;flex-direction:column;gap:6px}.plan-forecast-label{font-size:var(--font-size-label);color:var(--color-muted)}.plan-sparkline{display:flex;align-items:flex-end;gap:3px;height:48px}.plan-sparkline-bar{flex:1;background:var(--color-primary);border-radius:2px 2px 0 0;opacity:.75;min-height:4px}.plan-forecast-bounds{display:flex;justify-content:space-between;font-size:12px;color:var(--color-muted)}.plan-rebalance{background:#fff7ed;border:1px solid #FED7AA;border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:8px}.plan-rebalance p{font-size:var(--font-size-label)}.plan-rebalance-ok{color:var(--color-success);font-size:var(--font-size-label)}.session-page{display:flex;flex-direction:column;gap:16px;padding:16px}.session-progress{display:flex;gap:6px;flex-wrap:wrap}.step-indicator{font-size:12px;padding:4px 10px;border-radius:99px;background:#e2e8f0;color:var(--color-muted)}.step-indicator.active{background:var(--color-primary);color:#fff;font-weight:600}.step-indicator.done{background:#d1fae5;color:var(--color-success)}.session-content{background:var(--color-surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.session-complete{text-align:center;padding:40px 20px}.session-complete h2{font-size:22px;margin-bottom:16px}.xp-earned{font-size:28px;font-weight:700;color:var(--color-primary);margin-bottom:12px}.new-milestones{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}.milestone-badge{background:#fff7ed;border:1px solid #FED7AA;border-radius:99px;padding:4px 12px;font-size:13px}.drill-step,.vocab-step{display:flex;flex-direction:column;gap:14px}.drill-header{display:flex;justify-content:space-between;align-items:center}.drill-label{font-size:var(--font-size-label);font-weight:600;color:var(--color-muted)}.drill-counter{font-size:var(--font-size-label);color:var(--color-muted)}.drill-prompt{font-size:var(--font-size-base);line-height:1.7}.drill-options{display:flex;flex-direction:column;gap:8px}.drill-option{text-align:left;padding:12px 16px;border:1.5px solid #E2E8F0;border-radius:var(--radius);background:#fff;font-size:var(--font-size-base);cursor:pointer;transition:border-color .15s}.drill-option:hover:not(:disabled){border-color:var(--color-primary)}.drill-option.selected{border-color:var(--color-primary);background:#eef2ff}.drill-option.correct{border-color:var(--color-success);background:#d1fae5}.drill-option.wrong{border-color:var(--color-danger);background:#fee2e2}.drill-option:disabled{cursor:not-allowed}.drill-input{display:flex;gap:8px}.drill-input input{flex:1;padding:10px 14px;border:1.5px solid #E2E8F0;border-radius:var(--radius);font-size:var(--font-size-base)}.drill-feedback{border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:8px}.feedback-correct{background:#d1fae5}.feedback-wrong{background:#fee2e2}.feedback-neutral{background:#f1f5f9}.drill-explanation{font-size:var(--font-size-label);color:var(--color-muted)}.drill-complete{text-align:center;padding:20px 0}.drill-score{font-size:28px;font-weight:700;color:var(--color-primary);margin:8px 0 16px}.step-placeholder{text-align:center;padding:20px 0;display:flex;flex-direction:column;gap:16px}.step-error{text-align:center;padding:20px 0;display:flex;flex-direction:column;gap:12px}.error-msg{color:var(--color-danger);font-size:var(--font-size-label);text-align:center;margin-top:8px}.real-content-step{display:flex;flex-direction:column;gap:14px}.real-content-step h3{font-size:18px;font-weight:700}.real-content-hint{font-size:var(--font-size-label);color:var(--color-muted)}.real-content-actions{display:flex;flex-direction:column;gap:0}.oauth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--color-muted);font-size:var(--font-size-label)}.oauth-divider:before,.oauth-divider:after{content:"";flex:1;border-top:1px solid #E2E8F0}.oauth-google{margin:8px auto;display:flex;justify-content:center}.btn-facebook{width:100%;padding:10px 16px;background:#1877f2;color:#fff;border:none;border-radius:var(--radius);font-size:var(--font-size-base);font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px}.btn-facebook:hover{background:#166fe5}.fb-icon{width:20px;height:20px;background:#fff;color:#1877f2;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;flex-shrink:0}.challenge-page{max-width:700px;margin:0 auto;padding:20px 16px}.challenge-tabs{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap}.challenge-tab{padding:8px 16px;border:1px solid #E2E8F0;border-radius:20px;background:#fff;cursor:pointer;font-size:var(--font-size-label)}.challenge-tab.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.challenge-panel,.leaderboard-panel,.buddy-panel{margin-top:16px}.challenge-card{background:#fff;border-radius:12px;padding:24px;box-shadow:var(--shadow);border:1px solid #E2E8F0}.challenge-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.challenge-badge{background:var(--color-primary);color:#fff;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:700;letter-spacing:.5px}.challenge-skill{font-size:var(--font-size-label);color:var(--color-muted)}.challenge-title{font-size:22px;font-weight:700;margin-bottom:8px}.challenge-desc{color:var(--color-muted);margin-bottom:12px}.challenge-target{font-size:var(--font-size-label);background:#f1f5f9;padding:8px 12px;border-radius:var(--radius);margin-bottom:16px}.challenge-progress-wrap{margin-bottom:16px}.challenge-progress-row{display:flex;justify-content:space-between;font-size:var(--font-size-label);margin-bottom:6px}.challenge-progress-bar{height:10px;background:#e2e8f0;border-radius:5px;overflow:hidden}.challenge-progress-fill{height:100%;background:var(--color-primary);border-radius:5px;transition:width .3s}.challenge-completed{color:var(--color-success);font-weight:600;margin-top:8px}.challenge-actions{display:flex;gap:12px}.leaderboard-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}.leaderboard-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}.leaderboard-row.rank-1{background:linear-gradient(135deg,#fff7e6,#fffbf0);border:1px solid #FCD34D}.leaderboard-row.rank-2{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #CBD5E1}.leaderboard-row.rank-3{background:linear-gradient(135deg,#fff5f0,#fff0eb);border:1px solid #FDBA74}.leaderboard-rank{width:32px;text-align:center;font-size:20px}.leaderboard-name{flex:1;font-weight:500}.leaderboard-xp{font-weight:700;color:var(--color-primary)}.leaderboard-empty{text-align:center;color:var(--color-muted);padding:24px 0}.my-rank{background:var(--color-primary);color:#fff;padding:10px 16px;border-radius:var(--radius);margin-bottom:12px;font-weight:500}.buddy-panel h2{margin-bottom:8px}.buddy-desc{color:var(--color-muted);margin-bottom:20px}.buddy-card{background:#fff;border-radius:12px;padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.buddy-avatar{width:56px;height:56px;background:var(--color-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}.buddy-name{font-size:18px;font-weight:600}.buddy-level,.buddy-exam{font-size:var(--font-size-label);color:var(--color-muted)}.buddy-tip{color:var(--color-primary);font-weight:500}.buddy-empty{text-align:center;padding:24px 0;display:flex;flex-direction:column;gap:16px;align-items:center}.buddy-waiting{background:#f0fdf4;border:1px solid #86EFAC;border-radius:var(--radius);padding:16px 20px;text-align:center}.buddy-hint{color:var(--color-muted);font-size:var(--font-size-label)}.admin-page{max-width:960px;margin:0 auto;padding:20px 16px}.admin-tabs{display:flex;gap:4px;margin:16px 0;border-bottom:2px solid #E2E8F0}.admin-tab{padding:10px 18px;background:none;border:none;cursor:pointer;font-size:var(--font-size-label);color:var(--color-muted);border-bottom:2px solid transparent;margin-bottom:-2px}.admin-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:600}.admin-tab-panel{padding:16px 0}.admin-toolbar{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}.admin-toolbar select{padding:8px 12px;border:1px solid #E2E8F0;border-radius:var(--radius);font-size:var(--font-size-label);background:#fff}.admin-form{background:#f8fafc;border:1px solid #E2E8F0;border-radius:var(--radius);padding:20px;margin-bottom:20px;display:flex;flex-direction:column;gap:12px}.admin-form h3{font-size:16px;font-weight:600}.admin-form label{display:flex;flex-direction:column;gap:4px;font-size:var(--font-size-label);color:var(--color-muted)}.admin-form input,.admin-form select,.admin-form textarea{padding:8px 12px;border:1px solid #E2E8F0;border-radius:var(--radius);font-size:var(--font-size-base);background:#fff;width:100%}.admin-form textarea{resize:vertical;font-family:inherit}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.admin-hint{color:var(--color-muted);font-size:var(--font-size-label);margin-bottom:16px}.admin-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.admin-table th{background:#f1f5f9;padding:10px 14px;text-align:left;font-size:var(--font-size-label);color:var(--color-muted);font-weight:600}.admin-table td{padding:10px 14px;border-top:1px solid #F1F5F9;font-size:var(--font-size-label);vertical-align:top}.admin-table tr:hover td{background:#f8fafc}.table-title{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.skill-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;background:#eef2ff;color:var(--color-primary)}.skill-badge.skill-listening{background:#dbeafe;color:#1d4ed8}.skill-badge.skill-reading{background:#d1fae5;color:#065f46}.skill-badge.skill-writing{background:#fef3c7;color:#92400e}.skill-badge.skill-speaking{background:#fce7f3;color:#9d174d}.btn-danger-sm{padding:4px 10px;background:#fef2f2;color:var(--color-danger);border:1px solid #FECACA;border-radius:var(--radius);font-size:12px;cursor:pointer}.btn-danger-sm:hover{background:var(--color-danger);color:#fff}.pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:16px;font-size:var(--font-size-label)}.pagination button{padding:6px 14px;border:1px solid #E2E8F0;border-radius:var(--radius);background:#fff;cursor:pointer}.pagination button:disabled{opacity:.4;cursor:default}.stats-section{margin-bottom:24px}.stats-section h3{margin-bottom:10px;font-size:16px;font-weight:600}.ai-config-row{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid #F1F5F9}.ai-config-module{font-weight:600;min-width:180px;font-size:var(--font-size-label)}.ai-config-details{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.ai-provider-badge{background:var(--color-primary);color:#fff;padding:2px 8px;border-radius:10px;font-size:12px}.ai-model{font-size:12px;color:var(--color-muted);font-family:monospace}.ai-fallback{font-size:12px;color:var(--color-muted)}.teacher-page{max-width:960px;margin:0 auto;padding:20px 16px}.teacher-tabs{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap}.teacher-tab{padding:8px 18px;border:1px solid #E2E8F0;border-radius:20px;background:#fff;cursor:pointer;font-size:var(--font-size-label)}.teacher-tab.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.teacher-panel{padding:4px 0}.teacher-toolbar{margin-bottom:16px}.teacher-empty{text-align:center;color:var(--color-muted);padding:32px 0}.class-list{display:flex;flex-direction:column;gap:12px}.class-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #E2E8F0;overflow:hidden}.class-card.selected{border-color:var(--color-primary)}.class-card-header{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 20px;cursor:pointer}.class-card-header:hover{background:#f8fafc}.class-name{font-size:17px;font-weight:600}.class-desc{font-size:var(--font-size-label);color:var(--color-muted);margin-top:2px}.class-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:var(--font-size-label);color:var(--color-muted);flex-shrink:0}.class-invite{color:var(--color-primary);font-weight:500}.class-members,.class-toggle{font-size:12px}.class-teacher,.class-joined{font-size:var(--font-size-label);color:var(--color-muted)}.class-detail{border-top:1px solid #E2E8F0;padding:16px 20px}.class-detail-tabs{display:flex;gap:8px;margin-bottom:16px}.class-detail-tabs button{padding:6px 14px;border:1px solid #E2E8F0;border-radius:16px;background:#fff;cursor:pointer;font-size:13px}.class-detail-tabs button.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.empty-hint{color:var(--color-muted);font-size:var(--font-size-label);padding:16px 0;text-align:center}.students-list{overflow-x:auto}.assignments-panel{display:flex;flex-direction:column}.assignment-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}.assignment-card{background:#f8fafc;border:1px solid #E2E8F0;border-radius:var(--radius);padding:12px 16px}.assignment-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.assignment-desc{font-size:var(--font-size-label);color:var(--color-muted);margin-bottom:6px}.assignment-meta{display:flex;gap:16px;font-size:12px;color:var(--color-muted)}.join-class-form{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:20px}.join-class-form h3{margin-bottom:14px}.join-row{display:flex;gap:10px;align-items:center}.invite-input{flex:1;padding:10px 14px;border:2px solid #E2E8F0;border-radius:var(--radius);font-size:20px;font-family:monospace;text-align:center;letter-spacing:4px;text-transform:uppercase}.invite-input:focus{border-color:var(--color-primary);outline:none}.success-msg{color:var(--color-success);font-weight:500;margin-top:10px}.invite-code-banner{background:#f0fdf4;border:1px solid #86EFAC;border-radius:var(--radius);padding:16px 20px;margin-bottom:16px;text-align:center}.invite-code{font-size:32px;font-weight:900;font-family:monospace;letter-spacing:8px;color:var(--color-primary);display:block;margin:8px 0}.invite-hint{font-size:var(--font-size-label);color:var(--color-muted)}.nav-phase2{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.nav-phase2 a{padding:8px 14px;border:1px solid #E2E8F0;border-radius:20px;background:#fff;text-decoration:none;color:var(--color-text);font-size:var(--font-size-label);display:flex;align-items:center;gap:6px}.nav-phase2 a:hover{border-color:var(--color-primary);color:var(--color-primary)}