/* Layout: exercise list beside a work column (question, editor, console + feedback). Book palette: navy, teal, blue. */
:root {
  --brand: #1f4e79; --brand2: #24609a; --on-brand: #ffffff;
  --blue: #1f4e79; --teal: #0f766e; --teal-ink: #0f766e; --accent: #2e75b6;
  --ink: #1d2433; --muted: #5b6b82; --line: #d8e1ec; --line2: #c9d6e6;
  --bg: #f3f6fa; --card: #ffffff; --soft: #eef4fa; --soft2: #f6f8fb;
  --ok: #15803d; --okbg: #e9f7ee; --bad: #b42318; --badbg: #fdeceb; --badline: #f1b8b3; --warn: #9a6700; --warnbg: #fff6dd;
  --errbg: #fffafa; --qbg: #fffdf5; --infobg: #f7fbff; --fixink: #12355b; --star: #e0a100;
  --lineerr: #fdeceb; --linehint: #fff6dd;
  --kw: #1f4e79; --str: #0f766e; --cmt: #7a8699; --num: #a14a00; --type: #6b3fa0;
  --con: #1f2937; --conink: #e5edf7;
  --ar: 'Noto Naskh Arabic', 'Cairo', Tahoma, sans-serif;
  --hd: 'Cairo', 'Noto Naskh Arabic', Tahoma, sans-serif;
  --mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #173c5e; --brand2: #1d4b75; --on-brand: #eef4fa;
    --blue: #9cc3ee; --teal: #0f766e; --teal-ink: #5eead4; --accent: #6aa8e3;
    --ink: #e3e9f2; --muted: #9aa8bc; --line: #2c3a4d; --line2: #3a4b62;
    --bg: #111821; --card: #18212d; --soft: #213044; --soft2: #1c2734;
    --ok: #4ade80; --okbg: #12301f; --bad: #f87171; --badbg: #3a1c1c; --badline: #6b2b2b; --warn: #fbbf24; --warnbg: #352a10;
    --errbg: #241a1d; --qbg: #241f13; --infobg: #172433; --fixink: #cfe0f5; --star: #fbbf24;
    --lineerr: #3a1f22; --linehint: #352c12;
    --kw: #8fc1f5; --str: #5eead4; --cmt: #8492a6; --num: #f0a868; --type: #c4a5f0;
    --con: #0b1118; --conink: #e5edf7;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand: #173c5e; --brand2: #1d4b75; --on-brand: #eef4fa;
  --blue: #9cc3ee; --teal: #0f766e; --teal-ink: #5eead4; --accent: #6aa8e3;
  --ink: #e3e9f2; --muted: #9aa8bc; --line: #2c3a4d; --line2: #3a4b62;
  --bg: #111821; --card: #18212d; --soft: #213044; --soft2: #1c2734;
  --ok: #4ade80; --okbg: #12301f; --bad: #f87171; --badbg: #3a1c1c; --badline: #6b2b2b; --warn: #fbbf24; --warnbg: #352a10;
  --errbg: #241a1d; --qbg: #241f13; --infobg: #172433; --fixink: #cfe0f5; --star: #fbbf24;
  --lineerr: #3a1f22; --linehint: #352c12;
  --kw: #8fc1f5; --str: #5eead4; --cmt: #8492a6; --num: #f0a868; --type: #c4a5f0;
  --con: #0b1118; --conink: #e5edf7;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--ar); font-size: 16px; line-height: 1.7; }
code, pre, .console, textarea, input { font-variant-ligatures: none; }
code { font-family: var(--mono); font-size: .86em; background: var(--soft); padding: 0 .3em; border-radius: 4px; direction: ltr; unicode-bidi: isolate; }
button { font-family: var(--hd); cursor: pointer; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px));
  background: linear-gradient(90deg, var(--brand), var(--brand2)); color: var(--on-brand); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,.14); display: grid; place-items: center;
  font-family: var(--mono); font-weight: 600; font-size: 18px; direction: ltr; }
.top h1 { font-family: var(--hd); font-size: 21px; margin: 0; line-height: 1.3; }
.top .sub { font-size: 13px; opacity: .85; }
.status { display: flex; align-items: center; gap: 8px; font-family: var(--hd); font-size: 13.5px; background: rgba(255,255,255,.12);
  padding: 5px 12px; border-radius: 999px; }
