/* ================= 主题变量 =================
   设计语言融合自 C:\website \u8bfe\u8054\uff08Kelian\uff09\uff1a\u7eb8\u8272\u5e95 + \u58a8\u9ed1\u5b57\u5f62 + \u6a59\u8272\u5f3a\u8c03\u8272\u3002
   \u4e24\u5957\u4e3b\u9898\u5171\u7528\u540c\u4e00\u5957\u8bed\u4e49\u53d8\u91cf\uff0c\u4ec5\u8272\u503c\u4e0d\u540c\u3002 */

/* \u54c1\u724c\u8272\u677f\uff08\u4e0e\u4e3b\u9898\u65e0\u5173\uff09 */
:root{
  --kelian-paper:#f5f4ef;   /* \u8bfe\u8054\u7eb8\u8272 */
  --kelian-ink:#171717;     /* \u8bfe\u8054\u58a8\u9ed1 */
  --kelian-orange:#ff6338;  /* \u8bfe\u8054\u6a59 */
  --kelian-blue:#b6d9f5;
  --kelian-lime:#d4e860;
  --kelian-line:#d8d6cf;
  --kelian-display:'Manrope','Noto Sans SC',-apple-system,'Segoe UI',sans-serif;
}

/* ---------- \u6697\u8272\u4e3b\u9898\uff08\u58a8\u9ed1\u5e95\uff0c\u6a59\u8272\u4f5c\u4e3a\u5f3a\u8c03\u8272\uff09 ---------- */
:root, [data-theme="dark"]{
  /* \u57fa\u7840 */
  --bg:#0e0e0e; --bg2:#151513; --card:#1a1a17; --card2:#20201c;
  --line:#2e2e28; --txt:#f2f0e9; --mut:#a09c8f;
  /* \u4e3b\u8272\uff1a\u6a59 = \u5f3a\u8c03\u8272\uff0c\u4eae\u84dd = \u6b21\u5f3a\u8c03\u8272 */
  --acc:#ff6338; --acc2:#b6d9f5; --acc-deep:#e04f26;
  --ok:#9ecb4a; --ok-deep:#7aab34; --ok-deep2:#5f8f2c;
  --warn:#e8b93f; --warn-deep:#c99a1f;
  --bad:#e8614c; --bad-deep:#c9432f;
  --gold:#e0c04a;
  /* \u53cd\u8272\u6587\u5b57 */
  --on-acc:#14100e; --on-acc2:#ffffff; --on-ok:#14170c; --on-warn:#1e1704;
  /* \u8868\u9762 */
  --surf:#171714; --surf2:#1e1e1a; --surf3:#20201b; --surf4:#141412; --surf5:#1b1b17;
  --surf-hover:#26261f; --btn-bg:#22221d; --input-bg:#131310;
  --code-bg:#1f1f1a; --star-off:#4a4a40;
  /* \u6e10\u53d8 */
  --grad1:#3a2418; --grad2:#1b2830; --grad3:#2a2a22;
  /* chrome */
  --topbar-bg:rgba(14,14,14,.9); --footer-bg:#0a0a0a; --mask-bg:rgba(0,0,0,.74);
  /* chip */
  --chip-acc-line:#5c3a26; --chip-acc-bg:#2a1a12;
  --chip-ok-line:#3c4a20; --chip-ok-bg:#1b2110;
  --chip-warn-line:#55441a; --chip-warn-bg:#241d0c;
  --chip-bad-line:#5a2a22; --chip-bad-bg:#26120e;
  /* \u5149\u6655 */
  --glow1:#2a1a12; --glow2:#1a242c;
  /* \u5c3a\u5bf8 */
  --r:10px; --sh:0 12px 34px var(--sh-c); --sh-c:rgba(0,0,0,.5);
  --radius:10px; --radius-lg:16px;
  color-scheme:dark;
}

/* ---------- \u4eae\u8272\u4e3b\u9898\uff1a\u76f4\u63a5\u91c7\u7528\u8bfe\u8054\u7eb8\u8272\u7cfb\uff08#f5f4ef / #171717 / #ff6338\uff09 ---------- */
[data-theme="light"]{
  --bg:#f5f4ef; --bg2:#efeee8; --card:#ffffff; --card2:#fbfaf6;
  --line:#d8d6cf; --txt:#171717; --mut:#6e6a5f;
  --acc:#ff6338; --acc2:#1f6f9c; --acc-deep:#e04f26;
  --ok:#4f7a1f; --ok-deep:#3d6114; --ok-deep2:#31500f;
  --warn:#a9761a; --warn-deep:#8a5e10;
  --bad:#c9432f; --bad-deep:#a8341f;
  --gold:#b8912a;
  --on-acc:#ffffff; --on-acc2:#ffffff; --on-ok:#ffffff; --on-warn:#ffffff;
  --surf:#ffffff; --surf2:#fbfaf6; --surf3:#f7f6f1; --surf4:#f2f1eb;
  --surf5:#eeede6; --surf-hover:#e9e8e0; --btn-bg:#ffffff; --input-bg:#ffffff;
  --code-bg:#eeede6; --star-off:#cfcdc4;
  --grad1:#ffe2d8; --grad2:#ddeefb; --grad3:#eef2d4;
  --topbar-bg:rgba(245,244,239,.92); --footer-bg:#ecebe4; --mask-bg:rgba(23,23,23,.45);
  --chip-acc-line:#f3c4b2; --chip-acc-bg:#ffeee7;
  --chip-ok-line:#cfe0a8; --chip-ok-bg:#f0f6dd;
  --chip-warn-line:#e8d3a2; --chip-warn-bg:#faf3e0;
  --chip-bad-line:#f0bcae; --chip-bad-bg:#fdeae5;
  --sh-c:rgba(23,23,23,.12);
  --glow1:#ffe2d8; --glow2:#ddeefb;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 700px at 15% -10%, var(--glow1) 0%, transparent 60%),
             radial-gradient(900px 600px at 110% 10%, var(--glow2) 0%, transparent 55%),
             var(--bg);
  color:var(--txt); font-family:var(--kelian-display);
  min-height:100vh; font-size:14px; letter-spacing:-.01em;
}
a{color:var(--acc2);text-decoration:none}
code{background:var(--code-bg);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:12px}
.hidden{display:none !important}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:460px;background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--sh)}
.brand-lg{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.logo-lg{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:24px;font-weight:800;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc)}
.brand-lg h1{margin:0;font-size:22px}
.brand-lg p{margin:2px 0 0;color:var(--mut);font-size:12px}
.tabs{display:flex;gap:8px;margin-bottom:16px}
.tab{flex:1;padding:9px;border-radius:10px;border:1px solid var(--line);background:var(--surf);color:var(--mut);cursor:pointer}
.tab.active{background:linear-gradient(135deg,var(--acc),var(--acc-deep));color:var(--on-acc2);border-color:transparent}
.login-form{display:grid;gap:10px}
.login-hint{margin-top:16px;font-size:12px;color:var(--mut);border-top:1px dashed var(--line);padding-top:12px}
.login-hint ul{margin:6px 0 0;padding-left:18px;line-height:1.9}
.login-hint b{color:var(--txt)}

