/* ЭлектроСхемы — автономная оболочка учебного сайта. Без внешних шрифтов и библиотек. */
:root {
  --bg: #f4f8fb;
  --surface: #ffffff;
  --surface-soft: #f8fbff;
  --ink: #11243e;
  --muted: #62728a;
  --line: #d9e4ee;
  --navy: #0c315d;
  --blue: #126cca;
  --cyan: #0f8aa3;
  --green: #13764b;
  --green-soft: #e9f8ef;
  --amber: #a76000;
  --amber-soft: #fff6dc;
  --red: #b42318;
  --violet: #6946a9;
  --shadow: 0 12px 35px rgba(19, 49, 85, .10);
  --shadow-small: 0 4px 14px rgba(19, 49, 85, .08);
  --radius: 18px;
  --radius-small: 12px;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #101923;
  --surface: #182431;
  --surface-soft: #1d2b39;
  --ink: #edf6ff;
  --muted: #afc0d1;
  --line: #314458;
  --navy: #dceeff;
  --blue: #75bcff;
  --cyan: #70d8e8;
  --green: #6bd39e;
  --green-soft: #153b2c;
  --amber: #ffc36c;
  --amber-soft: #433314;
  --red: #ff9b92;
  --violet: #c9b1ff;
  --shadow: 0 15px 45px rgba(0, 0, 0, .28);
  --shadow-small: 0 5px 18px rgba(0, 0, 0, .25);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font: 16px/1.58 Arial, Helvetica, sans-serif; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--red); }
