:root{

  --bg:#0f1118;

  --surface:#171a23;
  --card:#171a23;

  --surface2:#1e222d;

  --surface3:#272c3a;

  --border:#2c313f;

  --text-muted:#8a91a2;

  --text-secondary:#b0b8cc;

  --text-primary:#e8ecf3;

  --accent:#6366f1;

  --accent-glow:rgba(99,102,241,0.12);

  --success:#22c55e;

  --danger:#ef4444;

  --warning:#f59e0b;

  --info:#38bdf8;

  --radius:6px;

  --radius-lg:10px;

  --shadow:0 4px 16px rgba(0,0,0,0.25);

  --sidebar-w:240px;

}

*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,sans-serif}

body{background:var(--bg);color:var(--text-primary);font-size:14px;line-height:1.5}

button,input,select,textarea{font:inherit;color:inherit}

a{text-decoration:none;color:inherit}



/* 通用组件 */

.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}

.page-header h2{font-size:18px;font-weight:600}

.page-header .desc{font-size:12px;color:var(--text-muted);margin-top:2px}



.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:16px}

.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}

.stat-card .label{font-size:12px;color:var(--text-muted)}

.stat-card .value{font-size:22px;font-weight:700;margin-top:6px}



.search-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center}

.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}

table{width:100%;border-collapse:collapse}

th,td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--border)}

th{background:var(--surface2);font-weight:500;font-size:13px}

tr:hover{background:rgba(255,255,255,0.02)}



.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

.form-grid .full{grid-column:1/-1}

.form-group{display:flex;flex-direction:column;gap:6px}

.form-group label{font-size:13px;color:var(--text-secondary)}

.form-input{width:100%;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);outline:none;transition:.2s}

.form-input:focus{border-color:var(--accent)}

.req{color:var(--danger)}



.btn{padding:8px 14px;border-radius:var(--radius);border:none;cursor:pointer;transition:.2s;background:var(--surface3);color:var(--text-primary)}.btn:disabled{opacity:0.45;cursor:not-allowed}

.btn-primary{background:var(--accent);color:#fff}

.btn-secondary{background:var(--surface3);color:var(--text-primary)}

.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text-primary)}

.btn-xs{padding:4px 8px;font-size:12px}

.btn-sm{padding:6px 10px}

/* main.css — 补充 btn 颜色变体 */

.btn-success{background:var(--success);color:#fff}

.btn-success:hover{filter:brightness(1.1)}

.btn-danger{background:var(--danger);color:#fff}

.btn-danger:hover{filter:brightness(1.1)}

.btn-warning{background:var(--warning);color:#fff}

.btn-info{background:var(--info);color:#fff}

.btn-info:hover{filter:brightness(1.1)}



.badge{display:inline-block;padding:3px 8px;border-radius:4px;font-size:11px}

.badge.success{background:rgba(34,197,94,0.15);color:var(--success)}

.badge.danger{background:rgba(239,68,68,0.15);color:var(--danger)}

.badge.warning{background:rgba(245,158,11,0.15);color:var(--warning)}

.badge.info{background:rgba(56,189,248,0.15);color:var(--info)}



.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;background:var(--surface3);color:var(--text-secondary);margin:2px}



.pagination{display:flex;gap:6px;align-items:center;margin-top:16px}

.pg-btn{padding:6px 10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer}

.pg-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.pg-btn:disabled{opacity:0.4;cursor:not-allowed}



.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:3000;padding:20px}

.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:640px;max-height:90vh;display:flex;flex-direction:column}

.modal-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}

.modal-close{cursor:pointer;font-size:20px;color:var(--text-muted)}

.modal-body{padding:20px;overflow:auto;max-height:calc(90vh - 140px);-webkit-overflow-scrolling:touch}
/* d99：所有自定义遮罩弹窗盒子统一双向滚动，防止内容超长遮挡底部按钮 */
.modal-mask>div{max-height:90vh;overflow-y:auto;overflow-x:auto}
.modal-mask>div::-webkit-scrollbar{width:8px;height:8px}
.modal-mask>div::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px}
.modal-mask>div::-webkit-scrollbar-track{background:transparent}

.modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}