/* ---------- shell ---------- */
.shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:10px 18px;background:var(--topbar-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:10px}
.logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:15px;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--on-acc)}
.brand{font-weight:700;letter-spacing:.5px}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{padding:7px 12px;border-radius:9px;color:var(--mut);border:1px solid transparent}
.nav a:hover{background:var(--surf2);color:var(--txt)}
.nav a.on{background:linear-gradient(135deg,var(--acc),var(--acc-deep));color:var(--on-acc2)}
.who{display:flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surf)}
.who span{display:flex;flex-direction:column;line-height:1.2}
.who b{font-size:12.5px}
.who i{font-style:normal;font-size:10.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.who{flex:0 1 auto;min-width:0}
.avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:linear-gradient(135deg,var(--acc2),var(--acc));color:var(--on-acc)}
.app{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:20px 18px 40px}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);background:var(--footer-bg);padding:20px 18px 30px}
.footer-in{max-width:1280px;margin:0 auto;display:grid;gap:14px}
.footer h4{margin:0 0 6px;font-size:13px;color:var(--txt)}
.footer p{margin:0;color:var(--mut);font-size:12px;line-height:1.8}
.credits{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.credit{border:1px solid var(--line);background:var(--surf4);border-radius:12px;padding:10px 12px}
.credit b{display:block;font-size:12.5px}
.credit span{display:block;color:var(--mut);font-size:11px;margin-top:2px;line-height:1.6}
.credit a{font-size:11px}

/* ---------- generic ---------- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.page-head h2{margin:0;font-size:20px}
.page-head p{margin:4px 0 0;color:var(--mut);font-size:12.5px}
.card{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card + .card{margin-top:14px}
.course-locked{border:2px solid var(--acc);box-shadow:0 0 0 3px var(--chip-acc-bg),0 10px 26px var(--sh)}
.course-lock-note{margin-top:10px;padding:10px 12px;color:var(--acc2);background:var(--chip-acc-bg);border-left:3px solid var(--acc);font-size:12px;font-weight:700}
.card h3{margin:0 0 10px;font-size:15px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.muted{color:var(--mut)}
.small{font-size:12px}
hr.sep{border:0;border-top:1px dashed var(--line);margin:12px 0}
.empty{padding:26px;text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:12px}

.btn{border:1px solid var(--line);background:var(--btn-bg);color:var(--txt);padding:8px 14px;border-radius:10px;cursor:pointer;font-size:13px}
.btn:hover{border-color:var(--acc)}
.btn.primary{background:linear-gradient(135deg,var(--acc),var(--acc-deep));color:var(--on-acc2);border-color:transparent}
.btn.ok{background:linear-gradient(137deg,var(--ok-deep),var(--ok-deep2));color:var(--on-ok);border-color:transparent;font-weight:600}
.btn.warn{background:linear-gradient(135deg,var(--warn),var(--warn-deep));color:var(--on-warn);border-color:transparent;font-weight:600}
.btn.bad{background:linear-gradient(135deg,var(--bad),var(--bad-deep));color:var(--on-acc2);border-color:transparent}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 10px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.xs{padding:3px 8px;font-size:11px;border-radius:8px}

.field{display:grid;gap:5px}
label{font-size:12px;color:var(--mut)}
input,select,textarea{background:var(--input-bg);border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:9px 11px;font-size:13px;font-family:inherit;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc)}
textarea{min-height:80px;resize:vertical}
label .req{color:var(--bad)}

.badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--bad);color:var(--on-acc2);font-size:10px;font-weight:700;vertical-align:middle}
.badge[hidden]{display:none}
.chip{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;border:1px solid var(--line);background:var(--surf);color:var(--mut)}
.chip.acc{color:var(--acc2);border-color:var(--chip-acc-line);background:var(--chip-acc-bg)}
.chip.ok{color:var(--ok);border-color:var(--chip-ok-line);background:var(--chip-ok-bg)}
.chip.warn{color:var(--warn);border-color:var(--chip-warn-line);background:var(--chip-warn-bg)}
.chip.bad{color:var(--bad);border-color:var(--chip-bad-line);background:var(--chip-bad-bg)}

.stat{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:14px}
.stat b{display:block;font-size:24px;line-height:1.2}
.stat span{color:var(--mut);font-size:12px;display:block;margin-top:2px}
.stat i{font-style:normal;font-size:11px;color:var(--acc2);display:block;margin-top:3px}
.points-balance{border-color:var(--acc);box-shadow:0 0 0 3px var(--chip-acc-bg)}

/* ---------- teacher card ---------- */
.tcard{display:grid;grid-template-columns:96px 1fr;gap:14px;background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r);padding:16px;transition:.15s}
.tcard:hover{border-color:var(--acc);transform:translateY(-2px)}
.tcard .pic{width:96px;height:96px;border-radius:14px;display:grid;place-items:center;font-size:34px;
  background:linear-gradient(135deg,var(--grad1),var(--grad2));border:1px solid var(--line)}
.tcard .meta{display:flex;flex-direction:column;gap:6px}
.tcard h3{margin:0;font-size:15px}
.tcard .tags{display:flex;gap:6px;flex-wrap:wrap}
.stars{color:var(--gold);letter-spacing:1px;font-size:13px}
.rate-n{font-size:11px;color:var(--mut)}

/* ---------- table ---------- */
table.tb{width:100%;border-collapse:collapse;font-size:12.5px}
table.tb th,table.tb td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.tb th{color:var(--mut);font-weight:600;font-size:11.5px;background:var(--surf3)}
table.tb tr:hover td{background:var(--surf-hover)}
table.tb td.num{text-align:right}
.tw{overflow-x:auto}

