/* ============================================================
   OneClickTurbo · 设计令牌与基础组件（专业金融暗黑风）
   ------------------------------------------------------------
   引入方式（index.html 的 <head> 内，放在内联 <style> **之后**）：
     <link rel="stylesheet" href="./src/styles.css" />

   视觉语言：专业金融暗黑风 + 苹果式「玻璃拟态」（Glassmorphism）
     · body 铺极暗底光（左上蓝 / 右下紫，各 5% 透明度）+ 极缓慢的动态光影
     · 卡片 = 半透明白 3% + backdrop-filter 模糊 16px + 1px 半透明描边
             + 内阴影模拟玻璃边缘反光
     · 输入框 = 半透明黑 20% + 1px 半透明白描边，聚焦时科技蓝微光

   迁移状态说明（重要）：
     本文件是 UI 重构的第 1~2 步——设计令牌 + 通用组件 + 玻璃拟态。
     现有页面的组件样式仍留在内联 <style> 中（浅色配色），因此本文件末尾
     §9 用「桥接层」把旧组件的浅色属性覆盖为暗色可读色（不改 HTML 结构）。
     后续若把内联样式整体迁入本文件，§9 可整段删除。
   ============================================================ */

/* ---------- 1. 全局设计令牌 ---------- */
:root {
  /* 背景层 */
  --bg-base: #0B0E14; /* 极深灰背景 */
  --bg-card: #151A25; /* 深色卡片背景 */

  /* 描边 */
  --border-color: rgba(255, 255, 255, 0.08); /* 极细边框 */

  /* 文字 */
  --text-main: #FFFFFF; /* 主文字 */
  --text-sub: #8B949E; /* 副文字（说明、单位） */

  /* 强调色 */
  --accent-blue: #00D1FF; /* 主强调：科技蓝 */
  --accent-green: #0ECB81; /* 成功 */
  --accent-red: #F6465D; /* 失败 / 警告 */
  --accent-orange: #FF9F1C; /* 守护模式 / 提醒 */

  /* —— 以下为派生的实用令牌（不改变上面 8 个语义）—— */
  --bg-elev: #1B2231; /* 比卡片再亮一档（hover / 次级面板） */
  --bg-inset: #0E1320; /* 比卡片更暗（输入框、代码块） */
  --border-strong: rgba(255, 255, 255, 0.14);
  --radius-card: 16px;
  --radius-btn: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.6);
  --glow-blue: 0 0 15px rgba(0, 209, 255, 0.3);
  --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial,
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

  /* 让原生控件（滚动条 / 自动填充）跟随暗色 */
  color-scheme: dark;
}

/* ---------- 2. 基础排版与页面外壳 ---------- */
* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  /* 极暗底光（不是纯色）：左上科技蓝 + 右下紫，只 5% 透明度 →
     玻璃卡片透过去才有折射层次。fixed 让光晕固定在视口，不随滚动跑。 */
  background-color: var(--bg-base); /* #0B0E14 */
  background-image: radial-gradient(circle at top left, rgba(0, 209, 255, 0.05), transparent 40%),
    radial-gradient(circle at bottom right, rgba(138, 43, 226, 0.05), transparent 40%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text-main);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}

/* 极微弱的动态光影：两层大范围光斑，48 秒缓慢漂移（±1.5%）。
   用 fixed 伪元素承载，避免动画 body 自身 background（会重绘整页）。 */
