/* 横向课学生自学界面：左侧进度导航、右侧单版面学习、案例浮窗。 */
.lesson-page{--lesson-navy:#081824;--lesson-cyan:#7de2fb;--lesson-violet:#7a57c7;--lesson-line:rgba(12,24,39,.13)}
.lesson-main{width:min(100%,1540px);margin:0 auto;padding:14px 18px 54px}

.lesson-hero{margin:0 0 12px;padding:20px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px;border:1px solid rgba(255,255,255,.16);border-radius:20px;color:#fff;background:radial-gradient(circle at 82% 0,rgba(33,199,243,.19),transparent 28%),linear-gradient(118deg,#081521,#102a3a 64%,#173849);box-shadow:0 14px 32px rgba(15,23,42,.12)}
.lesson-hero .kicker{grid-column:1;color:var(--lesson-cyan);font:800 9px/1.2 var(--mono);letter-spacing:.15em}
.lesson-hero h1{grid-column:1;margin:6px 0 7px;color:#fff;font:900 clamp(27px,2.7vw,42px)/1.08 var(--sans);letter-spacing:-.04em}
.lesson-hero p{grid-column:1;max-width:74ch;margin:0;color:#c8d4dc;font:550 12.5px/1.68 var(--sans)}
.lesson-hero p b{color:#fff}
.lesson-hero .facts{grid-column:2;grid-row:1/4;display:grid;grid-template-columns:repeat(2,minmax(116px,1fr));gap:7px;align-self:stretch;align-content:center}
.lesson-hero .facts span{padding:9px 11px;border:1px solid rgba(255,255,255,.14);border-radius:9px;color:#dce8ee;background:rgba(4,16,25,.23);font:700 10px/1.25 var(--sans);white-space:nowrap}

.lesson-js .lesson-main{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto auto auto;align-items:start;gap:12px 14px}
.lesson-js .lesson-hero{grid-column:1/-1}
.lesson-toc{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 24px}
.lesson-toc a{padding:8px 12px;border:1px solid var(--line2);border-radius:9px;color:var(--paper);background:#fff;text-decoration:none;font:700 12px/1 var(--sans)}
.lesson-toc a:hover{border-color:#0e92c5;color:#0e92c5}
.lesson-progress{display:none}
.lesson-js .lesson-toc{grid-column:1;grid-row:2;position:sticky;top:80px;z-index:4;margin:0;padding:9px;display:grid;gap:5px;max-height:calc(100dvh - 94px);overflow:auto;border:1px solid var(--lesson-line);border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 9px 24px rgba(15,23,42,.08);backdrop-filter:blur(14px)}
.lesson-js .lesson-toc a{position:relative;min-height:34px;padding:0 11px;display:flex;align-items:center;border:0;border-radius:8px;color:#687784;background:transparent;font-size:11.5px}
.lesson-js .lesson-toc a::after{content:"";position:absolute;right:10px;width:5px;height:5px;border:1px solid #9aa7b1;border-radius:50%}
.lesson-js .lesson-toc a[aria-current="page"]{color:#fff;background:var(--lesson-navy)}
.lesson-js .lesson-toc a[aria-current="page"]::after{border-color:var(--lesson-cyan);background:var(--lesson-cyan);box-shadow:0 0 0 3px rgba(125,226,251,.14)}
.lesson-js .lesson-toc a.is-complete::after{border-color:#13a889;background:#13a889}
.lesson-js .lesson-toc a.teacher-link{margin-top:4px;padding-top:9px;border-top:1px solid var(--lesson-line);border-radius:0;color:#7357af}
.lesson-progress{padding:9px 10px 10px;display:grid;grid-template-columns:1fr auto;gap:3px 8px;border-radius:9px;color:#fff;background:linear-gradient(130deg,#0d2433,#173849)}
.lesson-progress span{color:var(--lesson-cyan);font:800 8px/1 var(--mono);letter-spacing:.13em}
.lesson-progress strong{grid-row:1/3;grid-column:2;color:#fff;font:900 14px/1 var(--mono)}
.lesson-progress i{font-style:normal}
.lesson-progress small{color:#9fb1bd;font-size:9px}

.lesson-js .lesson-main>.lesson-sec,.lesson-js .lesson-main>.rule{grid-column:2;grid-row:2;display:none;min-width:0}
.lesson-js .lesson-main>.is-active{display:block;animation:lesson-in .18s ease-out}
@keyframes lesson-in{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}

.lesson-sec{margin:0 0 34px;padding:22px 24px;border:1px solid var(--lesson-line);border-radius:18px;background:#fff;box-shadow:0 9px 24px rgba(15,23,42,.055)}
.lesson-sec>h2{margin:0 0 5px;color:var(--paper);font:850 22px/1.3 var(--sans);letter-spacing:-.02em}
.lesson-sec>.sub{margin:0 0 17px;color:var(--paper-dim);font:450 13px/1.7 var(--sans)}
.lesson-sec p{color:#2d3c49;font:430 14px/1.82 var(--sans)}
.lesson-sec b,.lesson-sec strong{color:var(--paper)}

.beat{overflow:auto;border:1px solid var(--line2);border-radius:12px;background:#fff}
.beat table{width:100%;border-collapse:collapse}
.beat th,.beat td{padding:10px 13px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font:420 13px/1.68 var(--sans)}
.beat th{color:var(--paper);background:#f2f5f8;font-weight:750;white-space:nowrap}
.beat td:first-child{color:var(--star);font:750 12px/1.68 var(--mono);white-space:nowrap}
.beat tr:last-child td{border-bottom:0}

.rule{overflow:hidden;margin:0 0 20px;border:1px solid var(--lesson-line);border-radius:18px;background:#fff;box-shadow:0 9px 24px rgba(15,23,42,.065)}
.rule>header{padding:16px 20px 14px;border-bottom:1px solid var(--line);background:linear-gradient(100deg,#f5f9fb,#fff 72%)}
.rule>header .no{color:#0e92c5;font:800 9px/1 var(--mono);letter-spacing:.14em}
.rule>header h3{margin:5px 0 4px;color:var(--paper);font:850 23px/1.2 var(--sans)}
.rule>header .law{margin:0;color:#1d2b38;font:550 13.5px/1.65 var(--sans)}
.rule>header .law em{color:#7653c4;font-style:normal;font-weight:750}
.rule .body{padding:16px 20px 20px}
.rule .body>p{color:#2d3c49;font:430 13.5px/1.78 var(--sans)}

.six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 0 14px}
.six a{position:relative;display:block;min-width:0;padding:9px 10px;border:1px solid var(--line2);border-radius:10px;text-decoration:none;background:#fbfcfd;transition:border-color .15s,transform .15s,box-shadow .15s}
.six a::after{content:"↗";position:absolute;right:8px;top:7px;color:#93a2ad;font-size:9px}
.six a:hover{border-color:#0e92c5;transform:translateY(-1px);box-shadow:0 5px 13px rgba(14,146,197,.08)}
.six a .maj{display:block;padding-right:16px;color:#0e92c5;font:750 9px/1.45 var(--mono);letter-spacing:.08em}
.six a .ttl{display:-webkit-box;min-height:37px;margin:2px 0 1px;overflow:hidden;color:var(--paper);font:650 12px/1.5 var(--sans);-webkit-box-orient:vertical;-webkit-line-clamp:2}
.six a .who{display:block;overflow:hidden;color:var(--paper-dim);font:420 10.5px/1.45 var(--sans);white-space:nowrap;text-overflow:ellipsis}

.ask{margin:0 0 12px;padding:11px 13px;border-left:3px solid #7a57c7;border-radius:0 9px 9px 0;background:#f5f3fb}
.ask b{display:block;color:#7653c4;font:800 9px/1.5 var(--mono);letter-spacing:.08em}
.ask p{margin:2px 0 0;color:#17273a;font:550 13.5px/1.7 var(--sans)}
.acts{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0}
.acts a{padding:7px 11px;border:1px solid var(--line2);border-radius:8px;color:var(--paper);background:#fff;text-decoration:none;font:650 11px/1 var(--sans)}
.acts a.primary{border-color:#0e92c5;color:#fff;background:#0e92c5}
.acts a:hover{border-color:#0e92c5}
.note{margin:12px 0 0;padding:12px 14px;border:1px dashed var(--line2);border-radius:10px;color:#33414f;background:#fafbfc;font:420 13px/1.75 var(--sans)}
.note b{color:var(--paper)}

.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.card2{padding:15px 17px;border:1px solid var(--line2);border-radius:12px;background:#fff}
.card2 h4{margin:0 0 7px;color:var(--paper);font:750 14px/1.45 var(--sans)}
.card2 ul{margin:0;padding-left:1.15em}
.card2 li{margin:0 0 5px;color:#33414f;font:420 12.5px/1.72 var(--sans)}
.grade{width:100%;margin:10px 0 0;border-collapse:collapse}
.grade th,.grade td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font:420 12.5px/1.68 var(--sans)}
.grade th{color:var(--paper);background:#f2f5f8;font-weight:750}
.grade td:last-child{color:var(--star);font:750 13px/1.68 var(--mono);white-space:nowrap}

.prestudy-card{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(250px,.6fr);gap:12px;margin:0 0 20px;padding:16px;border:1px solid rgba(14,146,197,.22);border-radius:14px;background:linear-gradient(120deg,#f3fbfe,#f8f6fd)}
.prestudy-card span{color:#0e92c5;font:800 9px/1 var(--mono);letter-spacing:.12em}
.prestudy-card h3{margin:6px 0 8px;color:#0c1827;font:800 18px/1.3 var(--sans)}
.prestudy-card ol{margin:0;padding-left:1.25em}
.prestudy-card li{margin:0 0 5px;color:#33414f;font:430 12.5px/1.7 var(--sans)}
.prestudy-delivery{padding:12px 13px;border-radius:10px;background:#0d2433;color:#fff}
.prestudy-delivery>b{color:var(--lesson-cyan);font:800 10px/1 var(--mono);letter-spacing:.08em}
.prestudy-delivery p{margin:7px 0 10px;color:#cbd8df;font-size:11.5px;line-height:1.68}
.submit-to-l07{display:inline-flex;min-height:34px;padding:0 12px;align-items:center;border-radius:8px;color:#07131f;background:var(--lesson-cyan);text-decoration:none;font-size:11px;font-weight:800}
.prestudy-delivery small{display:block;margin-top:7px;color:#91a4b0;font-size:9.5px;line-height:1.5}
.extended-title{margin:0 0 10px;color:#0c1827;font:800 15px/1.4 var(--sans)}

.lesson-pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:9px;margin:20px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.lesson-pager button{min-height:35px;padding:0 12px;border:1px solid var(--line2);border-radius:8px;color:#52616f;background:#fff;font:700 11px/1 var(--sans);cursor:pointer}
.lesson-pager button:last-child{justify-self:end;color:#fff;border-color:var(--lesson-navy);background:var(--lesson-navy)}
.lesson-pager button:disabled{opacity:.35;cursor:default}
.lesson-pager span{color:#8a98a3;font:700 9px/1 var(--mono);letter-spacing:.08em;white-space:nowrap}

.lesson-foot{margin:26px 0 0;padding:17px 20px;border:1px solid var(--line2);border-radius:14px;background:#fff}
.lesson-foot p{margin:0;color:var(--paper-dim);font:420 12.5px/1.7 var(--sans)}
.lesson-js .lesson-foot{grid-column:1/-1;grid-row:3}

.case-dialog[hidden]{display:none}
.case-dialog{position:fixed;z-index:200;inset:0;display:grid;place-items:center;padding:clamp(10px,2vw,24px)}
.case-dialog__backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(3,12,19,.76);backdrop-filter:blur(10px);cursor:pointer}
.case-dialog__shell{position:relative;width:min(1280px,96vw);height:min(820px,92dvh);overflow:hidden;display:grid;grid-template-rows:48px minmax(0,1fr);border:1px solid rgba(125,226,251,.34);border-radius:16px;background:#07131f;box-shadow:0 28px 80px rgba(0,0,0,.4)}
.case-dialog__shell>header{padding:0 11px 0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;background:#0d2433}
.case-dialog__shell>header>div:first-child{display:grid;gap:2px}
.case-dialog__shell>header span{color:var(--lesson-cyan);font:800 8px/1 var(--mono);letter-spacing:.13em}
.case-dialog__shell>header strong{font-size:12px}
.case-dialog__actions{display:flex;align-items:center;gap:7px}
.case-dialog__actions a,.case-dialog__actions button{min-height:30px;padding:0 10px;display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.18);border-radius:7px;color:#d7e4ea;background:transparent;text-decoration:none;font:700 10px/1 var(--sans)}
.case-dialog__actions button{width:30px;padding:0;justify-content:center;color:#fff;font-size:20px;cursor:pointer}
.case-dialog iframe{width:100%;height:100%;border:0;background:#07131f}
body.case-dialog-open{overflow:hidden}

@media(max-width:980px){
  .lesson-js .lesson-main{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:9px}
  .lesson-js .lesson-hero{grid-column:1;grid-row:1}
  .lesson-js .lesson-toc{grid-column:1;grid-row:2;position:sticky;top:62px;display:flex;flex-wrap:nowrap;max-height:none;padding:7px;overflow-x:auto;overflow-y:hidden;border-radius:13px}
  .lesson-js .lesson-toc a{flex:0 0 auto;white-space:nowrap}
  .lesson-progress{min-width:125px;flex:0 0 125px}
  .lesson-js .lesson-main>.lesson-sec,.lesson-js .lesson-main>.rule{grid-column:1;grid-row:3}
  .lesson-js .lesson-foot{grid-column:1;grid-row:4}
  .lesson-hero{grid-template-columns:1fr}
  .lesson-hero .facts{grid-column:1;grid-row:auto;grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:680px){
  .lesson-main{padding:8px 8px 36px}
  .lesson-hero{padding:18px;border-radius:16px}
  .lesson-hero h1{font-size:28px}
  .lesson-hero .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lesson-sec{padding:17px 15px;border-radius:14px}
  .rule>header,.rule .body{padding-left:15px;padding-right:15px}
  .six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols,.prestudy-card{grid-template-columns:1fr}
  .beat{margin-right:-3px}
  .case-dialog{padding:0}
  .case-dialog__shell{width:100vw;height:100dvh;border-radius:0;border:0;grid-template-rows:48px minmax(0,1fr)}
  .case-dialog__actions a{display:none}
}
@media print{
  .lesson-main{display:block!important;max-width:none}
  .lesson-hero{background:none;color:#000;box-shadow:none;border:1px solid #999}
  .lesson-hero p{color:#333}
  .lesson-toc,.acts,.lesson-pager,.case-dialog{display:none!important}
  .lesson-main>.lesson-sec,.lesson-main>.rule{display:block!important;break-inside:avoid;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){.lesson-js .lesson-main>.is-active{animation:none}.six a{transition:none}}