/* Extracted from index.html (reorg increment 1). Served by express.static, cached, shareable across pages. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: clamp(14px, 1.25vw, 18px); }
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #fff; display: flex; justify-content: center; align-items: flex-start; padding: 40px 20px; min-height: 100vh; }
body.auth-mode { align-items: center; padding: 20px; background: linear-gradient(145deg, #e8ecf8 0%, #dde5f7 35%, #e4e8f5 65%, #edf0fb 100%); }
body.auth-mode .container { background: rgba(255,255,255,0.28); border: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.student-mode { padding: 0; align-items: stretch; }
body.student-mode .container { max-width: 100%; border: none; min-height: 100vh; padding: 16px 48px 32px; }
/* Attendance: highlight the "Tasks Done Today" box when it was auto-filled from coder activity */
#attendanceTasks.att-autofilled { border-color: rgba(34,197,94,0.55) !important; background: rgba(34,197,94,0.07); box-shadow: 0 0 0 3px rgba(34,197,94,0.12); animation: attAutofillPulse 1.6s ease-out 1; }
@keyframes attAutofillPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.35); } 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.12); } }
#attendanceMsg.att-autofill-note { color: #15803d !important; font-weight: 700; }
/* Mobile touch support */
@media (max-width: 600px) {
body { padding: 10px; }
body.auth-mode { padding: 10px; }
.container:not(.admin-expanded) { padding: 20px 16px !important; border-width: 1px !important; }
.container.admin-expanded { padding: 0 !important; }
body.student-mode .container { padding: 16px 12px !important; }
.auth-form { max-width: 100%; }
.auth-tabs { max-width: 100%; }
#nameForm input { width: 100% !important; }
.history-stats { flex-direction: column; gap: 8px; }
.history-header h2 { font-size: 1.75rem !important; }
#histTabStats, #histTabLb { display: none !important; }
.usermenu-overlay-nav .mobile-history-actions { display: block; }
#histFilterWrap { display: none !important; }
h1 { font-size: clamp(1.625rem, 7vw, 2.25rem) !important; }
.buttons { flex-wrap: wrap; }
#userBar { flex-wrap: wrap; gap: 8px; font-size: 0.75rem; padding: 10px 12px; }
#userBar .user-actions { gap: 6px; }
#userBar button { padding: 6px 12px; font-size: 11px; }
/* Admin status widget — hide on mobile, it overlaps content */
.admin-status, .admin-status-detail, .student-db-status { display: none !important; }
/* Notification toast — full width on mobile */
.notif-toast { width: calc(100vw - 24px); right: 12px; left: 12px; top: 10px; }
/* Attendance modal — mobile */
#attendanceModal > div { padding: 20px 16px !important; margin: 10px !important; }
.att-time-row { flex-direction: column !important; gap: 8px !important; }
#attendanceModal h3 { font-size: 0.875rem !important; margin-bottom: 14px !important; }
.att-btn-row { flex-direction: column !important; }
.att-btn-row button { padding: 12px 0 !important; }
/* Question options — larger tap targets */
.question label { padding: 12px 14px; font-size: 0.8125rem; }
/* Results review */
.review { padding: 12px 14px; }
}
@media (min-width: 1200px) { body.student-mode .container { padding: 16px 80px 40px; } }
/* Password toggle */
.pw-wrap { position: relative; margin-bottom: 14px; }
.pw-wrap input { width: 100%; padding-right: 60px; margin-bottom: 0 !important; }
.pw-wrap input::-webkit-credentials-auto-fill-button { display: none !important; }
.pw-toggle { position: absolute; right: 2px; top: 0; bottom: 0; background: none !important; border: none !important; color: #888; font-size: 11px; cursor: pointer; padding: 0 12px; font-family: inherit; text-transform: uppercase; letter-spacing: 0.5px; width: auto !important; margin: 0 !important; display: flex; align-items: center; }
.pw-toggle:hover { color: #000; background: none !important; }
/* Admin status widget */
.admin-status { position: relative; width: 100%; flex-shrink: 0; order: 3; box-sizing: border-box; border-top: 1px solid #e5e5ea; padding: 10px 16px; font-size: 11px; cursor: pointer; background: #fbfbfd; font-family: inherit; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; transition: background 150ms ease; }
.admin-status:hover { background: #f3f4f6; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.status-dot.online { background: #4CAF50; }
.status-dot.offline { background: #e74c3c; }
.admin-status-detail { position: relative; width: 100%; flex-shrink: 0; order: 2; box-sizing: border-box; background: #f9fafb; border-top: 1px solid rgba(0,0,0,0.06); padding: 12px 16px; font-size: 11px; display: none; font-family: inherit; }
.admin-status.open ~ .admin-status-detail { display: block; }
.student-db-status { position: fixed; bottom: 0; left: 0; padding: 10px 16px; font-size: 11px; background: #fff; border-top: 2px solid #000; border-right: 2px solid #000; z-index: 100; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; display: none; }
.student-db-status .sdb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: #4CAF50; }
.student-db-status .sdb-dot.error { background: #f39c12; }
.student-db-status .sdb-dot.disconnected { background: #e74c3c; }
.container { background: #fff; border-radius: 0; padding: 40px 48px; max-width: 860px; width: 100%; box-shadow: none; border: 2px solid #000; }
/* ── Quiz-taking screen — Material-inspired nested-card design
(2026-08-08, per reference mockup): a soft lavender frame holding a
white pill header and a white content card, pill nav buttons floating
on the frame below. Scoped to body.quiz-active so nothing outside the
live quiz (dashboard, admin, auth, results) is affected. Set/cleared by
revealQuiz() / hideAllScreens() in app.js. ── */
body.quiz-active { background: #f4f0fb; }
body.quiz-active .container {
border: none;
box-shadow: none;
background: #ece3fa;
border-radius: 32px;
padding: 14px;
/* Wide enough that the debugging/code-writing CodeMirror panels don't
squeeze their lines — 920px was fine for plain MCQ text but wrapped
real code uncomfortably. */
max-width: 1180px;
}
body.quiz-active #userBar {
border: none;
border-radius: 999px;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
padding: 8px 10px 8px 8px;
margin-bottom: 14px;
}
body.quiz-active #userBar .user-info {
background: #f1edf9;
color: #4c3d99;
font-weight: 700;
font-size: 0.8125rem;
padding: 8px 18px;
border-radius: 999px;
}
body.quiz-active #userBar .user-actions { gap: 14px; }
body.quiz-active #timer {
margin: 0;
padding: 0;
font-size: 0.9375rem;
font-weight: 600;
border: none;
border-radius: 0;
background: transparent;
color: #1f1f23;
white-space: nowrap;
}
body.quiz-active #timer::before { content: '⏰'; margin-right: 7px; font-size: 0.875em; }
body.quiz-active #timer.warning { color: #e74c3c; }
.quiz-quit-pill {
border: none;
border-radius: 999px !important;
background: #ef4444;
color: #fff;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.3px;
text-transform: none;
padding: 9px 22px;
cursor: pointer;
transition: background 150ms ease, transform 150ms ease;
}
.quiz-quit-pill:hover { background: #dc2626; transform: translateY(-1px); }
.quiz-quit-pill:active { transform: scale(0.97); }
body.quiz-active .progress { color: #746b87; font-size: 0.8125rem; margin: 2px 6px 12px; }
body.quiz-active .progress button, body.quiz-active #allQuestionsBtn {
border-radius: 999px !important;
background: #fff !important;
color: #4c3d99 !important;
border: none !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
body.quiz-active #quiz {
background: #fff;
border-radius: 24px;
padding: 32px 28px;
/* Hug content — no min-height, so short questions (a 4-option MCQ)
don't leave a tall empty card while long ones (editor panels) still
grow naturally. */
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
body.quiz-active .question { position: relative; }
body.quiz-active .question h3 { color: #33255c; font-weight: 700; font-size: 1.0625rem; }
body.quiz-active .buttons {
background: transparent;
justify-content: space-between;
margin-top: 18px;
padding: 4px 6px 0;
}
body.quiz-active .buttons button {
background: #fff;
color: #4c3d99;
border-radius: 999px;
padding: 11px 24px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
transition: background 150ms ease, transform 150ms ease;
}
body.quiz-active .buttons button:hover { background: #f5f2fc; transform: translateY(-1px); }
body.quiz-active .buttons button:disabled { background: #f3f3f5; color: #b8b3c4; box-shadow: none; }
/* Dashboard entry point into the same Material-redesigned quiz — was the
old flat black/uppercase global button style; every button INSIDE the
quiz is a purple pill now, so the button that launches it should read
as the same product, not a leftover from the pre-redesign look. */
#startQuizBtn {
background: #4c3d99;
color: #fff;
border-radius: 999px;
text-transform: none;
letter-spacing: 0;
font-weight: 700;
box-shadow: 0 2px 10px rgba(76,61,153,0.25);
transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
#startQuizBtn:hover { background: #443590; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(76,61,153,0.32); }
#startQuizBtn:active { transform: translateY(0); }
body.quiz-active .question label { border-radius: 14px; }
/* Non-MCQ question modes — debugging / predict-output / code-writing.
Base look is a filled pill badge; quiz-active repositions it as a
plain-text label in the corner next to the heading (per mockup). */
.qmode-badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 999px;
background: #eef2ff;
color: #4338ca;
margin-bottom: 12px;
}
body.quiz-active .qmode-badge {
/* float (not absolute) so long/wrapping headings flow around it
instead of overlapping it on the second line */
float: right;
background: transparent;
color: #6d5bb3;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
padding: 2px 0 0 14px;
margin: 0;
}
.qmode-textarea, .qmode-input {
width: 100%;
font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
font-size: 13.5px;
line-height: 1.6;
color: #1f2937;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 14px 18px;
resize: vertical;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.qmode-textarea { min-height: 160px; }
.qmode-input { font-family: inherit; font-size: 0.875rem; }
.qmode-textarea:focus, .qmode-input:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.qmode-label { display: block; font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.4px; margin: 16px 0 8px; }
/* Solution panel for debugging/code-writing — ported from code_task.html's
dark editor chrome (same --bg/--surface/--border/--accent tokens, same
header layout) so these read as the SAME editor students already know
from coder tasks, not a bespoke quiz-only widget. */
.qmode-editor-panel {
--bg: #0e0e10; --surface: #18181c; --border: #2a2a34;
--accent: #5b9cf6; --accent-soft: rgba(91,156,246,0.1);
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border);
margin: 8px 0 4px;
}
.qmode-editor-header {
display: flex; align-items: center; justify-content: space-between;
padding: 0 14px; height: 40px; background: var(--surface);
border-bottom: 1px solid var(--border);
}
.qmode-editor-header-left { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; color: #72728a; }
.qmode-term-dots { display: inline-flex; align-items: center; gap: 6px; }
.qmode-term-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.qmode-term-dots i:nth-child(1) { background: #ff5f56; }
.qmode-term-dots i:nth-child(2) { background: #ffbd2e; }
.qmode-term-dots i:nth-child(3) { background: #27c93f; }
.qmode-lang-badge {
background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700;
padding: 2px 9px; border-radius: 4px; border: 1px solid rgba(91,156,246,0.2);
font-family: 'JetBrains Mono', monospace;
}
.qmode-editor-panel .CodeMirror {
height: 220px;
font-family: 'JetBrains Mono', 'SF Mono', monospace;
font-size: 13.5px;
line-height: 1.7;
background: var(--bg) !important;
}
.qmode-editor-panel .CodeMirror-gutters { background: var(--bg) !important; border-right: 1px solid var(--border); }
.container.results-fullwidth { max-width: none; padding: 32px 48px; }
body.results-mode { padding: 20px; align-items: stretch; }
h1 { text-align: center; margin-bottom: 20px; color: #000; font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 200; letter-spacing: 2px; text-transform: uppercase; }
.progress { text-align: center; color: #555; margin-bottom: 24px; font-size: 0.875rem; }
#timer { font-size: 1.25rem; font-weight: 700; color: #000; margin-bottom: 20px; text-align: center; padding: 12px 24px; background: #fff; border: 2px solid #000; border-radius: 0; }
#timer.warning { color: #e74c3c; border-color: #e74c3c; }
.question { margin-bottom: 32px; }
.question h3 { margin-bottom: 16px; color: #000; font-size: 1rem; line-height: 1.6; white-space: pre-wrap; }
.question h3 pre { background:#f6f6f6; border:1px solid #e0e0e0; padding:12px 16px; margin:10px 0 4px; overflow-x:auto; white-space:pre; font-family:'SF Mono','Consolas','Monaco',monospace; font-size:13px; line-height:1.5; color:#222; }
.question label pre { display:inline; background:#f6f6f6; padding:1px 4px; font-family:'SF Mono','Consolas','Monaco',monospace; font-size:13px; white-space:pre-wrap; }
.review-item h4 { white-space: pre-wrap; }
.review-item h4 pre { background:#f6f6f6; border:1px solid #e0e0e0; padding:12px 16px; margin:10px 0 4px; overflow-x:auto; white-space:pre; font-family:'SF Mono','Consolas','Monaco',monospace; font-size:13px; line-height:1.5; color:#222; }
.question label { display: block; padding: 14px 18px; margin: 8px 0; background: #fff; border-radius: 0; cursor: pointer; font-size: 0.875rem; border: 1px solid #ccc; transition: all 0.1s ease; }
.question label:hover { background: #f5f5f5; border-color: #000; }
.question label input[type="radio"] { margin-right: 10px; accent-color: #000; }
.buttons { display: flex; justify-content: center; gap: 14px; margin-top: 28px; }
button { padding: 14px 36px; background: #000; color: #fff; border: none; border-radius: 0; font-size: 0.875rem; cursor: pointer; font-weight: 600; transition: all 0.1s ease; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.5px; }
button:hover { background: #333; transform: none; box-shadow: none; }
button:disabled { background: #ccc; color: #888; cursor: not-allowed; transform: none; box-shadow: none; }
#results { margin-top: 28px; }
.score { text-align: center; font-size: 1.75rem; font-weight: 700; margin-bottom: 24px; color: #000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.correct { color: #000; }
.wrong { color: #e74c3c; }
.review { margin-bottom: 16px; padding: 16px 20px; border-radius: 0; }
.review.right { background: #fff; border-left: 3px solid #000; }
.review.incorrect { background: #fff; border-left: 3px solid #e74c3c; }
.review p { margin: 6px 0; font-size: 0.875rem; line-height: 1.5; color: #000; }
.hidden { display: none !important; }
#nameForm { text-align: center; padding: 20px 0; }
#nameForm input { padding: 14px 16px; font-size: 0.875rem; border: 2px solid #000; border-radius: 0; width: 380px; max-width: 100%; margin-bottom: 18px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
#nameForm input:focus { border-color: #000; outline: none; }
#nameForm button { margin-top: 12px; }
#reviewPage { max-height: 600px; overflow-y: auto; padding: 4px; }
.review-item { padding: 18px 20px; margin-bottom: 12px; background: #fff; border-radius: 0; cursor: pointer; border-left: 3px solid #ccc; border: 1px solid #ddd; transition: all 0.1s ease; }
.review-item:hover { background: #f5f5f5; transform: none; }
.review-item.unanswered { background: #fff8e1; border-left: 3px solid #f39c12; }
.review-item h4 { margin-bottom: 10px; color: #000; font-size: 0.875rem; line-height: 1.4; }
.review-item p { margin: 4px 0; color: #555; font-size: 0.8125rem; }
.review-item .answer { color: #000; font-weight: 600; }
/* User Bar */
#userBar { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 2px solid #000; border-radius: 0; padding: 12px 20px; margin-bottom: 24px; font-size: 0.8125rem; color: #555; position: relative; }
#userBar .user-info { font-weight: 700; color: #000; font-size: 0.875rem; }
#userBar .user-info.user-info-link { cursor: pointer; -webkit-tap-highlight-color: transparent; }
#userBar .user-info.user-info-link:hover { text-decoration: underline; text-underline-offset: 3px; }
#userBar .user-actions { display: flex; gap: 10px; align-items: center; }
/* Hamburger trigger button */
.usermenu-wrap { position: relative; display: inline-flex; }
#userBar .usermenu-btn, .usermenu-btn { width: 40px; height: 40px; min-width: 0; border-radius: 50%; border: none; background: transparent; color: #1f2937; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background 150ms ease; position: relative; font-family: inherit; font-size: 0; box-shadow: none; }
#userBar .usermenu-btn:hover, .usermenu-btn:hover { background: rgba(0,0,0,0.06); color: #1f2937; }
#userBar .usermenu-btn:active, .usermenu-btn:active { background: rgba(0,0,0,0.10); }
.usermenu-btn svg { width: 22px; height: 22px; stroke-width: 2; color: #1f2937; }
.usermenu-dot { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(255,59,48,0.35); pointer-events: none; }
/* Full-screen overlay (dzinr-inspired clip-path wipe) */
.usermenu-overlay { position: fixed; inset: 0; width: 100%; height: 100%; background: #0a0a0a; z-index: 10500; pointer-events: none; clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); transition: clip-path 0.8s cubic-bezier(0.76, 0, 0.24, 1), -webkit-clip-path 0.8s cubic-bezier(0.76, 0, 0.24, 1); will-change: clip-path; display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif; color: #fff; }
.usermenu-overlay.open { pointer-events: auto; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
.usermenu-overlay-bar { position: absolute; top: 0; left: 0; right: 0; padding: 20px 28px; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.usermenu-overlay-brand { font-size: 14px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.78); }
.usermenu-overlay .usermenu-close { background: transparent; border: 1px solid rgba(255,255,255,0.22); width: 44px; height: 44px; min-width: 0; padding: 0; border-radius: 50%; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0; font-weight: 400; letter-spacing: 0; text-transform: none; font-family: inherit; transition: background 180ms ease, border-color 180ms ease; box-shadow: none; }
.usermenu-overlay .usermenu-close:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); color: #fff; }
.usermenu-overlay .usermenu-close:active { background: rgba(255,255,255,0.14); }
.usermenu-overlay .usermenu-close svg { width: 20px; height: 20px; transform: rotate(45deg); transition: transform 400ms cubic-bezier(0.16,1,0.3,1); stroke-width: 1.5; display: block; }
.usermenu-overlay .usermenu-close:hover svg { transform: rotate(135deg); }
.usermenu-overlay-nav { margin: auto 0; padding: 0 clamp(28px, 6vw, 72px); display: flex; flex-direction: column; gap: 6px; }
.usermenu-overlay-nav a { position: relative; display: inline-flex; align-items: center; gap: 22px; font-size: clamp(36px, 6.5vw, 68px); font-weight: 500; letter-spacing: -0.03em; color: rgba(255,255,255,0.55); text-decoration: none; cursor: pointer; line-height: 1.15; padding: 6px 0; opacity: 0; transform: translateY(60px); width: fit-content; font-family: inherit; }
.usermenu-overlay.open .usermenu-overlay-nav a { opacity: 1; transform: translateY(0); transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(1) { transition-delay: 0.30s, 0.30s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(2) { transition-delay: 0.36s, 0.36s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(3) { transition-delay: 0.42s, 0.42s, 0s; }
.usermenu-overlay-nav a:hover { color: #fff; }
.usermenu-overlay-nav a .arrow { opacity: 0; transform: translateX(-12px); transition: opacity 220ms ease, transform 260ms cubic-bezier(0.16,1,0.3,1); font-size: 0.5em; margin-left: 8px; }
.usermenu-overlay-nav a:hover .arrow { opacity: 1; transform: translateX(0); }
.usermenu-overlay-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 9px; margin-left: 14px; background: #ff3b30; color: #fff; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif; font-variant-numeric: tabular-nums; vertical-align: middle; box-sizing: border-box; text-transform: none; box-shadow: 0 2px 8px rgba(255,59,48,0.28); align-self: center; position: relative; top: -0.08em; }
.mobile-history-actions { display: none; }
.usermenu-overlay-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 28px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 0.4px; color: rgba(255,255,255,0.45); text-transform: uppercase; z-index: 2; }
.usermenu-overlay-footer span { font-variant-numeric: tabular-nums; }
body.usermenu-open { overflow: hidden; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
.usermenu-overlay-bar, .usermenu-overlay-footer { padding: 16px 20px; }
.usermenu-overlay-nav { padding: 0 24px; }
}
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(4) { transition-delay: 0.48s, 0.48s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(5) { transition-delay: 0.54s, 0.54s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(6) { transition-delay: 0.60s, 0.60s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(7) { transition-delay: 0.66s, 0.66s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(8) { transition-delay: 0.72s, 0.72s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(9) { transition-delay: 0.78s, 0.78s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(10) { transition-delay: 0.84s, 0.84s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(11) { transition-delay: 0.90s, 0.90s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(12) { transition-delay: 0.96s, 0.96s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(13) { transition-delay: 1.02s, 1.02s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(14) { transition-delay: 1.08s, 1.08s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(15) { transition-delay: 1.14s, 1.14s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(16) { transition-delay: 1.20s, 1.20s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(17) { transition-delay: 1.26s, 1.26s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(18) { transition-delay: 1.32s, 1.32s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(19) { transition-delay: 1.38s, 1.38s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(20) { transition-delay: 1.44s, 1.44s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(21) { transition-delay: 1.50s, 1.50s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(22) { transition-delay: 1.56s, 1.56s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(23) { transition-delay: 1.62s, 1.62s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(24) { transition-delay: 1.68s, 1.68s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(25) { transition-delay: 1.74s, 1.74s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(26) { transition-delay: 1.80s, 1.80s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(27) { transition-delay: 1.86s, 1.86s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(28) { transition-delay: 1.92s, 1.92s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(29) { transition-delay: 1.98s, 1.98s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(30) { transition-delay: 2.04s, 2.04s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(31) { transition-delay: 2.10s, 2.10s, 0s; }
.usermenu-overlay.open .usermenu-overlay-nav a:nth-child(32) { transition-delay: 2.16s, 2.16s, 0s; }
.admin-overlay-trigger { display: none; }
.mobile-header-hidden { }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) { .mobile-header-hidden { display: none !important; } }
#atTaskFab { display: none; position: fixed; right: 16px; bottom: 24px; z-index: 300; }
/* Floating glass "Assign Task" button — desktop only; shows when viewing the Tasks view */
#assignTaskFloatBtn { display: none; position: fixed; right: 24px; bottom: 24px; z-index: 300; align-items: center; gap: 9px; padding: 13px 22px; border: 1px solid rgba(255,255,255,0.7); border-radius: 999px; background: rgba(255,255,255,0.6); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); color: #1d1d1f; font-size: 14px; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 12px 32px rgba(0,0,0,0.16); transition: transform 180ms cubic-bezier(0.16,1,0.3,1), box-shadow 180ms ease, background 180ms ease; }
body.admin-view-tasks #assignTaskFloatBtn { display: inline-flex; }
#assignTaskFloatBtn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.72); box-shadow: 0 8px 24px rgba(0,0,0,0.16), 0 18px 44px rgba(0,0,0,0.20); }
#assignTaskFloatBtn:active { transform: translateY(0); }
#assignTaskFloatBtn svg { flex-shrink: 0; }
#atTaskFab.expanded { width: 360px; height: 580px; }
.atf-body { flex: 1; overflow-y: auto; padding: 10px 14px 6px; display: flex; flex-direction: column; gap: 8px; min-height: 0; scrollbar-width: none; }
.atf-body::-webkit-scrollbar { display: none; }
/* Force dark theme on all form elements — solid background beats alpha-compositing bugs on mobile WebKit */
.atf-input { -webkit-appearance: none; appearance: none; padding: 9px 11px; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 10px; background-color: #1e1e1e !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 12px; font-family: inherit; outline: none; box-sizing: border-box; width: 100%; transition: border-color 180ms ease, background-color 180ms ease; }
.atf-input::placeholder { color: rgba(255,255,255,0.45) !important; -webkit-text-fill-color: rgba(255,255,255,0.45) !important; opacity: 1 !important; }
.atf-input:focus { border-color: rgba(255,255,255,0.38) !important; background-color: #262626 !important; }
.atf-input option { background-color: #1a1a1a !important; color: #fff !important; }
/* Select: custom chevron */
select.atf-input { background-color: #1e1e1e !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='1.8'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 9px center !important; background-size: 15px !important; padding-right: 28px; cursor: pointer; }
select.atf-input:focus { background-color: #262626 !important; }
input[type="file"].atf-input::file-selector-button, input[type="file"].atf-input::-webkit-file-upload-button { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 4px 10px; font-size: 11px; font-family: inherit; cursor: pointer; margin-right: 8px; }
input[type="file"].atf-input::file-selector-button:hover, input[type="file"].atf-input::-webkit-file-upload-button:hover { background: rgba(255,255,255,0.2); }
/* Search: magnifier icon layered on solid dark background */
#atfStudentSearch { padding-left: 32px; background-color: #1e1e1e !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='m14 14 4 4'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 11px center !important; background-size: 14px !important; }
#atfStudentSearch:focus { background-color: #262626 !important; }
.atf-textarea { resize: none; min-height: 56px; line-height: 1.45; }
.atf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* Apple-style segmented control — solid colours so mobile WebKit can't invert them */
.atf-seg { display: flex; background: #2a2a2a; border-radius: 9px; padding: 3px; gap: 2px; flex-shrink: 0; }
.atf-seg button { flex: 1; padding: 6px 4px; background: transparent; color: rgba(255,255,255,0.38); border: none; font-family: inherit; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; border-radius: 7px; transition: background 220ms cubic-bezier(0.16,1,0.3,1), color 200ms ease, box-shadow 200ms ease; }
.atf-seg button.active { background: #515151; color: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,0.55); }
/* Student list — no fixed height, scrolls with the body */
.atf-list { overflow-y: visible; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 4px; }
/* Student / group rows — mirror .cfp-student style */
.atf-student { padding: 8px 8px; border-radius: 8px; cursor: pointer; transition: background 150ms ease; display: flex; align-items: center; gap: 10px; }
.atf-student:hover { background: rgba(255,255,255,0.06); }
.atf-student input[type=checkbox] { accent-color: #fff; flex-shrink: 0; }
.atf-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#3a3a3a,#1a1a1a); color: #fff !important; -webkit-text-fill-color: #fff !important; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.1); }
.atf-sinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atf-sname { font-weight: 600; font-size: 13px; color: #f5f5f5 !important; -webkit-text-fill-color: #f5f5f5 !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atf-suser { font-size: 11px; color: rgba(255,255,255,0.45) !important; -webkit-text-fill-color: rgba(255,255,255,0.45) !important; }
.atf-empty { padding: 18px; text-align: center; color: rgba(255,255,255,0.35); font-size: 12px; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
body.admin-view-tasks #atTaskFab { display: flex; }
body.admin-view-tasks #assignTaskFloatBtn { display: none !important; }
#atTaskFab { right: 8px; bottom: 8px; }
#atTaskFab:hover:not(.expanded) { width: calc(100vw - 16px); }
#atTaskFab.expanded { width: calc(100vw - 16px); height: 580px; }
.assign-task-header-btn { display: none !important; }
body.admin-view-tasks .admin-main { padding: 0 10px !important; }
}
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) { .admin-overlay-trigger { display: inline-flex; } }
#adminMenuOverlay .usermenu-overlay-nav { margin: 0; padding: 80px clamp(28px,6vw,72px) 60px; overflow-y: auto; flex: 1; align-self: stretch; scrollbar-width: none; justify-content: flex-start; }
#adminMenuOverlay .usermenu-overlay-nav::-webkit-scrollbar { display: none; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) { #adminMenuOverlay .usermenu-overlay-nav { padding: 72px 24px 52px; } }
/* Student overlay: same scrollable treatment as admin — otherwise the centered
(margin:auto 0) nav clips its items with no way to scroll on short screens. */
#userMenuOverlay .usermenu-overlay-nav { margin: 0; padding: 80px clamp(28px,6vw,72px) 60px; overflow-y: auto; flex: 1; align-self: stretch; scrollbar-width: none; justify-content: flex-start; }
#userMenuOverlay .usermenu-overlay-nav::-webkit-scrollbar { display: none; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) { #userMenuOverlay .usermenu-overlay-nav { padding: 72px 24px 52px; } }
#userBar button { padding: 8px 18px; font-size: 0.75rem; background: #000; border-radius: 8px; transition: background 150ms ease; cursor: pointer; outline: none; -webkit-appearance: none; user-select: none; }
#userBar button:hover { background: #333; }
#userBar button:focus, #userBar button:focus-visible { outline: none; box-shadow: none; }
#userBar .btn-history { background: #000; }
#userBar .btn-history:hover { background: #333; }
#userBar .notif-bell { background: transparent !important; border: none !important; color: #1f2937 !important; }
#userBar .btn-slide-fill { background: transparent; color: #000; border: 2px solid #000; overflow: hidden; position: relative; transition: color 0.32s ease; }
#userBar .btn-slide-fill span { position: relative; z-index: 2; }
#userBar .btn-slide-fill::after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; transition: width 0.32s ease; z-index: 1; }
#userBar .btn-slide-fill:hover { background: transparent; color: #fff; }
#userBar .btn-slide-fill:hover::after { width: 100%; }
#userBar .btn-slide-red { border-color: #e0192d; color: #e0192d; }
#userBar .btn-slide-red::after { background: #e0192d; }
#userBar .btn-slide-green { border-color: #1a6b3c; color: #1a6b3c; }
#userBar .btn-slide-green::after { background: #1a6b3c; }
#userBar .notif-bell:hover { background: rgba(0,0,0,0.06) !important; }
/* Auth Screen */
#authScreen { text-align: center; padding: 20px 0; }
.auth-tabs { display: flex; margin-bottom: 32px; border-bottom: 2px solid #000; max-width: 400px; margin-left: auto; margin-right: auto; }
.auth-tab { flex: 1; padding: 14px; background: none; border: none; border-radius: 0; font-size: 0.875rem; color: #888; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color 0.1s; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.5px; }
.auth-tab:hover { background: #f5f5f5; color: #000; }
.auth-tab.active { color: #000; border-bottom-color: #000; font-weight: 700; background: none; }
.auth-form { max-width: 400px; margin: 0 auto; }
.auth-form input { display: block; width: 100%; padding: 14px 16px; font-size: 14px; border: 2px solid #000; border-radius: 0; margin-bottom: 14px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.auth-form input:focus { border-color: #000; outline: none; }
.auth-form button { width: 100%; margin-top: 8px; }
.auth-error { color: #e74c3c; font-size: 13px; margin-top: 12px; min-height: 20px; }
/* Login page — brochure gradient blobs */
.login-blob { display: none; position: fixed; border-radius: 50%; pointer-events: none; }
body.auth-mode .login-blob { display: block; }
.login-blob--tr { width: 520px; height: 520px; top: -120px; right: -130px; background: radial-gradient(circle at 38% 38%, #b8c8ef 0%, #cdd9f5 38%, #dde6fb 62%, transparent 78%); opacity: 0.72; }
.login-blob--bl { width: 440px; height: 440px; bottom: -210px; left: -190px; background: radial-gradient(circle at 60% 60%, #b8c8ef 0%, #cdd9f5 38%, #dde6fb 62%, transparent 78%); opacity: 0.65; }
.login-blob--tl { width: 780px; height: 780px; top: -180px; left: -220px; background: radial-gradient(circle at 45% 40%, #a0b8e8 0%, #bccff5 32%, #d4e1fb 58%, transparent 76%); opacity: 0.68; }
/* Login page — brochure subtext */
.auth-subtext { max-width: 400px; margin: 0 auto 28px; text-align: center; position: relative; z-index: 1; }
.auth-tagline { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; color: #556; margin: 0; font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; }
/* Secondary button */
.btn-secondary { background: #fff; color: #000; border: 2px solid #000 !important; }
.btn-secondary:hover { background: #f5f5f5; color: #000; }
/* History Screen */
.history-header { display: block; text-align: center; margin-bottom: 24px; }
.history-header h2 { color: #000; font-size: 42px; font-weight: 200; text-transform: uppercase; letter-spacing: 2px; margin: 0; }
.history-nav-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.history-header button { padding: 10px 22px; font-size: 13px; }
.history-stats { display: flex; gap: 16px; margin-bottom: 24px; }
.stat-card { flex: 1; background: #fff; border-radius: 0; padding: 20px; text-align: center; border: 2px solid #000; }
.stat-card .stat-value { font-size: 28px; font-weight: 700; color: #000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.stat-card .stat-label { font-size: 11px; color: #666; margin-top: 6px; text-transform: uppercase; letter-spacing: 1px; }
.history-table { width: 100%; border-collapse: collapse; font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.history-table th { background: #f5f5f5; padding: 8px 6px; text-align: left; color: #000; font-weight: 700; border-bottom: 2px solid #000; white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.history-table td { padding: 8px 6px; border-bottom: 1px solid #e0e0e0; vertical-align: top; color: #1a1a1a; }
.history-table tr.attempt-row { cursor: pointer; }
.history-table tr.attempt-row:hover td { background: #f5f5f5; }
.history-table tr.detail-row td { background: #fafafa; padding: 0; }
.attempt-detail { padding: 12px; }
.attempt-detail .detail-answer { padding: 8px 10px; font-size: 13px; border-bottom: 1px solid #e0e0e0; display: flex; gap: 10px; align-items: flex-start; }
.attempt-detail .detail-answer:last-child { border-bottom: none; }
.detail-answer .q-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; margin-top: 1px; }
.detail-answer.da-row-correct .q-num { background: #4CAF50; }
.detail-answer.da-row-wrong .q-num { background: #e74c3c; }
.detail-answer.da-row-skipped .q-num { background: #f39c12; }
.detail-answer .q-body { flex: 1; }
.da-correct { color: #4CAF50; }
.da-wrong { color: #e74c3c; }
.print-attempt-btn { padding: 4px 12px; background: #8e44ad; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 12px; margin-left: 6px; }
.print-attempt-btn:hover { background: #7d3c98; }
.print-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.print-bar select { padding: 5px 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 13px; }
@media print {
.nav-bar, .user-bar, .history-stats, .print-bar, .print-attempt-btn, .expand-icon, button, input, select, .stat-card { display: none !important; }
.detail-row { display: table-row !important; }
.detail-row.hidden { display: table-row !important; }
.detail-row.print-hide { display: none !important; }
.attempt-row.print-hide { display: none !important; }
tr[style*="background:#fffbf0"].print-hide { display: none !important; }
.detail-answer .q-num { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { padding: 5px; }
/* Student report print mode */
body.printing-report .container { display: none !important; }
body.printing-report #reportPrintArea { display: block !important; position: static !important; overflow: visible !important; z-index: auto !important; }
#reportPrintArea .no-print { display: none !important; }
}
#reportPrintArea { display: none; }
.expand-icon { float: right; color: #aaa; }
.history-empty { text-align: center; color: #888; padding: 30px; }
/* Fullscreen mode (quiz reading width — must NOT touch the admin dashboard,
which reuses .container as .admin-expanded; otherwise the fixed sidebar
detaches into the gutter and the layout collapses when fullscreen is entered) */
:fullscreen .container:not(.admin-expanded), :-webkit-full-screen .container:not(.admin-expanded) {
max-width: 900px;
padding: 48px 56px;
min-height: 100vh;
border: none;
}
:fullscreen body, :-webkit-full-screen body {
padding: 0;
align-items: stretch;
}
/* Large screens */
@media (min-width: 1200px) {
.container { max-width: 920px; padding: 48px 60px; }
}
/* Admin Panel — Bloomberg-inspired clean dashboard */
body.admin-mode { background: #f5f5f7; padding: 0; }
body.admin-mode #userBar { background: transparent; margin: 10px 10px 4px 260px; border: none; border-radius: 0; box-shadow: none; padding: 6px 12px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif; justify-content: flex-end; }
/* Admin header stripped to Apple-style glass controls: hide name; only bell+notify pill, (mobile) menu, logout icon remain */
body.admin-mode #userBar .user-info { display: none; }
body.admin-mode #userBar .user-actions { gap: 10px; }
/* Glass pill grouping the notification bell + Notify button */
#userBar .glass-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,0.55); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 6px 18px rgba(0,0,0,0.08); }
#userBar .glass-pill .notif-bell { width: 36px; height: 36px; margin: 0; border-radius: 50%; }
/* Vertical divider between the bell and the Notify button */
#userBar .glass-pill-div { width: 1px; height: 20px; flex-shrink: 0; background: rgba(0,0,0,0.12); border-radius: 1px; }
#userBar .glass-pill-notify { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: none; background: transparent; color: #1d1d1f; font-size: 13px; font-weight: 500; border-radius: 999px; cursor: pointer; font-family: inherit; transition: background 150ms ease; }
#userBar .glass-pill-notify:hover { background: rgba(0,0,0,0.06); border-radius: 999px; }
#userBar .glass-pill-notify:active { background: rgba(0,0,0,0.10); }
/* Glass icon-only logout button */
#userBar .glass-icon-btn { width: 40px; height: 40px; min-width: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; background: rgba(255,255,255,0.55); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 6px 18px rgba(0,0,0,0.08); color: #d70015; cursor: pointer; font-family: inherit; transition: background 150ms ease, transform 150ms ease; }
#userBar .glass-icon-btn:hover { background: rgba(215,0,21,0.10); transform: translateY(-1px); }
#userBar .glass-icon-btn:active { transform: translateY(0); background: rgba(215,0,21,0.16); }
/* ── Custom glass time picker ─────────────────────────────── */
.tp-trigger { display:inline-flex !important; align-items:center; gap:10px; width:100%; padding:10px 14px !important; border:1px solid #d2d2d7; border-radius:12px !important; background:#fff !important; font-family:inherit; font-size:15px; font-weight:500; color:#1d1d1f !important; text-transform:none !important; letter-spacing:normal !important; cursor:pointer; box-sizing:border-box; transition:border-color 150ms ease, box-shadow 150ms ease; }
.tp-trigger:hover { background:#fff !important; border-color:#b0b0b8; box-shadow:none; transform:none !important; }
.tp-trigger.tp-open { border-color:#0a84ff; box-shadow:0 0 0 3px rgba(10,132,255,0.16); }
.tp-trigger svg { width:16px; height:16px; color:#8e8e93; flex-shrink:0; }
.tp-disp { font-variant-numeric:tabular-nums; letter-spacing:0.5px; font-weight:600; }
.tp-disp.tp-empty { color:#b0b0b8; font-weight:500; }
.tp-pop { position:fixed; z-index:10050; width:240px; padding:10px; border-radius:18px; background:rgba(255,255,255,0.72); -webkit-backdrop-filter:blur(28px) saturate(180%); backdrop-filter:blur(28px) saturate(180%); border:1px solid rgba(255,255,255,0.7); box-shadow:0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10); opacity:0; transform:translateY(-6px) scale(0.98); transition:opacity 160ms ease, transform 160ms cubic-bezier(0.16,1,0.3,1); pointer-events:none; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Segoe UI',Roboto,sans-serif; }
.tp-pop.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.tp-cols { display:flex; gap:6px; height:176px; }
.tp-col { flex:1; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; border-radius:12px; background:rgba(120,120,128,0.10); padding:4px; }
.tp-col::-webkit-scrollbar { width:0; display:none; }
.tp-opt { padding:9px 0; text-align:center; font-size:15px; font-weight:600; color:#3a3a3c; cursor:pointer; border-radius:9px; margin:2px 2px; scroll-margin:60px 0; font-variant-numeric:tabular-nums; transition:background 120ms ease, color 120ms ease; }
.tp-opt:hover { background:rgba(0,0,0,0.05); }
.tp-opt.sel { background:#0a84ff; color:#fff; box-shadow:0 2px 8px rgba(10,132,255,0.35); }
.tp-foot { display:flex; gap:8px; margin-top:10px; }
.tp-foot button { flex:1; padding:9px 0 !important; border-radius:11px !important; font-family:inherit; font-size:12px; font-weight:700; text-transform:none !important; letter-spacing:normal !important; cursor:pointer; border:1px solid transparent; box-shadow:none !important; transition:background 150ms ease; }
.tp-foot button:hover { transform:none !important; }
.tp-now { background:rgba(120,120,128,0.16); color:#1d1d1f; }
.tp-now:hover { background:rgba(120,120,128,0.26); }
.tp-done { background:rgba(10,132,255,0.92); color:#fff; }
.tp-done:hover { background:#0a84ff; }
/* ── Custom glass date picker (admin only) ────────────────── */
.dp-pop { position:fixed; z-index:10050; width:260px; padding:12px; border-radius:18px; background:rgba(255,255,255,0.72); -webkit-backdrop-filter:blur(28px) saturate(180%); backdrop-filter:blur(28px) saturate(180%); border:1px solid rgba(255,255,255,0.7); box-shadow:0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10); opacity:0; transform:translateY(-6px) scale(0.98); transition:opacity 160ms ease, transform 160ms cubic-bezier(0.16,1,0.3,1); pointer-events:none; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Segoe UI',Roboto,sans-serif; }
.dp-pop.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.dp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dp-title { font-size:14px; font-weight:700; color:#1d1d1f; }
.dp-nav { display:inline-flex !important; align-items:center; justify-content:center; width:30px !important; height:30px !important; min-width:0 !important; padding:0 !important; border:none !important; border-radius:50% !important; background:rgba(120,120,128,0.14) !important; color:#1d1d1f !important; font-size:18px; line-height:1; text-transform:none !important; letter-spacing:normal !important; cursor:pointer; flex-shrink:0; transition:background 150ms ease; box-shadow:none !important; }
.dp-nav:hover { background:rgba(120,120,128,0.24) !important; transform:none !important; }
.dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.dp-dow { text-align:center; font-size:10px; font-weight:700; color:#8e8e93; text-transform:uppercase; padding:4px 0; }
.dp-day { text-align:center; font-size:13px; font-weight:600; color:#1d1d1f; padding:7px 0; border-radius:9px; cursor:pointer; transition:background 120ms ease, color 120ms ease; }
.dp-day:hover { background:rgba(0,0,0,0.06); }
.dp-day.today { color:#0a84ff; }
.dp-day.sel { background:#0a84ff; color:#fff; box-shadow:0 2px 8px rgba(10,132,255,0.35); }
/* ── Glass dialog buttons ─────────────────────────────────── */
.gbtn { border-radius:12px; font-family:inherit; font-weight:700; cursor:pointer; border:1px solid transparent; -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%); box-shadow:0 1px 3px rgba(0,0,0,0.08), 0 6px 18px rgba(0,0,0,0.10); transition:transform 150ms ease, background 150ms ease, box-shadow 150ms ease; }
.gbtn:hover { transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,0.10), 0 10px 26px rgba(0,0,0,0.14); }
.gbtn:active { transform:translateY(0); }
.gbtn-secondary { background:rgba(255,255,255,0.55); border-color:rgba(0,0,0,0.10); color:#3a3a3c; }
.gbtn-secondary:hover { background:rgba(255,255,255,0.72); }
.gbtn-green { background:rgba(26,107,60,0.88); border-color:rgba(255,255,255,0.22); color:#fff; }
.gbtn-green:hover { background:rgba(26,107,60,0.96); }
.gbtn-dark { background:rgba(28,28,30,0.85); border-color:rgba(255,255,255,0.18); color:#fff; }
.gbtn-dark:hover { background:rgba(28,28,30,0.95); }
body.admin-mode #title { margin-left: 260px; margin-right: 10px; padding: 0 20px; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
body.admin-mode #userBar { margin: 4px 4px 20px; box-sizing: border-box; }
body.admin-mode #title { margin-left: 10px; margin-right: 10px; padding: 0; }
}
.container.admin-expanded { background: #f5f5f7; color: #1a1a1a; border-radius: 0; box-shadow: none; max-width: 100%; padding: 0; min-height: 100vh; border: none; }
.container.admin-expanded h1, .container.admin-expanded h2,
.container.admin-expanded h3, .container.admin-expanded h4 { color: #000; }
.container.admin-expanded strong { color: #000; }
.container.admin-expanded label { color: #333; }
.container.admin-expanded p { color: #444; }
.container.admin-expanded a { color: #0066cc; }
.admin-layout { display: flex; gap: 0; min-height: 100vh; position: relative; width: 100%; align-items: stretch; }
.admin-hamburger { display: none; width: 40px; height: 40px; min-width: 0; padding: 0; margin: 10px 0 6px; background: #fff; color: #1f2937; border: 1px solid rgba(0,0,0,0.08); border-radius: 50%; font-size: 0; cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: background 150ms ease; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif; }
.admin-hamburger svg { width: 20px; height: 20px; stroke-width: 2; color: #1f2937; }
.admin-hamburger:hover { background: #f3f4f6; }
.admin-sidebar-close { display: none; position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; min-width: 0; padding: 0; background: transparent; border: 1px solid rgba(0,0,0,0.12); border-radius: 50%; color: #1f2937; align-items: center; justify-content: center; cursor: pointer; font-size: 0; z-index: 2; transition: background 180ms ease, border-color 180ms ease; }
.admin-sidebar-close svg { width: 18px; height: 18px; stroke-width: 1.75; transition: transform 300ms cubic-bezier(0.16,1,0.3,1); }
.admin-sidebar-close:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.22); }
.admin-sidebar-close:hover svg { transform: rotate(90deg); }
.admin-sidebar { width: 240px; flex-shrink: 0; background: rgba(255,255,255,0.55); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255,255,255,0.7); border-radius: 16px; padding: 0; position: fixed; top: 10px; left: 10px; height: calc(100vh - 20px); overflow: hidden; z-index: 50; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 16px 48px rgba(0,0,0,0.10); display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif; }
.admin-sidebar-brand { padding: 18px 16px 16px; font-size: 17px; font-weight: 600; color: #1f2937; letter-spacing: 0.1px; text-transform: none; font-family: inherit; display: flex; align-items: center; gap: 11px; flex-shrink: 0; order: 1; }
.admin-sidebar-brand::before { content: ''; width: 30px; height: 30px; border-radius: 9px; background: #fff url('/logo-mark.png') center/78% no-repeat; box-shadow: 0 1px 4px rgba(15,23,42,0.14); flex-shrink: 0; }
/* Apple System-Settings-style pill search: rounded field, magnifying-glass icon,
auto-focused whenever the admin/mentor sidebar opens (see focusAdminSidebarSearch). */
.admin-sidebar-search { order: 1; flex-shrink: 0; padding: 4px 12px 12px; border-bottom: 1px solid #f3f4f6; }
.admin-sidebar-search-field { display: flex; align-items: center; gap: 6px; background: rgba(120,120,128,0.12); border-radius: 999px; padding: 6px 10px; transition: background 150ms ease, box-shadow 150ms ease; }
.admin-sidebar-search-field:focus-within { background: rgba(120,120,128,0.16); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.admin-sidebar-search-icon { width: 14px; height: 14px; color: #8e8e93; flex-shrink: 0; }
/* #id-qualified: .container.admin-expanded input[type="text"] (a global reset for
ordinary form fields elsewhere in the admin panel) outweighs a bare class here and
was stamping this pill with a square white box + grey border — id specificity wins. */
#adminSidebarSearch.admin-sidebar-search-input,
#adminSidebarSearch.admin-sidebar-search-input:focus { flex: 1; min-width: 0; border: none; border-radius: 0; background: transparent; outline: none; box-shadow: none; font-size: 13px; font-family: inherit; color: #1f2937; padding: 0; }
.admin-sidebar-search-input::placeholder { color: #9ca3af; }
.admin-sidebar-search-clear { display: none; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: none; background: #c7c7cc; color: #fff; cursor: pointer; flex-shrink: 0; padding: 0; }
.admin-sidebar-search-clear svg { width: 10px; height: 10px; }
.admin-sidebar-search-clear:hover { background: #a1a1a6; }
.admin-sidebar-search-field.has-text .admin-sidebar-search-clear { display: inline-flex; }
.admin-sidebar-nav { padding: 8px 8px 12px; flex: 1; min-height: 0; order: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.admin-sidebar-nav::-webkit-scrollbar { display: none; }
.admin-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: #4b5563; font-size: 13px; cursor: pointer; transition: background 150ms ease, color 150ms ease; border-radius: 10px; margin: 1px 0; user-select: none; font-family: inherit; font-weight: 450; }
.admin-nav-item svg { width: 16px; height: 16px; stroke-width: 1.75; flex-shrink: 0; opacity: 0.7; }
.admin-nav-item:hover { background: #f3f4f6; color: #1f2937; }
.admin-nav-item:hover svg { opacity: 1; }
.admin-nav-item.active { font-weight: 500; }
.admin-nav-item.active svg { opacity: 1; }
/* Per-item accent colors — Apple-style soft tinted active pill */
#anav-overview { color: #1565c0; } #anav-overview.active { color: #1565c0; background: #e3f2fd; }
#anav-daily { color: #e65100; } #anav-daily.active { color: #e65100; background: #fff3e0; }
#anav-active { color: #2e7d32; } #anav-active.active { color: #2e7d32; background: #e8f5e9; }
#anav-users { color: #5e35b1; } #anav-users.active { color: #5e35b1; background: #ede7f6; }
#anav-groups { color: #00838f; } #anav-groups.active { color: #00838f; background: #e0f7fa; }
#anav-tasks { color: #c62828; } #anav-tasks.active { color: #c62828; background: #ffebee; }
#anav-attendance { color: #1b5e20; } #anav-attendance.active { color: #1b5e20; background: #e8f5e9; }
#anav-leaderboard { color: #f9a825; } #anav-leaderboard.active { color: #b17900; background: #fffde7; }
#anav-doubts { color: #d84315; } #anav-doubts.active { color: #d84315; background: #fbe9e7; }
#anav-resources { color: #00695c; } #anav-resources.active { color: #00695c; background: #e0f2f1; }
#anav-guides { color: #6a1b9a; } #anav-guides.active { color: #6a1b9a; background: #f3e8fd; }
#anav-tokens { color: #ca8a04; } #anav-tokens.active { color: #ca8a04; background: #fef3c7; }
#anav-reports { color: #4527a0; } #anav-reports.active { color: #4527a0; background: #ede7f6; }
#anav-settings { color: #37474f; } #anav-settings.active { color: #37474f; background: #eceff1; }
#anav-questions { color: #1565c0; } #anav-questions.active { color: #1565c0; background: #e3f2fd; }
#anav-quizlibrary { color: #6a1b9a; } #anav-quizlibrary.active { color: #6a1b9a; background: #f3e8fd; }
#anav-warnings { color: #e65100; } #anav-warnings.active { color: #e65100; background: #fff3e0; }
#anav-grader { color: #7c3aed; } #anav-grader.active { color: #7c3aed; background: #f3e8ff; }
#anav-session { color: #455a64; } #anav-session.active { color: #455a64; background: #eceff1; }
#anav-sentry { color: #b91c1c; } #anav-sentry.active { color: #b91c1c; background: #fef2f2; }
.anav-badge { margin-left:auto; background:#dc2626; color:#fff; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px; line-height:1.3; min-width:18px; text-align:center; box-shadow:0 1px 3px rgba(220,38,38,0.35); }
/* ── Grader view: one-session-at-a-time carousel + pending accordion ──
NOTE: buttons here are scoped under #adminContent + !important so they
outrank the global `.container.admin-expanded button { background:#000 }`
and the bare `button { padding:14px 36px; text-transform:uppercase }`. */
.gr-section-label { font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#6b7280; }
.gr-counter { font-size:12px; font-weight:700; color:#7c3aed; }
#adminContent .gr-toggle { display:inline-flex !important; align-items:center; gap:7px; font-family:inherit; font-size:12px !important; font-weight:700 !important; padding:6px 13px !important; border-radius:999px !important; border:1px solid #e5e5ea !important; background:#fff !important; color:#6b7280 !important; cursor:pointer; text-transform:none !important; letter-spacing:normal !important; transition:background .15s, border-color .15s, color .15s; }
#adminContent .gr-toggle:hover { border-color:#e9d5ff !important; color:#7c3aed !important; }
#adminContent .gr-toggle.active { background:#7c3aed !important; border-color:#7c3aed !important; color:#fff !important; }
.gr-toggle-dot { width:8px; height:8px; border-radius:50%; background:#c7c7cc; transition:background .15s; flex:0 0 auto; }
.gr-toggle.active .gr-toggle-dot { background:#fff; }
.gr-card.gr-muted { opacity:.5; }
.gr-dots.muted { opacity:.55; }
.gr-carousel { display:flex; align-items:stretch; gap:10px; }
#adminContent .gr-arrow { flex:0 0 auto; width:34px !important; height:34px; align-self:center; border:1px solid #e5e5ea !important; background:#fff !important; color:#6b7280 !important; border-radius:50% !important; padding:0 !important; font-size:16px !important; font-weight:700 !important; line-height:1; text-transform:none !important; letter-spacing:normal !important; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s, border-color .15s; }
#adminContent .gr-arrow:hover:not(:disabled) { background:#f3e8ff !important; color:#7c3aed !important; border-color:#e9d5ff !important; }
#adminContent .gr-arrow:disabled { opacity:.3; cursor:default; }
.gr-card { flex:1 1 auto; min-width:0; border:1px solid #e5e5ea; border-radius:14px; padding:14px 18px; background:linear-gradient(180deg,#fafafa,#ffffff); display:flex; flex-direction:column; gap:9px; }
.gr-card-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gr-dot2 { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.gr-op { font-weight:800; color:#1d1d1f; font-size:15px; }
.gr-run-id { font-size:12px; color:#86868b; font-weight:600; }
.gr-src { font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#6b7280; background:#f3f4f6; padding:2px 8px; border-radius:999px; }
.gr-status { font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:2px 9px; border-radius:999px; margin-left:auto; }
.gr-status-completed { color:#16a34a; background:#dcfce7; }
.gr-status-running { color:#d97706; background:#fef3c7; }
.gr-status-failed { color:#dc2626; background:#fee2e2; }
.gr-status-stalled { color:#6b7280; background:#f3f4f6; }
.gr-card-time { font-size:12px; color:#6b7280; }
.gr-card-sub { font-size:12px; color:#86868b; }
.gr-counts { display:flex; gap:8px; flex-wrap:wrap; }
.gr-count { font-size:13px; font-weight:700; padding:4px 12px; border-radius:10px; }
.gr-count.approve { color:#166534; background:#dcfce7; }
.gr-count.reject { color:#991b1b; background:#fee2e2; }
.gr-count.warn { color:#92400e; background:#fef3c7; }
.gr-card-foot { font-size:11px; color:#9ca3af; }
#adminContent .gr-revert { align-self:flex-start; font-size:11px !important; font-weight:700 !important; padding:4px 12px !important; border:1px solid #fecaca !important; color:#dc2626 !important; background:#fff !important; border-radius:999px !important; cursor:pointer; font-family:inherit; text-transform:none !important; letter-spacing:normal !important; }
#adminContent .gr-revert:hover { background:#fef2f2 !important; }
.gr-dots { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; padding:2px 0; }
#adminContent .gr-dot { width:7px !important; height:7px; border-radius:50% !important; background:#d4d4d8 !important; border:none !important; padding:0 !important; cursor:pointer; transition:transform .15s, background .15s; }
#adminContent .gr-dot.active { background:#7c3aed !important; transform:scale(1.45); }
#adminContent .gr-dot:hover { background:#a78bfa !important; }
.gr-accordion { border:1px solid #e5e5ea; border-radius:14px; background:#fff; overflow:hidden; flex:0 0 auto; }
#adminContent .gr-acc-head { width:100%; display:flex !important; align-items:center; gap:10px; padding:12px 16px !important; background:#fff !important; color:#1d1d1f !important; border:none !important; border-radius:0 !important; cursor:pointer; font-family:inherit; text-align:left; text-transform:none !important; letter-spacing:normal !important; }
#adminContent .gr-acc-head:hover { background:#fafafa !important; }
.gr-acc-chevron { font-size:11px; color:#9ca3af; transition:transform .18s ease; flex:0 0 auto; }
.gr-acc-chevron.open { transform:rotate(90deg); }
.gr-acc-title { font-size:12px; font-weight:800; letter-spacing:.03em; color:#1d1d1f; text-transform:uppercase; }
.gr-acc-count { font-size:12px; font-weight:800; padding:2px 10px; border-radius:999px; color:#7c3aed; background:#f3e8ff; }
.gr-acc-count.clear { color:#16a34a; background:#dcfce7; }
.gr-acc-hint { font-size:12px; color:#9ca3af; margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gr-acc-body { max-height:38vh; overflow:auto; border-top:1px solid #f0f0f3; overscroll-behavior:contain; }
.admin-nav-section { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #4b5563; user-select: none; cursor: pointer; border-radius: 10px; margin: 1px 0; transition: background 150ms ease, color 150ms ease; font-family: inherit; }
.admin-nav-section svg { width: 16px; height: 16px; stroke-width: 1.75; flex-shrink: 0; opacity: 0.7; }
.admin-nav-section:hover { background: #f3f4f6; color: #1f2937; }
.admin-nav-section:hover svg { opacity: 1; }
.admin-nav-section-toggle { margin-left: auto; font-size: 10px; color: #9ca3af; transition: transform 0.15s; }
.admin-nav-section-toggle.collapsed { transform: rotate(-90deg); }
.admin-nav-children { margin-left: 16px; overflow: hidden; transition: max-height 0.2s ease; }
.admin-nav-children.collapsed { max-height: 0 !important; }
/* Mobile submission card action buttons — force clean 2-per-row wrap inside card */
.sub-mob-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sub-mob-actions > * { flex: 1 1 calc(50% - 4px); min-width: 0; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-mob-card { overflow: hidden; }
.admin-nav-children .admin-nav-item { padding: 7px 12px; font-size: 12.5px; position: relative; }
.admin-nav-children .admin-nav-item::before { content: none; }
.admin-nav-children .admin-nav-item:hover { background: #f3f4f6; color: #1f2937; }
.active-badge { display: inline-block; background: #4CAF50; color: #fff; border-radius: 3px; padding: 1px 6px; font-size: 10px; margin-left: 6px; font-weight: 700; }
/* History search bar */
.history-search { position: relative; margin-bottom: 18px; }
.history-search input { width: 100%; padding: 11px 16px 11px 40px; font-size: 13px; border: 1.5px solid #e5e7eb; border-radius: 10px; background: #f9fafb; color: #1f2937; outline: none; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif; transition: border-color 180ms, background 180ms, box-shadow 180ms; box-sizing: border-box; }
.history-search input:focus { border-color: #007aff; background: #fff; box-shadow: 0 0 0 3px rgba(0,122,255,0.12); }
.history-search input::placeholder { color: #9ca3af; }
.history-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #9ca3af; pointer-events: none; }
.history-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; border: none; background: transparent; color: #9ca3af; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 14px; line-height: 1; padding: 0; font-family: inherit; }
.history-search-clear:hover { background: rgba(0,0,0,0.06); color: #1f2937; }
.history-search.has-query .history-search-clear { display: inline-flex; }
/* Stats insights */
.stats-insights { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif; }
.stats-insight { padding: 12px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; display: flex; align-items: center; gap: 11px; letter-spacing: -0.05px; }
.stats-insight .insight-emoji { font-size: 18px; flex-shrink: 0; }
.stats-insight b { font-weight: 600; }
.stats-insight.up { background: #e6f4ea; color: #137333; border-left: 3px solid #137333; }
.stats-insight.down { background: #fce8e6; color: #c5221f; border-left: 3px solid #c5221f; }
.stats-insight.flat { background: #fef3e2; color: #b06000; border-left: 3px solid #b06000; }
.stats-insight.info { background: #e8f0fe; color: #1a73e8; border-left: 3px solid #1a73e8; }
.stats-insight.streak { background: #fff3e0; color: #d84315; border-left: 3px solid #d84315; }
/* Sidebar / nav count badge — flex-centered so digits sit on the text's optical midline */
.nav-count-badge { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1; margin-left: 6px; font-variant-numeric: tabular-nums; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif; letter-spacing: 0; text-transform: none; box-sizing: border-box; color: #fff; background: #e74c3c; box-shadow: 0 1px 3px rgba(231,76,60,0.28); }
.nav-count-badge.warn { background: #f39c12; box-shadow: 0 1px 3px rgba(243,156,18,0.28); }
.admin-main { flex: 1; padding: 32px 40px; min-width: 0; margin-left: 260px; }
/* macOS glass segmented control (timetable Normal / Calendar switch) */
.tt-seg { display: inline-flex; position: relative; padding: 3px; gap: 2px; border-radius: 10px; background: rgba(118,118,128,0.12); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,0.5); box-shadow: inset 0 1px 1px rgba(255,255,255,0.4); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; }
.tt-seg-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 500; color: #4b5563; cursor: pointer; border-radius: 7px; transition: color 200ms ease; -webkit-appearance: none; }
.tt-seg-btn svg { width: 15px; height: 15px; stroke-width: 2; }
.tt-seg-btn:hover:not(.active) { color: #1f2937; }
.tt-seg-btn.active { color: #111; background: rgba(255,255,255,0.92); box-shadow: 0 1px 3px rgba(0,0,0,0.14), 0 0 0 0.5px rgba(0,0,0,0.04); }
/* Error Logs right-side drawer */
.sentry-panel-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; color: #374151; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.sentry-panel-btn:hover { background: #f3f4f6; border-color: #d1d5db; color: #111827; }
.sentry-panel-btn .material-symbols-outlined { font-size: 22px; line-height: 1; }
.sentry-right-panel { position: fixed; top: 80px; right: 10px; width: 380px; max-width: 92vw; height: calc(100vh - 100px); background: #fbfbfd; border: 1px solid #e5e5ea; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06), -8px 16px 48px rgba(0,0,0,0.08); z-index: 900; transform: translateX(calc(100% + 20px)); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.32, 1); display: flex; flex-direction: column; overflow: hidden; }
.sentry-right-panel.open { transform: translateX(0); }
body.sentry-panel-open .admin-main { margin-right: 400px; transition: margin-right 0.28s cubic-bezier(0.32, 0.72, 0.32, 1); }
.admin-main { transition: margin-right 0.28s cubic-bezier(0.32, 0.72, 0.32, 1); }
@media (max-width: 900px) { body.sentry-panel-open .admin-main { margin-right: 0; } .sentry-right-panel { width: 92vw; } }
.sentry-right-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #f1f5f9; }
.sentry-right-panel-header h4 { margin: 0; font-size: 14px; font-weight: 700; color: #111827; letter-spacing: 0.3px; }
.sentry-right-panel-close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: transparent; border: none; border-radius: 6px; cursor: pointer; color: #6b7280; }
.sentry-right-panel-close:hover { background: #f3f4f6; color: #111827; }
.sentry-right-panel-close .material-symbols-outlined { font-size: 20px; line-height: 1; }
.sentry-right-panel-body { flex: 1; overflow-y: auto; padding: 16px 18px; font-size: 13px; color: #374151; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
.admin-layout { flex-direction: column; }
.admin-sidebar {
display: flex;
width: calc(100vw - 8px); height: calc(100svh - 8px);
top: 4px; left: 4px; right: 4px; bottom: 4px;
margin: 0; border-radius: 16px; border: none; box-shadow: 0 8px 40px rgba(0,0,0,0.32);
z-index: 10500;
clip-path: inset(100% 0% 0% 0% round 16px);
-webkit-clip-path: inset(100% 0% 0% 0% round 16px);
transition: clip-path 0.65s cubic-bezier(0.76, 0, 0.24, 1), -webkit-clip-path 0.65s cubic-bezier(0.76, 0, 0.24, 1);
will-change: clip-path;
pointer-events: none;
overflow: hidden;
}
.admin-sidebar.open {
clip-path: inset(0% 0% 0% 0% round 16px);
-webkit-clip-path: inset(0% 0% 0% 0% round 16px);
pointer-events: auto;
}
.admin-sidebar-close { display: inline-flex; border-color: rgba(255,255,255,0.22); color: #fff; }
.admin-sidebar-close:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }
.admin-sidebar-brand { padding-right: 66px; }
.admin-main { padding: 16px; margin-left: 0; }
body.admin-menu-open { overflow: hidden; }
/* Mobile overlay: monochrome black-and-white theme (match student overlay) */
.admin-sidebar { background: #0a0a0a; color: #fff; }
.admin-sidebar-brand { color: rgba(255,255,255,0.85); font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; font-size: 12px; }
.admin-sidebar-brand::before { box-shadow: none; }
.admin-sidebar-search { border-bottom-color: rgba(255,255,255,0.08); }
.admin-sidebar-search-field { background: rgba(255,255,255,0.08); }
.admin-sidebar-search-field:focus-within { background: rgba(255,255,255,0.14); box-shadow: 0 0 0 3px rgba(255,255,255,0.18); }
.admin-sidebar-search-icon { color: rgba(255,255,255,0.5); }
#adminSidebarSearch.admin-sidebar-search-input,
#adminSidebarSearch.admin-sidebar-search-input:focus { color: #fff; }
.admin-sidebar-search-input::placeholder { color: rgba(255,255,255,0.4); }
.admin-sidebar-search-clear { background: rgba(255,255,255,0.3); }
.admin-sidebar-search-clear:hover { background: rgba(255,255,255,0.45); }
.admin-sidebar-nav { padding: 16px 10px 14px; }
.admin-nav-item,
.admin-sidebar [id^="anav-"] { color: rgba(255,255,255,0.55) !important; background: transparent !important; border-radius: 10px; }
.admin-nav-item:hover,
.admin-sidebar [id^="anav-"]:hover { color: #fff !important; background: rgba(255,255,255,0.06) !important; }
.admin-nav-item.active,
.admin-sidebar [id^="anav-"].active { color: #fff !important; background: rgba(255,255,255,0.12) !important; font-weight: 600; }
.admin-nav-item svg, .admin-nav-section svg { color: inherit; opacity: 0.85; }
.admin-nav-section { color: rgba(255,255,255,0.72); }
.admin-nav-section:hover { color: #fff; background: rgba(255,255,255,0.06); }
.admin-nav-section-toggle { color: rgba(255,255,255,0.5); }
.admin-nav-children .admin-nav-item::before { background: rgba(255,255,255,0.18); }
.admin-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); }
.admin-status { background: transparent; color: rgba(255,255,255,0.7); border-top-color: rgba(255,255,255,0.08); }
.admin-status:hover { background: rgba(255,255,255,0.04); }
.admin-status-detail { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.7); border-top-color: rgba(255,255,255,0.08); }
.active-badge { background: rgba(255,255,255,0.85); color: #0a0a0a; }
.nav-count-badge { background: #fff; color: #0a0a0a; box-shadow: none; }
.nav-count-badge.warn { background: #fff; color: #0a0a0a; box-shadow: none; }
}
/* ── Full-screen doubts view (dialog-style, Apple cuboid) ─────────────────────────── */
#doubtsBackdrop { display:none; position:fixed; inset:0; background:#000; z-index:199; }
#doubtsBackdrop.open { display:block; }
.doubts-fullscreen { display:none; position:fixed; top:4px; right:4px; bottom:4px; left:4px; z-index:200; background:#fff; border-radius:18px; overflow:hidden; border:none; box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 16px 48px rgba(0,0,0,0.18); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.doubts-fullscreen.open { display:flex; flex-direction:column; }
.doubts-fs-topbar { position:relative; height:52px; background:#fff; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; padding:0 18px; gap:14px; flex-shrink:0; border-radius:18px 18px 0 0; }
.doubts-fs-topbar .back-btn { background:#fff !important; border:1.5px solid #d1d5db; color:#374151 !important; border-radius:6px; padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; display:flex; align-items:center; gap:6px; position:relative; z-index:1; transition:border-color 150ms,background 150ms,color 150ms; -webkit-tap-highlight-color:transparent; }
.doubts-fs-topbar .back-btn:hover { background:#f3f4f6 !important; border-color:#9ca3af; color:#111 !important; }
.doubts-fs-topbar .back-btn:active { background:#e5e7eb !important; color:#111 !important; }
.doubts-fs-topbar h3 { margin:0; font-size:20px; font-weight:300; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; letter-spacing:0.3px; color:#000; }
#doubtPanel .doubts-fs-topbar h3, #doubtsFullscreen .doubts-fs-topbar h3 { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap; pointer-events:none; }
.doubts-fs-body { display:flex; flex:1; min-height:0; }
.doubts-fs-list { width:320px; flex-shrink:0; background:#fff; border-right:1px solid #e5e7eb; display:flex; flex-direction:column; overflow:hidden; }
.doubts-list-pane { flex-shrink:0; padding:4px 4px 0; display:flex; flex-direction:column; min-height:0; }
.doubts-list-pane.pane-resolved { flex:1; padding-top:0; padding-bottom:4px; }
.doubts-card { flex:1; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.08); display:flex; flex-direction:column; min-height:0; }
.doubts-card-header { flex-shrink:0; padding:10px 14px 9px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #f2f2f7; }
.doubts-card-header-label { font-size:12px; font-weight:300; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; text-transform:uppercase; letter-spacing:1px; color:#8e8e93; }
.doubts-card-header-count { font-size:11px; font-weight:600; color:#8e8e93; background:#f2f2f7; border-radius:20px; padding:1px 8px; }
.doubts-card-body { flex:1; overflow-y:auto; min-height:0; }
.doubts-list-empty { padding:18px 14px; font-size:12px; color:#aaa; text-align:center; }
.doubts-list-divider { height:12px; background:#f2f2f7; flex-shrink:0; cursor:row-resize; display:flex; align-items:center; justify-content:center; user-select:none; touch-action:none; }
.doubts-list-divider::before { content:''; width:40px; height:4px; border-radius:2px; background:rgba(0,0,0,0.18); transition:background 180ms ease,width 180ms ease; }
.doubts-list-divider:hover::before { background:rgba(0,0,0,0.32); width:56px; }
.doubts-list-divider.dragging::before { background:rgba(0,0,0,0.45); width:56px; }
.doubts-fs-list-item { padding:12px 14px; border-bottom:1px solid #f2f2f7; cursor:pointer; transition:background 0.1s; }
.doubts-fs-list-item:last-child { border-bottom:none; }
.doubts-fs-list-item:hover { background:#f9f9fb; }
.doubts-fs-list-item.active { background:#f0f4ff; border-left:3px solid #1c1c1e; }
.doubts-fs-list-item .dfl-subject { font-weight:600; font-size:13px; color:#1c1c1e; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doubts-fs-list-item .dfl-meta { font-size:11px; color:#8e8e93; }
.doubts-fs-list-item .dfl-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; margin-right:6px; }
.doubts-fs-list-item .dfl-badge.open { background:#fef2f2; color:#dc2626; }
.doubts-fs-list-item .dfl-badge.resolved { background:#f0fdf4; color:#16a34a; }
.doubts-fs-chat { flex:1; display:flex; flex-direction:column; min-width:0; background:#fff; }
.doubts-fs-chat-header { padding:16px 24px; background:#fff; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.doubts-fs-chat-header h4 { margin:0; font-size:20px; font-weight:300; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; letter-spacing:0.3px; color:#000; }
/* ── Structured Doubt Card (rendered inside chat bubble) ── */
.msg-bubble.msg-bubble--structured { padding:0 !important; background:transparent !important; white-space:normal !important; max-width:620px !important; }
.sdc-card {
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:14px;
padding:18px 20px 16px;
color:#1f2937;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.06);
overflow:hidden;
}
.msg-row.right .sdc-card { background:#0f172a; border-color:#1e293b; color:#e2e8f0; }
.msg-row.right .sdc-card { box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 6px 18px rgba(0,0,0,0.25); }
.msg-row.right .sdc-section-label { color:#94a3b8; }
.msg-row.right .sdc-section-body { color:#e2e8f0; }
.msg-row.right .sdc-checklist { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.07); }
.msg-row.right .sdc-line-pill { background:rgba(239,68,68,0.15); border-color:rgba(239,68,68,0.4); color:#fecaca; }
.msg-row.right .sdc-eyebrow { color:#94a3b8; }
.msg-row.right .sdc-tried-box, .msg-row.right .sdc-guess-box { background:rgba(99,102,241,0.08); border-color:rgba(99,102,241,0.18); }
.msg-row.right .sdc-grid > div { background:rgba(255,255,255,0.025); border-color:rgba(255,255,255,0.06); }
.sdc-eyebrow {
display:flex; align-items:center; gap:7px;
font-size:10.5px; font-weight:700; letter-spacing:1.2px;
text-transform:uppercase; color:#6366f1;
margin-bottom:14px;
}
.sdc-eyebrow .sdc-eyebrow-dot { width:6px; height:6px; border-radius:50%; background:#6366f1; }
.sdc-checklist {
display:flex; flex-direction:column; gap:6px;
background:#f9fafb;
border:1px solid #f1f5f9;
border-radius:10px;
padding:10px 12px;
margin-bottom:14px;
}
.sdc-check-row { display:flex; align-items:center; gap:9px; font-size:13px; line-height:1.45; }
.sdc-check-icon {
flex:0 0 18px; width:18px; height:18px; border-radius:5px;
display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:800; color:#fff;
background:#22c55e;
}
.sdc-check-icon.unchecked { background:#e5e7eb; color:#94a3b8; }
.sdc-section { margin-top:12px; }
.sdc-section:first-of-type { margin-top:0; }
.sdc-section-label {
font-size:10.5px; font-weight:700; letter-spacing:1.1px;
text-transform:uppercase; color:#64748b;
margin-bottom:5px;
}
.sdc-section-body {
font-size:13.5px; line-height:1.55; color:#1f2937;
white-space:pre-wrap; word-break:break-word;
}
.sdc-tried-box, .sdc-guess-box {
background:#eef2ff;
border:1px solid #e0e7ff;
border-radius:10px;
padding:10px 12px;
}
.sdc-line-pill {
display:inline-flex; align-items:center; gap:7px;
margin-top:12px;
padding:6px 12px 6px 10px;
background:#fef2f2;
border:1px solid #fecaca;
color:#b91c1c;
border-radius:999px;
font-size:12.5px; font-weight:700;
}
.sdc-line-pill::before {
content:''; width:7px; height:7px; border-radius:50%; background:#ef4444;
box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
}
.sdc-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:12px;
}
.sdc-grid > div {
background:#f8fafc;
border:1px solid #f1f5f9;
border-radius:10px;
padding:10px 12px;
}
.sdc-attachments {
display:flex; flex-wrap:wrap; gap:8px;
margin-top:14px;
padding-top:12px;
border-top:1px dashed #e5e7eb;
}
.msg-row.right .sdc-attachments { border-top-color:rgba(255,255,255,0.1); }
.sdc-att {
width:84px; height:84px;
border-radius:10px; overflow:hidden;
border:1px solid #e5e7eb;
background:#f3f4f6;
transition:transform 0.15s, box-shadow 0.15s;
display:block;
}
.sdc-att:hover { transform:translateY(-2px); box-shadow:0 6px 14px rgba(15,23,42,0.18); }
.sdc-att img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width: 640px) {
.sdc-grid { grid-template-columns:1fr; }
.msg-bubble.msg-bubble--structured { max-width:100% !important; }
}
.doubts-fs-chat-msgs { flex:1; overflow-y:auto; padding:24px; display:flex; flex-direction:column; gap:4px; }
.msg-row { display:flex; flex-direction:column; max-width:70%; }
.msg-row.left { align-self:flex-start; align-items:flex-start; }
.msg-row.right { align-self:flex-end; align-items:flex-end; }
.msg-row .msg-bubble { padding:10px 14px; font-size:14px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.msg-row.left .msg-bubble { background:#f3f4f6; border-radius:14px; color:#111; }
.msg-row.right .msg-bubble { background:#000; color:#fff; border-radius:14px; }
.msg-row .msg-info { font-size:10px; color:#9ca3af; margin-top:2px; padding:0 4px; }
.sdc-qtitle { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 8px; margin:2px 0 12px; padding-bottom:10px; border-bottom:1px solid rgba(15,23,42,0.07); font-size:13px; line-height:1.35; letter-spacing:-0.01em; }
.sdc-qtitle .sdc-qtask { font-weight:700; color:#0f172a; }
.sdc-qtitle .sdc-qttl { font-weight:600; color:#475569; }
.sdc-qnum { display:inline-flex; align-items:center; font-size:11px; font-weight:700; letter-spacing:0.02em; color:#4f46e5; background:rgba(99,102,241,0.10); border:1px solid rgba(99,102,241,0.20); padding:1px 8px; border-radius:999px; }
.open-coder-btn { display:inline-flex; align-items:center; gap:6px; align-self:inherit; margin-top:8px; padding:8px 14px; min-height:36px; font-family:inherit; font-size:12px; font-weight:700; letter-spacing:-0.01em; color:#4f46e5; background:rgba(99,102,241,0.10); border:1px solid rgba(99,102,241,0.22); border-radius:12px; cursor:pointer; white-space:nowrap; -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%); box-shadow:0 1px 2px rgba(15,23,42,0.04),0 4px 12px rgba(99,102,241,0.10); transition:background 150ms ease, transform 120ms ease, box-shadow 150ms ease; }
.open-coder-btn:hover { background:rgba(99,102,241,0.16); box-shadow:0 1px 2px rgba(15,23,42,0.05),0 6px 16px rgba(99,102,241,0.16); }
.open-coder-btn:active { transform:scale(0.97); }
.open-coder-btn:focus-visible { outline:2px solid #6366f1; outline-offset:2px; }
.msg-row.right .sdc-qtitle { border-bottom-color:rgba(255,255,255,0.08); }
.msg-row.right .sdc-qtitle .sdc-qtask { color:#e2e8f0; }
.msg-row.right .sdc-qtitle .sdc-qttl { color:#94a3b8; }
.msg-row.right .sdc-qnum { color:#c7d2fe; background:rgba(99,102,241,0.18); border-color:rgba(99,102,241,0.35); }
.msg-row.right .open-coder-btn { color:#c7d2fe; background:rgba(99,102,241,0.16); border-color:rgba(99,102,241,0.30); }
.doubts-fs-chat-input { padding:14px 24px; background:#fff; border-top:1px solid #e5e7eb; display:flex; gap:10px; flex-shrink:0; align-items:stretch; }
.doubts-fs-chat-input textarea { flex:1; padding:10px 14px; border:1.5px solid #e5e7eb; border-radius:8px; font-family:inherit; font-size:14px; resize:none; outline:none; min-height:44px; max-height:120px; background:#fff; color:#111; }
.doubts-fs-chat-input textarea::placeholder { color:#9ca3af; }
.doubts-fs-chat-input textarea:focus { border-color:#9ca3af; }
.doubts-fs-chat-input button { flex:0 0 auto; align-self:stretch; min-width:120px; padding:0 28px; background:#000; color:#fff; border:none; border-radius:8px; font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:background 150ms,transform 150ms; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.doubts-fs-chat-input button:hover { background:#1f2937; }
.doubts-fs-chat-input button:active { transform:scale(0.98); }
.doubts-fs-chat-input button:hover { background:#222; color:#fff; }
/* "+" quick-topic picker in the doubt / conversation composer.
!important beats the global `button{}`, `.container.admin-expanded button`
and `.doubts-fs-chat-input button` overrides (all force black pills). */
.dtp-wrap { position:relative; flex:0 0 auto; align-self:stretch; display:flex; }
.dtp-wrap--chip { align-self:center; display:inline-flex; }
.dtp-plus { width:46px !important; min-width:46px !important; align-self:stretch; padding:0 !important; background:#f3f4f6 !important; color:#4f46e5 !important; border:1.5px solid #e5e7eb !important; border-radius:8px !important; font-size:24px !important; font-weight:400 !important; line-height:1; letter-spacing:0 !important; text-transform:none !important; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-family:inherit; transition:background 150ms,color 150ms,border-color 150ms; }
.dtp-plus:hover { background:#eef2ff !important; color:#4f46e5 !important; border-color:#c7d2fe !important; transform:none; }
.dtp-plus.dtp-open { background:#4f46e5 !important; color:#fff !important; border-color:#4f46e5 !important; }
.dtp-chip { min-width:0 !important; padding:5px 13px !important; background:#f5f3ff !important; color:#4f46e5 !important; border:1px solid #ddd6fe !important; border-radius:999px !important; font-size:11.5px !important; font-weight:600 !important; letter-spacing:0.2px !important; text-transform:none !important; cursor:pointer; font-family:inherit; transition:background 150ms; }
.dtp-chip:hover { background:#ede9fe !important; color:#4f46e5 !important; transform:none; box-shadow:none; }
.dtp-chip.dtp-open { background:#4f46e5 !important; color:#fff !important; }
.dtp-pop { position:absolute; left:0; z-index:2147483600; width:302px; max-width:80vw; max-height:min(64vh,440px); overflow-y:auto; background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,0.18); padding:7px; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; animation:dtpPop 130ms ease; }
.dtp-pop--up { bottom:calc(100% + 8px); }
.dtp-pop--down { top:calc(100% + 8px); }
.dtp-pop--r { right:0; left:auto; }
@keyframes dtpPop { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.dtp-head { font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#9ca3af; padding:7px 10px 5px; display:flex; align-items:center; gap:8px; }
.dtp-back { cursor:pointer; color:#4f46e5; font-weight:700; margin-right:2px; }
.dtp-back:hover { text-decoration:underline; }
.dtp-item { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px; cursor:pointer; user-select:none; }
.dtp-item:hover { background:#f5f3ff; }
.dtp-ic { width:28px; height:28px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; font-size:15px; background:#f3f4f6; border-radius:8px; }
.dtp-tx { min-width:0; flex:1; }
.dtp-tx > b { display:block; font-size:13.5px; font-weight:600; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dtp-tx > span { display:block; font-size:11.5px; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dtp-chev { color:#c4b5fd; font-size:17px; font-weight:700; }
.dtp-empty { padding:13px 12px; font-size:12.5px; color:#6b7280; text-align:center; line-height:1.5; }
.dtp-pill { display:inline-block; font-size:9.5px; font-weight:700; padding:1px 7px; border-radius:9px; margin-left:7px; text-transform:capitalize; vertical-align:middle; }
/* ── Code box inside doubt messages (auto-boxed paste or the "" button) ──
Self-contained dark block so it reads clearly on ANY bubble colour (blue /
black / grey). Copy control is a , not a