/* ============================================================
   1. Design Tokens
   ============================================================ */
:root {
  /* --- 颜色 Token（暗色主题）--- */
  --color-bg:             #0f1117;      /* antd: colorBgLayout */
  --color-bg-container:   #1a1d27;      /* antd: colorBgContainer */
  --color-border:         #2a2d3a;      /* antd: colorBorder */
  --color-text:           #e4e6f0;      /* antd: colorText */
  --color-text-secondary: #8b8fa3;      /* antd: colorTextSecondary */
  --color-primary:        #6366f1;      /* antd: colorPrimary */
  --color-primary-hover:  #818cf8;      /* antd: colorPrimaryHover */
  --color-success:        #22c55e;      /* antd: colorSuccess */
  --color-error:          #ef4444;      /* antd: colorError */
  --color-warning:        #eab308;      /* antd: colorWarning */
  --color-info:           #3b82f6;      /* antd: colorInfo */

  /* --- 尺寸 Token --- */
  --border-radius:        8px;
  --border-radius-sm:     4px;
  --border-radius-lg:     10px;

  /* --- 间距 Token --- */
  --padding-xs:           4px;
  --padding-sm:           8px;
  --padding:              12px;
  --padding-md:           16px;
  --padding-lg:           20px;
  --padding-xl:           24px;

  /* --- 字体 Token --- */
  --font-size-sm:         12px;
  --font-size:            14px;
  --font-size-lg:         16px;
  --font-size-heading:    18px;
}

/* ============================================================
   2. Reset / Base
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Segoe UI', Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
}

/* ============================================================
   3. Layout → antd Layout, PageHeader
   ============================================================ */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-md) var(--padding-xl);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-container);
}
.app-header h1 { font-size: var(--font-size-heading); font-weight: 600; }

.app-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-container); padding: 0 var(--padding-xl);
}

.tab-btn {
  padding: var(--padding) var(--padding-xl); font-size: var(--font-size); font-weight: 500;
  color: var(--color-text-secondary); background: none; border: none;
  cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s;
}
.tab-btn.active { color: var(--color-primary-hover); border-bottom-color: var(--color-primary); }
.tab-btn:hover  { color: var(--color-text); }

.app-panel { display: none; padding: var(--padding-xl); }
.app-panel.active { display: block; }

/* ============================================================
   4. 通用组件 → antd Card, Button, Input, Table, Tag, Statistic
   ============================================================ */

/* --- Card → antd Card --- */
.card {
  background: var(--color-bg-container); border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg); padding: var(--padding-lg); margin-bottom: var(--padding-lg);
}
.card-title {
  font-size: var(--font-size); font-weight: 600; color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--padding-md);
}

/* --- Form → antd Form, Form.Item --- */
.form-row { display: flex; gap: var(--padding); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--padding-md); }
.form-group { display: flex; flex-direction: column; gap: var(--padding-xs); }
.form-group label { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.form-group input,
.form-group select {
  padding: var(--padding-sm) var(--padding); border-radius: var(--border-radius);
  border: 1px solid var(--color-border); background: var(--color-bg);
  color: var(--color-text); font-size: 13px;
}

/* --- Button → antd Button --- */
.btn {
  padding: var(--padding-sm) var(--padding-lg); border-radius: var(--border-radius); border: none;
  font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Statistic → antd Statistic --- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--padding-md); margin-bottom: var(--padding-lg); }
.stat-box { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: var(--padding-md); }
.stat-box .label { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--padding-xs); }
.stat-box .value { font-size: 28px; font-weight: 700; }
.stat-box .sub   { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 2px; }

/* --- Table → antd Table --- */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th,
.data-table td { padding: var(--padding-sm) var(--padding); text-align: left; border-bottom: 1px solid var(--color-border); }
.data-table th { font-size: 11px; color: var(--color-text-secondary); text-transform: uppercase; font-weight: 600; }

/* --- Tag → antd Tag --- */
.badge { display: inline-block; padding: 2px var(--padding-sm); border-radius: var(--border-radius-sm); font-size: 11px; font-weight: 600; }
.badge-green  { background: rgba(34,197,94,.15);  color: var(--color-success); }
.badge-red    { background: rgba(239,68,68,.15);  color: var(--color-error); }
.badge-yellow { background: rgba(234,179,8,.15);  color: var(--color-warning); }
.badge-blue   { background: rgba(59,130,246,.15); color: var(--color-info); }

