@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#f7f8fa;--ink:#202934;--muted:#637080;--green:#16654e;--line:#e0e5e8;--soft:#eaf3ef}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 'DM Sans',sans-serif}a{color:var(--green)}button,input{font:inherit}button,a,input,summary{touch-action:manipulation}button,summary{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #c78636;outline-offset:4px}button:disabled{opacity:.5;cursor:default}.sidebar{position:fixed;width:264px;inset:0 auto 0 0;background:#fff;border-right:1px solid var(--line);padding:34px 25px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink);font-size:12px;font-weight:700;line-height:1.7}.brand small{font-weight:400;color:var(--muted)}.logo{font-size:43px;letter-spacing:-5px;font-weight:800;line-height:1}.logo span{color:var(--green)}.nav-label{font-size:9px;letter-spacing:1.7px;color:var(--muted);margin:60px 0 18px}nav a{display:flex;gap:12px;align-items:center;padding:12px 10px;margin-bottom:7px;color:#56616f;text-decoration:none;font-size:13px;border-radius:7px}nav a.active{background:var(--soft);color:var(--green);font-weight:700}.side-note{border:1px solid var(--line);border-radius:10px;padding:18px;margin-top:44px;font-size:13px}.side-note p{color:var(--muted);font-size:12px;margin-bottom:0}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#339677;margin-right:7px}.side-footer{margin-top:auto;padding-top:30px;font-size:11px;color:var(--muted)}.side-footer small{display:block;margin-top:8px}main{max-width:1540px;margin-left:264px;padding:0 64px}.topbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);min-height:94px;font-size:10px;letter-spacing:1.2px;color:var(--muted)}.separator{margin:0 14px;color:#b8bfc6}.pill{background:#fff;border:1px solid var(--line);padding:6px 12px;border-radius:20px;letter-spacing:0;font-size:11px}.view{padding-top:48px;max-width:1120px}.eyebrow,.step{font-size:10px;letter-spacing:1.7px;font-weight:700;color:var(--green)}h1,h2,h3{font-family:Manrope,sans-serif;line-height:1.25}h1{font-size:clamp(38px,4.2vw,64px);letter-spacing:-2.8px;font-weight:800;margin:19px 0 22px}h1 em{font-style:normal;color:var(--green)}.lead{color:var(--muted);max-width:665px;font-size:16px;line-height:1.85}.hero-actions{display:flex;align-items:center;gap:28px;margin:30px 0 40px}.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;background:var(--green);color:#fff;text-decoration:none;border:0;border-radius:6px;padding:13px 20px;font-size:13px;font-weight:600}.text-link{font-size:13px;text-decoration:none;font-weight:700}.overview{display:flex;gap:60px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0}.overview>div{display:flex;gap:13px;align-items:center}.overview strong{font:700 26px Manrope,sans-serif}.overview span{font-size:11px;color:var(--muted)}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-top:36px}.section-heading h2{font-size:21px}.section-heading>span{font-size:9px;letter-spacing:1.6px;color:var(--muted)}.featured{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:30px;background:#fff;border:1px solid var(--line);border-radius:12px}.tag{font-size:9px;letter-spacing:1px;font-weight:700;color:var(--green)}.featured h2{font-size:24px;margin:13px 0}.featured p{font-size:13px;color:var(--muted);max-width:340px}.chips{display:flex;gap:7px;margin:20px 0}.chips span{font-size:10px;background:#f3f5f6;padding:3px 9px;border-radius:4px}.code-card{background:#18292b;color:#e3eeeb;border-radius:9px;align-self:center;overflow:hidden}.code-title{padding:14px 17px;border-bottom:1px solid #364547;font-size:10px;color:#becbc9}.code-title span{color:#849b96;margin-right:22px;letter-spacing:3px}.code-card pre{background:none;margin:0;padding:24px;font-size:13px}.muted{color:#98b0a9}.code-green{color:#9edabb}.code-result{padding:14px 17px;background:#203336;font-size:8px;display:flex;align-items:center;gap:12px;color:#bbcfcb}.code-result b{font-size:11px;color:#fff}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}.card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:10px}.card h3{font-size:17px;margin:12px 0}.card p{font-size:13px;color:var(--muted);margin-bottom:0}footer{border-top:1px solid var(--line);margin-top:55px;padding:24px 0;color:var(--muted);font-size:11px}footer small{font-size:10px}.lesson{background:#fff;border:1px solid var(--line);border-radius:10px;padding:30px;margin:22px 0;max-width:850px}.lesson h2{font-size:25px}.lesson p{font-size:15px}pre{background:#edf2f0;padding:20px;border-radius:7px;overflow:auto;line-height:1.8}code{font-family:Consolas,monospace;font-size:.94em}details{border-top:1px solid var(--line);padding:14px 0}summary{color:var(--green);font-weight:600;font-size:14px}.check{display:flex;gap:10px;align-items:baseline;background:var(--soft);padding:14px;border-radius:6px;margin-top:20px;font-size:13px}input[type=checkbox],input[type=radio]{accent-color:var(--green)}.notice{border-left:3px solid #6b9b85;background:#edf3ef;padding:18px 22px;margin:24px 0;font-size:13px;max-width:850px}.progress-panel{max-width:850px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:8px}.progress-panel small{display:block;color:var(--muted);font-size:11px}progress{display:block;width:100%;height:9px;margin:12px 0;accent-color:var(--green)}.trace{background:#f7f8fa;padding:20px;border-radius:7px}.trace li{padding:4px 10px}.trace li.current{background:#dcece2;border-radius:4px}.secondary{background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px 20px;color:var(--ink)}table{border-collapse:collapse;width:100%;font-size:14px;margin:20px 0}th,td{text-align:left;border-bottom:1px solid var(--line);padding:10px}fieldset{border:0;border-bottom:1px solid var(--line);padding:18px 0;margin:0 0 15px}legend{font-weight:600}fieldset label{display:block;padding:5px 0}.road-card{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:24px;margin:14px 0}.road-number{font-size:25px;color:var(--green);font-weight:700}.road-card h2{font-size:19px;margin:0 0 7px}.road-card p{font-size:13px;color:var(--muted);margin:0}.road-card small{font-size:11px}.status{font-size:10px;background:#f0f3f4;padding:5px 9px;border-radius:5px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.filters button{padding:7px 13px;border:1px solid var(--line);background:#fff;border-radius:20px;font-size:12px}.filters button[aria-pressed=true]{background:var(--green);color:#fff}#search{display:block;width:100%;max-width:550px;border:1px solid #aebbb5;background:#fff;border-radius:6px;padding:12px;margin-top:8px}#material-count{font-size:12px;color:var(--muted)}.material{display:flex;justify-content:space-between;gap:20px;background:#fff;border-bottom:1px solid var(--line);padding:15px 20px;text-decoration:none;overflow-wrap:anywhere}.material span{font-size:13px}.material small{font-size:10px;color:var(--muted);white-space:nowrap}.skip{position:fixed;top:-60px;left:15px;background:#fff;padding:10px;z-index:10}.skip:focus{top:10px}hr{border:0;border-top:1px solid var(--line);margin:24px 0}[hidden]{display:none!important}
@media(min-width:1600px){main{padding-right:100px;padding-left:100px}}@media(max-width:1100px){.sidebar{width:220px;padding:28px 18px}main{margin-left:220px;padding:0 30px}.featured{grid-template-columns:1fr}.overview{gap:30px}.code-card{max-width:500px}}@media(max-width:720px){.sidebar{position:static;width:auto;padding:18px 20px;border-bottom:1px solid var(--line)}.brand{font-size:11px}.logo{font-size:34px}.nav-label,.side-note,.side-footer{display:none}nav{display:flex;gap:6px;overflow-x:auto;margin-top:18px}nav a{white-space:nowrap;font-size:11px;padding:8px}main{margin:0;padding:0 20px}.topbar{min-height:65px;font-size:8px}.pill{font-size:9px}.view{padding-top:30px}h1{letter-spacing:-1.8px;font-size:41px}.lead{font-size:14px}.hero-actions{gap:18px;align-items:flex-start;flex-direction:column}.overview{gap:20px;justify-content:space-between}.overview>div{display:block}.overview span{display:block;font-size:9px}.featured{padding:20px}.bottom-grid{grid-template-columns:1fr}.lesson{padding:20px}.road-card{grid-template-columns:30px 1fr;padding:18px;gap:12px}.road-card>.status,.road-card>.text-link{grid-column:2}.material{padding:14px 10px}.material small{white-space:normal}.section-heading>span{font-size:8px}}
.practice-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.5fr);gap:24px;margin-top:30px;align-items:start}.practice-brief h2{font-size:25px}.practice-brief p{font-size:14px}.practice-brief .text-link{display:block;margin-top:22px}.example-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.example-pair small{font-size:10px;color:var(--muted);letter-spacing:1px}.example-pair pre{margin:5px 0;padding:13px;min-height:80px}.workspace{min-width:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 8px 30px #1c443a08}.workspace-top{background:#172a29;color:#d8e7e1;padding:16px 22px;display:flex;justify-content:space-between;font:12px Consolas,monospace}.workspace-top span:last-child{font:9px 'DM Sans',sans-serif;letter-spacing:1.8px;color:#94b6a9}.editor-label{display:block;background:#203532;color:#a5c3b7;padding:12px 22px 0;font-size:11px}#python-code{display:block;width:100%;min-height:270px;resize:vertical;border:0;border-radius:0;background:#203532;color:#e4f3ed;padding:18px 22px;font:15px/1.85 Consolas,monospace;tab-size:4}.workspace-actions{padding:16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.workspace-actions button{font-size:12px;padding:10px 13px}.download-code{background:none;border:0;color:var(--green);margin-left:auto}.workspace-help{font-size:11px;color:var(--muted);margin:0;padding:0 18px 16px}.io-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--line);padding:18px}.io-grid label{display:block;font-size:10px;letter-spacing:1px;font-weight:700;color:var(--muted);margin-bottom:10px}#python-input{width:100%;min-height:110px;resize:vertical;border:1px solid var(--line);border-radius:6px;padding:12px;font:14px/1.6 Consolas,monospace}.io-grid small{font-size:10px;color:var(--muted)}#python-output{margin:0;min-height:110px;max-height:300px;padding:12px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}#python-status{padding:12px 18px;margin:0;background:var(--soft);font-size:12px;color:var(--green)}.runtime-note{font-size:11px;color:var(--muted);margin-top:20px}textarea:focus-visible{outline:3px solid #c78636;outline-offset:-3px}@media(max-width:1100px){.practice-layout{grid-template-columns:1fr}.practice-brief{max-width:none}.practice-brief h3{margin-top:15px}}@media(max-width:520px){.io-grid{grid-template-columns:1fr}.download-code{margin-left:0}#python-code{font-size:13px}.workspace-actions{gap:6px}}
/* Exercise catalogue and feedback */
.bank-toolbar { display: grid; grid-template-columns: 1.4fr 1fr 1.5fr 1fr; gap: 14px; margin: 32px 0 18px; }
.bank-toolbar label { display: grid; gap: 8px; font-size: 13px; font-weight: 600; }
.bank-toolbar select, .bank-toolbar input { width: 100%; min-width: 0; border: 1px solid #cbd5ce; border-radius: 9px; background: white; padding: 12px; font: inherit; color: #203c30; }
.exercise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.exercise-card { display: flex; flex-direction: column; gap: 10px; border: 1px solid #dce3dd; background: white; border-radius: 14px; padding: 22px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.exercise-card:hover { border-color: #27815b; transform: translateY(-2px); }
.exercise-card h3 { margin: 6px 0; font-size: 20px; }
.exercise-card p { margin: 0 0 10px; color: #69786f; font-size: 13px; }
.exercise-card .text-link { margin-top: auto; }
.exercise-card.passed { border-color: #77ac8a; background: #f0f8f1; }
.exercise-nav { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin: 12px 0 32px; }
.exercise-nav a:first-child { margin-right: auto; }
.practice-title { font-size: clamp(30px, 4vw, 48px); margin-bottom: 12px; }
#exercise-brief { min-width: 0; }
#exercise-brief pre { white-space: pre-wrap; overflow-wrap: anywhere; }
#python-code { min-height: 340px; tab-size: 4; }
#python-code[readonly] { opacity: .75; }
#python-output { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 400px; overflow: auto; }
#error-line { margin: 0 20px 20px; }
.test-result { border: 1px solid #d6e2d8; border-left: 4px solid #34845c; border-radius: 10px; background: white; margin: 14px 0; padding: 18px 22px; }
.test-result summary { font-weight: 700; cursor: pointer; }
.test-fail { border-left-color: #bc4b33; }
.test-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.test-columns pre { background: #f4f6f3; color: #20382c; min-height: 56px; max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 14px; border-radius: 8px; }
.error-explanation { color: #963722; white-space: pre-wrap; }
#chapter-content h1 { margin-top: 24px; font-size: clamp(30px, 4vw, 48px); }
#progress-import { display: block; margin-top: 8px; max-width: 100%; }
[hidden] { display: none !important; }
@media (max-width: 1200px) { .exercise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bank-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .exercise-grid, .bank-toolbar, .test-columns { grid-template-columns: 1fr; } .exercise-nav { gap: 12px; } .workspace-actions { flex-wrap: wrap; } .section-heading { flex-wrap: wrap; gap: 12px; } }
/* Separate Python beginner course */
.course-lesson-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:26px 0}
.course-card{display:flex;gap:20px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;align-items:flex-start}
.course-card h2{font-size:19px;margin:10px 0 9px}
.course-card p{color:var(--muted);font-size:13px;margin:0 0 16px}
.course-number{font:800 28px Manrope,sans-serif;color:var(--green)}
#course-lesson-content{margin-top:30px}
#course-lesson-content .lesson{max-width:900px}
@media(max-width:850px){.course-lesson-list{grid-template-columns:1fr}}
@media(max-width:520px){.course-card{padding:18px;gap:14px}.course-number{font-size:23px}}

/* AlgoLab · interfață de învățare interactivă */
:root { --bg:#f6f5fb; --ink:#24243e; --muted:#77768f; --green:#7056e9; --line:#e7e5f0; --soft:#efecff; --purple:#7056e9; --navy:#191731; --gold:#f4b544; }
body { background:var(--bg); color:var(--ink); line-height:1.6; }
.sidebar { width:272px; padding:28px 20px; background:var(--navy); color:#fff; border-right:none; z-index:5; }
.brand { gap:12px; color:white; padding:6px 10px; font-size:14px; }
.brand small { font-size:11px; color:#a5a3c3; }
.logo { font-size:39px; color:white; background:#6e52ed; width:52px; height:52px; border-radius:16px; display:flex; justify-content:center; align-items:center; letter-spacing:-3px; }
.logo span { color:#9cfdde; }
.nav-label { color:#8c8aaa; margin:46px 13px 18px; font-size:10px; }
nav a { color:#c6c3e2; gap:13px; margin-bottom:7px; padding:13px 14px; font-size:14px; font-weight:600; border-radius:11px; }
nav a:hover { color:white; background:#2c2947; }
nav a.active { color:white; background:#6550ca; font-weight:700; box-shadow:0 7px 18px #100e2b3d; }
.nav-symbol { display:inline-flex; width:22px; justify-content:center; font-size:22px; line-height:1; font-weight:600; }
.sidebar-achievement { margin-top:45px; background:#292643; padding:20px 16px; border-radius:16px; }
.sidebar-level { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#eae7ff; gap:6px; }
.sidebar-level strong { color:#fff; }
.sidebar-level b { color:#fbd48d; font-size:12px; white-space:nowrap; }
.sidebar-achievement p { color:#aca9c8; font-size:11px; margin:12px 0 0; }
.meter,.path-meter,.mini-progress,.lesson-progress { height:9px; background:#e9e7f5; overflow:hidden; border-radius:999px; }
.meter { background:#46415e; margin-top:14px; }
.meter>div,.path-meter>span,.mini-progress>span,.lesson-progress>span { height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#8c71ff,#37d6b3); transition:width .2s; }
.side-footer { color:#a5a3c3; margin-top:auto; font-size:11px; padding:24px 12px 4px; }
.side-footer small { color:#807d9f; }
main { max-width:none; margin-left:272px; padding:0 56px; }
.topbar { min-height:84px; border-color:#e8e6f0; font-size:10px; font-weight:700; letter-spacing:1.2px; gap:15px; }
.topbar-stats { display:flex; gap:10px; }
.stat-pill { border:1px solid #e7e2f2; background:#fff; padding:8px 13px; border-radius:30px; font-size:12px; letter-spacing:0; white-space:nowrap; color:#5c567e; }
.stat-pill.xp { color:#7b55b6; background:#f0eaff; border-color:#dfd3ff; }
.view { max-width:1270px; padding-top:44px; }
h1 { margin:13px 0 20px; font-size:clamp(36px,4.4vw,62px); letter-spacing:-2.6px; }
h1 em { color:var(--purple); }
h2,h3 { letter-spacing:-.5px; }
.lead { line-height:1.75; color:#77768f; }
.eyebrow,.tag,.step { color:var(--purple); }
.button { background:var(--purple); border-radius:11px; padding:13px 20px; box-shadow:0 7px 16px #7355e830; font-size:13px; }
.button:hover:not(:disabled) { background:#5941d1; }
.secondary { border-color:#e3dff1; border-radius:10px; padding:11px 17px; }
.text-link { color:var(--purple); }
.card,.road-card,.exercise-card,.workspace,.lesson { box-shadow:0 6px 22px #29204606; }
.welcome-layout { display:grid; grid-template-columns:1.14fr 1fr; gap:36px; align-items:center; border-radius:26px; background:linear-gradient(120deg,#faf9ff,#eee9ff); padding:36px 45px; border:1px solid #ebe6ff; min-height:365px; }
.welcome-copy .lead { font-size:15px; max-width:520px; }
.start-learning { margin-top:17px; }
.welcome-visual { position:relative; min-height:270px; display:flex; align-items:center; justify-content:center; }
.visual-editor { background:#242340; border:1px solid #3f3b62; color:#f3efff; width:100%; max-width:420px; border-radius:17px; box-shadow:0 24px 40px #3125673a; transform:rotate(-3deg); overflow:hidden; }
.visual-editor-head { padding:13px 17px; display:flex; align-items:center; gap:6px; background:#302e50; font-size:11px; color:#a6a6c7; }
.visual-editor-head i { width:8px; height:8px; border-radius:50%; background:#ee7586; }
.visual-editor-head i:nth-child(2) { background:#ffcd7b; }
.visual-editor-head i:nth-child(3) { background:#6fe2bf; }
.visual-editor-head span { margin-left:14px; }
.visual-editor pre { padding:27px 23px 30px; margin:0; color:#d8cfff; background:none; font-size:14px; line-height:2; overflow:auto; }
.syntax-comment { color:#8a8eaf; }
.syntax-blue { color:#8fbaff; }
.syntax-gold { color:#f8d88a; }
.syntax-output { color:#72e0b7; }
.float-label { position:absolute; z-index:1; border-radius:12px; padding:10px 14px; font-weight:800; font-size:12px; box-shadow:0 10px 25px #27204430; }
.tag-one { right:-8px; top:15px; transform:rotate(5deg); color:#553ba3; background:white; }
.tag-two { left:-10px; bottom:5px; transform:rotate(4deg); background:#fce8b7; color:#664c17; }
.dashboard-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:24px; gap:16px; }
.dashboard-stats>div { display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; padding:21px 19px; border:1px solid var(--line); background:#fff; border-radius:17px; }
.dashboard-stats .mini-icon { grid-row:span 2; display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:#f0edff; color:#6c53db; font-size:22px; }
.dashboard-stats strong { font:800 23px Manrope,sans-serif; }
.dashboard-stats div>span:last-child { color:var(--muted); font-size:11px; }
.section-heading { margin-top:45px; }
.section-heading h2 { font-size:23px; }
.paths-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.path-card { display:flex; flex-direction:column; gap:12px; min-height:300px; padding:29px 30px 26px; background:#fff; border:1px solid var(--line); border-radius:21px; text-decoration:none; color:inherit; transition:transform .2s, box-shadow .2s; }
.path-card:hover { transform:translateY(-3px); box-shadow:0 14px 34px #41327b1a; }
.path-python { background:linear-gradient(135deg,#ffffff 50%,#f3eeff); }
.path-algo { background:linear-gradient(135deg,#ffffff 50%,#eaf8fb); }
.path-symbol { display:grid; place-items:center; width:58px; height:58px; background:#efebff; font-size:27px; border-radius:18px; }
.path-algo .path-symbol { background:#dcf4f6; color:#0d9399; }
.path-card h3 { margin:0; font-size:23px; }
.path-card p { margin:0 0 auto; color:var(--muted); font-size:13px; max-width:390px; }
.path-meta { display:flex; justify-content:space-between; font-size:12px; color:#625d79; font-weight:700; gap:12px; }
.path-meta span:last-child { color:var(--purple); }
.path-meter { height:8px; }
.dashboard-bottom { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:21px; }
.dashboard-bottom .card { border-radius:18px; padding:27px; }
.dashboard-bottom h3 { margin:10px 0; font-size:19px; }
.dashboard-bottom p { font-size:13px; }
.dashboard-bottom small { color:#858097; display:block; margin-top:12px; font-size:11px; }
.course-summary,.algo-progress { display:flex; align-items:center; gap:24px; margin:26px 0 28px; padding:19px 22px; background:white; border:1px solid var(--line); border-radius:15px; }
.course-summary-info { display:grid; gap:3px; min-width:240px; }
.course-summary-info strong,.algo-progress strong { font-size:16px; }
.course-summary-info span,.algo-progress span { color:var(--muted); font-size:12px; }
.course-summary .path-meter,.algo-progress .path-meter { flex:1; }
.algo-progress>div:first-child { display:flex; flex-direction:column; }
.course-lesson-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:25px 0; }
.course-card { gap:20px; border-radius:19px; padding:26px; min-height:208px; position:relative; }
.course-card-content { flex:1; min-width:0; }
.course-card h2 { font-size:19px; margin:7px 0; }
.course-card p { margin:0 0 16px; }
.course-number { width:58px; height:58px; border-radius:17px; background:#f0ebff; color:#7654d8; display:grid; place-items:center; font-size:22px; flex-shrink:0; }
.course-card.course-done { border-color:#b4e7cd; }
.course-card.course-done .course-number { color:#108766; background:#e4f9ed; }
.course-card.course-locked { background:#f8f8fc; opacity:.7; }
.course-card.course-locked .course-number { background:#ededf3; }
.course-status { position:absolute; top:14px; right:17px; font-size:10px; color:#9590aa; font-weight:700; }
.course-card .mini-progress { margin:9px 0 15px; height:6px; }
.course-card .locked-label { display:block; font-size:11px; color:#827d97; }
.road-card { border-radius:15px; }
.road-card .road-number { color:var(--purple); }
.road-card.road-done { border-color:#b0e7c9; background:#f7fffa; }
.exercise-card { border-radius:15px; }
.exercise-card:hover { border-color:var(--purple); }
.exercise-card.passed { border-color:#b1d8c4; background:#f0fff6; }
.bank-toolbar select,.bank-toolbar input { border-color:var(--line); color:var(--ink); }
.bank-toolbar select:focus,.bank-toolbar input:focus { outline:2px solid #b5a9ff; }
.lesson-player { max-width:820px; margin:25px auto 65px; padding:32px; background:#fff; border-radius:24px; border:1px solid var(--line); box-shadow:0 20px 50px #2823480e; }
.lesson-top { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.player-title { font-size:clamp(24px,3vw,32px); letter-spacing:-1px; margin:8px 0 15px; }
.lesson-step-counter { background:#eeeaff; color:#6b51ca; border-radius:12px; padding:9px 14px; font-weight:800; white-space:nowrap; }
.lesson-progress { margin:8px 0 15px; height:10px; }
.step-dots { display:flex; justify-content:center; gap:8px; margin:17px 0 26px; }
.step-dot { width:9px; height:9px; border-radius:50%; background:#e1dfeb; }
.step-dot.done { background:#4fc8a4; }
.step-dot.current { background:var(--purple); width:27px; border-radius:9px; }
.lesson-screen { min-height:340px; padding:30px 27px; background:#fcfbff; border-radius:19px; border:1px solid #f0edf9; }
.lesson-screen h2 { font-size:clamp(20px,3vw,27px); margin:14px 0 18px; }
.lesson-screen p { color:#68667f; font-size:15px; }
.lesson-illustration { display:flex; gap:13px; align-items:center; font-size:37px; }
.lesson-illustration span { font-size:12px; color:#8d82b3; font-weight:700; }
.concept-highlight { border-left:4px solid #a68cfb; background:#f1edff; padding:17px 21px; color:#594b86; border-radius:0 11px 11px 0; margin:20px 0; font-size:14px; }
.concept-code { background:#24233e; color:#edeaff; font-size:15px; padding:24px; white-space:pre-wrap; overflow-wrap:anywhere; }
.question-kicker { font-size:11px; color:#7056e9; font-weight:800; letter-spacing:1.2px; }
.quiz-options { display:grid; gap:12px; margin-top:21px; }
.quiz-option { width:100%; display:flex; text-align:left; align-items:center; gap:16px; color:var(--ink); padding:14px 17px; border:1.5px solid #e5e2f2; border-radius:13px; background:#fff; font-weight:600; font-size:14px; cursor:pointer; }
.quiz-option:hover:not(:disabled) { border-color:#a08cfa; background:#f7f4ff; }
.quiz-option .option-letter { display:grid; place-items:center; flex-shrink:0; width:34px; height:34px; border-radius:9px; background:#f2f0fa; font-size:12px; }
.quiz-option.correct { background:#e7f9f0; border-color:#49bc87; color:#186346; }
.quiz-option.wrong { background:#fff1ef; border-color:#ef9e93; }
.quiz-option:disabled { opacity:1; cursor:default; }
.option-check { margin-left:auto; }
.quiz-feedback { margin-top:20px; padding:14px 16px; background:#f2f0fc; color:#73669c; font-size:13px; border-radius:12px; }
.quiz-feedback.correct-feedback { background:#e8f9ef; color:#196e4e; }
.quiz-feedback.wrong-feedback { background:#fff0ed; color:#a44838; }
.challenge-icon { display:grid; place-items:center; background:#e9e5ff; color:#7655d7; border-radius:15px; width:54px; height:54px; margin-bottom:18px; font-size:30px; }
.challenge-preview { background:#f1eff8; border-radius:13px; padding:15px 19px; margin:20px 0; }
.challenge-preview div { font-size:11px; font-weight:800; color:#77718f; margin-bottom:8px; text-transform:uppercase; }
.challenge-preview pre { background:white; padding:12px; margin:0; white-space:pre-wrap; }
.challenge-help { font-size:13px!important; }
.finish-icon { font-size:64px; text-align:center; }
.reward-list { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.reward-list span { color:#7856a7; background:#f0eaff; padding:9px 12px; border-radius:10px; font-size:12px; font-weight:700; }
.lesson-controls { margin-top:20px; display:flex; justify-content:space-between; align-items:center; gap:15px; }
.lesson-controls a.secondary { text-decoration:none; color:var(--ink); }
.lesson-controls .button { text-align:center; }
.back-link { margin:5px 0 10px; display:inline-block; }
.workspace-top { background:#252342; }
.editor-label,#python-code { background:#2d2a4b; }
#python-status { color:#5b42b6; background:#f1edff; }
footer { margin-top:65px; }
@media (min-width:1600px) { main { padding-left:82px; padding-right:82px; } }
@media (max-width:1150px) { main { padding:0 28px; } .dashboard-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .welcome-layout { padding:30px; } .course-status { display:none; } }
@media (max-width:850px) { .welcome-layout { grid-template-columns:1fr; } .welcome-visual { min-height:240px; } .dashboard-bottom,.paths-grid { grid-template-columns:1fr; } .course-lesson-list { grid-template-columns:1fr; } }
@media (max-width:720px) { .sidebar { position:static; width:auto; padding:16px 18px 12px; border-radius:0; } .brand { padding:0; } .logo { font-size:31px; width:42px; height:42px; } .sidebar-achievement,.nav-label,.side-footer { display:none; } nav { margin-top:15px; overflow-x:auto; padding-bottom:2px; } nav a { padding:9px 12px; margin:0; font-size:12px; flex-shrink:0; } .nav-symbol { font-size:17px; } main { margin:0; padding:0 16px; } .topbar { min-height:72px; flex-wrap:wrap; } .topbar-breadcrumb { display:none; } .topbar .separator { display:none; } .topbar-stats { gap:4px; } .stat-pill { padding:6px 9px; font-size:10px; } .view { padding-top:23px; } h1 { font-size:clamp(34px,8vw,45px); letter-spacing:-1.5px; } .welcome-layout { padding:24px 22px; border-radius:19px; } .welcome-visual { min-height:200px; } .visual-editor { max-width:calc(100% - 16px); } .visual-editor pre { font-size:11px; padding:15px; } .float-label { font-size:10px; } .dashboard-stats { gap:10px; } .dashboard-stats>div { padding:14px; } .dashboard-stats .mini-icon { width:35px; height:35px; font-size:16px; } .dashboard-stats strong { font-size:19px; } .paths-grid { gap:12px; } .path-card { min-height:260px; padding:23px; } .section-heading { margin-top:30px; flex-wrap:wrap; gap:0; } .course-summary,.algo-progress { flex-direction:column; align-items:stretch; gap:13px; } .course-card { padding:18px; } .course-number { height:43px; width:43px; font-size:17px; border-radius:12px; } .lesson-player { margin:16px auto 35px; padding:16px; border-radius:17px; } .lesson-screen { padding:19px 15px; min-height:310px; } .lesson-controls .button { font-size:12px; padding:11px; } .exercise-grid { grid-template-columns:1fr; } .bank-toolbar { grid-template-columns:1fr 1fr; } }
@media(max-width:460px) { .topbar { font-size:9px; } .dashboard-stats>div { grid-template-columns:1fr; } .dashboard-stats .mini-icon { grid-row:auto; } .bank-toolbar { grid-template-columns:1fr; } .lesson-top { align-items:flex-start; } .player-title { font-size:24px; } .lesson-screen { padding:18px 14px; } .lesson-controls { gap:8px; } .lesson-controls a,.lesson-controls button { font-size:11px; } }
.chapter-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:20px 0 24px; }
.chapter-trophy { display:grid; justify-items:center; gap:6px; font-size:40px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:14px 25px; flex-shrink:0; }
.chapter-trophy span { font-size:11px; color:var(--muted); font-weight:700; }
.chapter-learning { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.chapter-learning .card,.chapter-quiz { border-radius:18px; padding:27px; }
.chapter-learning p { color:#6c6983; font-size:14px; }
.chapter-learning .concept-code { background:#25233d; color:#e9e2ff; border-radius:12px; font-size:13px; white-space:pre-wrap; }
.chapter-quiz { margin-top:22px; max-width:none; }
.chapter-quiz h2 { font-size:21px; margin:14px 0 22px; }
.chapter-quiz .quiz-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:950px) { .chapter-learning { grid-template-columns:1fr; } }
@media(max-width:720px) { .chapter-header { align-items:flex-start; } .chapter-trophy { display:none; } .chapter-quiz .quiz-options { grid-template-columns:1fr; } .chapter-learning .card,.chapter-quiz { padding:19px; } }

/* Trasee ghidate: explicație → quiz → cod în același ecran → următorul pas. */
.lesson-player.has-editor { max-width:1190px; }
.lesson-player.has-editor .lesson-screen { background:transparent; border:0; padding:12px 0 0; }
.lesson-player.has-editor .lesson-screen>h2 { margin-top:4px; }
.inline-editor-slot { margin:20px 0; }
.inline-mode .practice-layout { margin-top:12px; grid-template-columns:minmax(240px,.87fr) minmax(0,1.43fr); gap:18px; }
.inline-mode #exercise-progress { margin:15px 0 4px; }
.inline-mode #exercise-brief { padding:22px; }
.inline-mode #exercise-brief .example-pair { grid-template-columns:1fr 1fr; }
.inline-mode #test-results { margin-top:12px; }
.lesson-player.has-editor .lesson-screen>p { margin:8px 0; }
.lesson-controls { position:sticky; bottom:10px; z-index:4; background:rgba(255,255,255,.96); padding:12px; border:1px solid #e8e4f4; border-radius:14px; box-shadow:0 10px 26px #29214b14; }
.lesson-controls .button:disabled { opacity:.6; }
.step-dots { flex-wrap:wrap; }
.learning-points { display:grid; gap:12px; margin:24px 0; }
.learning-points>div { display:flex; align-items:flex-start; gap:14px; background:white; border:1px solid #ebe6fa; padding:14px 16px; border-radius:13px; }
.learning-points b { display:grid; place-items:center; flex:0 0 32px; height:32px; color:#6750bb; background:#eeeaff; border-radius:10px; }
.learning-points p { margin:2px 0; }
@media(max-width:1330px) { .inline-mode .practice-layout { grid-template-columns:1fr; } .inline-mode .practice-brief { max-width:none; } }
@media(max-width:720px) { .lesson-controls { bottom:3px; } .inline-mode #exercise-brief { padding:17px; } .lesson-player.has-editor { padding:12px; } .inline-mode .io-grid { grid-template-columns:1fr; } .inline-mode .example-pair { grid-template-columns:1fr 1fr; } .inline-mode #python-code { min-height:230px; } }
/* Short guided lessons and chapter paths */
.road-card { flex-wrap: wrap; }
.unit-path { flex-basis: 100%; margin: 12px 0 0; border-top: 1px solid #e0e8df; padding-top: 14px; }
.unit-path summary { cursor: pointer; color: #227044; font-weight: 700; }
.unit-nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 20px 0 4px; }
.unit-node { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid #dde7d8; border-radius: 15px; color: #294632; background: #fff; text-decoration: none; }
.unit-node b { display: grid; place-items: center; flex: 0 0 46px; height: 46px; border-radius: 50%; background: #eaf0e5; border-bottom: 4px solid #c6d3bf; font-size: 19px; }
.unit-node small { display: block; margin-top: 6px; font-size: 12px; color: #637260; }
.unit-node.unit-current { border-color: #64a945; background: #f4fbeb; }
.unit-current b, .unit-done b { color: #fff; background: #58a729; border-bottom-color: #378013; }
.unit-done { border-color: #96b783; }
.study-notebook { margin-top: 24px; border-top: 1px solid #dbe4d5; padding-top: 18px; }
.study-notebook summary { font-weight: 700; color: #377742; cursor: pointer; }
.study-notebook article { border-top: 1px solid #e3e8df; margin-top: 20px; padding-top: 16px; }
.study-notebook pre { font-size: 14px; padding: 16px; background: #eef3eb; color: #1e3829; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 12px; }
#additional-inputs label { display: grid; gap: 8px; margin-top: 18px; text-transform: none; font-size: 14px; }
#additional-inputs textarea { min-height: 120px; width: 100%; box-sizing: border-box; font-family: Consolas, monospace; }
.lesson-screen > p { line-height: 1.75; }
@media (max-width: 700px) { .unit-nodes { grid-template-columns: 1fr; } .unit-node b { flex-basis: 40px; height: 40px; } }
.unit-path { grid-column: 1 / -1; }
.logo { letter-spacing: -2px; }
.inline-mode .practice-brief a[href^="#"] { display: none; }
#python-stop:disabled { display: none; }
#python-input.module-code { min-height: 280px; font-family: Consolas, monospace; font-size: 14px; }
@media (max-width:720px) { .sidebar nav { display:grid; grid-template-columns:1fr 1fr; overflow:visible; gap:6px; } .sidebar nav a { white-space:normal; min-width:0; padding:9px 10px; } }
/* Un singur traseu, lecții centrate și verificare cu date automate. */
[hidden] { display:none !important; }
.sidebar { width:190px; }
main { margin-left:190px; }
.dashboard-view .welcome-layout { display:block; padding:25px 30px; }
.dashboard-view .welcome-visual,.dashboard-view .dashboard-stats { display:none; }
.dashboard-view h1 { font-size:36px; margin:10px 0; }
.dashboard-view .lead { margin:10px 0 20px; }
.unified-map { max-width:700px; margin:25px auto; }
.path-banner { padding:24px; border-radius:20px; background:var(--purple); color:white; margin:25px 0; }
.path-banner span { font-size:11px; font-weight:800; letter-spacing:2px; }
.path-banner h2 { margin:7px 0; font-size:24px; }
.path-banner p { margin:0; font-size:13px; }
.unified-map .course-lesson-list { grid-template-columns:1fr; gap:12px; }
.unified-map .course-card { max-width:550px; margin:0 auto; width:100%; border:0; background:transparent; box-shadow:none; }
.unified-map .course-number { width:68px; height:68px; border-radius:50%; background:var(--purple); color:white; box-shadow:0 6px 0 #4936a3; }
.unified-map .course-locked .course-number { background:#dedbe8; color:#858099; box-shadow:0 6px 0 #c1bdce; }
.unified-map .course-card:nth-child(even) { padding-left:60px; }
.unified-map .course-card .mini-progress,.unified-map .course-status { display:none; }
.unified-map .road-card { margin:20px 0; padding:22px; grid-template-columns:40px 1fr; box-shadow:none; }
.unified-map .road-card > .text-link { grid-column:2; }
.unified-map .unit-path { border:0; }
.unified-map .unit-nodes { grid-template-columns:1fr; padding:15px 0; gap:20px; }
.unified-map .unit-node { max-width:460px; border:0; background:transparent; }
.unified-map .unit-node:nth-child(even) { margin-left:35px; }
.unified-map .unit-node b { border-radius:50%; width:60px; height:60px; flex-basis:60px; background:#ebe8f4; box-shadow:0 5px 0 #d4cee6; }
.unified-map .unit-current b { background:var(--purple); color:white; box-shadow:0 5px 0 #4936a3; }
.unified-map .unit-done b { background:#46ba98; color:white; box-shadow:0 5px 0 #2b9376; }
.inline-mode .practice-layout { display:flex; flex-direction:column; max-width:720px; margin:12px auto; gap:12px; }
.inline-mode .practice-brief,.inline-mode .workspace { width:100%; }
.inline-mode #exercise-brief { border:0; box-shadow:none; padding:0 10px; background:transparent; }
.inline-mode #exercise-brief > .source-note,.inline-mode #exercise-brief > .tag { display:none; }
.inline-mode #exercise-brief > p { margin:5px 0 15px; font-size:16px; }
.inline-mode #exercise-brief h3 { font-size:14px; margin:12px 0 0; }
.inline-mode #exercise-brief details { padding:8px 0; }
.inline-mode #python-code { min-height:200px; }
#python-run,#python-download,.workspace-help { display:none; }
#module-download { margin-left:auto; }
.workspace-actions { padding:12px 16px; }
#python-check { width:100%; font-size:15px; font-weight:800; padding:12px; box-shadow:0 4px 0 #4936a3; }
.io-grid,.inline-mode .io-grid { display:flex; flex-direction:column; padding:12px 16px; }
#custom-input { order:2; padding:10px 0 0; }
#custom-input summary { font-size:12px; }
#custom-input label { margin-top:12px; }
#try-input { margin-top:10px; }
#python-output { min-height:45px; }
.no-input-example > div:first-child { display:none; }
.example-pair.no-input-example { grid-template-columns:1fr; }
.lesson-player.has-editor { max-width:820px; }
@media(max-width:720px) { .sidebar { width:auto; } main { margin-left:0; } .sidebar nav { grid-template-columns:1fr; } .sidebar nav a { justify-content:center; } .dashboard-view .welcome-layout { padding:20px; } .dashboard-view h1 { font-size:30px; } .unified-map .course-card:nth-child(even) { padding-left:35px; } .unified-map .road-card { padding:15px; } .unified-map .unit-node:nth-child(even) { margin-left:15px; } }
/* Navigare fără bară laterală: sigla readuce utilizatorul la traseu. */
main { margin:0 auto; width:100%; max-width:1160px; padding:0 32px; }
.topbar { gap:16px; }
.header-brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; letter-spacing:0; }
.header-brand strong { font:800 30px Manrope,sans-serif; }
.header-brand strong span { color:var(--purple); }
.header-brand small { font-size:10px; color:var(--muted); letter-spacing:1px; }
.view { margin-left:auto; margin-right:auto; }
@media(min-width:1600px) { main { padding:0 32px; } }
@media(max-width:720px) { main { margin:0 auto; padding:0 16px; } .topbar { min-height:65px; } .header-brand { gap:8px; } .header-brand strong { font-size:26px; } .header-brand small { font-size:9px; } }