:root{
  --bg:#f5f7fa; --card:#ffffff; --primary:#0b3d91; --primary-dark:#082b66;
  --accent:#1a73e8; --danger:#b3261e; --text:#1c1b1f; --muted:#5f6368;
  --radius:14px; --shadow:0 2px 8px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0; font-family:Vazirmatn,"Segoe UI",Tahoma,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.9;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app-header{background:var(--primary); color:#fff; padding:1.2rem 1rem; text-align:center}
.app-header h1{margin:0; font-size:1.5rem}
.subtitle{margin:.3rem 0 0; opacity:.9; font-size:.95rem}
main,section{max-width:760px; margin:0 auto; padding:1rem}
h2{font-size:1.25rem; margin:.5rem 0}
.hint{background:#fff8e1; border:1px solid #f0d878; border-radius:var(--radius); padding:.75rem 1rem; font-size:.95rem}
.controls-bar{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:.8rem 0}
.btn{
  font:inherit; padding:.55rem 1rem; border-radius:var(--radius);
  border:1px solid var(--primary); background:var(--card); color:var(--primary);
  cursor:pointer; min-height:44px; min-width:44px;
}
.btn:hover{background:#eef3fb}
.btn:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-danger{border-color:var(--danger); color:var(--danger)}
.btn-big{display:block; width:100%; font-size:1.2rem; padding:1rem; margin-top:1rem}
.lesson-list{list-style:none; padding:0; margin:0}
.lesson-list li{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:.7rem 1rem; margin-bottom:.6rem; display:flex; align-items:center; gap:.7rem;
}
.lesson-list input[type=checkbox]{width:24px;height:24px;accent-color:var(--primary)}
.lesson-list .lt{font-weight:600}
.lesson-list .lm{color:var(--muted); font-size:.85rem}
.notice{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem 1.2rem; margin:1.2rem 0}
.notice h3{margin-top:0; color:var(--primary)}
.notice ul{padding-inline-start:1.2rem}
/* صفحهٔ رانندگی */
#driving-screen{padding:1rem}
.now-playing{
  background:var(--primary); color:#fff; border-radius:var(--radius);
  text-align:center; padding:1.2rem; font-size:1.35rem; font-weight:700; margin-bottom:.8rem;
}
.current-lesson{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1rem; text-align:center; font-size:1.15rem; min-height:4.5rem; margin-bottom:1rem;
}
.drive-controls{display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem}
.btn-drive{font-size:1.25rem; padding:1.4rem .5rem; min-height:88px; font-weight:700}
@media (min-width:560px){ .drive-controls{grid-template-columns:repeat(4,1fr)} }
.app-footer{text-align:center; color:var(--muted); font-size:.85rem; padding:1rem}
@media (prefers-contrast:more){
  .btn{border-width:2px}
  .now-playing,.btn-primary{background:#000}
}