body::before {
  content: "";
  position: fixed;
  inset: -20vmax; /* 略大于视口，漂移时不露边 */
  z-index: -1; /* 铺在 body 背景之上、正文之下 */
  pointer-events: none; /* 绝不挡鼠标 */
  background-image: radial-gradient(circle at 20% 20%, rgba(0, 209, 255, 0.06), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(138, 43, 226, 0.06), transparent 45%);
  animation: oc-bg-drift 48s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes oc-bg-drift {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(1.5%, 1%, 0) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}

a {
  color: var(--accent-blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* 副文字 / 说明 / 单位 */
.text-sub {
  color: var(--text-sub);
  font-size: 0.85rem;
}

/* 金额、哈希、倒计时等所有数字：等宽数字，避免跳动 */
.num-text {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 3. 通用卡片 ---------- */
.card {
  /* 苹果式玻璃拟态：半透明白 + 背景模糊 + 极细描边 + 内阴影（边缘反光） */
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(16px); /* Safari / 旧 WebKit */
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card); /* 16px */
  padding: 20px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* 不支持 backdrop-filter 的浏览器（旧 Firefox 等）：退化为深色不透明卡片，
   避免「半透明叠在半透明上」导致文字对比度崩掉。 */
@supports not (backdrop-filter: blur(1px)) {
  .card {
    background: rgba(21, 26, 37, 0.9); /* --bg-card 的高不透明度版本 */
  }
}

/* 卡片内的标题与分隔线（配合 .card 使用） */
.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 10px;
}

.card-divider {
  height: 1px;
  background: var(--border-color);
  border: 0;
  margin: 14px 0;
}

/* ---------- 4. 主按钮（科技蓝渐变 + 微弱发光） ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  /* 从强调蓝渐变到深蓝 */
  background-image: linear-gradient(135deg, var(--accent-blue) 0%, #0A6E8F 55%, #0B4E66 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(0, 209, 255, 0.3); /* 微弱蓝色发光 */
  transition: opacity 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}

.btn-primary:hover:not(:disabled) {
  opacity: 0.9; /* 悬停：透明度稍微降低 */
}

.btn-primary:active:not(:disabled) {
  transform: translateY(1px); /* 点击：下沉 1px */
  box-shadow: 0 0 10px rgba(0, 209, 255, 0.22);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

.btn-primary:disabled {
  background-image: none;
  background-color: #39414F;
  color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

/* ---------- 5. 次级按钮 / 危险按钮（同一套令牌） ---------- */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-elev);
  border-color: var(--accent-blue);
}
.btn-ghost:disabled {
  color: var(--text-sub);
  border-color: var(--border-color);
  cursor: not-allowed;
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  background-image: linear-gradient(135deg, var(--accent-red) 0%, #A32337 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.06s ease;
}
.btn-danger:hover:not(:disabled) {
  opacity: 0.9;
}
.btn-danger:active:not(:disabled) {
  transform: translateY(1px);
}

/* ---------- 6. 表单控件（玻璃暗色） ----------
   页面里的真实输入框大多只有尺寸（内联样式），配色统一在这里给：
   半透明黑 20% + 1px 半透明白描边；聚焦时边框变科技蓝 + 2px 微弱光环。
   （.input-dark 是组件化的同款，新代码优先用它。） */
input[type="text"],
input[type="number"],
input:not([type]) {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
input:not([type])::placeholder {
  color: var(--text-sub);
}

input[type="text"]:focus,
input[type="number"]:focus,
input:not([type]):focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(0, 209, 255, 0.2);
  background: rgba(0, 0, 0, 0.3); /* 聚焦时略微压暗，突出边框光环 */
}

input:disabled {
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-sub);
  cursor: not-allowed;
}

.input-dark {
  width: 100%;
  max-width: 320px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.input-dark::placeholder {
  color: var(--text-sub);
}
.input-dark:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(0, 209, 255, 0.2);
  background: rgba(0, 0, 0, 0.3);
}
.input-dark:disabled {
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-sub);
  cursor: not-allowed;
}

/* ---------- 7. 状态色工具类（对应四张卡片的状态行） ---------- */
.accent-green {
  color: var(--accent-green);
}
.accent-red {
  color: var(--accent-red);
}
.accent-orange {
  color: var(--accent-orange);
}
.accent-blue {
  color: var(--accent-blue);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-inset);
  color: var(--text-sub);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 8. 中间状态桥接（后续迁移完成后可整段删除） ----------
   当前内联 <style> 仍是浅色，这里只做「最小必要」的暗色适配：
   让暗色外壳下的旧组件保持可读（浅色卡片 + 暗色代码块）。 */
/* 注意：body 的暗色与底光已由 §2 统一声明，此处**不可**再写 background 简写
   （简写会把 §2 的 background-image 径向渐变清成 none，底光就没了）。 */
code {
  background: var(--bg-inset);
  color: var(--accent-blue);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-mono);
}

/* ============================================================
   §9 玻璃拟态桥接层（把内联 <style> 的浅色组件改成暗色可读）
   ------------------------------------------------------------
   为什么需要这一层：页面骨架仍沿用旧类名（.op-card / .ledger /
   .countdown ...），它们的浅色配色写在内联 <style> 里；本文件在内联
   <style> **之后**加载，用同名选择器即可覆盖（同优先级、后者生效），
   因此**无需改动 index.html 的任何结构**。
   ============================================================ */

/* ---- 9.1 页面上真正使用的卡片：.op-card 与 .card 同一套玻璃语言 ---- */
.op-card {
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* 置灰态（Anubis 下 ②③④ 等）：保留内联的 opacity / 按钮灰，只减弱玻璃质感 */
.op-card.disabled {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 4px 16px 0 rgba(0, 0, 0, 0.28);
}

@supports not (backdrop-filter: blur(1px)) {
  .op-card {
    background: rgba(21, 26, 37, 0.9);
  }
}

/* ---- 9.2 卡片内文字：浅色时代的深灰 → 暗底可读色 ---- */
.op-desc {
  color: var(--text-sub);
}
.op-row label {
  color: var(--text-sub);
}
.op-hint {
  color: var(--text-sub);
  opacity: 0.8;
}
.op-status.muted {
  color: var(--text-sub);
}
.op-status.ok {
  color: var(--accent-green);
}
.op-status.error {
  color: var(--accent-red);
}
.op-status.warn {
  color: var(--accent-orange);
}
.op-progress .pct {
  color: var(--text-sub);
}
.op-progress .bar {
  background: rgba(255, 255, 255, 0.08);
}
.muted {
  color: var(--text-sub);
}
.error {
  color: var(--accent-red);
}
.ok {
  color: var(--accent-green);
}

/* 小标签（.op-tag）与步骤条（.op-steps）：浅色胶囊 → 玻璃胶囊 */
.op-tag {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  color: var(--text-sub);
}
.op-steps span {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--text-sub);
}
.op-steps span.active {
  background: rgba(0, 209, 255, 0.12);
  border-color: rgba(0, 209, 255, 0.45);
  color: var(--accent-blue);
  font-weight: 600;
}
.op-steps span.done {
  background: rgba(14, 203, 129, 0.12);
  border-color: rgba(14, 203, 129, 0.45);
  color: var(--accent-green);
}
.op-steps span.failed {
  background: rgba(246, 70, 93, 0.12);
  border-color: rgba(246, 70, 93, 0.45);
  color: var(--accent-red);
}

/* ---- 9.3 两个账本（③ 投入即到账 / ④ 沉淀收益） ---- */
.ledger > div {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--border-color);
}
.ledger b {
  color: var(--text-sub);
}
.ledger .amt {
  color: var(--text-main);
}
.ledger .note {
  color: var(--text-sub);
}