.status .dot { width: 9px; height: 9px; border-radius: 50%; background: #fbbf24; }
.status.ready .dot { background: #4ade80; }
.status.busy .dot { background: #60a5fa; animation: pulse 1s infinite; }
.status.wait .dot { background: #fbbf24; animation: pulse 1s infinite; }
.status.loading .dot { animation: pulse 1.2s infinite; }
.status.fail .dot { background: #f87171; }
@keyframes pulse { 50% { opacity: .35; } }

/* layout */
.layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; padding-block: 16px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); max-width: 1500px; margin: 0 auto; }
.side { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; align-self: start; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.side-h { font-family: var(--hd); font-weight: 800; color: var(--blue); margin-bottom: 6px; }
.exlist { list-style: none; margin: 0; padding: 0; }
.exlist li.item { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; cursor: pointer; font-family: var(--hd); font-size: 14px; line-height: 1.45; }
.exlist li.item:hover { background: var(--soft); }
.exlist .nm { min-width: 0; }
.exlist .grp { margin-top: 4px; }
.exlist summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 4px; font-family: var(--hd); font-weight: 700; font-size: 13.5px; color: var(--blue); border-top: 1px solid var(--line); list-style: none; }
.exlist summary::-webkit-details-marker { display: none; }
.exlist summary::before { content: '‹'; display: inline-block; width: 10px; transition: transform .15s; color: var(--muted); }
.exlist details[open] > summary::before { transform: rotate(-90deg); }
.exlist .gt { flex: 1; min-width: 0; }
.exlist .gp { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--soft); border-radius: 999px; padding: 0 8px; font-variant-numeric: tabular-nums; direction: ltr; }
.exlist .gp.full { color: var(--ok); background: var(--okbg); }
.exlist ul.sub { list-style: none; margin: 0 0 4px; padding: 0; }
.ex-total { font-family: var(--hd); font-size: 12.5px; color: var(--muted); margin: -2px 0 6px; }
.exlist li.on { background: var(--brand); color: var(--on-brand); }
.exlist .mark { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 11px; flex: none; }
.exlist li.solved .mark { background: #15803d; border-color: #15803d; color: #ffffff; }
.exlist li.on .mark { border-color: rgba(255,255,255,.6); }
.exlist .st { margin-inline-start: auto; color: var(--star); font-size: 11px; letter-spacing: 1px; }
.exlist li.on .st { color: #ffd76a; }
.side-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }

.main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }

/* question */
.qcard { padding: 14px 18px; border-inline-start: 5px solid var(--accent); }
.qhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.qhead h2 { font-family: var(--hd); margin: 0; font-size: 20px; color: var(--blue); }
.qmeta { display: flex; gap: 8px; align-items: center; }
.tag { font-family: var(--hd); font-size: 12.5px; background: var(--soft); color: var(--blue); border: 1px solid var(--line2); border-radius: 6px; padding: 0 8px; }
.tag:empty { display: none; }
.stars { color: var(--star); letter-spacing: 2px; }
.qtext p { margin: 6px 0; }
.qtext .sig { background: var(--soft); border-radius: 8px; padding: 6px 10px; }
.ex-io { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.ex-io > div { flex: 1 1 160px; }
.ex-io span { font-family: var(--hd); font-size: 13px; color: var(--muted); }
.ex-io pre { margin: 2px 0 0; background: var(--con); color: var(--conink); font-family: var(--mono); font-size: 13.5px; padding: 8px 12px; border-radius: 8px; direction: ltr; text-align: left; }

/* toolbar */
.toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.btn { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 8px; padding: 6px 14px; font-size: 14.5px; font-weight: 700; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.ok { background: var(--teal); border-color: var(--teal); color: #ffffff; }
.btn.danger { color: var(--bad); border-color: var(--badline); }
.btn.ghost { color: var(--muted); font-weight: 500; font-size: 13.5px; }
.btn.ghost.confirm { color: var(--bad); border-color: var(--bad); }
.sep { width: 1px; height: 26px; background: var(--line); }
.grow { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--card); padding: 6px 12px; font-size: 13.5px; color: var(--muted); }
.seg button.on { background: var(--soft); color: var(--blue); font-weight: 700; }
.chk { font-family: var(--hd); font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; cursor: pointer; }

/* editor */
.editor-wrap { direction: ltr; }
.CodeMirror { height: 380px; font-family: var(--mono); font-variant-ligatures: none; font-size: 14.5px; line-height: 1.55; border-radius: 0 0 12px 12px; }
.CodeMirror-gutters { background: var(--soft2); border-right: 1px solid var(--line); }
.cm-s-default .cm-keyword { color: var(--kw); font-weight: 600; }
.cm-s-default .cm-string { color: var(--str); }
.cm-s-default .cm-comment { color: var(--cmt); font-style: italic; }
.cm-s-default .cm-number { color: var(--num); }
.cm-s-default .cm-type, .cm-s-default .cm-variable-3 { color: var(--type); }
.line-err { background: var(--lineerr); }
.line-hint { background: var(--linehint); }
.gut-err { color: var(--bad); font-size: 12px; padding-left: 3px; }
textarea#code { width: 100%; height: 380px; font-family: var(--mono); font-size: 14.5px; border: 0; padding: 10px; direction: ltr; }

/* io */
.io { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.pane-h { display: flex; align-items: center; justify-content: space-between; font-family: var(--hd); font-weight: 700; font-size: 14px; color: var(--blue); padding: 8px 12px 4px; }
.mini { border: 1px solid var(--line); background: var(--card); border-radius: 6px; font-size: 12.5px; padding: 2px 10px; color: var(--muted); }
.mini.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.concard { display: flex; flex-direction: column; overflow: hidden; }
.console { flex: 1; min-height: 260px; max-height: 460px; overflow: auto; background: var(--con); color: var(--conink); font-family: var(--mono);
  font-size: 14px; line-height: 1.55; padding: 10px 14px; margin: 4px 10px 10px; border-radius: 8px; white-space: pre-wrap; word-break: break-word; text-align: left; }
.console .e { color: #fca5a5; }
.console .in { color: #5eead4; font-weight: 600; }
.console .sys { color: #93a4bd; font-style: italic; font-family: var(--hd); direction: rtl; unicode-bidi: isolate; display: block; text-align: right; }
.inrow { display: flex; gap: 6px; align-items: center; padding: 0 10px 10px; flex-wrap: wrap; }
.inlabel { font-family: var(--hd); font-size: 13px; color: var(--warn); }
.inrow input { flex: 1; min-width: 120px; font-family: var(--mono); font-size: 14px; border: 2px solid var(--teal); border-radius: 6px; padding: 4px 8px; }
.sidecard { padding-bottom: 10px; min-width: 0; }
.box-pre textarea { display: block; width: calc(100% - 20px); margin: 2px 10px 6px; font-family: var(--mono); font-size: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; resize: vertical; }

/* feedback */
.feedback { padding: 2px 10px; display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow: auto; }
.feedback .empty { color: var(--muted); font-size: 14px; padding: 6px 2px; }
.fb { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; border-inline-start-width: 5px; font-size: 15px; }
.fb h4 { margin: 0 0 2px; font-family: var(--hd); font-size: 15px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb p { margin: 3px 0; }
.fb.err { border-inline-start-color: var(--bad); background: var(--errbg); }
.fb.err h4 { color: var(--bad); }
.fb.q { border-inline-start-color: var(--star); background: var(--qbg); }
.fb.q h4 { color: var(--warn); }
.fb.ok { border-inline-start-color: var(--ok); background: var(--okbg); }
.fb.ok h4 { color: var(--ok); }
.fb.info { border-inline-start-color: var(--accent); background: var(--infobg); }
.fb .ln { font-family: var(--mono); font-size: 12px; background: var(--card); border: 1px solid currentColor; border-radius: 5px; padding: 0 6px; cursor: pointer; }
.fb .fix { color: var(--fixink); }
.fb .fix::before { content: 'تلميح: '; font-family: var(--hd); font-weight: 700; color: var(--teal-ink); }
.fb .raw { font-family: var(--mono); font-size: 12px; color: var(--muted); direction: ltr; text-align: left; white-space: pre-wrap; margin-top: 4px; border-top: 1px dashed var(--line); padding-top: 4px; }
.fb details summary { cursor: pointer; font-family: var(--hd); font-size: 13.5px; color: var(--teal-ink); }
.sec-h { font-family: var(--hd); font-weight: 800; font-size: 14px; color: var(--muted); margin-top: 4px; }
table.res { width: 100%; border-collapse: collapse; font-size: 14px; }
table.res th, table.res td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: right; vertical-align: top; }
table.res th { font-family: var(--hd); font-size: 13px; color: var(--muted); font-weight: 700; }
table.res td.m { font-family: var(--mono); font-size: 13px; direction: ltr; text-align: left; white-space: pre-wrap; }
table.res .p { color: var(--ok); font-weight: 700; }
table.res .f { color: var(--bad); font-weight: 700; }
.score { font-family: var(--hd); font-weight: 800; }
.bar { height: 8px; background: var(--badbg); border-radius: 99px; overflow: hidden; margin: 4px 0 2px; }
.bar > i { display: block; height: 100%; background: var(--ok); }
.cmp { font-family: var(--mono); font-size: 13px; direction: ltr; text-align: left; }
.cmp div { padding: 1px 6px; border-radius: 4px; }
.cmp .p { background: var(--okbg); }
.cmp .f { background: var(--badbg); }

/* footer */
.foot { text-align: center; color: var(--muted); font-size: 13px; padding-block: 10px 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); max-width: 980px; margin: 0 auto; }
.foot .disc { font-size: 12px; margin-top: 2px; }
.foot .credit { font-size: 12px; margin-top: 2px; }
.foot a { color: var(--accent); }

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; padding-block: 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .side { position: static; }
  .side { max-height: none; }
  .side-note { display: none; }
  .io { grid-template-columns: 1fr; }
  .CodeMirror, textarea#code { height: 320px; }
}
@media (max-width: 560px) {
  .top { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .sep { display: none; }
  .btn { padding: 6px 10px; }
}

/* CodeMirror turns ligatures on; students must see >= and == as typed */
.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like { -webkit-font-variant-ligatures: none; font-variant-ligatures: none; }
/* Arabic inside comments/strings: keep it as an isolated run so // stays on the left */
.cm-ar { unicode-bidi: isolate; direction: rtl; }

/* CodeMirror colors follow the theme */
.CodeMirror { background: var(--card); color: var(--ink); }
.CodeMirror-linenumber { color: var(--muted); }
.CodeMirror-cursor { border-left-color: var(--ink); }
div.CodeMirror-selected, .CodeMirror-focused div.CodeMirror-selected { background: var(--soft); }
.cm-s-default .cm-variable, .cm-s-default .cm-def, .cm-s-default .cm-property, .cm-s-default .cm-operator { color: var(--ink); }
.cm-s-default .cm-atom { color: var(--num); }
.CodeMirror-matchingbracket { color: var(--ok) !important; }
textarea#code { background: var(--card); color: var(--ink); }
.box-pre textarea, .inrow input { background: var(--card); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .status .dot { animation: none !important; } .exlist summary::before { transition: none; } }
.qcard .res { width: auto; min-width: 60%; margin: 6px 0; }
.qcard .res td.m { direction: ltr; text-align: right; }

.ex-toggle { display: none; }
@media (max-width: 980px) {
  .ex-toggle { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--ink); font-size: 14.5px; padding: 2px 0; text-align: start; }
  .ex-toggle span:first-child { font-weight: 800; color: var(--blue); }
  .ex-toggle .cur { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ex-toggle .chev { transition: transform .15s; color: var(--muted); }
  .side:not(.collapsed) .ex-toggle .chev { transform: rotate(180deg); }
  .side .side-h { display: none; }
  .side.collapsed .exlist, .side.collapsed .ex-total { display: none; }
  .side.collapsed { padding-block: 10px; }
}

/* رابط العودة إلى الموقع */
.top .home { color: var(--on-brand); text-decoration: none; font-family: var(--hd); font-size: 13.5px; opacity: .9; margin-inline-start: auto; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); }
.top .home:hover { background: rgba(255,255,255,.12); }