/* =====================================================================================================================
   AIRadar Akademi ux (2026-10-01): the portal's brand (Plus Jakarta Sans, the #1E6FF2 blue family, the radii and soft
   shadows of /ogrenme and /program), real pages instead of dialogs (lesson page, plan, exam intro), one question card
   with an explanation block, sticky run bar, focus rings, and phone-first layouts. Loaded after style.css / panels.css.
   ===================================================================================================================== */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/plus-jakarta-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/plus-jakarta-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --b-50: #eaf2ff; --b-100: #d6e6ff; --b-200: #b3d0ff; --b-500: #1e6ff2; --b-600: #1759d1; --b-700: #1347a8; --navy: #0b1f3a; --teal: #0f7c8c;
  --acc: var(--b-500); --acc-d: var(--b-600); --acc-l: var(--b-50); --ak-acc: var(--b-500); --ak-acc-d: var(--b-700); --ak-acc-l: var(--b-50);
  --ak-grad: linear-gradient(125deg, #0b1f3a 0%, #1347a8 48%, #1e6ff2 100%);
  --ak-bg: #f5f7fb; --ak-line: #e2e8f0; --ak-r: 20px; --ak-r-s: 12px; --r: 16px;
  --ak-sh: 0 1px 2px rgba(11, 31, 58, .05), 0 8px 24px rgba(11, 31, 58, .06);
  --ak-sh-h: 0 2px 6px rgba(11, 31, 58, .07), 0 16px 36px rgba(11, 31, 58, .11);
  --focus: 0 0 0 3px #fff, 0 0 0 5px var(--b-500);
  --muted: #5b6b80; --ak-muted: #5b6b80;          /* AA on white and on the page background */
}
.h0 { --hue: #1759d1; --hue-l: #eaf2ff; } .h5 { --hue: #0f7c8c; --hue-l: #e6f4f6; }
body { font-family: "Plus Jakarta Sans", system-ui, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; background: var(--ak-bg); }
body.noscroll { overflow: hidden; }
:focus-visible { outline: 2px solid var(--b-500); outline-offset: 2px; border-radius: 8px; }
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--b-500); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(30, 111, 242, .18); }
.h2 { font-size: 20px; } .h3 { font-size: 16px; margin: 0 0 10px; }
a.btn, a.crumb, a.tile, a.subj { text-decoration: none; color: inherit; }
a.btn.primary { color: #fff; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 10px; }
button.primary, .btn.primary { background: var(--b-500); border-color: var(--b-500); }
button.primary:hover:not(:disabled), .btn.primary:hover { background: var(--b-600); border-color: var(--b-600); }
button.danger { background: #b91c1c; border-color: #b91c1c; }
.cta { background: linear-gradient(135deg, var(--b-500), var(--b-600)); box-shadow: 0 8px 20px rgba(30, 111, 242, .28); }
.cta:hover { box-shadow: 0 10px 26px rgba(30, 111, 242, .38); }
.cta:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.row.end { justify-content: flex-end; }

/* ---- top bar: one compact row on desktop; on a phone the brand and account share a row and the modules scroll in a strip */
.top { gap: 10px 16px; }
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button.on { color: var(--b-700); }
.who { display: inline-flex; gap: 6px; align-items: center; } .who-n { font-weight: 700; color: var(--ak-ink2); } .who-p { color: var(--muted); } .who-p::before { content: "· "; }
@media (max-width: 1100px) {
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 16px 8px; }
  .tabs { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; border-radius: 14px; }
  .tabs button { scroll-snap-align: start; flex: none; }
  .top-r { justify-self: end; }
}
@media (max-width: 720px) {
  .top { position: static; }
  .who-p, .who .code { display: none; }
  .who-n { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .disclaimer summary { padding: 6px 16px; } .disclaimer p { padding: 0 16px 8px; }
  .wrap { padding: 16px 16px 40px; }
  h1 { font-size: 25px; }
}

/* ---- dialogs (confirmations and small forms only) */
.modal { background: rgba(11, 31, 58, .45); }
.modal .box { position: relative; border-radius: 22px; padding: 24px 24px 20px; box-shadow: 0 30px 80px rgba(11, 31, 58, .32); width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.modal .box h2 { margin: 0 32px 8px 0; font-size: 20px; }
.modal .box:focus { outline: none; }
.mx { position: absolute; top: 12px; inset-inline-end: 12px; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0; background: #f1f5f9; color: var(--ak-ink2); font-size: 22px; line-height: 1; }
.mx:hover:not(:disabled) { background: #e2e8f0; }
.mx-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--b-50); color: var(--b-600); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .mx-ic svg { width: 22px; height: 22px; }
@media (max-width: 560px) { .modal { align-items: flex-end; padding: 0; } .modal .box { border-radius: 22px 22px 0 0; width: 100%; max-height: 88vh; } .modal .row.end > * { flex: 1; } }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 14px; box-shadow: 0 12px 30px rgba(11, 31, 58, .3); font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 40; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---- crumbs, page headers, empty states */
.crumb { text-decoration: none; }
.page-h { margin: 4px 0 18px; } .page-h .lead { max-width: 70ch; }
.empty-state { max-width: 520px; margin: 32px auto; text-align: center; background: #fff; border: 1px solid var(--ak-line); border-radius: var(--ak-r); padding: 28px 22px; box-shadow: var(--ak-sh); }
.empty-state > svg { width: 44px; height: 44px; color: var(--b-500); background: var(--b-50); border-radius: 14px; padding: 10px; }
.lx-empty { color: var(--muted); font-size: 14px; margin: 0; padding: 14px; border: 1.5px dashed var(--ak-line); border-radius: 14px; text-align: center; }

/* ---- home: subjects are links to their lesson pages */
.subj { color: var(--ak-ink); }
.subj-go { white-space: nowrap; }

/* ---- the lesson page */
.lx-head { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; color: #fff; border-radius: 24px; padding: 26px 28px;
  background: linear-gradient(125deg, var(--navy) 0%, color-mix(in srgb, var(--hue, var(--b-500)) 85%, #000) 60%, var(--hue, var(--b-500)) 100%); box-shadow: 0 16px 36px rgba(11, 31, 58, .18); }
.lx-head::after { content: ""; position: absolute; width: 320px; height: 320px; right: -110px; top: -150px; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; }
.lx-head h1 { color: #fff; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.6px; margin: 0 0 8px; }
.lx-kicker { margin: 0 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; opacity: .85; }
.res-head .lx-kicker, .pg-intro .lx-kicker { color: var(--b-600); opacity: 1; }
.lx-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.lx-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 13.5px; font-weight: 700; }
.lx-meta span.due { background: #fff7e6; color: #92400e; }
.lx-meta svg { width: 16px; height: 16px; }
.lx-progress { max-width: 460px; } .lx-pl { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; opacity: .92; }
.ux-meter { display: block; width: 100%; height: 6px; } .ux-meter .bar-bg { fill: #e8edf4; } .ux-meter-fg { fill: var(--b-500); }
.ux-meter.on-dark .bar-bg { fill: rgba(255, 255, 255, .22); } .ux-meter.on-dark .ux-meter-fg { fill: #fff; }
.ux-meter.good .ux-meter-fg { fill: #16a34a; } .ux-meter.low .ux-meter-fg { fill: #f59e0b; }
.lx-pick { display: inline-flex; flex-direction: column; gap: 4px; margin-top: 16px; font-size: 13px; font-weight: 700; }
.lx-pick select { font: inherit; font-size: 15px; font-weight: 600; padding: 9px 12px; border-radius: 12px; border: 0; min-width: 240px; color: var(--ak-ink); }
.lx-mastery { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 20px; padding: 16px 18px; min-width: 190px; }
.lx-mastery .ring-wrap { width: 112px; height: 112px; } .lx-mastery .ring-bg { stroke: rgba(255, 255, 255, .22); } .lx-mastery .ring-fg { stroke: #fff; }
.lx-mastery .ring-txt b { color: #fff; font-size: 24px; }
.lx-mastery p { margin: 0; display: flex; flex-direction: column; } .lx-mastery small { opacity: .85; font-size: 12.5px; }
.lx-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
.lx-setup, .lx-card { background: #fff; border: 1px solid var(--ak-line); border-radius: var(--ak-r); box-shadow: var(--ak-sh); padding: 22px; }
.lx-setup > h2 { margin: 0 0 14px; font-size: 20px; }
.lx-side { display: grid; gap: 16px; }
.lx-field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; border: 0; padding: 0; }
.lx-l { font-size: 13px; font-weight: 800; color: var(--ak-ink2); letter-spacing: .2px; }
.lx-row2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
.lx-field select { font: inherit; font-size: 15px; padding: 11px 12px; border: 1.5px solid var(--ak-line); border-radius: 12px; background: #fff; color: var(--ak-ink); min-height: 46px; }
.lx-field select:disabled { opacity: .5; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--ak-line); background: #fff; color: var(--ak-ink2); font-size: 14px; font-weight: 700; cursor: pointer; }
.chip em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--muted); background: #f1f5f9; border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.chip[data-zero] { color: var(--muted); } .chip[data-zero] em { opacity: .7; }
.chip:hover:not(:disabled) { border-color: var(--b-200); background: #f8fbff; }
.chip[aria-checked="true"] { border-color: var(--b-500); background: var(--b-50); color: var(--b-700); }
.chip[aria-checked="true"] em { background: var(--b-500); color: #fff; }
.chip:disabled { opacity: .45; }
.chips.static li { background: var(--b-50); color: var(--b-700); }
.lx-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lx-mode { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: start; padding: 14px 14px 14px; border-radius: 16px; border: 1.5px solid var(--ak-line); background: #fff; min-height: 128px; }
.lx-mode .ic { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--b-50); color: var(--b-600); margin-bottom: 4px; } .lx-mode .ic svg { width: 19px; height: 19px; }
.lx-mode b { font-size: 15.5px; } .lx-mode small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.lx-mode[aria-checked="true"] { border-color: var(--b-500); background: linear-gradient(180deg, #f5f9ff, #fff); box-shadow: 0 0 0 3px rgba(30, 111, 242, .12); }
.lx-mode[aria-checked="true"] .ic { background: var(--b-500); color: #fff; }
.lx-mode[aria-checked="true"]::after { content: ""; position: absolute; top: 12px; inset-inline-end: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--b-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.1 8.4 18.7 7z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.lx-mode[aria-disabled="true"] { background: #f8fafc; cursor: not-allowed; } .lx-mode[aria-disabled="true"] .ic { background: #eef2f7; color: #94a3b8; }
.lx-lock { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 6px; font-size: 11.5px; font-weight: 700; color: #92400e; } .lx-lock svg { width: 12px; height: 12px; }
.lx-go { border-top: 1px solid var(--ak-line); margin-top: 4px; padding-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cta.big { min-width: 240px; justify-content: center; padding: 16px 30px; font-size: 18px; border-radius: 16px; }
.lx-sum { margin: 2px 0 0; color: var(--ak-ink2); font-weight: 600; font-size: 14px; }
.lx-recent, .lx-topics { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lx-recent li { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #f8fafc; }
.lx-rd { display: flex; flex-direction: column; min-width: 0; } .lx-rd b { font-size: 14px; } .lx-rd small { color: var(--muted); font-size: 12px; }
.lx-rs { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ak-ink2); white-space: nowrap; }
.lx-topic { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; text-align: start; padding: 9px 12px; border-radius: 12px; border: 1.5px solid transparent; background: #f8fafc; font-size: 14px; }
.lx-topic span { font-weight: 600; } .lx-topic small { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 700; } .lx-topic .ux-meter { grid-column: 1 / -1; height: 4px; }
.lx-topic:hover:not(:disabled) { border-color: var(--b-200); background: #fff; }
.lx-topic[aria-pressed="true"] { border-color: var(--b-500); background: var(--b-50); }
@media (max-width: 900px) { .lx-cols { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .lx-head { grid-template-columns: 1fr; padding: 20px 18px; border-radius: 20px; gap: 14px; }
  .lx-mastery { flex-direction: row; text-align: start; min-width: 0; padding: 12px 14px; gap: 14px; justify-content: flex-start; }
  .lx-mastery .ring-wrap { width: 72px; height: 72px; flex: none; } .lx-mastery .ring-txt b { font-size: 17px; }
  .lx-setup, .lx-card { padding: 18px 16px; }
  .lx-row2 { grid-template-columns: 1fr; gap: 0; }
  .lx-modes { grid-template-columns: 1fr; } .lx-mode { min-height: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding-inline-end: 40px; }
  .lx-mode .ic { grid-row: 1 / 4; margin: 0; } .lx-lock { margin-top: 0; }
  .lx-go { align-items: stretch; } .cta.big { width: 100%; }
  .lx-pick select { min-width: 0; width: 100%; } .lx-pick { display: flex; }
}

/* ---- the question screen */
.runner { max-width: 860px; padding-bottom: 8px; }
.rbar { position: sticky; top: var(--hdr-h, 0px); z-index: 4; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
  border: 1px solid var(--ak-line); border-radius: 18px; padding: 10px 14px 12px; box-shadow: var(--ak-sh); margin-bottom: 14px; }
.rbar-x { display: inline-flex; align-items: center; gap: 6px; border: 0; background: #f1f5f9; color: var(--ak-ink2); border-radius: 12px; padding: 8px 12px; font-weight: 700; font-size: 14px; text-decoration: none; min-height: 40px; }
.rbar-x svg { width: 18px; height: 18px; } .rbar-x:hover:not(:disabled) { background: #e2e8f0; }
.rbar-t { display: flex; flex-direction: column; min-width: 0; } .rbar-t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rbar-t span { font-size: 12.5px; color: var(--muted); }
.rbar-r { display: flex; gap: 10px; align-items: center; }
.rbar-p { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.rbar-p .ux-meter { height: 8px; } .ux-meter.run .ux-meter-fg { fill: var(--b-500); }
.sheet .rbar-p { grid-template-columns: auto minmax(0, 1fr); }
.clock { display: inline-flex; align-items: center; gap: 6px; margin: 0; border-radius: 10px; padding: 5px 10px; } .clock svg { width: 16px; height: 16px; color: var(--muted); }
.clock.low { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; } .clock.low svg { color: #b91c1c; }
.tally { margin: 0; }
.qnav-w { margin: 0 0 12px; } .qnav-w summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ak-ink2); padding: 4px 2px; }
.qnav { gap: 6px; } .qnav button, .qnav a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 36px; padding: 0; font-size: 13px; font-weight: 700; border-radius: 10px; border: 1.5px solid var(--ak-line); background: #fff; color: var(--ak-ink2); text-decoration: none; }
.qnav .ans { background: var(--b-50); border-color: var(--b-200); color: var(--b-700); } .qnav .cur { outline: 0; border-color: var(--b-500); box-shadow: 0 0 0 2px var(--b-500) inset; } .qnav .flg { border-color: #f59e0b; }
.qcard { border-radius: 22px; padding: 22px 24px; }
.qmeta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.qno { font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--b-600); margin-inline-end: 4px; }
.qno:focus { outline: none; }
.runner .stem { font-size: 18px; line-height: 1.7; margin: 0 0 18px; color: var(--ak-ink); }
.opts { gap: 10px; }
.opt { position: relative; align-items: center; min-height: 56px; padding: 12px 16px 12px 12px; border-radius: 16px; border: 1.5px solid var(--ak-line); font-size: 16px; transition: border-color .12s, background .12s, box-shadow .12s; }
.opt > b { min-width: 34px; height: 34px; border-radius: 11px; background: #f1f5f9; color: var(--ak-ink2); font-size: 15px; font-weight: 800; }
.opt > span { flex: 1; }
.opt kbd { font: 700 11px/1 ui-monospace, monospace; color: #94a3b8; border: 1px solid #e2e8f0; border-radius: 6px; padding: 3px 6px; background: #fff; }
.opt-ic { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; color: #fff; flex: none; } .opt-ic svg { width: 16px; height: 16px; }
.opt-ic.ok { background: #16a34a; } .opt-ic.no { background: #dc2626; }
.opt.key kbd, .opt.bad kbd, button.opt:disabled kbd { display: none; }
button.opt:not(:disabled):hover, label.opt:hover { border-color: var(--b-500); background: #f8fbff; box-shadow: 0 0 0 3px rgba(30, 111, 242, .10); }
button.opt:not(:disabled):hover > b, label.opt:hover > b { background: var(--b-50); color: var(--b-700); }
.opt.sel, button.opt[aria-pressed="true"] { border-color: var(--b-500); background: var(--b-50); } .opt.sel > b, button.opt[aria-pressed="true"] > b { background: var(--b-500); color: #fff; }
.opt.key { border-color: #86efac; background: #f0fdf4; } .opt.key > b { background: #16a34a; color: #fff; }
.opt.bad { border-color: #fca5a5; background: #fef2f2; } .opt.bad > b { background: #dc2626; color: #fff; }
button.opt:disabled:not(.key):not(.bad) { opacity: .62; }
/* radios inside large labels (programme and in-service exams): the radio is kept for keyboards and screen readers */
label.opt { cursor: pointer; }
label.opt input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
label.opt:has(input:checked) { border-color: var(--b-500); background: var(--b-50); } label.opt:has(input:checked) > b { background: var(--b-500); color: #fff; }
label.opt:has(input:focus-visible) { outline: 2px solid var(--b-500); outline-offset: 2px; }
.opts > li { list-style: none; }
div.opts { display: grid; }
.fb { border-radius: 16px; padding: 14px 16px; margin: 18px 0 0; }
.fb b { font-size: 16px; }
/* the explanation: the key and why → the teaching note → why the others are wrong → sources */
.ex { margin-top: 14px; display: grid; gap: 12px; }
.ex-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--ak-ink2); }
.ex-h svg { width: 18px; height: 18px; flex: none; }
.ex-key { border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 16px; padding: 14px 16px; } .ex-key .ex-h { color: #15803d; }
.ex-key p { margin: 4px 0; line-height: 1.6; } .ex-opt { font-weight: 700; }
.ex-opt b, .ex-others li > b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; font-size: 13px; font-weight: 800; background: #16a34a; color: #fff; margin-inline-end: 6px; flex: none; }
.ex-note { border: 1px solid var(--b-100); background: #f5f9ff; border-radius: 16px; padding: 14px 16px; } .ex-note .ex-h { color: var(--b-700); } .ex-note p { margin: 4px 0; line-height: 1.6; }
.ex-others { border: 1px solid var(--ak-line); background: #fff; border-radius: 16px; padding: 14px 16px; } .ex-others .ex-h { color: #b91c1c; }
.ex-others ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ex-others li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; }
.ex-others li > b { background: #eef2f7; color: var(--ak-ink2); }
.ex-others li.mine { background: #fef2f2; } .ex-others li.mine > b { background: #dc2626; color: #fff; }
.ex-others li div { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; line-height: 1.55; }
.ex-o { font-weight: 700; color: var(--ak-ink); } .ex-w { color: var(--ak-ink2); }
.ex-you { font-style: normal; font-size: 11.5px; font-weight: 800; color: #b91c1c; background: #fff; border: 1px solid #fca5a5; border-radius: 999px; padding: 1px 8px; margin-inline-start: 4px; }
.ex-src { border: 1px solid var(--ak-line); border-radius: 14px; padding: 10px 14px; background: #f8fafc; }
.ex-src summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; color: var(--ak-ink2); font-size: 14px; } .ex-src summary svg { width: 16px; height: 16px; }
.ex-src ul { margin: 8px 0 0; padding-inline-start: 20px; font-size: 13.5px; color: var(--ak-ink2); }
.ex .links { margin: 0; }
.qfoot { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eef2f7; }
.flagbtn { display: inline-flex; align-items: center; gap: 6px; } .flagbtn svg { width: 18px; height: 18px; } .flagbtn.on { color: #b45309; background: #fff7e6; }
.rnav { align-items: center; margin-top: 4px; }
.rnav button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: 14px; font-weight: 700; } .rnav button svg { width: 18px; height: 18px; }
.rnav .primary { min-width: 200px; font-size: 16px; }
.rnav-a { margin-inline-end: auto; font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.keys { margin-top: 10px; }
.sheet .qcard { scroll-margin-top: calc(var(--hdr-h, 0px) + 120px); }
.q.unsaved { border-color: #fca5a5; }
@media (max-width: 720px) {
  .rbar { top: 0; border-radius: 0 0 16px 16px; margin: -16px -16px 12px; border-width: 0 0 1px; padding: 8px 12px 10px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .rbar-x span { display: none; } .rbar-x { padding: 8px 10px; }
  .rbar-p .rbar-a { display: none; } .sheet .rbar-p .rbar-a { display: inline; } .rbar-p { grid-template-columns: auto minmax(0, 1fr); }
  .qcard { padding: 16px 14px; border-radius: 18px; } .runner .stem { font-size: 16.5px; }
  .opt { padding: 10px 12px 10px 10px; min-height: 54px; font-size: 15.5px; } .opt kbd { display: none; }
  .rnav { position: sticky; bottom: 0; z-index: 3; margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--ak-line); box-shadow: 0 -6px 18px rgba(11, 31, 58, .06); }
  .rnav .primary { flex: 1; min-width: 0; } .rnav #prev span { display: none; } .rnav #prev { padding: 0 14px; }
  .keys { display: none; }
}

/* ---- summaries and results */
.summary { border-radius: 24px; padding: 30px 24px; }
.sum-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 420px; margin: 4px auto 16px; }
.sum-k div { background: #f8fafc; border: 1px solid var(--ak-line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; }
.sum-k b { font-size: 22px; font-variant-numeric: tabular-nums; } .sum-k span { font-size: 12.5px; color: var(--muted); }
.res-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; background: #fff; border: 1px solid var(--ak-line); border-radius: 24px; padding: 22px 26px; box-shadow: var(--ak-sh); }
.res-head h1 { margin: 0 0 10px; } .res-head .ring-wrap { width: 140px; height: 140px; }
.res-head .ring-txt b { font-size: 30px; } .res-head .ring-txt span { font-size: 12px; }
.res-head .kpis { margin-bottom: 6px; }
.res-tbl td a { color: var(--ak-ink); font-weight: 600; text-decoration: none; } .res-tbl td a:hover { color: var(--b-600); text-decoration: underline; }
.tbl-bar { width: 22%; min-width: 90px; }
.res-review { margin-top: 22px; } .res-review > h2 { margin: 0 0 10px; }
.rv-f { margin: 0 0 12px; }
.rv-list { display: grid; gap: 8px; }
.rev { border-radius: 16px; padding: 0; margin: 0; border: 1px solid var(--ak-line); background: #fff; overflow: hidden; }
.rev.good, .rev.bad { border-inline-start-width: 1px; }
.rev > summary { display: grid; grid-template-columns: 30px 26px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px 14px; cursor: pointer; list-style: none; font-size: 14.5px; }
.rev > summary::-webkit-details-marker { display: none; }
.rv-n { font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
.rv-ic { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; background: #eef2f7; color: var(--muted); font-weight: 800; font-size: 13px; }
.rv-ic svg { width: 16px; height: 16px; }
.rev.good .rv-ic { background: #16a34a; color: #fff; } .rev.bad .rv-ic { background: #dc2626; color: #fff; }
.rv-s { min-width: 0; color: var(--ak-ink); line-height: 1.45; } .rv-s small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.rev[open] > summary { border-bottom: 1px solid #eef2f7; background: #fafcff; }
.rv-body { padding: 14px 16px 6px; } .rv-body .stem { font-size: 16px; line-height: 1.65; }
.rv-body .opt { min-height: 0; padding: 9px 12px; }
@media (max-width: 720px) {
  .res-head { grid-template-columns: 1fr; text-align: center; padding: 20px 16px; gap: 10px; } .res-head .ring-wrap { margin: 0 auto; width: 120px; height: 120px; }
  .res-head .kpis.small { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: start; }
  .rev > summary { grid-template-columns: 22px 24px minmax(0, 1fr); gap: 8px; padding: 12px 10px; font-size: 14px; }
}

/* ---- study plan page */
.plan-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.plan-cols .panel { margin-top: 0; padding: 22px; }
.fld { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; font-size: 14px; font-weight: 700; color: var(--ak-ink2); border: 0; padding: 0; }
.fld legend { padding: 0; margin-bottom: 8px; }
.fld input { font: inherit; font-weight: 500; padding: 11px 12px; border: 1.5px solid var(--ak-line); border-radius: 12px; min-height: 46px; color: var(--ak-ink); background: #fff; }
.chip.chk { gap: 6px; } .chip.chk input { accent-color: var(--b-500); width: 16px; height: 16px; margin: 0; }
.chip.chk:has(input:checked) { border-color: var(--b-500); background: var(--b-50); color: var(--b-700); }
.plan-big { font-size: 20px; font-weight: 800; margin: 0 0 4px; color: var(--ak-ink); }
.plan-cur td a { color: var(--ak-ink); font-weight: 600; text-decoration: none; }
@media (max-width: 820px) { .plan-cols { grid-template-columns: 1fr; } }

/* ---- Tıp Programı: exam intro, results */
.pg-intro { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--ak-line); border-radius: 24px; padding: 28px; box-shadow: var(--ak-sh); }
.pg-intro h1 { margin: 2px 0 16px; }
.pg-exam-ic.big { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 12px; } .pg-exam-ic.big svg { width: 26px; height: 26px; }
.pg-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.pg-facts div { background: #f8fafc; border: 1px solid var(--ak-line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; }
.pg-facts b { font-size: 24px; font-variant-numeric: tabular-nums; } .pg-facts span { color: var(--muted); font-size: 13px; }
.pg-rules { margin: 0 0 18px; padding-inline-start: 20px; color: var(--ak-ink2); line-height: 1.6; } .pg-rules li { margin: 6px 0; }
.pg-intro .row { justify-content: flex-end; align-items: center; }
.pg-revise { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pg-revise a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--ak-line); text-decoration: none; color: var(--ak-ink); }
.pg-revise a:hover { border-color: var(--b-200); background: #f8fbff; }
.pg-revise .pg-wn { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--b-50); color: var(--b-700); font-weight: 800; }
.pg-revise small { display: block; color: var(--muted); font-size: 12.5px; } .pg-go { color: var(--b-600); font-weight: 700; font-size: 13px; white-space: nowrap; }
.pg-partial { display: block; border: 1px solid #fde68a; background: #fffbeb; color: #78350f; border-radius: 16px; padding: 14px 16px; line-height: 1.55; }
@media (max-width: 720px) { .pg-intro { padding: 20px 16px; } .pg-intro .row > * { flex: 1; justify-content: center; } }

@media (prefers-reduced-motion: reduce) { .toast { transition: none; } html { scroll-behavior: auto; } }
@media print { .rbar, .rnav, .qnav-w, .skip { display: none !important; } }
.brand span { white-space: nowrap; }
@media (max-width: 380px) { .brand span { font-size: 15px; } }
/* Hizmet İçi forms: long course titles must not push a select wider than the phone */
.hx-field { min-width: 0; max-width: 100%; } .hx-field select, .hx-field input { max-width: 100%; }
@media (max-width: 560px) { .hx-form .hx-field { flex: 1 1 100%; } .hx-field input, .hx-field select { min-width: 0; width: 100%; } }
.qfoot button { white-space: nowrap; }
@media (max-width: 720px) { .scrollx .res-tbl { min-width: 0; } .res-tbl .tbl-bar, .res-tbl th:last-child { display: none; } .res-tbl td, .res-tbl th { padding: 8px 6px; } }

/* TUS ↔ Tıp Programı ↔ Atlas (2026-10-04): the study cycle on the TUS home, "study this topic" in every explanation,
   the lessons of a subject on its page */
.cycle { margin: 18px 0 8px; padding: 18px; border-radius: 20px; background: linear-gradient(135deg, #f5f3ff, #eef6ff); border: 1px solid #e0e7ff; }
.cycle-h h2 { margin: 2px 0 4px; font-size: 20px; letter-spacing: -.2px; }
.cycle-h p.small { margin: 0 0 12px; color: var(--ak-ink2, #334155); }
.cycle-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cycle-steps .cy { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; padding: 12px 14px; border-radius: 16px; background: #fff;
  border: 1px solid var(--ak-line, #e2e8f0); text-decoration: none; color: inherit; box-shadow: 0 6px 16px rgba(11, 31, 58, .05); transition: transform .15s, box-shadow .15s; height: 100%; }
.cycle-steps .cy:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(11, 31, 58, .1); }
.cycle-steps .cy-n { grid-row: 1 / 3; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: #4f46e5; }
.cycle-steps .cy.h0 .cy-n { background: #0f766e; } .cycle-steps .cy.h2 .cy-n { background: #7c3aed; }
.cycle-steps .cy b { font-size: 15px; } .cycle-steps .cy span:last-child { font-size: 13px; color: var(--ak-ink2, #475569); }
@media (max-width: 760px) { .cycle-steps { grid-template-columns: 1fr; } }
.ex-study { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #f5f3ff; border: 1px solid #e4dafb; }
.ex-study ul { margin: 6px 0 0; padding-left: 18px; } .ex-study li { margin: 4px 0; }
.ex-study a { color: #4338ca; text-decoration: none; } .ex-study a:hover { text-decoration: underline; }
.ex-study .ex-atlas { display: inline-block; margin-top: 8px; font-weight: 700; color: #6d28d9; }
.lx-lesson { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.lx-lesson li { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px dashed var(--ak-line, #e2e8f0); }
.lx-lesson .lx-lt { font-weight: 700; font-size: 13px; } .lx-lesson a { font-size: 13px; color: #4338ca; text-decoration: none; }
.lx-courses { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; } .lx-courses .chip { text-decoration: none; font-size: 12px; }

/* Günün TUS sorusu (server/daily.js) */
.dq-tile { display: flex; gap: 12px; align-items: center; margin: 14px 0 0; padding: 12px 16px; border-radius: 16px; background: #fffbeb; border: 1px solid #fde68a; color: inherit; text-decoration: none; }
.dq-tile:hover { box-shadow: 0 10px 24px rgba(180, 83, 9, .12); }
.dq-tile .dq-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #f59e0b; color: #fff; flex: none; }
.dq-tile .dq-ic svg { width: 22px; height: 22px; fill: currentColor; }
.dq-tile b { display: block; } .dq-tile small { color: #92400e; } .dq-tile .dq-go { margin-left: auto; font-weight: 800; color: #b45309; }
.dq-head { margin: 8px 0 12px; } .dq-head h1 { margin: 2px 0 4px; }
.dq-q .opt { position: relative; } .dq-pc { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 800; font-size: 13px; color: #475569; }
.opt.right { border-color: #16a34a !important; background: #f0fdf4 !important; } .opt.wrong { border-color: #dc2626 !important; background: #fef2f2 !important; }
.dq-res { margin-top: 12px; } .dq-crowd { font-weight: 800; font-size: 16px; color: #0f766e; }
.dq-share { margin-top: 12px; gap: 8px; flex-wrap: wrap; }