/* =========================== BestWay IELTS Academy — UI v2 Theme-aware (dark + light). All templates drive color from the tokens below; toggle flips [data-theme] on . See base.html no-flash script. =========================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Surfaces — deeper, bluer navy with clearer elevation steps */ --bg: #0b1120; --bg2: #151d2e; --bg3: #232f45; --bg-hover: #2a3850; /* Accent — refined blue with a gradient companion */ --accent: #3b82f6; --accent2: #2563eb; --accent-light: #60a5fa; --accent-glow: rgba(59, 130, 246, 0.16); --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); /* Text — higher contrast primary, calmer secondaries */ --text: #f8fafc; --text2: #a4b1c4; --text3: #6b7a90; /* Lines & state colors */ --border: #26324a; --border-strong: #35435f; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --radius: 12px; --radius-sm: 8px; --radius-lg: 18px; /* Layered shadows for real depth */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow: 0 6px 24px -6px rgba(0,0,0,0.5); --shadow-lg: 0 20px 50px -12px rgba(0,0,0,0.6); --ring: 0 0 0 3px var(--accent-glow); --t-fast: 0.14s ease; --t: 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Semantic surfaces — flip per theme so components stay theme-agnostic */ --surface-nav: rgba(15, 21, 34, 0.8); --overlay: rgba(255,255,255,0.04); /* subtle hover on dark surfaces */ --overlay-soft: rgba(255,255,255,0.02); --input-bg: rgba(11,17,32,0.6); --input-bg-focus: rgba(11,17,32,0.9); --card-fade: rgba(21,29,46,0.6); /* stat-card gradient tail */ --hero-fade: rgba(11,17,32,0.7); --scrim: rgba(3,7,18,0.72); --brand-gradient: linear-gradient(120deg, #fff, #93c5fd); --ambient-1: rgba(59,130,246,0.06); --ambient-2: rgba(37,99,235,0.05); /* Aliases used by some templates (result.html etc.) — theme-driven */ --color-background: var(--bg); --color-background-secondary: var(--bg2); --color-border: var(--border); --color-text-primary: var(--text); --color-text-secondary: var(--text2); color-scheme: dark; } /* ══ LIGHT THEME ══════════════════════════════════════════════ */ :root[data-theme="light"] { --bg: #eef2f8; --bg2: #ffffff; --bg3: #eef2f8; --bg-hover: #e2e8f0; --accent: #2563eb; --accent2: #1d4ed8; --accent-light: #1d4ed8; --accent-glow: rgba(37, 99, 235, 0.12); --text: #0f172a; --text2: #44546b; --text3: #7c8aa0; --border: #e2e8f0; --border-strong: #cbd5e1; --shadow-sm: 0 1px 2px rgba(15,23,42,0.06); --shadow: 0 8px 24px -10px rgba(15,23,42,0.18); --shadow-lg: 0 24px 50px -16px rgba(15,23,42,0.25); --surface-nav: rgba(255, 255, 255, 0.82); --overlay: rgba(15,23,42,0.04); --overlay-soft: rgba(15,23,42,0.025); --input-bg: #f6f8fc; --input-bg-focus: #ffffff; --card-fade: #f6f8fc; --hero-fade: #f1f5f9; --scrim: rgba(15,23,42,0.45); --brand-gradient: linear-gradient(120deg, #0f172a, #2563eb); --ambient-1: rgba(37,99,235,0.05); --ambient-2: rgba(59,130,246,0.04); color-scheme: light; } html, body { height: 100%; font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html, body { transition: background-color 0.3s ease, color 0.3s ease; } /* Subtle ambient background glow so flat pages feel less empty */ body { background-image: radial-gradient(900px 500px at 100% -5%, var(--ambient-1), transparent 60%), radial-gradient(700px 500px at -10% 10%, var(--ambient-2), transparent 55%); background-attachment: fixed; } a { color: var(--accent-light); text-decoration: none; transition: color var(--t-fast); } a:hover { color: #93c5fd; } /* Refined focus for keyboard users everywhere */ :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); } ::selection { background: rgba(59,130,246,0.35); color: #fff; } /* Custom scrollbars — match the dark theme */ * { scrollbar-width: thin; scrollbar-color: var(--bg3) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; } /* ---- NAVBAR ---- */ .navbar { display: flex; align-items: center; gap: 1.5rem; padding: 0 1.5rem; height: 58px; background: var(--surface-nav); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .nav-brand { display: flex; align-items: center; gap: 0.5rem; margin-right: auto; } .brand-icon { font-size: 1.35rem; filter: drop-shadow(0 2px 6px rgba(59,130,246,0.4)); } .brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .brand-sub { font-size: 0.7rem; color: var(--text3); display: none; } @media (min-width: 768px) { .brand-sub { display: inline; } } .nav-links { display: flex; gap: 0.15rem; } .nav-link { position: relative; padding: 0.4rem 0.85rem; border-radius: 8px; color: var(--text2); font-size: 0.875rem; font-weight: 500; transition: all var(--t-fast); } .nav-link:hover { background: var(--overlay); color: var(--text); } .nav-link.active { background: var(--accent-glow); color: var(--accent-light); } .nav-link.active::after { content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 18px; height: 2px; border-radius: 2px; background: var(--accent); } .nav-right { display: flex; align-items: center; gap: 1rem; } .nav-notif { position: relative; color: var(--text2); font-size: 1.15rem; transition: transform var(--t-fast), color var(--t-fast); } .nav-notif:hover { color: var(--text); transform: translateY(-1px); } .badge { position: absolute; top: -5px; right: -7px; background: var(--danger); color: #fff; font-size: 0.65rem; min-width: 16px; text-align: center; padding: 1px 4px; border-radius: 8px; font-weight: 700; box-shadow: 0 0 0 2px var(--bg2); } .nav-user { display: flex; align-items: center; gap: 0.75rem; } .user-points { font-size: 0.75rem; color: var(--accent-light); font-weight: 700; background: var(--accent-glow); border: 1px solid rgba(59,130,246,0.2); padding: 0.22rem 0.55rem; border-radius: 999px; } .user-name { font-size: 0.875rem; color: var(--text2); font-weight: 500; transition: color var(--t-fast); } .user-name:hover { color: var(--text); } .btn-logout { background: none; border: 1px solid var(--border); color: var(--text3); padding: 0.3rem 0.7rem; border-radius: 8px; cursor: pointer; font-size: 0.8rem; transition: all var(--t-fast); } .btn-logout:hover { border-color: var(--danger); color: var(--danger); background: rgba(239,68,68,0.08); } /* Icon buttons in navbar (theme toggle + mobile hamburger) */ .nav-icon-btn { background: none; border: 1px solid var(--border-strong); color: var(--text2); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; transition: all var(--t-fast); } .nav-icon-btn:hover { border-color: var(--accent); color: var(--accent-light); background: var(--overlay); transform: translateY(-1px); } .theme-toggle .ic-light { display: none; } :root[data-theme="light"] .theme-toggle .ic-dark { display: none; } :root[data-theme="light"] .theme-toggle .ic-light { display: inline; } .nav-toggle { display: none; } /* Scroll-to-top floating button */ .scroll-top { position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-gradient); color: #fff; border: none; cursor: pointer; font-size: 1.15rem; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(12px) scale(0.9); transition: all var(--t); z-index: 90; } .scroll-top.show { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .scroll-top:hover { filter: brightness(1.08); transform: translateY(-2px); } /* ---- LAYOUT ---- */ .main-content { max-width: 1400px; margin: 0 auto; padding: 1.5rem; } .full-height { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; } .page-header h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; } .page-subtitle { font-size: 0.875rem; color: var(--text3); display: block; margin-top: 0.15rem; } .header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* ---- BUTTONS ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 1.15rem; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all var(--t-fast); white-space: nowrap; text-decoration: none; line-height: 1.2; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--accent-gradient); color: #fff; box-shadow: 0 4px 14px -4px rgba(59,130,246,0.6); } .btn-primary:hover { color: #fff; box-shadow: 0 6px 20px -4px rgba(59,130,246,0.7); filter: brightness(1.05); } .btn-secondary { background: var(--bg3); color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--bg-hover); color: var(--text); } .btn-outline { background: transparent; color: var(--text2); border: 1px solid var(--border-strong); } .btn-outline:hover { border-color: var(--accent); color: var(--accent-light); background: var(--accent-glow); } .btn-danger { background: var(--danger); color: #fff; box-shadow: 0 4px 14px -4px rgba(239,68,68,0.5); } .btn-danger:hover { background: #dc2626; color: #fff; } .btn-warning { background: var(--warning); color: #1a1206; } .btn-warning:hover { filter: brightness(1.05); } .btn-sm { padding: 0.34rem 0.75rem; font-size: 0.78rem; border-radius: 7px; } .btn-full { width: 100%; justify-content: center; } .btn-record { background: #7c3aed; color: #fff; box-shadow: 0 4px 14px -4px rgba(124,58,237,0.6); } .btn-record:hover { background: #6d28d9; } .btn-stop { background: var(--danger); color: #fff; } .btn-stop:hover { background: #dc2626; } .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; filter: none; } .mt-2 { margin-top: 0.5rem; } /* ---- CARDS ---- */ .card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem; box-shadow: var(--shadow-sm); transition: border-color var(--t), box-shadow var(--t), transform var(--t); } .card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); } .card-title { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; color: var(--text); letter-spacing: -0.01em; } .card-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } /* ---- STATS ---- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { position: relative; background: linear-gradient(160deg, var(--bg2), var(--card-fade)); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem 1.25rem; text-align: center; overflow: hidden; transition: transform var(--t), border-color var(--t), box-shadow var(--t); } .stat-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent-gradient); opacity: 0.85; } .stat-card:hover { transform: translateY(-3px); border-color: rgba(59,130,246,0.4); box-shadow: var(--shadow); } .stat-icon { font-size: 1.85rem; margin-bottom: 0.5rem; } .stat-value { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; display: block; background: linear-gradient(120deg, var(--accent-light), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat-label { font-size: 0.8rem; color: var(--text3); font-weight: 500; } /* ---- DASHBOARD GRID ---- */ .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1rem; } .span-full { grid-column: 1 / -1; } /* ---- TABLE ---- */ .table-container { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg2); box-shadow: var(--shadow-sm); } .data-table { width: 100%; border-collapse: collapse; } .data-table th { padding: 0.7rem 0.85rem; text-align: left; font-size: 0.72rem; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); background: var(--overlay-soft); position: sticky; top: 0; } .data-table td { padding: 0.7rem 0.85rem; border-bottom: 1px solid rgba(38,50,74,0.6); font-size: 0.875rem; vertical-align: middle; color: var(--text2); } .data-table tr:last-child td { border-bottom: none; } .data-table tbody tr { transition: background var(--t-fast); } .data-table tr:hover td { background: rgba(59,130,246,0.05); } .empty-cell { text-align: center; color: var(--text3); padding: 2rem; } .actions-cell { display: flex; gap: 0.35rem; flex-wrap: wrap; } /* ---- FORMS ---- */ .form-group { display: flex; flex-direction: column; gap: 0.35rem; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .form-full { grid-column: 1 / -1; } .form-card { max-width: 720px; } label { font-size: 0.8rem; font-weight: 500; color: var(--text2); } .form-input, .form-select, .form-textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="file"], input[type="month"], select, textarea { background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); padding: 0.6rem 0.9rem; font-size: 0.875rem; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); width: 100%; } .form-input::placeholder, input::placeholder, textarea::placeholder { color: var(--text3); } .form-input:hover, input:hover, select:hover, textarea:hover { border-color: var(--accent); } .form-input:focus, .form-select:focus, .form-textarea:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); background: var(--input-bg-focus); } .form-textarea { resize: vertical; min-height: 80px; } .form-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; flex-wrap: wrap; } .field-error { font-size: 0.75rem; color: var(--danger); margin-top: 0.2rem; } /* ---- AUTH ---- */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); } .auth-card { position: relative; background: linear-gradient(165deg, var(--bg2), var(--hero-fade)); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 2.5rem; width: 100%; max-width: 410px; box-shadow: var(--shadow-lg); overflow: hidden; } .auth-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent-gradient); } .auth-header { text-align: center; margin-bottom: 2rem; } .auth-logo { font-size: 3rem; margin-bottom: 0.75rem; filter: drop-shadow(0 4px 12px rgba(59,130,246,0.5)); } .auth-header h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; } .auth-header p { color: var(--text3); font-size: 0.875rem; } .auth-form { display: flex; flex-direction: column; gap: 1rem; } .auth-footer { text-align: center; margin-top: 1.5rem; font-size: 0.75rem; color: var(--text3); } /* ---- ALERTS ---- */ .messages-container { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .alert { padding: 0.8rem 1rem 0.8rem 1.1rem; border-radius: var(--radius-sm); font-size: 0.875rem; border-left: 3px solid transparent; box-shadow: var(--shadow-sm); animation: alertIn 0.3s ease; } @keyframes alertIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .alert-success, .alert-info { background: rgba(34,197,94,0.12); border-color: var(--success); color: #a7f3c0; } .alert-error, .alert-warning { background: rgba(239,68,68,0.12); border-color: var(--danger); color: #fca5a5; } /* ---- BADGES / TAGS ---- */ .role-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; } .role-admin { background: rgba(239,68,68,0.2); color: #f87171; } .role-teacher { background: rgba(245,158,11,0.2); color: #fbbf24; } .role-student { background: rgba(59,130,246,0.2); color: #60a5fa; } .band-badge { background: rgba(59,130,246,0.2); color: var(--accent); padding: 0.15rem 0.5rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; } .band-low { background: rgba(239,68,68,0.2); color: #f87171; } .band-text { font-weight: 700; color: var(--accent); font-size: 1rem; } .status-badge { padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600; } .status-paid, .status-present, .status-submitted { background: rgba(34,197,94,0.2); color: #86efac; } .status-unpaid, .status-absent, .status-missing { background: rgba(239,68,68,0.2); color: #f87171; } .status-partial, .status-late { background: rgba(245,158,11,0.2); color: #fbbf24; } .status-overdue { background: rgba(239,68,68,0.3); color: #f87171; } .status-draft { background: var(--bg3); color: var(--text3); } .status-published { background: rgba(34,197,94,0.2); color: #86efac; } .status-done { background: rgba(34,197,94,0.2); color: #86efac; } .status-progress { background: rgba(245,158,11,0.2); color: #fbbf24; } .status-new { background: var(--accent-glow); color: var(--accent); } .overdue-badge { background: var(--danger); color: #fff; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.65rem; font-weight: 700; margin-left: 0.3rem; } .row-overdue { background: rgba(239,68,68,0.05); } /* ---- MODALS ---- */ .modal-overlay { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 999; animation: alertIn 0.2s ease; } .modal { background: var(--bg2); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 1.75rem; width: 90%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: modalPop 0.22s cubic-bezier(0.34,1.56,0.64,1); } @keyframes modalPop { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; } .modal-header h3 { font-size: 1.1rem; font-weight: 600; } .modal-close { background: none; border: none; color: var(--text3); font-size: 1.25rem; cursor: pointer; line-height: 1; } .modal-close:hover { color: var(--text); } /* ---- PROFILE ---- */ .profile-grid { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; } @media (max-width: 768px) { .profile-grid { grid-template-columns: 1fr; } } .profile-card { text-align: center; } .avatar-img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; } .avatar-placeholder { width: 100px; height: 100px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 2.5rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; } .points-display { margin-top: 1rem; } .points-value { font-size: 2rem; font-weight: 700; color: var(--accent); display: block; } .points-label { font-size: 0.8rem; color: var(--text3); } .group-name { color: var(--text3); font-size: 0.875rem; margin-top: 0.25rem; } .detail-list { display: flex; flex-direction: column; gap: 0.75rem; } .detail-item { display: flex; justify-content: space-between; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .detail-label { color: var(--text3); font-size: 0.8rem; } /* ---- EXAM ENGINE ---- */ .exam-layout { display: flex; flex-direction: column; gap: 1.25rem; min-height: calc(100vh - 56px); } .exam-header { display: flex; justify-content: space-between; align-items: center; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; flex-wrap: wrap; gap: 1rem; } .exam-title-section h2 { font-size: 1.2rem; font-weight: 700; } .exam-name { font-size: 0.8rem; color: var(--text3); } .exam-controls { display: flex; align-items: center; gap: 1.5rem; } .section-nav { display: flex; gap: 0.35rem; } .section-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; background: var(--bg3); color: var(--text3); border: 2px solid transparent; } .section-dot.active { background: var(--accent); color: #fff; border-color: var(--accent); } .section-dot.done { background: rgba(34,197,94,0.2); color: #22c55e; border-color: #22c55e; } .timer-box { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 1rem; text-align: center; min-width: 100px; } .timer-label { font-size: 0.65rem; color: var(--text3); display: block; } .timer-value { font-size: 1.1rem; font-weight: 700; color: var(--text); font-family: 'Courier New', monospace; } .timer-warning { color: var(--warning); } .timer-danger { color: var(--danger); animation: pulse 1s infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } } .exam-instructions { background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.85rem; color: var(--text2); } .audio-player-box { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; text-align: center; } .audio-player { width: 100%; max-width: 600px; } .audio-note { font-size: 0.8rem; color: var(--text3); margin-top: 0.5rem; } .audio-placeholder { background: var(--bg2); border: 1px dashed var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; color: var(--text3); } .audio-placeholder span { font-size: 2rem; display: block; margin-bottom: 0.5rem; } .questions-container { display: flex; flex-direction: column; gap: 1rem; } .question-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; display: flex; gap: 1rem; } .question-number { background: var(--accent); color: #fff; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; } .question-body { flex: 1; } .question-text { margin-bottom: 0.75rem; color: var(--text); font-size: 0.9rem; line-height: 1.6; } .options-list { display: flex; flex-direction: column; gap: 0.5rem; } .option-label { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; background: var(--bg3); border-radius: 6px; cursor: pointer; transition: background 0.15s; } .option-label:hover { background: var(--accent-glow); } .option-label input[type="radio"] { accent-color: var(--accent); } .answer-input { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 0.5rem 0.75rem; font-size: 0.875rem; width: 100%; max-width: 400px; } .answer-input:focus { outline: none; border-color: var(--accent); } .question-nav-bar { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 1rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); position: sticky; bottom: 0; z-index: 10; } .q-nav-btn { width: 34px; height: 34px; border-radius: 6px; background: var(--bg3); border: 1px solid var(--border); color: var(--text2); cursor: pointer; font-size: 0.75rem; transition: all 0.15s; } .q-nav-btn:hover, .q-nav-btn.answered { background: var(--accent); color: #fff; border-color: var(--accent); } .exam-submit-row { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; padding: 1.25rem 0; flex-wrap: wrap; } .autosave-status { font-size: 0.75rem; color: var(--text3); margin-right: auto; } /* ---- READING LAYOUT ---- */ .reading-split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } @media (max-width: 1024px) { .reading-split-layout { grid-template-columns: 1fr; } } .passage-panel { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; max-height: 80vh; display: flex; flex-direction: column; position: sticky; top: 70px; } .passage-tabs { display: flex; border-bottom: 1px solid var(--border); } .passage-tab { flex: 1; padding: 0.6rem; background: var(--bg3); border: none; color: var(--text3); cursor: pointer; font-size: 0.8rem; transition: all 0.15s; } .passage-tab.active { background: var(--bg2); color: var(--text); border-bottom: 2px solid var(--accent); } .passage-content { padding: 1.25rem; overflow-y: auto; flex: 1; } .passage-title { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; } .passage-text { font-size: 0.9rem; line-height: 1.8; color: var(--text2); } .questions-panel { overflow-y: auto; max-height: 80vh; } /* ---- WRITING ---- */ .writing-task-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; } .task-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .task-badge { background: var(--accent); color: #fff; padding: 0.25rem 0.6rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; } .task-min-words { font-size: 0.75rem; color: var(--text3); } .task-image { max-width: 100%; border-radius: 8px; margin-bottom: 1rem; } .task-prompt { background: var(--bg3); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.7; color: var(--text2); } .writing-textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 1rem; font-size: 0.9rem; line-height: 1.7; resize: vertical; font-family: inherit; } .writing-textarea:focus { outline: none; border-color: var(--accent); } .word-count-bar { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; font-size: 0.8rem; color: var(--text3); } .word-count-value { font-weight: 700; color: var(--text); } /* ---- SPEAKING ---- */ .speaking-rules-box { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: var(--radius); padding: 1rem 1.25rem; display: flex; gap: 1rem; align-items: center; font-size: 0.9rem; } .rule-icon { font-size: 1.5rem; } .speaking-task-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; } .task-topic { font-weight: 600; font-size: 1rem; } .task-done { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.05); } .submitted-badge { background: rgba(34,197,94,0.2); color: #22c55e; padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; margin-left: auto; } .recorder-section { margin-top: 1rem; } .recorder-controls { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; } .rec-icon { font-size: 0.9rem; } .blink { animation: blink 1s infinite; } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } } .rec-timer { font-family: 'Courier New', monospace; font-size: 1.1rem; font-weight: 700; color: var(--text2); background: var(--bg3); padding: 0.3rem 0.75rem; border-radius: 6px; } .recording-status { font-size: 0.8rem; color: var(--text3); } .audio-preview { margin-top: 1rem; } .preview-actions { display: flex; gap: 0.75rem; margin-top: 0.75rem; } .speaking-submit-status { font-size: 0.9rem; color: var(--text2); margin-right: auto; } .follow-up { background: var(--bg3); border-radius: 6px; padding: 0.75rem; margin-top: 0.75rem; font-size: 0.875rem; } /* ---- RESULT ---- */ .result-hero { position: relative; background: linear-gradient(160deg, var(--bg2), var(--hero-fade)); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 2rem; display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem; box-shadow: var(--shadow); overflow: hidden; } .result-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent-gradient); } .band-circle { position: relative; text-align: center; background: radial-gradient(circle at 50% 35%, var(--accent-glow), transparent 70%); border: 3px solid var(--accent); border-radius: 50%; width: 128px; height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 30px -6px rgba(59,130,246,0.5), inset 0 0 20px -8px rgba(59,130,246,0.4); } .band-num { font-size: 2.6rem; font-weight: 800; color: var(--accent-light); line-height: 1; text-shadow: 0 2px 12px rgba(59,130,246,0.5); } .band-label { font-size: 0.7rem; color: var(--text3); } .band-breakdown { display: flex; gap: 1.5rem; flex-wrap: wrap; flex: 1; } .band-item { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .band-section-icon { font-size: 1.5rem; } .band-section-name { font-size: 0.75rem; color: var(--text3); } .band-section-score { font-size: 1.5rem; font-weight: 700; color: var(--text); } .feedback-section { border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; margin-bottom: 1.25rem; } .feedback-section:last-child { border-bottom: none; } .feedback-section h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 1rem; } .sub-scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .sub-score-item { background: var(--bg3); border-radius: 8px; padding: 0.75rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .sub-score-item span { font-size: 0.75rem; color: var(--text3); } .sub-score-item strong { font-size: 1.25rem; color: var(--accent); } .ai-feedback, .teacher-feedback { background: var(--bg3); border-radius: 8px; padding: 0.75rem 1rem; margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.6; } .ai-badge { background: rgba(139,92,246,0.2); color: #a78bfa; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; margin-right: 0.5rem; } .teacher-badge { background: rgba(34,197,94,0.2); color: #22c55e; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; margin-right: 0.5rem; } .transcript-box { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 0.75rem; font-size: 0.85rem; color: var(--text2); font-style: italic; } .transcript-label { font-weight: 600; color: var(--text3); display: block; font-style: normal; margin-bottom: 0.35rem; font-size: 0.75rem; } .result-actions { display: flex; gap: 1rem; margin-top: 1.5rem; justify-content: flex-end; } .mt-4 { margin-top: 1rem; } /* ---- LEADERBOARD ---- */ .leaderboard-card { } .lb-full { display: flex; flex-direction: column; gap: 0.25rem; } .lb-row { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border-radius: 8px; transition: background 0.15s; } .lb-row:hover { background: var(--bg3); } .lb-highlight { background: var(--accent-glow); border: 1px solid rgba(59,130,246,0.3); } .lb-position { width: 40px; text-align: center; } .medal { font-size: 1.25rem; } .rank-num { font-size: 0.9rem; font-weight: 600; color: var(--text3); } .lb-info { flex: 1; } .lb-student-name { font-weight: 600; font-size: 0.9rem; } .lb-group { font-size: 0.75rem; color: var(--text3); margin-left: 0.5rem; } .lb-metrics { display: flex; gap: 1rem; align-items: center; } .lb-band { font-weight: 600; color: var(--accent); font-size: 0.875rem; } .lb-points { font-size: 0.875rem; color: var(--text3); } /* Mini leaderboard */ .lb-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: 6px; font-size: 0.85rem; } .lb-item:hover { background: var(--bg3); } .lb-me { background: var(--accent-glow); } .lb-rank { width: 20px; text-align: center; font-weight: 600; color: var(--text3); } .lb-name { flex: 1; } .lb-pts { color: var(--accent); font-weight: 600; } /* ---- GROUPS ---- */ .groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .group-card { display: flex; flex-direction: column; gap: 0.75rem; } .group-card-header { display: flex; justify-content: space-between; align-items: flex-start; } .group-card-header h3 { font-size: 1rem; font-weight: 600; } .teacher-tag { font-size: 0.75rem; color: var(--text3); } .group-desc { font-size: 0.85rem; color: var(--text2); } .group-metrics { display: flex; gap: 1rem; } .metric { display: flex; flex-direction: column; align-items: center; } .metric-value { font-size: 1.25rem; font-weight: 700; color: var(--accent); } .metric-label { font-size: 0.7rem; color: var(--text3); } /* Group list */ .group-list { display: flex; flex-direction: column; gap: 0.5rem; } .group-item { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem; background: var(--bg3); border-radius: 8px; } .group-name-link { font-weight: 500; font-size: 0.875rem; } .group-stats { display: flex; gap: 0.5rem; align-items: center; } .stat-tag { font-size: 0.75rem; color: var(--text3); } /* ---- POINTS ---- */ .point-history { display: flex; flex-direction: column; gap: 0.5rem; } .point-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; border-radius: 6px; } .point-item:hover { background: var(--bg3); } .point-reason { font-size: 0.85rem; color: var(--text2); } .point-change { font-weight: 700; font-size: 0.9rem; } .positive { color: var(--success); } .negative { color: var(--danger); } /* ---- RESULT LIST ---- */ .result-list { display: flex; flex-direction: column; gap: 0.75rem; } .result-item { padding: 0.75rem; background: var(--bg3); border-radius: 8px; } .result-exam { font-weight: 500; font-size: 0.85rem; margin-bottom: 0.35rem; } .result-scores { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.35rem; } .score-tag { background: var(--bg2); color: var(--text2); padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.72rem; font-family: monospace; } .result-band { font-weight: 700; color: var(--accent); font-size: 0.9rem; } /* ---- ATTENDANCE ---- */ .attendance-list { display: flex; flex-direction: column; gap: 0.4rem; } .attendance-item { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0.75rem; border-radius: 6px; font-size: 0.85rem; } .attendance-item.status-present { background: rgba(34,197,94,0.08); } .attendance-item.status-absent { background: rgba(239,68,68,0.08); } .attendance-item.status-late { background: rgba(245,158,11,0.08); } .stat-inline { display: flex; flex-direction: column; gap: 0.5rem; } .progress-bar-outer { height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; } .progress-bar-inner { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.3s; } /* ---- EXAM LIST ---- */ .exams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; } .exam-card { display: flex; flex-direction: column; gap: 0.75rem; } .exam-card:hover { transform: translateY(-4px); border-color: rgba(59,130,246,0.4); box-shadow: var(--shadow); } .exam-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; } .exam-card-header h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; } .exam-status { padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600; } .exam-desc { font-size: 0.85rem; color: var(--text2); } .exam-meta { display: flex; flex-direction: column; gap: 0.5rem; } .exam-section-info { display: flex; gap: 0.4rem; flex-wrap: wrap; } .section-tag { font-size: 0.72rem; background: var(--bg3); padding: 0.15rem 0.4rem; border-radius: 4px; color: var(--text2); } .exam-durations { font-size: 0.75rem; color: var(--text3); } .exam-actions { margin-top: auto; } /* ---- NOTIFICATIONS ---- */ .notification-list { display: flex; flex-direction: column; } .notif-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; border-bottom: 1px solid var(--border); transition: background 0.15s; } .notif-item:hover { background: var(--bg3); } .notif-unread { background: rgba(59,130,246,0.05); } .notif-icon { font-size: 1.25rem; flex-shrink: 0; } .notif-content { flex: 1; } .notif-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.2rem; } .notif-message { font-size: 0.85rem; color: var(--text2); } .notif-time { font-size: 0.75rem; color: var(--text3); margin-top: 0.25rem; } .notif-action { align-self: center; } /* ---- CHART ---- */ .chart-container { height: 220px; position: relative; } /* ---- FILTER BAR ---- */ .filter-bar { margin-bottom: 1rem; } .filter-form { display: flex; gap: 0.75rem; flex-wrap: wrap; } /* ---- EMPTY STATE ---- */ .empty-state { text-align: center; color: var(--text3); padding: 1.5rem; font-size: 0.875rem; } .empty-state-full { grid-column: 1 / -1; text-align: center; color: var(--text3); padding: 3rem; background: var(--bg2); border: 1px dashed var(--border-strong); border-radius: var(--radius); } .empty-icon { font-size: 3rem; margin-bottom: 0.75rem; opacity: 0.85; } /* ---- TABS ---- */ .tabs { display: flex; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; } .tab-btn { background: none; border: none; color: var(--text3); padding: 0.5rem 1rem; cursor: pointer; font-size: 0.875rem; font-weight: 600; border-radius: 8px 8px 0 0; transition: all var(--t-fast); } .tab-btn.active { background: var(--accent-gradient); color: #fff; box-shadow: 0 4px 14px -6px rgba(59,130,246,0.7); } .tab-btn:hover:not(.active) { color: var(--text); background: var(--overlay); } .tab-content { margin-bottom: 1.5rem; } /* ---- QUESTION MANAGE ---- */ .question-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .q-stat { padding: 0.4rem 0.9rem; border-radius: 8px; font-size: 0.8rem; font-weight: 500; background: var(--bg2); border: 1px solid var(--border); } .q-stat.ok { border-color: rgba(34,197,94,0.4); color: #22c55e; } .q-stat.warn { border-color: rgba(245,158,11,0.4); color: #f59e0b; } .task-summary { padding: 0.75rem; background: var(--bg3); border-radius: 8px; margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--text2); display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .min-words-tag, .duration-tag { background: var(--bg2); color: var(--text3); padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.72rem; } /* ---- QUICK ACTIONS ---- */ .quick-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; } /* ---- RESPONSIVE ---- */ @media (max-width: 768px) { .navbar { padding: 0 1rem; gap: 0.75rem; } .nav-toggle { display: inline-flex; } /* nav-links becomes a dropdown panel toggled by the hamburger */ .nav-links { display: none; position: absolute; top: 58px; left: 0; right: 0; flex-direction: column; gap: 0.15rem; background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0.5rem; box-shadow: var(--shadow); } .nav-links.open { display: flex; animation: alertIn 0.2s ease; } .nav-links .nav-link { padding: 0.7rem 0.9rem; border-radius: 8px; } .nav-link.active::after { display: none; } .user-points, .user-name { display: none; } .main-content { padding: 1rem; } .form-grid { grid-template-columns: 1fr; } .form-full { grid-column: 1; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .dashboard-grid { grid-template-columns: 1fr; } .reading-split-layout { grid-template-columns: 1fr; } .passage-panel { position: static; max-height: 50vh; } } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ── QUESTION TYPE BADGES ── */ .q-type-badge { display: inline-block; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.45rem; border-radius: 4px; margin-left: 0.5rem; background: rgba(59,130,246,0.12); color: var(--accent); border: 1px solid rgba(59,130,246,0.25); vertical-align: middle; } /* ── LISTENING SECTION BANNERS ── */ .listening-section-banner { display: flex; align-items: center; gap: 0.75rem; background: linear-gradient(90deg,rgba(59,130,246,0.1),transparent); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 0.65rem 1.1rem; margin: 1.5rem 0 0.75rem; flex-wrap: wrap; } .section-badge { background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 4px; letter-spacing: 0.08em; white-space: nowrap; } .section-range { font-weight: 600; font-size: 0.85rem; color: var(--text); } .section-context { font-size: 0.75rem; color: var(--text3); font-style: italic; } /* ── PASSAGE QUESTION BANNER ── */ .passage-q-banner { font-size: 0.8rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.5rem 0.25rem; border-bottom: 1px solid var(--border); margin: 1.5rem 0 0.5rem; } /* ── OPTIONS BANK (for select types) ── */ .select-wrapper { display: flex; flex-direction: column; gap: 0.65rem; } .options-bank { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 0.65rem 0.85rem; } .options-bank-label { font-size: 0.72rem; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; } .options-bank-list { display: flex; flex-wrap: wrap; gap: 0.35rem; } .bank-item { background: var(--bg2); border: 1px solid var(--border); border-radius: 5px; font-size: 0.78rem; padding: 0.2rem 0.55rem; color: var(--text2); } /* ── ANSWER SELECT DROPDOWN ── */ .answer-select { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 0.5rem 0.75rem; font-size: 0.875rem; width: 100%; max-width: 480px; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; } .answer-select:focus { outline: none; border-color: var(--accent); } .answer-select option { background: var(--bg2); color: var(--text); } /* ── INLINE RADIO (TFNG / YNNG) ── */ .options-inline { flex-direction: row !important; flex-wrap: wrap; gap: 0.5rem; } .option-pill { flex-direction: row !important; align-items: center; background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; padding: 0.35rem 0.9rem; cursor: pointer; transition: all 0.15s; font-size: 0.85rem; } .option-pill:hover { border-color: var(--accent); color: var(--accent); } .option-pill input[type="radio"] { accent-color: var(--accent); margin-right: 0.4rem; width: 14px; height: 14px; } .option-pill:has(input:checked) { background: rgba(59,130,246,0.12); border-color: var(--accent); color: var(--accent); font-weight: 600; } /* ── COMPLETION CARD STYLE ── */ .completion-card { border-left: 2px solid rgba(59,130,246,0.3); } /* ── QUESTION NAV SECTION START ── */ .q-nav-btn.q-section-start { border-top: 2px solid var(--accent); padding-top: 4px; } /* ── RESULT DETAIL: TYPE BREAKDOWN ── */ .type-breakdown { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; } .type-chip { font-size: 0.7rem; padding: 0.15rem 0.45rem; border-radius: 4px; background: var(--bg3); border: 1px solid var(--border); color: var(--text3); } .type-chip.correct { border-color: rgba(34,197,94,0.3); color: #22c55e; } .type-chip.wrong { border-color: rgba(239,68,68,0.3); color: #ef4444; } /* ════════════════════════════════════════════ READING EXAM — Full Redesign ════════════════════════════════════════════ */ /* ── Outer wrapper ── */ .reading-exam-wrap { display: flex; flex-direction: column; height: calc(100vh - 60px); overflow: hidden; } /* ── Top bar ── */ .reading-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1.25rem; background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 1rem; flex-wrap: wrap; } .reading-topbar-left { display: flex; align-items: center; gap: 0.75rem; } .reading-topbar-title { font-size: 1rem; font-weight: 700; margin: 0; } .reading-topbar-exam { font-size: 0.78rem; color: var(--text3); max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reading-topbar-center { display: flex; justify-content: center; flex: 1; } .reading-topbar-right { display: flex; align-items: center; gap: 1rem; } /* Section progress dots */ .section-progress { display: flex; align-items: center; gap: 0.3rem; } .sp-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; background: var(--bg3); color: var(--text3); border: 2px solid transparent; } .sp-dot.active { background: var(--accent); color: #fff; border-color: var(--accent); } .sp-dot.done { background: rgba(34,197,94,0.15); color: #22c55e; border-color: #22c55e; } .sp-sep { color: var(--text3); font-size: 0.7rem; } /* Answered badge */ .answered-badge { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text3); background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; padding: 0.25rem 0.75rem; white-space: nowrap; } .answered-icon { color: #22c55e; font-weight: 700; } /* ── Main split layout — full height ── */ .reading-split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0; flex: 1; overflow: hidden; border-top: 1px solid var(--border); } /* ── Left: passage panel ── */ .passage-panel { display: flex; flex-direction: column; border-right: 1px solid var(--border); overflow: hidden; background: var(--bg); } .passage-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg2); } .passage-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.6rem 0.5rem; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; color: var(--text3); transition: all 0.15s; font-size: 0.78rem; } .passage-tab:hover { color: var(--accent); background: rgba(59,130,246,0.05); } .passage-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(59,130,246,0.08); font-weight: 600; } .ptab-num { font-size: 1rem; font-weight: 700; line-height: 1; } .ptab-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; } .passage-scroll { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; } .passage-meta { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 0.5rem; } .passage-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 1rem; line-height: 1.3; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; } .passage-text { font-size: 0.88rem; line-height: 1.85; color: var(--text2); } .passage-text p { margin-bottom: 1rem; } /* ── Right: questions panel ── */ .questions-panel { display: flex; flex-direction: column; overflow-y: auto; background: var(--bg); } .questions-panel form { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0; min-height: 100%; } /* Passage question group */ .passage-q-group { display: flex; flex-direction: column; gap: 0; } /* Group header: "Passage 1 — Questions 1–13" */ .passage-q-group-header { position: sticky; top: 0; z-index: 5; background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0.55rem 0.85rem; display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .pqh-badge { background: var(--accent); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 4px; letter-spacing: 0.07em; } .pqh-range { font-size: 0.78rem; font-weight: 600; color: var(--text); } .pqh-title { font-size: 0.72rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } /* Question type instruction block */ .type-instruction-block { background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.18); border-radius: 8px; padding: 0.7rem 0.9rem; margin: 1rem 0 0.6rem; } .type-instruction-header { margin-bottom: 0.35rem; } .tib-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; background: rgba(59,130,246,0.15); color: var(--accent); padding: 0.15rem 0.55rem; border-radius: 4px; border: 1px solid rgba(59,130,246,0.3); } .tib-text { font-size: 0.8rem; color: var(--text3); line-height: 1.5; } .tib-text strong { color: var(--text2); font-weight: 600; } .tib-text em { color: var(--text3); } /* Question cards in reading */ .questions-panel .question-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; display: flex; gap: 0.85rem; margin-bottom: 0.6rem; transition: border-color 0.2s, box-shadow 0.2s; } .questions-panel .question-card:hover { border-color: rgba(59,130,246,0.3); } .questions-panel .question-number { background: var(--bg3); color: var(--text2); border: 1px solid var(--border); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.72rem; flex-shrink: 0; } /* Highlight flash when navigating to a question */ @keyframes cardFlash { 0% { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.25); background: rgba(59,130,246,0.08); } 100% { border-color: var(--border); box-shadow: none; background: var(--bg2); } } .card-highlight { animation: cardFlash 1.6s ease-out forwards; } /* ── Bottom navigation bar ── */ .reading-nav-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.28rem; padding: 0.55rem 1rem; background: var(--bg2); border-top: 1px solid var(--border); flex-shrink: 0; z-index: 20; } .nav-passage-pill { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.5rem; border-radius: 4px; cursor: pointer; transition: all 0.15s; user-select: none; } .nav-pill-1 { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); } .nav-pill-2 { background: rgba(139,92,246,0.15); color: #a78bfa; border: 1px solid rgba(139,92,246,0.3); } .nav-pill-3 { background: rgba(20,184,166,0.15); color: #2dd4bf; border: 1px solid rgba(20,184,166,0.3); } .nav-passage-pill:hover { filter: brightness(1.2); } .nav-divider { width: 1px; height: 22px; background: var(--border); margin: 0 0.1rem; } /* Nav buttons */ .reading-nav-bar .q-nav-btn { width: 28px; height: 28px; border-radius: 5px; background: var(--bg3); border: 1px solid var(--border); color: var(--text3); cursor: pointer; font-size: 0.7rem; font-weight: 500; transition: all 0.12s; padding: 0; } .reading-nav-bar .q-nav-btn:hover { background: rgba(59,130,246,0.2); color: var(--accent); border-color: var(--accent); } .reading-nav-bar .q-nav-btn.answered { background: rgba(34,197,94,0.2); color: #22c55e; border-color: rgba(34,197,94,0.5); font-weight: 700; } .reading-nav-bar .q-nav-btn.current { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; box-shadow: 0 0 0 2px rgba(59,130,246,0.3); } .reading-nav-bar .q-nav-btn.q-dim { opacity: 0.45; } .reading-nav-bar .q-nav-btn.answered.q-dim { opacity: 0.65; } /* Submit row in reading */ .questions-panel .exam-submit-row { margin-top: auto; padding-top: 1.5rem; display: flex; justify-content: flex-end; align-items: center; gap: 1rem; flex-wrap: wrap; } /* Responsive */ @media (max-width: 900px) { .reading-split-layout { grid-template-columns: 1fr; height: auto; overflow: visible; } .reading-exam-wrap { height: auto; overflow: visible; } .passage-panel { max-height: 45vh; border-right: none; border-bottom: 1px solid var(--border); } .questions-panel { overflow-y: visible; } .reading-topbar-exam { display: none; } }