* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --green1:#1e9e57; --green2:#2fb06a; --green3:#8fe0b0;
  --grad:linear-gradient(135deg,#1e9e57 0%,#2fb06a 50%,#6fcf97 100%);
  --bg:#f3f7f4; --card:#ffffff; --line:#e2eae4; --txt:#1f2d24; --sub:#6b7a70;
  --danger:#e74c3c; --blue:#2980b9;
}
body{ font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; background:var(--bg); color:var(--txt); font-size:14px; }

/* ---------- 登录 ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--grad); padding:20px; }
.login-card{ width:380px; background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25); padding:34px 32px; }
.login-brand{ text-align:center; margin-bottom:26px; }
.brand-logo{ width:64px; height:64px; margin:0 auto 10px; border-radius:16px; background:var(--grad); color:#fff; font-size:34px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(30,158,87,.4); }
.login-brand h1{ font-size:19px; letter-spacing:0; line-height:1.4; }
.login-brand p{ color:var(--sub); margin-top:4px; font-size:13px; }
.login-form input{ width:100%; height:44px; border:1px solid var(--line); border-radius:8px; padding:0 14px; margin-bottom:14px; font-size:15px; outline:none; transition:.2s; }
.login-form input:focus{ border-color:var(--green2); box-shadow:0 0 0 3px rgba(47,176,106,.15); }
.btn-primary{ background:var(--grad); color:#fff; border:none; border-radius:8px; font-size:16px; font-weight:600; height:44px; cursor:pointer; }
.btn-block{ width:100%; }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }
.login-msg{ color:var(--danger); text-align:center; margin-top:12px; min-height:18px; font-size:13px; }

/* ---------- 布局 ---------- */
.app{ height:100vh; display:flex; flex-direction:column; }
.topbar{ height:58px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 20px; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo.small{ width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.2); font-size:20px; display:flex; align-items:center; justify-content:center; margin:0; }
.brand-name{ font-size:15px; font-weight:700; letter-spacing:0; }
.top-right{ display:flex; align-items:center; gap:12px; }
.top-user{ font-size:14px; opacity:.95; }
.btn-ghost{ background:rgba(255,255,255,.16); color:#fff; border:none; border-radius:8px; padding:8px 16px; cursor:pointer; font-size:13px; }
.btn-ghost:hover{ background:rgba(255,255,255,.3); }

.layout{ flex:1; display:flex; min-height:0; }
.sidebar{ width:200px; background:#fff; border-right:1px solid var(--line); padding:14px 10px; overflow:auto; }
.menu{ display:flex; flex-direction:column; gap:4px; }
.menu-item{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px; cursor:pointer; color:var(--txt); font-size:15px; transition:.15s; }
.menu-item:hover{ background:#eef7f0; }
.menu-item.active{ background:var(--grad); color:#fff; box-shadow:0 4px 12px rgba(30,158,87,.3); }
.menu-item .mi{ font-size:17px; }

.main{ flex:1; overflow:auto; padding:20px; }

/* ---------- 通用组件 ---------- */
.page-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.page-title{ font-size:20px; font-weight:700; }
.toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.card{ background:var(--card); border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.04); padding:16px; margin-bottom:18px; }
.btn{ border:none; border-radius:8px; padding:8px 14px; cursor:pointer; font-size:13px; transition:.15s; }
.btn-add{ background:var(--grad); color:#fff; font-weight:600; }
.btn-del{ background:#fdecea; color:var(--danger); border:1px solid #f5c6c0; }
.btn-save{ background:#fff4e0; color:#b9770e; border:1px solid #f2d9a7; font-weight:600; }
.btn-export{ background:#eaf4ff; color:var(--blue); border:1px solid #bcd9f0; }
.btn-print{ background:#f3f0ff; color:#6c4bd8; border:1px solid #d8cff0; }
.btn:hover{ filter:brightness(.97); }

/* 日期筛选 */
.filter{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.filter select,.filter input[type=date]{ height:34px; border:1px solid var(--line); border-radius:8px; padding:0 8px; font-size:13px; outline:none; background:#fff; }
.btn-query{ background:var(--green2); color:#fff; height:34px; }
.btn-clear{ background:#fff; color:var(--sub); border:1px solid var(--line); height:34px; }

/* 看板卡片 */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.kpi{ border-radius:12px; color:#fff; padding:18px; position:relative; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.kpi .kpi-name{ font-size:14px; opacity:.9; }
.kpi .kpi-num{ font-size:30px; font-weight:700; margin-top:8px; }
.kpi .kpi-sub{ font-size:12px; opacity:.85; margin-top:4px; }
.kpi-c-payable{ background:linear-gradient(135deg,#e74c3c,#f39c5a); }
.kpi-c-receivable{ background:linear-gradient(135deg,#2980b9,#54a7e0); }
.kpi-c-retail{ background:linear-gradient(135deg,#27ae60,#6fcf97); }
.kpi-c-expense{ background:linear-gradient(135deg,#8e44ad,#b06ae0); }

/* 表格 */
.table-wrap{ overflow:auto; border:1px solid var(--line); border-radius:10px; }
table.grid{ width:100%; border-collapse:collapse; background:#fff; min-width:640px; }
table.grid th{ background:#f0f6f2; position:sticky; top:0; font-weight:600; white-space:nowrap; }
table.grid th,table.grid td{ border-bottom:1px solid var(--line); border-right:1px solid #f0f4f1; padding:7px 9px; text-align:center; }
table.grid th:last-child,table.grid td:last-child{ border-right:none; }
table.grid td input,table.grid td select{ width:100%; border:1px solid transparent; background:transparent; padding:3px; font-size:13px; outline:none; border-radius:4px; text-align:center; }
table.grid td input:focus,table.grid td select:focus{ border-color:var(--green2); background:#fff; box-shadow:0 0 0 2px rgba(47,176,106,.15); }
table.grid tr:hover td{ background:#f7fbf8; }
table.grid td.serial{ text-align:center; color:var(--sub); }
td.center, th.center{ text-align:center !important; }
/* 右上角合计条 */
.table-top{ display:flex; justify-content:flex-end; padding:8px 4px 10px; }
.total-badge{ background:linear-gradient(135deg,#fdf6e3,#fdfaf1); border:1px solid #f2d9a7; color:#b9770e; padding:6px 18px; border-radius:8px; font-weight:700; font-size:15px; letter-spacing:1px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.total-badge b{ font-size:17px; }
.row-total{ background:#fdfaf1; font-weight:700; }
.row-total td{ color:#b9770e; }
.section-title{ font-size:16px; font-weight:700; margin:20px 0 10px; display:flex; align-items:center; gap:8px; }
.section-title::before{ content:""; width:4px; height:18px; background:var(--grad); border-radius:2px; }

/* 账号表 */
.account-table td{ vertical-align:middle; }
.tag{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; }
.tag-admin{ background:#fdecea; color:var(--danger); }
.tag-user{ background:#eaf4ff; color:var(--blue); }
.tag-on{ background:#e7f7ee; color:#1e9e57; }
.tag-off{ background:#f1f1f1; color:#888; }
.link-btn{ background:none; border:none; color:var(--green2); cursor:pointer; font-size:13px; padding:2px 4px; }
.link-btn:hover{ text-decoration:underline; }
.link-danger{ color:var(--danger); }

/* 表单 */
.form-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.form-field label{ display:block; font-size:12px; color:var(--sub); margin-bottom:4px; }
.form-field input,.form-field select{ width:100%; height:36px; border:1px solid var(--line); border-radius:8px; padding:0 10px; font-size:14px; outline:none; }
.form-field input:focus,.form-field select:focus{ border-color:var(--green2); }

/* 权限弹窗 */
.modal-mask{ position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal{ background:#fff; border-radius:14px; width:720px; max-width:94vw; max-height:88vh; display:flex; flex-direction:column; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.modal-head h3{ font-size:16px; }
.modal-close{ background:none; border:none; font-size:24px; cursor:pointer; color:var(--sub); line-height:1; }
.modal-body{ padding:16px 20px; overflow:auto; }
.modal-foot{ padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
.perm-sec{ margin-bottom:16px; }
.perm-sec h4{ font-size:13px; margin-bottom:8px; color:var(--sub); }
.perm-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:20px; padding:5px 12px; font-size:13px; cursor:pointer; background:#fff; user-select:none; }
.chip.on{ background:var(--grad); color:#fff; border-color:transparent; }

/* 打印 */
@media print{
  .topbar,.sidebar,.toolbar,.filter,.page-head .btn,.no-print,.modal-mask,#toast{ display:none !important; }
  .layout{ display:block; }
  .main{ padding:0; overflow:visible; }
  .card{ box-shadow:none; border:none; }
  .table-wrap{ overflow:visible; border:none; }
  body{ background:#fff; }
}

/* Toast */
.toast{ position:fixed; top:70px; left:50%; transform:translateX(-50%); background:#333; color:#fff; padding:10px 22px; border-radius:8px; opacity:0; transition:.3s; z-index:200; font-size:14px; pointer-events:none; }
.toast.show{ opacity:1; }
.toast.ok{ background:#1e9e57; }
.toast.err{ background:#e74c3c; }

.empty{ text-align:center; color:var(--sub); padding:30px; }
@media(max-width:900px){ .kpi-grid{ grid-template-columns:repeat(2,1fr);} .sidebar{ width:64px;} .menu-item span.mname{display:none;} }