/* ============ 后台样式 ============ */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
    background:#f0f2f5; color:#1a1a2e;
}
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; font-family:inherit; background:none; }
input,select,textarea { font-family:inherit; outline:none; }

/* ============ 登录页 ============ */
.login-wrap {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#5b8def 0%,#b76cff 100%);
    padding:20px;
}
.login-box {
    width:360px; max-width:90vw;
    background:#fff; border-radius:18px;
    padding:40px 32px; box-shadow:0 20px 60px rgba(0,0,0,0.2);
}
.login-box h1 { font-size:22px; text-align:center; margin-bottom:8px; color:#1a1a2e; }
.login-box .sub { text-align:center; color:#888; font-size:13px; margin-bottom:24px; }
.login-box label { display:block; font-size:13px; color:#555; margin:12px 0 6px; }
.login-box input {
    width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px;
    font-size:14px; transition:border-color .2s;
}
.login-box input:focus { border-color:#5b8def; }
.login-box button {
    width:100%; margin-top:20px; padding:11px;
    background:linear-gradient(135deg,#5b8def 0%,#b76cff 100%);
    color:#fff; border-radius:8px; font-size:15px;
}
.login-box .err { color:#e74c3c; font-size:13px; margin-top:12px; text-align:center; min-height:18px; }

/* ============ 后台布局 ============ */
.admin-layout { display:flex; min-height:100vh; }
.sidebar {
    width:220px; background:#1f2937; color:#cbd5e0;
    display:flex; flex-direction:column; flex-shrink:0;
}
.sidebar-logo { padding:22px 24px; font-size:18px; font-weight:600; color:#fff; border-bottom:1px solid #374151; }
.sidebar-menu { flex:1; padding:14px 0; }
.sidebar-menu a {
    display:flex; align-items:center; gap:10px;
    padding:11px 24px; color:#cbd5e0; font-size:14px;
    transition:background .15s, color .15s;
}
.sidebar-menu a:hover { background:#374151; color:#fff; }
.sidebar-menu a.active { background:#5b8def; color:#fff; }
.sidebar-menu .mi { font-size:16px; }
.sidebar-footer { padding:14px 24px; border-top:1px solid #374151; font-size:12px; color:#6b7280; }

.main-area { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.topbar-admin {
    background:#fff; padding:14px 28px;
    display:flex; justify-content:space-between; align-items:center;
    border-bottom:1px solid #e5e7eb;
}
.topbar-admin h2 { font-size:17px; color:#1a1a2e; }
.topbar-admin .user { display:flex; align-items:center; gap:12px; font-size:14px; color:#555; }
.topbar-admin .avatar {
    width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg,#5b8def 0%,#b76cff 100%);
    color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600;
}
.topbar-admin .logout { color:#e74c3c; font-size:13px; }
.content { flex:1; padding:24px 28px; overflow-y:auto; }

/* ============ 统计卡片 ============ */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card {
    background:#fff; border-radius:14px; padding:20px;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
    display:flex; align-items:center; gap:16px;
}
.stat-card .si {
    width:52px; height:52px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; color:#fff;
}
.stat-card .si.blue   { background:linear-gradient(135deg,#5b8def,#3b6fd9); }
.stat-card .si.green  { background:linear-gradient(135deg,#34d399,#10b981); }
.stat-card .si.orange { background:linear-gradient(135deg,#fbbf24,#f59e0b); }
.stat-card .si.purple { background:linear-gradient(135deg,#a78bfa,#8b5cf6); }
.stat-card .sn { font-size:24px; font-weight:600; color:#1a1a2e; line-height:1.2; }
.stat-card .sl { font-size:12px; color:#888; margin-top:2px; }

/* ============ 图表 ============ */
.chart-grid { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:24px; }
.card { background:#fff; border-radius:14px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
.card-title { font-size:15px; font-weight:600; color:#1a1a2e; margin-bottom:14px; }
.chart-row { display:flex; align-items:flex-end; gap:10px; height:200px; padding:10px 0; }
.chart-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.chart-bar { width:60%; background:linear-gradient(180deg,#5b8def,#3b6fd9); border-radius:6px 6px 0 0; min-height:4px; transition:height .4s; }
.chart-bar-label { font-size:11px; color:#888; }
.chart-bar-val { font-size:11px; color:#5b8def; font-weight:600; }

.donut { display:flex; align-items:center; justify-content:center; padding:20px 0; }
.donut-list { display:flex; flex-direction:column; gap:8px; margin-left:20px; font-size:13px; }
.donut-list .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }

/* ============ 表格 ============ */
.table-wrap { overflow-x:auto; }
table.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th, .data-table td { padding:11px 12px; text-align:left; border-bottom:1px solid #f0f0f0; }
.data-table th { color:#888; font-weight:600; background:#fafafa; }
.data-table tr:hover { background:#f9fafb; }
.tag { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; background:#e0e7ff; color:#3730a3; }
.tag.green { background:#dcfce7; color:#166534; }
.tag.orange { background:#fef3c7; color:#92400e; }
.tag.gray { background:#f3f4f6; color:#374151; }

/* ============ 表单 ============ */
.form-row { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; align-items:flex-end; }
.form-row .fg { flex:1; min-width:160px; }
.form-row label { display:block; font-size:13px; color:#555; margin-bottom:5px; }
.form-row input, .form-row select { width:100%; padding:9px 12px; border:1px solid #ddd; border-radius:8px; font-size:13px; }
.form-row input:focus, .form-row select:focus { border-color:#5b8def; }
.btn { padding:9px 18px; border-radius:8px; background:#5b8def; color:#fff; font-size:13px; transition:background .15s; }
.btn:hover { background:#3b6fd9; }
.btn-sec { background:#e5e7eb; color:#374151; }
.btn-danger { background:#fee2e2; color:#dc2626; }
.btn-danger:hover { background:#fecaca; }
.btn-sm { padding:5px 10px; font-size:12px; }

.section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.section-head h3 { font-size:16px; color:#1a1a2e; }
.empty { text-align:center; color:#999; padding:40px; font-size:14px; }

@media (max-width:980px) {
    .stat-grid { grid-template-columns:repeat(2,1fr); }
    .chart-grid { grid-template-columns:1fr; }
    .sidebar { width:60px; }
    .sidebar-logo { font-size:13px; padding:18px 8px; text-align:center; }
    .sidebar-menu a span:not(.mi) { display:none; }
}