:root { --bg:#1a1a1a; --surface:#252525; --surface-2:#2d2d2d; --line:#444; --text:#efefef; --muted:#a8a8a8; --gold:#ffd700; --danger:#ff6b6b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:"Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; background:var(--bg); color:var(--text); }
button, input, textarea { font:inherit; }
.site-header { background:linear-gradient(135deg,#171717,#2a2a2a); border-bottom:1px solid rgba(255,215,0,.23); box-shadow:0 2px 14px rgba(0,0,0,.28); }
.site-header__inner { max-width:1200px; min-height:76px; margin:auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { margin:0; color:var(--gold); font-size:22px; letter-spacing:.02em; }
.page-wrap { max-width:1200px; margin:32px auto; padding:0 24px; }
.panel { padding:28px; border:1px solid #3b3b3b; border-radius:12px; background:var(--surface-2); box-shadow:0 8px 28px rgba(0,0,0,.2); }
.panel + .panel { margin-top:20px; }
.toolbar { display:flex; align-items:center; gap:12px; }
.grow { flex:1; }
.input, .editor { width:100%; border:1px solid var(--line); border-radius:7px; background:#171717; color:var(--text); padding:12px 14px; outline:none; transition:border-color .2s, box-shadow .2s; }
.input:focus, .editor:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,215,0,.11); }
.editor { min-height:500px; resize:vertical; line-height:1.7; font-family:Consolas, "Microsoft YaHei", monospace; }
.btn { border:1px solid transparent; border-radius:7px; padding:10px 18px; cursor:pointer; font-weight:700; transition:transform .15s, opacity .15s, background .15s; }
.btn:hover { transform:translateY(-1px); opacity:.92; }.btn:active { transform:none; }
.btn--primary { background:var(--gold); color:#181818; }.btn--ghost { background:transparent; color:var(--gold); border-color:rgba(255,215,0,.45); }.btn--danger { background:var(--danger); color:white; }
.section-title { margin:0 0 18px; color:var(--gold); font-size:20px; }.subtle { color:var(--muted); font-size:14px; }.note-list { display:grid; gap:12px; }
.note-row { display:flex; gap:20px; align-items:center; justify-content:space-between; border:1px solid #414141; background:#1b1b1b; border-radius:8px; padding:18px; }.note-row:hover { border-color:var(--gold); }
.note-name { margin:0 0 7px; color:var(--gold); font-size:17px; }.actions { display:flex; gap:8px; flex-shrink:0; }
.empty { text-align:center; color:var(--muted); padding:52px 20px; }.empty__icon { color:var(--gold); font-size:42px; display:block; margin-bottom:14px; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#171717,#303030); }.login-card { width:100%; max-width:420px; }.login-card h1 { margin:0 0 8px; color:var(--gold); font-size:28px; }.login-card p { margin:0 0 28px; color:var(--muted); }
.closed-card { width:100%; max-width:480px; text-align:center; }.closed-card h1 { margin:8px 0; color:var(--gold); font-size:28px; }
.field { display:grid; gap:8px; margin:0 0 17px; }.field label { color:#ddd; font-weight:600; }.captcha-row { display:flex; gap:10px; align-items:center; }.captcha-row .input { min-width:0; }.captcha-image { width:170px; height:58px; cursor:pointer; border:1px solid #c7cfdb; border-radius:7px; background:#f7f9fc; object-fit:cover; }
.message { display:none; margin-top:16px; padding:10px 12px; border-radius:7px; }.message--error { display:block; background:#4d2020; color:#ffc1c1; }.message--success { display:block; background:#223f24; color:#c6f7c8; }
.editor-head, .student-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; padding-bottom:15px; border-bottom:1px solid #454545; }.student-actions { display:flex; align-items:center; gap:12px; }.status--saved { color:var(--gold); }.share-box, .tip { margin-top:16px; border-left:4px solid var(--gold); padding:13px 15px; background:#242424; color:#ddd; line-height:1.6; }.share-url { color:var(--gold); overflow-wrap:anywhere; }.copy-status { margin-left:8px; color:var(--gold); }.student-title { text-align:center; margin:0; color:var(--gold); font-size:25px; }.student-id { margin-top:8px; text-align:center; color:var(--muted); }.content { min-height:450px; padding:20px; border:1px solid var(--line); border-radius:8px; background:#181818; white-space:pre-wrap; overflow-wrap:anywhere; font:16px/1.8 Consolas,"Microsoft YaHei",monospace; }
body.student-single-screen { height:100vh; overflow:hidden; display:flex; flex-direction:column; }body.student-single-screen .site-header { flex:0 0 auto; }body.student-single-screen .page-wrap { flex:1 1 auto; min-height:0; width:100%; margin:0 auto; padding-top:20px; padding-bottom:20px; display:flex; }body.student-single-screen .page-wrap .panel { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }body.student-single-screen .student-head,body.student-single-screen .tip { flex:0 0 auto; }body.student-single-screen .content { flex:1 1 auto; min-height:0; overflow:auto; }
.settings-panel { max-width:720px; margin:0 auto; }.settings-intro { margin:-8px 0 26px; }.settings-input { max-width:220px; }.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 0; border-top:1px solid #454545; border-bottom:1px solid #454545; cursor:pointer; }.toggle-row span { display:grid; gap:7px; }.toggle-row small { color:var(--muted); line-height:1.5; }.toggle-row input { position:absolute; opacity:0; }.toggle { position:relative; width:48px; height:26px; flex:0 0 auto; border-radius:999px; background:#555; transition:background .2s; }.toggle::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:white; transition:transform .2s; }.toggle-row input:checked + .toggle { background:var(--gold); }.toggle-row input:checked + .toggle::after { transform:translateX(22px); }.toggle-row input:focus + .toggle { outline:3px solid rgba(255,215,0,.25); }.settings-footer { display:flex; align-items:center; gap:14px; margin-top:24px; }
@media (max-width:650px) { .site-header__inner,.page-wrap { padding-left:16px; padding-right:16px; }.site-header__inner { min-height:66px; }.brand { font-size:18px; }.panel { padding:18px; }.toolbar,.note-row,.editor-head,.student-head { align-items:stretch; flex-direction:column; }.student-actions { align-items:flex-start; flex-wrap:wrap; }.toggle-row { align-items:flex-start; }.actions { width:100%; }.actions .btn { flex:1; }.editor { min-height:390px; }.captcha-row { align-items:flex-start; flex-direction:column; }.captcha-image { width:170px; }body.student-single-screen .page-wrap { padding-top:12px; padding-bottom:12px; } }