/* ============================================================
   OKX 买入 —— 手机端样式
   深色主题 · 紧凑布局 · 触控优化（最小点击区 44×44）
   ============================================================ */

:root {
  --bg:        #0f1218;
  --bg-card:   #181c26;
  --bg-card-2: #1f2431;
  --border:    #242a38;
  --text:      #e8ecf4;
  --muted:     #7d8597;
  --accent:    #3b82f6;
  --ok:        #10b981;
  --warn:      #f59e0b;
  --err:       #ef4444;
  --sell:      #ef4444;
  --approve:   #f59e0b;
  --radius:    10px;
  --radius-sm: 7px;
  --ff: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Microsoft YaHei", Roboto, sans-serif;
  --ff-mono: "SF Mono", Monaco, Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 修正 [hidden] 被 .view-login { display:flex } 等规则覆盖导致视图切不走的问题 */
[hidden] { display: none !important; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 var(--ff);
  min-height: 100vh;
  overscroll-behavior-y: contain;
  padding-env: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body {
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

input, button, select, textarea {
  font: inherit;
  color: inherit;
}
input[type="text"], input[type="password"] {
  width: 100%;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--ff-mono);
  font-size: 14px;
  outline: none;
}
input[type="text"]:focus, input[type="password"]:focus {
  border-color: var(--accent);
}
button { cursor: pointer; border: none; background: none; color: inherit; }

.view {
  max-width: 540px;
  margin: 0 auto;
  padding: 14px;
}
.muted { color: var(--muted); }

/* ========== 登录 / 解锁 ========== */
.view-login, .view-unlock {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-wrap, .unlock-wrap {
  width: 100%;
  max-width: 420px;
  padding: 22px 18px;
}
.brand {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  text-align: center; margin-bottom: 4px;
}
.brand-sub {
  text-align: center; color: var(--muted); font-size: 12px; margin-bottom: 26px;
}
.field-lg { margin-bottom: 14px; }
.field-lg label {
  display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px;
}
.field-lg input { padding: 14px 12px; font-size: 15px; }

.btn-primary {
  background: var(--accent); color: #fff;
  padding: 12px 14px; border-radius: var(--radius-sm);
  font-weight: 600;
  min-height: 44px;
}
.btn-primary:active { opacity: 0.8; }
.btn-primary:disabled { background: #3a4253; opacity: 0.6; }
.btn-lg { width: 100%; padding: 15px; font-size: 16px; }

.btn-ghost {
  background: var(--bg-card-2); border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 14px; border-radius: var(--radius-sm);
  min-height: 44px; font-weight: 500;
}
.btn-text {
  background: transparent; color: var(--accent); padding: 6px 4px; font-size: 13px;
}
.login-hint {
  text-align: center; font-size: 12px; color: var(--muted);
  margin-top: 12px; min-height: 16px;
}
.login-hint.err { color: var(--err); }
.login-hint.ok { color: var(--ok); }

/* ========== 解锁视图 ========== */
.section-title {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
  font-size: 16px; font-weight: 600;
}
.security-notice {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.sec-line {
  font-size: 12px; color: var(--muted); line-height: 1.6;
}
.key-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
}
.key-card.ready {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(to bottom, rgba(16,185,129,0.06), var(--bg-card));
}
.key-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; font-size: 13px;
}
.key-title { font-weight: 600; }
.key-status {
  padding: 2px 8px; border-radius: 10px; font-size: 11px;
  background: #2a3042; color: var(--muted);
}
.key-status.ok  { background: rgba(16,185,129,0.18); color: var(--ok); }
.key-status.err { background: rgba(239,68,68,0.18); color: var(--err); }
.key-card input { margin-bottom: 10px; }
.key-actions {
  display: flex; gap: 8px;
}
.key-actions .btn-ghost { flex: 0 0 auto; }
.key-actions .btn-primary { flex: 1; }
.key-addr {
  font-family: var(--ff-mono);
  font-size: 11px; margin-top: 8px;
  word-break: break-all;
}

/* ========== 交易主界面 ========== */

.status-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 2px 10px; font-size: 12px;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #6b7280;
}
.status-dot.ok  { background: var(--ok); box-shadow: 0 0 6px rgba(16,185,129,0.6); }
.status-dot.err { background: var(--err); }
.status-text { font-weight: 500; }
.wallet {
  margin-left: auto; font-family: var(--ff-mono); color: var(--muted);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.icon-btn {
  min-width: 32px; min-height: 32px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 7px; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 7px; font-size: 13px;
}
.icon-btn:active { background: var(--bg-card-2); }

/* 模式/链 tab */
.mode-tabs, .chain-tabs {
  display: flex; gap: 4px; background: var(--bg-card);
  padding: 4px; border-radius: var(--radius);
  margin-bottom: 8px;
}
.mode-tab, .tab {
  flex: 1; padding: 9px 6px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  background: transparent; color: var(--muted);
  min-height: 40px;
}
.mode-tab.active {
  background: var(--accent); color: #fff;
}
.mode-tab[data-mode="sell"].active { background: var(--sell); }
.tab.active { background: var(--bg-card-2); color: var(--text); }

/* 输入区 */
.field { margin-bottom: 10px; }
.field > label {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--muted); margin-bottom: 5px;
}
.field .unit { color: var(--muted); font-size: 11px; }
.input-row {
  display: flex; gap: 6px;
}
.input-row input { flex: 1; }
.btn-sm {
  min-width: 52px; background: var(--bg-card-2);
  border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 0 10px; font-size: 13px;
}
.btn-sm:active { background: #2c3344; }

/* 代币信息 */
.token-info {
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 10px; font-size: 13px;
}
.token-info .line1 {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.token-info strong { font-size: 15px; }
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  background: var(--bg-card-2); font-size: 10px; font-weight: 600;
  color: var(--muted);
}
.badge-change.up   { background: rgba(16,185,129,0.2); color: var(--ok); }
.badge-change.down { background: rgba(239,68,68,0.2);  color: var(--err); }

/* K 线 */
.chart-wrap {
  margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: #000;
  aspect-ratio: 4/3;
}
.chart-wrap iframe {
  width: 100%; height: 100%; border: 0; display: block;
}

/* 卖出信息 */
.sell-info {
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 10px; font-size: 13px;
}
.allowance-line { font-size: 12px; margin-top: 4px; }
.allowance-line.ok   { color: var(--ok); }
.allowance-line.warn { color: var(--warn); }

/* 预估 */
.trade-estimate {
  background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.3);
  color: var(--text); padding: 8px 11px;
  border-radius: var(--radius-sm); font-size: 12px; margin-bottom: 8px;
}
.trade-estimate.sell {
  background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3);
}
.trade-estimate .muted-tail { color: var(--muted); }

/* 快速金额 */
.quick-amounts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 6px;
}
.quick-amounts button {
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); padding: 8px 2px; border-radius: var(--radius-sm);
  font-size: 13px; min-height: 38px;
}
.quick-amounts button:active { background: var(--bg-card-2); }

