#watch-learn-screen {
  --wl-ink: #20231f;
  --wl-paper: #f6f0df;
  --wl-paper-warm: #fff9eb;
  --wl-coral: #ff6b4a;
  --wl-sun: #f4c84a;
  --wl-mint: #71d7b3;
  --wl-sky: #79b8ff;
  --wl-lavender: #bba5ff;
  --wl-border: 2px solid var(--wl-ink);
  --wl-shadow: 5px 5px 0 var(--wl-ink);
  min-height: 100vh;
  color: var(--wl-ink);
  font-family: Inter, var(--font, system-ui), sans-serif;
  background-color: var(--wl-paper);
  background-image: radial-gradient(color-mix(in srgb, var(--wl-ink) 20%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
  overflow-x: hidden;
}

.watch-learn-shell { width: min(1440px, 100%); min-height: 100vh; margin: 0 auto; padding: 24px clamp(18px, 4vw, 64px) 64px; }
.wl-topbar { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:14px; margin-bottom:36px; }
.wl-topbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.wl-brand { justify-self: center; display: flex; align-items: center; gap: 10px; font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 900; letter-spacing: -.03em; }
.wl-brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border: var(--wl-border); border-radius: 12px; background: var(--wl-coral); box-shadow: 3px 3px 0 var(--wl-ink); }
.wl-icon-button, .wl-main-control, .wl-folder-card, .wl-episode-card, .wl-admin-primary, .wl-admin-add-activity, .wl-admin-actions button, .wl-dialog-actions button { color: var(--wl-ink); border: var(--wl-border); background: var(--wl-paper-warm); box-shadow: 3px 3px 0 var(--wl-ink); cursor: pointer; transition: transform .14s ease, box-shadow .14s ease; }
.wl-icon-button:active, .wl-main-control:active, .wl-folder-card:active, .wl-episode-card:active, .wl-admin-primary:active, .wl-admin-add-activity:active, .wl-admin-actions button:active, .wl-dialog-actions button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--wl-ink); }
.wl-icon-button { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; }
.wl-kicker { display: block; font-size: .75rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.wl-hero { position: relative; padding: clamp(28px, 6vw, 72px); margin-bottom: 52px; border: var(--wl-border); border-radius: 30px; background: var(--wl-sun); box-shadow: 8px 8px 0 var(--wl-ink); overflow: hidden; }
.wl-hero::after { content: "translate"; position: absolute; right: 5%; bottom: -18px; font-family: 'Material Symbols Rounded'; font-size: clamp(100px, 18vw, 210px); opacity: .13; transform: rotate(-8deg); }
.wl-hero h1, .wl-collection-banner h1, .wl-player-header h1 { margin: 8px 0 12px; font-size: clamp(2.25rem, 7vw, 5.7rem); line-height: .95; letter-spacing: -.065em; }
.wl-hero p { max-width: 700px; margin: 0; font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 650; line-height: 1.55; }
.wl-section { margin-top: 40px; }
.wl-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.wl-section-heading > div { display: flex; align-items: center; gap: 12px; }
.wl-section-heading span { display: grid; place-items: center; width: 38px; height: 38px; border: var(--wl-border); border-radius: 50%; background: var(--wl-lavender); font-weight: 900; }
.wl-section-heading h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -.04em; }
.wl-section-heading p { margin: 0; font-weight: 800; }
.wl-folder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 22px; }
.wl-folder-card { display: grid; grid-template-columns: 64px 1fr auto 28px; align-items: center; gap: 16px; width: 100%; padding: 22px; text-align: left; border-radius: 22px; background: var(--card-color); box-shadow: var(--wl-shadow); }
.wl-card-icon { display:grid; place-items:center; width:62px; height:62px; color:#20231f; border:2px solid #20231f; border-radius:18px; background:#fff9eb; font-size:34px; }
.wl-card-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wl-card-copy strong { font-size: 1.3rem; }
.wl-card-copy small { font-weight: 650; line-height: 1.35; opacity: .76; }
.wl-count { display:grid; place-items:center; min-width:36px; height:36px; padding:0 8px; color:#20231f; border:2px solid #20231f; border-radius:999px; background:#fff9eb; font-weight:900; }
.wl-empty { grid-column: 1 / -1; padding: 50px 24px; text-align: center; border: var(--wl-border); border-radius: 22px; background: var(--wl-paper-warm); box-shadow: var(--wl-shadow); }
.wl-empty > .material-symbols-rounded { font-size: 52px; }
.wl-empty h2 { margin: 10px 0 4px; }
.wl-empty p { margin: 0; opacity: .72; }
.wl-collection-banner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(20px, 4vw, 44px); padding: clamp(26px, 5vw, 54px); border: var(--wl-border); border-radius: 28px; background: var(--card-color); box-shadow: 8px 8px 0 var(--wl-ink); }
.wl-collection-banner > .material-symbols-rounded { display: grid; place-items: center; width: clamp(82px, 14vw, 150px); aspect-ratio: 1; border: var(--wl-border); border-radius: 26px; background: var(--wl-paper-warm); font-size: clamp(44px, 7vw, 78px); }
.wl-collection-banner h1 { font-size: clamp(2.1rem, 6vw, 4.8rem); }
.wl-collection-banner p { margin: 0; font-size: 1.05rem; font-weight: 650; }
.wl-episode-list { display: grid; gap: 14px; }
.wl-episode-card { display: grid; grid-template-columns: 58px 1fr 48px; align-items: center; gap: 16px; width: 100%; padding: 18px 20px; text-align: left; border-radius: 18px; }
.wl-episode-card:hover { background: var(--wl-mint); }
.wl-episode-number { font-size: 1.35rem; font-weight: 950; }
.wl-episode-copy { display: flex; flex-direction: column; gap: 4px; }
.wl-episode-copy strong { font-size: 1.12rem; }
.wl-episode-copy small { font-weight: 600; opacity: .72; }
.wl-level { padding: 5px 10px; border: var(--wl-border); border-radius: 999px; background: var(--wl-sun); font-weight: 900; }
.wl-play { display: grid; place-items: center; width: 44px; height: 44px; border: var(--wl-border); border-radius: 50%; background: var(--wl-coral); }
.wl-library-mode { height:100dvh; min-height:0!important; overflow:hidden!important; }
.wl-library-mode .watch-learn-shell { height:100%; min-height:0; display:flex; flex-direction:column; padding-bottom:18px; }
.wl-library-mode .wl-topbar { flex:0 0 auto; margin-bottom:18px; }
.wl-video-library { min-height:0; flex:1; display:flex; flex-direction:column; overflow:hidden; border:var(--wl-border); border-radius:24px; background:var(--wl-paper-warm); box-shadow:var(--wl-shadow); }
.wl-library-header { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:20px 22px; border-bottom:var(--wl-border); background:var(--wl-sky); }
.wl-library-header h1 { margin:3px 0; font-size:clamp(1.7rem,4vw,3rem); line-height:1; letter-spacing:-.045em; }
.wl-library-header p { margin:0; font-size:.85rem; font-weight:750; }
.wl-library-tools { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.wl-video-search { width:min(390px,42vw); min-height:48px; display:flex; align-items:center; gap:9px; padding:0 13px; color:#20231f; border:2px solid #20231f; border-radius:14px; background:#fff9eb; box-shadow:3px 3px 0 #20231f; }
.wl-video-search input { min-width:0; width:100%; color:#20231f; border:0; outline:0; background:transparent; font:inherit; font-weight:750; }
.wl-video-search input::placeholder { color:#666b63; opacity:1; }
.wl-carousel-hint { flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:10px 22px 0; font-size:.78rem; font-weight:850; opacity:.72; }
.wl-carousel-hint .material-symbols-rounded { font-size:20px; }
.wl-carousel-frame { position:relative; min-height:0; flex:1; overflow:hidden; }
.wl-carousel-arrow { position:absolute; z-index:6; top:50%; width:52px; height:58px; color:#20231f; border-color:#20231f; background:var(--wl-sun); box-shadow:4px 4px 0 #20231f; transform:translateY(-50%); }
.wl-carousel-arrow:hover { background:var(--wl-coral); }
.wl-carousel-arrow:active { transform:translateY(-50%) translate(3px,3px); }
.wl-carousel-arrow:disabled,.wl-carousel-arrow:disabled:hover { color:#20231f; background:#bfc1bd; box-shadow:2px 2px 0 #20231f; opacity:1; cursor:not-allowed; }
.wl-carousel-arrow:disabled:active { transform:translateY(-50%); box-shadow:2px 2px 0 #20231f; }
.wl-carousel-prev { left:14px; }
.wl-carousel-next { right:18px; }
.wl-video-grid { width:100%; height:100%; box-sizing:border-box; display:grid; grid-template-rows:repeat(2,max-content); grid-auto-flow:column; grid-auto-columns:clamp(260px,25vw,340px); align-content:center; gap:18px 20px; padding:18px 70px 24px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-color:var(--wl-coral) var(--wl-paper); scrollbar-width:auto; }
.wl-video-grid:focus-visible { outline:3px solid var(--wl-coral); outline-offset:-5px; }
.wl-video-grid::-webkit-scrollbar { height:14px; }
.wl-video-grid::-webkit-scrollbar-track { border-top:2px solid var(--wl-ink); background:var(--wl-paper); }
.wl-video-grid::-webkit-scrollbar-thumb { border:2px solid var(--wl-ink); border-radius:10px; background:var(--wl-coral); }
.wl-video-card { width:100%; min-width:0; display:flex; flex-direction:column; align-self:start; overflow:hidden; padding:0; color:var(--wl-ink); text-align:left; border:var(--wl-border); border-radius:17px; background:var(--wl-paper-warm); box-shadow:4px 4px 0 var(--wl-ink); cursor:pointer; scroll-snap-align:start; transition:transform .08s ease,box-shadow .08s ease; }
.wl-video-card:active { transform:translate(4px,4px); box-shadow:0 0 0 var(--wl-ink); }
.wl-video-card[hidden] { display:none; }
.wl-video-thumbnail { position:relative; aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; border-bottom:var(--wl-border); background:linear-gradient(145deg,var(--wl-lavender),var(--wl-sky)); }
.wl-video-thumbnail img { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:cover; }
.wl-thumbnail-fallback { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:4px; color:#20231f; background:linear-gradient(145deg,var(--wl-lavender),var(--wl-sky)); }
.wl-thumbnail-fallback .material-symbols-rounded { font-size:48px; font-variation-settings:'FILL' 1,'wght' 700; }
.wl-thumbnail-fallback small { font-size:.68rem; font-weight:950; letter-spacing:.1em; text-transform:uppercase; }
.wl-video-thumbnail.thumbnail-missing .wl-video-play { background:var(--wl-coral); }
.wl-video-play { position:absolute; z-index:3; display:grid; place-items:center; width:50px; height:50px; color:#20231f; border:2px solid #20231f; border-radius:50%; background:#f4c84a; box-shadow:3px 3px 0 #20231f; }
.wl-video-play .material-symbols-rounded { display:block; margin:0; font-size:30px; font-variation-settings:'FILL' 1,'wght' 700,'GRAD' 0,'opsz' 30; line-height:1; text-shadow:none!important; filter:none!important; transform:translateX(1px); }
.wl-video-card-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; min-height:68px; padding:12px 14px 14px; }
.wl-video-card-copy strong { overflow:hidden; font-size:1rem; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.wl-video-card-copy small { font-size:.72rem; font-weight:800; opacity:.62; }
.wl-search-empty { padding:40px 20px; text-align:center; }
.wl-search-empty .material-symbols-rounded { display:block; margin-bottom:7px; font-size:42px; }
.wl-player-header { margin-bottom:22px; }
.wl-player-header h1 { min-width:0; margin-bottom:0; font-size:clamp(2rem,5vw,4rem); }
.wl-source-info-trigger { flex:0 0 auto; border-radius:50%; background:var(--wl-sky); }
.wl-source-notice { position:fixed; z-index:10020; top:84px; right:clamp(16px,3vw,38px); width:min(390px,calc(100vw - 32px)); box-sizing:border-box; display:grid; grid-template-columns:42px minmax(0,1fr) 34px; align-items:start; gap:12px; padding:14px; color:#20231f; border:2px solid #20231f; border-radius:16px; background:rgba(121,184,255,.82); box-shadow:5px 5px 0 #20231f; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-12px); transition:opacity .2s ease,transform .2s ease,visibility .2s; }
.wl-source-notice.open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.wl-source-notice-icon { display:grid; place-items:center; width:40px; height:40px; border:2px solid #20231f; border-radius:12px; background:#fff9eb; }
.wl-source-notice strong { display:block; margin:1px 0 4px; font-size:.92rem; }
.wl-source-notice p { margin:0; font-size:.78rem; font-weight:650; line-height:1.45; }
.wl-source-notice>button { display:grid; place-items:center; width:32px; height:32px; padding:0; color:#20231f; border:2px solid #20231f; border-radius:9px; background:#fff9eb; cursor:pointer; }
.wl-source-notice>button .material-symbols-rounded { font-size:19px; }
.wl-learning-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(330px,.75fr); grid-template-areas:"video transcript" "controls transcript" "translation transcript"; align-items:start; gap:0 26px; }
.wl-player-mount { grid-area:video; position: relative; width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; border: var(--wl-border); border-radius: 24px; background: #101210; box-shadow: 8px 8px 0 var(--wl-ink); }
.watch-learn-video, .wl-player-mount iframe { width: 100%; height: 100%; border: 0; object-fit: contain; }
.wl-player-loading, .wl-player-error { color: #fff9eb; text-align: center; font-weight: 800; }
.wl-player-error .material-symbols-rounded { color: var(--wl-coral); font-size: 42px; }
.wl-player-controls { grid-area:controls; position:relative; display:flex; justify-content:center; align-items:center; gap:12px; margin:20px 0; }
.wl-main-control { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 22px; border-radius: 14px; background: var(--wl-coral); font-weight: 900; }
.wl-volume-control { background:var(--wl-sky); }
.wl-volume-level { position:absolute; right:0; min-width:45px; padding:5px 7px; color:var(--wl-ink); border:1.5px solid var(--wl-ink); border-radius:999px; background:var(--wl-paper-warm); font-size:.7rem; font-weight:900; text-align:center; }
.wl-translation-card { grid-area:translation; position:relative; min-height:168px; padding:24px; border:var(--wl-border); border-radius:22px; background:var(--wl-lavender); box-shadow:var(--wl-shadow); }
.wl-translation-card h2 { margin:10px 0 0; font-size:clamp(1.15rem,2vw,1.6rem); font-weight:850; line-height:1.22; }
.wl-translation-card .wl-original { margin:0; padding:0 0 11px; border-bottom:2px dashed var(--wl-ink); font-size:clamp(1.15rem,2vw,1.45rem); font-weight:850; line-height:1.4; }
.wl-translation-close { display:none; position:absolute; top:12px; right:12px; width:38px; height:38px; place-items:center; color:var(--wl-ink); border:var(--wl-border); border-radius:10px; background:var(--wl-paper-warm); cursor:pointer; }
.wl-translation-toggle { display:none; }
.wl-transcript-panel { grid-area:transcript; position: sticky; top: 18px; overflow: hidden; border: var(--wl-border); border-radius: 24px; background: var(--wl-paper-warm); box-shadow: var(--wl-shadow); }
.wl-transcript-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px; border-bottom: var(--wl-border); background: var(--wl-sky); }
.wl-transcript-title > div { display: flex; align-items: center; gap: 8px; }
.wl-transcript-title h2 { margin: 0; font-size: 1.25rem; }
.wl-transcript-title small { font-weight: 800; }
.wl-transcript { max-height: min(68vh, 650px); overflow-y: auto; padding: 12px; scroll-behavior: smooth; }
.wl-cue { width: 100%; display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 12px 10px; color: var(--wl-ink); text-align: left; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--wl-ink) 20%, transparent); background: transparent; cursor: pointer; }
.wl-cue:hover { background: color-mix(in srgb, var(--wl-sky) 32%, transparent); }
.wl-cue.active { border: var(--wl-border); border-radius: 13px; background: var(--wl-sun); box-shadow: 3px 3px 0 var(--wl-ink); }
.wl-cue.active.running { background:var(--wl-coral); }
.wl-time { padding-top: 2px; font-size: .75rem; font-weight: 900; opacity: .62; }
.wl-cue-lines { min-width:0; display:flex; flex-direction:column; gap:7px; }
.wl-cue-text { font-size: 1.02rem; font-weight: 650; line-height: 1.55; }
.wl-cue-translation { display:none; }

/* Admin surface: mirrors the simple Listen & Answer two-column workflow. */
#admin-watch-learn-grid { --wl-admin-ink:#20231f; --wl-admin-paper:#f6f0df; --wl-admin-white:#fffdf6; --wl-admin-sky:#79b8ff; --wl-admin-coral:#ff6b4a; min-height:560px; padding:18px; color:var(--wl-admin-ink)!important; border:2px solid var(--wl-admin-ink); border-radius:20px; background:var(--wl-admin-paper); font-family:Inter,var(--font,system-ui),sans-serif; }
.wl-admin-layout { display:flex; min-height:520px; overflow:hidden; border:2px solid var(--wl-admin-ink); border-radius:16px; background:var(--wl-admin-white); box-shadow:5px 5px 0 var(--wl-admin-ink); }
.wl-admin-sidebar { width:300px; flex:0 0 300px; border-right:2px solid var(--wl-admin-ink); background:#fff; }
.wl-admin-sidebar>header,.wl-admin-content>header { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; border-bottom:2px solid var(--wl-admin-ink); background:var(--wl-admin-sky); }
.wl-admin-sidebar h2,.wl-admin-content h2 { margin:0; color:var(--wl-admin-ink)!important; font-weight:900; }
.wl-admin-sidebar>header button,.wl-admin-row-actions button,.wl-admin-dialog-card header button { display:grid; place-items:center; width:38px; height:38px; padding:0; color:var(--wl-admin-ink)!important; border:2px solid var(--wl-admin-ink); border-radius:10px; background:#fff; box-shadow:2px 2px 0 var(--wl-admin-ink); cursor:pointer; }
.wl-admin-folder-list { padding:10px; }
.wl-admin-folder-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:9px; padding:12px 10px; margin-bottom:7px; color:var(--wl-admin-ink)!important; border:2px solid transparent; border-radius:11px; cursor:pointer; }
.wl-admin-folder-row:hover { background:#eef6ff; }
.wl-admin-folder-row.active { border-color:var(--wl-admin-ink); background:#f4c84a; box-shadow:3px 3px 0 var(--wl-admin-ink); }
.wl-admin-folder-row strong { overflow:hidden; color:var(--wl-admin-ink)!important; text-overflow:ellipsis; white-space:nowrap; }
.wl-admin-row-actions { display:flex; gap:6px; }
.wl-admin-row-actions button { width:32px; height:32px; box-shadow:none; }
.wl-admin-content { min-width:0; flex:1; background:var(--wl-admin-white); }
.wl-admin-content>header { background:#fff; }
.wl-admin-eyebrow { display:block; margin-bottom:3px; color:#52584f!important; font-size:.7rem; font-weight:900; letter-spacing:.13em; }
.wl-admin-primary { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 15px; color:var(--wl-admin-ink)!important; border:2px solid var(--wl-admin-ink); border-radius:11px; background:var(--wl-admin-coral); box-shadow:3px 3px 0 var(--wl-admin-ink); font-weight:900; cursor:pointer; }
.wl-admin-header-actions { display:flex; align-items:center; gap:11px; }
.wl-admin-secondary { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 15px; color:var(--wl-admin-ink)!important; border:2px solid var(--wl-admin-ink); border-radius:11px; background:#fff; box-shadow:none; font-weight:850; cursor:pointer; transition:background .15s ease,transform .15s ease; }
.wl-admin-secondary:hover { background:#f4c84a; }
.wl-admin-secondary:active { transform:translateY(2px); }
.wl-admin-episode-list { padding:16px; }
.wl-admin-episode-row { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px; margin-bottom:12px; color:var(--wl-admin-ink)!important; border:2px solid var(--wl-admin-ink); border-radius:13px; background:#fff; box-shadow:3px 3px 0 var(--wl-admin-ink); }
.wl-admin-episode-row h3,.wl-admin-episode-row p { margin:0; color:var(--wl-admin-ink)!important; }
.wl-admin-episode-row p { margin-top:3px; color:#5e645c!important; font-size:.82rem; font-weight:700; }
.wl-admin-episode-number { display:grid; place-items:center; width:40px; height:40px; color:var(--wl-admin-ink)!important; border:2px solid var(--wl-admin-ink); border-radius:50%; background:#71d7b3; font-weight:900; }
.wl-admin-empty { padding:44px 18px; color:#555c52!important; text-align:center; font-weight:700; }
.wl-admin-notice { margin-bottom:18px; padding:14px; color:var(--wl-admin-ink)!important; border:2px solid var(--wl-admin-ink); border-radius:12px; background:#f4c84a; box-shadow:3px 3px 0 var(--wl-admin-ink); }
.wl-admin-notice.error { background:#ffb2a1; }
.wl-admin-dialog { position:fixed; z-index:10020; inset:0; display:grid; place-items:center; padding:18px; color:#20231f!important; background:rgba(15,16,14,.72); }
.wl-admin-dialog-card { width:min(760px,100%); max-height:92vh; overflow-y:auto; color:#20231f!important; border:2px solid #20231f; border-radius:20px; background:#fff9eb!important; box-shadow:7px 7px 0 #20231f; }
.wl-admin-dialog-card>header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:2px solid #20231f; background:#79b8ff; }
.wl-admin-dialog-card h2 { margin:0; color:#20231f!important; }
.wl-admin-simple-form { padding:20px; }
.wl-admin-simple-form label { display:grid; gap:7px; margin-bottom:17px; color:#20231f!important; font-weight:850; }
.wl-admin-simple-form label>span { color:#62685f!important; font-size:.75rem; }
.wl-admin-simple-form label small { color:#62685f!important; font-weight:650; }
.wl-admin-simple-form input,.wl-admin-simple-form textarea { box-sizing:border-box; width:100%; padding:11px 12px; color:#20231f!important; -webkit-text-fill-color:#20231f!important; border:2px solid #20231f; border-radius:10px; background:#fff!important; font:inherit; opacity:1; }
.wl-admin-simple-form textarea { resize:vertical; font-family:ui-monospace,Consolas,monospace; font-size:.84rem; }
.wl-admin-srt-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.wl-admin-dialog-card>footer { display:flex; justify-content:flex-end; gap:12px; padding:16px 20px; border-top:2px solid #20231f; background:#f6f0df; }
.wl-admin-dialog-card>footer>button { padding:10px 16px; color:#20231f!important; border:2px solid #20231f; border-radius:10px; background:#fff; font-weight:900; cursor:pointer; }
.wl-admin-dialog-card>footer .wl-admin-primary { background:#ff6b4a; }
.wl-admin-import-help { margin:0 0 18px; padding:12px; color:#20231f!important; border:2px solid #20231f; border-radius:10px; background:#f4c84a; line-height:1.45; }
.wl-admin-json-example { margin-bottom:18px; overflow:hidden; border:2px solid #20231f; border-radius:12px; background:#fff; }
.wl-admin-json-example>div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:2px solid #20231f; background:#71d7b3; }
.wl-admin-json-example strong { color:#20231f!important; }
.wl-admin-json-example button { display:inline-flex; align-items:center; gap:5px; padding:6px 9px; color:#20231f!important; border:2px solid #20231f; border-radius:8px; background:#fff; font-weight:850; cursor:pointer; }
.wl-admin-json-example textarea { display:block; width:100%; padding:13px; color:#20231f!important; -webkit-text-fill-color:#20231f!important; border:0!important; border-radius:0!important; background:#fff!important; font-family:ui-monospace,Consolas,monospace; font-size:.8rem; resize:none; }
.wl-admin-json-input { min-height:300px; white-space:pre; }
.wl-admin-import-tools { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.wl-admin-import-tools [data-json-status] { color:#24674f!important; font-weight:850; text-align:right; }
.wl-admin-import-tools [data-json-status].error { color:#b42318!important; }
.wl-admin-dialog-card [data-save]:disabled { opacity:.45; cursor:not-allowed; }

[data-theme="dark"] #watch-learn-screen { --wl-ink: #f5efe2; --wl-paper: #161914; --wl-paper-warm: #22261f; background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px); }
[data-theme="dark"] #watch-learn-screen .wl-player-mount { border-color: #f5efe2; box-shadow: 8px 8px 0 #f5efe2; }
[data-theme="dark"] #watch-learn-screen .wl-cue.active,[data-theme="dark"] #watch-learn-screen .wl-cue.active.running { color:#20231f; }
[data-theme="dark"] #watch-learn-screen .wl-cue.active .wl-time { opacity:.72; }
[data-theme="dark"] #watch-learn-screen .wl-hero,
[data-theme="dark"] #watch-learn-screen .wl-folder-card,
[data-theme="dark"] #watch-learn-screen .wl-library-header,
[data-theme="dark"] #watch-learn-screen .wl-transcript-title,
[data-theme="dark"] #watch-learn-screen .wl-translation-card { color:#20231f; }
[data-theme="dark"] #watch-learn-screen .wl-hero h1,
[data-theme="dark"] #watch-learn-screen .wl-hero p,
[data-theme="dark"] #watch-learn-screen .wl-hero .wl-kicker,
[data-theme="dark"] #watch-learn-screen .wl-folder-card strong,
[data-theme="dark"] #watch-learn-screen .wl-folder-card small,
[data-theme="dark"] #watch-learn-screen .wl-library-header h1,
[data-theme="dark"] #watch-learn-screen .wl-library-header p,
[data-theme="dark"] #watch-learn-screen .wl-library-header .wl-kicker { color:#20231f!important; }

/* Compact desktop chapter: video, controls and translation share one viewport. */
@media (min-width: 981px) {
  .wl-player-mode { height:100dvh; min-height:0!important; overflow:hidden!important; }
  .wl-player-mode .watch-learn-shell { height:100%; min-height:0; padding-top:18px; padding-bottom:16px; }
  .wl-player-mode .wl-topbar { margin-bottom:10px; }
  .wl-player-mode .wl-player-header { margin-bottom:10px; }
  .wl-player-mode .wl-player-header h1 { overflow:hidden; margin:0; font-size:clamp(1.35rem,2.3vw,2rem); line-height:1.15; letter-spacing:-.04em; text-overflow:ellipsis; white-space:nowrap; }
  .wl-player-mode .wl-learning-layout { grid-template-rows:clamp(220px,calc(100dvh - 390px),520px) auto minmax(108px,auto); }
  .wl-player-mode .wl-player-mount { height:100%; aspect-ratio:auto; border-radius:18px; box-shadow:5px 5px 0 var(--wl-ink); }
  .wl-player-mode .wl-player-controls { margin:10px 0; }
  .wl-player-mode .wl-translation-card { min-height:108px; max-height:150px; overflow-y:auto; padding:16px 18px; border-radius:16px; }
  .wl-player-mode .wl-translation-card h2 { margin-top:7px; font-size:clamp(1.05rem,1.45vw,1.35rem); line-height:1.2; }
  .wl-player-mode .wl-translation-card .wl-original { font-size:clamp(1.08rem,1.55vw,1.3rem); }
  .wl-player-mode .wl-transcript-panel { height:100%; max-height:calc(100dvh - 108px); }
  .wl-player-mode .wl-transcript { max-height:calc(100dvh - 180px); }
}

@media (max-width: 980px) {
  .wl-learning-layout { grid-template-columns:1fr; grid-template-areas:"video" "controls" "transcript"; gap:0; }
  .wl-transcript-panel { position: static; }
  .wl-transcript { max-height: min(42vh, 360px); }
  .wl-translation-card,.wl-translation-card.open,.wl-translation-toggle { display:none!important; }
  .wl-cue { grid-template-columns:44px minmax(0,1fr); padding:13px 10px; }
  .wl-cue-translation { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:start; gap:8px; padding-top:8px; border-top:1.5px dashed color-mix(in srgb,var(--wl-ink) 45%,transparent); font-size:.94rem; font-weight:750; line-height:1.48; }
  .wl-inline-language { display:grid; place-items:center; min-height:24px; color:#20231f; border:2px solid #20231f; border-radius:7px; background:var(--wl-mint); font-size:.62rem; font-weight:950; line-height:1; }
  .wl-cue.active .wl-cue-translation { border-top-color:color-mix(in srgb,#20231f 48%,transparent); }
  .wl-admin-layout { min-height:0; flex-direction:column; }
  .wl-admin-sidebar { width:auto; flex:auto; border-right:0; border-bottom:2px solid var(--wl-admin-ink); }
}

@media (max-width: 640px) {
  .watch-learn-shell { padding: 14px 14px 40px; }
  .wl-topbar { margin-bottom: 22px; }
  .wl-brand-mark { width: 34px; height: 34px; }
  .wl-hero { padding: 28px 22px 34px; border-radius: 22px; box-shadow: 5px 5px 0 var(--wl-ink); }
  .wl-section-heading { align-items: center; }
  .wl-section-heading > p { display: none; }
  .wl-folder-card { grid-template-columns: 52px 1fr 28px; padding: 16px; }
  .wl-card-icon { width: 50px; height: 50px; font-size: 28px; }
  .wl-count { display: none; }
  .wl-collection-banner { grid-template-columns: 1fr; box-shadow: 5px 5px 0 var(--wl-ink); }
  .wl-collection-banner > .material-symbols-rounded { width: 78px; border-radius: 18px; }
  .wl-episode-card { grid-template-columns: 42px 1fr 42px; padding: 14px; }
  .wl-episode-card .wl-level { display: none; }
  .wl-library-mode .watch-learn-shell { padding-bottom:10px; }
  .wl-library-mode .wl-topbar { margin-bottom:10px; }
  .wl-video-library { border-radius:17px; box-shadow:3px 3px 0 var(--wl-ink); }
  .wl-library-header { align-items:stretch; flex-direction:column; gap:12px; padding:14px; }
  .wl-library-header h1 { font-size:1.6rem; }
  .wl-library-tools { display:block; }
  .wl-video-search { width:100%; box-sizing:border-box; }
  .wl-carousel-hint { padding:8px 12px 0; }
  .wl-carousel-arrow { display:none; }
  .wl-video-grid { display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:12px 14px 16px 12px; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; scroll-snap-type:y proximity; }
  .wl-video-grid::-webkit-scrollbar { width:12px; height:auto; }
  .wl-video-grid::-webkit-scrollbar-track { border-top:0; border-left:2px solid var(--wl-ink); }
  .wl-video-card { flex:0 0 auto; width:100%; display:grid; grid-template-columns:128px minmax(0,1fr); min-height:78px; border-radius:13px; box-shadow:3px 3px 0 var(--wl-ink); scroll-snap-align:start; }
  .wl-video-thumbnail { height:100%; min-height:78px; aspect-ratio:auto; border-right:var(--wl-border); border-bottom:0; }
  .wl-video-play { width:38px; height:38px; }
  .wl-video-card-copy { justify-content:center; padding:10px 11px; }
  .wl-video-card-copy strong { white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .wl-video-card-copy small { line-height:1.25; }
  .wl-player-header h1 { font-size:clamp(1.55rem,8vw,2.4rem); }
  .wl-source-notice { top:70px; left:16px; right:16px; width:auto; grid-template-columns:36px minmax(0,1fr) 32px; padding:12px; }
  .wl-source-notice-icon { width:34px; height:34px; border-radius:10px; }
  .wl-player-mount { border-radius: 16px; box-shadow: 5px 5px 0 var(--wl-ink); }
  .wl-player-controls { gap:6px; padding-bottom:26px; }
  .wl-player-controls .wl-icon-button { width:42px; height:42px; border-radius:12px; }
  .wl-main-control span:last-child { display: none; }
  .wl-main-control { width:48px; min-height:44px; padding:0; }
  .wl-volume-level { right:50%; bottom:0; transform:translateX(50%); }
  #admin-watch-learn-grid { padding:10px; }
  .wl-admin-content>header { align-items:flex-start; flex-direction:column; }
  .wl-admin-header-actions { width:100%; flex-direction:column; }
  .wl-admin-primary,.wl-admin-secondary { width:100%; }
  .wl-admin-episode-row { grid-template-columns:40px minmax(0,1fr); }
  .wl-admin-episode-row .wl-admin-row-actions { grid-column:2; }
  .wl-admin-srt-fields { grid-template-columns:1fr; }
  .wl-admin-dialog-card>footer { flex-direction:column-reverse; }
  .wl-admin-dialog-card>footer>button { width:100%; }
  .wl-admin-import-tools { align-items:stretch; flex-direction:column; }
  .wl-admin-import-tools [data-json-status] { text-align:left; }
}