/* ---------- visual schedule slots ---------- */
.schedule-course-picker{padding:12px 16px}
.schedule-course-picker .field{margin:0;max-width:none}
.schedule-course-picker label{display:block;margin-bottom:6px}
.schedule-course-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.schedule-course-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.slot-board-head{display:flex;align-items:center;gap:8px;padding-top:4px}
.slot-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.slot-card{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:start;border:1px solid var(--line);background:var(--surf3);padding:13px 14px;border-radius:var(--radius);transition:.12s;min-height:128px}
.slot-card:hover{border-color:var(--acc);background:var(--surf-hover)}
.slot-card.is-booked{border-left:4px solid var(--warn)}
.slot-index{font-family:var(--kelian-display);font-size:20px;font-weight:800;color:var(--acc2)}
.slot-date{font-size:11px;color:var(--mut);font-weight:700}
.slot-time{font-size:18px;font-weight:800;letter-spacing:.02em;margin:2px 0 5px}
.slot-time span{color:var(--mut);font-weight:400;padding:0 3px}
.slot-meta,.slot-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.slot-actions{grid-column:2;justify-content:flex-start;margin-top:8px}
.slot-form-hero{display:flex;align-items:center;gap:11px;padding:12px;background:var(--chip-acc-bg);border-left:3px solid var(--acc);margin-bottom:12px}
.slot-form-hero p{margin:4px 0 0}
.slot-form-icon{font-size:22px;font-weight:800;color:var(--acc2)}
.copy-source{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:1px dashed var(--chip-acc-line);background:var(--surf3);font-size:12px;margin-bottom:12px}
.slot-input-row{align-items:end}
.slot-arrow{font-size:18px;color:var(--mut);padding-bottom:9px}
.slot-preview{padding:8px 10px;background:var(--surf3);color:var(--mut);font-size:12px;margin:10px 0}
.slot-preview b{color:var(--txt)}
@media (max-width:620px){.slot-board{grid-template-columns:1fr}.slot-card{grid-template-columns:32px 1fr}.slot-time{font-size:16px}.slot-input-row{display:grid;grid-template-columns:1fr}.slot-arrow{display:none}}

/* ---------- modal ---------- */
.mask{position:fixed;inset:0;background:var(--mask-bg);backdrop-filter:blur(3px);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{width:100%;max-width:560px;max-height:88vh;overflow:auto;background:linear-gradient(180deg,var(--surf2),var(--surf));
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);padding:20px}
.modal.wide{max-width:820px}
.modal h3{margin:0 0 12px;font-size:17px}
.modal .mfoot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.x{position:sticky;top:0;float:right;background:none;border:0;color:var(--mut);font-size:20px;cursor:pointer;line-height:1}
.x:hover{color:var(--bad)}

/* ---------- toast ---------- */
.toast-wrap{position:fixed;right:16px;bottom:16px;z-index:90;display:grid;gap:8px}
.toast{background:var(--surf2);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:12px;padding:10px 14px;
  font-size:12.5px;box-shadow:var(--sh);animation:slide .2s ease;max-width:340px}
.toast.ok{border-left-color:var(--ok)}
.toast.bad{border-left-color:var(--bad)}
.toast.warn{border-left-color:var(--warn)}
@keyframes slide{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}

/* ---------- review ---------- */
.star-pick{display:flex;gap:4px}
.star-pick button{background:none;border:0;font-size:22px;color:var(--star-off);cursor:pointer;padding:0;line-height:1}
.star-pick button.on{color:var(--gold)}
.review{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surf3);display:grid;gap:6px}
.review .rhead{display:flex;align-items:center;gap:8px}
.review .rhead b{font-size:12.5px}

/* ---------- schedule ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .dow{text-align:center;color:var(--mut);font-size:11px;padding:4px}
.cal .cell{min-height:64px;border:1px solid var(--line);border-radius:10px;padding:5px;background:var(--surf5);font-size:11px}
.cal .cell.out{opacity:.3}
.cal .cell.today{border-color:var(--acc2)}
.cal .cell b{font-size:10.5px;color:var(--mut)}
.cal .cell .ev{background:linear-gradient(135deg,var(--acc),var(--acc-deep));color:var(--on-acc2);border-radius:7px;padding:2px 5px;margin-top:3px;font-size:10.5px}

/* ---------- bounty ---------- */
.bounty{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:linear-gradient(180deg,var(--card),var(--bg2))}
.bounty h4{margin:0 0 6px;font-size:14px}
.bounty .desc{color:var(--mut);font-size:12px;line-height:1.7}
.bounty .foot{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}

/* ---------- profile ---------- */
.profile-head{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center}
.profile-head .pic{width:120px;height:120px;border-radius:18px;display:grid;place-items:center;font-size:46px;
  background:linear-gradient(135deg,var(--grad1),var(--grad2));border:1px solid var(--line)}
.kv{display:grid;grid-template-columns:86px 1fr;gap:6px 12px;font-size:12.5px}
.kv b{color:var(--mut);font-weight:500}
.mono{font-family:Consolas,Monaco,monospace}


/* ---------- language / theme toggles ---------- */
.toggles{display:inline-flex;align-items:center;gap:6px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surf)}
.seg button{white-space:nowrap;border:0;background:transparent;color:var(--mut);padding:5px 11px;cursor:pointer;font-size:12px;
  font-family:inherit;line-height:1.4;transition:.12s}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--txt)}
.seg button[aria-pressed="true"]{background:linear-gradient(135deg,var(--acc),var(--acc-deep));color:var(--on-acc2);font-weight:600}
.icon-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surf);
  color:var(--txt);cursor:pointer;display:grid;place-items:center;font-size:15px;padding:0;line-height:1;transition:.12s}
.icon-btn:hover{border-color:var(--acc);color:var(--acc)}
.topbar .toggles{margin-left:2px}
.login-toggles{display:flex;justify-content:flex-end;gap:8px;margin-bottom:14px}
@media (max-width:820px){
  .topbar .seg button{padding:5px 8px;font-size:11px}
}

@media (max-width:820px){
  .tcard{grid-template-columns:1fr}
  .profile-head{grid-template-columns:1fr}
  .brand,.who span{display:none}
}

/* ================= \u8bfe\u8054\u89c6\u89c9\u878d\u5408\u5c42 =================
   \u4e0a\u9762\u4ee5 C:\website \u8bfe\u8054\u7684\u89c6\u89c9\u8bed\u8a00\u4e3a\u57fa\u7840\uff0c\u4ee5\u4e0b\u4e3a\u878d\u5408\u540e\u7684\u5fae\u8c03\u3002
   \u4fdd\u7559\u4e0a\u9762\u6240\u6709\u7c7b\u540d\u4e0e\u4e1a\u52a1 DOM \u7ed3\u6784\uff0c\u4e0d\u5f71\u54cd e2e \u65ad\u8a00\u3002 */

