:root { --bg:#0a0c0d; --surface:#111417; --surface-2:#15191d; --line:#242a2f; --line-hi:#3a4248; --text:#d8dee2; --muted:#7e898f; --muted-2:#566067; --orange:#e58a43; --green:#70d1b4; --blue:#76a9d4; --yellow:#e0c47e; --mono:'JetBrains Mono',monospace; --sans:'Noto Sans SC',system-ui,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.65; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:40px 40px; } a { color:inherit; text-decoration:none; } button,input { font:inherit; }
.wrap { width:min(1120px,calc(100% - 48px)); margin:0 auto; } .topbar { height:58px; padding:0 28px; display:flex; align-items:center; border-bottom:1px solid #1c2124; background:rgba(10,12,13,.92); backdrop-filter:blur(12px); position:sticky; top:0; z-index:10; font-family:var(--mono); } .brand { font-weight:600; white-space:nowrap; } .prompt,.orange { color:var(--orange); } .topnav { display:flex; gap:7px; margin-left:36px; } .nav-chip { border:1px solid var(--line); border-radius:6px; padding:4px 12px; color:var(--muted); font-size:13px; } .nav-chip span { color:var(--green); } .nav-chip.active,.nav-chip:hover { color:var(--text); border-color:var(--orange); background:rgba(229,138,67,.08); } .member-note { margin-left:auto; color:var(--muted-2); font-size:12px; }
.hero { padding:72px 0 48px; display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; } .eyebrow { color:var(--muted); font:12px var(--mono); margin-bottom:18px; } .signal { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--green); box-shadow:0 0 12px rgba(112,209,180,.55); } h1 { margin:0 0 22px; font-size:clamp(3.2rem,7vw,5.5rem); line-height:1.02; letter-spacing:-.045em; } .mono-title { font-family:var(--mono); font-size:.72em; letter-spacing:-.055em; } .cursor { display:inline-block; width:.34em; height:.82em; margin-left:.14em; background:var(--orange); animation:blink 1.05s step-end infinite; vertical-align:-.05em; } @keyframes blink { 50% { opacity:0; } } .hero-lead { max-width:560px; margin:0 0 8px; font-size:19px; color:var(--text); } .hero-meta { color:var(--muted); margin:0 0 28px; font-size:14px; } .primary-btn { display:inline-flex; gap:10px; align-items:center; padding:10px 18px; border-radius:7px; background:var(--orange); color:#17100b; font-family:var(--mono); font-weight:700; box-shadow:0 10px 25px rgba(229,138,67,.16); } .primary-btn:hover { background:#f0a35c; transform:translateY(-1px); }
.terminal { border:1px solid var(--line); border-radius:10px; background:rgba(17,20,23,.93); overflow:hidden; box-shadow:0 20px 70px rgba(0,0,0,.25); font-family:var(--mono); } .terminal-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line); background:#0e1113; font-size:12px; color:var(--muted); } .dot { width:11px; height:11px; border-radius:50%; } .red { background:#ff6259; } .yellow { background:#f1bd4b; } .green { background:#35c759; } .terminal-title { margin-left:4px; } .ready { margin-left:auto; color:var(--green); } .terminal-body { padding:28px 24px 26px; font-size:14px; color:var(--text); } .terminal-muted { margin-top:10px; color:var(--muted); } .terminal-muted strong { color:var(--text); } .terminal-divider { height:1px; background:var(--line); margin:22px 0 15px; } .status-row { display:grid; grid-template-columns:58px 1fr auto; gap:8px; align-items:center; padding:8px 0; color:var(--muted); } .status-row em { color:var(--green); font-style:normal; font-size:12px; } .status-row.more { grid-template-columns:58px 1fr 14px; color:var(--muted-2); } .status-row.more b { color:var(--orange); } .tiny-dots { display:flex; gap:3px; } .tiny-dots i { width:7px; height:7px; border-radius:50%; background:var(--orange); } .tiny-dots i:nth-child(2){background:#f1bd4b}.tiny-dots i:nth-child(3){background:#35c759}
.intro-strip { border:1px solid var(--line); border-radius:9px; padding:17px 22px; background:rgba(17,20,23,.8); font:14px var(--mono); } .intro-strip p { color:var(--muted); margin:5px 0 0; font-size:13px; } .code-key { color:var(--blue); }
.browser { padding:72px 0 80px; } .section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:20px; } .section-heading>div { display:flex; align-items:baseline; gap:14px; } .section-index,.group-number { color:var(--muted-2); font:12px var(--mono); } h2 { margin:0; font-size:30px; letter-spacing:-.03em; } .loaded { color:var(--green); font:12px var(--mono); } .toolbar { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:30px; } .filters { display:flex; flex-wrap:wrap; gap:7px; } .filter { border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:6px; padding:7px 13px; cursor:pointer; } .filter:hover,.filter.active { color:var(--text); border-color:var(--orange); background:rgba(229,138,67,.1); } .search-box { display:flex; align-items:center; gap:10px; min-width:250px; border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:7px 10px; font:12px var(--mono); color:var(--muted-2); } .search-box input { min-width:0; width:100%; border:0; outline:0; background:transparent; color:var(--text); } .search-box button { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:20px; line-height:1; }
.skill-group { margin:36px 0 0; } .group-heading { display:flex; align-items:baseline; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--line); } .group-heading h3 { margin:0; font-size:17px; } .group-en { color:var(--muted-2); font:11px var(--mono); } .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; } .card { display:block; width:100%; min-height:207px; text-align:left; color:inherit; border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:17px; cursor:pointer; transition:.16s ease; } .card:hover { border-color:var(--line-hi); background:var(--surface-2); transform:translateY(-2px); } .card-top { display:flex; align-items:center; gap:8px; color:var(--muted); font:11px var(--mono); white-space:nowrap; overflow:hidden; } .card-top>span:last-child { overflow:hidden; text-overflow:ellipsis; } .card-dots { display:flex; gap:3px; flex:0 0 auto; } .card-dots i { width:6px; height:6px; border-radius:50%; background:var(--orange); }.card-dots i:nth-child(2){background:#f1bd4b}.card-dots i:nth-child(3){background:#35c759}.card-title { margin-top:20px; font-size:19px; font-weight:700; } .card-desc { margin-top:8px; min-height:53px; color:var(--muted); font-size:14px; line-height:1.6; } .card-foot { display:flex; justify-content:space-between; align-items:center; margin-top:15px; } .tag { border:1px solid rgba(112,209,180,.28); border-radius:4px; padding:2px 7px; color:var(--green); font:11px var(--mono); } .arrow { color:var(--orange); font-size:19px; } .empty { padding:50px 0; color:var(--muted); text-align:center; }
.footer { display:flex; justify-content:space-between; padding:20px 0 42px; color:var(--muted-2); font:12px var(--mono); border-top:1px solid var(--line); } .skill-dialog { width:min(560px,calc(100% - 30px)); border:1px solid var(--line-hi); border-radius:10px; padding:30px; color:var(--text); background:#111417; box-shadow:0 30px 100px #000; } .skill-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(3px); } .dialog-close { position:absolute; top:13px; right:15px; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:25px; } .dialog-file { color:var(--muted); font:12px var(--mono); } .dialog-category { display:inline-block; margin-top:18px; padding:3px 7px; border:1px solid rgba(112,209,180,.28); border-radius:4px; color:var(--green); font:11px var(--mono); } .skill-dialog h2 { margin:12px 0 10px; font-size:28px; } .skill-dialog>p { color:var(--muted); margin:0 0 24px; } .dialog-block { border-top:1px solid var(--line); padding:15px 0 0; margin-top:15px; } .dialog-block span { color:var(--orange); font:12px var(--mono); } .dialog-block p { margin:6px 0 0; font-size:14px; } .dialog-action { margin-top:22px; width:100%; border:1px solid var(--line-hi); border-radius:6px; padding:10px; background:#181d20; color:var(--muted); cursor:pointer; }
@media (max-width:850px) { .hero { grid-template-columns:1fr; gap:38px; padding-top:50px; } .hero-terminal { max-width:680px; } .cards { grid-template-columns:repeat(2,1fr); } } @media (max-width:620px) { .wrap { width:min(100% - 30px,1120px); } .topbar { padding:0 15px; } .topnav { margin-left:14px; } .nav-chip { padding:4px 8px; font-size:12px; } .member-note { display:none; } .hero { padding-top:42px; } h1 { font-size:3.35rem; } .hero-lead { font-size:17px; } .toolbar { align-items:stretch; flex-direction:column; } .search-box { min-width:0; } .cards { grid-template-columns:1fr; } .section-heading { align-items:start; gap:10px; flex-direction:column; } .footer { gap:10px; flex-direction:column; } }

/* 第一版调整：暖纸工作台。保留终端骨架，但降低黑底和高对比度。 */
:root { --bg:#f4f0e9; --surface:#fffdfa; --surface-2:#f8f4ee; --line:#ded8cf; --line-hi:#c7bfb4; --text:#2e302f; --muted:#77736c; --muted-2:#9a9388; --orange:#b9683f; --green:#438976; --blue:#5b7594; }
body { background-image:linear-gradient(rgba(112,102,89,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(112,102,89,.055) 1px,transparent 1px); }
.topbar { border-bottom-color:var(--line); background:rgba(244,240,233,.93); }
.nav-chip.active,.nav-chip:hover { background:rgba(185,104,63,.1); }
.terminal { background:rgba(255,253,250,.9); box-shadow:0 20px 70px rgba(75,61,45,.12); }
.terminal-bar { background:#f0ebe4; }
.red { background:#d87868; } .yellow { background:#d8af5b; } .green { background:#62a48e; }
.intro-strip { background:rgba(255,253,250,.78); box-shadow:0 8px 26px rgba(75,61,45,.05); }
.filter:hover,.filter.active { background:rgba(185,104,63,.1); }
.placeholder-card { background:rgba(255,253,250,.62); border-style:dashed; }
.placeholder-card:hover { transform:none; }
.published-state { color:var(--green) !important; }
.dialog-action:disabled { opacity:.55; cursor:not-allowed; }
.card-dots i:nth-child(2),.tiny-dots i:nth-child(2) { background:#d8af5b; }
.card-dots i:nth-child(3),.tiny-dots i:nth-child(3) { background:#62a48e; }
.tag { border-color:rgba(67,137,118,.28); color:var(--green); }
.skill-dialog { background:#fffdfa; box-shadow:0 30px 100px rgba(75,61,45,.23); }
.skill-dialog::backdrop { background:rgba(66,56,46,.32); }
.dialog-category { border-color:rgba(67,137,118,.28); }
.dialog-action { background:#5a3d2b; color:#fffdf7; border-color:#5a3d2b; font-weight:700; }
.dialog-action:hover:not(:disabled) { background:#40291e; border-color:#40291e; }
.terms-check { display:flex; gap:10px; align-items:flex-start; margin-top:20px; padding:12px 13px; border:1px solid var(--line); border-radius:7px; background:#f8f4ee; color:var(--text); font-size:13px; line-height:1.55; cursor:pointer; }
.terms-check input { flex:0 0 auto; width:17px; height:17px; margin-top:2px; accent-color:var(--orange); }
.terms-check[hidden] { display:none; }
.download-all-list { display:grid; gap:10px; margin-top:20px; }
.download-all-row { padding:13px 14px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); }
.download-all-row strong,.download-all-row span { display:block; }
.download-all-row strong { font-size:15px; }
.download-all-row span { color:var(--muted); font:11px var(--mono); margin-top:3px; }
.auth-dialog { max-width: 520px; }
.auth-label { display:block; margin-top:16px; color:var(--muted); font:12px var(--mono); }
.auth-input { width:100%; margin-top:7px; border:1px solid var(--line); border-radius:6px; padding:10px 12px; background:#fff; color:var(--text); outline:0; }
.auth-input:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(185,104,63,.12); }
.auth-code-row { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:10px; }
.auth-code-row .auth-input { margin-top:0; }
.auth-code-btn { border:1px solid var(--line-hi); border-radius:6px; padding:0 12px; background:var(--surface-2); color:var(--text); cursor:pointer; }
.auth-privacy-note { margin:11px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.auth-code-btn:disabled, #verifyAuth:disabled { opacity:.55; cursor:wait; }
.auth-status { margin-top:12px; padding:9px 11px; border-radius:6px; background:var(--surface-2); color:var(--muted); font-size:13px; }
.guide-dialog { max-width: 620px; }
.guide-steps { display:grid; gap:12px; margin-top:20px; }
.guide-step { display:grid; grid-template-columns:34px 1fr; gap:12px; padding:13px 0; border-top:1px solid var(--line); }
.guide-step b { color:var(--orange); font:12px var(--mono); padding-top:3px; }
.guide-step strong { font-size:15px; }
.guide-step p { margin:4px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }
.guide-note { margin-top:18px; padding:11px 12px; border-radius:7px; background:var(--surface-2); color:var(--muted); font-size:13px; }

/* 学员密码登录 */
.account-tools button { border:1px solid #bfb4a3; background:#fffaf0; padding:8px 12px; border-radius:8px; cursor:pointer; color:#403b34; font:inherit; }
.auth-input { box-sizing:border-box; }
.auth-label { margin-top:12px; }
.account-tools { display:flex; justify-content:flex-end; align-items:center; gap:12px; padding:12px 28px; font-size:14px; }
.local-auth-banner { background:#fff0c5; color:#584313; padding:12px 28px; font-size:14px; text-align:center; }
[hidden] { display:none !important; }

.auth-dialog { max-height:calc(100vh - 32px); overflow-y:auto; padding:24px 30px; }
.auth-dialog .auth-status { margin-bottom:12px; }

.auth-links { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; color:var(--muted); font-size:13px; }
.auth-links button,.auth-back { border:0; background:transparent; color:var(--orange); cursor:pointer; padding:3px 0; font:inherit; text-decoration:underline; text-underline-offset:3px; }
.auth-back { display:block; margin:18px auto 0; font-size:13px; }
.auth-progress { margin:16px 0 8px; color:var(--muted); font:12px var(--mono); }
.auth-links button:disabled,.auth-back:disabled { cursor:wait; opacity:.6; }