/* learnhub — calm dark theme */
:root {
--bg: #0d0f14;
--bg-elev: #151922;
--bg-elev-2: #1c2230;
--fg: #f1f5f9;
--fg-dim: #94a3b8;
--fg-muted: #64748b;
--border: #222a3a;
--accent: #38bdf8;
--good: #4ade80;
--warn: #f87171;
--ok: #818cf8;
--radius: 12px;
--mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--display: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Premium Shadow Tokens */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-glow: 0 0 16px rgba(56, 189, 248, 0.08);
/* Compatibility aliases used in dynamically-added CSS sections */
--muted: var(--fg-muted);
--bg-elev-1: var(--bg-elev);
--font-mono: var(--mono);
--bg-card: var(--bg-elev);
}
[data-theme="light"] {
--bg: #f8fafc;
--bg-elev: #ffffff;
--bg-elev-2: #f1f5f9;
--fg: #0f172a;
--fg-dim: #334155;
--fg-muted: #64748b;
--border: #e2e8f0;
--accent: #0284c7;
--good: #16a34a;
--warn: #dc2626;
--ok: #4f46e5;
/* Premium Shadow Tokens for Light Theme */
--shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
--shadow-glow: 0 0 16px rgba(2, 132, 199, 0.05);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; }
body {
background: var(--bg);
color: var(--fg);
font-family: var(--sans);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
}
a { color: var(--accent); text-decoration: none; transition: all 0.2s ease; }
a:hover { opacity: 0.85; text-decoration: none; }
.topbar {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 12px 28px;
border-bottom: 1px solid var(--border);
background: rgba(15,17,21,0.88);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
position: sticky; top: 0; z-index: 100;
}
[data-theme="light"] .topbar {
background: rgba(248,249,251,0.88);
}
.brand {
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
transition: opacity 0.2s;
}
.brand:hover {
opacity: 0.95;
text-decoration: none;
}
.brand-logo-img {
height: 28px;
width: auto;
display: inline-block;
vertical-align: middle;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.25));
flex-shrink: 0;
}
.brand:hover .brand-logo-img {
transform: rotate(10deg) scale(1.08);
}
.brand-text {
font-family: var(--display);
font-size: 21px;
font-weight: 800;
letter-spacing: -0.5px;
color: #fff;
background: linear-gradient(135deg, #ffffff 40%, var(--fg-dim));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
[data-theme="light"] .brand-text {
color: #0d0f14;
background: none;
-webkit-text-fill-color: initial;
}
.topbar-nav { display: flex; gap: 22px; align-items: center; }
.topbar-nav a { color: var(--fg-dim); font-size: 14px; }
.topbar-nav a:hover { color: var(--fg); text-decoration: none; }
.topbar-right { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
/* Due-cards badge — superscript notification dot */
.nav-review { position: relative; }
.due-badge {
position: relative;
top: -6px;
margin-left: 2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: var(--warn);
color: #0f1115;
font-size: 9px;
font-weight: 700;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
font-style: normal;
}
.nav-has-due { color: var(--fg) !important; }
/* Streak pill */
.streak-pill {
font-size: 13px;
color: #fcd34d;
padding: 3px 9px;
border-radius: 999px;
background: rgba(252,211,77,0.1);
border: 1px solid rgba(252,211,77,0.25);
white-space: nowrap;
}
main { max-width: 980px; margin: 0 auto; padding: 32px 28px 80px; width: 100%; flex: 1 0 auto; }
.breadcrumb {
font-size: 13px;
color: var(--fg-muted);
margin-bottom: 18px;
}
.breadcrumb a { color: var(--fg-dim); }
h1 { font-family: var(--display); font-size: 28px; margin: 0 0 8px; letter-spacing: -0.02em; font-weight: 600; }
h2 { font-family: var(--display); font-size: 19px; margin: 28px 0 14px; letter-spacing: -0.015em; font-weight: 600; }
h3, h4, h5, h6 { font-family: var(--display); font-weight: 600; }
p { margin: 0 0 12px; }
.muted { color: var(--fg-muted); }
code, pre {
font-family: var(--mono);
font-size: 13.5px;
}
code {
background: var(--bg-elev-2);
padding: 1px 6px;
border-radius: 4px;
}
pre {
background: var(--bg-elev);
border: 1px solid var(--border);
padding: 14px 16px;
border-radius: var(--radius);
overflow-x: auto;
line-height: 1.5;
}
pre code { background: transparent; padding: 0; }
.hero { margin-bottom: 32px; }
.hero h1 { font-size: 32px; }
.stats { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.stat-pill {
background: var(--bg-elev);
border: 1px solid var(--border);
padding: 7px 14px;
border-radius: 999px;
font-size: 13px;
color: var(--fg);
}
.stat-pill.due { border-color: rgba(125,211,252,0.4); color: var(--accent); }
.stat-pill.warn { border-color: rgba(253,164,175,0.4); color: var(--warn); }
/* Course grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
.card {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.card:hover {
border-color: var(--accent);
transform: translateY(-4px);
box-shadow: var(--shadow-md), 0 10px 25px -10px rgba(0,0,0,0.5), 0 0 12px -3px var(--accent);
}
/* App-style Course Icon Box */
.card-icon-box {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, var(--accent) 0%, rgba(15, 23, 42, 0.8) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
box-shadow: 0 4px 14px -3px var(--accent);
margin-bottom: 16px;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
color: #fff; /* High contrast icon inside */
}
.card:hover .card-icon-box {
transform: translateY(-3px) scale(1.06);
}
/* Translucent stats pill positioned in the corner */
.card-stats {
position: absolute;
top: 24px;
right: 24px;
display: flex;
gap: 8px;
font-size: 11px;
font-family: var(--mono);
color: var(--fg-dim);
background: var(--bg-elev-2);
padding: 4px 8px;
border-radius: 99px;
border: 1px solid var(--border);
backdrop-filter: blur(4px);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 2;
}
.card:hover .card-stats {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.card-inner-link {
display: flex;
flex-direction: column;
flex-grow: 1;
color: inherit;
text-decoration: none;
}
.card-body {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card-inner-link:hover {
text-decoration: none;
}
.card-title {
font-size: 17px;
font-weight: 600;
color: var(--fg);
margin: 0 0 6px;
line-height: 1.35;
transition: color 0.15s ease;
}
.card:hover .card-title {
color: var(--accent);
}
.card-desc {
font-size: 13px;
color: var(--fg-dim);
line-height: 1.5;
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 3em;
}
/* Card Metadata Row */
.card-meta-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
.card-meta-row .course-diff,
.card-meta-row .cert-badge-pill {
margin: 0;
}
/* Footer metadata row (push to bottom, no top border line) */
.card-footer-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 8px;
gap: 12px;
}
/* Subtle tags for card */
.card-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 0;
margin-bottom: 0;
}
.card-tag {
font-family: var(--mono);
font-size: 10px;
color: var(--fg-dim);
background: var(--bg-elev-2);
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--border);
transition: all 0.2s ease;
}
.card-tag::before {
content: "#";
}
.card:hover .card-tag {
border-color: rgba(56, 189, 248, 0.2);
color: var(--fg);
}
/* Catalog Actions footer styling */
.card-action-section {
padding-top: 12px;
border-top: 1px solid var(--border);
margin-top: 12px;
}
.course-status-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.progress { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.progress.big { margin-top: 18px; }
.bar { flex: 1; height: 6px; background: var(--bg-elev-2); border-radius: 99px; overflow: hidden; }
.fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s; }
.pgtext { font-family: var(--mono); font-size: 12px; color: var(--fg-muted); }
/* ── Course Layout & Split Columns ── */
.course-detail-layout {
display: flex;
gap: 32px;
align-items: flex-start;
margin-top: 16px;
}
.course-main-content {
flex: 1;
min-width: 0; /* Prevents layout break */
}
.course-sidebar {
width: 340px;
flex-shrink: 0;
position: sticky;
top: 24px;
}
/* Course page header/title elements */
.course-head-main {
margin-bottom: 24px;
}
.course-head-main h1 {
font-size: 32px;
margin: 0 0 10px;
color: var(--fg);
line-height: 1.25;
}
.course-desc {
font-size: 15px;
color: var(--fg-dim);
line-height: 1.6;
max-width: 840px;
margin: 0 0 16px;
}
.course-head-main .course-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 0;
}
/* Course Dashboard Panel in Sidebar */
.course-dashboard {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px;
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
gap: 18px;
}
/* Meta Section (Specs) */
.dashboard-meta-section {
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.dashboard-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
}
.dashboard-meta-label {
color: var(--fg-muted);
}
.dashboard-meta-val {
color: var(--fg);
font-weight: 500;
}
.dashboard-meta-val.views {
font-family: var(--mono);
color: var(--fg-dim);
}
/* Progress Section */
.dashboard-progress-section {
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.dashboard-progress-section h3 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-muted);
margin: 0;
font-weight: 600;
}
.enroll-prompt {
font-size: 13px;
color: var(--fg-dim);
line-height: 1.5;
}
.dashboard-time-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font-size: 12px;
color: var(--fg-muted);
font-family: var(--mono);
margin-top: 4px;
}
.time-divider {
opacity: 0.4;
}
.time-item.ETA {
color: var(--accent);
}
/* Actions Section */
.dashboard-actions-section {
display: flex;
flex-direction: column;
gap: 10px;
}
.dashboard-actions-section .btn {
width: 100%;
justify-content: center;
text-align: center;
}
.dashboard-actions-row {
display: flex;
gap: 8px;
}
.dashboard-actions-row .btn {
flex: 1;
}
.btn-danger-ghost {
background: transparent;
border: 1px solid rgba(239, 68, 68, 0.2);
color: rgba(239, 68, 68, 0.7);
font-size: 12px;
font-weight: 500;
transition: all 0.2s ease;
}
.btn-danger-ghost:hover {
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.4);
color: #ef4444;
}
@media (max-width: 960px) {
.course-detail-layout {
flex-direction: column;
gap: 24px;
}
.course-sidebar {
width: 100%;
position: static;
}
.course-dashboard {
max-width: 480px;
margin: 0 auto;
width: 100%;
}
}
.lesson-list { list-style: none; padding: 0; margin: 0; }
.lesson-row {
display: flex;
align-items: stretch;
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 8px;
background: var(--bg-elev);
transition: border-color .15s;
overflow: hidden;
}
.lesson-row:hover { border-color: var(--accent); }
.lesson-row.done { opacity: 0.6; }
.lesson-row .num {
font-family: var(--mono);
color: var(--fg-muted);
font-size: 13px;
min-width: 28px;
}
.lesson-row .title { flex: 1; color: var(--fg); font-weight: 500; }
.badges { display: flex; gap: 6px; }
.badge {
font-family: var(--mono);
font-size: 11px;
padding: 3px 8px;
border-radius: 4px;
background: var(--bg-elev-2);
color: var(--fg-dim);
}
.badge.ok { background: rgba(134,239,172,0.15); color: var(--good); }
/* Lesson page */
.lesson-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.btn {
background: var(--bg-elev);
border: 1px solid var(--border);
color: var(--fg);
font-family: var(--sans);
font-size: 13px;
padding: 8px 14px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-sm);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-md), var(--shadow-glow); }
.btn.done { background: rgba(134,239,172,0.12); border-color: rgba(134,239,172,0.4); color: var(--good); }
.btn.ghost { background: transparent; box-shadow: none; }
.prose {
font-size: 16.5px;
line-height: 1.7;
color: #cbd5e1; /* Softer text color in dark theme */
}
[data-theme="light"] .prose {
color: #334155; /* Softer text color in light theme */
}
.prose p {
margin-top: 0;
margin-bottom: 16px;
}
.prose h1, .prose h2, .prose h3 {
font-family: var(--display);
font-weight: 600;
color: var(--fg);
margin-top: 32px;
margin-bottom: 14px;
}
.prose h1 { font-size: 26px; }
.prose h2 { font-size: 20px; }
.prose h3 { font-size: 17px; color: var(--fg-dim); }
.prose ul, .prose ol { padding-left: 22px; margin-bottom: 16px; }
.prose li { margin-bottom: 6px; }
.prose blockquote {
border-left: 3px solid var(--accent);
margin: 16px 0; padding: 10px 20px;
color: var(--fg-dim);
background: var(--bg-elev);
border-radius: 0 var(--radius) var(--radius) 0;
}
.prose table { border-collapse: collapse; width: 100%; margin: 20px 0; }
.prose th, .prose td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; }
.prose th { background: var(--bg-elev); font-weight: 600; color: var(--fg); }
/* Problems */
.problems { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border); }
.prob-list { display: flex; flex-direction: column; gap: 10px; }
.prob {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 16px;
position: relative;
}
.prob-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-right: 32px; }
.diff {
font-family: var(--mono);
font-size: 11px;
padding: 2px 8px;
border-radius: 4px;
text-transform: uppercase;
}
.diff.easy { background: rgba(134,239,172,0.15); color: var(--good); }
.diff.medium { background: rgba(252,211,77,0.15); color: #fcd34d; }
.diff.hard { background: rgba(253,164,175,0.15); color: var(--warn); }
.tag {
font-family: var(--mono);
font-size: 11px;
color: var(--fg-muted);
background: var(--bg-elev-2);
padding: 2px 7px;
border-radius: 4px;
}
.hint-block { margin-top: 8px; color: var(--fg-dim); font-size: 13px; }
.hint-block summary { cursor: pointer; color: var(--fg-muted); }
.status-row { display: flex; gap: 6px; margin-top: 10px; }
.chip {
background: var(--bg-elev-2);
border: 1px solid var(--border);
color: var(--fg-dim);
font-family: var(--mono);
font-size: 12px;
padding: 4px 12px;
border-radius: 999px;
cursor: pointer;
text-transform: lowercase;
}
.chip:hover { color: var(--fg); }
.chip.active { color: var(--fg); border-color: var(--accent); background: rgba(125,211,252,0.1); }
.chip.good.active { border-color: var(--good); background: rgba(134,239,172,0.12); color: var(--good); }
.chip.warn.active { border-color: var(--warn); background: rgba(253,164,175,0.12); color: var(--warn); }
.chip.ok.active { border-color: var(--ok); background: rgba(165,180,252,0.12); color: var(--ok); }
/* Notes */
.notes { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border); }
textarea {
width: 100%;
min-height: 140px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
color: var(--fg);
font-family: var(--mono);
font-size: 13.5px;
line-height: 1.55;
resize: vertical;
}
textarea:focus { outline: none; border-color: var(--accent); }
.note-status { font-size: 12px; color: var(--fg-muted); margin-top: 6px; min-height: 16px; }
.hint.saved { color: var(--good); }
/* Lesson nav */
.lesson-nav {
display: flex; justify-content: space-between; gap: 16px;
margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border);
}
.navlink {
background: var(--bg-elev);
border: 1px solid var(--border);
padding: 10px 14px;
border-radius: var(--radius);
color: var(--fg);
font-size: 13px;
max-width: 45%;
}
.navlink:hover { border-color: var(--accent); text-decoration: none; }
/* Review */
.review-wrap { max-width: 640px; margin: 0 auto; }
.review-meta { color: var(--fg-muted); font-size: 13px; margin-bottom: 16px; }
.card-srs {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px;
min-height: 240px;
text-align: center;
}
.card-front { font-size: 20px; margin-bottom: 24px; }
.card-back { font-size: 16px; color: var(--fg-dim); }
.card-back hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.grade-row { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.grade-row .chip { padding: 8px 18px; font-size: 13px; }
/* Filters Bar and Form Inputs */
/* ── Catalog filter panel ─────────────────────────────────────── */
.catalog-filter-panel { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.filter-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-group { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.filter-divider { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; margin: 0 4px; align-self: center; }
/* Unified pill chip — all boolean filters */
.fchip {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em;
padding: 5px 13px; border-radius: 20px;
background: var(--bg-elev); border: 1px solid var(--border);
color: var(--fg-muted); text-decoration: none; white-space: nowrap;
transition: border-color .12s, color .12s, background .12s;
cursor: pointer;
}
.fchip:hover { border-color: var(--accent); color: var(--fg); text-decoration: none; }
.fchip.active { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.fchip-beginner.active { background: var(--good); border-color: var(--good); color: #0d1a0d; }
.fchip-intermediate.active { background: #fcd34d; border-color: #fcd34d; color: #1a1200; }
.fchip-advanced.active { background: var(--warn); border-color: var(--warn); color: #1a0000; }
/* Selects row */
.filter-selects-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fselect {
-webkit-appearance: none; appearance: none;
padding: 7px 30px 7px 12px; border-radius: 8px;
background-color: var(--bg-elev); border: 1px solid var(--border);
color: var(--fg); font-size: 13px; font-family: var(--sans);
cursor: pointer; min-width: 150px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 10px center;
transition: border-color .12s;
}
.fselect:hover, .fselect:focus { border-color: var(--accent); outline: none; }
.fselect-ml { margin-left: auto; }
/* Keep old classes for home.html compatibility */
.catalog-filters-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.filter-toggle {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; background: var(--bg-elev);
border: 1.5px dashed var(--accent); border-radius: var(--radius);
color: var(--accent); font-size: 14px; font-weight: 500;
cursor: pointer; transition: all 0.2s ease; text-decoration: none;
}
.filter-toggle:hover { background: rgba(125,211,252,0.08); text-decoration: none; }
.filter-toggle.active { background: var(--accent); color: var(--bg); border-style: solid; }
.filter-select-wrap, .sort-select-wrap { display: flex; align-items: center; gap: 8px; }
.filter-select, .sort-select {
padding: 8px 12px; background: var(--bg-elev); border: 1px solid var(--border);
border-radius: var(--radius); color: var(--fg); font-size: 14px; cursor: pointer;
transition: border-color 0.2s;
}
.filter-select:hover, .sort-select:hover,
.filter-select:focus, .sort-select:focus { border-color: var(--accent); outline: none; }
@media (max-width: 576px) {
.catalog-filter-panel { gap: 8px; }
.filter-selects-row { flex-direction: column; align-items: stretch; }
.fselect, .fselect-ml { margin-left: 0; min-width: 0; width: 100%; }
.catalog-filters-bar {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.filter-toggle {
justify-content: center;
}
.filter-select-wrap, .sort-select-wrap {
justify-content: space-between;
}
.filter-select, .sort-select {
flex-grow: 1;
max-width: 70%;
}
}
/* Problems Kanban dashboard */
.prob-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 20px;
align-items: flex-start;
}
.col {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
}
.col-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
border-bottom: 2px solid var(--border);
padding-bottom: 8px;
}
.col-title {
font-size: 15px;
font-weight: 600;
margin: 0;
color: var(--fg);
}
.col-title.good { border-bottom-color: var(--good); }
.col-title.warn { border-bottom-color: var(--warn); }
.col-count {
background: var(--bg-elev-2);
color: var(--fg-dim);
padding: 2px 8px;
border-radius: 99px;
font-size: 12px;
font-weight: 600;
border: 1px solid var(--border);
}
.prob-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.prob-mini {
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
gap: 8px;
}
.prob-mini:hover {
transform: translateY(-2px);
border-color: var(--accent);
box-shadow: 0 4px 12px rgba(125, 211, 252, 0.1);
}
.prob-mini-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.prob-title {
font-weight: 600;
color: var(--fg);
font-size: 13.5px;
text-decoration: none;
}
.prob-title:hover {
color: var(--accent);
text-decoration: none;
}
.prob-mini-sub {
font-size: 11px;
color: var(--fg-muted);
}
.prob-mini-sub a {
color: var(--fg-muted);
text-decoration: none;
}
.prob-mini-sub a:hover {
color: var(--accent);
}
.prob-mini .diff {
font-family: var(--mono);
font-size: 9px;
padding: 2px 6px;
border-radius: 4px;
text-transform: uppercase;
font-weight: 600;
}
.prob-mini .diff.easy { background: rgba(134, 239, 172, 0.15); color: var(--good); }
.prob-mini .diff.medium { background: rgba(252, 211, 77, 0.15); color: #fcd34d; }
.prob-mini .diff.hard { background: rgba(253, 164, 175, 0.15); color: var(--warn); }
.prob-hint-panel { margin-top: 8px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; line-height: 1.5; }
.prob-hint-panel .hint-label { font-size: 10px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.prob-hint-panel .hint-text { color: var(--fg); white-space: pre-wrap; }
.prob-hint-panel .hint-loading { color: var(--fg-muted); font-style: italic; }
.prob-hint-panel .hint-error { color: var(--warn); }
.empty {
text-align: center;
padding: 60px 20px;
color: var(--fg-muted);
border: 1px dashed var(--border);
border-radius: var(--radius);
}
.empty.big { padding: 100px 20px; }
.empty.big h1 { color: var(--fg); }
/* Topbar user */
.topbar-user { margin-left: auto; }
.user-link {
font-size: 13px;
color: var(--fg-muted);
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: 6px;
}
.user-link:hover { color: var(--fg); border-color: var(--accent); text-decoration: none; }
/* Auth pages (login / setup) */
.auth-wrap {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
position: relative;
overflow: hidden;
background: var(--bg);
padding: 40px 20px;
}
.auth-wrap::before {
content: '';
position: absolute;
top: -10%;
right: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, var(--accent) 0%, transparent 75%);
filter: blur(120px);
opacity: 0.15;
pointer-events: none;
}
.auth-wrap::after {
content: '';
position: absolute;
bottom: -10%;
left: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, #818cf8 0%, transparent 75%);
filter: blur(120px);
opacity: 0.15;
pointer-events: none;
}
.auth-card {
background: rgba(21, 25, 34, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: 40px;
width: 100%;
max-width: 400px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
z-index: 10;
}
.auth-card .brand,
.landing-modal-card .brand {
margin: 0 auto 24px;
justify-content: center;
}
.auth-card h1 {
font-family: var(--display);
font-size: 26px;
font-weight: 700;
margin-bottom: 8px;
color: #fff;
}
.auth-form {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 24px;
}
.auth-form label {
display: flex;
flex-direction: column;
gap: 6px;
}
.auth-form label span {
font-size: 13px;
font-weight: 500;
color: var(--fg-dim);
}
.auth-form input {
background: rgba(13, 15, 20, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 11px 14px;
color: var(--fg);
font-size: 14px;
font-family: var(--sans);
transition: border-color 0.25s, box-shadow 0.25s;
}
.auth-form input:focus {
border-color: var(--accent);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
outline: none;
}
.btn-auth {
background: linear-gradient(135deg, var(--accent), #818cf8);
color: #0d0f14;
border: none;
border-radius: 8px;
padding: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
margin-top: 8px;
transition: opacity 0.2s, transform 0.1s;
box-shadow: 0 4px 15px rgba(56, 189, 248, 0.15);
}
.btn-auth:hover {
opacity: 0.92;
}
.btn-auth:active {
transform: scale(0.98);
}
.auth-error {
background: rgba(253, 164, 175, 0.08);
border: 1px solid rgba(253, 164, 175, 0.25);
color: var(--warn);
border-radius: 8px;
padding: 12px 16px;
font-size: 13px;
margin-top: 16px;
}
.auth-switch {
text-align: center;
font-size: 13px;
color: var(--fg-muted);
margin-top: 20px;
}
.auth-switch a {
color: var(--accent);
text-decoration: none;
}
.auth-switch a:hover {
text-decoration: underline;
}
.auth-success {
background: rgba(134, 239, 172, 0.08);
border: 1px solid rgba(134, 239, 172, 0.25);
color: var(--good);
border-radius: 8px;
padding: 12px 16px;
font-size: 13px;
margin-top: 16px;
}
/* Settings page */
.settings-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.settings-card {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px;
box-shadow: var(--shadow-md);
margin-bottom: 24px;
}
.settings-card h2 {
margin-top: 0;
margin-bottom: 20px;
font-family: var(--display);
font-size: 18px;
font-weight: 600;
color: var(--fg);
display: flex;
align-items: center;
gap: 8px;
}
.notif-toggles {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.settings-label { display: block; font-size: 13px; color: var(--fg-muted); margin-bottom: 6px; }
/* The custom toggle row (iOS style on the right) */
.toggle-row {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
padding-left: 16px;
padding-right: 68px; /* Room for switch on the right */
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
user-select: none;
min-height: 48px;
font-size: 14px;
font-weight: 500;
color: var(--fg);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
margin-bottom: 8px;
box-shadow: var(--shadow-sm);
}
.toggle-row:hover {
background: var(--bg-elev-2);
border-color: rgba(56, 189, 248, 0.3);
box-shadow: var(--shadow-md);
}
.toggle-row span {
display: block;
line-height: 1.4;
white-space: normal;
word-break: break-word;
}
.toggle-row input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* The custom track */
.toggle-row::before {
content: "";
position: absolute;
right: 16px;
left: auto;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 20px;
background: rgba(100, 116, 139, 0.2);
border: 1px solid var(--border);
border-radius: 99px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* The custom thumb */
.toggle-row::after {
content: "";
position: absolute;
right: 35px; /* track right(16) + track width(36) - thumb width(14) - gap(3) = 35 */
left: auto;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
background: var(--fg-muted);
border-radius: 50%;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* When checked */
.toggle-row:has(input[type="checkbox"]:checked) {
border-color: rgba(56, 189, 248, 0.3);
background: rgba(56, 189, 248, 0.02);
}
.toggle-row:has(input[type="checkbox"]:checked)::before {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}
.toggle-row:has(input[type="checkbox"]:checked)::after {
background: #ffffff;
transform: translate(16px, -50%); /* slides to the right visually */
}
/* Premium Settings Tabs Layout */
.settings-container {
display: flex;
gap: 32px;
margin-top: 24px;
align-items: flex-start;
}
.settings-sidebar {
width: 240px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 8px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 16px;
padding: 12px;
box-shadow: var(--shadow-sm);
}
.settings-tab-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: var(--fg-dim);
font-family: var(--sans);
font-size: 14px;
font-weight: 550;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
text-align: left;
width: 100%;
position: relative;
}
.settings-tab-btn:hover {
background: var(--bg-elev-2);
color: var(--fg);
}
.settings-tab-btn.active {
background: var(--bg-elev-2);
color: var(--accent);
border-color: var(--border);
font-weight: 600;
box-shadow: var(--shadow-sm), 0 4px 12px rgba(56, 189, 248, 0.03);
}
.settings-tab-btn.active::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 16px;
background: var(--accent);
border-radius: 0 4px 4px 0;
}
.settings-content {
flex-grow: 1;
min-width: 0; /* Prevents flex children from stretching */
}
/* JS-driven tab switching */
.settings-pane {
display: none;
}
.settings-pane.active {
display: block;
animation: settingsFadeIn 0.25s ease-out;
}
@keyframes settingsFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.settings-container {
flex-direction: column;
gap: 16px;
}
.settings-sidebar {
width: 100%;
flex-direction: row;
overflow-x: auto;
padding: 8px;
border-radius: 12px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.settings-sidebar::-webkit-scrollbar {
display: none;
}
.settings-tab-btn {
width: auto;
white-space: nowrap;
padding: 8px 14px;
}
.settings-tab-btn.active::before {
left: 50%;
top: auto;
bottom: 0;
transform: translateX(-50%);
width: 16px;
height: 3px;
border-radius: 4px 4px 0 0;
}
}
/* Settings internals */
.settings-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.settings-field label {
font-size: 12px;
font-weight: 600;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.settings-field input[type="text"],
.settings-field input[type="password"],
.settings-field input[type="email"],
.settings-field select,
.settings-field textarea {
background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
padding: 10px 14px; color: var(--fg); font-size: 14px; font-family: var(--sans);
width: 100%; box-sizing: border-box;
transition: all 0.2s ease;
}
.settings-field input:focus,
.settings-field select:focus,
.settings-field textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
background: var(--bg-elev-2);
}
.settings-field select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
padding-right: 40px !important;
}
[data-theme="light"] .settings-field select {
background-image: url("data:image/svg+xml;utf8,");
}
.settings-field textarea { resize: vertical; min-height: 90px; }
.settings-section-label {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; color: var(--fg-muted); margin-bottom: 8px;
margin-top: 24px;
}
.settings-linked-row {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 12px 16px; background: rgba(255,255,255,0.01); border-radius: 8px;
border: 1px solid var(--border);
margin-top: 8px;
transition: all 0.2s ease;
}
.settings-linked-row:hover {
border-color: rgba(56, 189, 248, 0.25);
background: rgba(255,255,255,0.02);
}
.settings-linked-value { font-weight: 600; font-size: 14px; flex: 1; min-width: 0; }
.settings-inline-input {
flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border);
border-radius: 8px; padding: 8px 12px; color: var(--fg); font-size: 14px;
font-family: var(--sans);
transition: all 0.2s ease;
}
.settings-inline-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}
.settings-actions { display: flex; flex-direction: column; gap: 8px; }
.settings-actions .btn { text-align: center; }
/* Solution editor */
.solution-block { margin-top: 12px; }
.solution-toggle {
cursor: pointer;
font-size: 13px;
color: var(--fg-muted);
list-style: none;
display: flex;
align-items: center;
gap: 6px;
padding: 4px 0;
user-select: none;
}
.solution-toggle::-webkit-details-marker { display: none; }
.solution-toggle::before { content: "▶"; font-size: 10px; transition: transform .15s; }
details[open] .solution-toggle::before { transform: rotate(90deg); }
.solution-editor-wrap { margin-top: 10px; }
.solution-form { display: flex; flex-direction: column; gap: 8px; }
.solution-footer { display: flex; align-items: center; gap: 10px; }
.cm-source { display: none; }
/* CodeMirror needs content-box — our global * { box-sizing: border-box } breaks gutter math */
.CodeMirror, .CodeMirror * { box-sizing: content-box; }
/* Override CodeMirror theme to match our dark theme */
.CodeMirror {
border: 1px solid var(--border);
border-radius: var(--radius);
font-family: var(--mono);
font-size: 13.5px;
height: auto;
min-height: 120px;
}
.CodeMirror-scroll { min-height: 120px; }
/* ── Quiz ── */
.quizzes { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border); }
.quiz-item {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 18px;
margin-bottom: 12px;
transition: border-color .15s;
}
.quiz-item.answered-correct { border-color: rgba(134,239,172,0.4); }
.quiz-item.answered-wrong { border-color: rgba(253,164,175,0.4); }
.quiz-question { font-weight: 500; margin: 0 0 14px; font-size: 15px; }
.quiz-result {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; border-radius: 6px; margin-bottom: 10px; font-size: 13px;
}
.quiz-result.correct { background: rgba(134,239,172,0.12); color: var(--good); }
.quiz-result.wrong { background: rgba(253,164,175,0.12); color: var(--warn); }
.quiz-icon { font-size: 15px; }
.quiz-explanation { font-size: 13px; color: var(--fg-dim); margin: 6px 0 10px; }
.quiz-options { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.quiz-option {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; border-radius: 6px; cursor: pointer;
background: var(--bg-elev-2); border: 1px solid var(--border);
font-size: 14px; transition: border-color .15s;
}
.quiz-option:hover { border-color: var(--accent); }
.quiz-option input[type="radio"] { accent-color: var(--accent); }
/* JS quiz engine */
.quiz-card { display: flex; flex-direction: column; gap: 0; }
.quiz-question { font-size: 15px; font-weight: 500; margin: 0 0 14px; line-height: 1.5; color: var(--fg); }
.quiz-options { display: flex; flex-direction: column; gap: 7px; margin-bottom: 4px; }
.quiz-opt {
display: block; width: 100%; text-align: left;
padding: 10px 14px; border-radius: 8px; border: 1.5px solid var(--border);
background: var(--bg-elev-2); color: var(--fg);
font-size: 14px; font-family: var(--sans); cursor: pointer;
transition: border-color .15s, background .15s, color .15s;
line-height: 1.4;
}
.quiz-opt:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-elev-3); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt-correct {
border-color: var(--good) !important; background: rgba(134,239,172,0.12) !important;
color: var(--good) !important; font-weight: 600;
}
.quiz-opt-wrong {
border-color: #f87171 !important; background: rgba(248,113,113,0.1) !important;
color: #f87171 !important;
}
.quiz-tf-row { display: flex; gap: 8px; margin-bottom: 4px; }
.quiz-tf { flex: 1; text-align: center; padding: 11px 14px; }
.quiz-fill-form { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.quiz-fill-form .quiz-input { flex: 1; margin-bottom: 0; }
.quiz-feedback {
display: flex; align-items: flex-start; gap: 8px;
padding: 10px 14px; border-radius: 8px; margin-top: 12px;
font-size: 14px; font-weight: 500; line-height: 1.4;
}
.quiz-feedback.correct { background: rgba(134,239,172,0.1); color: var(--good); border: 1px solid rgba(134,239,172,0.25); }
.quiz-feedback.wrong { background: rgba(248,113,113,0.08); color: #f87171; border: 1px solid rgba(248,113,113,0.2); }
.quiz-fb-icon { font-size: 15px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.quiz-explanation { font-size: 13px; color: var(--fg-muted); margin: 8px 0 0; line-height: 1.5; }
.quiz-input {
width: 100%; background: var(--bg); border: 1px solid var(--border);
border-radius: 6px; padding: 8px 12px; color: var(--fg);
font-size: 14px; font-family: var(--sans); margin-bottom: 10px;
}
.quiz-input:focus { outline: none; border-color: var(--accent); }
.btn-quiz {
background: var(--accent); color: #0f1115; border: none;
border-radius: 6px; padding: 7px 16px; font-size: 13px;
font-weight: 600; cursor: pointer; transition: opacity .15s;
}
.btn-quiz:hover { opacity: 0.85; }
.tf-row { display: flex; gap: 8px; }
.btn-tf {
flex: 1; padding: 9px; border-radius: 6px; border: 1px solid var(--border);
font-size: 14px; font-weight: 500; cursor: pointer;
background: var(--bg-elev-2); transition: all .15s;
}
.btn-tf.good { color: var(--good); }
.btn-tf.good:hover { background: rgba(134,239,172,0.12); border-color: var(--good); }
.btn-tf.warn { color: var(--warn); }
.btn-tf.warn:hover { background: rgba(253,164,175,0.12); border-color: var(--warn); }
.quiz-retry {
background: none; border: 1px solid var(--border); color: var(--fg-dim);
border-radius: 6px; padding: 5px 12px; font-size: 12px; cursor: pointer;
margin-top: 4px; transition: all .15s;
}
.quiz-retry:hover { color: var(--fg); border-color: var(--accent); }
.quiz-wrong-actions {
display: flex; gap: 10px; margin-top: 12px; align-items: center;
}
.btn-quiz-ghost {
background: none; border: 1px solid var(--border); color: var(--fg-dim);
border-radius: 6px; padding: 7px 14px; font-size: 13px;
font-weight: 500; cursor: pointer; transition: all .15s;
}
.btn-quiz-ghost:hover { border-color: var(--accent); color: var(--fg); }
.quiz-explain-btn { color: var(--accent); border-color: var(--accent); opacity: 0.85; }
.quiz-explain-btn:hover { opacity: 1; }
.quiz-explain-panel {
margin-top: 12px; padding: 12px 14px; border-radius: 8px;
background: rgba(56,189,248,0.06); border: 1px solid rgba(56,189,248,0.2);
font-size: 13px; color: var(--fg); line-height: 1.6; white-space: pre-wrap;
}
/* ── AI Sidebar ── */
.ai-fab {
position: fixed; bottom: 28px; right: 28px;
width: 46px; height: 46px; border-radius: 50%;
background: var(--accent); color: #0f1115;
border: none; font-size: 19px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
transition: transform .15s, opacity .15s, right .3s;
z-index: 150;
}
.ai-fab:hover { transform: scale(1.08); }
.ai-open .ai-fab { right: calc(420px + 28px); }
body:has(#ai-fab).ai-open .pomo-fab,
.ai-open .pomo-fab { right: calc(420px + 84px); }
.ai-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,0.35);
z-index: 140;
opacity: 0; transition: opacity .25s;
}
.ai-overlay.visible { display: block; opacity: 1; }
.ai-sidebar {
position: fixed; top: 0; right: 0; bottom: 0;
width: 420px; max-width: 100vw;
background: var(--bg-elev);
border-left: 1px solid var(--border);
display: flex; flex-direction: column;
box-shadow: -8px 0 40px rgba(0,0,0,0.45);
z-index: 145;
transform: translateX(100%);
transition: transform .28s cubic-bezier(0.4,0,0.2,1);
}
.ai-sidebar.visible { transform: translateX(0); }
.ai-sidebar-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid var(--border);
flex-shrink: 0; background: var(--bg);
}
.ai-panel-title { font-size: 14px; font-weight: 600; color: var(--accent); letter-spacing: 0.01em; }
.ai-header-actions { display: flex; align-items: center; gap: 4px; }
/* AI model picker */
.ai-model-picker { position: relative; }
.ai-model-current {
display: flex; align-items: center; gap: 4px;
background: var(--bg-elev-2); border: 1px solid var(--border);
border-radius: 8px; padding: 4px 9px; cursor: pointer;
font-size: 12px; color: var(--fg-dim); white-space: nowrap;
transition: border-color .15s, color .15s;
}
.ai-model-current:hover { border-color: var(--accent); color: var(--fg); }
.ai-model-current svg { opacity: 0.6; flex-shrink: 0; }
.ai-model-menu {
position: absolute; top: calc(100% + 6px); right: 0;
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 10px; padding: 4px; z-index: 200;
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
min-width: 180px;
}
.ai-model-option {
display: block; width: 100%; text-align: left;
background: none; border: none; border-radius: 7px;
padding: 8px 12px; font-size: 13px; color: var(--fg-dim);
cursor: pointer; transition: background .12s, color .12s;
}
.ai-model-option:hover { background: var(--bg-elev-2); color: var(--fg); }
.ai-model-option.active { color: var(--accent); font-weight: 600; }
.ai-model-option.active::after { content: ' ✓'; }
.ai-panel-close, .ai-clear-btn, .ai-interview-btn, .ai-hist-btn, .ai-trash-btn, .ai-clear-all-btn {
background: none; border: none; color: var(--fg-muted);
font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
transition: all .15s;
}
.ai-panel-close:hover, .ai-clear-btn:hover, .ai-interview-btn:hover, .ai-hist-btn:hover { color: var(--fg); background: var(--bg-elev-2); }
.ai-trash-btn:hover { color: var(--danger, #e05); background: var(--bg-elev-2); }
.ai-clear-all-btn { font-size: 13px; }
.ai-clear-all-btn:hover { color: var(--danger, #e05); background: var(--bg-elev-2); }
.ai-hist-btn.active { color: var(--accent); }
/* Chat history panel items */
.ai-hist-item {
padding: 10px 16px;
cursor: pointer;
border-bottom: 1px solid var(--border);
transition: background .12s;
}
.ai-hist-item:hover { background: var(--bg-elev-1); }
.ai-hist-item-top {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 2px;
}
.ai-hist-title {
font-size: 13px;
font-weight: 600;
color: var(--fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
.ai-hist-del {
flex-shrink: 0;
font-size: 15px;
color: var(--fg-muted);
line-height: 1;
padding: 1px 4px;
border-radius: 4px;
cursor: pointer;
opacity: 0;
transition: opacity .15s, color .15s;
}
.ai-hist-item:hover .ai-hist-del { opacity: 1; }
.ai-hist-del:hover { color: #f87171 !important; background: rgba(248,113,113,.1); }
.ai-hist-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 3px;
}
.ai-hist-date {
font-size: 11px;
color: var(--fg-muted);
white-space: nowrap;
}
.ai-hist-course {
font-size: 11px;
color: var(--accent);
}
.ai-hist-snippet {
font-size: 12px;
color: var(--fg-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* AI inline code review panel */
.ai-review-panel {
display: flex; flex-direction: column;
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--bg-elev); margin: 8px 0; overflow: hidden;
}
.ai-review-header {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 12px; background: var(--bg-elev-2);
border-bottom: 1px solid var(--border);
font-size: 12px; font-weight: 600; color: var(--fg-dim);
}
.ai-review-close {
background: none; border: none; color: var(--fg-muted);
cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 4px;
}
.ai-review-close:hover { background: var(--bg); color: var(--fg); }
.ai-review-body {
padding: 12px 16px; font-size: 13px; line-height: 1.65;
max-height: 400px; overflow-y: auto; color: var(--fg);
}
.ai-review-body pre { margin: 8px 0; font-size: 12px; overflow-x: auto; }
.ai-review-body code { font-size: 12px; }
.ai-welcome-box {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
text-align: center;
box-shadow: var(--shadow-md);
margin-bottom: 12px;
}
.ai-welcome-header {
font-size: 15px;
font-weight: 700;
color: var(--fg);
margin-bottom: 8px;
}
.ai-welcome-text {
font-size: 12px;
color: var(--fg-muted);
line-height: 1.5;
margin-bottom: 18px;
}
.ai-welcome-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.ai-welcome-card {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
text-align: left;
cursor: pointer;
transition: all 0.2s ease;
width: 100%;
box-sizing: border-box;
}
.ai-welcome-card:hover {
border-color: var(--accent);
transform: translateY(-1px);
background: rgba(125, 211, 252, 0.04);
}
.ai-card-icon {
font-size: 20px;
}
.ai-card-info {
display: flex;
flex-direction: column;
}
.ai-card-title {
font-size: 13px;
font-weight: 600;
color: var(--fg);
}
.ai-card-desc {
font-size: 11px;
color: var(--fg-muted);
margin-top: 2px;
}
/* AI Interview Status Banner (Sticky top of panel) */
.ai-interview-status-banner {
background: rgba(251, 191, 36, 0.08);
border-bottom: 1px solid rgba(251, 191, 36, 0.2);
padding: 8px 14px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11.5px;
color: #fbbf24;
}
.ai-exit-interview-link {
background: none;
border: none;
color: #f87171;
font-size: 11px;
font-weight: 600;
cursor: pointer;
padding: 2px 6px;
transition: opacity 0.15s;
}
.ai-exit-interview-link:hover {
text-decoration: underline;
opacity: 0.85;
}
/* Grading evaluation badges in message text */
.grading-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
font-size: 12px;
font-weight: 600;
border-radius: 6px;
margin: 0 4px;
vertical-align: middle;
}
.grading-success {
background: rgba(52, 211, 153, 0.15);
color: #34d399;
border: 1px solid rgba(52, 211, 153, 0.25);
}
.grading-warning {
background: rgba(251, 191, 36, 0.15);
color: #fbbf24;
border: 1px solid rgba(251, 191, 36, 0.25);
}
.grading-error {
background: rgba(248, 113, 113, 0.15);
color: #f87171;
border: 1px solid rgba(248, 113, 113, 0.25);
}
.ai-messages {
flex: 1; overflow-y: auto; padding: 16px;
display: flex; flex-direction: column; gap: 12px;
scroll-behavior: smooth;
}
.ai-msg { font-size: 14px; line-height: 1.6; max-width: 95%; }
.ai-msg-user {
align-self: flex-end;
background: rgba(125,211,252,0.12);
border: 1px solid rgba(125,211,252,0.2);
border-radius: 12px 12px 3px 12px;
padding: 9px 13px; color: var(--fg);
}
.ai-msg-assistant {
align-self: flex-start; max-width: 100%;
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 12px 12px 12px 3px;
padding: 10px 14px; color: var(--fg);
}
.ai-msg-assistant pre { margin: 8px 0; font-size: 12.5px; overflow-x: auto; }
.ai-msg-assistant code { font-size: 12.5px; }
.ai-thinking { color: var(--fg-muted); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
.ai-error-text { color: var(--danger, #e74c3c); display: block; margin-bottom: 8px; }
.ai-retry-btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 12px; border: 1px solid var(--border);
border-radius: 8px; background: var(--bg-elev, var(--bg));
color: var(--fg); font-size: 12.5px; cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.ai-retry-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.ai-input-form {
display: flex; gap: 8px; align-items: flex-end;
padding: 12px 14px; border-top: 1px solid var(--border);
flex-shrink: 0; background: var(--bg);
}
.ai-input-form textarea {
flex: 1; min-height: 44px; max-height: 160px; resize: none;
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 10px; padding: 10px 12px; font-size: 13.5px;
color: var(--fg); font-family: var(--sans); line-height: 1.5;
}
.ai-input-form textarea:focus { outline: none; border-color: var(--accent); }
.ai-send {
background: var(--accent); color: #0f1115;
border: none; border-radius: 10px; width: 40px; height: 40px;
font-size: 18px; font-weight: 700; cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: opacity .15s;
}
.ai-send:hover { opacity: 0.85; }
/* ── Review page extras ── */
.review-hint { color: var(--fg-muted); font-size: 12px; margin-left: 12px; }
.grade-row .chip kbd {
font-size: 9px; background: var(--bg); border: 1px solid var(--border);
border-radius: 3px; padding: 0 4px; margin-left: 4px; opacity: 0.7;
}
/* ── Home page streak ── */
.stat-pill.streak { border-color: rgba(252,211,77,0.3); color: #fcd34d; }
/* ── Problems dashboard improvements ── */
.col-count {
font-family: var(--mono); font-size: 12px;
background: var(--bg-elev-2); padding: 1px 7px;
border-radius: 99px; margin-left: 6px; color: var(--fg-muted);
}
.prob-mini { padding: 9px 0; border-bottom: 1px solid var(--border); }
.prob-mini:last-child { border-bottom: 0; }
.prob-mini-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.prob-mini-sub { margin-top: 3px; font-size: 11px; }
.prob-title { color: var(--fg); font-size: 13px; }
.prob-title:hover { color: var(--accent); }
.small { font-size: 12px; }
/* ── Stats page ── */
.stat-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
margin-bottom: 36px;
}
.stat-card {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 16px;
text-align: center;
}
.stat-val { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); white-space: nowrap; }
.stat-label { font-size: 12px; color: var(--fg-muted); margin-top: 4px; }
.activity-section { margin-top: 8px; }
.activity-grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-auto-flow: column;
gap: 3px;
max-width: 420px;
margin: 12px 0 10px;
}
.activity-cell {
width: 100%;
aspect-ratio: 1;
border-radius: 3px;
background: var(--bg-elev-2);
}
.activity-cell.level-1 { background: rgba(125,211,252,0.25); }
.activity-cell.level-2 { background: rgba(125,211,252,0.45); }
.activity-cell.level-3 { background: rgba(125,211,252,0.70); }
.activity-cell.level-4 { background: var(--accent); }
.activity-legend {
display: flex; align-items: center; gap: 5px;
font-size: 11px; color: var(--fg-muted);
}
.activity-legend .activity-cell { width: 13px; height: 13px; aspect-ratio: unset; }
/* ── Stats achievements link block ── */
.stats-ach-link {
display: flex; align-items: center; justify-content: space-between;
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 14px; padding: 18px 20px; margin-top: 24px;
text-decoration: none; color: var(--fg);
transition: border-color .15s, background .15s;
}
.stats-ach-link:hover { border-color: var(--accent); background: var(--bg-elev-2); }
.stats-ach-left { flex: 1; min-width: 0; }
.stats-ach-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.stats-ach-bar-wrap {
height: 6px; background: var(--bg-elev-2); border-radius: 3px;
overflow: hidden; margin-bottom: 6px;
}
.stats-ach-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }
.stats-ach-sub { font-size: 12px; color: var(--fg-muted); }
.stats-ach-right {
display: flex; align-items: center; gap: 6px;
margin-left: 20px; flex-shrink: 0;
}
.stats-ach-icon {
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; font-size: 20px; line-height: 1;
background: var(--bg-elev-2); border-radius: 8px;
}
.stats-ach-arrow { font-size: 18px; color: var(--fg-muted); margin-left: 4px; }
/* ── Language selector ── */
.editor-toolbar {
display: flex; align-items: center; gap: 8px;
margin-bottom: 6px;
}
.lang-select {
background: var(--bg-elev-2);
border: 1px solid var(--border);
color: var(--fg-dim);
font-family: var(--mono);
font-size: 12px;
padding: 4px 8px;
border-radius: 6px;
cursor: pointer;
outline: none;
}
.lang-select:focus, .lang-select:hover { border-color: var(--accent); color: var(--fg); }
/* ── highlight.js overrides ── */
.hljs { background: var(--bg-elev) !important; border-radius: var(--radius); padding: 14px 16px !important; }
.prose pre { padding: 0; background: transparent; }
.prose pre code.hljs { display: block; border-radius: var(--radius); border: 1px solid var(--border); }
/* ── Home: course sections ── */
.courses-section { margin-bottom: 36px; }
.section-title {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg-muted);
margin: 0 0 14px;
}
.completed-title { color: rgba(134,239,172,0.6); }
/* Card with continue button — card is no longer a direct , use .card-inner */
.card-inner {
display: flex;
flex-direction: column;
flex-grow: 1;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.card-inner:hover { text-decoration: none; }
.card-inner h2 { color: var(--fg); }
.card:hover .card-inner h2 { color: var(--accent); }
.continue-btn {
display: flex;
align-items: center;
gap: 6px;
margin-top: 12px;
padding: 7px 12px;
background: rgba(125,211,252,0.08);
border: 1px solid rgba(125,211,252,0.2);
border-radius: 6px;
font-size: 13px;
color: var(--accent);
font-weight: 500;
transition: background .15s, border-color .15s;
text-decoration: none;
overflow: hidden;
}
.continue-btn:hover {
background: rgba(125,211,252,0.14);
border-color: rgba(125,211,252,0.4);
text-decoration: none;
}
.continue-lesson {
color: var(--fg-dim);
font-weight: 400;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.card-completed { opacity: 0.6; }
.card-completed:hover { opacity: 1; }
.card-awaiting-exam { border-color: rgba(251,191,36,0.35); }
.card-awaiting-exam:hover { border-color: rgba(251,191,36,0.7); }
.card-awaiting-exam .fill { background: var(--good) !important; }
/* ── Lesson: N из M ── */
.lesson-head-left { display: flex; flex-direction: column; gap: 4px; }
.lesson-meta {
font-size: 12px;
color: var(--fg-muted);
font-family: var(--mono);
}
/* ── Course completion banner ── */
.completion-banner {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
background: rgba(134,239,172,0.08);
border: 1px solid rgba(134,239,172,0.3);
border-radius: var(--radius);
margin-bottom: 28px;
color: var(--good);
}
.completion-icon { font-size: 32px; line-height: 1; flex-shrink: 0; }
.completion-banner strong { display: block; font-size: 16px; margin-bottom: 2px; }
.completion-banner p { margin: 0; font-size: 13px; color: var(--fg-dim); }
/* ── Daily goal bar ── */
.daily-goal {
display: flex; align-items: center; gap: 10px; margin-top: 14px;
}
.daily-goal-bar {
flex: 1; max-width: 240px; height: 6px;
background: var(--bg-elev-2); border-radius: 99px; overflow: hidden;
}
.daily-goal-fill {
height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s;
}
.daily-goal-text { font-size: 12px; color: var(--fg-muted); font-family: var(--mono); }
/* ── Tag filter ── */
.tag-filter {
display: flex;
overflow-x: auto;
gap: 7px;
margin-bottom: 24px;
padding-bottom: 6px;
scrollbar-width: none; /* Hide scrollbar Firefox */
-webkit-overflow-scrolling: touch;
}
.tag-filter::-webkit-scrollbar {
display: none; /* Hide scrollbar Chrome/Safari */
}
.tag-chip {
flex-shrink: 0;
font-family: var(--mono); font-size: 12px;
padding: 4px 12px; border-radius: 999px;
border: 1px solid var(--border); color: var(--fg-dim);
background: var(--bg-elev); transition: all .15s; text-decoration: none;
}
.tag-chip:hover { color: var(--fg); border-color: var(--accent); text-decoration: none; }
.tag-chip.active { color: var(--accent); border-color: var(--accent); background: rgba(125,211,252,0.08); }
/* ── Course difficulty + tags on card ── */
.course-diff {
font-family: var(--mono); font-size: 10px;
padding: 2px 8px; border-radius: 4px; text-transform: uppercase;
display: inline-block; margin: 6px 0 4px;
}
.diff-beginner { background: rgba(134,239,172,0.15); color: var(--good); }
.diff-intermediate { background: rgba(252,211,77,0.15); color: #fcd34d; }
.diff-advanced { background: rgba(253,164,175,0.15); color: var(--warn); }
.course-card-tags-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; }
.cert-badge-pill {
font-family: var(--mono); font-size: 10px; text-transform: uppercase;
padding: 2px 8px; border-radius: 4px;
background: rgba(191,149,63,0.15); color: #d4a843;
display: inline-block;
}
.course-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.course-tag {
font-family: var(--mono); font-size: 10px; color: var(--fg-muted);
background: var(--bg-elev-2); padding: 2px 6px; border-radius: 3px;
}
/* ── Course head layout ── */
.course-head-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.course-head-top h1 { margin: 0; }
/* ── Lesson card stats ── */
.lesson-meta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.lesson-cards-meta { text-decoration: none; color: var(--fg-muted); }
.lesson-cards-meta:hover { color: var(--fg); text-decoration: none; }
.lesson-cards-meta.has-due { color: var(--warn); }
/* ── Achievements (stats page mini-grid) ── */
.achievements-section { margin-bottom: 36px; }
.achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px; margin-top: 14px;
}
.achievement {
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: var(--radius); padding: 14px 12px; text-align: center;
opacity: 0.35; transition: opacity .15s;
display: flex; flex-direction: column; align-items: center;
}
.achievement.earned { opacity: 1; border-color: rgba(125,211,252,0.25); }
.achievement .ach-icon {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; font-size: 22px; line-height: 1;
border-radius: 8px; margin: 0 auto 8px; flex-shrink: 0;
}
.achievement.earned .ach-icon { background: rgba(125,211,252,0.08); }
.ach-title { font-size: 12px; font-weight: 600; color: var(--fg); margin-bottom: 3px; }
.ach-desc { font-size: 11px; color: var(--fg-muted); line-height: 1.4; }
/* ── Video embed ── */
.video-embed {
position: relative; padding-top: 56.25%; /* 16:9 */
margin: 20px 0; border-radius: var(--radius); overflow: hidden;
background: var(--bg-elev); border: 1px solid var(--border);
}
.video-embed iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
border: 0;
}
/* ── Topbar search ── */
.topbar-search { display: flex; }
.topbar-search-input {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--fg);
font-family: var(--sans);
font-size: 13px;
padding: 5px 10px;
width: 160px;
outline: none;
transition: border-color .15s, width .2s;
}
.topbar-search-input::placeholder { color: var(--fg-muted); }
.topbar-search-input:focus { border-color: var(--accent); width: 220px; }
.shortcuts-btn, .theme-btn {
background: var(--bg-elev);
border: 1px solid var(--border);
color: var(--fg-muted);
font-size: 13px;
font-weight: 700;
width: 26px; height: 26px;
border-radius: 6px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: all .15s;
}
.shortcuts-btn:hover, .theme-btn:hover { color: var(--fg); border-color: var(--accent); }
/* ── Shortcuts modal ── */
.shortcuts-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.4); z-index: 200;
}
.shortcuts-overlay.visible { display: block; }
.shortcuts-modal {
display: none; position: fixed;
top: 50%; left: 50%; transform: translate(-50%, -50%);
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
width: 380px; max-width: 95vw;
z-index: 201;
box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.shortcuts-modal.visible { display: block; }
.shortcuts-header {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 18px; border-bottom: 1px solid var(--border);
font-size: 14px; font-weight: 600;
}
.shortcuts-header button {
background: none; border: none; color: var(--fg-muted);
font-size: 15px; cursor: pointer; padding: 2px 6px;
border-radius: 4px; transition: all .15s;
}
.shortcuts-header button:hover { color: var(--fg); background: var(--bg-elev-2); }
.shortcuts-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.shortcut-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); margin-bottom: 8px; font-weight: 600; }
.shortcut-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.shortcut-row span { color: var(--fg-dim); }
kbd {
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 2px 6px;
font-family: var(--mono);
font-size: 11px;
color: var(--fg);
white-space: nowrap;
}
/* ── Search page ── */
.search-form { margin-bottom: 28px; }
.search-bar { display: flex; gap: 10px; }
.search-input {
flex: 1; background: var(--bg-elev); border: 1px solid var(--border);
border-radius: var(--radius); color: var(--fg); font-family: var(--sans);
font-size: 15px; padding: 10px 14px; outline: none;
}
.search-input:focus { border-color: var(--accent); }
.search-count { margin-bottom: 16px; font-size: 13px; }
.search-results { display: flex; flex-direction: column; gap: 8px; }
.search-hit {
display: block; padding: 14px 16px;
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: var(--radius); transition: border-color .15s;
text-decoration: none; color: var(--fg);
}
.search-hit:hover { border-color: var(--accent); text-decoration: none; }
.search-hit-type {
font-family: var(--mono); font-size: 10px; text-transform: uppercase;
letter-spacing: 0.07em; color: var(--accent); margin-bottom: 4px;
}
.search-hit-title { font-size: 15px; font-weight: 500; margin-bottom: 2px; }
.search-hit-sub { font-size: 12px; margin-bottom: 4px; }
.search-hit-snippet { font-size: 13px; color: var(--fg-dim); line-height: 1.5; }
/* ── Notes header + export ── */
.notes-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.export-btn { font-size: 12px; padding: 5px 10px; }
/* ── Add card section ── */
.add-card-section { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border); }
.add-card-form { display: flex; flex-direction: column; gap: 8px; }
.card-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card-field-ta {
min-height: 72px; resize: vertical;
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: var(--radius); padding: 10px 12px; color: var(--fg);
font-family: var(--sans); font-size: 13.5px; line-height: 1.5;
}
.card-field-ta:focus { outline: none; border-color: var(--accent); }
.add-card-footer { display: flex; align-items: center; gap: 10px; }
.card-added { color: var(--good); font-size: 13px; }
/* ── Cards management page ── */
.cards-page-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 4px; gap: 12px; flex-wrap: wrap;
}
.cards-head-actions { display: flex; gap: 8px; align-items: center; }
.stat-val-warn { color: var(--warn); }
.cards-group { margin-bottom: 32px; }
.cards-group-title {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.07em; color: var(--fg-muted); margin-bottom: 12px;
}
.cards-lesson-group { margin-bottom: 16px; }
.cards-lesson-title { font-size: 13px; color: var(--fg-dim); margin-bottom: 8px; }
.cards-lesson-title a { color: var(--fg-dim); }
.cards-lesson-title a:hover { color: var(--accent); }
.card-item {
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: var(--radius); padding: 12px 14px; margin-bottom: 6px;
}
.card-item-due { border-color: rgba(253,164,175,0.3); }
.card-view { display: flex; gap: 16px; align-items: flex-start; }
.card-front-text { flex: 1; font-size: 14px; color: var(--fg); }
.card-back-text {
flex: 1; font-size: 13px; color: var(--fg-dim);
padding-left: 14px; border-left: 2px solid var(--border);
}
.card-item-actions {
display: flex; align-items: center; gap: 8px; margin-top: 8px;
padding-top: 8px; border-top: 1px solid var(--border);
}
.card-item-meta { font-size: 11px; color: var(--fg-muted); font-family: var(--mono); flex: 1; }
.due-label { color: var(--warn); }
.card-edit-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.card-edit-ta {
min-height: 60px; resize: vertical;
background: var(--bg); border: 1px solid var(--border);
border-radius: 6px; padding: 8px 10px; color: var(--fg);
font-family: var(--sans); font-size: 13.5px; line-height: 1.5;
}
.card-edit-ta:focus { outline: none; border-color: var(--accent); }
@media (max-width: 600px) {
.card-view { flex-direction: column; gap: 8px; }
.card-back-text { padding-left: 0; border-left: none; border-top: 1px solid var(--border); padding-top: 8px; }
}
/* ── TOC ── */
.toc {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 18px;
margin-bottom: 28px;
display: inline-block;
min-width: 220px;
max-width: 100%;
}
.toc-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--fg-muted);
font-weight: 600;
margin-bottom: 10px;
}
.toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.toc-item a { font-size: 13.5px; color: var(--fg-dim); }
.toc-item a:hover { color: var(--accent); text-decoration: none; }
.toc-sub a { font-size: 12.5px; padding-left: 12px; display: block; color: var(--fg-muted); }
.toc-sub a:hover { color: var(--accent); }
/* ── Copy button on code blocks ── */
.prose pre { position: relative; }
.copy-btn {
position: absolute;
top: 8px; right: 8px;
background: var(--bg-elev-2);
border: 1px solid var(--border);
color: var(--fg-muted);
font-family: var(--mono);
font-size: 11px;
padding: 3px 8px;
border-radius: 5px;
cursor: pointer;
opacity: 0;
transition: opacity .15s, color .15s;
}
.prose pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { color: var(--fg); border-color: var(--accent); }
/* ── AI model select in sidebar ── */
.ai-model-select {
background: var(--bg-elev-2);
border: 1px solid var(--border);
color: var(--fg-muted);
font-family: var(--mono);
font-size: 11px;
padding: 3px 6px;
border-radius: 5px;
cursor: pointer;
outline: none;
max-width: 120px;
}
.ai-model-select:focus, .ai-model-select:hover { border-color: var(--accent); color: var(--fg); }
/* ── Invite copy button ── */
.copy-invite-btn {
background: none;
border: none;
color: var(--fg-muted);
cursor: pointer;
font-size: 13px;
padding: 0 4px;
border-radius: 4px;
transition: color .15s;
}
.copy-invite-btn:hover { color: var(--accent); }
/* ── Problems dashboard AI hint button ── */
.prob-hint-btn {
background: none; border: none; cursor: pointer;
font-size: 14px; padding: 0 2px; opacity: 0.5;
transition: opacity .15s;
flex-shrink: 0;
}
.prob-hint-btn:hover { opacity: 1; }
.lesson-prob-hint-btn {
position: absolute;
top: 12px;
right: 16px;
background: rgba(56, 189, 248, 0.05);
border: 1px solid rgba(56, 189, 248, 0.15);
width: 26px;
height: 26px;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
font-size: 13px;
padding: 0;
}
.lesson-prob-hint-btn:hover {
background: rgba(56, 189, 248, 0.15);
border-color: var(--accent);
transform: scale(1.08);
}
/* ── btn-ghost modifier ── */
.btn-ghost { background: transparent; }
/* ── Admin panel ── */
.admin-section { margin-bottom: 36px; }
.admin-section-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.admin-section-head h2 { margin: 0; }
.admin-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.admin-table {
width: 100%; border-collapse: collapse; font-size: 13.5px;
}
.admin-table th, .admin-table td {
padding: 10px 14px; text-align: left;
border-bottom: 1px solid var(--border);
}
.admin-table thead th {
background: var(--bg-elev-2);
font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
color: var(--fg-muted); font-weight: 600;
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover td { background: rgba(255,255,255,0.015); }
.admin-table tbody tr.row-ok td { background: rgba(134,239,172,0.05); }
.admin-table tbody tr.row-warn td { background: rgba(253,164,175,0.05); }
.admin-table tbody tr.row-dim td { opacity: 0.5; }
.admin-user-link { color: var(--fg); font-weight: 500; }
.admin-user-link:hover { color: var(--accent); text-decoration: none; }
.admin-pwd-form { display: flex; gap: 4px; align-items: center; }
.admin-pwd-form .btn {
padding: 4px 8px !important;
font-size: 11px !important;
height: 26px;
}
.admin-input {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--fg);
font-family: var(--sans);
font-size: 12px;
padding: 4px 6px;
width: 90px;
height: 26px;
outline: none;
}
.admin-input:focus { border-color: var(--accent); }
/* ── Profile page ── */
.profile-header {
display: flex; align-items: center; gap: 20px;
padding: 24px 0 28px; border-bottom: 1px solid var(--border);
margin-bottom: 8px;
}
.profile-avatar {
font-size: 52px; line-height: 1;
width: 80px; height: 80px;
display: flex; align-items: center; justify-content: center;
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 50%; flex-shrink: 0;
}
.profile-info h1 { margin: 0 0 6px; }
.profile-section-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.profile-certs-section { margin-top: 40px; }
.profile-certs-grid { display: flex; flex-direction: column; gap: 10px; }
.profile-cert-card {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px; background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 12px; text-decoration: none; color: inherit;
transition: border-color .15s, background .15s;
}
.profile-cert-card:hover { border-color: var(--accent); background: var(--bg-elev-2); }
.profile-cert-icon { font-size: 28px; flex-shrink: 0; }
.profile-cert-body { flex: 1; min-width: 0; }
.profile-cert-title { font-size: 15px; font-weight: 500; }
.profile-cert-meta { font-size: 13px; color: var(--fg-muted); margin-top: 2px; }
.profile-cert-score { color: #34d399; font-weight: 600; }
.profile-cert-badge { font-size: 22px; flex-shrink: 0; opacity: 0.8; }
/* Public profile — badge-only view */
.profile-badges-row { display: flex; flex-wrap: wrap; gap: 12px; }
.profile-cert-badge-card {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 12px; min-width: 88px; text-align: center;
}
.profile-cert-badge-card { text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
.profile-cert-badge-card:hover { border-color: var(--accent); background: var(--bg-elev-2); }
.profile-cert-badge-icon { font-size: 28px; }
.profile-cert-badge-name { font-size: 11px; color: var(--fg); font-weight: 500; line-height: 1.3; max-width: 80px; }
.profile-cert-badge-date { font-size: 10px; color: var(--fg-muted); margin-top: 2px; }
/* ── Avatar picker ── */
.avatar-picker {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.avatar-opt { cursor: pointer; }
.avatar-opt input[type="radio"] { display: none; }
.avatar-opt span {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
font-size: 24px;
border: 2px solid var(--border);
border-radius: 10px;
background: var(--bg-elev-2);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.avatar-opt input[type="radio"]:checked + span {
border-color: var(--accent);
background: rgba(56, 189, 248, 0.1);
transform: scale(1.08);
box-shadow: var(--shadow-sm), 0 0 12px rgba(56, 189, 248, 0.15);
}
.avatar-opt span:hover {
border-color: var(--accent);
background: var(--bg-elev-2);
transform: translateY(-2px);
}
/* ── AI access request status (settings page) ── */
.ai-request-status {
padding: 10px 14px; border-radius: 6px;
font-size: 13px; margin-bottom: 12px;
}
.ai-request-status.pending {
background: rgba(252,211,77,0.1); border: 1px solid rgba(252,211,77,0.3); color: #fcd34d;
}
.ai-request-status.denied {
background: rgba(253,164,175,0.1); border: 1px solid rgba(253,164,175,0.3); color: var(--warn);
}
/* ── Floating text-selection AI button ── */
.sel-ai-btn {
position: absolute;
background: var(--bg-elev);
border: 1px solid var(--accent);
color: var(--accent);
font-size: 12px; font-weight: 600;
padding: 5px 11px; border-radius: 6px;
cursor: pointer; z-index: 120;
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
transition: background .15s;
user-select: none;
}
.sel-ai-btn:hover { background: rgba(125,211,252,0.12); }
@media (max-width: 700px) {
main { padding: 20px 16px 60px; }
.topbar { padding: 12px 16px; }
.prob-columns { grid-template-columns: 1fr; }
.hero h1 { font-size: 24px; }
.settings-grid { grid-template-columns: 1fr; }
.ai-sidebar { width: 100vw; }
.ai-open .ai-fab { right: 18px; bottom: 18px; display: none; }
.ai-open .pomo-fab { display: none; }
.ai-fab { bottom: 18px; right: 18px; }
.topbar-search-input { width: 100px; }
.topbar-search-input:focus { width: 140px; }
.card-fields { grid-template-columns: 1fr; }
}
/* ── Notification bell ── */
.notif-bell {
font-size: 18px; text-decoration: none; position: relative;
padding: 4px 6px; border-radius: 6px;
transition: background .15s;
}
.notif-bell:hover { background: var(--bg-elev-2); }
.notif-bell-active { color: #fcd34d; }
/* ── Notifications page ── */
.notif-list { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.notif-item {
display: flex; align-items: flex-start; gap: 14px;
padding: 14px 16px; border-radius: 10px;
background: var(--bg-elev); border: 1px solid var(--border);
}
.notif-unread { border-color: var(--accent); background: rgba(125,211,252,0.05); }
.notif-body { flex: 1; }
.notif-title { font-weight: 600; margin-bottom: 4px; }
.notif-text { font-size: 13px; color: var(--muted); }
.notif-meta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.notif-link { font-size: 13px; color: var(--accent); white-space: nowrap; margin-left: auto; }
.notif-info .notif-title::before { content: 'ℹ '; }
.notif-success .notif-title::before { content: '✓ '; }
.notif-warn .notif-title::before { content: '⚠ '; }
/* ── Leaderboard ── */
.lb-table {
width: 100%; border-collapse: collapse;
background: var(--bg-elev); border-radius: 10px; overflow: hidden;
border: 1px solid var(--border);
}
.lb-table th, .lb-table td {
padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border);
}
.lb-table th { font-size: 12px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.lb-table tr:last-child td { border-bottom: none; }
.lb-table tbody tr:hover { background: var(--bg-elev-2); }
.lb-me { background: rgba(125,211,252,0.06) !important; }
.lb-rank { font-weight: 700; color: var(--muted); width: 40px; }
.lb-user { display: flex; align-items: center; gap: 10px; }
.lb-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.lb-avatar-placeholder {
width: 28px; height: 28px; border-radius: 50%;
background: var(--accent); color: #000; font-weight: 700;
display: flex; align-items: center; justify-content: center;
font-size: 13px; flex-shrink: 0;
}
.lb-table td a { color: var(--fg); text-decoration: none; }
.lb-table td a:hover { color: var(--accent); }
/* ── Lesson editor ── */
.editor-wrap { position: relative; }
.editor-textarea {
width: 100%; box-sizing: border-box;
background: var(--bg-elev); border: 1px solid var(--border);
color: var(--fg); font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 13px; line-height: 1.6; padding: 14px 16px;
border-radius: 8px; resize: vertical; outline: none;
transition: border-color .15s;
}
.editor-textarea:focus { border-color: var(--accent); }
/* ── Streak risk banner ── */
.streak-risk-banner {
background: rgba(252,211,77,0.1); border: 1px solid rgba(252,211,77,0.3);
color: #fcd34d; border-radius: 8px; padding: 10px 16px;
font-size: 14px; margin-bottom: 16px;
}
/* ── Category tabs on home page ── */
.cat-tabs {
display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
.cat-tab {
padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500;
text-decoration: none; color: var(--muted);
background: var(--bg-elev); border: 1px solid var(--border);
transition: background .15s, color .15s, border-color .15s;
}
.cat-tab:hover { color: var(--fg); border-color: var(--accent); }
.cat-tab.active {
background: var(--accent); color: #000; border-color: var(--accent);
font-weight: 700;
}
/* ── Leaderboard XP/Level columns ── */
.lb-xp { font-weight: 700; color: #facc15; }
.lb-level {
display: inline-block; background: rgba(167,139,250,0.15);
border: 1px solid rgba(167,139,250,0.3); color: #a78bfa;
font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 20px;
}
/* ── Sort select on home page ── */
.sort-select-wrap { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sort-select {
background: var(--bg-elev); border: 1px solid var(--border);
color: var(--fg); font-size: 13px; padding: 5px 10px; border-radius: 6px;
cursor: pointer; outline: none;
}
.sort-select:focus { border-color: var(--accent); }
/* ────────────────────────────────────────────────────────────
XP / Level / Gamification
──────────────────────────────────────────────────────────── */
.xp-bar-wrap {
height: 8px; background: var(--bg-elev-2); border-radius: 4px;
overflow: hidden; margin: 8px 0 4px;
}
.xp-bar {
height: 100%; background: linear-gradient(90deg, var(--accent), #a78bfa);
border-radius: 4px; transition: width .5s ease;
min-width: 2px;
}
.xp-bar-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.level-pill {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(167,139,250,0.15); border: 1px solid rgba(167,139,250,0.3);
color: #a78bfa; font-size: 12px; font-weight: 600;
padding: 2px 9px; border-radius: 20px;
}
.xp-pill {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(250,204,21,0.12); border: 1px solid rgba(250,204,21,0.25);
color: #facc15; font-size: 12px; font-weight: 600;
padding: 2px 9px; border-radius: 20px;
}
/* ── Mastery stars (lesson list) ── */
.mastery-stars {
font-size: 14px; color: var(--muted); letter-spacing: 1px;
flex-shrink: 0; margin-left: 8px;
}
.mastery-stars .star-full { color: #facc15; }
/* ── Course head actions ── */
.course-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.course-head-actions { display: flex; gap: 8px; flex-shrink: 0; margin-top: 4px; }
.btn-drill {
background: var(--bg-elev);
border: 1px solid var(--border);
color: var(--fg);
font-weight: 500;
}
.btn-drill:hover {
background: rgba(245, 158, 11, 0.08);
border-color: #f59e0b;
color: #f59e0b;
}
/* ────────────────────────────────────────────────────────────
Today page
──────────────────────────────────────────────────────────── */
.today-wrap { max-width: 720px; margin: 0 auto; }
.today-header {
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 14px; padding: 24px 28px; margin-bottom: 24px;
}
.today-header h1 { margin: 0 0 12px; font-size: 22px; }
.today-xp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.today-section { margin-bottom: 28px; }
.today-section-title {
font-size: 14px; font-weight: 600; text-transform: uppercase;
letter-spacing: .06em; color: var(--muted); margin: 0 0 14px;
}
.today-empty {
padding: 20px; background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 10px; text-align: center; color: var(--muted);
}
/* ── Missions ── */
.missions-list { display: flex; flex-direction: column; gap: 10px; }
.mission-item {
display: flex; align-items: center; gap: 14px;
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 10px; padding: 14px 16px;
transition: border-color .15s;
}
.mission-done { opacity: .6; }
.mission-check {
width: 26px; height: 26px; border-radius: 50%;
background: var(--bg-elev-2); border: 2px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 13px; flex-shrink: 0;
color: var(--accent); font-weight: 700;
}
.mission-done .mission-check {
background: rgba(125,211,252,0.15); border-color: var(--accent);
}
.mission-body { flex: 1; min-width: 0; }
.mission-label { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.mission-progress-bar {
height: 5px; background: var(--bg-elev-2); border-radius: 3px; overflow: hidden;
}
.mission-fill {
height: 100%; background: var(--accent); border-radius: 3px;
transition: width .4s ease;
}
.mission-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.mission-xp {
font-size: 13px; font-weight: 700; color: #facc15;
white-space: nowrap; flex-shrink: 0;
}
/* ── Due groups ── */
.due-groups { display: flex; flex-direction: column; gap: 8px; }
.due-group {
display: flex; align-items: center; gap: 12px;
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 10px; padding: 12px 16px;
}
.due-group-title { flex: 1; font-size: 14px; font-weight: 500; }
.due-count {
font-size: 13px; font-weight: 700;
background: rgba(252,165,50,0.15); color: #fb923c;
padding: 2px 8px; border-radius: 20px;
}
/* ── Continue card ── */
.continue-card {
display: block; text-decoration: none; color: inherit;
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 12px; padding: 18px 20px;
transition: border-color .15s, box-shadow .15s;
}
.continue-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.continue-card-inner { display: flex; align-items: center; gap: 12px; }
.continue-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.continue-title { font-size: 15px; font-weight: 600; }
.continue-arrow { margin-left: auto; font-size: 20px; color: var(--accent); flex-shrink: 0; }
/* ────────────────────────────────────────────────────────────
Quick Drill page
──────────────────────────────────────────────────────────── */
.drill-wrap { max-width: 680px; margin: 0 auto; }
.drill-header { margin-bottom: 20px; }
.drill-meta {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
.drill-progress { font-size: 13px; font-weight: 600; color: var(--muted); }
.drill-progress-bar-wrap {
height: 6px; background: var(--bg-elev-2); border-radius: 3px; overflow: hidden;
}
.drill-progress-bar {
height: 100%; background: linear-gradient(90deg, var(--accent), #a78bfa);
border-radius: 3px; transition: width .4s ease;
}
.drill-card {
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 16px; padding: 32px 28px; min-height: 220px;
}
.drill-front {
font-size: 18px; line-height: 1.6; margin-bottom: 20px;
}
.drill-back { margin-top: 16px; }
.drill-back-text { font-size: 15px; line-height: 1.6; color: var(--muted); }
.drill-grade-row { display: flex; gap: 12px; margin-top: 20px; }
.drill-choices {
display: flex; flex-direction: column; gap: 10px; margin-top: 16px;
}
.drill-choice-btn {
background: var(--bg-elev-2); border: 1px solid var(--border);
color: var(--fg); padding: 12px 16px; border-radius: 10px;
font-size: 14px; text-align: left; cursor: pointer;
transition: background .15s, border-color .15s;
}
.drill-choice-btn:hover:not(:disabled) { border-color: var(--accent); background: rgba(125,211,252,0.08); }
.drill-choice-btn:disabled { cursor: default; opacity: .85; }
.drill-choice-correct { border-color: #34d399 !important; background: rgba(52,211,153,0.12) !important; color: #34d399; }
.drill-choice-wrong { border-color: #f87171 !important; background: rgba(248,113,113,0.12) !important; color: #f87171; }
.drill-result {
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 16px; padding: 48px 28px;
text-align: center;
}
.drill-result-icon { font-size: 56px; margin-bottom: 16px; }
.drill-result-xp {
font-size: 22px; font-weight: 700; color: #facc15;
margin: 12px 0;
}
.drill-result-btns { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }
/* ────────────────────────────────────────────────────────────
Choice & Cloze card types (in review)
──────────────────────────────────────────────────────────── */
.choice-options { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.choice-btn {
background: var(--bg-elev-2); border: 1px solid var(--border);
color: var(--fg); padding: 12px 16px; border-radius: 10px;
font-size: 15px; text-align: left; cursor: pointer;
transition: background .15s, border-color .15s;
}
.choice-btn:hover:not(:disabled) { border-color: var(--accent); background: rgba(125,211,252,0.08); }
.choice-btn:disabled { cursor: default; opacity: .85; }
.choice-correct { border-color: #34d399 !important; background: rgba(52,211,153,0.12) !important; color: #34d399; }
.choice-wrong { border-color: #f87171 !important; background: rgba(248,113,113,0.12) !important; color: #f87171; }
.choice-explanation { margin-top: 12px; font-size: 14px; }
.cloze-blank {
display: inline-block;
background: var(--bg-elev-2); border: 1px solid var(--border);
border-radius: 4px; padding: 0 8px; min-width: 48px;
color: transparent; user-select: none;
}
.cloze-answer {
display: inline-block;
background: rgba(52,211,153,0.12); border: 1px solid #34d399;
border-radius: 4px; padding: 0 8px; color: #34d399; font-weight: 600;
}
/* ── review context header ── */
.review-context { display: block; margin-bottom: 2px; }
/* ── Due badge on lesson row ── */
.badge.warn { background: rgba(251,146,60,0.15); color: #fb923c; border: 1px solid rgba(251,146,60,0.3); }
@media (max-width: 600px) {
.today-header { padding: 18px 16px; }
.drill-card { padding: 22px 16px; }
.drill-result { padding: 32px 16px; }
.course-head-top { flex-direction: column; }
.course-head-actions { width: 100%; }
}
/* ────────────────────────────────────────────────────────────
XP float animation
──────────────────────────────────────────────────────────── */
#xp-toast-container { position: fixed; bottom: 80px; left: 0; width: 100%; pointer-events: none; z-index: 9000; }
.xp-float {
position: absolute; font-size: 18px; font-weight: 700;
color: #facc15; text-shadow: 0 1px 4px rgba(0,0,0,0.5);
animation: xpFloat 1.4s ease-out forwards;
white-space: nowrap;
}
@keyframes xpFloat {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-80px); }
}
/* ── Level-up modal ── */
.levelup-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.6); z-index: 9100;
}
.levelup-overlay.visible { display: block; }
.levelup-modal {
display: none; position: fixed; z-index: 9200;
top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.85);
background: var(--bg-elev); border: 1px solid var(--accent);
border-radius: 20px; padding: 40px 48px; text-align: center;
transition: transform .3s ease;
}
.levelup-modal.visible { display: block; transform: translate(-50%, -50%) scale(1); }
.levelup-icon { font-size: 56px; margin-bottom: 12px; }
.levelup-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.levelup-level { font-size: 36px; font-weight: 900; color: var(--accent); margin-bottom: 20px; }
/* ── Achievement toast ── */
.ach-toast-container { position: fixed; bottom: 24px; left: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 9300; pointer-events: none; }
.ach-toast {
display: flex; align-items: center; gap: 12px;
background: var(--bg-elev); border: 1px solid var(--accent);
border-radius: 12px; padding: 12px 16px;
opacity: 0; transform: translateX(-20px);
transition: opacity .35s, transform .35s;
pointer-events: auto;
}
.ach-toast.visible { opacity: 1; transform: translateX(0); }
.ach-toast-icon { font-size: 24px; flex-shrink: 0; }
.ach-toast-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ach-toast-name { font-size: 14px; font-weight: 600; }
/* ────────────────────────────────────────────────────────────
Achievements page
──────────────────────────────────────────────────────────── */
.ach-header { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.ach-counter { font-size: 16px; font-weight: 700; color: var(--accent); }
.ach-progress-bar-wrap { height: 8px; background: var(--bg-elev-2); border-radius: 4px; overflow: hidden; margin-bottom: 24px; }
.ach-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), #a78bfa); border-radius: 4px; transition: width .5s; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ach-card {
display: flex; align-items: center; gap: 14px;
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 12px; padding: 14px 16px;
transition: border-color .15s, background .15s;
}
.ach-card:not(.ach-locked) {
border-color: rgba(125,211,252,0.25);
}
.ach-card:not(.ach-locked):hover {
border-color: rgba(125,211,252,0.5);
background: rgba(125,211,252,0.03);
}
.ach-locked { opacity: .4; }
.ach-card .ach-icon {
display: flex; align-items: center; justify-content: center;
width: 46px; height: 46px; font-size: 26px; line-height: 1;
background: var(--bg-elev-2); border-radius: 10px;
flex-shrink: 0;
}
.ach-card:not(.ach-locked) .ach-icon { background: rgba(125,211,252,0.08); }
.ach-body { flex: 1; min-width: 0; }
.ach-title { font-size: 14px; font-weight: 600; }
.ach-desc { font-size: 12px; margin-top: 2px; }
.ach-date { font-size: 11px; margin-top: 4px; }
.ach-badge {
display: flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%;
background: rgba(52,211,153,0.15); color: #34d399;
font-size: 13px; font-weight: 700; flex-shrink: 0;
}
/* ────────────────────────────────────────────────────────────
Weak spots (today page)
──────────────────────────────────────────────────────────── */
.weak-list { display: flex; flex-direction: column; gap: 8px; }
.weak-item {
display: flex; align-items: center; gap: 12px;
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 10px; padding: 12px 16px; text-decoration: none; color: inherit;
transition: border-color .15s;
}
.weak-item:hover { border-color: var(--accent); }
.weak-stars { font-size: 13px; color: #facc15; flex-shrink: 0; letter-spacing: 2px; }
.weak-body { flex: 1; min-width: 0; }
.weak-lesson { font-size: 14px; font-weight: 600; }
.weak-course { font-size: 12px; margin-top: 2px; }
.weak-arrow { color: var(--accent); flex-shrink: 0; }
/* ────────────────────────────────────────────────────────────
Typing card
──────────────────────────────────────────────────────────── */
.typing-form { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.typing-input {
flex: 1; min-width: 160px;
background: var(--bg-elev-2); border: 1px solid var(--border);
color: var(--fg); padding: 10px 14px; border-radius: 8px;
font-size: 15px; outline: none;
transition: border-color .15s;
}
.typing-input:focus { border-color: var(--accent); }
.typing-correct { color: #34d399; font-weight: 600; }
.typing-wrong { color: #f87171; font-weight: 600; }
/* ────────────────────────────────────────────────────────────
Matching card
──────────────────────────────────────────────────────────── */
.matching-wrap { display: flex; gap: 14px; margin-top: 16px; }
.matching-col { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.matching-btn {
background: var(--bg-elev-2); border: 1.5px solid var(--border);
color: var(--fg); padding: 10px 14px; border-radius: 8px;
font-size: 14px; text-align: left; cursor: pointer;
transition: background .12s, border-color .12s;
}
.matching-btn:hover:not(:disabled) { border-color: var(--accent); background: rgba(125,211,252,0.08); }
.matching-selected { border-color: var(--accent) !important; background: rgba(125,211,252,0.15) !important; }
.matching-matched { border-color: #34d399 !important; background: rgba(52,211,153,0.12) !important; color: #34d399; cursor: default; }
.matching-wrong { border-color: #f87171 !important; background: rgba(248,113,113,0.12) !important; }
/* Drill matching */
#drill-matching { flex-direction: row; gap: 14px; }
#drill-matching .matching-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
/* ────────────────────────────────────────────────────────────
Ordering card
──────────────────────────────────────────────────────────── */
.ordering-wrap, #drill-ordering {
display: flex; flex-direction: column; gap: 8px; margin-top: 16px;
}
.ordering-btn {
background: var(--bg-elev-2); border: 1.5px solid var(--border);
color: var(--fg); padding: 10px 14px; border-radius: 8px;
font-size: 14px; text-align: left; cursor: pointer; position: relative;
transition: background .12s, border-color .12s;
}
.ordering-btn:hover:not(:disabled) { border-color: var(--accent); background: rgba(125,211,252,0.08); }
.ordering-btn.ordering-selected { border-color: var(--accent); background: rgba(125,211,252,0.12); cursor: default; }
.ordering-num {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: var(--accent); color: #000; font-size: 12px; font-weight: 700;
margin-right: 8px;
}
.ordering-result { margin-top: 12px; font-size: 14px; padding: 10px 14px; border-radius: 8px; }
.ordering-correct { background: rgba(52,211,153,0.12); color: #34d399; font-weight: 600; }
.ordering-wrong { background: rgba(248,113,113,0.1); color: #f87171; }
.ordering-wrong ol { margin: 8px 0 0 16px; color: var(--fg); }
/* ────────────────────────────────────────────────────────────
Prerequisites banner (course page)
──────────────────────────────────────────────────────────── */
.prereq-banner {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
background: rgba(250,204,21,0.08); border: 1px solid rgba(250,204,21,0.25);
border-radius: 10px; padding: 10px 16px; margin-bottom: 16px;
}
.prereq-label { font-size: 13px; color: var(--muted); flex-shrink: 0; }
.prereq-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 500;
background: var(--bg-elev-2); border: 1px solid var(--border);
text-decoration: none; color: var(--fg);
transition: border-color .15s;
}
.prereq-chip:hover { border-color: var(--accent); }
.prereq-done { border-color: #34d399 !important; color: #34d399; }
.course-head-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.course-time { font-size: 13px; }
.muted-badge { background: transparent !important; border: 1px solid var(--border) !important; color: var(--muted) !important; }
/* ────────────────────────────────────────────────────────────
Admin course import
──────────────────────────────────────────────────────────── */
.import-dropzone {
border: 2px dashed var(--border); border-radius: 14px;
padding: 32px; text-align: center; cursor: pointer;
transition: border-color .2s, background .2s;
}
.import-dropzone:hover, .import-dropzone.import-drag-over {
border-color: var(--accent); background: rgba(125,211,252,0.05);
}
.import-dropzone-icon { font-size: 40px; margin-bottom: 10px; }
.import-dropzone-text { font-size: 14px; color: var(--muted); }
.import-file-label {
color: var(--accent); cursor: pointer; text-decoration: underline;
}
.import-filename { font-size: 13px; margin-top: 8px; }
.import-progress-bar-wrap { height: 6px; background: var(--bg-elev-2); border-radius: 3px; overflow: hidden; margin: 12px 0 4px; }
.import-progress-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s ease; width: 0%; }
.import-progress-text { font-size: 13px; }
/* ────────────────────────────────────────────────────────────
Exam page
──────────────────────────────────────────────────────────── */
.exam-wrap { max-width: 720px; margin: 0 auto; }
.exam-card { background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: 16px; padding: 40px; text-align: center; }
.exam-intro-card h1 { font-size: 24px; margin: 12px 0 4px; }
.exam-course-icon { font-size: 48px; margin-bottom: 8px; }
.exam-meta-row { display: flex; justify-content: center; gap: 32px; margin: 24px 0; }
.exam-meta-item { text-align: center; }
.exam-meta-val { font-size: 28px; font-weight: 700; color: var(--accent); }
.exam-meta-lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }
.exam-history { margin: 16px 0; text-align: left; max-width: 280px; margin: 16px auto; }
.exam-attempt-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.attempt-passed { color: #34d399; }
.attempt-failed { color: var(--muted); }
.exam-passed-banner {
display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.25);
border-radius: 12px; padding: 12px 20px; margin-bottom: 20px;
}
.exam-passed-score { color: #34d399; font-weight: 600; }
.exam-timer-bar { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); padding: 10px 0; margin-bottom: 16px; }
.exam-timer-inner { display: flex; align-items: center; gap: 12px; justify-content: center; }
.exam-timer-label { font-size: 13px; color: var(--muted); }
.exam-timer-val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 56px; }
.exam-timer-track { height: 4px; background: var(--bg-elev-2); border-radius: 2px; width: 120px; }
.exam-timer-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 100%; transition: width 1s linear; }
.timer-urgent { color: #f87171 !important; }
.exam-progress-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.exam-dots { display: flex; gap: 4px; flex-wrap: wrap; }
.exam-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-elev-2); border: 1.5px solid var(--border); }
.dot-answered { background: var(--accent); border-color: var(--accent); }
.exam-question { background: var(--bg-elev-1); border: 1px solid var(--border); border-radius: 14px; padding: 28px; margin-bottom: 16px; }
.exam-question.hidden { display: none; }
.exam-q-num { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.exam-q-text { font-size: 17px; font-weight: 500; margin-bottom: 20px; line-height: 1.5; }
.exam-choices { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.exam-choice-label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px; transition: border-color .15s, background .15s; }
.exam-choice-label:hover { border-color: var(--accent); background: rgba(125,211,252,0.05); }
.exam-choice-label input[type=radio]:checked + .exam-choice-text { color: var(--accent); font-weight: 500; }
.exam-choice-label:has(input:checked) { border-color: var(--accent); background: rgba(125,211,252,0.08); }
.exam-choice-text { font-size: 15px; }
.exam-fill-input { width: 100%; padding: 12px 14px; background: var(--bg-elev-2); border: 1.5px solid var(--border); border-radius: 10px; color: var(--fg); font-size: 15px; }
.exam-fill-input:focus { border-color: var(--accent); outline: none; }
.exam-nav-row { display: flex; justify-content: space-between; margin-top: 20px; }
.btn-finish { background: #34d399; color: #000; font-weight: 700; }
.btn-finish:hover { background: #2dd4bf; }
.btn-lg { padding: 14px 32px; font-size: 15px; }
.exam-result-card { padding: 48px; }
.exam-result-icon { font-size: 64px; margin-bottom: 16px; }
.exam-result-score { font-size: 48px; font-weight: 800; margin: 8px 0; }
.score-passed { color: #34d399; }
.score-failed { color: #f87171; }
.exam-result-detail { color: var(--muted); font-size: 15px; margin-bottom: 24px; }
.exam-result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* ── Exam mode (immersive) ────────────────────────────────────────────── */
body.exam-mode .topbar { display: none !important; }
body.exam-mode .ai-fab { display: none !important; }
body.exam-mode .pomo-fab { display: none !important; }
body.exam-mode main { padding-top: 0; }
body.exam-mode .exam-breadcrumb { display: none; }
body.exam-mode .exam-passed-banner { display: none; }
/* Exam topbar */
.exam-topbar {
display: none;
position: sticky; top: 0; z-index: 200;
background: var(--bg-elev); border-bottom: 1px solid var(--border);
padding: 0 20px; height: 52px;
align-items: center; justify-content: space-between;
}
body.exam-mode .exam-topbar { display: flex; }
.exam-topbar-exit {
display: flex; align-items: center; gap: 6px;
background: none; border: none; color: var(--fg-muted); font-size: 13px;
cursor: pointer; padding: 6px 10px; border-radius: 8px; transition: color .15s, background .15s;
}
.exam-topbar-exit:hover { color: #f87171; background: rgba(248,113,113,0.08); }
.exam-topbar-center { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.exam-topbar-icon { font-size: 18px; }
.exam-topbar-right { display: flex; align-items: center; gap: 12px; }
.exam-timer-topbar { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); min-width: 52px; text-align: right; }
.exam-timer-topbar.timer-urgent { color: #f87171; animation: pulse-urgent .8s ease-in-out infinite; }
@keyframes pulse-urgent { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.exam-tab-warn-badge { font-size: 12px; color: #fbbf24; background: rgba(251,191,36,0.1); padding: 2px 8px; border-radius: 12px; }
/* Tab switch toast */
.exam-tab-toast {
position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-20px);
background: rgba(251,191,36,0.15); border: 1px solid rgba(251,191,36,0.35);
color: #fbbf24; padding: 10px 20px; border-radius: 10px; font-size: 14px;
z-index: 300; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none;
}
.exam-tab-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Exit / Submit modal */
.exam-exit-modal {
display: none; position: fixed; inset: 0; z-index: 500;
align-items: center; justify-content: center;
}
.exam-exit-modal.visible { display: flex; }
.exam-exit-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.exam-exit-card {
position: relative; background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 16px; padding: 36px; max-width: 400px; width: 90%; text-align: center;
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.exam-exit-icon { font-size: 40px; margin-bottom: 12px; }
.exam-exit-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.exam-exit-card p { color: var(--fg-muted); font-size: 14px; line-height: 1.5; margin-bottom: 24px; }
.exam-exit-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.exam-exit-confirm-btn { background: #f87171; border-color: #f87171; color: #000; }
.exam-exit-confirm-btn:hover { background: #ef4444; border-color: #ef4444; }
/* Submitting spinner */
.exam-submitting { text-align: center; padding: 60px 0; }
.exam-submitting p { color: var(--fg-muted); margin-top: 16px; }
.exam-submitting-spinner {
width: 40px; height: 40px; border-radius: 50%; margin: 0 auto;
border: 3px solid var(--bg-elev-2); border-top-color: var(--accent);
animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Intro enhancements */
.exam-intro-notice { background: var(--bg-elev-2); border-radius: 10px; padding: 12px 16px; margin: 16px 0 20px; text-align: left; font-size: 13px; color: var(--fg-muted); line-height: 1.6; }
.exam-intro-notice p { margin: 0 0 4px; }
.exam-intro-notice p:last-child { margin-bottom: 0; }
.exam-start-btn { background: var(--accent); color: #000; font-weight: 700; }
.exam-start-btn:hover { filter: brightness(1.1); }
.exam-q-counter-text { font-size: 13px; color: var(--fg-muted); }
.exam-choices-tf { flex-direction: row !important; gap: 16px !important; }
/* Exam breakdown */
.exam-breakdown { max-width: 720px; margin: 24px auto 0; }
.exam-breakdown-title { font-size: 15px; font-weight: 600; color: var(--fg-dim); margin-bottom: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.breakdown-row { display: flex; gap: 14px; padding: 14px 16px; border-radius: 10px; margin-bottom: 8px; border: 1px solid var(--border); background: var(--bg-elev); }
.breakdown-ok { border-color: rgba(52, 211, 153, 0.2); background: rgba(52, 211, 153, 0.04); }
.breakdown-fail { border-color: rgba(248, 113, 113, 0.2); background: rgba(248, 113, 113, 0.04); }
.breakdown-num { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--bg-elev-2); color: var(--fg-muted); margin-top: 1px; }
.breakdown-body { flex: 1; min-width: 0; }
.breakdown-question { font-size: 14px; color: var(--fg); margin-bottom: 6px; line-height: 1.4; }
.breakdown-answers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.breakdown-your { font-weight: 500; }
.answer-ok { color: #34d399; }
.answer-fail { color: #f87171; }
.breakdown-correct { color: #34d399; background: rgba(52, 211, 153, 0.1); padding: 2px 8px; border-radius: 6px; font-size: 12px; }
/* ────────────────────────────────────────────────────────────
Certificate
──────────────────────────────────────────────────────────── */
.cert-wrap {
max-width: 820px;
margin: 32px auto 64px;
}
.cert-card {
background: radial-gradient(circle at center, var(--bg-elev) 0%, var(--bg) 100%), var(--bg-elev);
border: 1px solid var(--border);
border-radius: 16px;
padding: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
position: relative;
overflow: hidden;
}
[data-theme="light"] .cert-card {
background: radial-gradient(circle at center, #ffffff 0%, #fcfdfd 100%);
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}
.cert-card::after {
content: '';
position: absolute;
top: -50%;
left: -60%;
width: 30%;
height: 200%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.13) 30%,
rgba(255, 255, 255, 0.22) 50%,
rgba(255, 255, 255, 0.13) 70%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(25deg);
transition: none;
pointer-events: none;
z-index: 10;
}
.cert-card:hover::after {
left: 150%;
transition: left 1.2s ease-in-out;
}
.cert-border-outer {
border: 2.5px solid rgba(251, 191, 36, 0.4);
padding: 8px;
border-radius: 12px;
}
.cert-border-inner {
border: 1px solid rgba(251, 191, 36, 0.25);
padding: 64px 48px 56px;
border-radius: 8px;
position: relative;
text-align: center;
z-index: 2;
}
/* Watermark */
.cert-watermark {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 280px;
opacity: 0.035;
pointer-events: none;
user-select: none;
z-index: 1;
}
[data-theme="light"] .cert-watermark {
opacity: 0.025;
}
/* Corner decorations with dots */
.cert-corner {
position: absolute;
width: 32px;
height: 32px;
border: 2px solid rgba(251, 191, 36, 0.75);
pointer-events: none;
z-index: 3;
}
.cert-corner::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
background: #fbbf24;
border-radius: 50%;
}
.cert-corner-tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.cert-corner-tl::after { bottom: -4px; right: -4px; }
.cert-corner-tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.cert-corner-tr::after { bottom: -4px; left: -4px; }
.cert-corner-bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.cert-corner-bl::after { top: -4px; right: -4px; }
.cert-corner-br { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.cert-corner-br::after { top: -4px; left: -4px; }
.cert-crest {
width: 68px;
height: 68px;
margin: 0 auto 16px;
filter: drop-shadow(0 3px 6px rgba(217, 119, 6, 0.25));
transition: transform 0.4s ease;
}
.cert-card:hover .cert-crest {
transform: rotateY(180deg);
}
.cert-header {
margin-bottom: 36px;
}
.cert-logo {
font-family: 'Cinzel', serif;
font-size: 38px;
font-weight: 800;
color: #fbbf24;
letter-spacing: 0.14em;
margin-bottom: 8px;
text-transform: uppercase;
}
.cert-subtitle {
font-family: var(--sans);
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.24em;
color: var(--fg-muted);
font-weight: 600;
}
.cert-body {
margin-bottom: 44px;
}
.cert-recipient-label {
font-family: 'Lora', serif;
font-style: italic;
font-size: 14.5px;
color: var(--fg-dim);
margin-bottom: 18px;
}
.cert-recipient {
font-family: 'Cinzel', serif;
font-size: 38px;
font-weight: 700;
color: var(--fg);
margin-bottom: 24px;
letter-spacing: 0.05em;
border-bottom: 2px solid rgba(251, 191, 36, 0.3);
display: inline-block;
padding-bottom: 8px;
min-width: 360px;
}
.cert-course-label {
font-family: 'Lora', serif;
font-style: italic;
font-size: 14.5px;
color: var(--fg-dim);
margin-bottom: 16px;
}
.cert-course-title {
font-family: 'Cinzel', serif;
font-size: 28px;
font-weight: 700;
color: #fbbf24;
margin-bottom: 36px;
letter-spacing: 0.03em;
}
[data-theme="light"] .cert-course-title {
color: #d97706;
}
.cert-meta-row {
display: flex;
justify-content: center;
gap: 56px;
margin-top: 20px;
}
.cert-meta-item {
display: flex;
flex-direction: column;
align-items: center;
}
.cert-meta-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--fg-muted);
margin-bottom: 6px;
font-family: var(--sans);
}
.cert-meta-val {
font-family: var(--mono);
font-size: 14px;
font-weight: 600;
color: var(--fg);
}
.cert-meta-val.cert-score {
color: var(--good);
}
.cert-difficulty {
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.05em;
}
.cert-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 56px;
padding: 0 48px;
}
.cert-signature {
width: 180px;
text-align: center;
}
.sig-line {
border-bottom: 1.5px solid var(--border);
height: 32px;
margin-bottom: 8px;
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
}
.sig-handwritten {
font-family: 'Great Vibes', cursive;
font-size: 25px;
color: #3b82f6; /* Blue ink */
transform: translateY(6px) rotate(-1.5deg);
pointer-events: none;
user-select: none;
white-space: nowrap;
}
[data-theme="light"] .sig-handwritten {
color: #1d4ed8; /* Darker blue for light mode contrast */
}
.sig-title {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg-muted);
}
/* Gold CSS Badge Seal */
.cert-badge-gold {
position: relative;
width: 84px;
height: 84px;
display: flex;
align-items: center;
justify-content: center;
}
.badge-circle {
width: 64px;
height: 64px;
background: radial-gradient(circle at 35% 35%, #ffe082 0%, #fbbf24 45%, #d97706 90%, #b45309 100%);
border-radius: 50%;
border: 2px solid #d97706;
box-shadow: 0 4px 16px rgba(217, 119, 6, 0.3), inset 0 2px 3px rgba(255, 255, 255, 0.4);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
position: relative;
transition: transform 0.3s ease;
}
.cert-badge-gold:hover .badge-circle {
transform: scale(1.08);
}
.badge-circle::before {
content: '';
position: absolute;
inset: 3px;
border: 1px dashed rgba(217, 119, 6, 0.6);
border-radius: 50%;
}
.badge-circle-inner {
font-size: 26px;
transform: translateY(-1px);
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
}
.badge-ribbon {
position: absolute;
bottom: -16px;
width: 18px;
height: 42px;
background: #d97706;
z-index: 1;
}
.badge-ribbon-left {
left: 26px;
transform: rotate(15deg);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 80%, 0% 100%);
}
.badge-ribbon-right {
right: 26px;
transform: rotate(-15deg);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 80%, 0% 100%);
}
.cert-validation {
margin-top: 24px;
font-family: var(--mono);
font-size: 9.5px;
color: var(--fg-muted);
opacity: 0.65;
display: flex;
justify-content: center;
gap: 8px;
letter-spacing: 0.05em;
z-index: 5;
position: relative;
}
.cert-validation .bullet {
color: rgba(251, 191, 36, 0.5);
}
.cert-actions {
display: flex;
gap: 12px;
margin-top: 24px;
justify-content: center;
}
/* Print Stylesheet Overrides */
@media print {
body {
background: #0b0f19 !important;
color: #f8fafc !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
main {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 100vh !important;
}
.topbar, .breadcrumb, .cert-actions, .pomo-fab, .pomo-panel, .pomo-overlay, .pomo-toast, .ai-fab, .ai-sidebar, .shortcuts-overlay, .shortcuts-modal {
display: none !important;
}
.cert-wrap {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
}
.cert-card {
width: 276mm !important;
height: 190mm !important;
box-sizing: border-box !important;
background: radial-gradient(circle at center, #151d30 0%, #0b0f19 100%), #151d30 !important;
color: #ffffff !important;
border: 1px solid rgba(251, 191, 36, 0.3) !important;
border-radius: 16px !important;
box-shadow: none !important;
padding: 20px !important;
margin: 0 auto !important;
position: relative !important;
overflow: hidden !important;
page-break-inside: avoid;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.cert-border-outer {
border: 2.5px solid rgba(251, 191, 36, 0.45) !important;
padding: 8px !important;
border-radius: 12px !important;
height: 100% !important;
box-sizing: border-box !important;
}
.cert-border-inner {
border: 1px solid rgba(251, 191, 36, 0.3) !important;
background: radial-gradient(circle at center, transparent 30%, rgba(191, 149, 63, 0.02) 100%) !important;
padding: 40px 32px 32px !important;
border-radius: 8px !important;
height: 100% !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
position: relative !important;
z-index: 2 !important;
}
.cert-watermark {
color: #fbbf24 !important;
opacity: 0.035 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.cert-corner {
border-color: rgba(251, 191, 36, 0.75) !important;
}
.cert-corner::after {
background: #fbbf24 !important;
}
.cert-header {
margin-bottom: 20px !important;
}
.cert-crest {
margin-bottom: 12px !important;
}
.cert-logo {
color: #fbbf24 !important;
font-size: 34px !important;
}
.cert-body {
margin-bottom: 24px !important;
}
.cert-recipient {
color: #ffffff !important;
border-bottom: 2px solid rgba(251, 191, 36, 0.35) !important;
font-size: 34px !important;
}
.cert-course-title {
color: #fbbf24 !important;
font-size: 24px !important;
margin-bottom: 24px !important;
}
.cert-meta-val {
color: #ffffff !important;
}
.cert-meta-val.cert-score {
color: #34d399 !important;
}
.sig-line {
border-bottom: 1.5px solid rgba(255, 255, 255, 0.15) !important;
}
.sig-handwritten {
color: #3b82f6 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.badge-circle {
background: radial-gradient(circle at 35% 35%, #ffe082 0%, #fbbf24 45%, #d97706 90%, #b45309 100%) !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.badge-ribbon {
background: #d97706 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.cert-validation {
margin-top: 16px !important;
color: #94a3b8 !important;
opacity: 0.7 !important;
}
}
/* ────────────────────────────────────────────────────────────
Lesson Check modal
──────────────────────────────────────────────────────────── */
.lc-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.65);
display: flex; align-items: center; justify-content: center;
z-index: 300; backdrop-filter: blur(4px);
opacity: 0; pointer-events: none; transition: opacity .2s;
}
.lc-overlay.open { opacity: 1; pointer-events: all; }
.lc-modal {
background: var(--bg-elev-1); border: 1px solid var(--border);
border-radius: 16px; padding: 28px; max-width: 560px; width: 92%;
max-height: 85vh; overflow-y: auto;
transform: scale(.95); transition: transform .2s;
}
.lc-overlay.open .lc-modal { transform: scale(1); }
.lc-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.lc-modal-head h2 { margin: 0; font-size: 18px; }
.lc-close { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 4px 8px; }
.lc-question { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.lc-question:last-child { border-bottom: none; }
.lc-q-num { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.lc-q-text { font-size: 15px; font-weight: 500; margin-bottom: 12px; }
.lc-choice { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 6px; transition: border-color .15s; }
.lc-choice:hover { border-color: var(--accent); }
.lc-fill { width: 100%; padding: 8px 12px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; color: var(--fg); font-size: 14px; }
.lc-footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.lc-result { padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.lc-result-pass { background: rgba(52,211,153,0.12); color: #34d399; }
.lc-result-fail { background: rgba(248,113,113,0.10); color: #f87171; }
.check-badge { font-size: 12px; color: #34d399; background: rgba(52,211,153,0.12); padding: 3px 10px; border-radius: 20px; }
.done-check-wrap { display: flex; align-items: center; gap: 8px; }
/* ────────────────────────────────────────────────────────────
Code Playground & Run output
──────────────────────────────────────────────────────────── */
.playground-section { margin-top: 28px; }
.playground-details { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.playground-summary {
list-style: none; display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; cursor: pointer; font-weight: 600; font-size: 15px;
background: var(--bg-elev-1);
}
.playground-summary::-webkit-details-marker { display: none; }
.playground-summary::before { content: '▶'; margin-right: 8px; font-size: 11px; transition: transform .15s; }
details[open] .playground-summary::before { transform: rotate(90deg); }
.playground-body { padding: 16px; border-top: 1px solid var(--border); background: var(--bg-elev-1); }
.playground-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.pg-tab { padding: 5px 14px; border-radius: 20px; border: 1.5px solid var(--border); background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; transition: all .15s; }
.pg-tab.active { border-color: var(--accent); color: var(--accent); background: rgba(125,211,252,0.08); }
.pg-editor { min-height: 160px; font-family: var(--font-mono); font-size: 13px; }
.playground-toolbar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.btn-run { background: #34d399 !important; color: #000 !important; font-weight: 700; }
.btn-run:hover { background: #2dd4bf !important; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.pg-output {
margin-top: 10px; background: var(--bg); border: 1px solid var(--border);
border-radius: 8px; padding: 12px 14px; font-family: var(--font-mono);
font-size: 13px; white-space: pre-wrap; min-height: 40px; max-height: 300px; overflow-y: auto;
}
.run-output {
margin-top: 6px; background: var(--bg); border: 1px solid var(--border);
border-radius: 8px; padding: 10px 12px; font-family: var(--font-mono);
font-size: 12px; white-space: pre-wrap; max-height: 200px; overflow-y: auto;
}
.run-ok { border-color: rgba(52,211,153,0.3); }
.run-error { border-color: rgba(248,113,113,0.3); color: #f87171; }
.btn-run-sm { font-size: 12px; padding: 4px 10px; }
/* ────────────────────────────────────────────────────────────
Pomodoro timer widget
──────────────────────────────────────────────────────────── */
.pomodoro-widget {
position: fixed; bottom: 24px; right: 24px; z-index: 200;
}
.pomodoro-btn {
display: flex; align-items: center; gap: 8px;
background: var(--bg-elev-1); border: 1.5px solid var(--border);
border-radius: 28px; padding: 10px 18px; cursor: pointer;
font-size: 15px; font-weight: 600; color: var(--fg);
box-shadow: 0 4px 16px rgba(0,0,0,.25); transition: all .15s;
font-variant-numeric: tabular-nums;
}
.pomodoro-btn:hover { border-color: var(--accent); box-shadow: 0 4px 20px rgba(125,211,252,.15); }
/* ────────────────────────────────────────────────────────────
Mermaid diagrams
──────────────────────────────────────────────────────────── */
.mermaid-wrap { text-align: center; margin: 24px 0; overflow-x: auto; }
.mermaid-wrap svg { max-width: 100%; border-radius: 8px; }
.mermaid-error { font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding: 12px; background: var(--bg-elev-2); border-radius: 8px; }
/* ────────────────────────────────────────────────────────────
52-week GitHub-style heatmap
──────────────────────────────────────────────────────────── */
.activity-section { margin-top: 36px; }
.heatmap-wrap { display: flex; align-items: flex-start; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
.heatmap-row-labels {
display: flex; flex-direction: column; gap: 3px; padding-top: 20px;
flex-shrink: 0;
}
.heatmap-row-labels span { font-size: 10px; color: var(--muted); height: 12px; line-height: 12px; }
.heatmap-grid-wrap { flex: 1; min-width: 0; }
.heatmap-months { display: flex; gap: 3px; margin-bottom: 4px; }
.heatmap-month-lbl { font-size: 10px; color: var(--muted); width: 12px; overflow: visible; white-space: nowrap; flex-shrink: 0; }
.heatmap-grid { display: flex; gap: 3px; }
.heatmap-col { display: flex; flex-direction: column; gap: 3px; }
.activity-cell { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.activity-cell.level-0 { background: var(--bg-elev-2); }
.activity-cell.level-1 { background: rgba(125,211,252,0.25); }
.activity-cell.level-2 { background: rgba(125,211,252,0.5); }
.activity-cell.level-3 { background: rgba(125,211,252,0.75); }
.activity-cell.level-4 { background: var(--accent); }
.activity-cell.today-cell { outline: 1.5px solid var(--accent); outline-offset: 1px; }
.cell-empty { opacity: 0; pointer-events: none; }
.activity-legend { display: flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 12px; }
/* ────────────────────────────────────────────────────────────
Course sections
──────────────────────────────────────────────────────────── */
.course-section { margin-bottom: 24px; }
.course-section-title {
font-size: 13px; font-weight: 600; text-transform: uppercase;
letter-spacing: .07em; color: var(--muted); padding: 8px 0 6px;
border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.course-eta { font-size: 13px; }
.btn-exam { background: rgba(251,191,36,0.12); border: 1.5px solid rgba(251,191,36,0.4); color: #fbbf24; }
.btn-exam:hover { background: rgba(251,191,36,0.2); border-color: #fbbf24; }
.btn-exam-passed { background: rgba(52,211,153,0.12); border: 1.5px solid rgba(52,211,153,0.4); color: #34d399; }
.btn-exam-passed:hover { background: rgba(52,211,153,0.2); }
.exam-cta-link { color: var(--accent); text-decoration: underline; margin-left: 4px; }
/* ── Exam finale (bottom of course, uses lesson-row base) ── */
.exam-finale-wrap { margin-top: 32px; margin-bottom: 24px; }
.exam-finale-divider {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
color: var(--fg-muted);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .15em;
font-family: var(--mono);
}
.exam-finale-divider::before,
.exam-finale-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border) 50%, transparent);
}
.exam-finale-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 16px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.03) 100%);
border: 1px solid rgba(251, 191, 36, 0.25);
color: #fbbf24;
box-shadow: 0 4px 12px rgba(251, 191, 36, 0.05);
}
[data-theme="light"] .exam-finale-badge {
background: linear-gradient(135deg, rgba(217, 119, 6, 0.08) 0%, rgba(245, 158, 11, 0.02) 100%);
border-color: rgba(217, 119, 6, 0.2);
color: #d97706;
}
.exam-planned-stub {
display: flex; flex-direction: column; align-items: center;
gap: 16px; padding: 64px 24px; text-align: center;
}
.exam-planned-icon { font-size: 56px; }
.exam-planned-stub h2 { margin: 0; font-size: 20px; }
.exam-planned-stub p { margin: 0; max-width: 360px; }
/* Exam planned placeholder stub */
.exam-planned-placeholder {
background: radial-gradient(circle at top, rgba(251, 191, 36, 0.08) 0%, rgba(15, 17, 21, 0) 70%), var(--bg-elev) !important;
}
[data-theme="light"] .exam-planned-placeholder {
background: radial-gradient(circle at top, rgba(217, 119, 6, 0.06) 0%, rgba(255, 255, 255, 0) 70%), var(--bg-elev) !important;
}
.exam-planned-placeholder::before {
background: linear-gradient(90deg, var(--border) 0%, #fbbf24 50%, var(--border) 100%) !important;
}
[data-theme="light"] .exam-planned-placeholder::before {
background: linear-gradient(90deg, var(--border) 0%, #d97706 50%, var(--border) 100%) !important;
}
.exam-badge-large {
background: rgba(251, 191, 36, 0.1) !important;
color: #fbbf24 !important;
border: 1px solid rgba(251, 191, 36, 0.25) !important;
box-shadow: 0 0 15px rgba(251, 191, 36, 0.1) !important;
}
[data-theme="light"] .exam-badge-large {
background: rgba(217, 119, 6, 0.08) !important;
color: #d97706 !important;
border-color: rgba(217, 119, 6, 0.2) !important;
}
.lesson-row--exam {
text-decoration: none;
cursor: pointer;
border-radius: calc(var(--radius) * 1.25);
transition: border-color .2s, transform .2s, box-shadow .2s, background .2s;
position: relative;
overflow: hidden;
}
.lesson-row--exam .lesson-row-link {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
}
.lesson-row-exam-icon {
font-size: 24px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: transform .2s;
}
.lesson-row--exam .title {
font-size: 16px;
font-weight: 700;
background: linear-gradient(135deg, var(--fg) 40%, rgba(251, 191, 36, 0.9) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
[data-theme="light"] .lesson-row--exam .title {
background: linear-gradient(135deg, var(--fg) 40%, #b45309 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.exam-row-arrow { color: var(--fg-muted); font-size: 14px; margin-left: auto; padding-left: 8px; transition: color .2s, transform .2s; }
/* Exam is ready to take */
.lesson-row--exam-ready {
background: linear-gradient(135deg, var(--bg-elev) 0%, rgba(251, 191, 36, 0.03) 100%);
border-color: rgba(251, 191, 36, 0.25);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 12px rgba(251, 191, 36, 0.05);
}
[data-theme="light"] .lesson-row--exam-ready {
background: linear-gradient(135deg, var(--bg-elev) 0%, rgba(217, 119, 6, 0.02) 100%);
border-color: rgba(217, 119, 6, 0.2);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.04);
}
.lesson-row--exam-ready:hover {
transform: translateY(-2px);
border-color: #fbbf24;
background: linear-gradient(135deg, var(--bg-elev) 0%, rgba(251, 191, 36, 0.08) 100%);
box-shadow: 0 8px 30px rgba(251, 191, 36, 0.15), 0 0 20px rgba(251, 191, 36, 0.08);
}
[data-theme="light"] .lesson-row--exam-ready:hover {
border-color: #d97706;
background: linear-gradient(135deg, var(--bg-elev) 0%, rgba(217, 119, 6, 0.06) 100%);
box-shadow: 0 8px 20px rgba(217, 119, 6, 0.1);
}
.lesson-row--exam-ready:hover .exam-row-arrow { color: #fbbf24; transform: translateX(3px); }
[data-theme="light"] .lesson-row--exam-ready:hover .exam-row-arrow { color: #d97706; }
.lesson-row--exam-ready .lesson-row-exam-icon {
animation: pulse-gold 2.5s infinite ease-in-out;
}
@keyframes pulse-gold {
0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0)); }
50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5)); }
100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0)); }
}
/* Exam is passed */
.lesson-row--exam-passed {
background: linear-gradient(135deg, var(--bg-elev) 0%, rgba(52, 211, 153, 0.03) 100%);
border-color: rgba(52, 211, 153, 0.25);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 12px rgba(52, 211, 153, 0.04);
}
[data-theme="light"] .lesson-row--exam-passed {
background: linear-gradient(135deg, var(--bg-elev) 0%, rgba(16, 185, 129, 0.02) 100%);
border-color: rgba(16, 185, 129, 0.22);
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.03);
}
.lesson-row--exam-passed .title {
background: linear-gradient(135deg, var(--fg) 50%, #34d399 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
[data-theme="light"] .lesson-row--exam-passed .title {
background: linear-gradient(135deg, var(--fg) 50%, #16a34a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.lesson-row--exam-passed:hover {
transform: translateY(-2px);
border-color: rgba(52, 211, 153, 0.45);
background: linear-gradient(135deg, var(--bg-elev) 0%, rgba(52, 211, 153, 0.06) 100%);
box-shadow: 0 6px 24px rgba(52, 211, 153, 0.15), 0 0 16px rgba(52, 211, 153, 0.08);
}
[data-theme="light"] .lesson-row--exam-passed:hover {
border-color: rgba(22, 163, 74, 0.4);
background: linear-gradient(135deg, var(--bg-elev) 0%, rgba(22, 163, 74, 0.05) 100%);
box-shadow: 0 6px 18px rgba(22, 163, 74, 0.08);
}
.lesson-row--exam-passed:hover .exam-row-arrow { color: var(--good); transform: translateX(3px); }
/* Exam is locked */
.lesson-row--exam-locked {
background: rgba(21, 25, 34, 0.35);
border: 1px dashed var(--border);
opacity: 0.6;
cursor: not-allowed;
}
[data-theme="light"] .lesson-row--exam-locked {
background: rgba(241, 245, 249, 0.35);
}
.lesson-row--exam-locked .title {
background: none;
-webkit-text-fill-color: initial;
color: var(--fg-dim);
}
/* Exam in development / planned */
.lesson-row--exam.in-development {
background: repeating-linear-gradient(45deg, var(--bg-elev), var(--bg-elev) 10px, rgba(251, 191, 36, 0.015) 10px, rgba(251, 191, 36, 0.015) 20px);
border: 1px dashed rgba(251, 191, 36, 0.2);
opacity: 0.75;
}
[data-theme="light"] .lesson-row--exam.in-development {
background: repeating-linear-gradient(45deg, var(--bg-elev), var(--bg-elev) 10px, rgba(217, 119, 6, 0.01) 10px, rgba(217, 119, 6, 0.01) 20px);
border-color: rgba(217, 119, 6, 0.15);
}
.lesson-row--exam.in-development:hover {
transform: none;
border-color: rgba(251, 191, 36, 0.35);
}
[data-theme="light"] .lesson-row--exam.in-development:hover {
border-color: rgba(217, 119, 6, 0.3);
}
.info-badge { background: rgba(125,211,252,0.1) !important; color: var(--accent) !important; border: 1px solid rgba(125,211,252,0.25) !important; }
/* ────────────────────────────────────────────────────────────
Level pill in topbar
──────────────────────────────────────────────────────────── */
.level-pill-nav {
display: inline-flex; align-items: center; justify-content: center;
background: rgba(125,211,252,0.12); border: 1.5px solid rgba(125,211,252,0.35);
color: var(--accent); border-radius: 20px; padding: 2px 10px;
font-size: 12px; font-weight: 700; letter-spacing: .03em;
text-decoration: none; transition: all .15s;
}
.level-pill-nav:hover { background: rgba(125,211,252,0.22); border-color: var(--accent); }
/* ────────────────────────────────────────────────────────────
Mobile responsive tweaks
──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.pomodoro-widget { bottom: 12px; right: 12px; }
.pomodoro-btn { padding: 8px 14px; font-size: 14px; }
.lc-modal { width: 96vw; padding: 20px 16px; }
.heatmap-wrap { overflow-x: auto; }
.stat-cards { grid-template-columns: 1fr 1fr; }
.exam-body { padding: 16px; }
.cert-body { padding: 24px 16px; }
.topbar-search { display: none; }
.playground-tabs { flex-wrap: wrap; }
}
/* run-btn alias for playground */
.run-btn { background: #34d399 !important; color: #000 !important; font-weight: 700; padding: 5px 16px; font-size: 13px; }
.run-btn:hover { background: #2dd4bf !important; }
.run-btn:disabled { opacity: .5; cursor: not-allowed; }
.pg-output.error-out { color: #f87171; }
/* ════════════════════════════════════════════════════════════
UX/UI POLISH LAYER — all overrides go here
════════════════════════════════════════════════════════════ */
/* ── Interactive Stats Pills ── */
.stat-pill {
transition: background .12s, border-color .12s, transform .12s, box-shadow .12s;
display: inline-flex;
align-items: center;
gap: 5px;
}
a.stat-pill {
text-decoration: none !important;
}
a.stat-pill:hover {
transform: translateY(-1.5px);
background: var(--bg-elev-2);
}
a.stat-pill.due:hover {
border-color: var(--accent);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.15);
}
a.stat-pill.warn:hover {
border-color: var(--warn);
box-shadow: 0 0 12px rgba(248, 113, 113, 0.15);
}
/* ── Daily Goal Success Interactivity ── */
.daily-goal-fill.goal-completed {
background: linear-gradient(90deg, var(--good) 0%, #34d399 100%) !important;
box-shadow: 0 0 8px rgba(74, 222, 128, 0.25);
}
.daily-goal-text.text-completed {
color: var(--good) !important;
font-weight: 600;
}
/* ── Course Card Metadata Row ── */
.course-card-meta-row {
display: flex;
align-items: center;
gap: 12px;
margin-top: 12px;
margin-bottom: 4px;
}
.course-card-meta-row .meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--fg-muted);
font-family: var(--mono);
}
.course-card-meta-row .meta-icon {
font-size: 11px;
}
/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); }
/* ── Nav active link ── */
.topbar-nav a.active-nav {
color: var(--fg);
position: relative;
}
.topbar-nav a.active-nav::after {
content: '';
position: absolute; bottom: -14px; left: 0; right: 0;
height: 2px; background: var(--accent); border-radius: 1px;
}
/* ── Brand subtle gradient ── */
.brand { letter-spacing: -0.03em; }
/* ── Topbar notif bell ── */
.notif-bell {
font-size: 16px; line-height: 1; position: relative;
color: var(--fg-muted); text-decoration: none;
display: inline-flex; align-items: center;
transition: color .15s;
}
.notif-bell:hover { color: var(--fg); text-decoration: none; }
.notif-bell-active { color: #fbbf24; }
/* ── Cards — stronger hover with micro gradient ── */
.card {
will-change: transform;
}
.card:hover {
border-color: var(--accent);
background: linear-gradient(135deg, var(--bg-elev), rgba(125,211,252,0.04));
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
[data-theme="light"] .card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
background: linear-gradient(135deg, #fff, rgba(2,132,199,0.04));
}
/* ── Course card colored accent line using custom property ── */
.card::before {
background: var(--accent, #7dd3fc);
opacity: 1;
width: 3px;
}
/* ── Lesson row improvements ── */
.lesson-row.done { opacity: 0.55; }
.lesson-row.done .title { text-decoration: line-through; text-decoration-color: var(--border); }
.lesson-row:hover { transform: translateX(1px); transition: border-color .15s, transform .12s; }
/* ── Buttons polish ── */
.btn {
font-weight: 500;
letter-spacing: 0.01em;
}
.btn-primary {
background: var(--accent);
color: var(--bg);
border-color: var(--accent);
font-weight: 600;
}
.btn-primary:hover { opacity: .88; border-color: var(--accent); color: var(--bg); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--fg-dim); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
/* ── Stat cards (stats page) ── */
.stat-val { color: var(--accent); }
/* ── Leaderboard table improvements ── */
.lb-table {
width: 100%; border-collapse: separate; border-spacing: 0;
border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.lb-table thead th {
background: var(--bg-elev-2); padding: 12px 16px;
font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
color: var(--fg-muted); font-weight: 600; text-align: left;
border-bottom: 1px solid var(--border);
}
.lb-table tbody tr {
transition: background .12s;
}
.lb-table tbody tr:hover { background: rgba(125,211,252,0.04); }
.lb-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border); }
.lb-table td { padding: 11px 16px; vertical-align: middle; }
.lb-me { background: rgba(125,211,252,0.06) !important; }
.lb-rank { font-family: var(--mono); font-weight: 700; color: var(--fg-muted); }
.lb-user { display: flex; align-items: center; gap: 10px; }
.lb-avatar {
width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
flex-shrink: 0;
}
.lb-avatar-placeholder {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
background: rgba(125,211,252,0.12); color: var(--accent);
font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.lb-level {
display: inline-block; padding: 1px 8px; border-radius: 999px;
font-size: 11px; font-weight: 700; font-family: var(--mono);
background: rgba(167,139,250,0.12); color: #a78bfa;
border: 1px solid rgba(167,139,250,0.3);
}
.lb-xp { font-family: var(--mono); font-size: 13px; font-weight: 600; }
/* ── Today page section polish ── */
.today-section {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px;
margin-bottom: 16px;
}
.today-section-title {
font-size: 13px; font-weight: 700;
text-transform: uppercase; letter-spacing: .07em;
color: var(--fg-muted); margin: 0 0 16px;
}
/* ── Mission items ── */
.mission-item {
display: flex; align-items: center; gap: 14px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.mission-item:last-child { border-bottom: none; padding-bottom: 0; }
.mission-item:first-child { padding-top: 0; }
.mission-check {
width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
border: 2px solid var(--border);
color: var(--fg-muted); background: var(--bg-elev-2);
}
.mission-done .mission-check {
background: rgba(52,211,153,0.15);
border-color: #34d399; color: #34d399;
}
.mission-body { flex: 1; min-width: 0; }
.mission-label { font-size: 14px; font-weight: 500; }
.mission-done .mission-label { text-decoration: line-through; color: var(--fg-muted); }
.mission-progress-bar {
height: 3px; background: var(--bg-elev-2); border-radius: 2px;
overflow: hidden; margin-top: 6px;
}
.mission-fill {
height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s;
}
.mission-done .mission-fill { background: #34d399; }
.mission-meta { font-size: 11px; color: var(--fg-muted); margin-top: 3px; }
.mission-xp {
font-size: 12px; font-weight: 700; font-family: var(--mono);
color: #facc15; white-space: nowrap; flex-shrink: 0;
}
/* ── Today header ── */
.today-header {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px;
margin-bottom: 16px;
}
.today-header h1 { margin: 0 0 12px; font-size: 24px; }
.today-xp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.xp-pill {
font-size: 13px; font-family: var(--mono);
padding: 3px 10px; border-radius: 999px;
background: rgba(250,204,21,0.1); border: 1px solid rgba(250,204,21,0.25);
color: #facc15;
}
.level-pill {
font-size: 13px; font-weight: 700; font-family: var(--mono);
padding: 3px 10px; border-radius: 999px;
background: rgba(125,211,252,0.1); border: 1px solid rgba(125,211,252,0.25);
color: var(--accent);
}
.xp-bar-wrap {
height: 6px; background: var(--bg-elev-2); border-radius: 3px;
overflow: hidden; margin-bottom: 6px;
}
.xp-bar {
height: 100%;
background: linear-gradient(90deg, var(--accent), #a78bfa);
border-radius: 3px; transition: width .5s;
}
.xp-bar-label { font-size: 12px; color: var(--fg-muted); }
/* ── Today continue card ── */
.continue-card {
display: block; background: var(--bg-elev-2);
border: 1px solid var(--border); border-radius: 10px;
padding: 14px 16px; text-decoration: none; color: inherit;
transition: border-color .15s, background .15s;
}
.continue-card:hover { border-color: var(--accent); background: rgba(125,211,252,0.05); text-decoration: none; }
.continue-card-inner { display: flex; align-items: center; gap: 12px; }
.continue-label { font-size: 12px; color: var(--fg-muted); margin-bottom: 3px; }
.continue-title { font-size: 15px; font-weight: 600; }
.continue-card-inner > div { flex: 1; min-width: 0; }
.continue-arrow { color: var(--accent); font-size: 18px; flex-shrink: 0; }
/* ── Due groups ── */
.due-groups { display: flex; flex-direction: column; gap: 8px; }
.due-group {
display: flex; align-items: center; gap: 12px;
background: var(--bg-elev-2); border-radius: 8px; padding: 10px 14px;
}
.due-group-title { flex: 1; font-size: 14px; font-weight: 500; }
.due-count {
font-family: var(--mono); font-size: 13px; font-weight: 700;
color: var(--accent); min-width: 24px; text-align: right;
}
/* ── Today empty state ── */
.today-empty {
text-align: center; padding: 20px; color: var(--fg-muted); font-size: 14px;
}
/* ── Streak risk banner ── */
.streak-risk-banner {
padding: 10px 16px; border-radius: 10px; margin-bottom: 16px;
font-size: 13px; font-weight: 500;
background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.25);
color: #fbbf24;
}
/* ── XP progress bar on home page ── */
.course-xp-bar { margin-top: 8px; }
/* ── Category tabs ── */
.cat-tabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.cat-tab {
font-size: 13px; font-weight: 500;
padding: 5px 14px; border-radius: 999px;
border: 1px solid var(--border); color: var(--fg-dim);
background: var(--bg-elev); text-decoration: none; transition: all .15s;
}
.cat-tab:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.cat-tab.active { background: rgba(125,211,252,0.1); border-color: var(--accent); color: var(--accent); }
/* ── Sort select ── */
.sort-select-wrap { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.sort-select {
background: var(--bg-elev); border: 1px solid var(--border);
color: var(--fg-dim); font-size: 13px; border-radius: 6px; padding: 4px 8px;
outline: none; cursor: pointer;
}
.sort-select:hover { border-color: var(--accent); color: var(--fg); }
/* ── Section titles on home ── */
.section-title {
font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: var(--fg-muted); padding-bottom: 10px;
border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
/* ── Heatmap improvements ── */
.heatmap-wrap { overflow-x: auto; padding-bottom: 4px; }
.activity-section h2 { font-size: 17px; margin-bottom: 16px; }
/* ── Stat cards equal height ── */
.stat-card {
min-height: 90px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
}
/* ── Profile/public page ── */
.profile-header {
display: flex; align-items: center; gap: 20px;
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 14px; padding: 24px; margin-bottom: 24px;
}
.profile-avatar-big {
width: 64px; height: 64px; border-radius: 50%;
background: rgba(125,211,252,0.12); border: 2px solid rgba(125,211,252,0.25);
display: flex; align-items: center; justify-content: center;
font-size: 24px; font-weight: 700; color: var(--accent); flex-shrink: 0;
}
.profile-name { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.profile-joined { font-size: 13px; color: var(--fg-muted); }
/* ── Notifications ── */
.notif-item {
display: flex; align-items: flex-start; gap: 14px;
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 10px; padding: 14px 16px; margin-bottom: 8px;
transition: border-color .15s;
}
.notif-item.unread { border-left: 3px solid var(--accent); }
.notif-icon { font-size: 20px; flex-shrink: 0; line-height: 1; margin-top: 1px; }
/* ── Drill card improvements ── */
.drill-card {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 16px;
}
.drill-card:hover { border-color: var(--border); }
/* ── Review card ── */
.card-srs {
transition: border-color .2s;
}
/* ── Mobile responsive additions ── */
@media (max-width: 768px) {
main { padding: 24px 16px 80px; }
.topbar { display: flex; justify-content: space-between; padding: 12px 16px; }
.topbar-nav { gap: 14px; }
.topbar-nav a { font-size: 13px; }
h1 { font-size: 24px; }
.grid { grid-template-columns: 1fr; }
.prob-columns { grid-template-columns: 1fr; }
.stat-cards { grid-template-columns: repeat(3, 1fr); }
.ach-grid { grid-template-columns: 1fr; }
.today-header h1 { font-size: 20px; }
.lb-table { font-size: 13px; }
.lb-table th:nth-child(n+5), .lb-table td:nth-child(n+5) { display: none; }
}
@media (max-width: 480px) {
.topbar-search, .shortcuts-btn, .theme-btn { display: none; }
.stat-cards { grid-template-columns: repeat(2, 1fr); }
.topbar-nav a[href="/achievements"], .topbar-nav a[href="/leaderboard"] { display: none; }
}
/* ── Focus ring ── */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
button:focus:not(:focus-visible) { outline: none; }
/* ── Selection ── */
::selection { background: rgba(125,211,252,0.25); color: var(--fg); }
/* ── Smooth page transitions ── */
main { animation: pageFadeIn .18s ease-out; }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* ─────────────────────────────────────────────────────────────
Lesson row link (entire row clickable)
───────────────────────────────────────────────────────────── */
.lesson-row-link {
display: flex; align-items: center; flex: 1;
text-decoration: none; color: inherit;
gap: 12px; min-width: 0;
padding: 14px 16px; cursor: pointer;
user-select: none; -webkit-user-select: none;
}
.lesson-row-link:hover { color: inherit; text-decoration: none; }
.lesson-row-link:hover .title { color: var(--accent); }
.lesson-row-link:focus { outline: none; }
.lesson-row-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lesson-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lesson-row-meta { display: flex; flex-wrap: wrap; gap: 6px; }
/* ─────────────────────────────────────────────────────────────
Drill – empty state
───────────────────────────────────────────────────────────── */
.drill-empty {
display: flex; flex-direction: column; align-items: center;
justify-content: center; text-align: center;
padding: 80px 24px; gap: 12px;
}
.drill-empty-icon { font-size: 52px; line-height: 1; margin-bottom: 8px; }
.drill-empty h2 { font-size: 22px; font-weight: 700; margin: 0; }
.drill-empty .muted { font-size: 14px; max-width: 340px; }
/* ─────────────────────────────────────────────────────────────
Quiz – sequential flow
───────────────────────────────────────────────────────────── */
.quiz-flow-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
.quiz-flow-counter {
font-size: 13px; font-weight: 600; color: var(--fg-muted);
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 20px; padding: 2px 10px;
}
.quiz-flow-bar {
height: 4px; background: var(--border); border-radius: 4px;
margin-bottom: 20px; overflow: hidden;
}
.quiz-flow-fill {
height: 100%; background: var(--accent); border-radius: 4px;
transition: width .3s ease;
}
.quiz-flow-result {
display: flex; flex-direction: column; align-items: center; gap: 12px;
text-align: center; padding: 32px 24px; background: var(--bg-elev);
border: 1px solid var(--border); border-radius: 14px;
}
.quiz-result-icon { font-size: 48px; line-height: 1; }
.quiz-result-score {
font-size: 32px; font-weight: 800; color: var(--accent); line-height: 1.2;
}
.quiz-result-retry {
display: block;
min-width: 200px;
margin: 16px auto 0;
}
.quiz-save-error { color: var(--warn, #f87171) !important; margin-top: 10px; }
.quiz-flow-result p { color: var(--fg-muted); font-size: 14px; margin: 0; }
/* ─────────────────────────────────────────────────────────────
Pomodoro – FAB (sits left of AI FAB) + modal dialog
───────────────────────────────────────────────────────────── */
.pomo-fab {
position: fixed; bottom: 28px; right: 28px; z-index: 160;
width: 46px; height: 46px; border-radius: 50%;
background: var(--bg-elev-1); border: 1.5px solid var(--border);
cursor: pointer; font-size: 19px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 16px rgba(0,0,0,.35);
transition: border-color .15s, transform .15s, box-shadow .15s, right .3s;
}
body:has(#ai-fab) .pomo-fab {
right: 84px;
}
.pomo-fab:hover { border-color: var(--accent); transform: scale(1.08); box-shadow: 0 4px 20px rgba(125,211,252,.2); }
.pomo-fab.pomo-running { border-color: var(--accent); animation: pomoFabPulse 2s ease-in-out infinite; }
@keyframes pomoFabPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(125,211,252,.35); }
50% { box-shadow: 0 0 0 8px rgba(125,211,252,0); }
}
/* small countdown badge below the tomato */
.pomo-fab-badge {
position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
background: var(--accent); color: #0f1115;
font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums;
padding: 1px 5px; border-radius: 8px; white-space: nowrap;
pointer-events: none;
}
/* overlay backdrop */
.pomo-overlay {
position: fixed; inset: 0; z-index: 170;
background: rgba(0,0,0,.45);
animation: pomoFadeIn .15s ease-out;
}
@keyframes pomoFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* modal dialog */
.pomo-panel {
position: fixed; z-index: 171;
top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 320px;
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 20px; padding: 24px 24px 20px;
box-shadow: 0 24px 60px rgba(0,0,0,.55);
flex-direction: column; gap: 0;
animation: pomoPanelIn .18s cubic-bezier(.2,.8,.4,1);
}
@keyframes pomoPanelIn {
from { opacity: 0; transform: translate(-50%, -48%) scale(.95); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.pomo-panel-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px;
}
.pomo-panel-title { font-size: 16px; font-weight: 700; }
.pomo-close {
background: none; border: none; cursor: pointer;
color: var(--fg-muted); font-size: 18px; line-height: 1;
width: 30px; height: 30px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
transition: background .12s, color .12s;
}
.pomo-close:hover { background: var(--bg-elev-2); color: var(--fg); }
.pomo-mode-row {
display: flex; gap: 6px; margin-bottom: 20px;
}
.pomo-mode-btn {
flex: 1; padding: 6px 4px; font-size: 11px; font-weight: 600;
background: var(--bg-elev-2); border: 1px solid var(--border);
border-radius: 10px; cursor: pointer; color: var(--fg-muted);
transition: background .12s, border-color .12s, color .12s;
white-space: nowrap;
}
.pomo-mode-btn:hover { color: var(--fg); border-color: var(--accent); }
.pomo-mode-btn.active {
background: rgba(125,211,252,.12); border-color: var(--accent); color: var(--accent);
}
.pomo-ring-wrap {
position: relative; width: 180px; height: 180px; margin: 0 auto 20px;
}
.pomo-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.pomo-ring-bg { fill: none; stroke: var(--border); stroke-width: 6; }
.pomo-ring-fill {
fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round;
transition: stroke-dashoffset .9s linear;
}
.pomo-ring-center {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
pointer-events: none;
}
.pomo-time-big {
font-size: 38px; font-weight: 800;
font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1;
}
.pomo-mode-label {
font-size: 11px; font-weight: 600; color: var(--fg-muted);
text-transform: uppercase; letter-spacing: .08em; margin-top: 4px;
}
.pomo-controls {
display: flex; gap: 12px; justify-content: center; align-items: center; margin-bottom: 20px;
}
.pomo-ctrl-btn {
width: 44px; height: 44px; border-radius: 50%; border: none;
cursor: pointer; font-size: 16px;
display: flex; align-items: center; justify-content: center;
transition: background .12s, transform .1s;
}
.pomo-play-btn {
width: 56px; height: 56px; font-size: 20px;
background: var(--accent); color: #0f1115;
box-shadow: 0 4px 16px rgba(125,211,252,.3);
}
.pomo-play-btn:hover { transform: scale(1.08); }
.pomo-reset-btn, .pomo-skip-btn {
background: var(--bg-elev-2); color: var(--fg-muted); font-size: 18px;
}
.pomo-reset-btn:hover, .pomo-skip-btn:hover { background: var(--bg-elev); color: var(--fg); transform: scale(1.05); }
.pomo-stats-row {
display: flex; justify-content: center; align-items: center; gap: 0; margin-bottom: 16px;
}
.pomo-stat { text-align: center; flex: 1; }
.pomo-stat-divider { width: 1px; height: 32px; background: var(--border); }
.pomo-stat-val { font-size: 24px; font-weight: 800; color: var(--accent); line-height: 1; }
.pomo-stat-lbl { font-size: 11px; color: var(--fg-muted); margin-top: 3px; }
.pomo-settings { border-top: 1px solid var(--border); padding-top: 12px; }
.pomo-settings summary {
font-size: 12px; color: var(--fg-muted); cursor: pointer;
list-style: none; display: flex; align-items: center; gap: 6px; user-select: none;
}
.pomo-settings summary::-webkit-details-marker { display: none; }
.pomo-settings[open] summary { color: var(--fg); margin-bottom: 12px; }
.pomo-settings-body { display: flex; flex-direction: column; gap: 10px; }
.pomo-settings-body label {
display: flex; align-items: center; justify-content: space-between;
font-size: 13px; color: var(--fg-dim);
}
.pomo-settings-body input[type="number"] {
width: 56px; padding: 4px 8px; border-radius: 8px;
background: var(--bg-elev-2); border: 1px solid var(--border);
color: var(--fg); font-size: 13px; text-align: center;
}
.pomo-set-row {
display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-dim);
}
.pomo-set-row label { flex: 1; }
.pomo-set-row input[type="number"] {
width: 52px; padding: 4px 6px; border-radius: 8px;
background: var(--bg-elev-2); border: 1px solid var(--border);
color: var(--fg); font-size: 13px; text-align: center;
}
.pomo-toggle-row {
display: flex; align-items: center; justify-content: space-between;
font-size: 13px; color: var(--fg-dim);
}
.pomo-settings-actions { display: flex; gap: 8px; }
.pomo-danger-btn { color: var(--error, #f87171) !important; }
/* session dots */
.pomo-dots {
display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; min-height: 14px;
}
.pomo-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--border); transition: background 0.2s;
}
.pomo-dot.filled { background: var(--accent); }
/* in-panel toast */
.pomo-toast {
margin: 4px 0 8px; padding: 9px 14px; border-radius: 10px;
background: var(--bg-elev-2); border: 1px solid var(--border);
font-size: 13px; color: var(--fg); text-align: center;
opacity: 0; transition: opacity 0.3s;
}
.pomo-toast.visible { opacity: 1; }
/* scroll lock when modal open */
body.pomo-open { overflow: hidden; }
/* ─────────────────────────────────────────────────────────────
Mobile: pomo adjustments
───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.pomo-fab { bottom: 18px; right: 18px; width: 40px; height: 40px; font-size: 17px; }
body:has(#ai-fab) .pomo-fab { right: 72px; }
.pomo-panel { width: calc(100vw - 32px); }
.pomodoro-widget { bottom: 12px; right: 12px; }
}
/* ─────────────────────────────────────────────────────────────
Draft / In Development Lessons
───────────────────────────────────────────────────────────── */
.badge.draft-badge {
background: rgba(107, 115, 135, 0.15);
color: var(--fg-dim);
border: 1px dashed var(--fg-muted);
}
.badge.progress-badge {
background: rgba(249, 115, 22, 0.15);
color: #f97316;
border: 1px solid rgba(249, 115, 22, 0.3);
}
.lesson-row.in-development {
opacity: 0.75;
}
.lesson-row.in-development:hover {
border-color: var(--border);
transform: none;
}
.draft-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 24px;
background: radial-gradient(circle at top, rgba(125, 211, 252, 0.08) 0%, rgba(15, 17, 21, 0) 70%), var(--bg-elev);
border: 1px dashed var(--border);
border-radius: calc(var(--radius) * 1.5);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(8px);
margin: 20px 0;
position: relative;
overflow: hidden;
}
.draft-placeholder::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--border) 0%, var(--accent) 50%, var(--border) 100%);
}
.draft-icon {
font-size: 64px;
margin-bottom: 24px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(5deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
.draft-placeholder h1 {
font-size: 32px;
margin-bottom: 12px;
background: linear-gradient(135deg, var(--fg) 30%, var(--accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.draft-text {
font-size: 18px;
color: var(--fg-dim);
font-weight: 500;
margin-bottom: 8px;
}
.draft-subtext {
font-size: 14px;
color: var(--fg-muted);
max-width: 480px;
margin-bottom: 28px;
}
.draft-badge-large {
font-family: var(--mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: 6px 16px;
background: rgba(125, 211, 252, 0.1);
color: var(--accent);
border: 1px solid rgba(125, 211, 252, 0.2);
border-radius: 999px;
margin-bottom: 12px;
font-weight: 600;
box-shadow: 0 0 15px rgba(125, 211, 252, 0.1);
}
.auth-form label.toggle-row {
flex-direction: row;
align-items: center;
gap: 8px;
}
.lb-avatar-emoji {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
font-size: 18px;
line-height: 1;
flex-shrink: 0;
}
/* ── Notification Bell (SVG) styling ── */
.notif-bell {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
color: var(--fg-dim);
background: transparent;
border: 1px solid transparent;
transition: all 0.2s;
position: relative;
}
.notif-bell:hover {
background: var(--bg-elev-2) !important;
color: var(--fg) !important;
border-color: var(--border) !important;
}
.notif-bell-active {
color: var(--accent) !important;
}
.notif-dot {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
background: var(--warn);
border-radius: 50%;
box-shadow: 0 0 6px var(--warn);
}
/* ── Notification list feed redesign ── */
.notif-list {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 680px;
margin-top: 16px;
}
.notif-item {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
border-radius: var(--radius);
background: var(--bg-elev);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
margin-bottom: 0 !important;
}
.notif-item:hover {
transform: translateY(-1px);
border-color: var(--accent);
box-shadow: var(--shadow-md), var(--shadow-glow);
}
.notif-unread {
background: rgba(56, 189, 248, 0.02) !important;
border-left: 4px solid var(--accent) !important;
}
.notif-unread::before {
content: "";
position: absolute;
top: 12px;
right: 12px;
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 6px var(--accent);
}
.notif-body {
flex: 1;
}
.notif-title {
font-size: 15px;
font-weight: 600;
color: var(--fg);
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 8px;
}
.notif-text {
font-size: 13.5px;
color: var(--fg-dim);
line-height: 1.45;
}
.notif-meta {
font-size: 11px;
color: var(--fg-muted);
margin-top: 6px;
}
.notif-link {
font-size: 12px;
font-weight: 600;
color: var(--bg) !important;
background: var(--accent) !important;
padding: 6px 14px;
border-radius: 20px;
white-space: nowrap;
margin-left: auto;
transition: all 0.2s;
box-shadow: var(--shadow-sm);
text-decoration: none !important;
display: inline-flex;
align-items: center;
}
.notif-link:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
opacity: 0.95;
}
/* Icons for types */
.notif-info .notif-title::before {
content: "✨";
font-size: 14px;
}
.notif-success .notif-title::before {
content: "🎉";
font-size: 14px;
}
.notif-warn .notif-title::before {
content: "⚠️";
font-size: 14px;
}
/* ── Pomodoro alignment guarantee ── */
body.ai-open .pomo-fab {
right: calc(420px + 84px) !important;
}
/* ── Settings & Admin panel enhancements ── */
.status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.status-card {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 16px;
padding: 18px 20px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: var(--shadow-sm);
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 0;
}
.status-card:hover {
transform: translateY(-2px);
border-color: rgba(56, 189, 248, 0.25);
box-shadow: var(--shadow-md), var(--shadow-glow);
}
.status-card-icon {
font-size: 24px;
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(56, 189, 248, 0.06);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.status-card-info {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.status-card-label {
font-size: 11px;
color: var(--fg-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.status-card-value {
font-weight: 600;
font-size: 14px;
margin-top: 2px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.stat-card {
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-card:hover {
transform: translateY(-2px);
border-color: rgba(56, 189, 248, 0.2);
box-shadow: var(--shadow-md), var(--shadow-glow);
}
/* File input styling */
input[type="file"]::file-selector-button {
background: var(--bg-elev-2);
color: var(--fg);
border: 1px solid var(--border);
padding: 6px 14px;
border-radius: 6px;
cursor: pointer;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 550;
transition: all 0.2s ease;
margin-right: 12px;
}
input[type="file"]::file-selector-button:hover {
border-color: var(--accent);
background: var(--bg-elev);
color: var(--accent);
}
/* Custom HR and sections */
.settings-hr {
border: 0;
border-top: 1px solid var(--border);
margin: 18px 0;
}
.settings-action-group {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.settings-muted-intro {
margin-bottom: 20px;
font-size: 13.5px;
}
/* Admin Users Table polish */
.admin-search-wrap {
margin-bottom: 16px;
display: flex;
gap: 12px;
align-items: center;
}
.admin-table th, .admin-table td {
padding: 12px 16px;
}
.admin-table tbody tr:hover td {
background: rgba(255, 255, 255, 0.01) !important;
}
.admin-table .chip {
font-family: var(--sans);
text-transform: none;
font-weight: 600;
font-size: 11px;
padding: 4px 10px;
border-radius: 6px;
transition: all 0.2s ease;
}
.admin-table .chip:hover {
transform: translateY(-1px);
}
/* Logout button styling */
.btn-logout {
color: var(--warn) !important;
border-color: var(--border) !important;
}
.btn-logout:hover {
background: rgba(248, 113, 113, 0.05) !important;
border-color: var(--warn) !important;
color: var(--warn) !important;
}
/* Status badge styling */
.badge-status {
display: inline-block;
padding: 6px 14px;
border-radius: 6px;
margin-bottom: 12px;
}
/* Admin panel layouts */
.admin-model-switcher { display: flex; flex-direction: column; gap: 12px; }
.admin-model-list { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-model-btn {
padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border);
background: var(--bg-elev); color: var(--fg-dim); cursor: pointer;
font-size: 13px; font-family: var(--mono); transition: all .15s;
display: flex; align-items: center; gap: 8px;
}
.admin-model-btn:hover { border-color: var(--accent); color: var(--fg); }
.admin-model-btn.active { border-color: var(--accent); color: var(--fg); background: rgba(125,211,252,0.08); }
.admin-model-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-model-badge {
font-size: 10px; background: var(--accent); color: #0f1115;
border-radius: 4px; padding: 1px 6px; font-family: var(--sans); font-weight: 600;
}
.admin-model-status { font-size: 13px; min-height: 20px; }
.admin-model-status.loading { color: var(--fg-muted); }
.admin-model-status.ok { color: var(--good); }
.admin-model-status.error { color: var(--error, #f87171); }
.admin-inline-form {
display: flex;
gap: 16px;
align-items: flex-end;
max-width: 500px;
}
.admin-field-inline {
flex: 1;
margin-bottom: 0 !important;
}
.btn-inline-apply {
height: 42px; /* Aligns with input */
}
.admin-toggle-form {
display: inline;
}
.table-empty-cell {
text-align: center;
padding: 24px !important;
}
.admin-message-cell {
max-width: 200px;
font-size: 12.5px;
}
.admin-filter-wrap {
margin-bottom: 12px;
display: flex;
gap: 8px;
align-items: center;
}
.admin-filter-toggle {
margin: 0 !important;
font-size: 13px !important;
font-weight: normal !important;
min-height: 38px !important;
padding: 6px 68px 6px 16px !important;
}
.admin-actions-wrap {
display: flex;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.backups-empty-msg {
padding: 12px 0;
}
.admin-restore-section {
border-top: 1px solid var(--border);
padding-top: 20px;
margin-top: 20px;
}
.admin-restore-form {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.admin-file-input {
flex: 1;
min-width: 200px;
}
.admin-broadcast-form {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 10px;
}
.admin-broadcast-toggles {
display: flex;
gap: 16px;
align-items: center;
margin-top: 4px;
flex-wrap: wrap;
}
.broadcast-toggle {
margin: 0 !important;
font-size: 13px !important;
min-height: 38px !important;
padding: 6px 68px 6px 16px !important;
}
.btn-broadcast-send {
align-self: flex-start;
}
/* Polished Search Inputs for Admin panels (magnifying glass SVG icon background) */
.admin-search-input {
background-color: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 16px 10px 42px; /* Premium spacing left for the icon */
color: var(--fg);
font-size: 14px;
font-family: var(--sans);
width: 100%;
max-width: 320px;
box-sizing: border-box;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 14px center;
background-size: 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.admin-search-input::placeholder {
color: var(--fg-muted);
opacity: 0.8;
transition: opacity 0.2s ease;
}
.admin-search-input:hover {
border-color: var(--fg-muted);
background-color: var(--bg-elev);
}
[data-theme="light"] .admin-search-input {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
background-color: var(--bg);
}
[data-theme="light"] .admin-search-input:hover {
background-color: #f8fafc;
}
.admin-search-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
background-color: var(--bg-elev);
}
[data-theme="light"] .admin-search-input:focus {
background-color: #ffffff;
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
/* ─────────────────────────────────────────────────────────────
Premium UX/UI Design Enhancements Overrides
───────────────────────────────────────────────────────────── */
/* ── 1. Lesson Page Redesign ── */
.lesson-head {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px 28px;
margin-bottom: 24px;
box-shadow: var(--shadow-sm);
gap: 20px;
}
.lesson-head .actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
width: 100%;
}
.lesson-head-left h1 {
margin: 0 0 6px;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
}
.lesson-meta-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13px;
color: var(--fg-dim);
}
.lesson-cards-meta {
color: var(--accent);
background: rgba(56, 189, 248, 0.08);
border: 1px solid rgba(56, 189, 248, 0.15);
padding: 2px 10px;
border-radius: 999px;
font-weight: 600;
}
.lesson-cards-meta.has-due {
color: #facc15;
background: rgba(250, 204, 21, 0.08);
border-color: rgba(250, 204, 21, 0.2);
}
/* Inside Lesson Problems list */
.problems {
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid var(--border);
}
.problems h2 {
font-size: 19px;
margin-bottom: 18px;
font-weight: 700;
}
.prob-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.prob {
position: relative;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--shadow-sm);
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
border-left: 4px solid var(--border);
}
.prob.status-todo {
border-left-color: var(--accent);
}
.prob.status-solved {
border-left-color: var(--good);
}
.prob.status-review {
border-left-color: #f97316; /* warm warning orange */
}
.prob:hover {
transform: translateY(-2px);
border-color: var(--accent);
box-shadow: var(--shadow-md), var(--shadow-glow);
}
.prob-main {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding-right: 80px; /* Leave space for top-right actions */
}
.prob-main a, .prob-main span {
font-size: 16px;
font-weight: 600;
}
.prob-main a {
color: var(--fg);
display: inline-flex;
align-items: center;
gap: 6px;
}
.prob-main a:hover {
color: var(--accent);
}
.external-link-icon {
font-size: 11px;
opacity: 0.5;
transition: opacity 0.15s ease;
}
.prob-main a:hover .external-link-icon {
opacity: 1;
}
/* Premium Top-Right Actions Group */
.prob-actions {
position: absolute;
top: 20px;
right: 20px;
display: flex;
gap: 8px;
}
.prob-action-btn {
background: var(--bg-elev-2);
border: 1px solid var(--border);
width: 30px;
height: 30px;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 13px;
padding: 0;
}
.prob-action-btn:hover {
transform: scale(1.08);
box-shadow: var(--shadow-sm);
}
.prob-action-btn.local-hint-btn {
border-color: var(--border);
background: var(--bg-elev-2);
color: #facc15;
opacity: 0.8;
}
.prob-action-btn.local-hint-btn:hover,
.prob-action-btn.local-hint-btn.active {
opacity: 1;
background: rgba(250, 204, 21, 0.08);
border-color: rgba(250, 204, 21, 0.4);
}
.prob-action-btn.ai-hint-btn {
border-color: var(--border);
background: var(--bg-elev-2);
color: #a78bfa;
opacity: 0.8;
}
.prob-action-btn.ai-hint-btn:hover {
opacity: 1;
background: rgba(167, 139, 250, 0.08);
border-color: rgba(167, 139, 250, 0.4);
}
.diff {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
}
.diff.easy { background: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.2); color: var(--good); }
.diff.medium { background: rgba(250, 204, 21, 0.08); border-color: rgba(250, 204, 21, 0.2); color: #facc15; }
.diff.hard { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.2); color: var(--warn); }
.tag {
font-family: var(--sans);
font-size: 11px;
font-weight: 550;
color: var(--fg-dim);
background: var(--bg-elev-2);
border: 1px solid var(--border);
padding: 3px 8px;
border-radius: 6px;
}
/* Hint Block Redesign */
.hint-block {
margin-top: 14px;
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px;
}
.hint-block summary {
cursor: pointer;
font-weight: 600;
font-size: 13.5px;
color: var(--fg-dim);
user-select: none;
outline: none;
transition: color 0.15s ease;
}
.hint-block summary:hover {
color: #facc15;
}
.hint-block p {
margin: 8px 0 0;
font-size: 13.5px;
color: var(--fg-dim);
line-height: 1.5;
}
/* Problem Description */
.prob-description {
margin-top: 12px;
font-size: 13.5px;
line-height: 1.6;
color: var(--fg-dim);
padding: 0;
background: none;
border: none;
}
.prob-description code {
font-family: var(--mono);
font-size: 12.5px;
background: rgba(255, 255, 255, 0.08);
padding: 2px 4px;
border-radius: 4px;
color: var(--fg);
}
.prob-description p {
margin: 0 0 10px 0;
}
.prob-description p:last-child {
margin-bottom: 0;
}
/* Progressive Hints custom styles */
.hint-progressive-wrapper {
margin-top: 14px;
animation: slideDownFade 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.progressive-hints-container {
display: flex;
flex-direction: column;
}
.hint-step {
padding: 10px 0;
background: none;
border: none;
border-bottom: 1px dashed var(--border);
transition: all 0.2s ease;
animation: slideDownFade 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.hint-step:last-of-type {
border-bottom: none;
}
.hint-step strong {
color: var(--fg-muted);
font-size: 12.5px;
display: block;
margin-bottom: 4px;
}
.hint-step p {
margin: 0;
font-size: 13.5px;
color: var(--fg-dim);
line-height: 1.5;
}
@keyframes slideDownFade {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Code Solution block */
.solution-block {
margin-top: 14px;
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.solution-toggle {
padding: 12px 18px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
user-select: none;
background: var(--bg-elev);
border-bottom: 1px solid var(--border);
transition: background 0.15s;
display: flex;
align-items: center;
justify-content: space-between;
}
.solution-toggle:hover {
background: var(--bg-elev-2);
}
.solution-toggle .badge {
margin-left: auto;
}
.solution-editor-wrap {
padding: 18px;
}
.editor-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-elev);
border: 1px solid var(--border);
border-bottom: none;
border-radius: 8px 8px 0 0;
padding: 8px 12px;
}
.lang-select {
background: var(--bg-elev-2);
border: 1px solid var(--border);
color: var(--fg);
font-size: 13px;
border-radius: 6px;
padding: 4px 10px;
outline: none;
cursor: pointer;
}
.cm-source {
border-radius: 0 0 8px 8px;
}
.solution-footer {
margin-top: 14px;
display: flex;
align-items: center;
gap: 12px;
}
.solution-footer .hint {
font-size: 13px;
color: var(--fg-muted);
}
/* AI review block */
.ai-review-panel {
margin-top: 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-elev);
display: flex;
flex-direction: column;
}
.ai-review-header {
padding: 10px 14px;
border-bottom: 1px solid var(--border);
font-weight: 600;
font-size: 13px;
color: var(--accent);
display: flex;
justify-content: space-between;
align-items: center;
}
.ai-review-close {
background: transparent;
border: none;
color: var(--fg-muted);
cursor: pointer;
font-size: 13px;
}
.ai-review-body {
padding: 14px 16px;
font-size: 13.5px;
line-height: 1.5;
color: var(--fg-dim);
}
/* Quiz system flow sequential */
.quiz-card {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 26px;
box-shadow: var(--shadow-sm);
margin-top: 16px;
}
.quiz-question {
font-size: 17px;
font-weight: 600;
line-height: 1.45;
margin: 0 0 20px;
color: var(--fg);
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.quiz-opt {
display: block;
width: 100%;
text-align: left;
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px 18px;
font-size: 14px;
font-family: var(--sans);
color: var(--fg-dim);
font-weight: 500;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
}
.quiz-opt:hover:not(:disabled) {
border-color: var(--accent);
color: var(--fg);
transform: translateX(4px);
box-shadow: var(--shadow-sm);
background: var(--bg-elev);
}
.quiz-opt-correct {
background: rgba(74, 222, 128, 0.08) !important;
border-color: var(--good) !important;
color: var(--good) !important;
font-weight: 600;
}
.quiz-opt-wrong {
background: rgba(248, 113, 113, 0.08) !important;
border-color: var(--warn) !important;
color: var(--warn) !important;
font-weight: 600;
}
.quiz-feedback {
margin-top: 16px;
padding: 14px 18px;
border-radius: 8px;
font-size: 14px;
line-height: 1.45;
display: flex;
align-items: flex-start;
gap: 10px;
}
.quiz-feedback.correct {
background: rgba(74, 222, 128, 0.06);
border: 1px solid rgba(74, 222, 128, 0.2);
color: var(--good);
}
.quiz-feedback.wrong {
background: rgba(248, 113, 113, 0.06);
border: 1px solid rgba(248, 113, 113, 0.2);
color: var(--warn);
}
.quiz-fb-icon {
font-weight: bold;
font-size: 16px;
}
.quiz-explanation {
margin: 12px 0 0;
font-size: 13.5px;
color: var(--fg-dim);
line-height: 1.5;
padding-left: 26px;
}
.quiz-wrong-actions {
display: flex;
gap: 12px;
margin-top: 18px;
justify-content: flex-end;
}
.btn-quiz, .btn-quiz-ghost {
font-size: 13px;
font-weight: 600;
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
font-family: var(--sans);
transition: all 0.2s;
}
.btn-quiz {
background: var(--accent);
color: #0f1115;
border: 1px solid var(--accent);
}
.btn-quiz:hover {
opacity: 0.9;
}
.btn-quiz-ghost {
background: transparent;
border: 1px solid var(--border);
color: var(--fg-dim);
}
.btn-quiz-ghost:hover {
border-color: var(--accent);
color: var(--fg);
}
.quiz-explain-btn { color: var(--accent); border-color: var(--accent); opacity: 0.85; }
.quiz-explain-btn:hover { opacity: 1; }
.quiz-explain-panel {
margin-top: 12px; padding: 12px 14px; border-radius: 8px;
background: rgba(56,189,248,0.06); border: 1px solid rgba(56,189,248,0.2);
font-size: 13px; color: var(--fg); line-height: 1.6; white-space: pre-wrap;
}
.quiz-fill-form {
display: flex;
gap: 10px;
}
.quiz-input {
flex: 1;
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 14px;
color: var(--fg);
font-size: 14px;
outline: none;
font-family: var(--sans);
transition: border-color 0.2s;
}
.quiz-input:focus {
border-color: var(--accent);
}
/* Notes & Add card cards container */
.notes, .add-card-section {
margin-top: 36px;
padding: 24px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.notes form textarea, .add-card-form textarea {
width: 100%;
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 16px;
color: var(--fg);
font-family: var(--sans);
font-size: 14px;
resize: vertical;
outline: none;
transition: border-color 0.2s;
box-sizing: border-box;
}
.notes form textarea:focus, .add-card-form textarea:focus {
border-color: var(--accent);
}
/* Navigation prev/next row styling */
.lesson-nav {
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 40px;
border-top: 1px solid var(--border);
padding-top: 24px;
}
.lesson-nav .navlink {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 999px;
text-decoration: none;
transition: all 0.2s ease;
max-width: 48%;
color: var(--fg-dim);
font-weight: 500;
box-sizing: border-box;
box-shadow: var(--shadow-sm);
}
.lesson-nav .navlink:hover {
border-color: var(--accent);
background: var(--bg-elev-2);
color: var(--fg);
transform: translateY(-1.5px);
box-shadow: var(--shadow-md), var(--shadow-glow);
}
.lesson-nav .navlink .navlink-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.lesson-nav .navlink.prev::before {
content: "←";
margin-right: 8px;
flex-shrink: 0;
}
.lesson-nav .navlink.next::after {
content: "→";
margin-left: 8px;
flex-shrink: 0;
}
.lesson-nav .navlink.prev {
text-align: left;
}
.lesson-nav .navlink.next {
text-align: right;
}
/* ── 2. Today Page Polish ── */
.today-wrap {
max-width: 760px;
margin: 0 auto;
padding: 16px 0;
}
.today-header {
display: flex;
align-items: center;
gap: 28px;
background: linear-gradient(135deg, var(--bg-elev) 0%, rgba(21, 25, 34, 0.7) 100%);
border: 1px solid var(--border);
border-radius: 20px;
padding: 32px;
margin-bottom: 24px;
box-shadow: var(--shadow-md), var(--shadow-glow);
position: relative;
overflow: hidden;
}
.today-header::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 160px; height: 160px;
background: radial-gradient(circle, rgba(56, 189, 248, 0.08) 0%, rgba(0,0,0,0) 70%);
pointer-events: none;
}
.today-header-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--display);
font-size: 36px;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
flex-shrink: 0;
user-select: none;
animation: pulseAvatar 3s ease-in-out infinite alternate;
}
@keyframes pulseAvatar {
from { transform: scale(1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
to { transform: scale(1.02); box-shadow: 0 12px 32px rgba(167, 139, 250, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
}
.today-header-content {
flex: 1;
}
.today-header h1 {
margin: 0 0 10px;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
}
.today-xp-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.streak-pill {
font-size: 13px;
font-family: var(--mono);
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
background: rgba(251, 146, 60, 0.08);
border: 1px solid rgba(251, 146, 60, 0.25);
color: #fb923c;
}
.xp-pill {
background: rgba(250, 204, 21, 0.08);
border-color: rgba(250, 204, 21, 0.25);
}
.xp-bar-wrap {
height: 8px;
background: var(--bg-elev-2);
border-radius: 99px;
overflow: hidden;
margin-bottom: 8px;
border: 1px solid rgba(255, 255, 255, 0.02);
}
.xp-bar {
background: linear-gradient(90deg, var(--accent) 0%, #a78bfa 100%);
border-radius: 99px;
}
.xp-bar-label {
font-size: 12.5px;
font-weight: 500;
}
/* Missions */
.today-section {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px;
margin-bottom: 20px;
box-shadow: var(--shadow-sm);
}
.today-section-title {
font-size: 13px;
font-weight: 750;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--fg-muted);
margin-bottom: 18px;
border-bottom: 1px solid var(--border);
padding-bottom: 10px;
}
.missions-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.mission-item {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 12px;
margin-bottom: 0;
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
}
.mission-item:hover {
transform: translateY(-2px);
border-color: rgba(56, 189, 248, 0.2);
box-shadow: var(--shadow-md);
}
.mission-check {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid var(--border);
background: var(--bg-elev);
color: transparent;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
transition: all 0.2s;
cursor: default;
}
.mission-done .mission-check {
background: var(--good);
border-color: var(--good);
color: #0f1115;
}
.mission-body {
flex: 1;
}
.mission-label {
font-size: 14.5px;
font-weight: 600;
color: var(--fg);
}
.mission-done .mission-label {
text-decoration: line-through;
color: var(--fg-muted);
}
.mission-progress-bar {
height: 4px;
background: var(--bg-elev);
border-radius: 99px;
overflow: hidden;
margin-top: 8px;
}
.mission-fill {
background: var(--accent);
border-radius: 99px;
}
.mission-done .mission-fill {
background: var(--good);
}
.mission-meta {
font-size: 11px;
font-family: var(--mono);
color: var(--fg-muted);
margin-top: 4px;
}
.mission-xp {
font-size: 13px;
font-weight: 700;
font-family: var(--mono);
color: #facc15;
background: rgba(250, 204, 21, 0.08);
border: 1px solid rgba(250, 204, 21, 0.15);
padding: 3px 8px;
border-radius: 6px;
}
.mission-done .mission-xp {
color: var(--good);
background: rgba(74, 222, 128, 0.08);
border-color: rgba(74, 222, 128, 0.15);
}
/* Due groups items styling */
.due-groups {
display: flex;
flex-direction: column;
gap: 10px;
}
.due-group {
display: flex;
align-items: center;
gap: 16px;
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 18px;
transition: all 0.2s;
}
.due-group:hover {
border-color: var(--accent);
}
.due-group-title {
font-size: 14.5px;
font-weight: 600;
color: var(--fg);
}
.due-count {
font-family: var(--mono);
font-size: 14px;
font-weight: 700;
color: var(--accent);
background: rgba(56, 189, 248, 0.08);
padding: 2px 10px;
border-radius: 99px;
}
.due-group .btn {
padding: 6px 14px;
font-size: 12.5px;
font-weight: 600;
border-radius: 20px;
}
/* Weak Spots */
.weak-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.weak-item {
display: flex;
align-items: center;
gap: 16px;
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 18px;
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
color: inherit;
}
.weak-item:hover {
transform: translateY(-2px);
border-color: var(--accent);
background: var(--bg-elev-2);
box-shadow: var(--shadow-sm);
}
.weak-stars {
font-size: 14px;
color: #facc15;
letter-spacing: 1px;
}
.weak-body {
flex: 1;
}
.weak-lesson {
font-size: 14.5px;
font-weight: 600;
color: var(--fg);
}
.weak-course {
font-size: 12px;
margin-top: 2px;
}
.weak-arrow {
font-size: 16px;
color: var(--fg-muted);
transition: transform 0.2s;
}
.weak-item:hover .weak-arrow {
color: var(--accent);
transform: translateX(4px);
}
/* Continue Card */
.continue-card {
border-radius: 14px;
background: var(--bg-elev-2);
border: 1px solid var(--border);
padding: 16px 20px;
box-shadow: var(--shadow-sm);
}
.continue-card:hover {
border-color: var(--accent);
background: rgba(56, 189, 248, 0.03);
}
.continue-label {
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent);
margin-bottom: 4px;
}
.continue-title {
font-size: 16px;
font-weight: 700;
}
.continue-arrow {
transition: transform 0.2s;
}
.continue-card:hover .continue-arrow {
transform: translateX(4px);
}
/* ── 3. Problems Kanban page ── */
.col {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 16px;
padding: 18px;
box-shadow: var(--shadow-sm);
}
.col-header {
border-bottom: 2px solid var(--border);
padding-bottom: 12px;
margin-bottom: 16px;
}
.col-title {
font-size: 13.5px;
font-weight: 750;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.prob-mini {
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.prob-mini:hover {
transform: translateY(-2.5px);
border-color: var(--accent);
box-shadow: var(--shadow-md), var(--shadow-glow);
}
.prob-title {
font-size: 14.5px;
font-weight: 600;
color: var(--fg);
line-height: 1.4;
margin-top: 4px;
display: block;
}
.prob-title:hover {
color: var(--accent);
}
.prob-mini-sub {
margin-top: 8px;
font-size: 11.5px;
}
.prob-mini-sub a {
color: var(--fg-muted);
}
.prob-mini-sub a:hover {
color: var(--fg-dim);
}
/* ── 4. Leaderboard Ranking highlights ── */
.lb-table {
border-collapse: separate;
border-spacing: 0 8px;
margin-top: 16px;
}
.lb-table th {
padding: 10px 16px;
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-muted);
}
.lb-table tbody tr {
background: var(--bg-elev);
transition: transform 0.15s, border-color 0.15s;
}
.lb-table tbody tr td {
padding: 14px 16px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.lb-table tbody tr td:first-child {
border-left: 1px solid var(--border);
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.lb-table tbody tr td:last-child {
border-right: 1px solid var(--border);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.lb-table tbody tr:hover {
transform: translateY(-1px);
}
.lb-table tbody tr:hover td {
border-color: rgba(56, 189, 248, 0.25);
background: rgba(255, 255, 255, 0.005);
}
/* Medal styles & User highlighting */
.lb-table tbody tr:nth-child(1) td:first-child { border-left: 3px solid #f59e0b; }
.lb-table tbody tr:nth-child(2) td:first-child { border-left: 3px solid #94a3b8; }
.lb-table tbody tr:nth-child(3) td:first-child { border-left: 3px solid #b45309; }
.lb-table tr.lb-me {
background: rgba(56, 189, 248, 0.04) !important;
}
.lb-table tr.lb-me td {
border-top: 1.5px solid rgba(56, 189, 248, 0.25) !important;
border-bottom: 1.5px solid rgba(56, 189, 248, 0.25) !important;
}
.lb-table tr.lb-me td:first-child {
border-left: 3.5px solid var(--accent) !important;
}
.lb-table tr.lb-me td:last-child {
border-right: 1.5px solid rgba(56, 189, 248, 0.25) !important;
}
.lb-table tr.lb-me a {
font-weight: 700;
color: var(--accent);
}
.lb-table tr.lb-me .chip {
background: rgba(56, 189, 248, 0.12);
border-color: var(--accent);
color: var(--accent);
font-weight: 600;
}
/* AI helper hint button on Kanban board */
.prob-hint-btn {
background: rgba(56, 189, 248, 0.05);
border: 1px solid rgba(56, 189, 248, 0.15);
width: 26px;
height: 26px;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
font-size: 13px;
padding: 0;
}
.prob-hint-btn:hover {
background: rgba(56, 189, 248, 0.15);
border-color: var(--accent);
transform: scale(1.08);
}
/* Kanban Drag & Drop visual feedback */
.prob-list {
min-height: 120px;
transition: background 0.18s ease, border-color 0.18s ease;
border: 2px dashed transparent;
border-radius: 10px;
}
.prob-list.drag-over {
background: rgba(56, 189, 248, 0.04);
border-color: rgba(56, 189, 248, 0.35);
}
.prob-mini.dragging {
opacity: 0.45;
border-style: dashed;
border-color: var(--accent);
}
/* Lesson Tabs Panel */
.lesson-tabs {
display: flex;
gap: 8px;
margin: 32px 0 20px;
border-bottom: 1.5px solid var(--border);
padding-bottom: 12px;
flex-wrap: wrap;
}
.lesson-tab-btn {
background: transparent;
border: 1px solid transparent;
color: var(--fg-dim);
font-size: 13.5px;
font-weight: 600;
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
font-family: var(--sans);
}
.lesson-tab-btn:hover {
color: var(--fg);
background: var(--bg-elev-2);
}
.lesson-tab-btn.active {
background: rgba(56, 189, 248, 0.08);
border-color: rgba(56, 189, 248, 0.15);
color: var(--accent);
}
.lesson-tab-content {
display: none;
animation: tabFadeIn 0.22s ease-out;
border-top: none !important;
margin-top: 0 !important;
padding-top: 16px !important;
}
.lesson-tab-content.active {
display: block;
}
@keyframes tabFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Hide redundant titles inside tabbed panels */
.lesson-tab-content > h2,
.lesson-tab-content > .quiz-flow-header h2,
.lesson-tab-content > .notes-header h2,
.lesson-tab-content > .playground-details > .playground-summary {
display: none !important;
}
.lesson-tab-content > .playground-details {
border: none !important;
background: transparent !important;
padding: 0 !important;
}
.lesson-tab-content > .playground-details > .playground-body {
padding: 0 !important;
}
/* ── Sticky Table of Contents (TOC) Sidebar ── */
.lesson-layout {
display: block;
position: relative;
width: 100%;
}
.lesson-main {
min-width: 0;
width: 100%;
}
.lesson-toc-col {
display: none;
}
/* On large displays, position TOC sidebar fixed in the viewport margin to the right of centered text box */
@media (min-width: 1600px) {
.lesson-toc-col {
display: block;
position: fixed;
/* Calculated offset: center (50%) + half of centered max-width (490px) + spacing (50px) */
left: calc(50% + 490px + 50px);
top: 180px;
width: 260px;
max-height: calc(100vh - 240px);
overflow-y: auto;
overflow-x: hidden;
padding-right: 14px;
box-sizing: border-box;
z-index: 10;
opacity: 0.15;
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.lesson-toc-col:hover {
opacity: 1;
}
}
/* Hide standard scrollbar for toc sidebar column */
.lesson-toc-col::-webkit-scrollbar {
width: 4px;
}
.lesson-toc-col::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
.lesson-toc-col .toc {
background: transparent !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
margin: 0 !important;
}
.lesson-toc-col .toc-title {
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--fg-muted);
margin-bottom: 14px;
display: flex;
justify-content: space-between;
align-items: center;
}
.lesson-toc-col .toc ul {
list-style: none !important;
padding: 0 0 0 14px !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 10px;
border-left: 1px solid var(--border);
}
.lesson-toc-col .toc-item {
font-size: 13px;
line-height: 1.4;
padding: 0 !important;
margin: 0 !important;
border: none !important;
background: none !important;
position: relative;
}
.lesson-toc-col .toc-item a {
color: var(--fg-dim);
text-decoration: none;
transition: all 0.15s ease;
display: block;
word-break: break-word;
overflow-wrap: break-word;
white-space: normal;
}
.lesson-toc-col .toc-item a:hover {
color: var(--fg);
}
.lesson-toc-col .toc-item a.active-toc-link {
color: var(--accent) !important;
font-weight: 500;
}
/* Active indicator vertical line on the timeline border */
.lesson-toc-col .toc-item a.active-toc-link::before {
content: "";
position: absolute;
left: -15px; /* Align precisely with the 1px left border line */
top: 2px;
bottom: 2px;
width: 2px;
border-radius: 1px;
background: var(--accent);
}
.lesson-toc-col .toc-sub {
padding-left: 14px !important;
}
.lesson-toc-col .toc-sub a {
font-size: 12px;
color: var(--fg-muted);
}
.lesson-toc-col .toc-sub a.active-toc-link {
color: var(--accent) !important;
}
.lesson-toc-col .toc-sub a.active-toc-link::before {
left: -29px; /* Offset correctly for sub-items */
}
/* Close button in TOC header */
.toc-close-btn {
background: none;
border: none;
color: var(--fg-muted);
font-size: 11px;
cursor: pointer;
padding: 2px 6px;
line-height: 1;
border-radius: 4px;
transition: all 0.15s ease;
}
.toc-close-btn:hover {
color: var(--accent);
background: var(--bg-elev-2);
}
/* Header action toggle button for TOC */
.toc-toggle-action-btn {
display: none !important;
}
@media (min-width: 1600px) {
.toc-toggle-action-btn {
display: inline-flex !important;
}
.toc-toggle-action-btn.active {
border-color: var(--accent);
color: var(--accent);
background: rgba(125, 211, 252, 0.08);
}
}
/* Toggle visibility classes */
body.toc-hidden .lesson-toc-col {
display: none !important;
}
/* Immersive Mock Interview Room overlay */
.ai-interview-room {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 10000;
background: rgba(15, 23, 42, 0.96);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
display: flex;
color: var(--fg);
font-family: var(--sans);
animation: fadeInCockpit 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fadeInCockpit {
from { opacity: 0; transform: scale(0.98); }
to { opacity: 1; transform: scale(1); }
}
/* Left Sidebar in Interview Room */
.interview-sidebar {
width: 320px;
background: rgba(30, 41, 59, 0.4);
border-right: 1px solid var(--border);
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 28px;
flex-shrink: 0;
}
/* Interviewer Card */
.interview-interviewer-card {
display: flex;
align-items: center;
gap: 16px;
background: var(--bg-elev-2);
border: 1px solid var(--border);
padding: 16px;
border-radius: 12px;
}
.interviewer-avatar {
font-size: 32px;
background: rgba(167, 139, 250, 0.1);
width: 48px;
height: 48px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.interview-interviewer-info-wrapper h3 {
margin: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--fg);
}
.interviewer-status {
font-size: 12px;
color: var(--good);
display: flex;
align-items: center;
gap: 6px;
margin-top: 2px;
}
.interviewer-status.pulse::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background: var(--good);
border-radius: 50%;
animation: pulseGrading 1.4s infinite alternate;
}
@keyframes pulseGrading {
from { opacity: 0.4; transform: scale(0.8); }
to { opacity: 1; transform: scale(1.2); }
}
/* Meta sections */
.interview-meta-section {
display: flex;
flex-direction: column;
gap: 6px;
}
.interview-meta-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg-muted);
font-weight: 700;
}
.interview-topic {
font-size: 14.5px;
font-weight: 550;
line-height: 1.45;
color: var(--fg);
}
.interview-timer {
font-size: 26px;
font-family: var(--mono);
font-weight: 700;
color: var(--accent);
letter-spacing: -0.02em;
}
.interview-grades {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.grades-placeholder {
font-size: 13px;
color: var(--fg-dim);
font-style: italic;
}
.grade-badge {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
transition: all 0.2s ease;
}
.grade-badge.success { background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.25); color: var(--good); }
.grade-badge.warning { background: rgba(250, 204, 21, 0.1); border: 1px solid rgba(250, 204, 21, 0.25); color: #facc15; }
.grade-badge.error { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.25); color: var(--warn); }
/* Right main chat pane */
.interview-main {
flex: 1;
display: flex;
flex-direction: column;
background: rgba(15, 23, 42, 0.25);
height: 100%;
}
.interview-messages {
flex: 1;
overflow-y: auto;
padding: 48px;
display: flex;
flex-direction: column;
gap: 24px;
}
/* Style user/assistant messages specifically for the full screen room */
.interview-messages .ai-msg {
max-width: 75%;
padding: 16px 20px;
border-radius: 12px;
line-height: 1.6;
font-size: 14.5px;
box-shadow: var(--shadow-sm);
animation: msgSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes msgSlideUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.interview-messages .ai-msg-user {
align-self: flex-end;
background: var(--accent);
color: #fff;
border-bottom-right-radius: 2px;
}
.interview-messages .ai-msg-assistant {
align-self: flex-start;
background: rgba(30, 41, 59, 0.7);
border: 1px solid var(--border);
border-bottom-left-radius: 2px;
}
.interview-messages .ai-msg-assistant code {
background: rgba(0, 0, 0, 0.2);
padding: 2px 4px;
border-radius: 4px;
font-size: 13.5px;
}
.interview-messages .ai-msg-assistant pre {
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px;
margin-top: 10px;
}
/* Inputs layout */
.interview-input-area {
padding: 12px 24px 20px;
border-top: 1px solid var(--border);
background: rgba(15, 23, 42, 0.75);
}
.interview-input-toolbar {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
}
.voice-status-text {
font-size: 12px;
color: var(--fg-muted);
margin-left: 4px;
}
.interview-input-form {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 14px;
padding: 10px 16px 8px;
box-shadow: var(--shadow-md);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.interview-input-form:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15);
}
.interview-input-form textarea {
flex: 1;
background: none;
border: none;
outline: none;
resize: none;
color: var(--fg);
font-family: inherit;
font-size: 14.5px;
padding: 4px 0;
line-height: 1.5;
min-height: 44px;
}
.interview-input-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
border-top: 1px solid var(--border);
padding-top: 8px;
}
.tts-btn {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
opacity: 0.5;
transition: all 0.2s ease;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.tts-btn:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.tts-btn.active { opacity: 1; color: var(--accent); }
.results-score-num {
font-size: 28px;
font-weight: 700;
color: var(--accent);
margin-top: 4px;
}
.interview-empty-history {
text-align: center;
padding: 48px 24px;
color: var(--fg-muted);
font-size: 14px;
}
.results-raw #results-raw-text {
font-size: 13px;
line-height: 1.6;
color: var(--fg-muted);
max-height: 280px;
overflow-y: auto;
padding: 10px;
background: var(--bg-elev-1);
border-radius: 8px;
border: 1px solid var(--border);
}
.voice-btn {
background: none;
border: none;
cursor: pointer;
font-size: 18px;
opacity: 0.6;
transition: all 0.25s ease;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.voice-btn:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.08);
}
.voice-btn.active {
opacity: 1;
color: var(--warn);
background: rgba(248, 113, 113, 0.15);
animation: pulseVoice 1s infinite alternate;
}
@keyframes pulseVoice {
from { box-shadow: 0 0 0 0px rgba(248, 113, 113, 0.4); }
to { box-shadow: 0 0 0 8px rgba(248, 113, 113, 0); }
}
.interview-send-btn {
background: var(--accent);
color: #fff;
border: none;
border-radius: 8px;
padding: 10px 18px;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.interview-send-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(167, 139, 250, 0.35);
}
.exit-interview-btn {
margin-top: auto;
border-radius: 8px;
padding: 12px;
font-weight: 600;
font-size: 13.5px;
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.15);
color: #ef4444;
transition: all 0.2s;
}
.exit-interview-btn:hover {
background: rgba(239, 68, 68, 0.15);
border-color: #ef4444;
}
/* ==========================================================================
MOCK INTERVIEWS DASHBOARD & STANDALONE ROOM STYLES
========================================================================== */
.interviews-dashboard-container {
max-width: 900px;
margin: 0 auto;
padding: 20px 0;
}
.interviews-header {
margin-bottom: 32px;
}
.interviews-header h1 {
font-size: 32px;
font-weight: 800;
margin-bottom: 8px;
color: var(--fg);
}
.setup-section {
background: var(--bg-elev-1);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px;
margin-bottom: 24px;
box-shadow: var(--shadow-sm);
}
.section-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 20px;
color: var(--fg);
}
.tabs-buttons {
display: flex;
gap: 12px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border);
padding-bottom: 12px;
}
.tab-btn {
background: none;
border: none;
color: var(--fg-muted);
font-size: 14.5px;
font-weight: 600;
padding: 8px 16px;
cursor: pointer;
border-radius: 8px;
transition: all 0.2s ease;
}
.tab-btn:hover {
color: var(--fg);
background: var(--bg-elev-2);
}
.tab-btn.active {
color: #fff;
background: var(--accent);
}
.dropdown-row {
display: flex;
gap: 20px;
}
.dropdown-col {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.dropdown-col label {
font-size: 13px;
font-weight: 600;
color: var(--fg-muted);
}
.form-select {
background: var(--bg-elev-2);
border: 1px solid var(--border);
color: var(--fg);
padding: 12px 16px;
border-radius: 10px;
font-size: 14.5px;
outline: none;
cursor: pointer;
transition: border-color 0.2s;
}
.form-select:focus {
border-color: var(--accent);
}
.form-textarea {
width: 100%;
height: 100px;
background: var(--bg-elev-2);
border: 1px solid var(--border);
color: var(--fg);
padding: 16px;
border-radius: 10px;
font-size: 14.5px;
outline: none;
resize: none;
transition: border-color 0.2s;
}
.form-textarea:focus {
border-color: var(--accent);
}
.card-options-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.type-grid {
grid-template-columns: 1fr 1fr 1fr;
}
.option-card {
cursor: pointer;
}
.hidden-radio {
display: none;
}
.option-card-inner {
border: 1px solid var(--border);
background: var(--bg-elev-2);
padding: 20px;
border-radius: 12px;
display: flex;
align-items: flex-start;
gap: 16px;
height: 100%;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.option-card:hover .option-card-inner {
border-color: var(--fg-muted);
transform: translateY(-2px);
}
.active-card .option-card-inner {
border-color: var(--accent);
background: rgba(167, 139, 250, 0.05);
box-shadow: 0 0 0 2px var(--accent);
}
.card-icon {
font-size: 28px;
background: rgba(255, 255, 255, 0.05);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.card-avatar {
font-size: 28px;
background: rgba(255, 255, 255, 0.05);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.card-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.card-name {
font-size: 15px;
font-weight: 700;
color: var(--fg);
}
.card-desc {
font-size: 12.5px;
color: var(--fg-muted);
line-height: 1.4;
}
.settings-section {
background: var(--bg-elev-1);
}
.submit-wrap {
display: flex;
justify-content: center;
margin-top: 40px;
margin-bottom: 60px;
}
.start-btn {
background: var(--accent);
color: #fff;
border: none;
padding: 16px 40px;
font-size: 16px;
font-weight: 700;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 14px rgba(167, 139, 250, 0.35);
}
.start-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(167, 139, 250, 0.45);
}
/* ── Category chips ── */
.category-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.cat-chip {
background: var(--bg-elev-2);
border: 1px solid var(--border);
color: var(--fg-muted);
font-size: 13px;
font-weight: 500;
padding: 6px 14px;
border-radius: 20px;
cursor: pointer;
transition: all 0.18s ease;
}
.cat-chip:hover {
border-color: var(--accent);
color: var(--fg);
}
.cat-chip.active {
background: rgba(167, 139, 250, 0.12);
border-color: var(--accent);
color: var(--fg);
}
/* ── Interview history ── */
.history-section { margin-top: 40px; }
.history-list { display: flex; flex-direction: column; gap: 2px; }
.history-item {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 16px;
border-radius: 10px;
text-decoration: none;
color: var(--fg);
transition: background 0.15s;
}
.history-item:hover { background: var(--bg-elev-2); }
.history-time {
font-size: 12px;
color: var(--fg-muted);
white-space: nowrap;
min-width: 110px;
}
.history-snippet {
flex: 1;
font-size: 13.5px;
color: var(--fg-dim, var(--fg-muted));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.history-count {
font-size: 12px;
color: var(--fg-muted);
white-space: nowrap;
}
/* Standalone Room layout additions */
.standalone-room {
background: var(--bg);
}
.interview-room-viewport {
flex: 1;
display: flex;
height: 100vh;
overflow: hidden;
}
.interview-chat-pane {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
}
.interview-code-pane {
width: 50%;
border-left: 1px solid var(--border);
background: #1e1e2f;
display: flex;
flex-direction: column;
height: 100%;
}
.code-editor-header {
padding: 12px 24px;
background: #151522;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.lang-selector-wrap {
display: flex;
align-items: center;
gap: 8px;
}
.code-lang-select {
padding: 4px 12px !important;
font-size: 13px !important;
border-radius: 6px !important;
}
.run-code-btn {
background: var(--accent);
color: #fff;
border: none;
padding: 8px 16px;
font-size: 13px;
font-weight: 700;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.run-code-btn:hover {
opacity: 0.9;
box-shadow: 0 0 10px rgba(167, 139, 250, 0.4);
}
.editor-container-wrap {
flex: 1;
overflow: hidden;
position: relative;
}
.editor-container-wrap .CodeMirror {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-family: var(--mono);
font-size: 14px;
}
.code-output-panel {
height: 180px;
border-top: 1px solid var(--border);
background: #0d0d16;
color: #a9b1d6;
font-family: var(--mono);
font-size: 13px;
padding: 16px;
overflow-y: auto;
white-space: pre-wrap;
flex-shrink: 0;
}
.code-output-panel.run-error {
color: #ff5555;
border-top: 1px solid rgba(255, 85, 85, 0.3);
}
.code-output-panel.run-ok {
color: #50fa7b;
}
/* Interview navigation button (header) */
.interview-nav-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: var(--fg);
background: rgba(168, 85, 247, 0.08);
border: 1px solid rgba(168, 85, 247, 0.25);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.interview-nav-btn:hover {
background: rgba(168, 85, 247, 0.16);
border-color: rgba(168, 85, 247, 0.4);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);
text-decoration: none !important;
}
.interview-nav-btn.active-nav {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
box-shadow: 0 2px 8px rgba(167, 139, 250, 0.25);
}
/* Cheatsheet Drawer Styles */
.cheatsheet-drawer {
position: fixed;
top: 0;
right: -480px;
width: 480px;
height: 100vh;
z-index: 10001;
background: var(--bg-elev-1);
border-left: 1px solid var(--border);
box-shadow: var(--shadow-lg);
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding: 32px 28px;
overflow-y: auto;
color: var(--fg);
text-align: left;
}
.cheatsheet-drawer.open {
right: 0;
}
.cheatsheet-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
border-bottom: 1px solid var(--border);
padding-bottom: 16px;
}
.cheatsheet-header h3 {
margin: 0;
font-size: 18px;
font-weight: 700;
}
.close-drawer-btn {
background: none;
border: none;
font-size: 20px;
color: var(--fg-muted);
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.2s;
}
.close-drawer-btn:hover {
background: var(--bg-elev-2);
color: var(--fg);
}
.cheatsheet-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 10000;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.cheatsheet-overlay.open {
opacity: 1;
visibility: visible;
}
.cheatsheet-btn {
margin-top: 10px;
font-weight: 600;
border-radius: 8px;
padding: 10px 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--bg-elev-2);
border: 1px solid var(--border);
color: var(--fg);
cursor: pointer;
transition: all 0.2s;
}
.cheatsheet-btn:hover {
background: var(--bg-elev-3);
border-color: var(--fg-muted);
}
/* AI Hint Button */
.hint-btn {
background: rgba(250, 204, 21, 0.08);
border: 1px solid rgba(250, 204, 21, 0.25);
color: #facc15;
border-radius: 8px;
padding: 10px 16px;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.hint-btn:hover {
background: rgba(250, 204, 21, 0.16);
border-color: rgba(250, 204, 21, 0.4);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(250, 204, 21, 0.15);
}
/* Final Results Panel */
.interview-results-panel {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 10005;
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(16px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: fadeInCockpit 0.3s ease;
color: var(--fg);
}
.results-card {
background: var(--bg-elev-1);
border: 1px solid var(--border);
border-radius: 16px;
padding: 40px;
max-width: 680px;
width: 100%;
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
gap: 24px;
text-align: left;
}
.results-card h2 {
margin: 0;
font-size: 24px;
font-weight: 800;
color: var(--fg);
border-bottom: 1px solid var(--border);
padding-bottom: 14px;
}
.results-score-wrap {
display: flex;
align-items: center;
gap: 12px;
font-size: 18px;
font-weight: 700;
}
.results-score-val {
color: var(--accent);
background: rgba(167, 139, 250, 0.1);
padding: 6px 16px;
border-radius: 8px;
border: 1px solid rgba(167, 139, 250, 0.2);
}
.results-details {
display: flex;
flex-direction: column;
gap: 20px;
}
.results-section-box {
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px 20px;
}
.results-section-box h4 {
margin: 0 0 10px 0;
font-size: 14px;
font-weight: 700;
color: var(--fg);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.results-section-box ul {
margin: 0;
padding-left: 20px;
font-size: 13.5px;
color: var(--fg-muted);
line-height: 1.6;
}
.results-section-box li {
margin-bottom: 4px;
}
.close-results-btn {
background: var(--accent);
color: #fff;
border: none;
padding: 14px 28px;
font-size: 14.5px;
font-weight: 700;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
align-self: center;
}
.close-results-btn:hover {
opacity: 0.95;
box-shadow: 0 4px 14px rgba(167, 139, 250, 0.3);
transform: translateY(-1px);
}
/* Circular progress and metrics in final report */
.results-card-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border);
padding-bottom: 16px;
margin-bottom: 8px;
}
.results-card-header h2 {
border-bottom: none !important;
padding-bottom: 0 !important;
}
.results-score-label {
font-size: 12px;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.results-score-val {
padding: 6px 14px;
border-radius: 20px;
font-weight: 700;
font-size: 13px;
border: 1px solid transparent;
}
.results-score-val.score-excellent {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
border-color: rgba(16, 185, 129, 0.3);
}
.results-score-val.score-good {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
border-color: rgba(59, 130, 246, 0.3);
}
.results-score-val.score-satisfactory {
background: rgba(245, 158, 11, 0.1);
color: #f59e0b;
border-color: rgba(245, 158, 11, 0.3);
}
.results-score-val.score-needs-work {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
border-color: rgba(239, 68, 68, 0.3);
}
.results-stats-row {
display: flex;
align-items: center;
justify-content: space-around;
gap: 32px;
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;
margin-bottom: 8px;
}
.stat-progress-wrap {
display: flex;
justify-content: center;
align-items: center;
}
.stat-progress-circle {
width: 120px;
height: 120px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.stat-progress-inner {
width: 100px;
height: 100px;
background: var(--bg-elev-2);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.stat-progress-value {
font-size: 24px;
font-weight: 800;
color: var(--fg);
line-height: 1.1;
}
.stat-progress-label {
font-size: 9px;
text-transform: uppercase;
color: var(--fg-muted);
letter-spacing: 0.05em;
margin-top: 2px;
}
.stat-metrics-wrap {
display: flex;
flex-direction: column;
gap: 12px;
flex-grow: 1;
max-width: 320px;
}
.stat-metric-item {
display: flex;
align-items: center;
font-size: 13.5px;
gap: 10px;
padding: 6px 0;
border-bottom: 1px dashed var(--border);
}
.stat-metric-item:last-child {
border-bottom: none;
}
.metric-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.metric-dot.dot-success {
background: #10b981;
box-shadow: 0 0 6px rgba(16,185,129,0.4);
}
.metric-dot.dot-warning {
background: #f59e0b;
box-shadow: 0 0 6px rgba(245,158,11,0.4);
}
.metric-dot.dot-error {
background: #ef4444;
box-shadow: 0 0 6px rgba(239,68,68,0.4);
}
.metric-name {
color: var(--fg-dim);
flex-grow: 1;
}
.metric-count {
font-weight: 700;
color: var(--fg);
}
/* ── OVERHAULED FULLSCREEN COCKPIT ROOM STYLES ── */
body.interview-room-active {
overflow: hidden !important;
height: 100vh !important;
width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
}
body.interview-room-active .topbar,
body.interview-room-active .pomo-fab,
body.interview-room-active #ai-fab {
display: none !important;
}
body.interview-room-active main {
max-width: 100% !important;
width: 100% !important;
height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
}
/* Glassmorphic Room Containers */
.ai-interview-room.standalone-room {
background: radial-gradient(circle at 50% 50%, #0d0f17, #06080d) !important;
height: 100vh !important;
width: 100vw !important;
border-radius: 0 !important;
}
.interview-sidebar {
background: rgba(13, 16, 23, 0.75) !important;
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
box-shadow: 10px 0 30px rgba(0, 0, 0, 0.3);
}
.interview-interviewer-card {
background: rgba(22, 28, 41, 0.5) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
border-radius: 14px !important;
transition: all 0.3s ease;
}
.interview-interviewer-card:hover {
border-color: rgba(167, 139, 250, 0.2);
box-shadow: 0 8px 32px rgba(167, 139, 250, 0.05);
}
.interviewer-avatar {
background: linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(139, 92, 246, 0.05)) !important;
box-shadow: inset 0 0 12px rgba(167, 139, 250, 0.2);
border: 1px solid rgba(167, 139, 250, 0.25) !important;
}
/* Stepping Progress Meter */
.interview-progress-container {
display: flex;
flex-direction: column;
gap: 8px;
background: rgba(22, 28, 41, 0.35);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 10px;
padding: 14px 16px;
}
.interview-progress-bar-wrap {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.08);
border-radius: 99px;
overflow: hidden;
}
.interview-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--accent), #a855f7);
border-radius: 99px;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}
.interview-progress-text {
font-size: 11.5px;
font-weight: 700;
color: var(--fg-dim);
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* Review mode Completed Banner */
.completed-banner {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, rgba(22, 28, 41, 0.95), rgba(13, 16, 23, 0.98));
border-bottom: 1px solid rgba(167, 139, 250, 0.2);
padding: 14px 48px;
color: var(--fg);
font-size: 14px;
font-weight: 550;
box-shadow: 0 4px 24px rgba(0,0,0,0.4);
animation: bannerSlideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
@keyframes bannerSlideDown {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
.banner-buttons {
display: flex;
gap: 12px;
}
.banner-btn {
border: none;
border-radius: 8px;
padding: 8px 18px;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.banner-btn.btn-report {
background: var(--accent);
color: #fff;
box-shadow: 0 4px 14px rgba(56, 189, 248, 0.25);
}
.banner-btn.btn-report:hover {
opacity: 0.95;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(56, 189, 248, 0.35);
}
.banner-btn.btn-exit {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--fg);
}
.banner-btn.btn-exit:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-1px);
}
/* Typing Dots Animation for assistant thinking */
.typing-indicator {
display: flex;
gap: 6px;
padding: 8px 6px;
align-items: center;
justify-content: center;
min-width: 40px;
}
.typing-indicator span {
width: 7px;
height: 7px;
background-color: var(--fg-muted);
border-radius: 50%;
opacity: 0.4;
animation: bounceTyping 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounceTyping {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
40% { transform: scale(1.15); opacity: 1; background-color: var(--accent); }
}
/* Premium Rounded Dialogue Bubbles */
.interview-messages .ai-msg {
max-width: 70% !important;
border-radius: 18px !important;
padding: 18px 24px !important;
font-size: 14.5px !important;
line-height: 1.62 !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
margin-bottom: 6px;
border: 1px solid transparent;
}
.interview-messages .ai-msg-user {
align-self: flex-end !important;
background: linear-gradient(135deg, #5850ec, #8b5cf6) !important;
color: #fff !important;
border-bottom-right-radius: 4px !important;
box-shadow: 0 8px 30px rgba(99, 102, 241, 0.25) !important;
border: 1px solid rgba(99, 102, 241, 0.35) !important;
}
.interview-messages .ai-msg-assistant {
align-self: flex-start !important;
background: rgba(22, 28, 41, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
border-bottom-left-radius: 4px !important;
backdrop-filter: blur(12px);
}
/* Premium Scrollbars for Messages */
.interview-messages::-webkit-scrollbar {
width: 8px;
}
.interview-messages::-webkit-scrollbar-track {
background: transparent;
}
.interview-messages::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08);
border-radius: 4px;
}
.interview-messages::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.16);
}
/* Code editor & terminal styling */
.interview-code-pane {
background: #0d0e14 !important;
box-shadow: inset 4px 0 32px rgba(0, 0, 0, 0.4);
}
.code-editor-header {
background: #12131b !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.code-output-panel {
font-family: var(--mono) !important;
background: #06070a !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
border-radius: 10px !important;
padding: 18px 22px !important;
margin: 12px 24px 24px !important;
font-size: 13px !important;
line-height: 1.55 !important;
box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.6);
}
.code-output-panel.run-ok {
color: #4ade80 !important;
}
.code-output-panel.run-error {
color: #f87171 !important;
border-color: rgba(248, 113, 113, 0.15) !important;
}
.editor-container-wrap {
flex: 1;
overflow: hidden;
}
.editor-container-wrap .CodeMirror {
height: 100% !important;
font-family: var(--mono) !important;
font-size: 14px !important;
background: #0d0e14 !important;
}
.editor-container-wrap .CodeMirror-gutters {
background: #0d0e14 !important;
border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}
/* AI Access Restricted Stub Card */
.interview-stub-card {
position: relative;
max-width: 600px;
margin: 60px auto;
padding: 48px 36px;
background: rgba(22, 28, 41, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
text-align: center;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
overflow: hidden;
}
.stub-glow-effect {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(56, 189, 248, 0.06) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.interview-stub-card .stub-icon {
font-size: 48px;
margin-bottom: 24px;
display: inline-block;
filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.25));
}
.interview-stub-card h2 {
font-size: 22px;
font-weight: 600;
margin-bottom: 12px;
color: var(--fg);
font-family: var(--display);
}
.interview-stub-card p {
font-size: 14.5px;
color: var(--fg-dim);
line-height: 1.6;
margin-bottom: 32px;
}
.stub-actions {
display: flex;
gap: 16px;
justify-content: center;
position: relative;
z-index: 1;
}
/* Custom Exit & Finish Confirmation Modals */
.custom-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(8, 10, 15, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
animation: fadeInOverlay 0.22s ease-out;
}
@keyframes fadeInOverlay {
from { opacity: 0; }
to { opacity: 1; }
}
.custom-modal-card {
background: rgba(22, 28, 41, 0.95);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
width: 100%;
max-width: 420px;
padding: 36px 28px;
text-align: center;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
animation: scaleInCard 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes scaleInCard {
from { transform: scale(0.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.custom-modal-card .modal-icon {
font-size: 44px;
margin-bottom: 18px;
}
.custom-modal-card h3 {
font-size: 19px;
font-weight: 600;
margin: 0 0 12px 0;
color: var(--fg);
font-family: var(--display);
}
.custom-modal-card p {
font-size: 14px;
color: var(--fg-dim);
line-height: 1.55;
margin-bottom: 28px;
}
.modal-actions {
display: flex;
gap: 12px;
}
.modal-btn {
flex: 1;
padding: 11px 18px;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
font-family: var(--sans);
}
.modal-btn.btn-cancel {
background: rgba(255, 255, 255, 0.04);
color: var(--fg-dim);
border-color: rgba(255, 255, 255, 0.06);
}
.modal-btn.btn-cancel:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--fg);
}
.modal-btn.btn-confirm {
background: var(--accent);
color: #000;
}
.modal-btn.btn-confirm:hover {
box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
opacity: 0.95;
}
/* Finish Early Sidebar Button */
.finish-early-btn {
background: rgba(139, 92, 246, 0.1) !important;
border: 1.5px solid rgba(139, 92, 246, 0.4) !important;
color: #c084fc !important;
font-weight: 600 !important;
transition: all 0.25s ease !important;
}
.finish-early-btn:hover {
background: rgba(139, 92, 246, 0.22) !important;
border-color: rgba(139, 92, 246, 0.8) !important;
color: #e9d5ff !important;
box-shadow: 0 0 16px rgba(139, 92, 246, 0.2) !important;
}
/* ── Focus Mode (Zen Mode) Styling ── */
/* Global Transition Hooks */
.topbar {
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease, background-color 0.28s ease !important;
}
.breadcrumb,
.lesson-head,
.lesson-toc-col,
.lesson-tabs,
.lesson-tab-content,
.lesson-nav,
#ai-fab {
transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease !important;
}
.lesson-main {
transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease, margin 0.3s ease !important;
}
/* Floating Exit Button */
.focus-mode-exit-btn {
display: none;
position: fixed;
top: 24px;
right: 28px;
background: rgba(22, 28, 41, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
padding: 8px 16px;
color: var(--fg-dim);
font-size: 13px;
font-weight: 600;
cursor: pointer;
align-items: center;
gap: 6px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 10000;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: all 0.2s ease;
font-family: var(--sans);
}
.focus-mode-exit-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--fg);
border-color: rgba(255, 255, 255, 0.18);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.focus-mode-exit-btn span {
font-size: 15px;
}
[data-theme="light"] .focus-mode-exit-btn {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(0, 0, 0, 0.06);
color: var(--fg-dim);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .focus-mode-exit-btn:hover {
background: #ffffff;
color: var(--fg);
border-color: rgba(0, 0, 0, 0.12);
}
/* Active State for Header Toggle Button */
.focus-toggle-action-btn.active {
border-color: var(--accent) !important;
color: var(--accent) !important;
background: rgba(56, 189, 248, 0.08) !important;
}
/* Focus Mode Active Overrides */
html.focus-mode-active .topbar {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
}
html.focus-mode-active .breadcrumb,
html.focus-mode-active .lesson-head,
html.focus-mode-active .lesson-toc-col,
html.focus-mode-active .lesson-tabs,
html.focus-mode-active .lesson-tab-content,
html.focus-mode-active .lesson-nav,
html.focus-mode-active #ai-fab {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
html.focus-mode-active .lesson-main {
max-width: 740px !important;
margin: 40px auto 80px auto !important;
}
html.focus-mode-active .focus-mode-exit-btn {
display: inline-flex !important;
}
/* Focus Mode Footer Override */
html.focus-mode-active .footer {
display: none !important;
}
/* Premium Translucent Footer */
.footer {
border-top: 1px solid var(--border);
padding: 24px 28px;
background: transparent;
margin-top: auto;
flex-shrink: 0;
transition: opacity 0.25s ease, visibility 0.25s ease !important;
}
.footer-content {
max-width: 980px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: var(--fg-muted);
}
.footer-copy {
letter-spacing: -0.01em;
}
.footer-online {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
padding: 4px 10px;
border-radius: 99px;
font-family: var(--mono);
color: var(--fg-dim);
}
[data-theme="light"] .footer-online {
background: rgba(0, 0, 0, 0.01);
}
.online-dot {
width: 6px;
height: 6px;
background-color: var(--good);
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 8px var(--good);
animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
0% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 6px var(--good); }
50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 10px var(--good); }
100% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 6px var(--good); }
}
/* ══════════════════════════════════════════════════════════════════════════════
INTERVIEW ROOM — новый дизайн (.ivr-*)
══════════════════════════════════════════════════════════════════════════════ */
body.interview-room-active { overflow: hidden; }
.ivr-root {
display: flex;
height: calc(100vh - 56px); /* subtract nav height */
overflow: hidden;
background: var(--bg);
}
/* ── Sidebar ── */
.ivr-sidebar {
width: 240px;
min-width: 200px;
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px 16px;
border-right: 1px solid var(--border);
background: var(--bg-elev-1);
overflow-y: auto;
}
.ivr-interviewer {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.ivr-avatar {
font-size: 28px;
width: 44px; height: 44px;
background: var(--bg-elev-2);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ivr-name { font-size: 14px; font-weight: 700; color: var(--fg); }
.ivr-status { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.ivr-meta { display: flex; flex-direction: column; gap: 4px; }
.ivr-meta-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--fg-muted); }
.ivr-meta-val { font-size: 13px; color: var(--fg); }
.ivr-timer { font-size: 22px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.ivr-progress-track {
height: 4px;
background: var(--bg-elev-3, var(--border));
border-radius: 2px;
overflow: hidden;
}
.ivr-progress-fill {
height: 100%;
background: var(--accent);
border-radius: 2px;
transition: width .4s ease;
}
.ivr-btn {
display: block;
width: 100%;
padding: 10px 14px;
border-radius: 10px;
border: none;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: center;
transition: all .15s;
}
.ivr-btn-accent { background: var(--accent); color: #fff; }
.ivr-btn-accent:hover { filter: brightness(1.1); }
.ivr-btn-ghost { background: var(--bg-elev-2); color: var(--fg-muted); border: 1px solid var(--border); }
.ivr-btn-ghost:hover { color: var(--fg); border-color: var(--fg-muted); }
/* ── Main chat area ── */
.ivr-main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
.ivr-messages {
flex: 1;
overflow-y: auto;
padding: 24px 32px;
display: flex;
flex-direction: column;
gap: 16px;
}
.ivr-messages::-webkit-scrollbar { width: 4px; }
.ivr-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* ── Message bubbles ── */
.msg-user-wrap { display: flex; justify-content: flex-end; }
.msg-user {
background: var(--accent);
color: #fff;
padding: 10px 16px;
border-radius: 18px 18px 4px 18px;
max-width: 72%;
font-size: 14px;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
.msg-ai {
background: var(--bg-elev-1);
border: 1px solid var(--border);
border-radius: 4px 18px 18px 18px;
max-width: 88%;
overflow: hidden;
}
.msg-final {
max-width: 100%;
border-color: var(--accent);
background: rgba(167,139,250,.04);
}
.eval-badge {
padding: 6px 14px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .3px;
border-bottom: 1px solid var(--border);
}
.eval-ok { background: rgba(74,222,128,.12); color: #4ade80; }
.eval-part { background: rgba(250,204,21,.10); color: #facc15; }
.eval-bad { background: rgba(248,113,113,.10); color: #f87171; }
.msg-body {
padding: 12px 16px;
font-size: 14px;
line-height: 1.65;
color: var(--fg);
}
.msg-body ul { padding-left: 20px; margin: 8px 0; }
.msg-body li { margin: 4px 0; }
.msg-body pre { background: var(--bg-elev-3, #1e293b); border-radius: 8px; padding: 12px; overflow-x: auto; margin: 8px 0; font-size: 13px; }
.msg-body code { background: var(--bg-elev-2); padding: 2px 5px; border-radius: 4px; font-size: 13px; }
.msg-body strong { color: var(--fg); }
/* Question number marker inside AI message */
.q-marker {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(167, 139, 250, 0.12);
color: var(--accent);
border: 1px solid rgba(167, 139, 250, 0.25);
border-radius: 20px;
padding: 4px 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: .3px;
margin: 10px 0 6px;
}
.q-marker::before { content: '❓'; font-size: 13px; }
.typing-dots { display: flex; gap: 5px; padding: 14px 16px; }
.typing-dots span {
width: 7px; height: 7px;
background: var(--fg-muted);
border-radius: 50%;
animation: typingBounce .8s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce {
0%,80%,100% { transform: translateY(0); }
40% { transform: translateY(-6px); }
}
.ivr-empty { text-align: center; padding: 48px 24px; color: var(--fg-muted); font-size: 14px; }
/* ── Input area ── */
.ivr-input-wrap {
border-top: 1px solid var(--border);
padding: 12px 20px 16px;
background: var(--bg-elev-1);
}
.ivr-input-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ivr-mic-btn, .ivr-tts-btn, .ivr-pomo-btn {
background: none; border: none; cursor: pointer;
font-size: 17px; padding: 4px 6px; border-radius: 8px;
opacity: .55; transition: all .15s;
}
.ivr-mic-btn:hover, .ivr-tts-btn:hover, .ivr-pomo-btn:hover { opacity: 1; background: var(--bg-elev-2); }
.ivr-mic-btn.active { opacity: 1; color: #f87171; animation: pulseVoice 1s infinite alternate; }
.ivr-tts-btn.active { opacity: 1; color: var(--accent); }
@keyframes pulseVoice { from { opacity: .7; } to { opacity: 1; } }
.ivr-mic-status { font-size: 12px; color: var(--fg-muted); }
.ivr-input-row {
display: flex;
gap: 8px;
background: var(--bg-elev-2);
border: 1px solid var(--border);
border-radius: 14px;
padding: 8px 8px 8px 14px;
transition: border-color .2s;
}
.ivr-input-row:focus-within { border-color: var(--accent); }
.ivr-textarea {
flex: 1; background: none; border: none; outline: none;
color: var(--fg); font-family: inherit; font-size: 14px;
resize: none; padding: 4px 0; line-height: 1.5; min-height: 40px;
}
.ivr-input-btns { display: flex; align-items: flex-end; gap: 6px; }
.ivr-hint-btn {
background: none; border: none; cursor: pointer; font-size: 18px;
padding: 6px; border-radius: 8px; opacity: .6; transition: all .15s;
}
.ivr-hint-btn:hover { opacity: 1; background: var(--bg-elev-3, var(--border)); }
.ivr-send-btn {
background: var(--accent); color: #fff; border: none; cursor: pointer;
font-size: 18px; font-weight: 700; width: 38px; height: 38px;
border-radius: 10px; display: flex; align-items: center; justify-content: center;
transition: all .15s;
}
.ivr-send-btn:hover { filter: brightness(1.1); }
.ivr-send-btn:disabled { opacity: .4; cursor: default; }
/* ── Code pane ── */
.ivr-code-pane {
width: 420px;
min-width: 300px;
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
}
.ivr-code-header {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 16px;
border-bottom: 1px solid var(--border);
background: var(--bg-elev-1);
}
/* ── Results overlay ── */
/* ── Results overlay ── */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scaleUp {
from { transform: scale(0.96); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.ivr-results-overlay {
position: fixed; inset: 0;
background: rgba(8, 7, 12, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ivr-results-card {
background: var(--bg-elev-1);
border: 1px solid rgba(167, 139, 250, 0.2);
border-radius: 24px;
padding: 32px;
max-width: 740px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
scrollbar-width: thin;
scrollbar-color: rgba(167, 139, 250, 0.3) transparent;
animation: scaleUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ivr-results-card::-webkit-scrollbar,
.res-raw-text::-webkit-scrollbar {
width: 6px;
}
.ivr-results-card::-webkit-scrollbar-thumb,
.res-raw-text::-webkit-scrollbar-thumb {
background: rgba(167, 139, 250, 0.25);
border-radius: 10px;
}
.ivr-results-card::-webkit-scrollbar-track,
.res-raw-text::-webkit-scrollbar-track {
background: transparent;
}
.ivr-results-top {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 24px;
border-bottom: 1px solid var(--border);
padding-bottom: 16px;
}
.ivr-results-top h2 {
font-family: var(--display);
font-size: 24px;
font-weight: 800;
background: linear-gradient(135deg, var(--fg), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
}
.ivr-results-close {
background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border);
color: var(--fg-muted); width: 36px; height: 36px; border-radius: 50%;
cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
transition: all 0.2s ease;
}
.ivr-results-close:hover {
background: rgba(248, 113, 113, 0.15);
color: #f87171;
border-color: rgba(248, 113, 113, 0.3);
transform: rotate(90deg);
}
.ivr-score-row {
display: flex;
align-items: center;
gap: 28px;
margin-bottom: 28px;
background: rgba(167, 139, 250, 0.04);
border-radius: 16px;
padding: 20px;
border: 1px solid rgba(167, 139, 250, 0.1);
}
.ivr-score-circle {
width: 96px; height: 96px; border-radius: 50%;
border: 4px solid var(--border);
display: flex; flex-direction: column; align-items: center; justify-content: center;
flex-shrink: 0;
background: rgba(0, 0, 0, 0.15);
box-shadow: 0 0 20px rgba(167, 139, 250, 0.1);
transition: all 0.3s ease;
}
.ivr-score-num { font-size: 32px; font-weight: 900; line-height: 1; font-family: var(--display); }
.ivr-score-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin-top: 2px; }
.ivr-score-label-wrap { display: flex; flex-direction: column; gap: 6px; }
.ivr-score-label { font-size: 20px; font-weight: 800; color: var(--fg); }
.ivr-stats-row { display: flex; gap: 8px; }
.res-stat { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 12px; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.stat-ok { background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.2); color: #4ade80; }
.stat-part { background: rgba(250,204,21,.08); border: 1px solid rgba(250,204,21,.2); color: #facc15; }
.stat-bad { background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.2); color: #f87171; }
.ivr-results-sections { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.ivr-results-sec {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
border-radius: 16px;
padding: 20px;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.ivr-results-sec:hover {
transform: translateY(-2px);
border-color: rgba(167, 139, 250, 0.25);
}
[data-theme="light"] .ivr-results-sec { background: rgba(0, 0, 0, 0.01); }
.ivr-results-sec h4 {
font-size: 13.5px; font-weight: 800; margin-top: 0; margin-bottom: 12px;
color: var(--fg); border-bottom: 1px solid var(--border); padding-bottom: 8px;
display: flex; align-items: center; gap: 6px;
}
.ivr-results-sec ul { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ivr-results-sec li {
font-size: 12.5px; line-height: 1.5; color: var(--fg-muted);
position: relative; padding-left: 14px;
}
.ivr-results-sec li::before {
content: ""; position: absolute; left: 0; top: 7px;
width: 5px; height: 5px; border-radius: 50%;
background: var(--accent); opacity: 0.7;
}
.ivr-results-sec li.muted { color: var(--fg-muted); font-style: italic; padding-left: 0; }
.ivr-results-sec li.muted::before { display: none; }
#res-breakdown-wrap {
background: rgba(255, 255, 255, 0.01);
border: 1px solid var(--border);
border-radius: 16px;
padding: 20px;
margin-top: 24px;
}
.res-breakdown-list { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.res-breakdown-list li {
font-size: 13px; color: var(--fg-muted); padding: 10px 14px;
background: rgba(0, 0, 0, 0.15); border-radius: 8px;
border-left: 3px solid var(--accent);
}
[data-theme="light"] .res-breakdown-list li { background: rgba(0, 0, 0, 0.02); }
.res-raw-details { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; }
.res-raw-details summary {
font-size: 13.5px; font-weight: 700; color: var(--accent); cursor: pointer;
padding: 8px 0; display: flex; align-items: center; gap: 6px; user-select: none;
transition: color 0.2s;
}
.res-raw-details summary:hover { color: var(--fg); }
.res-raw-text {
font-size: 13px; line-height: 1.6; color: var(--fg-muted);
max-height: 250px; overflow-y: auto;
padding: 16px; background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--border); border-radius: 12px; margin-top: 12px;
}
.res-raw-text ul { padding-left: 18px; }
.res-raw-text pre { font-size: 12px; background: var(--bg); padding: 8px; border-radius: 6px; overflow-x: auto; }
/* ── Responsive ── */
@media (max-width: 768px) {
.ivr-sidebar { width: 56px; min-width: 56px; padding: 12px 8px; gap: 8px; }
.ivr-name, .ivr-status, .ivr-meta, .ivr-btn { display: none; }
.ivr-avatar { width: 36px; height: 36px; font-size: 20px; }
.ivr-results-sections { grid-template-columns: 1fr; gap: 12px; }
.ivr-messages { padding: 16px; }
.ivr-input-wrap { padding: 8px 12px 12px; }
.ivr-results-card { padding: 20px; }
.ivr-score-row { flex-direction: column; text-align: center; gap: 16px; }
}
/* ── Premium Mock Interview Final Results & Markdown Parsing Styles ── */
.msg-body h1, .msg-body h2, .msg-body h3 {
font-family: var(--display);
font-weight: 700;
color: var(--fg);
margin-top: 24px;
margin-bottom: 12px;
}
.msg-body h1 { font-size: 20px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.msg-body h2 { font-size: 17px; }
.msg-body h3 { font-size: 15px; }
/* Custom Blockquote style for Scorecards */
.msg-body blockquote {
border-left: 4px solid var(--accent);
background: rgba(167, 139, 250, 0.08);
padding: 14px 18px;
margin: 16px 0;
border-radius: 0 12px 12px 0;
font-size: 14.5px;
font-weight: 500;
color: var(--fg);
line-height: 1.5;
box-shadow: inset 0 0 10px rgba(167, 139, 250, 0.02);
}
[data-theme="light"] .msg-body blockquote {
background: rgba(167, 139, 250, 0.04);
}
/* Premium styled box for the final mock interview report */
.msg-final {
max-width: 100% !important;
border: 1px solid rgba(167, 139, 250, 0.35) !important;
background: linear-gradient(135deg, rgba(167, 139, 250, 0.04), rgba(167, 139, 250, 0.01)) !important;
border-radius: 16px !important;
box-shadow: 0 8px 32px rgba(167, 139, 250, 0.04);
}
.msg-final .msg-body {
padding: 24px 28px !important;
}
/* Format H3 inside the report into stylish block headers */
.msg-final .msg-body h3 {
font-size: 15px;
font-weight: 700;
color: var(--accent);
margin-top: 32px;
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 8px;
letter-spacing: -0.01em;
}
/* Format List Containers */
.msg-final .msg-body ul {
list-style: none;
padding-left: 0;
margin: 0 0 16px 0;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Format List Items as Card Blocks */
.msg-final .msg-body li {
position: relative;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 16px;
margin: 0;
font-size: 13.5px;
line-height: 1.6;
list-style: none;
}
[data-theme="light"] .msg-final .msg-body li {
background: rgba(0, 0, 0, 0.01);
}
/* Format Nested Lists (e.g. detailed breakdowns of criteria under gaps) */
.msg-final .msg-body li ul {
margin-top: 10px;
margin-bottom: 0;
display: flex;
flex-direction: column;
gap: 8px;
padding-left: 0;
}
.msg-final .msg-body li li {
background: transparent;
border: none;
padding: 0 0 0 12px;
margin: 0;
font-size: 13px;
color: var(--fg-muted);
border-left: 2px solid var(--border);
border-radius: 0;
}
.msg-final .msg-body li li strong {
color: var(--fg-dim);
}
/* ── Course Manager ─────────────────────────────────────────────────────── */
/* Toast */
.cm-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px); background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 18px; font-size: 13px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9999; }
.cm-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cm-toast-ok { border-color: #4caf50; color: #4caf50; }
.cm-toast-err { border-color: #f44; color: #f44; }
/* Flash (server-side) */
.cm-flash { padding: 10px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.cm-flash-ok { background: #1a3a1a; color: #4caf50; border: 1px solid #4caf50; }
.cm-flash-err { background: #3a1a1a; color: #f44; border: 1px solid #f44; }
/* Two-column layout */
.cm-layout { display: flex; height: calc(100vh - 60px); overflow: hidden; margin: -16px -20px 0; }
/* Sidebar */
.cm-sidebar { width: 230px; min-width: 180px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--bg-elev); overflow: hidden; }
.cm-sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 8px; }
.cm-back-link { font-size: 12px; color: var(--fg-muted); text-decoration: none; padding: 4px 6px; border-radius: 5px; transition: all .12s; }
.cm-back-link:hover { color: var(--fg); background: var(--bg-elev-2); }
.cm-sidebar-actions { display: flex; gap: 2px; }
.cm-icon-btn { background: none; border: none; cursor: pointer; color: var(--fg-muted); font-size: 15px; padding: 4px 7px; border-radius: 6px; text-decoration: none; transition: all .12s; }
.cm-icon-btn:hover { color: var(--fg); background: var(--bg-elev-2); }
.cm-sidebar-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--fg-muted); padding: 0 14px 6px; text-transform: uppercase; }
.cm-sidebar-search-wrap { padding: 0 10px 6px; }
.cm-sidebar-search { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 12px; color: var(--fg); outline: none; box-sizing: border-box; }
.cm-sidebar-search:focus { border-color: var(--accent); }
.cm-course-list { flex: 1; overflow-y: auto; padding: 0 6px 12px; }
.cm-course-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--fg-muted); transition: all .12s; margin-bottom: 1px; }
.cm-course-item:hover { background: var(--bg-elev-2); color: var(--fg); }
.cm-course-item.active { background: var(--accent); color: #fff; }
.cm-course-item.active .cm-course-cnt { background: rgba(255,255,255,.25); }
.cm-course-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-course-cnt { background: var(--bg-elev-2); border-radius: 99px; padding: 1px 7px; font-size: 11px; font-weight: 600; flex-shrink: 0; margin-left: 6px; }
/* Main panel */
.cm-main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.cm-panel { flex-direction: column; padding: 18px 20px; flex: 1; }
/* Panel header */
.cm-panel-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.cm-panel-title { font-size: 16px; font-weight: 600; }
.cm-panel-id { font-size: 12px; display: block; margin-top: 2px; }
/* New lesson panel */
.cm-new-panel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.cm-new-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 14px; }
.cm-close-btn { background: none; border: none; color: var(--fg-muted); cursor: pointer; font-size: 16px; padding: 2px 6px; }
.cm-close-btn:hover { color: var(--fg); }
.cm-new-form { display: flex; flex-direction: column; gap: 14px; }
.cm-new-row { display: flex; gap: 16px; flex-wrap: wrap; }
.cm-new-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px; }
.cm-field-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); }
.cm-field-hint { font-size: 11px; color: var(--fg-muted); }
.cm-new-lid { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 13px; color: var(--fg); outline: none; font-family: monospace; }
.cm-new-lid:focus { border-color: var(--accent); }
/* Lesson search */
.cm-lesson-search-wrap { margin-bottom: 10px; }
.cm-lesson-search { width: 100%; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 7px; padding: 7px 12px; font-size: 13px; color: var(--fg); outline: none; box-sizing: border-box; }
.cm-lesson-search:focus { border-color: var(--accent); }
/* Lesson list */
.cm-lesson-list { display: flex; flex-direction: column; gap: 2px; }
.cm-lesson-item { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cm-lesson-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; background: var(--bg-elev); user-select: none; transition: background .12s; }
.cm-lesson-row:hover { background: var(--bg-elev-2); }
.cm-arrow { font-size: 10px; color: var(--fg-muted); width: 10px; flex-shrink: 0; }
.cm-lesson-name { font-family: monospace; font-size: 13px; flex: 1; }
.cm-file-count { font-size: 12px; color: var(--fg-muted); }
.cm-del-lesson { background: none; border: none; cursor: pointer; color: var(--fg-muted); font-size: 13px; padding: 3px 7px; border-radius: 4px; opacity: 0; transition: opacity .12s; }
.cm-lesson-row:hover .cm-del-lesson { opacity: 1; }
.cm-del-lesson:hover { color: var(--danger, #e05); background: rgba(255,0,0,.08); }
/* Lesson body */
.cm-lesson-body { background: var(--bg); border-top: 1px solid var(--border); }
.cm-files { padding: 6px 14px 0; }
.cm-file-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; }
.cm-file-row:hover { background: var(--bg-elev); }
.cm-file-icon { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; }
.cm-file-name { font-family: monospace; font-size: 13px; flex: 1; }
.cm-del-file { background: none; border: none; cursor: pointer; color: var(--fg-muted); font-size: 16px; padding: 0 4px; border-radius: 4px; line-height: 1; opacity: 0; transition: opacity .12s; }
.cm-file-row:hover .cm-del-file { opacity: 1; }
.cm-del-file:hover { color: var(--danger, #e05); }
.cm-no-files { font-size: 13px; padding: 10px 14px; }
.cm-no-lessons { padding: 40px; text-align: center; font-size: 13px; }
/* Upload row */
.cm-upload-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); margin-top: 4px; flex-wrap: wrap; }
.cm-file-input { font-size: 12px; color: var(--fg-muted); flex: 1; }
/* Import modal */
.cm-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.cm-modal { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 24px; width: 520px; max-width: 90vw; }
.cm-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 15px; }
/* Empty state */
.cm-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 10px; color: var(--fg-muted); min-height: 300px; }
.cm-empty-icon { font-size: 40px; opacity: .4; }
.cm-empty-text { font-size: 14px; }
/* Admin quick actions */
.admin-quick-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.admin-quick-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; color: var(--fg); font-size: 14px; text-decoration: none; transition: all .15s; }
.admin-quick-btn:hover { background: var(--bg-elev-2); border-color: var(--accent); color: var(--accent); }
@media (max-width: 576px) {
.today-header {
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
padding: 24px 20px;
}
.today-header-avatar {
width: 72px;
height: 72px;
font-size: 32px;
}
}
/* Скрываем стандартный треугольник выбора у инпута модели, чтобы он не перекрывал крестик очистки */
#custom_ai_model::-webkit-calendar-picker-indicator {
display: none !important;
}
/* Скрываем крестик очистки, если поле ввода модели пустое */
#custom_ai_model:placeholder-shown ~ .clear-input-btn {
display: none !important;
}
/* ========================================================================
LANDING PAGE
======================================================================== */
.landing {
overflow-x: hidden;
background-color: #0b0914;
color: var(--fg);
font-family: 'Inter', sans-serif;
position: relative;
}
/* Hide standard layout header and footer on landing & auth pages */
body:has(.landing) > .topbar,
body:has(.landing) > .footer,
body:has(.auth-wrap) > .topbar,
body:has(.auth-wrap) > .footer {
display: none !important;
}
body:has(.landing) > main,
body:has(.auth-wrap) > main {
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* ----- NEON BACKGROUND ORBS ----- */
.landing-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1000px;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.landing-orb {
position: absolute;
border-radius: 50%;
filter: blur(120px);
opacity: 0.15;
mix-blend-mode: screen;
animation: floatOrb 25s infinite alternate ease-in-out;
}
.landing-orb-1 {
width: 500px;
height: 500px;
background: radial-gradient(circle, #6366f1 0%, transparent 80%);
top: -100px;
left: -100px;
}
.landing-orb-2 {
width: 600px;
height: 600px;
background: radial-gradient(circle, #a855f7 0%, transparent 80%);
top: 200px;
right: -200px;
animation-delay: -5s;
animation-duration: 30s;
}
.landing-orb-3 {
width: 400px;
height: 400px;
background: radial-gradient(circle, #06b6d4 0%, transparent 80%);
bottom: -50px;
left: 30%;
animation-delay: -10s;
animation-duration: 20s;
}
@keyframes floatOrb {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(60px, 40px) scale(1.15); }
100% { transform: translate(-30px, -50px) scale(0.9); }
}
/* ----- FLOATING GLASSNAV ----- */
.landing-nav {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 40px);
max-width: 1100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 28px;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
border: 1px solid rgba(255, 255, 255, 0.03);
border-radius: 20px;
background: rgba(13, 11, 23, 0.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-sizing: border-box;
}
.landing-nav-scrolled {
top: 10px;
padding: 12px 24px;
background: rgba(13, 11, 23, 0.7);
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(99, 102, 241, 0.05);
}
.landing-nav .brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.brand-logo-wrapper {
position: relative;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.brand-logo-img {
width: 32px;
height: 32px;
filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.4));
}
.landing-nav .brand:hover .brand-logo-wrapper {
transform: rotate(15deg) scale(1.1);
}
.brand-text {
font-family: 'Outfit', sans-serif;
font-size: 21px;
font-weight: 700;
color: #fff;
letter-spacing: -0.5px;
background: linear-gradient(135deg, #fff 50%, rgba(255, 255, 255, 0.7) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.landing-nav-links {
display: flex;
align-items: center;
gap: 20px;
}
.landing-nav-link {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 14.5px;
font-weight: 500;
transition: color 0.2s;
}
.landing-nav-link:hover {
color: #fff;
}
/* Button style */
.landing-btn-sm {
display: inline-flex;
align-items: center;
padding: 10px 20px;
background: linear-gradient(135deg, var(--accent), #818cf8);
color: #0b0914 !important;
font-weight: 600;
font-size: 13.5px;
border-radius: 10px;
text-decoration: none;
transition: all 0.2s;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
}
.landing-btn-sm:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
filter: brightness(1.1);
}
/* ----- HERO ELEMENTS ----- */
.landing-hero {
position: relative;
padding-top: 150px;
padding-bottom: 80px;
z-index: 1;
}
.landing-hero-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 32px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.landing-hero-content {
max-width: 800px;
margin-bottom: 60px;
}
.landing-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
color: #a5b4fc;
font-size: 13px;
font-weight: 500;
margin-bottom: 24px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.landing-title {
font-family: 'Outfit', sans-serif;
font-size: clamp(36px, 6vw, 64px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -1.5px;
color: #fff;
margin: 0 0 20px;
}
.landing-accent {
background: linear-gradient(to right, #38bdf8, #818cf8, #a855f7, #38bdf8);
background-size: 300% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shineGradient 8s linear infinite;
}
@keyframes shineGradient {
0% { background-position: 0% center; }
100% { background-position: 300% center; }
}
.landing-subtitle {
font-size: clamp(16px, 2.5vw, 19px);
color: rgba(255, 255, 255, 0.65);
line-height: 1.6;
max-width: 640px;
margin: 0 auto 36px;
}
.landing-hero-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
}
/* BUTTONS */
.landing-btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: linear-gradient(135deg, var(--accent), #818cf8);
color: #0b0914 !important;
font-weight: 600;
font-size: 15px;
border-radius: 12px;
text-decoration: none;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25);
}
.landing-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
filter: brightness(1.08);
}
.landing-btn-glow {
position: relative;
}
.landing-btn-glow::after {
content: '';
position: absolute;
inset: -2px;
background: linear-gradient(135deg, var(--accent), #818cf8);
border-radius: 14px;
z-index: -1;
opacity: 0.4;
filter: blur(8px);
transition: opacity 0.2s;
}
.landing-btn-glow:hover::after {
opacity: 0.8;
}
.landing-btn-outline {
display: inline-flex;
align-items: center;
padding: 14px 28px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff !important;
font-weight: 600;
font-size: 15px;
border-radius: 12px;
text-decoration: none;
transition: all 0.2s;
}
.landing-btn-outline:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
.landing-btn-lg {
padding: 16px 36px;
font-size: 16px;
}
/* ----- DASHBOARD MOCKUP ----- */
.landing-hero-visual {
width: 100%;
max-width: 960px;
margin-top: 20px;
position: relative;
}
.landing-hero-visual::before {
content: '';
position: absolute;
inset: -10px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.15));
border-radius: 20px;
z-index: -1;
filter: blur(40px);
opacity: 0.5;
}
.landing-mockup {
background: rgba(17, 15, 30, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
text-align: left;
}
.landing-mockup-header {
height: 52px;
background: rgba(13, 11, 23, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
padding: 0 20px;
position: relative;
}
.landing-mockup-dots {
display: flex;
gap: 7px;
position: absolute;
left: 20px;
}
.landing-mockup-dots span {
width: 11px;
height: 11px;
border-radius: 50%;
display: inline-block;
}
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }
.landing-mockup-address {
margin: 0 auto;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
padding: 6px 30px;
font-family: monospace;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.5);
}
.landing-mockup-address span {
color: rgba(255, 255, 255, 0.85);
}
.mockup-stats-bar {
display: flex;
gap: 16px;
position: absolute;
right: 20px;
}
.mockup-stat-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.04);
padding: 4px 10px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.04);
}
/* Mockup Tabs */
.landing-mockup-tabs {
display: flex;
background: rgba(13, 11, 23, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding: 8px 16px 0;
gap: 4px;
}
.mockup-tab-btn {
background: transparent;
border: none;
outline: none;
color: rgba(255, 255, 255, 0.5);
padding: 10px 18px;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
border-radius: 8px 8px 0 0;
transition: all 0.25s;
border: 1px solid transparent;
border-bottom: none;
}
.mockup-tab-btn:hover {
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.02);
}
.mockup-tab-btn.active {
color: #fff;
background: rgba(17, 15, 30, 0.9);
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
position: relative;
}
.mockup-tab-btn.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background: #6366f1;
}
.landing-mockup-body {
min-height: 380px;
position: relative;
}
.mockup-panel {
display: none;
padding: 24px;
animation: fadeInPanel 0.4s ease-out forwards;
}
.mockup-panel.active {
display: block;
}
@keyframes fadeInPanel {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
/* PANEL 1: CHAT DETAIL */
.mockup-chat {
display: flex;
flex-direction: column;
height: 340px;
background: rgba(255, 255, 255, 0.01);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 12px;
overflow: hidden;
}
.mockup-chat-header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
background: rgba(13, 11, 23, 0.4);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.chat-avatar {
font-size: 20px;
}
.chat-header-info .chat-name {
font-weight: 600;
font-size: 14px;
color: #fff;
}
.chat-header-info .chat-status {
font-size: 11.5px;
color: #10b981;
}
.mockup-chat-messages {
flex: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.chat-row {
display: flex;
width: 100%;
}
.chat-row-ai { justify-content: flex-start; }
.chat-row-user { justify-content: flex-end; }
.chat-bubble {
max-width: 80%;
padding: 12px 16px;
border-radius: 14px;
font-size: 13.5px;
line-height: 1.5;
}
.chat-bubble-ai {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.9);
border-bottom-left-radius: 2px;
}
.chat-bubble-user {
background: #6366f1;
color: #fff;
border-bottom-right-radius: 2px;
}
.typing-indicator {
display: flex;
align-items: center;
gap: 4px;
height: 16px;
}
.typing-indicator span {
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
display: inline-block;
animation: typing 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}
/* PANEL 2: SRS DETAIL */
.mockup-srs-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.mockup-srs-header {
text-align: center;
}
.mockup-srs-header h4 {
font-size: 15px;
color: #fff;
margin: 0 0 4px;
}
.mockup-srs-header p {
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
margin: 0;
}
/* 3D Flippable Flashcard */
.flashcard-container {
width: 100%;
max-width: 460px;
height: 180px;
perspective: 1000px;
cursor: pointer;
}
.flashcard {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.flashcard-container.flipped .flashcard {
transform: rotateY(180deg);
}
.flashcard-front, .flashcard-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.flashcard-back {
transform: rotateY(180deg);
background: rgba(99, 102, 241, 0.05);
border-color: rgba(99, 102, 241, 0.15);
}
.flashcard-tag {
font-size: 11px;
font-weight: 700;
color: #818cf8;
text-transform: uppercase;
letter-spacing: 1px;
}
.flashcard-q {
font-size: 15px;
font-weight: 500;
color: #fff;
line-height: 1.5;
}
.flashcard-q code {
background: rgba(255, 255, 255, 0.06);
padding: 2px 6px;
border-radius: 4px;
font-size: 13.5px;
}
.flashcard-a {
font-size: 13.5px;
color: rgba(255,255,255,0.9);
line-height: 1.55;
overflow-y: auto;
}
.flashcard-hint {
font-size: 11.5px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
}
.mockup-srs-controls {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 100%;
}
.srs-action-hint {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.4);
}
.srs-rating-buttons {
display: flex;
gap: 12px;
}
.srs-rate-btn {
padding: 8px 16px;
border-radius: 8px;
border: 1px solid transparent;
font-size: 13px;
font-weight: 600;
cursor: pointer;
background: rgba(255, 255, 255, 0.03);
color: #fff;
transition: all 0.2s;
}
.srs-rate-btn:hover {
transform: translateY(-1px);
}
.rate-again:hover {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.3);
color: #f87171;
}
.rate-hard:hover {
background: rgba(245, 158, 11, 0.1);
border-color: rgba(245, 158, 11, 0.3);
color: #fbbf24;
}
.rate-easy:hover {
background: rgba(16, 185, 129, 0.1);
border-color: rgba(16, 185, 129, 0.3);
color: #34d399;
}
.floaty-xp-text {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
font-weight: 800;
color: #10b981;
text-shadow: 0 0 15px rgba(16, 185, 129, 0.6);
pointer-events: none;
animation: floatUpXp 0.8s ease-out forwards;
z-index: 10;
}
@keyframes floatUpXp {
0% { transform: translate(-50%, -20%) scale(0.8); opacity: 0; }
20% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
100% { transform: translate(-50%, -100%) scale(1); opacity: 0; }
}
/* PANEL 3: CODE COMPILER */
.mockup-code-wrapper {
display: flex;
flex-direction: column;
gap: 16px;
}
.code-editor-header {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(13, 11, 23, 0.4);
padding: 8px 16px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.04);
}
.editor-file {
font-family: monospace;
font-size: 13px;
color: rgba(255, 255, 255, 0.6);
}
.code-run-btn {
padding: 6px 14px;
background: #10b981;
color: #fff;
border: none;
border-radius: 6px;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}
.code-run-btn:hover {
background: #059669;
}
.code-run-btn:active {
transform: scale(0.97);
}
.code-run-btn:disabled {
background: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.4);
cursor: not-allowed;
}
.code-editor-content {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 8px;
padding: 16px;
overflow-x: auto;
}
.code-editor-content pre {
margin: 0;
}
.code-editor-content code {
font-family: 'Courier New', Courier, monospace;
font-size: 13.5px;
line-height: 1.5;
color: #a5b4fc;
}
.mock-terminal {
background: #090810;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
overflow: hidden;
}
.terminal-header {
background: rgba(255,255,255,0.02);
padding: 6px 12px;
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.3);
text-transform: uppercase;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.terminal-body {
padding: 12px;
font-family: monospace;
font-size: 12.5px;
color: #a6adbb;
min-height: 80px;
line-height: 1.6;
}
.terminal-prompt { color: #818cf8; }
.terminal-idle-text { color: rgba(255, 255, 255, 0.35); }
.terminal-info { color: #fbbf24; }
.terminal-success { color: #34d399; }
.terminal-output { color: #fff; font-weight: 600; }
.terminal-cursor {
animation: termCursor 1s infinite step-end;
}
@keyframes termCursor {
50% { opacity: 0; }
}
/* ----- INFINITE SKILLS TICKER ----- */
.skills-ticker-container {
width: 100%;
background: rgba(255, 255, 255, 0.01);
border-top: 1px solid rgba(255, 255, 255, 0.03);
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
padding: 20px 0;
overflow: hidden;
margin-top: 80px;
}
.skills-ticker-track {
display: flex;
width: max-content;
gap: 50px;
animation: scrollTicker 30s linear infinite;
}
.skills-ticker-track span {
font-family: 'Outfit', sans-serif;
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 0.35);
letter-spacing: 0.5px;
transition: color 0.3s;
cursor: default;
}
.skills-ticker-track span:hover {
color: var(--accent);
}
@keyframes scrollTicker {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ----- SECTIONS GENERAL ----- */
.landing-section {
max-width: 1100px;
margin: 0 auto;
padding: 100px 32px;
box-sizing: border-box;
}
.landing-section-alt {
background: rgba(13, 11, 23, 0.35);
border-top: 1px solid rgba(255, 255, 255, 0.02);
border-bottom: 1px solid rgba(255, 255, 255, 0.02);
max-width: 100%;
}
.landing-section-alt > * {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.landing-section-title {
font-family: 'Outfit', sans-serif;
font-size: clamp(26px, 4vw, 38px);
font-weight: 800;
text-align: center;
color: #fff;
margin: 0 auto 12px;
letter-spacing: -0.5px;
}
.landing-section-desc {
text-align: center;
color: rgba(255, 255, 255, 0.55);
font-size: 16px;
max-width: 600px;
margin: 0 auto 56px;
line-height: 1.6;
}
/* ----- FEATURES GRID (TILT CARDS) ----- */
.landing-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.landing-feature-card {
position: relative;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 18px;
padding: 36px 30px;
transition: border-color 0.3s, box-shadow 0.3s;
overflow: hidden;
transform-style: preserve-3d;
will-change: transform;
}
.landing-feature-card:hover {
border-color: rgba(99, 102, 241, 0.3);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
.card-glow {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
transition: background 0.1s;
}
.landing-feature-icon {
font-size: 32px;
margin-bottom: 24px;
display: inline-block;
transform: translateZ(30px);
}
.landing-feature-card h3 {
font-family: 'Outfit', sans-serif;
font-size: 19px;
font-weight: 700;
margin: 0 0 12px;
color: #fff;
transform: translateZ(20px);
}
.landing-feature-card p {
font-size: 14.5px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.6;
margin: 0;
transform: translateZ(10px);
}
/* ----- STEPPER LAYOUT (How it works - 21:9 immune) ----- */
.stepper-layout {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 60px;
align-items: center;
}
.stepper-controls {
display: flex;
flex-direction: column;
gap: 24px;
}
.stepper-step {
display: flex;
gap: 20px;
padding: 24px;
border-radius: 16px;
background: transparent;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.3s;
}
.stepper-step:hover {
background: rgba(255, 255, 255, 0.02);
border-color: rgba(255, 255, 255, 0.04);
}
.stepper-step.active {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(99, 102, 241, 0.15);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.stepper-step-num {
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 18px;
flex-shrink: 0;
transition: all 0.3s;
}
.stepper-step.active .stepper-step-num {
background: linear-gradient(135deg, var(--accent), #818cf8);
border-color: transparent;
color: #0b0914;
box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
}
.stepper-step-text h3 {
font-family: 'Outfit', sans-serif;
font-size: 17px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 6px;
transition: color 0.3s;
}
.stepper-step.active .stepper-step-text h3 {
color: #fff;
}
.stepper-step-text p {
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.55;
margin: 0;
}
/* Stepper Visual right panel */
.stepper-visual {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 20px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.stepper-visual-panel {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease, transform 0.4s ease;
transform: translateY(10px);
box-sizing: border-box;
}
.stepper-visual-panel.active {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* Mock Graphics for visual side */
.mock-catalog {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
max-width: 320px;
}
.catalog-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 16px;
}
.catalog-card.active-card {
border-color: rgba(99, 102, 241, 0.3);
background: rgba(99, 102, 241, 0.04);
}
.cat-badge {
font-size: 10px;
font-weight: 700;
color: #818cf8;
text-transform: uppercase;
background: rgba(99, 102, 241, 0.15);
padding: 2px 6px;
border-radius: 4px;
}
.catalog-card h4 {
font-size: 14px;
color: #fff;
margin: 8px 0 4px;
}
.catalog-card p {
font-size: 12px;
color: rgba(255,255,255,0.4);
margin: 0 0 10px;
}
.cat-progress {
height: 4px;
background: rgba(255,255,255,0.06);
border-radius: 2px;
overflow: hidden;
}
.cat-progress div {
height: 100%;
background: #6366f1;
}
.mock-lesson-view {
background: #0d0b17;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 16px;
width: 100%;
max-width: 320px;
display: flex;
flex-direction: column;
gap: 12px;
}
.lesson-header {
font-size: 12.5px;
font-weight: 700;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.06);
padding-bottom: 8px;
}
.lesson-chat-bubble {
font-size: 12px;
background: rgba(255,255,255,0.04);
padding: 8px 12px;
border-radius: 8px;
line-height: 1.4;
}
.user-label, .ai-label {
font-weight: 700;
display: block;
font-size: 10.5px;
margin-bottom: 2px;
}
.user-label { color: #38bdf8; }
.ai-label { color: #a855f7; }
.ai-bubble {
background: rgba(168, 85, 247, 0.06);
border: 1px solid rgba(168, 85, 247, 0.1);
}
.mock-srs-flow {
display: flex;
align-items: center;
gap: 12px;
}
.srs-flow-circle {
width: 76px;
height: 76px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.6);
text-align: center;
}
.srs-flow-circle.active-c {
background: rgba(99, 102, 241, 0.1);
border-color: #6366f1;
color: #fff;
box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}
.srs-flow-arrow {
color: rgba(255, 255, 255, 0.2);
font-size: 16px;
}
/* ----- LIVE PRACTICE PLAYGROUND ----- */
.playground-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.playground-info h2 {
font-family: 'Outfit', sans-serif;
font-size: clamp(26px, 4vw, 36px);
font-weight: 800;
color: #fff;
margin: 16px 0;
line-height: 1.25;
}
.playground-info p {
font-size: 16px;
color: rgba(255,255,255,0.55);
line-height: 1.6;
}
.playground-card {
background: rgba(255, 255, 255, 0.01);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
overflow: hidden;
backdrop-filter: blur(20px);
}
.playground-card-header {
background: rgba(255,255,255,0.02);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding: 16px 24px;
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.playground-card-body {
padding: 24px;
}
.playground-card .quiz-question {
font-size: 15px;
font-weight: 600;
color: #fff;
margin: 0 0 16px;
}
.playground-card .quiz-code {
background: #090810;
border: 1px solid rgba(255,255,255,0.04);
padding: 16px;
border-radius: 10px;
margin-bottom: 20px;
overflow-x: auto;
}
.playground-card .quiz-code code {
font-family: 'Courier New', Courier, monospace;
font-size: 13px;
color: #a5b4fc;
}
.playground-card .quiz-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.quiz-opt-btn {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 20px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
color: #fff;
font-size: 14px;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: all 0.25s;
}
.quiz-opt-btn:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.15);
}
.quiz-opt-btn span {
width: 24px;
height: 24px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 12.5px;
color: rgba(255,255,255,0.4);
}
.quiz-opt-btn:hover span {
background: rgba(255,255,255,0.1);
color: #fff;
}
.quiz-opt-btn.correct {
border-color: #10b981;
background: rgba(16, 185, 129, 0.08);
}
.quiz-opt-btn.correct span {
background: #10b981;
color: #fff;
}
.quiz-opt-btn.incorrect {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.08);
}
.quiz-opt-btn.incorrect span {
background: #ef4444;
color: #fff;
}
.quiz-result-msg {
margin-top: 16px;
font-size: 13.5px;
line-height: 1.5;
display: none;
padding: 12px 16px;
border-radius: 8px;
}
.quiz-result-msg.correct-msg {
display: block;
background: rgba(16, 185, 129, 0.08);
border: 1px solid rgba(16, 185, 129, 0.15);
color: #34d399;
}
.quiz-result-msg.incorrect-msg {
display: block;
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.15);
color: #f87171;
}
.wiggle-shake {
animation: wiggleShake 0.4s ease-in-out;
}
@keyframes wiggleShake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-6px); }
40%, 80% { transform: translateX(6px); }
}
/* ----- MOCK AI CONSOLE ----- */
.ai-console-layout {
display: flex;
flex-direction: column;
align-items: center;
}
.ai-console-header-block {
text-align: center;
max-width: 600px;
margin-bottom: 40px;
}
.ai-console-header-block h2 {
font-family: 'Outfit', sans-serif;
font-size: clamp(26px, 4vw, 36px);
font-weight: 800;
color: #fff;
margin: 16px 0 10px;
}
.ai-console-header-block p {
font-size: 16px;
color: rgba(255,255,255,0.5);
margin: 0;
}
.ai-console-card {
width: 100%;
max-width: 700px;
background: #0d0f14;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
padding: 20px;
box-sizing: border-box;
}
.ai-console-screen {
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.03);
border-radius: 12px;
height: 240px;
padding: 16px;
overflow-y: auto;
margin-bottom: 16px;
}
.ai-console-chat {
display: flex;
flex-direction: column;
gap: 12px;
}
.console-msg {
padding: 10px 14px;
border-radius: 10px;
font-size: 13px;
line-height: 1.5;
max-width: 85%;
}
.console-msg pre {
margin: 8px 0 0;
background: #090810;
padding: 10px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.04);
overflow-x: auto;
}
.console-msg code {
font-family: monospace;
color: #a5b4fc;
}
.console-msg-ai {
background: rgba(255, 255, 255, 0.04);
color: rgba(255,255,255,0.9);
align-self: flex-start;
border-bottom-left-radius: 2px;
}
.console-msg-user {
background: #6366f1;
color: #fff;
align-self: flex-end;
border-bottom-right-radius: 2px;
}
.ai-console-input-area {
display: flex;
gap: 12px;
margin-bottom: 16px;
}
.ai-console-input-area input {
flex: 1;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 14px 20px;
color: #fff;
font-size: 14px;
outline: none;
transition: all 0.2s;
}
.ai-console-input-area input:focus {
border-color: rgba(99, 102, 241, 0.5);
background: rgba(255,255,255,0.05);
box-shadow: 0 0 12px rgba(99,102,241,0.1);
}
.ai-console-send-btn {
padding: 0 24px;
background: linear-gradient(135deg, var(--accent), #818cf8);
color: #0d0f14;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
.ai-console-send-btn:hover {
filter: brightness(1.1);
}
.ai-console-quick-topics {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.ai-console-quick-topics span {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.35);
margin-right: 4px;
}
.ai-console-quick-topics button {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 6px 14px;
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.ai-console-quick-topics button:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(99, 102, 241, 0.2);
color: #fff;
}
/* ----- CTA SECTION ----- */
.landing-cta {
position: relative;
padding: 120px 32px;
text-align: center;
z-index: 1;
}
.landing-cta::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 900px;
height: 250px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
z-index: -1;
filter: blur(30px);
}
.landing-cta-content {
max-width: 650px;
margin: 0 auto;
}
.landing-cta-content h2 {
font-family: 'Outfit', sans-serif;
font-size: clamp(28px, 5vw, 42px);
font-weight: 800;
color: #fff;
margin: 0 0 16px;
letter-spacing: -1px;
}
.landing-cta-content p {
font-size: 17px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.6;
margin: 0 0 36px;
}
/* ----- FOOTER ----- */
.landing-footer {
border-top: 1px solid rgba(255, 255, 255, 0.04);
padding: 40px 32px;
text-align: center;
}
.landing-footer span {
font-size: 13.5px;
color: rgba(255, 255, 255, 0.35);
letter-spacing: 0.5px;
}
/* ===== MODALS (GLASSMORPHIC) ===== */
.landing-modal-overlay {
position: fixed;
inset: 0;
background: rgba(6, 5, 12, 0.5);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.landing-modal-overlay.visible {
opacity: 1;
pointer-events: auto;
}
.landing-modal-card {
width: 100%;
max-width: 420px;
background: rgba(17, 15, 30, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
padding: 40px;
position: relative;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
transform: scale(0.92) translateY(10px);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
box-sizing: border-box;
}
.landing-modal-overlay.visible .landing-modal-card {
transform: scale(1) translateY(0);
}
.landing-modal-close {
position: absolute;
top: 24px;
right: 24px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.4);
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
font-size: 11px;
}
.landing-modal-close:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border-color: rgba(255,255,255,0.15);
}
.landing-modal-card h1 {
font-family: 'Outfit', sans-serif;
font-size: 24px;
font-weight: 700;
color: #fff;
text-align: center;
margin: 0 0 24px;
}
.auth-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.auth-form label {
display: flex;
flex-direction: column;
gap: 6px;
}
.auth-form label span {
font-size: 12.5px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
margin-left: 4px;
}
.auth-form input {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 12px 16px;
color: #fff;
font-size: 14px;
outline: none;
transition: all 0.2s;
}
.auth-form input:focus {
border-color: rgba(99, 102, 241, 0.5);
background: rgba(255,255,255,0.05);
box-shadow: 0 0 10px rgba(99,102,241,0.1);
}
.btn-auth {
margin-top: 8px;
padding: 13px;
background: linear-gradient(135deg, var(--accent), #818cf8);
color: #0b0914;
border: none;
border-radius: 12px;
font-size: 14.5px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-auth:hover {
filter: brightness(1.1);
}
.auth-switch {
text-align: center;
margin-top: 24px;
font-size: 13.5px;
color: rgba(255, 255, 255, 0.4);
}
.auth-switch a {
color: #818cf8;
text-decoration: none;
font-weight: 600;
}
.auth-switch a:hover {
text-decoration: underline;
}
body.modal-open {
overflow: hidden;
}
/* ========================================================================
RESPONSIVE MEDIA QUERIES (21:9 immune by design)
======================================================================== */
@media (max-width: 1024px) {
.stepper-layout {
grid-template-columns: 1fr;
gap: 40px;
}
.stepper-visual {
height: 240px;
order: -1;
}
.playground-layout {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.playground-info {
max-width: 600px;
margin: 0 auto;
}
.playground-card {
max-width: 500px;
margin: 0 auto;
width: 100%;
}
.landing-features {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.landing-nav {
padding: 12px 20px;
}
.landing-nav-scrolled {
padding: 10px 18px;
}
.landing-nav-links {
gap: 12px;
}
.landing-nav-link {
font-size: 13.5px;
}
.landing-btn-sm {
padding: 8px 16px;
font-size: 12.5px;
}
.landing-title {
font-size: 40px;
}
.landing-subtitle {
font-size: 15.5px;
}
.landing-mockup-body {
min-height: 440px;
}
.landing-mockup-tabs {
flex-wrap: wrap;
}
.mockup-tab-btn {
flex: 1;
font-size: 12.5px;
padding: 8px 12px;
text-align: center;
}
.landing-features {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.landing-hero {
padding-top: 120px;
padding-bottom: 50px;
}
.landing-hero-container {
padding: 0 20px;
}
.landing-hero-actions {
flex-direction: column;
width: 100%;
gap: 12px;
}
.landing-btn-primary, .landing-btn-outline {
width: 100%;
justify-content: center;
box-sizing: border-box;
}
.mockup-stats-bar {
display: none; /* Hide top right stats on tiny mobiles */
}
.landing-mockup-body {
min-height: 480px;
}
.mockup-panel {
padding: 16px;
}
.flashcard-container {
height: 220px;
}
.srs-rating-buttons {
flex-direction: column;
width: 100%;
gap: 8px;
}
.srs-rate-btn {
width: 100%;
text-align: center;
}
.ai-console-input-area {
flex-direction: column;
}
.ai-console-send-btn {
padding: 14px;
width: 100%;
}
.landing-modal-card {
padding: 30px 20px;
}
}
/* ----- NEW LANDING STEPS GRID (21:9 immune by design) ----- */
.landing-steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.landing-step-card {
position: relative;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 18px;
padding: 36px 30px;
transition: border-color 0.3s, box-shadow 0.3s, transform 0.1s ease;
overflow: hidden;
transform-style: preserve-3d;
will-change: transform;
}
.landing-step-card:hover {
border-color: rgba(99, 102, 241, 0.3);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
.step-card-num {
width: 42px;
height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), #818cf8);
color: #0b0914;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 18px;
margin-bottom: 24px;
box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
transform: translateZ(30px);
}
.landing-step-card h3 {
font-family: 'Outfit', sans-serif;
font-size: 19px;
font-weight: 700;
margin: 0 0 12px;
color: #fff;
transform: translateZ(20px);
}
.landing-step-card p {
font-size: 14.5px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.6;
margin: 0;
transform: translateZ(10px);
}
@media (max-width: 1024px) {
.landing-steps-grid {
grid-template-columns: 1fr;
}
}
/* =====================================================================
LANDING PAGE — ENHANCED SECTIONS (scroll animations, stats, testimonials, faq)
===================================================================== */
/* ----- SCROLL REVEAL ----- */
.animate-in {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-in.in-view {
opacity: 1;
transform: translateY(0);
}
.animate-in.delay-1 { transition-delay: 0.10s; }
.animate-in.delay-2 { transition-delay: 0.20s; }
.animate-in.delay-3 { transition-delay: 0.30s; }
.animate-in.delay-4 { transition-delay: 0.40s; }
.animate-in.delay-5 { transition-delay: 0.50s; }
/* ----- HERO SOCIAL PROOF ----- */
.hero-social-proof {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 18px;
}
.hero-avatars {
display: flex;
}
.hero-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid #0b0914;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 700;
margin-left: -7px;
color: #fff;
flex-shrink: 0;
}
.hero-avatar:first-child { margin-left: 0; }
.ha-1 { background: linear-gradient(135deg, #6366f1, #818cf8); }
.ha-2 { background: linear-gradient(135deg, #10b981, #34d399); }
.ha-3 { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.ha-4 { background: linear-gradient(135deg, #ec4899, #f472b6); }
.ha-5 { background: rgba(255, 255, 255, 0.08); font-size: 9px; color: rgba(255,255,255,0.6); }
.hero-social-text {
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
white-space: nowrap;
}
.hero-social-text strong { color: #fff; font-weight: 600; }
.stars-inline { color: #f59e0b; letter-spacing: 1px; }
/* ----- STATS STRIP ----- */
.landing-stats-strip {
padding: 0 32px 80px;
}
.stats-strip-inner {
max-width: 900px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 20px;
overflow: hidden;
}
.stat-item {
padding: 36px 20px;
text-align: center;
border-right: 1px solid rgba(255, 255, 255, 0.05);
transition: background 0.25s;
}
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: rgba(99, 102, 241, 0.04); }
.stat-number {
font-family: 'Outfit', sans-serif;
font-size: clamp(26px, 3.5vw, 38px);
font-weight: 800;
background: linear-gradient(135deg, #fff 30%, #a5b4fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.1;
margin-bottom: 6px;
}
.stat-label {
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
font-weight: 500;
}
/* ----- TESTIMONIALS ----- */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.testimonial-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 18px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color 0.3s, transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
}
.testimonial-card:hover {
border-color: rgba(99, 102, 241, 0.25);
transform: translateY(-5px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}
.testimonial-stars {
color: #f59e0b;
font-size: 14px;
letter-spacing: 2px;
}
.testimonial-text {
font-size: 14.5px;
color: rgba(255, 255, 255, 0.72);
line-height: 1.7;
margin: 0;
flex: 1;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 16px;
}
.testimonial-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.ta-indigo { background: linear-gradient(135deg, #6366f1, #818cf8); }
.ta-emerald { background: linear-gradient(135deg, #10b981, #34d399); }
.ta-amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #1a1100; }
.testimonial-name {
font-weight: 600;
font-size: 13.5px;
color: #fff;
}
.testimonial-role {
font-size: 12px;
color: rgba(255, 255, 255, 0.38);
margin-top: 2px;
}
/* ----- FAQ ----- */
.faq-list {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.faq-item {
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
overflow: hidden;
transition: border-color 0.25s;
}
.faq-item.open { border-color: rgba(99, 102, 241, 0.35); }
.faq-question {
width: 100%;
background: rgba(255, 255, 255, 0.02);
border: none;
padding: 18px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
color: #fff;
font-size: 15px;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: background 0.2s;
font-family: inherit;
}
.faq-question:hover { background: rgba(255, 255, 255, 0.04); }
.faq-icon {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.14);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
line-height: 1;
flex-shrink: 0;
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), background 0.2s, border-color 0.2s;
color: #a5b4fc;
}
.faq-item.open .faq-icon {
transform: rotate(45deg);
background: rgba(99, 102, 241, 0.15);
border-color: rgba(99, 102, 241, 0.4);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.open .faq-answer { max-height: 300px; }
.faq-answer p {
padding: 2px 22px 18px;
font-size: 14.5px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.75;
margin: 0;
}
/* ----- CTA REDESIGN ----- */
.landing-cta {
position: relative;
padding: 120px 32px;
text-align: center;
z-index: 1;
overflow: hidden;
}
.landing-cta::before { display: none; } /* remove old pseudo */
.cta-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
z-index: -1;
pointer-events: none;
}
.cta-orb-1 {
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(99,102,241,0.18), transparent 70%);
top: -150px; left: 50%;
transform: translateX(-70%);
}
.cta-orb-2 {
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(168,85,247,0.13), transparent 70%);
bottom: -100px; right: 8%;
}
.cta-rating {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
padding: 6px 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 20px;
}
.cta-stars { color: #f59e0b; letter-spacing: 2px; font-size: 13px; }
.cta-rating-text { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); }
.cta-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.cta-no-card {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.3);
letter-spacing: 0.3px;
}
/* ----- FOOTER REDESIGN ----- */
.landing-footer {
border-top: 1px solid rgba(255, 255, 255, 0.04);
padding: 64px 32px 36px;
text-align: left;
}
.footer-main {
max-width: 1100px;
margin: 0 auto 48px;
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: start;
}
.footer-brand-tagline {
font-size: 13px;
color: rgba(255, 255, 255, 0.32);
margin: 8px 0 0;
}
.footer-links-grid {
display: flex;
gap: 56px;
}
.footer-links-col h4 {
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.35);
text-transform: uppercase;
letter-spacing: 1.2px;
margin: 0 0 14px;
}
.footer-links-col a {
display: block;
font-size: 13.5px;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
margin-bottom: 10px;
transition: color 0.2s;
}
.footer-links-col a:hover { color: #fff; }
.footer-bottom {
max-width: 1100px;
margin: 0 auto;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.04);
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-copy {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.28);
}
.footer-bottom-links {
display: flex;
gap: 20px;
}
.footer-bottom-links a {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.28);
text-decoration: none;
transition: color 0.2s;
}
.footer-bottom-links a:hover { color: rgba(255, 255, 255, 0.6); }
/* ----- RESPONSIVE FOR NEW SECTIONS ----- */
@media (max-width: 960px) {
.stats-strip-inner { grid-template-columns: repeat(2, 1fr); }
.stat-item:nth-child(2) { border-right: none; }
.stat-item:nth-child(3) { border-bottom: none; }
.testimonials-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
.footer-main { grid-template-columns: 1fr; gap: 36px; }
.footer-links-grid { gap: 32px; }
}
@media (max-width: 600px) {
.stats-strip-inner { grid-template-columns: repeat(2, 1fr); }
.hero-social-proof { flex-direction: column; gap: 8px; }
.footer-links-grid { flex-wrap: wrap; gap: 24px; }
.footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
.footer-bottom-links { flex-wrap: wrap; justify-content: center; }
}