/* \u8bfe\u8054\u7248\u6392\u7248\uff1a\u8d85\u5927\u7d27\u5b57\u8ddd\u6807\u9898 */
.page-head h2{font-family:var(--kelian-display);font-weight:800;letter-spacing:-.045em;font-size:26px;line-height:1.05}
.page-head p{font-size:12.5px;line-height:1.7;max-width:70ch}
.card h3,.bounty h4{font-weight:800;letter-spacing:-.03em}
.brand-lg h1{font-weight:800;letter-spacing:-.04em;font-size:24px}
.brand{font-weight:800;letter-spacing:-.02em;font-size:15px}
h1,h2,h3,h4{font-weight:800}

/* \u8bfe\u8054\u7248\u5f62\u72b6\uff1a\u51e0\u4f55\u5316\u7684\u5706\u89d2\u53d8\u66f4\u5c0f\u66f4\u8102\u5bc6 */
.login-card{border-radius:6px;box-shadow:0 24px 60px var(--sh-c);background:var(--card);border:1px solid var(--line)}
.card,.bounty,.modal,.credit,.stat{border-radius:var(--radius)}
.modal{border-radius:6px}

/* \u8bfe\u8054\u7248\u6309\u94ae\uff1a\u9ed1\u5e95\u767d\u5b57\uff0c\u65e0\u5706\u89d2\u3001\u65e0\u6e10\u53d8 */
.btn{border-radius:4px;border:1px solid var(--line);background:var(--btn-bg);color:var(--txt);
  padding:9px 16px;font-size:12.5px;font-weight:700;letter-spacing:.01em;transition:.12s}
