/* Member library (/my) — the look of the /300 sales page: navy, blue, warm
   yellow, cream; Poppins + IBM Plex Sans Arabic. Light only, phone first, RTL first. */
:root {
  --navy: #1A1D35; --navy-2: #242847; --navy-3: #333963; --navy-ink: #C9CDEB;
  --blue: #0026FF; --blue-hover: #001CC4; --blue-soft: #E9EDFF;
  --yellow: #FFD54A; --yellow-2: #FFC21A; --yellow-soft: #FFF3C4;
  --cream: #FBF6EA; --paper: #FFFDF8;
  --ink: #1A1D35; --muted: #5E637C; --line: #ECE4D2; --line-2: #E2E5F0;
  --ok: #12804A; --ok-soft: #E3F6EC; --err: #B42318; --err-soft: #FDE8E8; --warn-soft: #FFF4DB; --info-soft: #EEF1FF;
  --pill: 999px;
  --shadow-sm: 0 2px 8px rgba(26, 29, 53, .06);
  --shadow: 0 10px 30px rgba(26, 29, 53, .10);
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Poppins', system-ui, -apple-system, Tahoma, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.lib { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-tap-highlight-color: transparent; }
[dir="rtl"] body.lib { font-family: var(--font-ar); font-size: 16.5px; }
body.lib > main { flex: 1; }
img { max-width: 100%; height: auto; }
a { color: var(--blue); }
h1, h2, h3 { margin: 0; line-height: 1.3; text-wrap: balance; }
.ic { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -3px; }
[dir="rtl"] .flip { transform: scaleX(-1); }
[dir="ltr"] .go { transform: scaleX(-1); }
.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.k { display: block; font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8A6200; margin-bottom: 6px; }
[dir="rtl"] .k { font-family: var(--font-ar); letter-spacing: 0; font-size: 13.5px; }
mark { background: var(--yellow); color: var(--navy); padding: 0 .25em; border-radius: 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.muted { color: var(--muted); margin: 0; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.lh :focus-visible, .rbar :focus-visible, .ztools :focus-visible, .dhero :focus-visible, .solo-band :focus-visible, .ah :focus-visible, .lf :focus-visible { outline-color: var(--yellow); }
@media (min-width: 900px) { .auth-side :focus-visible { outline-color: var(--yellow); } }

/* Buttons */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 12px 22px;
  border: 0; border-radius: var(--pill); background: var(--blue); color: #fff; font: inherit; font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 38, 255, .26); transition: transform .12s ease, background .12s ease; touch-action: manipulation; }
.cta:hover { background: var(--blue-hover); }
.cta:active { transform: scale(.98); }
.cta .ic { width: 20px; height: 20px; }
.cta-y { background: var(--yellow); color: var(--navy); box-shadow: 0 10px 24px rgba(255, 194, 26, .38); }
.cta-y:hover { background: var(--yellow-2); }
.cta-y .ic { fill: currentColor; stroke: none; }
.cta-sm { min-height: 46px; font-size: 15px; width: auto; }
.btn-soft { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 18px; border: 0; border-radius: var(--pill);
  background: var(--blue-soft); color: var(--blue); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn-soft:hover { background: #DCE2FF; }
.btn-wa { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: var(--pill); background: #E7F8EE; color: #0B7A3E;
  font-weight: 600; font-size: 15px; text-decoration: none; }

/* Alerts */
.alert { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; margin: 0 0 12px; }
.alert-err { background: var(--err-soft); color: var(--err); font-weight: 600; }
.alert-ok { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.alert-warn { background: var(--warn-soft); }
.alert-info { background: var(--info-soft); }
.choose-pw { justify-content: space-between; flex-wrap: wrap; }
.notes { margin-top: 16px; }

/* Header */
.lh { position: relative; background: var(--navy); color: #fff; border-bottom: 3px solid var(--yellow); z-index: 30; }
.lh-in { max-width: 1040px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
.brandmark { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; direction: ltr; }
.brandmark .tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #fff; }
.brandmark .bn { font-family: var(--font); font-weight: 600; font-size: 16px; }
.brandmark .bn b { background: var(--yellow); color: var(--navy); font-weight: 600; font-size: 11.5px; padding: 1px 7px 2px; border-radius: 7px; margin-inline-start: 3px; }
.lh-end { display: flex; align-items: center; gap: 8px; }
.lng { display: inline-flex; align-items: center; min-height: 40px; color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 600; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--pill); padding: 0 14px; }
.lng:hover { background: rgba(255, 255, 255, .08); }
.me { position: relative; }
.me summary { list-style: none; cursor: pointer; }
.me summary::-webkit-details-marker { display: none; }
.av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); color: var(--navy); font-family: var(--font); font-weight: 700; font-size: 15px; }
.menu { position: absolute; inset-inline-end: 0; top: calc(100% + 10px); min-width: 230px; background: #fff; color: var(--ink); border-radius: 16px; box-shadow: 0 18px 40px rgba(26, 29, 53, .22); padding: 8px; z-index: 40; }
.menu .who { margin: 4px 8px 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.menu .who b { color: var(--ink); font-size: 14.5px; }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: none; color: var(--ink);
  font: inherit; font-size: 14.5px; text-decoration: none; cursor: pointer; text-align: start; }
.menu a:hover, .menu button:hover { background: var(--cream); }
.menu form { margin: 0; }

/* Footer + help */
.lf { background: #12142A; color: #AEB3D6; font-size: 13.5px; margin-top: 40px; }
.lf-in { max-width: 1040px; margin: 0 auto; padding: 22px max(16px, env(safe-area-inset-left, 0px)) calc(84px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: space-between; }
.lf nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.lf a { display: inline-flex; align-items: center; min-height: 40px; color: #D7DAF2; text-decoration: none; }
.lf p { margin: 0; font-size: 12.5px; color: #7E84AA; }
.wa { position: fixed; z-index: 35; inset-inline-start: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--pill); background: #25D366; color: #06331A; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 10px 24px rgba(37, 211, 102, .35); }

/* ── Sign in ─────────────────────────────────────────────────────────── */
.auth { display: flex; flex-direction: column; }
.auth-side { display: contents; }
.ah { order: 1; position: relative; overflow: hidden; color: #fff; text-align: center; padding: 26px 18px 70px;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 213, 74, .22) 0%, rgba(255, 213, 74, 0) 55%), var(--navy); }
.ah .k { color: var(--yellow); }
.ah h1 { font-size: 27px; font-weight: 800; }
[dir="rtl"] .ah h1 { font-weight: 700; }
.ah .lede { color: var(--navy-ink); margin: 8px auto 0; max-width: 30em; font-size: 15.5px; }
.ah-mock { display: block; width: min(78%, 330px); margin: 14px auto 0; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
.auth-card { order: 2; position: relative; margin: -52px 14px 0; padding: 22px 18px 20px; }
.auth-card h2 { font-size: 22px; margin-bottom: 14px; }
.ah-points { order: 3; list-style: none; margin: 22px 16px 0; padding: 0; display: grid; gap: 10px; }
.ah-points li { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow-sm); }
.pi { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--yellow-soft); color: #8A5A00; flex: none; }
.pi .ic { width: 20px; height: 20px; }

/* Forms */
.lib-form > input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--pill); margin-bottom: 16px; }
.seg label { text-align: center; padding: 9px 6px; border-radius: var(--pill); font-size: 14.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
#byPhone:checked ~ .seg label[for=byPhone], #byEmail:checked ~ .seg label[for=byEmail] { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); }
#byPhone:focus-visible ~ .seg label[for=byPhone], #byEmail:focus-visible ~ .seg label[for=byEmail] { outline: 3px solid color-mix(in srgb, var(--blue) 40%, transparent); }
#byPhone:checked ~ .by-email, #byEmail:checked ~ .by-phone { display: none; }
.fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fld label { font-size: 14px; font-weight: 600; }
.in { width: 100%; min-width: 0; height: 52px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-2); border-radius: 14px; }
.in:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); background: #fff; }
.tel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.cc { position: relative; display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 10px 0 12px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--paper);
  font-family: var(--font); font-size: 16px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.cc .ccd { width: 16px; height: 16px; transform: rotate(-90deg); color: var(--muted); }
.cc select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.cc:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); background: #fff; }
.pw { position: relative; }
.pw .in { padding-inline-end: 52px; }
.eye { position: absolute; inset-inline-end: 6px; top: 6px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; }
.eye[aria-pressed="true"] { color: var(--blue); background: var(--blue-soft); }
.lib-form .cta { margin-top: 4px; }
.forgot { margin-top: 18px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.forgot summary { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; color: var(--blue); font-size: 14.5px; font-weight: 600; list-style: none; }
.forgot summary::-webkit-details-marker { display: none; }
.forgot summary::before { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s ease; }
[dir="rtl"] .forgot summary::before { transform: rotate(135deg); }
.forgot[open] summary::before { transform: rotate(45deg); }
.forgot p { font-size: 14px; color: var(--muted); margin: 10px 0 8px; }
.row-form { display: flex; gap: 8px; flex-wrap: wrap; }
.row-form .in { flex: 1 1 200px; height: 46px; }

/* ── Dashboard ───────────────────────────────────────────────────────── */
.dhero { color: #fff; padding: 22px 0 64px;
  background: radial-gradient(90% 120% at 100% 0%, rgba(255, 213, 74, .20) 0%, rgba(255, 213, 74, 0) 50%),
              radial-gradient(70% 90% at 0% 100%, rgba(0, 38, 255, .35) 0%, rgba(0, 38, 255, 0) 60%), var(--navy); }
.crumb { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; color: var(--navy-ink); text-decoration: none; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.dhero .hi { margin: 0 0 6px; color: var(--navy-ink); font-weight: 600; }
.dhero h1 { font-size: 24px; font-weight: 800; }
[dir="rtl"] .dhero h1 { font-weight: 700; }
.dhero .k { color: var(--yellow); }
.dh-row { display: flex; align-items: center; gap: 16px; }
.dh-text { flex: 1; min-width: 0; }
.stats { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stats li { display: flex; flex-direction: column; min-width: 92px; padding: 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.stats b { font-family: var(--font); font-size: 18px; font-weight: 700; color: #fff; line-height: 1.3; }
.stats span { font-size: 12.5px; color: var(--navy-ink); }
.ring { position: relative; flex: none; width: 112px; height: 112px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.r-bg { stroke: rgba(255, 255, 255, .14); }
.r-fg { stroke: var(--yellow); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.r-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.r-txt b { font-family: var(--font); font-size: 24px; font-weight: 800; line-height: 1.1; }
.r-txt span { font-size: 11.5px; color: var(--navy-ink); }

.dbody { margin-top: -44px; position: relative; }
.resume { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; }
.rs-cover .cov, .sc-cover .cov, .cc-cover .cov, .next .cov { display: block; width: 100%; height: auto; aspect-ratio: 300 / 212; object-fit: cover; border-radius: 12px; background: var(--cream); box-shadow: 0 6px 16px rgba(26, 29, 53, .16); }
.rs-body h2 { font-size: 18px; }
.rs-body .muted { font-size: 14px; margin-top: 2px; }
.rs-body .cta { grid-column: 1 / -1; margin-top: 12px; }
.resume.done-all { grid-template-columns: auto 1fr; padding: 18px; }
.okc { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.okc .ic { width: 28px; height: 28px; stroke-width: 2.6; }

.sec-h { display: flex; align-items: baseline; gap: 10px; font-size: 21px; margin: 30px 0 14px; }
.sec-h span { font-size: 14px; font-weight: 600; color: var(--muted); }

/* Course path: numbered nodes on a line */
.path { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 14px; }
.step { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: start; }
.step::before { content: ''; position: absolute; inset-inline-start: 18px; top: 40px; bottom: -16px; width: 2px; background: var(--line-2); }
.step:last-child::before { display: none; }
.step.st-done::before { background: color-mix(in srgb, var(--ok) 45%, var(--line-2)); }
.node { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; margin-top: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2);
  color: var(--muted); font-family: var(--font); font-weight: 700; font-size: 15px; }
.st-done .node { background: var(--ok); border-color: var(--ok); color: #fff; }
.st-done .node .ic { width: 18px; height: 18px; stroke-width: 2.8; }
.st-started .node { border-color: var(--blue); color: var(--blue); }
.cur .node { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue) 18%, transparent); }
.scard { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); }
.cur .scard { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); box-shadow: 0 10px 26px rgba(0, 38, 255, .10); }
.sc-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sc-body h3 { font-size: 15.5px; margin-top: 6px; line-height: 1.4; }
.sc-body h3 a { color: var(--ink); text-decoration: none; }
.sc-body h3 a:hover { color: var(--blue); }
.meta { display: flex; align-items: center; gap: 5px; margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.meta .ic { width: 15px; height: 15px; }
.sc-acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-acts form { margin: 0; }
.btn-read, .btn-dl { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; border-radius: var(--pill); font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn-read { background: var(--blue); color: #fff; border: 0; }
.btn-read:hover { background: var(--blue-hover); }
.btn-dl { background: #fff; color: var(--ink); border: 1.5px solid var(--line-2); font-weight: 600; }
.btn-dl:hover { border-color: var(--navy-3); }
.btn-dl .ic { width: 17px; height: 17px; }
.st-done .btn-read { background: var(--blue-soft); color: var(--blue); }

/* Level chips (the /300 colours) + status */
.lvl { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--pill); font-family: var(--font); font-size: 11.5px; font-weight: 700; direction: ltr; }
.lvl-all { background: var(--yellow-soft); color: #7A5200; }
.lvl-a1 { background: #E3F6EC; color: #12804A; }
.lvl-a2 { background: #DFF5F3; color: #0E7C74; }
.lvl-b1 { background: var(--blue-soft); color: var(--blue); }
.lvl-b2 { background: #F1E8FF; color: #7B3FE4; }
.lvl-c1, .lvl-c2 { background: #FFE9E2; color: #C2410C; }
.st { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--pill); font-size: 12px; font-weight: 600; background: #F1F2F7; color: var(--muted); }
.st-started .st, .st.st-started { background: var(--blue-soft); color: var(--blue); }
.st.st-done { background: var(--ok-soft); color: var(--ok); }

/* Bars */
.bar { height: 8px; background: #EEF0F6; border-radius: var(--pill); overflow: hidden; margin: 10px 0 0; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), #4F6BFF); border-radius: var(--pill); }
[dir="rtl"] .bar > span { margin-inline-start: 0; }
.bar.sm { height: 6px; margin-top: 8px; }
.bar.y > span { background: linear-gradient(90deg, var(--yellow-2), var(--yellow)); }
.st-done .bar > span { background: var(--ok); }

/* Several courses */
.courses { display: grid; gap: 14px; margin-top: 4px; }
.ccard { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 14px; align-items: center; }
.cc-body h2 { font-size: 17px; }
.cc-body h2 a { color: var(--ink); text-decoration: none; }
.cc-body .cta { margin-top: 12px; }

/* ── Password ─────────────────────────────────────────────────────────── */
.solo-band { background: radial-gradient(90% 120% at 100% 0%, rgba(255, 213, 74, .2) 0%, rgba(255, 213, 74, 0) 50%), var(--navy); color: #fff; padding: 20px 0 70px; }
.solo-band h1 { font-size: 24px; }
.solo-card { position: relative; max-width: 480px; margin: -50px auto 0; padding: 20px 18px; }
@media (max-width: 520px) { .solo-card { margin-inline: 14px; } }
.solo-card .muted { margin-bottom: 14px; }

/* ── Reader ──────────────────────────────────────────────────────────── */
body.lib-reader { background: var(--cream); }
.reader { --rbar-h: 58px; }
.rbar { position: sticky; top: 0; z-index: 20; background: var(--navy); color: #fff; box-shadow: 0 6px 20px rgba(26, 29, 53, .18); }
.rbar-in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 10px; min-height: var(--rbar-h);
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px)); }
.rb-back { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 40px; min-height: 40px; color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap; font-size: 14px; }
.rb-title { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-count { font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .12); padding: 3px 10px; border-radius: var(--pill); }
.rb-dl, .prep-dl { margin: 0; }
.rb-print { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--pill); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.rb-print:hover { background: rgba(255, 255, 255, .16); }
.rb-dl button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: var(--pill); background: var(--yellow); color: var(--navy); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.rb-prog .bar { margin: 0; border-radius: 0; height: 4px; background: rgba(255, 255, 255, .12); }
.rb-prog .bar > span { border-radius: 0; }
.rhint { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 12px 12px 0; }
.rhint .ic { width: 16px; height: 16px; }
.pages { max-width: 1100px; margin: 0 auto; padding: 12px 10px 0; display: flex; flex-direction: column; gap: 14px; }
.pg { position: relative; margin: 0; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(26, 29, 53, .10); overflow: hidden; cursor: zoom-in; scroll-margin-top: calc(var(--rbar-h) + 12px); }
.pg img { display: block; width: 100%; height: auto; background: #F4F1E8; }
.pg figcaption { position: absolute; bottom: 8px; inset-inline-end: 10px; font-family: var(--font); font-size: 11.5px; font-weight: 600; color: var(--navy); background: rgba(255, 255, 255, .92); padding: 2px 9px; border-radius: var(--pill); box-shadow: var(--shadow-sm); font-variant-numeric: tabular-nums; }
.pg.seen figcaption::after { content: ' ✓'; color: var(--ok); }
.rend { max-width: 560px; margin: 26px auto 40px; padding: 0 16px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.rend form { margin: 0; }
.fin { padding: 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fin h2 { font-size: 22px; }
.next { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; text-align: start; text-decoration: none; color: var(--ink); }
.next .nx { display: flex; flex-direction: column; min-width: 0; }
.next .nx b { font-size: 15.5px; line-height: 1.4; }
.next .nx .k { margin-bottom: 2px; }
.next .go { color: var(--blue); }
.goto { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 12px; }
.goto label { font-size: 14px; color: var(--muted); font-weight: 600; }
.goto .in { width: 96px; height: 44px; text-align: center; }
.back-link { display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14.5px; padding: 8px; }
.prep { padding-top: 28px; }
.prep .card { max-width: 520px; margin: 0 auto; padding: 26px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.prep h1 { font-size: 20px; }
.prep-dl button { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 20px; border: 0; border-radius: var(--pill); background: var(--blue-soft); color: var(--blue); font: inherit; font-weight: 700; cursor: pointer; }
.spin { width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--blue-soft); border-top-color: var(--blue); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Zoom view */
.zoom { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0D0F1F; color: #fff; }
.zoom::backdrop { background: rgba(0, 0, 0, .85); }
.ztools { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; gap: 6px; align-items: center; padding: 8px max(10px, env(safe-area-inset-left, 0px)); background: rgba(26, 29, 53, .92); border-bottom: 2px solid var(--yellow); }
.ztools button { width: 44px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.ztools button:hover { background: rgba(255, 255, 255, .16); }
.ztools button[data-z="close"] { background: var(--yellow); color: var(--navy); border-color: var(--yellow); font-weight: 700; }
.ztools .zprint { display: grid; place-items: center; }
.ztools .zprint .ic { width: 20px; height: 20px; }
@media (max-width: 430px) { .ztools { gap: 4px; } .ztools button { width: 38px; } }

/* Print / download sheet */
.psheet { width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 24px 60px rgba(13, 15, 31, .35); }
.psheet::backdrop { background: rgba(13, 15, 31, .55); }
.ps-in { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.ps-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ps-head h2 { font-size: 20px; }
.ps-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--cream); color: var(--ink); font-size: 16px; cursor: pointer; }
.ps-note { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); font-size: 14px; font-weight: 600; }
.ps-note .ic { stroke-width: 2.6; }
.ps-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 16px; background: #fff; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
button.ps-opt:hover { border-color: var(--blue); background: var(--blue-soft); }
.ps-opt > .ic { width: 22px; height: 22px; color: var(--blue); flex: none; }
.ps-opt > span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ps-opt b { font-size: 15.5px; }
.ps-opt small { font-size: 13px; color: var(--muted); }
.ps-range { cursor: default; align-items: flex-start; }
.ps-range > .ic { margin-top: 2px; }
.ps-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.ps-fields label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); font-weight: 600; }
.ps-fields .in { width: 78px; height: 44px; text-align: center; padding: 0 6px; }
.ps-dl { margin: 6px 0 0; }
.ptoast { position: fixed; z-index: 60; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); margin: 0; padding: 10px 18px; border-radius: var(--pill); background: var(--navy); color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); white-space: nowrap; }
.ptoast[hidden] { display: none; }
.zcount { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-align: center; font-size: 13px; direction: ltr; color: var(--navy-ink); font-variant-numeric: tabular-nums; }
.zwrap { position: absolute; inset: 58px 0 0 0; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.zsizer { position: relative; margin: 0 auto; }
.zbox { position: absolute; top: 0; left: 0; transform-origin: top left; }
.zbox img { display: block; width: 100%; height: auto; background: #fff; }
.zhint { position: absolute; bottom: 10px; left: 12px; right: 12px; margin: 0; text-align: center; font-size: 12.5px; color: var(--navy-ink); pointer-events: none; display: none; }
.zoom.portrait-landscape .zhint { display: block; }

/* ── Bigger screens ──────────────────────────────────────────────────── */
@media (min-width: 560px) {
  .resume { grid-template-columns: 180px minmax(0, 1fr); padding: 16px; gap: 18px; }
  .rs-body .cta { width: auto; min-width: 260px; }
  .scard { grid-template-columns: 132px minmax(0, 1fr) 170px; align-items: center; }
  .sc-acts { grid-column: auto; grid-template-columns: 1fr; }
  .step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .node { width: 44px; height: 44px; margin-top: 30px; font-size: 16px; }
  .step::before { inset-inline-start: 21px; top: 76px; }
}
@media (min-width: 900px) {
  .auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: calc(100dvh - 60px); }
  .auth-side { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 40px 48px;
    background: radial-gradient(120% 70% at 50% 0%, rgba(255, 213, 74, .22) 0%, rgba(255, 213, 74, 0) 55%), var(--navy); }
  .ah { padding: 0; background: none; text-align: start; }
  .ah h1 { font-size: 36px; }
  .ah .lede { margin-inline: 0; font-size: 17px; }
  .ah-mock { width: 360px; margin: 18px 0 0; }
  .ah-points { margin: 0; }
  .ah-points li { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }
  .ah-points .pi { background: rgba(255, 213, 74, .16); color: var(--yellow); }
  .auth-card { align-self: center; justify-self: center; width: min(440px, calc(100% - 48px)); margin: 40px 0; padding: 30px 28px 26px; }
  .auth-card h2 { font-size: 26px; }
  .dhero { padding: 30px 0 76px; }
  .dhero h1 { font-size: 30px; }
  .ring { width: 150px; height: 150px; }
  .r-txt b { font-size: 32px; }
  .dbody { margin-top: -54px; }
  .courses { grid-template-columns: 1fr 1fr; }
  .rb-title { font-size: 15.5px; }
}
@media (max-width: 559px) {
  .wa { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wa .ic { width: 24px; height: 24px; }
  .rb-back span, .rb-dl span, .rb-print span { display: none; }
  .rb-dl button, .rb-print { width: 40px; padding: 0; justify-content: center; }
  .rbar-in { gap: 6px; }
  .dh-row { align-items: flex-start; }
  .ring { width: 96px; height: 96px; }
  .r-txt b { font-size: 21px; }
  .r-txt span { font-size: 10.5px; }
  .stats li { min-width: 0; flex: 1 1 0; padding: 7px 10px; }
  .stats b { font-size: 16px; }
  .stats span { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .rbar, .rhint, .rend, .zoom, .psheet, .ptoast, .wa, .lh, .lf { display: none !important; } .pg { box-shadow: none; break-inside: avoid; } }
.ptoast-err { background: var(--err) !important; }
.ptoast a { color: var(--yellow); font-weight: 700; }
.ps-max { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); font-weight: 400; }