/* 质押页样式。全部选择器限定在 #stake / .stake-* 之内，不影响原站其他面板。
 *
 * 配色取自 assets/site.css 里 body[data-site=instance] 的实例覆盖（已逐项核对）：
 *   --paper #0b100d  页面背景（深墨绿近黑）
 *   .surface #131b15 面板背景
 *   --soft  #172217  柔和容器
 *   --ink   #edf2e9  主要文字（暖白）
 *   --muted #a6b4a8  次级文字
 *   --line  #303d32  边框
 *   --green #b1eb61  重点色
 *   主操作按钮 背景 #b0e96b / 文字 #17240f
 *
 * 用户明确反馈过"绿色太多"和数字截断：因此绿色只出现在选中态与主要动作上，
 * 信息层一律用暖白与次级灰绿；金额使用 tabular-nums 且不裁切小数位。
 * 不使用大面积光晕、闪动、彩虹渐变或像素字体。
 */

#stake {
  --stake-gap: 24px;
  /* 用中性石墨色承载信息，绿色只留给操作与选择，不改变原站全局配色。 */
  --soft: #191e1b;
  --line: #303733;
  /* 交互控件边界专用色。#6f7f72 对控件背景 #172217 的对比度约 3.88:1，
     满足 WCAG 1.4.11「非文本对比度 ≥ 3:1」。面板与分隔线仍用更低调的
     --line(#303d32)——那是装饰性边框，不承担「识别控件」的作用。 */
  --stake-control-line: #6f7f72;
}

/* 首屏用四档总览代替单一锁期数字：等大扇区表示选择，条形长度表示积分权重。 */
#stake .stake-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  min-height: 286px;
  margin-bottom: 18px;
  border: 1px solid #3d4a3e;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(115deg, #202b23 0%, #141c17 55%, #0e1511 100%);
  box-shadow: 0 20px 44px -30px #000;
}
#stake .stake-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: 32px clamp(24px, 4vw, 52px);
}
#stake .stake-hero-kicker {
  display: block;
  margin-bottom: 20px;
  color: #dca673;
  font: 700 11px/1.5 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .12em;
}
#stake .stake-hero h2 {
  margin: 0;
  color: #f1f2e9;
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.05em;
  text-wrap: balance;
}
#stake .stake-hero-copy p {
  max-width: 570px;
  margin: 16px 0 24px;
  color: #bac7b9;
  font-size: 14px;
  line-height: 1.8;
}
#stake .stake-hero-rule {
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid #405044;
  color: #e2e9d8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
