/* =====================================================================
   Theme layer: colourful, glassy, animated. Loaded after style.css.
   ===================================================================== */
:root { --accent: #6d5efc; --accent-2: #22d3ee; }
/* re-declared on every element that sets an accent, so the gradient follows that element's own colours */
:root, [data-part] {
  --grad: linear-gradient(135deg, var(--accent), var(--accent-2));
  --glow: color-mix(in srgb, var(--accent) 55%, transparent);
}
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
:root[data-theme="dark"] {
  --surface-0: #0b0c11; --surface-1: #14161e; --surface-2: #1d2029; --border: #2a2e3b;
  --accent-bg: #1a2036;
}
/* one accent colour per part of the course */
[data-part="S"] { --accent: #6d5efc; --accent-2: #22d3ee; }
[data-part="A"] { --accent: #2a78d6; --accent-2: #22d3ee; }
[data-part="B"] { --accent: #14b88a; --accent-2: #7ddc6f; }
[data-part="C"] { --accent: #f0662f; --accent-2: #fbbf24; }
[data-part="D"] { --accent: #e0509a; --accent-2: #f59ac4; }
[data-part="E"] { --accent: #7b5cf0; --accent-2: #c084fc; }
[data-part="F"] { --accent: #eda100; --accent-2: #fb7185; }
[data-part="R"] { --accent: #06b6d4; --accent-2: #6d5efc; }

body {
  background-color: var(--surface-0);
  background-image:
    radial-gradient(900px 520px at 88% -8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    radial-gradient(700px 520px at -6% 45%, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 62%);
  background-attachment: fixed;
}
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 40%, var(--border)) transparent; }

/* scroll progress bar */
#scrollbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 50; background: var(--grad); box-shadow: 0 0 10px var(--glow); }

/* top bar */
.topbar { background: color-mix(in srgb, var(--surface-1) 72%, transparent); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
.logo { background: var(--grad); box-shadow: 0 4px 14px var(--glow); animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-2px) rotate(-6deg); } }
.pill { border: 1px solid var(--border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 38%, var(--surface-2)) var(--pct, 0%), var(--surface-2) var(--pct, 0%)); }

/* sidebar */
.sidebar { background: color-mix(in srgb, var(--surface-1) 80%, transparent); backdrop-filter: blur(12px); }
.sidebar .group { display: flex; align-items: center; gap: 7px; color: var(--accent); }
.sidebar .group::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 8px var(--glow); }
.sidebar a { transition: background .15s, transform .15s; }
.sidebar a:hover { transform: translateX(3px); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.sidebar a .ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 14%, transparent); font-size: 14px; }
.sidebar a.active { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--text-primary); box-shadow: inset 3px 0 0 var(--accent); }
.sidebar a.active .ic { background: var(--grad); }

/* page header */
.pagehead { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.h1ic { flex-shrink: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; font-size: 28px; background: var(--grad); box-shadow: 0 10px 26px -8px var(--glow); }
main h1 { margin: 0; font-size: 2.1rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.15;
  background: linear-gradient(90deg, var(--text-primary) 35%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.crumb { text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-weight: 700; color: var(--accent); }
.lead { font-size: 1.1rem; }
main h2 { display: flex; align-items: center; gap: 10px; }
main h2::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), transparent); }

/* entry animation */
main > * { animation: rise .5s cubic-bezier(.2, .7, .2, 1) both; }
main > *:nth-child(2) { animation-delay: .04s; } main > *:nth-child(3) { animation-delay: .08s; } main > *:nth-child(4) { animation-delay: .12s; }
main > *:nth-child(5) { animation-delay: .16s; } main > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* cards */
.card { position: relative; border-radius: 20px; background: color-mix(in srgb, var(--surface-1) 92%, transparent); transition: border-color .2s, box-shadow .2s; }
.card::before { content: ""; position: absolute; top: -1px; left: 22px; right: 22px; height: 3px; border-radius: 0 0 4px 4px; background: var(--grad); opacity: .85; }
.card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 14px 40px -22px var(--glow); }

/* callout boxes */
.box { --box-c: var(--s1); border-width: 1px; border-left-width: 1px; border-radius: 16px; position: relative; padding-left: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--box-c) 11%, var(--surface-1)), var(--surface-1) 70%);
  border-color: color-mix(in srgb, var(--box-c) 28%, var(--border)); }
.box::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--box-c); }
.box.idea { --box-c: var(--s1); } .box.trap { --box-c: var(--critical); } .box.exam { --box-c: var(--s4); } .box.tip { --box-c: var(--s3); }
.box > b.tag { color: var(--box-c) !important; }

/* formulas */
.fb { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface-2)), var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 14px; }

