/* تعاليمك — a quiet black workspace with red ink and paper study surfaces. */
:root {
  color-scheme: dark;
  --bg: #101114;
  --paper: #191a1f;
  --ink: #f5f0eb;
  --muted: #aaa4a4;
  --green: #e5484d;
  --deep: #881f2b;
  --lime: #ffb9b4;
  --line: #303137;
  --orange: #dc9c91;
  --purple: #c8b7b9;
  --shadow: 0 8px 35px #00000030;
  --red: #e5484d;
  --red-hover: #fa5b5e;
  --blush: #ffb9b4;
  --hero-muted: #dcc4c2;
  --success-text: #ffb9b4;
  --panel-raised: #202126;
  --warm-line: #4b3032;
}

body { background: var(--bg); color: var(--ink); }
::selection { background: #833238; color: #fff7f1; }
button, input, textarea, select { accent-color: var(--red); }
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline-color: #ff9795;
}
button:disabled { opacity: .46; }
input::placeholder, textarea::placeholder { color: #8d8384; opacity: 1; }

/* Navigation and the persistent learning workspace. */
.sidebar {
  background: #0b0c0e;
  border-color: #28292e;
  box-shadow: -10px 0 35px #00000012;
}
.brand { gap: 9px; padding: 0 3px; }
.brand-mark { width: 41px; height: 41px; }
.brand-name {
  color: #f8efeb;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -.6px;
  white-space: nowrap;
}
.brand-sub { color: #9a8b8c; font-size: 8px; letter-spacing: 1.8px; }
.language-pill { background: #17171b; border-color: #303035; color: #eee4e0; }
.language-pill:hover { background: #21191a; border-color: #663438; }
.language-pill small { color: #a89b9c; }
.flag { background: #292727; }
.nav-label { color: #8d8384; }
.nav-link { color: #b6adae; }
.nav-link:hover { background: #24191a; color: #ffc1bd; }
.nav-link.active { background: #351b1d; color: #ffb4b1; }
.nav-link.active:before { background: #ed545a; }
.new-dot { background: #ef6970; }
.sidebar-note {
  background: #1d1717;
  border: 1px solid #3b2729;
  position: relative;
  overflow: hidden;
}
.sidebar-note:before {
  content: '';
  position: absolute;
  right: 0;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: #a73740;
  pointer-events: none;
}
.sidebar-note .plant { color: #ff969a; }
.sidebar-note .plant .icon { width: 28px; height: 28px; stroke-width: 1.4; }
.sidebar-note strong { color: #e6d3d5; }
.sidebar-note p { color: #ad989a; }
.profile { border-color: #2b2727; }
.profile strong { color: #eee3e4; }
.profile small, .profile > .icon { color: #a59697; }
.avatar { background: #432326; color: #ffc4c2; }
.topbar { background: #101114e8; border-color: var(--line); }
.breadcrumb { color: #a09596; }
.breadcrumb b { color: #d7cacb; }
.stat-pill.flame { color: #f49891; }
.stat-pill.xp { color: #d9b7ba; }
.top-divider { background: #393031; }
.icon-btn .icon { color: #c0b1b2; }
.icon-btn:hover { background: #352123; }
.icon-btn:hover .icon { color: #ffc1bd; }
.top-mobile-brand { color: #ff858a; }
.skip-link { background: #a82a37; color: #fff7f2; }
.greeting { color: #a59a9b; }
.greeting .icon { color: #e78a8e; }
.page-heading h1 { color: #f5efeb; }
.page-heading p { color: #aaa1a2; }
.date-chip { background: #191a1f; border-color: #303137; color: #b5a7a8; }

/* A desk-like hero: red notebook lines behind the books, never over the text. */
.hero {
  background: linear-gradient(115deg, #171313 4%, #3d171a 58%, #6b2026 100%);
  border: 1px solid #613135;
  isolation: isolate;
  box-shadow: 0 15px 35px #0000001c;
}
.hero:before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#f7817b55 .8px, transparent .8px);
  background-size: 18px 18px;
  opacity: .22;
  pointer-events: none;
  z-index: 0;
}
.hero:after {
  content: '';
  position: absolute;
  width: 170px;
  height: 240px;
  left: 45px;
  top: -35px;
  border: 1px solid #e2686e35;
  border-radius: 12px;
  transform: rotate(-21deg);
  box-shadow: 15px 10px 0 -1px #491e211c, 15px 10px 0 0 #d6626c20;
  pointer-events: none;
  z-index: 0;
}
.hero-copy { position: relative; z-index: 2; }
.hero .eyebrow, .eyebrow { color: #eeaaa9; }
.hero h2 { color: #fff2eb; }
.hero p { color: #dcc2c4; }
.hero-art { z-index: 1; }
.hero-art svg { filter: drop-shadow(0 12px 12px #00000030); }
.floating-word {
  background: #241718e8;
  border-color: #88464b;
  color: #f4c6c6;
  box-shadow: 0 5px 12px #00000024;
}
.hero .btn-plain { color: #ffd0ca; }
.hero .btn-plain:hover { color: #fff4ee; }

/* Red actions, warm neutral secondary actions. */
.btn-primary {
  background: #c9323d;
  color: #fff9f5;
  box-shadow: 0 4px 0 #711b2240;
}
.btn-primary:hover { background: #d83b45; }
.btn-primary:active { background: #b52834; }
.btn-secondary { background: #2d2021; color: #f7b6b6; border-color: #5b3134; }
.btn-secondary:hover { background: #3b2527; border-color: #8d464c; }
.btn-plain { color: #f6a6a7; }
.btn-plain:hover { color: #ffd0cb; }
.btn-light { background: #f3aaa7; color: #351719; }
.btn-light:hover { background: #ffc2bb; }
.text-link { color: #efa2a7; }
.text-link:hover { color: #ffd0cb; }
.section-heading h2 { color: #eee7e5; }
.section-heading p, .section-heading small { color: #a39495; }

/* Four related ink colours keep the skill system distinct within the theme. */
.skill-reading { --tint: #352022; --accent: #ff8c8c; }
.skill-writing { --tint: #302425; --accent: #e9b5b9; }
.skill-listening { --tint: #3a1c1e; --accent: #f46c73; }
.skill-grammar { --tint: #2b2929; --accent: #d2c8c9; }
.skill-card, .lesson-row, .panel, .word-card, .course-card,
.reading-card, .saved-item, .stat-card, .coach-prompt {
  background: var(--paper);
  border-color: var(--line);
}
.skill-card:hover { background: #201c1c; border-color: #9a4b51; }
.skill-top > .icon { color: #8e7f80; }
.skill-symbol, .lesson-tile { background: var(--tint); color: var(--accent); }
.skill-name { color: #f0e4e5; }
.skill-en { color: #a39394; }
.skill-count { color: #ac9d9e; }
.mini-progress { background: #333030; }
.mini-progress i { background: var(--accent, #e55b64); }
.lesson-info h3 { color: #efe5e6; }
.lesson-info p, .lesson-meta { color: #b0a1a2; }
.lesson-row > .icon-btn { border-color: #493133; }
.lesson-row > .icon-btn .icon { color: #efa1a9; }
.lesson-row > .icon-btn:hover { background: #422628; }
.badge { background: #392426; color: #f2b6ba; }
.badge-purple { background: #302627; color: #d8b8bb; }
.badge-gold { background: #382724; color: #e9b5a5; }
.lesson-status { color: #e4b9bc; }
.complete-check { background: #392628; color: #ffd0cb; }
.panel-title > .icon { color: #df9197; }
.goal-ring .track { stroke: #343030; }
.goal-ring .fill { stroke: #e85b65; }
.goal-ring strong { color: #f7ede9; }
.goal-ring strong span, .stat-card strong span { color: #ad999b; }
.goal-ring small, .goal-copy { color: #ac9b9c; }
.week-day { color: #aa9698; }
.week-dot { border-color: #483133; color: #b69c9e; }
.week-dot.today { border-color: #c65861; color: #ffb5bb; }
.week-dot.done { background: #b33842; border-color: #cf535d; color: #fff1ef; }
.coach-card { background: #251c1d; border-color: #4c3032; }
.coach-badge { color: #ead6d8; }
.coach-badge .coach-face { background: #492a2c; color: #ffc2c8; }
.coach-card h3 { color: #f3e4e5; }
.coach-card p { color: #bda5a7; }
.coach-card .text-link { color: #f2a3a9; }
.micro-label { background: #443133; color: #dfb4b7; }
.word-label { color: #b19c9e; }
.word-card h3 { color: #fff0ed; }
.phonetic { color: #b49c9e; }
.word-meaning { color: #efb1b8; }
.word-example { color: #bca6a8; }
.quote { color: #a79193; }
.quote .icon { color: #cc7279; }
.app-footer { color: #a08a8c; }
.app-footer .icon { color: #c06d74; }

/* Path, reading library, saved vocabulary, and progress. */
.level-tab { background: #191a1f; border-color: #343131; }
.level-tab:hover { border-color: #9a4b51; background: #271c1d; }
.level-tab small { color: #afa0a1; }
.level-tab.active { background: #a92e38; border-color: #d1515b; color: #fff4ef; }
.level-tab.active small { color: #ffe0de; }
.level-intro { background: #271b1c; border-color: #4d3032; }
.level-intro h2 { color: #f3e3e4; }
.level-intro p { color: #bda4a6; }
.level-completion { color: #e0a8ac; }
.course-card h3 { color: #f1e5e6; }
.course-card p { color: #b8a7a8; }
.info-note { background: #241e1e; border: 1px solid #433132; color: #c9b4b6; }
.info-note .icon { color: #f0a5ab; }
.chip { background: #1b1b20; border-color: #3c3334; color: #c3afb1; }
.chip:hover { border-color: #8c4a4f; }
.chip.active { background: #482427; border-color: #9d4a51; color: #ffccd0; }
.filter-select { background: #1b1b20; border-color: #453435; color: #d8bec0; }
.reading-cover { background: var(--tint); }
.reading-cover:before {
  width: 110px;
  height: 140px;
  top: 12px;
  right: 22px;
  border-radius: 6px;
  border-color: var(--accent);
  transform: rotate(-13deg);
  opacity: .18;
}
.reading-cover:after {
  width: 76px;
  height: 1px;
  top: 34px;
  right: 35px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  box-shadow: 0 11px 0 var(--accent), 0 22px 0 var(--accent), 0 33px 0 var(--accent), 0 44px 0 var(--accent);
  transform: rotate(-13deg);
  opacity: .11;
}
.reading-card h3 { color: #f1e4e5; }
.reading-card p { color: #b8a4a6; }
.saved-item h3 { color: #f5e3e4; }
.saved-item p { color: #c4a7a9; }
.empty-state { background: #191a1f; border-color: #614043; }
.empty-state > .icon { color: #dc7e86; }
.empty-state h2 { color: #f2e5e6; }
.empty-state p { color: #bba6a8; }
.stat-card > .icon { color: #ec9097; }
.stat-card strong { color: #fff0ed; }
.stat-card p { color: #b6a0a2; }
.bar-wrap span, .bar-wrap small { color: #b59ea0; }
.bar { background: #633135; }
.bar.today { background: #ed626b; }
.progress-skill-label { color: #c6aeb0; }
.small-meta, .subtle { color: #b8a0a2; }
.top-level { background: #3d2224; color: #ffc2c8; border-color: #684043; }

/* Learning guide: distinct from the main action area, within the same palette. */
.coach-hero { background: #401a1d; border: 1px solid #7a353b; }
.coach-hero h2 { color: #fff0ef; }
.coach-hero p { color: #d8b0b3; }
.coach-hero > .icon { color: #f6a0a7; }
.coach-hero .eyebrow { color: #ffbdc5; }
.status-dot { background: #ff929f; }
.coach-prompt { color: #e8d7d8; }
.coach-prompt:hover { background: #2a1e1f; border-color: #8e454b; }
.coach-prompt .icon { color: #e98991; }
.coach-response { background: #2b1e1f; border-color: #64383c; }
.coach-response h3 { color: #f6dcde; }
.coach-response p { color: #d1adb0; }
.coach-list .lesson-row { background: #191a1f; }

/* Lesson, homework, results, and settings dialogs. */
.modal-backdrop { background: #000000b8; }
.modal {
  background: #141418;
  border-color: #4a3032;
  box-shadow: 0 25px 100px #00000085;
}
.modal-header, .modal-footer { background: #1b1919; border-color: #3a2c2d; }
.modal-header h2 { color: #f5e5e6; }
.modal-header p, .modal-footer small { color: #bca1a3; }
.step-line { color: #ac9294; }
.step-line b { background: #3b2527; color: #f6b5ba; }
.step-line .active { color: #ffb4ba; }
.step-line .active b { background: #9f3039; color: #fff1f0; }
.step-line i { background: #543336; }
.lesson-lead { color: #d1b7b9; }
.lesson-section-label { color: #e6adb2; }
.passage {
  color-scheme: light;
  background: #f4ede4;
  color: #2a2223;
  border-color: #dac6bb;
  border-left: 3px solid #c54d58;
  box-shadow: 0 4px 18px #00000020;
}
.passage::selection, .writing-box::selection { background: #ebadb0; color: #24191a; }
.vocab-heading { color: #efdadc; }
.vocab-item { border-color: #3e2b2d; }
.vocab-item b { color: #f4dcde; }
.vocab-item small { color: #b89b9d; }
.vocab-item .icon-btn[aria-pressed=true] .icon { color: #ff9ba3; fill: #722a3040; }
.tip { background: #2c2324; color: #d6bbbd; border: 1px solid #503234; }
.tip .icon { color: #e9949b; }
.audio-player { background: #2c1c1d; border-color: #653438; }
.play-btn { background: #bd303b; color: #fff5f3; }
.play-btn:hover { background: #d3404c; }
.waveform i { background: #d66b74; }
.waveform.playing i { background: #ffadb4; }
.speed-select { background: #211a1b; border-color: #674043; color: #f6bfc3; }
.audio-hint { color: #cfadb0; }
.writing-task { background: #302122; border: 1px solid #603639; }
.writing-task p { color: #f5e0e2; }
.writing-task ul { color: #c7a7aa; }
.writing-box {
  color-scheme: light;
  background: #f4ede4;
  color: #2a2223;
  border-color: #c7aaa5;
  caret-color: #b82d38;
}
.writing-box::placeholder { color: #847173; }
.writing-meta { color: #b9a0a2; }
.form-feedback { color: #ccb0b2; }
.form-feedback .check-passed { color: #ffc0c5; }
.form-feedback .check-pending { color: #b8a0a2; }
.question-count { color: #c4a4a7; }
.question-progress { background: #3e292b; }
.question-progress i { background: #e46a74; }
.question-prompt { color: #faebec; }
.option { background: #211b1b; border-color: #503133; color: #f0dfe0; }
.option:hover:not(:disabled) { background: #302021; border-color: #ac545b; }
.option-letter { background: #2b2021; border-color: #674043; color: #e4afb3; }
.option.selected { background: #482326; border-color: #e97881; }
.option.selected .option-letter { background: #9f3d45; border-color: #c5636b; color: #fff1f2; }
.option.correct { background: #302829; border-color: #d2a8ab; color: #fff1f1; }
.option.correct > .icon { color: #f8c1c5; }
.option.incorrect { background: #4c2024; border-color: #e2606a; color: #ffdde0; }
.option.incorrect > .icon { color: #ff8b94; }
.option:disabled { opacity: 1; }
.answer-feedback { background: #302627; color: #eed4d6; border: 1px solid #6b484b; }
.answer-feedback.wrong { background: #432124; color: #ffc3c8; border-color: #834146; }
.answer-feedback strong { color: inherit; }
.result-symbol { background: #432326; color: #f6a0a7; }
.result h2 { color: #fff0f0; }
.result p { color: #c8a9ab; }
.result-level { color: #ff9fa7; }
.result-stat { background: #241c1d; border-color: #5a3538; }
.result-stat b { color: #ffb0b6; }
.result-stat small { color: #bda0a2; }
.level-result-label, .level-result-description { color: #c2a1a4; }
.form-group label { color: #d9b5b8; }
.form-group input, .form-group select {
  background: #211b1b;
  border-color: #5b3538;
  color: #f1dcde;
}
.form-group input:hover, .form-group select:hover { border-color: #a15a60; }
.settings-warning { color: #baa0a2; }
.danger-btn { color: #ff9ea6; }
.danger-btn:hover { color: #ffc1c6; }
.placement-intro h2 { color: #f8e6e7; }
.placement-intro p { color: #ccb0b2; }
.placement-detail { background: #251c1d; border-color: #563235; color: #d9adb1; }
.language-future { border-color: #684245; color: #c0a0a3; }
.language-future h3 { color: #efc8cb; }
.language-future p { color: #bda0a2; }
.language-future .icon { color: #df9197; }
.toast { background: #9b2e37; color: #fff1f3; box-shadow: 0 8px 35px #00000055; }
.storage-alert { background: #482629; color: #ffd2d7; }
.mobile-backdrop.open { background: #000000a1; }

/* Keep warm neutrals and red consistent in all responsive layouts. */
@media (min-width: 1600px) {
  .hero:after { left: 65px; width: 210px; height: 275px; }
}
@media (max-width: 1250px) {
  .brand { gap: 8px; padding: 0 2px; }
  .brand-mark { width: 39px; height: 39px; }
  .brand-name { font-size: 26px; letter-spacing: -.6px; }
  .brand-sub { letter-spacing: 1.6px; }
  .hero:after { left: 15px; width: 155px; }
}
@media (max-width: 780px) {
  .sidebar { box-shadow: -20px 0 70px #00000080; }
  .topbar { background: #111115; }
  .top-mobile-brand { font-size: 22px; letter-spacing: -.4px; }
  .hero:after { left: 35px; }
  .modal { border-color: #4a3032; }
}
@media (max-width: 540px) {
  .hero { padding: 24px 20px; }
  .hero:before { opacity: .15; }
  .hero:after { left: -15px; opacity: .6; }
  .hero-copy { max-width: 72%; }
  .hero h2 { font-size: 27px; text-shadow: 0 2px 8px #1c0c0d; }
  .hero p { color: #e5c7c9; }
  .hero-art { opacity: .66; left: -37px; }
  .hero .btn-plain { color: #ffd1d5; }
  .skill-card { background: #1b1a1a; }
  .modal { border: 0; }
  .modal-header, .modal-footer { background: #1c1919; }
  .option { min-height: 54px; }
  .passage { background: #f4ede4; }
  .app-footer { color: #a68b8d; }
  .coach-card .text-link { color: #f5a3aa; }
}