#stake .stake-hero-link {
  display: inline-block;
  margin-top: 17px;
  color: #dca673;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #dca673;
  padding-bottom: 3px;
}
#stake .stake-hero-link:hover { color: #f0c59b; }
#stake .stake-hero-link:focus-visible { outline: 2px solid #dca673; outline-offset: 4px; }
#stake .stake-hero-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 286px;
  border-left: 1px solid #39483a;
  background: radial-gradient(circle at center, #253528 0%, #162219 52%, #101a13 73%);
}
#stake [data-stake="hero-chart"] { width: 100%; }
#stake .stake-tier-overview { width: 100%; margin: 0; padding: 25px 26px 28px; }
#stake .stake-tier-overview figcaption { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 19px; color: #e9eee3; font-size: 13px; font-weight: 700; }
#stake .stake-tier-overview figcaption small { color: #a9b9a6; font-size: 11px; font-weight: 500; }
#stake .stake-tier-overview-body { display: grid; grid-template-columns: 138px minmax(0, 1fr); align-items: center; gap: 18px; }
/* 四个扇区等大，只编码四种选择；倍率只由右侧数字与条形表达。 */
#stake .stake-tier-overview-donut {
  display: grid;
  place-items: center;
  width: 138px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#758b79 0deg 87deg, #132019 87deg 90deg, #d3a56f 90deg 177deg, #132019 177deg 180deg, #a9d579 180deg 267deg, #132019 267deg 270deg, #d8e4bc 270deg 357deg, #132019 357deg 360deg);
  box-shadow: 0 0 0 9px #b1eb6108;
}
#stake .stake-tier-overview-donut::before { content: ""; grid-area: 1 / 1; width: 92px; aspect-ratio: 1; border-radius: 50%; background: #19251c; }
#stake .stake-tier-overview-donut > span { grid-area: 1 / 1; z-index: 1; color: #f0f2e8; font: 400 43px/.9 Georgia, "Times New Roman", serif; text-align: center; }
#stake .stake-tier-overview-donut small { display: block; margin-top: 6px; color: #aebdac; font: 700 9px/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; }
#stake .stake-tier-overview-list { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
#stake .stake-tier-overview-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
#stake .stake-tier-overview-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #758b79; }
#stake .stake-tier-overview-item:nth-child(2) .stake-tier-overview-dot,
#stake .stake-tier-overview-item:nth-child(2) .stake-tier-overview-track > span { background: #d3a56f; }
#stake .stake-tier-overview-item:nth-child(3) .stake-tier-overview-dot,
#stake .stake-tier-overview-item:nth-child(3) .stake-tier-overview-track > span { background: #a9d579; }
#stake .stake-tier-overview-item:nth-child(4) .stake-tier-overview-dot,
#stake .stake-tier-overview-item:nth-child(4) .stake-tier-overview-track > span { background: #d8e4bc; }
#stake .stake-tier-overview-name { min-width: 0; flex: 1; color: #e7eee4; font-size: 12px; font-weight: 700; white-space: nowrap; }
#stake .stake-tier-overview-name small { display: block; margin-top: 2px; color: #a7b4a6; font-size: 9px; font-weight: 400; }
#stake .stake-tier-overview-row strong { color: #f1eee1; font: 700 15px/1 "SFMono-Regular", Consolas, monospace; white-space: nowrap; }
#stake .stake-tier-overview-track { display: block; height: 3px; margin: 7px 0 0 15px; background: #39483a; }
#stake .stake-tier-overview-track > span { display: block; width: var(--tier-fill); height: 100%; background: #758b79; }
#stake .stake-hero-art-label {
  position: absolute;
  right: 15px;
  bottom: 12px;
  color: #829485;
  font: 700 10px/1.5 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .12em;
}
@media (max-width: 760px) {
  #stake .stake-hero { grid-template-columns: minmax(0, 1fr); }
  #stake .stake-hero-copy { padding: 26px 22px; }
  #stake .stake-hero-kicker { margin-bottom: 15px; }
  #stake .stake-hero-copy p { margin: 14px 0 20px; }
  #stake .stake-hero-art { min-height: 246px; border-left: 0; border-top: 1px solid #39483a; }
}
@media (max-width: 430px) {
  #stake .stake-tier-overview { padding: 20px 17px 27px; }
  #stake .stake-tier-overview-body { grid-template-columns: 106px minmax(0, 1fr); gap: 15px; }
  #stake .stake-tier-overview-donut { width: 106px; }
  #stake .stake-tier-overview-donut::before { width: 70px; }
  #stake .stake-tier-overview-donut > span { font-size: 33px; }
  #stake .stake-tier-overview-name { font-size: 11px; }
  #stake .stake-tier-overview-row strong { font-size: 13px; }
}

/* 顶部环境标识：模拟环境必须一眼看出来，不能让用户误以为是真实资产。 */
#stake .stake-env {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 0;
  margin-bottom: var(--stake-gap);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}
#stake .stake-env strong {
  color: var(--ink);
  font-weight: 700;
}
/* 模拟标识用琥珀色而不是绿色：它是警示信息，不是可用状态。 */
#stake .stake-sim-tag {
  padding: 3px 9px;
  border: 1px solid #6b5a2a;
  border-radius: 999px;
  background: #241f11;
  color: #e8cf8a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
