:root{--bg:#0b1020;--surface:#121829;--card:#172033;--border:#26304a;--accent:#4d96e8;--accent2:#9b7fd4;--accent3:#5fb3a3;--warn:#e0a44a;--ok:#4caf82;--text:#eef2fb;--muted:#8b96b0;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;
--radius-sm:8px;--radius-md:12px;--radius-lg:20px}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden;}
img{max-width:100%;}
/* App layout */
.app{display:flex;flex-direction:column;min-height:100vh;}
/* Topbar */
.topbar{display:flex;align-items:center;gap:1rem;padding:0 1.2rem;height:56px;
background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;}
.menu-btn{background:none;border:none;color:var(--text);font-size:1.3rem;cursor:pointer;padding:0.3rem;}
.topbar-title{font-family:'Playfair Display',serif;font-weight:700;font-size:1.1rem;flex:1;}
.buy-btn{background:var(--accent);color:#000;border:none;border-radius:8px;padding:0.45rem 1rem;
font-weight:700;font-size:0.85rem;cursor:pointer;white-space:nowrap;}
/* Sidebar */
.sidebar{position:fixed;left:-260px;top:0;width:260px;height:100vh;background:var(--surface);
border-right:1px solid var(--border);z-index:200;transition:left 0.3s;overflow-y:auto;padding-bottom:2rem;}
.sidebar.open{left:0;}
.sidebar-head{padding:1rem 1.2rem;border-bottom:1px solid var(--border);}
.sidebar-logo{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:900;color:var(--accent);}
.sidebar-section{padding:0.7rem 1.2rem 0.3rem;font-size:0.68rem;text-transform:uppercase;
letter-spacing:0.1em;color:var(--muted);font-weight:700;}
.nav-item{display:flex;align-items:center;gap:0.7rem;padding:0.6rem 1.2rem;cursor:pointer;
font-size:0.87rem;color:#c8c8e0;transition:all 0.15s;border:none;background:none;width:100%;text-align:left;}
.nav-item:hover,.nav-item.active{background:rgba(59,158,255,0.08);color:var(--accent);}
.nav-num{font-size:0.7rem;color:var(--muted);width:22px;flex-shrink:0;text-align:right;}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:150;}
.overlay.open{display:block;}
/* Content */
.content{flex:1;padding:1.2rem;max-width:860px;margin:0 auto;width:100%;}
/* Pages */
.page{display:none;}
.page.active{display:block;}
/* Lesson header */
.lesson-badge{display:inline-block;background:var(--accent2);color:#fff;border-radius:6px;
padding:0.25rem 0.7rem;font-size:0.72rem;font-weight:700;text-transform:uppercase;
letter-spacing:0.07em;margin-bottom:0.7rem;}
.lesson-h1{font-family:'Playfair Display',serif;font-size:1.7rem;font-weight:900;
margin-bottom:0.4rem;line-height:1.2;}
.lesson-sub{color:var(--muted);font-size:0.87rem;margin-bottom:1.2rem;}
/* Tabs */
.ltabs{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1.2rem;border-bottom:1px solid var(--border);padding-bottom:0.8rem;}
.ltab{background:none;border:1px solid var(--border);border-radius:7px;padding:0.4rem 0.85rem;
font-size:0.82rem;color:var(--muted);cursor:pointer;transition:all 0.15s;font-weight:500;}
.ltab:hover{border-color:var(--accent2);color:var(--text);}
.ltab.active{background:var(--accent2);border-color:var(--accent2);color:#fff;font-weight:700;}
.lpanel{display:none;}
.lpanel.active{display:block!important;overflow:visible!important;height:auto!important;min-height:1px;contain:none!important;}
/* Sections */
.section{margin-bottom:1.5rem;}
.section h2{font-size:1.12rem;font-weight:800;margin:1.6rem 0 1.1rem;padding:0.75rem 1.1rem;
background:linear-gradient(135deg,#0d1436,#0a0e27);border:1.5px solid #2a5fc4;border-left:5px solid #4d96e8;
border-radius:10px;color:#4d96e8;letter-spacing:0.01em;box-shadow:0 4px 14px rgba(0,0,0,0.3);}
.section h3{font-size:0.96rem;font-weight:800;margin:1.2rem 0 0.65rem;color:#4d96e8;padding-left:0.5rem;
border-left:3px solid rgba(77,150,232,0.4);}
.section p{font-size:0.88rem;color:#c8c8e0;line-height:1.7;margin-bottom:0.5rem;}
.section ul{padding-left:1.2rem;}
.section li{font-size:0.88rem;color:#c8c8e0;line-height:1.7;margin-bottom:0.3rem;}
/* Formula */
.formula{background:linear-gradient(135deg,#0d1436,#0a0e27);border:1.5px solid #2a5fc4;border-radius:12px;
padding:1.1rem 1.3rem;font-family:'Courier New',monospace;font-size:0.95rem;color:#e8ecf7;letter-spacing:0.02em;
margin:1.2rem 0;overflow-x:auto;white-space:pre-wrap;word-break:break-word;line-height:1.9;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,0.3);}
/* Table */
.table-wrap{overflow-x:auto;margin:1.2rem 0;border:1.5px solid #2a5fc4;border-radius:12px;background:linear-gradient(135deg,#0d1436,#0a0e27);box-shadow:0 4px 14px rgba(0,0,0,0.3);}
table{width:100%;border-collapse:collapse;font-size:0.83rem;}
th{background:#0d1330;padding:0.65rem 0.9rem;text-align:left;font-weight:800;
border:1px solid #2a5fc4;color:#4d96e8;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.04em;}
td{padding:0.6rem 0.9rem;border:1px solid #2a5fc4;color:#e8ecf7;vertical-align:top;background:#0a0e27;}
tr:nth-child(even) td{background:#0d1330;}
/* Example */
.example{background:linear-gradient(135deg,#0d1436,#0a0e27);border:1.5px solid #2a5fc4;border-radius:14px;
padding:1.1rem 1.3rem;margin:1.2rem 0;box-shadow:0 4px 14px rgba(0,0,0,0.35);}
.example-label{font-size:0.78rem;font-weight:800;color:#4d96e8;text-transform:uppercase;
letter-spacing:0.04em;margin-bottom:0.5rem;}
/* Warn / Info */
.warn{background:linear-gradient(135deg,#0d1436,#0a0e27);border:1.5px dashed #4d96e8;border-radius:14px;
padding:1.1rem 1.3rem;margin:1.2rem 0;box-shadow:0 4px 14px rgba(0,0,0,0.35);}
.warn-label{font-size:0.78rem;font-weight:800;color:#4d96e8;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:0.5rem;}
.warn p,.info p{font-size:0.85rem;color:#c8c8e0;line-height:1.6;}
.info{background:linear-gradient(135deg,#0d1436,#0a0e27);border:1.5px solid #2a5fc4;border-radius:14px;
padding:1.1rem 1.3rem;margin:1.2rem 0;box-shadow:0 4px 14px rgba(0,0,0,0.35);}
.info-label{font-size:0.78rem;font-weight:800;color:#4d96e8;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:0.5rem;}
/* Highlight */
.hl{color:#4d96e8;font-weight:800;background:rgba(77,150,232,0.12);padding:0.05em 0.3em;border-radius:4px;}
.hl2{color:#c9b3ff;font-weight:700;}
.hl3{color:var(--warn);font-weight:700;}
/* Tips */
.tips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.8rem;margin-top:0.5rem;}
.tip-card{background:linear-gradient(135deg,#0d1436,#0a0e27);border:1px solid #2a3550;border-radius:12px;padding:1.1rem;border-top:4px solid var(--accent);box-shadow:0 4px 14px rgba(0,0,0,0.3);}
.tip-card.purple{border-top-color:var(--accent2);}
.tip-card.yellow{border-top-color:var(--warn);}
.tip-card.red{border-top-color:var(--accent3);}
.tip-icon{font-size:1.4rem;margin-bottom:0.4rem;}
.tip-card h4{font-size:0.85rem;font-weight:700;margin-bottom:0.3rem;}
.tip-card p{font-size:0.8rem;color:var(--muted);line-height:1.6;}
/* Tasks */
.task{background:var(--card);border:1px solid var(--border);border-radius:11px;
padding:1rem 1.2rem;margin-bottom:1rem;}
.task-meta{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.6rem;}
.task-num{font-size:0.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;}
.task-q{font-size:0.88rem;color:#c8c8e0;line-height:1.7;margin-bottom:0.7rem;}
.badge{font-size:0.68rem;font-weight:700;border-radius:4px;padding:0.15rem 0.5rem;}
.b-easy{background:rgba(59,158,255,0.15);color:var(--accent);}
.b-med{background:rgba(124,92,252,0.15);color:#c9b3ff;}
.b-hard{background:rgba(255,107,107,0.15);color:var(--accent3);}
.ans-btn{background:rgba(124,92,252,0.12);border:1px solid rgba(124,92,252,0.3);color:#c9b3ff;
border-radius:7px;padding:0.4rem 0.9rem;font-size:0.8rem;cursor:pointer;transition:all 0.15s;}
.ans-btn:hover{background:rgba(124,92,252,0.2);}
.sol-btn{margin-top:0.8rem;background:linear-gradient(135deg,var(--accent2),#7c5cfc);
  border:none;border-radius:10px;padding:0.6rem 1.1rem;font-size:0.85rem;font-weight:700;
  box-shadow:0 3px 10px rgba(124,92,252,0.35);
  color:#fff;cursor:pointer;font-weight:600;transition:all 0.15s;display:inline-block;}
.sol-btn:hover{opacity:0.92;
  transform:translateY(-1px);}
.ans-box{display:none;margin-top:0.8rem;background:linear-gradient(135deg,#0d1436,#0a0e27);border:1.5px solid #2a5fc4;
border-radius:12px;padding:1rem;font-size:0.85rem;color:#e8ecf7;line-height:1.7;box-shadow:0 4px 14px rgba(0,0,0,0.3);}
.ans-box.show{display:block;}
.ans-label{font-size:0.7rem;font-weight:700;color:var(--accent);margin-bottom:0.4rem;}
/* Quiz */
.quiz-wrap{max-width:600px;}
.qcard{background:linear-gradient(135deg,#0d1436,#0a0e27);border:1.5px solid #2a5fc4;border-radius:16px;padding:1.5rem;box-shadow:0 4px 20px rgba(0,0,0,0.3);}
.qprow{display:flex;justify-content:space-between;font-size:0.78rem;color:var(--muted);margin-bottom:0.5rem;}
.qptrack{background:#1e2740;border-radius:4px;height:6px;margin-bottom:1.2rem;overflow:hidden;}
.qpfill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));border-radius:4px;transition:width 0.4s;}
.qq{font-size:0.95rem;font-weight:600;margin-bottom:1rem;line-height:1.5;}
.qopts{display:flex;flex-direction:column;gap:0.5rem;}
.qo{background:#0d1330;border:1.5px solid #2a3550;border-radius:10px;
padding:0.75rem 1rem;text-align:left;cursor:pointer;font-size:0.85rem;color:#e8ecf7;
transition:all 0.15s;display:flex;align-items:center;gap:0.7rem;}
.qo:hover{border-color:var(--accent2);background:rgba(124,92,252,0.1);transform:translateX(2px);}
.ql{background:var(--border);border-radius:4px;padding:0.1rem 0.4rem;font-size:0.7rem;font-weight:700;flex-shrink:0;}
.qo.correct{border-color:var(--accent);background:rgba(59,158,255,0.08);color:var(--accent);}
.qo.wrong{border-color:var(--accent3);background:rgba(255,107,107,0.08);color:var(--accent3);}
.qfb{display:none;margin-top:0.8rem;padding:0.7rem 1rem;border-radius:8px;font-size:0.83rem;line-height:1.5;}
.qfb.show{display:block;}
.qf-ok{background:rgba(59,158,255,0.08);border:1px solid rgba(59,158,255,0.25);color:var(--accent);}
.qf-fail{background:rgba(255,107,107,0.08);border:1px solid rgba(255,107,107,0.2);color:var(--accent3);}
.qnxt{display:none;margin-top:1rem;background:var(--accent2);border:none;border-radius:8px;
padding:0.6rem 1.4rem;color:#fff;font-weight:700;cursor:pointer;font-size:0.88rem;}
.qnxt.show{display:block;}
.qres{text-align:center;padding:1.5rem;}
.qres-score{font-size:2.5rem;font-weight:900;color:var(--accent);font-family:'Playfair Display',serif;margin:0.5rem 0;}
.qretry{background:var(--accent2);border:none;border-radius:8px;padding:0.6rem 1.5rem;
color:#fff;font-weight:700;cursor:pointer;font-size:0.88rem;margin-top:0.5rem;}
/* Schema / solved */
.schema{background:var(--card);border-radius:12px;padding:1.1rem;margin:0.8rem 0;border:2px dashed var(--border);}
.schema-title{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--accent);font-weight:700;margin-bottom:0.6rem;}
.solved{background:rgba(59,158,255,0.03);border:1px solid rgba(59,158,255,0.12);border-radius:10px;padding:1rem 1.2rem;margin:0.7rem 0;}
.step-row{display:flex;gap:0.7rem;margin:0.4rem 0;align-items:flex-start;}
.step-badge{background:var(--accent2);color:#fff;border-radius:5px;padding:0.1rem 0.45rem;font-size:0.68rem;font-weight:700;flex-shrink:0;margin-top:0.15rem;}
.step-badge.green{background:var(--accent);color:#000;}
.step-badge.orange{background:var(--warn);color:#000;}
.step-badge.red{background:var(--accent3);}
.step-content{font-size:0.86rem;color:#c8c8e0;line-height:1.6;}
/* Named rxn */
.named-rxn{background:linear-gradient(135deg,#0d1436,#0a0e27);border:1.5px solid #2a5fc4;border-left:4px solid #4d96e8;border-radius:12px;padding:1rem 1.2rem;margin:0.9rem 0;box-shadow:0 4px 14px rgba(0,0,0,0.3);}
.named-rxn-title{font-size:0.76rem;color:#4d96e8;font-weight:800;text-transform:uppercase;letter-spacing:0.03em;margin-bottom:0.5rem;}
/* Hbox */
.hbox{border-radius:10px;padding:0.9rem 1.1rem;margin:0.7rem 0;}
.hbox.green{background:rgba(59,158,255,0.07);border:1px solid rgba(59,158,255,0.25);}
.hbox.purple{background:rgba(124,92,252,0.07);border:1px solid rgba(77,150,232,0.22);}
.hbox.red{background:rgba(255,107,107,0.07);border:1px solid rgba(255,107,107,0.22);}
.hbox.yellow{background:rgba(224,164,74,0.07);border:1px solid rgba(224,164,74,0.22);}
/* Dashboard */
.dash-welcome{text-align:center;padding:2rem 1rem 1.5rem;}
.dash-welcome h1{font-family:'Playfair Display',serif;font-size:2rem;font-weight:900;margin-bottom:0.5rem;}
.dash-stats{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;margin-bottom:1.5rem;}
.ds-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.2rem;text-align:center;}
.ds-num{font-size:2rem;font-weight:900;color:var(--accent);font-family:'Playfair Display',serif;}
.ds-label{font-size:0.78rem;color:var(--muted);}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0.7rem;}
.dash-card{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:1rem;
cursor:pointer;transition:all 0.2s;}
.dash-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.dc-icon{font-size:1.5rem;margin-bottom:0.4rem;}
.dc-num{font-size:0.65rem;color:var(--muted);font-weight:700;}
.dc-name{font-size:0.82rem;font-weight:700;line-height:1.3;}
/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-top:1rem;}
.price-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.5rem;}
.price-card.featured{border-color:var(--accent);position:relative;}
.price-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--accent);
color:#000;font-size:0.7rem;font-weight:700;border-radius:20px;padding:0.2rem 0.8rem;}
.price-name{font-size:1rem;font-weight:700;margin-bottom:0.3rem;}
.price-amount{font-size:2.2rem;font-weight:900;color:var(--accent);font-family:'Playfair Display',serif;}
.price-period{font-size:0.75rem;color:var(--muted);}
.price-features{list-style:none;margin:1rem 0;font-size:0.83rem;color:#c8c8e0;}
.price-features li{padding:0.3rem 0;border-bottom:1px solid var(--border);}
.price-features li::before{content:"✓ ";color:var(--accent);}
.price-btn{width:100%;background:var(--accent2);border:none;border-radius:8px;padding:0.7rem;
color:#fff;font-weight:700;cursor:pointer;font-size:0.88rem;margin-top:0.5rem;}
/* SVG diagram */
.diagram-wrap{display:flex;flex-wrap:wrap;gap:1.2rem;margin:1rem 0;justify-content:center;}
.diagram-label{font-size:0.75rem;color:var(--muted);margin-top:0.4rem;text-align:center;}
/* Responsive */
@media(max-width:600px){.lesson-h1{font-size:1.35rem;}
.tips-grid{grid-template-columns:1fr;}
.pricing-grid{grid-template-columns:1fr;}
}
/* Trend cards - T2 Układ Okresowy */
.trend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.8rem;margin:0.8rem 0;}
.trend-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:0.9rem;font-size:0.82rem;}
.trend-card h4{font-weight:700;margin-bottom:0.5rem;color:var(--text);}
.trend-row{display:flex;align-items:center;gap:0.5rem;margin:0.3rem 0;color:#c8c8e0;}
.trend-val{font-weight:700;font-size:0.8rem;}
.trend-val.up{color:var(--accent);}
.trend-val.down{color:var(--accent3);}
/* Crystal cards - T3 Wiązania */
.crystal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0.8rem;margin:0.8rem 0;}
.crystal-card{border-radius:11px;padding:1rem;border:2px solid;}
.crystal-card.jonowy{border-color:#e0a44a;background:rgba(224,164,74,0.06);}
.crystal-card.atomowy{border-color:#4d96e8;background:rgba(59,158,255,0.07);}
.crystal-card.metaliczny{border-color:#9b7fd4;background:rgba(77,150,232,0.06);}
.crystal-card.molekularny{border-color:#e06a5a;background:rgba(255,107,107,0.06);}
.crystal-icon{font-size:1.6rem;margin-bottom:0.4rem;}
.crystal-name{font-weight:700;font-size:0.88rem;margin-bottom:0.3rem;}
.crystal-prop{font-size:0.78rem;color:var(--muted);line-height:1.5;}
/* Reaction formatting */
.rxn-arrow{color:var(--accent);font-size:1.1rem;margin:0 0.3rem;}
.r-sub{color:#9b7fd4;font-weight:700;}
.r-prod{color:var(--accent);font-weight:700;}
.r-cat{color:var(--warn);font-size:0.78rem;}
.r-obs{color:var(--accent3);font-style:italic;}
/* Formula label */
.formula-label{font-size:0.7rem;color:var(--muted);margin-bottom:0.2rem;font-weight:600;}
/* Task extras */
.task-head{font-weight:700;margin-bottom:0.4rem;color:var(--text);}
.step-num{background:var(--accent2);color:#fff;border-radius:5px;padding:0.1rem 0.45rem;
font-size:0.68rem;font-weight:700;margin-right:0.4rem;}
.tip-card-icon{font-size:1.4rem;margin-bottom:0.4rem;}
/* Named rxn */
.rxn{display:flex;align-items:center;flex-wrap:wrap;gap:0.4rem;margin:0.6rem 0;
background:rgba(59,158,255,0.04);border:1px solid rgba(59,158,255,0.15);
border-radius:8px;padding:0.65rem 1rem;font-family:'Courier New',monospace;font-size:0.88rem;}
/* Diagram */
.diagram-wrap{display:flex;flex-wrap:wrap;gap:1rem;margin:0.8rem 0;justify-content:center;}
/* Highlight boxes */
.hbox{border-radius:10px;padding:0.8rem 1.1rem;margin:0.6rem 0;}
/* Schema */
.schema{background:var(--card);border-radius:11px;padding:1rem;margin:0.7rem 0;border:2px dashed var(--border);}
/* Named reaction block */
.named-rxn{background:var(--surface);border-left:4px solid var(--accent2);
border-radius:0 9px 9px 0;padding:0.7rem 1rem;margin:0.5rem 0;}
/* Lstat (lesson stats) */
.lesson-stats{display:flex;gap:0.8rem;margin-bottom:1rem;}
.lstat{background:var(--card);border:1px solid var(--border);border-radius:8px;
padding:0.6rem 1rem;text-align:center;min-width:70px;}
.lstat-num{font-size:1.3rem;font-weight:900;color:var(--accent);font-family:'Playfair Display',serif;}
.lstat-label{font-size:0.7rem;color:var(--muted);}
/* OIL RIG / special boxes */
.oilrig{display:flex;gap:1rem;margin:0.8rem 0;flex-wrap:wrap;}
.oilrig-box{flex:1;min-width:150px;border-radius:10px;padding:0.8rem;text-align:center;}
.oilrig-box.oil{background:rgba(255,107,107,0.1);border:2px solid var(--accent3);}
.oilrig-box.rig{background:rgba(59,158,255,0.08);border:2px solid var(--accent);}
.oilrig-title{font-size:0.8rem;font-weight:700;margin-bottom:0.3rem;}
/* Subex / subtopic cards */
.subtopic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0.7rem;margin-bottom:1rem;}
.subtopic-card{background:var(--card);border:1px solid var(--border);border-radius:10px;
padding:0.9rem;cursor:pointer;transition:all 0.2s;}
.subtopic-card:hover{border-color:var(--accent);}
.subtopic-icon{font-size:1.3rem;margin-bottom:0.3rem;}
.subtopic-name{font-size:0.82rem;font-weight:700;margin-bottom:0.2rem;}
.subtopic-count{font-size:0.72rem;color:var(--muted);}
.step{background:rgba(77,150,232,0.07);border-radius:7px;padding:0.4rem 0.8rem;
margin:0.3rem 0;font-size:0.85rem;color:#c8c8e0;display:flex;align-items:center;gap:0.5rem;}
sup { font-size: 0.72em; vertical-align: super; line-height: 0; }
sub { font-size: 0.72em; vertical-align: sub; line-height: 0; }
/* Frakcje matematyczne */
.frac { display: inline-flex; flex-direction: column; align-items: center; 
        vertical-align: middle; margin: 0 0.15em; font-size: 0.92em; }
.frac .num { border-bottom: 1.5px solid currentColor; padding: 0 0.2em 0.1em; 
             text-align: center; line-height: 1.3; }
.frac .den { padding: 0.1em 0.2em 0; text-align: center; line-height: 1.3; }
/* Inline fraction helper */
.formula { line-height: 2.2; }
.example { line-height: 2.2; }
/* === SYSTEM ZADAŃ TEMATYCZNYCH Z POSTĘPEM === */
.topic-section{background:linear-gradient(135deg,#0d1436,#0a0e27);border:1.5px solid #2a5fc4;border-radius:14px;
  padding:1.2rem;margin-bottom:1.2rem;box-shadow:0 4px 20px rgba(0,0,0,0.3);}
.topic-header{display:flex;align-items:center;justify-content:space-between;gap:0.8rem;
  margin-bottom:0.5rem;flex-wrap:wrap;}
.topic-title{font-weight:700;font-size:1.02rem;color:var(--text);display:flex;align-items:center;gap:0.5rem;}
.topic-icon{font-size:1.2rem;}
.topic-count{font-size:0.78rem;color:var(--muted);font-weight:500;}
.progress-wrap{margin:0.5rem 0 0.9rem;}
.progress-bar{height:10px;background:#0d1330;border:1px solid #1e2740;border-radius:20px;overflow:hidden;position:relative;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent),var(--accent3));
  border-radius:20px;transition:width 0.4s ease;width:0%;box-shadow:0 0 8px rgba(77,150,232,0.5);}
.progress-label{font-size:0.74rem;color:var(--muted);margin-top:0.3rem;display:flex;justify-content:space-between;}
.progress-pct{color:var(--accent);font-weight:700;}
.task-check{display:flex;align-items:flex-start;gap:0.7rem;}
.task-checkbox{flex-shrink:0;width:24px;height:24px;border:2px solid #2a5fc4;border-radius:7px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;margin-top:0.2rem;
  transition:all 0.15s;background:rgba(255,255,255,0.02);user-select:none;}
.task-checkbox:hover{border-color:var(--accent);}
.task-checkbox.done{background:var(--accent);border-color:var(--accent);}
.task-checkbox.done::after{content:"✓";color:#0b1020;font-weight:900;font-size:0.95rem;}
.task-body{flex:1;}
.task-done-label{font-size:0.72rem;color:var(--accent);font-weight:600;margin-left:0.3rem;opacity:0;transition:opacity 0.2s;}
.task-checkbox.done ~ .task-body .task-done-label{opacity:1;}
.dzial-progress{background:linear-gradient(135deg,#0d1436,#0a0e27);
  border:1.5px solid #2a5fc4;border-radius:16px;padding:1.3rem;margin-bottom:1.5rem;box-shadow:0 4px 20px rgba(0,0,0,0.3);}
.dzial-progress-title{font-weight:800;font-size:1.1rem;margin-bottom:0.3rem;color:#4d96e8;
  display:flex;align-items:center;gap:0.5rem;}
.dzial-progress .progress-bar{height:13px;}
.topic-jump{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.8rem;}
.topic-jump a{font-size:0.78rem;padding:0.45rem 0.9rem;background:#151b30;
  border:1.5px solid #2a3550;border-radius:20px;color:var(--text);text-decoration:none;transition:all 0.15s;font-weight:600;}
.topic-jump a:hover{border-color:var(--accent);color:var(--accent);background:rgba(77,150,232,0.1);transform:translateY(-1px);box-shadow:0 3px 10px rgba(77,150,232,0.25);}
.reset-btn{background:none;border:1.5px solid #4a2530;border-radius:8px;padding:0.4rem 0.9rem;
  font-size:0.78rem;color:#e08a9a;cursor:pointer;transition:all 0.15s;font-weight:600;}
.reset-btn:hover{border-color:var(--err);color:var(--err);background:rgba(255,107,107,0.08);}
.ans-field{margin-top:0.8rem;display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;}
.ans-input{flex:1;min-width:140px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:8px;padding:0.5rem 0.7rem;font-size:0.88rem;color:#e8e8f0;font-family:inherit;}
.ans-input:focus{outline:none;border-color:var(--accent2);}
.ans-input.correct{border-color:var(--accent);background:rgba(59,158,255,0.08);}
.ans-input.wrong{border-color:var(--accent3);background:rgba(255,107,107,0.08);}
.check-btn{background:linear-gradient(135deg,var(--accent),#3a7bc8);border:none;border-radius:10px;padding:0.6rem 1.1rem;font-size:0.85rem;color:#fff;font-weight:700;box-shadow:0 3px 10px rgba(77,150,232,0.35);cursor:pointer;transition:all 0.15s;}
.check-btn:hover{opacity:0.92;}
.ans-feedback{font-size:0.82rem;margin-top:0.4rem;font-weight:600;min-height:1.1em;}
.ans-feedback.ok{color:var(--accent);}
.ans-feedback.no{color:var(--accent3);}
.task-checkbox-disabled{display:none;}
.point-box{flex-shrink:0;cursor:pointer;width:18px;height:18px;}
.ans-field .point-box.done{background:var(--accent);border-color:var(--accent);}
.review-request-link{background:none;border:none;color:var(--accent2);text-decoration:underline;
  font-size:0.76rem;cursor:pointer;font-family:inherit;padding:0;margin-left:0.4rem;}
.review-request-link:disabled{opacity:0.6;text-decoration:none;cursor:default;}
.review-request-status{font-size:0.76rem;color:var(--ok);margin-left:0.2rem;}
.task-draw-wrap{display:none;border:1.5px solid #2a3550;border-radius:8px;overflow:hidden;margin-bottom:0.6rem;}
.cke-badge{display:inline-flex;align-items:center;gap:0.5rem;flex-wrap:wrap;background:rgba(77,150,232,0.08);border:1px solid rgba(77,150,232,0.28);border-radius:20px;padding:0.4rem 0.9rem;margin-bottom:0.8rem;font-size:0.78rem;}
.cke-badge .cke-req{color:var(--accent);font-weight:700;}
.cke-badge .cke-freq{padding:0.12rem 0.55rem;border-radius:10px;font-weight:700;font-size:0.72rem;}
.cke-badge .cke-freq.f-najwyzsze{background:rgba(224,74,74,0.18);color:#ff8a80;}
.cke-badge .cke-freq.f-bardzo{background:rgba(224,164,74,0.18);color:#e0a44a;}
.cke-badge .cke-freq.f-srednie{background:rgba(95,179,163,0.18);color:#5fb3a3;}
.cke-badge .cke-freq.f-rzadsze{background:rgba(155,127,212,0.15);color:#c9b3ff;}
.cke-badge .cke-src{color:var(--muted);font-size:0.72rem;}
.task-draw-canvas{display:block;width:100%;height:160px;touch-action:none;cursor:crosshair;background:#0a0e27;
  background-image:linear-gradient(rgba(77,150,232,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(77,150,232,0.08) 1px,transparent 1px);
  background-size:20px 20px;}
.task-draw-toolbar{display:flex;gap:0.3rem;padding:0.4rem;background:#151b30;flex-wrap:wrap;align-items:center;}
.td-tool-btn{background:#0a0e27;border:1.5px solid #2a3550;border-radius:6px;width:28px;height:28px;
  font-size:0.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.td-tool-btn.active{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(124,92,252,0.3);}
.td-clear-btn{background:#0a0e27;border:1.5px solid #2a3550;color:var(--muted);border-radius:6px;
  padding:0.3rem 0.5rem;font-size:0.7rem;cursor:pointer;font-family:inherit;margin-left:auto;}
.td-review-btn{background:linear-gradient(135deg,var(--accent2),#7c5cfc);border:none;color:#fff;border-radius:6px;
  padding:0.3rem 0.6rem;font-size:0.7rem;font-weight:700;cursor:pointer;font-family:inherit;}
.td-review-status{font-size:0.74rem;color:var(--ok);padding:0.3rem 0.5rem 0;display:block;}
.ans-mode-toggle2{display:flex;gap:0.4rem;margin:0.6rem 0 0.4rem;}
.am2-btn{background:#0a0e27;border:1.5px solid #2a3550;color:var(--muted);border-radius:7px;
  padding:0.3rem 0.6rem;font-size:0.76rem;cursor:pointer;font-family:inherit;transition:all .15s;}
.am2-btn.active{background:linear-gradient(135deg,var(--accent2),#7c5cfc);color:#fff;border-color:var(--accent2);}
.file-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(13,20,54,0.95);backdrop-filter:blur(10px);
border-top:1.5px solid #2a5fc4;padding:0.4rem 0.5rem;
display:flex;justify-content:center;gap:0.25rem;flex-wrap:wrap;z-index:100;}
.fnav-btn{background:#151b30;border:1px solid #2a3550;border-radius:6px;
padding:0.25rem 0.45rem;font-size:0.65rem;color:var(--muted);cursor:pointer;text-decoration:none;white-space:nowrap;transition:all 0.15s;}
.fnav-btn:hover,.fnav-btn.current{background:linear-gradient(135deg,var(--accent2),#7c5cfc);color:#fff;border-color:var(--accent2);box-shadow:0 2px 8px rgba(124,92,252,0.4);}
.page{display:block!important;}
.frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 0.2em;font-size:0.92em;line-height:1.15;}
.frac .fn{display:block;padding:0 0.25em 0.1em;border-bottom:1.5px solid currentColor;}
.frac .fd{display:block;padding:0.1em 0.25em 0;}
/* special boxes */
.oilrig{display:flex;gap:1rem;margin:0.8rem 0;flex-wrap:wrap;}
/* ===== DESIGN SYSTEM — warstwa komponentow (addytywna, nie narusza istniejacych stylow) ===== */
/* Uzywaj tych klas w NOWYM kodzie zamiast stylow inline. Nie usuwaja i nie nadpisuja nic istniejacego. */

.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  border:none;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-4);
  font-size:0.85rem;font-weight:700;color:var(--text);background:var(--card);
  cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;}
.button:hover{transform:translateY(-1px);}
.button--primary{background:linear-gradient(135deg,var(--accent),#3a7bc8);color:#fff;
  box-shadow:0 3px 10px rgba(77,150,232,0.35);}
.button--secondary{background:linear-gradient(135deg,var(--accent2),#7c5cfc);color:#fff;
  box-shadow:0 3px 10px rgba(155,127,212,0.3);}
.button--warn{background:linear-gradient(135deg,var(--warn),#c8863a);color:#fff;}
.button--ghost{background:transparent;border:1.5px solid var(--border);color:var(--text);}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-4);box-shadow:0 4px 14px rgba(0,0,0,0.25);}
.task-card{background:linear-gradient(135deg,var(--surface),var(--bg));border:1.5px solid var(--border);
  border-radius:var(--radius-md);padding:var(--space-4) var(--space-4);margin-bottom:var(--space-3);}

.feedback{border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);
  font-size:0.85rem;font-weight:600;margin-top:var(--space-2);}
.feedback--ok{background:rgba(76,175,130,0.12);border:1px solid rgba(76,175,130,0.35);color:var(--ok);}
.feedback--error{background:rgba(224,74,74,0.1);border:1px solid rgba(224,74,74,0.35);color:#ff8a80;}

.formula-box{background:linear-gradient(135deg,#0d1436,#0a0e27);border:1.5px solid #2a5fc4;
  border-radius:var(--radius-md);padding:1.1rem 1.3rem;font-family:'Courier New',monospace;
  font-size:0.95rem;color:var(--text);}

.warning-box{background:linear-gradient(135deg,#0d1436,#0a0e27);border:1.5px dashed var(--accent);
  border-radius:var(--radius-lg);padding:1.1rem 1.3rem;margin:var(--space-6) 0;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);}

.lesson-section{margin-bottom:var(--space-6);}

/* progress-bar / progress-fill / progress-wrap juz istnieja w bazie (uzyj ich zamiast nowych) */

/* ===== Nawigacja krokowa (step-nav) — pilotaz Dzial 8 ===== */
.step-toc{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);}
.step-toc-title{font-size:0.78rem;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--muted);margin-bottom:var(--space-2);}
.step-toc-list{display:flex;flex-direction:column;gap:2px;}
.step-toc-item{text-align:left;background:transparent;border:none;color:var(--text);
  font-size:0.85rem;padding:var(--space-2) var(--space-2);border-radius:var(--radius-sm);cursor:pointer;}
.step-toc-item.active{background:rgba(77,150,232,0.12);color:var(--accent);font-weight:700;}
.step-nav{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);background:rgba(18,24,41,0.97);backdrop-filter:blur(10px);
  border-top:1.5px solid var(--border);padding:var(--space-3) var(--space-4);
  margin:var(--space-6) calc(-1 * var(--space-4)) 0;border-radius:0 0 var(--radius-md) var(--radius-md);}
.step-nav-btn{background:linear-gradient(135deg,var(--accent),#3a7bc8);border:none;color:#fff;
  font-weight:700;font-size:0.82rem;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);
  cursor:pointer;}
.step-nav-btn:disabled{opacity:0.35;cursor:default;}
.step-nav-indicator{font-size:0.78rem;color:var(--muted);font-weight:600;}
.step-resume{background:rgba(155,127,212,0.1);border:1px solid rgba(155,127,212,0.35);
  border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-3);
  font-size:0.82rem;color:#c9b3ff;cursor:pointer;}

/* ===== Wskaznik statusu zapisu (zapisano lokalnie / synchronizacja / offline) ===== */
.save-status{position:fixed;bottom:var(--space-4);right:var(--space-4);z-index:200;
  display:flex;align-items:center;gap:var(--space-2);
  background:rgba(18,24,41,0.97);backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:20px;padding:0.5rem 0.9rem;
  font-size:0.78rem;font-weight:600;color:var(--text);box-shadow:0 4px 14px rgba(0,0,0,0.35);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity 0.25s,transform 0.25s;}
.save-status.show{opacity:1;transform:translateY(0);}
.save-status-icon{font-size:0.9rem;}
.save-status.saving{border-color:rgba(77,150,232,0.4);}
.save-status.saved-local{border-color:rgba(139,150,176,0.4);color:var(--muted);}
.save-status.synced{border-color:rgba(76,175,130,0.4);color:var(--ok);}
.save-status.offline{border-color:rgba(224,74,74,0.45);color:#ff8a80;}
@media (max-width:520px){.save-status{left:var(--space-4);right:var(--space-4);justify-content:center;bottom:calc(var(--space-3) + env(safe-area-inset-bottom,0px));}}

/* ===== Notatki / gwiazdki / "wroc pozniej" ===== */
.note-toolbar{display:inline-flex;align-items:center;gap:0.3rem;margin-left:0.6rem;vertical-align:middle;}
.note-toolbar-sm{margin-left:0.5rem;}
.note-btn{background:transparent;border:1px solid var(--border);border-radius:6px;
  color:var(--muted);font-size:0.8rem;padding:0.15rem 0.4rem;cursor:pointer;line-height:1;}
.note-btn.active-star{background:rgba(224,164,74,0.18);border-color:rgba(224,164,74,0.5);color:var(--warn);}
.note-btn.active-later{background:rgba(77,150,232,0.18);border-color:rgba(77,150,232,0.5);color:var(--accent);}
.note-btn.active-note{background:rgba(155,127,212,0.18);border-color:rgba(155,127,212,0.5);color:var(--accent2);}
.note-box{display:block;width:100%;margin-top:0.4rem;}
.note-textarea{width:100%;min-height:60px;background:var(--card);border:1px solid var(--border);
  border-radius:8px;color:var(--text);font-size:0.82rem;padding:0.5rem;font-family:inherit;resize:vertical;}
.note-save-btn{margin-top:0.4rem;background:linear-gradient(135deg,var(--accent),#3a7bc8);
  border:none;color:#fff;font-weight:700;font-size:0.78rem;padding:0.3rem 0.8rem;border-radius:8px;cursor:pointer;}