.btn:hover{border-color:var(--txt)}
.btn.primary{background:var(--ink-btn,var(--txt));color:var(--paper-btn,#fff);border-color:transparent}
[data-theme="light"] .btn.primary{background:#171717;color:#fff}
[data-theme="dark"]  .btn.primary{background:#ff6338;color:#14100e;border-color:transparent}
.btn.ok{background:var(--ok-deep);color:#fff;border-color:transparent}
.btn.warn{background:var(--warn-deep);color:#fff;border-color:transparent}
.btn.bad{background:var(--bad);color:#fff;border-color:transparent}
.btn.sm{padding:6px 11px;font-size:11.5px}
.btn.xs{padding:4px 9px;font-size:11px;border-radius:3px}
.btn.primary:hover{filter:brightness(1.08);border-color:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* \u8bfe\u8054\u7248 tab\uff1a\u4e0b\u5212\u7ebf\u5f0f\u9009\u4e2d\uff0c\u975e\u56fa\u8272\u80f6\u56ca */
.tab{border-radius:0;background:transparent;border:0;border-bottom:2px solid var(--line);
  padding:10px 4px;color:var(--mut);font-weight:700;font-size:13px;cursor:pointer;transition:.12s}
.tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-bottom:18px}
.tab:hover{color:var(--txt)}
.tab.active{background:transparent;color:var(--txt);border-bottom-color:var(--acc);font-weight:800}

/* \u8bfe\u8054\u7248\u8868\u5355\uff1a\u65e0\u5706\u89d2\u3001\u5e95\u8272\u7eb8\u611f */
input,select,textarea{border-radius:4px;border:1px solid var(--line);background:var(--input-bg);
  padding:10px 12px;font-size:13px;font-family:inherit;transition:.12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--chip-acc-bg)}
label{font-weight:600;font-size:11.5px;letter-spacing:.02em}
.field{gap:6px}
.seg{border-radius:4px}
.seg button[aria-pressed="true"]{background:var(--txt);color:var(--bg);font-weight:800}
.icon-btn{border-radius:4px}
.icon-btn:hover{border-color:var(--txt);color:var(--txt)}

/* \u8bfe\u8054\u7248\u9876\u680f\uff1a\u7c98\u4f4f\u7684\u7eb8\u5f20\u5e95\u680f + \u7cbe\u786e\u5206\u9694\u7ebf */
.topbar{background:var(--topbar-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  padding:0 26px;height:66px;gap:20px}
.nav{gap:0}
.nav a{border-radius:3px;padding:6px 13px;font-weight:700;font-size:13px;color:var(--mut)}
.nav a:hover{background:transparent;color:var(--txt);box-shadow:inset 0 -2px 0 var(--line)}
.nav a.on{background:transparent;color:var(--txt);box-shadow:inset 0 -3px 0 var(--acc);font-weight:800}
.logo{border-radius:3px;width:32px;height:32px;background:var(--txt);color:var(--bg);font-weight:800}
[data-theme="dark"] .logo{background:#ff6338;color:#14100e}
.who{border-radius:3px;background:transparent;border:1px solid var(--line)}

/* \u8bfe\u8054\u7248 card\uff1a\u5e73\u9762\u8272\u5757 + \u7cbe\u786e\u8fb9\u7ebf\uff0c\u65e0\u6e10\u53d8 */
.card,.bounty{background:var(--card);border:1px solid var(--line)}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.stat b{font-family:var(--kelian-display);font-weight:800;letter-spacing:-.05em;font-size:34px;line-height:1}
.stat span{font-weight:700;color:var(--txt);opacity:.75}
.stat i{font-weight:600}

/* chip \u4fdd\u7559\u4f46\u53d8\u4e3a\u8bfe\u8054\u5f0f\u65b9\u5f62\u6807\u7b7e */
.chip{border-radius:2px;font-weight:700;font-size:11px;letter-spacing:.02em}

/* \u8868\u683c\uff1a\u53bb\u6389\u8868\u5934\u80cc\u666f\uff0c\u53ea\u7559\u5206\u9694\u7ebf */
table.tb th{background:transparent;border-bottom:1px solid var(--txt);color:var(--txt);
  font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
table.tb td{border-bottom:1px solid var(--line)}
table.tb tr:hover td{background:var(--surf-hover)}

/* \u5f39\u7a97\uff1a\u8bfe\u8054\u5f0f\u96f6\u5706\u89d2\u5f39\u7a97 */
.mask{backdrop-filter:blur(4px)}
.modal{background:var(--card);box-shadow:0 30px 80px var(--sh-c)}
.toast{border-radius:3px;background:var(--card);box-shadow:0 10px 30px var(--sh-c)}
.empty{border-radius:3px}

/* \u8bfe\u8054\u7248\u5f00\u5b55\u5f0f\u5206\u9694\u7ebf\uff08\u53cc\u4e3b\u9898\u90fd\u4e0d\u8fc7\u5ea6\u6697\u6d3e\uff09 */
.footer{border-top:1px solid var(--line);background:var(--footer-bg)}
.credit{border-radius:3px;background:var(--surf4)}


/* =========================================================================
   课联风格落地页（views-home.js）
   结构融合自 C:\website 课联落地页；配色用本项目主题令牌，双主题均可读。
   所有选择器均以 .lp- 前缀，与业务视图类名无冲突，不影响 e2e 断言。
   ========================================================================= */

/* 落地页需要整幅出血，因此让 .app 在该路由下取消最大宽度与内边距 */
body[data-view="home"] .app{max-width:none;padding:0;margin:0}

.lp-hero{padding:72px 40px 60px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.lp-hero-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:40px 44px;align-items:center}
.lp-eyebrow{font-family:var(--kelian-display);font-size:11px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mut);margin:0 0 18px}
.lp-hero h1{font-family:var(--kelian-display);font-size:clamp(38px,4.6vw,66px);line-height:1.02;
  letter-spacing:-.045em;font-weight:800;margin:0 0 24px}
.lp-hero h1 em{font-style:normal;color:var(--acc)}
.lp-hero-text{font-size:15px;line-height:1.8;color:var(--mut);max-width:40ch;margin:0 0 30px}
.lp-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}

.lp-btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--txt);border-radius:3px;
  padding:14px 24px;font-family:var(--kelian-display);font-size:14px;font-weight:800;letter-spacing:-.01em;
  cursor:pointer;transition:.14s;background:transparent;color:var(--txt)}
.lp-btn span{font-size:13px;opacity:.7}
.lp-btn-dark{background:var(--txt);color:var(--bg);border-color:var(--txt)}
.lp-btn-dark:hover{filter:brightness(1.12);transform:translateY(-1px)}
.lp-btn-light:hover{background:var(--surf-hover)}
html[data-theme="dark"] #shell .lp-btn-dark{background:#ff6338;color:#14100e;border-color:#ff6338}

.lp-stats{display:flex;gap:44px;flex-wrap:wrap;margin:0;padding-top:28px;border-top:1px solid var(--line)}
.lp-stats div{display:block}
.lp-stats dt{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--mut);text-transform:uppercase;margin-bottom:8px}
.lp-stats dd{margin:0;font-family:var(--kelian-display);font-size:38px;line-height:1;font-weight:800;letter-spacing:-.05em}

/* hero 插画：几何化 blob 形状 + 悬浮卡片 */
.lp-hero-art{position:relative;min-height:380px}
.lp-shape{position:absolute;display:block}
.lp-shape-a{width:250px;height:250px;left:14%;top:6%;
  background:var(--kelian-orange);
  border-radius:58% 42% 47% 53%/44% 56% 44% 56%}
html[data-theme="dark"] #shell .lp-shape-a{opacity:.9}
.lp-shape-b{width:170px;height:170px;right:6%;bottom:14%;
  background:var(--acc2);border-radius:44% 56% 62% 38%/52% 41% 59% 48%}
html[data-theme="dark"] #shell .lp-shape-b{background:#2b4257}
.lp-shape-c{width:110px;height:110px;right:30%;top:0;
  background:var(--kelian-lime);border-radius:52% 48% 38% 62%/58% 42% 58% 42%}
html[data-theme="dark"] #shell .lp-shape-c{background:#4d5c1f}

.lp-art-card{position:absolute;left:0;top:34%;display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:4px;padding:12px 14px;
  box-shadow:0 18px 44px var(--sh-c);min-width:250px;z-index:2}
.lp-art-card b{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.02em}
.lp-art-card small{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
.lp-art-card strong{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  color:var(--acc);text-transform:uppercase;white-space:nowrap}
.lp-art-second{left:auto;right:0;top:auto;bottom:4%}

.lp-avatar{width:40px;height:40px;border-radius:3px;display:grid;place-items:center;flex:0 0 40px;
  font-size:15px;font-weight:800}
.lp-avatar-o{background:var(--kelian-orange);color:#14100e}
.lp-avatar-b{background:var(--acc2);color:#10161c}
html[data-theme="dark"] #shell .lp-avatar-b{background:#2b4257;color:#dce9f5}

/* 三个快捷入口 */
.lp-quick{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.lp-quick a{padding:34px 32px;border-right:1px solid var(--line);color:var(--txt);transition:.14s}
.lp-quick a:last-child{border-right:0}
.lp-quick a:hover{background:var(--surf-hover)}
.lp-qn{font-family:var(--kelian-display);font-size:11px;font-weight:800;letter-spacing:.16em;
  color:var(--acc);display:block;margin-bottom:16px}
.lp-quick h3{font-family:var(--kelian-display);font-size:22px;font-weight:800;letter-spacing:-.045em;margin:0 0 10px}
.lp-quick p{font-size:13px;line-height:1.7;color:var(--mut);margin:0 0 18px}
.lp-quick em{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.02em}

/* 通用区块头 */
.lp-section{padding:76px 40px;border-bottom:1px solid var(--line)}
.lp-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:36px}
.lp-section-head h2{font-family:var(--kelian-display);font-size:clamp(32px,4.4vw,58px);line-height:1;
  letter-spacing:-.06em;font-weight:800;margin:0}
.lp-textlink{font-family:var(--kelian-display);font-size:12.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--txt);border-bottom:2px solid var(--acc);padding-bottom:3px;white-space:nowrap}
.lp-textlink:hover{color:var(--acc)}

/* 课程大色块卡 */
.lp-course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-course{min-height:300px;display:flex;flex-direction:column;padding:24px;border-radius:4px;
  color:#14100e;transition:.16s;border:1px solid transparent}
.lp-course:hover{transform:translateY(-4px);box-shadow:0 22px 50px var(--sh-c)}
.lp-course .a-orange{background:var(--kelian-orange)}
.lp-course.a-orange{background:var(--kelian-orange);color:#14100e}
.lp-course.a-blue{background:var(--kelian-blue);color:#10161c}
.lp-course.a-lime{background:var(--kelian-lime);color:#1a1f07}
.lp-course.a-ink{background:var(--kelian-ink);color:#f5f4ef}
html[data-theme="dark"] #shell .lp-course.a-orange{background:#ff6338}
html[data-theme="dark"] #shell .lp-course.a-blue{background:#2b4257;color:#dce9f5}
html[data-theme="dark"] #shell .lp-course.a-lime{background:#4d5c1f;color:#eaf3c8}
html[data-theme="dark"] #shell .lp-course.a-ink{background:#232320;color:#f2f0e9}
.lp-course-tag{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:2px;background:rgba(20,16,14,.14);margin-bottom:auto}
.lp-course.a-ink .lp-course-tag{background:rgba(245,244,239,.16)}
.lp-course h3{font-family:var(--kelian-display);font-size:24px;line-height:1.15;font-weight:800;
  letter-spacing:-.045em;margin:20px 0 8px}
.lp-course .lp-course-meta{font-size:12.5px;opacity:.78;margin:0 0 18px}
.lp-course-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:14px;border-top:1px solid rgba(20,16,14,.2)}
.lp-course.a-ink .lp-course-bottom{border-top-color:rgba(245,244,239,.22)}
.lp-course-bottom .chip{background:transparent;border-color:currentColor;opacity:.85}
.lp-course-bottom b{font-family:var(--kelian-display);font-size:17px;font-weight:800;letter-spacing:-.03em}

/* 老师卡 */
.lp-teacher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-teacher{display:flex;gap:16px;padding:22px;background:var(--card);border:1px solid var(--line);
  border-radius:4px;color:var(--txt);transition:.16s}
.lp-teacher:hover{border-color:var(--txt);transform:translateY(-3px)}
.lp-tphoto{width:56px;height:56px;flex:0 0 56px;border-radius:3px;display:grid;place-items:center;
  font-size:22px;font-weight:800}
.lp-tphoto.a-orange{background:var(--kelian-orange);color:#14100e}
.lp-tphoto.a-blue{background:var(--kelian-blue);color:#10161c}
.lp-tphoto.a-lime{background:var(--kelian-lime);color:#1a1f07}
.lp-tphoto.a-ink{background:var(--kelian-ink);color:#f5f4ef}
html[data-theme="dark"] #shell .lp-tphoto.a-blue{background:#2b4257;color:#dce9f5}
html[data-theme="dark"] #shell .lp-tphoto.a-lime{background:#4d5c1f;color:#eaf3c8}
html[data-theme="dark"] #shell .lp-tphoto.a-ink{background:#232320;color:#f2f0e9}
.lp-teacher h3{font-family:var(--kelian-display);font-size:17px;font-weight:800;letter-spacing:-.035em;margin:0 0 4px}
.lp-teacher p{font-size:12px;color:var(--mut);margin:0 0 8px}
.lp-stars{display:flex;align-items:center;gap:8px;font-size:12px}
.lp-stars small{color:var(--mut);font-size:11px}
.lp-note{font-size:12px;color:var(--mut);margin:20px 0 0;line-height:1.7}
.lp-empty{padding:44px;text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:4px}

/* 悬赏 band */
.lp-band{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;
  padding:76px 40px;background:var(--kelian-ink);color:#f5f4ef;border-bottom:1px solid var(--line)}
html[data-theme="dark"] #shell .lp-band{background:#181815}
.lp-band .lp-eyebrow{color:rgba(245,244,239,.6)}
.lp-band h2{font-family:var(--kelian-display);font-size:clamp(30px,4vw,52px);line-height:1.05;
  letter-spacing:-.055em;font-weight:800;margin:0 0 16px}
.lp-band h2 em{font-style:normal;color:var(--kelian-orange)}
.lp-band p{font-size:14px;line-height:1.75;color:rgba(245,244,239,.72);margin:0;max-width:52ch}
.lp-band .lp-btn-dark{background:#f5f4ef;color:#171717;border-color:#f5f4ef}
html[data-theme="dark"] #shell .lp-band .lp-btn-dark{background:#ff6338;color:#14100e;border-color:#ff6338}

.lp-bounty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-bounty{display:flex;flex-direction:column;padding:22px;background:var(--card);border:1px solid var(--line);
  border-radius:4px;color:var(--txt);transition:.16s}
.lp-bounty:hover{border-color:var(--txt);transform:translateY(-3px)}
.lp-bounty .lp-course-tag{align-self:flex-start;background:var(--chip-acc-bg);border:1px solid var(--chip-acc-line);
  color:var(--acc);margin-bottom:16px}
.lp-bounty h3{font-family:var(--kelian-display);font-size:17px;font-weight:800;letter-spacing:-.035em;margin:0 0 8px}
.lp-bounty p{font-size:12.5px;line-height:1.7;color:var(--mut);margin:0 0 18px;flex:1}

/* 公告 */
.lp-notice-list{border-top:1px solid var(--txt)}
.lp-notice-list a{display:flex;align-items:center;gap:18px;padding:18px 4px;
  border-bottom:1px solid var(--line);color:var(--txt);transition:.14s}
.lp-notice-list a:hover{background:var(--surf-hover)}
.lp-notice-list span{font-family:var(--kelian-display);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  color:var(--mut);flex:0 0 110px}
.lp-notice-list b{flex:1;font-size:14px;font-weight:700;letter-spacing:-.02em}
.lp-notice-list i{font-style:normal;font-size:12px;color:var(--mut)}

/* 结尾 CTA */
.lp-contact{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;
  padding:76px 40px;background:var(--surf)}
.lp-contact h2{font-family:var(--kelian-display);font-size:clamp(32px,4.6vw,62px);line-height:1;
  letter-spacing:-.06em;font-weight:800;margin:0}
.lp-contact h2 em{font-style:normal;color:var(--acc)}
.lp-contact-actions p{font-size:13.5px;line-height:1.8;color:var(--mut);margin:0}

/* 响应式 */
@media (max-width:980px){
  .lp-hero-in{grid-template-columns:1fr;gap:32px}
  .lp-hero-art{min-height:320px}
  .lp-quick,.lp-course-grid,.lp-teacher-grid,.lp-bounty-grid{grid-template-columns:1fr}
  .lp-quick a{border-right:0;border-bottom:1px solid var(--line)}
  .lp-quick a:last-child{border-bottom:0}
  .lp-stats{gap:28px}
  .lp-stats dd{font-size:34px}
}
@media (max-width:640px){
  .lp-hero,.lp-section,.lp-band,.lp-contact{padding:48px 20px}
  .lp-stats dd{font-size:28px}
  .lp-notice-list a{flex-wrap:wrap;gap:8px}
  .lp-notice-list span{flex:1 0 100%}
}

/* =========================================================================
   公开首页外壳（融合老项目 C:\website 课联首页）
   - .site-header 毛玻璃纸色顶栏 + 右上角「注册 / 登录」
   - 落地页配色固定为课联纸色系，不随工作台主题变化（保持老项目原样）
   ========================================================================= */

/* 落地页沿用全局主题变量，同时保留课联的品牌强调色 */
#landing{
  background:var(--bg); color:var(--txt);
  min-height:100vh;
}

/* ---------- 顶栏 ---------- */
.site-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:26px;
  height:84px;padding:0 6vw;background:var(--topbar-bg);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line)}
.lp-brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--kelian-display);
  font-size:19px;font-weight:800;letter-spacing:-.035em;color:var(--txt)}
.brand-mark{width:31px;height:31px;border-radius:4px;background:var(--acc);color:var(--on-acc);
  display:grid;place-items:center;font-size:15px;font-weight:800}
.lp-nav{display:flex;align-items:center;gap:30px;margin-left:6px}
.lp-nav a{font-family:var(--kelian-display);font-size:13.5px;font-weight:600;color:var(--txt);
  opacity:.78;transition:.14s}
.lp-nav a:hover{opacity:1}
.lp-nav a::after{content:"";display:block;height:2px;width:0;background:var(--kelian-orange);transition:.16s}
.lp-nav a:hover::after{width:100%}
.lp-toggles{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.lp-nav-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:4px;
  border:1px solid var(--txt);background:var(--txt);color:var(--bg);
  font-family:var(--kelian-display);font-size:13px;font-weight:800;cursor:pointer;transition:.14s}
.lp-nav-cta span{color:var(--kelian-orange);font-size:12px}
.lp-nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(23,23,23,.18)}
.lp-menu-toggle{display:none;margin-left:auto;width:38px;height:38px;border:1px solid var(--line);
  border-radius:4px;background:transparent;cursor:pointer;padding:0}
.lp-menu-toggle span{display:block;width:16px;height:2px;background:var(--txt);margin:3px auto}

/* 落地页内容不再受工作台 .app 的宽度限制 */
#landing .lp-hero{padding:7vw 9vw 8vw;min-height:calc(100vh - 84px);display:flex;align-items:center;
  border-bottom:0}
#landing .lp-hero-in{width:100%;max-width:none}
#landing .lp-quick{margin:0 9vw}
#landing .lp-hero,#landing .lp-section,#landing .lp-band,#landing .lp-contact{padding-left:9vw;padding-right:9vw}
#landing .lp-hero{padding-left:9vw;padding-right:9vw}
#landing .lp-section-head h2{font-size:clamp(38px,5vw,70px)}
#landing .lp-course h3{font-size:clamp(27px,3vw,43px)}
#landing .lp-course{min-height:330px}
#landing .lp-eyebrow{letter-spacing:.2em}
#landing .lp-hero h1{font-size:clamp(56px,8.4vw,132px);line-height:.92;letter-spacing:-.07em;margin:0 0 28px}
#landing .lp-hero-text{font-size:16.5px;max-width:44ch}
#landing .lp-btn{padding:16px 20px;font-size:14px}
#landing .lp-shape-a{background:var(--kelian-orange)}
#landing .lp-shape-b{background:var(--kelian-blue)}
#landing .lp-shape-c{background:var(--kelian-lime)}
#landing .lp-avatar-b{background:var(--kelian-blue);color:#10161c}
#landing .lp-art-card,#landing .lp-teacher,#landing .lp-bounty{background:var(--card)}
#landing .lp-footer{border-top:1px solid var(--line);background:var(--footer-bg)}
.lp-footer .footer-in{max-width:none;padding:0 9vw}

@media (max-width:900px){
  .site-header{height:66px;padding:0 20px;gap:12px}
  .lp-menu-toggle{display:block}
  .lp-nav{position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--surf);border-bottom:1px solid var(--line);padding:6px 20px 12px;display:none}
  .lp-nav.open{display:flex}
  .lp-nav a{padding:11px 0;width:100%;border-bottom:1px solid var(--line)}
  .lp-toggles{margin-left:auto}
  #landing .lp-hero{padding:44px 20px 52px;min-height:0}
  #landing .lp-hero h1{font-size:clamp(40px,13vw,72px)}
  #landing .lp-quick{margin:0}
  #landing .lp-hero,#landing .lp-section,#landing .lp-band,#landing .lp-contact{padding-left:20px;padding-right:20px}
  #landing .lp-hero-art{transform:none}
}

/* =========================================================================
   登录 / 注册弹窗（首页右上角点击「注册 / 登录」触发）
   ========================================================================= */
body.modal-open{overflow:hidden}
.login-wrap{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:24px}
.login-wrap.hidden{display:none !important}
.login-mask{position:absolute;inset:0;background:rgba(23,23,23,.46);backdrop-filter:blur(4px)}
.login-wrap .login-card{position:relative;z-index:1;max-height:calc(100vh - 48px);overflow:auto;
  animation:loginPop .18s ease}
@keyframes loginPop{from{transform:translateY(10px) scale(.985);opacity:0}to{transform:none;opacity:1}}
.login-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:4px;
  border:1px solid var(--line);background:var(--surf);color:var(--mut);cursor:pointer;font-size:14px;line-height:1;z-index:2}
.login-close:hover{color:var(--bad);border-color:var(--bad)}
/* 注册资质等业务弹窗必须叠在登录弹窗之上 */
#modalRoot{position:fixed;inset:0;z-index:80;pointer-events:none}
#modalRoot .mask{pointer-events:auto}
#toast{z-index:95}

/* 落地页 CTA 登录按钮 + 回到顶部 */
#landing .lp-contact-actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
#landing .lp-login-trigger{border-color:var(--txt);color:var(--txt)}
.lp-to-top{display:block;text-align:center;padding:14px 0 22px;background:#ecebe4;
  border-top:1px solid var(--kelian-line);font-family:var(--kelian-display);font-size:12px;
  font-weight:800;letter-spacing:.06em;color:var(--kelian-ink)}
.lp-to-top:hover{color:var(--kelian-orange)}

/* ---------- cross-device layout ---------- */
@media (max-width:980px){
  .topbar{align-items:flex-start;flex-wrap:wrap;padding:9px 14px;gap:8px}
  .topbar-left{flex:1 1 100%;min-width:0;flex-wrap:wrap}
  .nav{order:3;flex:1 1 100%;min-width:0;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:2px}
  .nav a{flex:0 0 auto;white-space:nowrap;min-height:36px;display:inline-flex;align-items:center}
  .topbar-right{width:100%;min-width:0;justify-content:space-between;gap:6px}
  .topbar-right>.toggles{margin-left:auto}
  .who{flex:0 0 auto}
  .who .avatar{display:grid}
  .brand,.who span:last-child{display:none}
  .tcard{grid-template-columns:72px minmax(0,1fr);gap:12px}
  .tcard .pic{width:72px;height:72px;font-size:28px}
  .profile-head{grid-template-columns:80px minmax(0,1fr);gap:14px}
  .profile-head .pic{width:80px;height:80px;font-size:34px}
  .lp-hero-in{grid-template-columns:minmax(0,1fr);gap:24px}
  .lp-hero-art{min-height:300px}
  .lp-quick,.lp-course-grid,.lp-teacher-grid,.lp-bounty-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  html,body{min-width:320px}
  .topbar{padding:8px 10px;gap:7px}
  .topbar-left{gap:7px}
  .nav{margin:0 -2px}
  .nav a{padding:6px 9px;font-size:12px}
  .topbar-right{gap:4px;flex-wrap:wrap}
  .topbar-right>.btn{min-height:36px;padding:6px 9px}
  .topbar-right>.toggles{margin-left:auto}
  .topbar .seg button{padding:6px 8px}
  .who{padding:3px;border:0;background:transparent}
  .app{padding:16px 12px 28px}
  .page-head{align-items:flex-start;gap:10px}
  .page-head h2{font-size:22px;line-height:1.15}
  .page-head>div:first-child{min-width:0;flex:1 1 100%}
  .page-head>.btn,.page-head>.row{max-width:100%}
  .grid{gap:10px}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{padding:12px}
  .row{min-width:0}
  .row>.field{min-width:0;flex:1 1 100% !important}
  .row>.spacer{display:none}
  .stat{padding:12px}
  .stat b{font-size:26px}
  .tcard{grid-template-columns:60px minmax(0,1fr);padding:12px;gap:10px}
  .tcard .pic{width:60px;height:60px;font-size:24px}
  .profile-head{grid-template-columns:64px minmax(0,1fr);gap:10px}
  .profile-head .pic{width:64px;height:64px;font-size:28px}
  .kv{grid-template-columns:minmax(64px,auto) minmax(0,1fr);gap:6px 8px;overflow-wrap:anywhere}
  .tw{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  table.tb{min-width:620px}
  .credits{grid-template-columns:minmax(0,1fr)}
  .credit{min-width:0;overflow-wrap:anywhere}
  .credit a{overflow-wrap:anywhere;word-break:break-word}
  .cal{gap:3px}
  .cal .cell{min-width:0;min-height:58px;padding:3px;overflow:hidden}
  .cal .cell .ev{overflow-wrap:anywhere;word-break:break-word;font-size:9.5px}
  .slot-board{grid-template-columns:minmax(0,1fr)}
  .slot-card{grid-template-columns:30px minmax(0,1fr);gap:8px;padding:11px;min-height:0}
  .slot-time{font-size:16px}
  .slot-actions{gap:6px}
  .slot-board-head{flex-wrap:wrap}
  .slot-board-head>.spacer{display:none}
  .schedule-course-head{align-items:flex-start}
  .schedule-course-actions{justify-content:flex-start}
  .mask{padding:10px;align-items:flex-start;overflow-y:auto}
  .modal,.modal.wide{width:100%;max-width:none;max-height:calc(100dvh - 20px);padding:15px}
  .modal .mfoot{flex-wrap:wrap;position:sticky;bottom:-15px;padding:10px 0 2px;background:var(--card)}
  .modal .mfoot .btn{flex:1 1 auto;min-height:40px}
  .login-wrap{padding:10px;align-items:flex-start;overflow-y:auto}
  .login-wrap .login-card{width:100%;max-width:460px;margin:auto;padding:22px 18px 18px;max-height:calc(100dvh - 20px)}
  .login-wrap .tabs{gap:12px}
  .login-wrap .tab{min-width:0;padding:10px 2px;font-size:12px}
  .toast-wrap{left:10px;right:10px;bottom:10px}
  .toast{max-width:none}
  .footer{padding:18px 12px 24px}
  .footer-in{gap:12px}
  .site-header{height:auto;min-height:66px;flex-wrap:wrap;gap:8px 10px;padding:10px 14px}
  .lp-brand{flex:1 1 auto;min-width:0;font-size:17px;gap:8px}
  .brand-mark{flex:0 0 29px;width:29px;height:29px}
  .lp-menu-toggle{display:block;flex:0 0 36px;width:36px;height:36px;margin:0}
  .lp-nav{top:100%;left:0;right:0}
  .lp-toggles{order:3;margin:0 auto 0 0;gap:6px}
  .lp-toggles .seg button{padding:6px 9px}
  .lp-nav-cta{order:4;margin-left:auto;padding:8px 10px;font-size:12px;white-space:nowrap}
  #landing .lp-hero{padding:38px 16px 44px}
  #landing .lp-section,#landing .lp-band,#landing .lp-contact{padding:40px 16px}
  #landing .lp-quick{grid-template-columns:minmax(0,1fr)}
  #landing .lp-course-grid,#landing .lp-teacher-grid,#landing .lp-bounty-grid{grid-template-columns:minmax(0,1fr)}
  #landing .lp-course{min-height:260px}
  #landing .lp-hero-art{min-height:250px;max-width:100%;overflow:hidden}
  #landing .lp-shape-a{width:190px;height:190px;left:8%;top:8%}
  #landing .lp-shape-b{width:130px;height:130px;right:2%;bottom:10%}
  #landing .lp-shape-c{width:82px;height:82px;right:26%;top:0}
  #landing .lp-art-card{min-width:0;max-width:88%;padding:10px;gap:8px}
  #landing .lp-art-second{right:0}
  #landing .lp-stats{gap:18px 24px;padding-top:20px}
  #landing .lp-stats dd{font-size:26px}
  #landing .lp-section-head{align-items:flex-start;gap:14px}
  #landing .lp-section-head h2{font-size:34px}
  #landing .lp-notice-list a{align-items:flex-start}
  #landing .lp-notice-list b{min-width:0;overflow-wrap:anywhere}
  .lp-footer .footer-in{padding:0 14px}
  .lp-to-top{background:var(--footer-bg);border-color:var(--line);color:var(--txt)}
}

@media (max-width:360px){
  .app{padding-left:9px;padding-right:9px}
  .topbar-right>.btn{padding:5px 7px;font-size:11px}
  .topbar .seg button{padding:6px 6px;font-size:10px}
  .login-wrap .login-card{padding-left:14px;padding-right:14px}
  #landing .lp-hero h1{font-size:38px}
}