/* Lisan: a quiet green visual system. Loaded after the structural styles. */
:root {
  --bg: #f6f9f7;
  --ink: #163b2e;
  --muted: #637b70;
  --green: #1c704f;
  --lime: #e5f2e9;
  --line: #e0eae3;
  --surface: #ffffff;
  --soft: #edf5ef;
}
body { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
button, a, input, textarea, select { transition: background-color .18s, border-color .18s, color .18s; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #338b64; outline-offset: 4px; }
.app { max-width: 1480px; grid-template-columns: 220px minmax(0, 1fr); }
.app > aside { background: var(--bg); padding: 36px 20px 22px; }
.brand { gap: 10px; font-size: 30px; letter-spacing: -1.2px; }
.brandmark { background: #184d37; color: #f1faf3; width: 36px; height: 40px; border-radius: 12px 12px 12px 3px; }
.dot { color: #43a978; font-size: 24px; }
.tagline { color: var(--muted); margin: 13px 0 40px; font-size: 10px; }
nav { gap: 7px; }
nav button { padding: 14px; gap: 12px; color: #657b70; border-radius: 11px; }
nav button span { font-size: 12px; font-weight: 500; }
nav button:hover { background: #edf4ee; }
nav button.active { background: #e2f0e6; color: #175f3e; }
nav button.active span { font-weight: 700; }
.nav-icon { width: 20px; height: 20px; flex-shrink: 0; }
.nuri-nav img { width: 23px; height: 25px; }
.nav-new, .sidebar-nuri { display: none; }
.sidebar-bottom { padding: 20px 12px 24px; }
.sidebar-bottom b { font-size: 11px; font-weight: 500; color: #506d5e; }
.sidebar-bottom p { font-size: 10px; color: #6e8377; margin-bottom: 0; }
.profile { padding-top: 20px; }
.profile > span { background: #e6efe8; color: #487358; padding: 10px 13px; }
.profile small { color: var(--muted); }
main { min-width: 0; padding: 0 44px; }
header { height: 87px; }
.breadcrumbs { color: var(--muted); font-size: 11px; }
.breadcrumbs span { color: #b3c3b8; margin: 0 12px; }
.breadcrumbs b { color: #456653; }
.language { border-color: #dce7df; border-radius: 10px; background: var(--surface); color: #345d46; padding: 10px 13px; }
.language:hover { border-color: #9bbfa8; }
.goal-shortcut { color: #527b60; }
#view { padding-top: 35px; }
h1 { font-size: 33px; font-weight: 600; letter-spacing: -1.2px; }
.eyebrow { color: #52755f; letter-spacing: 1.5px; font-size: 9px; }
.intro { margin-bottom: 28px; }
.intro p { color: var(--muted); font-size: 12px; }
.soft-dot { color: #4da378; }
.streak { border: 0; background: #eaf3ed; border-radius: 10px; padding: 12px 14px; gap: 10px; }
.streak .icon { color: #439568; font-size: 21px; }
.streak b { font-size: 11px; font-weight: 600; }
.streak small { color: #58735f; }
.dashboard { grid-template-columns: minmax(0, 1.65fr) minmax(250px, 1fr); gap: 22px; }
.hero { background: #164b37; border: 0; border-radius: 18px; min-height: 320px; padding: 29px; color: #fff; }
.hero:after, .mascot-note { display: none; }
.hero .eyebrow { color: #a7d5b9; letter-spacing: 1.4px; font-weight: 500; }
.hero h2 { max-width: 61%; color: #f4faf5; font-size: 30px; font-weight: 500; letter-spacing: -.9px; line-height: 1.3; margin: 26px 0 14px; }
.hero p { max-width: 57%; color: #c4ddcc; font-size: 11px; line-height: 1.9; }
.hero-mascot { width: 37%; height: 235px; right: 13px; bottom: 20px; }
.hero-mascot img { filter: none; animation: none; }
.primary { background: #1d7350; color: #fff; padding: 14px 20px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.primary:hover:not(:disabled) { background: #155b3d; }
.hero .primary { background: #d9f0d9; color: #164b37; margin-top: 16px; }
.hero .primary:hover { background: #ecfae9; }
.card { background: var(--surface); border-color: var(--line); border-radius: 15px; padding: 23px; }
.card h3 { font-size: 14px; font-weight: 600; }
.goal-symbol { display: none; }
.goal-title { margin-top: 26px; font-size: 17px; font-weight: 500; }
.goal-copy { color: var(--muted); font-size: 11px; }
.progress-track { background: #e6f0e8; height: 4px; margin-top: 23px; }
.progress-track > div { background: #48a16b; }
.progress-label { color: #5d7866; }
.section-title h2 { font-size: 16px; font-weight: 600; }
.section-title .subtle { color: #6b8273; }
.text-button { color: #347453; font-size: 11px; }
.text-button:hover:not(:disabled) { color: #164b37; }
.task { border-color: #edf2ee; padding: 17px 0; }
.task-icon { background: #edf6ef; color: #498760; border-radius: 10px; font-size: 18px; }
.task-content b { font-size: 12px; font-weight: 600; }
.task-content small { font-size: 10px; color: #6c8274; }
.task-action { border-color: #deebe1; color: #397452; }
.task-action:hover { background: #e7f3e9; }
.day { color: #627b6c; }
.day i { background: #f0f6f1; border-radius: 8px; color: #68826e; }
.day i.done { background: #dcefe0; color: #277047; }
.day i.current { border-color: #65a577; }
.empty-copy { color: #677e6e; }
.note-prompt { background: #edf5ef; border: 1px solid #e0eae3; border-radius: 12px; }
.note-prompt > span { color: #5c9a6e; }
.note-prompt p { color: #647e6c; }
.nuri-launch { background: var(--surface); border-color: var(--line); border-radius: 15px; padding: 22px; }
.nuri-launch .eyebrow { color: #52755f; font-size: 8px; letter-spacing: 1.2px; }
.nuri-launch h3 { font-size: 15px; font-weight: 600; }
.launch-actions { gap: 9px; margin-top: 19px; }
.launch-actions button { background: #f3f8f4; border-color: #e1ece4; color: #345f45; border-radius: 10px; padding: 13px 5px; }
.launch-actions button:hover { background: #e6f2e9; transform: none; }
.launch-actions button span { color: #43825a; }
.badge { background: #eaf4ed; color: #347653; font-size: 10px; }
footer { color: #6e8476; }
footer span { letter-spacing: 1.1px; font-size: 8px; }
input, textarea, select { color: #234d36; background: #f8fbf8; border-color: #dbe8de; border-radius: 10px; }
input::placeholder, textarea::placeholder { color: #718878; opacity: 1; }
.answer { background: #f4f9f5; border-color: #dfeae2; color: #315e42; }
.answer:hover:not(:disabled) { background: #eaf5ed; }
.answer.correct { background: #dcefe1; border-color: #64a77c; }
.answer.wrong { background: #fae9e2; border-color: #d5a48f; }
.word-row { border-color: #e7efe9; }
.word-row small, .muted, .subtle { color: var(--muted); }
dialog { background: #fcfefb; border-color: #dce9df; }
dialog::backdrop { background: #153b2b55; }
.language-choice { background: #f4f9f4; border-color: #e0eae0; }
.language-choice:hover { background: #e7f3e8; }
.service-status { background: #edf4ee; color: #476b52; border-color: #dce9de; font-size: 10px; }
.service-status:before { background: #6e9b79; }
.service-status.online { background: #dff2e4; color: #21683c; }
.nuri-greeting { background: #e8f3eb; border-color: #dcebe0; border-radius: 15px; padding: 22px 24px; }
.nuri-greeting > img { animation: none; }
.nuri-greeting .eyebrow { color: #4d7b5b; }
.nuri-greeting h2 { color: #234e36; font-weight: 500; }
.nuri-greeting p { color: #5d7e68; font-size: 12px; }
.input-modes { border-color: #e5eee7; }
.input-modes button { color: #597763; border-radius: 9px; }
.input-modes button[aria-pressed=true] { color: #21613b; background: #e5f2e8; border-color: transparent; }
.workbench-title h2 { font-weight: 600; }
.workbench-title p { color: #647d6c; font-size: 12px; }
.workbench label { font-size: 12px; }
.workbench textarea { background: #f8fbf8; font-size: 13px; }
.connection-note { color: #657e6d; font-size: 10px; }
.nuri-error { color: #995d42; }
.dropzone { border-color: #b7d0bd; background: #f2f8f3; border-radius: 12px; }
.dropzone:hover, .dropzone.dragover { background: #e4f2e8; }
.dropzone > span { border: 0; color: #3f8057; background: #e1eee4; border-radius: 10px; }
.dropzone b { color: #315f42; font-weight: 600; }
.dropzone small, .dropzone em { color: #627e6b; }
.secondary { border-color: #cfe2d4; color: #286342; background: #f6fbf7; border-radius: 10px; }
.secondary:hover:not(:disabled) { background: #e9f4ec; }
.attachment { border-color: #deebe1; background: #f0f6f1; }
.attachment-label { border-color: #deebe1; }
.voice-area { background: #eff7f1; }
.voice-area p { color: #617e6a; }
.voice-visual span { background: #70a580; }
.file-link { color: #4c7c5b; }
.audio-boundary { color: #54785d; background: #eff6ef; border-left: 2px solid #bdd7c1; border-radius: 0 8px 8px 0; }
.tutor-steps li > span { background: #edf5ee; color: #4f825d; border: 0; border-radius: 8px; }
.tutor-steps li:not(:last-child):after { border-color: #d8e7db; }
.tutor-steps p { color: #647e6d; }
.nuri-principles { background: transparent; border: 0; padding: 23px; }
.nuri-principles > span { display: none; }
.nuri-principles h3 { color: #436c50; margin-top: 0; }
.nuri-principles p { color: #647e6d; }
.local-note { border-top: 1px solid var(--line); }
.local-note > span { color: #6e9677; }
.local-note p { color: #657e6c; font-size: 10px; }
.transcript-step { background: #eef7f0; }
.transcript-step p, .transcript-step small { color: #597b63; }
.feedback-heading small, .feedback-summary { color: #637d6c; }
.result-label { color: #577c61; font-size: 9px; letter-spacing: 1.1px; }
.original-text { color: #61796a; background: #f2f7f3; }
.corrected-text { color: #235e3d; background: #e7f4eb; border: 0; }
.translation { color: #5d7b67; }
.correction { border-color: #9dcead; }
.correction > div strong { color: #236b40; }
.correction > div b { color: #85a88d; }
.correction p { color: #567761; }
.result-words > div { border-color: #e0ece3; }
.result-words b { color: #276c42; }
.result-words small { color: #678471; }
.micro-exercise { background: #edf6ef; }
.micro-exercise .text-button { color: #347652; }
.next-step { color: #557a60; }
.uncertainty, .demo-warning { color: #637d6c; }
.positive-note { color: #3f8055; }
#toast { background: #175e3d; }
@media (min-width: 1400px) {
  main { padding: 0 60px; }
  .hero { min-height: 330px; }
  .hero-mascot { height: 252px; }
}
@media (max-width: 1100px) {
  .app { grid-template-columns: 190px minmax(0, 1fr); }
  .app > aside { padding: 30px 15px 20px; }
  main { padding: 0 28px; }
  .dashboard { grid-template-columns: 1fr; }
  .hero { min-height: 310px; }
  .hero h2 { font-size: 29px; }
  .hero-mascot { height: 235px; }
}
@media (max-width: 650px) {
  .app { display: block; }
  .app > aside { height: calc(72px + env(safe-area-inset-bottom, 0px)); padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px)); background: #f9fcf9f5; border-color: #dce9df; }
  .tutor-aside { display: none; }
  main { padding: 0 20px calc(77px + env(safe-area-inset-bottom, 0px)); }
  header { height: 72px; }
  .breadcrumbs { font-size: 10px; }
  .breadcrumbs span { margin: 0 7px; }
  .language { font-size: 10px; padding: 9px 10px; }
  nav { gap: 0; }
  nav button { padding: 6px 7px; min-height: 53px; gap: 5px; border-radius: 10px; }
  nav button span { font-size: 9px; }
  nav button.active { background: #e5f1e8; }
  .nav-icon { width: 21px; height: 21px; }
  .nuri-nav img { width: 23px; height: 23px; }
  #view { padding-top: 26px; }
  h1 { font-size: 29px; }
  .intro { gap: 10px; }
  .intro p { font-size: 11px; max-width: 230px; }
  .streak { padding: 10px; gap: 6px; margin-top: 7px; }
  .streak b { font-size: 10px; }
  .streak small { font-size: 8px; }
  .streak .icon { font-size: 18px; }
  .hero { min-height: 302px; padding: 24px; }
  .hero h2 { font-size: 25px; max-width: 64%; line-height: 1.28; margin-top: 26px; }
  .hero p { font-size: 10px; max-width: 58%; }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .hero-mascot { height: 190px; width: 38%; right: 5px; bottom: 24px; }
  .hero .primary { font-size: 11px; padding: 13px 15px; margin-top: 15px; }
  .hero .primary span { margin-left: 8px; }
  .card { padding: 21px; }
  .launch-actions button { font-size: 10px; gap: 5px; padding: 12px 3px; }
  .launch-actions button span { font-size: 16px; }
  .nuri-launch { padding: 19px; }
  .section-title { align-items: baseline; gap: 10px; }
  .section-title h2 { font-size: 16px; }
  .section-title .subtle { font-size: 9px; }
  .nuri-intro h1 { font-size: 27px; }
  .nuri-intro p { max-width: 100%; }
  .nuri-greeting { padding: 20px 16px; }
  .nuri-greeting p { font-size: 11px; }
  .nuri-greeting > img { margin-bottom: -20px; }
  .workbench { padding: 19px; }
  .input-modes button { font-size: 10px; padding: 10px 3px; }
  .workbench-title p { font-size: 12px; }
  .note-prompt { padding: 17px 15px; }
  .note-prompt > span { display: none; }
  .note-prompt b { font-size: 11px; }
  .compose-actions { gap: 12px; }
  #toast { bottom: 88px; max-width: calc(100% - 32px); width: max-content; }
}
@media (max-width: 380px) {
  main { padding-left: 16px; padding-right: 16px; }
  .hero { padding: 21px; }
  .hero h2 { font-size: 23px; }
  .hero .eyebrow { font-size: 7px; }
  .hero-mascot { height: 173px; bottom: 32px; }
  .launch-actions button { font-size: 9px; }
  nav button span { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { transition: none !important; animation: none !important; }
}

.materials-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}.materials-layout>*{min-width:0}.materials-layout .saved-note{margin-bottom:20px}.materials-layout textarea{min-height:100px}.materials-layout .personal-arabic{white-space:pre-wrap;font-size:26px;line-height:1.8;overflow-wrap:anywhere}.materials-layout details{margin-top:16px}.materials-layout details p{white-space:pre-wrap;overflow-wrap:anywhere}#material-error{color:#993f32}@media(max-width:900px){.materials-layout{grid-template-columns:1fr}}

#final-question{margin-top:24px}.personal-arabic{font-size:26px;line-height:1.9;overflow-wrap:anywhere}.diagnostic-options{display:grid;gap:10px}#final-start-form button{margin-top:20px}

.milestone-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0}.milestone-cards>*{min-width:0}@media(max-width:700px){.milestone-cards{grid-template-columns:1fr}}