. This is essential for any user navigating via keyboard who otherwise has to tab through every header link on every page. */ .skip-link { position: absolute; top: 0; left: 0; background: var(--blue); color: #fff; padding: 10px 16px; font-weight: 600; font-size: 14px; z-index: 1000; text-decoration: none; border-radius: 0 0 6px 0; transform: translateY(-100%); transition: transform 120ms; } .skip-link:focus { transform: translateY(0); outline: 2px solid var(--blue-strong); outline-offset: -2px; } /* ============ Global focus-visible default (a11y, v3.2) ============ Ensures every interactive element has a clearly visible focus ring for keyboard users. Mouse-click users do NOT see this (focus-visible only fires on keyboard focus), so this does not affect visual design on pointer interactions. Individual components may override with their own focus-visible rule (the bookmark button is one example). */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; } /* Field inputs already swap border color on :focus; suppress the global outline on them to avoid a double ring. */ .field-input:focus-visible { outline: none; } /* ============ Header ============ */ .app-header { background: var(--bg-elev); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .app-header-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; gap: 16px; } .brand { display: flex; align-items: center; gap: 12px; color: var(--blue); text-decoration: none; } .brand-logo { height: 24px; display: inline-flex; align-items: center; color: var(--blue); } .brand-logo svg { height: 100%; width: auto; display: block; } .brand-divider { width: 1px; height: 20px; background: var(--border-strong); } .brand-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); } .header-nav { display: flex; align-items: center; gap: 4px; margin-left: 24px; } .nav-link { color: var(--gray-600); text-decoration: none; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; transition: color 0.15s, background 0.15s; } .nav-link:hover { color: var(--navy); background: var(--gray-50); text-decoration: none; } .nav-link-admin { color: var(--blue); font-weight: 600; } .header-user { margin-left: auto; display: flex; align-items: center; gap: 8px; } .user-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: var(--gray-50); border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color 0.15s, background 0.15s; } .user-chip:hover { border-color: var(--blue); text-decoration: none; } .user-chip-avatar { width: 28px; height: 28px; background: var(--blue); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .logout-link { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); border-radius: 8px; transition: color 0.15s, background 0.15s; } .logout-link:hover { color: var(--danger); background: var(--danger-soft); } .header-mobile-toggle { display: none; width: 36px; height: 36px; flex-direction: column; justify-content: center; gap: 4px; padding: 0 8px; background: transparent; border: 1px solid var(--border-strong); border-radius: 8px; cursor: pointer; } .header-mobile-toggle span { display: block; width: 100%; height: 2px; background: var(--navy); border-radius: 1px; transition: transform 0.2s, opacity 0.2s; } .header-mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .header-mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .header-mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .header-mobile-menu { display: none; flex-direction: column; background: var(--bg-elev); border-top: 1px solid var(--border); padding: 8px 16px 16px; gap: 2px; } .header-mobile-menu:not([hidden]) { display: flex; } .mobile-link { padding: 14px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 15px; } .mobile-link:hover { background: var(--gray-50); text-decoration: none; } .mobile-link-logout { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 16px; color: var(--danger); } @media (max-width: 760px) { .header-nav, .header-user { display: none; } .header-mobile-toggle { display: flex; margin-left: auto; } } /* ============ Footer ============ */ .app-footer { border-top: 1px solid var(--border); background: var(--bg-elev); padding: 24px 20px; font-size: 13px; color: var(--text-dim); text-align: center; } .app-footer-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .footer-sep { color: var(--text-faint); } .footer-version { font-family: 'JetBrains Mono', monospace; color: var(--text-faint); } .footer-link { color: var(--blue); } /* ============ Page intro ============ */ .page-intro { margin-bottom: 28px; } .page-intro h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 6px; color: var(--navy); } .page-intro .lead { color: var(--text-dim); font-size: 15px; } .page-intro-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .page-intro-actions { display: flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 600px) { .page-intro h1 { font-size: 24px; } } /* ============ Spacing utilities (v3.3.0) ============ Consolidates the inline margin-top / margin-bottom values that were scattered across templates with inconsistent picks (12/14/16/18/20px). One scale, used everywhere, gives the app a consistent vertical rhythm. Token values mirror the existing CSS variables: 12 = tight, 16 = base, 24 = section-internal, 36 = between sections. */ .mt-tight { margin-top: 12px; } .mt-base { margin-top: 16px; } .mt-roomy { margin-top: 24px; } .mb-tight { margin-bottom: 12px; } .mb-base { margin-bottom: 16px; } .mb-roomy { margin-bottom: 24px; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } /* ============ Exam-ready star (v3.3.0) ============ Used as a small inline marker beside a student's name on the leaderboard, the student dashboard greeting, and the admin Students table. The color is a warm amber-gold that reads as celebratory without competing with the page's blue/navy palette. Dark theme uses a slightly brighter tone so it remains legible on the darker background. */ .exam-ready-star { color: #d99c1f; vertical-align: -2px; margin-left: 6px; flex-shrink: 0; } html[data-theme="dark"] .exam-ready-star { color: #f0b441; } /* Exam-ready badge in the admin Students table "Ready" column. "Yes" gets the same warm gold treatment as the star. "—" is muted. */ .exam-ready-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 4px; background: rgba(217, 156, 31, 0.14); color: #b07d10; } html[data-theme="dark"] .exam-ready-badge { background: rgba(240, 180, 65, 0.18); color: #f0b441; } .exam-ready-no { color: var(--text-faint); font-size: 14px; } /* Star legend on the leaderboard page (v3.3.1). Quiet, single-line callout below the page lead that explains what the gold star means. The star is rendered inline at the same size used in the table rows. */ .leaderboard-star-legend { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--text-dim); } .leaderboard-star-legend .exam-ready-star { margin-left: 0; } /* Sortable table headers (v3.3.0). Headers are now clickable links that toggle sort direction on same-column re-click and reset to asc on a new column. The chevron icon indicates active column and direction. */ .sortable-th-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; cursor: pointer; user-select: none; } .sortable-th-link:hover { color: var(--blue); text-decoration: none; } .sortable-th-link svg { flex-shrink: 0; } /* ===================================================================== Student reporting components (v3.4.0). Shared between admin/student-detail.php and the student's own /index.php dashboard so the two surfaces stay visually consistent. ===================================================================== */ /* Score band color tokens. Used by both domain bars and trend bars. The green/green-strong split corresponds to the 70% real-exam pass mark and the 85% exam-ready threshold, so the two visual states map to two meaningfully different milestones. */ .band-red { background: var(--danger); } .band-amber { background: var(--warn); } .band-green { background: var(--blue); } .band-green-strong { background: var(--success); } .band-none { background: var(--border); } .band-text-red { color: var(--danger); } .band-text-amber { color: var(--warn); } .band-text-green { color: var(--blue); } .band-text-green-strong { color: var(--success); } .band-text-none { color: var(--text-faint); } /* ---- Exam readiness panel ---- Replaces the implicit binary gold star with an explicit coaching prompt. Two visual variants: ready (success-tinted) and not-ready (neutral with accent on the gap). */ .readiness-panel { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); margin-bottom: 24px; } .readiness-panel-ready { border-color: var(--success); background: var(--success-soft); } .readiness-panel-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); } .readiness-panel-ready .readiness-panel-icon { background: rgba(255, 255, 255, 0.6); color: var(--success); } .readiness-panel-body { flex: 1; min-width: 0; } .readiness-panel-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; color: var(--text); } .readiness-panel-message { font-size: 14px; color: var(--text-dim); line-height: 1.45; } /* ---- Domain breakdown ---- One row per domain. Layout is a label column, a bar that fills to the percent value, and a numeric summary on the right. The bar's color reflects the band; the empty space behind it is the muted track. */ .domain-breakdown { display: flex; flex-direction: column; gap: 12px; } .domain-row { display: grid; grid-template-columns: 200px 1fr 110px; align-items: center; gap: 14px; } .domain-label { font-size: 14px; font-weight: 500; color: var(--text); } .domain-bar-track { position: relative; height: 14px; background: var(--border-soft, var(--border)); border-radius: 7px; overflow: hidden; } .domain-bar-fill { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 7px; transition: width 0.4s ease-out; } .domain-stat { font-size: 13px; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; } .domain-stat .domain-pct { font-weight: 600; font-size: 14px; } .domain-row.domain-row-empty .domain-stat { color: var(--text-faint); font-style: italic; } @media (max-width: 600px) { .domain-row { grid-template-columns: 1fr; gap: 6px; } .domain-stat { text-align: left; } } /* ---- Recent trend chart ---- Vertical bars, one per session, scaled to a fixed chart height. No axis labels because the bar shape itself is the message: rising means improving, falling means sliding, flat means plateaued. Hovering a bar shows the score and date via a native title tooltip. */ .trend-chart { display: flex; align-items: flex-end; gap: 6px; height: 80px; padding: 8px 0; border-bottom: 1px solid var(--border); } .trend-bar { flex: 1; min-width: 8px; border-radius: 3px 3px 0 0; position: relative; cursor: default; transition: opacity 0.15s ease; } .trend-bar:hover { opacity: 0.7; } .trend-bar-exam { outline: 2px solid var(--text); outline-offset: -2px; } .trend-empty { display: flex; align-items: center; justify-content: center; height: 80px; color: var(--text-faint); font-size: 14px; font-style: italic; border: 1px dashed var(--border); border-radius: 6px; } .trend-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; } .trend-legend-item { display: inline-flex; align-items: center; gap: 6px; } .trend-legend-swatch { width: 12px; height: 12px; border-radius: 2px; } .trend-legend-exam { width: 12px; height: 12px; border-radius: 2px; background: var(--text-dim); border: 2px solid var(--text); box-sizing: border-box; } /* Section header for reporting blocks. Less heavy than the page-wide .section-header, with the title left-aligned and a quiet caption underneath if needed. */ .report-section { margin-bottom: 28px; } .report-section-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; color: var(--text); } .report-section-caption { font-size: 13px; color: var(--text-dim); margin-bottom: 14px; } /* ============ Stat tiles ============ */ .stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } /* 4-column variant for the admin dashboard's account-summary tiles (v3.3.1). The student dashboard uses 3 tiles per row via the primary/secondary variants; the admin dashboard's 4-up summary deserves its own column count so 4 tiles don't wrap to 3+1. */ .stat-tiles-quad { grid-template-columns: repeat(4, 1fr); margin-bottom: 36px; } .stat-tiles-primary { margin-bottom: 12px; } .stat-tiles-secondary { margin-bottom: 28px; } @media (max-width: 760px) { .stat-tiles, .stat-tiles-quad { grid-template-columns: repeat(2, 1fr); } /* On narrow screens collapse the gap between the two strips so the primary-secondary split still reads as related content. */ .stat-tiles-primary { margin-bottom: 8px; } } .stat-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 12px; box-shadow: var(--shadow-card); } /* Primary tiles get visual emphasis: a touch more padding, larger value */ .stat-tile-large { padding: 20px 22px 18px; border-color: var(--border-strong, var(--border)); } .stat-tile-value { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1; letter-spacing: -0.02em; margin-bottom: 8px; } .stat-tile-large .stat-tile-value { font-size: 32px; } .stat-tile-suffix { font-size: 14px; color: var(--text-faint); font-weight: 500; } .stat-tile-large .stat-tile-suffix { font-size: 18px; } .stat-tile-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .stat-tile-large .stat-tile-label { font-size: 12px; } @media (max-width: 540px) { .action-card-wide { grid-column: span 1; } } /* Tertiary navigation: leaderboard, history, etc. Rendered as a quiet inline link below the action grid rather than competing with the action cards for attention. */ .action-grid-secondary-link { margin: 0 0 36px; font-size: 14px; text-align: right; } /* ============ Sections ============ */ .section-block { margin-bottom: 36px; } .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .section-header h2 { font-size: 18px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; } .section-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 14px; font-weight: 700; display: flex; align-items: center; gap: 10px; justify-content: space-between; } .section-label > span:first-child { display: flex; align-items: center; gap: 10px; } .section-label > span:first-child::before { content: ''; display: inline-block; width: 4px; height: 4px; background: var(--blue); border-radius: 50%; } .section-label-inline { margin-bottom: 6px; } .setup-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px; margin-bottom: 24px; box-shadow: var(--shadow-card); } @media (max-width: 600px) { .setup-section { padding: 18px; } } /* ============ Session list (dashboard) ============ */ .session-list { display: flex; flex-direction: column; gap: 8px; } .session-row { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; } .session-row-score { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; min-width: 60px; } .score-pass { color: var(--success); } .score-mid { color: var(--blue); } .score-fail { color: var(--danger); } .score-na { color: var(--text-faint); } /* Utility */ .text-muted { color: var(--text-faint); } /* Exam date urgency indicator for admin students list */ .exam-date-urgent { color: var(--danger); font-weight: 600; } .exam-date-soon { color: var(--blue); font-weight: 600; } .exam-date-normal { color: var(--text); } .exam-date-past { color: var(--text-faint); text-decoration: line-through; } /* Maintenance mode card on admin dashboard */ .maintenance-card { border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px; margin-bottom: 24px; background: var(--bg-card); } .maintenance-card-on { border-color: var(--danger); background: var(--danger-soft); } .maintenance-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .maintenance-card-header h2 { margin: 0; font-size: 18px; } .maintenance-status { padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; } .maintenance-status-on { background: var(--danger); color: #fff; } .maintenance-status-off { background: var(--border); color: var(--text-faint); } .maintenance-card-body { margin: 8px 0 16px 0; color: var(--text-dim); font-size: 14px; line-height: 1.5; } /* Maintenance modal overlay for student-facing pages */ .maintenance-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; } .maintenance-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 32px; max-width: 480px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); text-align: center; } .maintenance-modal-icon { width: 48px; height: 48px; margin: 0 auto 16px; color: var(--danger); } .maintenance-modal h2 { margin: 0 0 12px 0; font-size: 22px; color: var(--text); } .maintenance-modal p { margin: 0 0 16px 0; color: var(--text); line-height: 1.5; } .maintenance-modal-countdown { font-size: 48px; font-weight: 700; color: var(--danger); margin: 16px 0; line-height: 1; font-variant-numeric: tabular-nums; } .maintenance-modal-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* Small banner shown at the top of student pages while maintenance is on */ .maintenance-banner { background: var(--danger); color: #fff; text-align: center; padding: 8px 16px; font-size: 14px; font-weight: 600; position: sticky; top: 0; z-index: 100; } .session-row-title { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; flex-wrap: wrap; } .session-mode { display: inline-flex; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 6px; background: var(--gray-50); color: var(--text-dim); } .session-mode.mode-exam { background: var(--info-soft); color: var(--info); } .session-mode.mode-unseen { background: var(--blue-soft); color: var(--blue); } .session-label { font-size: 14px; font-weight: 600; color: var(--text); } .session-row-meta { font-size: 13px; color: var(--text-dim); } .session-row-time { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-faint); } @media (max-width: 600px) { .session-row { grid-template-columns: auto 1fr; padding: 10px 12px; } .session-row-time { display: none; } } /* ============ Empty state ============ */ .empty-state { background: var(--bg-card); border: 1px dashed var(--border-strong); border-radius: 12px; padding: 32px 20px; text-align: center; color: var(--text-dim); } /* ============ Info banners ============ */ .info-banner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; background: var(--info-soft); border: 1px solid var(--info); color: var(--info); font-size: 14px; line-height: 1.55; } .info-banner svg { flex-shrink: 0; margin-top: 2px; } .info-banner-success { background: var(--success-soft); border-color: var(--success); color: var(--success); } .info-banner-error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } .info-banner-warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); } .info-banner .link-strong { color: inherit; font-weight: 600; text-decoration: underline; } /* ============ Buttons ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; user-select: none; text-decoration: none; } .btn:hover { border-color: var(--blue); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; } .btn-primary:hover { background: var(--blue-strong); border-color: var(--blue-strong); color: #fff; } .btn-ghost { background: transparent; border-color: var(--border); } .btn-block { width: 100%; } .btn-large { padding: 16px 24px; font-size: 15px; } .btn-sm { padding: 7px 14px; font-size: 13px; } .btn.is-disabled { opacity: 0.5; pointer-events: none; } /* ============ Forms ============ */ .field-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; margin-top: 16px; } .field-label:first-child { margin-top: 0; } .field-input { width: 100%; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 15px; transition: border-color 0.15s; } .field-input:focus { border-color: var(--blue); outline: none; } /* 2.11.1: explicit placeholder colour from the theme token, so themed inputs do not fall back to a browser default that can read too dark on a dark field. opacity:1 overrides Firefox's default placeholder dimming. */ .field-input::placeholder { color: var(--text-faint); opacity: 1; } .field-hint { font-size: 12px; color: var(--text-faint); margin-top: 6px; } select.field-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } } .form-field { margin: 0; } .form-error { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; } .form-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .toggle-row { margin-top: 16px; margin-bottom: 16px; } .toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: var(--text); line-height: 1.5; } .toggle input { accent-color: var(--blue); transform: scale(1.15); flex-shrink: 0; margin-top: 2px; } .input-with-button { display: flex; gap: 8px; } .input-with-button .field-input { flex: 1; } /* ============ Gate (login / reset / bootstrap) ============ */ .page-gate { min-height: 100vh; display: flex; flex-direction: column; } .gate-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 16px; } .gate-card { width: 100%; max-width: 420px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 36px 32px; box-shadow: var(--shadow-elev); } .gate-card-wide { max-width: 560px; } .gate-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); color: var(--blue); } .gate-brand .brand-logo { height: 28px; } .gate-tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--navy); } .gate-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); background: var(--gray-50); border: 1px solid var(--border); padding: 5px 10px; border-radius: 999px; margin-bottom: 16px; } .gate-eyebrow svg { color: var(--blue); } .gate-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; color: var(--navy); } .gate-sub { color: var(--text-dim); margin-bottom: 24px; font-size: 14px; } .gate-sub code { font-family: 'JetBrains Mono', monospace; background: var(--gray-50); padding: 2px 5px; border-radius: 4px; font-size: 12px; } .gate-form .btn { margin-top: 20px; } .gate-footer { margin-top: 18px; text-align: center; font-size: 13px; } .link-quiet { color: var(--text-dim); } .link-quiet:hover { color: var(--blue); } .bootstrap-creds { background: var(--blue-soft); border: 1px solid var(--blue-light); border-radius: 10px; padding: 14px 16px; margin: 14px 0; display: flex; gap: 20px; flex-wrap: wrap; } .bootstrap-creds-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 4px; } .bootstrap-creds-value { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; color: var(--navy); word-break: break-all; } .bootstrap-creds-pw { color: var(--blue); font-size: 16px; } .bootstrap-creds-section { border-color: var(--blue); border-width: 1.5px; } /* ============ Preset cards (setup screen) ============ */ .preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 760px) { .preset-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 440px) { .preset-grid { grid-template-columns: 1fr; } } .preset-card { position: relative; padding: 18px 16px 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; color: var(--text); cursor: pointer; font-family: 'Space Grotesk', sans-serif; transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; text-align: left; display: flex; flex-direction: column; gap: 6px; min-height: 116px; } .preset-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 6px 16px -8px rgba(0, 101, 179, 0.35); } .preset-card:active { transform: translateY(0); } .preset-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .preset-icon { width: 32px; height: 32px; background: var(--blue-soft); color: var(--blue); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .preset-icon svg { width: 16px; height: 16px; } .preset-tag { font-size: 10.5px; font-weight: 600; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border); padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .preset-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.005em; line-height: 1.2; } .preset-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); } .preset-card-featured { background: linear-gradient(135deg, var(--blue-soft) 0%, var(--bg-elev) 70%); border-color: var(--blue); border-width: 1.5px; } .preset-card-featured .preset-icon { background: var(--blue); color: #fff; } .preset-card-featured .preset-tag { background: var(--blue); color: #fff; border-color: var(--blue); } .preset-card.is-preselected { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); } /* ============ Quiz screen ============ */ .quiz-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; } .quiz-header-left, .quiz-header-right { display: flex; align-items: center; gap: 10px; } .progress-info { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text-dim); } .progress-info .current { color: var(--blue); font-weight: 700; } .progress-info .of { color: var(--text-faint); } .progress-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 18px; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-light)); transition: width 0.3s; } .quiz-timer { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--text-dim); padding: 5px 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; } .quiz-timer svg { color: var(--blue); } .quiz-timer-exam { background: var(--info-soft); border-color: var(--info); color: var(--info); } .quiz-timer-exam svg { color: var(--info); } .quiz-timer.is-urgent { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); animation: timer-pulse 1.2s ease-in-out infinite; } .quiz-timer.is-urgent svg { color: var(--danger); } @keyframes timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .quiz-peek-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; cursor: pointer; font-family: 'Space Grotesk', sans-serif; } .quiz-peek-btn:hover { border-color: var(--blue); } .quiz-peek-btn[aria-expanded="true"] { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); } .peek-panel[hidden] { display: none !important; } .peek-panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; padding: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; } .peek-stat { text-align: center; padding: 6px 4px; } .peek-value { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; line-height: 1; } .peek-stat-correct .peek-value { color: var(--success); } .peek-stat-incorrect .peek-value { color: var(--danger); } .peek-stat-pending .peek-value { color: var(--text-dim); } .peek-stat-accuracy .peek-value { color: var(--blue); } .peek-label { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; font-weight: 600; } @media (max-width: 480px) { .peek-panel { grid-template-columns: repeat(2, 1fr); gap: 12px 8px; padding: 12px; } .peek-value { font-size: 20px; } } /* ============ Question card ============ */ .q-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; margin-bottom: 16px; box-shadow: var(--shadow-card); } @media (max-width: 600px) { .q-card { padding: 20px; } } .q-number-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .q-number { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--blue); background: var(--blue-soft); padding: 4px 10px; border-radius: 6px; letter-spacing: 0.04em; } .q-format { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; } .q-mode-badge { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; color: var(--info); background: var(--info-soft); padding: 4px 8px; border-radius: 6px; letter-spacing: 0.08em; margin-left: auto; } /* ============ Bookmark toggle (v3.2) ============ */ .q-bookmark-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 10px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-dim); background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: color 120ms, background 120ms, border-color 120ms; } .q-bookmark-btn:hover { color: var(--text); border-color: var(--border-strong); } .q-bookmark-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .q-bookmark-btn.is-bookmarked { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); } .q-bookmark-btn[disabled] { opacity: 0.6; cursor: wait; } /* When q-mode-badge is also present, both should not claim margin-left: auto. The badge wins (it's contextual), bookmark sits next to it with normal gap. */ .q-number-row .q-mode-badge + .q-bookmark-btn { margin-left: 8px; } /* ============ Bookmark list (profile.php) ============ */ .bookmark-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; } .bookmark-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; } .bookmark-item-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; } .bookmark-q-number { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--blue); flex-shrink: 0; } .bookmark-q-stem { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bookmark-item-action { flex-shrink: 0; } /* ============ Collapsible "Custom Session" on setup.php (v3.2.1) ============ Wrapped in

so it doesn't crowd the page. Summary is the only thing rendered when collapsed; the chevron rotates when open. */ .custom-session-details { /* Remove default

styling */ margin: 0; } .custom-session-summary { display: flex; align-items: center; gap: 12px; padding: 4px 0; cursor: pointer; list-style: none; user-select: none; } .custom-session-summary::-webkit-details-marker { display: none; } .custom-session-summary::marker { display: none; } .custom-session-summary:hover .custom-session-hint { color: var(--text); } .custom-session-hint { font-size: 13px; color: var(--text-dim); transition: color 120ms; } .custom-session-chevron { margin-left: auto; color: var(--text-dim); transition: transform 200ms; } .custom-session-details[open] .custom-session-chevron { transform: rotate(180deg); } .custom-session-details[open] #customForm { margin-top: 16px; } .custom-session-summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; } /* ============ Danger-zone section (v3.2.2) ============ Used by the Reset Progress block on security.php and visually marks any setup-section that contains a destructive action. Distinct enough to be impossible to mistake for a routine setting. */ .danger-zone-section { border: 1px solid var(--danger); background: var(--danger-soft); } .section-label-danger span { color: var(--danger); } /* Reset Progress collapses by default so it doesn't dominate the page; user must explicitly expand it before they can fill the form. */ .reset-progress-details { margin-top: 14px; } .reset-progress-summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--danger); font-weight: 600; font-size: 13px; padding: 8px 14px; border: 1px solid var(--danger); border-radius: 6px; background: transparent; transition: background 120ms; user-select: none; } .reset-progress-summary::-webkit-details-marker { display: none; } .reset-progress-summary::marker { display: none; } .reset-progress-summary:hover { background: rgba(185, 28, 28, 0.08); } [data-theme="dark"] .reset-progress-summary:hover { background: rgba(248, 113, 113, 0.10); } .reset-progress-summary:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; } .reset-progress-details[open] .reset-progress-summary { background: rgba(185, 28, 28, 0.08); } /* ============ Profile → linked sub-page card (v3.2.1) ============ "Security" on profile.php is no longer a form; it's a card pointing at /security.php. Same setup-section box, but contents are a single row with text on the left and a button on the right. */ .profile-link-section { /* Inherits setup-section padding/border/bg */ } .profile-link-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .profile-link-text { flex: 1; min-width: 200px; } .section-label-inline { /* For when the section-label sits inline with body text, not as a header. */ margin-bottom: 6px; } .security-status { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-left: 6px; vertical-align: 1px; } .security-status-on { background: var(--success-soft, rgba(16, 185, 129, 0.12)); color: var(--success, #059669); } .security-status-off { background: rgba(0, 0, 0, 0.06); color: var(--text-dim); } [data-theme="dark"] .security-status-off { background: rgba(255, 255, 255, 0.08); } /* ============ TOTP setup (profile.php v3.2) ============ */ .totp-qr-block { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 18px; margin-top: 14px; } .totp-qr-canvas-wrap { flex-shrink: 0; background: #ffffff; padding: 12px; border-radius: 6px; /* Always white background regardless of theme so the QR scans reliably */ } .totp-qr-canvas-wrap canvas { display: block; } .totp-qr-side { flex: 1; min-width: 200px; } @media (max-width: 540px) { .totp-qr-block { flex-direction: column; align-items: center; text-align: center; } .totp-qr-side { text-align: left; } } .totp-setup-grid { display: grid; gap: 14px; margin-top: 14px; } .totp-setup-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; } .totp-setup-value { font-size: 14px; word-break: break-all; padding: 8px 10px; background: var(--bg); border-radius: 6px; margin-top: 4px; } .totp-setup-secret { font-size: 16px; letter-spacing: 0.04em; font-weight: 600; } /* ============ Recovery codes list ============ */ .recovery-code-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; } .recovery-code-list li { padding: 6px 10px; background: rgba(0, 0, 0, 0.04); border-radius: 4px; text-align: center; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; } [data-theme="dark"] .recovery-code-list li { background: rgba(255, 255, 255, 0.06); } /* ===================================================================== Case study panel (v3.5.1). Renders above the question stem for case-study-tagged questions, in a collapsible scrollable container. Uses native

