/* ===== 后台管理系统样式 ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif; background:#f1f5f9; color:#1e293b; font-size:14px; }
a { text-decoration:none; color:inherit; }

/* 布局 */
.layout { display:flex; min-height:100vh; }
.sidebar { width:200px; background:#0f172a; color:#cbd5e1; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.brand { padding:20px 18px 2px; font-size:17px; font-weight:700; color:#fff; }
.brand-sub { padding:0 18px 14px; font-size:12px; color:#64748b; border-bottom:1px solid #1e293b; margin-bottom:10px; }
.nav { flex:1; padding:0 8px; }
.nav a { display:block; padding:10px 12px; border-radius:8px; margin-bottom:2px; font-size:14px; color:#94a3b8; }
.nav a:hover { background:#1e293b; color:#e2e8f0; }
.nav a.on { background:#0f766e; color:#fff; font-weight:600; }
.nav a.logout { color:#f87171; margin-top:8px; }
.user-info { padding:12px 16px; font-size:12px; color:#64748b; border-top:1px solid #1e293b; }

.main { flex:1; padding:24px 28px 40px; min-width:0; }

/* 页面标题 */
.page-title { font-size:18px; font-weight:700; margin-bottom:18px; }
.page-title .sub { font-size:12px; color:#94a3b8; font-weight:400; margin-left:8px; }

/* 提示 */
.flash { padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:14px; }
.flash-success { background:#dcfce7; color:#15803d; border:1px solid #bbf7d0; }
.flash-error { background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; }

/* 卡片 */
.card { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:18px; margin-bottom:18px; }
.card h3 { font-size:15px; margin-bottom:14px; }

/* 统计卡 */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px; }
.stat { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:16px; }
.stat .num { font-size:22px; font-weight:700; color:#0f172a; margin-top:6px; }
.stat .lbl { font-size:12px; color:#64748b; }
.stat .num.green { color:#16a34a; }
.stat .num.red { color:#dc2626; }
.stat .num.teal { color:#0f766e; }

/* 表格 */
.table-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; background:#fff; }
.tbl th, .tbl td { padding:10px 12px; border-bottom:1px solid #e2e8f0; text-align:left; font-size:13px; vertical-align:middle; }
.tbl th { background:#f8fafc; color:#475569; font-weight:600; white-space:nowrap; }
.tbl tr:hover td { background:#f8fafc; }
.tbl .thumb { width:52px; height:52px; object-fit:cover; border-radius:6px; background:#f1f5f9; display:block; }
.tbl .thumb-none { width:52px; height:52px; border-radius:6px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; font-size:10px; color:#94a3b8; }

/* 按钮 */
.btn { display:inline-block; background:#0f766e; color:#fff; border:none; padding:9px 18px; border-radius:8px; font-size:13px; cursor:pointer; }
.btn:hover { background:#115e59; }
.btn-sm { padding:5px 12px; font-size:12px; border-radius:6px; }
.btn-line { background:#fff; color:#334155; border:1px solid #cbd5e1; }
.btn-line:hover { background:#f8fafc; }
.btn-danger { background:#dc2626; }
.btn-danger:hover { background:#b91c1c; }
.btn-warn { background:#d97706; }
.btn-warn:hover { background:#b45309; }

/* 表单 */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; }
.form-grid .full { grid-column:1 / -1; }
.field label { display:block; font-size:13px; color:#475569; margin-bottom:6px; font-weight:600; }
.field input[type=text], .field input[type=password], .field input[type=number], .field input[type=date], .field select, .field textarea {
  width:100%; padding:9px 12px; border:1px solid #cbd5e1; border-radius:8px; font-size:14px; background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:#0f766e; box-shadow:0 0 0 2px rgba(15,118,110,.15); }
.field .hint { font-size:12px; color:#94a3b8; margin-top:4px; }
.field textarea { min-height:80px; resize:vertical; }

/* 筛选条 */
.filter-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:16px; }
.filter-bar .f-item label { display:block; font-size:12px; color:#64748b; margin-bottom:4px; }
.filter-bar input, .filter-bar select { padding:8px 12px; border:1px solid #cbd5e1; border-radius:8px; font-size:13px; background:#fff; }
.filter-bar .btn { padding:8px 18px; }

/* 分页 */
.pg { display:inline-block; padding:6px 12px; border:1px solid #e2e8f0; border-radius:6px; font-size:13px; color:#334155; background:#fff; }
.pg.on { background:#0f766e; color:#fff; border-color:#0f766e; }

/* 操作按钮组 */
.actions a { margin-right:8px; }
.actions a:last-child { margin-right:0; }

/* 图片预览 */
.img-preview { margin-top:10px; }
.img-preview img { max-width:160px; border-radius:8px; border:1px solid #e2e8f0; }

/* 登录页 */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#f1f5f9; }
.login-box { width:360px; background:#fff; border-radius:12px; box-shadow:0 4px 24px rgba(15,23,42,.08); padding:32px; }
.login-box h1 { font-size:20px; text-align:center; margin-bottom:6px; }
.login-box .sub { text-align:center; font-size:13px; color:#94a3b8; margin-bottom:24px; }
.login-box .field { margin-bottom:16px; }
.login-box .btn { width:100%; padding:11px; font-size:15px; }
.login-err { background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; border-radius:8px; padding:10px 14px; font-size:13px; margin-bottom:14px; }

/* 报表 */
.report-sum { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:20px; }
.report-sum .stat { border-left:4px solid #0f766e; }
.month-picker { display:flex; gap:10px; align-items:center; margin-bottom:20px; }
.month-picker input[type=month] { padding:8px 12px; border:1px solid #cbd5e1; border-radius:8px; font-size:14px; }

/* ===== 移动端自适应（≤768px） ===== */
@media (max-width: 768px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto; position: relative; top: 0;
    border-radius: 0 0 12px 12px; padding-bottom: 6px;
  }
  .brand { padding: 14px 16px 2px; font-size: 16px; }
  .brand-sub { padding: 0 16px 10px; margin-bottom: 6px; }
  .nav { display: flex; flex-wrap: wrap; padding: 4px 8px; gap: 4px; }
  .nav a { display: inline-block; margin-bottom: 0; padding: 8px 12px; font-size: 13px; }
  .nav a.logout { margin-top: 0; }
  .user-info { padding: 8px 16px; border-top: none; }
  .main { padding: 16px 14px 30px; }
  .page-title { font-size: 16px; margin-bottom: 14px; }
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .filter-bar { gap: 8px; }
  .filter-bar .f-item { flex: 1 1 45%; }
  .filter-bar .btn, .filter-bar .f-item { width: 100%; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .report-sum { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 14px; }
  .month-picker { flex-wrap: wrap; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .login-box { width: 100%; max-width: 360px; padding: 24px; }
  .detail { flex-direction: column; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat .num { font-size: 18px; }
  .tbl th, .tbl td { padding: 8px 8px; font-size: 12px; }
}