/* ============================================================
   petitvial — 纯白高级主题 v2 (premium)
   覆盖 app.css / enhancements.css，不删除旧代码，只改视觉。
   v2：加深文字对比度 / 更圆润 / 更克制（减 AI 感）
   ============================================================ */

:root{
  --bg:            #F7F9FC;
  --surface:       #FFFFFF;
  --surface-2:     #F6F8FB;
  --border:        #E7EBF1;
  --border-strong: #D3DBE6;
  --ink:           #0C1424;      /* 主文字，够深 */
  --ink-2:         #2E3D52;      /* 次级文字，加深 */
  --ink-3:         #55657D;      /* 弱化文字，仍可读 */
  --accent:        #2456E6;      /* 单一强调蓝 */
  --accent-strong: #1C45C4;
  --accent-soft:   #EDF2FF;
  --green:         #0E9F6E;
  --amber:         #C7740A;
  --red:           #D23B3B;
  --radius:        18px;         /* 卡片，更圆 */
  --radius-lg:     24px;
  --radius-btn:    12px;         /* 按钮/输入 */
  --shadow-sm:     0 1px 2px rgba(12,20,36,.04);
  --shadow:        0 2px 4px rgba(12,20,36,.03), 0 18px 44px -22px rgba(12,20,36,.18);
  --mono: "SF Mono","JetBrains Mono","Cascadia Code",Consolas,ui-monospace,monospace;
}

body{
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",system-ui,sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .1px;
}

/* ============================================================
   外壳：白色侧栏
   ============================================================ */
.sidebar{
  background: var(--surface);
  border-right: 1px solid var(--border);
  color: var(--ink-2);
  padding: 22px 16px 18px;
}
.brand{ padding: 4px 10px 26px; }
.brand-mark{
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--accent);                 /* 纯色，去渐变 */
  font-family: var(--mono); font-size: 17px;
  box-shadow: 0 8px 18px -6px rgba(36,86,230,.45);
}
.brand strong{ color: var(--ink); font-size: 18px; letter-spacing: -.01em; font-weight: 700; }
.brand small{ color: var(--ink-3); font-size: 9px; letter-spacing: .16em; font-weight: 700; }
.workspace{ border: 1px solid var(--border); background: var(--surface-2); border-radius: 14px; }
.workspace span{ color: var(--ink-3); }
.workspace strong{ color: var(--ink); }
nav{ gap: 3px; }
nav a{
  color: var(--ink-2); font-weight: 600; font-size: 14px;
  border-radius: 11px; padding: 11px 14px; transition: background .15s,color .15s;
}
nav a svg{ stroke-width: 1.7; }
nav a:hover{ background: var(--surface-2); color: var(--ink); }
nav a.active{
  background: var(--accent-soft); color: var(--accent-strong);
  font-weight: 700;
}
.sidebar-foot{ border-top: 1px solid var(--border); padding-top: 14px; }
.sidebar-foot .avatar{ background: var(--accent); }
.sidebar-foot strong{ color: var(--ink); font-size: 13px; }
.sidebar-foot small{ color: var(--ink-3); }
.sidebar-foot a{ color: var(--ink-3); }

.main{ margin-left: 252px; }
.topbar{ height: 66px; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 32px; }
.crumb span{ color: var(--ink-3); font-size: 10px; letter-spacing: .14em; font-weight: 700; }
.crumb b{ color: var(--border-strong); }
.crumb{ color: var(--ink-2); font-size: 14px; font-weight: 600; }
.top-actions .online,.top-actions .version{
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink-2); font-size: 11.5px; font-weight: 600; border-radius: 999px;
}
.online i{ background: var(--green); box-shadow: 0 0 0 3px rgba(14,159,110,.14); }

.content{ max-width: 1560px; padding: 34px 36px; }
.page-head{ margin-bottom: 28px; }
.page-head h1{ font-size: 28px; letter-spacing: -.02em; color: var(--ink); font-weight: 700; }
.page-head p{ color: var(--ink-3); font-size: 14px; }

.notice{ border-radius: 14px; box-shadow: var(--shadow-sm); border-width: 1px; }

/* ============================================================
   统计卡
   ============================================================ */