so it works without JavaScript and the open/closed state is preserved during normal navigation by the browser's session storage. ===================================================================== */ .case-study-panel { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); margin-bottom: 22px; overflow: hidden; } .case-study-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; padding: 12px 16px; cursor: pointer; background: var(--bg-soft, var(--bg-card)); border-bottom: 1px solid transparent; user-select: none; list-style: none; position: relative; } .case-study-panel[open] .case-study-summary { border-bottom-color: var(--border); } .case-study-summary::-webkit-details-marker { display: none; } .case-study-summary::before { content: "▸"; display: inline-block; font-size: 11px; color: var(--text-dim); margin-right: 4px; transition: transform 0.15s ease; width: 11px; } .case-study-panel[open] .case-study-summary::before { transform: rotate(90deg); } .case-study-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue); } .case-study-title { font-size: 16px; font-weight: 600; color: var(--text); } .case-study-subtitle { font-size: 13px; color: var(--text-dim); font-style: italic; } .case-study-toggle-hint { margin-left: auto; font-size: 11px; color: var(--text-faint); text-transform: lowercase; } .case-study-body { padding: 18px 22px 22px; max-height: 540px; overflow-y: auto; font-size: 14px; line-height: 1.6; color: var(--text); } .case-study-section { margin-bottom: 22px; } .case-study-section:last-child { margin-bottom: 0; } .case-study-section-heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .case-study-section-body p { margin: 0 0 10px; } .case-study-section-body p:last-child { margin-bottom: 0; } .case-study-list { margin: 0 0 10px; padding-left: 22px; } .case-study-list li { margin-bottom: 4px; } .case-study-table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 13px; } .case-study-table th, .case-study-table td { text-align: left; padding: 6px 10px; border: 1px solid var(--border); } .case-study-table th { background: var(--bg-soft, var(--bg-card)); font-weight: 600; color: var(--text); } @media (max-width: 640px) { .case-study-summary { padding: 10px 12px; } .case-study-toggle-hint { display: none; } .case-study-body { padding: 14px 16px; max-height: 420px; } } .q-stem { font-size: 16px; line-height: 1.65; margin-bottom: 22px; color: var(--text); } .q-stem p { margin-bottom: 14px; } .q-stem p:last-child { margin-bottom: 0; } /* Embedded query/code block inside a question stem (KQL, SQL, etc.). Monospace, preserves whitespace, horizontally scrollable so long lines don't reflow. */ .q-code { margin: 0 0 14px; padding: 14px 16px; background: var(--bg-elevated, #f4f6f8); border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; font-size: 13px; line-height: 1.5; } .q-code code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; color: var(--text); } [data-theme="dark"] .q-code { background: #11192b; } .stem-label { color: var(--blue); font-weight: 700; } .reveal-only-banner { background: var(--gray-50); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--text-dim); margin-bottom: 14px; font-family: 'JetBrains Mono', monospace; } /* ============ Options ============ */ .options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; } .option { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; font-family: 'Space Grotesk', sans-serif; font-size: 15px; cursor: pointer; text-align: left; width: 100%; color: var(--text); transition: border-color 0.15s, background 0.15s; } .option:hover:not(:disabled):not(.option-passive) { border-color: var(--blue); background: var(--blue-soft); } .option:disabled { cursor: default; } .option.option-passive { cursor: default; } .option-letter { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--gray-100); color: var(--text); border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; flex-shrink: 0; } .option-text { flex: 1; } .option.correct { border-color: var(--success); background: var(--success-soft); } .option.correct .option-letter { background: var(--success); color: #fff; } .option.incorrect { border-color: var(--danger); background: var(--danger-soft); } .option.incorrect .option-letter { background: var(--danger); color: #fff; } .option.dimmed { opacity: 0.55; } .option.selected { border-color: var(--blue); background: var(--blue-soft); } .option.selected .option-letter { background: var(--blue); color: #fff; } /* ============ Statements (Yes/No) ============ */ .stmt-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .stmt-row { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; } @media (max-width: 600px) { .stmt-row { grid-template-columns: 1fr; } .stmt-options { justify-content: flex-end; } } .stmt-text { font-size: 14.5px; line-height: 1.55; } .stmt-options { display: flex; gap: 6px; } .stmt-btn { padding: 7px 14px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 8px; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); transition: all 0.15s; } .stmt-btn:hover:not(:disabled) { border-color: var(--blue); } .stmt-btn:disabled { cursor: default; } .stmt-btn.is-selected { background: var(--blue); color: #fff; border-color: var(--blue); } .stmt-btn.is-correct { background: var(--success); color: #fff; border-color: var(--success); } .stmt-btn.is-wrong { background: var(--danger); color: #fff; border-color: var(--danger); } /* Dropdown-style HOTSPOTs (SC-300 multi-choice-per-row pattern) */ .stmt-row-dropdown { grid-template-columns: 1fr; gap: 10px; } .stmt-row-dropdown .stmt-text { font-weight: 600; font-size: 14.5px; } .stmt-dropdown-wrap, .stmt-dropdown-review { display: flex; flex-direction: column; gap: 6px; } .stmt-select { width: 100%; padding: 9px 12px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 8px; font-family: 'Space Grotesk', sans-serif; font-size: 14px; color: var(--text); cursor: pointer; appearance: auto; } .stmt-select:hover:not(:disabled) { border-color: var(--blue); } .stmt-select:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); } .stmt-select:disabled { cursor: default; opacity: 0.9; } .stmt-result { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; margin-right: 6px; } .stmt-result-correct { background: var(--success); color: #fff; } .stmt-result-wrong { background: var(--danger); color: #fff; } .stmt-result-expected { background: var(--bg); border: 1px dashed var(--border-strong); color: var(--text); } /* ============ Reveal block ============ */ .reveal-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } .answer-block, .rationale-block { margin-bottom: 14px; } .answer-label, .rationale-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 6px; } .answer-value { font-size: 15px; color: var(--text); background: var(--gray-50); border-left: 3px solid var(--blue); padding: 10px 14px; border-radius: 0 6px 6px 0; } .rationale-text { font-size: 14.5px; line-height: 1.65; color: var(--text); } /* ============ Quiz nav ============ */ .quiz-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .kbd-hints { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--text-faint); } kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; line-height: 1; } @media (max-width: 720px) { .kbd-hints { display: none; } .quiz-actions .btn { flex: 1; } } /* ============ Results screen ============ */ .results-hero { text-align: center; margin-bottom: 32px; } .page-results h1 { font-size: 28px; margin-bottom: 24px; letter-spacing: -0.025em; color: var(--navy); } .score-ring-wrap { position: relative; width: 200px; height: 200px; margin: 0 auto 24px; } @media (max-width: 480px) { .score-ring-wrap { width: 170px; height: 170px; } } .score-ring { width: 100%; height: 100%; } .score-ring-track { stroke: var(--border); } .score-ring-fill { stroke: var(--blue); transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1); } .score-ring-fill.score-pass { stroke: var(--success); } .score-ring-fill.score-fail { stroke: var(--danger); } .score-ring-fill.score-mid { stroke: var(--blue); } .score-ring-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .score-display { font-family: 'JetBrains Mono', monospace; font-size: 48px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; line-height: 1; } .score-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 6px; font-weight: 700; } .score-detail { color: var(--text-dim); margin-bottom: 12px; font-size: 14px; } .score-verdict { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; } .score-verdict-pass { background: var(--success-soft); color: var(--success); } .score-verdict-mid { background: var(--blue-soft); color: var(--blue); } .score-verdict-fail { background: var(--danger-soft); color: var(--danger); } .score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; } .score-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 8px; text-align: center; } .score-stat-value { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 700; line-height: 1; } .score-stat-correct { color: var(--success); } .score-stat-incorrect { color: var(--danger); } .score-stat-reviewed { color: var(--text-dim); } .score-stat-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; font-weight: 600; } .results-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ============ Profile screen ============ */ .profile-info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 480px) { .profile-info { grid-template-columns: 1fr; } } .profile-field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 4px; } .profile-field-value { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--text); } /* ============ Exam target (SC-300 badge) ============ */ .setup-section-exam-target { display: flex; align-items: center; gap: 20px; background: linear-gradient(135deg, var(--blue-soft) 0%, var(--bg-card) 70%); border-color: var(--blue-light); } .exam-target-badge { flex-shrink: 0; } .exam-target-badge img { width: 80px; height: 80px; display: block; } .exam-target-content h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin: 4px 0 6px; } .exam-target-content p { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; } @media (max-width: 480px) { .setup-section-exam-target { flex-direction: column; text-align: center; } } /* ============ Leaderboard ============ */ /* Standings hero card */ .standings-hero { display: flex; align-items: center; gap: 24px; padding: 20px 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 24px; flex-wrap: wrap; } .standings-hero-identity { display: flex; align-items: center; gap: 14px; min-width: 180px; } .standings-hero-name { display: flex; flex-direction: column; } .standings-hero-nickname { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.2; } .standings-hero-tag { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; } .standings-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; } .standing-chip { display: flex; flex-direction: column; padding: 8px 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; min-width: 110px; } .standing-chip-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; } .standing-chip-rank { font-size: 20px; font-weight: 700; color: var(--blue); line-height: 1.1; margin-top: 2px; } .standing-chip-hint { font-size: 11px; color: var(--text-faint); margin-top: 2px; line-height: 1.3; } /* Top-3 styling on the standing chips */ .standing-chip-podium { border-width: 2px; } .standing-chip-podium-1 { border-color: #d4a017; } .standing-chip-podium-1 .standing-chip-rank { color: #b8860b; } .standing-chip-podium-2 { border-color: #94a3b8; } .standing-chip-podium-2 .standing-chip-rank { color: #64748b; } .standing-chip-podium-3 { border-color: #c2722f; } .standing-chip-podium-3 .standing-chip-rank { color: #9a5524; } .standing-chip-empty .standing-chip-rank { display: none; } /* Gap-to-next subtitle on the score chips */ .standing-chip-sub { font-size: 11px; color: var(--blue); font-weight: 600; margin-top: 2px; line-height: 1.3; } .standing-chip-podium-1 .standing-chip-sub { color: #b8860b; } .standing-chip-podium-2 .standing-chip-sub { color: #64748b; } .standing-chip-podium-3 .standing-chip-sub { color: #9a5524; } /* Study-streak pill in the standings hero */ .lb-streak { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 10px; background: linear-gradient(90deg, #fff3e0, #ffe0b2); color: #b3540b; border: 1px solid #f0b878; border-radius: 999px; font-size: 12px; font-weight: 700; width: fit-content; } .lb-streak-flame { font-size: 13px; line-height: 1; } html[data-theme="dark"] .lb-streak { background: rgba(179, 84, 11, 0.18); color: #f0b878; border-color: rgba(240, 184, 120, 0.4); } /* Rank-movement badge on the recent board */ .lb-move { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle; font-family: var(--num, inherit); } .lb-move-up { color: #15803d; } .lb-move-down { color: #b3261e; } .lb-move-flat { color: var(--text-faint); } .lb-move-new { color: var(--blue); font-size: 9px; letter-spacing: 0.04em; padding: 1px 4px; border: 1px solid var(--border); border-radius: 4px; } html[data-theme="dark"] .lb-move-up { color: #4ade80; } html[data-theme="dark"] .lb-move-down { color: #f87171; } /* Boards grid layout */ .boards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 900px) { .boards-grid { grid-template-columns: 1fr; } } /* Individual board card */ .board-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; } .board-card-header { margin-bottom: 16px; } .board-card-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 4px 0; } .board-card-meta { font-size: 12px; color: var(--text-dim); margin: 0; line-height: 1.4; } .board-list { display: flex; flex-direction: column; gap: 4px; } .board-list-extra { margin-top: 4px; } /* Row layout: rank | avatar | name (flex) | stat cell */ .board-row { display: grid; grid-template-columns: 36px 32px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: transparent; border: 1px solid transparent; border-radius: 8px; border-left-width: 3px; } .board-row-me { background: var(--blue-soft); border-color: var(--blue); } /* Podium accents: gold/silver/bronze left-border */ .board-row-podium-1 { border-left-color: #d4a017; background: rgba(212, 160, 23, 0.05); } .board-row-podium-2 { border-left-color: #94a3b8; background: rgba(148, 163, 184, 0.06); } .board-row-podium-3 { border-left-color: #c2722f; background: rgba(194, 114, 47, 0.05); } .board-row-podium.board-row-me { background: var(--blue-soft); border-color: var(--blue); border-left-width: 3px; } .board-rank-cell { display: flex; align-items: center; justify-content: center; } .board-rank { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--border); } .board-rank-podium-1 { background: #d4a017; color: #fff; border-color: #b8860b; } .board-rank-podium-2 { background: #94a3b8; color: #fff; border-color: #64748b; } .board-rank-podium-3 { background: #c2722f; color: #fff; border-color: #9a5524; } .board-name { font-weight: 600; color: var(--text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board-name-meta { font-size: 11px; color: var(--text-dim); font-weight: 400; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .me-tag { display: inline-block; background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-left: 6px; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; } .board-stat-cell { text-align: right; display: flex; flex-direction: column; align-items: flex-end; } .board-stat-primary { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.1; } .board-stat-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; line-height: 1.3; } /* Improvement delta arrows */ .delta-up { color: var(--success); } .delta-down { color: var(--danger); } .delta-flat { color: var(--text-dim); } /* Show-all expander */ .board-more { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; } .board-more summary { font-size: 12px; color: var(--text-dim); cursor: pointer; padding: 6px 10px; user-select: none; list-style: none; } .board-more summary::-webkit-details-marker { display: none; } .board-more summary::after { content: '▾'; margin-left: 6px; font-size: 10px; display: inline-block; } .board-more[open] summary::after { content: '▴'; } .board-more summary:hover { color: var(--blue); } /* Empty state inside a board card */ .board-empty { text-align: center; padding: 20px 10px; color: var(--text-dim); } .board-empty p { margin: 0 0 12px 0; font-size: 13px; } /* Tighter rows on narrow screens (mobile) but keep metadata visible */ @media (max-width: 600px) { .board-row { grid-template-columns: 32px 28px 1fr auto; gap: 8px; padding: 8px; } .board-rank { width: 24px; height: 24px; font-size: 12px; } .standings-hero { flex-direction: column; align-items: stretch; padding: 16px; } .standings-hero-identity { min-width: 0; } .standing-chip { flex: 1 1 calc(50% - 4px); min-width: 0; } } /* ============ Admin tables ============ */ .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; } .admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } /* On narrow screens a wide multi-column table must overflow its wrapper so the wrapper's horizontal scroll engages, otherwise columns get clipped off the right edge with no way to reach them. A min-width forces the overflow. The students table is the widest (status, nickname, email, role, exams, sessions, avg, ready, board, last-active, actions). */ @media (max-width: 900px) { .admin-table { min-width: 620px; } .admin-table.admin-table-wide { min-width: 880px; } .admin-table-wrap { position: relative; background: linear-gradient(to right, var(--bg-card) 30%, rgba(255,255,255,0)), linear-gradient(to right, rgba(0,0,0,0.06), rgba(255,255,255,0) 12px) 100% 0, var(--bg-card); background-repeat: no-repeat; background-size: 40px 100%, 14px 100%, 100% 100%; background-attachment: local, scroll, local; } } .admin-table th { text-align: left; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); padding: 12px 12px; border-bottom: 1px solid var(--border); background: var(--gray-50); white-space: nowrap; } .admin-table td { padding: 12px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .admin-table tr:last-child td { border-bottom: none; } .admin-table tr:hover td { background: var(--gray-50); } .admin-table-mono { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; } .admin-table-meta { color: var(--text-dim); font-size: 12px; } /* v2.63 fix: this rule previously set display:flex on the itself, which removes the cell from the table layout model and renders the action buttons detached outside the table card (seen on /admin/students and the SAT/PDPA/ ISO report pages). The td must remain a table cell; the flex behaviour is applied to its children instead, preserving the 12px gaps. */ .admin-table-actions { white-space: nowrap; } .admin-table-actions > * { display: inline-flex; align-items: center; vertical-align: middle; } .admin-table-actions > * + * { margin-left: 12px; } .admin-table-actions form { background: none; border: none; padding: 0; margin: 0; } .admin-table-actions button { background: none; border: none; font: inherit; color: var(--text-dim); cursor: pointer; padding: 0; font-size: 12.5px; } .admin-table-actions button:hover { color: var(--blue); text-decoration: underline; } .row-disabled { opacity: 0.55; } .role-pill { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 6px; background: var(--gray-100); color: var(--text); } .role-pill-admin { background: var(--info-soft); color: var(--info); } .role-pill-instructor { background: var(--blue-soft); color: var(--blue); } .role-pill-student { background: var(--gray-100); color: var(--text-dim); } .role-pill-disabled { background: var(--danger-soft); color: var(--danger); } .mode-pill { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 6px; background: var(--gray-100); color: var(--text-dim); } .mode-exam { background: var(--info-soft); color: var(--info); } .mode-unseen { background: var(--blue-soft); color: var(--blue); } /* Case Study Exam is timed like exam but distinct; uses a muted purple/violet tone so it reads as a sibling of exam (info-blue) without being mistaken for the standard exam mode (v3.5.2). Long label fits with tightened letter-spacing. */ .mode-case_exam { background: rgba(120, 90, 200, 0.14); color: rgb(120, 90, 200); letter-spacing: 0.04em; } html[data-theme="dark"] .mode-case_exam { background: rgba(160, 130, 230, 0.18); color: rgb(180, 150, 240); } .session-mode.mode-case_exam { background: rgba(120, 90, 200, 0.14); color: rgb(120, 90, 200); } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .dot-success { background: var(--success); } .dot-muted { background: var(--gray-300); } /* ============================================================ v2.1 additions: login badge, theme options, avatars, dark mode ============================================================ */ /* ---- SC-300 badge on login screen ---- */ .gate-badge-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--blue-soft); border: 1px solid var(--blue-light); border-radius: 10px; margin-bottom: 18px; } .gate-badge-img { width: 56px; height: 56px; flex-shrink: 0; display: block; } .gate-badge-cert { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue); margin-bottom: 2px; } .gate-badge-exam { font-size: 14px; font-weight: 700; color: var(--navy); letter-spacing: -0.005em; } /* ---- Theme options (radio cards) ---- */ .theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } @media (max-width: 480px) { .theme-options { grid-template-columns: 1fr; } } .theme-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .theme-option:hover { border-color: var(--blue); } .theme-option.is-selected { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 1px var(--blue) inset; } .theme-option input { position: absolute; opacity: 0; pointer-events: none; } .theme-option-swatch { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; border: 1px solid var(--border-strong); } .theme-swatch-light { background: linear-gradient(135deg, #f9f7f1 0%, #ffffff 100%); } .theme-swatch-dark { background: linear-gradient(135deg, #0a0f1c 0%, #1a2540 100%); border-color: #2a3550; } .theme-option-label { font-weight: 600; flex: 1; } .theme-option-hint { font-size: 11px; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; } /* ---- Avatar block on profile page ---- */ .avatar-block { display: flex; align-items: flex-start; gap: 20px; } @media (max-width: 600px) { .avatar-block { flex-direction: column; align-items: center; text-align: center; } } .avatar-preview { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--gray-100); border: 2px solid var(--border); flex-shrink: 0; } .avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-size: 36px; font-weight: 700; color: var(--blue); background: var(--blue-soft); } .avatar-controls { flex: 1; } .avatar-help { font-size: 13px; color: var(--text-dim); margin-bottom: 14px; line-height: 1.55; } .avatar-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .avatar-file-input:focus + .avatar-actions label, .avatar-file-input:focus-visible + .avatar-actions label { outline: 2px solid var(--blue); outline-offset: 2px; } .avatar-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .avatar-filename { margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-dim); } /* ---- User chip with image avatar ---- */ .user-chip-avatar-img { padding: 0; background: transparent; overflow: hidden; } .user-chip-avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- Leaderboard avatars ---- */ .board-row { grid-template-columns: 40px 36px 1fr auto auto; } @media (max-width: 600px) { .board-row { grid-template-columns: 32px 32px 1fr auto; } } .board-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--gray-100); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .board-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .board-avatar-placeholder { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; color: var(--blue); background: var(--blue-soft); } @media (max-width: 600px) { .board-avatar { width: 32px; height: 32px; } } /* ============================================================ DARK MODE ============================================================ */ html[data-theme="dark"] { --bg: #0a0f1c; --bg-elev: #131a2b; --bg-card: #161f33; --border: #232d44; --border-strong: #344058; --gray-50: #131a2b; --gray-100: #1a2240; --gray-200: #232d44; --gray-300: #3a455e; --gray-500: #8a92a8; --gray-600: #aab3c5; --gray-700: #c4cad8; --text: #e7eaf0; --text-dim: #aab3c5; --text-faint: #6b7280; --blue: #4a9fd9; --blue-strong: #6fb0e0; --blue-light: #7fbce4; --blue-soft: rgba(74, 159, 217, 0.12); --success: #4ade80; --success-soft: rgba(74, 222, 128, 0.12); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.12); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.12); --info: #60a5fa; --info-soft: rgba(96, 165, 250, 0.12); --shadow-card: 0 0 0 1px rgba(255,255,255,0.02); --shadow-elev: 0 8px 24px rgba(0,0,0,0.4); --shadow-pop: 0 12px 32px -12px rgba(0,0,0,0.5); color-scheme: dark; } html[data-theme="dark"] body { background-image: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(0, 101, 179, 0.15), transparent 60%), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(74, 159, 217, 0.06), transparent 60%); } html[data-theme="dark"] .brand, html[data-theme="dark"] .brand-logo, html[data-theme="dark"] .gate-tag, html[data-theme="dark"] .brand-tag { color: var(--blue-light); } html[data-theme="dark"] .page-intro h1, html[data-theme="dark"] .results h1, html[data-theme="dark"] .results-hero h1, html[data-theme="dark"] .page-results h1, html[data-theme="dark"] .setup h1, html[data-theme="dark"] .gate-title, html[data-theme="dark"] .stat-tile-value, html[data-theme="dark"] .board-card-title, html[data-theme="dark"] .exam-target-content h3, html[data-theme="dark"] .section-header h2 { color: var(--text); } html[data-theme="dark"] .option-letter { background: var(--gray-200); color: var(--text); } html[data-theme="dark"] .q-number { background: rgba(74, 159, 217, 0.15); color: var(--blue-light); } html[data-theme="dark"] .preset-card, html[data-theme="dark"] .option, html[data-theme="dark"] .stmt-row, html[data-theme="dark"] .stat-tile, html[data-theme="dark"] .action-card, html[data-theme="dark"] .session-row { background: var(--bg-card); } /* Dark-mode leaderboard: rank dots and rows use bg-elev so they pop off the card */ html[data-theme="dark"] .board-rank { background: var(--bg-elev); } html[data-theme="dark"] .standing-chip { background: var(--bg-elev); } html[data-theme="dark"] .preset-card-featured { background: linear-gradient(135deg, rgba(74, 159, 217, 0.15) 0%, var(--bg-card) 70%); } html[data-theme="dark"] .reveal-only-banner { background: var(--gray-50); } html[data-theme="dark"] .answer-value { background: var(--gray-50); } html[data-theme="dark"] .field-input { background-color: var(--bg-elev); color: var(--text); } html[data-theme="dark"] select.field-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aab3c5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } html[data-theme="dark"] .btn { background: var(--bg-elev); color: var(--text); } html[data-theme="dark"] .btn-primary { background: var(--blue); color: #fff; } html[data-theme="dark"] .btn-primary:hover { background: var(--blue-strong); } html[data-theme="dark"] .header-mobile-toggle span { background: var(--text); } html[data-theme="dark"] .app-header, html[data-theme="dark"] .app-footer { background: var(--bg-elev); } html[data-theme="dark"] .gate-badge-row { background: rgba(74, 159, 217, 0.10); } html[data-theme="dark"] .gate-badge-cert { color: var(--blue-light); } html[data-theme="dark"] .gate-badge-exam { color: var(--text); } html[data-theme="dark"] .stem-label { color: var(--blue-light); } /* ============================================================ Review page (post-session walkthrough) ============================================================ */ .review-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .review-eyebrow { font-size: 13px; margin-bottom: 4px; } .review-title { font-size: 24px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; margin: 0; } .review-filter { display: inline-flex; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; } .review-filter-btn { display: inline-block; padding: 7px 16px; font-size: 13px; font-weight: 600; color: var(--text-dim); text-decoration: none; border-radius: 7px; transition: background 0.15s, color 0.15s; } .review-filter-btn:hover { color: var(--text); text-decoration: none; } .review-filter-btn.is-active { background: var(--blue); color: #fff; } .review-result-pill { margin-left: auto; display: inline-flex; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 6px; } .review-result-correct { background: var(--success-soft); color: var(--success); } .review-result-incorrect { background: var(--danger-soft); color: var(--danger); } .review-result-reviewed { background: var(--gray-100); color: var(--text-dim); } .option-marker { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; margin-left: auto; flex-shrink: 0; letter-spacing: 0.04em; text-transform: uppercase; } .option.correct .option-marker { background: var(--success); color: #fff; border-color: var(--success); } .option.incorrect .option-marker { background: var(--danger); color: #fff; border-color: var(--danger); } /* SVG badge — sharp at any resolution */ .gate-badge-img { width: 64px; height: 64px; flex-shrink: 0; display: block; } .exam-target-badge img { width: 88px; height: 88px; display: block; } /* ============================================================ v2.1.1 admin additions: action menus, modals, impersonation ============================================================ */ /* --- Action menu dropdown --- */ .action-menu { position: relative; display: inline-block; } .action-menu-trigger { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--text-dim); cursor: pointer; padding: 0; } .action-menu-trigger:hover, .action-menu-trigger[aria-expanded="true"] { background: var(--gray-50); border-color: var(--border); color: var(--text); } /* When open, JS sets position: fixed with calculated coords so the menu escapes the table's overflow-x: auto container. */ .action-menu-items { position: fixed; min-width: 200px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-elev); padding: 6px; z-index: 200; } .action-menu-form { display: block; margin: 0; padding: 0; background: none; border: none; } .action-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; background: transparent; border: none; border-radius: 6px; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 500; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; transition: background 0.1s; } .action-menu-item:hover { background: var(--gray-50); text-decoration: none; } .action-menu-item:disabled { opacity: 0.4; cursor: not-allowed; } .action-menu-item svg { flex-shrink: 0; color: var(--text-dim); } .action-menu-item:hover svg { color: var(--blue); } .action-menu-item-warn { color: var(--warn); } .action-menu-item-warn svg { color: var(--warn); } .action-menu-item-warn:hover { background: var(--warn-soft); } .action-menu-item-danger { color: var(--danger); } .action-menu-item-danger svg { color: var(--danger); } .action-menu-item-danger:hover { background: var(--danger-soft); } .action-menu-item-danger:hover svg { color: var(--danger); } .action-menu-separator { height: 1px; background: var(--border); margin: 4px 0; } .action-menu-group-label { /* Small inline header inside the popup menu to label a logical group (e.g. "Recovery"). Visually distinct from menu items so it's not clicked. Acts as a separator + label combined. */ font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); padding: 6px 12px 4px; margin-top: 4px; border-top: 1px solid var(--border); } .action-menu-group-label:first-child { border-top: none; margin-top: 0; } /* Exam access compact pill grid inside the action menu */ .action-menu-access-grid { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 10px 8px; } .access-pill { font-size: 11px; font-weight: 700; font-family: var(--mono, monospace); letter-spacing: .04em; padding: 3px 8px; border-radius: 6px; border: 1.5px solid var(--border); background: var(--gray-50); color: var(--text-dim); cursor: pointer; transition: .14s; line-height: 1.5; } .access-pill:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); } .access-pill-on { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); } .access-pill-on:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); } /* System stats page */ .ds2 .ss-hero-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:24px} .ds2 .ss-hero-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px} .ds2 .ss-hero-item-good{border-color:var(--good-line);background:var(--good-bg)} .ds2 .ss-hero-item-warn{border-color:var(--warn-bg);background:var(--warn-bg)} .ds2 .ss-hero-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .ds2 .ss-hero-value{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink)} .ds2 .ss-hero-item-good .ss-hero-value{color:var(--good)} .ds2 .ss-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px} .ds2 .ss-card-head{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:14px} .ds2 .ss-card-head svg{stroke:var(--blue);flex-shrink:0} .ds2 .ss-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--line-soft);color:var(--muted);margin-left:auto} .ds2 .ss-badge-good{background:var(--good-bg);color:var(--good)} .ds2 .ss-badge-warn{background:var(--warn-bg);color:var(--warn)} .ds2 .ss-stat-list{display:flex;flex-direction:column;gap:0;padding:4px 0} .ds2 .ss-stat-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:9px 0;border-bottom:1px solid var(--line-soft)} .ds2 .ss-stat-row:last-child{border-bottom:none} .ds2 .ss-stat-label{font-size:13px;color:var(--muted);flex-shrink:0} .ds2 .ss-stat-val{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);text-align:right;min-width:0;flex:1 1 auto;overflow-wrap:anywhere;word-break:break-word} .ds2 .ss-stat-good{color:var(--good)} .ds2 .ss-stat-warn{color:var(--warn)} .ds2 .ss-note{font-size:13px;color:var(--muted);line-height:1.5;margin-top:4px} .ds2 .ss-ext-details{margin-top:12px;font-size:13px} .ds2 .ss-ext-details summary{cursor:pointer;color:var(--blue);font-weight:500;font-size:12.5px;padding:3px 0;list-style:none} .ds2 .ss-ext-details summary::-webkit-details-marker{display:none} .ds2 .ss-ext-list{font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:2;margin-top:8px} .ds2 .ss-event-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .ds2 .ss-event-stat{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px} .ds2 .ss-event-warn{border-color:var(--warn-bg);background:var(--warn-bg)} .ds2 .ss-event-val{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ink)} .ds2 .ss-event-warn .ss-event-val{color:var(--warn)} .ds2 .ss-event-label{font-size:12px;color:var(--muted);margin-top:4px} @media(max-width:900px){.ds2 .ss-hero-strip{grid-template-columns:repeat(3,1fr)}} @media(max-width:700px){.ds2 .ss-hero-strip{grid-template-columns:repeat(2,1fr)}.ds2 .ss-two-col{grid-template-columns:1fr}.ds2 .ss-event-row{grid-template-columns:1fr}} /* --- Modal dialog --- */ .modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 16px; } .modal[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(13, 21, 48, 0.5); backdrop-filter: blur(4px); } .modal-dialog { position: relative; background: var(--bg-card); border-radius: 14px; box-shadow: var(--shadow-pop); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 12px; } .modal-header h2 { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0; } .modal-header-danger { color: var(--danger) !important; } /* The ×-icon close control. Scoped with :not(.btn) so it never styles a Cancel BUTTON that also carries .modal-close for its close behavior. */ .modal-close:not(.btn) { background: transparent; border: none; font-size: 28px; line-height: 1; color: var(--text-dim); cursor: pointer; padding: 0 8px; border-radius: 6px; } .modal-close:not(.btn):hover { color: var(--text); background: var(--gray-50); } .modal-body { padding: 8px 24px 24px; } /* --- Danger button (delete confirmation) --- */ .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; } .btn-danger:hover:not(:disabled) { background: #991b1b; border-color: #991b1b; color: #fff; } .btn-danger:disabled { opacity: 0.4; cursor: not-allowed; } /* --- Impersonation banner --- */ .impersonation-banner { background: linear-gradient(135deg, #b45309 0%, #d97706 100%); color: #fff; font-size: 13px; font-weight: 500; position: sticky; top: 0; z-index: 51; } .impersonation-banner-inner { max-width: 1100px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .impersonation-banner-inner svg { flex-shrink: 0; } .impersonation-banner-link { margin-left: auto; background: rgba(255, 255, 255, 0.15); color: #fff; padding: 5px 12px; border-radius: 6px; font-weight: 600; text-decoration: none; font-size: 12px; } .impersonation-banner-link:hover { background: rgba(255, 255, 255, 0.25); color: #fff; text-decoration: none; } @media (max-width: 600px) { .impersonation-banner-inner { font-size: 12px; } .impersonation-banner-link { margin-left: 0; width: 100%; text-align: center; } } /* ============================================================ Matching question type (v2.2.3) ============================================================ */ .match-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .match-row { display: grid; grid-template-columns: 32px 1fr 220px; gap: 14px; align-items: center; padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; transition: border-color 0.15s, background 0.15s; } @media (max-width: 700px) { .match-row { grid-template-columns: 32px 1fr; grid-template-rows: auto auto; } .match-item-pick { grid-column: 1 / -1; margin-left: 46px; } } .match-item-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--blue-soft); color: var(--blue); border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; flex-shrink: 0; } .match-item-text { font-size: 14.5px; line-height: 1.55; } .match-item-pick { text-align: right; } .match-select { width: 100%; padding: 8px 32px 8px 12px; font-size: 13px; } .match-row-correct { border-color: var(--success); background: var(--success-soft); } .match-row-correct .match-item-num { background: var(--success); color: #fff; } .match-row-wrong { border-color: var(--danger); background: var(--danger-soft); } .match-row-wrong .match-item-num { background: var(--danger); color: #fff; } .match-pick-correct { display: inline-block; padding: 6px 12px; background: var(--success); color: #fff; border-radius: 6px; font-size: 13px; font-weight: 600; } .match-pick-wrong { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; } .match-pick-strike { display: inline-block; padding: 4px 10px; background: var(--danger-soft); color: var(--danger); border-radius: 6px; font-size: 12px; font-weight: 500; text-decoration: line-through; } .match-pick-correct-inline { display: inline-block; padding: 6px 12px; background: var(--success); color: #fff; border-radius: 6px; font-size: 13px; font-weight: 600; } /* ============================================================ v2.2.5 additions: login theme toggle, countdown card ============================================================ */ /* Login page theme picker */ .login-theme-toggle { position: fixed; top: 20px; right: 20px; display: flex; gap: 2px; padding: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-sm); z-index: 10; } .login-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: none; border-radius: 5px; color: var(--text-dim); cursor: pointer; padding: 0; transition: background 0.15s, color 0.15s; } .login-theme-btn:hover { background: var(--gray-50); color: var(--text); } .login-theme-btn.is-active { background: var(--blue); color: #fff; } .login-theme-btn.is-active:hover { background: var(--blue-strong); color: #fff; } /* Exam countdown card */ .countdown-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 24px; padding: 18px 24px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); box-shadow: var(--shadow-sm); } .countdown-card-main { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; } .countdown-days { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; padding-right: 20px; border-right: 1px solid var(--border); } .countdown-days-num { font-size: 38px; font-weight: 800; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; } .countdown-days-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-top: 6px; text-align: center; } .countdown-meta { min-width: 0; flex: 1; } .countdown-target-date { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 4px; } .countdown-message { font-size: 14.5px; font-weight: 500; color: var(--text); line-height: 1.4; } .countdown-edit-link { font-size: 12px; color: var(--text-dim); text-decoration: none; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; flex-shrink: 0; } .countdown-edit-link:hover { color: var(--blue); border-color: var(--blue); text-decoration: none; } /* Tone variations */ .countdown-relaxed .countdown-days-num { color: var(--blue); } .countdown-focus .countdown-days-num { color: var(--blue-strong); } .countdown-warn .countdown-days-num { color: #d97706; } .countdown-urgent .countdown-days-num { color: var(--danger); } .countdown-today { background: linear-gradient(135deg, var(--blue-soft), var(--bg-card)); border-color: var(--blue); } .countdown-today .countdown-days-num { color: var(--blue-strong); } .countdown-past { opacity: 0.7; } @media (max-width: 600px) { .countdown-card { flex-direction: column; align-items: stretch; } .countdown-card-main { flex-direction: column; gap: 14px; } .countdown-days { border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 14px; width: 100%; } .countdown-edit-link { text-align: center; } } /* ============================================================ v2.2.8 additions: admin quick-access cards ============================================================ */ .admin-quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 8px; } .admin-quick-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; box-shadow: var(--shadow-card); } .admin-quick-card:hover { transform: translateY(-1px); border-color: var(--blue); box-shadow: var(--shadow-elev); text-decoration: none; } .admin-quick-icon { width: 40px; height: 40px; background: var(--blue-soft); color: var(--blue); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .admin-quick-title { font-weight: 700; font-size: 15px; color: var(--navy); margin-bottom: 2px; } .admin-quick-meta { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; } /* ============================================================ v3.1.0 additions: live presence, activity strip, sparkline, question lookup, result badges ============================================================ */ /* ===== Live presence panel ===== */ .live-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; box-shadow: var(--shadow-card); } .live-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; } .live-panel-title { display: flex; align-items: center; gap: 10px; } .live-panel-title h2 { margin: 0; font-size: 16px; color: var(--text); } .live-count { font-size: 13px; color: var(--text-dim); } .live-panel-meta { font-size: 12px; color: var(--text-dim); background: var(--bg-elev); padding: 3px 10px; border-radius: 12px; border: 1px solid var(--border); } .live-dot { width: 10px; height: 10px; border-radius: 50%; } .live-dot-on { background: var(--success); box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15); animation: live-pulse 2s ease-in-out infinite; } .live-dot-off { background: var(--text-faint); } @keyframes live-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15); } 50% { box-shadow: 0 0 0 6px rgba(21, 128, 61, 0.05); } } .live-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .live-user { display: flex; gap: 12px; padding: 10px 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text); transition: border-color 0.15s, transform 0.15s; } .live-user:hover { border-color: var(--blue); text-decoration: none; transform: translateY(-1px); } .live-user-avatar-wrap { position: relative; flex-shrink: 0; } .live-user-status-dot { position: absolute; bottom: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--bg-elev); } .live-user-online .live-user-status-dot { background: var(--success); } .live-user-idle .live-user-status-dot { background: var(--warn); } /* 2.11.1: brief, subtle highlight applied by admin-live.js when a row is new or its activity/state changes during a live poll. Eases in the brand-blue wash, then fades back to the resting card. Honours reduced-motion. */ @keyframes liveFlash { 0% { background: var(--blue-soft); border-color: var(--blue); } 100% { background: var(--bg-elev); border-color: var(--border); } } .live-user.live-flash { animation: liveFlash 1.4s ease-out; } @media (prefers-reduced-motion: reduce) { .live-user.live-flash { animation: none; } } .live-user-info { flex: 1; min-width: 0; } .live-user-name { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 2px; } .live-user-activity { font-size: 12px; color: var(--text); line-height: 1.4; } .live-user-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; } /* ===== Activity strip (today, yesterday, sparkline) ===== */ .activity-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } @media (max-width: 800px) { .activity-strip { grid-template-columns: 1fr; } } .activity-today, .activity-spark { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; box-shadow: var(--shadow-card); } .activity-strip-heading { margin: 0 0 12px 0; font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } .activity-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 600px) { .activity-row { grid-template-columns: repeat(2, 1fr); } } .activity-cell { display: flex; flex-direction: column; } .activity-value { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; } .activity-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; } .activity-delta { font-size: 11px; margin-top: 4px; } .activity-delta-up { color: var(--success); } .activity-delta-down { color: var(--danger); } .activity-delta-flat { color: var(--text-dim); } .activity-note { font-size: 11px; color: var(--text-faint); margin: 10px 0 0 0; } /* ===== Sparkline ===== */ .sparkline { display: flex; align-items: flex-end; gap: 4px; height: 80px; margin-top: 4px; } .spark-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; } .spark-bar { width: 100%; background: var(--blue); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; } .spark-bar-today { background: var(--blue-strong); } .spark-bar-value { font-size: 9px; color: #fff; font-weight: 700; line-height: 1; } .spark-bar-label { font-size: 10px; color: var(--text-faint); line-height: 1; } /* ===== Question lookup page ===== */ .question-lookup-form { max-width: 480px; } .question-lookup-input-row { display: flex; gap: 8px; align-items: stretch; } .question-lookup-input-row .field-input { flex: 1; } .question-detail { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; margin-bottom: 20px; box-shadow: var(--shadow-card); } .question-stem { font-size: 15px; line-height: 1.6; color: var(--text); margin: 8px 0 16px 0; padding: 12px 16px; background: var(--bg-elev); border-radius: 8px; border-left: 3px solid var(--blue); } .question-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .question-option { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; } .question-option-correct { background: var(--success-soft); border-color: var(--success); } .question-option-letter { width: 28px; height: 28px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } .question-option-correct .question-option-letter { background: var(--success); color: #fff; border-color: var(--success); } .question-option-text { flex: 1; color: var(--text); } .question-option-marker { font-size: 11px; font-weight: 700; color: var(--success); text-transform: uppercase; letter-spacing: 0.04em; } .question-rationale { padding: 12px 16px; background: var(--bg-elev); border-radius: 8px; font-size: 13px; line-height: 1.5; color: var(--text); } /* ===== Result badges (used in question lookup and elsewhere) ===== */ .result-badge { display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .result-badge-correct { background: var(--success-soft); color: var(--success); } .result-badge-wrong { background: var(--danger-soft); color: var(--danger); } /* Role pill admin variant for live panel */ .role-pill-admin { background: var(--blue-soft); color: var(--blue); } /* Admin table meta column */ .admin-table-meta { color: var(--text-dim); font-size: 12px; } /* Field hint */ .field-hint { font-size: 12px; color: var(--text-dim); margin-top: 6px; } /* ============ Email blast (v3.2.2) ============ */ /* Textarea inherits field-input styling but needs a sensible min-height and resize behavior. */ .field-textarea { resize: vertical; min-height: 240px; font-family: 'Space Grotesk', sans-serif; font-size: 14px; line-height: 1.5; } /* Admin subnav — horizontal tab strip at the top of admin sub-pages. Currently only email-blast uses it. If more admin pages adopt it, the active-link contrast carries the "you are here" affordance. */ .admin-subnav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; flex-wrap: wrap; } /* Action row at the bottom of the compose form: send-test on the left, send-blast (danger) prominent, hint text trailing. Stacks on mobile. */ .blast-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .blast-confirm-hint { font-size: 12px; color: var(--text-dim); } @media (max-width: 600px) { .blast-actions { flex-direction: column; align-items: stretch; } .blast-actions .btn { width: 100%; } } /* Campaign status badges — color-coded so admin can scan past campaigns. */ .campaign-status { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .campaign-status-draft { background: rgba(0,0,0,0.06); color: var(--text-dim); } .campaign-status-sending { background: rgba(59,130,246,0.12); color: #2563eb; } .campaign-status-sent { background: var(--success-soft); color: var(--success); } .campaign-status-partial { background: rgba(245,158,11,0.14); color: #b45309; } .campaign-status-failed { background: var(--danger-soft); color: var(--danger); } .campaign-status-pending { background: rgba(0,0,0,0.06); color: var(--text-dim); } [data-theme="dark"] .campaign-status-draft, [data-theme="dark"] .campaign-status-pending { background: rgba(255,255,255,0.08); } [data-theme="dark"] .campaign-status-partial { color: #fbbf24; } .text-danger { color: var(--danger); } /* ============================================================ Exam picker (study.php) — v1.0 multi-exam ============================================================ */ .study-picker { max-width: 880px; margin: 0 auto; padding: 32px 20px; } .study-picker h1 { margin: 0 0 8px 0; } .study-picker-lead { color: var(--text-muted); margin: 0 0 28px 0; } .study-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .study-card { margin: 0; } .study-card-btn { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 28px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; } .study-card-btn:hover { border-color: var(--brand, #0066B3); box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-2px); } .study-card-btn:active { transform: translateY(0); } .study-card-badge { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; } /* Normalize every badge to the same box regardless of source dimensions */ .study-card-badge img { max-width: 88px; max-height: 88px; width: auto; height: auto; object-fit: contain; } .study-card-title { font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--text); } .study-card-meta { font-size: 13px; color: var(--text-muted); } /* ============================================================ Student management: exam pills, bulk bar, select column (v1.0.2) ============================================================ */ .col-check { width: 32px; text-align: center; } .col-check input { cursor: pointer; } .exam-pills-cell { white-space: nowrap; } .exam-pill-form { display: inline; margin: 0 2px 0 0; } .exam-pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: background .12s, border-color .12s, opacity .12s; } .exam-pill-on { background: #0066B3; color: #fff; border-color: #0066B3; } .exam-pill-on:hover { background: #00528f; } .exam-pill-off { background: transparent; color: #939596; border-color: #d4d6d8; } .exam-pill-off:hover { border-color: #0066B3; color: #0066B3; } .bulk-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 12px; background: #eaf3fb; border: 1px solid #b8d8f0; border-radius: 10px; } [data-theme="dark"] .bulk-bar { background: #14304a; border-color: #1f4a72; } .bulk-bar[hidden] { display: none !important; } .bulk-count { font-weight: 600; font-size: 14px; } /* Compact exam-enrollment indicator in the student table (replaces the crowded three-pill cell; per-exam management moved to the row action menu). */ .exam-count-cell { white-space: nowrap; } .exam-count { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eaf3fb; color: #0066B3; border: 1px solid #b8d8f0; cursor: default; } .exam-count-none { background: transparent; color: var(--text-dim); border-color: var(--border); font-weight: 500; } [data-theme="dark"] .exam-count { background: #14304a; color: #6db3e8; border-color: #1f4a72; } /* Student status pills (active / retired / disabled) — v1.0.3 */ .status-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; letter-spacing: .02em; } .status-active { background: #e6f4ea; color: #1d7a3e; } .status-retired { background: #eef0f3; color: #5b6470; } .status-disabled { background: #fdeaea; color: #b3261e; } [data-theme="dark"] .status-active { background: #143524; color: #5fd58a; } [data-theme="dark"] .status-retired { background: #2a2f37; color: #9aa3af; } [data-theme="dark"] .status-disabled { background: #3a1715; color: #f0857d; } /* ==================================================================== DS 2.0 layer (was assets/css/ds-2.0.css) ==================================================================== */ /* ============================================================ Movaci Study 2.0 — Design System Layer (Phase 0) ------------------------------------------------------------ Everything here is scoped under .ds2. The legacy 1.0.9 stylesheet (app.css) and its dark-theme apparatus are NOT touched. A page opts into 2.0 by adding `ds2` to . Removing that class (or this ) fully reverts the page. Token names (--navy/--blue/--warn) intentionally differ in meaning from app.css :root. They are isolated to .ds2 so there is no collision with legacy pages. Seed source: movaci-2.0-mockup.html (locked design). 2.0 is light-theme by direction; legacy dark mode is left intact for un-rebuilt pages during the transition. ============================================================ */ .ds2 { /* ── Movaci brand ── */ --blue:#0066B3; --blue-600:#0058a0; --blue-700:#004a87; --blue-glow:rgba(0,102,179,.18); --blue-glow-sm:rgba(0,102,179,.10); --navy:#003B6F; --navy-deep:#002a4f; --navy-text:#003B6F; /* ── Readiness hero (vivid brand blue, lifted off near-black) ── */ --rd-grad:linear-gradient(135deg,#0b66b0 0%,#00518f 52%,#003a68 100%); --rd-glow-1:rgba(56,168,245,.42); --rd-glow-2:rgba(120,200,255,.24); --rd-well:#04335c; /* ── Typography ── */ --ink:#0d1b2a; --ink-soft:#2e4563; --muted:#5e7590; --faint:#617991; /* ── Structure ── */ --line:#dde6f0; --line-soft:#edf2f8; /* ── Surfaces ── */ --bg:#eef4fb; --card:#ffffff; --tint:#e8f2fc; --tint-line:#b8d9f4; --surface:#ffffff; --surface-2:#f5f9fe; /* ── Semantic ── */ --good:#15803d; --good-bg:#eaf6ee; --good-line:#bfe3cb; --bad:#b3261e; --bad-bg:#fdeeed; --bad-line:#f3c9c5; --warn:#9a6700; --warn-bg:#fdf6e3; --amber:#b45309; --amber-bg:#fef3c7; --purple:#6d28d9; --purple-bg:#ede9fe; /* ── Shape ── */ --radius:16px; --radius-sm:11px; --radius-xs:8px; /* ── Elevation ── */ --shadow-sm:0 1px 3px rgba(0,40,90,.07),0 0 0 1px rgba(0,40,90,.04); --shadow:0 4px 16px rgba(0,40,90,.10),0 1px 3px rgba(0,40,90,.06); --shadow-lg:0 12px 40px rgba(0,40,90,.16),0 3px 8px rgba(0,40,90,.08); --shadow-blue:0 4px 20px rgba(0,102,179,.22),0 1px 4px rgba(0,102,179,.14); /* ── Typography stacks ── */ --display:'Fraunces','Movaci Thai',Georgia,'Times New Roman',serif; --sans:'Space Grotesk','Movaci Thai',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --num:'Space Grotesk','Movaci Thai',system-ui,-apple-system,sans-serif; } .ds2 *{box-sizing:border-box} /* Body opt-in: light surface + atmosphere. Only applies when carries the ds2 class, so legacy pages are unaffected. */ body.ds2{ font-family:var(--sans); background:var(--bg); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; background-image: radial-gradient(ellipse 900px 600px at 50% -80px, rgba(0,102,179,.07) 0%, transparent 70%), radial-gradient(ellipse 500px 400px at 95% 5%, rgba(0,102,179,.04) 0%, transparent 60%); background-attachment:fixed; } /* ---------- layout primitives ---------- */ .ds2 .wrap{max-width:1180px; margin:0 auto; padding:34px 24px 80px} .ds2 .quiz-wrap{max-width:760px; margin:0 auto} .ds2 .eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--blue)} .ds2 h1.page{font-family:var(--display);font-weight:600;font-size:34px;letter-spacing:-.02em;line-height:1.1;margin:6px 0 2px} .ds2 .page-sub{color:var(--muted);font-size:15px} /* ---------- card ---------- */ .ds2 .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .ds2 .card-pad{padding:24px} .ds2 .card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1.5px solid var(--line-soft);background:var(--surface-2)} .ds2 .card-head h3{font-size:14px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft)} .ds2 .card-head .link{font-size:13px;color:var(--blue);font-weight:600;text-decoration:none} /* ---------- button ---------- */ .ds2 .btn{font-family:var(--sans);font-weight:600;font-size:14.5px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:11px;padding:12px 20px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:.16s;white-space:nowrap} .ds2 .btn:hover{border-color:var(--blue);color:var(--blue);background:var(--tint)} .ds2 .btn-primary{background:linear-gradient(180deg,var(--blue) 0%,var(--blue-600) 100%);border-color:var(--blue-700);color:#fff;box-shadow:0 3px 12px var(--blue-glow)} .ds2 .btn-primary:hover{background:linear-gradient(180deg,var(--blue-600) 0%,var(--blue-700) 100%);color:#fff;transform:translateY(-1px);box-shadow:0 6px 20px var(--blue-glow)} .ds2 .btn-light{background:#fff;border-color:#fff;color:var(--navy)} .ds2 .btn-light:hover{transform:translateY(-1px)} .ds2 .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink-soft)} .ds2 .btn-ghost:hover{border-color:var(--blue);color:var(--blue)} .ds2 .btn-block{width:100%} /* ---------- readiness hero + ring (2.13 refresh) ---------- */ .ds2 .readiness{ background:var(--rd-grad); color:#fff;border:0;position:relative;overflow:hidden; box-shadow:0 10px 40px rgba(0,70,130,.28),0 2px 8px rgba(0,30,60,.16),0 0 0 1px rgba(255,255,255,.08); border-radius:var(--radius);margin-bottom:18px} .ds2 .readiness::after{content:"";position:absolute;right:-40px;top:-40px;width:340px;height:340px;border-radius:50%; background:radial-gradient(circle,var(--rd-glow-1),transparent 60%);pointer-events:none} .ds2 .readiness::before{content:"";position:absolute;left:-40px;bottom:-80px;width:280px;height:280px;border-radius:50%; background:radial-gradient(circle,var(--rd-glow-2),transparent 58%);pointer-events:none} .ds2 .rd-in{position:relative;z-index:1;display:flex;align-items:center;gap:30px;padding:28px 30px;flex-wrap:wrap} /* ring: conic-gradient progress disc */ .ds2 .ring{--p:0;flex:none;width:120px;height:120px;border-radius:50%;display:grid;place-items:center; background:conic-gradient(#5bb8f8 calc(var(--p)*1%),rgba(255,255,255,.12) 0); box-shadow:0 0 0 3px rgba(91,184,248,.22)} .ds2 .ring-inner{width:92px;height:92px;border-radius:50%;background:var(--rd-well);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .ds2 .ring-num{font-family:var(--num);font-weight:700;font-size:30px;line-height:1;color:#fff} .ds2 .ring-lbl{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#d4e8f9;margin-top:2px} /* ring state: exam ready gets gold glow */ .ds2 .ring.is-ready{background:conic-gradient(#fbbf24 calc(var(--p)*1%),rgba(255,255,255,.12) 0); box-shadow:0 0 0 3px rgba(251,191,36,.28)} .ds2 .ring.is-ready .ring-num{color:#fde68a} /* body copy */ .ds2 .rd-body{flex:1;min-width:200px} .ds2 .rd-tag{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#d4e8f9;font-weight:700;margin-bottom:5px} .ds2 .rd-title{font-family:var(--display);font-weight:600;font-size:22px;margin:0 0 7px;letter-spacing:-.015em;line-height:1.2;color:#fff} .ds2 .rd-text{color:#e2eefb;font-size:14px;max-width:50ch;line-height:1.55} .ds2 .rd-meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px} .ds2 .rd-meta div{font-size:12.5px;color:#c2dcf0} .ds2 .rd-meta b{display:block;font-family:var(--num);font-size:19px;color:#fff;font-weight:700;line-height:1.1} /* CTA buttons */ .ds2 .rd-cta{flex:none;display:flex;flex-direction:column;gap:9px;min-width:160px} .ds2 .rd-cta .btn-light{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18)} .ds2 .rd-cta .btn-light:hover{background:rgba(255,255,255,.2)} .ds2 .rd-cta .btn-outline{background:transparent;color:#7dc4ee;border:1px solid rgba(125,196,238,.35)} .ds2 .rd-cta .btn-outline:hover{background:rgba(125,196,238,.1)} @media(max-width:768px){ .ds2 .rd-in{padding:20px;gap:20px} .ds2 .rd-meta{gap:14px} } /* ---------- next-up action rows ---------- */ .ds2 .action{display:flex;align-items:center;gap:15px;padding:15px 22px;border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit;transition:.14s} .ds2 .action:last-child{border-bottom:0} .ds2 .action:hover{background:var(--tint)} .ds2 .action-ico{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--tint);color:var(--blue)} .ds2 .action-ico.warn{background:var(--warn-bg);color:var(--warn)} .ds2 .action-ico.good{background:var(--good-bg);color:var(--good)} .ds2 .action-tt{font-weight:600;font-size:14.5px} .ds2 .action-ds{font-size:12.5px;color:var(--muted);margin-top:1px} .ds2 .action .chev{color:var(--faint);margin-left:auto} /* ---------- domain bars ---------- */ .ds2 .dom{padding:14px 22px;border-bottom:1px solid var(--line-soft)} .ds2 .dom:last-child{border-bottom:0} .ds2 .dom-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;margin-bottom:7px} .ds2 .dom-name{font-weight:600} .ds2 .dom-pct{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)} .ds2 .bar{height:8px;border-radius:6px;background:var(--line-soft);overflow:hidden} .ds2 .bar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--blue) 0%,#38a8f5 100%)} .ds2 .bar-fill.lo{background:linear-gradient(90deg,#c98a16,#e0a82e)} .ds2 .dom-tag{font-size:11px;color:var(--warn);font-weight:600;margin-left:8px} /* ---------- dashboard: goal-aware trend chart ---------- */ .ds2 .trend2{padding:10px 20px 16px} .ds2 .trend2-svg{width:100%;height:auto;max-height:230px;display:block} .ds2 .trend2-grid{stroke:var(--line-soft);stroke-width:1} .ds2 .trend2-ylab,.ds2 .trend2-xlab{fill:var(--faint);font-size:10px;font-family:var(--mono)} .ds2 .trend2-thresh{stroke:#15803d;stroke-width:1.5;stroke-dasharray:4 4;opacity:.65} .ds2 .trend2-thresh-lab{fill:#15803d;font-size:10px;font-weight:700;font-family:var(--sans)} .ds2 .trend2-area{fill:rgba(0,102,179,.10);stroke:none} .ds2 .trend2-line{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round} .ds2 .trend2-pt{stroke:#fff;stroke-width:1.5} .ds2 .trend2-pt-exam{stroke:#003A70;stroke-width:2} .ds2 .trend2-last{fill:var(--ink,var(--text,#0b1f33));font-size:12px;font-weight:700;font-family:var(--num)} .ds2 .trend2-legend{display:flex;flex-wrap:wrap;gap:14px;padding:8px 4px 0;font-size:11.5px;color:var(--muted)} .ds2 .trend2-legend span{display:inline-flex;align-items:center;gap:6px} .ds2 .trend2-dot{width:9px;height:9px;border-radius:50%;display:inline-block} .ds2 .trend2-ring{width:9px;height:9px;border-radius:50%;border:2px solid #003A70;display:inline-block} html[data-theme="dark"] .ds2 .trend2-area{fill:rgba(56,155,230,.16)} html[data-theme="dark"] .ds2 .trend2-line{stroke:#38BDF8} html[data-theme="dark"] .ds2 .trend2-pt{stroke:var(--card)} html[data-theme="dark"] .ds2 .trend2-last{fill:#e6eef7} /* ---------- stat row ---------- */ .ds2 .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft)} .ds2 .stat{padding:22px 22px 20px;background:var(--card);position:relative} .ds2 .stat::before{content:"";position:absolute;top:0;left:22px;width:24px;height:3px;border-radius:0 0 3px 3px;background:var(--blue)} .ds2 .stat:last-child{border-right:0} .ds2 .stat-n{font-family:var(--num);font-weight:700;font-size:32px;letter-spacing:-.015em;line-height:1} .ds2 .stat-l{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:6px;font-weight:500} .ds2 .stat-d{font-size:12px;color:var(--good);font-weight:600;margin-top:4px} /* ---------- quiz: progress / meta ---------- */ .ds2 .quiz-bar{display:flex;align-items:center;gap:16px;margin-bottom:8px} .ds2 .quiz-back{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;display:inline-flex;gap:6px;align-items:center} .ds2 .quiz-back:hover{color:var(--ink)} .ds2 .progress-track{flex:1;height:7px;border-radius:5px;background:var(--line-soft);overflow:hidden} .ds2 .progress-fill{height:100%;background:linear-gradient(90deg,var(--blue) 0%,#38a8f5 100%);border-radius:5px;transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 8px var(--blue-glow)} .ds2 .quiz-count{font-family:var(--mono);font-size:13px;color:var(--ink-soft);font-weight:500;white-space:nowrap} .ds2 .quiz-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;font-size:13px;color:var(--muted)} .ds2 .quiz-timer{font-family:var(--mono);display:inline-flex;align-items:center;gap:6px} .ds2 .quiz-dom{background:var(--tint);color:var(--blue);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:4px 11px;border-radius:20px} /* ---------- quiz: question card ---------- */ .ds2 .qcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .ds2 .qcard-top{padding:26px 30px 4px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px} .ds2 .qnum{font-family:var(--mono);font-size:12px;color:var(--faint);font-weight:500} .ds2 .qbookmark{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;display:inline-flex;gap:6px;align-items:center;transition:.15s} .ds2 .qbookmark:hover{border-color:var(--blue);color:var(--blue)} .ds2 .qstem{padding:6px 30px 8px;font-size:17px;line-height:1.6;color:var(--ink)} /* Query block. Must keep rendering line-structured KQL/SQL (the 1.0.9 stem fix). Mirrors lib/questions.php formatStem()

,
   so the 2.0 quiz screen styles BOTH .qcode and the engine's .q-code. */
.ds2 .qcode,
.ds2 pre.q-code{margin:16px 30px 6px;background:#0d1f31;border-radius:12px;padding:16px 18px;overflow-x:auto}
.ds2 .qcode code,
.ds2 pre.q-code code{font-family:var(--mono);font-size:13px;line-height:1.65;color:#cfe3f5;white-space:pre;display:block}
.ds2 .qcode .kw{color:#6db4f0}
.ds2 .qcode .st{color:#8fd6a8}
.ds2 .qcode .fn{color:#e0b072}

/* ---------- quiz: options + graded states ---------- */
.ds2 .opts{padding:14px 30px 8px;display:flex;flex-direction:column;gap:11px}
.ds2 .opt{display:flex;align-items:center;gap:15px;border:1.5px solid var(--line);border-radius:13px;padding:15px 18px;cursor:pointer;transition:.16s;background:var(--surface);text-align:left;font-family:var(--sans);width:100%}
.ds2 .opt:hover{border-color:var(--blue);background:var(--tint)}
.ds2 .opt-key{flex:none;width:30px;height:30px;border-radius:8px;background:var(--line-soft);color:var(--ink-soft);font-weight:600;font-size:14px;display:grid;place-items:center;transition:.16s}
.ds2 .opt:hover .opt-key{background:var(--blue);color:#fff}
.ds2 .opt-text{font-size:15px;color:var(--ink);font-weight:500}
.ds2 .opt-state{margin-left:auto;flex:none;opacity:0;transition:.2s;font-weight:600;font-size:13px}
.ds2 .opt.correct{border-color:var(--good-line);background:var(--good-bg);cursor:default}
.ds2 .opt.correct .opt-key{background:var(--good);color:#fff}
.ds2 .opt.correct .opt-state{opacity:1;color:var(--good)}
.ds2 .opt.wrong{border-color:var(--bad-line);background:var(--bad-bg);cursor:default}
.ds2 .opt.wrong .opt-key{background:var(--bad);color:#fff}
.ds2 .opt.wrong .opt-state{opacity:1;color:var(--bad)}
.ds2 .opt.dim{opacity:.55;cursor:default}
.ds2 .opt.locked{cursor:default;pointer-events:none}

/* ---------- quiz: rationale ---------- */
.ds2 .rationale{margin:8px 30px 0;max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1),margin .3s}
.ds2 .rationale.show{max-height:600px;margin:18px 30px 0}
.ds2 .rationale-in{background:var(--tint);border:1px solid var(--tint-line);border-left:4px solid var(--blue);border-radius:12px;padding:16px 18px}
.ds2 .rationale-tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--blue);margin-bottom:7px;display:flex;align-items:center;gap:8px}
.ds2 .rationale-tag .verdict{margin-left:auto;padding:2px 10px;border-radius:20px;font-size:11px;letter-spacing:.04em}
.ds2 .verdict.ok{background:var(--good-bg);color:var(--good)}
.ds2 .verdict.no{background:var(--bad-bg);color:var(--bad)}
.ds2 .rationale-tx{font-size:14px;line-height:1.6;color:var(--ink-soft)}

/* ---------- quiz: footer / keyboard hint / next ---------- */
.ds2 .qfoot{display:flex;align-items:center;gap:14px;padding:22px 30px 26px;margin-top:6px}
.ds2 .kbd-hint{font-size:12px;color:var(--faint);display:flex;gap:14px}
.ds2 .kbd-hint kbd{font-family:var(--mono);font-size:11px;background:var(--line-soft);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--ink-soft)}
.ds2 .qfoot .grow{flex:1}
.ds2 .btn-next{background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(0,102,179,.3);opacity:.45;pointer-events:none}
.ds2 .btn-next.ready{opacity:1;pointer-events:auto;animation:ds2-pop .35s ease}
.ds2 .btn-next.ready:hover{background:var(--blue-600);transform:translateY(-1px)}
@keyframes ds2-pop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:scale(1)}}

/* ---------- grid + responsive ---------- */
.ds2 .dash-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-top:28px}
.ds2 .span-all{grid-column:1 / -1}

@media(max-width:880px){
  .ds2 .dash-grid{grid-template-columns:1fr}
  .ds2 .rd-in{flex-direction:column;text-align:center;gap:20px}
  .ds2 .rd-meta{justify-content:center}
  .ds2 .rd-cta{width:100%}
}
@media(max-width:480px){
  .ds2 .rd-cta{flex-direction:column;width:100%}
  .ds2 .rd-cta .btn{justify-content:center}
  .ds2 .container{padding:20px 16px 60px}
}
@media(max-width:560px){
  .ds2 .wrap{padding:22px 15px 60px}
  .ds2 h1.page{font-size:27px}
  .ds2 .qstem{font-size:16px;padding:6px 20px 8px}
  .ds2 .qcard-top,.ds2 .opts,.ds2 .qfoot{padding-left:20px;padding-right:20px}
  .ds2 .qcode,.ds2 pre.q-code,.ds2 .rationale,.ds2 .rationale.show{margin-left:20px;margin-right:20px}
  .ds2 .stat-row{grid-template-columns:1fr}
  .ds2 .stat{border-right:0;border-bottom:1px solid var(--line-soft)}
  .ds2 .kbd-hint{display:none}
}

/* Respect reduced-motion: kill the transitions/animations we add. */
@media(prefers-reduced-motion:reduce){
  .ds2 .progress-fill,.ds2 .rationale,.ds2 .opt,.ds2 .btn,.ds2 .action{transition:none}
  .ds2 .btn-next.ready{animation:none}
}

/* ============================================================
   Quiz bridge (Phase 1b) — maps the LIVE quiz.php class names to
   the 2.0 visual language above, reusing the same tokens/values.
   The mockup used .qcard/.opt/.opts; production renders .q-card/
   .option/.options plus .stmt-*/.match-*/.reveal-* structures the
   mockup never had. Styling the real classes (vs rewriting markup)
   keeps the verified inline-answer JS untouched and stays fully
   reversible: remove `ds2` from  to revert. All selectors
   carry the .ds2 prefix so they outspecify app.css.
   ============================================================ */

/* layout: center the quiz column */
.ds2 .container-quiz{max-width:760px;margin:0 auto;padding:30px 20px 70px}

/* progress + header row */
.ds2 .quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:16px}
.ds2 .quiz-header-left{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:13px}
.ds2 .quiz-header-right{display:flex;align-items:center;gap:10px}
.ds2 .progress-info{font-family:var(--mono);font-size:13px;color:var(--ink-soft);font-weight:500;white-space:nowrap}
.ds2 .progress-info .current{color:var(--blue);font-weight:600}
.ds2 .progress-info .of{color:var(--faint)}
.ds2 .quiz-timer{font-family:var(--mono);display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.ds2 .quiz-timer-exam.is-urgent{color:var(--bad);font-weight:600}
.ds2 .progress-bar{height:7px;border-radius:5px;background:var(--line-soft);overflow:hidden;margin-bottom:22px;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.ds2 .quiz-peek-btn{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.ds2 .quiz-peek-btn:hover{border-color:var(--blue);color:var(--blue)}
.ds2 .clang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
.ds2 .clang-opt{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;line-height:1;font-family:inherit}
.ds2 .clang-opt+.clang-opt{border-left:1px solid var(--line)}
.ds2 .clang-opt:hover{color:var(--blue)}
.ds2 .clang-opt.is-active{background:var(--blue);color:#fff}

/* peek (stats) panel */
.ds2 .peek-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:18px}
.ds2 .peek-stat{background:var(--surface);padding:14px 16px;text-align:center}
.ds2 .peek-value{font-family:var(--num);font-weight:600;font-size:22px;color:var(--ink)}
.ds2 .peek-label{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:3px}

/* question card */
.ds2 .q-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border-top:3px solid var(--blue)}
.ds2 .q-number-row{padding:26px 30px 2px;display:flex;align-items:center;gap:12px}
.ds2 .q-number{font-family:var(--mono);font-size:12px;color:var(--faint);font-weight:500}
.ds2 .q-mode-badge{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--warn);background:var(--warn-bg);padding:3px 9px;border-radius:20px}
.ds2 .q-bookmark-btn{margin-left:auto;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;display:inline-flex;gap:6px;align-items:center;transition:.15s}
.ds2 .q-bookmark-btn:hover{border-color:var(--blue);color:var(--blue)}
.ds2 .q-bookmark-btn.is-bookmarked{border-color:var(--blue);color:var(--blue);background:var(--tint)}
.ds2 .q-stem{padding:10px 30px 4px;font-size:17px;line-height:1.6;color:var(--ink)}
.ds2 .reveal-only-banner{margin:14px 30px 0;font-size:13px;color:var(--muted);background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:10px 14px}

/* options + graded states (.incorrect -> wrong, .dimmed -> dim) */
.ds2 .options{padding:16px 30px 8px;display:flex;flex-direction:column;gap:11px}
.ds2 .option{display:flex;align-items:center;gap:15px;border:1.5px solid var(--line);border-radius:13px;padding:16px 20px;cursor:pointer;transition:.16s;background:var(--card);text-align:left;font-family:var(--sans);width:100%;box-shadow:var(--shadow-sm)}
.ds2 .option:hover:not(:disabled):not(.option-passive){border-color:var(--blue);background:var(--tint);box-shadow:0 0 0 3px var(--blue-glow-sm)}
.ds2 button.option:hover:not(:disabled){border-color:var(--blue);background:var(--tint)}
.ds2 .option:disabled{cursor:default}
.ds2 .option-letter{flex:none;width:32px;height:32px;border-radius:9px;background:var(--tint);color:var(--blue);font-weight:700;font-size:13px;display:grid;place-items:center;transition:.16s;border:1px solid var(--tint-line)}
.ds2 button.option:hover:not(:disabled) .option-letter{background:var(--blue);color:#fff}
.ds2 .option-text{font-size:15px;color:var(--ink);font-weight:500;line-height:1.5}
.ds2 .option.selected{border-color:var(--blue);background:var(--tint)}
.ds2 .option.selected .option-letter{background:var(--blue);color:#fff}
.ds2 .option.correct{border-color:var(--good-line);background:var(--good-bg)}
.ds2 .option.correct .option-letter{background:var(--good);color:#fff}
.ds2 .option.incorrect{border-color:var(--bad-line);background:var(--bad-bg)}
.ds2 .option.incorrect .option-letter{background:var(--bad);color:#fff}
.ds2 .option.dimmed{opacity:.5}
.ds2 .options-passive .option-passive{cursor:default}

/* statements (HOTSPOT) */
.ds2 .stmt-list{padding:16px 30px 6px;display:flex;flex-direction:column;gap:12px}
.ds2 .stmt-row{border:1px solid var(--line);border-radius:13px;padding:15px 18px}
.ds2 .stmt-text{font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:10px}
.ds2 .stmt-options{display:flex;gap:10px}
.ds2 .stmt-btn{flex:1;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 14px;font-family:var(--sans);font-weight:600;font-size:13.5px;color:var(--ink-soft);cursor:pointer;transition:.15s}
.ds2 .stmt-btn:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.ds2 .stmt-btn.is-selected{border-color:var(--blue);background:var(--tint);color:var(--blue)}
.ds2 .stmt-btn.is-correct{border-color:var(--good-line);background:var(--good-bg);color:var(--good)}
.ds2 .stmt-btn.is-wrong{border-color:var(--bad-line);background:var(--bad-bg);color:var(--bad)}
.ds2 .stmt-select{width:100%;font-family:var(--sans);font-size:14px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.ds2 .stmt-result{display:inline-block;margin-top:9px;margin-right:8px;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:8px}
.ds2 .stmt-result-correct{background:var(--good-bg);color:var(--good)}
.ds2 .stmt-result-wrong{background:var(--bad-bg);color:var(--bad)}
.ds2 .stmt-result-expected{background:var(--good-bg);color:var(--good)}

/* matching */
.ds2 .match-list{padding:16px 30px 6px;display:flex;flex-direction:column;gap:11px}
.ds2 .match-row{display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:13px;padding:13px 16px}
.ds2 .match-item-num{flex:none;width:28px;height:28px;border-radius:8px;background:var(--line-soft);color:var(--ink-soft);font-weight:600;font-size:13px;display:grid;place-items:center}
.ds2 .match-item-text{flex:1;font-size:14.5px;color:var(--ink);font-weight:500}
.ds2 .match-item-pick{flex:none;min-width:160px}
.ds2 .match-select{width:100%;font-family:var(--sans);font-size:13.5px;padding:8px 10px;border:1.5px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink)}
.ds2 .match-row-correct{border-color:var(--good-line);background:var(--good-bg)}
.ds2 .match-row-wrong{border-color:var(--bad-line);background:var(--bad-bg)}
.ds2 .match-pick-correct{font-weight:600;color:var(--good);font-size:13.5px;background:var(--good-bg)}
.ds2 .match-pick-wrong{font-size:13.5px}
.ds2 .match-pick-strike{text-decoration:line-through;color:var(--bad);margin-right:6px}
.ds2 .match-pick-correct-inline{font-weight:600;color:var(--good);background:var(--good-bg)}

/* reveal section (answer + rationale) */
.ds2 .reveal-section{margin:18px 30px 4px;display:flex;flex-direction:column;gap:12px}
.ds2 .answer-block,.ds2 .rationale-block{background:var(--tint);border:1px solid var(--tint-line);border-left:4px solid var(--blue);border-radius:12px;padding:15px 18px}
.ds2 .answer-label,.ds2 .rationale-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--blue);margin-bottom:6px}
.ds2 .answer-value{font-family:var(--mono);font-size:13.5px;color:var(--ink)}
.ds2 .rationale-text{font-size:14px;line-height:1.6;color:var(--ink-soft)}

/* footer / actions */
.ds2 .quiz-actions{display:flex;align-items:center;gap:14px;padding:22px 30px 26px}
.ds2 .quiz-actions .kbd-hints{flex:1;display:flex;justify-content:center;gap:14px}
.ds2 .quiz-actions .kbd-hint{font-size:12px;color:var(--faint);display:inline-flex;gap:5px;align-items:center}
.ds2 .kbd-hint kbd{font-family:var(--mono);font-size:11px;background:var(--line-soft);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--ink-soft)}

/* case study panel (SC-300) */
.ds2 .case-study-panel{margin:14px 30px 0;border:1px solid var(--tint-line);background:var(--tint);border-radius:12px;overflow:hidden}
.ds2 .case-study-summary{cursor:pointer;padding:13px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.ds2 .case-study-eyebrow{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--blue)}
.ds2 .case-study-title{font-weight:600;color:var(--ink)}
.ds2 .case-study-subtitle{color:var(--muted);font-size:13px}
.ds2 .case-study-toggle-hint{margin-left:auto;font-size:11px;color:var(--faint)}
.ds2 .case-study-body{padding:4px 16px 14px;font-size:13.5px;color:var(--ink-soft);max-height:320px;overflow:auto}
.ds2 .case-study-section-heading{font-size:13px;font-weight:600;color:var(--ink);margin:12px 0 4px}

/* ============================================================
   Header / nav bridge (Phase 2) — restyles the live renderHeader()
   markup to the 2.0 top bar (mockup .topbar). Real class names,
   .ds2-scoped so it only affects opted-in pages and outspecifies
   app.css. Mobile breakpoint aligned to the legacy 760px so nav
   collapse + the existing mobile menu stay in sync.
   ============================================================ */
.ds2 .app-header{
  background:#fff;
  border-bottom:2px solid var(--blue);
  position:sticky;top:0;z-index:40;
  box-shadow:0 2px 16px rgba(0,102,179,.08)}
.ds2 .app-header-inner{max-width:1180px;margin:0 auto;padding:0 28px;height:68px;display:flex;align-items:center;gap:24px}
.ds2 .brand{display:flex;align-items:center;gap:14px;color:var(--blue);text-decoration:none}
.ds2 .brand-logo{height:26px;color:var(--blue)}
.ds2 .brand-divider{width:1px;height:24px;background:var(--line)}
.ds2 .brand-tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.ds2 .header-nav{display:flex;align-items:center;gap:2px;margin-left:10px}
.ds2 .nav-link{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-soft);text-decoration:none;padding:7px 13px;border-radius:9px;transition:.15s;letter-spacing:.01em}
.ds2 .nav-link:hover{background:var(--tint);color:var(--blue)}
.ds2 .nav-link.active{color:#fff;background:var(--blue);box-shadow:0 2px 8px var(--blue-glow)}
.ds2 .nav-link-admin{color:var(--blue);font-weight:700}
.ds2 .nav-link-admin.active{color:#fff;background:var(--navy)}
.ds2 .header-user{margin-left:auto;display:flex;align-items:center;gap:8px}
.ds2 .user-chip{display:flex;align-items:center;gap:9px;text-decoration:none;padding:4px 13px 4px 4px;border:1.5px solid var(--line);border-radius:30px;transition:.15s}
.ds2 .user-chip:hover{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-glow-sm)}
.ds2 .user-chip-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-700));color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;overflow:hidden}
.ds2 .user-chip-avatar-img{padding:0}
.ds2 .user-chip-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ds2 .user-chip-name{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink)}
.ds2 .logout-link{width:36px;height:36px;display:grid;place-items:center;color:var(--muted);border-radius:9px;transition:.15s;background:none;border:none;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.ds2 .logout-link:hover{background:var(--bad-bg);color:var(--bad)}
.ds2 .header-mobile-toggle{border:1.5px solid var(--line);border-radius:9px}
.ds2 .header-mobile-toggle span{background:var(--blue)}
.ds2 .header-mobile-menu{background:#fff;border-top:2px solid var(--blue);padding:8px 20px 16px}
.ds2 .mobile-link{font-family:var(--sans);color:var(--ink-soft);text-decoration:none;padding:12px 4px;border-bottom:1px solid var(--line-soft);font-weight:600;font-size:15px}
.ds2 .mobile-link-logout{color:var(--bad)}
.ds2 .impersonation-banner{background:#C2271E;background:linear-gradient(135deg,#A8190F 0%,#D32F2F 100%);color:#fff;border-bottom:1px solid #8f1d17}
.ds2 .impersonation-banner-inner{color:#fff}
.ds2 .impersonation-banner-inner svg{stroke:#fff}
.ds2 .impersonation-banner strong{color:#fff}
.ds2 .impersonation-banner-link{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.6)}
.ds2 .impersonation-banner-link:hover{background:rgba(255,255,255,.3);color:#fff}
.ds2 .skip-link{font-family:var(--sans)}

@media(max-width:760px){
  .ds2 .header-nav,.ds2 .header-user{display:none}
  .ds2 .header-mobile-toggle{display:flex;margin-left:auto}
  .ds2 .app-header-inner{padding:0 16px}
}
@media(max-width:560px){
  .ds2 .brand-divider,.ds2 .brand-tag{display:none}
}

/* ---------- quiz mobile polish (real class names) ---------- */
@media(max-width:560px){
  .ds2 .container-quiz{padding:20px 14px 56px}
  .ds2 .q-number-row{padding:20px 18px 2px}
  .ds2 .q-stem{padding:8px 18px 4px;font-size:16px}
  .ds2 .options,.ds2 .stmt-list,.ds2 .match-list{padding-left:18px;padding-right:18px}
  .ds2 pre.q-code{margin-left:18px;margin-right:18px}
  .ds2 .reveal-section{margin-left:18px;margin-right:18px}
  .ds2 .reveal-only-banner{margin-left:18px;margin-right:18px}
  .ds2 .quiz-actions{padding:18px 18px 22px;gap:8px;flex-wrap:wrap}
  .ds2 .quiz-actions .kbd-hints{display:none}
  .ds2 .match-row{flex-direction:column;align-items:stretch;gap:9px}
  .ds2 .match-item-pick{min-width:0;width:100%;margin-left:0}
  .ds2 .option{padding:13px 14px;gap:12px}
}

/* ---------- dashboard notices + recent sessions (Phase 2 dash) ---------- */
.ds2 .ds-notice{background:var(--tint);border:1px solid var(--tint-line);color:var(--ink-soft);border-radius:12px;padding:12px 16px;font-size:13.5px;margin:18px 0 0}
.ds2 .ds-notice-warn{background:var(--warn-bg);border-color:#f0e0b0;color:var(--warn)}
.ds2 .sess{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line-soft);transition:.13s}
.ds2 .sess:hover{background:var(--surface-2)}
.ds2 .sess:last-child{border-bottom:0}
.ds2 .sess-score{flex:none;width:58px;height:42px;border-radius:11px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:14.5px;background:var(--tint);color:var(--blue);border:1px solid var(--tint-line)}
.ds2 .sess-score-good{background:var(--good-bg);color:var(--good);border-color:var(--good-line)}
.ds2 .sess-score-mid{background:var(--warn-bg);color:var(--warn);border-color:#f0e0b0}
.ds2 .sess-score-low{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.ds2 .sess-info{flex:1;min-width:0}
.ds2 .sess-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ds2 .sess-mode{font-weight:600;font-size:14px;color:var(--ink)}
.ds2 .sess-label{font-size:12.5px;color:var(--muted)}
.ds2 .sess-flag{font-size:10px;font-weight:600;background:var(--faint);color:#fff;border-radius:4px;padding:1px 6px}
.ds2 .sess-meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.ds2 .sess-time{flex:none;font-size:12.5px;color:var(--faint)}


/* ============================================================
   Sign-in gate bridge (Phase 2) — restyles login.php (page-gate)
   to the 2.0 language. 2.0 is light-theme by direction, so the
   legacy dark-mode toggle was removed from the gate. .ds2-scoped.
   ============================================================ */
.ds2.page-gate{min-height:100vh;display:flex;flex-direction:column}
.ds2 .gate-wrap{flex:1 0 auto;display:grid;place-items:center;padding:40px 20px;min-height:0}
.ds2 .gate-card{width:100%;max-width:430px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:38px 36px}
.ds2 .gate-brand{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:24px}
.ds2 .gate-brand .brand-logo{height:26px;color:var(--blue);display:inline-flex}
.ds2 .gate-brand .brand-logo svg{height:100%;width:auto;display:block}
.ds2 .gate-tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--faint)}
.ds2 .gate-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--blue);background:var(--tint);padding:5px 11px;border-radius:20px;margin-bottom:14px}
.ds2 .gate-eyebrow svg{stroke:var(--blue)}
.ds2 .gate-title{font-family:var(--display);font-weight:600;font-size:28px;letter-spacing:-.02em;line-height:1.1;margin-bottom:5px}
.ds2 .gate-sub{color:var(--muted);font-size:14px;margin-bottom:24px}
.ds2 .gate-form{display:flex;flex-direction:column}
.ds2 .gate-form .field-label{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.ds2 .gate-form .field-input{font-family:var(--sans);font-size:15px;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);margin-bottom:16px;transition:.15s;width:100%}
.ds2 .gate-form .field-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,102,179,.12)}
.ds2 .btn-large{padding:15px 22px;font-size:15px;border-radius:12px}
.ds2 .gate-form .btn-block{margin-top:4px}
.ds2 .gate-form .field-password{position:relative;margin-bottom:16px}
.ds2 .gate-form .field-password .field-input{margin-bottom:0;padding-right:42px}
.ds2 .field-password-toggle{position:absolute;top:0;right:0;height:100%;width:42px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--faint);cursor:pointer;padding:0}
.ds2 .field-password-toggle:hover{color:var(--blue)}
.ds2 .field-password-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:-3px;border-radius:8px}
.ds2 .field-password-toggle svg[hidden]{display:none}
.ds2 .gate-form .field-hint{font-family:var(--sans);font-size:12.5px;margin:-8px 0 14px;display:flex;align-items:center;gap:6px}
.ds2 .gate-form .field-hint[hidden]{display:none}
.ds2 .gate-form .caps-warning{color:#C25E00}
.ds2 .gate-form .caps-warning::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#E07B00}
.ds2 .btn.is-loading{opacity:.9;cursor:progress}
.ds2 .gate-access-note{text-align:center;font-family:var(--sans);font-size:12.5px;color:var(--faint);margin:14px 0 0}
.ds2 .gate-access-note .link-quiet{color:var(--muted);text-decoration:none}
.ds2 .gate-access-note .link-quiet:hover{color:var(--blue)}
.ds2 .form-error{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad);border-radius:11px;padding:12px 14px;font-size:13.5px;margin-bottom:16px}
.ds2 .mb-base{margin-bottom:16px}
.ds2 .gate-footer{text-align:center;margin-top:20px}
.ds2 .gate-footer .link-quiet{color:var(--muted);font-size:13.5px;text-decoration:none}
.ds2 .gate-footer .link-quiet:hover{color:var(--blue)}

/* Split sign-in: branded aside + form panel (login.php only). */
.ds2 .gate-split{max-width:880px;padding:0;overflow:hidden;display:grid;grid-template-columns:1.05fr 1fr}
.ds2 .gate-aside{background:linear-gradient(155deg,#073257 0%,#003B6F 48%,#0061ab 100%);color:#fff;padding:46px 42px;display:flex;flex-direction:column;justify-content:center}
.ds2 .gate-aside-brand{display:flex;align-items:center;gap:12px;margin-bottom:34px}
.ds2 .gate-aside-logo{height:42px;color:#fff;display:inline-flex}
.ds2 .gate-aside-logo svg{height:100%;width:auto;display:block}
.ds2 .gate-aside-tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#8fb6dc}
.ds2 .gate-aside-title{font-family:var(--display);font-weight:600;font-size:23px;line-height:1.25;letter-spacing:-.01em;color:#fff;margin:0 0 12px}
.ds2 .gate-aside-tagline{color:#a9cae8;font-size:13px;line-height:1.5;margin:0 0 26px}
.ds2 .gate-aside-list{list-style:none;margin:0;padding:0}
.ds2 .gate-aside-list li{display:flex;align-items:flex-start;gap:11px;color:#e6f0fa;font-size:13.5px;line-height:1.45;margin-bottom:15px}
.ds2 .gate-aside-list li:last-child{margin-bottom:0}
.ds2 .gate-aside-list svg{flex:0 0 auto;margin-top:2px;stroke:#6cc0ff}
.ds2 .gate-main{padding:46px 42px;display:flex;flex-direction:column;justify-content:center;min-width:0}
@media (max-width:768px){
  .ds2 .gate-split{grid-template-columns:1fr;max-width:430px}
  .ds2 .gate-aside{padding:16px;align-items:center;text-align:center}
  .ds2 .gate-aside-brand{margin-bottom:0}
  .ds2 .gate-aside-logo{height:34px}
  .ds2 .gate-aside-title,.ds2 .gate-aside-tagline,.ds2 .gate-aside-list{display:none}
  .ds2 .gate-main{padding:24px 28px 26px}
  .ds2 .gate-access-note{margin-top:10px}
}

/* ============================================================
   Results screen bridge (Phase 3) — restyles results.php to the
   2.0 language. Score ring SVG keeps its server-set geometry;
   we only restyle stroke colors + typography. .ds2-scoped.
   ============================================================ */
.ds2 .container-narrow{max-width:620px;margin:0 auto;padding:34px 20px 70px}
.ds2 .profile-shell{max-width:1060px;margin:0 auto;padding:34px 24px 70px}
.ds2 .profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.ds2 .profile-grid .setup-section{margin-bottom:0}
/* Override base setup-section under ds2 to use 2.13 design tokens */
.ds2 .setup-section{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:24px;
  margin-bottom:20px}
@media(max-width:600px){.ds2 .setup-section{padding:18px;border-radius:var(--radius-sm)}}
@media(max-width:400px){.ds2 .setup-section{padding:14px 16px}}
.ds2 .section-label{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--blue);margin:0 0 18px;
  display:flex;align-items:center;gap:8px;
  justify-content:flex-start}
.ds2 .profile-span-all{grid-column:1 / -1}
.ds2 .profile-prefs-form{max-width:660px}
@media (max-width:860px){.ds2 .profile-grid{grid-template-columns:minmax(0,1fr)}.ds2 .profile-shell{max-width:620px}}
@media(max-width:560px){.ds2 .profile-shell{padding:20px 16px 60px}}
.ds2 .results-hero{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:36px 30px 30px;text-align:center}
.ds2 .results-hero h1{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.01em;margin-bottom:18px;color:var(--ink)}
.ds2 .score-ring-wrap{position:relative;width:200px;height:200px;margin:0 auto 18px}
.ds2 .score-ring{width:200px;height:200px;display:block}
.ds2 .score-ring-track{stroke:var(--line-soft)}
.ds2 .score-ring-fill{transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 0 6px currentColor)}
.ds2 .score-ring-fill.score-pass{stroke:var(--good)}
.ds2 .score-ring-fill.score-mid{stroke:#d99a16}
.ds2 .score-ring-fill.score-fail{stroke:var(--bad)}
.ds2 .score-ring-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ds2 .score-display{font-family:var(--num);font-weight:700;font-size:48px;line-height:1;color:var(--ink)}
.ds2 .score-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.ds2 .score-detail{color:var(--muted);font-size:14px;margin-bottom:14px}
.ds2 .score-verdict{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;padding:8px 18px;border-radius:24px}
.ds2 .score-verdict-pass{background:var(--good-bg);color:var(--good);border:1px solid var(--good-line)}
.ds2 .score-verdict-mid{background:var(--warn-bg);color:var(--warn);border:1px solid #f0e0b0}
.ds2 .score-verdict-fail{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-line)}
.ds2 .score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:18px}
.ds2 .score-stat{background:var(--surface);padding:20px;text-align:center}
.ds2 .score-stat-value{font-family:var(--num);font-weight:600;font-size:30px;line-height:1}
.ds2 .score-stat-correct{color:var(--good)}
.ds2 .score-stat-incorrect{color:var(--bad)}
.ds2 .score-stat-reviewed{color:var(--muted)}
.ds2 .score-stat-label{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.ds2 .results-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
@media(max-width:560px){
  .ds2 .score-stat-value{font-size:24px}
  .ds2 .results-actions .btn{flex:1 1 140px;justify-content:center}
}

/* ============================================================
   Review screen bridge (Phase 3) — review.php reuses the quiz
   card/options/stmt/match/rationale markup (already styled), so
   this only adds the review-specific chrome. .ds2-scoped.
   ============================================================ */
.ds2 div.option{cursor:default}
.ds2 .review-header{margin-bottom:18px}
.ds2 .review-eyebrow{margin-bottom:6px}
.ds2 .review-eyebrow .link-quiet{color:var(--muted);font-size:13.5px;text-decoration:none}
.ds2 .review-eyebrow .link-quiet:hover{color:var(--blue)}
.ds2 .review-title{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.01em;color:var(--ink);margin:2px 0 4px}
.ds2 .field-hint{color:var(--muted);font-size:13.5px;max-width:64ch}
.ds2 .review-filter{display:inline-flex;gap:4px;background:var(--line-soft);border-radius:11px;padding:4px;margin-top:12px}
.ds2 .review-filter-btn{font-size:13.5px;font-weight:600;color:var(--ink-soft);text-decoration:none;padding:7px 16px;border-radius:8px;transition:.15s}
.ds2 .review-filter-btn:hover{color:var(--ink)}
.ds2 .review-filter-btn.is-active{background:var(--surface);color:var(--blue);box-shadow:var(--shadow-sm)}
.ds2 .q-format{font-family:var(--mono);font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.ds2 .review-result-pill{font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:20px}
.ds2 .review-result-correct{background:var(--good-bg);color:var(--good)}
.ds2 .review-result-incorrect{background:var(--bad-bg);color:var(--bad)}
.ds2 .review-result-reviewed{background:var(--line-soft);color:var(--muted)}
.ds2 .option-marker{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.ds2 .stmt-dropdown-review{margin-top:9px;display:flex;flex-wrap:wrap;gap:8px}
.ds2 .empty-state{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:40px 28px;text-align:center;color:var(--muted)}
.ds2 .empty-state p{margin:0 0 4px}
.ds2 .link-strong{color:var(--blue);font-weight:600;text-decoration:none}
.ds2 .link-strong:hover{text-decoration:underline}

/* ============================================================
   Setup + exam-picker bridge (Phase 4) — restyles setup.php and
   study.php to the 2.0 language. Shared .container/.page-intro/
   form-field styles also apply to future opted-in pages. .ds2-scoped.
   ============================================================ */
.ds2 .container{max-width:1080px;margin:0 auto;padding:30px 24px 70px}
.ds2 .page-intro{margin-bottom:6px}
.ds2 .page-intro h1{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
.ds2 .lead{color:var(--muted);font-size:15px}
.ds2 .section-label-inline{margin:0;color:var(--ink)}
.ds2 .info-banner{background:var(--tint);border:1px solid var(--tint-line);color:var(--ink-soft);border-radius:12px;padding:14px 16px;font-size:14px}
.ds2 .info-banner-warn{background:var(--warn-bg);border-color:#f0e0b0;color:var(--warn)}

/* general form fields */
.ds2 .field-label{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;display:block}
.ds2 .form-field .field-input,.ds2 #customForm .field-input{font-family:var(--sans);font-size:15px;padding:11px 13px;border:1.5px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);width:100%;transition:.15s}
.ds2 select.field-input{cursor:pointer}
.ds2 .field-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,102,179,.12)}

/* setup presets */
.ds2 .preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px}
.ds2 .preset-card{display:flex;flex-direction:column;gap:10px;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:20px;cursor:pointer;transition:.18s;font-family:var(--sans);box-shadow:var(--shadow-sm)}
.ds2 .preset-card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow-blue)}
.ds2 .preset-card-featured{border-color:var(--blue);background:linear-gradient(145deg,var(--tint) 0%,#fff 60%);box-shadow:0 4px 20px var(--blue-glow)}
.ds2 .preset-card.is-preselected{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-glow)}
.ds2 .preset-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ds2 .preset-icon{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--tint),var(--surface-2));color:var(--blue);display:grid;place-items:center;flex:none;border:1px solid var(--tint-line)}
.ds2 .preset-icon svg{width:20px;height:20px}
.ds2 .preset-tag{font-size:11px;font-weight:700;color:var(--blue);background:var(--tint);padding:3px 10px;border-radius:20px;white-space:nowrap;border:1px solid var(--tint-line)}
.ds2 .preset-card-featured .preset-tag{background:var(--blue);color:#fff;border-color:var(--blue-600)}
.ds2 .preset-name{font-weight:700;font-size:15px;color:var(--ink)}
.ds2 .preset-meta{font-size:12.5px;color:var(--muted);line-height:1.4}

/* custom session */
.ds2 .custom-session-details{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden;margin-top:6px}
.ds2 .custom-session-summary{display:flex;align-items:center;gap:10px;padding:16px 20px;cursor:pointer;list-style:none}
.ds2 .custom-session-summary::-webkit-details-marker{display:none}
.ds2 .custom-session-hint{font-size:13px;color:var(--muted)}
.ds2 .custom-session-chevron{margin-left:auto;color:var(--faint);transition:transform .2s}
.ds2 details[open] .custom-session-chevron{transform:rotate(180deg)}
.ds2 #customForm{padding:2px 20px 22px}
.ds2 .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:4px}
.ds2 .form-field{display:flex;flex-direction:column}
.ds2 .toggle-row{margin:14px 0 18px}
.ds2 .toggle{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink-soft);cursor:pointer}
.ds2 .toggle input{margin-top:2px;width:16px;height:16px;accent-color:var(--blue);flex:none}

/* exam picker */
.ds2 .study-picker h1{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}
.ds2 .study-picker-lead{color:var(--muted);font-size:15px;margin-bottom:20px}
.ds2 .study-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.ds2 .study-card{margin:0;padding:0;border:0;background:none}
.ds2 .study-card-btn{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:28px 22px;cursor:pointer;transition:.16s;font-family:var(--sans);text-align:center}
.ds2 .study-card-btn:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow)}
.ds2 .study-card-badge img{width:84px;height:84px;object-fit:contain}
.ds2 .study-card-title{font-weight:600;font-size:16px;color:var(--ink)}
.ds2 .study-card-retired{display:inline-block;margin-top:5px;padding:1px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;line-height:1.5}
.ds2 .study-card-meta{font-size:12.5px;color:var(--muted)}

/* ============================================================
   Account + leaderboard shared bits (Phase 4b)
   ============================================================ */
.ds2 .info-banner-success{background:var(--good-bg);border-color:var(--good-line);color:var(--good)}
.ds2 .info-banner-error{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.ds2 .info-banner-info{background:var(--tint);border-color:var(--tint-line);color:var(--ink-soft)}
.ds2 .btn-danger{background:var(--bad);color:#fff}
.ds2 .btn-danger:hover{background:#9a201a}
.ds2 .btn-sm{padding:9px 15px;font-size:13px}
.ds2 .mt-tight{margin-top:8px}.ds2 .mt-base{margin-top:16px}.ds2 .mt-roomy{margin-top:28px}
.ds2 .link-strong{color:var(--blue);font-weight:600;text-decoration:none}
.ds2 .link-strong:hover{text-decoration:underline}

/* ---------- leaderboard rows + standings (Phase 4b) ---------- */
.ds2 .btn-danger:hover{background:#9a201a;border-color:#9a201a;color:#fff}
.ds2 .boards-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ds2 .board-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.ds2 .board-card-primary{grid-column:1 / -1;border:1.5px solid var(--blue);box-shadow:0 0 0 3px var(--tint)}
.ds2 .lb-passed{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:99px;background:var(--good-bg);color:var(--good);vertical-align:middle;margin-left:3px}
.ds2 .board-card-header{padding:18px 22px 6px}
.ds2 .board-card-title{font-weight:600;font-size:16px;color:var(--ink)}
.ds2 .board-card-meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.ds2 .board-empty{padding:16px 22px 22px;text-align:center;color:var(--muted);font-size:13.5px}
.ds2 .board-list{padding:6px 0 8px}
.ds2 .board-row{display:flex;align-items:center;gap:12px;padding:10px 22px}
.ds2 .board-row-me{background:var(--tint)}
.ds2 .board-rank-cell{width:26px;flex:none;text-align:center}
.ds2 .board-rank{font-family:var(--mono);font-weight:600;color:var(--muted);font-size:13px}
.ds2 .board-rank-podium-1{color:#c9a227}
.ds2 .board-rank-podium-2{color:#8a97a5}
.ds2 .board-rank-podium-3{color:#b4763a}
.ds2 .board-avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px}
.ds2 .board-avatar img{width:100%;height:100%;object-fit:cover}
.ds2 .board-name{flex:1;font-weight:600;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.ds2 .me-tag{font-size:10.5px;font-weight:600;background:var(--blue);color:#fff;padding:1px 7px;border-radius:20px}
.ds2 .board-stat-cell{text-align:right;flex:none}
.ds2 .board-stat-primary{font-weight:600;font-family:var(--mono);font-size:14px;color:var(--ink)}
.ds2 .board-stat-meta{font-size:11.5px;color:var(--muted)}
.ds2 .board-more{padding:10px 22px;text-align:center;font-size:13px;color:var(--muted)}
.ds2 .leaderboard-star-legend{font-size:13px;color:var(--muted);margin-bottom:14px;display:flex;align-items:flex-start;gap:6px;line-height:1.45}
.ds2 .leaderboard-star-legend svg{flex:none;margin-top:1px}
.ds2 .standings-hero{background:linear-gradient(120deg,var(--navy),var(--navy-deep));color:#fff;border-radius:var(--radius);padding:22px 26px;margin-bottom:20px;box-shadow:var(--shadow-lg)}
.ds2 .standings-hero-name{font-family:var(--display);font-weight:600;font-size:20px}
.ds2 .standings-hero-nickname{color:#fff;font-weight:700}
.ds2 .standings-hero-tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#bcdcff;font-weight:600}
.ds2 .standings-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ds2 .standing-chip{background:#fff;border:1px solid rgba(255,255,255,.55);border-radius:11px;padding:10px 14px;min-width:120px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.ds2 .standing-chip-label{font-size:11px;color:#5f7286;font-weight:600}
.ds2 .standing-chip-rank{font-family:var(--num);font-size:20px;font-weight:700}
.ds2 .standing-chip-hint{font-size:11px;color:#8b9bab}

/* ---------- profile niceties (Phase 4b) ---------- */
.ds2 .avatar-preview,.ds2 .avatar-placeholder{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--tint);display:grid;place-items:center;color:var(--blue);font-weight:600}
.ds2 .avatar-preview img{width:100%;height:100%;object-fit:cover}
.ds2 .profile-field-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ds2 .profile-field-value{font-size:15px;color:var(--ink);margin-top:2px}

@media(max-width:760px){.ds2 .boards-grid{grid-template-columns:1fr}}

.ds2 .btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}

/* ============================================================
   Admin area bridge (Phase 5) — opts admin pages into 2.0.
   CSS-only; admin markup/JS unchanged. .ds2-scoped.
   ============================================================ */
.ds2 .stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:8px 0}
.ds2 .stat-tiles-quad{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.ds2 .stat-tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:18px 20px}
.ds2 .stat-tile-value{font-family:var(--num);font-weight:600;font-size:28px;line-height:1;color:var(--ink)}
.ds2 .stat-tile-large .stat-tile-value{font-size:32px}
.ds2 .stat-tile-suffix{font-size:15px;color:var(--faint);font-family:var(--sans)}
.ds2 .stat-tile-label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.ds2 .stat-tile-sub{font-size:11.5px;color:var(--faint);margin-top:4px}

.ds2 .section-block{margin-top:26px}
.ds2 .section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ds2 .section-header h2{font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink)}

.ds2 .admin-table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);overflow:auto}
.ds2 .admin-table.admin-table-compact thead th,
.ds2 .admin-table.admin-table-compact tbody td{padding-left:7px;padding-right:7px}
.admin-table.admin-table-compact th,.admin-table.admin-table-compact td{padding-left:7px;padding-right:7px}
.ds2 .admin-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ds2 .admin-table thead th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:11px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
.ds2 .admin-table tbody td{padding:11px 10px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);vertical-align:middle}
.ds2 .admin-table tbody tr:last-child td{border-bottom:0}
.ds2 .admin-table tbody tr:hover{background:var(--tint)}
.ds2 .admin-table-mono{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.ds2 .admin-table-meta{color:var(--muted);font-size:12.5px;white-space:nowrap}
/* Wide admin tables (sat-report, pdpa-report) carry an action column (Re-send,
   Reveal/Revoke) past 10+ columns. Pin that column to the right so the buttons
   stay visible while the rest of the row scrolls. Desktop only; the <=720px
   breakpoint converts these tables to stacked cards where pinning is moot. */
@media (min-width:721px){
  .ds2 .admin-table-wrap{position:relative}
  .ds2 .admin-table-compact thead th:last-child{
    position:sticky;right:0;z-index:3;background:var(--surface-2);
    box-shadow:-8px 0 8px -8px rgba(15,23,35,.18);
  }
  .ds2 .admin-table-compact td.admin-table-actions{
    position:sticky;right:0;z-index:2;background:var(--surface);
    box-shadow:-8px 0 8px -8px rgba(15,23,35,.18);
  }
  .ds2 .admin-table-compact tbody tr:hover td.admin-table-actions{background:var(--tint)}
}
.ds2 .col-check{width:34px}

.ds2 .role-pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;background:var(--line-soft);color:var(--ink-soft);text-transform:capitalize}
.ds2 .role-pill-admin{background:var(--tint);color:var(--blue)}
.ds2 .role-pill-instructor{background:#ede4fb;color:#6b3fc0}
.ds2 .role-pill-student{background:var(--line-soft);color:var(--ink-soft)}
.ds2 .role-pill-disabled{opacity:.55}

.ds2 .action-menu{position:relative;display:inline-block}
.ds2 .action-menu-trigger{background:var(--surface);border:1.5px solid var(--line);border-radius:9px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;color:var(--ink-soft)}
.ds2 .action-menu-trigger:hover{border-color:var(--blue);color:var(--blue)}
.ds2 .action-menu-items{position:fixed;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);min-width:232px;padding:6px;z-index:60}
.ds2 .action-menu-item{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:9px 12px;font-size:13.5px;color:var(--ink-soft);cursor:pointer;text-decoration:none}
.ds2 .action-menu-item:hover{background:var(--tint);color:var(--blue)}
.ds2 .action-menu-item-warn{color:var(--bad)}
.ds2 .action-menu-item-warn:hover{background:var(--bad-bg);color:var(--bad)}
.ds2 .action-menu-group-label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:8px 12px 4px}
.ds2 .action-menu-form{margin:0}
.ds2 .form-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.ds2 .page-intro-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ds2 .page-intro-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- dashboard discard control (restored Phase 2 functionality) ---------- */
.ds2 .dash-discard{margin:2px 0 6px 56px}
.ds2 .dash-discard-btn{background:none;border:0;padding:4px 0;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.ds2 .dash-discard-btn:hover{color:var(--bad)}

/* ============================================================
   2.0 DARK THEME. Restores the light/auto/dark capability across
   the redesigned (.ds2) surface. Activated by 
   (set by the theme toggle + renderHead's pre-paint script). Token
   overrides cascade to every component; the navy hero stays navy by
   brand intent. Specificity (0,2,1) beats the light .ds2 tokens (0,1,0).
   ============================================================ */
html[data-theme="dark"] .ds2{
  --ink:#e8eef5; --ink-soft:#b0c0d0; --muted:#6e8496; --faint:#445568;
  --line:#1e2d3d; --line-soft:#172334;
  --bg:#080e17; --card:#0f1923; --surface:#0f1923; --surface-2:#162030;
  --tint:#0d1e30; --tint-line:#1a3550;
  --blue:#2f93e3; --blue-600:#4aa8ee; --blue-700:#68bcf5; --navy-text:#68bcf5;
  --rd-grad:linear-gradient(135deg,#0a4c84 0%,#06365d 52%,#04243d 100%);
  --rd-glow-1:rgba(47,147,227,.34); --rd-glow-2:rgba(104,188,245,.18);
  --rd-well:#03243f;
  --blue-glow:rgba(47,147,227,.22); --blue-glow-sm:rgba(47,147,227,.12);
  --good:#3fb86a; --good-bg:#0a2016; --good-line:#1a4028;
  --bad:#f07070; --bad-bg:#26100f; --bad-line:#4a1a18;
  --warn:#e8b84a; --warn-bg:#221800;
  --amber:#f59e0b; --amber-bg:#2a1f00;
  --purple:#a78bfa; --purple-bg:#1e1440;
  --shadow-sm:0 1px 3px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03);
  --shadow:0 4px 16px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.3);
  --shadow-lg:0 12px 40px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.4);
  --shadow-blue:0 4px 20px rgba(47,147,227,.28),0 1px 4px rgba(47,147,227,.16);
}
html[data-theme="dark"] body.ds2{
  background-image:
    radial-gradient(ellipse 1000px 700px at 50% -100px, rgba(47,147,227,.12) 0%, transparent 70%),
    radial-gradient(ellipse 600px 400px at 100% 0%, rgba(47,147,227,.06) 0%, transparent 60%);
}
/* The translucent header reads white in light; tint it for dark. */
html[data-theme="dark"] .ds2 .topbar,
html[data-theme="dark"] .ds2 .app-header{
  background:#0a1420;
  border-bottom-color:var(--blue);
  box-shadow:0 2px 20px rgba(0,0,0,.5)}
/* Mobile menu + any pure-white inset surfaces follow the card color. */
html[data-theme="dark"] .ds2 .header-mobile-menu{background:#0a1420;border-top-color:var(--blue)}
/* Logout button in dark mode: the shared --bad-bg (#26100f) hover reads as a
   muddy near-black-red smudge on the dark header (#0a1420), and the resting
   icon at --muted is dimmer than it needs to be. Lift the resting icon to
   --ink-soft and replace the hover fill with a clean translucent red that sits
   correctly on the dark header. Scoped to dark + the logout button only;
   light mode is unchanged. */
html[data-theme="dark"] .ds2 .logout-link{color:var(--ink-soft)}
html[data-theme="dark"] .ds2 .logout-link:hover{background:rgba(240,112,112,.14);color:var(--bad)}
/* Content protection (gated by body.protect-on, set by app.js when
   CONTENT_PROTECTION_ENABLED). Blocks text selection / long-press callout on
   question content. Inputs, textareas and buttons stay selectable/usable. */
.ds2.protect-on{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
.ds2.protect-on input,.ds2.protect-on textarea,.ds2.protect-on [contenteditable="true"]{-webkit-user-select:text;-moz-user-select:text;user-select:text;-webkit-touch-callout:default}
/* Dark mode nav active: use brand blue (#0066B3) for WCAG AA compliance --
   electric blue (#2f93e3) only achieves 3.3:1 with white text. */
html[data-theme="dark"] .ds2 .nav-link.active{background:#0066B3;color:#fff;box-shadow:0 2px 8px rgba(0,102,179,.4)}

/* ---------- restored dashboard: countdown strip + trend card ---------- */
.ds2 .countdown-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 22px}
.ds2 .countdown-strip-main{display:flex;flex-direction:column;gap:2px}
.ds2 .countdown-strip-days{font-weight:600;font-size:15px;color:var(--ink)}
.ds2 .countdown-strip-msg{font-size:13px;color:var(--muted)}
.ds2 .trend-card-body{padding:8px 22px 20px}

/* ============================================================
   Leaderboard podium (top 3 of the headline board). .ds2-scoped.
   ============================================================ */
.ds2 .lb-podium{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin:0 0 30px;padding:14px 4px 0}
.ds2 .lb-podium-spot{flex:1 1 0;max-width:190px;display:flex;flex-direction:column;align-items:center;text-align:center}
.ds2 .lb-podium-figure{position:relative;margin-bottom:9px}
.ds2 .lb-podium-crown{position:absolute;top:-17px;left:50%;transform:translateX(-50%);color:#E8B100;line-height:0}
.ds2 .lb-podium .board-avatar{border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:var(--tint);color:var(--blue);font-family:var(--display);font-weight:700}
.ds2 .lb-podium .board-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ds2 .lb-podium .board-avatar-lg{width:82px;height:82px;font-size:30px}
.ds2 .lb-podium .board-avatar-md{width:60px;height:60px;font-size:22px}
.ds2 .lb-podium-1 .board-avatar{border:3px solid #E8B100;box-shadow:0 0 0 3px rgba(232,177,0,.25)}
.ds2 .lb-podium-2 .board-avatar{border:3px solid #AEBAC6}
.ds2 .lb-podium-3 .board-avatar{border:3px solid #C77B3A}
.ds2 .lb-podium-name{font-family:var(--sans);font-weight:700;font-size:13.5px;color:var(--ink);line-height:1.2;margin-bottom:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds2 .lb-podium-me .lb-podium-name{color:var(--blue)}
.ds2 .lb-podium-score{font-family:var(--num);font-weight:800;font-size:20px;color:var(--blue);line-height:1;margin-bottom:10px}
.ds2 .lb-podium-stand{width:100%;border-radius:14px 14px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:10px;font-family:var(--num);font-weight:800;color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.28)}
.ds2 .lb-podium-rank{font-size:24px;line-height:1}
.ds2 .lb-podium-1 .lb-podium-stand{height:104px;background:linear-gradient(180deg,#FFDE5A,#E8A600);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 4px 16px rgba(232,177,0,.3)}
.ds2 .lb-podium-2 .lb-podium-stand{height:78px;background:linear-gradient(180deg,#D0DBE6,#94A2AF)}
.ds2 .lb-podium-3 .lb-podium-stand{height:58px;background:linear-gradient(180deg,#E8A077,#BE7338)}
@media (max-width:560px){
  .ds2 .lb-podium{gap:6px;padding-top:16px}
  .ds2 .lb-podium .board-avatar-lg{width:58px;height:58px;font-size:21px}
  .ds2 .lb-podium .board-avatar-md{width:46px;height:46px;font-size:16px}
  .ds2 .lb-podium-score{font-size:16px}
  .ds2 .lb-podium-name{font-size:11.5px}
  .ds2 .lb-podium-rank{font-size:19px}
  .ds2 .lb-podium-1 .lb-podium-stand{height:80px}
  .ds2 .lb-podium-2 .lb-podium-stand{height:60px}
  .ds2 .lb-podium-3 .lb-podium-stand{height:46px}
}
/* Leaderboard runner-up cards (spots 4 and 5) */
.ds2 .lb-runnerup-row{display:flex;gap:10px;justify-content:center;margin:0 0 26px}
.ds2 .lb-runnerup{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 18px;flex:0 1 240px;box-shadow:var(--shadow-sm)}
.ds2 .lb-runnerup-me{border-color:var(--blue);background:var(--tint)}
.ds2 .lb-runnerup-rank{font-family:var(--num);font-size:18px;font-weight:800;color:var(--muted);min-width:22px;text-align:center}
.ds2 .lb-runnerup-name{font-weight:600;font-size:14px;color:var(--ink);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds2 .lb-runnerup-me .lb-runnerup-name{color:var(--blue)}
.ds2 .lb-runnerup-score{font-family:var(--num);font-weight:700;font-size:16px;color:var(--blue);white-space:nowrap}
@media(max-width:560px){
  .ds2 .lb-runnerup-row{flex-direction:column;align-items:center}
  .ds2 .lb-runnerup{width:100%;flex:none;max-width:340px}
}

/* v2.0.11 mobile — the admin filter toolbar held a wide Exam