/* EduSpark — approachable CSS for learning. Change these variables to restyle the whole app. */
:root {
  --blue: #2563eb; --blue-dark: #1d4ed8; --blue-soft: #eff6ff;
  --ink: #172554; --muted: #718096; --line: #e7edf5; --page: #f6f8fc;
  --white: #fff; --green: #159a68; --orange: #e99522; --red: #dc5252;
  --radius: 18px; --shadow: 0 8px 28px rgba(31, 63, 115, .055);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #bfdbfe; outline-offset: 2px; }
.app-shell { min-height: 100vh; }
.sidebar { width: 248px; background: var(--white); border-right: 1px solid var(--line); padding: 27px 16px 16px; position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; gap: 11px; align-items: center; padding: 0 10px 34px; color: var(--ink); text-decoration: none; font: 800 19px "Plus Jakarta Sans", sans-serif; letter-spacing: -.7px; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 13px; color: white; background: linear-gradient(145deg, #4f8dfb, #2455d8); box-shadow: 0 6px 14px #2563eb38; }
.brand-blue { color: var(--blue); }.brand small { display: block; margin-top: 3px; font: 700 8px "DM Sans", sans-serif; letter-spacing: 1.5px; color: #94a3b8; }
.workspace-label { color: #9aa8bc; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; padding: 0 12px 12px; }
.nav-list { display: grid; gap: 5px; }
.nav-link { border: 0; background: transparent; color: #687892; display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px 13px; border-radius: 11px; text-align: left; font-weight: 600; transition: .18s ease; }
.nav-link:hover { background: #f5f8ff; color: var(--blue); }
.nav-link.active { background: var(--blue-soft); color: var(--blue); box-shadow: inset 3px 0 var(--blue); }
.nav-icon { width: 20px; font-size: 19px; text-align: center; }
.sidebar-bottom { margin-top: auto; }
.tip-card { background: linear-gradient(145deg, #eff6ff, #f7faff); border: 1px solid #e2edff; border-radius: 15px; padding: 15px; margin: 12px 4px 18px; }
.tip-icon { color: var(--blue); font-size: 20px; margin-bottom: 8px; }.tip-card strong { font-size: 12px; }.tip-card p { margin: 6px 0 0; color: #718096; font-size: 11px; line-height: 1.6; }
.profile-mini { border-top: 1px solid var(--line); margin-top: 14px; padding: 17px 5px 0; display: flex; gap: 10px; align-items: center; }
.avatar { width: 37px; height: 37px; flex: 0 0 37px; border-radius: 12px; display: grid; place-items: center; color: #1d4ed8; background: #dbeafe; font-weight: 800; }
.profile-text { display: grid; gap: 4px; min-width: 0; flex: 1; }.profile-text strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.profile-text span { font-size: 10px; color: #91a0b5; }
.more-btn { border: 0; background: transparent; color: #7d8da6; font-size: 19px; }
.main-area { margin-left: 248px; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 76px; background: rgba(255,255,255,.88); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 36px; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: #94a3b8; font-size: 12px; }.breadcrumb b { color: #d1d9e5; }.breadcrumb strong { color: #334155; font-weight: 700; }
.top-actions { display: flex; align-items: center; gap: 18px; }.today-label { color: #8795aa; font-size: 12px; }.icon-btn { border: 1px solid var(--line); background: white; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--blue); font-weight: 800; }
.content { width: min(1280px, 100%); padding: 32px 36px 42px; margin: 0 auto; flex: 1; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; }.eyebrow { color: var(--blue); font-size: 10px; letter-spacing: 1.6px; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
h1,h2,h3,p { margin-top: 0; }h1 { font: 800 clamp(24px, 3vw, 30px) "Plus Jakarta Sans", sans-serif; letter-spacing: -1px; margin-bottom: 8px; }h2 { font: 700 17px "Plus Jakarta Sans", sans-serif; margin-bottom: 5px; letter-spacing: -.35px; }h3 { font-size: 13px; margin-bottom: 6px; } .subheading { color: var(--muted); margin: 0; font-size: 13px; line-height: 1.6; }
.btn { border: 0; border-radius: 10px; padding: 11px 15px; background: var(--blue); color: white; font-weight: 700; font-size: 12px; box-shadow: 0 5px 12px #2563eb20; transition: .18s ease; }.btn:hover { background: var(--blue-dark); transform: translateY(-1px); }.btn.secondary { color: #385477; background: white; border: 1px solid var(--line); box-shadow: none; }.btn.small { padding: 8px 11px; font-size: 11px; }.btn.danger { background: #fff1f2; color: #be123c; box-shadow: none; }
.grid { display: grid; gap: 18px; }.stats-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }.two-col { grid-template-columns: minmax(0,1.35fr) minmax(280px,1fr); margin-top: 20px; }.three-col { grid-template-columns: repeat(3,minmax(0,1fr)); }
.card { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 21px; box-shadow: var(--shadow); min-width: 0; }.stat-card { padding: 19px; position: relative; overflow: hidden; }.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #8392a9; font-size: 11px; font-weight: 600; }.stat-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; background: #eff6ff; color: var(--blue); font-size: 17px; }.stat-value { font: 800 27px "Plus Jakarta Sans",sans-serif; margin: 13px 0 5px; letter-spacing: -1px; }.stat-note { color: #9aa7b8; font-size: 10px; }.positive { color: var(--green); font-weight: 700; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }.card-head p { color: #8b99ad; font-size: 11px; margin: 5px 0 0; }.text-link { border: 0; padding: 4px 0; background: transparent; color: var(--blue); font-weight: 700; font-size: 11px; white-space: nowrap; }
.chart-wrap { height: 210px; position: relative; }.chart-wrap canvas { width: 100%; height: 100%; }
.goal-panel { display: flex; align-items: center; gap: 19px; }.progress-ring { width: 100px; height: 100px; position: relative; flex: 0 0 100px; }.progress-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }.progress-ring circle { fill: none; stroke-width: 9; }.progress-ring .track { stroke: #edf2f9; }.progress-ring .progress { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 251; stroke-dashoffset: 251; transition: stroke-dashoffset .5s; }.ring-value { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-weight: 800; font-size: 21px; }.ring-value small { font-size: 9px; color: #9aa7b8; font-weight: 600; }.goal-copy p { color: #8a98ad; font-size: 11px; line-height: 1.7; margin: 6px 0 0; }
.task-list { display: grid; gap: 12px; }.task-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid #f0f3f8; }.task-row:last-child { border-bottom: 0; }.task-check { appearance: none; width: 17px; height: 17px; flex: 0 0 17px; border: 1.5px solid #c8d4e4; border-radius: 5px; margin: 2px 0 0; cursor: pointer; }.task-check:checked { background: var(--blue); border-color: var(--blue); box-shadow: inset 0 0 0 3px white; }.task-title { font-size: 12px; font-weight: 700; line-height: 1.45; }.task-meta { color: #98a5b7; font-size: 10px; margin-top: 5px; }.task-row.done .task-title { text-decoration: line-through; color: #9ba8b8; }.priority { display: inline-block; border-radius: 5px; padding: 4px 6px; font-size: 9px; font-weight: 800; }.priority.High { color: #c24141; background: #fff0f0; }.priority.Medium { color: #a16207; background: #fff7df; }.priority.Low { color: #16815a; background: #e8faf1; }
.progress-line { height: 6px; background: #edf2f9; border-radius: 10px; overflow: hidden; }.progress-line span { display: block; height: 100%; background: linear-gradient(90deg,#3b82f6,#60a5fa); border-radius: inherit; transition: width .3s; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 17px; }.field, .select, .textarea { width: 100%; border: 1px solid #dfe7f1; border-radius: 10px; padding: 11px 12px; background: white; color: var(--ink); font-size: 12px; outline: none; }.field:focus, .select:focus, .textarea:focus { border-color: #7aa7fb; box-shadow: 0 0 0 3px #dbeafe80; }.toolbar .field { width: min(270px,100%); }.toolbar .select { width: auto; min-width: 140px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.form-group { display: grid; gap: 7px; margin-bottom: 14px; }.form-group label { color: #52647e; font-size: 11px; font-weight: 700; }.form-group.full { grid-column: 1/-1; }.textarea { min-height: 125px; resize: vertical; line-height: 1.6; }
.table-wrap { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; min-width: 620px; }.data-table th { color: #91a0b5; font-size: 10px; text-align: left; font-weight: 800; letter-spacing: .6px; padding: 12px 10px; border-bottom: 1px solid var(--line); }.data-table td { padding: 14px 10px; border-bottom: 1px solid #f0f3f8; font-size: 11px; color: #52647e; }.data-table tr:last-child td { border-bottom: 0; }.table-title { color: var(--ink); font-weight: 700; }.table-actions { display: flex; gap: 6px; }
.empty-state { padding: 35px 15px; text-align: center; color: #91a0b5; }.empty-state .empty-icon { font-size: 27px; margin-bottom: 10px; }.empty-state strong { display: block; color: #52647e; margin-bottom: 5px; }
.quiz-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.quiz-card { padding: 0; overflow: hidden; }.quiz-art { height: 100px; padding: 18px; display: flex; justify-content: space-between; align-items: flex-start; background: linear-gradient(135deg,#eff6ff,#dbeafe); color: #2563eb; }.quiz-art.purple { background: linear-gradient(135deg,#f3e8ff,#e0e7ff); color: #7c3aed; }.quiz-art.green { background: linear-gradient(135deg,#dcfce7,#d1fae5); color: #15803d; }.quiz-symbol { font-size: 29px; font-weight: 800; }.quiz-count { background: #ffffffc9; border-radius: 20px; padding: 6px 9px; font-size: 9px; font-weight: 800; }.quiz-body { padding: 18px; }.quiz-body p { font-size: 11px; line-height: 1.6; color: #8593a7; }.quiz-meta { display: flex; justify-content: space-between; color: #8290a5; font-size: 10px; margin: 14px 0; }
.quiz-stage { max-width: 760px; margin: 0 auto; }.quiz-progress { height: 6px; border-radius: 10px; background: #edf2f9; overflow: hidden; margin: 15px 0 24px; }.quiz-progress span { display: block; height: 100%; background: var(--blue); transition: width .2s; }.question-text { font: 700 21px/1.5 "Plus Jakarta Sans",sans-serif; margin: 24px 0; }.answer-list { display: grid; gap: 10px; }.answer-option { text-align: left; padding: 15px; border: 1px solid #e1e8f2; border-radius: 12px; background: white; color: #42536c; display: flex; gap: 12px; align-items: center; }.answer-option:hover { border-color: #93b7fb; background: #f8fbff; }.answer-option.selected { border-color: var(--blue); background: #eff6ff; color: #1d4ed8; }.answer-letter { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #dce5f1; border-radius: 8px; font-size: 11px; font-weight: 800; flex: 0 0 27px; }.quiz-controls { display: flex; justify-content: space-between; gap: 10px; margin-top: 25px; }
.timer-card { text-align: center; padding: 35px 20px; }.timer-mode { display: inline-block; border-radius: 20px; background: #eff6ff; color: var(--blue); font-size: 10px; font-weight: 800; padding: 8px 13px; letter-spacing: 1px; }.timer-display { font: 800 clamp(55px,9vw,88px) "Plus Jakarta Sans",sans-serif; letter-spacing: -5px; margin: 22px 0; color: #172554; font-variant-numeric: tabular-nums; }.timer-track { height: 8px; background: #edf2f9; border-radius: 10px; max-width: 400px; margin: 0 auto 25px; overflow: hidden; }.timer-track span { display: block; height: 100%; background: linear-gradient(90deg,#2563eb,#60a5fa); transition: width .3s; }.timer-controls { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }.duration-row { display: flex; justify-content: center; gap: 8px; margin: 20px 0; }.duration-chip { border: 1px solid var(--line); background: white; color: #718096; border-radius: 9px; padding: 8px 12px; font-size: 10px; font-weight: 700; }.duration-chip.active { border-color: #bfdbfe; background: #eff6ff; color: var(--blue); }
.note-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.note-card { min-height: 180px; display: flex; flex-direction: column; }.note-subject { color: var(--blue); font-size: 10px; font-weight: 800; margin-bottom: 10px; }.note-content { color: #7b899e; font-size: 11px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; flex: 1; }.note-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 12px; border-top: 1px solid #f0f3f8; }.star-btn { border: 0; background: transparent; color: #c3cddd; font-size: 19px; padding: 0; }.star-btn.fav { color: #f4b740; }
.subject-list { display: grid; gap: 12px; }.subject-row { border: 1px solid #edf1f7; border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 12px; }.subject-mark { width: 39px; height: 39px; display: grid; place-items: center; background: #eff6ff; border-radius: 11px; color: var(--blue); font-size: 17px; }.subject-info { flex: 1; min-width: 0; }.subject-info strong { display: block; font-size: 12px; }.subject-info span { color: #95a2b5; font-size: 10px; }
.settings-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.75fr); gap: 18px; }.setting-row { padding: 15px 0; border-bottom: 1px solid #eef2f7; display: flex; justify-content: space-between; gap: 15px; align-items: center; }.setting-row:last-child { border-bottom: 0; }.setting-row p { color: #8b99ad; font-size: 11px; margin: 5px 0 0; line-height: 1.5; }.profile-select { max-width: 230px; }
.footer { border-top: 1px solid var(--line); padding: 18px 36px; color: #9aa7b8; font-size: 10px; }.footer span { padding: 0 5px; }.demo-tag { color: #7b8da7; background: #eaf0f8; border-radius: 5px; padding: 4px 6px; font-weight: 800; letter-spacing: .6px; font-size: 8px; }
.toast-region { position: fixed; right: 22px; bottom: 22px; display: grid; gap: 8px; z-index: 100; }.toast { background: #172554; color: white; border-radius: 12px; padding: 13px 17px; box-shadow: 0 10px 30px #17255430; font-size: 12px; animation: slide-in .2s ease; max-width: 320px; }.toast.success::before { content: "✓  "; color: #86efac; }.toast.error::before { content: "!  "; color: #fca5a5; }
@keyframes slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.modal-backdrop { position: fixed; inset: 0; z-index: 80; background: #17255470; display: grid; place-items: center; padding: 20px; }.modal-backdrop.hidden { display: none; }.modal { width: min(540px,100%); max-height: 90vh; overflow: auto; background: white; border-radius: 18px; padding: 24px; box-shadow: 0 25px 80px #17255440; }.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }.modal-head h2 { margin: 0; }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }.mobile-menu { display: none; border: 0; background: transparent; font-size: 20px; color: var(--ink); }.hidden { display: none !important; }.muted { color: #94a3b8; }.score-circle { width: 120px; height: 120px; border-radius: 50%; background: #eff6ff; color: var(--blue); display: grid; place-content: center; text-align: center; margin: 0 auto 20px; font: 800 31px "Plus Jakarta Sans",sans-serif; }.score-circle small { display: block; font: 600 10px "DM Sans",sans-serif; color: #7c91b0; }.result-review { padding: 14px 0; border-bottom: 1px solid #edf1f7; }.result-review:last-child { border-bottom: 0; }.correct-text { color: #15803d; font-weight: 700; }.wrong-text { color: #b91c1c; font-weight: 700; }
@media (max-width: 1100px) { .sidebar { width: 220px; }.main-area { margin-left: 220px; }.content { padding: 27px 24px 35px; }.topbar { padding: 0 24px; }.stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.quiz-grid,.note-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.two-col { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .sidebar { transform: translateX(-100%); transition: transform .25s; width: 260px; box-shadow: 12px 0 30px #17255412; }.sidebar.open { transform: translateX(0); }.main-area { margin-left: 0; }.topbar { height: 64px; padding: 0 16px; }.mobile-menu { display: block; }.breadcrumb { margin-right: auto; margin-left: 12px; }.today-label { display: none; }.content { padding: 24px 16px 30px; }.page-heading { align-items: flex-start; flex-direction: column; }.page-heading .btn { align-self: stretch; }.stats-grid { gap: 10px; }.stat-card { padding: 14px; }.stat-value { font-size: 23px; }.card { padding: 16px; }.quiz-grid,.note-grid,.three-col,.settings-grid { grid-template-columns: 1fr; }.two-col { gap: 12px; }.form-grid { grid-template-columns: 1fr; }.form-group.full { grid-column: auto; }.footer { padding: 16px; }.toolbar .field { width: 100%; }.toolbar .select { flex: 1; min-width: 0; }.goal-panel { flex-direction: column; align-items: flex-start; }.timer-card { padding: 25px 10px; }.timer-display { letter-spacing: -3px; }.profile-select { max-width: 100%; }.table-actions { flex-wrap: wrap; } }