@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@600;700&family=Inter:wght@400;600&display=swap&subset=cyrillic");
/* Трейдинг Про — синяя «терминальная» тема */
:root{--bg:#eef3fb;--ink:#0b1b3a;--mute:#4d6285;--line:#d3ddf0;--grid:rgba(31,95,224,.07);--card:#fff;--acc:#1f5fe0;--acc2:#0ea5e9;--acc-ink:#fff;--up:#16a34a;--down:#dc2626;--warn:#d97706;
--glow:rgba(31,95,224,.18);--r:10px;--f-head:"Exo 2","Segoe UI",system-ui,sans-serif;--f-body:"Inter","Segoe UI",system-ui,sans-serif}
:root[data-theme=dark]{--bg:#070d1c;--ink:#e8eefc;--mute:#8ea3c9;--line:#1b2b4d;--grid:rgba(80,140,255,.07);--card:#0e1832;--acc:#3b82f6;--acc2:#22d3ee;--acc-ink:#fff;--up:#22c55e;--down:#f43f5e;--warn:#fbbf24;--glow:rgba(59,130,246,.3)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.65 var(--f-body);color:var(--ink);background-color:var(--bg);
background-image:radial-gradient(900px 500px at 85% -5%,var(--glow),transparent 70%),radial-gradient(700px 400px at -5% 30%,var(--glow),transparent 70%),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
background-size:auto,auto,44px 44px,44px 44px;background-attachment:fixed;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
main,section,article,aside,footer{position:relative}
h1,h2,h3{font-family:var(--f-head);line-height:1.15;margin:0 0 .6em;font-weight:700;letter-spacing:0}
h1{font-size:clamp(2.2rem,6.5vw,4.2rem);font-weight:700;background:linear-gradient(90deg,var(--ink),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(1.4rem,3.5vw,2rem)}h3{font-size:1.1rem}
p{margin:0 0 1em;max-width:70ch}a{color:var(--acc2)}
:focus-visible{outline:3px solid var(--acc2);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:.8em 1.5em;border-radius:var(--r);background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--acc-ink);text-decoration:none;border:0;cursor:pointer;font:inherit;font-weight:600;margin:0 8px 8px 0;box-shadow:0 6px 24px var(--glow)}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--acc);box-shadow:none}
header.top{display:flex;align-items:center;gap:18px;padding:14px 20px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
header.top .logo{font:700 1.35rem var(--f-head);color:var(--ink);text-decoration:none;margin-right:auto}
header.top a.nav{color:var(--mute);text-decoration:none;font-size:.95rem}header.top a.nav:hover{color:var(--ink)}
#theme{background:none;border:1px solid var(--line);color:var(--ink);border-radius:var(--r);padding:.3em .6em;cursor:pointer}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;padding:72px 0}
.hero .sub{font-size:1.15rem;color:var(--mute)}
.hero svg{width:100%;height:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 0 0 1px var(--line),0 20px 60px var(--glow)}
.sec{padding:52px 0;border-top:1px solid var(--line)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.two>div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
.lvl{margin-bottom:28px}
.lvl>h3{border-left:5px solid var(--c,var(--acc));padding-left:12px}
.lvl:nth-of-type(1){--c:#38bdf8}.lvl:nth-of-type(2){--c:#3b82f6}.lvl:nth-of-type(3){--c:#6366f1}.lvl:nth-of-type(4){--c:#a78bfa}
.lvl small{display:block;font:400 .9rem var(--f-body);color:var(--mute);margin-top:4px}
.mods{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mods li{display:flex;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line)}.mods li:last-child{border:0}
.mods b{min-width:2.2em;color:var(--acc2);font-family:var(--f-head);font-size:.9rem}
.mods .free{color:var(--up);font-size:.85rem;margin-left:auto;font-weight:600}
.price{background:linear-gradient(160deg,var(--card),color-mix(in srgb,var(--acc) 14%,var(--card)));border:1px solid var(--acc);border-radius:16px;padding:32px;max-width:520px;box-shadow:0 20px 60px var(--glow)}
.price .sum{font:700 3rem var(--f-head);color:var(--acc2)}.price ul{padding-left:1.1em}
footer{padding:32px 0;border-top:1px solid var(--line);color:var(--mute);font-size:.9rem;background:color-mix(in srgb,var(--bg) 90%,transparent)}
.lesson{display:grid;grid-template-columns:280px minmax(0,1fr);gap:32px;padding:32px 20px;max-width:1180px;margin:0 auto}
#sidebar{position:sticky;top:76px;align-self:start;max-height:calc(100vh - 96px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;font-size:.92rem}
#sidebar h4{margin:14px 0 4px;font-size:.85rem;color:var(--mute)}
#sidebar a{display:block;padding:4px 0;color:var(--ink);text-decoration:none}#sidebar a.on{color:var(--acc2);font-weight:700}#sidebar a.done::after{content:" ✓";color:var(--up)}
.progress{height:6px;background:var(--line);border-radius:3px;margin:8px 0}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:3px}
article{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:32px}
article h2{margin-top:1.6em}
.box{border-left:4px solid var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent);padding:12px 16px;margin:1.2em 0;border-radius:0 var(--r) var(--r) 0}
.box.warn{border-color:var(--warn)}.box.err{border-color:var(--down)}
figure{margin:1.4em 0}figure svg{width:100%;height:auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
figcaption{font-size:.9rem;color:var(--mute)}
.term{border-bottom:1px dotted var(--acc2);cursor:help;position:relative}
.term:hover::after,.term:focus::after{content:attr(data-def);position:absolute;left:0;top:1.6em;z-index:9;width:240px;background:var(--acc);color:#fff;padding:8px 10px;border-radius:var(--r);font-size:.85rem;line-height:1.4}
.quiz{border:1px solid var(--line);border-radius:12px;padding:16px;margin:1em 0}
.quiz button{display:block;width:100%;text-align:left;margin:6px 0;padding:10px 12px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);font:inherit;cursor:pointer}
.quiz button:hover:not(:disabled){border-color:var(--acc)}
.quiz button.ok{border-color:var(--up);background:color-mix(in srgb,var(--up) 18%,transparent)}.quiz button.bad{border-color:var(--down);background:color-mix(in srgb,var(--down) 18%,transparent)}
.quiz .why{display:none;font-size:.95rem;color:var(--mute)}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:32px;flex-wrap:wrap}
@media(max-width:860px){.hero,.two,.lesson{grid-template-columns:1fr}.hero{padding:32px 0}#sidebar{position:static;max-height:none}article{padding:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hero canvas{width:100%;aspect-ratio:8/5;display:block;background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--acc) 9%,var(--card)));border:1px solid var(--line);border-radius:14px;box-shadow:0 0 0 1px var(--line),0 20px 60px var(--glow)}
.lang{display:flex;gap:2px;border:1px solid var(--line);border-radius:var(--r);padding:2px}
.lang button{background:none;border:0;color:var(--mute);padding:.25em .55em;border-radius:7px;cursor:pointer;font:600 .8rem var(--f-body)}
.lang button.on{background:var(--acc);color:#fff}
@media(max-width:640px){header.top{flex-wrap:wrap;gap:10px}header.top a.nav{display:none}}
[data-lang]{display:none}html[lang=ru] [data-lang=ru],html[lang=uk] [data-lang=uk],html[lang=en] [data-lang=en]{display:block}
.cta{margin-top:32px;padding:24px;border:1px solid var(--acc);border-radius:14px;background:color-mix(in srgb,var(--acc) 10%,transparent)}
.pay{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;padding:40px 0}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:20px}
.panel h3{margin-bottom:.8em}
.netbtn{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:.6em 1em;margin:0 8px 8px 0;cursor:pointer;font:inherit}
.netbtn.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 18%,transparent);font-weight:600}
.addr{display:block;word-break:break-all;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:12px;font:600 .95rem ui-monospace,Consolas,monospace;margin:8px 0}
#qr{background:#fff;padding:10px;border-radius:var(--r);display:inline-block;margin:8px 0}
.panel label{display:block;margin:12px 0 4px;font-size:.9rem;color:var(--mute)}
.panel input{width:100%;padding:.7em .9em;border-radius:var(--r);border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
#msg{margin-top:12px;font-weight:600}
@media(max-width:860px){.pay{grid-template-columns:1fr}}
article table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.92rem;display:block;overflow-x:auto}
article th,article td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
article th{color:var(--acc2);font-size:.85rem;white-space:nowrap}
header.top .logo{display:flex;align-items:center;gap:10px}header.top .logo img{height:34px;width:auto}
header.top .btn{padding:.5em 1em;font-size:.9rem;margin:0;white-space:nowrap}
#gear{background:none;border:1px solid var(--line);color:var(--ink);border-radius:var(--r);width:38px;height:38px;font-size:1.2rem;cursor:pointer}
#gear[aria-expanded=true]{border-color:var(--acc);color:var(--acc2)}
.settings{display:none;position:absolute;right:20px;top:calc(100% + 6px);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;width:188px;box-sizing:border-box;box-shadow:0 14px 36px var(--glow);z-index:20}
.settings.open{display:block}.settings b{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin:10px 0 5px}.settings b:first-child{margin-top:0}
.settings .lang{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.settings .lang button{padding:.35em 0;text-align:center;font-size:.78rem}
/* Подвал: свободное место под будущую ссылку */
footer .fslot{display:block;height:1.6em}
.hero{grid-template-columns:1.2fr 1fr}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}.cta-row .btn{margin:0}
@media(min-width:861px){.cta-row{flex-wrap:nowrap}.hero .btn{white-space:nowrap;padding:.8em 1.1em;font-size:.95rem}}
#buy .wrap{text-align:center}#buy .price{margin:0 auto;text-align:center}
.price ul{list-style:none;padding:0}.price li::before{content:"✓ ";color:var(--up);font-weight:700}
article h1{font-size:clamp(1.25rem,3.8vw,1.9rem);text-wrap:balance;overflow-wrap:break-word}
footer .fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding-bottom:28px}
footer h4{margin:0 0 12px;font:700 .8rem var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
footer a{display:block;color:var(--ink);opacity:.85;text-decoration:none;margin-bottom:8px}footer a:hover{color:var(--acc2);opacity:1}
footer .fbot{border-top:1px solid var(--line);padding-top:20px}
#toTop{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:46px;height:46px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font-size:1.3rem;cursor:pointer;box-shadow:0 8px 24px var(--glow);opacity:0;pointer-events:none;transform:translateY(10px);transition:.25s;z-index:10}
#toTop.show{opacity:1;pointer-events:auto;transform:none}
@media(max-width:640px){footer .fcols{grid-template-columns:1fr}header.top .logo span{display:none}}
.fig{width:100%;height:auto;display:block}
figure svg.fig{background:none;border:0}
article .sub{color:var(--mute);font-size:1.1rem}
.note{font-size:.85rem;color:var(--mute)}
.calc{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 14px;font:600 .95rem ui-monospace,Consolas,monospace;margin:.2em 0 .8em}
article h3{margin-top:1.4em}

#program.sec{padding-top:18px}
.prog-head{display:grid;grid-template-columns:minmax(0,610px) minmax(0,1fr);gap:0;align-items:center;margin-bottom:0}
.prog-txt{position:relative;z-index:2}
.prog-txt p{margin-bottom:0}
.prog-img{margin:-44px calc(-1*clamp(0px,(100vw - 1120px)/2,200px)) -30px -70px;position:relative;z-index:1}
.prog-img img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.prog-img picture{display:block}
.prog-img .for-dark{display:none}
:root[data-theme=dark] .prog-img .for-dark{display:block}
:root[data-theme=dark] .prog-img .for-light{display:none}
@media(max-width:860px){#program.sec{padding-top:36px}.prog-head{grid-template-columns:1fr;gap:24px;margin-bottom:32px}.prog-img{max-width:620px;margin:0 auto}}

/* Бегущая строка котировок */
.ticker{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:color-mix(in srgb,var(--card) 70%,transparent);overflow:hidden}
.tk-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 0 0 var(--up);animation:tkPulse 2s infinite}
.tk-dot.off{background:var(--mute);animation:none}
.tk-dot.stale{background:var(--warn,#d97706);animation:none}
@keyframes tkPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--up) 60%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
.tk-view{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tk-track{display:flex;width:max-content;will-change:transform}
.tk-set{display:flex;flex:none}
.tk-i{display:inline-flex;align-items:baseline;gap:7px;padding-right:26px;white-space:nowrap;font:600 .82rem var(--f-body);font-variant-numeric:tabular-nums;border-radius:6px}
.tk-i b{color:var(--ink);font-family:var(--f-head);font-size:.82rem}
.tk-p{color:var(--ink);min-width:5.4em;text-align:right}
.tk-c{font-size:.76rem;min-width:5.2em}
.tk-c.up{color:var(--up)}.tk-c.dn{color:var(--down)}
.tk-i.fu{animation:tkU .9s}.tk-i.fd{animation:tkD .9s}
@keyframes tkU{from{background:color-mix(in srgb,var(--up) 35%,transparent)}to{background:transparent}}
@keyframes tkD{from{background:color-mix(in srgb,var(--down) 35%,transparent)}to{background:transparent}}
@media(max-width:860px){.tk-p{min-width:0}.tk-c{min-width:0}}
@media(max-width:640px){.ticker{order:10;flex:1 0 100%;height:34px}}
@media(prefers-reduced-motion:reduce){.tk-dot{animation:none}.tk-view{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}
.tk-i[hidden]{display:none}

/* Мобильная вёрстка уроков: колонка не шире экрана, длинные заголовки переносятся */
@media(max-width:860px){.lesson{grid-template-columns:minmax(0,1fr)}article h1{white-space:normal}}

/* Подсказки к терминам (всплывающее окно строится в js/script.js) */
.term{border-bottom:1px dotted var(--acc2);cursor:help}
.term:hover::after,.term:focus::after{content:none}
#tp-tip{position:fixed;z-index:50;max-width:min(300px,calc(100vw - 16px));background:var(--acc);color:#fff;padding:9px 12px;border-radius:var(--r);font:400 .85rem/1.45 var(--f-body);box-shadow:0 10px 30px var(--glow);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
#tp-tip.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){#tp-tip{transition:none}}

/* Подвал: Telegram с логотипом */
footer a.ftg{display:inline-flex;align-items:center;gap:9px}footer a.ftg img{width:22px;height:22px;flex:none;border-radius:6px;transition:transform .2s}footer a.ftg:hover img{transform:scale(1.08)}

/* Шапка на телефоне: ссылка «Вход / Кабинет» остаётся видимой */
header.top a.nav-acc svg{display:none;width:18px;height:18px}
@media(max-width:640px){header.top a.nav.nav-acc{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink)}header.top a.nav-acc span{display:none}header.top a.nav-acc svg{display:block}}
@media(max-width:420px){header.top{gap:8px;padding-left:14px;padding-right:14px}header.top .btn{padding:.5em .75em;font-size:.84rem}header.top .logo img{height:30px}}