/* assets/css/cbc-byteplay-kit.css (v1748, BytePlay v2 design alignment)
 * The ONE BytePlay design kit, taken from the approved screen designs D1-D16 (owner rule 14 Oct 2026: every BytePlay screen
 * keeps that colourful UI). Loaded on every BytePlay page by bp_head(). Classes are prefixed bpk- so they never clash with
 * the older bp- classes; pages switch to them screen by screen. Light, fixed colours (BytePlay pages are light-only).
 */
:root{--bpk-ink:#1e1536;--bpk-sub:#6b5f8a;--bpk-line:#ece6fb;--bpk-soft:#faf8ff;--bpk-violet:#7c3aed;--bpk-pink:#db2777;--bpk-orange:#f97316;--bpk-teal:#0d9488;--bpk-blue:#2563eb;
  --bpk-display:"Bricolage Grotesque",system-ui,sans-serif;--bpk-body:"IBM Plex Sans",system-ui,sans-serif;--bpk-mono:"IBM Plex Mono",ui-monospace,monospace}
.bpk{font-family:var(--bpk-body);color:var(--bpk-ink)}
.bpk h1,.bpk h2,.bpk h3,.bpk h4,.bpk-display{font-family:var(--bpk-display);letter-spacing:-.01em}
.bpk-h{font:800 clamp(1.4rem,3vw,1.9rem)/1.15 var(--bpk-display);margin:0 0 4px}
.bpk-sub{color:var(--bpk-sub);font-size:.86rem}
.bpk-sec{font:800 1.05rem var(--bpk-display);margin:18px 0 10px}
/* cards + grids */
.bpk-card{background:#fff;border:1px solid var(--bpk-line);border-radius:14px;padding:14px 16px}
.bpk-card>h2,.bpk-card>h3,.bpk-card>h4{margin:0 0 8px;font:700 1rem var(--bpk-display)}
.bpk-g2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
.bpk-g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.bpk-g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
@media(max-width:820px){.bpk-g2{grid-template-columns:1fr}}
/* KPI tiles k1-k5 */
.bpk-kpi{display:block;border-radius:14px;padding:14px;color:#fff;text-decoration:none}
.bpk-kpi b{display:block;font:800 1.55rem var(--bpk-display);font-variant-numeric:tabular-nums;margin:2px 0}
.bpk-kpi span,.bpk-kpi small{font-size:.78rem;opacity:.93}
.bpk-k1{background:linear-gradient(135deg,#7c3aed,#a855f7)}.bpk-k2{background:linear-gradient(135deg,#db2777,#f472b6)}.bpk-k3{background:linear-gradient(135deg,#f97316,#fbbf24)}
.bpk-k4{background:linear-gradient(135deg,#0d9488,#2dd4bf)}.bpk-k5{background:linear-gradient(135deg,#2563eb,#38bdf8)}
/* buttons */
.bpk-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;padding:8px 14px;font:600 .86rem var(--bpk-body);border:0;color:#fff;background:linear-gradient(90deg,#7c3aed,#db2777);text-decoration:none;cursor:pointer;white-space:nowrap}
.bpk-btn:hover,.bpk-btn:focus-visible{filter:brightness(1.07);outline:2px solid #c4b5fd;outline-offset:1px}
.bpk-btn.o{background:#fff;color:#6d28d9;border:1.5px solid #d8cbfa}
.bpk-btn.g{background:linear-gradient(90deg,#16a34a,#22c55e)}
.bpk-btn.r{background:#fff;color:#be123c;border:1.5px solid #fecdd3}
.bpk-btn.big{padding:12px 18px;font-size:1rem;width:100%}
/* chips */
.bpk-chip{display:inline-flex;align-items:center;gap:4px;font:600 .74rem var(--bpk-body);padding:3px 10px;border-radius:999px;background:#f1ecfe;color:#6d28d9;white-space:nowrap;text-decoration:none;border:0}
a.bpk-chip:hover{filter:brightness(.97)}
.bpk-chip.on{background:#7c3aed;color:#fff}
.bpk-c-pink{background:#fde7f1;color:#be185d}.bpk-c-or{background:#ffedd5;color:#c2410c}.bpk-c-tl{background:#ccfbf1;color:#0f766e}.bpk-c-bl{background:#dbeafe;color:#1d4ed8}
.bpk-c-gr{background:#dcfce7;color:#15803d}.bpk-c-yl{background:#fef9c3;color:#a16207}.bpk-c-rd{background:#ffe4e6;color:#be123c}
/* tabs (gradient active) */
.bpk-tabs{display:flex;gap:4px;border-bottom:2px solid var(--bpk-line);margin:0 0 14px;flex-wrap:wrap}
.bpk-tabs a,.bpk-tabs button{padding:8px 14px;font:600 .88rem var(--bpk-body);color:var(--bpk-sub);border-radius:8px 8px 0 0;text-decoration:none;background:none;border:0;cursor:pointer}
.bpk-tabs a.on,.bpk-tabs button.on,.bpk-tabs [aria-selected="true"],.bpk-tabs [aria-current="page"]{color:#fff;background:linear-gradient(90deg,#7c3aed,#db2777)}
/* step tracker */
.bpk-steps{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px;list-style:none;padding:0}
.bpk-step{flex:1;min-width:120px;border-radius:10px;padding:8px 10px;background:#fff;border:1.5px solid var(--bpk-line);font-weight:600;font-size:.8rem;display:flex;gap:8px;align-items:center;color:inherit;text-decoration:none}
.bpk-step .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;background:#ede9fe;color:#6d28d9;flex:none}
.bpk-step.done .n{background:#22c55e;color:#fff}.bpk-step.cur{border-color:#db2777;background:#fff5fa}.bpk-step.cur .n{background:#db2777;color:#fff}
/* progress bar, ring */
.bpk-pb{height:8px;border-radius:99px;background:#efeafc;overflow:hidden}
.bpk-pb i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7c3aed,#db2777)}
.bpk-ring{--p:0;--c:#22c55e;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),#efeafc 0);margin:0 auto}
.bpk-ring>div{width:70px;height:70px;border-radius:50%;background:#fff;display:grid;place-items:center;font:800 1.15rem var(--bpk-display)}
/* alerts (to do, tips) */
.bpk-alert{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:10px;margin-bottom:6px;font-size:.84rem;color:inherit;text-decoration:none}
.bpk-al-r{background:#fff1f2}.bpk-al-o{background:#fff7ed}.bpk-al-b{background:#eff6ff}.bpk-al-g{background:#ecfdf5}
/* list rows (lessons, topics) */
.bpk-tp{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid #f1ecfb;font-size:.86rem;color:inherit;text-decoration:none}
.bpk-tp .ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:.8rem;flex:none}
.bpk-tp .t{flex:1;min-width:0}
.bpk-tp.cur{background:#f5f0ff;outline:1.5px solid #c4b5fd;border-radius:8px}
.bpk-ic-v{background:#ede9fe}.bpk-ic-a{background:#fef3c7}.bpk-ic-p{background:#fee2e2}.bpk-ic-q{background:#dcfce7}.bpk-ic-l{background:#cffafe}.bpk-ic-s{background:#fce7f3}.bpk-ic-c{background:#e0e7ff}.bpk-ic-x{background:#f3f4f6}
/* course cards with gradient thumbs */
.bpk-cc{display:block;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--bpk-line);color:inherit;text-decoration:none}
.bpk-cc:hover{box-shadow:0 10px 24px -14px rgba(76,29,149,.45)}
.bpk-thumb{height:96px;display:flex;align-items:flex-end;padding:8px 10px;color:#fff;font:800 .9rem/1.2 var(--bpk-display);background-size:cover;background-position:center}
.bpk-th1{background-image:linear-gradient(135deg,#7c3aed,#22d3ee)}.bpk-th2{background-image:linear-gradient(135deg,#db2777,#f97316)}.bpk-th3{background-image:linear-gradient(135deg,#0d9488,#84cc16)}.bpk-th4{background-image:linear-gradient(135deg,#2563eb,#a855f7)}
.bpk-cc .ci{padding:10px}
.bpk-stars{color:#f59e0b;letter-spacing:1px}
/* goal band, hero bands */
.bpk-goal{border-radius:14px;padding:14px 16px;color:#fff;background:linear-gradient(110deg,#f97316,#db2777 60%,#7c3aed);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.bpk-goal .bpk-pb{flex:1;min-width:160px;background:rgba(255,255,255,.3)}.bpk-goal .bpk-pb i{background:#fff}
.bpk-hero-dark{color:#fff;background:linear-gradient(120deg,#1e1536,#4c1d95 55%,#9d174d);border-radius:18px;padding:22px}
.bpk-confetti{border-radius:16px;padding:24px;text-align:center;color:#fff;background:radial-gradient(circle at 10% 20%,#facc15 0 3px,transparent 4px),radial-gradient(circle at 80% 30%,#22d3ee 0 3px,transparent 4px),radial-gradient(circle at 60% 80%,#fde047 0 3px,transparent 4px),radial-gradient(circle at 30% 70%,#f472b6 0 3px,transparent 4px),linear-gradient(135deg,#7c3aed,#db2777)}
/* search + autocomplete */
.bpk-search{display:flex;gap:8px;align-items:center;background:#fff;border:2px solid #c4b5fd;border-radius:12px;padding:6px 8px 6px 12px}
.bpk-search input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:.95rem;background:transparent;color:var(--bpk-ink)}
.bpk-ac{background:#fff;border:1px solid var(--bpk-line);border-radius:10px;padding:6px;font-size:.84rem;box-shadow:0 8px 20px -10px rgba(76,29,149,.3)}
.bpk-ac a{display:flex;gap:10px;padding:6px 9px;border-radius:7px;color:inherit;text-decoration:none}
.bpk-ac a:hover,.bpk-ac a:focus{background:#f5f0ff;outline:0}
/* Course-to-Career bar (segmented) */
.bpk-ctc{display:flex;flex-wrap:nowrap;margin:8px 0;list-style:none;padding:0;overflow-x:auto}
.bpk-ctc li{flex:1;min-width:96px}
.bpk-ctc a{display:block;height:100%;text-align:center;font-size:.74rem;font-weight:600;padding:8px 4px;color:#fff;text-decoration:none}
.bpk-ctc li:first-child a{border-radius:10px 0 0 10px}.bpk-ctc li:last-child a{border-radius:0 10px 10px 0}
.bpk-ctc .s1 a{background:#7c3aed}.bpk-ctc .s2 a{background:#9333ea}.bpk-ctc .s3 a{background:#db2777}.bpk-ctc .s4 a{background:#f97316}.bpk-ctc .s5 a{background:#0d9488}.bpk-ctc .s6 a{background:#2563eb}
.bpk-ctc .locked a{background:#e5e1f0!important;color:#6b5f8a}
.bpk-ctc .now a{box-shadow:inset 0 0 0 3px #fde047}
.bpk-ctc small{display:block;font-weight:500;opacity:.9;font-size:.68rem}
/* insights: funnel + heat strip */
.bpk-funnel div{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:.82rem}
.bpk-funnel b{display:block;height:22px;border-radius:6px;color:#fff;font:600 .72rem var(--bpk-body);padding:3px 8px;min-width:40px;white-space:nowrap}
.bpk-funnel .lbl{width:132px;flex:none;color:#4c3d73}
.bpk-heat{display:flex;gap:3px}.bpk-heat i{flex:1;height:26px;border-radius:4px;min-width:4px}
/* badges, certificate card */
.bpk-badge{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;color:#fff}
.bpk-b1{background:linear-gradient(135deg,#f97316,#facc15)}.bpk-b2{background:linear-gradient(135deg,#7c3aed,#db2777)}.bpk-b3{background:linear-gradient(135deg,#0d9488,#22d3ee)}.bpk-b4{background:#e5e1f0;color:#a49bc0}
.bpk-cert{background:#fff;border-radius:12px;border:3px double #c4b5fd;padding:16px;text-align:center}
/* phone drawer handle */
.bpk-handle{width:40px;height:4px;border-radius:9px;background:#d8cbfa;margin:0 auto 8px}
/* tables */
.bpk-t{width:100%;border-collapse:collapse;font-size:.84rem}
.bpk-t th{font:600 .7rem var(--bpk-body);text-transform:uppercase;letter-spacing:.05em;color:#8a7fa8;text-align:left;padding:6px 8px;border-bottom:1px solid #eee8fb}
.bpk-t td{padding:8px;border-bottom:1px solid #f4f0fd;vertical-align:middle}
/* forms */
.bpk-in{width:100%;box-sizing:border-box;background:#fff;border:1.5px solid #e4dcfa;border-radius:9px;padding:8px 10px;color:#3b2f5c;font:inherit}
.bpk-in:focus{outline:2px solid #c4b5fd;border-color:#a78bfa}
.bpk-lbl{display:block;font-weight:600;font-size:.76rem;color:#4c3d73;margin:10px 0 4px}
.bpk-ok{color:#15803d}.bpk-warn{color:#c2410c}.bpk-bad{color:#be123c}
@media(prefers-reduced-motion:reduce){.bpk *{transition:none!important;animation:none!important}}
/* v1748: the existing BytePlay hub + course page dressed in the kit (designs D7, D8) */
.bpk .bp-toolbar{position:relative}
.bpk .bp-toolbar .bp-search{border:2px solid #c4b5fd;border-radius:12px;font-family:var(--bpk-body)}
.bpk .bp-toolbar .bp-filter{border:0;border-radius:999px;background:#f1ecfe;color:#6d28d9;font:600 .78rem var(--bpk-body);padding:7px 12px}
.bpk .bp-toolbar .bp-btn,.bpk .bp-btn{background:linear-gradient(90deg,#7c3aed,#db2777);border-color:transparent}
.bpk .bp-card{border-radius:12px;border:1px solid var(--bpk-line)}
.bpk .bp-chip.is-on{background:#7c3aed;color:#fff}
.bpk .bp-sec-title{font-family:var(--bpk-display)}
.bpk-hero-dark .bp-muted,.bpk-hero-dark .bp-sub{color:#e9e3ff}
.bpk-hero-dark h1{color:#fff;font-family:var(--bpk-display)}
.bpk-hero-dark .bp-pill{background:rgba(255,255,255,.16);color:#fff}
.bpk-hero-dark .bp-stars{color:#fbbf24}
.bpk-hero-dark .bpk-ctc-lbl{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.9;margin:14px 0 4px}
/* v1748: the lesson rail of the player (design D9) */
.bpk .bp-rail{border-radius:14px;border:1px solid var(--bpk-line);background:#fff}
.bpk .bp-rrow{border-radius:8px}
.bpk .bp-rrow.is-cur{background:#f5f0ff;outline:1.5px solid #c4b5fd}
.bpk .bp-rrow.is-done .bp-rk{background:#dcfce7;color:#15803d}
.bpk .bp-ring{--bp-ring-c:#22c55e}