/* buttons and controls */
.btn { border-radius: 11px; transition: transform .12s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.primary { background: var(--grad); border: 0; box-shadow: 0 8px 20px -8px var(--glow); }
.btn.primary:hover { filter: brightness(1.08); box-shadow: 0 10px 26px -8px var(--glow); }
.btn.primary[disabled] { filter: grayscale(.6) opacity(.7); box-shadow: none; transform: none; }
.seg { border-radius: 12px; padding: 3px; gap: 2px; background: var(--surface-2); border: 0; }
.seg button { border: 0; border-radius: 9px; background: transparent; transition: background .15s, color .15s; }
.seg button:hover:not(.on) { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.seg button.on { background: var(--grad); box-shadow: 0 4px 12px -4px var(--glow); }
.tabs { border-bottom-color: color-mix(in srgb, var(--accent) 25%, var(--border)); }
.tabs button.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: inset 0 3px 0 var(--accent); }
input[type=number], input[type=text], select, textarea { border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
input[type=number]:focus, input[type=text]:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
input[type=range] { -webkit-appearance: none; appearance: none; height: 7px; border-radius: 99px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, var(--surface-2)), color-mix(in srgb, var(--accent-2) 45%, var(--surface-2))); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--grad); border: 3px solid var(--surface-1); box-shadow: 0 2px 10px var(--glow); transition: transform .12s; }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.18); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface-1); box-shadow: 0 2px 10px var(--glow); }

/* readouts */
.stat { border: 1px solid var(--border); border-radius: 14px; transition: transform .15s; }
.stat:hover { transform: translateY(-2px); }
.stat.big { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 17%, var(--surface-1)), color-mix(in srgb, var(--accent-2) 10%, var(--surface-1))); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.stat.big .v { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* tables */
table.t { border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
table.t th, table.t td { border: 0; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
table.t tr > *:last-child { border-right: 0; } table.t tr:last-child > * { border-bottom: 0; }
table.t th { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }

/* worked-solution stepper */
.stepper { border-radius: 16px; border-left: 4px solid var(--accent); box-shadow: 0 6px 24px -18px var(--glow); }
.stepper .q .src { color: var(--accent); }
.step::before { background: var(--grad); box-shadow: 0 3px 10px -2px var(--glow); }

/* quiz */
.quiz-opt { border-radius: 12px; transition: transform .12s, border-color .15s, background .15s; }
.quiz-opt:hover:not([disabled]) { transform: translateX(4px); border-color: var(--accent); }
.quiz-opt.right { animation: pop .35s; } .quiz-opt.wrong { animation: shake .35s; }
@keyframes pop { 50% { transform: scale(1.02); } } @keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.understood { background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); transition: transform .15s; }
.understood:hover { transform: scale(1.03); }
.result-card { border-radius: 16px; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface-1)); }
.chip.a { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text-primary); }

/* confetti burst when a topic is ticked */
.confetti { position: fixed; z-index: 200; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; animation: confetti 1.1s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }

/* hero banner (start page) */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 10px; align-items: center; position: relative; overflow: hidden; margin: 14px 0 20px; padding: 30px 32px; border-radius: 26px; color: #fff;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 45%, #0891b2 100%); box-shadow: 0 24px 60px -26px rgba(79, 70, 229, .8); }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 260px at 92% -5%, rgba(255, 255, 255, .3), transparent 62%), radial-gradient(420px 320px at -5% 115%, rgba(0, 0, 0, .3), transparent 62%); }
.hero > * { position: relative; }
.hero h2 { display: block; font-size: 2.2rem; line-height: 1.08; margin: .35em 0 .3em; padding: 0; letter-spacing: -.03em; color: #fff; }
.hero h2::after { display: none; }
.hero h2 span { color: #fde68a; }
.hero p { color: rgba(255, 255, 255, .9); max-width: 48ch; margin: 0 0 6px; }
.hero-badge { display: inline-block; padding: 4px 13px; border-radius: 99px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .25); font-size: 12.5px; font-weight: 650; }
.hero-stats { display: flex; gap: 22px; flex-wrap: wrap; margin: 16px 0 14px; }
.hero-stats div { font-size: 12.5px; opacity: .92; }
.hero-stats b { display: block; font-size: 1.7rem; line-height: 1.1; }
.hero .btn { background: rgba(255, 255, 255, .15); color: #fff; border: 1px solid rgba(255, 255, 255, .32); }
.hero .btn.primary { background: #fff; color: #4338ca; border: 0; box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .5); }
.hero-art svg { width: 100%; height: auto; display: block; overflow: visible; }
.hero-art .c { fill: none; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw 2.2s ease forwards; }
.hero-art .b { fill: rgba(255, 255, 255, .26); transform-box: fill-box; transform-origin: bottom; animation: grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.hero-art .dot { fill: #fde68a; animation: float 3.2s ease-in-out infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes float { 50% { transform: translateY(-7px); } }
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; padding: 22px; } .hero-art { display: none; } .hero h2 { font-size: 1.7rem; }
  .h1ic { width: 46px; height: 46px; font-size: 23px; } main h1 { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; } }