.signed-out .main-area,
.setup-only .main-area { margin-left: 0; }

.setup-shell { width: min(100%, 720px); margin: 2vh auto 0; text-align: center; }
.setup-shell .login-logo { margin: auto; }
.setup-shell > p:not(.eyebrow) { max-width: 600px; margin: 8px auto 22px; color: var(--muted); }
.setup-form { margin-top: 20px; text-align: left; }
.setup-form .primary-btn { width: 100%; }
.setup-progress { display: flex; justify-content: center; gap: 8px; margin: 17px 0 8px; }
.setup-progress i { display: block; width: 54px; height: 6px; border-radius: 99px; background: #dce4f0; }
.setup-progress i.active { background: var(--primary); }
.formula-preview { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 8px 0 19px; }
.formula-preview div { display: flex; flex-direction: column; align-items: center; padding: 13px; border-radius: 13px; background: var(--primary-soft); text-align: center; }
.formula-preview strong { color: var(--primary-strong); font-size: 21px; }
.formula-preview small { color: var(--muted); }

.follow-page { width: min(100%, 980px); margin: auto; }
.follow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.follow-head h1 { margin-bottom: 7px; }
.follow-head p:last-child { margin: 0; color: var(--muted); }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #bfd4f7; border-radius: 999px; background: #f0f6ff; color: var(--primary-strong); font-size: 13px; font-weight: 690; white-space: nowrap; }
.live-pill i { width: 8px; height: 8px; border-radius: 50%; background: #23a775; box-shadow: 0 0 0 4px rgba(35, 167, 117, .13); }
.follow-reading { display: flex; min-height: 310px; flex-direction: column; align-items: center; justify-content: center; padding: 30px; border-radius: 27px; background: linear-gradient(145deg, #174a8b, #2d63ad); box-shadow: 0 22px 58px rgba(23, 74, 139, .21); color: #fff; text-align: center; }
.follow-reading > p { margin: 0; font-weight: 680; opacity: .86; }
.follow-reading .info-dot { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .14); color: #fff; }
.follow-number { display: flex; align-items: center; gap: 20px; line-height: 1; }
.follow-number strong { font-size: clamp(80px, 15vw, 132px); font-weight: 760; letter-spacing: -.06em; }
.follow-number b { font-size: clamp(42px, 8vw, 68px); }
.follow-reading > span { font-size: 19px; font-weight: 680; }
.follow-reading > small { margin-top: 14px; font-size: 14px; opacity: .82; }
.follow-reading.is-low { background: linear-gradient(145deg, #711e20, #b43e38); }
.follow-reading.is-high { background: linear-gradient(145deg, #714616, #a86e1f); }
.follow-reading.is-stale { outline: 5px solid #e4bd58; outline-offset: -5px; }
.follow-empty { margin-top: 18px; font-size: 23px; font-weight: 700; }
.stale-badge { margin-top: 15px; padding: 7px 11px; border-radius: 999px; background: #fff3d8; color: #714616; font-size: 12px; }
.follow-context { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0; }
.follow-context .card { display: flex; min-height: 136px; flex-direction: column; justify-content: center; }
.follow-context small { color: var(--muted); font-size: 11px; font-weight: 740; letter-spacing: .04em; text-transform: uppercase; }
.follow-context strong { margin: 7px 0 3px; font-size: 24px; }
.follow-context span { color: var(--muted); }
.follow-context a { color: var(--primary-strong); font-weight: 680; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.section-head h2 { margin: 4px 0; }
.section-head a { color: var(--primary-strong); font-weight: 680; }
.follow-chart-card { margin-top: 14px; }
.follow-chart { height: 180px; }
.follow-safety { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; padding: 18px 20px; border: 1px solid #e3c77e; border-radius: 16px; background: var(--amber); }
.follow-safety p { margin: 4px 0 0; }
.emergency-button { flex: none; padding: 12px 16px; border-radius: 11px; background: #9d332e; color: #fff; font-weight: 720; text-decoration: none; }

.invite-ready { margin-bottom: 20px; padding: 22px; border-radius: 19px; background: linear-gradient(145deg, #174a8b, #2d63ad); box-shadow: var(--shadow); color: #fff; }
.invite-ready .eyebrow { color: #cfe0ff; }
.invite-ready h2 { margin: 4px 0; }
.invite-ready p { margin: 5px 0 14px; }
.copy-row { display: flex; gap: 9px; }
.copy-row input { border: 0; }
.member-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.member-row > div:last-child { display: flex; min-width: 0; flex-direction: column; }
.member-row span,
.member-row small,
.invite-row small,
.contact-row small { color: var(--muted); }
.member-avatar { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 13px; background: var(--primary-soft); color: var(--primary-strong); font-size: 18px; font-weight: 760; }
.invite-row,
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.invite-row > div,
.contact-row > div { display: flex; min-width: 0; flex-direction: column; }
.contact-row a { color: var(--primary-strong); font-weight: 700; text-decoration: none; }
.section-space { margin-top: 20px; }
.join-shell { width: min(100%, 620px); margin: 4vh auto; text-align: center; }
.join-form { margin-top: 20px; text-align: left; }
.join-form .primary-btn { width: 100%; }

.reminder-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 18px; padding: 13px 16px; border: 1px solid #e3c77e; border-radius: 14px; background: var(--amber); }
.reminder-strip span { padding: 6px 10px; border-radius: 999px; background: #fff; }
.reminder-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.reminder-row > div { display: flex; min-width: 0; flex-direction: column; }
.reminder-row small { color: var(--muted); }
.reminder-row button { padding: 7px 11px; border: 1px solid #b4c6df; border-radius: 9px; background: #fff; color: var(--primary-strong); font-weight: 680; }
.range-picker { min-width: 150px; }
.range-picker label { display: block; margin-bottom: 5px; font-weight: 680; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.contact-grid a { display: flex; flex-direction: column; padding: 13px; border-radius: 12px; background: var(--primary-soft); color: var(--ink); text-decoration: none; }
.contact-grid span { color: var(--primary-strong); }

@media (max-width: 760px) {
  .follow-head { flex-direction: column; }
  .follow-context { grid-template-columns: 1fr; }
  .follow-reading { min-height: 265px; border-radius: 22px; }
  .follow-number { gap: 13px; }
  .follow-safety { align-items: stretch; flex-direction: column; }
  .emergency-button { text-align: center; }
  .live-pill { align-self: flex-start; }
}

@media (max-width: 650px) {
  .copy-row { flex-direction: column; }
  .copy-row .primary-btn { width: 100%; }
  .invite-row, .contact-row { align-items: flex-start; }
  .family-grid { grid-template-columns: 1fr; }
}

/* Live dashboard and no-jump care actions */
.metric-heading { display: flex; min-width: 0; min-height: 29px; align-items: center; justify-content: space-between; gap: 10px; }
.dashboard-live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid #bcd5fb; border-radius: 999px; background: rgba(255, 255, 255, .75); color: var(--primary-strong); font-size: 10px; font-weight: 780; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #1b9a69; box-shadow: 0 0 0 3px rgba(27, 154, 105, .12); }
.dashboard-reading-number { display: flex; align-items: center; gap: 10px; min-height: 54px; }
.metrics .dashboard-reading-number strong { margin: 0; }
.dashboard-reading-number b { margin: 0; color: var(--primary-strong); font-size: 28px; line-height: 1; }
.dashboard-stale { display: inline-flex; align-self: flex-start; margin: 0 !important; padding: 3px 7px; border-radius: 999px; background: #fff1ce; color: #7d4b05; font-size: 10px !important; }
.dashboard-sparkline { width: 100%; height: 38px; margin-top: 0; overflow: hidden; }
.dashboard-sparkline:empty { display: none; }
.dashboard-sparkline svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spark-target { fill: rgba(30, 160, 111, .08); }
.spark-line { fill: none; stroke: var(--primary); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; vector-effect: non-scaling-stroke; }
.spark-dot { fill: #fff; stroke: var(--primary); stroke-width: 3; vector-effect: non-scaling-stroke; }
.dashboard-bg-card.is-low { border-top-color: #c2413b !important; background: linear-gradient(160deg, #fff, #fff0f0) !important; }
.dashboard-bg-card.is-high { border-top-color: #b56a08 !important; background: linear-gradient(160deg, #fff, #fff6e5) !important; }
.dashboard-bg-card.is-stale .dashboard-live-pill i { background: #c18623; box-shadow: 0 0 0 3px rgba(193, 134, 35, .15); }
.simple-chart { display: block; padding: 12px 4px; }
.simple-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-target { fill: rgba(37, 149, 108, .075); }
.chart-grid { stroke: #dce5f2; stroke-dasharray: 5 7; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-line { fill: none; stroke: var(--primary); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; vector-effect: non-scaling-stroke; }
.chart-dot { fill: #fff; stroke: var(--primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-dot.latest { fill: var(--primary); stroke: #fff; stroke-width: 3; }
.next-step.caught-up { border-left-color: #25956c; background: #edf9f4; }
.task-row.complete { opacity: 1; }
.task-row.complete > time,
.task-row.complete > div:not(.task-controls) { opacity: .56; }
.completion-status { color: var(--muted); font-size: 11px; font-weight: 680; white-space: nowrap; }
.task-row.complete .completion-status { color: #187653; }
.task-row .task-toggle { min-width: 54px; min-height: 34px; padding: 6px 10px; border-color: var(--primary); border-radius: 9px; background: var(--primary); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; }
.task-row .task-toggle:hover { background: var(--primary-strong); }
.task-row .task-toggle.is-undo { border-color: #c6d2e3; background: #fff; color: var(--muted); }
.task-row .task-toggle.is-undo:hover { border-color: #93a8c3; color: var(--ink); }
.task-row .task-toggle:disabled,
.reminder-row button:disabled { cursor: wait; opacity: .65; }
.reminder-row.complete > div:first-child { opacity: .57; }
.async-toast { position: fixed; right: 24px; bottom: 24px; z-index: 120; max-width: min(390px, calc(100vw - 30px)); padding: 13px 16px; border: 1px solid #9ec5f4; border-radius: 13px; background: #153f79; box-shadow: 0 18px 45px rgba(12, 37, 72, .24); color: #fff; font-weight: 680; opacity: 0; transform: translateY(12px); transition: opacity .18s ease, transform .18s ease; }
.async-toast.is-visible { opacity: 1; transform: translateY(0); }
.async-toast.is-error { border-color: #f1b8b4; background: #8e2926; }

/* Learn modal → full Learning Lab */
.learn-lab-launch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 14px; align-items: center; margin: 0 0 14px; padding: 13px 14px; border: 1px solid #bcd3f7; border-radius: 14px; background: linear-gradient(135deg, #edf5ff, #f4efff); color: var(--ink); text-decoration: none; }
.learn-lab-launch > span { display: flex; align-items: center; gap: 8px; font-weight: 780; }
.learn-lab-launch b { display: grid; width: 28px; height: 28px; place-items: center; border: 2px solid var(--diabetes-blue); border-radius: 50%; background: #fff; color: var(--primary-strong); font-size: 10px; }
.learn-lab-launch small { grid-column: 1; margin-left: 36px; color: var(--muted); }
.learn-lab-launch i { grid-column: 2; grid-row: 1 / 3; color: var(--primary); font-size: 20px; font-style: normal; }
.learn-lab-launch:hover { border-color: #82ace7; box-shadow: 0 8px 22px rgba(23, 74, 139, .09); }
.term-lesson-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 15px; padding: 12px 14px; border: 1px solid #bed4f5; border-radius: 12px; background: var(--primary-soft); color: var(--primary-strong); font-weight: 740; text-decoration: none; }
.term-lesson-link[hidden] { display: none; }
.more-links .more-learning { margin: 5px 0 8px; padding: 14px; border: 1px solid #bfd5f6; border-radius: 13px; background: linear-gradient(135deg, #edf5ff, #f4efff); }

/* T1Daily Learning Lab */
.learning-shell { width: min(100%, 1180px); margin: 0 auto; }
.learning-hero { position: relative; overflow: hidden; margin-bottom: 34px; padding: clamp(24px, 4vw, 46px); border-radius: 28px; background: linear-gradient(135deg, #0d2f5a 0%, #174f96 54%, #5a45bc 125%); box-shadow: 0 24px 65px rgba(16, 50, 97, .22); color: #fff; }
.learning-hero::before,
.learning-hero::after { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .055); content: ""; }
.learning-hero::before { top: -170px; right: 9%; }
.learning-hero::after { right: -120px; bottom: -190px; }
.learning-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-bottom: 34px; }
.learning-brand > span { display: grid; width: 39px; height: 39px; place-items: center; border: 2px solid #83b3ff; border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: 13px; font-weight: 820; }
.learning-brand strong { font-size: 18px; letter-spacing: -.01em; }
.learning-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr); gap: clamp(26px, 5vw, 70px); align-items: center; }
.learning-hero .eyebrow,
.lesson-hero .eyebrow { color: #a9cdfd; }
.learning-hero h1 { max-width: 750px; margin: 7px 0 13px; color: #fff; font-size: clamp(38px, 5vw, 65px); line-height: 1.03; letter-spacing: -.045em; }
.learning-hero-grid > div:first-child > p:last-of-type { max-width: 690px; margin: 0; color: #dceafe; font-size: 18px; }
.learning-cta { display: inline-flex; min-height: 49px; align-items: center; justify-content: center; gap: 18px; margin-top: 23px; padding: 12px 18px; border: 0; border-radius: 13px; background: #fff; color: #174a8b; font-weight: 780; text-decoration: none; cursor: pointer; }
.learning-cta span { font-size: 20px; }
.learning-cta:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .18); transform: translateY(-1px); }
.learning-progress-card { display: flex; align-items: center; gap: 17px; padding: 18px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 19px; background: rgba(255, 255, 255, .09); backdrop-filter: blur(8px); }
.progress-ring { position: relative; display: grid; width: 104px; height: 104px; flex: none; place-items: center; border-radius: 50%; background: conic-gradient(#70b5ff calc(var(--progress) * 1%), rgba(255, 255, 255, .14) 0); }
.progress-ring.progress-0 { --progress: 0; }
.progress-ring.progress-1 { --progress: 11; }
.progress-ring.progress-2 { --progress: 22; }
.progress-ring.progress-3 { --progress: 33; }
.progress-ring.progress-4 { --progress: 44; }
.progress-ring.progress-5 { --progress: 56; }
.progress-ring.progress-6 { --progress: 67; }
.progress-ring.progress-7 { --progress: 78; }
.progress-ring.progress-8 { --progress: 89; }
.progress-ring.progress-9 { --progress: 100; }
.progress-ring::before { position: absolute; inset: 9px; border-radius: 50%; background: #17477f; content: ""; }
.progress-ring strong,
.progress-ring span { position: relative; z-index: 1; grid-area: 1 / 1; }
.progress-ring strong { margin-top: -14px; font-size: 23px; }
.progress-ring span { margin-top: 26px; color: #cae0ff; font-size: 11px; }
.learning-progress-card > div:last-child { display: flex; min-width: 0; flex-direction: column; }
.learning-progress-card b { font-size: 18px; }
.learning-progress-card span { color: #cee1fc; font-size: 13px; }
.learning-promises { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 31px; }
.learning-promises span { padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #dceafe; font-size: 12px; }
.learning-section { margin: 38px 0; }
.learning-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 17px; }
.learning-section-head h2 { margin: 4px 0 0; font-size: clamp(25px, 3vw, 34px); }
.learning-section-head > p { max-width: 380px; margin: 0; color: var(--muted); text-align: right; }
.lesson-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.lesson-card { --lesson-color: #3672c6; position: relative; display: flex; min-height: 285px; flex-direction: column; overflow: hidden; padding: 21px; border: 1px solid var(--line); border-top: 4px solid var(--lesson-color); border-radius: 18px; background: #fff; box-shadow: 0 8px 26px rgba(21, 54, 100, .065); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.lesson-card:hover { border-color: color-mix(in srgb, var(--lesson-color) 50%, #d9e2f1); box-shadow: 0 16px 34px rgba(21, 54, 100, .12); transform: translateY(-3px); }
.lesson-tone-2,
.lesson-tone-8 { --lesson-color: #0582b5; }
.lesson-tone-3 { --lesson-color: #7247c7; }
.lesson-tone-4 { --lesson-color: #d34b72; }
.lesson-tone-5 { --lesson-color: #3b65c4; }
.lesson-tone-6 { --lesson-color: #178167; }
.lesson-tone-7 { --lesson-color: #bc6b12; }
.lesson-tone-9 { --lesson-color: #7b55b9; }
.lesson-card.is-complete { background: linear-gradient(160deg, #fff, #f4fbf8); }
.lesson-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lesson-number { color: var(--lesson-color); font-size: 30px; font-weight: 820; line-height: 1; letter-spacing: -.05em; }
.lesson-track,
.lesson-complete { padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--lesson-color) 10%, white); color: var(--lesson-color); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.lesson-complete { background: #e8f7f1; color: #187653; }
.lesson-card h3 { margin: 24px 0 8px; font-size: 23px; line-height: 1.15; }
.lesson-card > p { margin: 0; color: var(--muted); font-size: 14px; }
.lesson-card-meta { display: flex; gap: 8px; margin: auto 0 12px; padding-top: 18px; }
.lesson-card-meta span { padding: 4px 7px; border-radius: 7px; background: #f2f5fa; color: var(--muted); font-size: 11px; }
.lesson-card > a { display: flex; align-items: center; justify-content: space-between; color: var(--lesson-color); font-weight: 760; text-decoration: none; }
.badge-section { padding: 25px; border: 1px solid #d4def0; border-radius: 23px; background: linear-gradient(135deg, #f5f8ff, #f8f4ff); }
.badge-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.learning-badge { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid #d8dfeb; border-radius: 13px; background: rgba(255, 255, 255, .66); color: #8792a5; filter: grayscale(.8); }
.learning-badge.earned { border-color: #b8d0f5; background: #fff; color: var(--ink); filter: none; box-shadow: 0 8px 20px rgba(34, 75, 137, .07); }
.learning-badge > span { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border-radius: 50%; background: #edf1f6; }
.learning-badge.earned > span { background: #fff0bd; color: #a36203; }
.learning-badge > div { display: flex; min-width: 0; flex-direction: column; }
.learning-badge strong { font-size: 13px; }
.learning-badge small { font-size: 11px; }
.learning-source-note { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 15px; margin: 28px 0 16px; padding: 20px; border: 1px solid #c8daf6; border-radius: 17px; background: #eef5ff; }
.source-shield { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; background: #fff; color: var(--primary); font-size: 22px; font-weight: 800; }
.learning-source-note p { margin: 4px 0 0; color: var(--muted); }
.learning-safety { margin: 16px 0 4px; padding: 14px 17px; border: 1px solid #ead293; border-radius: 14px; background: #fff8e5; color: #664510; }

/* Individual Learning Lab lesson */
.learning-breadcrumb { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.learning-breadcrumb a { color: var(--primary-strong); font-weight: 700; text-decoration: none; }
.lesson-hero { --lesson-color: #3672c6; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; overflow: hidden; margin-bottom: 22px; padding: clamp(23px, 4vw, 39px); border-radius: 25px; background: linear-gradient(135deg, #103665, #1d559a); box-shadow: 0 18px 46px rgba(20, 57, 105, .17); color: #fff; }
.lesson-hero-number { display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 22px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 30px; font-weight: 820; }
.lesson-hero h1 { margin: 4px 0 6px; color: #fff; font-size: clamp(31px, 4vw, 48px); line-height: 1.06; }
.lesson-hero p:last-child { max-width: 780px; margin: 0; color: #dceafe; }
.lesson-status-badge { align-self: flex-start; padding: 7px 10px; border-radius: 999px; background: #eaf8f1; color: #176e50; font-size: 11px; font-weight: 780; white-space: nowrap; }
.lesson-status-badge.in-progress { background: #fff3d7; color: #754d0a; }
.lesson-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); gap: 18px; align-items: start; }
.lesson-layout main { display: grid; gap: 16px; }
.lesson-layout aside { position: sticky; top: 82px; display: grid; gap: 14px; }
.lesson-content-card,
.lesson-side-card { padding: 23px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 8px 25px rgba(20, 55, 104, .06); }
.lesson-content-card h2,
.lesson-side-card h2 { margin: 4px 0 10px; font-size: 23px; }
.big-idea { border-left: 5px solid var(--primary); background: linear-gradient(135deg, #fff, #f3f7ff); }
.big-idea > p:last-child { margin-bottom: 0; color: #43536b; font-size: 17px; line-height: 1.65; }
.takeaway-list { display: grid; gap: 12px; margin: 15px 0 0; padding: 0; list-style: none; }
.takeaway-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 11px; align-items: start; }
.takeaway-list li > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: var(--primary-soft); color: var(--primary-strong); font-weight: 800; }
.takeaway-list p { margin: 4px 0 0; }
.learning-video-card { display: grid; grid-template-columns: minmax(165px, .7fr) minmax(0, 1.3fr); overflow: hidden; border: 1px solid #bcd1f2; border-radius: 19px; background: #fff; box-shadow: 0 10px 28px rgba(21, 59, 111, .08); color: var(--ink); text-decoration: none; }
.video-art { position: relative; display: grid; min-height: 190px; place-items: center; overflow: hidden; background: linear-gradient(140deg, #12539b, #6c4cc2); color: #fff; }
.video-art::before,
.video-art::after { position: absolute; width: 150px; height: 150px; border: 22px solid rgba(255, 255, 255, .07); border-radius: 50%; content: ""; }
.video-art::before { top: -55px; left: -50px; }
.video-art::after { right: -65px; bottom: -70px; }
.video-art i { position: relative; z-index: 1; display: grid; width: 60px; height: 60px; place-items: center; padding-left: 4px; border-radius: 50%; background: #fff; box-shadow: 0 10px 25px rgba(0, 0, 0, .2); color: #215ca2; font-style: normal; }
.video-art small { position: absolute; bottom: 17px; z-index: 1; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.video-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 24px; }
.video-copy > small { color: var(--primary-strong); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.video-copy > strong { margin: 5px 0 7px; font-size: 21px; line-height: 1.2; }
.video-copy > span { color: var(--muted); font-size: 13px; }
.video-copy > b { margin-top: 18px; color: var(--primary); font-size: 13px; }
.learning-video-card:hover { border-color: #7fa8e3; box-shadow: 0 16px 35px rgba(21, 59, 111, .14); }
.learning-reading-card { display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 15px 17px; border: 1px solid #d4dbea; border-radius: 15px; background: #fff; color: var(--ink); text-decoration: none; }
.learning-reading-card > span { display: grid; width: 41px; height: 41px; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--primary-strong); font-size: 12px; font-weight: 800; }
.learning-reading-card > div { display: flex; min-width: 0; flex-direction: column; }
.learning-reading-card small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; }
.learning-reading-card b { color: var(--primary); }
.lesson-word-list { display: grid; gap: 7px; }
.lesson-word-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 11px; border: 1px solid #d5dfef; border-radius: 11px; background: #fbfcff; color: var(--ink); font-size: 13px; font-weight: 680; text-align: left; cursor: pointer; }
.lesson-word-list button:hover { border-color: #9cbae5; background: var(--primary-soft); }
.lesson-word-list button span { display: grid; width: 20px; height: 20px; flex: none; place-items: center; border: 1px solid #aac6ed; border-radius: 50%; color: var(--primary); font-family: Georgia, serif; font-size: 12px; font-weight: 700; }
.plan-anchor { background: linear-gradient(145deg, #fff8e6, #fff); }
.plan-anchor > span { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; background: #fff0c7; }
.plan-anchor p { color: var(--muted); }
.plan-anchor a { color: var(--primary-strong); font-weight: 730; }
.quiz-card { margin-top: 22px; padding: clamp(22px, 4vw, 34px); border: 1px solid #c9d8ef; border-radius: 23px; background: linear-gradient(145deg, #f8fbff, #f7f5ff); box-shadow: 0 14px 38px rgba(26, 65, 119, .08); }
.quiz-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.quiz-heading h2 { margin: 4px 0; font-size: 28px; }
.quiz-heading p:last-child { margin: 0; color: var(--muted); }
.quiz-heading > span { padding: 7px 10px; border-radius: 999px; background: #fff; color: var(--muted); white-space: nowrap; }
.quiz-questions { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.quiz-questions fieldset { min-width: 0; margin: 0; padding: 17px; border: 1px solid #d5dfef; border-radius: 15px; background: #fff; }
.quiz-questions fieldset.is-correct { border-color: #8ccab2; background: #f4fcf8; }
.quiz-questions fieldset.is-incorrect { border-color: #e1bf75; background: #fffaf0; }
.quiz-questions legend { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 8px; width: 100%; margin-bottom: 12px; color: var(--ink); font-size: 15px; font-weight: 750; }
.quiz-questions legend span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; background: var(--primary-soft); color: var(--primary-strong); font-size: 11px; }
.quiz-choices { display: grid; gap: 7px; }
.quiz-choices label { cursor: pointer; }
.quiz-choices input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.quiz-choices label > span { display: block; padding: 9px 10px; border: 1px solid #dce3ef; border-radius: 10px; background: #fbfcfe; font-size: 13px; }
.quiz-choices input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); font-weight: 700; }
.quiz-choices input:focus-visible + span { outline: 3px solid rgba(87, 138, 214, .3); outline-offset: 2px; }
.quiz-feedback { margin-top: 10px; padding: 9px 10px; border-radius: 9px; background: rgba(255, 255, 255, .8); color: #45566e; font-size: 12px; }
.quiz-submit { margin-top: 17px; border: 0; background: linear-gradient(135deg, var(--primary), #5a45bc); color: #fff; }
.quiz-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 18px; padding: 17px; border: 1px solid #e0c782; border-radius: 15px; background: #fff8e4; }
.quiz-result.passed { border-color: #92cdb5; background: #eefaf5; }
.quiz-score { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 18px; background: #fff; color: #825608; font-size: 22px; font-weight: 820; }
.quiz-result.passed .quiz-score { color: #187653; }
.quiz-result h3 { margin: 0; }
.quiz-result p { margin: 3px 0; color: var(--muted); }
.quiz-result a { color: var(--primary-strong); font-weight: 740; }
.lesson-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.lesson-nav a { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; }
.lesson-nav a.next { align-items: flex-end; text-align: right; }
.lesson-nav span { color: var(--primary); font-size: 11px; font-weight: 780; text-transform: uppercase; }
.lesson-nav strong { font-size: 14px; }

@media (max-width: 1050px) {
  .lesson-grid { grid-template-columns: 1fr 1fr; }
  .badge-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 800px) {
  .learning-hero-grid,
  .lesson-layout { grid-template-columns: 1fr; }
  .learning-progress-card { max-width: 420px; }
  .lesson-layout aside { position: static; grid-template-columns: 1fr 1fr; }
  .lesson-hero { grid-template-columns: auto minmax(0, 1fr); }
  .lesson-status-badge { grid-column: 2; justify-self: start; }
  .quiz-questions { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .learning-hero { padding: 23px 20px; border-radius: 21px; }
  .learning-brand { margin-bottom: 24px; }
  .learning-hero h1 { font-size: 37px; }
  .learning-hero-grid > div:first-child > p:last-of-type { font-size: 16px; }
  .learning-progress-card { align-items: flex-start; flex-direction: column; }
  .progress-ring { width: 90px; height: 90px; }
  .learning-section-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .learning-section-head > p { text-align: left; }
  .lesson-grid,
  .badge-grid,
  .lesson-layout aside { grid-template-columns: 1fr; }
  .lesson-card { min-height: 255px; }
  .lesson-hero { grid-template-columns: 1fr; text-align: left; }
  .lesson-hero-number { width: 58px; height: 58px; border-radius: 17px; font-size: 23px; }
  .lesson-status-badge { grid-column: 1; justify-self: start; }
  .learning-video-card { grid-template-columns: 1fr; }
  .video-art { min-height: 150px; }
  .quiz-heading { flex-direction: column; }
  .lesson-nav { grid-template-columns: 1fr; }
  .lesson-nav > span:empty { display: none; }
  .async-toast { right: 15px; bottom: 88px; }
}