/* EEL - English Enhancement Learning Platform Styles */ /* CSS Variables – light mode tuned to be easy on the eyes (not too bright) */ :root { /* Global type scale (controls rem sizing too) */ --font-size: 17px; --background: #f2f2f5; --foreground: #2d2d33; --card: #fafafb; --card-foreground: #2d2d33; /* Brand – light mode: dark violet for text/links */ --primary: #6d28d9; /* dark violet */ --primary-foreground: #ffffff; --secondary: #22c55e; /* green */ --secondary-foreground: #ffffff; --muted: #e8e8ec; --muted-foreground: #5c5c66; /* Chart colors – theme-aware */ --chart-remaining: #e2e8f0; --chart-grid: rgba(0, 0, 0, 0.1); --accent: #ede9fe; --accent-foreground: #6d28d9; --destructive: #d4183d; --destructive-foreground: #ffffff; --border: rgba(0, 0, 0, 0.08); --input-background: #e8e8ec; --ring: #6d28d9; --radius: 0.625rem; --font-weight-medium: 500; --font-weight-normal: 400; --sidebar: #eef0f2; --sidebar-foreground: #2d2d33; --sidebar-primary: #6d28d9; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #ede9fe; --sidebar-accent-foreground: #6d28d9; --sidebar-border: rgba(0, 0, 0, 0.08); } /* Dark theme overrides */ :root[data-theme="dark"] { --background: #0b1220; --foreground: #e5e7eb; --card: #0f1a2d; --card-foreground: #e5e7eb; --muted: rgba(255, 255, 255, 0.06); --muted-foreground: #9ca3af; --chart-remaining: rgba(255, 255, 255, 0.14); --chart-grid: rgba(255, 255, 255, 0.08); --accent: rgba(139, 92, 246, 0.18); --accent-foreground: #ddd6fe; --border: rgba(255, 255, 255, 0.14); --input-background: rgba(255, 255, 255, 0.06); --sidebar: #0f172a; --sidebar-foreground: #e5e7eb; --sidebar-primary: #8b5cf6; --sidebar-primary-foreground: #ffffff; --sidebar-accent: rgba(139, 92, 246, 0.18); --sidebar-accent-foreground: #ddd6fe; --sidebar-border: rgba(255, 255, 255, 0.14); } /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } html { /* Make rem-based utilities/components scale with --font-size */ font-size: var(--font-size); } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-size: 1rem; background-color: var(--background); color: var(--foreground); line-height: 1.5; } html, body { height: 100%; } /* Keep the app "screen" fixed; scroll only the main content. IMPORTANT: do not make #main-app position:fixed, otherwise the mobile overlay (appended to ) can sit above the sidebar and block taps. */ body { overflow: hidden; } /* Auth pages (login/signup): allow scrolling on small screens */ body.auth-page { overflow-y: auto; /* Theme-friendly auth background */ background: radial-gradient(1200px 600px at 12% 10%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 60%), radial-gradient(1000px 520px at 90% 0%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 55%), radial-gradient(900px 520px at 40% 90%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 60%), var(--background); } /* Auth header: back (left) + theme toggle (right) */ body.auth-page .auth-header { position: fixed; top: 0; left: 0; right: 0; z-index: 2600; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; gap: 1rem; pointer-events: none; } body.auth-page .auth-header > * { pointer-events: auto; } body.auth-page .auth-header .back-button { position: static; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; border-radius: 9999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 72%, transparent); color: var(--foreground); text-decoration: none; box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.35); backdrop-filter: blur(10px); } body.auth-page .auth-header .back-button:hover { background: color-mix(in srgb, var(--card) 86%, transparent); border-color: color-mix(in srgb, var(--border) 75%, var(--primary) 25%); color: var(--foreground); text-decoration: none; } /* Auth back button when not in header (fallback) */ body.auth-page .back-button { position: fixed; top: 0.9rem; left: 0.9rem; z-index: 2600; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; border-radius: 9999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 72%, transparent); color: var(--foreground); text-decoration: none; box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.35); backdrop-filter: blur(10px); pointer-events: auto; } body.auth-page .back-button:hover { background: color-mix(in srgb, var(--card) 86%, transparent); border-color: color-mix(in srgb, var(--border) 75%, var(--primary) 25%); color: var(--foreground); text-decoration: none; } body.auth-page .login-screen, body.auth-page .signup-screen { min-height: 100vh; height: auto; overflow: visible; /* When content is taller than viewport, top-align so scrolling feels natural */ align-items: flex-start; padding-top: 4.25rem; /* leaves room for the Back button */ padding-bottom: 2rem; background: transparent; } @supports (height: 100dvh) { body.auth-page .login-screen, body.auth-page .signup-screen { min-height: 100dvh; } } #main-app { height: 100vh; min-height: 100vh; overflow: hidden; } @supports (height: 100dvh) { #main-app { height: 100dvh; min-height: 100dvh; } } /* Main content scroll container */ #main-content { min-height: 0; /* required for flex children to scroll */ overflow: auto; } /* EEL character as subtle background on all logged-in app pages */ #main-app #main-content { position: relative; isolation: isolate; } #main-app #main-content::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to bottom, transparent 0%, transparent 45%, var(--background) 100%), url("../image/eel-character.png"); background-repeat: no-repeat, no-repeat; background-position: 0 0, bottom -13rem right; background-size: 100% 100%, min(620px, 70vw); opacity: 0.08; } /* Smooth theme transition (limited to core surfaces) */ body, .card, .modal-card, .quiz-card, .result-card, .leaderboard-modal-card, .form-input, .form-textarea, .btn, #sidebar, .sidebar { transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } /* ========================================================== SweetAlert2 (Swal.fire) theme support ========================================================== */ .swal2-container { color: var(--foreground); } .swal2-popup { background: var(--card) !important; color: var(--foreground) !important; border: 1px solid var(--border) !important; border-radius: calc(var(--radius) + 10px) !important; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.60) !important; } .swal2-title, .swal2-html-container, .swal2-content { color: var(--foreground) !important; } .swal2-html-container { opacity: 0.95; } .swal2-close { color: var(--muted-foreground) !important; } .swal2-close:hover { color: var(--foreground) !important; } .swal2-input, .swal2-textarea, .swal2-select { background: var(--input-background) !important; border: 1px solid var(--border) !important; color: var(--foreground) !important; border-radius: calc(var(--radius) - 2px) !important; box-shadow: none !important; } .swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus { outline: none !important; border-color: color-mix(in srgb, var(--primary) 55%, var(--border)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent) !important; } .swal2-actions { gap: 0.5rem !important; } /* Don't override inline confirmButtonColor; just ensure readable text */ .swal2-styled { border-radius: 9999px !important; font-weight: 800 !important; } .swal2-styled.swal2-confirm { color: var(--primary-foreground) !important; } .swal2-styled.swal2-cancel { background: transparent !important; border: 1px solid var(--border) !important; color: var(--foreground) !important; } .swal2-styled:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent) !important; } .swal2-footer { color: var(--muted-foreground) !important; border-top-color: var(--border) !important; } /* Top-right theme toggle (all pages) */ .theme-corner-toggle { position: fixed; top: 0.9rem; right: 0.9rem; z-index: 2500; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 40px; min-width: 40px; padding: 0 0.75rem; border-radius: 9999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 72%, transparent); color: var(--foreground); box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.35); backdrop-filter: blur(10px); cursor: pointer; user-select: none; } .theme-corner-toggle:hover { background: color-mix(in srgb, var(--card) 86%, transparent); border-color: color-mix(in srgb, var(--border) 75%, var(--primary) 25%); } .theme-corner-toggle:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent), 0 10px 25px -10px rgba(0, 0, 0, 0.35); } .theme-corner-toggle .theme-icon { font-size: 16px; line-height: 1; } .theme-corner-toggle .theme-label { display: none; /* icon only, same as header toggle */ font-size: 13px; font-weight: 600; } @media (max-width: 768px) { .theme-corner-toggle { top: 0.75rem; right: 0.75rem; } } /* Header theme toggle (in nav-actions) */ .theme-header-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; height: 36px; min-width: 36px; padding: 0 0.5rem; border-radius: 9999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 72%, transparent); color: var(--foreground); cursor: pointer; user-select: none; transition: background 0.2s, border-color 0.2s; } .theme-header-toggle:hover { background: color-mix(in srgb, var(--card) 86%, transparent); border-color: color-mix(in srgb, var(--border) 75%, var(--primary) 25%); } .theme-header-toggle:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent); } .theme-header-toggle .theme-icon { font-size: 1rem; line-height: 1; } .theme-header-toggle .theme-label { display: none; /* icon only in header */ font-size: 0.75rem; font-weight: 600; } /* Better dark-mode rendering for scrollbars (supported browsers) */ :root[data-theme="dark"] { scrollbar-color: rgba(255,255,255,0.28) rgba(255,255,255,0.08); } .hidden { display: none !important; } .logo-img { width: 40px; /* adjust size as needed */ height: 40px; object-fit: contain; vertical-align: middle; } .nav-brand { display: flex; align-items: center; gap: 10px; } /* Role Selection Screen */ .role-selection-screen { min-height: 100vh; background-color: var(--background); display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .role-selection-container { width: 100%; max-width: 64rem; display: flex; flex-direction: column; gap: 2rem; } .hero-header { text-align: center; margin-bottom: 2rem; } .hero-title { font-size: clamp(2rem, 6vw, 4rem); font-weight: 700; margin-bottom: 1rem; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; } .primary-gradient { background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .hero-description { font-size: 1.125rem; color: var(--foreground); max-width: 32rem; margin: 0 auto; } .name-input-card { max-width: 24rem; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .name-input-card label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--foreground); } .name-input { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--input-background); text-align: center; font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; } .name-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent); } .roles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem; } .role-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; text-align: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .role-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .teacher-card { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent), color-mix(in srgb, var(--primary) 10%, transparent)); border-color: color-mix(in srgb, var(--primary) 20%, transparent); } .teacher-card:hover { border-color: color-mix(in srgb, var(--primary) 50%, transparent); } .student-card { background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 5%, transparent), color-mix(in srgb, var(--secondary) 10%, transparent)); border-color: color-mix(in srgb, var(--secondary) 20%, transparent); } .student-card:hover { border-color: color-mix(in srgb, var(--secondary) 50%, transparent); } .role-icon { width: 5rem; height: 5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 2.5rem; } .teacher-icon { background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--primary); } .student-icon { background: color-mix(in srgb, var(--secondary) 20%, transparent); color: var(--secondary); } .role-card h3 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--foreground); font-weight: 500; } .role-card p { color: var(--muted-foreground); margin-bottom: 1.5rem; } .role-features h4 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; font-weight: 500; } .role-features ul { list-style: none; text-align: left; margin-bottom: 1.5rem; } .role-features li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.875rem; } .feature-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; } .feature-dot.primary { background: var(--primary); } .feature-dot.secondary { background: var(--secondary); } .role-button { width: 100%; padding: 0.75rem 1.5rem; border: none; border-radius: calc(var(--radius) - 2px); font-weight: 500; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.875rem; } .role-button:disabled { opacity: 0.5; cursor: not-allowed; } .role-button.primary { background: var(--primary); color: var(--primary-foreground); } .role-button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 90%, black); } .role-button.secondary { background: var(--secondary); color: var(--secondary-foreground); } .role-button.secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--secondary) 90%, black); } /* Demo Section */ .demo-section { text-align: center; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border); } .demo-text { color: var(--muted-foreground); margin-bottom: 1rem; } .demo-buttons { display: flex; gap: 1rem; justify-content: center; } .demo-button { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid var(--border); background: var(--background); color: var(--foreground); border-radius: calc(var(--radius) - 2px); cursor: pointer; transition: all 0.2s; font-size: 0.875rem; } .demo-button:hover { background: var(--accent); color: var(--accent-foreground); } /* Loading Screen */ .loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--background); display: flex; align-items: center; justify-content: center; z-index: 1000; } .loading-content { text-align: center; } .loading-spinner { width: 3rem; height: 3rem; border: 3px solid var(--muted); border-top: 3px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; } .loading-spinner::before { content: ''; position: absolute; inset: -4px; border: 4px solid var(--secondary); border-radius: 50%; animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(1.5); opacity: 0; } } /* Dashboard Layout */ .dashboard-layout { display: flex; height: 100vh; background: var(--background); } .sidebar, #sidebar { width: 16rem; background: var(--sidebar); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; height: 100vh; min-height: 100vh; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); transition: width 0.28s ease, min-width 0.28s ease, border-color 0.2s ease; } /* Desktop/laptop: sidebar can be closed via burger – collapses to icon-only strip */ @media (min-width: 769px) { #main-app #sidebar:not(.open) { width: 5rem; min-width: 5rem; overflow: hidden; padding-left: 0; padding-right: 0; } /* First block (header or profile): compact and icon-only when closed */ #main-app #sidebar:not(.open) > .p-6:first-child, #main-app #sidebar:not(.open) > div:first-child { padding: 0.75rem 0.5rem; text-align: center; } /* Hide all text in header when closed */ #main-app #sidebar:not(.open) #sidebar-title, #main-app #sidebar:not(.open) #sidebar-welcome, #main-app #sidebar:not(.open) .sidebar-name-row, #main-app #sidebar:not(.open) .sidebar-user-meta, #main-app #sidebar:not(.open) .sidebar-user-name, #main-app #sidebar:not(.open) .sidebar-user-role { display: none !important; } /* Hide "Class details" / "Your classroom" badge when closed */ #main-app #sidebar:not(.open) .sidebar-badge { display: none !important; } /* Profile: show only avatar, centered */ #main-app #sidebar:not(.open) .sidebar-profile-top { justify-content: center; flex-direction: column; gap: 0; } #main-app #sidebar:not(.open) .sidebar-profile-top > div:last-child { display: none !important; } /* Show small "E" only when first child is simple .p-6 (no profile yet) */ #main-app #sidebar:not(.open) > .p-6:first-child::before { content: "E"; display: block; font-size: 1.25rem; font-weight: 700; color: var(--sidebar-primary); line-height: 1; } /* Hide section titles (Classroom, Learning, etc.) when closed */ #main-app #sidebar:not(.open) .sidebar-section-title { display: none !important; } /* Nav area: less horizontal padding when closed */ #main-app #sidebar:not(.open) #sidebar-nav, #main-app #sidebar:not(.open) .px-4 { padding-left: 0.5rem; padding-right: 0.5rem; } /* Nav buttons + Back button: icon only, centered */ #main-app #sidebar:not(.open) .nav-button, #main-app #sidebar:not(.open) .btn-side-bar.nav-button { justify-content: center; padding: 0.75rem; font-size: 0; } #main-app #sidebar:not(.open) .nav-button span { display: none !important; } #main-app #sidebar:not(.open) .nav-button i, #main-app #sidebar:not(.open) .nav-button [data-lucide] { font-size: 1.25rem; width: 1.25rem; height: 1.25rem; margin: 0; flex-shrink: 0; } /* Logout button: icon only, centered */ #main-app #sidebar:not(.open) .logout-button { justify-content: center; padding: 0.75rem; font-size: 0; } #main-app #sidebar:not(.open) .logout-button i, #main-app #sidebar:not(.open) .logout-button [data-lucide] { font-size: 1.25rem; width: 1.25rem; height: 1.25rem; margin: 0; } #main-app #sidebar:not(.open) > .p-4:last-child { padding: 0.5rem; } #main-app #sidebar:not(.open) .sidebar-divider { margin: 0.25rem 0.5rem; } #main-app #sidebar.open { width: 16rem; min-width: 16rem; } /* Profile popover: when sidebar is closed, use fixed position so it isn't clipped by sidebar overflow */ #main-app #sidebar:not(.open) .sidebar-profile-popover:not(.hidden) { position: fixed; left: 5rem; top: calc(var(--app-header-height, 4rem) + 0.5rem); z-index: 2200; } /* Lessons page: main content expands to full width when sidebar is closed */ body.lessons-page #main-app #sidebar:not(.open) ~ #main-content .lessons-tabs-wrap, body.lessons-page #main-app #sidebar:not(.open) ~ #main-content .lessons-shell, body.lessons-page #main-app #sidebar:not(.open) ~ #main-content .lessons-ai-quiz-card { max-width: 100%; } /* Recitation page: main content expands to full width when sidebar is closed */ body.recitation-page #main-app #sidebar:not(.open) ~ #main-content .recitation-main-wrap { max-width: 100%; } } .sidebar-header { padding: 1.5rem; border-bottom: 1px solid var(--sidebar-border); } .sidebar-header h1 { font-size: 1.25rem; font-weight: 600; color: var(--sidebar-primary); margin-bottom: 0.25rem; letter-spacing: -0.02em; } .sidebar-header p { font-size: 0.875rem; color: var(--muted-foreground); } /* Sidebar main block (logo + welcome) when using .p-6 */ #sidebar > .p-6:first-child { padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid var(--sidebar-border); } #sidebar .text-xl.font-semibold { font-weight: 600; color: var(--sidebar-primary); letter-spacing: -0.02em; } .user-info { margin-top: 0.75rem; font-size: 0.875rem; } .user-role-badge { display: inline-block; margin-top: 0.25rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; border-radius: calc(var(--radius) - 4px); background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); } .sidebar-nav { flex: 1; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; } /* Most pages use id="sidebar-nav" + utility classes */ #sidebar-nav { flex: 1 1 0%; /* take remaining space so footer (logout) stays at bottom */ min-height: 0; /* allow it to shrink in flex column */ overflow-y: auto; /* scroll when many buttons */ overscroll-behavior: contain; padding-bottom: 1rem; } /* Keep logout footer at bottom and visible (no shrink) */ #main-app #sidebar > .p-4:last-child { flex-shrink: 0; } @supports (height: 100dvh) { .sidebar, #sidebar { height: 91dvh; min-height: 91dvh; } } .nav-item { width: 100%; padding: 0.75rem 1rem; border: none; background: transparent; color: var(--sidebar-foreground); text-align: left; border-radius: calc(var(--radius) - 2px); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease; display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; font-weight: 400; text-decoration: none; } .nav-item:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); transform: translateX(2px); } .nav-item.active { background: var(--sidebar-primary); color: var(--sidebar-primary-foreground); font-weight: 600; } /* Sidebar nav buttons (shared with .nav-item look) */ #sidebar-nav .nav-button, #sidebar-nav .btn-side-bar.nav-button { padding: 0.75rem 1rem; border-radius: calc(var(--radius) - 2px); transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease; border: none; font-size: 0.875rem; } #sidebar-nav .nav-button:hover, #sidebar-nav .btn-side-bar.nav-button:hover { transform: translateX(2px); } #sidebar-nav .nav-button.active { font-weight: 600; } .sidebar-footer { padding: 1rem; border-top: 1px solid var(--sidebar-border); } .logout-button { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--sidebar-border); background: transparent; color: var(--sidebar-foreground); border-radius: calc(var(--radius) - 2px); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; display: flex; align-items: center; gap: 0.5rem; justify-content: center; font-weight: 500; } #sidebar .logout-button:hover { background: color-mix(in srgb, var(--destructive, #dc2626) 12%, transparent); border-color: color-mix(in srgb, var(--destructive, #dc2626) 35%, var(--sidebar-border)); color: var(--destructive, #dc2626); transform: translateX(2px); } .logout-button:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); } .main-content { flex: 1; overflow-y: auto; background: var(--background); } .content-header { background: var(--card); border-bottom: 1px solid var(--border); padding: 1.5rem; } .content-body { padding: 1.5rem; } /* Cards */ .card { background: var(--card); color: var(--card-foreground); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: 0 7px 3px rgba(0, 0, 0, 0.1); margin: 0.5rem; } /* Make modal surfaces use theme variables */ .modal-card, .result-card, .leaderboard-modal-card, .quiz-card { background: var(--card) !important; color: var(--card-foreground); border-color: var(--border); } .card-header { padding: 1.5rem 1.5rem 20px; } .card-title { font-size: 1.125rem; font-weight: 500; line-height: 3; color: var(--card-foreground); } .card-description { color: var(--muted-foreground); font-size: 0.95rem; margin-top: 0.375rem; } .card-content { padding: 10px 1.5rem; } .card-content:last-child { padding-bottom: 1.5rem; } .card-footer { display: flex; align-items: center; padding: 0 1.5rem 1.5rem; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: calc(var(--radius) - 2px); font-size: 0.95rem; font-weight: 500; transition: all 0.2s; cursor: pointer; border: none; outline: none; text-decoration: none; user-select: none; gap: 0.5rem; } .btn:disabled { pointer-events: none; opacity: 0.5; } .btn-primary { background: var(--primary); color: var(--primary-foreground); height: 2.25rem; padding: 0.5rem 1rem; } .btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 90%, black); } .btn-secondary { background: var(--secondary); color: var(--secondary-foreground); height: 2.25rem; padding: 0.5rem 1rem; } .btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--secondary) 90%, black); } .btn-side-bar { background: transparent; color: var(--sidebar-foreground); height: 2.75rem; padding: 0.5rem 0.875rem; border: 1px solid transparent; border-radius: calc(var(--radius) - 2px); position: relative; } .btn-side-bar:hover:not(:disabled) { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); border-color: var(--sidebar-border); } .btn-side-bar.active { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--sidebar-foreground); border-color: color-mix(in srgb, var(--primary) 35%, var(--sidebar-border)); box-shadow: none; } .btn-side-bar.active::before { content: ""; position: absolute; left: 0.35rem; top: 0.45rem; bottom: 0.45rem; width: 4px; border-radius: 9999px; background: linear-gradient(180deg, var(--primary), var(--secondary)); } /* Sidebar profile header (post-login) */ .sidebar-profile { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--sidebar-border); } .sidebar-profile-top { display: flex; align-items: center; gap: 0.75rem; } #main-app #sidebar .sidebar-profile-top > div:last-child { min-width: 0; overflow: hidden; } .sidebar-avatar-wrap { position: relative; flex-shrink: 0; } .sidebar-avatar-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: none; border-radius: 9999px; background: transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .sidebar-avatar-btn:hover { transform: scale(1.05); } .sidebar-avatar-btn:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 50%, transparent); } .sidebar-avatar-btn .sidebar-avatar { width: 42px; height: 42px; } .sidebar-avatar-img { width: 42px; height: 42px; border-radius: 9999px; object-fit: cover; display: block; } .sidebar-avatar { width: 42px; height: 42px; border-radius: 9999px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 45%, transparent), color-mix(in srgb, var(--secondary) 35%, transparent) ); border: 1px solid var(--sidebar-border); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--sidebar-foreground); } /* Profile popover (click avatar in sidebar) */ .sidebar-profile-popover { position: absolute; left: 0; top: calc(100% + 8px); z-index: 2200; min-width: 220px; padding: 1rem 1.25rem; background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35); } .sidebar-profile-popover.hidden { display: none !important; } .sidebar-profile-popover-avatar { width: 52px; height: 52px; border-radius: 9999px; margin: 0 auto 0.75rem; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 45%, transparent), color-mix(in srgb, var(--secondary) 35%, transparent) ); border: 1px solid var(--border); color: var(--foreground); } .sidebar-profile-popover-avatar-img { width: 52px; height: 52px; border-radius: 9999px; object-fit: cover; display: block; border: 1px solid var(--border); } .sidebar-profile-popover-name { font-weight: 700; font-size: 1rem; text-align: center; margin-bottom: 0.25rem; } .sidebar-profile-popover-email { font-size: 0.85rem; color: var(--muted-foreground); text-align: center; margin-bottom: 0.5rem; word-break: break-all; } .sidebar-profile-popover-role { font-size: 0.75rem; text-align: center; padding: 0.2rem 0.5rem; border-radius: 9999px; background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); margin-bottom: 0.75rem; display: inline-block; width: 100%; text-align: center; box-sizing: border-box; } .sidebar-profile-popover-link { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: calc(var(--radius) - 2px); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--foreground); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: background 0.15s ease; } .sidebar-profile-popover-link:hover { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--foreground); } /* Settings profile avatar at top (circle) */ .profile-avatar-top { display: flex; flex-direction: column; align-items: center; width: 100%; } .profile-avatar-top .profile-avatar-container { width: 96px; height: 96px; min-width: 96px; min-height: 96px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary) 20%, var(--card)); border: 2px solid var(--border); } .profile-avatar-top .profile-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .profile-avatar-container { position: relative; } .profile-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .profile-avatar-img.hidden { display: none !important; } /* ========================================================== New user tutorial overlay ========================================================== */ .eel-tutorial-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; } .eel-tutorial-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); cursor: pointer; } .eel-tutorial-card { position: relative; width: 100%; max-width: 420px; padding: 1.75rem 1.5rem; background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: calc(var(--radius) + 8px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4); } .eel-tutorial-icon-wrap { display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .eel-tutorial-icon { width: 48px; height: 48px; color: var(--primary); } .eel-tutorial-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; text-align: center; } .eel-tutorial-body { font-size: 0.95rem; line-height: 1.5; color: var(--muted-foreground); margin-bottom: 1.25rem; text-align: center; } .eel-tutorial-progress { font-size: 0.8rem; color: var(--muted-foreground); text-align: center; margin-bottom: 1.25rem; } .eel-tutorial-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .eel-tutorial-nav { display: flex; align-items: center; gap: 0.5rem; } .sidebar-name-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .sidebar-user-name { font-weight: 700; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-user-role { font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.45rem; border-radius: 4px; background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); border: 1px solid var(--sidebar-border); } .sidebar-user-meta { margin-top: 0.25rem; font-size: 0.8rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-badge { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; margin-top: 0.5rem; padding: 0.4rem 0.6rem; border-radius: 6px; background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); border: 1px solid var(--sidebar-border); font-size: 0.75rem; min-width: 0; overflow: hidden; } .sidebar-badge-label { font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.95; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-badge-value { opacity: 0.9; line-height: 1.3; overflow: hidden; text-overflow: clip; white-space: normal; } .sidebar-class-code-row { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .sidebar-copy-code-btn { border: 1px solid color-mix(in srgb, var(--sidebar-primary) 45%, var(--sidebar-border)); background: color-mix(in srgb, var(--sidebar-primary) 14%, transparent); color: var(--sidebar-primary); border-radius: 9999px; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; } .sidebar-copy-code-btn:hover { background: color-mix(in srgb, var(--sidebar-primary) 22%, transparent); border-color: color-mix(in srgb, var(--sidebar-primary) 65%, var(--sidebar-border)); } .sidebar-copy-code-btn svg { width: 0.9rem; height: 0.9rem; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .sidebar-section-title { margin: 0.75rem 0 0.25rem; padding: 0 0.25rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); } /* Exam generator: header styling */ body.exam-generator-page .generate-exam-card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); } body.exam-generator-page .generate-exam-card-header-main .card-title { font-size: 1.2rem; font-weight: 700; line-height: 1.4; } body.exam-generator-page .generate-exam-card-header-main .card-description { font-size: 0.875rem; color: var(--muted-foreground); } body.exam-generator-page .generate-exam-card-header-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.9rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--primary-foreground); box-shadow: 0 10px 26px rgba(79, 70, 229, 0.4); } .sidebar-divider { height: 1px; background: var(--sidebar-border); margin: 0.75rem 0; } /* ========================================================== Classes page cards ========================================================== */ /* Classes page: violet + green glow background (scoped) */ body.classes-page #main-content { position: relative; isolation: isolate; background: var(--background); } body.classes-page #main-content::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1100px 620px at 12% 8%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 62%), radial-gradient(1100px 620px at 92% 12%, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 64%), radial-gradient(900px 600px at 45% 95%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 68%); opacity: 1; } :root[data-theme="dark"] body.classes-page #main-content::before { opacity: 0.9; } .class-card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: calc(var(--radius) + 0.25rem); padding: 1rem; box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.35); cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease; display: flex; flex-direction: column; gap: 0.9rem; min-height: 170px; } /* Classes page: make cards feel more "violet + green" */ body.classes-page .class-card { border: 1px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient( 135deg, color-mix(in srgb, var(--primary) 50%, transparent), color-mix(in srgb, var(--secondary) 46%, transparent) ) border-box; } .class-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); box-shadow: 0 22px 45px -28px rgba(0, 0, 0, 0.55); } body.classes-page .class-card:hover { border-color: transparent; box-shadow: 0 22px 45px -28px rgba(0, 0, 0, 0.55), 0 28px 70px -54px color-mix(in srgb, var(--primary) 32%, transparent), 0 28px 70px -58px color-mix(in srgb, var(--secondary) 28%, transparent); } .class-card:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent), 0 22px 45px -28px rgba(0, 0, 0, 0.55); } /* Also theme the static "Create Class" / "Join Class" cards in classes.html */ body.classes-page #teacher-classes-grid > .card, body.classes-page #student-classes-grid > .card { border: 1px solid transparent; background: linear-gradient(color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--card) 92%, transparent)) padding-box, linear-gradient( 135deg, color-mix(in srgb, var(--primary) 45%, transparent), color-mix(in srgb, var(--secondary) 42%, transparent) ) border-box; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); } .class-card__header { display: flex; align-items: flex-start; gap: 0.75rem; } .class-card__menu-wrap { position: relative; margin-left: auto; flex: 0 0 auto; } .class-card__menu-btn { width: 1.9rem; height: 1.9rem; border-radius: 9999px; border: 1px solid color-mix(in srgb, var(--border) 92%, transparent); background: color-mix(in srgb, var(--card) 92%, transparent); color: var(--muted-foreground); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; } .class-card__menu-btn:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); background: color-mix(in srgb, var(--primary) 10%, transparent); } .class-card__menu { position: absolute; top: calc(100% + 0.25rem); right: 0; min-width: 7rem; border-radius: 0.6rem; border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); background: color-mix(in srgb, var(--card) 97%, transparent); box-shadow: 0 14px 24px -16px rgba(0, 0, 0, 0.5); z-index: 8; padding: 0.25rem; } .class-card__menu-item { width: 100%; border: none; border-radius: 0.45rem; background: transparent; color: var(--foreground); text-align: left; cursor: pointer; font-size: 0.82rem; padding: 0.45rem 0.55rem; } .class-card__menu-item:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); } .class-card__menu-item--delete { color: var(--destructive); } .class-card__icon { width: 42px; height: 42px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary) 14%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); color: var(--primary); flex: 0 0 auto; } .class-card__icon--accent { background: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--secondary) 16%, transparent) ); color: var(--foreground); } .class-card__header-text { min-width: 0; flex: 1; } .class-card__title { font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .class-card__subtitle { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.35rem; } .class-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; border-radius: 9999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 70%, transparent); font-size: 0.75rem; color: var(--foreground); max-width: 100%; } .class-pill--muted { color: var(--muted-foreground); } .class-card__meta { margin-top: 0.25rem; padding-top: 0.2rem; display: grid; gap: 0.5rem; } .class-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.85rem; } .class-meta-label { color: var(--muted-foreground); } .class-code { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 0.5rem; background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); } .class-card__footer { margin-top: auto; } .class-card--action { border-style: dashed; background: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 7%, transparent), color-mix(in srgb, var(--secondary) 6%, transparent) ); } /* Create Class (teacher) & Join Class (student) – green accent */ .card-create-class__icon { background: rgba(34, 197, 94, 0.15) !important; } .card-create-class__icon-svg { color: #16a34a !important; } .btn-create-class { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; padding: 0.625rem 1.25rem !important; } .btn-create-class:hover { background: #15803d !important; border-color: #15803d !important; color: #fff !important; } .card-join-class__icon-wrap, .card-join-class .class-card__icon.card-join-class__icon-wrap { background: rgba(34, 197, 94, 0.15) !important; } .card-join-class__icon-svg, .card-join-class .class-card__icon .card-join-class__icon-svg { color: #16a34a !important; } .btn-join-class { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; padding: 0.625rem 1.25rem !important; } .btn-join-class:hover { background: #15803d !important; border-color: #15803d !important; color: #fff !important; } /* ========================================================== Lessons page (lessons.html) ========================================================== */ /* Lessons page: violet + green glow background (scoped) */ body.lessons-page #main-content { position: relative; isolation: isolate; background: var(--background); } body.lessons-page #main-content::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1150px 640px at 12% 8%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 62%), radial-gradient(1150px 640px at 92% 12%, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 64%), radial-gradient(920px 620px at 45% 95%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 68%); opacity: 1; } :root[data-theme="dark"] body.lessons-page #main-content::before { opacity: 0.9; } /* Lessons shell card: gradient border */ body.lessons-page .lessons-shell.card { border: 1px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient( 135deg, color-mix(in srgb, var(--primary) 45%, transparent), color-mix(in srgb, var(--secondary) 40%, transparent) ) border-box; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45), 0 28px 70px -56px color-mix(in srgb, var(--primary) 32%, transparent), 0 28px 70px -60px color-mix(in srgb, var(--secondary) 28%, transparent); } /* Lesson sections: subtle gradient border */ body.lessons-page .lesson-section { border: 1px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient( 135deg, color-mix(in srgb, var(--primary) 26%, transparent), color-mix(in srgb, var(--secondary) 22%, transparent) ) border-box; } /* Topic rows: gradient border + nicer hover */ body.lessons-page .topic-row { border: 1px solid transparent; background: linear-gradient(color-mix(in srgb, var(--background) 40%, transparent), color-mix(in srgb, var(--background) 40%, transparent)) padding-box, linear-gradient( 135deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--secondary) 20%, transparent) ) border-box; } body.lessons-page .topic-row:hover { box-shadow: 0 16px 34px -26px rgba(0, 0, 0, 0.45), 0 22px 55px -48px color-mix(in srgb, var(--primary) 22%, transparent), 0 22px 55px -52px color-mix(in srgb, var(--secondary) 18%, transparent); } .lessons-page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .lessons-shell { width: 100%; max-width: 980px; padding: 0; margin: 0 auto; overflow: hidden; } .lessons-shell__top { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1rem; padding: 1.25rem 1.25rem 0.75rem; border-bottom: 1px solid var(--border); background: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--secondary) 6%, transparent) ); } .lessons-shell__subject { min-width: 0; } .lessons-shell__search .form-label { margin-bottom: 0.4rem; } .lessons-search-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.1rem 0.5rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--input-background); } .lessons-search-row .form-input { border: none; box-shadow: none; padding: 0.6rem 0.25rem; background: transparent; } .lessons-search-row .form-input:focus { border: none; box-shadow: none; } .lessons-list { padding: 1rem 1.25rem 1.25rem !important; display: grid; gap: 0.85rem; } .lesson-quarter-heading { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0; margin-bottom: 0.5rem; border-bottom: 1px solid var(--border); grid-column: 1 / -1; } .lesson-quarter-heading:first-child { margin-top: 0; } /* All quarter labels: green */ /* Quarter badge – light mode (muted green) */ .lesson-quarter-heading__badge { font-size: 0.8rem; font-weight: 700; color: #000; background: color-mix(in srgb, var(--secondary) 12%, var(--card)); padding: 0.35rem 0.65rem; border-radius: var(--radius); flex-shrink: 0; border: 1px solid #047857; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* Quarter badge – dark mode (softer green) */ :root[data-theme="dark"] .lesson-quarter-heading__badge { color: #ecfdf5; background: color-mix(in srgb, var(--secondary) 12%, var(--card)); border-color: #065f46; box-shadow: 0 0 8px rgba(4, 120, 87, 0.35); } .lesson-quarter-heading__title { font-size: 1rem; font-weight: 600; color: var(--foreground); } /* Quarter checkbox (exam generator: select all topics in quarter) */ .lesson-quarter-heading--with-checkbox { cursor: default; } .lesson-quarter-heading__checkbox-wrap { display: inline-flex; align-items: center; flex-shrink: 0; cursor: pointer; margin-right: 0.25rem; } .exam-quarter-checkbox { width: 1.1rem; height: 1.1rem; accent-color: var(--primary); cursor: pointer; } .exam-quarter-block:first-child .lesson-quarter-heading { margin-top: 0; } .lessons-empty { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem; margin: 0.75rem 1.25rem 0; border: 1px dashed var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--muted) 60%, transparent); } .lessons-empty__icon { width: 36px; height: 36px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); color: var(--primary); flex: 0 0 auto; } .lesson-section { border: 1px solid var(--border); border-radius: calc(var(--radius) + 0.15rem); overflow: hidden; background: var(--card); } .lesson-section__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0.95rem; background: color-mix(in srgb, var(--muted) 55%, transparent); border: none; cursor: pointer; color: var(--foreground); } .lesson-section__toggle:hover { background: color-mix(in srgb, var(--muted) 80%, transparent); } .lesson-section__toggle-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .lesson-section__badge { width: 34px; height: 34px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); color: var(--primary); flex: 0 0 auto; } .lesson-section__title { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .lesson-section__right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .lesson-section__count { font-size: 0.8rem; color: var(--muted-foreground); } .lesson-section__chev { transition: transform 160ms ease; color: var(--muted-foreground); } .lesson-section.open .lesson-section__chev { transform: rotate(180deg); } .lesson-section__body { padding: 0.75rem 0.75rem 0.9rem; border-top: 1px solid var(--border); } .topic-list { display: grid; gap: 0.6rem; } .topic-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0.75rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: color-mix(in srgb, var(--background) 40%, transparent); cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease; } .topic-row:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); border-color: color-mix(in srgb, var(--primary) 18%, var(--border)); transform: translateY(-1px); } .topic-row__left { display: flex; align-items: center; gap: 0.6rem; min-width: 0; } .topic-row__icon { width: 30px; height: 30px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--secondary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--secondary) 18%, var(--border)); color: var(--secondary); flex: 0 0 auto; } .topic-row__title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topic-row__btn { height: 2.2rem; padding: 0.4rem 0.75rem; } /* Lessons page: tab bar to switch PPT vs AI quizzes */ .lessons-tabs-wrap { max-width: 980px; margin-left: auto; margin-right: auto; margin-bottom: 0.5rem; } /* Same display theme as Grid/List toggle (reading-lessons style) */ .lessons-tabs { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem; border: 1px solid transparent; border-radius: 9999px; background: linear-gradient(color-mix(in srgb, var(--muted) 60%, transparent), color-mix(in srgb, var(--muted) 60%, transparent)) padding-box, linear-gradient( 135deg, color-mix(in srgb, var(--primary) 28%, transparent), color-mix(in srgb, var(--secondary) 24%, transparent) ) border-box; } .lessons-tab-btn { height: 2.25rem; padding: 0.5rem 0.9rem; border-radius: 9999px; } .lessons-tab-btn.btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; } .lessons-tab-btn.btn-outline { background: transparent; border: 1px solid transparent; } .lessons-tab-btn i { vertical-align: middle; } .lessons-view-container { display: block; } .lessons-view-container.hidden { display: none; } /* Lessons page: AI-generated quizzes card (separate from PPT container) */ .lessons-ai-quiz-card { width: 100%; max-width: 980px; margin-left: auto; margin-right: auto; border-radius: 1rem; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 1px 3px color-mix(in srgb, var(--foreground) 6%, transparent); } .lessons-ai-quiz-card.teacher-only.hidden { display: none; } .lessons-ai-quiz-card__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); background: linear-gradient( 145deg, color-mix(in srgb, var(--primary) 6%, transparent) 0%, color-mix(in srgb, var(--secondary) 5%, transparent) 100% ); } .lessons-ai-quiz-card__title { font-size: 1.25rem; font-weight: 600; margin: 0 0 0.25rem 0; letter-spacing: -0.01em; } .lessons-ai-quiz-card__subtitle { font-size: 0.875rem; margin: 0; color: var(--muted-foreground); } .lessons-ai-quiz-card__header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } /* Grid/List view toggle — same display as reading-lessons-page (.quiz-view-toggle) */ .lessons-ai-quiz-view-toggle { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem; border: 1px solid transparent; border-radius: 9999px; background: linear-gradient(color-mix(in srgb, var(--muted) 60%, transparent), color-mix(in srgb, var(--muted) 60%, transparent)) padding-box, linear-gradient( 135deg, color-mix(in srgb, var(--primary) 28%, transparent), color-mix(in srgb, var(--secondary) 24%, transparent) ) border-box; } .lessons-ai-quiz-view-toggle .btn { height: 2.25rem; padding: 0.5rem 0.85rem; border-radius: 9999px; } #lessons-ai-quiz-section[data-view="list"] .lessons-ai-quiz-view-toggle #lessons-ai-quiz-view-list, #lessons-ai-quiz-section[data-view="grid"] .lessons-ai-quiz-view-toggle #lessons-ai-quiz-view-grid { background: var(--primary); color: var(--primary-foreground); border-color: transparent; } .lessons-ai-quiz-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; padding: 1.25rem 1.5rem; min-height: 0; } #lessons-ai-quiz-section[data-view="list"] .lessons-ai-quiz-list { grid-template-columns: 1fr; gap: 0.25rem; padding: 0.75rem 1.25rem; } /* Quiz item cards inside lessons AI list */ .lessons-ai-quiz-list .lessons-ai-quiz-item { border-radius: 0.75rem; border: 1px solid var(--border); overflow: visible; position: relative; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .lessons-ai-quiz-list .lessons-ai-quiz-item.lessons-ai-quiz-item--menu-open { z-index: 30; } .lessons-ai-quiz-list .lessons-ai-quiz-item:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); box-shadow: 0 2px 8px color-mix(in srgb, var(--foreground) 8%, transparent); } .lessons-ai-quiz-list .lessons-ai-quiz-item.created-quiz-card--open { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 12%, transparent); } .lessons-ai-quiz-list .lessons-ai-quiz-item .created-quiz-card__inner { padding: 1rem 1.25rem; } #lessons-ai-quiz-section[data-view="list"] .lessons-ai-quiz-item .created-quiz-card__inner { padding: 0.625rem 1rem; } .lessons-ai-quiz-list .lessons-ai-quiz-item .created-quiz-card__details { padding-top: 0.75rem; margin-top: 0.25rem; } .lessons-ai-quiz-list .lessons-ai-quiz-item .created-quiz-card__actions { padding-top: 0.75rem; margin-top: 0.5rem; } .lessons-ai-quiz-status-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 9999px; margin-top: 0.25rem; } .lessons-ai-quiz-status-badge.created-quiz-status--open { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); } .lessons-ai-quiz-status-badge.created-quiz-status--pending { background: color-mix(in srgb, var(--secondary) 14%, transparent); color: var(--secondary); } .lessons-ai-quiz-status-badge.created-quiz-status--closed, .lessons-ai-quiz-status-badge.created-quiz-status--none { background: color-mix(in srgb, var(--muted-foreground) 12%, transparent); color: var(--muted-foreground); } /* Empty state: icon + title + text */ .lessons-ai-quiz-list__empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem; min-height: 12rem; } .lessons-ai-quiz-list__empty-icon { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--muted-foreground); margin-bottom: 1rem; } .lessons-ai-quiz-list__empty-icon svg { color: var(--muted-foreground); } .lessons-ai-quiz-list__empty-img { display: block; max-width: 280px; width: 100%; height: auto; margin: 0 auto 1rem; border-radius: 0.5rem; } /* Create-quiz empty state: eel character – more engaging layout and styling */ .lessons-ai-quiz-list__empty--create-quiz { padding: 2.5rem 1.5rem 3rem; min-height: 16rem; background: linear-gradient( 180deg, color-mix(in srgb, var(--primary) 4%, transparent) 0%, transparent 45%, color-mix(in srgb, var(--primary) 3%, transparent) 100% ); border-radius: 1rem; animation: lessons-empty-fade-in 0.5s ease-out; } @keyframes lessons-empty-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .lessons-ai-quiz-list__empty--create-quiz .lessons-ai-quiz-list__empty-visual { position: relative; margin-bottom: 1.25rem; } .lessons-ai-quiz-list__empty--create-quiz .lessons-ai-quiz-list__empty-img { max-width: 320px; border-radius: 0.75rem; box-shadow: 0 8px 32px color-mix(in srgb, var(--primary) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent); transition: transform 0.25s ease, box-shadow 0.25s ease; } .lessons-ai-quiz-list__empty--create-quiz .lessons-ai-quiz-list__empty-img:hover { transform: scale(1.02); box-shadow: 0 12px 40px color-mix(in srgb, var(--primary) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent); } .lessons-ai-quiz-list__empty--create-quiz .lessons-ai-quiz-list__empty-title { font-size: 1.125rem; font-weight: 600; color: var(--foreground); margin: 0 0 0.5rem 0; letter-spacing: 0.01em; } .lessons-ai-quiz-list__empty--create-quiz .lessons-ai-quiz-list__empty-text { font-size: 0.9375rem; max-width: 22rem; line-height: 1.5; color: var(--muted-foreground); } .lessons-ai-quiz-list__empty--create-quiz .lessons-ai-quiz-list__empty-text strong { color: var(--foreground); font-weight: 600; } .lessons-ai-quiz-list__empty-title { font-size: 1rem; font-weight: 600; color: var(--foreground); margin: 0 0 0.25rem 0; } .lessons-ai-quiz-list__empty-text { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; max-width: 20rem; line-height: 1.45; } @media (max-width: 900px) { .lessons-shell__top { grid-template-columns: 1fr; } .lessons-ai-quiz-card__header { flex-direction: column; align-items: flex-start; } } @media (max-width: 520px) { .topic-row { flex-direction: column; align-items: stretch; } .topic-row__right .topic-row__btn { width: 100%; } } /* ========================================================== Lessons page: responsive for all devices ========================================================== */ body.lessons-page #main-content { padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); } @media (max-width: 768px) { body.lessons-page #main-content > div { padding: 1.5rem; margin-left: auto; margin-right: auto; max-width: 100%; box-sizing: border-box; } body.lessons-page .lessons-page-header h2 { font-size: 1.375rem; } body.lessons-page .lessons-page-header p { font-size: 0.875rem; } body.lessons-page .lessons-tabs-wrap { margin-bottom: 0.75rem; } body.lessons-page .lessons-tabs { flex-wrap: wrap; width: 100%; max-width: 100%; } body.lessons-page .lessons-tab-btn { flex: 1 1 auto; min-width: 0; font-size: 0.8125rem; padding: 0.5rem 0.65rem; } body.lessons-page .lessons-tab-btn i { margin-right: 0.35rem; } body.lessons-page .lessons-shell, body.lessons-page .lessons-ai-quiz-card, body.lessons-page .lessons-tabs-wrap { max-width: 100%; } body.lessons-page .lessons-shell__top { padding: 1rem 1rem 0.5rem; } body.lessons-page .lessons-ai-quiz-card__header { padding: 1rem 1rem 0.75rem; } body.lessons-page .lessons-ai-quiz-card__title { font-size: 1.125rem; } body.lessons-page .lessons-ai-quiz-card__header-actions { width: 100%; gap: 0.5rem; } body.lessons-page .lessons-ai-quiz-view-toggle { flex-wrap: wrap; } body.lessons-page .lessons-ai-quiz-view-toggle .btn { min-height: 2.25rem; } body.lessons-page .lessons-ai-quiz-list { padding: 1rem; } body.lessons-page #lessons-ai-quiz-section[data-view="list"] .lessons-ai-quiz-list { padding: 0.75rem 1rem; } body.lessons-page .lesson-section__title { font-size: 1rem; } body.lessons-page .topic-row { padding: 0.75rem 1rem; } } @media (max-width: 640px) { body.lessons-page #main-content > div { padding: 1.5rem; } body.lessons-page .lessons-page-header h2 { font-size: 1.25rem; } body.lessons-page .lessons-ai-quiz-list { grid-template-columns: 1fr; gap: 0.75rem; } body.lessons-page .lessons-ai-quiz-item .created-quiz-card__inner { padding: 0.875rem 1rem; } } @media (max-width: 520px) { body.lessons-page #main-content > div { padding: 1.5rem; } body.lessons-page .lessons-page-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } body.lessons-page .lessons-tabs { gap: 0.25rem; padding: 0.25rem; } body.lessons-page .lessons-tab-btn { padding: 0.5rem 0.5rem; font-size: 0.75rem; } body.lessons-page .lessons-tab-btn i { width: 1rem; height: 1rem; } body.lessons-page .lessons-shell__top { padding: 0.75rem 0.75rem 0.5rem; } body.lessons-page .lessons-ai-quiz-card__header { padding: 0.75rem 0.75rem 0.5rem; } body.lessons-page .lessons-ai-quiz-card__title { font-size: 1rem; } body.lessons-page .lessons-ai-quiz-card__subtitle { font-size: 0.8125rem; } body.lessons-page .lessons-ai-quiz-list { padding: 0.75rem; } body.lessons-page #lessons-ai-quiz-section[data-view="list"] .lessons-ai-quiz-list { padding: 0.5rem 0.75rem; } body.lessons-page .lessons-ai-quiz-list__empty { padding: 2rem 1rem; min-height: 10rem; } body.lessons-page .lesson-section__toggle { padding: 0.75rem 1rem; } body.lessons-page .topic-row__title { white-space: normal; word-break: break-word; } } @media (max-width: 380px) { body.lessons-page .lessons-tab-btn { padding: 0.45rem 0.4rem; font-size: 0.6875rem; } body.lessons-page .lessons-tabs { padding: 0.2rem; } body.lessons-page .lessons-ai-quiz-view-toggle .btn { padding: 0.4rem 0.5rem; font-size: 0.8125rem; } body.lessons-page .teacher-only.btn { width: 100%; justify-content: center; } } /* Lesson modal: full viewport on small screens */ @media (max-width: 768px) { body.lessons-page #lesson-modal .modal-card { width: 98vw !important; max-width: none; max-height: 94vh; margin: 0.5rem; } body.lessons-page #lesson-modal .lesson-viewer { min-height: 55vh; max-height: calc(94vh - 72px); } } @media (max-width: 520px) { body.lessons-page #lesson-modal .modal-card { width: 100vw !important; max-height: 96vh; margin: 0; border-radius: 0; } body.lessons-page #lesson-modal .modal-content { padding: 0.5rem !important; } } /* ========================================================== Responsive lesson/PPT viewer modal (lessons.html) ========================================================== */ #lesson-modal .modal-card { width: min(1500px, 96vw) !important; max-height: 92vh !important; padding: 0 !important; display: flex; flex-direction: column; overflow: hidden; } #lesson-modal .modal-header { flex-shrink: 0; } .lesson-view-toolbar { flex-shrink: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 25%, transparent); } .lesson-view-toolbar__label { font-size: 0.875rem; color: var(--muted-foreground); } .lesson-view-toolbar__options { display: flex; gap: 0.25rem; } .lesson-view-opt { font-size: 0.8125rem; } .lesson-view-opt.active, .lesson-view-opt[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); } #lesson-modal .modal-content { display: flex; flex: 1; min-height: 0; padding: 0.75rem 1rem !important; overflow: hidden; } #lesson-modal .modal-footer { display: none; } /* Review my answers modal (lessons page) */ #lesson-review-modal .lesson-review-modal-card, #student-reading-review-modal .lesson-review-modal-card, #student-pron-review-modal .lesson-review-modal-card { width: min(96vw, 980px); max-height: 90vh; display: flex; flex-direction: column; border-radius: calc(var(--radius) + 12px); border: 1px solid var(--border); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22), 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent); overflow: hidden; } #lesson-review-modal .lesson-review-modal-content, #student-reading-review-modal .lesson-review-modal-content, #student-pron-review-modal .lesson-review-modal-content { overflow-y: auto; min-height: 0; flex: 1; padding: 1rem 1.25rem 1.25rem; background: linear-gradient( 180deg, color-mix(in srgb, var(--primary) 4%, var(--card)) 0%, var(--card) 35% ); } .lesson-review-loading, .lesson-review-error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; color: var(--muted-foreground); } .lesson-review-loading .loading-spinner { margin-bottom: 0.75rem; } .lesson-review-error.hidden, .lesson-review-loading.hidden, .lesson-review-body.hidden { display: none !important; } .lesson-review-body .quiz-review-answers { margin-bottom: 0; } @media (max-width: 768px) { #lesson-review-modal .lesson-review-modal-card, #student-reading-review-modal .lesson-review-modal-card, #student-pron-review-modal .lesson-review-modal-card { width: 96vw; max-height: 92vh; } #lesson-review-modal .lesson-review-modal-content, #student-reading-review-modal .lesson-review-modal-content, #student-pron-review-modal .lesson-review-modal-content { padding: 0.75rem 0.85rem 1rem; } } .lesson-viewer { width: 100%; height: 100%; min-height: 60vh; max-height: calc(92vh - 80px); border-radius: var(--radius); border: 1px solid var(--border); background: var(--background); display: block; } #lesson-modal-content { position: relative; } .lesson-viewer-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; background: var(--background); border-radius: var(--radius); z-index: 1; } .lesson-viewer-loading.hidden { display: none !important; } .lesson-viewer-loading-spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: lesson-viewer-spin 0.8s linear infinite; } .lesson-viewer-loading-text { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; } @keyframes lesson-viewer-spin { to { transform: rotate(360deg); } } /* ============================================ Lesson Presentation Modal — Beautiful & Engaging ============================================ */ .lesson-presentation-card { width: 100% !important; max-width: 1400px !important; max-height: 88vh !important; overflow: hidden; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--border); } .lesson-presentation-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--secondary) 8%, transparent)); border-bottom: 1px solid var(--border); } .lesson-presentation-header-inner { display: flex; align-items: center; gap: 1rem; } .lesson-presentation-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; flex-shrink: 0; } .lesson-presentation-icon-svg { width: 24px; height: 24px; } .lesson-presentation-title-wrap { min-width: 0; } .lesson-presentation-title { font-size: 1.25rem; font-weight: 700; color: var(--foreground); margin: 0; line-height: 1.3; } .lesson-presentation-subtitle { font-size: 0.8rem; color: var(--muted-foreground); margin: 0.2rem 0 0; } .lesson-presentation-actions { display: flex; align-items: center; gap: 0.5rem; } .lesson-download-btn { display: inline-flex; align-items: center; gap: 0.35rem; } .lesson-presentation-close { padding: 0.5rem; border-radius: 0.5rem; color: var(--muted-foreground); transition: color 0.2s, background 0.2s; } .lesson-presentation-close:hover { color: var(--foreground); background: color-mix(in srgb, var(--primary) 10%, transparent); } .lesson-presentation-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; } .lesson-presentation-loading { display: flex; align-items: center; justify-content: center; min-height: 320px; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 4%, transparent) 0%, transparent 100%); } .lesson-presentation-loading-content { text-align: center; } .lesson-presentation-loading-dots { display: flex; justify-content: center; gap: 0.35rem; margin-top: 1rem; } .lesson-presentation-loading-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: lesson-loading-dot 1.4s ease-in-out infinite both; } .lesson-presentation-loading-dots span:nth-child(1) { animation-delay: -0.32s; } .lesson-presentation-loading-dots span:nth-child(2) { animation-delay: -0.16s; } @keyframes lesson-loading-dot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } /* AI-generated topic presentation content */ .lesson-topic-content { padding: 1.5rem 1.75rem; max-height: 65vh; overflow-y: auto; line-height: 1.7; color: var(--foreground); background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 40%), radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--secondary) 7%, transparent), transparent 36%), linear-gradient(180deg, color-mix(in srgb, var(--primary) 3%, transparent) 0%, transparent 100%); animation: lesson-content-fade-in 0.35s ease-out; } @keyframes lesson-content-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .lesson-topic-content::-webkit-scrollbar { width: 8px; } .lesson-topic-content::-webkit-scrollbar-track { background: var(--muted); border-radius: 4px; } .lesson-topic-content::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--primary) 40%, transparent); border-radius: 4px; } .lesson-topic-content::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--primary) 55%, transparent); } .lesson-topic-deck { display: flex; flex-direction: column; gap: 1.2rem; } .lesson-topic-slide { position: relative; overflow: hidden; border-radius: 1.25rem; border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, white 4%), var(--card)); box-shadow: 0 22px 44px -34px rgba(15, 23, 42, 0.35), 0 24px 60px -52px color-mix(in srgb, var(--primary) 18%, transparent); } .lesson-topic-slide::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--primary), var(--secondary)); opacity: 0.95; } .lesson-topic-slide__header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 1rem 1.1rem 0.85rem; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--secondary) 8%, transparent)); border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border)); } .lesson-topic-slide__badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); color: color-mix(in srgb, var(--primary) 72%, var(--foreground)); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; } .lesson-topic-slide__title { flex: 1 1 16rem; min-width: 0; } .lesson-topic-slide__title h2 { margin: 0 !important; } .lesson-topic-slide__body { padding: 1.15rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: 0.15rem; } .lesson-topic-content h2 { font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 0.75rem; padding: 0.75rem 1rem; padding-left: 1rem; border-left: 4px solid var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); border-radius: 0 0.5rem 0.5rem 0; color: var(--foreground); } .lesson-topic-content h2:first-child { margin-top: 0; } .lesson-topic-content h3 { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--card)); font-size: 1.05rem; font-weight: 600; margin: 1.25rem 0 0.5rem; color: var(--primary); } .lesson-topic-content .lesson-topic-accent-heading { font-weight: 700; } .lesson-topic-content .lesson-topic-accent-heading--scenario { color: #7c3aed; background: color-mix(in srgb, #7c3aed 10%, var(--card)); } .lesson-topic-content .lesson-topic-accent-heading--takeaway { color: #0f766e; background: color-mix(in srgb, #14b8a6 12%, var(--card)); } .lesson-topic-content p { margin: 0.5rem 0; color: var(--muted-foreground); font-size: 0.95rem; } .lesson-topic-content ul { margin: 0.75rem 0; padding-left: 1.5rem; list-style: none; } .lesson-topic-content ul li { position: relative; margin: 0.4rem 0; padding-left: 1.25rem; color: var(--muted-foreground); font-size: 0.95rem; } .lesson-topic-content ul li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); } .lesson-topic-content strong { color: var(--foreground); font-weight: 600; } :root[data-theme="dark"] .lesson-topic-slide { background: linear-gradient(180deg, #12203a, #0f172a); border-color: rgba(167, 139, 250, 0.24); box-shadow: 0 24px 48px -36px rgba(2, 6, 23, 0.82), 0 30px 72px -58px rgba(139, 92, 246, 0.18); } :root[data-theme="dark"] .lesson-topic-slide__header { background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(34, 197, 94, 0.10)); border-bottom-color: rgba(148, 163, 184, 0.14); } :root[data-theme="dark"] .lesson-topic-slide__badge { background: rgba(139, 92, 246, 0.18); border-color: rgba(167, 139, 250, 0.28); color: #eadcff; } /* Fullscreen presentation (slideshow) overlay */ .lesson-slideshow-overlay { position: fixed; inset: 0; z-index: 10000; background: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; } .lesson-slideshow-overlay.hidden { display: none !important; } .lesson-slideshow-pdf { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 0; } .lesson-slideshow-pdf.hidden { display: none !important; } #lesson-slideshow-canvas { max-width: 100%; max-height: calc(100vh - 80px); object-fit: contain; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } .lesson-slideshow-controls { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; padding: 0.5rem 1rem; border-radius: var(--radius); background: color-mix(in srgb, var(--background) 95%, transparent); border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .lesson-slideshow-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); color: var(--foreground); cursor: pointer; transition: background 0.15s, color 0.15s; } .lesson-slideshow-btn:hover { background: var(--accent); color: var(--foreground); } .lesson-slideshow-pages { font-size: 0.9375rem; font-weight: 500; color: var(--foreground); min-width: 4ch; text-align: center; } .lesson-slideshow-iframe-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #111; } .lesson-slideshow-iframe-wrap.hidden { display: none !important; } .lesson-slideshow-iframe { width: 100%; height: 100%; border: none; background: #fff; } .lesson-slideshow-exit { position: fixed; top: 1rem; right: 1rem; z-index: 10001; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--background) 95%, transparent); color: var(--foreground); font-size: 0.875rem; cursor: pointer; transition: background 0.15s; } .lesson-slideshow-exit:hover { background: var(--accent); } /* ========================================================== Exam generator: topic dropdown (theme-aware) ========================================================== */ .exam-topic-dropdown { background: color-mix(in srgb, var(--muted) 65%, transparent); border-color: var(--border); color: var(--foreground); } .exam-topic-lesson-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-weight: 800; cursor: pointer; padding: 0.6rem 0.75rem; border-radius: calc(var(--radius) - 2px); border: 1px solid var(--border); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--foreground); } .exam-topic-lesson-header:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); } .exam-topic-topics { padding: 0.5rem 0.85rem 0.65rem; margin-top: 0.35rem; margin-bottom: 0.5rem; border-left: 2px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: calc(var(--radius) - 2px); background: color-mix(in srgb, var(--background) 55%, transparent); } .exam-topic-option { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.25rem 0; color: var(--foreground); font-size: 0.9rem; } .exam-topic-checkbox { margin-top: 0.15rem; accent-color: var(--primary); } /* ========================================================== Violet + green page theming (scoped per page) Recitation / Exam generator / Student progress / Settings ========================================================== */ body.recitation-page #main-content, body.exam-generator-page #main-content, body.student-progress-page #main-content, body.settings-page #main-content, body.deleted-archive-page #main-content { position: relative; isolation: isolate; background: var(--background); } body.recitation-page #main-content::before, body.exam-generator-page #main-content::before, body.student-progress-page #main-content::before, body.settings-page #main-content::before, body.deleted-archive-page #main-content::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1150px 640px at 12% 8%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 62%), radial-gradient(1150px 640px at 92% 12%, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 64%), radial-gradient(920px 620px at 45% 95%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 68%); opacity: 1; } :root[data-theme="dark"] body.recitation-page #main-content::before, :root[data-theme="dark"] body.exam-generator-page #main-content::before, :root[data-theme="dark"] body.student-progress-page #main-content::before, :root[data-theme="dark"] body.settings-page #main-content::before, :root[data-theme="dark"] body.deleted-archive-page #main-content::before { opacity: 0.9; } /* Gradient border utility for cards (doesn't replace card background) */ body.recitation-page #main-content .card, body.exam-generator-page #main-content .card, body.settings-page #main-content .card, body.deleted-archive-page #main-content .card { position: relative; border: 1px solid color-mix(in srgb, var(--border) 85%, transparent); background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); } body.recitation-page #main-content .card::before, body.exam-generator-page #main-content .card::before, body.settings-page #main-content .card::before, body.deleted-archive-page #main-content .card::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 40%, transparent), color-mix(in srgb, var(--secondary) 34%, transparent) ); pointer-events: none; opacity: 0.85; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } body.recitation-page #main-content .card:hover, body.exam-generator-page #main-content .card:hover, body.settings-page #main-content .card:hover, body.deleted-archive-page #main-content .card:hover { box-shadow: 0 22px 45px -28px rgba(0, 0, 0, 0.55), 0 28px 70px -54px color-mix(in srgb, var(--primary) 32%, transparent), 0 28px 70px -58px color-mix(in srgb, var(--secondary) 28%, transparent); } /* Exam generator: same-width quantity inputs on all devices */ body.exam-generator-page .exam-quantity-wrap { flex-shrink: 0; min-width: 6.5rem; } body.exam-generator-page .exam-quantity-input { width: 5.5rem; min-width: 3.5rem; height: 2rem; box-sizing: border-box; text-align: center; } /* Exam generator + Recitation: Question Types & Quantity – mobile M and S */ @media (max-width: 480px) { body.exam-generator-page .exam-quantity-row { flex-wrap: wrap !important; gap: 0.5rem !important; } body.exam-generator-page .exam-quantity-row .exam-quantity-wrap { width: 100% !important; min-width: 0 !important; margin-top: 0.25rem; padding-left: 1.75rem; justify-content: flex-start; } body.exam-generator-page .exam-quantity-row label { min-width: 0; flex: 1 1 auto; } body.exam-generator-page .exam-quantity-input { min-width: 3.5rem; } /* Recitation: stack label and input row on small screens */ .ai-quiz-type-qty-row { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0.5rem 0.75rem; align-items: center; } .ai-quiz-type-qty-row .ai-quiz-type-cb { grid-column: 1; grid-row: 1; align-self: center; } .ai-quiz-type-qty-row .ai-quiz-type-qty-label { grid-column: 2; grid-row: 1; min-width: 0; flex: none; } .ai-quiz-type-qty-row .ai-quiz-type-qty-input { grid-column: 1; grid-row: 2; width: 4rem; min-width: 4rem; justify-self: start; } .ai-quiz-type-qty-row .ai-quiz-type-qty-unit { grid-column: 2; grid-row: 2; align-self: center; justify-self: start; } } @media (max-width: 360px) { body.exam-generator-page .exam-quantity-row { padding: 0.6rem 0.75rem !important; } body.exam-generator-page .exam-quantity-row .exam-quantity-wrap { padding-left: 1.5rem; } .ai-quiz-type-qty-row { padding: 0.6rem 0.75rem !important; } .ai-quiz-type-qty-label { font-size: 0.875rem; } .ai-quiz-type-qty-input { width: 3.5rem; min-width: 3.5rem; font-size: 0.875rem; } } /* Recitation main content layout */ .recitation-main-wrap { padding: 1.5rem; max-width: 1100px; margin: 0 auto; } /* Shared page header (recitation-style) – use on all app pages */ .page-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 14%, var(--card)), color-mix(in srgb, var(--secondary) 12%, var(--card)) ); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); } .page-header-character { width: auto; height: 3.5rem; max-height: 4rem; object-fit: contain; flex-shrink: 0; margin-left: auto; order: 1; } .page-header-icon { width: 3.5rem; height: 3.5rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--primary-foreground); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent); } .page-header-title { font-size: 1.75rem; font-weight: 700; color: var(--foreground); margin: 0 0 0.25rem 0; letter-spacing: -0.02em; } .page-header-subtitle { font-size: 0.9375rem; color: var(--muted-foreground); margin: 0; line-height: 1.5; } .page-header-actions { margin-left: auto; flex-shrink: 0; } /* Classes page: tighter spacing between header and content */ body.classes-page .classes-header-wrap { padding: 1.5rem 1.5rem 0.75rem; } body.classes-page .classes-header-wrap .page-header { margin-bottom: 0.75rem; } body.classes-page #classes-grid-teacher > div, body.classes-page #classes-grid-student { padding-top: 0.75rem; } /* Recitation page header (uses shared look, optional extra spacing) */ .recitation-page-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 14%, var(--card)), color-mix(in srgb, var(--secondary) 12%, var(--card)) ); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); } .recitation-page-header-icon { width: 3.5rem; height: 3.5rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--primary-foreground); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent); } .recitation-page-title { font-size: 1.75rem; font-weight: 700; color: var(--foreground); margin: 0 0 0.25rem 0; letter-spacing: -0.02em; } .recitation-page-subtitle { font-size: 0.9375rem; color: var(--muted-foreground); margin: 0; line-height: 1.5; } .recitation-setup { display: flex; flex-direction: column; gap: 1.75rem; } .recitation-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 768px) { .recitation-setup-grid { grid-template-columns: 1fr; } .recitation-main-wrap { padding: 1.5rem; } .recitation-page-header, .page-header { flex-direction: column; align-items: flex-start; text-align: left; } .page-header-actions { margin-left: 0; width: 100%; } } .recitation-card { border-radius: calc(var(--radius) + 4px); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .recitation-card:hover { transform: translateY(-2px); } .recitation-card-header { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--primary) 6%, var(--card)); } .recitation-card-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--primary-foreground); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .recitation-card-title { font-size: 1.0625rem; font-weight: 600; color: var(--foreground); margin: 0 0 0.15rem 0; } .recitation-card-desc { font-size: 0.8125rem; color: var(--muted-foreground); margin: 0; line-height: 1.4; } .recitation-card-body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .recitation-select { width: 100%; max-width: 100% !important; } /* Topic searchable dropdown */ .recitation-topic-wrap { position: relative; width: 100%; } .recitation-topic-select-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .recitation-topic-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); font-size: 1rem; color: var(--foreground); cursor: pointer; text-align: left; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .recitation-topic-trigger:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); } .recitation-topic-trigger:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); } .recitation-topic-trigger-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recitation-topic-trigger-icon { flex-shrink: 0; color: var(--muted-foreground); transition: transform 0.2s ease; } .recitation-topic-wrap[data-open="true"] .recitation-topic-trigger-icon { transform: rotate(180deg); } .recitation-topic-dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 0.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); z-index: 50; max-height: 18rem; display: flex; flex-direction: column; } .recitation-topic-dropdown.hidden { display: none !important; } .recitation-topic-search-wrap { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--background) 50%, var(--card)); } .recitation-topic-search-icon { flex-shrink: 0; color: var(--muted-foreground); } .recitation-topic-search-input { flex: 1; min-width: 0; padding: 0.35rem 0; border: none; background: transparent; font-size: 0.9375rem; color: var(--foreground); outline: none; } .recitation-topic-search-input::placeholder { color: var(--muted-foreground); } .recitation-topic-options { overflow-y: auto; padding: 0.25rem; max-height: 14rem; } .recitation-topic-option-group { padding: 0.25rem 0; } .recitation-topic-option-group-label { padding: 0.35rem 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted-foreground); } .recitation-topic-option { display: block; width: 100%; padding: 0.5rem 0.75rem; border: none; border-radius: 0.375rem; background: transparent; font-size: 0.9375rem; text-align: left; color: var(--foreground); cursor: pointer; transition: background 0.15s ease; } .recitation-topic-option:hover { background: color-mix(in srgb, var(--primary) 12%, var(--card)); } .recitation-topic-option[aria-selected="true"] { background: color-mix(in srgb, var(--primary) 18%, var(--card)); color: var(--primary); } .recitation-topic-option.hidden { display: none !important; } .recitation-question-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .recitation-question-type-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); cursor: pointer; font-size: 0.875rem; color: var(--foreground); transition: border-color 0.2s, background 0.2s; } .recitation-question-type-item:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--card)); } .recitation-question-type-item:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--card)); } .recitation-question-type-item input { accent-color: var(--primary); cursor: pointer; width: 1rem; height: 1rem; } @media (max-width: 480px) { .recitation-question-types { grid-template-columns: 1fr; } } .recitation-config-row { display: flex; flex-direction: column; gap: 0.35rem; } .recitation-count-select { max-width: 8rem; } .recitation-topic-quantity-section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .recitation-section-header { margin: 0 0 0.75rem 0; font-size: 1rem; font-weight: 600; color: var(--foreground); } .recitation-time-limit-wrap { margin-bottom: 1rem; } .recitation-time-limit-title { margin: 0 0 0.5rem 0; font-size: 0.9375rem; font-weight: 600; color: var(--foreground); } .recitation-time-limit-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .recitation-time-limit-input { width: 5rem; min-width: 4rem; } .recitation-time-limit-unit { width: auto; min-width: 7rem; } .recitation-pick-mode-wrap { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .recitation-pick-mode-title { margin: 0 0 0.75rem 0; font-size: 0.9375rem; font-weight: 600; color: var(--foreground); } .recitation-pick-mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: stretch; } @media (max-width: 520px) { .recitation-pick-mode-options { grid-template-columns: 1fr; } } .recitation-pick-mode-card { position: relative; display: flex; cursor: pointer; margin: 0; min-height: 0; } .recitation-pick-mode-card .recitation-pick-mode-radio { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; } .recitation-pick-mode-card-inner { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; width: 100%; flex: 1; min-height: 5.5rem; border: 2px solid var(--border); border-radius: 0.75rem; background: color-mix(in srgb, var(--card) 98%, var(--background)); transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .recitation-pick-mode-card:hover .recitation-pick-mode-card-inner { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: color-mix(in srgb, var(--primary) 4%, var(--card)); } .recitation-pick-mode-card .recitation-pick-mode-radio:focus-visible + .recitation-pick-mode-card-inner { outline: 2px solid var(--primary); outline-offset: 2px; } .recitation-pick-mode-card .recitation-pick-mode-radio:checked + .recitation-pick-mode-card-inner { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--card)); box-shadow: 0 0 0 1px var(--primary); } .recitation-pick-mode-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; background: color-mix(in srgb, var(--primary) 14%, var(--card)); color: var(--primary); } .recitation-pick-mode-card .recitation-pick-mode-radio:checked + .recitation-pick-mode-card-inner .recitation-pick-mode-icon { background: color-mix(in srgb, var(--primary) 22%, var(--card)); color: var(--primary); } .recitation-pick-mode-card-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .recitation-pick-mode-label { font-size: 0.9375rem; font-weight: 600; color: var(--foreground); } .recitation-pick-mode-desc { display: block; font-size: 0.8125rem; line-height: 1.4; color: var(--muted-foreground); margin: 0; } .recitation-generate-btn { width: 100%; margin-top: 0.25rem; padding: 0.75rem 1rem; font-weight: 600; } .recitation-generated-summary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: var(--radius); background: color-mix(in srgb, var(--primary) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); color: var(--foreground); font-size: 0.9375rem; } .recitation-generated-summary.hidden { display: none; } .recitation-cta-wrap { display: flex; justify-content: center; padding-top: 0.5rem; } .recitation-start-btn { padding: 0.875rem 2rem; font-size: 1.0625rem; font-weight: 600; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--primary-foreground); border: none; box-shadow: 0 4px 20px color-mix(in srgb, var(--primary) 40%, transparent); transition: transform 0.2s, box-shadow 0.2s; } .recitation-start-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 28px color-mix(in srgb, var(--primary) 45%, transparent); } .recitation-start-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* ========== Recitation Question Modal – clear, user-friendly ========== */ .recitation-question-overlay { display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); } .recitation-question-card { width: 100%; max-width: 60rem; max-height: 90vh; display: flex; flex-direction: column; background: var(--card); border-radius: 1.25rem; box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--border); overflow: hidden; animation: recitationQuestionIn 0.3s ease-out; } @keyframes recitationQuestionIn { from { opacity: 0; transform: scale(0.96) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } .recitation-question-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 10%, var(--card)), var(--card)); border-bottom: 1px solid var(--border); flex-shrink: 0; } .recitation-question-header-inner { min-width: 0; } .recitation-question-student-label { display: block; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.2rem; } .recitation-question-card .recitation-student-name { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--foreground); line-height: 1.3; } .recitation-question-meta-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; flex-wrap: wrap; } .recitation-question-progress { font-size: 0.875rem; color: var(--muted-foreground); } .recitation-question-type-badge { display: inline-block; padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 600; text-transform: capitalize; border-radius: 9999px; background: color-mix(in srgb, var(--primary) 18%, var(--card)); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); } .recitation-question-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; } /* Recitation countdown timer – progress bar + time display */ .recitation-timer-wrap { display: flex; flex-direction: row; align-items: center; gap: 0.6rem; width: 100%; position: sticky; top: 0; z-index: 8; padding: 0.65rem 0.75rem; border-radius: 0.75rem; background: color-mix(in srgb, var(--card) 92%, white 8%); border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border)); box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.35); backdrop-filter: blur(2px); } .recitation-timer-bar-track { flex: 1 1 auto; min-width: 0; height: 0.5rem; border-radius: 9999px; background: var(--muted); overflow: hidden; border: 1px solid var(--border); } .recitation-timer-bar-fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width 1s linear, background 0.3s ease; } .recitation-timer-wrap[data-state="low"] .recitation-timer-bar-fill { background: linear-gradient(90deg, #f59e0b, #f97316); } .recitation-timer-wrap[data-state="critical"] .recitation-timer-bar-fill { background: linear-gradient(90deg, var(--destructive), #dc2626); transition: width 1s linear; } .recitation-timer-wrap[data-state="up"] .recitation-timer-bar-fill { width: 0% !important; background: var(--destructive); } .recitation-timer-display { display: flex; align-items: center; gap: 0.35rem; flex-wrap: nowrap; white-space: nowrap; flex: 0 0 auto; } .recitation-timer-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--foreground); letter-spacing: -0.02em; transition: color 0.3s ease; } .recitation-timer-label { font-size: 0.9375rem; font-weight: 500; color: var(--muted-foreground); } .recitation-timer-wrap[data-state="low"] .recitation-timer-value { color: #b45309; } .recitation-timer-wrap[data-state="critical"] .recitation-timer-value { color: var(--destructive); } .recitation-timer-wrap[data-state="up"] .recitation-timer-value { color: var(--destructive); font-size: 1.25rem; } .recitation-timer-wrap[data-state="up"] .recitation-timer-label { display: none; } .recitation-question-block { padding: 1rem 1.25rem; border-radius: 0.75rem; background: var(--muted); border: 1px solid var(--border); } .recitation-question-text { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--foreground); } .recitation-answer-section { display: flex; flex-direction: column; gap: 0.5rem; } .recitation-answer-label { font-size: 0.875rem; font-weight: 600; color: var(--foreground); } .recitation-answer-input-container .form-input, .recitation-answer-input-container .radio-group { width: 100%; } .recitation-answer-input-container .radio-label { padding: 0.75rem 1rem; border-radius: 0.5rem; border: 1px solid var(--border); transition: border-color 0.2s, background 0.2s; } .recitation-answer-input-container .radio-label:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); background: color-mix(in srgb, var(--primary) 6%, var(--card)); } .recitation-result-section { padding: 1.5rem 1.5rem; border-radius: 1rem; border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s ease; } .recitation-result-section.result-correct { background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 12%, var(--card)) 0%, color-mix(in srgb, var(--secondary) 6%, var(--card)) 100%); border-color: color-mix(in srgb, var(--secondary) 45%, var(--border)); box-shadow: 0 4px 24px color-mix(in srgb, var(--secondary) 18%, transparent); } .recitation-result-section.result-incorrect { background: linear-gradient(135deg, color-mix(in srgb, var(--destructive) 8%, var(--card)) 0%, color-mix(in srgb, var(--destructive) 4%, var(--card)) 100%); border-color: color-mix(in srgb, var(--destructive) 30%, var(--border)); box-shadow: 0 4px 24px color-mix(in srgb, var(--destructive) 12%, transparent); } .recitation-result-content { display: flex; align-items: flex-start; gap: 1.25rem; } .recitation-result-content .recitation-result-character { flex-shrink: 0; width: 8.5rem; height: auto; object-fit: contain; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.1)); } .recitation-result-section.result-correct .recitation-result-character { animation: recitation-result-celebrate 0.5s ease-out; } .recitation-result-section.result-incorrect .recitation-result-character { opacity: 0.92; } @keyframes recitation-result-celebrate { 0% { transform: scale(0.9); opacity: 0.6; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .recitation-result-content .recitation-result-body { flex: 1; min-width: 0; } .recitation-result-content .recitation-result-header { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; } .recitation-result-content .result-icon { flex-shrink: 0; font-size: 1.75rem; line-height: 1; margin-top: 0.1rem; } .recitation-result-content .recitation-result-title-wrap { min-width: 0; } .recitation-result-content .recitation-result-title { margin: 0 0 0.2rem 0; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; } .recitation-result-section.result-correct .recitation-result-title { color: color-mix(in srgb, var(--secondary) 95%, var(--foreground)); } .recitation-result-section.result-incorrect .recitation-result-title { color: color-mix(in srgb, var(--destructive) 90%, var(--foreground)); } .recitation-result-content .recitation-result-message { margin: 0; font-size: 0.9375rem; line-height: 1.4; color: var(--muted-foreground); } .recitation-result-answers { display: flex; flex-direction: column; gap: 0.65rem; } .recitation-result-answer-row { display: flex; flex-direction: column; gap: 0.25rem; } .recitation-result-answer-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); } .recitation-result-answer-value { display: block; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.9375rem; line-height: 1.45; font-weight: 500; } .recitation-result-answer-value.your-answer { background: color-mix(in srgb, var(--foreground) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); color: var(--foreground); } .recitation-result-section.result-correct .recitation-result-answer-value.your-answer { border-color: color-mix(in srgb, var(--secondary) 50%, var(--border)); background: color-mix(in srgb, var(--secondary) 15%, var(--card)); } .recitation-result-answer-value.correct-answer { background: color-mix(in srgb, var(--secondary) 22%, var(--card)); border: 1px solid color-mix(in srgb, var(--secondary) 45%, var(--border)); color: color-mix(in srgb, var(--secondary) 98%, var(--foreground)); } .recitation-result-section.result-incorrect .recitation-result-answer-value.correct-answer { border-color: color-mix(in srgb, var(--secondary) 55%, var(--border)); background: color-mix(in srgb, var(--secondary) 25%, var(--card)); } /* Result section: responsive for mobile L, M, S */ @media (max-width: 640px) { .recitation-result-section { padding: 1.25rem 1rem; border-radius: 0.75rem; } .recitation-result-content { flex-direction: column; align-items: center; gap: 1rem; text-align: center; } .recitation-result-content .recitation-result-character { width: 6.5rem; } .recitation-result-content .recitation-result-body { width: 100%; } .recitation-result-content .recitation-result-header { justify-content: center; margin-bottom: 0.75rem; } .recitation-result-answers { gap: 0.5rem; text-align: left; } .recitation-result-content .recitation-result-title { font-size: 1.125rem; } .recitation-result-content .recitation-result-message { font-size: 0.875rem; } .recitation-result-answer-value { padding: 0.45rem 0.6rem; font-size: 0.875rem; word-break: break-word; overflow-wrap: break-word; } } @media (max-width: 480px) { .recitation-result-section { padding: 1rem 0.75rem; border-radius: 0.625rem; } .recitation-result-content { gap: 0.75rem; } .recitation-result-content .recitation-result-character { width: 5.5rem; } .recitation-result-content .recitation-result-title { font-size: 1.0625rem; } .recitation-result-content .recitation-result-message { font-size: 0.8125rem; } .recitation-result-answer-label { font-size: 0.6875rem; } .recitation-result-answer-value { padding: 0.4rem 0.5rem; font-size: 0.8125rem; } } @media (max-width: 380px) { .recitation-result-section { padding: 0.75rem 0.5rem; border-radius: 0.5rem; } .recitation-result-content { gap: 0.5rem; } .recitation-result-content .recitation-result-character { width: 4.5rem; } .recitation-result-content .recitation-result-header { margin-bottom: 0.5rem; gap: 0.5rem; } .recitation-result-content .result-icon { font-size: 1.5rem; } .recitation-result-content .recitation-result-title { font-size: 1rem; } .recitation-result-content .recitation-result-message { font-size: 0.75rem; } .recitation-result-answers { gap: 0.4rem; } .recitation-result-answer-label { font-size: 0.625rem; } .recitation-result-answer-value { padding: 0.35rem 0.45rem; font-size: 0.75rem; } } .recitation-question-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: var(--card); display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; flex-shrink: 0; } .recitation-footer-actions { display: flex; align-items: center; gap: 0.75rem; } .recitation-continue-btn { font-weight: 600; } .recitation-remove-close-actions.hidden { display: none !important; } .recitation-question-footer .recitation-btn-remove { padding: 0.5rem 1rem !important; } .recitation-question-footer .recitation-btn-close { padding: 0.5rem 1rem !important; background: transparent; border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--primary); } .recitation-question-footer .recitation-btn-close:hover { background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary); border-color: var(--primary); } /* Timer low-time state (JS may set inline styles; these reinforce) */ /* Student progress: keep existing card backgrounds; just add border glow */ body.student-progress-page #main-content .card { position: relative; border: 1px solid color-mix(in srgb, var(--border) 85%, transparent); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45); } body.student-progress-page #main-content .card::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 34%, transparent), color-mix(in srgb, var(--secondary) 30%, transparent) ); pointer-events: none; opacity: 0.75; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } body.student-progress-page #main-content .card:hover { box-shadow: 0 22px 45px -28px rgba(0, 0, 0, 0.55), 0 28px 70px -58px color-mix(in srgb, var(--primary) 28%, transparent), 0 28px 70px -62px color-mix(in srgb, var(--secondary) 24%, transparent); } body.student-progress-page #main-content .stat-action-card { cursor: pointer; transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease; } body.student-progress-page #main-content .stat-action-card .card-content { position: relative; } body.student-progress-page #main-content .stat-action-card .stat-action-hint { margin-top: 0.7rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em; color: color-mix(in srgb, var(--primary) 68%, var(--muted-foreground)); display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.5rem; border-radius: 9999px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); background: color-mix(in srgb, var(--primary) 10%, transparent); } body.student-progress-page #main-content .stat-action-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); } body.student-progress-page #main-content .stat-action-card:hover .stat-action-hint i { transform: translateX(2px); } body.student-progress-page #main-content .stat-action-card .stat-action-hint i { transition: transform 0.16s ease; } body.student-progress-page #main-content .stat-action-card:active { transform: translateY(0); } body.student-progress-page #main-content .stat-action-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 42%, transparent); outline-offset: 2px; } @media (max-width: 768px) { #lesson-modal .modal-card { width: 98vw !important; max-height: 94vh; } #lesson-modal .modal-content { padding: 0.5rem !important; } #lesson-modal .lesson-viewer { min-height: 55vh; max-height: calc(94vh - 72px); } } @media (max-width: 420px) { #lesson-modal .lesson-viewer { min-height: 50vh; max-height: calc(96vh - 68px); } } .btn-outline { border: 1px solid var(--border); background: var(--background); color: var(--foreground); height: 2.25rem; padding: 0.5rem 1rem; } .btn-outline:hover:not(:disabled) { background: var(--accent); color: var(--accent-foreground); } /* Form Elements */ .form-group { margin-bottom: 1rem; } .form-label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--foreground); } .form-input { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--input-background); color: var(--foreground); font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; } .form-input:disabled { opacity: 0.7; cursor: not-allowed; } /* Ensure