.bsc-app, .bsc-app * { box-sizing: border-box !important; }
.bsc-app { width: 100% !important; max-width: 100% !important; color: #eaf2ff !important; font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important; line-height: 1.6 !important; direction: ltr !important; }
.bsc-shell { background: #0b1425 !important; border: 1px solid #304562 !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 22px 56px rgba(3,9,22,.28) !important; }
.bsc-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; padding: 25px 30px !important; background: radial-gradient(circle at 12% 10%,rgba(63,180,255,.22),transparent 34%),linear-gradient(110deg,#162743,#0e1b32 72%) !important; border-bottom: 1px solid #314a68 !important; }
.bsc-header h2 { margin: 3px 0 !important; color: #fff !important; font-size: clamp(1.35rem,2.3vw,2.1rem) !important; line-height: 1.3 !important; font-weight: 800 !important; text-align: start !important; }
.bsc-eyebrow { display: inline-block !important; color: #75d7ff !important; font-size: .78rem !important; letter-spacing: .06em !important; font-weight: 800 !important; }
.bsc-subtitle { margin: 5px 0 0 !important; color: #abc0db !important; font-size: .9rem !important; }
.bsc-back { flex: 0 0 auto !important; padding: 9px 16px !important; border-radius: 999px !important; border: 1px solid #5b7da5 !important; background: rgba(255,255,255,.07) !important; color: #eaf2ff !important; cursor: pointer !important; font: inherit !important; }
.bsc-back:hover { background: #233c5c !important; }
.bsc-catalog-grid { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)) !important; gap: 18px !important; padding: 26px !important; }
.bsc-catalog-card { min-height: 220px !important; padding: 22px !important; border: 1px solid #365173 !important; border-radius: 16px !important; background: linear-gradient(155deg,#1b3454,#14253e 70%) !important; box-shadow: 0 12px 28px rgba(0,0,0,.16) !important; }
.bsc-catalog-card h3 { color: #fff !important; font-size: 1.25rem !important; margin: 9px 0 !important; line-height: 1.4 !important; text-align: start !important; }
.bsc-catalog-card p { color: #b9cee5 !important; margin: 0 0 22px !important; }
.bsc-layout { display: grid !important; grid-template-columns: minmax(250px,310px) minmax(0,1fr) !important; min-height: 560px !important; direction: ltr !important; }
.bsc-outline { min-width: 0 !important; max-height: 85vh !important; overflow-y: auto !important; padding: 18px 13px !important; background: linear-gradient(180deg,#111f35,#0e192b) !important; border-right: 1px solid #2c4360 !important; direction: ltr !important; scrollbar-color: #4d7196 transparent !important; }
.bsc-outline details { margin: 0 0 10px !important; border: 1px solid #2f4865 !important; border-radius: 12px !important; overflow: hidden !important; background: #14243b !important; }
.bsc-outline details[open] { border-color: #4b87b7 !important; box-shadow: 0 4px 16px rgba(0,0,0,.16) !important; }
.bsc-outline summary { display: flex !important; align-items: center !important; gap: 10px !important; padding: 13px 12px !important; color: #f4f9ff !important; background: #203650 !important; cursor: pointer !important; font-weight: 750 !important; line-height: 1.45 !important; list-style: none !important; }
.bsc-outline summary::-webkit-details-marker { display: none !important; }
.bsc-outline summary::after { content: '⌄' !important; margin-left: auto !important; color: #85d9ff !important; font-size: 1.15rem !important; transition: transform .2s ease !important; }
.bsc-outline details[open] summary::after { transform: rotate(180deg) !important; }
.bsc-lesson-number { flex: 0 0 auto !important; display: inline-grid !important; place-items: center !important; width: 29px !important; height: 29px !important; border-radius: 8px !important; background: #345576 !important; color: #bdeaff !important; font-size: .72rem !important; font-variant-numeric: tabular-nums !important; }
.bsc-unit-list { display: grid !important; gap: 3px !important; padding: 7px !important; }
.bsc-unit-link { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding: 10px !important; text-align: start !important; color: #d3e3f4 !important; background: transparent !important; border: 0 !important; border-radius: 8px !important; cursor: pointer !important; font: inherit !important; font-size: .9rem !important; }
.bsc-unit-link span { flex: 0 0 auto !important; width: 21px !important; text-align: center !important; color: #65c9ff !important; }
.bsc-unit-link:hover, .bsc-unit-link.bsc-active { color: #fff !important; background: #2b4b6d !important; }
.bsc-unit-link.bsc-active { box-shadow: inset 3px 0 #5ed0ff !important; }
.bsc-main { min-width: 0 !important; padding: clamp(16px,2vw,28px) !important; background: #0c1729 !important; direction: ltr !important; }
.bsc-unit-panel { min-width: 0 !important; }
.bsc-unit-panel > h3 { margin: 0 0 17px !important; color: #fff !important; font-size: clamp(1.2rem,2vw,1.5rem) !important; font-weight: 750 !important; }
.bsc-empty-state { display: grid !important; place-items: center !important; align-content: center !important; min-height: 440px !important; text-align: center !important; border: 1px dashed #35536f !important; border-radius: 16px !important; color: #adc3d9 !important; background: radial-gradient(circle at center,#1a3450,#101e32 70%) !important; padding: 30px !important; }
.bsc-empty-state > span { color: #68d1ff !important; font-size: 3.4rem !important; line-height: 1 !important; }
.bsc-empty-state h3 { color: #fff !important; margin: 12px 0 2px !important; }
.bsc-empty-state p { margin: 0 !important; }
.bsc-content { margin: 20px 0 !important; color: #e7f0fb !important; overflow-wrap: anywhere !important; }
.bsc-content a { color: #8cd8ff !important; }
.bsc-content img { max-width: 100% !important; height: auto !important; }
.bsc-player { position: relative !important; background: #02060c !important; border: 1px solid #314761 !important; border-radius: 15px !important; overflow: hidden !important; outline: none !important; box-shadow: 0 14px 32px rgba(0,0,0,.28) !important; }
.bsc-player:focus-visible { outline: 2px solid #78d5ff !important; outline-offset: 3px !important; }
.bsc-player video { display: block !important; width: 100% !important; max-height: 70vh !important; aspect-ratio: 16 / 9 !important; background: #000 !important; object-fit: contain !important; }
.bsc-player:fullscreen { display: flex !important; flex-direction: column !important; width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important; border: 0 !important; border-radius: 0 !important; }
.bsc-player:fullscreen video { flex: 1 1 auto !important; width: 100% !important; height: 0 !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; }
.bsc-player:fullscreen .bsc-controls { flex: 0 0 auto !important; width: 100% !important; }
.bsc-controls { display: grid !important; gap: 7px !important; padding: 10px 14px 13px !important; color: #fff !important; background: linear-gradient(180deg,#14243a,#0d1b2e) !important; direction: ltr !important; }
.bsc-control-row { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; }
.bsc-controls button, .bsc-controls select { min-height: 35px !important; color: #eaf4ff !important; background: #253d59 !important; border: 1px solid #496585 !important; border-radius: 8px !important; cursor: pointer !important; padding: 5px 10px !important; font: inherit !important; }
.bsc-controls button:hover, .bsc-controls select:hover { background: #345779 !important; }
.bsc-controls button:focus-visible, .bsc-controls select:focus-visible, .bsc-controls input:focus-visible { outline: 2px solid #78d5ff !important; outline-offset: 2px !important; }
.bsc-control-primary [data-action="play"] { width: 39px !important; height: 39px !important; background: #2387b9 !important; border-color: #4eb9ec !important; }
.bsc-time { flex: 0 0 auto !important; min-width: 76px !important; text-align: center !important; color: #d1e5f7 !important; font-size: .8rem !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important; }
.bsc-range { position: relative !important; display: flex !important; align-items: center !important; height: 30px !important; overflow: visible !important; }
.bsc-range::before { content: '' !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 12px !important; height: 6px !important; border-radius: 999px !important; background: linear-gradient(to right,#4dccff var(--fill),#516078 var(--fill)) !important; pointer-events: none !important; }
.bsc-seek-wrap { flex: 1 1 160px !important; min-width: 85px !important; }
.bsc-volume-wrap { flex: 0 0 86px !important; width: 86px !important; }
.bsc-range input[type="range"] { -webkit-appearance: none !important; appearance: none !important; position: relative !important; left: -8px !important; flex: none !important; width: calc(100% + 16px) !important; height: 30px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; cursor: pointer !important; }
.bsc-range input[type="range"]::-webkit-slider-runnable-track { height: 6px !important; background: transparent !important; border: 0 !important; }
.bsc-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none !important; appearance: none !important; width: 16px !important; height: 16px !important; margin-top: -5px !important; border: 2px solid #e6f7ff !important; border-radius: 50% !important; background: #49bfff !important; box-shadow: 0 0 0 3px rgba(73,191,255,.18) !important; }
.bsc-range input[type="range"]::-moz-range-track { height: 6px !important; background: transparent !important; border: 0 !important; }
.bsc-range input[type="range"]::-moz-range-thumb { width: 14px !important; height: 14px !important; border: 2px solid #e6f7ff !important; border-radius: 50% !important; background: #49bfff !important; }
.bsc-control-options { justify-content: flex-end !important; border-top: 1px solid #2d415a !important; padding-top: 8px !important; direction: ltr !important; }
.bsc-control-options label { display: flex !important; align-items: center !important; gap: 8px !important; color: #a8c0d8 !important; font-size: .78rem !important; white-space: nowrap !important; }
.bsc-control-options select { min-width: 95px !important; }
.bsc-control-spacer { flex: 1 1 auto !important; }
.bsc-documents { display: grid !important; gap: 8px !important; margin: 20px 0 !important; }
.bsc-document { display: block !important; width: 100% !important; padding: 12px !important; color: #c5eaff !important; background: #1c344e !important; border: 1px solid #3c6281 !important; border-radius: 9px !important; text-align: start !important; cursor: pointer !important; }
.bsc-document-dialog { width: min(900px,95vw) !important; height: min(85vh,900px) !important; max-width: 95vw !important; max-height: 90vh !important; padding: 0 !important; color: #fff !important; background: #102033 !important; border: 1px solid #3c5572 !important; border-radius: 10px !important; }
.bsc-document-dialog::backdrop { background: rgba(0,0,0,.78) !important; }
.bsc-dialog-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 8px 12px !important; }
.bsc-dialog-close { color: #fff !important; background: #2b4868 !important; border: 0 !important; border-radius: 6px !important; padding: 7px 12px !important; cursor: pointer !important; }
.bsc-document-dialog iframe { width: 100% !important; height: calc(100% - 48px) !important; border: 0 !important; background: #fff !important; }
.bsc-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 10px 18px !important; color: #061a2a !important; background: linear-gradient(135deg,#62d2ff,#3aafea) !important; border: 0 !important; border-radius: 9px !important; font-weight: 800 !important; text-decoration: none !important; cursor: pointer !important; box-shadow: 0 7px 18px rgba(35,151,205,.22) !important; }
.bsc-button:hover { color: #061a2a !important; background: #8cddff !important; }
.bsc-complete { margin-top: 20px !important; }
.bsc-locked { padding: 42px 26px !important; text-align: center !important; }
.bsc-locked h3 { color: #fff !important; }
.bsc-description { margin: 18px auto !important; max-width: 720px !important; text-align: start !important; }
.bsc-progress-status { min-height: 1.5em !important; margin-top: 8px !important; color: #bdeaff !important; }
.bsc-notice { padding: 20px !important; color: #d1e4f5 !important; background: #203247 !important; border-radius: 9px !important; }
.bsc-error { color: #ffd1d1 !important; background: #48262a !important; }
@media (max-width: 850px) { .bsc-layout { grid-template-columns: 1fr !important; } .bsc-outline { max-height: 270px !important; border-right: 0 !important; border-bottom: 1px solid #314761 !important; } .bsc-header { flex-wrap: wrap !important; padding: 17px !important; } .bsc-main { padding: 15px !important; } .bsc-control-row { gap: 8px !important; } .bsc-volume-wrap { display: none !important; } }
@media (max-width: 540px) { .bsc-shell { border-radius: 12px !important; } .bsc-catalog-grid { padding: 14px !important; } .bsc-controls { padding: 8px 10px 10px !important; } .bsc-control-primary { flex-wrap: wrap !important; } .bsc-seek-wrap { flex-basis: calc(100% - 20px) !important; order: 5 !important; margin: 0 10px !important; } .bsc-control-options { flex-wrap: wrap !important; justify-content: flex-start !important; } .bsc-control-options label { flex: 1 1 40% !important; } .bsc-control-options select { min-width: 0 !important; width: 100% !important; } .bsc-control-options [data-action="pip"] span { display: none !important; } }