/* =========================================================
   GHXi Admin · 现代科技风格主题（深色）
   独立于前台 style.css，仅用于后台
   ========================================================= */
:root {
  --bg-0:#070b16;            /* 最底层背景 */
  --bg-1:#0d1322;           /* 面板背景 */
  --bg-2:#131c30;           /* 卡片背景 */
  --bg-3:#1a2740;           /* 悬浮/输入 */
  --border:#1f2c47;
  --border-soft:rgba(255,255,255,.06);
  --text-1:#e8eefb;         /* 主文本 */
  --text-2:#94a6c8;         /* 次文本 */
  --text-3:#5b6a8c;         /* 弱文本 */
  --accent:#22d3ee;         /* 青 */
  --accent-2:#6366f1;       /* 靛 */
  --accent-3:#a855f7;       /* 紫 */
  --success:#34d399;
  --warning:#fbbf24;
  --danger:#f87171;
  --grad:linear-gradient(135deg,#22d3ee 0%,#6366f1 100%);
  --grad-soft:linear-gradient(135deg,rgba(34,211,238,.15),rgba(99,102,241,.15));
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  --glow:0 0 0 1px rgba(34,211,238,.25),0 8px 30px -8px rgba(34,211,238,.25);
  --font:'Segoe UI',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family:var(--font);
  background:
    radial-gradient(1200px 600px at 85% -10%,rgba(99,102,241,.12),transparent 60%),
    radial-gradient(900px 500px at 0% 110%,rgba(34,211,238,.10),transparent 55%),
    var(--bg-0);
  color:var(--text-1);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a { color:inherit; text-decoration:none; }
::selection { background:rgba(34,211,238,.3); }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:var(--bg-3); border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:#27375a; }
::-webkit-scrollbar-track { background:transparent; }

/* =========================================================
   登录页
   ========================================================= */
.login-wrap {
  min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr;
  position:relative; overflow:hidden;
}
.login-brand {
  position:relative; padding:56px 60px; display:flex; flex-direction:column;
  justify-content:space-between;
  background:
    radial-gradient(700px 400px at 30% 20%,rgba(34,211,238,.18),transparent 60%),
    radial-gradient(600px 500px at 80% 90%,rgba(168,85,247,.18),transparent 60%),
    linear-gradient(160deg,#0b1226,#0a0f1f);
  border-right:1px solid var(--border);
  overflow:hidden;
}
.login-brand::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:40px 40px; mask:radial-gradient(circle at 50% 40%,#000,transparent 75%);
}
.brand-orb { position:absolute; width:340px; height:340px; right:-80px; top:-80px;
  background:var(--grad); border-radius:50%; filter:blur(90px); opacity:.35; animation:float 9s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(26px)} }
.brand-logo { font-size:1.5rem; font-weight:800; letter-spacing:.5px; z-index:1; }
.brand-logo span { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-headline { z-index:1; }
.brand-headline h1 { font-size:2.4rem; line-height:1.2; margin-bottom:14px; font-weight:800; }
.brand-headline p { color:var(--text-2); max-width:420px; }
.brand-feats { z-index:1; display:flex; flex-direction:column; gap:14px; }
.brand-feats li { list-style:none; display:flex; align-items:center; gap:12px; color:var(--text-2); }
.brand-feats .ic { width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
  background:var(--grad-soft); color:var(--accent); font-size:1rem; }

.login-formside { display:grid; place-items:center; padding:40px 24px; }
.login-card {
  width:100%; max-width:380px; background:var(--bg-1);
  border:1px solid var(--border); border-radius:20px; padding:38px 34px;
  box-shadow:var(--shadow); backdrop-filter:blur(6px);
  animation:cardIn .5s cubic-bezier(.2,.8,.2,1);
}
@keyframes cardIn { from{opacity:0;transform:translateY(16px) scale(.98)} to{opacity:1;transform:none} }
.login-card h2 { font-size:1.35rem; margin-bottom:4px; }
.login-card .sub { color:var(--text-3); font-size:.85rem; margin-bottom:24px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:.82rem; color:var(--text-2); margin-bottom:7px; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:11px 13px; background:var(--bg-2); color:var(--text-1);
  border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.9rem;
  font-family:inherit; transition:border-color .2s,box-shadow .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(34,211,238,.15);
}
.form-group textarea { resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:var(--radius-sm); border:1px solid transparent;
  font-size:.9rem; font-weight:600; cursor:pointer; transition:transform .12s,box-shadow .2s,background .2s;
  font-family:inherit; color:var(--text-1);
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--grad); color:#06121f; box-shadow:0 8px 22px -8px rgba(34,211,238,.6); }
.btn-primary:hover { box-shadow:0 12px 28px -8px rgba(34,211,238,.7); transform:translateY(-1px); }
.btn-outline { background:transparent; border-color:var(--border); color:var(--text-2); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-danger { background:rgba(248,113,113,.12); color:var(--danger); border-color:rgba(248,113,113,.3); }
.btn-danger:hover { background:rgba(248,113,113,.2); }
.btn-success { background:rgba(52,211,153,.14); color:var(--success); border-color:rgba(52,211,153,.3); }
.btn-sm { padding:7px 12px; font-size:.8rem; }
.btn[disabled] { opacity:.6; cursor:not-allowed; }

.error-text { color:var(--danger); font-size:.82rem; margin-bottom:12px; min-height:1em; }
.login-hint { margin-top:18px; font-size:.8rem; color:var(--text-3); text-align:center; line-height:1.7; }
.login-hint b { color:var(--text-2); }
.spinner { width:15px; height:15px; border:2px solid rgba(6,18,31,.35); border-top-color:#06121f; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* =========================================================
   后台主框架
   ========================================================= */
.admin-wrapper { display:flex; min-height:100vh; }

.admin-sidebar {
  width:256px; flex-shrink:0; background:var(--bg-1);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; transition:transform .3s ease; z-index:40;
}
.admin-logo {
  height:64px; display:flex; align-items:center; gap:10px; padding:0 22px;
  font-weight:800; font-size:1.05rem; border-bottom:1px solid var(--border);
}
.admin-logo .mark { width:30px; height:30px; border-radius:9px; background:var(--grad);
  display:grid; place-items:center; font-size:1rem; box-shadow:var(--glow); }
.admin-nav { padding:14px 12px; overflow-y:auto; flex:1; }
.admin-nav-group { margin-bottom:16px; }
.admin-nav-label { font-size:.7rem; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--text-3); padding:0 12px; margin-bottom:8px; }
.admin-nav-item {
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  color:var(--text-2); font-size:.9rem; cursor:pointer; position:relative;
  transition:background .18s,color .18s,transform .18s; margin-bottom:2px;
}
.admin-nav-item:hover { background:var(--bg-2); color:var(--text-1); }
.admin-nav-item.active {
  color:#fff; background:var(--grad-soft);
}
.admin-nav-item.active::before {
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:3px; background:var(--grad); box-shadow:0 0 12px var(--accent);
}
.admin-nav-item .num { margin-left:auto; font-size:.72rem; background:var(--bg-3);
  padding:1px 8px; border-radius:20px; color:var(--text-3); }
.sidebar-foot { padding:14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.sidebar-foot .av { width:34px; height:34px; border-radius:50%; background:var(--grad); display:grid; place-items:center; color:#06121f; font-weight:700; }

.admin-main { flex:1; min-width:0; display:flex; flex-direction:column; }

.admin-topbar {
  height:64px; sticky; position:sticky; top:0; z-index:30; display:flex; align-items:center;
  justify-content:space-between; padding:0 26px;
  background:rgba(13,19,34,.8); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
.admin-topbar h2 { font-size:1.1rem; font-weight:700; }
.admin-topbar .right { display:flex; align-items:center; gap:12px; }
.admin-topbar .view-site { color:var(--text-2); font-size:.82rem; padding:7px 12px; border:1px solid var(--border); border-radius:9px; transition:.2s; }
.admin-topbar .view-site:hover { color:var(--accent); border-color:var(--accent); }
.menu-toggle { display:none; background:var(--bg-2); border:1px solid var(--border); color:var(--text-1);
  width:38px; height:38px; border-radius:10px; cursor:pointer; font-size:1.1rem; }

.admin-content { padding:26px; }
.admin-page { animation:fade .35s ease; }
@keyframes fade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ---------- 卡片/面板 ---------- */
.admin-panel {
  background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius);
  margin-bottom:22px; overflow:hidden; box-shadow:var(--shadow);
}
.panel-header { display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border); }
.panel-header h3 { font-size:1rem; font-weight:700; display:flex; align-items:center; gap:9px; }
.panel-header h3::before { content:''; width:4px; height:16px; border-radius:3px; background:var(--grad); }
.panel-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- 统计卡 ---------- */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px; }
.stat-card {
  position:relative; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; overflow:hidden; transition:transform .2s,box-shadow .2s,border-color .2s;
}
.stat-card:hover { transform:translateY(-3px); border-color:rgba(34,211,238,.35); box-shadow:var(--glow); }
.stat-card::after { content:''; position:absolute; right:-30px; top:-30px; width:110px; height:110px;
  background:var(--grad); opacity:.10; border-radius:50%; filter:blur(8px); }
.stat-top { display:flex; align-items:center; justify-content:space-between; }
.stat-ic { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:1.2rem; }
.stat-green .stat-ic { background:rgba(52,211,153,.14); color:var(--success); }
.stat-blue  .stat-ic { background:rgba(34,211,238,.14); color:var(--accent); }
.stat-red   .stat-ic { background:rgba(248,113,113,.14); color:var(--danger); }
.stat-orange .stat-ic { background:rgba(251,191,36,.14); color:var(--warning); }
.stat-value { font-size:1.9rem; font-weight:800; margin-top:14px; letter-spacing:.5px; }
.stat-label { color:var(--text-2); font-size:.82rem; margin-top:2px; }
.trend { font-size:.76rem; margin-top:8px; color:var(--text-3); }
.trend .up { color:var(--success); }
.spark { width:100%; height:34px; margin-top:6px; display:block; }

/* ---------- 图表区 ---------- */
.dash-row { display:grid; grid-template-columns:1.5fr 1fr; gap:22px; margin-bottom:22px; }
.chart-box { padding:18px 20px; }
.chart-title { font-size:.92rem; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.chart-title::before { content:''; width:4px; height:15px; border-radius:3px; background:var(--grad); }
.area-chart { width:100%; height:200px; display:block; }
.bar-row { display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.bar-row .lab { width:72px; font-size:.8rem; color:var(--text-2); flex-shrink:0; text-align:right; }
.bar-track { flex:1; height:9px; background:var(--bg-3); border-radius:6px; overflow:hidden; }
.bar-fill { height:100%; border-radius:6px; background:var(--grad); width:0; transition:width 1s cubic-bezier(.2,.8,.2,1); }
.bar-row .val { width:30px; font-size:.78rem; color:var(--text-3); }

/* ---------- 表格 ---------- */
.admin-table { width:100%; border-collapse:collapse; font-size:.86rem; }
.admin-table th { text-align:left; padding:12px 16px; color:var(--text-3); font-weight:600;
  font-size:.76rem; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border); }
.admin-table td { padding:12px 16px; border-bottom:1px solid var(--border-soft); color:var(--text-2); }
.admin-table tbody tr { transition:background .15s; }
.admin-table tbody tr:hover { background:var(--bg-2); }
.admin-table a { color:var(--accent); }
.thumb-cell img { width:44px; height:44px; border-radius:8px; object-fit:cover; background:var(--bg-3); }
.status-pill { display:inline-block; padding:2px 10px; border-radius:20px; font-size:.74rem; font-weight:600; }
.status-pill.published { background:rgba(52,211,153,.14); color:var(--success); }
.status-pill.draft { background:rgba(251,191,36,.14); color:var(--warning); }
.empty-row td { text-align:center; color:var(--text-3); padding:30px; }

/* ---------- 标签云 ---------- */
.tag-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px;
  font-size:.84rem; border:1px solid var(--border); background:var(--bg-2); color:var(--text-2); }
.tag-chip .c { color:var(--text-3); font-size:.76rem; }

/* ---------- 弹窗 ---------- */
.form-modal-overlay {
  position:fixed; inset:0; background:rgba(4,8,16,.66); backdrop-filter:blur(4px);
  display:none; align-items:flex-start; justify-content:center; z-index:100; padding:40px 16px; overflow-y:auto;
}
.form-modal-overlay.show { display:flex; animation:fade .25s ease; }
.form-modal { width:100%; max-width:560px; background:var(--bg-1); border:1px solid var(--border);
  border-radius:16px; box-shadow:0 24px 60px -20px rgba(0,0,0,.8); animation:modalIn .3s cubic-bezier(.2,.8,.2,1); }
@keyframes modalIn { from{opacity:0;transform:translateY(20px) scale(.98)} to{opacity:1;transform:none} }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); }
.modal-header h3 { font-size:1.05rem; }
.modal-close { background:none; border:none; color:var(--text-3); font-size:1.6rem; cursor:pointer; line-height:1; transition:color .2s; }
.modal-close:hover { color:var(--danger); }
.modal-body { padding:20px 22px; max-height:62vh; overflow-y:auto; }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--border); }