/* --- Chart layout --- */
.chart-container { width: 100%; height: 360px; }
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--padding-lg); }
@media (max-width: 960px) { .chart-row { grid-template-columns: 1fr; } }

/* ============================================================
   5. 业务组件 — Transaction Flow
   ============================================================ */
.flow-group { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: var(--padding-md); margin-bottom: var(--padding); }
.flow-group-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.flow-group-header .trace { font-size: 11px; font-family: monospace; color: var(--color-text-secondary); word-break: break-all; }
.flow-group-header .time  { font-size: var(--font-size-sm); color: var(--color-text-secondary); white-space: nowrap; margin-left: var(--padding); }
.flow-chain { display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin-bottom: 10px; }
.flow-node { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--padding); border-radius: var(--border-radius); border: 1px solid var(--color-border); }
.flow-node.success { border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.06); }
.flow-node.error   { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.06); }
.flow-node .fname { font-weight: 600; font-size: 13px; text-transform: capitalize; }
.flow-node .fdur  { font-size: 11px; color: var(--color-text-secondary); }
.flow-arrow { padding: 0 var(--padding-sm); color: var(--color-text-secondary); }
.flow-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px var(--padding-md); font-size: var(--font-size-sm); color: var(--color-text-secondary); padding: var(--padding-sm) 0; }
.flow-detail .fd-item  { display: inline-flex; align-items: center; gap: var(--padding-xs); }
.flow-detail .fd-label { opacity: .6; }
.flow-detail .fd-val   { color: var(--color-text); }

.stripe-link       { color: var(--color-primary-hover); text-decoration: none; font-family: monospace; font-size: 11px; }
.stripe-link:hover { text-decoration: underline; }

.flow-steps { display: flex; flex-wrap: wrap; gap: var(--padding-xs); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); font-size: 11px; }
.flow-section { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.flow-section-title { font-size: 11px; color: var(--color-text-secondary); margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }

/* --- Step Detail --- */
.step-detail { background: var(--color-bg-container); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: var(--padding-sm) 10px; margin-bottom: 6px; font-size: var(--font-size-sm); }
.step-detail.failed { border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.04); }
.step-detail-head { display: flex; align-items: center; gap: var(--padding-sm); cursor: pointer; }
.step-detail-head .sd-name   { font-weight: 600; }
.step-detail-head .sd-dur    { color: var(--color-text-secondary); font-size: 11px; }
.step-detail-head .sd-toggle { margin-left: auto; color: var(--color-text-secondary); font-size: 10px; }
.step-detail-body { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-border); font-size: 11px; color: var(--color-text-secondary); line-height: 1.6; word-break: break-all; }
.step-detail-body .kv   { display: flex; gap: 6px; }
.step-detail-body .kv .k { min-width: 80px; color: var(--color-text-secondary); flex-shrink: 0; }
.step-detail-body .kv .v { color: var(--color-text); }

.step-tag { display: inline-flex; align-items: center; gap: var(--padding-xs); padding: 3px 10px; border-radius: var(--border-radius-sm); font-size: 11px; background: rgba(99,102,241,0.15); color: var(--color-primary-hover); }
.step-tag.fail { background: rgba(239,68,68,0.15); color: var(--color-error); }
.step-dur { opacity: 0.7; }

/* ============================================================
   6. 状态 & 反馈 → antd Alert, Empty
   ============================================================ */
.error-msg { color: var(--color-error); font-size: 13px; margin-top: var(--padding-sm); }
.empty-msg { color: var(--color-text-secondary); text-align: center; padding: 40px; }

.error-callout {
  background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.2);
  border-left: 3px solid var(--color-error); border-radius: var(--border-radius); padding: 10px var(--padding); margin: var(--padding-sm) 0;
}
.ec-item { margin-bottom: 6px; }
.ec-item:last-child { margin-bottom: 0; }
.ec-step { color: var(--color-error); font-weight: 600; font-size: var(--font-size-sm); }
.ec-msg  { color: var(--color-text-secondary); font-size: 11px; word-break: break-all; margin-top: 2px; line-height: 1.5; }

.sd-error-inline { color: var(--color-error); font-size: 11px; flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 400px; }
.fail-count { color: var(--color-error); font-weight: 600; }