:root { color-scheme: dark; --bg:#111216; --panel:#191a20; --line:#30313a; --muted:#92949f; --text:#f2f1f5; --purple:#9477ff; --yellow:#ffd45f; }
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 15% 15%,rgba(148,119,255,.13),transparent 28%),var(--bg); font-family: Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
button,input { font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.topbar { width:min(1180px,calc(100% - 48px)); height:76px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.08); }
.brand { font-weight:850; letter-spacing:-.04em; }
.brand span { margin-left:8px; color:var(--purple); font-size:11px; font-weight:600; letter-spacing:.08em; }
.back { color:#b6b7bf; font-size:11px; }
main { width:min(1180px,calc(100% - 48px)); margin:auto; }
.auth-view { min-height:calc(100vh - 76px); padding:70px 0 90px; display:grid; grid-template-columns:minmax(0,1.25fr) 420px; align-items:center; gap:90px; }
.eyebrow { color:var(--purple); font:700 9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.15em; }
.auth-copy h1,.dashboard-head h1 { margin:20px 0 25px; max-width:720px; font-family:Georgia,"Noto Serif SC",serif; font-size:clamp(62px,8vw,112px); font-weight:500; line-height:.9; letter-spacing:-.07em; }
.auth-copy h1 em { color:var(--yellow); font-weight:400; }
.auth-copy > p { max-width:540px; margin:0; color:var(--muted); font-size:14px; line-height:1.9; }
.auth-mark { width:250px; height:170px; margin-top:48px; padding:20px; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:linear-gradient(135deg,#765de0,#3f2b9b); }
.auth-mark span,.auth-mark small { position:absolute; font:700 8px/1 ui-monospace,monospace; letter-spacing:.12em; }
.auth-mark span { top:18px; left:20px; }
.auth-mark small { left:20px; bottom:18px; opacity:.62; }
.auth-mark i { position:absolute; right:28px; top:42px; font:normal 74px/1 Georgia,serif; }
.auth-panel { padding:34px; border:1px solid var(--line); border-radius:24px; background:rgba(25,26,32,.9); box-shadow:0 28px 80px rgba(0,0,0,.3); }
.auth-tabs { margin-bottom:32px; padding:4px; display:grid; grid-template-columns:1fr 1fr; gap:4px; border-radius:13px; background:#111217; }
.auth-tabs button { height:42px; border:0; border-radius:10px; color:#8d8f99; background:transparent; cursor:pointer; }
.auth-tabs button.active { color:#15130d; background:var(--yellow); font-weight:750; }
form { display:grid; gap:20px; }
form > div { display:grid; gap:9px; }
label { color:#c7c8cf; font-size:11px; }
input { width:100%; height:52px; padding:0 15px; border:1px solid var(--line); border-radius:12px; outline:0; color:white; background:#121318; }
input:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(148,119,255,.12); }
.form-error { min-height:18px; margin:-4px 0; color:#ff8585; font-size:11px; line-height:1.5; }
.form-error.success { color:#8de5ad; }
.submit-button { height:54px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border:0; border-radius:13px; color:#15130d; background:var(--yellow); font-weight:800; cursor:pointer; }
.submit-button:disabled { opacity:.55; cursor:wait; }
.submit-button i { font-style:normal; font-size:22px; }
.privacy-note { margin:22px 0 0; color:#747680; font-size:9px; line-height:1.6; }
.dashboard-view { min-height:calc(100vh - 76px); padding:90px 0 120px; }
.dashboard-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding-bottom:58px; border-bottom:1px solid var(--line); }
.dashboard-head h1 { margin:15px 0 16px; font-size:clamp(48px,6vw,82px); }
.dashboard-head p { margin:0; color:var(--muted); }
.dashboard-head strong { color:white; }
#logout-button { height:40px; padding:0 16px; border:1px solid var(--line); border-radius:999px; color:#bbbcc4; background:#191a20; cursor:pointer; }
.subjects { padding-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.subjects-empty { min-height:330px; margin-top:34px; padding:40px; display:grid; grid-template-columns:200px 1fr; align-items:center; gap:50px; border:1px dashed #3b3c46; border-radius:24px; background:#17181d; }
.subjects-empty > span { width:170px; height:170px; display:grid; place-items:center; border:1px solid #494b57; border-radius:50%; color:var(--purple); font-size:82px; font-weight:200; }
.subjects-empty small { color:var(--purple); font:700 8px/1 ui-monospace,monospace; letter-spacing:.13em; }
.subjects-empty h2 { margin:13px 0 12px; font-family:Georgia,"Noto Serif SC",serif; font-size:38px; font-weight:500; }
.subjects-empty p { margin:0; color:var(--muted); font-size:13px; }
.admin-panel { margin-top:34px; padding:40px; display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr); gap:50px; align-items:start; border:1px solid rgba(255,212,95,.25); border-radius:24px; background:linear-gradient(135deg,rgba(255,212,95,.08),rgba(148,119,255,.05)); }
.admin-copy h2 { margin:15px 0 14px; font-family:Georgia,"Noto Serif SC",serif; font-size:36px; font-weight:500; }
.admin-copy p { max-width:480px; margin:0; color:var(--muted); font-size:13px; line-height:1.8; }
.admin-tools { display:grid; gap:24px; }
.admin-tools section { padding:18px; border:1px solid #343640; border-radius:15px; background:rgba(17,18,22,.5); }
.admin-tools h3 { margin:0 0 13px; font-size:12px; letter-spacing:.04em; }
.admin-list { display:grid; gap:8px; color:#858791; font-size:11px; }
.admin-list-row { min-height:42px; padding:8px 9px 8px 12px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-radius:10px; background:#111216; }
.admin-list-row span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-list-row button { flex:0 0 auto; padding:7px 10px; border:0; border-radius:8px; color:#15130d; background:var(--yellow); font-size:10px; font-weight:800; cursor:pointer; }
.reset-form { display:grid; gap:10px; }
.reset-form label { margin-top:4px; color:#b8bac4; font-size:10px; }
.reset-form select,.reset-form input { width:100%; min-height:48px; padding:0 14px; color:var(--text); border:1px solid #3a3b45; border-radius:12px; outline:none; background:#111216; }
.reset-form select:focus,.reset-form input:focus { border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,212,95,.1); }
.reset-form button { min-height:50px; margin-top:4px; display:flex; align-items:center; justify-content:space-between; padding:0 17px; color:#111216; border:0; border-radius:12px; background:var(--yellow); font-weight:800; cursor:pointer; }
.reset-form button:disabled { opacity:.55; cursor:wait; }
.reset-form .danger-button { color:#ffb3b3; border:1px solid rgba(255,112,112,.35); background:rgba(255,85,85,.08); }
.admin-message { min-height:18px; margin:2px 0 0; color:#ff9f9f; font-size:10px; }
.admin-message.success { color:#8de5ad; }
@media (max-width:850px) { .auth-view { grid-template-columns:1fr; gap:55px; } .auth-panel { max-width:520px; width:100%; } .auth-mark { display:none; } .subjects { grid-template-columns:1fr 1fr; } .admin-panel { grid-template-columns:1fr; gap:32px; } }
@media (max-width:600px) { .topbar,main { width:min(100% - 28px,1180px); } .topbar { height:68px; } .brand span { display:none; } .auth-view { min-height:auto; padding:52px 0 80px; } .auth-copy h1 { font-size:59px; } .auth-panel { padding:24px; } .dashboard-view { padding:58px 0 90px; } .dashboard-head { align-items:flex-start; flex-direction:column; } .subjects { grid-template-columns:1fr; } .subjects-empty { min-height:410px; padding:27px; grid-template-columns:1fr; gap:28px; } .subjects-empty > span { width:130px; height:130px; font-size:64px; } .admin-panel { padding:27px; } }