#stake .stake-env-address {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  /* 长地址换行显示，不省略、不截断 */
  overflow-wrap: anywhere;
  color: var(--muted);
}

/* 模拟钱包弹窗：代表真实环境下钱包会弹出的那一步。
   用琥珀虚线边框与模拟标识同色系，明确它不是产品界面的一部分。 */
#stake .stake-wallet-prompt {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 16px;
  margin-bottom: var(--stake-gap);
  border: 1px dashed #6b5a2a;
  border-radius: 8px;
  background: #1a1710;
}
#stake .stake-wallet-prompt > div:first-child { min-width: 0; }
#stake .stake-wallet-prompt strong { display: block; font-size: 14px; color: #e8cf8a; margin-bottom: 8px; }
#stake .stake-wallet-prompt p {
  margin: 8px 0 0; font-size: 11px; line-height: 1.7; color: #a89a72;
  /* 这些句子里嵌着完整精度的数额（18 位小数是一个不可断开的长词）。默认的
     overflow-wrap: normal 断不开它，于是在窄视口（320px 设备 + 200% 缩放 ≈ 160 CSS 像素）
     它会冲出卡片并被边界裁掉——用户看到的是一个少了几位的数额，而且没有任何截断提示。
     与「完整数值」展开区一致，这里也允许在任意位置换行。 */
  overflow-wrap: anywhere;
}
#stake .stake-wallet-prompt .stake-rows { margin-bottom: 0; border-top-color: #4a3f22; }
#stake .stake-wallet-prompt .stake-rows > div { border-bottom-color: #4a3f22; }
#stake .stake-wallet-prompt .stake-actions { flex-direction: column; min-width: 140px; }
@media (max-width: 700px) {
  #stake .stake-wallet-prompt { grid-template-columns: minmax(0, 1fr); }
  #stake .stake-wallet-prompt .stake-actions { flex-direction: row; min-width: 0; }
}

/* 日预算规则条 */
#stake .stake-budget {
  /* 顶部一句话说清「每天发多少、怎么分」，不埋在折叠区里。
     配色沿用本文件既有十六进制约定：面板 #131b15 / 边框 #303d32 / 主文字 #edf2e9。
     按"绿色只出现在选中态与主要动作"的既定原则，这里不使用绿色强调条。 */
  margin: 0 0 var(--stake-gap);
  padding: 10px 12px;
  border: 0;
  border-left: 2px solid #68736a;
  border-radius: 0;
  background: #141916;
  color: #edf2e9;
  font-size: 13.5px;
  line-height: 1.65;
}
/* 概览指标 */
#stake .stake-metrics {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--stake-gap);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #141916;
  /* 统一光源来自左上：渐变只改变表面明暗，不用高饱和光晕抢走数字。 */
  background-image: linear-gradient(120deg, rgba(218, 232, 221, 0.07), transparent 48%),
    linear-gradient(165deg, #202923, #121713 85%);
  box-shadow: inset 0 1px 0 rgba(237, 242, 233, 0.12),
    0 10px 28px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
@media (max-width: 760px) {
  #stake .stake-metrics { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* 移动端指标更紧凑：主数字略小，说明仍完整显示不截断 */
  #stake .stake-metrics .stake-metric { padding: 11px 13px; }
  #stake .stake-metrics .stake-metric strong { font-size: 18px; }
}
#stake .stake-metric {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 22px 24px;
  min-width: 0;
}
#stake .stake-metric span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
#stake .stake-metric strong {
  display: block;
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  /* 数字等宽对齐，且允许在长数值处换行而不是被裁掉 */
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
#stake .stake-metric small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
/* 一组指标共用一个容器，用细分隔而非三重卡片；小屏压缩留白但保留完整数字。 */
@media (min-width: 761px) {
  #stake .stake-metric + .stake-metric { border-left: 1px solid var(--line); }
}
@media (max-width: 760px) {
  #stake .stake-metrics { gap: 0; }
  #stake .stake-metric + .stake-metric { border-top: 1px solid var(--line); }
  #stake .stake-metrics .stake-metric { padding: 12px 16px; }
}
/* 暂估值用虚下划线提示"会变"，而不是用颜色作为唯一提示 */
#stake .stake-metric.is-provisional strong {
  text-decoration: underline dotted rgba(166, 180, 168, 0.55);
  text-underline-offset: 4px;
}

