:root { --green:#218c4f; --green-dark:#17663a; --green-pale:#e9f7ef; --ink:#173d2a; --muted:#607267; --line:#dfe9e3; --yellow:#f4bd37; --bg:#f7faf8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:Inter, ui-rounded, "Segoe UI", Arial, sans-serif; color:var(--ink); background:var(--bg); }
button, a { font:inherit; }
[hidden] { display:none !important; }
.course-loading { min-height:100vh; display:grid; place-content:center; text-align:center; color:var(--muted); }
.loading-mark { color:var(--green); font-size:3.5rem; animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform:scale(1.12); opacity:.65; } }
.access-gate { min-height:100vh; padding:32px 20px; display:grid; place-content:center; justify-items:center; gap:30px; background:radial-gradient(circle at 50% 20%, #effaf3, #f7faf8 52%); }
.gate-logo { width:min(260px, 65vw); }
.gate-card { width:min(460px, 100%); padding:36px; text-align:center; background:white; border:1px solid var(--line); border-radius:24px; box-shadow:0 20px 60px rgba(21,65,40,.12); }
.gate-lock { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:var(--green-pale); font-size:1.75rem; }
.eyebrow { margin:0 0 8px; color:var(--green); font-size:.73rem; font-weight:900; letter-spacing:.11em; }
.gate-card h1 { margin:0 0 12px; font-size:clamp(1.6rem, 5vw, 2.2rem); }
.gate-card > p:not(.eyebrow) { color:var(--muted); line-height:1.55; }
.primary-button { display:block; margin-top:24px; padding:14px 20px; border-radius:13px; color:white; background:var(--green); box-shadow:0 5px 0 var(--green-dark); font-weight:850; text-decoration:none; }
.text-link { display:inline-block; margin-top:22px; color:var(--green-dark); font-weight:700; }
.course-header { min-height:76px; padding:12px clamp(18px,4vw,54px); display:grid; grid-template-columns:1fr minmax(230px, 420px) 1fr; gap:24px; align-items:center; background:white; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.brand img { width:180px; display:block; }
.header-progress { color:var(--muted); text-align:center; font-size:.8rem; font-weight:800; }
.progress-track { height:10px; margin-top:7px; overflow:hidden; background:#edf1ee; border-radius:99px; }
.progress-track span { display:block; width:0; height:100%; background:linear-gradient(90deg, var(--green), #52c77c); border-radius:inherit; transition:width .4s ease; }
.user-chip { justify-self:end; max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:9px 12px; background:var(--green-pale); border-radius:99px; color:var(--green-dark); font-size:.82rem; font-weight:800; }
.top-menu { position:fixed; z-index:40; top:max(10px,env(safe-area-inset-top)); right:12px; display:flex; align-items:center; gap:8px; }
.account-toggle,.top-menu-toggle { width:34px; height:28px; border:1px solid #d5dce0; background:rgba(255,255,255,.86); color:#8a98a1; border-radius:999px; cursor:pointer; font-size:1.05rem; font-weight:900; line-height:1; box-shadow:0 2px 8px rgba(0,0,0,.06); backdrop-filter:blur(6px); }
.account-toggle { display:flex; align-items:center; justify-content:center; color:#218c4f; }
.account-toggle.account-authenticated { width:auto; padding:0 9px 0 7px; gap:5px; }
.account-name { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.75rem; font-weight:900; }
.account-toggle svg { width:18px; height:18px; display:block; }
.account-toggle svg circle,.account-toggle svg path { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.top-menu-panel { position:absolute; top:calc(100% + 8px); right:0; min-width:190px; padding:8px; border:1px solid #d5dce0; background:rgba(255,255,255,.96); border-radius:16px; box-shadow:0 14px 34px rgba(24,36,44,.18); backdrop-filter:blur(6px); }
.account-menu-panel { right:40px; }
.account-menu-name { padding:4px 8px 10px; color:#218c4f; font-size:.84rem; font-weight:900; border-bottom:1px solid #edf1ef; }
.top-menu-item { display:block; width:100%; border:0; background:transparent; color:#173d2a; border-radius:11px; padding:9px 10px; text-align:left; text-decoration:none; font-size:.82rem; font-weight:800; cursor:pointer; }
.top-menu-item:hover { background:#f1f6f3; }
.account-logout,.account-delete { color:#b64332; }
.top-menu-language { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:9px 10px; border-top:1px solid #edf1ef; border-bottom:1px solid #edf1ef; color:#173d2a; border-radius:11px; font-size:.82rem; white-space:nowrap; }
.top-menu-language-label { margin:0; color:#173d2a; font-size:inherit; font-weight:800; }
.idiomes { display:inline-flex; align-items:center; flex-wrap:nowrap; gap:4px; border:0; background:transparent; color:#a0abb2; border-radius:999px; padding:0; box-shadow:none; white-space:nowrap; }
.idioma-btn { padding:3px 5px; border:0; border-radius:999px; color:#8a98a1; background:transparent; font-size:.68rem; line-height:1; font-weight:800; cursor:pointer; }
.idioma-btn.selected { color:white; background:#173d2a; }
.help-modal { position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(24,36,44,.46); }
.help-modal.visible { display:flex; }
.help-card { position:relative; width:min(100%,560px); max-height:min(86vh,620px); overflow:auto; padding:24px; background:#fff; border:1px solid rgba(255,255,255,.72); border-radius:22px; box-shadow:0 22px 60px rgba(24,36,44,.24); }
.help-card h2 { margin:0 34px 16px 0; font-size:1.35rem; }
.help-close { position:absolute; top:13px; right:13px; width:32px; height:32px; padding:0; border:0; border-radius:50%; color:#607267; background:#eef3f0; font-size:1.25rem; cursor:pointer; line-height:30px; }
#course-stats-title { display:flex; align-items:center; gap:9px; }
#course-stats-title::before { content:""; flex:0 0 auto; width:30px; height:30px; border-radius:9px; background:url("formularia-icon-192.png") center/cover no-repeat; box-shadow:0 2px 6px rgba(24,36,44,.14); }
.stats-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.stats-card { min-width:0; padding:11px 10px; border:1px solid #dfe9e4; background:#fbfdfc; border-radius:14px; }
.stats-card small,.stats-card b,.stats-card span { display:block; }
.stats-card small { margin-bottom:5px; color:#607267; font-size:.68rem; font-weight:900; text-transform:uppercase; }
.stats-card b { font-size:1rem; }
.stats-card span { margin-top:3px; color:#607267; font-size:.82rem; font-weight:800; }
.stats-card-good { border-color:#cbead6; background:#f3fbf6; }
.stats-card-review { border-color:#f3dfc4; background:#fffaf2; }
.stats-table-wrap { overflow-x:auto; }
.stats-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.stats-table th,.stats-table td { padding:8px 6px; border-bottom:1px solid #e5ece8; text-align:right; }
.stats-table th:first-child,.stats-table td:first-child { text-align:left; }
.stats-table tfoot td { color:#173d2a; font-weight:900; border-top:2px solid #dfe9e4; border-bottom:0; }
.stats-table .stats-group td { padding-top:14px; padding-bottom:6px; color:#218c4f; background:#f4faf6; font-size:.78rem; font-weight:900; text-align:left; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid #dcebe2; }
.stats-table .stats-group-total td { color:#173d2a; background:#fbfdfc; font-weight:900; border-bottom:2px solid #dfe9e4; }
.stats-switch-row { display:flex; align-items:flex-start; gap:12px; padding:12px 0 14px; border-top:1px solid #e5ece8; }
.stats-switch { position:relative; flex:0 0 auto; width:46px; height:26px; cursor:pointer; }
.stats-switch input { position:absolute; opacity:0; pointer-events:none; }
.stats-switch span { position:absolute; inset:0; border-radius:999px; background:#d8e1df; transition:background .15s; }
.stats-switch span::after { content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; border-radius:50%; background:white; box-shadow:0 2px 6px rgba(24,36,44,.22); transition:transform .15s; }
.stats-switch input:checked + span { background:#27ae60; }
.stats-switch input:checked + span::after { transform:translateX(20px); }
.stats-save-label { color:#173d2a; font-weight:900; line-height:1.2; }
.stats-save-help { margin:4px 0 0; color:#607267; font-size:.84rem; line-height:1.4; }
.stats-clear { width:100%; margin-top:2px; padding:10px; border:1px solid #e5c4bf; border-radius:11px; color:#b64332; background:#fff8f7; font-weight:850; cursor:pointer; }
.course-layout { width:min(1160px, calc(100% - 36px)); margin:38px auto 70px; display:grid; grid-template-columns:330px minmax(0, 1fr); gap:44px; align-items:start; }
.course-summary { position:static; }
.course-summary h1 { margin:0 0 14px; font-size:clamp(2rem,3.6vw,3.1rem); line-height:1.04; letter-spacing:-.035em; }
.course-topic-title { display:flex; align-items:center; gap:12px; }
.course-topic-bond { display:inline-grid; place-items:center; min-width:76px; min-height:48px; padding:6px 10px; border-radius:14px; color:#fff; background:var(--green); font-family:"Cambria Math",Georgia,serif; font-size:1.15rem; letter-spacing:0; white-space:nowrap; box-shadow:0 4px 0 var(--green-dark); }
.course-topic-bond.ring-symbol { font-size:2.15rem; line-height:1; }
.course-topic-bond.combined-symbol { min-width:112px; font-size:.88rem; white-space:nowrap; }
.course-topic-bond.carboxyl-symbol{flex:0 0 96px;width:96px;min-width:96px;padding-left:8px;padding-right:8px;text-align:center}
.course-topic-bond.benzene-symbol svg { width:42px; height:42px; display:block; overflow:visible; }
.course-topic-bond.benzene-symbol polygon,.course-topic-bond.benzene-symbol circle { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.course-unit-guides{margin:18px 0 4px;padding:12px 14px;border:1px solid #cfe4d7;border-radius:13px;background:var(--green-pale);color:var(--muted);font-size:.86rem;line-height:1.45}.course-unit-guides p{margin:0 0 7px}.course-unit-guides a{display:inline-block;margin:2px 10px 2px 0;color:var(--green-dark);font-weight:850;text-decoration:none}.course-unit-guides a:hover{text-decoration:underline}
.ketone-svg { display:block; width:58px; height:46px; overflow:visible; color:inherit; }
.ketone-svg path { fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.ketone-svg text { fill:currentColor; font-family:"Cambria Math",Georgia,serif; font-size:15px; font-weight:700; text-anchor:middle; }
.course-topic-bond .ketone-svg { width:58px; height:46px; }
.journey-stop small .ketone-svg { display:inline-block; width:40px; height:31px; vertical-align:-18px; }
.journey-stop small .journey-ketone-svg text { font-size:18px; }
.course-topic-description { margin:0; color:var(--muted); line-height:1.6; }
.topic-block + .topic-block { margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }
.summary-stats { margin:28px 0; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:18px; background:white; overflow:hidden; }
.summary-stats div { padding:18px; }
.summary-stats div + div { border-left:1px solid var(--line); }
.summary-stats strong,.summary-stats span { display:block; }
.summary-stats strong { font-size:1.65rem; }
.summary-stats span { margin-top:3px; color:var(--muted); font-size:.72rem; }
.next-card { display:block; padding:18px; border-radius:16px; color:white; background:linear-gradient(145deg,#218c4f,#17663a); box-shadow:0 10px 25px rgba(23,102,58,.18); text-decoration:none; transition:transform .15s,box-shadow .15s; }
.next-card:hover { transform:translateY(-2px); box-shadow:0 13px 28px rgba(23,102,58,.24); }
.next-card span,.next-card strong,.next-card small { display:block; }
.next-card span { color:#ccebd8; font-size:.66rem; font-weight:900; letter-spacing:.1em; }
.next-card strong { margin:7px 0 4px; font-size:1.08rem; }
.next-card small { color:#e4f4ea; }
.learning-path { padding:30px; background:white; border:1px solid var(--line); border-radius:24px; box-shadow:0 16px 45px rgba(21,65,40,.07); }
.path-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.path-heading h2 { margin:0; font-size:1.55rem; }
.path-actions { display:flex; align-items:center; gap:12px; }
.how-button { padding:7px 11px; border:1px solid #b9d8c6; border-radius:10px; color:var(--green-dark); background:var(--green-pale); font-size:.76rem; font-weight:850; cursor:pointer; }
.reset-button { border:0; color:#8a4c43; background:transparent; font-size:.76rem; font-weight:800; cursor:pointer; }
.level-map { width:min(520px,100%); margin:28px auto 10px; }
.course-journey { width:min(1180px,calc(100% - 36px)); min-height:390px; margin:0 auto 58px; padding:30px clamp(15px,4vw,50px) 10px; display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:140px 140px 100px; position:relative; }
.journey-track { position:absolute; inset:0 clamp(15px,4vw,50px) auto; width:calc(100% - 2 * clamp(15px,4vw,50px)); height:390px; overflow:visible; pointer-events:none; }
.journey-track-mobile { display:none; }
.journey-track path { fill:none; stroke-width:7; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.journey-track-base { stroke:#dfe8e2; }
.journey-track-fill { stroke:var(--green); opacity:0; transition:opacity .25s ease; }
.journey-track-fill.visible { opacity:1; }
.journey-stop { display:grid; justify-items:center; align-content:start; gap:3px; position:relative; z-index:1; color:var(--muted); text-align:center; text-decoration:none; }
.journey-stop i { width:25px; height:25px; margin-bottom:7px; border:5px solid var(--bg); border-radius:50%; background:#cfdad3; box-shadow:0 0 0 2px #cfdad3; }
.journey-stop strong { font-size:.92rem; }
.journey-stop small { font-family:"Cambria Math",Georgia,serif; }
.journey-stop .journey-stars { display:block; margin-top:2px; color:#b47d05; font-size:.7rem; font-weight:800; line-height:1; }
.journey-stop:not(.completed):not(.active) .journey-stars { color:#87978e; }
.journey-stop.active { color:var(--green-dark); }
.journey-stop.active i { background:var(--green); box-shadow:0 0 0 3px var(--green); }
.journey-stop.completed i { background:var(--yellow); box-shadow:0 0 0 3px #d69b13; }
.journey-stop:nth-child(3) { grid-column:1; grid-row:1; }
.journey-stop:nth-child(4) { grid-column:3; grid-row:1; }
.journey-stop:nth-child(5) { grid-column:5; grid-row:1; }
.journey-stop:nth-child(6) { grid-column:7; grid-row:1; }
.journey-stop:nth-child(7) { grid-column:7; grid-row:2; }
.journey-stop:nth-child(8) { grid-column:5; grid-row:2; }
.journey-stop:nth-child(9) { grid-column:3; grid-row:2; }
.journey-stop:nth-child(10) { grid-column:1; grid-row:2; }
.journey-stop:nth-child(11) { grid-column:1; grid-row:3; }
.journey-stop:nth-child(12) { grid-column:3; grid-row:3; }
.journey-stop:nth-child(13) { grid-column:5; grid-row:3; }
.unit-divider { height:1px; margin:34px 0 28px; background:var(--line); }
.unit-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.unit-heading h2 { margin:0; font-size:1.55rem; }
.unit-bonds { padding:9px 12px; border-radius:12px; color:#fff; background:var(--green); font-family:"Cambria Math",Georgia,serif; font-weight:800; box-shadow:0 3px 0 var(--green-dark); }
.level-row { min-height:128px; display:grid; grid-template-columns:96px 1fr; gap:20px; align-items:center; position:relative; }
.level-row:nth-child(even) { transform:translateX(48px); }
.level-row::after { content:""; position:absolute; left:47px; top:88px; height:53px; width:3px; background:#dce7e0; z-index:0; }
.level-row:last-child::after { height:34px; }
.level-node { width:90px; height:82px; border:0; border-radius:50%; color:white; background:var(--green); box-shadow:0 7px 0 var(--green-dark),0 10px 18px rgba(23,102,58,.22); display:grid; place-content:center; cursor:pointer; position:relative; z-index:1; transition:transform .15s; }
.level-node:hover:not(:disabled) { transform:translateY(-3px); }
.level-node:active:not(:disabled) { transform:translateY(5px); box-shadow:0 2px 0 var(--green-dark); }
.level-node .node-icon { font-size:1.55rem; line-height:1; }
.level-node .node-icon { display:grid; place-items:center; }
.level-node .node-icon svg { width:35px; height:39px; display:block; overflow:visible; }
.level-node .flask-outline { fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.level-node .flask-liquid { fill:#fff; opacity:.55; }
.level-node .node-number { margin-top:3px; font-size:.66rem; font-weight:900; }
.level-node.completed { color:#6b4a00; background:var(--yellow); box-shadow:0 7px 0 #c68d0e,0 10px 18px rgba(198,141,14,.2); }
.level-node.locked { color:#809086; background:#dfe6e1; box-shadow:0 7px 0 #c5cec8; cursor:not-allowed; }
.level-info h3 { margin:0 0 5px; font-size:1rem; }
.level-info p { margin:0; color:var(--muted); font-size:.8rem; line-height:1.45; }
.stars { margin-top:7px; color:#d6dde8; letter-spacing:2px; font-size:.9rem; }
.stars .earned { color:var(--yellow); }
.status-pill { display:inline-block; margin-top:7px; padding:3px 8px; border-radius:99px; color:var(--green-dark); background:var(--green-pale); font-size:.65rem; font-weight:900; }
.status-pill.locked { color:#718078; background:#eef1ef; }
.course-intro-modal { position:fixed; inset:0; z-index:25; padding:20px; display:grid; place-items:center; background:rgba(12,35,23,.72); }
.course-intro-card { width:min(650px,100%); max-height:calc(100vh - 40px); padding:clamp(25px,5vw,44px); overflow:auto; position:relative; border-radius:24px; background:white; box-shadow:0 25px 80px rgba(0,0,0,.3); }
.course-intro-card h2 { margin:0 0 10px; font-size:clamp(1.8rem,5vw,2.5rem); }
.intro-close { position:absolute; top:18px; right:18px; }
.intro-lead { margin:0 42px 24px 0; color:var(--muted); line-height:1.55; }
.intro-points { display:grid; gap:11px; }
.intro-points article { display:grid; grid-template-columns:42px 1fr; gap:13px; padding:13px; border-radius:14px; background:#f3f8f5; }
.intro-points article > span { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--green); font-weight:900; }
.intro-points strong { display:block; margin:1px 0 4px; }
.intro-points p { margin:0; color:var(--muted); font-size:.86rem; line-height:1.45; }
.intro-action { display:block; margin:22px 0 0 auto; }
.course-confirm-modal { position:fixed; inset:0; z-index:40; padding:20px; display:grid; place-items:center; background:rgba(12,35,23,.72); }
.course-confirm-card { width:min(390px,100%); padding:24px 22px; border-radius:20px; background:white; box-shadow:0 25px 80px rgba(0,0,0,.3); text-align:center; }
.course-confirm-card h2 { margin:0 0 8px; font-size:1.18rem; }
.course-confirm-card p { margin:0; color:var(--muted); line-height:1.45; }
.course-confirm-actions { margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.course-confirm-actions button { padding:11px 12px; border:0; border-radius:12px; font-weight:900; cursor:pointer; }
.course-confirm-cancel { color:var(--ink); background:#eef2f4; }
.course-confirm-accept { color:white; background:#b74332; }
.course-confirm-cancel:hover { background:#e1e8eb; }
.course-confirm-accept:hover { background:#9f3527; }
.lesson-modal { position:fixed; inset:0; z-index:20; padding:20px; background:rgba(12,35,23,.72); display:grid; place-items:center; }
.lesson-panel { position:relative; width:min(680px,100%); min-height:min(650px,calc(100vh - 40px)); max-height:calc(100vh - 40px); display:grid; grid-template-rows:auto 1fr auto; overflow:hidden; background:white; border-radius:24px; box-shadow:0 25px 80px rgba(0,0,0,.3); }
.lesson-header { padding:15px 76px 15px 25px; display:block; border-bottom:1px solid var(--line); }
.lesson-header > .close-button { position:absolute; top:12px; right:20px; }
.close-button { width:38px; height:38px; border:0; border-radius:50%; background:#f0f4f1; color:var(--muted); font-size:1.5rem; cursor:pointer; }
.lesson-progress > span { display:block; margin-bottom:6px; color:var(--muted); font-size:.72rem; font-weight:800; }
.lesson-content { padding:clamp(20px,4vw,38px) clamp(26px,5vw,50px); overflow:auto; }
.lesson-content.compact-lesson { padding-top:20px; padding-bottom:20px; }
.lesson-content.compact-lesson h2 { margin-bottom:10px; }
.lesson-content.compact-lesson .explanation { margin:8px 0; line-height:1.5; }
.lesson-content.compact-lesson .rule-list { margin:12px 0; }
.lesson-content.compact-lesson .rule-list li { margin:6px 0; padding:9px 12px; }
.lesson-content.compact-lesson .concept-card { margin:14px 0; padding:15px; }
.lesson-content.compact-lesson .text-link { margin-top:10px; }
.lesson-content h2 { margin:0 0 16px; font-size:clamp(1.65rem,5vw,2.4rem); line-height:1.12; }
.lesson-content .explanation { color:var(--muted); line-height:1.65; }
.concept-card { margin:25px 0; padding:22px; border:2px solid #dcece2; border-radius:17px; background:#f5fbf7; text-align:center; }
.formula { font-family:"Cambria Math", Georgia, serif; font-size:1.65rem; font-weight:700; }
.formula sub { font-size:.6em; }
.roots-table-wrap { margin:24px 0; overflow-x:auto; border:1px solid var(--line); border-radius:15px; }
.roots-table { width:100%; border-collapse:collapse; background:white; text-align:center; }
.roots-table th { padding:11px 12px; color:white; background:var(--green); font-size:.78rem; letter-spacing:.03em; }
.roots-table td { padding:11px 12px; border-top:1px solid var(--line); font-weight:750; }
.roots-table td:nth-child(2),.roots-table td:nth-child(4) { color:var(--green-dark); background:#f3faf6; }
.roots-table th:nth-child(3),.roots-table td:nth-child(3) { border-left:1px solid var(--line); }
.rule-list { padding:0; list-style:none; }
.rule-list li { margin:10px 0; padding:12px 14px; border-radius:12px; background:#f4f7f5; }
.question-label { color:var(--green); font-size:.75rem; font-weight:900; letter-spacing:.08em; }
.options { margin-top:22px; display:grid; gap:11px; }
.option { padding:15px 17px; border:2px solid var(--line); border-radius:13px; background:white; color:var(--ink); text-align:left; font-weight:750; cursor:pointer; }
.option:hover:not(:disabled) { border-color:#8dc9a6; background:#f8fcfa; }
.option.selected { border-color:var(--green); background:var(--green-pale); }
.option.correct { border-color:var(--green); background:#dff5e7; }
.option.incorrect { border-color:#cf5a49; background:#fff0ed; }
.lesson-footer { min-height:88px; padding:18px 25px; display:flex; justify-content:flex-end; gap:20px; align-items:center; border-top:1px solid var(--line); background:#fbfcfb; }
.lesson-footer p { flex:1; margin:0; color:var(--muted); font-size:.85rem; font-weight:750; }
.lesson-footer p.good { color:var(--green-dark); }
.lesson-footer p.bad { color:#a63d2f; }
.lesson-action { min-width:150px; padding:13px 20px; border:0; border-radius:12px; color:white; background:var(--green); box-shadow:0 4px 0 var(--green-dark); font-weight:900; cursor:pointer; }
.lesson-action:disabled { background:#cfd8d2; box-shadow:0 4px 0 #b9c4bd; cursor:not-allowed; }
.result-wrap { text-align:center; }
.result-icon { width:96px; height:96px; margin:0 auto 20px; display:grid; place-items:center; border-radius:50%; background:#fff5d7; font-size:3rem; }
.result-score { color:var(--green); font-size:2.5rem; font-weight:950; }
.practice-modal { position:fixed; inset:0; z-index:30; padding:14px; background:rgba(12,35,23,.78); display:grid; place-items:center; }
.practice-shell { width:min(920px,100%); height:min(820px,calc(100vh - 28px)); overflow:hidden; display:grid; grid-template-rows:auto 1fr; background:#eef5f2; border-radius:22px; box-shadow:0 25px 80px rgba(0,0,0,.35); position:relative; }
.practice-header { min-height:70px; padding:12px 20px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; background:white; border-bottom:1px solid var(--line); }
.practice-header span,.practice-header strong { display:block; }
.practice-header span { color:var(--green); font-size:.65rem; font-weight:900; letter-spacing:.1em; }
.practice-header strong { margin-top:2px; }
.practice-header #practice-title { white-space:nowrap; }
.practice-header .flow-arrow { display:inline-block; margin:0 .16em; line-height:1; transform:translateY(-.1em); }
.block-dots { display:flex; gap:7px; }
.block-dots i { width:28px; height:7px; border-radius:99px; background:#dce5df; }
.block-dots i.active { background:var(--green); }
.block-dots i.done { background:var(--yellow); }
#practice-frame { width:100%; height:100%; border:0; background:#eef5f2; }
.practice-loading { position:absolute; inset:70px 0 0; z-index:2; display:grid; place-items:center; color:var(--muted); font-weight:800; background:#eef5f2; }
.block-result { position:absolute; inset:70px 0 0; z-index:3; padding:30px; display:grid; place-content:center; justify-items:center; overflow:auto; text-align:center; background:white; }
.block-result h2 { margin:4px 0 10px; font-size:clamp(1.7rem,5vw,2.5rem); }
.block-result > p:not(.eyebrow) { max-width:520px; color:var(--muted); line-height:1.55; }
.course-achievement-summary{width:min(620px,92vw);margin:14px 0 20px;padding:16px;border:1px solid #cfe4d7;border-radius:16px;background:var(--green-pale);text-align:left}.achievement-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.achievement-grid div{padding:11px;border-radius:12px;background:#fff;text-align:center}.achievement-grid strong,.achievement-grid span{display:block}.achievement-grid strong{color:var(--green-dark);font-size:1.35rem}.achievement-grid span{margin-top:3px;color:var(--muted);font-size:.72rem;font-weight:800}.achievement-invite{margin:13px 2px 0!important;color:var(--green-dark)!important;font-weight:800}.achievement-note{margin:7px 2px 0!important;font-size:.72rem!important}@media(max-width:620px){.achievement-grid{grid-template-columns:1fr}.course-achievement-summary{padding:12px}}
@media (max-width:560px) {
  .stats-cards { grid-template-columns:1fr; }
  #course-stats-modal { padding:10px; }
  #course-stats-modal .help-card { width:min(100%,420px); padding:18px 14px; border-radius:18px; }
  #course-stats-modal .stats-table { font-size:.82rem; }
  #course-stats-modal .stats-table th,#course-stats-modal .stats-table td { padding:7px 4px; }
  .practice-modal { padding:0; }
  .practice-shell { width:100%; height:100vh; border-radius:0; }
  .practice-header { padding:10px 12px; }
}
@media (max-width:850px) {
  .course-header { grid-template-columns:1fr auto; }
  .header-progress { grid-column:1/-1; grid-row:2; }
  .course-layout { grid-template-columns:1fr; gap:24px; margin-top:26px; }
  .course-summary { display:contents; }
  .course-summary > .eyebrow { order:1; margin-bottom:-20px; }
  #course-topic-content { order:2; }
  .summary-stats { order:3; margin:4px 0 0; }
  .learning-path { order:4; }
  .next-card { order:5; }
}
@media (max-width:560px) {
  .course-header { gap:10px; padding:12px 16px; }
  .brand img { width:140px; }
  .user-chip { max-width:130px; }
  .course-layout { width:min(100% - 20px,1160px); gap:24px; }
  .learning-path { padding:20px 14px; }
  .level-row:nth-child(even) { transform:translateX(18px); }
  .level-row { grid-template-columns:82px 1fr; gap:12px; }
  .level-node { width:76px; height:70px; }
  .level-row::after { left:38px; top:78px; }
  .lesson-modal { padding:0; }
  .lesson-panel { height:100vh; height:100dvh; min-height:0; max-height:100vh; max-height:100dvh; grid-template-rows:auto minmax(0,1fr) auto; border-radius:0; }
  .lesson-content { min-height:0; }
  .lesson-footer { align-items:stretch; flex-direction:column; gap:10px; padding-bottom:max(18px,env(safe-area-inset-bottom)); }
  .lesson-action { width:100%; }
  .course-journey { width:calc(100% - 10px); min-height:510px; padding:20px 8px 0; grid-template-columns:repeat(3,1fr); grid-template-rows:120px 120px 120px 110px; }
  .journey-track-desktop { display:none; }
  .journey-track-mobile { display:block; inset:0 8px auto; width:calc(100% - 16px); height:440px; }
  .journey-stop strong { max-width:105px; font-size:.78rem; line-height:1.15; }
  .journey-stop small { font-size:.72rem; }
  .journey-stop .journey-stars { margin-top:1px; font-size:.64rem; }
  .journey-stop:nth-child(3) { grid-column:1; grid-row:1; }
  .journey-stop:nth-child(4) { grid-column:2; grid-row:1; }
  .journey-stop:nth-child(5) { grid-column:3; grid-row:1; }
  .journey-stop:nth-child(6) { grid-column:3; grid-row:2; }
  .journey-stop:nth-child(7) { grid-column:2; grid-row:2; }
  .journey-stop:nth-child(8) { grid-column:1; grid-row:2; }
  .journey-stop:nth-child(9) { grid-column:1; grid-row:3; }
  .journey-stop:nth-child(10) { grid-column:2; grid-row:3; }
  .journey-stop:nth-child(11) { grid-column:3; grid-row:3; }
  .journey-stop:nth-child(12) { grid-column:3; grid-row:4; }
  .journey-stop:nth-child(13) { grid-column:2; grid-row:4; }
}