:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --brand: #4f46e5;
  --brand-ink: #3730a3;
  --brand-soft: #eef2ff;
  --ok: #16a34a;
  --ok-soft: #dcfce7;
  --bad: #dc2626;
  --bad-soft: #fee2e2;
  --amber: #d97706;
  --radius: 16px;
  --shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 4px 16px rgb(15 23 42 / 0.06);
  --shadow-lg: 0 10px 40px rgb(15 23 42 / 0.14);
  --topbar: 60px;
  --tutor-w: 400px;
  --font: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
}
:lang(ar) {
  --font: "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.25; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
[dir="rtl"] .flip-rtl { display: inline-block; transform: scaleX(-1); }
:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: 999px; padding: 9px 16px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-ink); }
.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover { border-color: #cbd5e1; background: var(--surface-2); }
.btn-soft { background: var(--brand-soft); color: var(--brand-ink); }
.btn-soft:hover { background: #e0e7ff; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 13px 26px; font-size: 16px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn.on { background: var(--brand-soft); color: var(--brand); }

/* ---- Top bar ------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar);
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: rgb(255 255 255 / 0.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 600; font-size: 14px; padding: 6px 8px; border-radius: 8px; }
.back:hover { background: var(--surface-2); color: var(--ink); }
.titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.titles h1 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapter { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
:lang(ar) .chapter { text-transform: none; letter-spacing: 0; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--ink); margin-inline-end: auto; }
.logo-mark { color: var(--brand); display: inline-flex; }

/* ---- Home ------------------------------------------------------------- */
.home { max-width: 1120px; margin: 0 auto; padding: 0 16px 80px; }
.eyebrow { display: inline-block; color: var(--brand); background: var(--brand-soft); font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; }
.library > h2 { font-size: 26px; margin: 24px 0 18px; }
.book { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); margin-bottom: 20px; border-top: 5px solid var(--book); }
.book-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.book-head h3 { font-size: 21px; }
.book-head p { color: var(--muted); }
.book-head > .pill { margin-inline-start: auto; } /* beside the book's buttons, not in the middle */
.pill { flex: none; background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 999px; }
.chapter-title { font-size: 14px; color: var(--muted); margin: 20px 0 10px; }
.lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.lesson-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); transition: transform .15s, box-shadow .15s, border-color .15s; }
.lesson-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #c7d2fe; }
.art { background: linear-gradient(180deg, #eef2ff, #f8fafc); padding: 14px 18px 6px; }
.art svg { display: block; width: 100%; height: 110px; }
.lc-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.lc-body p { color: var(--muted); font-size: 14px; flex: 1; }
.lc-cta { color: var(--brand); font-weight: 700; font-size: 14px; margin-top: 8px; }
.add-book { display: flex; gap: 18px; align-items: center; border: 2px dashed #c7d2fe; border-radius: 20px; padding: 18px; background: rgb(238 242 255 / .5); }
.add-book .art { flex: none; width: 160px; border-radius: 12px; background: transparent; padding: 0; }
.add-book .art svg { height: 88px; }
.add-book p { color: var(--muted); }

/* ---- Lesson layout ---------------------------------------------------- */
.lesson-page { overflow: hidden; }
.app { display: grid; grid-template-columns: minmax(0, 1fr) var(--tutor-w); height: calc(100dvh - var(--topbar)); }
.main { overflow-y: auto; padding: 16px; scroll-behavior: smooth; }
.stage-wrap { position: relative; height: min(62vh, 660px); min-height: 360px; border-radius: 20px; overflow: hidden; background: #e3ecf7; box-shadow: var(--shadow); isolation: isolate; }
.stage { position: absolute; inset: 0; }
.stage canvas { display: block; cursor: grab; touch-action: none; }
.stage canvas:active { cursor: grabbing; }
.stage-hint {
  position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2;
  background: rgb(255 255 255 / .85); backdrop-filter: blur(6px); border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; pointer-events: none;
}
.hud {
  position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; width: 250px;
  background: rgb(255 255 255 / .9); backdrop-filter: blur(8px); border-radius: 14px;
  padding: 10px 12px; box-shadow: var(--shadow); display: grid; gap: 7px 8px;
  grid-template-columns: max-content 1fr auto; align-items: center; font-size: 12px;
}
.bar { display: contents; }
.bar-label { color: var(--ink-2); font-weight: 600; }
.bar-track { height: 10px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 99px; transition: width .12s linear; }
.bar-val { text-align: end; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11.5px; }
.playbar {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 4px; padding: 6px;
  background: rgb(255 255 255 / .94); backdrop-filter: blur(8px); border-radius: 999px; box-shadow: var(--shadow-lg);
  max-width: calc(100% - 24px); overflow-x: auto;
}
.playbar .icon-btn { border-radius: 999px; }
.playbar .sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; flex: none; }
.scene-actions { display: flex; gap: 6px; }
.scene-actions .btn { padding: 8px 16px; }
.toast {
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 4;
  background: var(--ink); color: #fff; font-weight: 600; padding: 9px 16px; border-radius: 999px; box-shadow: var(--shadow-lg);
  white-space: nowrap; pointer-events: none;
}
.toast.show { animation: pop .3s ease-out; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -8px) scale(.96); } }
.info-card {
  position: absolute; z-index: 5; width: min(320px, calc(100% - 24px));
  background: var(--surface); border-radius: 14px; padding: 14px 16px 14px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--line); animation: pop2 .18s ease-out;
}
@keyframes pop2 { from { opacity: 0; transform: scale(.96); } }
.info-card h3 { font-size: 16px; margin-bottom: 6px; padding-inline-end: 28px; }
.info-card p { color: var(--ink-2); font-size: 14px; margin-bottom: 10px; }
.info-close { position: absolute; top: 8px; inset-inline-end: 8px; width: 28px; height: 28px; }