/* 操作区：桌面左操作卡 / 右仓位；移动单栏（操作卡在前，仓位在后）。 */
#stake .stake-work {
  display: grid;
  gap: var(--stake-gap);
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
}
@media (max-width: 900px) {
  #stake .stake-work { grid-template-columns: minmax(0, 1fr); }
}

/* 仅供屏幕阅读器的标题：页签承担了视觉标题的角色，但区域仍需可命名。 */
#stake .stake-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* 页签 */
#stake .stake-tablist {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 3px;
  border: 0;
  border-bottom: 1px solid var(--stake-control-line);
  border-radius: 10px;
  background: transparent;
}
#stake .stake-tablist button {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
/* 选中态不只靠背景明度差：叠加一条绿色下边线，状态差异明确可辨。 */
#stake .stake-tablist button[aria-selected="true"] {
  background: #202823;
  color: var(--ink);
  box-shadow: inset 0 -2px 0 0 var(--green);
}
#stake .stake-tablist button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* 持久状态区：未决与错误永不折叠。左侧色条 + 文字标签，不靠颜色单独表意。 */
#stake .stake-persistent { margin-bottom: var(--stake-gap); display: grid; gap: 8px; }
#stake .stake-persistent-item {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--soft);
}
#stake .stake-persistent-item strong { display: block; font-size: 13px; color: var(--ink); }
#stake .stake-persistent-item p { margin: 4px 0 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
#stake .stake-persistent-item[data-kind="pending"] { border-left-color: #6b5a2a; }
#stake .stake-persistent-item[data-kind="pending"] strong { color: #e8cf8a; }
#stake .stake-persistent-item[data-kind="error"] { border-left-color: #7a4a33; }
#stake .stake-persistent-item[data-kind="error"] strong { color: #efb097; }

/* 折叠区：标题始终可见，展开的是长解释。 */
#stake details.stake-fold,
#stake details.stake-fold-section { margin-top: 14px; }
/* 次级信息保留展开入口，以分隔线替代层层卡片；不隐藏锁期或未决交易警告。 */
#stake details.stake-fold-section {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
#stake .stake-work + details.stake-fold-section { margin-top: 24px; }
#stake details.stake-fold-section > summary,
#stake details.stake-fold > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  padding: 14px 18px;
  list-style: none;
}
#stake details.stake-fold > summary { padding: 10px 0; font-size: 12px; color: var(--muted); font-weight: 400; }
#stake details.stake-fold-section > summary::before,
#stake details.stake-fold > summary::before { content: "▸ "; color: var(--muted); }
#stake details.stake-fold-section[open] > summary::before,
#stake details.stake-fold[open] > summary::before { content: "▾ "; }
#stake details.stake-fold-section > summary::-webkit-details-marker,
#stake details.stake-fold > summary::-webkit-details-marker { display: none; }
#stake details.stake-fold-section > summary:focus-visible,
#stake details.stake-fold > summary:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
#stake details.stake-fold-section > *:not(summary) { padding: 0 18px 18px; }
#stake details.stake-fold-section .stake-table-wrap { padding: 0 18px 18px; }

/* 仓位卡片：桌面与移动同一结构，靠密度区分。移动端取回按钮直接在卡内，
   不需要横向拖动表格才能点到。 */