/* ---------- Toast ---------- */
.toast-wrap { position:fixed; top:18px; right:18px; z-index:200; display:flex; flex-direction:column; gap:10px; }
.toast { min-width:240px; max-width:340px; padding:13px 16px; border-radius:12px; background:var(--bg-2);
  border:1px solid var(--border); box-shadow:var(--shadow); display:flex; align-items:flex-start; gap:11px;
  font-size:.86rem; animation:toastIn .3s cubic-bezier(.2,.8,.2,1); }
.toast.out { animation:toastOut .3s ease forwards; }
@keyframes toastIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:none} }
@keyframes toastOut { to{opacity:0;transform:translateX(40px)} }
.toast .ic { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.8rem; flex-shrink:0; }
.toast.success .ic { background:rgba(52,211,153,.16); color:var(--success); }
.toast.error .ic { background:rgba(248,113,113,.16); color:var(--danger); }
.toast.info .ic { background:rgba(34,211,238,.16); color:var(--accent); }

/* ---------- 响应式 ---------- */
@media (max-width:1100px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .dash-row { grid-template-columns:1fr; }
}
@media (max-width:860px) {
  .login-wrap { grid-template-columns:1fr; }
  .login-brand { display:none; }
  .admin-sidebar { position:fixed; left:0; top:0; transform:translateX(-100%); }
  .admin-sidebar.open { transform:none; box-shadow:0 0 60px rgba(0,0,0,.6); }
  .menu-toggle { display:block; }
  .admin-content { padding:18px; }
  .admin-topbar { padding:0 16px; }
}
@media (max-width:560px) {
  .stats-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .login-card { padding:30px 22px; }
}