.stats{ gap: 16px; }
.stat{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 22px 24px;
}
.stat-top{ color: var(--ink-2); font-size: 13px; font-weight: 600; }
.stat-top i{ width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.stat.green .stat-top i{ background: var(--green); }
.stat.amber .stat-top i{ background: var(--amber); }
.stat.purple .stat-top i{ background: #6D5BD0; }
.stat>strong{
  font-family: var(--mono); font-size: 30px; letter-spacing: -.04em;
  color: var(--ink); margin: 14px 0 6px; font-weight: 700;
}
.stat small{ color: var(--ink-3); font-size: 12.5px; }

/* ============================================================
   面板 / 表格
   ============================================================ */
.panel{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin-bottom: 24px; overflow: hidden;
}
.panel-head{ padding: 20px 24px; border-bottom: 1px solid var(--border); }
.panel-head h2{ font-size: 16px; color: var(--ink); letter-spacing: -.01em; font-weight: 700; }
.panel-head p{ color: var(--ink-3); font-size: 13px; }
.panel-body{ padding: 24px; }

.table-wrap{ border-radius: var(--radius); }
.table{ min-width: 820px; }
.table th{
  background: var(--surface-2); color: var(--ink-3);
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.table td{ padding: 16px 20px; border-bottom: 1px solid #EFF2F7; color: var(--ink-2); font-size: 13.5px; }
.table tr:last-child td{ border-bottom: 0; }
.table tr:hover td{ background: var(--surface-2); }
.table code{
  font-family: var(--mono); font-size: 11.5px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--ink-2); padding: 3px 7px; border-radius: 8px;
}
.muted{ color: var(--ink-3); font-size: 12.5px; }

/* ---------- 徽标：中性底 + 状态圆点（去 AI 彩色感） ---------- */
.badge{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 5px 11px; border-radius: 999px;
  background: #F1F4F8; border: 1px solid #E3E8F0; color: #2E3D52;
}
.badge::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  margin-right:6px; vertical-align:middle; background:#94A3B8;
}
.badge.active::before,.badge.paid::before,.badge.completed::before,.badge.online::before,.badge.php::before{ background: var(--green); }
.badge.pending::before,.badge.created::before,.badge.unpaid::before,.badge.wp::before{ background: var(--accent); }
.badge.disabled::before,.badge.failed::before,.badge.revoked::before,.badge.expired::before{ background: var(--red); }
.badge.live::before{ background: var(--accent); }
.badge.sandbox::before,.badge.standard::before{ background:#94A3B8; }

/* ---------- 按钮：纯色，去渐变 ---------- */
.btn{
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2);
  border-radius: var(--radius-btn); padding: 10px 15px; font: 700 13px/1 system-ui;
  min-height: 38px; transition: all .15s;
}
.btn:hover{ background: var(--surface-2); border-color: #C3CDDA; color: var(--ink); }
.btn.primary{ background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 18px -8px rgba(36,86,230,.55); }
.btn.primary:hover{ background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.danger{ color: var(--red); border-color: #EFD0D0; }
.btn.danger:hover{ background: #FBF1F1; }
.btn.soft{ background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); }
.btn.soft:hover{ background: #E3EBFF; }

/* ---------- 表单 ---------- */
.field input,.field select,.field textarea,.filters input,.filters select{
  border: 1px solid var(--border-strong); border-radius: var(--radius-btn);
  padding: 11px 13px; font-size: 14px; color: var(--ink);
  background: var(--surface); transition: border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(36,86,230,.12);
}
.field label{ font-size: 13px; font-weight: 700; color: var(--ink-2); }
.field small{ color: var(--ink-3); }
.form-actions{ margin-top: 22px; }

.empty{
  color: var(--ink-3); font-size: 13.5px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:52px 20px; text-align:center;
}
.empty::before{
  content:""; width:40px; height:40px; border-radius:14px;
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2355657D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8M12 8v8'/%3E%3C/svg%3E") center/20px no-repeat;
  opacity:.7;
}

/* ============================================================
   首页资金概览
   ============================================================ */
.dash-hero{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:20px; margin-bottom:24px; }
.dash-fig{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 28px 30px; position:relative; overflow:hidden;
}
.dash-fig::after{
  content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle, rgba(36,86,230,.05), transparent 65%);
  right:-70px; top:-100px; pointer-events:none;
}
.dash-fig-label{ font-size:12px; font-weight:700; color:var(--ink-3); letter-spacing:.07em; text-transform:uppercase; }
.dash-fig-value{
  font-family: var(--mono); font-size:42px; font-weight:700; letter-spacing:-.05em;
  color: var(--ink); margin:12px 0 4px; line-height:1;
}
.dash-fig-sub{ color:var(--ink-3); font-size:13px; }
.dash-chart{ margin-top:20px; }
.dash-chart svg{ display:block; width:100%; height:auto; }
.dash-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.dash-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding:24px 26px;
}
.dash-card .k{ font-size:12.5px; font-weight:700; color:var(--ink-3); letter-spacing:.05em; }
.dash-card .v{ font-family:var(--mono); font-size:28px; font-weight:700; color:var(--ink); margin-top:10px; letter-spacing:-.03em; }
.dash-card .s{ font-size:12.5px; color:var(--ink-3); margin-top:7px; }
.dash-card.accent{ border-color:transparent; background: var(--accent); color:#fff; box-shadow: 0 20px 44px -20px rgba(36,86,230,.6); }
.dash-card.accent .k,.dash-card.accent .v{ color:#fff; }
.dash-card.accent .s{ color:rgba(255,255,255,.78); }

/* ---------- 账号页 ---------- */
.merchant-accounts-panel .account-table td:first-child{ min-width:280px; }
.account-save-form{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.account-save-form label{ display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; color:var(--ink-2); }
.account-save-form select,.account-save-form input{ width:180px; }
.account-save-form .btn{ margin-top:2px; }

/* ---------- 账号页卡片化：每个账号一张卡片 ---------- */
@media(min-width:900px){
  .merchant-accounts-panel .table{ min-width:0; border:0; }
  .merchant-accounts-panel .table thead{ display:none; }
  .merchant-accounts-panel .table tbody{ display:grid; grid-template-columns:repeat(auto-fill,minmax(400px,1fr)); gap:18px; }
  .merchant-accounts-panel .table tr{
    display:block; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:22px 24px; box-shadow:var(--shadow-sm);
    transition:box-shadow .18s,transform .18s;
  }
  .merchant-accounts-panel .table tr:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
  .merchant-accounts-panel .table tr:hover td{ background:transparent; }
  .merchant-accounts-panel .table td{ display:flex; justify-content:space-between; align-items:center; gap:16px; border:0; padding:9px 0; font-size:13.5px; }
  .merchant-accounts-panel .table td:not(:first-child){ border-top:1px dashed #E9EDF2; }
  /* 顶部账号信息块 */
  .merchant-accounts-panel .table td:first-child{ display:block; padding-bottom:14px; }
  .merchant-accounts-panel .table td:first-child strong{ font-size:16px; color:var(--ink); }
  /* 字段标签 */
  .merchant-accounts-panel .table td:not(:first-child)::before{ color:var(--ink-3); font-size:11.5px; font-weight:700; letter-spacing:.05em; }
  .merchant-accounts-panel .table td:nth-child(2)::before{ content:"站点"; }
  .merchant-accounts-panel .table td:nth-child(3)::before{ content:"环境"; }
  .merchant-accounts-panel .table td:nth-child(4)::before{ content:"收款状态"; }
  .merchant-accounts-panel .table td:nth-child(5)::before{ content:"本月额度"; }
  .merchant-accounts-panel .table td:nth-child(6)::before{ content:"最后同步"; }
  /* 操作区整行 */
  .merchant-accounts-panel .table td:last-child{ display:block; border-top:1px solid var(--border); margin-top:10px; padding-top:14px; }
  .merchant-accounts-panel .account-save-form{ flex-direction:column; align-items:stretch; gap:14px; }
  .merchant-accounts-panel .account-save-form label{ flex-direction:row; justify-content:space-between; align-items:center; }
  .merchant-accounts-panel .account-save-form select,.merchant-accounts-panel .account-save-form input{ width:200px; }
}

.toolbar{ margin-bottom:20px; }
.refresh-controls select{ border:1px solid var(--border-strong); border-radius: var(--radius-btn); padding:10px 12px; }

.pagination{ padding:20px 0 0; }
.pagination-summary{ color:var(--ink-3); font-size:12.5px; }
.pagination a{
  border:1px solid var(--border-strong); border-radius:10px; padding:8px 12px;
  color:var(--ink-2); font-size:13px; font-weight:600; background:var(--surface);
}
.pagination a.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

.ops-hero{ border:1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.ops-title h2{ color:var(--ink); }

@media(max-width:760px){
  .main{ margin-left:0; }
  .content{ padding:20px; }
  .dash-hero,.dash-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .page-head h1{ font-size:24px; }
}

/* ============================================================
   新 logo + 登录页
   ============================================================ */
.brand-mark{ background:none; box-shadow:none; width:38px; height:38px; padding:0; }
.brand-mark svg{ width:100%; height:100%; display:block; }

.login-page{
  min-height:100vh; display:grid; place-items:center;
  grid-template-columns: 1fr;               /* 覆盖 app.css 的双栏 */
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(36,86,230,.06), transparent 60%),
    radial-gradient(800px 500px at 110% 110%, rgba(36,86,230,.05), transparent 55%),
    var(--bg);
  padding: 24px;
}
.login-shell{
  width: 400px; max-width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: 24px;
  box-shadow: 0 2px 4px rgba(12,20,36,.03), 0 28px 64px -28px rgba(12,20,36,.2);
  padding: 48px 44px 42px; text-align: center;
}
.login-logo{ width:60px; height:60px; margin:0 auto 24px; }
.login-logo svg{ width:100%; height:100%; display:block; filter: drop-shadow(0 10px 22px rgba(36,86,230,.3)); }
.login-name{ font-size:23px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.login-sub{ font-size:14px; color:var(--ink-3); margin:8px 0 32px; font-weight:500; }
.login-box{ text-align:left; }
.login-box .field{ margin-bottom:20px; }
.login-box .field label{ font-size:13.5px; }
.login-btn{ width:100%; height:48px; font-size:15px; margin-top:8px; border-radius:12px; }
.login-page .notice{ text-align:left; margin:0 0 20px; }

/* ============================================================
   订单页：收紧表格，去掉次要列，右侧不再被裁切
   ============================================================ */
.order-ledger{ border-radius: var(--radius); border-color: var(--border); box-shadow: var(--shadow-sm); }
.order-ledger-head{ padding: 20px 24px; }
.order-ledger-head h2{ font-size: 17px; color: var(--ink); }
.order-ledger-head p{ font-size: 13px; color: var(--ink-3); }

/* 隐藏次要列：来源账户(6)——详情已在弹窗里，币种列保留(金额列不带币种) */
.order-ledger-table{ min-width: 0; }
.order-ledger-table th:nth-child(6),
.order-ledger-table td:nth-child(6){ display:none; }
.order-ledger-table th:nth-child(5),
.order-ledger-table td:nth-child(5){ padding-left: 6px; padding-right: 6px; font-size: 12px; }

/* 收紧 + 交易号不撑爆 */
.order-ledger-table th, .order-ledger-table td{ padding: 14px 12px; white-space: nowrap; }
.order-ledger-table th:first-child, .order-ledger-table td:first-child{ padding-left: 22px; }
.order-ledger-table th:last-child, .order-ledger-table td:last-child{ padding-right: 22px; }
.order-ledger-table td code{
  max-width: 210px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: inline-block; vertical-align: middle;
}
.ledger-wrap{ overflow-x: auto; }
.order-ledger .table-wrap{ overflow-x: auto; }

/* 订单弹窗样式对齐新主题 */
.order-dialog{ border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.detail-card{ border: 1px solid var(--border); border-radius: var(--radius); }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ============================================================
   v4：拉深对比度 / 加重字重 / 干净的分界线
   ============================================================ */
:root{
  --ink:   #0A1018;   /* 主文字：近黑 */
  --ink-2: #17253B;   /* 次级：明显加深 */
  --ink-3: #3E4F69;   /* 弱化：仍深、可读 */
  --border: #E3E8F0;  /* 分界线：清晰可见 */
  --border-strong: #C7D1DF;
}

/* 正文与表格文字加深、加中重 */
body{ font-weight: 450; }
.table td{ color: #17253B; font-weight: 500; }
.table th{ color: #3E4F69; font-weight: 700; }
.table code{ color: #1B2A44; background: #F2F5F9; border-color: #E0E6EF; }
.muted{ color: #3E4F69; font-weight: 500; }
.field input,.field select,.field textarea{ color: #0A1018; font-weight: 500; }
.stat>strong{ color: #0A1018; }
.dash-fig-value{ color: #0A1018; }
.dash-card .v{ color: #0A1018; }
.merchant-accounts-panel .table td:first-child strong{ color: #0A1018; font-weight: 700; }

/* 表格分界线：干净一致的水平线 */
.table th{ border-bottom: 1px solid #D8DFEA; }
.table td{ border-bottom: 1px solid #E3E8F0; }
.table tr:hover td{ background: #F7F9FC; }
.table-wrap{ box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }

/* 账号卡片内部分界线：去虚线，改干净实线 */
.merchant-accounts-panel .table td:not(:first-child){ border-top: 1px solid #E9EDF2; }
.merchant-accounts-panel .table td:last-child{ border-top: 1px solid #E3E8F0; }

/* 其他浅色文字统一加深 */
.workspace span,.brand small,.crumb span,.sidebar-foot small{ color: #5A6A85; }
.panel-head p,.dash-fig-sub,.dash-card .s,.dash-card .k,.stat small{ color: #4A5B75; }
body{ font-size: 15px; line-height: 1.7; }

.content{ max-width: 1320px; padding: 36px 40px; }
.page-head h1{ font-size: 31px; }
.page-head p{ font-size: 15px; line-height: 1.7; }

/* 表格更宽松 */
.table th{ font-size: 12px; letter-spacing: .06em; padding: 16px 24px; }
.table td{ font-size: 14.5px; padding: 18px 24px; line-height: 1.7; }
.table code{ font-size: 12px; padding: 4px 8px; }
.muted{ font-size: 13.5px; line-height: 1.6; }

/* 面板留白 */
.panel{ margin-bottom: 26px; }
.panel-head{ padding: 22px 26px; }
.panel-head h2{ font-size: 17px; }
.panel-head p{ font-size: 13.5px; line-height: 1.6; }
.panel-body{ padding: 26px; }

/* 统计卡 */
.stat{ padding: 26px 28px; }
.stat-top{ font-size: 13.5px; }
.stat>strong{ font-size: 33px; }
.stat small{ font-size: 13.5px; line-height: 1.5; }

/* 按钮 / 表单 */
.btn{ font-size: 13.5px; padding: 11px 17px; min-height: 41px; }
.field label{ font-size: 13.5px; }
.field input,.field select,.field textarea,.filters input,.filters select{ font-size: 14.5px; padding: 12px 14px; }
.field small{ font-size: 13px; line-height: 1.6; }

/* 徽标 */
.badge{ font-size: 11.5px; padding: 6px 12px; }
.badge::before{ width:7px; height:7px; margin-right:7px; }

/* 导航 */
nav a{ font-size: 14.5px; padding: 12px 15px; }
.crumb{ font-size: 14.5px; }
.top-actions .online,.top-actions .version{ font-size: 12px; }

/* 首页 hero 放大 */
.dash-fig{ padding: 32px 34px; }
.dash-fig-label{ font-size: 13px; }
.dash-fig-value{ font-size: 47px; }
.dash-fig-sub{ font-size: 13.5px; }
.dash-card{ padding: 26px 28px; }
.dash-card .k{ font-size: 13px; }
.dash-card .v{ font-size: 31px; }
.dash-card .s{ font-size: 13px; }

/* 账号卡片更宽松 */
.merchant-accounts-panel .table td{ font-size: 14.5px; padding: 11px 0; }
.merchant-accounts-panel .table td:first-child strong{ font-size: 18px; }
.merchant-accounts-panel .table td:not(:first-child)::before{ font-size: 12px; }
.merchant-accounts-panel .account-save-form{ gap: 16px; }

/* 空状态 */
.empty{ padding: 60px 24px; font-size: 14.5px; }