/* ===== 会员之家后台 - 共享样式（含移动端适配） ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC",Arial,sans-serif; background:#f5f5f0; color:#1f2a24; font-size:14px; -webkit-text-size-adjust:100%; }
.hidden { display:none !important; }
input,button,select,textarea { font-family:inherit; }

/* ===== 登录页 ===== */
.login-wrap { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.login-panel { max-width:380px; width:100%; padding:36px; }
.title { font-size:22px; font-weight:800; color:#1f2a24; margin-bottom:4px; }
.subtitle { font-size:13px; color:#999; margin-bottom:18px; }
.field { margin-top:14px; }
.field label { display:block; margin-bottom:6px; color:#687366; font-size:13px; font-weight:500; }
.field input, .field select { width:100%; height:44px; padding:0 12px; border:1.5px solid #dfe5dc; border-radius:8px; font-size:15px; outline:none; -webkit-appearance:none; transition:border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus { border-color:#386641; box-shadow:0 0 0 3px rgba(56,102,65,.1); }
.message { margin-top:10px; font-size:13px; color:#bc4749; min-height:20px; }
.panel { background:#fff; border:1px solid #dfe5dc; border-radius:10px; overflow-x:auto; transition:box-shadow .2s; }
.panel:hover { box-shadow:0 2px 12px rgba(0,0,0,.04); }

/* ===== 按钮 ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; padding:8px 18px; background:#386641; color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent; transition:all .2s ease; box-shadow:0 1px 3px rgba(56,102,65,.2); }
.btn:hover { background:#2d5234; box-shadow:0 2px 8px rgba(56,102,65,.3); transform:translateY(-1px); }
.btn:active { transform:scale(0.97) translateY(0); box-shadow:0 1px 2px rgba(56,102,65,.2); }
.btn.secondary { background:#eef5e8; color:#386641; box-shadow:none; }
.btn.secondary:hover { background:#ddebd3; box-shadow:0 2px 6px rgba(56,102,65,.1); }
.btn.danger { background:#bc4749; color:#fff; box-shadow:0 1px 3px rgba(188,71,73,.2); }
.btn.danger:hover { background:#a33a3c; box-shadow:0 2px 8px rgba(188,71,73,.3); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ===== 侧边栏 ===== */
.shell { display:flex; min-height:100vh; }
.side { width:220px; background:#1f2a24; color:#fff; padding:20px 0; flex-shrink:0; position:fixed; top:0; bottom:0; overflow-y:auto; z-index:20; transition:transform .3s ease; }
.brand { font-size:18px; font-weight:800; padding:0 20px 20px; border-bottom:1px solid rgba(255,255,255,.1); white-space:nowrap; }
.nav { margin-top:12px; }
.nav a { display:block; padding:10px 20px; color:rgba(255,255,255,.65); text-decoration:none; font-size:14px; transition:all .15s; white-space:nowrap; }
.nav a:hover { color:#fff; background:rgba(255,255,255,.08); }
.nav a.active { color:#fff; background:#386641; border-right:3px solid #6abf69; font-weight:600; }
.nav-arrow { float:right; font-size:10px; opacity:.6; transition:transform .2s; margin-top:3px; }
.nav-children { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.nav-children.open { max-height:300px; }
.nav-sub { display:block; padding:8px 20px 8px 36px; color:rgba(255,255,255,.5); text-decoration:none; font-size:13px; transition:all .15s; white-space:nowrap; }
.nav-sub:hover { color:#fff; background:rgba(255,255,255,.06); }
.nav-sub.active { color:#fff; background:rgba(56,102,65,.5); font-weight:600; }

/* ===== 移动端汉堡菜单 ===== */
.mobile-header { display:none; position:fixed; top:0; left:0; right:0; height:52px; background:#1f2a24; color:#fff; z-index:15; align-items:center; padding:0 16px; gap:12px; }
.mobile-header .brand { font-size:16px; font-weight:700; padding:0; border:none; }
.hamburger { background:none; border:none; color:#fff; font-size:24px; cursor:pointer; padding:4px 8px; line-height:1; }
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:15; }

/* ===== 主区域 ===== */
.main { flex:1; margin-left:220px; padding:0; min-width:0; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; background:#fff; border-bottom:1px solid #dfe5dc; position:sticky; top:0; z-index:5; gap:12px; flex-wrap:wrap; }
.topbar .title { font-size:18px; }
.topbar .subtitle { font-size:12px; color:#999; margin-bottom:0; }
.topbar-btns { display:flex; gap:8px; flex-wrap:wrap; }
.content { padding:24px; }

/* ===== 表格（横向滚动） ===== */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:13px; min-width:700px; }
th { text-align:left; padding:10px 12px; background:#f9faf7; color:#687366; font-size:12px; font-weight:600; border-bottom:1px solid #eee; white-space:nowrap; position:sticky; top:0; z-index:1; }
td { padding:10px 12px; border-bottom:1px solid #f0f0ec; vertical-align:top; transition:background .15s; }
tbody tr { transition:background .15s; }
tbody tr:hover { background:#f8faf5; }
tbody tr:hover td { border-bottom-color:#e8ede5; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:12px; flex-wrap:wrap; }
.section-title { font-size:16px; font-weight:700; }
.form-row { display:grid; gap:10px; margin-bottom:10px; }
.form-row input, .form-row select { padding:8px 10px; border:1.5px solid #dfe5dc; border-radius:8px; font-size:13px; transition:border-color .2s, box-shadow .2s; }
.form-row input:focus, .form-row select:focus { outline:none; border-color:#386641; box-shadow:0 0 0 3px rgba(56,102,65,.1); }

/* ===== 标签 ===== */
.badge { display:inline-block; padding:3px 10px; border-radius:10px; font-size:12px; font-weight:600; white-space:nowrap; transition:all .15s; }
.badge-pending { background:#fff3cd; color:#856404; }
.badge-paid { background:#cce5ff; color:#004085; }
.badge-shipped { background:#d4edda; color:#155724; }
.badge-done { background:#e2e3e5; color:#383d41; }
.badge-cancel { background:#f8d7da; color:#721c24; }
.badge-verify { background:#fff3cd; color:#856404; }
.badge-refund { background:#f8d7da; color:#721c24; }
.badge-success { background:#d4edda; color:#155724; }

/* ===== 导航未读徽章 ===== */
.nav-badge { display:inline-block; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#bc4749; color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center; margin-left:6px; vertical-align:middle; }
.nav a { position:relative; }

/* ===== 全局加载动画 ===== */
.global-loading { display:flex; align-items:center; justify-content:center; padding:60px 20px; color:#999; font-size:14px; gap:10px; }
.global-loading::before { content:''; width:20px; height:20px; border:2.5px solid #eee; border-top-color:#386641; border-radius:50%; animation:globalSpin .7s linear infinite; }
@keyframes globalSpin { to { transform:rotate(360deg); } }

/* ===== 数据刷新动效 ===== */
@keyframes fadeSlideIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.fade-in { animation:fadeSlideIn .3s ease; }

/* ===== 指标卡片 ===== */
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.metric-card { padding:18px; background:#fff; border:1px solid #dfe5dc; border-radius:10px; transition:all .2s; position:relative; overflow:hidden; }
.metric-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.06); transform:translateY(-2px); }
.metric-label { font-size:13px; color:#687366; margin-bottom:4px; }
.metric-value { font-size:28px; font-weight:800; color:#1f2a24; }
.metric-sub { font-size:12px; color:#999; margin-top:4px; }
.metric-sub .up { color:#386641; }
.metric-sub .down { color:#bc4749; }
.stat-today { color:#e67e22; }

/* ===== 弹窗 ===== */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100; place-items:center; padding:16px; backdrop-filter:blur(2px); }
.modal-overlay.show { display:grid; }
.modal-box { background:#fff; border-radius:14px; padding:28px; width:min(560px,92%); max-height:85vh; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,.15); animation:modalIn .25s ease; }
@keyframes modalIn { from { opacity:0; transform:scale(.95) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
.modal-box h3 { margin:0 0 18px; font-size:18px; font-weight:700; }
.modal-box .field { margin-top:12px; }
.modal-box .field label { display:block; margin-bottom:6px; color:#687366; font-size:13px; font-weight:500; }
.modal-box .field input, .modal-box .field select, .modal-box .field textarea { width:100%; height:40px; padding:0 10px; border:1.5px solid #dfe5dc; border-radius:8px; font-size:14px; transition:border-color .2s, box-shadow .2s; }
.modal-box .field input:focus, .modal-box .field select:focus, .modal-box .field textarea:focus { outline:none; border-color:#386641; box-shadow:0 0 0 3px rgba(56,102,65,.1); }
.modal-box .field textarea { height:100px; padding:10px; resize:vertical; }
.modal-box .btn-row { display:flex; gap:10px; margin-top:18px; justify-content:flex-end; }

/* ===== 积分/物流表单 ===== */
.points-form { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.points-form input { width:80px; padding:6px 8px; border:1px solid #ddd; border-radius:6px; font-size:13px; }
.ship-form { display:flex; gap:6px; align-items:center; margin-top:6px; flex-wrap:wrap; }
.ship-form input { padding:6px 8px; border:1px solid #ddd; border-radius:6px; font-size:13px; width:120px; }

/* ===== 权限网格 ===== */
.perm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0; }
.perm-item { display:flex; align-items:center; gap:6px; font-size:13px; padding:6px 8px; background:#f8faf5; border-radius:6px; }
.perm-item input { margin:0; flex-shrink:0; }

/* ===== 筛选栏 ===== */
.filter-bar { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.filter-bar input, .filter-bar select { padding:8px 10px; border:1.5px solid #dfe5dc; border-radius:8px; font-size:13px; min-height:38px; transition:border-color .2s, box-shadow .2s; }
.filter-bar input:focus, .filter-bar select:focus { outline:none; border-color:#386641; box-shadow:0 0 0 3px rgba(56,102,65,.1); }

/* ===== 搜索框（通用） ===== */
.search-box { position:relative; flex:1; min-width:200px; max-width:380px; }
.search-box input { width:100%; height:40px; padding:0 36px 0 38px; border:1.5px solid #dfe5dc; border-radius:10px; font-size:14px; background:#fff; transition:border-color .2s, box-shadow .2s; }
.search-box input:focus { outline:none; border-color:#386641; box-shadow:0 0 0 3px rgba(56,102,65,.1); }
.search-box input::placeholder { color:#bbb; }
.search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:#999; pointer-events:none; }

/* ===== 详情面板 ===== */
.detail-panel { padding:16px; margin-top:12px; background:#f9faf7; border-radius:8px; overflow-x:auto; }
.detail-panel table { font-size:13px; min-width:auto; }
.detail-panel th { font-size:12px; }

/* ===== 页脚 ===== */
.footer { margin-top:40px; padding:20px 24px; border-top:1px solid #dfe5dc; text-align:center; color:#999; font-size:13px; }
.footer a { color:#386641; text-decoration:none; }

/* ========================================
   移动端适配（768px 以下）
   ======================================== */
@media (max-width:768px) {
  /* 显示移动端头部，隐藏侧边栏 */
  .mobile-header { display:flex; }
  .side { transform:translateX(-100%); }
  .side.open { transform:translateX(0); }
  .overlay.show { display:block; }

  /* 主区域适配 */
  .main { margin-left:0; padding-top:52px; }
  .topbar { padding:12px 16px; top:52px; }
  .topbar .title { font-size:16px; }
  .topbar-btns { gap:6px; }
  .topbar-btns .btn { padding:6px 12px; font-size:12px; }
  .content { padding:16px; }

  /* 指标卡片 2列 */
  .metrics-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .metric-card { padding:14px; }
  .metric-value { font-size:22px; }

  /* 表格横向滚动 */
  .panel { overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* 权限网格 2列 */
  .perm-grid { grid-template-columns:repeat(2,1fr); }

  /* 筛选栏垂直排列 */
  .filter-bar { flex-direction:column; align-items:stretch; }
  .filter-bar input, .filter-bar select, .filter-bar .btn { width:100%; }

  /* 弹窗全屏化 */
  .modal-box { width:95%; padding:20px; }

  /* 按钮区域 */
  .section-head { flex-direction:column; align-items:stretch; }
  .section-head .btn { width:100%; }

  /* 积分/物流表单 */
  .points-form { flex-wrap:wrap; }
  .ship-form { flex-direction:column; align-items:stretch; }
  .ship-form input { width:100%; }

  /* 表格单元格缩小 */
  th, td { padding:8px; font-size:12px; }
}

/* ========================================
   小屏手机（480px 以下）
   ======================================== */
@media (max-width:480px) {
  .metrics-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .metric-card { padding:12px; }
  .metric-value { font-size:18px; }
  .metric-label { font-size:12px; }
  .content { padding:12px; }
  .topbar { padding:10px 12px; }
  .login-panel { padding:24px 20px; }
  .modal-box { padding:16px; }
  .perm-grid { grid-template-columns:1fr; }
  .btn { padding:8px 14px; font-size:13px; }
}