/* Scoped styles deliberately independent of the generated Tailwind bundle. */
.lesson-player { --lp-gold: #edcc80; --lp-muted: #b8cec5; position: fixed; inset: auto 20px 16px; z-index: 60; color: #fffdf5; font-family: inherit; }
.lesson-player [x-cloak], .lesson-player-space[x-cloak] { display: none !important; }
.lesson-player-space { height: 170px; }
.lp-shell { position: relative; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(290px, 1.15fr) auto; gap: 28px; align-items: center; padding: 22px 26px 18px; border: 1px solid #a58b4c66; border-top: 2px solid #d9b968; border-radius: 22px; background: radial-gradient(ellipse at 95% 0%, #20624c80, transparent 60%), #073c30; box-shadow: 0 16px 55px #021d2940, 0 0 0 5px #ffffff66; }
.lp-shell::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .045; background-image: repeating-linear-gradient(45deg, transparent 0 17px, #edcc80 18px 19px, transparent 20px 37px), repeating-linear-gradient(-45deg, transparent 0 17px, #edcc80 18px 19px, transparent 20px 37px); mask-image: linear-gradient(to left, #000, transparent 45%); }
.lp-identity { display: flex; align-items: center; gap: 16px; min-width: 0; position: relative; }
.lp-emblem { width: 62px; height: 70px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid #d5b66c70; border-radius: 30px 30px 13px 13px; background: linear-gradient(145deg, #d7b36220, #ffffff04); color: var(--lp-gold); font-size: 26px; box-shadow: inset 0 0 0 5px #d7b36206; }
.lp-emblem.is-active { box-shadow: 0 0 25px #edcc8015, inset 0 0 0 5px #d7b3620d; }
.lp-copy { min-width: 0; }
.lp-eyebrow { color: var(--lp-muted); font-size: 10px; display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.lp-dot { width: 5px; height: 5px; background: #89a99a; border-radius: 50%; }
.lp-dot.is-active { background: var(--lp-gold); box-shadow: 0 0 0 3px #edcc801a; }
.lp-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; font-size: 17px; line-height: 1.7; color: #fffdf5; }
.lp-series { display: flex; align-items: center; gap: 7px; color: var(--lp-gold); font-size: 11px; margin-top: 2px; }
.lp-series span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lp-series i { font-size: 10px; opacity: .7; }
.lp-transport, .lp-tools, .lp-volume-control { display: flex; align-items: center; justify-content: center; gap: 8px; }
.lp-button { min-width: 36px; height: 40px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 10px; color: var(--lp-muted); background: transparent; cursor: pointer; font-size: 14px; transition: background .15s, color .15s; text-decoration: none; }
.lp-button:hover { color: var(--lp-gold); background: #ffffff0d; }
.lp-button:disabled { opacity: .3; cursor: not-allowed; }
.lesson-player :focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 4px; }
.lp-play { height: 54px; width: 54px; margin: 0 9px; border-radius: 50%; border: 1px solid #f8df9a; display: grid; place-items: center; color: #073c30; background: linear-gradient(140deg, #f5dda0, #d7b465); box-shadow: 0 0 0 5px #edcc800c, 0 4px 16px #00190e40; cursor: pointer; font-size: 20px; transition: transform .15s; flex-shrink: 0; }
.lp-play:hover { transform: scale(1.05); }
.lp-play .fa-play { margin-left: 3px; }
.lp-skip { position: relative; width: 39px; height: 44px; font-size: 25px; }
.lp-skip span { position: absolute; font-size: 9px; font-weight: 700; inset: 18px 0 auto; text-align: center; }
.lp-timeline { display: flex; align-items: center; gap: 11px; color: #a7c1b4; font: 10px/1.4 ui-monospace, monospace; margin-top: 12px; }
.lp-timeline span { min-width: 34px; }
.lp-elapsed { color: var(--lp-gold); }
.lp-seek { appearance: none; -webkit-appearance: none; display: block; width: 100%; min-width: 0; height: 20px; cursor: pointer; background: transparent; --played: 0%; --buffered: 0%; }
.lp-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 5px; background: linear-gradient(to right, var(--lp-gold) var(--played), #5c8070 var(--played), #5c8070 var(--buffered), #ffffff20 var(--buffered)); }
.lp-seek::-moz-range-track { height: 4px; border-radius: 5px; background: linear-gradient(to right, var(--lp-gold) var(--played), #5c8070 var(--played), #5c8070 var(--buffered), #ffffff20 var(--buffered)); }
.lp-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; height: 11px; width: 11px; margin-top: -3.5px; border-radius: 50%; background: #f7df9f; box-shadow: 0 0 0 3px #edcc801a; }
.lp-seek::-moz-range-thumb { height: 11px; width: 11px; border: 0; border-radius: 50%; background: #f7df9f; }
.lp-tools { gap: 2px; }
.lp-rate { font: 600 12px/1 ui-sans-serif, sans-serif; border-color: #ffffff17; background: #ffffff06; margin-inline-end: 5px; }
.lp-rate i { font-size: 10px; }
.lp-button.is-selected { color: var(--lp-gold); background: #edcc8015; border-color: #edcc8030; }
.lp-divider { height: 22px; width: 1px; background: #ffffff1a; margin: 0 7px; }
.lp-close { color: #a1baad; }
.lp-panel { position: absolute; bottom: calc(100% + 12px); inset-inline-end: 0; width: min(430px, 100%); max-height: min(440px, 60dvh); overflow: auto; background: #fdfbf5; color: #163f33; border: 1px solid #d6c79e; border-radius: 18px; box-shadow: 0 12px 60px #001b2940; padding: 20px; }
.lp-panel .lp-button { color: #315d4c; }
.lp-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-panel-heading h2 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.lp-count { background: #e7ebdf; border-radius: 6px; padding: 3px 7px; font: 11px ui-monospace, monospace; }
.lp-hint { font-size: 11px; color: #64766b; line-height: 1.8; margin: 7px 0 12px; }
.lp-queue { list-style: none; padding: 0; margin: 0; }
.lp-queue button { width: 100%; display: flex; align-items: center; gap: 14px; text-align: start; padding: 13px 10px; border-radius: 10px; cursor: pointer; border-bottom: 1px solid #23473610; }
.lp-queue button:hover, .lp-queue .is-current { background: #e6ede3; }
.lp-track-number { color: #758571; font: 11px ui-monospace, monospace; }
.lp-queue-copy { flex: 1; min-width: 0; }
.lp-queue-copy strong, .lp-queue-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-queue-copy strong { font-size: 13px; }
.lp-queue-copy small { font-size: 10px; color: #64766b; margin-top: 4px; }
.lp-queue i { font-size: 12px; }
.lp-settings { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 15px; padding-top: 16px; font-size: 13px; }
.lp-settings select { background: #fff; border: 1px solid #d0d9cb; border-radius: 9px; padding: 9px; color: #214d3e; width: 100%; }
.lp-volume-control input { min-width: 0; width: 100%; accent-color: #23664d; }
.lp-sleep-status, .lp-shortcuts { grid-column: 1 / -1; }
.lp-sleep-status { padding: 10px; border-radius: 9px; background: #edf0e2; }
.lp-message { background: #f7edcd; color: #4d401e; border-radius: 10px; padding: 8px 16px; margin-top: 6px; font-size: 12px; text-align: center; }
.lesson-player.is-compact .lp-shell { padding-block: 10px; }
.lesson-player.is-compact .lp-eyebrow, .lesson-player.is-compact .lp-timeline { display: none; }
.lesson-player.is-compact .lp-emblem { height: 48px; width: 45px; font-size: 20px; }
@media (min-width: 1500px) { .lesson-player { inset-inline: max(24px, calc((100vw - 1460px) / 2)); } }
@media (max-width: 1150px) {
    .lp-shell { grid-template-columns: minmax(160px, 1fr) minmax(250px, 1fr) auto; gap: 16px; padding-inline: 18px; }
    .lp-emblem { width: 48px; height: 58px; font-size: 22px; }
    .lp-tools { display: grid; grid-template-columns: repeat(4, 36px); }
    .lp-divider { display: none; }
    .lp-rate { grid-column: span 2; margin: 0; }
    .lp-title { font-size: 15px; }
}
@media (max-width: 760px) {
    .lesson-player { inset-inline: 10px; bottom: max(10px, env(safe-area-inset-bottom)); }
    .lesson-player-space { height: 260px; }
    .lp-shell { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 8px; padding: 15px 16px 10px; border-radius: 18px; }
    .lp-identity { gap: 11px; }
    .lp-emblem { width: 42px; height: 51px; font-size: 20px; }
    .lp-eyebrow { font-size: 9px; }
    .lp-title { font-size: 14px; }
    .lp-series { font-size: 10px; }
    .lp-playback { display: contents; }
    .lp-transport { grid-column: 1 / -1; grid-row: 2; gap: 18px; }
    .lp-play { width: 48px; height: 48px; font-size: 18px; }
    .lp-timeline { grid-column: 1 / -1; grid-row: 3; margin-top: -7px; }
    .lp-tools { display: flex; grid-column: 1 / -1; grid-row: 4; justify-content: space-between; border-top: 1px solid #ffffff12; padding-top: 5px; margin-top: -8px; }
    .lp-tools .lp-button { height: 34px; }
    .lp-close { position: absolute; inset-inline-end: 8px; top: 12px; }
    .lp-identity { grid-column: 1 / -1; padding-inline-end: 28px; }
    .lp-panel { width: 100%; }
    .lesson-player.is-compact .lp-shell { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 10px; }
    .lesson-player.is-compact .lp-identity { grid-column: 1; padding-inline-end: 0; }
    .lesson-player.is-compact .lp-transport { grid-row: 1; grid-column: 2; gap: 0; }
    .lesson-player.is-compact .lp-transport > .lp-button { display: none; }
    .lesson-player.is-compact .lp-tools { grid-row: 2; margin-top: 0; }
    .lesson-player.is-compact .lp-close { position: static; }
}
@media (prefers-reduced-motion: reduce) { .lesson-player *, .lesson-player *::before { animation: none !important; transition: none !important; } }