:root { --bg:#f6f7f9; --card:#fff; --line:#e3e6ea; --text:#1f2329; --muted:#8a919f; --accent:#4a90d9; --danger:#d9534f; }
* { box-sizing: border-box; }
body { margin:0; font-family:"Microsoft YaHei", system-ui, sans-serif; background:var(--bg); color:var(--text); }
.toolbar { position:sticky; top:0; background:#fff; border-bottom:1px solid var(--line); padding:12px 20px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; z-index:5; }
.toolbar h1 { font-size:18px; margin:0 12px 0 0; }
.controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
input, select, button { font-size:14px; padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--text); }
input[type=search] { width:260px; }
button { cursor:pointer; }
button:hover { border-color:var(--accent); color:var(--accent); }
.status { margin-left:12px; color:var(--muted); font-size:13px; }
.user-area { margin-left:auto; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.user-area a { color:var(--accent); text-decoration:none; }
.user-area button { padding:4px 10px; font-size:13px; }
main.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; padding:20px; }
main.list { grid-template-columns:1fr; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; transition:box-shadow .15s; }
.card:hover { box-shadow:0 4px 14px rgba(0,0,0,.08); }
.thumb { width:100%; height:150px; object-fit:cover; display:block; background:#eee; }
.text-card { padding:12px; }
.card-title { font-weight:600; margin-bottom:6px; }
.card-snippet { color:var(--muted); font-size:13px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card-meta { color:var(--muted); font-size:12px; margin-top:8px; }
.empty { text-align:center; color:var(--muted); padding:60px 20px; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:10; padding:20px; }
.modal-card { background:#fff; border-radius:12px; max-width:760px; width:100%; max-height:86vh; overflow:auto; padding:24px; position:relative; }
.close { position:absolute; top:10px; right:14px; font-size:22px; border:none; background:none; cursor:pointer; color:var(--muted); }
.full-img { max-width:100%; border-radius:8px; }
.full-text { white-space:pre-wrap; line-height:1.7; margin:12px 0; }
.danger { color:var(--danger); border-color:var(--danger); margin-top:16px; }
.meta { color:var(--muted); font-size:13px; }
.hidden { display:none; }
/* 登录 / 注册 / 占位页 */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-form { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:28px 32px; max-width:380px; width:100%; box-shadow:0 4px 18px rgba(0,0,0,.06); }
.auth-form h1 { font-size:20px; margin:0 0 6px; }
.auth-sub { color:var(--muted); font-size:13px; margin:0 0 18px; }
.auth-form label { display:block; font-size:13px; color:var(--muted); margin:14px 0 6px; }
.auth-form input { width:100%; }
.auth-form button[type=submit] { width:100%; margin-top:20px; padding:9px; background:var(--accent); color:#fff; border-color:var(--accent); }
.auth-form button[type=submit]:hover { background:#3a80c9; color:#fff; }
.auth-form button[type=submit]:disabled { opacity:.6; cursor:not-allowed; }
.auth-error { margin-top:14px; padding:8px 10px; border:1px solid #f0b4b2; border-radius:6px; background:#fdecea; color:#b71c1c; font-size:13px; }
.auth-error.ok { border-color:#a5d6a7; background:#e8f5e9; color:#2e7d32; }
.auth-links { margin-top:16px; font-size:13px; color:var(--muted); text-align:center; }
.auth-links a { color:var(--accent); text-decoration:none; }
/* 响应式 */
@media (max-width:720px) {
  .toolbar { flex-direction:column; align-items:stretch; padding:12px; }
  .toolbar h1 { margin:0 0 4px; }
  .controls { flex-direction:column; align-items:stretch; }
  #search { width:100%; }
  .user-area { margin-left:0; justify-content:flex-end; }
  .status { margin-left:0; text-align:right; }
  main.grid { grid-template-columns:1fr; padding:12px; }
  .modal { padding:10px; }
  .modal-card { padding:16px; max-height:92vh; }
}


/* 设置页（令牌管理） */
.auth-form.wide { max-width:640px; }
.auth-form section h2 { font-size:15px; margin:24px 0 4px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.token-create { display:flex; gap:8px; margin-top:4px; }
.token-create input { flex:1; }
.token-create button[type=submit] { width:auto; margin-top:0; padding:6px 14px; background:var(--accent); color:#fff; border-color:var(--accent); }
.token-create button[type=submit]:hover { background:#3a80c9; color:#fff; }
.token-result { margin-top:16px; padding:12px; border:1px solid #f0d58c; border-radius:8px; background:#fffbe6; }
.token-tip { margin:0 0 8px; font-size:13px; color:#8a6d1a; }
.token-result code { display:block; word-break:break-all; background:#fff; border:1px dashed #d9b45c; padding:8px 10px; border-radius:6px; font-size:13px; user-select:all; }
.token-result button { margin-top:10px; }
.table-wrap { overflow-x:auto; }
.token-table { width:100%; border-collapse:collapse; margin-top:6px; font-size:13px; }
.token-table th, .token-table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.token-table th { color:var(--muted); font-weight:600; white-space:nowrap; }
.token-table td:first-child { font-weight:600; }
.token-table button.danger { margin-top:0; padding:3px 10px; font-size:12px; }
.empty-state { color:var(--muted); font-size:13px; margin:10px 0; }


/* 管理后台（Task 7） */
.auth-form.wide.admin-card { max-width: 900px; }
.admin-card section h2 { font-size:15px; margin:24px 0 4px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.invite-form { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-top:8px; }
.invite-form label { margin:0; font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:4px; }
.invite-form input { width:110px; }
.invite-form button[type=submit] { background:var(--accent); color:#fff; border-color:var(--accent); }
.invite-form button[type=submit]:hover { background:#3a80c9; color:#fff; }
.invite-form button[type=submit]:disabled { opacity:.6; cursor:not-allowed; }
.row-actions { white-space:nowrap; }
.row-actions button, .row-actions a { margin-right:6px; padding:3px 8px; font-size:12px; }
.row-actions a { display:inline-block; color:var(--accent); text-decoration:none; border:1px solid var(--line); border-radius:6px; background:#fff; }
.status-on { color:#2e7d32; }
.status-off { color:var(--danger); }
.pager { display:flex; justify-content:center; align-items:center; gap:14px; padding:16px 20px 28px; color:var(--muted); font-size:13px; }
.pager.hidden { display:none; }
.pager button:disabled { opacity:.45; cursor:not-allowed; }