/* EU TRUST AI · стиль «Glow» (як у презентаціях курсу): e-Ukraine Head / e-Ukraine,
   світла тема - тепле паперове тло з пастельним світінням, темна - майже чорне тло з синьо-бурштиновим світінням.
   Підключається ПІСЛЯ основних стилів сторінки і перевизначає токени. */
:root{
  --bg:#F7F5F0; --surface:#FFFFFF; --sunk:#EFEBE3; --ink:#0B0D14; --muted:#5F6472; --line:#DCD8CF;
  --accent:#2B5CFF; --accent-soft:#E3E9FF; --on-accent:#FFFFFF; --eu:#2B5CFF; --amber:#C77A12;
  --ok:#23804D; --ok-soft:#DDF1E4; --bad:#C2362F; --bad-soft:#F9E1DE; --warn:#B5650D; --warn-soft:#FBEBD6;
  --l-ban:#C2362F; --l-high:#D9800F; --l-tr:#2B5CFF; --l-min:#23804D;
  --xp:#5B47D6; --coin:#B07A00; --gold:#D4A017; --silver:#A7B0BA; --bronze:#B87333; --medal-none:#E3DFD6; --ribbon:#2B5CFF;
  --glass:#FFFFFF; --hairline:#DCD8CF; --toast-bg:#FFFFFF; --on-tint:#FFFFFF;
  --glow-a:rgba(190,170,255,.55); --glow-b:rgba(255,198,158,.6); --glow-c:rgba(160,192,255,.45); --glow-d:rgba(255,186,214,.35);
  --f-display:"e-Ukraine Head","e-Ukraine",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"e-Ukraine",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"e-Ukraine",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#07090F; --surface:rgba(255,255,255,.045); --sunk:rgba(255,255,255,.06); --ink:#F1F2F6; --muted:#A9AEC0; --line:rgba(255,255,255,.12);
  --accent:#8FA4FF; --accent-soft:rgba(43,92,255,.2); --on-accent:#FFFFFF; --amber:#F2A03A;
  --ok:#7FD3A0; --ok-soft:rgba(47,154,98,.18); --bad:#FF8F86; --bad-soft:rgba(194,54,47,.2); --warn:#F2B25E; --warn-soft:rgba(242,160,58,.16);
  --l-ban:#FF7A70; --l-high:#F2A03A; --l-tr:#8FA4FF; --l-min:#7FD3A0;
  --xp:#A99BFF; --coin:#F2C14E; --medal-none:rgba(255,255,255,.12); --ribbon:#3B6FFF;
  --glass:rgba(255,255,255,.045); --hairline:rgba(255,255,255,.12); --toast-bg:#141826; --on-tint:#07090F;
  --glow-a:rgba(43,92,255,.42); --glow-b:rgba(242,160,58,.32); --glow-c:rgba(28,48,170,.5); --glow-d:rgba(124,90,230,.28);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#07090F; --surface:rgba(255,255,255,.045); --sunk:rgba(255,255,255,.06); --ink:#F1F2F6; --muted:#A9AEC0; --line:rgba(255,255,255,.12);
  --accent:#8FA4FF; --accent-soft:rgba(43,92,255,.2); --on-accent:#FFFFFF; --amber:#F2A03A;
  --ok:#7FD3A0; --ok-soft:rgba(47,154,98,.18); --bad:#FF8F86; --bad-soft:rgba(194,54,47,.2); --warn:#F2B25E; --warn-soft:rgba(242,160,58,.16);
  --l-ban:#FF7A70; --l-high:#F2A03A; --l-tr:#8FA4FF; --l-min:#7FD3A0;
  --xp:#A99BFF; --coin:#F2C14E; --medal-none:rgba(255,255,255,.12); --ribbon:#3B6FFF;
  --glass:rgba(255,255,255,.045); --hairline:rgba(255,255,255,.12); --toast-bg:#141826; --on-tint:#07090F;
  --glow-a:rgba(43,92,255,.42); --glow-b:rgba(242,160,58,.32); --glow-c:rgba(28,48,170,.5); --glow-d:rgba(124,90,230,.28);
  color-scheme:dark}

