:root { color-scheme: dark; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; background:#101117; color:#f5f5f7; }
* { box-sizing:border-box; } body { margin:0; } main { width:min(980px,calc(100% - 32px)); margin:44px auto 72px; }
h1 { margin:0; font-size:28px; } .sub { color:#9a9ca7; margin:8px 0 28px; }
section { background:#191a22; border:1px solid #2d2f3b; border-radius:18px; padding:24px; margin-top:18px; }
h2 { margin:0 0 18px; font-size:18px; } .grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label { display:grid; gap:7px; color:#c8c9d0; font-size:13px; } input, textarea, select, button { font:inherit; }
input, textarea, select { width:100%; border:1px solid #3a3c48; border-radius:10px; padding:11px 12px; background:#12131a; color:#f5f5f7; }
textarea { min-height:78px; resize:vertical; } .full { grid-column:1 / -1; }
.modes { display:flex; gap:12px; margin-bottom:14px; } .mode { display:flex; gap:7px; align-items:center; font-size:14px; } .mode span { white-space: nowrap; margin-top: 2px; }
.hint { margin:8px 0 0; color:#9294a0; font-size:12px; line-height:1.55; }
.files { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin-top:16px; }
.file { aspect-ratio:1; overflow:hidden; border:1px solid #393b49; border-radius:10px; background:#111218; position:relative; }
.file img { width:100%; height:100%; object-fit:cover; } .file span { position:absolute; bottom:0; left:0; right:0; padding:5px; background:rgba(0,0,0,.65); font-size:11px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
button { border:0; border-radius:10px; padding:11px 16px; color:#fff; background:#8357f4; cursor:pointer; font-weight:700; } button:disabled { opacity:.55; cursor:wait; }
.actions { display:flex; align-items:center; gap:13px; margin-top:20px; } #message { color:#aeb0ba; font-size:13px; } .error { color:#ff8f9d !important; } .ok { color:#96e5b4 !important; }
.works { display:grid; gap:10px; } .work { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid #30323d; border-radius:12px; }
.thumb { width:48px; height:48px; border-radius:8px; object-fit:cover; background:#111218; }.work-info { flex:1; min-width:0; }.work-title { font-weight:700; }.work-meta { color:#9698a3; font-size:12px; margin-top:4px; }.delete { background:#3a2730; color:#ffadb8; padding:8px 11px; font-size:12px; }
@media (max-width:640px) { main { width:min(100% - 20px,980px); margin-top:22px; }.grid { grid-template-columns:1fr; }.full { grid-column:auto; } section { padding:17px; } }

/* 管理台顶栏 + 退出登录 */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.topbar h1 { margin:0; }
.topbar-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.logout { background:#3a2730; color:#ffadb8; padding:9px 14px; font-size:13px; }
.logout:hover { background:#4a313c; }

/* 修改密码弹窗 */
.modal { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:rgba(8,9,13,.72); padding:20px; }
.modal[hidden] { display:none; }
.modal-card { width:min(420px, 100%); background:#191a22; border:1px solid #2d2f3b; border-radius:20px; padding:26px 24px; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.modal-card h2 { margin:0 0 18px; font-size:18px; }
.modal-card form { display:grid; gap:14px; }
.modal-card label { display:grid; gap:7px; font-size:13px; color:#aeb0ba; }
.modal-card input { background:#111218; border:1px solid #33353f; border-radius:10px; padding:11px 13px; color:#e8e9ee; font-size:14px; }
.modal-card input:focus { outline:none; border-color:#8357f4; }
.modal-actions { display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-top:4px; }
.modal-actions button[type="button"] { background:#2b2d38; color:#c9cbd4; }
#pwd-message { color:#aeb0ba; font-size:13px; }

/* 登录页 */
.login-page { display:flex; min-height:100vh; align-items:center; justify-content:center; background:radial-gradient(1200px 600px at 50% -10%, #1c1d28, #101117); }
.login-card { width:min(380px, calc(100% - 32px)); background:#191a22; border:1px solid #2d2f3b; border-radius:20px; padding:32px 28px; box-shadow:0 24px 60px rgba(0,0,0,.45); }
.login-brand { display:flex; flex-direction:column; gap:3px; margin-bottom:18px; }
.login-logo { font-size:22px; font-weight:800; letter-spacing:.5px; }
.login-sub { color:#9294a0; font-size:12px; }
.login-card h1 { margin:0 0 6px; font-size:22px; }
.login-tip { margin:0 0 22px; color:#9294a0; font-size:13px; }
.login-card label { margin-bottom:14px; }
.login-actions { display:flex; align-items:center; gap:13px; margin-top:6px; }
.login-actions button { background:#8357f4; }
.login-actions #message { color:#aeb0ba; font-size:13px; }
.login-actions .error { color:#ff8f9d !important; }
.login-actions .ok { color:#96e5b4 !important; }