/* ═══════════════════════════════════════════════════════════════
   Grain — DayPay Design System · Components
   v1.0 · requires tokens/tokens.css
   全部组件只引用语义角色(--surface、--primary…),
   暗色模式由 tokens 层重解析,本文件零主题代码。
   例外:页面模式 .dp-console 与 .dp-phone 是"定色"的
   (color-committed)——见文件末尾的说明。
   ═══════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────── */
.dp-app {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.dp-app :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ── Typography ───────────────────────────────────────────────── */
.dp-display-xl { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 7vw, 72px); line-height: 1.05; letter-spacing: -.02em; }
.dp-display    { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.15; letter-spacing: -.01em; }
.dp-title      { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.3; }
.dp-body       { font-size: 15px; line-height: 1.6; }
.dp-caption    { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.dp-label      { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.dp-mono       { font-family: var(--font-mono); font-size: 13px; }

/* ── Money & numbers ──────────────────────────────────────────── */
/* 三条规则,无例外:tabular 数字;display 级金额分位弱化;
   入账绿 / 出账墨色 — clay 永远不是金额色。 */
.dp-amt        { font-variant-numeric: tabular-nums; font-weight: 600; }
.dp-amt-credit { color: var(--credit); }
.dp-amt-debit  { color: var(--debit); }
.dp-amt-xl     { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dp-amt-xl .dp-cents { font-size: .5em; font-weight: 700; color: var(--ink-3); }

/* ── Buttons ──────────────────────────────────────────────────── */
/* 每屏一个 primary;标签写明金额后果("Unlock $900 now" 而非 "Confirm")。 */
.dp-btn {
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px; line-height: 1;
  border-radius: var(--r-sm); padding: 12px 20px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .12s, border-color .12s, color .12s;
}
.dp-btn--primary   { background: var(--primary); color: var(--on-primary); }
.dp-btn--primary:hover { background: var(--primary-hover); }
.dp-btn--secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); }
.dp-btn--secondary:hover { border-color: var(--ink-3); background: var(--surface-sunken); }
.dp-btn--quiet     { background: transparent; color: var(--primary); }
.dp-btn--quiet:hover { background: var(--primary-quiet); }
.dp-btn--danger    { background: transparent; color: var(--critical); border: 1.5px solid var(--critical); }
.dp-btn--danger:hover { background: var(--critical-quiet); }
.dp-btn--sm   { padding: 8px 14px; font-size: 13px; }
.dp-btn--lg   { padding: 15px 26px; font-size: 15.5px; border-radius: var(--r-md); }
.dp-btn--full { width: 100%; justify-content: center; }
.dp-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ── Inputs ───────────────────────────────────────────────────── */
/* 平面 surface 上的下沉输入框;聚焦时提亮为 surface。 */
.dp-field { display: flex; flex-direction: column; gap: 6px; }
.dp-field > label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.dp-input {
  font-family: var(--font-body); font-size: 14.5px; color: var(--ink);
  background: var(--surface-sunken); border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 11px 13px; width: 100%;
}
.dp-input::placeholder { color: var(--ink-3); }
.dp-input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.dp-input--select { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.dp-upload {
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm);
  padding: 20px; display: grid; place-items: center; gap: 4px;
  color: var(--ink-3); font-size: 13px; cursor: pointer; text-align: center;
  background: var(--surface);
}
.dp-upload:hover { border-color: var(--primary); color: var(--primary); }

/* ── Segmented control ────────────────────────────────────────── */
/* 分段切换视图(结构性,如 Personal↔Business);chips 过滤列表。 */
.dp-seg { display: inline-flex; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.dp-seg > button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  color: var(--ink-3); padding: 9px 18px;
}
.dp-seg > button[aria-pressed="true"] { background: var(--surface-brand); color: var(--ink-on-brand); }

/* ── Filter chips ─────────────────────────────────────────────── */
/* 一个 chip 对应 IncomeRecord 的一个 source_type。 */
.dp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dp-chip {
  font-size: 13px; font-weight: 600; padding: 7px 14px;
  border-radius: var(--r-pill); border: 1.5px solid var(--line-strong);
  color: var(--ink-2); background: var(--surface); cursor: pointer;
}
.dp-chip[aria-pressed="true"] { background: var(--primary-quiet); border-color: var(--primary); color: var(--primary); }

/* ── Status badges ────────────────────────────────────────────── */
/* 徽章是状态不是装饰:背后必须有 ledger 对象的状态机。 */
.dp-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); }
.dp-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dp-badge--ok      { background: var(--primary-quiet); color: var(--credit); }
.dp-badge--warn    { background: var(--warning-quiet); color: var(--warning-strong); }
.dp-badge--crit    { background: var(--critical-quiet); color: var(--critical-strong); }
.dp-badge--neutral { background: var(--surface-sunken); color: var(--ink-2); border: 1px solid var(--line); }

