/* ============================================================
   关系户社群 · 管理后台独立样式表
   清爽现代管理后台（与前台复古报纸风完全分离）
   主色：品牌印章红 #C0272D / 辅助深灰蓝 #1f2632
   作用域：.admin-layout（管理页） / .admin-login-wrap（登录页）
           / .modal-overlay .modal（后台弹窗，挂在 body 下）
   ============================================================ */

/* ---------- 布局骨架 ---------- */
.admin-layout { display:flex; min-height:100vh; background:#f3f5f9; color:#2b3445; font-family:'PingFang SC','Microsoft YaHei',sans-serif; }

.admin-main { flex:1; margin-left:220px; display:flex; flex-direction:column; min-width:0; background:#f3f5f9; }

.admin-topbar { height:58px; background:#fff; border-bottom:1px solid #e8ecf3; display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:50; box-shadow:0 1px 3px rgba(20,30,50,.04); }
.admin-topbar h2 { font-size:16px; font-weight:700; margin:0; color:#1f2632; font-family:'PingFang SC','Microsoft YaHei',sans-serif; }
.at-link { color:#6b7688; text-decoration:none; font-size:13px; transition:.15s; }
.at-link:hover { color:#C0272D; }

.admin-content { padding:20px 24px 40px; }

/* ---------- 侧边栏 ---------- */
.admin-sidebar { width:220px; background:linear-gradient(180deg,#171c24,#1f2632); color:#aeb6c4; display:flex; flex-direction:column; flex-shrink:0; position:fixed; top:0; left:0; bottom:0; z-index:100; }

.as-brand { display:flex; align-items:center; gap:10px; padding:18px 18px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.as-seal { width:38px; height:38px; border-radius:50%; background:#C0272D; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; font-family:'STSong','SimSun',serif; flex-shrink:0; box-shadow:0 0 0 2px rgba(192,39,45,.35); }
.as-title { font-size:15px; font-weight:700; color:#fff; letter-spacing:.5px; }
.as-sub { font-size:10px; color:#5f6a7d; letter-spacing:1.5px; margin-top:2px; }

.as-menu { flex:1; overflow-y:auto; padding:10px 0; }
.as-menu::-webkit-scrollbar { width:4px; }
.as-menu::-webkit-scrollbar-thumb { background:#39424f; border-radius:4px; }

.as-group-head { display:flex; align-items:center; gap:9px; padding:11px 18px; font-size:13px; font-weight:600; color:#cdd4df; cursor:pointer; transition:.15s; user-select:none; }
.as-group-head:hover { color:#fff; background:rgba(255,255,255,.04); }
.as-icon { font-size:15px; width:20px; text-align:center; }
.as-label { flex:1; }
.as-arrow { font-size:10px; color:#5f6a7d; transition:.15s; }

.as-submenu { background:rgba(0,0,0,.18); padding:4px 0; }
.as-item { display:flex; align-items:center; gap:9px; padding:10px 18px 10px 47px; font-size:13px; color:#aeb6c4; text-decoration:none; border-left:3px solid transparent; transition:.15s; }
.as-item:hover { color:#fff; background:rgba(255,255,255,.05); }
.as-item.active { color:#fff; background:rgba(192,39,45,.16); border-left-color:#C0272D; }

.as-footer { padding:14px 18px; border-top:1px solid rgba(255,255,255,.08); }
.as-user { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.as-user-av { width:34px; height:34px; border-radius:50%; background:#C0272D; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; }
.as-user-name { font-size:13px; color:#fff; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-user-role { font-size:10px; color:#6b7688; margin-top:2px; }
.as-actions { display:flex; gap:8px; }
.as-btn, .as-logout { flex:1; padding:7px 0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#cdd4df; border-radius:6px; font-size:12px; cursor:pointer; transition:.15s; }
.as-btn:hover, .as-logout:hover { border-color:#C0272D; color:#fff; background:rgba(192,39,45,.15); }

/* ---------- 卡片 ---------- */
.admin-layout .panel, .admin-layout .card { background:#fff; border:1px solid #e8ecf3; border-radius:10px; overflow:hidden; margin-bottom:18px; box-shadow:0 1px 3px rgba(20,30,50,.04); }
.admin-layout .panel-head, .admin-layout .card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; border-bottom:1px solid #eef1f6; }
.admin-layout .panel-head h3, .admin-layout .card-head h3 { margin:0; font-size:14px; font-weight:700; color:#1f2632; }
.admin-layout .panel-body { padding:16px 20px; }

/* ---------- 数据看板 ---------- */
.admin-layout .dash-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:18px; }
.admin-layout .dc-card { position:relative; background:#fff; border:1px solid #e8ecf3; border-radius:10px; padding:18px 20px 16px; box-shadow:0 1px 3px rgba(20,30,50,.04); overflow:hidden; }
.admin-layout .dc-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; }
.admin-layout .dc-blue::before { background:#3b82f6; } .admin-layout .dc-blue .dc-value { color:#2563eb; }
.admin-layout .dc-green::before { background:#22a55e; } .admin-layout .dc-green .dc-value { color:#168a4d; }
.admin-layout .dc-amber::before { background:#f59e0b; } .admin-layout .dc-amber .dc-value { color:#d97706; }
.admin-layout .dc-red::before { background:#dc2626; } .admin-layout .dc-red .dc-value { color:#dc2626; }
.admin-layout .dc-label { font-size:12px; color:#8a94a6; margin-bottom:6px; }
.admin-layout .dc-value { font-size:28px; font-weight:800; line-height:1.1; font-family:'DIN Alternate','Roboto',sans-serif; }
.admin-layout .dc-sub { font-size:12px; color:#a0a9b8; margin-top:6px; }
.admin-layout .dc-pulse .dc-value { animation:dcPulse 1.6s ease-in-out infinite; }
@keyframes dcPulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }

.admin-layout .dash-row { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:18px; }
.admin-layout .dash-col-2, .admin-layout .dash-col-1 { min-width:0; }
@media (max-width:1100px) { .admin-layout .dash-row { grid-template-columns:1fr; } }

.admin-layout .trend-chart { display:flex; align-items:flex-end; gap:10px; height:170px; padding-top:10px; }
.admin-layout .trend-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; }
.admin-layout .trend-bars { flex:1; display:flex; align-items:flex-end; gap:5px; width:100%; justify-content:center; }
.admin-layout .trend-bar { width:14px; min-height:2px; border-radius:3px 3px 0 0; transition:height .3s; }
.admin-layout .trend-post { background:#C0272D; }
.admin-layout .trend-comment { background:#94a3b8; }
.admin-layout .trend-label { font-size:11px; color:#8a94a6; }
.admin-layout .trend-legend { display:flex; align-items:center; gap:16px; margin-top:10px; font-size:12px; color:#6b7688; }
.admin-layout .tl-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; vertical-align:-1px; }
.admin-layout .tl-post { background:#C0272D; } .admin-layout .tl-comment { background:#94a3b8; }

.admin-layout .recent-list { display:flex; flex-direction:column; }
.admin-layout .recent-item { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid #f2f4f9; font-size:13px; }
.admin-layout .recent-item:last-child { border-bottom:none; }
.admin-layout .ri-cat { flex-shrink:0; padding:1px 8px; border-radius:4px; font-size:11px; font-weight:600; background:#eef1f6; color:#6b7688; }
.admin-layout .ri-guide { background:rgba(192,39,45,.1); color:#C0272D; }
.admin-layout .ri-vent { background:rgba(180,100,31,.12); color:#B4641F; }
.admin-layout .ri-observe { background:rgba(47,96,120,.12); color:#2F6078; }
.admin-layout .ri-title { flex:1; color:#2b3445; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-layout .ri-user { color:#8a94a6; font-size:12px; flex-shrink:0; }
.admin-layout .ri-time { color:#a0a9b8; font-size:12px; flex-shrink:0; }

.admin-layout .todo-list { display:flex; flex-direction:column; gap:8px; }
.admin-layout .todo-item { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border:1px solid #eef1f6; border-radius:8px; text-decoration:none; font-size:13px; color:#2b3445; transition:.15s; }
.admin-layout .todo-item:hover { border-color:#C0272D; background:#fff7f7; }
.admin-layout .todo-item.todo-red { border-color:rgba(220,38,38,.35); background:#fef5f5; color:#dc2626; font-weight:600; }

/* ---------- 表格 ---------- */
.admin-layout .data-table { width:100%; border-collapse:collapse; font-size:13px; }
.admin-layout .data-table thead th { background:#f7f9fc; color:#6b7688; font-weight:600; font-size:12px; text-align:left; padding:11px 14px; border-bottom:1px solid #e8ecf3; white-space:nowrap; }
.admin-layout .data-table tbody td { padding:11px 14px; border-bottom:1px solid #f2f4f9; color:#2b3445; vertical-align:middle; }
.admin-layout .data-table tbody tr:hover { background:#fafbfe; }
.admin-layout .data-table tbody tr:last-child td { border-bottom:none; }
.admin-layout .dt-title { max-width:320px; }
.admin-layout .dt-title a { color:#2b3445; text-decoration:none; font-weight:600; }
.admin-layout .dt-title a:hover { color:#C0272D; }
.admin-layout .dt-time { color:#8a94a6; font-size:12px; white-space:nowrap; }
.admin-layout .dt-actions { display:flex; gap:6px; flex-wrap:wrap; white-space:nowrap; }
.admin-layout .table-ops { white-space:nowrap; }
.admin-layout .table-ops .btn { margin-right:4px; }

/* ---------- 筛选栏 ---------- */
.admin-layout .filter-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }

/* ---------- 按钮（作用域） ---------- */
.admin-layout .btn, .admin-login-wrap .btn, .modal-overlay .btn { display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:8px 16px; border-radius:6px; border:1px solid transparent; font-size:13px; font-weight:500; cursor:pointer; transition:.15s; text-decoration:none; line-height:1.4; }
.admin-layout .btn:active, .admin-login-wrap .btn:active, .modal-overlay .btn:active { transform:translateY(1px); }
.admin-layout .btn-primary, .admin-login-wrap .btn-primary, .modal-overlay .btn-primary { background:#C0272D; border-color:#C0272D; color:#fff; }
.admin-layout .btn-primary:hover, .admin-login-wrap .btn-primary:hover, .modal-overlay .btn-primary:hover { background:#a82127; border-color:#a82127; }
.admin-layout .btn-ghost, .admin-login-wrap .btn-ghost, .modal-overlay .btn-ghost { background:#fff; border-color:#d5dbe5; color:#3d4757; }
.admin-layout .btn-ghost:hover, .admin-login-wrap .btn-ghost:hover, .modal-overlay .btn-ghost:hover { border-color:#C0272D; color:#C0272D; }
.admin-layout .btn-danger, .admin-login-wrap .btn-danger, .modal-overlay .btn-danger { background:#dc2626; border-color:#dc2626; color:#fff; }
.admin-layout .btn-danger:hover, .admin-login-wrap .btn-danger:hover, .modal-overlay .btn-danger:hover { background:#b91c1c; }
.admin-layout .btn-sm, .admin-login-wrap .btn-sm, .modal-overlay .btn-sm { padding:5px 11px; font-size:12px; border-radius:5px; }
.admin-layout .btn-lg, .admin-login-wrap .btn-lg, .modal-overlay .btn-lg { padding:12px 22px; font-size:15px; border-radius:8px; }
.admin-layout .btn-block, .admin-login-wrap .btn-block, .modal-overlay .btn-block { width:100%; }

/* ---------- 表单（作用域） ---------- */
.admin-layout .field, .admin-login-wrap .field, .modal-overlay .field { margin-bottom:14px; }
.admin-layout .field label, .admin-login-wrap .field label, .modal-overlay .field label { display:block; font-size:12px; font-weight:600; color:#6b7688; margin-bottom:6px; }
.admin-layout .input, .admin-login-wrap .input, .modal-overlay .input { width:100%; padding:9px 12px; border:1px solid #d5dbe5; border-radius:6px; font-size:13px; color:#2b3445; background:#fff; box-sizing:border-box; transition:.15s; outline:none; }
.admin-layout .input:focus, .admin-login-wrap .input:focus, .modal-overlay .input:focus { border-color:#C0272D; box-shadow:0 0 0 3px rgba(192,39,45,.12); }
.admin-layout .input::placeholder, .admin-login-wrap .input::placeholder, .modal-overlay .input::placeholder { color:#aab3c2; }
.admin-layout .input:disabled, .admin-login-wrap .input:disabled, .modal-overlay .input:disabled { background:#f4f6fa; color:#8a94a6; cursor:not-allowed; }
.admin-layout .input-sm, .admin-login-wrap .input-sm, .modal-overlay .input-sm { width:auto; padding:6px 10px; font-size:12px; }
.admin-layout .checkbox-group, .modal-overlay .checkbox-group { display:flex; flex-wrap:wrap; gap:8px 18px; padding:6px 0; }
.admin-layout .checkbox-item, .modal-overlay .checkbox-item { display:flex; align-items:center; gap:5px; font-size:13px; color:#3d4757; cursor:pointer; }
.admin-layout .checkbox-item input, .modal-overlay .checkbox-item input { width:15px; height:15px; accent-color:#C0272D; cursor:pointer; }

/* ---------- 标签（作用域） ---------- */
.admin-layout .tag, .modal-overlay .tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; margin-left:4px; background:#eef1f6; color:#6b7688; border:1px solid transparent; }
.admin-layout .tag-gold, .modal-overlay .tag-gold { background:#F5E6C8; color:#a87f0a; border-color:rgba(201,158,20,.25); }
.admin-layout .tag-red, .modal-overlay .tag-red { background:rgba(192,39,45,.1); color:#C0272D; border-color:rgba(192,39,45,.2); }
.admin-layout .tag-guide, .modal-overlay .tag-guide { background:rgba(192,39,45,.1); color:#C0272D; border-color:rgba(192,39,45,.2); }
.admin-layout .tag-vent, .modal-overlay .tag-vent { background:rgba(180,100,31,.12); color:#B4641F; border-color:rgba(180,100,31,.22); }
.admin-layout .tag-observe, .modal-overlay .tag-observe { background:rgba(47,96,120,.12); color:#2F6078; border-color:rgba(47,96,120,.22); }
.admin-layout .tag-log, .modal-overlay .tag-log { background:rgba(47,96,120,.1); color:#2F6078; border-color:rgba(47,96,120,.2); }
.admin-layout .tag-ok, .modal-overlay .tag-ok { background:rgba(34,154,81,.12); color:#1a9a51; border-color:rgba(34,154,81,.25); }
.admin-layout .tag-del, .modal-overlay .tag-del { background:rgba(200,45,45,.1); color:#c82d2d; border-color:rgba(200,45,45,.25); }
.admin-layout .tag-elite, .modal-overlay .tag-elite { background:rgba(201,158,20,.14); color:#a87f0a; border-color:rgba(201,158,20,.3); }
.admin-layout .lv-mini, .modal-overlay .lv-mini { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; margin-left:4px; background:#eef1f6; color:#6b7688; }
.admin-layout .lv-1, .modal-overlay .lv-1 { background:#8C8473; color:#fff; }
.admin-layout .lv-2, .modal-overlay .lv-2 { background:#7a8b9e; color:#fff; }
.admin-layout .lv-3, .modal-overlay .lv-3 { background:#4f7ba6; color:#fff; }
.admin-layout .lv-4, .modal-overlay .lv-4 { background:#c9a03a; color:#fff; }

/* ---------- 分页（后台专属） ---------- */
.admin-layout .pagination { display:flex; align-items:center; gap:12px; margin-top:18px; font-size:13px; color:#6b7688; flex-wrap:wrap; }
.admin-layout .pg-nav { display:inline-flex; gap:6px; flex-wrap:wrap; }
.admin-layout .pg-link { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 9px; border:1px solid #d5dbe5; border-radius:6px; color:#3d4757; font-size:12px; text-decoration:none; cursor:pointer; background:#fff; transition:.15s; }
.admin-layout .pg-link:hover { border-color:#C0272D; color:#C0272D; }
.admin-layout .pg-link.on { background:#C0272D; border-color:#C0272D; color:#fff; font-weight:600; }
.admin-layout .pg-dot { color:#a0a9b8; }

/* ---------- 弹窗（后台专属，挂 body） ---------- */
.modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; }
.modal-overlay .modal { width:100%; max-width:560px; max-height:90vh; overflow-y:auto; background:#fff; border-radius:12px; box-shadow:0 20px 60px rgba(15,23,42,.25); }
.modal-overlay .modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid #eef1f6; }
.modal-overlay .modal-head h3 { margin:0; font-size:15px; font-weight:700; color:#1f2632; }
.modal-overlay .modal-close { width:28px; height:28px; border:none; background:#f3f5f9; border-radius:50%; color:#6b7688; font-size:15px; cursor:pointer; line-height:1; transition:.15s; }
.modal-overlay .modal-close:hover { background:#fde8e8; color:#C0272D; }
.modal-overlay .modal-body { padding:20px 22px; }
.modal-overlay .modal-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* ---------- 登录页 ---------- */
.admin-login-wrap { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:40px 20px; background:linear-gradient(160deg,#f3f5f9 0%,#e8ecf3 100%); }
.admin-login-card { width:100%; max-width:400px; background:#fff; border-radius:14px; box-shadow:0 24px 60px rgba(15,23,42,.14); padding:36px 34px 30px; border-top:4px solid #C0272D; }
.alc-header { text-align:center; margin-bottom:26px; }
.alc-seal { width:58px; height:58px; margin:0 auto 14px; border-radius:50%; background:#C0272D; color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; font-family:'STSong','SimSun',serif; box-shadow:0 0 0 3px rgba(192,39,45,.3); }
.alc-header h1 { margin:0 0 6px; font-size:19px; font-weight:800; color:#1f2632; }
.alc-header p { margin:0; font-size:10px; color:#a0a9b8; letter-spacing:2px; }
.alc-hint { text-align:center; font-size:12px; color:#a0a9b8; margin-top:16px; }

/* ---------- 空态 / 加载（作用域） ---------- */
.admin-layout .empty, .admin-login-wrap .empty { padding:40px 20px; text-align:center; color:#a0a9b8; font-size:13px; }
.admin-layout .loading { display:flex; align-items:center; justify-content:center; padding:60px 0; }
.admin-layout .spinner { width:28px; height:28px; border:3px solid #e4e8f0; border-top-color:#C0272D; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.admin-layout .hint, .modal-overlay .hint { font-size:12px; color:#8a94a6; line-height:1.7; }
.admin-layout .muted, .modal-overlay .muted { color:#8a94a6; }

/* ---------- 移动端适配 ---------- */
@media (max-width:768px) {
  .admin-sidebar { position:static; width:100%; height:auto; max-height:48vh; }
  .admin-layout { flex-direction:column; }
  .admin-main { margin-left:0; }
  .admin-content { padding:14px; }
  .admin-layout .dash-cards { grid-template-columns:1fr 1fr; gap:10px; }
  .admin-layout .dc-value { font-size:22px; }
  .admin-topbar { padding:0 14px; }
}
@media (max-width:480px) {
  .admin-layout .dash-cards { grid-template-columns:1fr; }
  .admin-layout .filter-bar { flex-direction:column; align-items:stretch; }
  .admin-layout .filter-bar .input-sm { width:100%; }
  .admin-layout .data-table { font-size:12px; }
}