/* ---- 9.4 沉淀倒计时（极其显眼：玻璃琥珀 → 到点变绿） ---- */
.countdown {
  background: linear-gradient(90deg, rgba(255, 159, 28, 0.14), rgba(255, 159, 28, 0.04));
  border: 1px solid rgba(255, 159, 28, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.countdown .big {
  color: var(--accent-orange);
}
.countdown .label {
  color: rgba(255, 159, 28, 0.85);
}
.countdown .sub {
  color: var(--text-sub);
}
.countdown.ready {
  background: linear-gradient(90deg, rgba(14, 203, 129, 0.16), rgba(14, 203, 129, 0.04));
  border-color: rgba(14, 203, 129, 0.5);
}
.countdown.ready .big {
  color: var(--accent-green);
}
.countdown.ready .label,
.countdown.ready .sub {
  color: rgba(14, 203, 129, 0.85);
}

/* ---- 9.5 表格（沉淀记录表 / 通用表） ---- */
th,
td {
  border-color: var(--border-color);
}
th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-sub);
  font-weight: 600;
}
.op-table tr.ready td {
  background: rgba(14, 203, 129, 0.08);
}
.op-table tr.ready td:last-child {
  color: var(--accent-green);
  font-weight: 600;
}

/* ---- 9.6 防砸盘冷却锁 / 安全横幅 / 收费横幅 / 守护模式横幅 ---- */
.cooldown-line {
  background: rgba(255, 159, 28, 0.12);
  border: 1px solid rgba(255, 159, 28, 0.4);
  color: var(--accent-orange);
}
.cooldown-line b {
  color: var(--accent-orange);
}
.security-banner {
  background: rgba(246, 70, 93, 0.12);
  border: 1px solid rgba(246, 70, 93, 0.45);
  color: var(--accent-red);
}
.fee-banner {
  background: rgba(255, 159, 28, 0.1);
  border: 1px solid rgba(255, 159, 28, 0.4);
  color: var(--accent-orange);
}
.fee-banner b {
  color: var(--accent-orange);
}
#ops-banner {
  background: rgba(255, 159, 28, 0.1);
  border-left: 3px solid var(--accent-orange);
  color: var(--accent-orange);
}

