*{margin:0;padding:0;box-sizing:border-box;}

body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:#f0f2f5;color:#333;font-size:14px;}

/* ===== 登录页 ===== */

.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#c0392b 0%,#8e44ad 100%);}

.login-box{width:400px;padding:40px;background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.3);}

.login-box h2{text-align:center;color:#c0392b;margin-bottom:8px;font-size:22px;}

.login-box .sub{text-align:center;color:#999;margin-bottom:28px;font-size:13px;}

.login-box .row{margin-bottom:18px;}

.login-box label{display:block;margin-bottom:6px;font-weight:600;font-size:13px;color:#555;}

.login-box input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;outline:none;transition:border-color .2s;}

.login-box input:focus{border-color:#c0392b;box-shadow:0 0 0 2px rgba(192,57,43,0.1);}

.btn{padding:8px 20px;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s;display:inline-flex;align-items:center;gap:4px;width:auto;}.card>.btn,.card>div>.btn{margin-right:8px;display:inline-flex;}

.btn-primary{background:#c0392b;color:#fff;}.btn-primary:hover{background:#a93226;}

.btn-success{background:#27ae60;color:#fff;}.btn-success:hover{background:#219a52;}

.btn-warning{background:#f39c12;color:#fff;}.btn-warning:hover{background:#d68910;}

.btn-danger{background:#e74c3c;color:#fff;}.btn-danger:hover{background:#c0392b;}

.btn-info{background:#3498db;color:#fff;}.btn-info:hover{background:#2980b9;}

.btn-accent{background:#8e44ad;color:#fff;}.btn-accent:hover{background:#7d3c98;}

.btn-sm{padding:4px 10px;font-size:12px;}

.btn-block{width:100%;justify-content:center;padding:12px;font-size:15px;}

.login-msg{color:#c0392b;text-align:center;margin-top:12px;font-size:13px;min-height:20px;}

/* ===== 主布局 ===== */

.app{display:none;height:100vh;}

.topbar{height:56px;background:#fff;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;box-shadow:0 1px 4px rgba(0,0,0,0.05);}

.topbar .logo{font-size:16px;font-weight:700;color:#c0392b;}

.topbar .logo span{color:#333;font-weight:400;}

.topbar .right{display:flex;align-items:center;gap:16px;}

.topbar .right .user-info{color:#666;font-size:13px;}

.topbar .right .btn-logout{cursor:pointer;color:#999;font-size:13px;padding:4px 8px;border-radius:4px;border:1px solid #ddd;background:#fff;}

.topbar .right .btn-logout:hover{color:#e74c3c;border-color:#e74c3c;}

.sidebar{width:200px;background:#001529;position:fixed;top:56px;left:0;bottom:0;overflow-y:auto;z-index:99;}

.sidebar .menu-group{padding:12px 0;}

.sidebar .menu-item{display:flex;align-items:center;gap:8px;padding:10px 20px;color:rgba(255,255,255,0.65);cursor:pointer;transition:all .2s;font-size:14px;border-left:3px solid transparent;}

.sidebar .menu-item:hover{color:#fff;background:rgba(255,255,255,0.08);}

.sidebar .menu-item.active{color:#fff;background:#c0392b;border-left-color:#fff;}

/* 子菜单样式 */
.sidebar .menu-parent{flex-wrap:wrap;}
.sidebar .menu-parent .sub-arrow{margin-left:auto;font-size:10px;transition:transform .2s;}
.sidebar .menu-parent.open .sub-arrow{transform:rotate(180deg);}
.menu-subitems{display:none;width:100%;background:rgba(0,0,0,0.15);}
.menu-parent.open .menu-subitems{display:block;}
.menu-subitem{padding:8px 20px 8px 48px;color:rgba(255,255,255,0.55);cursor:pointer;font-size:13px;transition:all .2s;border-left:3px solid transparent;}
.menu-subitem:hover{color:#fff;background:rgba(255,255,255,0.08);}
.menu-subitem.active{color:#fff;background:#c0392b;border-left-color:#fff;}

.tab-active{background:#c0392b!important;color:#fff!important;border-color:#c0392b!important;}

.sidebar .menu-item .icon{width:20px;text-align:center;}

.sidebar .menu-item .badge{margin-left:auto;background:#e74c3c;color:#fff;font-size:11px;padding:1px 6px;border-radius:10px;min-width:18px;text-align:center;}

.main{margin-left:200px;margin-top:56px;padding:20px;min-height:calc(100vh - 56px);}

/* ===== 内容通用 ===== */

.page{display:none;}.page.active{display:block;}

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

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

.card{background:#fff;border-radius:8px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,0.06);margin-bottom:16px;}

.card h4{font-size:15px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #f0f0f0;}

/* 统计卡片 */

.stats-row,.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px;}
.stat-row .stat-card,.stats-row .stat-card{padding:14px 8px;}
.stat-row .stat-card .num,.stats-row .stat-card .num{font-size:16px;}

.stat-card{background:#fff;border-radius:8px;padding:10px 6px;box-shadow:0 1px 4px rgba(0,0,0,0.06);text-align:center;min-width:0;}

.stat-card .num{font-size:18px;font-weight:700;color:#c0392b;line-height:1.2;}

.stat-card .label{font-size:11px;color:#999;margin-top:4px;}

/* 表格 */

.table-wrap{overflow-x:auto;}

table{width:100%;border-collapse:collapse;font-size:13px;}

table th{background:#fafafa;padding:10px 12px;text-align:left;font-weight:600;border-bottom:2px solid #e8e8e8;white-space:nowrap;}

table td{padding:10px 12px;border-bottom:1px solid #f0f0f0;vertical-align:middle;}

table tr:hover{background:#fafafa;}

/* 状态标签 */

.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500;}

.tag-green{background:#f0fff4;color:#27ae60;}.tag-red{background:#fff0f0;color:#e74c3c;}

.tag-blue{background:#f0f5ff;color:#3498db;}.tag-orange{background:#fff7e6;color:#f39c12;}

.tag-gray{background:#f5f5f5;color:#999;}.tag-purple{background:#f5f0ff;color:#8e44ad;}

/* 工具栏 */

.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}

.toolbar input,.toolbar select{padding:7px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;outline:none;}

.toolbar input:focus,.toolbar select:focus{border-color:#c0392b;}

/* 分页 */

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

.pagination .pg-btn{padding:5px 10px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:13px;}

.pagination .pg-btn.active{background:#c0392b;color:#fff;border-color:#c0392b;}

.pagination .pg-btn:hover{border-color:#c0392b;}

.pagination .pg-info{font-size:12px;color:#999;margin:0 8px;}

/* 模态框 */

.modal-mask{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:200;align-items:center;justify-content:center;}

.modal-mask.show{display:flex;}

.modal{background:#fff;border-radius:10px;width:780px;max-width:94vw;max-height:88vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,0.2);}

.modal .modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #f0f0f0;}

.modal .modal-head h4{font-size:16px;}

.modal .modal-close{cursor:pointer;font-size:20px;color:#999;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;background:none;}

.modal .modal-close:hover{background:#f0f0f0;color:#333;}

.modal .modal-body{padding:20px;}

.modal .modal-foot{padding:12px 20px;border-top:1px solid #f0f0f0;text-align:right;display:flex;gap:8px;justify-content:flex-end;}

/* 表单 */

.form-group{margin-bottom:14px;}

.form-group label{display:block;margin-bottom:4px;font-weight:500;font-size:13px;color:#555;}

.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;outline:none;font-family:inherit;}

.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#c0392b;}

.form-group textarea{min-height:80px;resize:vertical;}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* Toast */

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

.toast{padding:10px 16px;border-radius:6px;color:#fff;font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,0.15);animation:slideIn .3s ease;}

.toast-success{background:#27ae60;}.toast-error{background:#e74c3c;}.toast-info{background:#3498db;}

@keyframes slideIn{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}

/* 空状态 */

.empty{text-align:center;padding:40px;color:#999;}

.empty .icon{font-size:48px;margin-bottom:8px;}

/* 详情面板 */

.detail-grid{display:grid;grid-template-columns:7fr 3fr;gap:10px;}

.detail-item{padding:8px 0;border-bottom:1px solid #f5f5f5;}

.detail-item .dt{color:#999;font-size:12px;margin-bottom:2px;}

.detail-item .dd{font-size:14px;}

/* 受助人详情Tab切换 */
.ben-detail-tabs .tab-nav{display:flex;gap:0;border-bottom:2px solid #e0e0e0;margin-bottom:16px;}
.ben-detail-tabs .tab-btn{padding:8px 16px;border:none;background:none;cursor:pointer;font-size:14px;color:#666;border-bottom:2px solid transparent;margin-bottom:-2px;}
.ben-detail-tabs .tab-btn.active{color:#1976d2;border-bottom-color:#1976d2;font-weight:600;}
.ben-detail-tabs .tab-btn:hover{color:#1565c0;}
.ben-detail-tabs .tab-panel{display:none;}
.ben-detail-tabs .tab-panel.active{display:block;}

/* 操作按钮组 */

.op-group{display:flex;gap:4px;flex-wrap:wrap;}

/* Quill 编辑器样式 */

.ql-toolbar.ql-snow{border-color:#ddd!important;border-radius:4px 4px 0 0!important;}

.ql-container.ql-snow{border-color:#ddd!important;border-radius:0 0 4px 4px!important;font-size:14px;}

.ql-editor{min-height:200px;}

/* === 富文本图片缩略图系统 === */
/* 核心规则：所有内容区的图片强制缩略图尺寸，覆盖Quill默认样式 */
#modalBody img,
.ql-editor img,
.msg-content img,
.tracking-content img,
.tracking-table img,
.message-list img,
.msg-bubble img,
.tab-panel img,
.ben-detail-tabs img,
[class*="ql-"] img {
  max-width: 120px !important;
  max-height: 120px !important;
  width: auto !important;
  height: auto !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  transition: transform 0.2s !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  display: inline-block !important;
  margin: 4px !important;
}
/* 悬停微放大 */
#modalBody img:hover,
.ql-editor img:hover,
.msg-content img:hover,
.tracking-content img:hover,
.tab-panel img:hover {
  transform: scale(1.05) !important;
}
/* 图片容器 */
.msg-content p, .tracking-content p, .ql-editor p {
  display: block;
  line-height: 1.6;
}
/* === 图片灯箱 === */
#imgLightbox {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.92);
  text-align: center;
  cursor: pointer;
}
#imgLightbox img {
  max-width: 90vw;
  max-height: 90vh;
  margin-top: 3vh;
  border-radius: 8px;
  object-fit: contain;
}
#imgLightbox .lb-close {
  position: absolute;
  top: 20px; right: 30px;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  cursor: pointer;
  z-index: 100000;
}



/* ===== W5 审批动画 ===== */
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.w5-modify-warn { color:#ef4444; font-weight:600; font-size:12px; }
.w5-modify-ok { color:#64748b; font-size:12px; }
.w5-audit-item { padding:10px 12px; border-left:3px solid #3b82f6; background:#f8fafc; margin-bottom:8px; border-radius:4px; font-size:13px; }
.w5-audit-item.reject { border-left-color:#ef4444; background:#fef2f2; }
.w5-audit-item.approve { border-left-color:#10b981; background:#f0fdf4; }
.w5-audit-item.modify { border-left-color:#f59e0b; background:#fffbeb; }


/* ============================================================
   移动端响应式适配（仅在 max-width:768px 时生效）
   点亮梦想慈善会管理后台 v4.0
   - 隐藏固定侧边栏，改为顶部 hamburger 按钮触发
   - main 区域占满全宽，文字不溢出
   - 表格、卡片、统计卡片、表单从多列降为单列
   ============================================================ */

/* 浮动 hamburger 按钮（默认 PC 端隐藏） */
.mob-menu-btn{display:none;}

/* sidebar 区域底部关闭按钮（默认 PC 端隐藏） */
.mob-close-btn{display:none;}

/* 移动端遮罩（默认隐藏） */
.mob-mask{display:none;}

@media (max-width:768px) {

  /* Hamburger 浮动按钮（始终显示） */
  .mob-menu-btn{display:flex;position:fixed;bottom:20px;right:20px;z-index:200;
    width:50px;height:50px;border-radius:50%;background:#c0392b;color:#fff;
    border:none;cursor:pointer;box-shadow:0 4px 16px rgba(192,57,43,0.4);
    font-size:24px;align-items:center;justify-content:center;font-weight:bold;
    transition:transform .2s;}
  .mob-menu-btn:active{transform:scale(.92);}

  /* 默认隐藏 sidebar */
  .sidebar{transform:translateX(-100%);transition:transform .25s ease;width:240px;
    box-shadow:4px 0 20px rgba(0,0,0,0.15);z-index:300;}
  .sidebar.show{transform:translateX(0);}

  /* 移动端遮罩 */
  .mob-mask{display:block;position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.5);z-index:250;opacity:0;pointer-events:none;
    transition:opacity .25s ease;}
  .mob-mask.show{opacity:1;pointer-events:auto;}

  /* sidebar 内部关闭按钮 */
  .mob-close-btn{display:flex;position:absolute;top:8px;right:8px;z-index:1;
    width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.1);
    color:#fff;border:none;cursor:pointer;font-size:18px;align-items:center;
    justify-content:center;}

  /* main 占满全宽 */
  .main{margin-left:0!important;padding:12px!important;min-height:calc(100vh - 56px);}

  /* topbar 紧凑 */
  .topbar{padding:0 12px;height:50px;}
  .topbar .logo{font-size:14px;}
  .topbar .right{gap:8px;}
  .topbar .right .user-info{display:none;}
  .topbar .right .btn-logout{padding:3px 8px;font-size:12px;}

  /* header 第一个开始位置（topbar 从 50px 起） */
  .sidebar{top:50px;}

  /* 统计卡片降为 2 列 */
  .stats-row,.stat-row{grid-template-columns:repeat(3,1fr)!important;gap:6px;}
  .stat-card{padding:10px 6px;}
  .stat-card .num{font-size:14px;}
  .stat-card .label{font-size:12px;}

  /* 表格横向滚动（保持表格内所有列，弹出层只显示部分） */
  .table-wrap{-webkit-overflow-scrolling:touch;}

  /* 表单行降为 1 列 */
  .form-row{grid-template-columns:1fr!important;}

  /* 详情面板降为 1 列 */
  .detail-grid{grid-template-columns:1fr!important;}

  /* 模态框全屏 */
  .modal{width:100vw!important;max-width:100vw;border-radius:0;
    max-height:100vh;height:100vh;}
  .modal .modal-body{padding:14px;}

  /* 选项卡按钮更紧凑 */
  .ben-detail-tabs .tab-btn{padding:6px 10px;font-size:13px;}

  /* 内容卡片内边距减小 */
  .card{padding:14px;}

  /* 工具栏输入框随 100% */
  .toolbar input,.toolbar select{max-width:100%;}
}