/* ============ 太阳红肉铺账目系统 · 现代化样式 ============ */
:root{
  --brand:#c0392b; --brand-2:#e67e22; --brand-soft:#fdf1ee;
  --ink:#1f2933; --ink-2:#5f6b7a; --ink-3:#98a2b3;
  --bg:#f6f7fb; --card:#ffffff; --line:#edf0f5; --line-2:#e3e8f0;
  --ok:#16a34a; --warn:#d97706; --bad:#dc2626; --info:#2563eb;
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.06);
  --shadow-lg:0 8px 32px rgba(16,24,40,.10);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter","PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- 顶部导航 ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:14px 28px;
  background:linear-gradient(120deg,#b93a2b 0%,#c0392b 45%,#d35400 100%);
  box-shadow:0 4px 20px rgba(185,58,43,.28);
}
.topbar .brand{
  display:flex; align-items:center; gap:10px;
  color:#fff; font-weight:800; font-size:19px; letter-spacing:.3px; text-decoration:none;
}
.topbar .brand:hover{text-decoration:none;}
.topbar .brand .sun{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(4px);
  font-size:18px;
}
.topbar .links{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto;}
.topbar .links a{
  color:rgba(255,255,255,.82); font-size:14px; font-weight:500;
  padding:8px 14px; border-radius:10px; transition:all .18s ease;
}
.topbar .links a:hover{background:rgba(255,255,255,.16); color:#fff; text-decoration:none;}

/* ---------- 布局 ---------- */
.wrap{max-width:1120px; margin:28px auto; padding:0 20px 60px;}

/* ---------- 卡片 ---------- */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px; margin-bottom:20px;
  box-shadow:var(--shadow);
}
.card h2{
  margin:0 0 16px; font-size:16px; font-weight:700; color:var(--ink);
  display:flex; align-items:center; gap:8px;
}
.card h2::before{
  content:""; width:4px; height:18px; border-radius:3px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
}
.card h3{font-size:13px; color:var(--ink-2); margin:14px 0 8px; font-weight:600;}

/* ---------- 数据卡 ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px;}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 16px; text-align:center; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.stat:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.stat .num{font-size:26px; font-weight:800; letter-spacing:-.5px;
  background:linear-gradient(120deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.stat .lbl{font-size:12px; color:var(--ink-3); margin-top:6px; font-weight:500;}

/* ---------- 表格 ---------- */
table{width:100%; border-collapse:separate; border-spacing:0; font-size:14px;}
th{
  text-align:center; font-size:12px; font-weight:600; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.5px;
  padding:10px 12px; border-bottom:1px solid var(--line-2);
  background:var(--bg); position:sticky; top:0;
}
td{padding:12px; text-align:center; border-bottom:1px solid var(--line); color:var(--ink);}
tbody tr{transition:background .15s ease;}
tbody tr:hover{background:var(--brand-soft);}
tbody tr:last-child td{border-bottom:none;}
th.l,td.l{text-align:left;}

/* ---------- 表单控件 ---------- */
input,select,textarea{
  font-size:14px; font-family:inherit; color:var(--ink);
  padding:9px 13px; border:1.5px solid var(--line-2); border-radius:var(--radius-sm);
  background:#fff; outline:none; transition:all .18s ease; min-width:0;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(192,57,43,.12);
}
input::placeholder{color:var(--ink-3);}
button{
  font-size:14px; font-weight:600; font-family:inherit; cursor:pointer;
  padding:9px 18px; border:none; border-radius:var(--radius-sm);
  background:linear-gradient(120deg,var(--brand),#a93226); color:#fff;
  box-shadow:0 2px 8px rgba(192,57,43,.25); transition:all .18s ease;
}
button:hover{transform:translateY(-1px); box-shadow:0 4px 14px rgba(192,57,43,.35); opacity:.96;}
button:active{transform:translateY(0);}
button.gray{background:#fff; color:var(--ink-2); border:1.5px solid var(--line-2); box-shadow:none;}
button.gray:hover{border-color:var(--brand); color:var(--brand); box-shadow:none;}
button.small{padding:5px 12px; font-size:13px;}

/* ---------- 徽章 ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 11px; border-radius:999px; font-size:12px; font-weight:600;
  background:#f1f3f7; color:var(--ink-2);
}
.badge.green{background:#e8f7ee; color:var(--ok);}
.badge.red{background:#fdecec; color:var(--bad);}
.badge.amber{background:#fef3e2; color:var(--warn);}
.badge.blue{background:#e8f0fe; color:var(--info);}

/* ---------- 工具类 ---------- */
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.muted{color:var(--ink-3); font-size:13px;}
.divider{height:1px; background:var(--line); margin:18px 0;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px;}

/* ---------- 空状态 ---------- */
.empty{
  text-align:center; padding:48px 20px; color:var(--ink-3);
}
.empty .icon{font-size:42px; margin-bottom:12px; opacity:.5;}

/* ---------- 图片缩略 ---------- */
.thumb{
  border-radius:var(--radius-sm); border:1px solid var(--line-2);
  transition:transform .18s ease;
}
.thumb:hover{transform:scale(1.01);}

/* ---------- 移动端 ---------- */
@media (max-width:640px){
  body{font-size:14px;}
  .topbar{padding:12px 16px; gap:10px;}
  .topbar .links{margin-left:0; width:100%;}
  .topbar .links a{padding:7px 10px; font-size:13px;}
  .wrap{margin:16px auto; padding:0 12px 40px;}
  .card{padding:16px; border-radius:14px;}
  th,td{padding:9px 8px; font-size:12.5px;}
  .grid-2{grid-template-columns:1fr;}
  .hide-sm{display:none;}
  .stat .num{font-size:22px;}
  input,select,textarea,button{font-size:15px; padding:10px 13px;} /* 移动端加大触控 */
}