/* тло зі світінням і зерном */
html{background:var(--bg)}
body{
  font-family:var(--f-body);
  background:
    radial-gradient(48% 42% at 100% 0%, var(--glow-a), transparent 70%),
    radial-gradient(30% 32% at 86% 6%, var(--glow-b), transparent 70%),
    radial-gradient(46% 40% at 0% 100%, var(--glow-c), transparent 72%),
    radial-gradient(26% 26% at 100% 100%, var(--glow-d), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* типографіка */
h1,h2,h3,.title,.hero h1,header.top h1,.detail h2.ttl,.big h2,.listhead h2,.sec>h2{font-family:var(--f-display)}
.title,.hero h1,header.top h1{font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.08}
.hero h1{font-size:clamp(30px,5.4vw,56px)}
.hero h1::after,header.top h1::after{content:"";display:block;width:46px;height:3px;background:var(--eu);margin-top:14px;border-radius:2px}
.detail h2.ttl{font-weight:400;text-transform:uppercase;letter-spacing:.01em}
.eyebrow,.rail h2,.sec h3,.set .lbl,.hud .stat span,.tl h2.tt,.mt-h .tn{font-family:var(--f-display);font-weight:400;letter-spacing:.12em}
.eyebrow::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:-1px;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0C12.8 6.5 17.5 11.2 24 12 17.5 12.8 12.8 17.5 12 24 11.2 17.5 6.5 12.8 0 12 6.5 11.2 11.2 6.5 12 0Z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0C12.8 6.5 17.5 11.2 24 12 17.5 12.8 12.8 17.5 12 24 11.2 17.5 6.5 12.8 0 12 6.5 11.2 11.2 6.5 12 0Z'/></svg>") center/contain no-repeat}
.lead,header.top p,.hero p{font-weight:300;font-size:17px}
b,strong{font-weight:500}
.result-big,.rw-nums b,.kpis b,.hud .stat b,.big .nums b{font-family:var(--f-display);font-weight:400;font-variant-numeric:tabular-nums}

/* поверхні */
.card,.g,.detail,.bdg,.mt,.rw,.kpis div,.rules div,.opt,.al,.frag,.big{border-radius:16px}
.card,.g,.detail,.mt,.rw,.kpis div,.rules div{background:var(--glass);border-color:var(--hairline);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hud{background:transparent;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.toast{background:var(--toast-bg)}
.reward,.setup{background:var(--sunk);border-color:var(--hairline);border-radius:16px}

/* кнопки-пігулки */
.btn,.seg button,.chip,.search{border-radius:999px}
.btn{padding:10px 18px}
.btn.primary{background:var(--eu);border-color:var(--eu);color:#fff;font-weight:500}
.btn.primary:hover{filter:brightness(1.08)}
.seg button[aria-pressed="true"],.chip[aria-pressed="true"]{color:#fff}
.badge{background:transparent;border:1px solid var(--ink);font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:13px}

/* перемикач теми */
.themebtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hairline);background:var(--glass);color:var(--ink);border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;cursor:pointer}
.themebtn:hover{border-color:var(--accent)}
.themebtn i{width:14px;height:14px;border-radius:50%;background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);border:1.5px solid var(--ink)}
.themefloat{position:fixed;right:16px;top:calc(12px + env(safe-area-inset-top,0px));z-index:40}

/* ---------- закріплена палітра тем курсу (однакова для тренажерів, кейс-банку, презентацій) ---------- */
:root{
  --t1:#2B5CFF; --t2:#00B2A9; --t3:#8A3FFC; --t4:#FF2E93; --t5:#1DB954;
  --t6:#FF7A00; --t7:#9CC200; --t8:#FFB300; --t9:#F0283C; --t10:#00A3FF;
  --tc-ink-mix:#000; --tc-ink-pct:28%;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tc-ink-mix:#fff; --tc-ink-pct:12%}}
:root[data-theme="dark"]{--tc-ink-mix:#fff; --tc-ink-pct:12%}
/* смуга-спектр на головній */
.spectrum{height:10px!important;border-radius:6px!important;box-shadow:0 6px 22px -8px rgba(43,92,255,.55)}
/* бейдж «ТЕМА N» на головній - заливка кольором теми, білий текст */
.tl h2.tt span{color:#fff!important;border-radius:999px!important;padding:3px 12px!important}
.tl h2.tt{color:var(--ink)}
.g::before{height:8px!important;background:linear-gradient(90deg,var(--tc),color-mix(in srgb,var(--tc) 55%,#fff))!important}
.g .go{color:color-mix(in srgb,var(--tc) calc(100% - var(--tc-ink-pct)),var(--tc-ink-mix))!important}
#topic{color:#fff!important}
.chip[aria-pressed="true"]{color:#fff}

/* кейс-банк: кольори тем */
.topics button .n{color:color-mix(in srgb,var(--tc,var(--accent)) calc(100% - var(--tc-ink-pct)),var(--tc-ink-mix));font-weight:500}
.topics button{position:relative}
.topics button::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--tc,transparent)}
.topics button[aria-pressed="true"]{background:color-mix(in srgb,var(--tc,var(--accent)) 16%,transparent)!important}
#grid .card{position:relative;overflow:hidden;border-top:0}
#grid .card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--tc),color-mix(in srgb,var(--tc) 50%,#fff))}
#grid .card:hover{border-color:var(--tc)}
#grid .card .code{gap:8px;margin-top:4px}
#grid .card .code b{color:color-mix(in srgb,var(--tc) calc(100% - var(--tc-ink-pct)),var(--tc-ink-mix))}
.tpill{margin-right:auto;font-size:11px;font-family:var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--tc);border-radius:999px;padding:2px 9px}
.detail{position:relative;overflow:hidden}
.detail::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:linear-gradient(90deg,var(--tc,var(--accent)),color-mix(in srgb,var(--tc,var(--accent)) 50%,#fff))}
.detail .sec h3{color:color-mix(in srgb,var(--tc,var(--accent)) calc(100% - var(--tc-ink-pct)),var(--tc-ink-mix))}
.detail .eyebrow::before{background:var(--tc,var(--accent))}