/* 高级 */
.advanced {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px; margin-bottom: 10px;
  font-size: 13px;
}
.advanced summary {
  cursor: pointer; padding: 6px 0; user-select: none;
}
.advanced .grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin-top: 8px;
}
.advanced .grid label {
  display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px;
}
.advanced .grid input { padding: 8px; font-size: 13px; }
.advanced .flags {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  margin-top: 10px; font-size: 12px;
}
.advanced .flags label {
  display: flex; align-items: center; gap: 5px;
}

/* Prep pill */
.prep-pill {
  font-size: 12px; padding: 6px 10px; border-radius: 6px;
  background: var(--bg-card-2); color: var(--muted); margin-bottom: 8px;
}
.prep-pill.preparing { background: rgba(59,130,246,0.12); color: var(--accent); }
.prep-pill.ready     { background: rgba(16,185,129,0.12); color: var(--ok); }
.prep-pill.error     { background: rgba(239,68,68,0.12);  color: var(--err); }

/* 主按钮 */
.buy-btn {
  width: 100%; background: var(--accent); color: #fff;
  padding: 16px; border-radius: var(--radius);
  font-size: 16px; font-weight: 600;
  min-height: 54px;
  transition: opacity 0.15s;
}
.buy-btn:active { opacity: 0.82; }
.buy-btn:disabled { background: #3a4253; opacity: 0.6; }
.buy-btn.sell-mode   { background: var(--sell); }
.buy-btn.approve-mode{ background: var(--approve); }
.buy-btn.loading { opacity: 0.7; }

/* 日志 */
.log {
  margin-top: 14px; font-family: var(--ff-mono); font-size: 11.5px;
  line-height: 1.5;
}
.log .entry {
  padding: 5px 0; border-bottom: 1px solid var(--border);
  word-break: break-all;
}
.log .entry.ok  { color: var(--ok); }
.log .entry.err { color: var(--err); }
.log .ts { color: var(--muted); margin-right: 6px; }
.log a { color: var(--accent); text-decoration: none; }
.speedup-btn {
  margin-left: 6px; font-size: 10px; padding: 2px 6px;
  background: var(--warn); color: #1a1a1a; border-radius: 4px; font-weight: 600;
}

/* 历史 */
.history-wrap { margin-top: 14px; }
.history-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-size: 13px; font-weight: 500;
}
.history-list { font-size: 12px; }
.history-item {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 6px; align-items: center;
  padding: 7px 8px; border-bottom: 1px solid var(--border);
}
.history-item .h-mode {
  display: inline-block; width: 16px; height: 16px;
  text-align: center; line-height: 16px; font-size: 10px;
  border-radius: 4px; margin-right: 5px; color: #fff;
}
.history-item.buy .h-mode  { background: var(--accent); }
.history-item.sell .h-mode { background: var(--sell); }
.history-item .h-chain {
  display: inline-block; padding: 1px 6px; border-radius: 8px;
  background: var(--bg-card-2); font-size: 10px; margin-right: 4px;
  color: var(--muted);
}
.history-item .h-ts { color: var(--muted); font-size: 10px; }
.history-item a {
  color: var(--accent); text-decoration: none; font-family: var(--ff-mono);
  font-size: 11px;
}
.history-item .h-sym { font-weight: 500; }