.img-upload{width:120px;height:120px;border:1px dashed var(--border);border-radius:var(--radius);position:relative;overflow:hidden;cursor:pointer}

.img-upload img{width:100%;height:100%;object-fit:cover}

.img-upload .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:12px}

.img-upload .rm{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:var(--danger);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;opacity:0;transition:.2s;z-index:20}

.img-upload:hover .rm{opacity:1}

.img-thumb{width:48px;height:48px;border-radius:var(--radius);object-fit:cover;cursor:pointer;border:1px solid var(--border)}

.img-preview{width:60px;height:60px;border-radius:var(--radius);object-fit:cover}



.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warning{color:var(--warning)}.text-muted{color:var(--text-muted)}

.money{color:var(--accent);font-weight:600}

.link-btn{color:var(--accent);cursor:pointer;font-size:12px;background:none;border:none}

.link-btn:hover{text-decoration:underline}



select, input, textarea {

  color: var(--text-primary,#e8e8e8) !important;

  background-color: var(--surface2,#232329) !important;

  border-color: var(--border,#3a3a44);

}


input::placeholder, textarea::placeholder {

  color: #7d7d88 !important;

  opacity: 1;

}

input[type="checkbox"], input[type="radio"] {

  color: #1a1a1a !important;

  background-color: #fff !important;

}

select {

  -webkit-appearance: menulist;

  -moz-appearance: menulist;

  appearance: menulist;

}



.bal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}

.bal-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center}

.bal-card .bl{font-size:11px;color:var(--text-muted)}.bal-card .bv{font-size:20px;font-weight:700;margin-top:4px}



.sidebar-section{padding:8px 16px 4px;margin-top:6px}

.sidebar-section-title{font-size:14px;color:var(--text-muted);letter-spacing:.5px;font-weight:700}



.nav{padding:9px 16px 9px 20px;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--text-secondary);transition:.15s;border-left:3px solid transparent;font-size:14.5px;font-weight:500;margin:1px 0;}

.nav.active{color:var(--accent);border-left-color:var(--accent);background:var(--accent-glow);}



.toast-box{position:fixed;top:20px;right:20px;z-index:4000;display:flex;flex-direction:column;gap:8px}

.toast{padding:12px 20px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);font-size:13px;transform:translateX(120%);transition:.3s;max-width:380px}

.toast.active{transform:translateX(0)}

.toast.success{border-left:3px solid var(--success)}.toast.error{border-left:3px solid var(--danger)}.toast.warning{border-left:3px solid var(--warning)}



.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}

.loading-state{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--text-muted)}

.spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;margin-right:10px}

@keyframes spin{to{transform:rotate(360deg)}}

.btn-gap{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.modal-input {

  width: 100%;

  padding: 8px 12px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  font-size: 14px;

  box-sizing: border-box;

  outline: none;

  transition: border-color 0.2s;

  background:var(--surface2);

}

.modal-input:focus {

  border-color: var(--accent);

}

/* ★ UI 精细化：表格 hover / 骨架屏 / 通知红点（新增） */

.table tbody tr:hover { background: rgba(0,0,0,0.02); }

.skeleton { background: linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%); background-size:200% 100%; animation:skeletonShimmer 1.4s infinite; border-radius:4px; }

@keyframes skeletonShimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