/* ── Progress steps ───────────────────────────────────────────── */
/* bars:消费端短流程;flow:不可逆的企业管线,每级触发一个事件。 */
.dp-steps-bars { display: flex; gap: 6px; align-items: center; }
.dp-steps-bars .dp-bar { width: 26px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.dp-steps-bars .dp-bar--on { background: var(--primary); }
.dp-steps-bars .dp-steps-label { font-size: 12px; color: var(--ink-3); margin-left: 8px; }
.dp-steps-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; }
.dp-steps-flow .dp-step { display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
.dp-steps-flow .dp-step__n { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: 12px; }
.dp-steps-flow .dp-step--done { color: var(--credit); }
.dp-steps-flow .dp-step--done .dp-step__n { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.dp-steps-flow .dp-step--now { color: var(--ink); }
.dp-steps-flow .dp-step--now .dp-step__n { border-color: var(--ink); border-width: 2px; }
.dp-steps-flow .dp-step-arrow { color: var(--line-strong); }

/* ── Meter ────────────────────────────────────────────────────── */
.dp-meter { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.dp-meter > i { display: block; height: 100%; background: var(--primary); border-radius: 4px; }

/* ── Cards ────────────────────────────────────────────────────── */
.dp-stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow-1); }
.dp-stat-card__label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); margin: 0 0 8px; }
.dp-stat-card__value { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.dp-stat-card__delta { font-size: 12.5px; margin-top: 8px; font-weight: 600; }
.dp-stat-card__delta--up { color: var(--credit); }
.dp-stat-card__delta--neutral { color: var(--ink-3); font-weight: 400; }

/* 深绿余额卡:浅色屏幕里唯一的深色物体,shadow-3 几乎只属于它。
   仅用于 Personal 移动端;后台内容区禁止整片深色。 */
.dp-balance-card {
  background: var(--surface-brand); color: var(--ink-on-brand);
  border-radius: var(--r-lg); padding: 24px; max-width: 340px;
  box-shadow: var(--shadow-3); position: relative; overflow: hidden;
}
.dp-balance-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: var(--meadow-500); opacity: .14; }
.dp-balance-card__label { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: var(--ink-on-brand-2); margin: 0 0 10px; }
.dp-balance-card__value { font-family: var(--font-display); font-weight: 800; font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; }
.dp-balance-card__value .dp-cents { font-size: .5em; color: var(--ink-on-brand-2); }
.dp-balance-card__sub { font-size: 12.5px; color: var(--ink-on-brand-2); margin-top: 10px; }
.dp-balance-card__actions { display: flex; gap: 8px; margin-top: 18px; }
.dp-balance-card__actions .dp-btn { background: rgba(255,255,255,.1); color: var(--ink-on-brand); font-size: 13px; padding: 9px 14px; }
.dp-balance-card__actions .dp-btn--solid { background: var(--meadow-500); color: #fff; }

/* ── Income rows ──────────────────────────────────────────────── */
/* 一行 = 一条 IncomeRecord 或 ledger entry;
   副标题永远标注税务姿态(Net of tax / Gross · self-tax)。 */
.dp-txlist { display: flex; flex-direction: column; }
.dp-txrow { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.dp-txrow:last-child { border-bottom: 0; }
.dp-txrow__avatar {
  flex: none; width: 38px; height: 38px; border-radius: var(--r-sm);
  background: var(--primary-quiet); border: 1px solid var(--primary-quiet-line);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--primary);
}
.dp-txrow__avatar--neutral { background: var(--surface-sunken); border-color: var(--line); color: var(--ink-3); }
.dp-txrow__who { min-width: 0; flex: 1; }
.dp-txrow__who b { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-txrow__who span { font-size: 12.5px; color: var(--ink-3); }
.dp-txrow__right { text-align: right; flex: none; }
.dp-txrow__right .dp-amt { display: block; font-size: 15px; }
.dp-txrow__right time { font-size: 12px; color: var(--ink-3); }

/* ── Tier selector ────────────────────────────────────────────── */
/* 重大选择用 radio 卡;解锁上限是决定性事实,占强调行。
   选中态用 quiet 绿填充 — 定价决策不配重阴影和缩放动画。 */
.dp-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.dp-tier { border: 1.5px solid var(--line-strong); border-radius: var(--r-md); padding: 14px; cursor: pointer; background: var(--surface); position: relative; }
.dp-tier__name { font-weight: 700; font-size: 14.5px; }
.dp-tier__price { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.dp-tier__cap { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.dp-tier__tick { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: none; place-items: center; font-size: 11px; }
.dp-tier[aria-pressed="true"], .dp-tier[aria-checked="true"] { border-color: var(--primary); background: var(--primary-quiet); }
.dp-tier[aria-pressed="true"] .dp-tier__cap, .dp-tier[aria-checked="true"] .dp-tier__cap { color: var(--primary); }
.dp-tier[aria-pressed="true"] .dp-tier__tick, .dp-tier[aria-checked="true"] .dp-tier__tick { display: grid; }

/* ── Bottom tab bar (Personal) ────────────────────────────────── */
/* 四个固定 tab:Home · Income · Wallet · Insights。
   激活态 = primary 色 + 填充图标,不加其他处理。 */
.dp-tabbar { display: flex; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-2); }
.dp-tabbar > a { flex: 1; text-decoration: none; text-align: center; padding: 12px 4px 10px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); display: flex; flex-direction: column; gap: 5px; align-items: center; }
.dp-tabbar__icon { width: 22px; height: 22px; border-radius: 7px; border: 1.7px solid currentColor; }
.dp-tabbar > a.is-active { color: var(--primary); }
.dp-tabbar > a.is-active .dp-tabbar__icon { background: var(--primary); border-color: var(--primary); }

/* ── Data table ───────────────────────────────────────────────── */
/* 工资单表格是 ledger 视图:数字右对齐、tabular、全精度,
   页脚合计必须可见地对账。 */
.dp-tablewrap { overflow-x: auto; }
.dp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dp-table th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line-strong); background: var(--surface-sunken); }
.dp-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.dp-table td.dp-num, .dp-table th.dp-num { text-align: right; }
.dp-table tfoot td { font-weight: 700; border-bottom: 0; background: var(--surface-sunken); }

