:root { --play-blue:#176fe6; --play-blue-dark:#105ac5; --play-green:#15a278; --play-navy:#10233f; --play-gold:#f2c45b; --play-line:#dfe7f1; --play-muted:#748398; --player-width:1320px; --player-side:344px; }
.video-player-page { background:#f3f6fa; transition:.25s ease; }
.player-main { position:relative; z-index:1; }
.video-player-page.cinema::before { position:fixed; inset:0; z-index:7; background:rgba(4,12,23,.86); content:""; }
.video-player-page.cinema .watch-shell,.video-player-page.cinema .lesson-context { position:relative; z-index:8; }
.lesson-context { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; width:calc(100% - 40px); max-width:var(--player-width); min-height:68px; margin:0 auto; }
.lesson-context>a { display:inline-flex; flex:0 0 auto; min-height:34px; align-items:center; padding:0 11px; border:1px solid #d7e2ed; border-radius:8px; color:#60748c; background:#fff; font-size:9px; font-weight:900; }
.lesson-context>div:nth-child(2) { min-width:0; }
.lesson-context>div:nth-child(2)>span { color:var(--play-blue); font-size:7px; font-weight:900; letter-spacing:.7px; }
.lesson-context h1 { overflow:hidden; margin:3px 0 0; color:var(--play-navy); font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.context-status { display:flex; align-items:center; gap:9px; margin-left:auto; }
.context-status span { display:inline-flex; min-height:29px; align-items:center; padding:0 9px; border-radius:8px; color:#7b899c; background:#fff; font-size:8px; }
.context-status span b { margin-right:4px; color:#203b5d; }
.context-status strong { display:inline-flex; min-height:29px; align-items:center; padding:0 10px; border-radius:8px; color:#087052; background:#dff7ee; font-size:9px; }
.watch-shell { display:grid; grid-template-columns:minmax(0,1fr) var(--player-side); width:calc(100% - 40px); max-width:var(--player-width); min-height:590px; margin:0 auto; overflow:hidden; border:1px solid #263d5a; border-radius:17px; background:#0b1728; box-shadow:0 18px 44px rgba(9,25,45,.2); }
.watch-stage { display:grid; min-width:0; grid-template-rows:56px minmax(410px,1fr) 68px; border-right:1px solid #263b55; }
.lesson-titlebar { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:0 18px; color:#dce6f1; background:#111f33; }
.lesson-titlebar>div:first-child { display:flex; min-width:0; align-items:center; gap:10px; }
.lesson-titlebar>div:first-child span { flex:0 0 auto; color:#7eb0ff; font-size:8px; font-weight:900; }
.lesson-titlebar>div:first-child strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.lesson-titlebar>div:last-child { display:flex; gap:6px; }
.lesson-titlebar button { min-height:31px; padding:0 10px; border:1px solid #354961; border-radius:8px; color:#b9c7d8; background:#17283d; font-size:8px; font-weight:800; cursor:pointer; }
.video-surface { position:relative; display:grid; min-height:420px; place-items:center; overflow:hidden; background:#050a11; }
.video-surface>img { width:100%; height:100%; object-fit:cover; opacity:.74; filter:saturate(.85); }
.video-surface::after { position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,11,20,.12),rgba(4,11,20,.64)); content:""; }
.video-overlay,.video-playing { position:absolute; inset:0; z-index:2; display:grid; place-content:center; justify-items:center; color:#fff; text-align:center; }
.video-overlay>button { display:grid; justify-items:center; border:0; color:#fff; background:transparent; cursor:pointer; }
.video-overlay>button>span { display:grid; width:76px; height:76px; place-items:center; padding-left:5px; border:1px solid rgba(255,255,255,.58); border-radius:50%; color:var(--play-blue); background:rgba(255,255,255,.95); box-shadow:0 15px 38px rgba(0,0,0,.3); font-size:24px; }
.video-overlay strong,.video-playing strong { margin-top:15px; font-size:12px; }
.video-overlay small { margin-top:5px; color:#b9c7d8; font-size:8px; }
.video-playing>span { display:grid; width:66px; height:66px; place-items:center; border:1px solid rgba(255,255,255,.4); border-radius:19px; color:#fff; background:var(--play-blue); font-size:14px; font-weight:900; animation:playPulse 1.4s infinite; }
.video-playing p { margin:6px 0 0; color:#b8c6d7; font-size:8px; }
.custom-controls { position:absolute; right:0; bottom:0; left:0; z-index:3; display:grid; grid-template-columns:28px 40px 1fr 40px auto auto 28px; align-items:center; gap:8px; min-height:54px; padding:0 16px; color:#e1e9f1; background:linear-gradient(180deg,transparent,rgba(2,8,15,.88)); }
.custom-controls button { border:0; color:#d7e1eb; background:transparent; font-size:8px; font-weight:800; cursor:pointer; }
.custom-controls>button:first-child { display:grid; width:28px; height:28px; place-items:center; border-radius:50%; color:#fff; background:var(--play-blue); }
.custom-controls time { font-size:7px; }
.player-progress { position:relative; height:5px; border-radius:999px; background:rgba(255,255,255,.25); cursor:pointer; }
.player-progress i { display:block; width:0; height:100%; border-radius:999px; background:var(--play-blue); }
.player-progress b { position:absolute; top:50%; left:0; width:11px; height:11px; border:2px solid #fff; border-radius:50%; background:var(--play-blue); transform:translate(-50%,-50%); }
.watch-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 18px; color:#bdc9d7; background:#101e31; }
.watch-footer>div:first-child { display:grid; grid-template-columns:auto auto; gap:2px 8px; align-items:center; }
.watch-footer span { font-size:8px; }
.watch-footer b { color:#fff; font-size:10px; }
.watch-footer small { grid-column:1/-1; color:#71839a; font-size:7px; }
.lesson-nav { display:flex; gap:7px; }
.lesson-nav button { min-height:35px; padding:0 11px; border:1px solid #354961; border-radius:8px; color:#8191a5; background:#18283c; font-size:8px; font-weight:900; cursor:pointer; }
.lesson-nav button.next { color:#fff; border-color:var(--play-blue); background:var(--play-blue); }
.lesson-nav button:disabled { cursor:not-allowed; opacity:.45; }

.study-side { display:grid; min-width:0; grid-template-rows:56px 1fr; color:#dce5ef; background:#111f33; }
.study-tabs { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid #283e59; }
.study-tabs button { position:relative; border:0; color:#8fa0b5; background:transparent; font-size:9px; font-weight:900; cursor:pointer; }
.study-tabs button::after { position:absolute; right:22px; bottom:0; left:22px; height:3px; border-radius:3px 3px 0 0; background:var(--play-blue); content:""; opacity:0; }
.study-tabs button.active { color:#fff; }
.study-tabs button.active::after { opacity:1; }
.study-panel { min-height:0; padding:17px; overflow-y:auto; }
.study-panel.active[data-study-panel="catalog"] { display:flex; flex-direction:column; }
.study-panel[hidden] { display:none!important; }
.catalog-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:14px; border-bottom:1px solid #283d57; }
.catalog-head>div { display:grid; gap:3px; }
.catalog-head strong { font-size:11px; }
.catalog-head span { color:#7f91a8; font-size:7px; }
.catalog-head em { color:#7daeff; font-size:8px; font-style:normal; font-weight:900; }
.side-lessons { display:grid; gap:7px; margin-top:13px; }
.side-lessons button { display:grid; grid-template-columns:36px 1fr 27px; align-items:center; gap:9px; min-height:70px; padding:9px; border:1px solid #2a4059; border-radius:10px; color:#bfcbd9; background:#17273b; text-align:left; cursor:pointer; }
.side-lessons button:hover,.side-lessons button.active { color:#fff; border-color:#376fc2; background:#173057; }
.side-lessons button>span { display:grid; width:34px; height:34px; place-items:center; border-radius:9px; color:#81b1ff; background:#203652; font-size:9px; font-weight:900; }
.side-lessons button>div { display:grid; gap:4px; }
.side-lessons strong { font-size:9px; }
.side-lessons small { color:#7f91a8; font-size:7px; }
.side-lessons small i { color:#59d4ab; font-style:normal; }
.side-lessons button>b { display:grid; width:25px; height:25px; place-items:center; border-radius:50%; color:#fff; background:var(--play-blue); font-size:7px; }
.catalog-tip { display:grid; grid-template-columns:38px 1fr; align-items:center; gap:10px; margin-top:auto; padding:12px; border:1px solid #40536b; border-radius:10px; background:linear-gradient(135deg,#25344a,#2a3c54); }
.catalog-tip>span { display:grid; width:38px; height:28px; place-items:center; border-radius:7px; color:#26374d; background:var(--play-gold); font-size:8px; font-weight:900; }
.catalog-tip p { display:grid; gap:2px; margin:0; }
.catalog-tip strong { color:#fff; font-size:8px; }
.catalog-tip small { color:#8fa1b7; font-size:7px; }
.tool-heading { display:grid; gap:4px; }
.tool-heading>span { color:#7eadfb; font-size:7px; font-weight:900; letter-spacing:.7px; }
.tool-heading strong { color:#fff; font-size:12px; }
.tool-heading p { margin:0; color:#8799af; font-size:8px; line-height:1.55; }
.study-panel textarea { width:100%; margin-top:14px; resize:vertical; padding:11px; border:1px solid #2d455f; border-radius:9px; outline:0; color:#dfe7ef; background:#17273b; font-size:9px; line-height:1.65; }
.study-panel textarea:focus { border-color:#4d85d6; box-shadow:0 0 0 3px rgba(23,111,230,.12); }
.input-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; color:#7e90a6; font-size:7px; }
.input-meta button { min-height:33px; padding:0 11px; border:0; border-radius:8px; color:#fff; background:var(--play-blue); font-size:8px; font-weight:900; cursor:pointer; }
.tool-empty { display:grid; min-height:180px; align-content:center; justify-items:center; color:#6f8198; text-align:center; }
.tool-empty>span { display:grid; width:42px; height:42px; place-items:center; border-radius:12px; background:#1c3048; font-size:9px; font-weight:900; }
.tool-empty p { margin:8px 0 0; font-size:8px; }

.lesson-content-shell { display:grid; grid-template-columns:minmax(0,1fr) var(--player-side); gap:16px; width:calc(100% - 40px); max-width:var(--player-width); margin:18px auto 42px; align-items:stretch; }
.lesson-content-main { overflow:hidden; border:1px solid var(--play-line); border-radius:15px; background:#fff; }
.below-tabs { display:flex; min-height:56px; align-items:stretch; padding:0 16px; border-bottom:1px solid var(--play-line); }
.below-tabs button { position:relative; padding:0 17px; border:0; color:#65788f; background:transparent; font-size:9px; font-weight:900; cursor:pointer; }
.below-tabs button::after { position:absolute; right:17px; bottom:0; left:17px; height:3px; border-radius:3px 3px 0 0; background:var(--play-blue); content:""; opacity:0; }
.below-tabs button.active { color:var(--play-blue); }
.below-tabs button.active::after { opacity:1; }
.below-panel { padding:22px; }
.below-panel[hidden] { display:none!important; }
.below-heading>span { color:var(--play-blue); font-size:7px; font-weight:900; letter-spacing:1px; }
.below-heading h2 { margin:4px 0 0; color:var(--play-navy); font-size:19px; }
.below-heading p { margin:5px 0 0; color:#8190a3; font-size:9px; }
.point-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:17px; }
.point-grid article { min-height:125px; padding:14px; border:1px solid #e0e7ef; border-radius:11px; background:#fbfdff; }
.point-grid b { color:var(--play-green); font-size:9px; }
.point-grid strong { display:block; margin-top:8px; font-size:10px; }
.point-grid p { margin:5px 0 0; color:#8190a3; font-size:8px; line-height:1.6; }
.intro-copy { color:#536a83; font-size:10px; line-height:1.8; }
.intro-copy h3 { margin:18px 0 5px; color:var(--play-navy); font-size:14px; }
.compact-chapters { display:grid; gap:8px; }
.compact-chapters button { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:10px; min-height:58px; padding:10px 12px; border:1px solid #dfe7f0; border-radius:10px; color:#506780; background:#fbfdff; text-align:left; cursor:pointer; }
.compact-chapters button.active { color:#244e7c; border-color:#b7d1f5; background:#f1f6ff; }
.compact-chapters span { color:var(--play-blue); font-weight:900; }
.compact-chapters strong { font-size:9px; }
.compact-chapters em { color:var(--play-green); font-size:8px; font-style:normal; }
.below-empty { display:grid; min-height:240px; justify-items:center; align-content:center; text-align:center; }
.below-empty>span { display:grid; width:50px; height:50px; place-items:center; border-radius:14px; color:var(--play-blue); background:#eaf2ff; font-size:11px; font-weight:900; }
.below-empty strong { margin-top:11px; font-size:11px; }
.below-empty p { margin:5px 0 0; color:#8593a5; font-size:8px; }
.next-card { display:flex; min-height:100%; flex-direction:column; padding:19px; border:1px solid #28496d; border-radius:15px; color:#fff; background:radial-gradient(circle at 91% 7%,rgba(242,196,91,.18),transparent 27%),linear-gradient(145deg,#10233f,#173e6d); }
.next-card>span { color:var(--play-gold); font-size:8px; font-weight:900; }
.next-card>strong { display:block; margin-top:8px; font-size:14px; line-height:1.45; }
.next-card>p { margin:7px 0 0; color:#afbed0; font-size:8px; line-height:1.6; }
.next-card>button { width:100%; min-height:39px; margin-top:auto; border:0; border-radius:9px; color:#fff; background:var(--play-blue); font-size:9px; font-weight:900; cursor:pointer; }
.next-card>div { display:grid; gap:6px; margin-top:15px; padding-top:13px; border-top:1px solid rgba(255,255,255,.13); }
.next-card>div>i { display:block; width:0; height:5px; border-radius:999px; background:var(--play-green); transition:.25s ease; }
.next-card>div>span { color:#9fb0c4; font-size:7px; }
.next-card>div b { float:right; color:#fff; }
.player-toast { position:fixed; right:24px; bottom:24px; z-index:30; max-width:330px; padding:12px 16px; border-radius:10px; color:#fff; background:#133457; box-shadow:0 14px 30px rgba(13,35,64,.25); font-size:10px; font-weight:800; opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s ease; }
.player-toast.show { opacity:1; transform:translateY(0); }
@keyframes playPulse { 0%,100%{box-shadow:0 0 0 0 rgba(23,111,230,.35)} 50%{box-shadow:0 0 0 13px rgba(23,111,230,0)} }

@media (max-width:1100px) { :root { --player-side:310px; } }
@media (max-width:860px) { .watch-shell { grid-template-columns:1fr; }.watch-stage { border-right:0; }.study-side { min-height:460px; }.lesson-content-shell { grid-template-columns:1fr; }.context-status span { display:none; } }
@media (max-width:620px) { .lesson-context,.watch-shell,.lesson-content-shell { width:calc(100% - 24px); }.lesson-context { grid-template-columns:auto minmax(0,1fr); }.lesson-context h1 { max-width:210px; }.context-status { display:none; }.watch-shell { border-radius:13px; }.watch-stage { grid-template-rows:50px 310px auto; }.lesson-titlebar { padding:0 11px; }.lesson-titlebar>div:last-child button:first-child { display:none; }.video-surface { min-height:310px; }.custom-controls { grid-template-columns:28px 36px 1fr 36px 28px; padding:0 10px; }.custom-controls [data-volume],.custom-controls [data-speed] { display:none; }.watch-footer { align-items:flex-start; flex-direction:column; padding:12px; }.lesson-nav { width:100%; }.lesson-nav button { flex:1; }.study-side { min-height:430px; }.catalog-tip { margin-top:16px; }.below-tabs { overflow-x:auto; padding:0 7px; }.below-tabs button { flex:0 0 auto; padding:0 11px; }.below-tabs button::after { right:11px; left:11px; }.below-panel { padding:18px 14px; }.point-grid { grid-template-columns:1fr; } }

/* Readability uplift. */
.lesson-context>a { font-size:11px; }
.lesson-context>div:nth-child(2)>span { font-size:9px; }
.lesson-context h1 { font-size:17px; }
.context-status span,.context-status strong { font-size:10px; }
.lesson-titlebar>div:first-child span { font-size:10px; }
.lesson-titlebar>div:first-child strong { font-size:12px; }
.lesson-titlebar button { font-size:10px; }
.video-overlay strong,.video-playing strong { font-size:14px; }
.video-overlay small,.video-playing p { font-size:10px; }
.custom-controls button { font-size:10px; }
.custom-controls time { font-size:9px; }
.watch-footer span { font-size:10px; }
.watch-footer b { font-size:12px; }
.watch-footer small { font-size:9px; }
.lesson-nav button { font-size:10px; }
.study-tabs button,.below-tabs button { font-size:11px; }
.catalog-head strong { font-size:13px; }
.catalog-head span { font-size:9px; }
.catalog-head em { font-size:10px; }
.side-lessons button>span { font-size:10px; }
.side-lessons strong { font-size:11px; }
.side-lessons small { font-size:9px; }
.side-lessons button>b { font-size:9px; }
.catalog-tip>span { font-size:9px; }
.catalog-tip strong { font-size:10px; }
.catalog-tip small { font-size:9px; }
.tool-heading>span { font-size:9px; }
.tool-heading strong { font-size:14px; }
.tool-heading p { font-size:10px; }
.study-panel textarea { font-size:11px; }
.input-meta { font-size:9px; }
.input-meta button { font-size:10px; }
.tool-empty>span,.tool-empty p { font-size:10px; }
.below-heading>span { font-size:9px; }
.below-heading p { font-size:11px; }
.point-grid b { font-size:10px; }
.point-grid strong { font-size:12px; }
.point-grid p { font-size:10px; }
.intro-copy { font-size:12px; }
.intro-copy h3 { font-size:16px; }
.compact-chapters strong { font-size:11px; }
.compact-chapters em { font-size:10px; }
.below-empty strong { font-size:13px; }
.below-empty p { font-size:10px; }
.next-card>span { font-size:10px; }
.next-card>strong { font-size:16px; }
.next-card>p { font-size:10px; }
.next-card>button { font-size:11px; }
.next-card>div>span { font-size:9px; }
.player-toast { font-size:11px; }

/* Native player compatibility: keep the real AliPlayer surface and controls. */
.video-player-page { min-height:100vh; }
.video-player-page .paly-body { position:relative; min-height:0; }
.video-player-page .video-surface { display:block; }
.video-player-page #player-con { position:absolute; inset:0; z-index:1; width:100%; height:100%; }
.video-player-page .content,.video-player-page .errorsbox { position:absolute; inset:0; z-index:2; overflow:auto; }
.video-player-page .errorsbox { display:grid; place-items:center; color:#fff; background:rgba(5,10,17,.78); }
.video-player-page .errors { width:min(90%,420px); padding:24px; border:1px solid rgba(255,255,255,.15); border-radius:14px; text-align:center; background:rgba(17,31,51,.92); }
.video-player-page .Previewtitle { color:#fff; font-size:14px; }
.video-player-page .vip_limit_button_box { display:flex; gap:8px; justify-content:center; margin-top:18px; }
.video-player-page .vip_limit_btn { display:inline-flex; min-height:36px; align-items:center; justify-content:center; padding:0 14px; border-radius:8px; color:#fff; background:var(--play-blue); font-size:11px; }
.video-player-page .playside { position:relative; right:auto; top:auto; bottom:auto; width:auto; min-height:0; background:#111f33; box-shadow:none; }
.video-player-page .side_header { height:56px; }
.video-player-page .side_header ul { display:grid; height:100%; grid-template-columns:repeat(4,1fr); margin:0; padding:0; list-style:none; }
.video-player-page .side_header li { position:relative; display:flex; align-items:center; justify-content:center; }
.video-player-page .side_header li.selected::after { position:absolute; right:18px; bottom:0; left:18px; height:3px; border-radius:3px 3px 0 0; background:var(--play-blue); content:""; }
.video-player-page .side_header li a { color:#8fa0b5; font-size:10px; font-weight:900; }
.video-player-page .side_header li.selected a { color:#fff; }
.video-player-page .task-list { min-height:0; padding:17px; overflow-y:auto; }
.video-player-page .task-list[style*="display: none"] { display:none!important; }
.video-player-page .task-list[style*="display: block"] { display:block!important; }
.video-player-page .side-lessons>a { display:grid; grid-template-columns:36px 1fr 27px; align-items:center; gap:9px; min-height:70px; padding:9px; border:1px solid #2a4059; border-radius:10px; color:#bfcbd9; background:#17273b; }
.video-player-page .side-lessons>a:hover,.video-player-page .side-lessons>a.active { color:#fff; border-color:#376fc2; background:#173057; }
.video-player-page .keke_answerlist { max-height:260px; overflow:auto; }
.video-player-page .keke_answerlist ul { margin:0; padding:0; list-style:none; }
.video-player-page .keke_answerlist li { padding:11px 0; border-bottom:1px solid #2a4059; color:#bfcbd9; font-size:10px; line-height:1.6; }
.video-player-page .answerusinfo { color:#7f91a8; }
.video-player-page .keke_answerform { margin-top:14px; }
.video-player-page .keke_answer { width:100%; box-sizing:border-box; padding:10px; border:1px solid #2d455f; border-radius:9px; color:#dfe7ef; background:#17273b; resize:vertical; }
.video-player-page .kek_answer_btn,.video-player-page .kekenotebtn a { display:flex; min-height:34px; align-items:center; justify-content:center; margin-top:8px; border-radius:8px; color:#fff; background:var(--play-blue); font-size:10px; font-weight:900; }
.video-player-page .kekenotebox textarea { width:100%; min-height:190px; box-sizing:border-box; padding:10px; border:1px solid #2d455f; border-radius:9px; color:#dfe7ef; background:#17273b; resize:vertical; }
.video-player-page .lesson-nav a { display:inline-flex; min-height:35px; align-items:center; padding:0 11px; border:1px solid #354961; border-radius:8px; color:#8191a5; background:#18283c; font-size:10px; font-weight:900; }
.video-player-page .lesson-nav a.next { color:#fff; border-color:var(--play-blue); background:var(--play-blue); }
.video-player-page .next-card>a { display:flex; min-height:39px; align-items:center; justify-content:center; margin-top:auto; border-radius:9px; color:#fff; background:var(--play-blue); font-size:11px; font-weight:900; }
.video-player-page .compact-chapters { display:grid; gap:8px; }
.video-player-page .compact-chapters>a { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:10px; min-height:58px; padding:10px 12px; border:1px solid #dfe7f0; border-radius:10px; color:#506780; background:#fbfdff; }
.video-player-page .compact-chapters>a:hover { border-color:#b7d1f5; background:#f1f6ff; }
.video-player-page .compact-chapters span { color:var(--play-blue); font-weight:900; }
.video-player-page .compact-chapters em { color:var(--play-green); font-size:10px; font-style:normal; }