.badge-dot { display:none; background:#e53935; color:#fff; font-size:11px; min-width:18px; height:18px; line-height:18px; text-align:center; border-radius:9px; padding:0 5px; margin-left:6px; position:relative; top:-1px; }


/* ===== UI 精细化：空状态图标 + badge 默认灰色 ===== */
.empty-state::before {
    content: '📭';
    display: block;
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}
.badge.default{background:rgba(150,150,150,0.15);color:var(--text-muted)}
/* ===== 通用批量操作栏 ===== */
.batch-bar{display:flex;align-items:center;gap:14px;padding:10px 14px;margin-bottom:12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap}
.batch-bar-all{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary);cursor:pointer}
input[type="checkbox"]{width:15px;height:15px;cursor:pointer;accent-color:var(--accent,#6c5ce7);vertical-align:middle;background:#fff !important;border:1px solid var(--border,#888)}
.batch-bar-all input[type="checkbox"],.batch-item[type="checkbox"]{width:15px;height:15px;cursor:pointer;accent-color:var(--accent);vertical-align:middle}
.batch-count{font-size:12px;color:var(--text-muted)}
.batch-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ===== 2026-10-01 复选框强制可见（防覆盖兜底） ===== */
input[type="checkbox"], input[type="radio"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  width: 15px !important;
  height: 15px !important;
  border: 1px solid #888 !important;
  border-radius: 3px !important;
  background: #fff !important;
  accent-color: #6c5ce7 !important;
  vertical-align: middle !important;
}
input[type="radio"] { border-radius: 50% !important; }

/* ===================== 三层总分导航（2026-10-02） ===================== */
.sidebar-l2-title{font-size:12.5px;color:#5a6b8c;padding:7px 16px 2px 34px;font-weight:700;opacity:.95;letter-spacing:.5px}
/* L2 折叠（2026-10-02） */
.l2-toggle{cursor:pointer;display:flex;align-items:center;gap:5px;user-select:none}
.l2-toggle:hover{color:var(--accent)}
.l2-arrow{font-size:9px;width:10px;flex:none}
.l2-group.l2-collapsed .l2-body{display:none}
.l1-body .nav{padding-left:42px}
/* 一级导航折叠（d21） */
.l1-toggle{cursor:pointer;display:flex;align-items:center;gap:5px;user-select:none}
.l1-toggle:hover{color:var(--accent)}
.l1-arrow{font-size:9px;width:10px;flex:none}
.l1-group.l1-collapsed .l1-body{display:none}
.sheet-bar{display:flex;gap:2px;padding:0 0 12px 0;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto}
.sheet-tab{padding:8px 16px;font-size:13px;color:var(--text-secondary);cursor:pointer;border-radius:6px 6px 0 0;border:1px solid transparent;white-space:nowrap;transition:.15s}
.sheet-tab:hover{background:var(--accent-glow)}
.sheet-tab-active{color:var(--accent);font-weight:600;background:var(--surface);border-color:var(--border);border-bottom-color:var(--bg)}
.sheet-section{margin-bottom:20px}

/* ★ 下拉选项深色适配（20261004d171 修复：此前被上方白底!important规则压制导致下拉看不清） */
select option, select optgroup {
  background-color: #232633 !important;
  color: #e5e6eb !important;
}

/* ★ 轻量响应式适配（20261004d159）：仅窄屏(≤768px)生效，电脑端样式完全不受影响 */
#mobileMenuBtn{display:none}
@media (max-width: 768px) {
  /* 侧边栏收成抽屉 */
  #sidebar{transform:translateX(-105%) !important;transition:transform .25s ease;width:min(78vw,300px) !important;box-shadow:none}
  #sidebar.open{transform:translateX(0) !important;box-shadow:8px 0 24px rgba(0,0,0,.45)}
  /* 汉堡按钮：固定左上角，盖在内容上 */
  #mobileMenuBtn{display:flex;align-items:center;justify-content:center;position:fixed;top:10px;left:10px;z-index:2000;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);font-size:20px;cursor:pointer}
  /* 主区域全宽 */
  main{margin-left:0 !important;padding:60px 12px 24px !important}
  /* 弹窗全屏化 */
  .modal-overlay{padding:0 !important}
  .modal{max-width:100vw !important;width:100vw !important;height:100vh !important;max-height:100vh !important;border-radius:0 !important;border:none}
  .modal-body{max-height:calc(100vh - 132px) !important}
  .modal-mask>div{max-height:100vh !important;width:100vw !important}
  /* 表单/余额卡片单列 */
  .form-grid{grid-template-columns:1fr !important}
  .bal-cards{grid-template-columns:1fr 1fr !important}
  /* 表格容器允许横向滑动（.table-wrap 本身已有 overflow-x:auto，这里保证内边距够小） */
  .table-wrap{margin:0 -2px}
  /* 统计卡自适应 */
  .stat-card{padding:12px}
  /* 页头堆叠 */
  .page-header{flex-direction:column;align-items:flex-start !important;gap:8px}
  /* toast 不超出屏 */
  .toast-box{max-width:92vw;left:50%;transform:translateX(-50%)}
}