/* ═══════════════════════════════════════════════════════════════
   PATTERN · Console layout(Business / Enterprise 后台)
   定色(color-committed):evergreen 侧栏 + 纯白内容,
   不随查看主题翻转 — 绿 + 白的构图就是后台的识别度。
   故意使用字面色值,永不引用主题 token。
   留白规则:内容内边距 ≥ 40px;最大宽度 1120px;
   卡片间距 16–24px;页面收尾 ≥ 96px 空白;
   每屏一个绿色主按钮且放在顶栏,面板内动作用 secondary。
   ═══════════════════════════════════════════════════════════════ */
.dp-console { display: grid; grid-template-columns: 232px minmax(0, 1fr); background: #FFFFFF; color: #1B2B23; font-family: var(--font-body); }
.dp-console--app { min-height: 100vh; }
.dp-console--framed { border: 1px solid #E3E1D8; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); }

.dp-console__nav { background: #13261F; padding: 24px 16px 28px; display: flex; flex-direction: column; gap: 2px; }
.dp-console__logo { display: flex; align-items: center; gap: 10px; color: #F2F5F1; font-family: var(--font-display); font-weight: 800; font-size: 17px; margin: 2px 10px 24px; }
.dp-console__logo-mark { flex: none; width: 20px; height: 20px; border: 2px solid #7FC9A6; border-radius: 6px; }
.dp-console__nav a { color: #9FB4A8; text-decoration: none; font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: 8px; }
.dp-console__nav a:hover { color: #F2F5F1; }
.dp-console__nav a.is-active { background: rgba(255,255,255,.09); color: #F2F5F1; }

.dp-console__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 40px; border-bottom: 1px solid #E3E1D8; }
.dp-console__bar-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.dp-console__body { padding: 32px 40px 96px; display: flex; flex-direction: column; gap: 20px; max-width: 1120px; }

.dp-console__statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.dp-console__stat { background: #F6F5F0; border: 1px solid #E3E1D8; border-radius: var(--r-md); padding: 16px 18px; }
.dp-console__stat-label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: #7C8078; margin: 0 0 8px; }
.dp-console__stat-value { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.dp-console__stat-sub { font-size: 12px; color: #7C8078; margin-top: 8px; }

.dp-console__panels { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .dp-console__panels { grid-template-columns: minmax(0, 1fr); } }
.dp-console__panel { background: #FFFFFF; border: 1px solid #E3E1D8; border-radius: var(--r-md); padding: 20px 22px; }
.dp-console__panel h3 { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.dp-console__kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 6px 0; color: #5C615A; }
.dp-console__kv b { color: #1B2B23; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 控制台内的定色组件覆盖 */
.dp-console .dp-btn--primary { background: #1C9E6B; color: #FFFFFF; }
.dp-console .dp-btn--primary:hover { background: #15805A; }
.dp-console .dp-btn--secondary { color: #1B2B23; border-color: #CFCEC4; }
.dp-console .dp-btn--secondary:hover { background: #F6F5F0; border-color: #7C8078; }
.dp-console .dp-badge--ok { background: #EDF7F1; color: #15805A; }
.dp-console .dp-meter { background: #E3E1D8; }
.dp-console .dp-meter > i { background: #1C9E6B; }

/* ═══════════════════════════════════════════════════════════════
   PATTERN · Mobile phone frame(流程稿 / mockup 用)
   定色的浅色渲染,用于 wireflow 展示与规范文档;
   真实 App 页面用上方核心组件全尺寸拼装并支持暗色模式。
   屏幕节奏:状态栏 → 主题(大金额)→ 操作/列表 → 底部导航。
   流程页(KYC、Unlock)主按钮吸底且隐藏底部导航。
   ═══════════════════════════════════════════════════════════════ */
.dp-phone { width: 252px; background: #FFFFFF; border: 1px solid #E3E1D8; border-radius: 26px; box-shadow: var(--shadow-2); overflow: hidden; color: #1B2B23; font-size: 12px; line-height: 1.45; display: flex; flex-direction: column; font-family: var(--font-body); }
.dp-phone__status { display: flex; justify-content: space-between; padding: 9px 18px 2px; font-size: 9.5px; color: #7C8078; font-weight: 600; font-variant-numeric: tabular-nums; }
.dp-phone__screen { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 452px; }
.dp-phone__grow { flex: 1; }
.dp-phone .dp-p-label { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: #7C8078; }
.dp-phone .dp-p-h1 { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.2; }
.dp-phone .dp-p-amt { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.dp-phone .dp-p-amt .dp-cents { font-size: .5em; color: #7C8078; }
.dp-phone .dp-p-sub { font-size: 10.5px; color: #7C8078; }
.dp-phone .dp-p-seg { display: flex; border: 1.5px solid #CFCEC4; border-radius: 8px; overflow: hidden; background: #FFFFFF; }
.dp-phone .dp-p-seg span { flex: 1; text-align: center; padding: 6px 0; font-size: 10.5px; font-weight: 600; color: #7C8078; }
.dp-phone .dp-p-seg span.is-on { background: #13261F; color: #F2F5F1; }
.dp-phone .dp-p-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.dp-phone .dp-p-chip { font-size: 10px; font-weight: 600; padding: 4px 9px; border-radius: 999px; border: 1.2px solid #CFCEC4; color: #5C615A; background: #fff; }
.dp-phone .dp-p-chip.is-on { background: #EDF7F1; border-color: #1C9E6B; color: #15805A; }
.dp-phone .dp-p-btn { display: flex; align-items: center; justify-content: center; background: #1C9E6B; color: #fff; font-weight: 700; font-size: 12px; border-radius: 9px; padding: 11px 0; }
.dp-phone .dp-p-field { background: #F6F5F0; border: 1.2px solid #CFCEC4; border-radius: 8px; padding: 9px 11px; color: #7C8078; font-size: 11px; display: flex; justify-content: space-between; align-items: center; }
.dp-phone .dp-p-upload { flex: 1; border: 1.2px dashed #CFCEC4; border-radius: 8px; padding: 13px 4px; text-align: center; color: #7C8078; font-size: 10.5px; }
.dp-phone .dp-p-bars { display: flex; gap: 5px; align-items: center; }
.dp-phone .dp-p-bars i { width: 20px; height: 4px; border-radius: 2px; background: #E3E1D8; }
.dp-phone .dp-p-bars i.is-on { background: #1C9E6B; }
.dp-phone .dp-p-bars em { font-style: normal; font-size: 9.5px; color: #7C8078; margin-left: 6px; }
.dp-phone .dp-p-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; text-align: center; }
.dp-phone .dp-p-actions .dp-a i { display: block; height: 34px; border-radius: 9px; background: #EDF7F1; border: 1.2px solid #AEDCC5; margin-bottom: 4px; }
.dp-phone .dp-p-actions .dp-a b { font-size: 9.5px; font-weight: 600; color: #1B2B23; }
.dp-phone .dp-p-actions .dp-a--alt i { background: #F6F5F0; border-color: #E3E1D8; }
.dp-phone .dp-p-tx { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid #EFEDE6; }
.dp-phone .dp-p-tx:last-child { border-bottom: 0; }
.dp-phone .dp-p-tx .dp-av { flex: none; width: 26px; height: 26px; border-radius: 7px; background: #EDF7F1; border: 1px solid #AEDCC5; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 10.5px; color: #15805A; }
.dp-phone .dp-p-tx .dp-av--n { background: #F6F5F0; border-color: #E3E1D8; color: #7C8078; }
.dp-phone .dp-p-tx .dp-w { flex: 1; min-width: 0; }
.dp-phone .dp-p-tx .dp-w b { display: block; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-phone .dp-p-tx .dp-w span { font-size: 9.5px; color: #7C8078; }
.dp-phone .dp-p-tx .dp-r { text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.dp-phone .dp-p-tx .dp-r b { display: block; font-size: 11px; font-weight: 700; }
.dp-phone .dp-p-tx .dp-r b.dp-cr { color: #15805A; }
.dp-phone .dp-p-tx .dp-r time { font-size: 9px; color: #7C8078; }
.dp-phone .dp-p-tier { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1.2px solid #CFCEC4; border-radius: 9px; padding: 8px 10px; font-size: 10.5px; }
.dp-phone .dp-p-tier b { font-weight: 700; }
.dp-phone .dp-p-tier span { color: #7C8078; }
.dp-phone .dp-p-tier .dp-cap { font-weight: 600; color: #5C615A; }
.dp-phone .dp-p-tier.is-on { border-color: #1C9E6B; background: #EDF7F1; }
.dp-phone .dp-p-tier.is-on .dp-cap { color: #15805A; }
.dp-phone .dp-p-kv { display: flex; justify-content: space-between; font-size: 10.5px; color: #5C615A; }
.dp-phone .dp-p-kv b { color: #1B2B23; font-weight: 600; font-variant-numeric: tabular-nums; }
.dp-phone .dp-p-card { background: #13261F; color: #F2F5F1; border-radius: 14px; padding: 14px; position: relative; overflow: hidden; }
.dp-phone .dp-p-card::after { content: ""; position: absolute; right: -26px; top: -26px; width: 90px; height: 90px; border-radius: 50%; background: #1C9E6B; opacity: .16; }
.dp-phone .dp-p-card .dp-p-label { color: #9FB4A8; }
.dp-phone .dp-p-card .dp-p-card-amt { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; margin: 6px 0 2px; }
.dp-phone .dp-p-card .dp-p-card-amt .dp-cents { font-size: .5em; color: #9FB4A8; }
.dp-phone .dp-p-card .dp-p-card-row { display: flex; gap: 6px; margin-top: 10px; }
.dp-phone .dp-p-card .dp-p-card-row span { flex: 1; text-align: center; font-size: 10px; font-weight: 700; padding: 7px 0; border-radius: 7px; background: rgba(255,255,255,.1); }
.dp-phone .dp-p-card .dp-p-card-row span.dp-solid { background: #1C9E6B; color: #fff; }
.dp-phone .dp-p-fx { display: flex; justify-content: space-between; align-items: center; border: 1.2px solid #E3E1D8; border-radius: 9px; padding: 9px 11px; font-size: 10.5px; color: #5C615A; }
.dp-phone .dp-p-fx b { color: #1B2B23; font-variant-numeric: tabular-nums; }
.dp-phone__nav { display: flex; border-top: 1px solid #E3E1D8; background: #fff; }
.dp-phone__nav a { flex: 1; text-decoration: none; text-align: center; padding: 8px 2px 9px; font-size: 8.5px; font-weight: 600; color: #A8AAA1; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.dp-phone__nav a i { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid currentColor; }
.dp-phone__nav a.is-active { color: #1C9E6B; }
.dp-phone__nav a.is-active i { background: #1C9E6B; border-color: #1C9E6B; }
.dp-phone .dp-meter { background: #E3E1D8; }
.dp-phone .dp-meter > i { background: #1C9E6B; }

/* ── Motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dp-btn { transition: none; }
}