/* Brightpath Academy — learning-platform demo (.dx-education) */
.dx-education{
  --dx-bg: #F6FAFB;
  --dx-surface: #FFFFFF;
  --dx-surface-2: #E8F1F4;
  --dx-text: #0F2530;
  --dx-muted: #5D7280;
  --dx-border: #DCE8EC;
  --dx-accent: #0E7490;
  --dx-accent-ink: #FFFFFF;
  --dx-accent-soft: rgba(14,116,144,.1);
  --dx-radius: 12px;
}
.dx-education h1{ font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing:-.02em; }
.dx-education h2{ font-size: 1.35rem; }
.dx-education h3{ font-size: 1.02rem; }
.bp-header{ position: sticky; top:56px; z-index: 20; background: var(--dx-surface); border-bottom: 1px solid var(--dx-border); }
.bp-header-inner{ display:flex; align-items:center; gap: 1.5rem; min-height: 64px; }
.bp-logo{ display:flex; align-items:center; gap:.5rem; font-weight:800; font-size: 1.15rem; text-decoration:none; }
.bp-logo-mark{ width:34px; height:34px; border-radius: 10px; display:grid; place-items:center; background: var(--dx-accent); color:#fff; }
.bp-logo-mark svg{ width:19px; height:19px; }
.bp-logo-sub{ font-weight:500; color: var(--dx-muted); }
.bp-nav{ display:flex; gap: 1.25rem; }
.bp-nav a{ white-space:nowrap; text-decoration:none; font-weight:600; font-size:.92rem; color: var(--dx-muted); display:flex; align-items:center; gap:.35rem; }
.bp-nav a[aria-current]{ color: var(--dx-accent); }
.bp-nav-count{ min-width:20px; padding: 0 6px; border-radius:10px; background: var(--dx-accent); color:#fff; font-size:11px; text-align:center; }
.bp-nav-count[hidden]{ display:none; }
.bp-header-search{ flex:1; max-width: 360px; margin-left:auto; }
.bp-avatar{ width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; background: var(--dx-surface-2); color: var(--dx-accent); font-weight:700; }
.bp-avatar.lg{ width:60px; height:60px; background: linear-gradient(135deg, var(--dx-accent), #22D3EE); color:#fff; font-size:1.1rem; }
@media (max-width: 760px){ .bp-header-search, .bp-logo-sub{ display:none; } .bp-nav{ margin-left:auto; gap: .9rem; } .bp-header-inner{ gap: .8rem; } }

.bp-hero{ background: linear-gradient(135deg, #0B3B4A, #0E7490 60%, #14B8A6); color:#E6FAFF; }
.bp-hero-inner{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items:center; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.bp-hero h1{ color:#fff; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height:1.08; }
.bp-hero p{ color:#C5ECF5; font-size:1.08rem; max-width: 48ch; }
.bp-hero-search{ display:flex; gap:.5rem; margin-top: 1.4rem; max-width: 520px; }
.bp-hero-search .dx-search{ flex:1; }
.bp-hero-search .dx-input{ padding-block: .9rem; border:0; }
.bp-hero-search .dx-btn{ background:#FBBF24; color:#0F2530; }
.bp-hero-stats{ display:flex; gap: 1.5rem; margin-top: 1.4rem; font-size:.9rem; color:#C5ECF5; flex-wrap:wrap; }
.bp-hero-stats b{ color:#fff; }
.bp-hero-art{ display:grid; grid-template-columns: 1fr 1fr; gap: .9rem; transform: rotate(-3deg); }
.bp-hero-art .bp-cover{ box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
.bp-hero-art .bp-cover:first-child{ grid-column: span 2; }
@media (max-width: 820px){ .bp-hero-inner{ grid-template-columns: 1fr; } .bp-hero-art{ display:none; } }

.bp-cover{ position:relative; aspect-ratio: 16/9; border-radius: 12px; overflow:hidden; background: linear-gradient(135deg, var(--c1), var(--c2)); color:#fff; }
.bp-cover span{ position:absolute; left:.8rem; top:.7rem; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.bp-cover svg{ position:absolute; inset:0; width:100%; height:100%; }
.bp-cover.big{ border-radius: 10px; }

.bp-continue{ padding-bottom: 0; }
.bp-continue-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem; }
.bp-continue-card{ display:flex; align-items:center; gap: 1rem; padding: 1rem; text-decoration:none; transition: border-color .15s; }
.bp-continue-card:hover{ border-color: var(--dx-accent); }
.bp-continue-card div{ display:flex; flex-direction:column; flex:1; min-width:0; }
.bp-continue-card > svg:last-child{ color: var(--dx-accent); }
.bp-ring text{ font-size: 12px; font-weight:700; fill: var(--dx-text); }
.bp-ring circle:last-of-type{ transition: stroke-dashoffset .8s cubic-bezier(.16,1,.3,1); }

.bp-filters{ display:flex; justify-content:space-between; gap: 1rem; flex-wrap:wrap; align-items:center; margin-bottom: .75rem; }
.bp-filters .dx-select{ width:auto; }
.bp-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: .75rem; }
@media (max-width: 960px){ .bp-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 580px){ .bp-grid{ grid-template-columns: 1fr; } }
.bp-span{ grid-column: 1/-1; }
.bp-card{ display:flex; flex-direction:column; background: var(--dx-surface); border:1px solid var(--dx-border); border-radius: 16px; overflow:hidden; text-decoration:none; transition: transform .25s, box-shadow .25s; padding: .6rem; }
.bp-card:hover{ transform: translateY(-4px); box-shadow: var(--dx-shadow); }
.bp-card-body{ display:flex; flex-direction:column; gap:.4rem; padding: .8rem .4rem .4rem; flex:1; }
.bp-card-body h3{ margin:0; }
.bp-card-body p{ margin:0; }
.bp-price{ font-size: 1.1rem; margin-top:auto; }
.bp-price.big{ font-size: 1.7rem; }
.bp-card-progress{ margin-top:auto; display:flex; flex-direction:column; gap:.3rem; }

.bp-course-hero{ background: linear-gradient(135deg, #0B2530, color-mix(in srgb, var(--c1) 70%, #0B2530)); color:#E6FAFF; }
.bp-course-hero-inner{ display:grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; padding-block: 2.5rem; align-items:start; }
.bp-course-hero h1{ color:#fff; }
.bp-course-hero p{ color:#C5ECF5; }
.bp-crumbs{ margin-bottom: .8rem; color:#9CC9D6; }
.bp-crumbs a{ text-decoration:none; }
.bp-meta{ flex-wrap:wrap; font-size:.9rem; margin: .8rem 0; }
.bp-meta span{ color:#C5ECF5; }
.bp-enroll{ padding: 1rem; display:flex; flex-direction:column; gap: .9rem; color: var(--dx-text); position: sticky; top: 140px; margin-bottom: -6rem; box-shadow: var(--dx-shadow); }
.bp-course-hero .bp-enroll p{ margin:0; color: var(--dx-muted); }
.bp-enroll-progress{ display:flex; align-items:center; gap: .9rem; }
.bp-enroll-progress div{ display:flex; flex-direction:column; }
.bp-course-body{ display:grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; }
.bp-course-body > div{ min-width:0; }
@media (max-width: 860px){
  .bp-course-hero-inner, .bp-course-body{ grid-template-columns: 1fr; }
  .bp-enroll{ position: static; margin-bottom: 0; }
}
.bp-outcomes{ list-style:none; padding: 1.2rem; margin: 0 0 2rem; display:grid; grid-template-columns: 1fr 1fr; gap: .7rem; border:1px solid var(--dx-border); border-radius: 14px; background: var(--dx-surface); }
.bp-outcomes li{ display:flex; gap:.5rem; font-size:.92rem; }
.bp-outcomes svg{ color: var(--dx-accent); width:18px; height:18px; margin-top:.15rem; }
@media (max-width: 560px){ .bp-outcomes{ grid-template-columns: 1fr; } }
.bp-curriculum{ display:flex; flex-direction:column; gap: .6rem; margin-top: .8rem; }
.bp-module{ border:1px solid var(--dx-border); border-radius: 12px; background: var(--dx-surface); overflow:hidden; }
.bp-module summary{ display:flex; justify-content:space-between; gap:1rem; padding: .9rem 1rem; cursor:pointer; font-weight:700; list-style:none; }
.bp-module summary::-webkit-details-marker{ display:none; }
.bp-module summary svg{ width:16px; height:16px; vertical-align:middle; display:inline-block; transition: transform .2s; }
.bp-module[open] summary svg{ transform: rotate(180deg); }
.bp-module ul{ list-style:none; margin:0; padding: 0 1rem .6rem; }
.bp-module li, .bp-module li a{ display:flex; align-items:center; gap:.7rem; padding: .5rem 0; font-size:.92rem; text-decoration:none; }
.bp-module li a{ width:100%; padding:0; }
.bp-module li a:hover{ color: var(--dx-accent); }
.bp-module li .dx-muted{ margin-left:auto; }
.bp-lesson-ic{ width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center; background: var(--dx-surface-2); color: var(--dx-accent); }
.bp-lesson-ic svg{ width:14px; height:14px; }
.bp-lesson-ic.done{ background: #16A34A; color:#fff; }
.bp-mt{ margin-top: 2rem; }
.bp-instructor{ display:flex; gap: 1rem; align-items:center; padding: 1rem; margin-top: .8rem; }
.bp-instructor p{ margin: .2rem 0 0; }
.bp-reviews{ display:flex; flex-direction:column; gap: .8rem; margin-top: .8rem; }
.bp-reviews blockquote{ margin:0; padding: 1rem; }
.bp-reviews p{ color: var(--dx-text); margin: .4rem 0; }
.bp-reviews cite{ font-style:normal; font-size:.85rem; font-weight:700; color: var(--dx-muted); }

/* player */
.dx-education.bp-in-player .bp-footer{ display:none; }
.bp-player{ display:grid; grid-template-columns: 320px 1fr; min-height: calc(100dvh - 120px); }
.bp-player-side{ border-right:1px solid var(--dx-border); background: var(--dx-surface); padding: 1rem; display:flex; flex-direction:column; gap: 1rem; position: sticky; top: 120px; height: calc(100dvh - 120px); overflow:auto; }
.bp-back{ display:flex; align-items:center; gap:.5rem; font-weight:700; text-decoration:none; font-size:.92rem; }
.bp-back svg{ width:18px; height:18px; }
.bp-side-progress{ display:flex; flex-direction:column; gap:.4rem; padding: .8rem; border-radius: 12px; background: var(--dx-surface-2); }
.bp-side-module{ display:flex; flex-direction:column; gap: 2px; }
.bp-side-title{ font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color: var(--dx-muted); margin: .4rem 0; }
.bp-side-lesson{ display:flex; gap:.7rem; align-items:center; padding: .5rem; border-radius: 10px; text-decoration:none; font-size:.9rem; }
.bp-side-lesson small{ display:block; color: var(--dx-muted); font-size:.75rem; }
.bp-side-lesson:hover{ background: var(--dx-surface-2); }
.bp-side-lesson[aria-current]{ background: var(--dx-accent-soft); color: var(--dx-accent); font-weight:700; }
.bp-player-main{ padding: clamp(1rem, 3vw, 2rem); max-width: 920px; width:100%; display:flex; flex-direction:column; gap: 1.1rem; }
.bp-lessons-toggle{ display:none !important; align-self:flex-start; }
.bp-video{ position:relative; aspect-ratio: 16/9; border-radius: 16px; overflow:hidden; background: radial-gradient(120% 90% at 30% 20%, var(--c2), var(--c1) 45%, #06151B); color:#fff; }
.bp-video::after{ content:''; position:absolute; inset:0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 40px); }
.bp-play{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); z-index:2; width:78px; height:78px; border-radius:50%; border:0; background: rgba(255,255,255,.95); color: var(--c1); display:grid; place-items:center; cursor:pointer; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .2s, opacity .3s; }
.bp-play:hover{ transform: translate(-50%,-50%) scale(1.06); }
.bp-play svg{ width:30px; height:30px; fill: currentColor; }
.bp-video.is-playing .bp-play{ opacity:0; pointer-events:none; }
.bp-video-title{ position:absolute; left:1.2rem; top:1rem; z-index:2; font-weight:700; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.bp-video-bar{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:center; gap:.8rem; padding: .7rem 1rem; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.bp-vbtn{ border:0; background:none; color:#fff; cursor:pointer; display:grid; place-items:center; }
.bp-vbtn svg{ fill: currentColor; }
.bp-scrub{ flex:1; height:5px; border-radius: 99px; background: rgba(255,255,255,.3); overflow:hidden; }
.bp-scrub i{ display:block; height:100%; width:0; background:#FBBF24; transition: width .2s linear; }
.bp-speed{ background: rgba(0,0,0,.35); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius: 6px; font-size:.8rem; padding: .15rem .3rem; }
.bp-reading-badge{ display:inline-flex; align-self:flex-start; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:99px; background: var(--dx-surface-2); color: var(--dx-accent); font-weight:700; font-size:.85rem; }
.bp-reading-badge svg{ width:16px; height:16px; }
.bp-lesson-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 1rem; flex-wrap:wrap; }
.bp-lesson-head h1{ font-size: 1.6rem; margin: .2rem 0 0; }
.bp-tabs{ align-self:flex-start; }
.bp-lesson-text p{ color: var(--dx-text); font-size: 1.02rem; line-height:1.7; max-width: 68ch; }
.bp-lesson-nav{ margin-top: auto; padding-top: 1.2rem; border-top:1px solid var(--dx-border); }
@media (max-width: 900px){
  .bp-player{ grid-template-columns: 1fr; }
  .bp-player-side{ position: fixed; z-index: 40; left:0; top: 56px; bottom:0; height:auto; width: min(320px, 88vw); transform: translateX(-105%); transition: transform .3s cubic-bezier(.16,1,.3,1); box-shadow: 20px 0 40px -20px rgba(0,0,0,.3); }
  .bp-player-side.is-open{ transform:none; }
  .bp-lessons-toggle{ display:inline-flex !important; }
}

/* quiz */
.bp-quiz{ display:flex; flex-direction:column; gap: 1rem; }
.bp-question{ padding: 1.1rem; border-width: 2px; margin:0; display:flex; flex-direction:column; gap:.5rem; transition: border-color .3s; }
.bp-question legend{ display:flex; gap:.6rem; align-items:flex-start; font-weight:700; padding:0; margin-bottom:.5rem; float:left; width:100%; }
.bp-question legend span{ width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; background: var(--dx-accent-soft); color: var(--dx-accent); font-size:.8rem; }
.bp-option{ display:flex; gap:.7rem; align-items:center; padding: .7rem .9rem; border:1px solid var(--dx-border); border-radius: 10px; cursor:pointer; transition: border-color .15s, background .15s; }
.bp-option:hover{ border-color: var(--dx-accent); }
.bp-option:has(input:checked){ border-color: var(--dx-accent); background: var(--dx-accent-soft); }
.bp-option input{ accent-color: var(--dx-accent); }
.bp-question.right{ border-color: #16A34A; }
.bp-question.wrong{ border-color: #DC2626; }
.bp-question.wrong .bp-option.is-answer, .bp-question.right .bp-option.is-answer{ border-color:#16A34A; background: rgba(22,163,74,.08); }
.bp-feedback{ margin:.3rem 0 0; font-size:.9rem; color: var(--dx-text); }
.bp-question.right .bp-feedback{ color:#15803D; }
.bp-question.wrong .bp-feedback{ color:#B91C1C; }

/* my learning + certificate */
.bp-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 1rem 0 1.5rem; }
.bp-stats .dx-card{ padding: 1.1rem; display:flex; flex-direction:column; }
.bp-stats b{ font-size: 1.8rem; color: var(--dx-accent); }
.bp-stats span{ color: var(--dx-muted); font-size:.88rem; }
.bp-my-list{ display:flex; flex-direction:column; gap: .9rem; }
.bp-my{ display:grid; grid-template-columns: 160px 1fr auto; gap: 1.2rem; align-items:center; padding: .8rem; }
.bp-my-body{ display:flex; flex-direction:column; gap:.4rem; }
.bp-my-body h3{ margin:0; }
.bp-my-actions{ display:flex; align-items:center; gap: .8rem; }
@media (max-width: 640px){ .bp-my{ grid-template-columns: 1fr; } .bp-stats{ grid-template-columns: 1fr; } }
.bp-checkout{ display:flex; flex-direction:column; gap: 1rem; }
.bp-cert-wrap{ display:flex; flex-direction:column; gap: 1rem; }
.bp-cert-name{ max-width: 320px; }
.bp-cert{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; padding: 2.2rem 1.5rem 1.5rem;
  border-radius: 14px; background: #FFFDF7; border: 10px solid transparent;
  background-image: linear-gradient(#FFFDF7, #FFFDF7), linear-gradient(135deg, var(--c1), var(--c2)); background-origin: border-box; background-clip: padding-box, border-box;
}
.bp-cert-brand{ display:flex; align-items:center; gap:.4rem; font-weight:800; color: var(--c1); }
.bp-cert-brand svg{ width:18px; height:18px; }
.bp-cert-label{ font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color: var(--dx-muted); }
.bp-cert-student{ font-family: Georgia, serif; font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight:400; color: var(--dx-text); }
.bp-cert strong{ font-size: 1.2rem; }
.bp-cert-foot{ display:flex; justify-content:space-between; width:100%; margin-top: 1.2rem; font-size:.85rem; color: var(--dx-muted); }
.bp-cert-foot span{ display:flex; flex-direction:column; border-top:1px solid var(--dx-border); padding-top:.4rem; min-width: 140px; }
.bp-confetti{ position: fixed; inset:0; pointer-events:none; z-index: 500; overflow:hidden; }
.bp-confetti i{ position:absolute; top:-12px; width:9px; height:14px; border-radius:2px; animation: bp-fall 2.2s cubic-bezier(.3,.6,.5,1) forwards; }
@keyframes bp-fall{ to{ transform: translate(var(--x), 105vh) rotate(720deg); opacity:.2; } }

.bp-footer{ border-top:1px solid var(--dx-border); padding-block: 1.5rem; margin-top: 2rem; background: var(--dx-surface); font-size:.9rem; }