button, input { font: inherit; }
button { cursor: pointer; }
.skip-link { position: absolute; top: -50px; left: 12px; z-index: 100; padding: 9px 12px; border-radius: 9px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-small); }
.skip-link:focus { top: 11px; }
.shell { width: min(1160px, calc(100% - 34px)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent); background: color-mix(in srgb, var(--surface) 91%, transparent); backdrop-filter: blur(12px); }
.header-inner { display: flex; align-items: center; min-height: 66px; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.brand-mark { width: 33px; height: 33px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg, #1679cf, #0d365f); color: #fff; box-shadow: 0 4px 10px rgba(17, 102, 188, .27); }
.brand-mark svg { width: 20px; height: 20px; }
.main-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.main-nav a { padding: 8px 10px; color: var(--muted); border-radius: 9px; text-decoration: none; font-size: .91rem; font-weight: 700; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, transparent); }
.icon-button { width: 37px; height: 37px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); display: grid; place-items: center; }
.icon-button:hover { border-color: var(--blue); color: var(--blue); }
.icon-button svg { width: 19px; height: 19px; }
.hero { position: relative; overflow: hidden; padding: 68px 0 54px; color: #f5fbff; background: radial-gradient(circle at 87% 10%, rgba(94, 208, 255, .42) 0, rgba(94,208,255,0) 25%), radial-gradient(circle at 22% 120%, rgba(73, 144, 255, .33) 0, rgba(73,144,255,0) 33%), linear-gradient(132deg, #09274d 0%, #0d4d80 52%, #0f7d8f 135%); }
.hero::after { content: ""; position: absolute; inset: auto -10% -75px auto; width: 410px; height: 410px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.04), 0 0 0 77px rgba(255,255,255,.025); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(280px, .68fr); gap: 33px; align-items: center; }
.eyebrow { display: inline-flex; gap: 7px; align-items: center; padding: 5px 10px; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; background: rgba(255,255,255,.12); font-size: .77rem; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.hero h1 { max-width: 760px; margin: 13px 0 12px; color: #fff; font-size: clamp(2.15rem, 5.5vw, 4.15rem); line-height: 1.03; letter-spacing: -.05em; }
.hero-lead { max-width: 740px; margin: 0; font-size: clamp(1.04rem, 1.9vw, 1.22rem); color: #e8f5ff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 24px; }
.button { min-height: 43px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 10px 15px; border: 1px solid transparent; border-radius: 11px; text-decoration: none; font-weight: 800; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.button:hover { transform: translateY(-1px); text-decoration: none; }
.button-primary { background: #fff; color: #0b4e8a; box-shadow: 0 7px 19px rgba(0,0,0,.17); }
.button-primary:hover { color: #06477c; box-shadow: 0 10px 25px rgba(0,0,0,.22); }
.button-ghost { border-color: rgba(255,255,255,.48); color: #fff; background: rgba(255,255,255,.09); }
.button-ghost:hover { color: #fff; background: rgba(255,255,255,.18); }
.progress-card { padding: 22px; border: 1px solid rgba(255,255,255,.42); border-radius: var(--radius); background: rgba(3,28,58,.25); box-shadow: 0 13px 35px rgba(0, 19, 45, .22); backdrop-filter: blur(4px); }
.progress-card h2 { margin: 0; font-size: 1.16rem; color: #fff; }
.progress-visual { display: flex; gap: 15px; align-items: center; margin: 18px 0 15px; }
.progress-ring { width: 78px; height: 78px; flex: 0 0 78px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#90e3eb calc(var(--progress, 0) * 1%), rgba(255,255,255,.19) 0); position: relative; }
.progress-ring::before { content:""; position:absolute; inset: 7px; border-radius:50%; background:#0f4b75; }
.progress-ring b { position: relative; color:#fff; font-size: 1.1rem; }
.progress-card p { margin: 0; color: #dceeff; font-size: .93rem; }
.progress-card .button { width: 100%; margin-top: 6px; color: #0a4b84; }
.stats { padding: 22px 0 3px; }
.stat-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:13px; }
.stat { padding: 17px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-small); }
.stat b { display:block; color:var(--blue); font-size:1.4rem; line-height:1.1; }
.stat span { display:block; margin-top:5px; color:var(--muted); font-size:.88rem; }
.section { padding: 48px 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:19px; }
.section-heading h2 { margin:0; color:var(--navy); font-size:clamp(1.55rem, 3vw, 2.25rem); line-height:1.12; letter-spacing:-.035em; }
.section-heading p { max-width:585px; margin:0; color:var(--muted); }
.dashboard { display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(280px,.65fr); gap:18px; }
.continue-card { padding:24px; border:1px solid #c7dfed; border-radius:var(--radius); background:linear-gradient(125deg, #effaff 0%, #fff 58%); box-shadow:var(--shadow-small); }
html[data-theme="dark"] .continue-card { background:linear-gradient(125deg, #16394a, #182431 61%); border-color:#35627a; }
.continue-card .micro { margin:0; color:var(--blue); font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.continue-card h3 { margin:8px 0; color:var(--navy); font-size:1.37rem; }
.continue-card p { margin:0 0 15px; color:var(--muted); }
.safety-card { padding:20px; border:1px solid #f0d39b; border-radius:var(--radius); background:var(--amber-soft); }
.safety-card h3 { margin:0 0 8px; color:var(--amber); font-size:1.05rem; }
.safety-card p { margin:0; color:color-mix(in srgb, var(--ink) 84%, var(--amber)); font-size:.9rem; }
.toolbar { display:flex; gap:10px; align-items:center; margin: 4px 0 18px; }
.search { flex:1; min-height:44px; padding:0 13px 0 40px; border:1px solid var(--line); border-radius:11px; outline:none; background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2362728a' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 13px center; color:var(--ink); }
.search:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
.course-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.lesson-card { position:relative; display:flex; flex-direction:column; min-height:214px; padding:17px; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--surface); box-shadow:var(--shadow-small); color:var(--ink); text-decoration:none; transition:transform .17s ease, box-shadow .17s ease, border .17s ease; }
.lesson-card:hover { transform:translateY(-3px); border-color:#9fc9e7; box-shadow:var(--shadow); color:var(--ink); text-decoration:none; }
.lesson-card[hidden] { display:none; }
.lesson-card::after { content:""; position:absolute; right:-19px; bottom:-28px; width:104px; height:104px; border-radius:50%; background:color-mix(in srgb, var(--accent, var(--blue)) 9%, transparent); }
.lesson-card .lesson-number { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--accent, var(--blue)); background:color-mix(in srgb, var(--accent, var(--blue)) 11%, transparent); font-weight:800; }
.lesson-card h3 { margin:13px 0 5px; color:var(--navy); font-size:1.05rem; line-height:1.22; }
.lesson-card p { margin:0; color:var(--muted); font-size:.88rem; }
.lesson-card .lesson-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; padding-top:14px; color:var(--muted); font-size:.8rem; }
.lesson-status { min-width:18px; min-height:18px; display:inline-grid; place-items:center; border:1px solid #b8c8d8; border-radius:50%; color:transparent; background:transparent; font-size:.72rem; }
.lesson-card.is-done .lesson-status { border-color:var(--green); color:#fff; background:var(--green); }
.lesson-card.is-done { border-color:color-mix(in srgb, var(--green) 42%, var(--line)); }
.lesson-card.is-done .lesson-number { color:var(--green); background:var(--green-soft); }
.route { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.route-step { padding:19px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }
.route-step .round { width:31px; height:31px; display:grid; place-items:center; margin-bottom:9px; border-radius:50%; color:#fff; background:var(--cyan); font-weight:800; font-size:.86rem; }
.route-step h3 { margin:0 0 5px; color:var(--navy); font-size:1.02rem; }.route-step p{margin:0;color:var(--muted);font-size:.9rem}
.resource-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.resource { display:flex; gap:13px; padding:17px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); text-decoration:none; }.resource:hover { color:var(--ink); text-decoration:none; border-color:#9ec7e4; }.resource-icon { width:39px; height:39px; flex:0 0 39px; display:grid; place-items:center; border-radius:11px; background:#eaf6ff; color:var(--blue); }.resource-icon svg{width:21px;height:21px}.resource h3{margin:0 0 3px;color:var(--navy);font-size:1rem}.resource p{margin:0;color:var(--muted);font-size:.85rem}
.site-footer { padding:31px 0 38px; margin-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; }.footer-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:24px}.site-footer p{margin:.3rem 0}.footer-links{display:flex;gap:13px;flex-wrap:wrap;align-content:start}.footer-links a{font-weight:700}
/* Страница шпаргалки */
.subhero { padding:44px 0 38px; color:#eaf7ff; background:linear-gradient(130deg,#092b52,#146780); }.subhero h1{margin:9px 0 5px;color:#fff;font-size:clamp(2rem,4.5vw,3.1rem);letter-spacing:-.04em;line-height:1.08}.subhero p{max-width:720px;margin:0;color:#d9eefc}.crumbs{display:flex;gap:8px;align-items:center;font-size:.9rem;color:#bce4f5}.crumbs a{color:#d8f4ff}.sheet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.sheet-card{padding:19px;border:1px solid var(--line);border-radius:15px;background:var(--surface);box-shadow:var(--shadow-small)}.sheet-card h2{margin:0 0 12px;color:var(--navy);font-size:1.19rem}.sheet-card p{margin:.45rem 0;color:var(--muted)}.five-p{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.five-p div{padding:9px 7px;border-radius:10px;background:#eef7fe;text-align:center;color:#1a628e;font-size:.79rem;font-weight:800}.five-p b{display:block;font-size:1rem}.cheat-table{width:100%;border-collapse:collapse;font-size:.9rem}.cheat-table td,.cheat-table th{padding:8px;border:1px solid var(--line);text-align:left;vertical-align:top}.cheat-table th{background:#edf6fc;color:#25486a}.signal-row{display:flex;gap:9px;align-items:flex-start;margin:9px 0}.signal-icon{width:29px;height:29px;min-width:29px;display:grid;place-items:center;border-radius:9px;background:#e9f7ef;color:var(--green);font-weight:800}.signal-row p{margin:0}.warning{padding:15px;border-left:5px solid var(--amber);border-radius:10px;background:var(--amber-soft);color:var(--ink)}.warning b{display:block;color:var(--amber);margin-bottom:3px}
/* Инъекция для полной страницы курса */
.online-studybar{display:flex;align-items:center;gap:10px;margin-left:auto}.online-studybar a{font-weight:800}.online-progress{font-size:.82rem;font-weight:800;color:#1b638e;background:#e7f4ff;border:1px solid #bbddef;padding:5px 8px;border-radius:999px;white-space:nowrap}.lesson-complete{margin-top:15px;border:1px solid #9ccae3;border-radius:9px;padding:8px 11px;background:#f2f9ff;color:#075a9c;font-weight:800;cursor:pointer}.lesson-complete:hover{border-color:#126cca;background:#e6f4ff}.lesson-complete.is-done{border-color:#70c294;background:#eefaf2;color:#13764b}.study-toast{position:fixed;z-index:50;right:20px;bottom:20px;max-width:315px;padding:12px 14px;border:1px solid #b4ddc5;border-radius:12px;background:#f1fff6;color:#155d3d;box-shadow:var(--shadow);font:14px/1.4 Arial,Helvetica,sans-serif;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s}.study-toast.show{opacity:1;transform:translateY(0)}
@media (max-width: 900px){.hero{padding:48px 0}.hero-grid,.dashboard{grid-template-columns:1fr}.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.resource-grid{grid-template-columns:1fr}.main-nav a:nth-child(2),.main-nav a:nth-child(3){display:none}.stat-grid{grid-template-columns:repeat(2,1fr)}.online-studybar{margin-left:0}.online-progress{display:none}}
@media (max-width: 610px){.shell{width:min(100% - 24px,1160px)}.header-inner{min-height:59px;gap:9px}.brand{font-size:.92rem}.brand-mark{width:30px;height:30px}.main-nav a{display:none}.main-nav a:first-child{display:block}.hero{padding:37px 0 35px}.hero h1{font-size:2.27rem}.section{padding:35px 0}.section-heading{display:block}.section-heading p{margin-top:8px}.course-grid,.route,.sheet-grid{grid-template-columns:1fr}.five-p{grid-template-columns:repeat(5,minmax(0,1fr))}.five-p div{font-size:.67rem;padding:7px 3px}.five-p b{font-size:.87rem}.stat-grid{gap:9px}.stat{padding:12px}.footer-grid{grid-template-columns:1fr}.online-studybar a{font-size:.8rem}.online-studybar .online-progress{display:none}}
@media print{.site-header,.hero-actions,.icon-button,.button,.search,.site-footer,.online-studybar,.lesson-complete,.study-toast{display:none!important}.hero,.subhero{padding:0;background:#fff;color:#111}.hero h1,.subhero h1{color:#111}.hero p,.subhero p{color:#333}.section{padding:15px 0}.course-grid{grid-template-columns:repeat(2,1fr)}.lesson-card,.sheet-card,.route-step,.resource,.stat{box-shadow:none;break-inside:avoid}}