/* ---- 9.7 面板（钱包区 / 操作区）与标题分隔线 ---- */
#wallet-area {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
#action-area {
  background: rgba(255, 159, 28, 0.08);
  border: 1px solid rgba(255, 159, 28, 0.35);
  border-radius: var(--radius-card);
}
h2 {
  border-bottom: 1px solid var(--border-color);
}

/* ---- 9.8 签名确认弹窗：浅底白盒 → 玻璃暗盒 ----
   原先 .sec-modal-box 是白底，而标题继承 body 的白色 → 标题实际看不见；
   整体改为玻璃暗色后，白色标题才真正可读（这是本轮顺带修掉的可读性缺陷）。 */
.sec-modal-box {
  background: rgba(21, 26, 37, 0.92);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}
.sec-modal-title {
  color: var(--text-main);
}
.sec-modal-label {
  color: var(--text-sub);
}
.sec-modal-lines {
  color: var(--text-sub);
}
.sec-modal-lines b,
.sec-modal-lines strong {
  color: var(--text-main); /* 明细里的关键数字（批数 / gas / 收费）必须醒目 */
}
.sec-modal-address {
  background: rgba(255, 159, 28, 0.1);
  border: 1px solid rgba(255, 159, 28, 0.45);
  color: var(--accent-orange);
}

/* ---- 9.9 执行回执面板（Event Hash Ledger） ---- */
.receipt {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
}
.receipt-row {
  border-top: 1px solid var(--border-color);
}
.receipt-hash {
  color: var(--text-sub);
}
.receipt-link {
  color: var(--accent-blue);
}
.receipt-ok .receipt-label {
  color: var(--accent-green);
}
.receipt-failed .receipt-label,
.receipt-rejected .receipt-label {
  color: var(--accent-red);
}
.receipt-pending .receipt-label {
  color: var(--accent-orange);
}

/* ---- 9.10 按钮：只补圆角/字重（背景与禁用态逻辑保持内联样式，避免互相打架） ---- */
button {
  border-radius: var(--radius-btn);
  font-weight: 600;
  transition: opacity 0.15s ease, transform 0.06s ease, background 0.15s ease;
}
button.ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

/* ---- 9.11 页面顶部「安全声明」信息条 ----
   它用的是**行内 style 属性**，无法用类名覆盖，这里用属性选择器精确命中；
   属于临时桥接，后续给它加 class 后本段可删除。 */
div[style*="background-color: #f8f9fa"] {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-left-color: var(--accent-blue) !important;
  color: var(--text-sub) !important;
  border-radius: var(--radius-card) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
div[style*="background-color: #f8f9fa"] div[style*="color: #007bff"] {
  color: var(--accent-blue) !important;
}
div[style*="background-color: #f8f9fa"] div[style*="color: #d9534f"] {
  color: var(--accent-orange) !important;
}