.classroom-body { min-height:100vh; background:#f3efe4; }
.classroom-body [hidden] { display:none !important; }
.classroom-body .site-header .nav a.is-current { opacity:1; }
.classroom-body .site-header .nav a.is-current::after { right:0; }
.classroom-entry { min-height:100vh; padding:145px 6vw 80px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(420px,.72fr); gap:clamp(55px,8vw,130px); align-items:center; color:#f8faf5; background:radial-gradient(circle at 16% 72%,rgba(102,169,35,.22),transparent 25%),radial-gradient(circle at 75% 16%,rgba(0,110,125,.33),transparent 28%),linear-gradient(135deg,#032c2d,#004754 52%,#083f35); position:relative; overflow:hidden; }
.classroom-entry::before { content:""; position:absolute; inset:0; opacity:.12; background-image:linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(90deg,#000,transparent 72%); }
.classroom-entry::after { content:"乡见"; position:absolute; left:-.05em; bottom:-.27em; font:700 clamp(190px,26vw,430px)/1 var(--display); color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.075); letter-spacing:-.12em; pointer-events:none; }
.entry-copy,.auth-card { position:relative; z-index:1; }
.classroom-eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 26px; color:rgba(248,250,245,.68); font-size:10px; font-weight:700; letter-spacing:.2em; }
.classroom-eyebrow span { width:34px; height:1px; background:var(--lime); }
.entry-copy h1 { max-width:800px; margin:0; font:700 clamp(48px,5.2vw,88px)/1.04 var(--display); letter-spacing:-.065em; }
.entry-copy h1 em { color:var(--lime); font-style:normal; }
.entry-lead { max-width:690px; margin:34px 0 0; color:rgba(248,250,245,.68); font-size:15px; line-height:2; }
.entry-features { display:flex; flex-wrap:wrap; gap:1px; margin-top:44px; }
.entry-features span { min-width:160px; padding:18px 20px; display:flex; align-items:baseline; gap:9px; color:rgba(248,250,245,.65); font-size:11px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.035); }
.entry-features b { color:#fff; font-size:18px; }
.classroom-selftest-link { width:min(430px,100%); margin-top:18px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:18px; color:#fff; border:1px solid rgba(242,207,36,.42); background:rgba(242,207,36,.07); transition:.2s ease; }
.classroom-selftest-link:hover { color:var(--forest-deep); background:var(--lime); border-color:var(--lime); transform:translateY(-2px); }
.classroom-selftest-link small { color:rgba(255,255,255,.52); font-size:9px; }
.classroom-selftest-link:hover small { color:rgba(0,71,84,.66); }
.classroom-selftest-link strong { font-size:11px; white-space:nowrap; }
.classroom-selftest-link strong span { margin-left:8px; color:var(--lime); font-size:17px; }
.classroom-selftest-link:hover strong span { color:inherit; }
.access-expired-panel > a { min-width:180px; min-height:50px; padding:0 18px; display:flex; align-items:center; justify-content:center; color:var(--forest-deep); background:var(--lime); font-size:11px; font-weight:700; }
.entry-note { max-width:690px; display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start; margin-top:38px; padding-top:22px; border-top:1px solid rgba(255,255,255,.18); }
.entry-note i { display:grid; place-items:center; width:30px; height:30px; color:var(--lime); font-size:9px; font-style:normal; border:1px solid rgba(242,207,36,.55); border-radius:50%; }
.entry-note p { margin:3px 0 0; color:rgba(248,250,245,.52); font-size:11px; line-height:1.8; }
.auth-card { width:100%; max-width:570px; justify-self:end; padding:clamp(30px,3.6vw,52px); color:var(--ink); background:rgba(249,248,241,.98); box-shadow:0 35px 95px rgba(0,19,17,.36); }
.auth-heading small,.redeem-panel small,.course-progress-head small,.resource-head small,.lesson-copy small,.notice-dialog small { color:var(--green); font-size:9px; font-weight:800; letter-spacing:.19em; }
.auth-heading h2 { margin:10px 0 8px; font-size:clamp(28px,3vw,42px); letter-spacing:-.045em; }
.auth-heading p { margin:0; color:var(--muted); font-size:12px; line-height:1.7; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; margin:30px 0 27px; border-bottom:1px solid rgba(16,59,63,.16); }
.auth-tabs button { padding:13px; border:0; color:var(--muted); background:transparent; font-weight:700; font-size:12px; position:relative; cursor:pointer; }
.auth-tabs button::after { content:""; position:absolute; left:50%; right:50%; bottom:-1px; height:2px; background:var(--green); transition:.22s ease; }
.auth-tabs button.active { color:var(--green); }
.auth-tabs button.active::after { left:0; right:0; }
.auth-form { display:none; gap:17px; }
.auth-form.active { display:grid; }
.auth-form label { display:grid; gap:8px; color:#5b6a65; font-size:11px; }
.auth-form label > small { color:#9aa19d; }
.auth-form input,.auth-form select,.redeem-panel input { width:100%; height:48px; padding:0 14px; color:var(--ink); background:#fff; border:1px solid rgba(16,59,63,.17); outline:0; border-radius:0; }
.auth-form input:focus,.auth-form select:focus,.redeem-panel input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(18,130,72,.08); }
.auth-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.auth-form .consent { display:flex; grid-template-columns:none; flex-direction:row; align-items:flex-start; gap:9px; color:#78827e; line-height:1.65; }
.auth-form .consent input { width:15px; height:15px; flex:0 0 auto; margin-top:2px; accent-color:var(--green); }
.consent button { padding:0; border:0; color:var(--green); background:none; cursor:pointer; }
.submit-button { height:52px; margin-top:3px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border:0; color:#fff; background:var(--forest-deep); cursor:pointer; transition:.2s ease; }
.submit-button:hover { background:var(--green); }
.submit-button:disabled { cursor:wait; opacity:.65; }
.submit-button b { color:var(--lime); font-size:20px; }
.form-status { min-height:18px; margin:0; color:#ad4439; font-size:11px; line-height:1.6; }
.form-status.success { color:var(--green); }
.auth-help { margin-top:23px; padding-top:19px; color:#8a938e; font-size:10px; border-top:1px solid rgba(16,59,63,.12); }
.auth-help a { float:right; color:var(--green); }
.course-purchase-card { margin-top:24px; padding:22px; color:#fff; background:var(--forest-deep); border-top:3px solid var(--lime); }
.course-purchase-card > small { color:var(--lime); font-size:12px; }
.course-purchase-card h3 { margin:10px 0; font-size:20px; line-height:1.5; }
.course-purchase-card p { margin:0 0 18px; color:rgba(255,255,255,.75); font-size:12px; line-height:1.8; }
.course-purchase-card a { min-height:48px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--lime); color:var(--forest-deep); font-size:14px; font-weight:700; }
.course-purchase-card a:hover { background:#fff3a0; }
.course-purchase-card a:focus-visible { outline:3px solid #fff; outline-offset:3px; }

.student-shell { min-height:calc(100vh - 72px); padding:126px 4vw 70px; background:linear-gradient(#eee9dd,#f7f4ec 370px); }
.student-welcome { max-width:1560px; margin:0 auto 38px; display:flex; justify-content:space-between; align-items:end; gap:35px; }
.student-welcome .classroom-eyebrow { color:var(--green); margin-bottom:16px; }
.student-welcome h1 { margin:0; font:700 clamp(40px,4.8vw,76px)/1 var(--display); letter-spacing:-.055em; color:var(--forest-deep); }
.student-welcome > div:first-child > p:last-child { margin:18px 0 0; color:var(--muted); font-size:13px; }
.student-account { min-width:230px; padding:19px 20px; display:grid; gap:6px; background:rgba(255,255,255,.62); border-top:2px solid var(--green); }
.student-account small { color:var(--muted); font-size:9px; letter-spacing:.12em; }
.student-account strong { font-size:15px; }
.student-account span { color:var(--muted); font-size:10px; }
.student-account button { justify-self:start; margin-top:5px; padding:0; border:0; color:var(--green); background:transparent; font-size:10px; cursor:pointer; }
.redeem-panel { max-width:1050px; margin:80px auto 160px; padding:42px; display:grid; grid-template-columns:1fr 420px; gap:55px; align-items:center; background:#fff; border:1px solid rgba(16,59,63,.13); box-shadow:0 25px 70px rgba(0,50,43,.09); }
.redeem-panel h2 { margin:9px 0; font-size:28px; }
.redeem-panel p { margin:0; color:var(--muted); font-size:12px; }
.redeem-panel form { display:grid; grid-template-columns:1fr auto; }
.redeem-panel button { padding:0 20px; border:0; color:#fff; background:var(--green); }
.redeem-panel .form-status { grid-column:1/-1; margin-top:8px; }
.learning-area { max-width:1560px; margin:0 auto; }
.course-progress-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:20px; }
.course-progress-head h2 { margin:7px 0 0; font-size:26px; }
.progress-summary { width:min(330px,34vw); display:grid; gap:8px; color:var(--muted); font-size:10px; text-align:right; }
.progress-summary i { height:4px; overflow:hidden; background:rgba(16,59,63,.12); }
.progress-summary b { display:block; width:0; height:100%; background:var(--green); transition:.35s ease; }
.course-workspace { display:grid; grid-template-columns:270px minmax(0,1fr) 300px; min-height:650px; background:#fff; border:1px solid rgba(16,59,63,.14); box-shadow:0 22px 70px rgba(0,50,43,.08); }
.course-list { background:var(--forest-deep); color:#fff; }
.course-item { width:100%; min-height:96px; padding:17px 18px; display:grid; grid-template-columns:34px 1fr; gap:9px; text-align:left; color:rgba(255,255,255,.63); background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.11); cursor:pointer; transition:.2s ease; }
.course-item:hover { background:rgba(255,255,255,.055); color:#fff; }
.course-item.active { color:#fff; background:#08715e; box-shadow:inset 3px 0 var(--lime); }
.course-item-index { padding-top:2px; color:var(--lime); font-size:9px; letter-spacing:.1em; }
.course-item-copy { display:grid; gap:7px; }
.course-item-copy strong { font-size:12px; line-height:1.5; }
.course-item-copy small { color:inherit; font-size:9px; opacity:.7; }
.course-item.done .course-item-index::after { content:" ✓"; }
.lesson-stage { min-width:0; padding:26px; }
.video-shell { aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; color:#fff; background:#062c2a; }
.video-shell video { width:100%; height:100%; background:#061f1e; object-fit:contain; }
.video-placeholder { width:100%; height:100%; display:grid; place-content:center; justify-items:center; gap:14px; text-align:center; background:radial-gradient(circle,rgba(18,130,72,.32),transparent 45%),linear-gradient(145deg,#063c39,#082923); }
.video-placeholder img { width:68px; opacity:.55; }
.video-placeholder p { margin:0; color:rgba(255,255,255,.65); font-size:11px; letter-spacing:.08em; }
.video-placeholder small { max-width:350px; color:rgba(255,255,255,.42); line-height:1.8; }
.lesson-copy { display:flex; justify-content:space-between; align-items:start; gap:25px; margin-top:25px; }
.lesson-copy h2 { margin:7px 0 5px; font-size:clamp(22px,2.2vw,34px); letter-spacing:-.035em; }
.lesson-copy p { margin:0; color:var(--green); font-size:11px; }
.lesson-copy button { flex:0 0 auto; padding:10px 13px; border:1px solid rgba(18,130,72,.35); color:var(--green); background:#fff; font-size:10px; cursor:pointer; }
.lesson-copy button.completed { color:#fff; background:var(--green); }
.lesson-description { margin:20px 0 0; padding-top:18px; color:var(--muted); font-size:12px; line-height:1.85; border-top:1px solid rgba(16,59,63,.1); }
.resource-panel { padding:27px 22px; background:#f4f1e8; border-left:1px solid rgba(16,59,63,.12); }
.resource-head h2 { margin:8px 0; font-size:20px; }
.resource-head p { margin:0; color:var(--muted); font-size:10px; line-height:1.7; }
.resource-list { display:grid; gap:9px; margin-top:25px; }
.resource-item { padding:14px; display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; color:var(--ink); background:#fff; border:1px solid rgba(16,59,63,.1); transition:.2s ease; }
.resource-item:hover { border-color:var(--green); transform:translateY(-1px); }
.resource-icon { display:grid; place-items:center; width:32px; height:32px; color:var(--green); background:#eaf3e9; font-size:9px; font-weight:800; }
.resource-item strong { display:block; font-size:10px; line-height:1.5; }
.resource-item small { color:var(--muted); font-size:8px; }
.resource-item b { color:var(--green); font-size:15px; }
.resource-empty { padding:28px 12px; color:var(--muted); text-align:center; background:rgba(255,255,255,.55); border:1px dashed rgba(16,59,63,.18); font-size:10px; line-height:1.7; }
.resource-notice { display:grid; grid-template-columns:24px 1fr; gap:8px; margin-top:24px; padding-top:18px; border-top:1px solid rgba(16,59,63,.12); }
.resource-notice span { display:grid; place-items:center; width:20px; height:20px; color:#806f14; background:var(--lime); border-radius:50%; font-size:10px; font-weight:800; }
.resource-notice p { margin:1px 0 0; color:#8a8370; font-size:9px; line-height:1.65; }
.classroom-footer { min-height:130px; padding:35px 5vw; display:flex; align-items:center; justify-content:space-between; gap:30px; color:#fff; background:#032f30; }
.classroom-footer p { color:rgba(255,255,255,.5); font-size:11px; }
.classroom-footer > a:last-child { color:var(--lime); font-size:11px; }
.notice-dialog { width:min(590px,92vw); padding:0; border:0; color:var(--ink); background:#f8f5ed; box-shadow:0 30px 100px rgba(0,0,0,.35); }
.notice-dialog::backdrop { background:rgba(0,24,21,.78); backdrop-filter:blur(5px); }
.notice-dialog form { padding:38px; position:relative; }
.notice-dialog h2 { margin:9px 0 22px; font-size:28px; }
.notice-dialog p { color:var(--muted); font-size:12px; line-height:1.9; }
.notice-close { position:absolute; top:18px; right:20px; border:0; color:var(--muted); background:none; font-size:25px; cursor:pointer; }
.notice-confirm { margin-top:12px; padding:12px 22px; border:0; color:#fff; background:var(--green); cursor:pointer; }

@media(max-width:1180px){
  .classroom-entry{grid-template-columns:1fr 440px;gap:45px;padding-left:4vw;padding-right:4vw}.entry-copy h1{font-size:56px}.entry-features span{min-width:140px}.course-workspace{grid-template-columns:230px minmax(0,1fr)}.resource-panel{grid-column:2;border-left:0;border-top:1px solid rgba(16,59,63,.12)}.resource-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .classroom-entry{grid-template-columns:1fr;padding-top:125px}.entry-copy{padding-top:30px}.auth-card{justify-self:center;max-width:620px}.student-welcome{align-items:start}.course-workspace{grid-template-columns:1fr}.course-list{display:grid;grid-template-columns:repeat(3,1fr)}.course-item{min-height:105px}.lesson-stage{grid-column:1}.resource-panel{grid-column:1}.progress-summary{width:260px}.classroom-footer{align-items:flex-start;flex-wrap:wrap}
}
@media(max-width:640px){
  .classroom-entry{padding:108px 18px 55px}.entry-copy h1{font-size:43px}.entry-lead{font-size:13px}.entry-features{display:grid;grid-template-columns:1fr 1fr}.entry-features span{min-width:0}.auth-card{padding:27px 21px}.auth-grid{grid-template-columns:1fr}.auth-help a{float:none;display:block;margin-top:7px}.student-shell{padding:104px 16px 45px}.student-welcome{display:grid}.student-account{width:100%}.redeem-panel{grid-template-columns:1fr;margin:35px auto 80px;padding:25px;gap:25px}.redeem-panel form{grid-template-columns:1fr}.redeem-panel button{height:46px}.course-progress-head{display:grid}.progress-summary{width:100%;text-align:left}.course-list{grid-template-columns:1fr 1fr}.course-item{min-height:94px}.lesson-stage{padding:15px}.lesson-copy{display:grid}.lesson-copy button{justify-self:start}.resource-panel{padding:22px 15px}.resource-list{grid-template-columns:1fr}.classroom-footer{display:grid;padding:30px 20px}.notice-dialog form{padding:30px 23px}
}