/* 3D labels */
.scene-label {
  font: 600 12px/1.2 var(--font); color: var(--ink); background: rgb(255 255 255 / .9);
  padding: 3px 7px; border-radius: 7px; white-space: nowrap; margin-top: -4px;
  font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px rgb(15 23 42 / .12);
}
.scene-label:empty { display: none; }
.scene-label.muted { color: var(--muted); background: rgb(255 255 255 / .7); font-weight: 500; box-shadow: none; }
.scene-label.strong { background: var(--ink); color: #fff; }
.scene-label.brand { color: var(--brand); }
.scene-label.amber { color: #b45309; }
.scene-label.blue { color: #1d4ed8; }
.scene-label.red { color: #b91c1c; }
.scene-label.chip { background: #fff; border: 1px solid var(--line); }

/* Cards below the stage */
.below { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.side-col { display: grid; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.card > h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; }
:lang(ar) .card > h2 { text-transform: none; letter-spacing: 0; font-size: 14px; }

.controls { display: grid; gap: 14px; }
.ctl { border-radius: 10px; transition: background .3s; }
.ctl.flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0%, 30% { background: var(--brand-soft); box-shadow: 0 0 0 6px var(--brand-soft); } }
.ctl-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.ctl-head output { color: var(--brand); font-variant-numeric: tabular-nums; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; margin: 6px 0;
  background: linear-gradient(to right, var(--brand) var(--p, 50%), #e2e8f0 var(--p, 50%));
  cursor: pointer;
}
[dir="rtl"] input[type="range"] { background: linear-gradient(to left, var(--brand) var(--p, 50%), #e2e8f0 var(--p, 50%)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); box-shadow: 0 1px 4px rgb(15 23 42 / .25); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--surface-2); border: 1px solid var(--line); padding: 3px; border-radius: 10px; }
.seg button { border: 0; background: transparent; border-radius: 7px; padding: 6px 4px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--brand); box-shadow: 0 1px 3px rgb(15 23 42 / .12); }
.switch { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.knob { flex: none; width: 38px; height: 22px; border-radius: 99px; background: #cbd5e1; position: relative; transition: background .15s; }
.knob::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: inset-inline-start .15s; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.switch input:checked + .knob { background: var(--brand); }
.switch input:checked + .knob::after { inset-inline-start: 19px; }
.switch input:focus-visible + .knob { outline: 2.5px solid var(--brand); outline-offset: 2px; }

.readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.readout { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; min-width: 0; }
.r-label { font-size: 12px; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-value { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.plot-card { margin-top: 14px; }
.plot-title { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.table-card { margin-top: 14px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.data-table th { background: var(--surface-2); color: var(--ink-2); font-weight: 600; text-align: center; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table td { text-align: center; padding: 4px 8px; border-top: 1px solid var(--line); color: var(--ink); }
.data-table tbody tr:nth-child(even) td { background: rgb(248 250 252 / .6); }
.data-table td:first-child, .data-table th:first-child { color: var(--muted); }
.plot { width: 100%; height: 130px; display: block; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }

/* Tabs */
.content-card { padding: 0; overflow: hidden; }
.tabs { display: flex; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.tabs button { border: 0; background: transparent; padding: 10px 16px; font-weight: 600; color: var(--muted); border-radius: 10px 10px 0 0; cursor: pointer; border-bottom: 2.5px solid transparent; }
.tabs button.on { color: var(--brand); background: var(--surface); border-bottom-color: var(--brand); }
.tab-panel { padding: 18px 20px 22px; display: grid; gap: 16px; }
.lead { font-size: 16.5px; color: var(--ink-2); }
.learn-sec h3 { font-size: 17px; margin-bottom: 6px; }
.learn-sec p { color: var(--ink-2); margin-bottom: 8px; }
.learn-sec ul { margin: 4px 0 8px; padding-inline-start: 20px; color: var(--ink-2); }
.formulas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.formula { background: var(--brand-soft); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.formula code { font: 700 17px/1.4 "Inter", system-ui, sans-serif; color: var(--brand-ink); }
.formula span { font-size: 13px; color: var(--ink-2); }
.explore { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.explore li { display: grid; grid-template-columns: 32px 1fr; gap: 4px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.explore .num { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; grid-row: span 2; }
.explore-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.quiz-score { font-size: 15px; color: var(--ink-2); }
.quiz-q { border: 2px solid #cbd5e1; border-radius: 14px; padding: 16px; background: var(--surface); } /* each question clearly its own */
.quiz-q.got { border-color: #86efac; }
.quiz-q.missed { border-color: #fca5a5; }
.quiz-q .q { font-weight: 600; margin-bottom: 10px; }
.opts { display: grid; gap: 8px; }
.opt { text-align: start; border: 1.5px solid var(--line); background: var(--surface); padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.opt:hover { border-color: #a5b4fc; }
.opt.right { border-color: var(--ok); background: var(--ok-soft); }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.feedback { margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.feedback.ok { background: var(--ok-soft); color: #14532d; }
.feedback.no { background: var(--bad-soft); color: #7f1d1d; }

/* ---- Tutor -------------------------------------------------------------- */
.tutor { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-inline-start: 1px solid var(--line); }
.tutor-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.avatar { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #6366f1, #06b6d4); color: #fff; display: grid; place-items: center; flex: none; }
.tutor-names { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tutor-sub { font-size: 12.5px; color: var(--muted); }
.tutor-names.has-model .tutor-sub { display: none; } /* (the AI it uses says more) */
.tutor-model { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; max-width: 100%; margin-top: 2px; padding: 1px 6px 1px 9px; border: 1px solid #c7d2fe; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; cursor: pointer; }
.tutor-model:hover { background: #e0e7ff; }
.tutor-model span { overflow: hidden; text-overflow: ellipsis; }
.tutor-model svg { flex: none; }
.tutor-close { display: none; }
.chat { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 92%; display: flex; flex-direction: column; gap: 4px; }
.msg-body { padding: 10px 13px; border-radius: 14px; font-size: 14.5px; }
.msg-body p + p, .msg-body p + ul, .msg-body ul + p { margin-top: 8px; }
.msg-body ul { margin: 0; padding-inline-start: 18px; }
.msg-body code { background: rgb(15 23 42 / .06); padding: 1px 5px; border-radius: 5px; font-size: .95em; }
.msg.user { align-self: flex-end; }
.msg.user .msg-body { background: var(--brand); color: #fff; border-end-end-radius: 4px; white-space: pre-wrap; }
.msg.assistant .msg-body { background: var(--surface-2); border: 1px solid var(--line); border-end-start-radius: 4px; }
.msg.notice .msg-body { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; font-size: 13.5px; }
.msg .err { color: var(--bad); font-weight: 500; }
.msg.thinking .msg-body { min-width: 64px; min-height: 40px; }
.msg.thinking .msg-body::after { content: ""; display: block; width: 36px; height: 10px; background: radial-gradient(circle, var(--muted) 3px, transparent 3.5px) 0 50% / 12px 10px repeat-x; animation: dots 1s infinite steps(4); opacity: .6; }
@keyframes dots { from { width: 0; } to { width: 48px; } }
.listen { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.listen:hover { color: var(--brand); background: var(--brand-soft); }
.msg.thinking .listen, .msg.error .listen { display: none; }
.msg.reading .msg-body { border-color: #a5b4fc; box-shadow: 0 0 0 3px var(--brand-soft); }
.voice-bar { display: flex; align-items: center; gap: 8px; margin: 0 12px 10px; padding: 5px; border-radius: 999px; background: var(--brand-soft); border: 1px solid #c7d2fe; }
.voice-bar button { flex: none; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; }
.vb-play { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; }
.vb-play:hover { background: var(--brand-ink); }
.vb-stop { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px #c7d2fe; }
.vb-stop:hover { color: var(--bad); }
.vb-state { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--brand-ink); }
.vb-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-wave { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.vb-wave i { width: 3px; height: 4px; border-radius: 2px; background: var(--brand); animation: vb-wave .9s ease-in-out infinite; }
.vb-wave i:nth-child(2) { animation-delay: -.6s; }
.vb-wave i:nth-child(3) { animation-delay: -.3s; }
.voice-bar.paused .vb-wave i, .voice-bar.loading .vb-wave i { animation: none; }
@keyframes vb-wave { 50% { height: 14px; } }
.vb-speed { flex: none; display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px #c7d2fe; }
.vb-speed-label { font-size: 12px; color: var(--muted); padding-inline: 8px 2px; }
.vb-speed button { width: 28px; height: 28px; border-radius: 50%; background: transparent; color: var(--brand-ink); }
.vb-speed button:hover:not(:disabled) { background: var(--brand-soft); }
.vb-speed button:disabled { opacity: .35; cursor: default; }
.vb-rate { min-width: 40px; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .vb-speed-label { display: none; } }
/* the voice menu stays inside the bar (.vb-voice gives up width): in a narrow bar the "Speed" word and the state go */
.voice-bar { container-type: inline-size; }
@container (max-width: 470px) { .vb-speed-label { display: none; } }
@container (max-width: 360px) { .vb-state { display: none; } }
/* quick prompts: laid out when a book's chat is new */
.quick { margin: 2px 0 6px; }
.quick-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 0 0 8px; padding: 2px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: start; cursor: pointer; }
.quick-fold { display: inline-flex; align-items: center; gap: 3px; color: var(--brand); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.quick-title:hover .quick-fold { text-decoration: underline; }
.quick:not(.folded) .quick-fold svg { transform: rotate(180deg); }
.quick.folded .quick-title { margin-bottom: 0; }
.quick.folded .quick-grid { display: none; }
:lang(ar) .quick-title { letter-spacing: 0; text-transform: none; font-size: 13px; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quick-grid button { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.35; text-align: start; cursor: pointer; }
.quick-grid button:hover { border-color: #c7d2fe; background: var(--brand-soft); color: var(--brand-ink); }
.quick-grid svg { flex: none; margin-top: 1px; color: var(--brand); }
/* the words picked on the page that the next question is about */
.quote-box { display: flex; align-items: flex-start; gap: 8px; margin: 0 12px 8px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--brand-soft); border-inline-start: 3px solid var(--brand); }
.quote-box[hidden] { display: none; }
.quote-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.quote-label { font-size: 11.5px; font-weight: 700; color: var(--brand-ink); }
.quote-box q { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; color: var(--ink-2); }
.quote-x { flex: none; width: 26px; height: 26px; font-size: 12px; }
.quote-how { margin: 6px 0 4px; font-size: 12.5px; color: var(--ink-2); }
.quote-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.quote-chips button { border: 1px solid #c7d2fe; border-radius: 999px; padding: 5px 10px; background: var(--surface); color: var(--brand-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.quote-chips button:hover { background: #e0e7ff; }
/* quick tooltips (public/js/tooltip.js) */
.tip-bubble { position: fixed; top: 0; left: 0; z-index: 3000; max-width: 260px; padding: 6px 10px; border-radius: 8px; background: #1e1b4b; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.35; box-shadow: 0 6px 20px rgb(15 23 42 / .25); pointer-events: none; opacity: 0; transition: opacity .1s; }
.tip-bubble.on { opacity: 1; }
/* a sideways swipe on the book turns its page, not the browser's (back / forward) */
html:has(body.book-reader) { overscroll-behavior-x: none; }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 14px; border-top: 1px solid var(--line); }
.composer textarea {
  flex: 1; resize: none; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 12px;
  font: inherit; font-size: 15px; line-height: 1.4; max-height: 140px; background: var(--surface-2); color: var(--ink);
}
.composer textarea:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mic, .send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; }
.mic { background: var(--brand-soft); color: var(--brand); position: relative; }
.mic:hover { background: #e0e7ff; }
.mic.unsupported { opacity: .5; }
.mic.listening { background: var(--bad); color: #fff; }
.mic.listening::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 3px solid var(--bad); animation: ring 1.2s ease-out infinite; }
@keyframes ring { from { opacity: .7; transform: scale(.9); } to { opacity: 0; transform: scale(1.35); } }
.send { background: var(--brand); color: #fff; }
.send:hover { background: var(--brand-ink); }
.send.busy { background: var(--ink); }
[dir="rtl"] .send svg { transform: scaleX(-1); }
.tutor-fab { display: none; }

/* ---- Book reader ---------------------------------------------------------- */
.book-reader .reader { padding: 0; background: #e5e9ef; position: relative; }
.pager { display: flex; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; flex: none; }
.pager select { font: inherit; font-weight: 600; font-size: 14px; border: 0; background: transparent; color: var(--ink); padding: 6px 4px; border-radius: 8px; cursor: pointer; max-width: 140px; }
.pager .icon-btn { width: 34px; height: 34px; }
.pager .icon-btn:disabled { opacity: .3; cursor: default; }
.zoom { display: flex; gap: 2px; flex: none; }
.reader-tip {
  position: sticky; top: 10px; z-index: 6; margin: 12px auto 0; width: fit-content; max-width: calc(100% - 24px);
  display: flex; align-items: center; gap: 6px; background: var(--ink); color: #fff; border-radius: 999px;
  padding: 6px 6px 6px 16px; font-size: 13px; box-shadow: var(--shadow-lg);
}
.reader-tip .icon-btn { color: #fff; width: 28px; height: 28px; }
.reader-tip .icon-btn:hover { background: rgb(255 255 255 / .12); }
/* (align-items: the page as tall as its picture: Safari kept a stretched page at its first height, 900px wide, so
   on a narrower page the hidden words sat lower than the printed ones and couldn't be selected) */
.page-wrap { display: flex; align-items: flex-start; justify-content: center; padding: 18px 16px 48px; min-width: fit-content; }
.book-page {
  position: relative; flex: none; width: 900px; background: #fff; border-radius: 3px;
  box-shadow: 0 2px 6px rgb(15 23 42 / .12), 0 18px 50px rgb(15 23 42 / .18);
}
.book-page img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; transition: opacity .18s; }
.book-page img.turning { opacity: .3; }
.fig-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.fig-anim { transition: opacity .35s; }
.fig-ui { position: absolute; inset: 0; pointer-events: none; }
.fig-ui > * { pointer-events: auto; }
.fig-chips { position: absolute; transform: translate(-100%, 4px); display: flex; gap: 6px; z-index: 2; }
.fig-chip {
  border: 0; border-radius: 999px; padding: 7px 13px; font: 600 13px/1 var(--font); white-space: nowrap; cursor: pointer;
  background: #fff; color: var(--ink-2); box-shadow: 0 2px 10px rgb(15 23 42 / .28);
}
.fig-chip:hover { background: var(--brand-soft); color: var(--brand-ink); }
.fig-chip.primary { background: var(--brand); color: #fff; animation: nudge 1.5s ease-in-out 2; }
.fig-chip.primary:hover { background: var(--brand-ink); }
.fig-chip.primary.on { background: var(--ink); animation: none; }
@keyframes nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.term-hot { position: absolute; border: 0; padding: 0; margin: 0; background: transparent; border-radius: 4px; cursor: help; }
.term-hot:hover, .term-hot:focus-visible { background: rgb(250 204 21 / .3); outline: 2px dashed rgb(202 138 4 / .9); outline-offset: 1px; }
.term-pop { position: absolute; transform: translate(-50%, 6px); z-index: 5; background: #fff; border-radius: 12px; padding: 6px; box-shadow: var(--shadow-lg); }
.term-pop .btn { white-space: nowrap; }
.video-hot { position: absolute; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; border-radius: 3px; }
.video-hot:hover, .video-hot:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; background: rgb(255 255 255 / .14); }
.fig-3d { position: absolute; z-index: 4; border-radius: 10px; overflow: hidden; background: #0f172a; box-shadow: 0 10px 40px rgb(15 23 42 / .4); }
.fig-3d-stage { position: absolute; inset: 0; }
.fig-3d-close { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; }
.fig-3d-hint {
  position: absolute; bottom: 10px; inset-inline-start: 10px; z-index: 2; pointer-events: none;
  background: rgb(255 255 255 / .85); border-radius: 999px; padding: 5px 11px; font-size: 12px; color: var(--ink-2);
}
.fig-3d-tag {
  position: absolute; z-index: 2; transform: translate(-50%, -140%); pointer-events: none;
  background: var(--ink); color: #fff; padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.reader-toast { position: fixed; top: calc(var(--topbar) + 14px); z-index: 50; }
.modal { position: fixed; inset: 0; z-index: 60; background: rgb(15 23 42 / .6); display: grid; place-items: center; padding: 16px; }
.modal-card { width: min(720px, 100%); background: var(--surface); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; font-size: 17px; }
.video-frame svg { display: block; width: 100%; height: auto; }
.modal-note { padding: 12px 18px 16px; color: var(--ink-2); font-size: 14px; }

/* Home: the book card */
.reader-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 14px; }
.reader-cover { display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 28px rgb(15 23 42 / .25); transition: transform .15s; }
.reader-cover:hover { transform: translateY(-3px); }
.reader-cover img { display: block; width: 100%; height: auto; }
.reader-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.toc a { display: flex; justify-content: space-between; gap: 14px; padding: 7px 10px; border-radius: 8px; color: var(--ink-2); font-size: 14.5px; }
.toc a:hover { background: var(--surface-2); color: var(--brand); }
.toc-page { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.pill.warn { background: #fef3c7; color: #92400e; }
.toc a { justify-content: flex-start; align-items: flex-start; }
.toc-title { flex: 1; min-width: 0; }
.toc-state { flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 2px solid #cbd5e1; display: grid; place-items: center; }
.toc-state.some { border-color: var(--ok); background: linear-gradient(90deg, var(--ok) 50%, transparent 50%); }
[dir="rtl"] .toc-state.some { background: linear-gradient(270deg, var(--ok) 50%, transparent 50%); }
.toc-state.done { border-color: var(--ok); background: var(--ok); }
.toc-state.done::after { content: "✓"; color: #fff; font-size: 10px; font-weight: 800; line-height: 1; }
.progress-total { margin-top: 14px; font-weight: 600; color: var(--ink-2); font-size: 14px; }
.pbar { height: 7px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
/* home: the contents by module and lesson */
.contents { display: grid; gap: 6px; }
/* a module (or a part of a book added in several files) folds open to its lessons (or chapters) */
.mod { margin-top: 6px; }
.mod-parts { display: grid; gap: 6px; padding: 6px 0 2px; }
.mod-title { list-style: none; display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 10px; cursor: pointer; background: var(--brand-soft); font-size: 14px; font-weight: 700; color: var(--brand-ink); }
.mod-title::-webkit-details-marker { display: none; }
.mod-title::before { content: ""; flex: none; width: 6px; height: 6px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
[dir="rtl"] .mod-title::before { transform: rotate(135deg); }
.mod[open] > .mod-title::before { transform: rotate(45deg); }
.mod-title:hover { color: var(--brand); }
.mod-title .count { margin-inline-start: auto; color: var(--muted); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.part { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.part > summary { list-style: none; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 96px; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; border-radius: 12px; }
.part > summary::-webkit-details-marker { display: none; }
.part > summary:hover { background: var(--surface-2); }
.part > summary .toc-state { margin-top: 0; }
.part-title { font-weight: 600; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part[open] > summary .part-title { color: var(--ink); }
.part-count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.part .pbar { height: 6px; }
.part .toc { padding: 0 6px 8px; }
/* "All chapters": the contents folded away, opened when asked for */
.all-parts { margin-top: 14px; }
.all-parts > summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; padding: 7px 14px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-weight: 600; font-size: 14px; }
.all-parts > summary::-webkit-details-marker { display: none; }
.all-parts > summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
[dir="rtl"] .all-parts > summary::before { transform: rotate(135deg); }
.all-parts[open] > summary::before { transform: rotate(45deg); }
.all-parts > summary:hover { color: var(--brand); }
.all-parts .count { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.all-parts > .contents { margin-top: 10px; }
@media (max-width: 760px) {
  .part > summary { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .part > summary .pbar { grid-column: 2 / -1; }
}

/* ---- Study tools on the book page -------------------------------------------------- */
.book-page { container-type: inline-size; isolation: isolate; }
.marks-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; }
.hl-yellow { fill: #fef08a; }
.hl-green { fill: #bbf7d0; }
.hl-pink { fill: #fbcfe8; }
.hl-blue { fill: #bfdbfe; }
.mk-flash { fill: #fdba74; animation: mk-flash 3.2s ease-out forwards; }
@keyframes mk-flash { 0%, 12%, 30% { opacity: 1; } 20% { opacity: .35; } 100% { opacity: 0; } }
.marks-off .hl, .marks-off .mk-mark, .marks-off .mk-box { display: none; }
.word-layer { position: absolute; inset: 0; overflow: hidden; line-height: 1; font-family: Helvetica, Arial, sans-serif; -webkit-text-size-adjust: none; text-size-adjust: none; }
.word-layer > span { position: absolute; white-space: pre; color: transparent; transform-origin: 0 0; cursor: text; }
.word-layer > span::selection { background: rgb(79 70 229 / .3); color: transparent; }
.marks-ui { position: absolute; inset: 0; pointer-events: none; }
.marks-ui > * { pointer-events: auto; }
.book-page.placing, .book-page.placing * { cursor: crosshair !important; }
.book-page.placing .word-layer, .book-page.placing .fig-ui > *, .book-page.placing .mk-mark, .book-page.placing .mk-box, .book-page.placing .pt-star { pointer-events: none; }
.mk-spot { position: absolute; width: 1px; height: 1px; pointer-events: none; }
.mk-mark { position: absolute; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; }
.mk-badge, .mk-pin { width: 28px; height: 28px; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgb(15 23 42 / .28); transition: transform .12s; }
.mk-badge { transform: translate(-4px, -72%); }
.mk-pin { transform: translate(-50%, -100%); }
.mk-badge:hover { transform: translate(-4px, -72%) scale(1.1); }
.mk-pin:hover { transform: translate(-50%, -100%) scale(1.1); }
.mk-teacher { width: 24px; height: 24px; transform: translate(-60%, -72%); border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgb(15 23 42 / .3); }
.mk-ribbon { width: 26px; height: 46px; transform: translateX(-50%); background: #dc2626; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); filter: drop-shadow(0 2px 3px rgb(0 0 0 / .25)); }
.mk-menu {
  position: absolute; z-index: 8; max-width: min(400px, calc(100% - 12px)); padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
  font: 14px/1.4 var(--font); color: var(--ink); cursor: default; animation: pop2 .14s ease-out;
}
.mk-dots { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 0 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.mk-dot { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; border-radius: 999px; padding: 5px 10px 5px 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.mk-dot i { width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14); }
.mk-dot-yellow i { background: #fde047; }
.mk-dot-green i { background: #4ade80; }
.mk-dot-pink i { background: #f472b6; }
.mk-dot-blue i { background: #60a5fa; }
.mk-dot:hover { background: var(--surface-2); }
.mk-dot.on { background: var(--brand-soft); color: var(--brand-ink); }
.mk-acts { display: flex; flex-wrap: wrap; gap: 2px; }
.mk-act { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 54px; border: 0; background: transparent; border-radius: 10px; padding: 6px 6px 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.mk-act svg { color: var(--brand); }
.mk-act:hover { background: var(--brand-soft); color: var(--brand-ink); }
.mk-editor { width: min(340px, calc(100% - 12px)); padding: 10px; display: grid; gap: 8px; }
.mk-editor textarea, .mk-editor input { width: 100%; font: inherit; font-size: 14.5px; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface-2); color: var(--ink); resize: vertical; }
.mk-editor textarea:focus, .mk-editor input:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.mk-quote { margin: 0; padding: 5px 10px; border-radius: 6px; border-inline-start-width: 4px; border-inline-start-style: solid; font-size: 13px; color: var(--ink-2); max-height: 4.4em; overflow: hidden; }
.mk-q-yellow, .c-yellow blockquote { background: #fefce8; border-color: #facc15; }
.mk-q-green, .c-green blockquote { background: #f0fdf4; border-color: #4ade80; }
.mk-q-pink, .c-pink blockquote { background: #fdf2f8; border-color: #f472b6; }
.mk-q-blue, .c-blue blockquote { background: #eff6ff; border-color: #60a5fa; }
.mk-row { display: flex; align-items: center; gap: 6px; }
.mk-grow { flex: 1; }
.mk-mic { color: var(--brand); background: var(--brand-soft); border-radius: 50%; }
.mk-mic.listening { background: var(--bad); color: #fff; }
.mk-title { font-weight: 700; font-size: 14px; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chip { border: 1px solid #c7d2fe; background: var(--brand-soft); color: var(--brand-ink); border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 600; cursor: pointer; }
.mk-chip.on, .mk-chip:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
/* the book's empty answer boxes: typing there looks like writing in the book, in blue pen */
.mk-box { position: absolute; }
.mk-edit {
  position: absolute; inset: 0; border-radius: 6px; outline: none; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; text-align: start;
  padding: .5cqw .9cqw; font: 500 2.7cqw/1.2 "Caveat", "IBM Plex Sans Arabic", cursive; color: #1d4ed8; cursor: text; -webkit-user-select: text; user-select: text;
}
.mk-edit:hover { background: rgb(59 130 246 / .06); box-shadow: inset 0 0 0 1.5px rgb(59 130 246 / .35); }
.mk-edit:focus { background: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 2px rgb(59 130 246 / .65); }
.mk-edit:empty::before { content: attr(data-placeholder); color: #3b82f6; opacity: 0; transition: opacity .15s; pointer-events: none; }
.mk-box:hover .mk-edit:empty::before, .mk-edit:empty:focus::before { opacity: .7; }
.mk-box:not(.filled, .mk-cell)::after { content: "✎"; position: absolute; top: 3px; right: 6px; font-size: 14px; color: #3b82f6; opacity: .7; pointer-events: none; }
/* how its words can look (the writing bar): sized with the page, like the rest of the answer */
:is(.mk-edit, .ps-answer) b { font-weight: 700; }
:is(.mk-edit, .ps-answer) font[face="hand"] { font-family: "Caveat", "IBM Plex Sans Arabic", cursive; }
:is(.mk-edit, .ps-answer) font[face="plain"] { font-family: "Inter", "IBM Plex Sans Arabic", sans-serif; font-size-adjust: .42; }
:is(.mk-edit, .ps-answer) font[face="book"] { font-family: Georgia, "Times New Roman", "IBM Plex Sans Arabic", serif; font-size-adjust: .42; }
:is(.mk-edit, .ps-answer) font[face="typewriter"] { font-family: "Kitabi Typewriter", "IBM Plex Sans Arabic", monospace; font-size-adjust: .42; }
/* Typewriter: Courier New's letters, with Arabic in the site's Arabic font (Courier's own Arabic letters don't join) */
@font-face { font-family: "Kitabi Typewriter"; src: local("Courier New"), local("CourierNewPSMT"); unicode-range: U+0000-02FF, U+2000-206F, U+20A0-20CF; }
:is(.mk-edit, .ps-answer) font[size="2"] { font-size: .8em; }
:is(.mk-edit, .ps-answer) font[size="3"] { font-size: 1em; }
:is(.mk-edit, .ps-answer) font[size="5"] { font-size: 1.3em; }
:is(.mk-edit, .ps-answer) font[size="6"] { font-size: 1.7em; }
/* Print (the reader's tools): the page as it looks, on one sheet */
@media print {
  #print-sheet .ps-page { position: relative; width: 100%; max-width: calc(95vh * var(--w) / var(--h)); margin: 0 auto; container-type: inline-size; break-inside: avoid; }
  #print-sheet .ps-page img { display: block; width: 100%; height: auto; }
  #print-sheet .ps-answer { position: absolute; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; text-align: start; padding: .5cqw .9cqw; font: 500 2.7cqw/1.2 "Caveat", "IBM Plex Sans Arabic", cursive; color: #1d4ed8; }
}
/* under the answer while it's written in: the writing bar, and "Check my answer" (also when it's pointed at). On
   the way down to the button the answer's reach goes on under it, and the button waits a moment before going, so
   it's still there when the pointer gets to it */
.mk-tools { position: absolute; top: 100%; left: 0; right: 0; z-index: 3; margin-top: 4px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity .15s .25s, visibility 0s .4s; }
.mk-tools > * { pointer-events: auto; }
.mk-box:focus-within .mk-tools, .mk-box.filled:hover .mk-tools { visibility: visible; opacity: 1; transition-delay: 0s; }
.mk-box.filled:hover::before { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 44px; }
.mk-box:not(:focus-within) .mk-format { display: none; }
.mk-check { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; padding: 6px 11px; background: var(--brand); color: #fff; font: 600 12.5px/1 var(--font); white-space: nowrap; box-shadow: var(--shadow-lg); cursor: pointer; }
.mk-format { position: relative; display: flex; align-items: center; gap: 1px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); font: 600 13px/1 var(--font); color: var(--ink-2); }
.mk-f { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer; }
.mk-f:hover, .mk-f[aria-expanded="true"] { background: var(--surface-2); }
.mk-f[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-ink); }
.mk-f b, .mk-f i, .mk-f u { font: 700 15px/1 Georgia, "Times New Roman", serif; }
.mk-f i { font-style: italic; font-weight: 400; }
.mk-f u { font-weight: 400; text-underline-offset: 2px; }
.mk-f-font span { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-f-a { display: grid; justify-items: center; font: 700 14px/1 var(--font); }
.mk-f-a i { display: block; width: 15px; height: 3px; margin-top: 2px; border-radius: 2px; }
.mk-f-line { flex: none; width: 1px; height: 18px; margin: 0 3px; background: var(--line); }
.mk-f-list { position: absolute; top: calc(100% + 4px); z-index: 4; display: grid; min-width: 150px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); animation: pop2 .12s ease-out; }
.mk-f-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 600 14px/1.3 var(--font); text-align: start; white-space: nowrap; cursor: pointer; }
.mk-f-item:hover { background: var(--surface-2); }
.mk-f-item svg { flex: none; color: var(--brand); visibility: hidden; }
.mk-f-item.on svg { visibility: visible; }
.mk-f-fonts .mk-f-item, .mk-f-sizes .mk-f-item { font-weight: 500; }
.mk-f-inks { grid-template-columns: repeat(4, 28px); gap: 6px; min-width: 0; padding: 8px; }
.mk-f-inks .mk-f-item { width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 50%; color: #fff; box-shadow: inset 0 0 0 1px rgb(15 23 42 / .15); }
.mk-f-inks .mk-f-item:hover { transform: scale(1.1); }
.mk-f-inks .mk-f-item span { display: none; }
.mk-f-inks .mk-f-item svg { color: #fff; }

/* the book's important points: blue underline, a star to open each one */
.points-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pt-line { fill: #60a5fa; opacity: .9; }
.pt-line.exam { fill: #2563eb; }
.pt-line.saved { opacity: .35; }
.pt-line.caught { fill: var(--ok); }
.pt-line.missed { fill: #f97316; }
.pt-star {
  position: absolute; z-index: 4; width: 20px; height: 20px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: #fff; color: #f59e0b; font: 700 13px/1 var(--font); box-shadow: 0 1px 6px rgb(15 23 42 / .3); transition: transform .12s;
}
.pt-star:hover { filter: brightness(1.08); box-shadow: 0 0 0 3px #bfdbfe, 0 1px 6px rgb(15 23 42 / .3); }
.pt-star.exam { background: #fffbeb; box-shadow: 0 0 0 2px #2563eb, 0 1px 6px rgb(15 23 42 / .3); }
.pt-star.saved { background: #dbeafe; color: #2563eb; }
.pt-star.caught { background: var(--ok); color: #fff; }
.pt-star.missed { background: #f97316; color: #fff; }
.points-bar {
  position: sticky; top: 10px; z-index: 6; margin: 12px auto 0; width: fit-content; max-width: calc(100% - 24px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 6px 6px 14px;
  background: rgb(255 255 255 / .96); border: 1px solid #bfdbfe; border-radius: 16px; box-shadow: var(--shadow-lg); font-size: 13.5px; color: var(--ink-2);
}
.pt-bar-star { color: #f59e0b; font-size: 16px; }
.pt-bar-text { font-weight: 600; margin-inline-end: 4px; }
.pt-bar-close { width: 30px; height: 30px; }
.pt-pop { width: min(340px, calc(100% - 12px)); padding: 12px; display: grid; gap: 8px; }
.pt-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #b45309; text-transform: uppercase; letter-spacing: .03em; }
:lang(ar) .pt-kind { text-transform: none; letter-spacing: 0; }
.pt-exam { background: #dbeafe; color: #1d4ed8; border-radius: 999px; padding: 2px 8px; font-size: 11.5px; text-transform: none; letter-spacing: 0; }
.pt-why { font-size: 14px; color: var(--ink-2); }
.pt-q { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.pt-q span { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.pt-q p { font-size: 14.5px; font-weight: 600; }
.pt-show { justify-self: start; border: 0; background: transparent; padding: 2px 0; color: var(--brand); font: 600 13px var(--font); cursor: pointer; }
.pt-a { font-size: 14px; color: #14532d; background: var(--ok-soft); border-radius: 8px; padding: 6px 10px; }
.pt-acts { flex-wrap: wrap; }
.pt-acts .btn svg { width: 15px; height: 15px; }
.study-modal .modal-card.pt-summary { width: min(760px, 100%); }
.pt-sum-head { font-weight: 600; color: var(--ink-2); }
.pt-sum-list { display: grid; gap: 8px; }
.pt-sum-item { display: grid; gap: 4px; padding: 10px 12px 6px; border: 1px solid var(--line); border-inline-start: 4px solid #60a5fa; border-radius: 12px; }
.pt-sum-item.exam { border-inline-start-color: #2563eb; }
.pt-sum-text { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pt-sum-q { font-size: 13.5px; color: var(--muted); }

/* the tool bar at the bottom of the page */
.study-bar {
  position: sticky; bottom: 14px; z-index: 7; display: flex; align-items: center; gap: 2px;
  width: fit-content; max-width: calc(100% - 20px); margin: -36px auto 14px; padding: 5px;
  background: rgb(255 255 255 / .95); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg);
}
.sb-btn { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; border: 0; background: transparent; border-radius: 12px; padding: 6px 8px 5px; color: var(--ink-2); font: 600 11.5px/1.15 var(--font); white-space: nowrap; cursor: pointer; }
.sb-btn:hover { background: var(--surface-2); color: var(--ink); }
.sb-btn.on { background: var(--brand-soft); color: var(--brand); }
#sb-bookmark.on { background: var(--bad-soft); color: var(--bad); }
.sb-badge { position: absolute; top: 1px; right: 9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.sb-timer { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 4px; border: 0; border-radius: 999px; padding: 9px 12px; background: var(--ok-soft); color: #166534; font: 700 13px/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.sb-timer.break { background: #e0f2fe; color: #075985; }

/* side sheets (notebook, search, study) and study windows */
.sheet-back { position: fixed; inset: 0; z-index: 55; background: rgb(15 23 42 / .3); opacity: 0; transition: opacity .2s; }
.sheet-back.open { opacity: 1; }
.sheet {
  position: fixed; z-index: 56; top: 0; bottom: 0; inset-inline-start: 0; width: min(430px, 100%);
  display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--shadow-lg);
  transform: translateX(-102%); transition: transform .22s ease;
}
[dir="rtl"] .sheet { transform: translateX(102%); }
.sheet.open, [dir="rtl"] .sheet.open { transform: none; }
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { flex: 1; font-size: 18px; }
.sheet-actions { display: flex; gap: 6px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 14px 16px 28px; display: flex; flex-direction: column; gap: 10px; }
.nb-tabs { position: sticky; top: -14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; margin: -14px -16px 0; padding: 10px 12px 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
.nb-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; border-radius: 999px; padding: 7px 12px; font-weight: 600; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.nb-tabs button.on { background: var(--brand-soft); color: var(--brand-ink); }
.nb-count { font-size: 11.5px; background: rgb(15 23 42 / .07); border-radius: 999px; padding: 1px 7px; }
.nb-list { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.nb-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-filter { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.nb-filter.on { border-color: #a5b4fc; background: var(--brand-soft); color: var(--brand-ink); }
.nb-filter.f-yellow::before, .nb-filter.f-green::before, .nb-filter.f-pink::before, .nb-filter.f-blue::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.nb-filter.f-blue::before { background: #60a5fa; }
.nb-teacher { font-size: 12.5px; font-weight: 700; color: #b91c1c; }
.nb-filter.f-yellow::before { background: #fde047; }
.nb-filter.f-green::before { background: #4ade80; }
.nb-filter.f-pink::before { background: #f472b6; }
.nb-page { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 0; border: 0; background: transparent; padding: 4px 2px; font: 700 12.5px/1.3 var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; text-align: start; }
:lang(ar) .nb-page { text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.nb-page:hover:not(.static) { color: var(--brand); }
.nb-page.static { cursor: default; }
[dir="rtl"] .i-go { transform: scaleX(-1); }
.nb-item { display: grid; gap: 6px; padding: 10px 12px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.nb-item blockquote { margin: 0; padding: 4px 10px; border-inline-start-width: 4px; border-inline-start-style: solid; border-radius: 4px; font-size: 14px; color: var(--ink); }
.nb-note { font-size: 14px; color: #78350f; background: #fffbeb; border-radius: 8px; padding: 6px 10px; white-space: pre-wrap; }
.nb-pinned .nb-note::before { content: "✎ "; }
.nb-actions { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; }
.nb-act { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; border-radius: 8px; padding: 4px 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.nb-act svg { width: 15px; height: 15px; }
.nb-act:hover { background: var(--brand-soft); color: var(--brand-ink); }
.nb-empty { color: var(--muted); font-size: 14px; padding: 22px 6px; text-align: center; }
.nb-bm-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nb-bm-title svg { color: var(--bad); width: 18px; height: 18px; }
.nb-bm-title span { color: var(--muted); font-size: 13.5px; }
.nb-q { font-size: 13px; font-weight: 600; color: var(--muted); }
.nb-a { font-size: 14px; }
.nb-a p + p, .nb-a p + ul, .nb-a ul + p { margin-top: 6px; }
.nb-a ul { margin: 0; padding-inline-start: 18px; }
.nb-term { font-size: 16px; }
.nb-meaning, .nb-ar { font-size: 14px; color: var(--ink-2); }
.sr-input { width: 100%; font: inherit; font-size: 16px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--ink); }
.sr-input:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.sr-hint, .sr-count { font-size: 12.5px; color: var(--muted); }
.sr-count { font-weight: 600; }
.sr-results { display: flex; flex-direction: column; gap: 5px; }
.sr-hit { border: 0; background: var(--surface-2); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px; line-height: 1.45; color: var(--ink-2); text-align: left; cursor: pointer; }
.sr-hit:hover { background: var(--brand-soft); }
.sr-hit mark { background: #fde047; color: var(--ink); border-radius: 3px; padding: 0 2px; }
.pr-sec { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.pr-sec h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.pr-sec h3 svg { flex: none; color: var(--brand); width: 20px; height: 20px; }
.pr-sec p { color: var(--ink-2); font-size: 14px; }
.pr-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-btns .btn:disabled, .ce-btns .btn:disabled { opacity: .45; cursor: default; }
.pr-big { font-size: 16px; font-weight: 700; color: var(--ink) !important; }
.pr-muted { font-size: 13px !important; color: var(--muted) !important; }
.pr-cards summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--brand-ink); }
.pr-card-list { display: grid; gap: 2px; margin-top: 6px; max-height: 260px; overflow-y: auto; }
.pr-card-row { display: flex; align-items: center; gap: 2px; padding: 2px 2px 2px 8px; border-radius: 8px; font-size: 13.5px; }
.pr-card-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-card-row:hover { background: var(--surface-2); }
.pr-card-row .icon-btn { width: 30px; height: 30px; }
.study-modal { opacity: 0; transition: opacity .18s; }
.study-modal.open { opacity: 1; }
.study-modal .modal-card { width: min(640px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.study-modal .modal-head { border-bottom: 1px solid var(--line); }
.modal-body { display: grid; align-content: start; gap: 12px; padding: 16px 18px 20px; overflow-y: auto; }
.pr-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 30px 4px; color: var(--ink-2); }
.spinner { display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--brand-soft); border-top-color: var(--brand); animation: spin .8s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.quiz-score { font-weight: 700; color: var(--brand-ink); }
.quiz-list { display: grid; gap: 16px; }
/* the end of a quiz: the score and what next */
.quiz-result { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; background: var(--surface-2); border: 2px solid var(--line); }
.quiz-result > div { display: grid; gap: 4px; min-width: 0; }
.qr-ring { flex: none; }
.qr-perfect .qr-ring, .qr-high .qr-ring { color: var(--ok); }
.qr-mid .qr-ring { color: #d97706; }
.qr-low .qr-ring { color: var(--bad); }
.qr-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.qr-text { margin: 0; color: var(--ink-2); }
.qr-best { margin: 0; color: var(--muted); font-size: 13.5px; }
/* Study → Your quizzes */
.pr-quizzes { display: grid; gap: 6px; margin-top: 12px; }
.pr-quizzes h4 { margin: 0 0 2px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
:lang(ar) .pr-quizzes h4 { text-transform: none; letter-spacing: 0; font-size: 14px; }
.pr-quiz-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.pr-quiz-row > div { flex: 1; min-width: 0; display: grid; }
.pr-quiz-row strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-quiz-row small { color: var(--muted); font-size: 12.5px; }
.quiz-q.done .opt { cursor: default; }
.quiz-q .feedback .btn { margin-inline-start: auto; }
.quiz-end { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.fc-left { text-align: center; font-size: 13px; color: var(--muted); }
.fc-card { display: grid; align-content: center; gap: 14px; min-height: 190px; padding: 22px 20px; border-radius: 16px; border: 1px solid #c7d2fe; background: linear-gradient(180deg, #eef2ff, #fff); text-align: center; }
.fc-front { font-size: 20px; font-weight: 700; white-space: pre-wrap; }
.fc-back { font-size: 16px; color: var(--ink-2); white-space: pre-wrap; padding-top: 12px; border-top: 1px dashed #a5b4fc; }
.fc-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fc-rate .btn { min-width: 130px; }
.fc-no { border-color: #fecaca; color: #b91c1c; }
.fc-done { display: grid; justify-items: center; gap: 8px; padding: 20px 0; text-align: center; }
.fc-star { font-size: 46px; line-height: 1; color: #f59e0b; }
.ce-field { display: grid; gap: 4px; font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.ce-field textarea { font: inherit; font-weight: 400; font-size: 15px; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink); resize: vertical; }
.ce-field textarea:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.ce-wait { display: flex; align-items: center; gap: 8px; }
.ce-btns { justify-content: flex-end; }
.msg-tools { display: flex; gap: 2px; align-self: flex-start; }
.msg.thinking .msg-tools, .msg.error .msg-tools, .msg.streaming .save-answer { display: none; }
.save-answer.on { color: var(--brand); }
#print-sheet { display: none; }
@media print {
  body.printing { background: #fff; overflow: visible; }
  body.printing > *:not(#print-sheet) { display: none !important; }
  body.printing #print-sheet { display: block; color: #000; font: 11.5pt/1.5 var(--font); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-sheet h1 { font-size: 20pt; }
  #print-sheet .ps-sub { color: #555; margin-bottom: 8pt; }
  #print-sheet h2 { font-size: 14pt; margin-top: 16pt; padding-bottom: 3pt; border-bottom: 1px solid #999; }
  #print-sheet h3 { font-size: 11pt; margin: 10pt 0 4pt; color: #444; }
  #print-sheet blockquote { margin: 4pt 0; padding: 2pt 8pt; border-left: 4pt solid #999; }
  #print-sheet blockquote.c-yellow { border-color: #eab308; background: #fef9c3; }
  #print-sheet blockquote.c-green { border-color: #22c55e; background: #dcfce7; }
  #print-sheet blockquote.c-pink { border-color: #ec4899; background: #fce7f3; }
  #print-sheet blockquote.c-blue { border-color: #3b82f6; background: #dbeafe; }
  #print-sheet .ps-point { margin: 4pt 0 8pt; break-inside: avoid; }
  #print-sheet .ps-point .ps-q { color: #444; font-weight: 400; }
  #print-sheet .ps-note { margin: 2pt 0 6pt; color: #78350f; }
  #print-sheet table { width: 100%; border-collapse: collapse; }
  #print-sheet td { border: 1px solid #ccc; padding: 4pt 6pt; vertical-align: top; }
  #print-sheet .ps-saved { margin: 6pt 0; break-inside: avoid; }
  #print-sheet .ps-q { font-weight: 600; }
  #print-sheet .ps-q span { font-weight: 400; color: #666; }
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 1180px) {
  .below { grid-template-columns: 1fr; }
  .side-col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  .tutor {
    position: fixed; z-index: 40; inset: auto 0 0 0; height: min(78dvh, 640px);
    border: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgb(15 23 42 / .2);
    transform: translateY(105%); transition: transform .25s ease;
  }
  .tutor.open { transform: none; }
  .tutor-close { display: inline-grid; }
  .tutor-fab {
    display: inline-flex; align-items: center; gap: 8px; position: fixed; z-index: 35; bottom: 18px; inset-inline-end: 16px;
    border: 0; border-radius: 999px; padding: 13px 18px; background: var(--brand); color: #fff; font-weight: 700; box-shadow: var(--shadow-lg); cursor: pointer;
  }
  .main { padding-bottom: 90px; }
}
@media (max-width: 760px) {
  .book-reader .titles, .book-reader #zoom-fit { display: none; }
  .book-reader .topbar { gap: 6px; padding: 0 10px; }
  .book-reader .back { margin-inline-end: auto; }
  .book-reader .topbar .icon-btn { width: 32px; height: 32px; }
  .pager select { max-width: 92px; }
  .reader-card { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  .reader-actions .btn-lg { padding: 10px 18px; font-size: 15px; }
  /* a book's title gets the width; "Your book" goes under it */
  .book-head { flex-wrap: wrap; }
  .book-head > div:first-child { flex: 1 1 200px; min-width: 0; }
  .book-head > .pill { order: 3; margin-inline-start: 0; }
  .page-wrap { padding: 10px 6px 90px; }
  .fig-chip { padding: 6px 10px; font-size: 12px; }
  .side-col { grid-template-columns: 1fr; }
  .stage-wrap { height: 58vh; min-height: 340px; border-radius: 16px; }
  .hud { width: 180px; padding: 8px; gap: 5px 6px; grid-template-columns: max-content 1fr; font-size: 11px; }
  .bar-val { display: none; }
  .stage-hint { display: none; }
  .add-book { gap: 14px; padding: 14px; align-items: flex-start; }
  .add-book .art { width: 72px; }
  .add-book .art svg { height: 40px; }
  .back span { display: none; }
  .main { padding: 10px 10px 90px; }
  .tab-panel { padding: 14px; }
  /* phones: tools as icons on the left, the tutor button on the right */
  .sb-label { display: none; }
  .sb-btn { min-width: 40px; padding: 8px; }
  .sb-badge { right: 0; }
  .study-bar { bottom: 18px; margin-inline: 10px auto; }
  .sheet { top: auto; inset-inline: 0; width: 100%; height: min(86dvh, 720px); border-radius: 20px 20px 0 0; transform: translateY(102%); }
  [dir="rtl"] .sheet { transform: translateY(102%); }
  .mk-act { min-width: 46px; }
}
@media (max-width: 520px) {
  .tutor-fab span { display: none; }
  .tutor-fab { padding: 14px; }
}

/* ---- Today on the home page: where you stopped, the daily goal and streak, cards, plans, a point ---- */
.today { padding: 34px 0 6px; }
.today-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.today-head h2 { margin: 2px 0 0; font-size: clamp(24px, 4vw, 32px); }
.today .eyebrow { margin: 0; }
.streak { display: flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.streak strong { font-size: 22px; color: var(--ink); }
.streak.on { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.streak.on strong { color: #c2410c; }
.today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.t-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); color: inherit; min-width: 0; }
a.t-card:hover { border-color: #c7d2fe; }
.t-continue { grid-column: span 2; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; }
.t-cover img { display: block; width: 100%; border-radius: 5px; box-shadow: 0 6px 18px rgb(15 23 42 / .22); }
.t-info { display: grid; gap: 6px; min-width: 0; }
.t-info strong { font-size: 18px; line-height: 1.3; }
.t-part { margin: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.t-goal { display: flex; align-items: center; gap: 14px; }
.t-goal p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.goal-ring { flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.goal-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-btn { font: inherit; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink-2); }
.chip-btn.on, .chip-btn:hover { border-color: var(--brand); color: var(--brand); }
.t-cards { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink-2); }
.t-big { font-size: 34px; font-weight: 800; color: var(--brand); }
.t-plans h3 { margin: 0 0 8px; font-size: 16px; }
.t-plans ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.t-plans li p { margin: 0; }
.t-from { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.t-point p { margin: 6px 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }

/* ---- Books people add ---- */
.book.mine { --book: #0e7490; }
.book-tools { display: flex; gap: 4px; flex: none; }
.pending-book { --book: #94a3b8; }
.prep-step { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.prep-bar { display: block; margin-top: 12px; }
.prep-bar i { background: var(--brand); transition: width .6s; }
button.add-book { width: 100%; font: inherit; color: inherit; text-align: start; cursor: pointer; margin-top: 4px; }
button.add-book:hover { border-color: var(--brand); background: var(--brand-soft); }
.add-book strong { font-size: 18px; }
.add-book p { margin: 4px 0 0; }
.add-note { font-size: 13px; }

/* ---- Reader: welcome back, a chapter finished, Arabic hints over hard words ---- */
.reader-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: min(1000px, 100%); margin: 0 auto 10px; padding: 10px 12px 10px 16px; border-radius: 14px; background: #ecfeff; border: 1px solid #a5f3fc; color: #155e75; font-weight: 600; }
.reader-banner .banner-text { flex: 1; min-width: 200px; }
.done-card { position: fixed; z-index: 55; bottom: 84px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 14px 10px 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: pop .25s ease-out; }
.done-card[hidden] { display: none; }
.done-mark { font-size: 28px; }
.done-text p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.done-acts { grid-column: 2 / 4; display: flex; gap: 8px; flex-wrap: wrap; }
.done-close { grid-column: 3; grid-row: 1; align-self: start; }
.pt-bar-star.spin { display: inline-block; animation: spin 1.6s linear infinite; }

/* ---- Summaries with a plan, catch-up ---- */
.pt-summary .modal-body, .recap-modal .modal-body { max-height: min(76vh, 760px); overflow: auto; padding: 4px 18px 18px; }
.sum-wait { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 18px 0; margin: 0; }
.sum-error { color: var(--bad); font-weight: 600; }
.sum-top { display: flex; align-items: flex-start; gap: 10px; }
.sum-one { flex: 1; margin: 6px 0 4px; font-size: 17px; font-weight: 700; line-height: 1.5; }
.sum-ideas { margin: 8px 0 4px; padding-inline-start: 22px; display: grid; gap: 8px; line-height: 1.55; color: var(--ink-2); }
.sum-ideas strong { color: var(--ink); }
.sum-h { display: flex; align-items: center; gap: 6px; margin: 18px 0 8px; font-size: 15px; color: var(--brand-ink); }
.sum-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sum-plan li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.sum-plan li > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sum-plan li span { color: var(--muted); font-size: 13.5px; }
.sum-plan .btn { flex: none; }
.sum-think { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #fefce8; border: 1px solid #fde68a; }
.sum-think span { font-size: 12.5px; font-weight: 700; color: #a16207; text-transform: uppercase; letter-spacing: .04em; }
:lang(ar) .sum-think span { text-transform: none; letter-spacing: 0; }
.sum-think p { margin: 4px 0 0; font-weight: 600; }
.sum-points { border-top: 1px solid var(--line); margin-top: 18px; }
.sum-more { margin: 16px 0 0; text-align: center; }
.recap-welcome { font-size: 17px; font-weight: 700; margin: 8px 0 0; }
.recap-list { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; line-height: 1.55; color: var(--ink-2); }
.recap-next { margin: 14px 0 0; color: var(--ink-2); }
.recap-modal .pr-btns { margin-top: 16px; }

@media (max-width: 720px) {
  .t-continue { grid-column: auto; grid-template-columns: 70px minmax(0, 1fr); }
  .today-head { align-items: flex-start; flex-direction: column; }
  .done-card { bottom: 12px; }
}
.t-info .eyebrow, .t-point .eyebrow, .t-continue .eyebrow { justify-self: start; font-size: 12px; padding: 3px 10px; }
/* the meaning of a word from the page */
.word-modal { width: min(440px, 100%); }
.word-modal .modal-body { padding: 4px 18px 18px; }
.wd-term { margin: 4px 0 2px; font-size: 22px; font-weight: 800; }
.wd-meaning { margin: 0; color: var(--ink-2); line-height: 1.55; }
.wd-ar { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #ecfeff; border: 1px solid #a5f3fc; color: #155e75; }
.wd-ar strong { font-size: 18px; }
.wd-ar p { margin: 2px 0 0; }
.wd-saved { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--ok); font-size: 13.5px; font-weight: 600; }
.word-modal .pr-btns { margin-top: 12px; }

/* ---- Listening to the book: the sentence being read lights up ---- */
.listen-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; }
.la-now { fill: #bae6fd; animation: la-in .25s ease-out; }
@keyframes la-in { from { opacity: 0; } }
.listen-bar { position: sticky; bottom: 82px; z-index: 8; display: flex; align-items: center; gap: 4px; width: fit-content; max-width: calc(100% - 20px); margin: 0 auto 46px; /* clear of the tool bar, which reaches up over the page */ padding: 5px 6px; background: rgb(255 255 255 / .97); backdrop-filter: blur(8px); border: 1px solid #bae6fd; border-radius: 999px; box-shadow: var(--shadow-lg); }
.listen-bar[hidden] { display: none; }
.la-play { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--brand); color: #fff; cursor: pointer; }
.la-play:hover { background: var(--brand-ink); }
.la-state { min-width: 0; max-width: 220px; padding: 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-state.loading { color: var(--muted); }
.la-speed { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px; border-inline: 1px solid var(--line); }
.la-speed .icon-btn { font-size: 18px; font-weight: 700; }
.la-rate { min-width: 40px; text-align: center; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.la-voice { white-space: nowrap; }
/* time left, at the start of the tool bar */
.sb-pace { display: inline-flex; align-items: center; gap: 5px; flex: none; border: 0; border-inline-end: 1px solid var(--line); background: transparent; color: var(--muted); font: 600 12.5px/1.2 var(--font); padding: 8px 10px; margin-inline-end: 2px; white-space: nowrap; cursor: pointer; }
.sb-pace:hover { color: var(--brand); }
.study-bar { overflow-x: auto; scrollbar-width: none; }
.study-bar::-webkit-scrollbar { display: none; }
/* more tools than fit (on a phone): the bar scrolls sideways and fades where more are hiding */
.study-bar.more-end { mask-image: linear-gradient(to right, #000 82%, transparent); }
.study-bar.more-start { mask-image: linear-gradient(to left, #000 82%, transparent); }
.study-bar.more-start.more-end { mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }
.pace-short { display: none; }
/* the tool bar in less room (book.js fitBar): the time left in short and the buttons closer, then icons only */
.study-bar.tight .pace-long { display: none; }
.study-bar.tight .pace-short { display: inline; }
.study-bar.tight .sb-btn { min-width: 0; padding: 6px 6px 5px; }
.study-bar.icons .sb-label { display: none; }
.study-bar.icons .sb-btn { padding: 8px; }
/* beside the tutor's own window (book.js besideTutor) the tool bars stay under the page */
.study-bar, .listen-bar { translate: calc((var(--bl, 0px) - var(--br, 0px)) / 2) 0; }
.study-bar { max-width: calc(100% - 20px - var(--bl, 0px) - var(--br, 0px)); }
@media (max-width: 520px) {
  .pace-long { display: none; }
  .pace-short { display: inline; }
  .listen-bar { bottom: 76px; gap: 2px; }
  .la-state { max-width: 112px; font-size: 12px; padding: 0 3px; }
  .la-voice { display: none; }
  .sb-pace { font-size: 11.5px; padding: 8px 6px; }
}
/* Darsi on the phone: install and a daily reminder */
.t-phone h3 { margin: 0 0 8px; font-size: 16px; }
.ph-install:not(:empty) { margin-bottom: 10px; }
.ph-time { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--ink-2); font-weight: 600; }
.ph-time[hidden] { display: none; }
.ph-time input { font: inherit; font-weight: 700; padding: 5px 8px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.ph-time input:focus { outline: none; border-color: var(--brand); }
.ph-acts:not(:empty) { margin-top: 8px; }
.ph-note { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ph-note:empty { display: none; }
.ph-cal { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--brand); font: 600 13.5px/1.4 var(--font); cursor: pointer; text-align: start; }
.ph-cal:hover { text-decoration: underline; }

/* ---- Accounts: the welcome page. Two sides: what Kitabi is (light indigo), and signing up or in (white) ---- */
.welcome-page { background: #fff; }
.wl-split { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.wl-side {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 32px;
  padding: 40px clamp(28px, 5vw, 76px) 36px; color: #1e1b4b;
  background: radial-gradient(70% 60% at 0% 0%, rgb(199 210 254 / .75), transparent 70%), radial-gradient(60% 50% at 100% 100%, rgb(221 214 254 / .7), transparent 70%), #eef0ff;
}
/* two faint rings for depth */
.wl-side::before, .wl-side::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgb(79 70 229 / .12); pointer-events: none; }
.wl-side::before { width: 760px; height: 760px; inset-inline-end: -420px; top: 14%; }
.wl-side::after { width: 560px; height: 560px; inset-inline-start: -330px; bottom: -300px; }
.wl-logo { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; color: #1e1b4b; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.wl-pitch { margin: auto 0; max-width: 580px; }
.wl-kicker { margin: 0 0 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
:lang(ar) .wl-kicker { letter-spacing: 0; text-transform: none; font-size: 14px; }
.wl-title { margin: 0 0 22px; font-size: clamp(38px, 4.4vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; color: #1e1b4b; }
.wl-title > * { display: block; }
.wl-title em { margin-top: .04em; font-family: "Instrument Serif", Georgia, serif; font-size: 1.12em; font-style: italic; font-weight: 400; letter-spacing: -.01em; line-height: 1; color: var(--brand); }
:lang(ar) .wl-title { font-size: clamp(34px, 4vw, 52px); line-height: 1.4; letter-spacing: 0; }
:lang(ar) .wl-title em { font-family: "Amiri", serif; font-style: normal; font-weight: 700; font-size: 1.04em; line-height: 1.55; }
.wl-text { margin: 0 0 28px; max-width: 500px; font-size: 17px; line-height: 1.6; color: #45476e; }
.wl-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.wl-points li { display: flex; gap: 12px; align-items: flex-start; }
.wl-icon { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #fff; color: var(--brand); box-shadow: 0 1px 2px rgb(30 27 75 / .06), 0 4px 12px rgb(79 70 229 / .1); }
.wl-points strong { font-size: 15px; color: #1e1b4b; }
.wl-points p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: #5b5e8a; }
.wl-foot { margin: 0; font-size: 14px; color: #5b5e8a; }

.wl-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 76px 24px 32px; }
/* each side has its own height, so the longer Create account form never moves what's on the left; the left side
   stays in place while the form scrolls */
.wl-split { align-items: start; }
.wl-side { position: sticky; top: 0; min-height: 100vh; min-height: 100dvh; }
.wl-main { min-height: 100vh; min-height: 100dvh; }
.wl-lang { position: absolute; top: 20px; inset-inline-end: 20px; z-index: 1; }
.wl-box { width: min(440px, 100%); }
.wl-main .wl-kicker { margin-bottom: 10px; color: var(--brand); }
.wl-heading { margin: 0 0 8px; font-size: clamp(28px, 2.8vw, 36px); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: var(--ink); }
:lang(ar) .wl-heading { line-height: 1.4; letter-spacing: 0; }
.wl-sub { margin: 0 0 24px; line-height: 1.55; color: var(--ink-2); }
.wl-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: #f1f5f9; margin-bottom: 20px; }
.wl-tabs button { font: inherit; font-weight: 700; padding: 10px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); cursor: pointer; }
.wl-tabs button[aria-selected="true"] { background: #fff; color: var(--brand); box-shadow: var(--shadow); }
.wl-form { display: grid; gap: 16px; }
.wl-form[hidden], .wl-form label[hidden] { display: none; }
.wl-form label, .wl-field { display: grid; gap: 6px; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.wl-form input:not([type=checkbox]) { width: 100%; font: inherit; font-weight: 500; padding: 13px 14px; border: 1.5px solid #e2e8f0; border-radius: 12px; background: #fff; color: var(--ink); }
.wl-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgb(79 70 229 / .12); }
.wl-form small { color: var(--muted); font-weight: 500; font-size: 12.5px; }
/* Show / Hide inside the password box */
.wl-pass { position: relative; display: block; direction: ltr; } /* a password is typed left to right, Show at its end */
.wl-form .wl-pass input { padding-inline-end: 76px; }
.wl-show { position: absolute; top: 50%; inset-inline-end: 6px; transform: translateY(-50%); padding: 6px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.wl-show:hover { color: var(--brand); background: var(--brand-soft); }
.wl-form .wl-keep { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border-radius: 12px; background: var(--ok-soft); color: #166534; font-weight: 600; }
.wl-keep input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--ok); flex: none; }
.wl-go { width: 100%; margin-top: 4px; border-radius: 14px; }
.wl-go::after { content: "→"; }
[dir="rtl"] .wl-go::after { content: "←"; }
.wl-error { margin: 0; color: var(--bad); font-weight: 600; font-size: 14px; }
.wl-small, .wl-closed { margin: 0; color: var(--muted); font-size: 13.5px; }
.wl-closed { padding: 14px; border-radius: 12px; background: #f1f5f9; font-size: 15px; }
.wl-note { margin: 0; max-width: 440px; text-align: center; color: var(--muted); font-size: 13px; }
@media (max-width: 900px) {
  /* on a phone: a short coloured band on top, then the form */
  .wl-split { grid-template-columns: 1fr; min-height: 0; }
  .wl-side { position: relative; min-height: 0; gap: 18px; padding: 20px 20px 28px; }
  .wl-main { min-height: 0; }
  .wl-side::before { width: 420px; height: 420px; inset-inline-end: -220px; top: -130px; }
  .wl-side::after { display: none; }
  .wl-pitch { margin: 0; }
  .wl-kicker { margin-bottom: 10px; }
  .wl-title { margin-bottom: 12px; font-size: clamp(30px, 8.6vw, 40px); }
  :lang(ar) .wl-title { font-size: clamp(28px, 7.6vw, 36px); }
  .wl-text { margin: 0; font-size: 15.5px; }
  .wl-points, .wl-foot { display: none; }
  .wl-main { justify-content: flex-start; padding: 26px 18px 34px; }
  .wl-lang { top: 16px; inset-inline-end: 16px; background: rgb(255 255 255 / .75); border-color: rgb(79 70 229 / .18); color: var(--brand-ink); }
  .wl-lang:hover { background: #fff; border-color: rgb(79 70 229 / .3); }
}

/* ---- the first steps after signing up ---- */
.start { max-width: 760px; margin: 0 auto; padding: 34px 16px 70px; }
.st-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px; box-shadow: var(--shadow-lg); display: grid; gap: 14px; }
.st-card h1 { margin: 0; font-size: clamp(24px, 4vw, 32px); }
.st-back { justify-self: start; }
.st-text { margin: -6px 0 0; color: var(--muted); font-size: 16px; }
.st-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-role { display: grid; gap: 4px; justify-items: start; text-align: start; font: inherit; padding: 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); cursor: pointer; color: var(--ink); }
.st-role:hover, .st-role.on { border-color: var(--brand); background: var(--brand-soft); }
.st-role-icon { font-size: 26px; }
.st-role span:last-child { color: var(--muted); font-size: 14px; }
.st-small { margin: 0; color: var(--muted); font-size: 13.5px; }
.st-search, .st-card label input:not([type=checkbox]) { font: inherit; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); width: 100%; }
.st-search:focus, .st-card label input:not([type=checkbox]):focus { outline: none; border-color: var(--brand); }
.st-list { display: grid; gap: 6px; max-height: 340px; overflow: auto; }
.st-item { display: flex; align-items: center; gap: 12px; text-align: start; font: inherit; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; color: var(--ink); }
.st-item:hover, .st-item.on { border-color: var(--brand); background: var(--brand-soft); }
.st-short { flex: none; min-width: 54px; padding: 3px 8px; border-radius: 8px; background: var(--surface-2); font-weight: 800; font-size: 13px; text-align: center; color: var(--brand-ink); }
.st-name { flex: 1; min-width: 0; font-weight: 600; }
.st-type { flex: none; color: var(--muted); font-size: 13px; }
.st-empty { margin: 0; color: var(--muted); }
.st-other-btn { justify-self: start; padding: 0; border: 0; background: none; color: var(--brand); font: 600 14.5px/1.4 var(--font); cursor: pointer; }
.st-other, .st-more { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.st-other[hidden], .st-more[hidden], .st-other-label[hidden] { display: none; }
.st-card label { display: grid; gap: 5px; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.st-label { display: block; font-weight: 600; font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-grades { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.st-grade { font: inherit; font-weight: 700; padding: 12px 8px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; color: var(--ink-2); }
.st-grade:hover, .st-grade.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.st-subjects { display: grid; gap: 8px; }
.st-subject { display: flex !important; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; }
.st-subject:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.st-subject input { width: 19px; height: 19px; accent-color: var(--brand); flex: none; }
.st-subject > span:nth-of-type(1) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.st-subject small { color: var(--muted); font-weight: 500; font-size: 13px; }
.st-in, .st-add { flex: none; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.st-in { background: var(--ok-soft); color: #166534; }
.st-add { background: #fef3c7; color: #92400e; }
.st-note { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); }
.st-note.bad { background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.st-note[hidden] { display: none; }
.st-code input { font-size: 22px !important; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; max-width: 260px; }
.st-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- the account button and its menu ---- */
.top-right { display: flex; align-items: center; gap: 8px; }
.account { position: relative; }
.account-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; font: 800 14px/1 var(--font); cursor: pointer; display: grid; place-items: center; }
.account-btn:hover { background: var(--brand-ink); }
.account-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 70; width: 284px; max-width: calc(100vw - 24px); display: grid; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); animation: pop2 .15s ease-out; }
.am-who { display: flex; align-items: center; gap: 12px; padding: 10px 12px 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.am-face { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font: 800 15px/1 var(--font); box-shadow: 0 0 0 3px var(--brand-soft); }
.am-name { display: grid; gap: 2px; min-width: 0; }
.am-name strong { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* (in the name's own direction, so a long one is cut at its end) */
.am-name span { color: var(--muted); font-size: 13px; }
.account-menu button { display: flex; align-items: center; gap: 12px; font: inherit; font-weight: 600; font-size: 14.5px; text-align: start; padding: 9px 12px; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--ink-2); }
.account-menu button svg { flex: none; color: var(--muted); }
.account-menu button:hover { background: var(--surface-2); color: var(--brand); }
.account-menu button:hover svg { color: var(--brand); }
.am-label { flex: 1; min-width: 0; }
.am-value { flex: none; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.am-card { display: grid; padding: 4px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.am-card button { padding-inline: 7px; } /* (its icons in line with the ones below: the box's edge and padding make up the rest) */
.am-card button:hover { background: var(--surface); }
.am-line { height: 1px; margin: 6px 4px; background: var(--line); }
[dir="rtl"] .am-out svg { transform: scaleX(-1); }
.family-modal { width: min(460px, 100%); }
.family-modal .modal-body { padding: 4px 18px 18px; }
.lp-code { margin: 14px 0 4px; font-size: 38px; font-weight: 800; letter-spacing: .14em; text-align: center; color: var(--brand); }
.lp-list { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; color: var(--ink-2); }
.lp-not { color: var(--ok); font-weight: 600; }
.lp-parent { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }

/* ---- home: a school student's books ---- */
.school { padding: 26px 0 0; }
.sch-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sch-head h2 { margin: 0; font-size: 26px; }
.sch-head p { margin: 0; color: var(--muted); font-weight: 600; }
.subject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.subject-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: inherit; }
a.subject-card:hover { border-color: #c7d2fe; }
.subject-card img { width: 76px; border-radius: 5px; box-shadow: 0 6px 16px rgb(15 23 42 / .2); }
.sc-blank { width: 76px; aspect-ratio: 3 / 4; border-radius: 6px; border: 2px dashed #cbd5e1; display: grid; place-items: center; }
.sc-blank svg { width: 52px; height: auto; opacity: .5; }
.sc-info { display: grid; gap: 6px; min-width: 0; justify-items: start; }
.sc-subject { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); }
:lang(ar) .sc-subject { text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.sc-info strong { font-size: 15px; line-height: 1.35; }
.sc-info .pbar { width: 100%; }
.sc-go { font-size: 13px; font-weight: 700; color: var(--brand-ink); }
.subject-card.empty strong { color: var(--muted); font-weight: 600; }
.sch-none { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px dashed var(--line); color: var(--ink-2); }

/* ---- home: a parent's children ---- */
.family { padding: 30px 0 0; }
.kids { display: grid; gap: 14px; }
.kid-card { display: grid; gap: 14px; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.kid-head { display: flex; align-items: center; gap: 12px; }
.kid-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fef3c7; color: #92400e; font-weight: 800; font-size: 18px; }
.kid-name { flex: 1; min-width: 0; display: grid; }
.kid-name strong { font-size: 18px; }
.kid-name span { color: var(--muted); font-size: 13.5px; }
.kid-live { flex: none; font-size: 13px; font-weight: 700; color: var(--muted); }
.kid-live.on { color: var(--ok); }
.kid-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kid-stat { display: grid; justify-items: center; align-content: center; gap: 6px; padding: 10px; border-radius: 14px; background: var(--surface-2); text-align: center; font-size: 13px; color: var(--ink-2); }
.kid-stat svg { width: 64px; height: 64px; }
.kid-big { font-size: 22px; font-weight: 800; color: #c2410c; }
.kid-bars { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.kid-bars i { width: 10px; border-radius: 4px 4px 2px 2px; background: var(--brand); opacity: .85; }
.kid-books { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kid-books li { display: grid; grid-template-columns: minmax(0, 1fr) 110px 42px auto; gap: 10px; align-items: center; }
.kid-books li div { display: grid; min-width: 0; }
.kid-books li div span { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kid-books li div span:empty { display: none; }
.kid-books li div .kid-mins { color: var(--brand-ink); font-size: 12.5px; }
.kid-books .kid-sub { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
:lang(ar) .kid-books .kid-sub { letter-spacing: 0; text-transform: none; font-size: 13px; }
.kid-missing strong { color: var(--muted); font-weight: 600; }
.kid-pct { font-weight: 700; font-size: 13px; color: var(--ink-2); text-align: end; }
.kid-none { color: var(--muted); }
.kid-live.onapp { color: var(--brand); }
/* when they were on Kitabi, today and yesterday, and flashcards waiting */
.kid-times { display: grid; gap: 4px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px; color: var(--ink-2); }
.kid-time { margin: 0; }
.kid-time strong { margin-inline-end: 4px; color: var(--ink); }
.kid-cards { margin: 2px 0 0; font-weight: 600; color: var(--brand-ink); }
.kid-foot { display: flex; justify-content: flex-end; }
.kid-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 14px; padding: 16px; border-radius: 16px; border: 1px dashed #c7d2fe; background: rgb(238 242 255 / .5); }
.kid-link label { display: grid; gap: 5px; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.kid-link input { font: inherit; font-size: 18px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 12px; }
.kid-link .ph-note { grid-column: 1 / -1; margin: 0; }

@media (max-width: 560px) {
  .st-roles { grid-template-columns: 1fr; }
  .kid-stats { grid-template-columns: 1fr 1fr; }
  .kid-week { grid-column: 1 / -1; }
  .kid-books li { grid-template-columns: minmax(0, 1fr) 42px auto; }
  .kid-books li > div { grid-column: 1 / -1; } /* the title on its own line, then the bar, % and Open */
  .kid-books li > span:empty { display: none; }
  .kid-head { flex-wrap: wrap; }
  .kid-live { flex-basis: 100%; margin-top: -8px; padding-inline-start: 56px; } /* under the name */
  .st-card { padding: 18px; }
}

/* ---- The admin area ---- */
.admin-tag { margin-inline-start: 4px; padding: 3px 9px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 12px; font-weight: 800; }
.admin { max-width: 1180px; margin: 0 auto; padding: 22px 16px 90px; }
.ad-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin-bottom: 18px; }
.ad-tabs button { flex: none; font: inherit; font-weight: 700; font-size: 14.5px; padding: 10px 14px; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; white-space: nowrap; }
.ad-tabs button[aria-selected="true"] { background: var(--brand-soft); color: var(--brand); }
.ad-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ad-head h2 { margin: 0 0 4px; font-size: 24px; }
.ad-head p { margin: 0; color: var(--muted); max-width: 720px; }
.ad-h3 { margin: 22px 0 10px; font-size: 16px; color: var(--brand-ink); }
.ad-empty { margin: 0; padding: 18px; border-radius: 14px; border: 1px dashed var(--line); color: var(--muted); text-align: center; }
.ad-bad { color: var(--bad); font-weight: 600; font-size: 14px; }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); }
.ad-save { position: fixed; z-index: 60; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: max-content; max-width: calc(100% - 32px); padding: 10px 12px 10px 16px; border-radius: 16px; background: #0f172a; color: #fff; font-weight: 600; box-shadow: var(--shadow-lg); }
.ad-save[hidden] { display: none; }
.ad-save .btn-ghost { color: #cbd5e1; }
.ad-note { position: fixed; z-index: 61; bottom: 84px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: var(--ok-soft); color: #166534; font-weight: 600; box-shadow: var(--shadow); }
.ad-note.bad { background: var(--bad-soft); color: var(--bad); }
.ad-note[hidden] { display: none; }
.ad-search { font: inherit; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); min-width: 270px; }
.ad-search:focus { outline: none; border-color: var(--brand); }
/* books */
.ad-books { display: grid; gap: 10px; }
.ad-book { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.ad-book img, .ad-cover-blank { width: 64px; border-radius: 5px; box-shadow: 0 4px 12px rgb(15 23 42 / .18); }
.ad-cover-blank { aspect-ratio: 3 / 4; background: var(--surface-2); box-shadow: none; border: 2px dashed #cbd5e1; }
.ad-book-info { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.ad-book-info strong { font-size: 16px; }
.ad-meta { color: var(--muted); font-size: 13.5px; }
.ad-ai { color: var(--brand-ink); font-size: 13px; font-weight: 600; }
.ad-ai-all { margin: 4px 0 0; color: var(--brand-ink); font-weight: 600; font-size: 14px; }
.ad-ai-note { margin: 12px 2px 0; color: var(--muted); font-size: 12.5px; }
.ad-id { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.ad-id code { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); user-select: all; }
.ad-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.ad-badge { padding: 2px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.ad-badge.used { background: var(--ok-soft); border-color: #bbf7d0; color: #166534; }
.ad-prep { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.ad-book-info .pbar { width: 100%; max-width: 320px; }
.ad-switch { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.ad-switch input { width: 17px; height: 17px; accent-color: var(--brand); }
.ad-book-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
/* schools */
.ad-seg { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.ad-seg button { font: inherit; font-weight: 700; font-size: 13.5px; padding: 8px 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; }
.ad-seg button[aria-pressed="true"] { background: var(--surface); color: var(--brand); box-shadow: var(--shadow); }
.ad-split { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; }
.ad-side { display: grid; gap: 10px; position: sticky; top: calc(var(--topbar) + 12px); }
.ad-side .ad-search { min-width: 0; width: 100%; }
.ad-side-list { display: grid; gap: 6px; max-height: 60vh; overflow: auto; }
.ad-school { display: flex; align-items: center; gap: 10px; text-align: start; font: inherit; padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; color: var(--ink); }
.ad-school.on, .ad-school:hover { border-color: var(--brand); background: var(--brand-soft); }
.ad-school-name { display: grid; min-width: 0; }
.ad-school-name strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-school-name small { color: var(--muted); font-size: 12px; }
.ad-side .ad-new { justify-self: start; }
.ad-edit { padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.ad-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ad-fields label, .ad-colleges label { display: grid; gap: 5px; font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.ad-edit input, .ad-edit select, .ad-college input, .ad-copy { font: inherit; font-size: 14.5px; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); min-width: 0; }
.ad-edit input:focus, .ad-edit select:focus, .ad-college input:focus { outline: none; border-color: var(--brand); }
.ad-grades { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-grade { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 700; font-size: 13.5px; padding: 7px 11px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); cursor: pointer; }
.ad-grade.has { color: var(--ink-2); border-color: #c7d2fe; }
.ad-grade.on { border-color: var(--brand); background: var(--brand); color: #fff; }
.ad-grade small { padding: 0 6px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: 11.5px; }
.ad-grade.on small { background: rgb(255 255 255 / .25); color: #fff; }
.ad-sub-list { display: grid; gap: 10px; }
.ad-subject { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.ad-sub-names { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ad-sub-names input { font-weight: 700; }
.ad-sub-books { display: grid; gap: 6px; }
.ad-sub-book { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ad-x { color: var(--muted); font-size: 14px; }
.ad-x:hover { color: var(--bad); }
.ad-link { justify-self: start; padding: 0; border: 0; background: none; color: var(--brand); font: 600 13.5px/1.4 var(--font); cursor: pointer; }
.ad-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.ad-danger { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.ad-colleges { display: grid; gap: 8px; margin-bottom: 12px; }
.ad-college { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
/* import */
.ad-cols { color: var(--muted); font-size: 13.5px; margin: 0 0 10px; }
.ad-cols code { display: inline-block; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; word-break: break-word; }
.ad-paste { width: 100%; font: 13.5px/1.5 ui-monospace, Menlo, monospace; padding: 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); resize: vertical; }
.ad-paste:focus { outline: none; border-color: var(--brand); }
.ad-preview { margin-top: 16px; display: grid; gap: 10px; justify-items: start; }
.ad-summary { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; padding: 12px 14px; border-radius: 14px; background: var(--brand-soft); color: var(--brand-ink); }
.ad-skipped { margin: 0; padding-inline-start: 20px; color: var(--ink-2); font-size: 13.5px; display: grid; gap: 3px; }
/* requests and accounts */
.ad-req, .ad-accounts { display: grid; gap: 8px; }
.ad-req-row, .ad-account { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.ad-req-row > div:first-child { display: grid; gap: 2px; min-width: 0; }
.ad-req-row span, .ad-req-row small { color: var(--muted); font-size: 13.5px; }
.ad-account { justify-content: flex-start; }
.ad-acc-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ad-acc-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ad-login { color: var(--ink-2); font-size: 13.5px; text-align: start; }
@media (max-width: 860px) {
  .ad-split { grid-template-columns: 1fr; }
  .ad-side { position: static; }
  .ad-side-list { max-height: 260px; }
}
@media (max-width: 600px) {
  .ad-fields { grid-template-columns: 1fr; }
  .ad-book { grid-template-columns: 52px minmax(0, 1fr); }
  .ad-book img, .ad-cover-blank { width: 52px; }
  .ad-book-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .ad-sub-book, .ad-sub-names { grid-template-columns: 1fr auto; }
  .ad-sub-book select, .ad-sub-names .ad-sub-ar { grid-column: 1 / 2; }
  .ad-college { grid-template-columns: 1fr auto; }
  .ad-req-row, .ad-account { flex-wrap: wrap; }
}

/* ---- Chats with the tutor: the past chats, Export ---- */
@media (min-width: 1001px) { .tutor { position: relative; } } /* (on a phone the tutor is a fixed panel, which holds these already) */
.chat-list { position: absolute; z-index: 6; inset: 61px 0 0 0; display: flex; flex-direction: column; background: var(--surface); border-top: 1px solid var(--line); animation: pop2 .15s ease-out; }
.cl-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.cl-head strong { flex: 1; font-size: 16px; }
.cl-items { flex: 1; overflow: auto; padding: 8px; display: grid; align-content: start; gap: 4px; }
.cl-item { display: flex; align-items: center; gap: 2px; border-radius: 12px; border: 1px solid transparent; }
.cl-item:hover { background: var(--surface-2); }
.cl-item.on { border-color: #c7d2fe; background: var(--brand-soft); }
.cl-open { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: start; font: inherit; padding: 10px 12px; border: 0; background: none; cursor: pointer; color: var(--ink); }
.cl-open strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-open span { color: var(--muted); font-size: 12.5px; }
.cl-empty { margin: 20px 12px; color: var(--muted); text-align: center; }
.export-menu { position: absolute; z-index: 7; inset-inline-end: 12px; display: grid; min-width: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); animation: pop2 .15s ease-out; }
.export-menu button { font: inherit; font-weight: 600; font-size: 14.5px; text-align: start; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer; }
.export-menu button:hover { background: var(--surface-2); color: var(--brand); }
.tutor-flash { position: absolute; z-index: 8; top: 70px; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: #0f172a; color: #fff; font-weight: 600; font-size: 13.5px; animation: pop2 .15s ease-out; }
@media print {
  #print-sheet .ps-chat-q, #print-sheet .ps-chat-a { margin: 6pt 0; padding: 6pt 9pt; border-radius: 6pt; break-inside: avoid; }
  #print-sheet .ps-chat-q { background: #eef2ff; }
  #print-sheet .ps-chat-a { border: 1px solid #ddd; }
  #print-sheet .ps-chat-who { margin: 0 0 2pt; font-size: 9.5pt; font-weight: 700; color: #4f46e5; }
  #print-sheet .ps-chat-q p, #print-sheet .ps-chat-a p { margin: 2pt 0; }
}
/* the tutor's header keeps its name on one line when its buttons need the room */
.tutor-names { min-width: 0; flex: 1; }
.tutor-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .tutor-sub { display: none; } }

/* ---- The tutor as a window of its own (on a computer): moved by its top bar, resized from any edge ---- */
body.tutor-floating .app { grid-template-columns: minmax(0, 1fr); }
body.tutor-floating .tutor { position: fixed; z-index: 45; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 70px rgb(15 23 42 / .3), 0 2px 8px rgb(15 23 42 / .12); }
body.tutor-floating .tutor-head { cursor: grab; user-select: none; touch-action: none; }
body.tutor-moving { user-select: none; }
body.tutor-moving .tutor-head { cursor: grabbing; }
.float-toggle.on { color: var(--brand); background: var(--brand-soft); }
.tutor-grip { position: absolute; z-index: 10; touch-action: none; }
.tutor-grip.n, .tutor-grip.s { left: 14px; right: 14px; height: 7px; cursor: ns-resize; }
.tutor-grip.n { top: 0; }
.tutor-grip.s { bottom: 0; }
.tutor-grip.e, .tutor-grip.w { top: 14px; bottom: 14px; width: 7px; cursor: ew-resize; }
.tutor-grip.e { right: 0; }
.tutor-grip.w { left: 0; }
.tutor-grip.ne, .tutor-grip.nw, .tutor-grip.se, .tutor-grip.sw { width: 16px; height: 16px; }
.tutor-grip.ne { top: 0; right: 0; cursor: nesw-resize; }
.tutor-grip.sw { bottom: 0; left: 0; cursor: nesw-resize; }
.tutor-grip.nw { top: 0; left: 0; cursor: nwse-resize; }
.tutor-grip.se { bottom: 0; right: 0; cursor: nwse-resize; }
/* a little grip in the bottom corner, so it's clear the window can be resized */
.tutor-grip.se::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 9px; height: 9px; background: linear-gradient(135deg, transparent 45%, #94a3b8 45% 55%, transparent 55% 70%, #94a3b8 70% 80%, transparent 80%); }

/* ---- Credit: what's left, how it works, plans and packs, checkout (public/credits.html) ---- */
.credits { max-width: 1040px; margin: 0 auto; padding: 28px 16px 80px; }
.cr-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.cr-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
.cr-balance-card .eyebrow { margin-bottom: 10px; }
.cr-balance { display: flex; align-items: baseline; gap: 10px; }
.cr-balance strong { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--brand-ink); }
.cr-balance span { font-size: 16px; font-weight: 600; color: var(--muted); }
.cr-about, .cr-used, .cr-ordered { margin: 10px 0 0; color: var(--ink-2); }
.cr-about:empty { display: none; }
.cr-used { font-size: 14px; color: var(--muted); }
.cr-ordered { padding: 10px 12px; border-radius: 12px; background: #fff7ed; color: #9a3412; font-size: 14px; font-weight: 600; }
.cr-ordered[hidden], .cr-history[hidden] { display: none; }
.cr-how h3 { margin: 0 0 10px; font-size: 16px; }
.cr-how ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 8px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.cr-h2 { margin: 34px 0 16px; font-size: 24px; }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.cr-plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.cr-plan.best { border: 2px solid var(--brand); box-shadow: 0 8px 30px rgb(79 70 229 / .18); }
.cr-plan.monthly { background: linear-gradient(180deg, var(--brand-soft), var(--surface) 65%); }
.cr-best { position: absolute; top: -11px; inset-inline-start: 18px; padding: 3px 10px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; }
.cr-plan h3 { margin: 0; font-size: 17px; }
.cr-price { margin: 6px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.cr-price strong { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.cr-price span { color: var(--muted); font-size: 13.5px; }
.cr-credits { margin: 0; font-weight: 700; color: var(--brand-ink); }
.cr-answers, .cr-renews { margin: 0; color: var(--muted); font-size: 13.5px; }
.cr-buy { width: 100%; margin-top: auto; }
.cr-plan > p:nth-last-of-type(1) { margin-bottom: 12px; }
.cr-history { margin-top: 30px; }
.cr-history h3 { margin: 0 0 8px; font-size: 16px; }
.cr-history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cr-history li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 14px; }
.cr-history li strong { color: var(--ok); }
.cr-history li time { color: var(--muted); }
/* checkout */
.cr-checkout { max-width: 560px; margin: 0 auto; display: grid; gap: 14px; }
.cr-back { justify-self: start; }
.cr-checkout h2 { margin: 0; font-size: 26px; }
.cr-checkout h3 { margin: 8px 0 0; font-size: 15px; }
.cr-order { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cr-order > div { display: grid; gap: 4px; }
.cr-order .eyebrow { justify-self: start; margin: 0 0 4px; }
.cr-order strong { font-size: 18px; }
.cr-order span { color: var(--muted); font-size: 14px; }
.cr-total { margin: 0; display: grid; text-align: end; }
.cr-total strong { font-size: 24px; }
.cr-methods { display: grid; gap: 8px; }
.cr-method { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; }
.cr-method:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.cr-method input { flex: none; width: 18px; height: 18px; accent-color: var(--brand); }
.cr-logo { flex: none; min-width: 74px; padding: 6px 8px; border-radius: 8px; color: #fff; font-size: 12px; font-weight: 800; text-align: center; white-space: nowrap; }
.cr-logo-knet { background: #1d4e89; }
.cr-logo-card { background: #1a1f71; }
.cr-logo-applepay { background: #111; }
.cr-mtext { display: grid; }
.cr-mtext span { color: var(--muted); font-size: 13px; }
.cr-pay { width: 100%; }
.cr-secure { margin: 0; color: var(--muted); font-size: 13px; text-align: center; }
.cr-error { margin: 0; color: var(--bad); font-weight: 600; }
.cr-error[hidden] { display: none; }
.cr-sent .cr-card { display: grid; justify-items: center; gap: 10px; padding: 30px 24px; text-align: center; }
.cr-sent-icon { font-size: 40px; }
.cr-sent h2 { font-size: 22px; }
.cr-sent p { max-width: 440px; margin: 0; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 760px) {
  .cr-top { grid-template-columns: 1fr; }
  .cr-balance strong { font-size: 44px; }
}
/* the tutor, out of credit: the way to more */
.credit-btn { margin-top: 8px; }
/* admin: each account's credit, and the prices */
.ad-credit { color: var(--ink-2); font-size: 13px; }
.ad-credit.asked { color: #9a3412; font-weight: 600; }
.ad-credits { display: grid; gap: 18px; max-width: 660px; }
.ad-credit-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ad-credit-fields label { display: grid; align-content: start; gap: 5px; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.ad-credits input { width: 100%; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); font: inherit; }
.ad-per-hint { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.ad-price-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.ad-price-grid b { color: var(--muted); font-size: 13px; }
.ad-small { margin: 0; color: var(--muted); font-size: 13px; }
.ad-credits button[type=submit] { justify-self: start; }

/* Home: adding a book (one PDF, or a book in several files grouped into parts), and Edit details */
.add-modal { width: min(640px, 100%); }
.ab-as { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.ab-as-label { grid-column: 1 / -1; margin: 0; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.ab-as label { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; }
.ab-as label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.ab-as input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand); }
.ab-as label span { display: grid; gap: 2px; }
.ab-as b { font-size: 14.5px; color: var(--ink); }
.ab-as small { font-size: 13px; font-weight: 500; color: var(--muted); }
.ab-many .ab-file { padding: 4px 4px 4px 6px; }
.ab-bookname { flex: 1; min-width: 0; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; }
.ab-bookname:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(79 70 229 / .12); }
@media (max-width: 520px) { .ab-as { grid-template-columns: 1fr; } }
.ab-hint, .ab-paste-text { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.ab-one { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.ab-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-size { flex: none; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ab-list { list-style: none; margin: 10px 0 0; padding: 6px; display: grid; gap: 2px; max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.ab-file { display: flex; align-items: center; gap: 8px; padding: 3px 4px 3px 8px; border-radius: 9px; }
.ab-file:hover { background: var(--surface-2); }
.ab-n { flex: none; min-width: 22px; color: var(--muted); font-size: 12.5px; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
.ab-tools { flex: none; display: flex; align-items: center; gap: 2px; }
.ab-tools .icon-btn, .ab-part .icon-btn { width: 30px; height: 30px; font-size: 16px; }
.ab-addpart { border: 1px dashed #a5b4fc; background: none; color: var(--brand); font: inherit; font-size: 12.5px; font-weight: 600; padding: 3px 9px; margin-inline-end: 4px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.ab-addpart:hover { background: var(--brand-soft); border-style: solid; }
.ab-part { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px; border-radius: 10px; background: var(--brand-soft); }
.ab-part:first-child { margin-top: 0; }
.ab-part input { flex: 1; min-width: 0; font: inherit; font-weight: 700; font-size: 14px; color: var(--brand-ink); padding: 7px 10px; border: 1.5px solid #c7d2fe; border-radius: 9px; background: #fff; }
.ab-part input:focus { outline: none; border-color: var(--brand); }
.ab-paste { margin-top: 10px; }
.ab-paste > summary { cursor: pointer; width: fit-content; color: var(--brand); font-weight: 600; font-size: 14px; }
.ab-paste[open] > summary { margin-bottom: 6px; }
.ab-paste textarea, .ab-field input, .ab-field textarea { width: 100%; font: inherit; font-size: 14.5px; font-weight: 500; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); resize: vertical; }
.ab-paste textarea { margin-top: 8px; }
.ab-paste textarea:focus, .ab-field input:focus, .ab-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgb(79 70 229 / .12); }
.ab-paste-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ab-paste-note { color: var(--bad); font-size: 13px; font-weight: 600; }
.ab-details { display: grid; gap: 14px; margin-top: 4px; }
.ab-field { display: grid; gap: 6px; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.ab-field small { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.ab-cover { display: flex; align-items: center; gap: 14px; }
.ab-cover img { flex: none; width: 76px; height: 104px; object-fit: cover; border-radius: 6px; background: var(--surface-2); box-shadow: 0 6px 16px rgb(15 23 42 / .2); }
.ab-cover-side p { margin: 0 0 8px; color: var(--muted); font-size: 13px; font-weight: 500; }
.ab-cover-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-error { margin: 0; color: var(--bad); font-weight: 600; font-size: 14px; }
.ab-actions { display: flex; justify-content: flex-end; gap: 10px; }
.add-modal .add-note { margin: 0; color: var(--muted); }
@media (max-width: 480px) { .ab-file .ab-size { display: none; } }
/* the few words about a book its reader wrote, under its name */
.book-blurb { margin: 0 0 4px; max-width: 72ch; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* The account menu: a new password */
.pw-modal { width: min(440px, 100%); }
.pw-form { gap: 14px; }
.pw-done { margin: 6px 0 8px; font-weight: 600; color: var(--ok); }

/* Translate: the selected words, and the same in the other language */
.tr-from { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tr-out { margin-top: 10px; }
.tr-label { margin: 0 0 4px; color: var(--brand); font-size: 12.5px; font-weight: 700; }
.tr-to { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.tr-to:lang(ar), .tr-note:lang(ar) { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; }
.tr-note { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.tr-modal .pr-btns { margin-top: 12px; }

/* Choosing the voice (ElevenLabs or Microsoft, a woman or a man, or the computer's own), in Listen's bar and the tutor's */
.voice-pick { max-width: 190px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2); padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; text-overflow: ellipsis; }
.voice-pick:hover { border-color: #a5b4fc; color: var(--brand-ink); }
.voice-pick:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.la-main { display: contents; } /* (drawn again after every sentence; the voice menu beside it stays) */
.la-voice { display: inline-flex; margin-inline: 4px 2px; }
.la-voice[hidden], .vb-voice:empty { display: none; }
.vb-voice { flex: 0 1 auto; min-width: 0; display: inline-flex; margin-inline-start: auto; } /* (gives up width first) */
.vb-voice .voice-pick { min-width: 0; max-width: min(150px, 100%); padding: 4px 6px; font-size: 12.5px; }
@media (max-width: 520px) { .la-voice .voice-pick { max-width: 130px; font-size: 12.5px; } }

/* Which AI answers you (account menu), and the models an admin offers (Admin → Credits) */
.ai-list { display: grid; gap: 8px; margin-top: 4px; }
.ai-option { display: grid; gap: 2px; text-align: start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); font: inherit; color: var(--ink); cursor: pointer; }
.ai-option:hover { border-color: #a5b4fc; }
.ai-option.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.ai-option strong { font-size: 16px; }
.ai-what { color: var(--ink-2); font-size: 14px; }
.ai-cost { color: var(--brand-ink); font-size: 13px; font-weight: 600; }
.ai-cost:empty { display: none; }
.ad-ai { margin-top: 18px; }
.ad-ai h3 { margin: 0; }
.ad-ai-list { display: grid; gap: 6px; }
.ad-ai-list label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 14.5px; cursor: pointer; }
.ad-credits .ad-ai-list input { width: 18px; height: 18px; flex: none; align-self: center; accent-color: var(--brand); }
.ad-ai-list small { color: var(--muted); font-size: 13px; }
.ad-ai-standard { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.ad-ai-standard select { padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); font: inherit; font-weight: 500; }
/* the AI cards: what each is best for, the recommended one, theirs; on the Credits page side by side */
.ai-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.ai-badge { padding: 2px 9px; border-radius: 999px; background: var(--ok-soft); color: #166534; font-size: 12px; font-weight: 700; }
.ai-mine { padding: 2px 9px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; }
.ai-best { color: var(--ink); font-size: 14px; font-weight: 600; }
.ai-best:empty, .ai-what:empty { display: none; }
.cr-ai { margin-top: 28px; }
.cr-ai-text { margin: -4px 0 12px; color: var(--ink-2); font-size: 14.5px; }
.cr-ai .ai-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cr-ai .ai-option { align-content: start; padding: 16px; border-radius: 18px; }

/* Admin → Overview: tiles, the AI's cost by month, which models answered, top spenders; one person in detail */
.ov-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 14px 0 16px; }
.ov-tile { display: grid; align-content: start; gap: 3px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.ov-label { color: var(--muted); font-size: 13px; font-weight: 600; }
.ov-value { font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.ov-sub { color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.ov-tiles.small { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 10px 0 6px; }
.ov-tiles.small .ov-tile { padding: 12px; box-shadow: none; }
.ov-tiles.small .ov-value { font-size: 20px; }
.ov-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 860px) { .ov-row { grid-template-columns: 1fr; } }
.ov-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.ov-card h3 { margin: 0 0 10px; font-size: 15px; }
.ov-none { margin: 4px 0; color: var(--muted); font-size: 14px; }
.ov-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ov-bar { fill: var(--brand); transition: fill .15s; }
.ov-col:hover .ov-bar, .ov-col:focus .ov-bar { fill: var(--brand-ink); }
.ov-col:focus { outline: none; }
.ov-col:focus-visible .ov-hit { stroke: var(--brand); stroke-width: 2; }
.ov-hit { fill: transparent; }
.ov-base { stroke: #e2e8f0; stroke-width: 1; }
.ov-axis { fill: var(--muted); font-size: 12px; }
.ov-val { fill: var(--ink); font-size: 12.5px; font-weight: 700; }
.ov-table { margin-top: 6px; font-size: 13.5px; }
.ov-table summary { cursor: pointer; color: var(--brand); font-weight: 600; width: fit-content; }
.ov-card table, .ov-person-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ov-card th, .ov-card td, .ov-person-table th, .ov-person-table td { padding: 7px 8px; text-align: start; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ov-card th, .ov-person-table th { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.ov-card td, .ov-person-table td { font-variant-numeric: tabular-nums; }
.ov-scroll { overflow-x: auto; }
.ov-models-list { display: grid; gap: 10px; }
.ov-model { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
.ov-model-name { font-weight: 700; font-size: 14px; }
.ov-track { height: 8px; border-radius: 99px; background: var(--brand-soft); overflow: hidden; }
.ov-track i { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.ov-model-n { grid-column: 2; color: var(--ink-2); font-size: 12.5px; }
.ov-person { width: min(760px, 100%); }
.ov-who { margin: 0; color: var(--ink-2); font-size: 14px; }
.ov-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ov-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; }
.ov-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-list li strong { font-variant-numeric: tabular-nums; }
.ov-list li time { color: var(--muted); }

/* Overview: what needs the owner (each with a dot by kind and words that say it), and the reader's low-credit warnings */
.ov-alerts { margin: 14px 0 0; padding: 14px 16px; border: 1px solid #fde68a; border-radius: 16px; background: #fffbeb; }
.ov-alerts.ok { border-color: #bbf7d0; background: var(--ok-soft); }
.ov-alerts.ok p { margin: 0; color: #166534; font-weight: 600; font-size: 14px; }
.ov-alerts h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; color: #78350f; }
.ov-alerts h3 .count { padding: 1px 8px; border-radius: 999px; background: #f59e0b; color: #fff; font-size: 12px; }
.ov-alerts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ov-alerts li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface); font-size: 14px; }
.al-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
.al-out .al-dot, .al-failed .al-dot { background: var(--bad); }
.al-low .al-dot { background: #f59e0b; }
.al-heavy .al-dot { background: #ea580c; }
.al-order .al-dot { background: var(--brand); }
.al-text { flex: 1; min-width: 200px; color: var(--ink); }
.al-acts { display: flex; gap: 6px; }
.account-menu button.am-low svg, .account-menu button.am-low .am-value { color: #b45309; font-weight: 700; }
.msg.credit-low .msg-body { display: grid; gap: 8px; }
.credit-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.credit-done { color: #166534; font-weight: 600; }
.cr-warn { margin-bottom: 16px; padding: 14px 18px; border: 1px solid #fde68a; border-radius: 16px; background: #fffbeb; color: #78350f; }
.cr-warn strong { display: block; font-size: 16px; }
.cr-warn p { margin: 4px 0 0; font-size: 14.5px; }
.cr-contact { color: var(--brand-ink); font-weight: 600; }
.ad-contact { display: grid; gap: 5px; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.ad-contact small, .ad-credit-fields small { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.ad-people-books { margin-top: 36px; }

/* the language button's short name ("EN" / "ع"), for a phone's reader, whose top bar is full */
.lang-short { display: none; }
@media (max-width: 480px) {
  .book-reader .topbar { gap: 3px; padding: 0 6px; }
  .book-reader .back { padding: 6px 4px; }
  .book-reader .topbar .icon-btn, .book-reader .pager .icon-btn { width: 30px; height: 30px; }
  .book-reader #lang { min-width: 34px; padding-inline: 8px; }
  .book-reader #lang .lang-long { display: none; }
  .book-reader #lang .lang-short { display: inline; }
}
/* a phone's tutor header: a little tighter, so which AI answers fits under the name */
.tutor-model .tm-short { display: none; }
@media (max-width: 480px) {
  .tutor-head { gap: 4px; padding: 10px 8px 10px 12px; }
  .tutor-head .avatar { width: 34px; height: 34px; }
  .tutor-head .icon-btn { width: 32px; height: 32px; }
  .tutor-model .tm-full { display: none; }
  .tutor-model .tm-short { display: inline; }
}

/* A new quiz: the kinds of question (ticked) and how many; then a heading for each kind when they're mixed,
   true or false side by side, a written answer's box and its mark (partly right in amber) */
.qs-form { display: grid; gap: 18px; }
.qs-form fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.qs-form legend { margin-bottom: 8px; padding: 0; font-weight: 700; color: var(--ink); }
.qs-kind { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; }
.qs-kind:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.qs-kind input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); }
.qs-kind > span { display: grid; gap: 2px; }
.qs-kind small { color: var(--muted); font-size: 13px; }
.qs-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.qs-counts label { position: relative; }
.qs-counts input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.qs-counts span { display: inline-grid; place-items: center; min-width: 58px; padding: 9px 16px; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 700; }
.qs-counts input:checked + span { border-color: var(--brand); background: var(--brand); color: #fff; }
.qs-counts input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.qs-error { margin: 0; color: var(--bad); font-weight: 600; }
.quiz-section { margin: 8px 0 -6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
:lang(ar) .quiz-section { letter-spacing: 0; text-transform: none; font-size: 14px; }
.opts.tf { grid-template-columns: 1fr 1fr; }
.opts.tf .opt { text-align: center; font-weight: 700; }
.quiz-q.partly { border-color: #fcd34d; }
.feedback.mid { background: #fffbeb; color: #78350f; }
.qw-answer { width: 100%; min-height: 78px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
.qw-answer:focus { outline: none; border-color: #a5b4fc; }
.qw-answer[readonly] { background: var(--surface-2); }
.qw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.qw-wait { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; }
.qw-error { margin: 0; color: var(--bad); font-size: 13.5px; }
.qw-model { flex-basis: 100%; }
.qr-grade { margin: 0; font-weight: 700; color: var(--brand-ink); }

/* The upload screen's tick box (their own copy, or the right to use it) */
.ab-rights { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.ab-rights:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.ab-rights input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--brand); }
.ab-rights a { color: var(--brand); font-weight: 600; }
/* A book Kitabi removed: when and why, until its reader takes it out */
.removed-book { border: 1.5px dashed #fca5a5; background: #fffbfb; }
.removed-book .rm-when { color: var(--bad); font-weight: 600; }
.removed-book .rm-why, .removed-book .rm-note, .removed-book .rm-ask { margin: 8px 0 0; color: var(--ink-2); font-size: 14.5px; }
.removed-book .rm-note { font-style: italic; }
.removed-book .pr-btns { margin-top: 12px; }
/* Admin: removing a book, and reading a report */
.rm-form { display: grid; gap: 14px; }
.rm-form fieldset { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.rm-form legend { margin-bottom: 6px; padding: 0; font-weight: 700; }
.rm-choice { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; cursor: pointer; }
.rm-choice input { margin-top: 3px; accent-color: var(--bad); }
.rm-note-field { display: grid; gap: 5px; font-weight: 600; font-size: 14px; }
.rm-note-field textarea { padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; font-weight: 400; resize: vertical; }
.rm-note-field small { color: var(--muted); font-weight: 500; }
.btn.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.btn-danger:hover { filter: brightness(.95); }
.al-report .al-dot { background: #7c3aed; }
.rp-details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 12px; }
.rp-details dt { color: var(--muted); font-weight: 600; font-size: 13.5px; }
.rp-details dd { margin: 0; overflow-wrap: anywhere; }
.rp-details a { color: var(--brand); font-weight: 600; }
.rp-message { white-space: pre-wrap; }
/* The terms of use, with the form to report a book (open without an account) */
.terms { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; }
.terms h1 { margin: 0 0 8px; font-size: 30px; }
.tm-lead { margin: 0 0 22px; color: var(--ink-2); font-size: 16.5px; }
.tm-sec { margin-bottom: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.tm-sec h2 { margin: 0 0 6px; font-size: 18px; }
.tm-sec > p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.tm-form { margin-top: 14px; }
.tm-fields textarea { width: 100%; padding: 13px 14px; border: 1.5px solid #e2e8f0; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-weight: 500; resize: vertical; }
.tm-fields textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgb(79 70 229 / .12); }
.tm-fields small { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.tm-sent { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--ok-soft); color: #166534; font-weight: 600; }
.wl-terms { margin: 10px 0 0; text-align: center; font-size: 13.5px; }
.wl-terms a { color: var(--muted); text-decoration: underline; }
.rm-copies { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--bad-soft); color: #7f1d1d; font-size: 13.5px; }
.rm-copies[hidden] { display: none; }
/* The Contact page (and its link from the terms of use) */
.ct-direct { margin: -10px 0 18px; padding: 10px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.ct-more { margin: 4px 0 0; text-align: center; }
.ct-more a { color: var(--brand); font-weight: 600; }
.tm-fields select { padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; background: var(--surface); }
.al-contact .al-dot { background: #0891b2; }
/* The monthly plan in a person's Details, and books used on the Credit page */
.pd-plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.pd-plan p { margin: 0; font-weight: 600; color: var(--ink-2); }
.pd-plan-acts { display: flex; gap: 6px; }
.cr-books { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; font-weight: 600; }
/* Choosing the currency (the Credit page), and the admin's prices in other currencies */
.cr-more-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.cr-currency { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-2); font-size: 14px; }
.cr-currency select { padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; background: var(--surface); color: var(--ink); }
.ad-add-currency { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; }
.ad-add-currency select { padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; background: var(--surface); }
.ad-add-currency small { color: var(--muted); font-size: 12.5px; }
.ad-price-grid b .ad-link { margin-inline-start: 4px; color: var(--bad); font-size: 15px; }
/* The translation panel beside the page (it follows the reader from page to page) */
.tp-panel { position: fixed; z-index: 34; inset-inline-start: 16px; bottom: 90px; width: min(420px, calc(100vw - 32px)); max-height: min(62vh, 560px); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 18px 50px rgb(15 23 42 / .22); }
.tp-head { display: flex; align-items: center; gap: 4px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--line); }
[dir="rtl"] .tp-head { padding: 10px 16px 10px 10px; }
.tp-head strong { flex: 1; min-width: 0; font-size: 14.5px; }
.tp-body { padding: 12px 16px; overflow-y: auto; }
.tp-text p { margin: 0 0 10px; line-height: 1.7; font-size: 15.5px; color: var(--ink); }
.tp-text[lang="ar"] p { font-size: 16.5px; line-height: 1.9; }
.tp-note { margin: 0; padding: 8px 16px 12px; color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .tp-panel { inset-inline: 8px; width: auto; bottom: 76px; max-height: 46vh; } }
.ad-price-grid { overflow-x: auto; padding-bottom: 4px; }
@media (max-width: 520px) { .rp-details { grid-template-columns: minmax(0, 1fr); gap: 2px; } .rp-details dd { margin-bottom: 8px; } }
/* The tutor's quick prompts: the ✦ at the top drops down a list of them */
.tutor-head .quick-btn { color: var(--brand); }
.tutor-head .quick-btn[hidden] { display: none; }
.quick-menu { position: absolute; z-index: 30; grid-template-columns: minmax(0, 1fr); width: min(300px, calc(100% - 24px)); max-height: min(460px, calc(100% - 150px)); overflow-y: auto; display: grid; align-content: start; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); animation: pop2 .15s ease-out; }
.quick-menu-title { margin: 6px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
:lang(ar) .quick-menu-title { letter-spacing: 0; text-transform: none; font-size: 13px; }
.quick-menu [role="menuitem"] { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: start; cursor: pointer; }
.quick-menu [role="menuitem"] svg { flex: none; margin-top: 2px; color: var(--brand); }
.quick-menu [role="menuitem"]:hover, .quick-menu [role="menuitem"]:focus-visible { background: var(--brand-soft); color: var(--brand-ink); outline: none; }
/* the reader's own prompts: + by the title writes one, each has a × */
.quick-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline-end: 2px; }
.quick-add { width: 30px; height: 30px; color: var(--brand); }
.quick-add:disabled { opacity: .4; cursor: default; }
.quick-new { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 2px 4px 8px; }
.quick-new textarea { width: 100%; min-height: 56px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.4; resize: none; }
.quick-new textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.quick-new-acts { display: flex; justify-content: flex-end; gap: 6px; }
.quick-mine { display: flex; align-items: flex-start; }
.quick-mine [role="menuitem"] { flex: 1; min-width: 0; }
.quick-mine [role="menuitem"] svg { color: #7c3aed; }
.quick-edit, .quick-drop { flex: none; width: 28px; height: 28px; margin-top: 4px; color: var(--muted); opacity: .7; }
.quick-edit:hover { opacity: 1; color: var(--brand); background: var(--brand-soft); }
.quick-drop:hover { opacity: 1; color: var(--bad); background: var(--bad-soft); }
.quick-line { height: 1px; margin: 4px 8px; background: var(--line); }
/* every answer read aloud, or not: beside the mic */
.composer .speak-toggle { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.composer .speak-toggle:hover { background: #eef2f7; color: var(--ink-2); }
.composer .speak-toggle.on { background: var(--brand-soft); color: var(--brand); }
.composer .speak-toggle.on:hover { background: #e0e7ff; }
/* the tutor's language beside the mic: "ع" or "EN" */
.composer .lang-toggle { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); font: 700 14px/1 system-ui, sans-serif; letter-spacing: .02em; }
.composer .lang-toggle:lang(ar) { font-size: 18px; }
.composer .lang-toggle:hover { background: #e0e7ff; }
.composer .speak-toggle svg { width: 19px; height: 19px; }

/* ---- The menu on the left (nav.js): beside the page on a computer, folded to icons with a tap; over the page
   from ☰ on a phone. In the reader (a computer) it starts with "This book": contents, bookmarks, notebook. */
body.has-nav { --nav-w: 232px; padding-inline-start: var(--nav-w); }
body.has-nav.nav-folded { --nav-w: 68px; }
.has-nav .topbar { margin-inline-start: calc(-1 * var(--nav-w)); }
.side-nav { position: fixed; z-index: 28; top: var(--topbar); bottom: 0; inset-inline-start: 0; width: var(--nav-w); display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; border-inline-end: 1px solid var(--line); background: var(--surface); overflow: hidden auto; }
.sn-items { display: flex; flex-direction: column; gap: 2px; }
.sn-book { padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.sn-title { margin: 4px 12px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
:lang(ar) .sn-title { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.nav-folded .sn-title { display: none; }
.sn-head { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.sn-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none; color: var(--ink-2); font: 600 14.5px/1.2 var(--font); text-align: start; text-decoration: none; white-space: nowrap; cursor: pointer; }
.sn-item svg { flex: none; }
.sn-item:hover { background: var(--surface-2); color: var(--ink); }
.sn-item.on { background: var(--brand-soft); color: var(--brand-ink); }
[dir="rtl"] .sn-fold svg, .nav-folded .sn-fold svg { transform: scaleX(-1); }
[dir="rtl"] .nav-folded .sn-fold svg { transform: none; } /* (folded, its arrow points the way the menu opens) */
.sn-fold { color: var(--muted); font-weight: 500; }
.nav-folded .sn-label { display: none; }
.nav-folded .sn-item { justify-content: center; padding-inline: 0; }
/* Study's cards due: after its name, or on its icon's corner when the menu is folded */
.sn-item { position: relative; }
.sn-badge { margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; }
.nav-folded .sn-badge { position: absolute; top: 4px; inset-inline-end: 8px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
.sn-open, .sn-shade { display: none; }
/* on a computer the book's contents and notebook are in the menu on the left, not the tool bar under the page */
@media (min-width: 1001px) { .has-nav #sb-contents, .has-nav #sb-notebook, .has-nav #sb-study { display: none; } }
/* the book's contents (the reader): its parts under their modules, the one open now with its sections */
.ct-list { display: grid; gap: 6px; }
.ct-module { margin: 14px 4px 2px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ct-module:first-child { margin-top: 0; }
:lang(ar) .ct-module { letter-spacing: 0; text-transform: none; font-size: 13px; }
.ct-part { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.ct-part:hover { border-color: #c7d2fe; background: var(--brand-soft); }
.ct-part.on { border-color: var(--brand); background: var(--brand-soft); }
.ct-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ct-text strong { font-size: 14.5px; }
.ct-text small { color: var(--muted); font-size: 12.5px; }
.ct-part svg { flex: none; color: var(--ok); }
.ct-sections { display: grid; gap: 2px; margin: 0 0 4px 14px; padding-inline-start: 10px; border-inline-start: 2px solid #c7d2fe; }
[dir="rtl"] .ct-sections { margin: 0 14px 4px 0; }
.ct-section { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: inherit; font-size: 13.5px; text-align: start; cursor: pointer; }
.ct-section:hover { background: var(--surface-2); color: var(--brand-ink); }
.ct-section span { flex: 1; }
.ct-section small { flex: none; color: var(--muted); }
.ct-section.on { color: var(--brand-ink); font-weight: 700; }
.has-nav .tp-panel { inset-inline-start: calc(var(--nav-w) + 16px); bottom: 20px; }
@media (max-width: 1000px) {
  body.has-nav, body.has-nav.nav-folded { --nav-w: 0px; padding-inline-start: 0; }
  .side-nav { top: 0; z-index: 70; width: min(280px, 84vw); transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--shadow-lg); }
  [dir="rtl"] .side-nav { transform: translateX(105%); }
  .side-nav.open { transform: none; }
  .nav-folded .side-nav .sn-label { display: inline; }
  .nav-folded .side-nav .sn-item { justify-content: flex-start; padding-inline: 12px; }
  .sn-head { display: none; }
  .sn-open { display: inline-grid; flex: none; }
  .sn-shade.open { display: block; position: fixed; inset: 0; z-index: 65; background: rgb(15 23 42 / .35); }
  .book-reader .side-nav, .book-reader .sn-open, .book-reader .sn-shade.open { display: none; }
  .has-nav .tp-panel { inset-inline-start: 8px; bottom: 76px; }
}
/* The Flashcards and quizzes page: a row for each book's cards, and for each quiz */
.sh-list { display: grid; gap: 8px; margin-top: 10px; }
.sh-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.sh-what { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sh-what strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-what small { color: var(--muted); font-size: 13px; }
.sh-empty { margin: 8px 0 0; color: var(--muted); }