#stake .stake-positions-list { display: grid; gap: 10px; }
#stake .stake-position {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 12px 13px;
  min-width: 0;
}
#stake .stake-position header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
#stake .stake-position header strong { font-size: 13px; color: var(--ink); }
#stake .stake-position-amount {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
#stake .stake-position-amount small { font-size: 11px; font-weight: 400; color: var(--muted); }
#stake .stake-position-meta { margin: 0; border-top: 1px solid var(--line); font-size: 11px; }
#stake .stake-position-meta > div {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
#stake .stake-position-meta dt { color: var(--muted); }
#stake .stake-position-meta dd {
  margin: 0; color: var(--ink); text-align: right;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0;
}
#stake .stake-position-note { margin: 8px 0 0; font-size: 11px; line-height: 1.7; color: #e8cf8a; }
#stake .stake-position-action { margin-top: 10px; width: 100%; }

#stake .stake-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #141916;
  padding: 24px;
  min-width: 0;
}
/* 只有核心操作和仓位容器抬起，折叠说明仍保持平面，避免层层堆叠。 */
#stake .stake-work > .stake-card {
  background-image: linear-gradient(145deg, rgba(237, 242, 233, 0.045), transparent 42%),
    linear-gradient(180deg, #1c241f, #121814);
  border-top-color: #48524a;
  box-shadow: inset 0 1px 0 rgba(237, 242, 233, 0.07),
    0 16px 32px -16px rgba(0, 0, 0, 0.65);
}
/* 首要操作采用更利落的硬边和暖色顶线；资产数据仍保持原有高对比度。 */
#stake .stake-work > .stake-card:first-child {
  border-radius: 4px;
  border-top: 2px solid #c99062;
  background-image: linear-gradient(135deg, #242c24, #151d17 52%, #111913);
}
#stake .stake-work > .stake-card:nth-child(2) { border-radius: 4px; }
#stake .stake-work .stake-input-row { border-radius: 3px; }
#stake .stake-work .stake-tiers button {
  min-height: 92px;
  padding: 12px;
  border-radius: 3px;
}
#stake .stake-work .stake-tiers button[aria-checked="true"] {
  box-shadow: inset 0 -3px 0 var(--green);
}
/* 内部仓位浅浮雕，与外层卡片区分；不增加位移动画或遮挡焦点。 */
#stake .stake-position {
  background-image: linear-gradient(155deg, rgba(237, 242, 233, 0.045), transparent 65%);
  box-shadow: inset 0 1px 0 rgba(237, 242, 233, 0.05);
}
#stake .stake-card h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
#stake .stake-card > p.stake-hint {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
@media (max-width: 560px) {
  /* 手机优先把空间留给金额和档位，不让外侧留白挤压操作区。 */
  #stake .stake-work > .stake-card { padding: 16px; }
}

#stake .stake-field { display: block; margin-bottom: 12px; }
#stake .stake-field > span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
#stake .stake-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--stake-control-line);
  border-radius: 8px;
  background: var(--soft);
  padding: 0 12px;
  /* 金额输入区轻微下凹，让可编辑区域与外层浮起的卡片形成层级。 */
  background-image: linear-gradient(180deg, #101612, #1b231d);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28);
}
#stake .stake-input-row:focus-within {
  border-color: var(--green);
  /* 细边框而非光晕 */
  box-shadow: inset 0 0 0 1px var(--green);
}
#stake .stake-input-row input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 24px; /* 让输入金额成为视觉中心，且不触发 iOS 小字号缩放。 */
  font-variant-numeric: tabular-nums;
  padding: 18px 0;
  outline: none;
}
#stake .stake-input-row .stake-unit {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

#stake .stake-portions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
#stake .stake-portions button {
  flex: 1 1 auto;
  min-width: 56px;
  padding: 7px 10px;
  border: 1px solid var(--stake-control-line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
#stake .stake-portions button:hover:not(:disabled) { color: var(--ink); border-color: #4a5c4c; }
/* 选中态是绿色出现的地方之一 */
#stake .stake-portions button[aria-pressed="true"] {
  border-color: var(--green);
  color: var(--green);
  background: rgba(177, 235, 97, 0.08);
}
#stake .stake-portions button:disabled { opacity: 0.45; cursor: not-allowed; }

/* 档位选择器：四档并排（窄屏两列）。选中态是绿色出现的地方之一。 */
#stake .stake-tiers,
#stake .stake-positions {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 4px;
}
#stake .stake-positions { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
@media (max-width: 560px) {
  #stake .stake-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#stake .stake-tiers button,
#stake .stake-positions button {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid var(--stake-control-line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}
#stake .stake-tiers button strong,
#stake .stake-positions button strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}
#stake .stake-tiers button small,
#stake .stake-positions button small {
  font-size: 10px;
  line-height: 1.5;
  color: var(--muted);
}
#stake .stake-positions button span {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* 倍率是这张卡的主信息，用重点色但只占一小块 */
#stake .stake-tier-boost {
  font-size: 15px;
  font-weight: 700;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
#stake .stake-tiers button:hover:not(:disabled),
#stake .stake-positions button:hover:not(:disabled) { border-color: #4a5c4c; }
#stake .stake-tiers button[aria-checked="true"],
#stake .stake-positions button[aria-checked="true"] {
  border-color: var(--green);
  background: rgba(177, 235, 97, 0.08);
}
#stake .stake-tiers button:disabled,
#stake .stake-positions button:disabled { opacity: 0.45; cursor: not-allowed; }
#stake .stake-tiers button:focus-visible,
#stake .stake-positions button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* 锁定期警示：琥珀色（警示语义），不是绿色（可用语义）。 */
#stake .stake-lock-warning {
  margin: 8px 0 0;
  padding: 9px 11px;
  border: 1px solid #6b5a2a;
  border-left-width: 3px;
  border-radius: 6px;
  background: #1a1710;
  font-size: 11px;
  line-height: 1.7;
  color: #e8cf8a;
}

#stake .stake-status-tag[data-kind="locked"] { border-color: #6b5a2a; color: #e8cf8a; }

#stake .stake-rows {
  margin: 0 0 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
#stake .stake-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
#stake .stake-rows dt { color: var(--muted); flex: 0 1 auto; }
#stake .stake-rows dd {
  margin: 0;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  min-width: 0;
}
#stake .stake-rows dd.stake-address {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
}

/* 固定收款地址：明确不可编辑 */
#stake .stake-recipient {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 11px 12px;
  margin-bottom: 12px;
}
#stake .stake-recipient span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
#stake .stake-recipient output {
  display: block;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
#stake .stake-recipient small { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); line-height: 1.6; }

#stake .stake-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#stake .stake-button {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--stake-control-line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  /* 按钮文字不裁切 */
  white-space: normal;
  line-height: 1.4;
}
#stake .stake-button.is-primary {
  background: #b0e96b;
  /* 有限的按钮高光强调唯一主操作，深色文字在渐变两端均保持清晰。 */
  background-image: linear-gradient(180deg, #c6f28f, #a5d965);
  border-color: #b0e96b;
  color: #17240f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 3px 0 #4c642f, 0 6px 12px rgba(0, 0, 0, 0.18);
}
#stake .stake-button.is-primary:active:not(:disabled) {
  box-shadow: inset 0 2px 4px rgba(23, 36, 15, 0.2);
}
#stake .stake-button.is-primary:disabled { box-shadow: none; }
/* 次要动作：绿色描边 + 绿色文字，醒目但不再铺一整块绿。 */
#stake .stake-button.is-secondary {
  background: transparent;
  border-color: var(--green);
  color: var(--green);
}
#stake .stake-button.is-secondary:hover:not(:disabled) { background: rgba(177, 235, 97, 0.08); }
#stake .stake-button:disabled { opacity: 0.45; cursor: not-allowed; }
#stake .stake-button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

#stake .stake-message {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  min-height: 1.7em;
}
#stake .stake-message.is-error { color: #efb097; }
/* 成功不用纯绿铺满，只用一条细边提示 */
#stake .stake-message.is-success { color: var(--ink); }

#stake .stake-step {
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
  font-size: 11px;
  color: var(--muted);
}
#stake .stake-step li { padding: 3px 0; }
#stake .stake-step li[data-state="done"]::before { content: "✓ "; color: var(--green); }
#stake .stake-step li[data-state="active"]::before { content: "▸ "; color: var(--ink); }
#stake .stake-step li[data-state="todo"]::before { content: "· "; }
#stake .stake-step li[data-state="active"] { color: var(--ink); }

/* 积分说明 */
#stake .stake-points-note {
  border-left: 2px solid var(--line);
  padding: 2px 0 2px 12px;
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.75;
  color: var(--muted);
}

#stake .stake-table-wrap { overflow-x: auto; margin-top: 12px; }
#stake table { width: 100%; border-collapse: collapse; font-size: 12px; }
#stake table th,
#stake table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
#stake table td.stake-num { font-variant-numeric: tabular-nums; text-align: right; }
#stake table th {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
#stake table td { color: var(--ink); }
#stake table td.stake-empty { color: var(--muted); white-space: normal; }
/* 状态不只靠颜色：同时给出文字标签 */
#stake .stake-status-tag {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  color: var(--muted);
}
#stake .stake-status-tag[data-kind="failed"] { border-color: #7a4a33; color: #efb097; }
#stake .stake-status-tag[data-kind="success"] { border-color: #4a6b30; color: var(--green); }

/* 完整数值展开 */
#stake details.stake-exact { margin-top: 6px; }
#stake details.stake-exact summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
}
#stake details.stake-exact > span {
  display: block;
  margin-top: 5px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* 安全说明 */
#stake .stake-safety { margin-top: var(--stake-gap); }
#stake .stake-safety ul { margin: 10px 0 0; padding-left: 18px; }
#stake .stake-safety li {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 7px;
}
#stake .stake-safety li strong { color: var(--ink); font-weight: 700; }

/* 开发控件（T14）：仅模拟模式挂载，视觉上刻意与产品区分 */
#stake .stake-dev {
  margin-top: var(--stake-gap);
  border: 1px dashed #5a4a2a;
  border-radius: 8px;
  background: #1a1710;
  padding: 14px;
}
#stake .stake-dev h3 { color: #e8cf8a; font-size: 13px; margin: 0 0 8px; }
#stake .stake-dev .stake-dev-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
#stake .stake-dev button {
  padding: 7px 11px;
  border: 1px solid #a08a52;
  border-radius: 8px;
  background: #241f11;
  color: #e8cf8a;
  font-size: 12px;
  cursor: pointer;
}
#stake .stake-dev p { margin: 6px 0 0; font-size: 11px; line-height: 1.7; color: #a89a72; }

/* 浮动通知：约 5 秒自动收起，可手动关闭。持续状态留在按钮与记录里。 */
#stake .stake-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #171f19;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
#stake .stake-toast strong { display: block; font-size: 13px; color: var(--ink); }
#stake .stake-toast p { margin: 4px 0 0; font-size: 11px; line-height: 1.6; color: var(--muted); }
#stake .stake-toast .stake-toast-icon { flex: 0 0 auto; font-size: 14px; color: var(--green); line-height: 1.5; }
#stake .stake-toast button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
@media (max-width: 560px) {
  #stake .stake-toast { left: 16px; right: 16px; max-width: none; }
}

#stake .stake-tablist button,
#stake .stake-tiers button,
#stake .stake-positions button,
#stake .stake-button { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }

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