:root {
  --bg: #070a09;
  --bg2: #101512;
  --surface: #0c110e;
  --surface2: #131a16;
  --line: #24342c;
  --line-soft: #1a2620;
  --fg: #f5f7f6;
  --muted: #929d97;
  --primary: #00d68f;
  --primary-strong: #00b878;
  --mint: #8affc1;
  --on-primary: #03130c;
  --danger: #ff6b6b;
  --warn: #f5b84b;
  --info: #6cb8ff;
  --mono: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(120% 60% at 50% -10%, rgba(0, 214, 143, 0.12), transparent 60%), var(--bg);
  color: var(--fg);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Tahoma, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
html[dir="rtl"] body { letter-spacing: 0; }
input, textarea, select, .mono, .hash, .addr { -webkit-user-select: text; user-select: text; }

#app { max-width: 640px; margin: 0 auto; padding: env(safe-area-inset-top) 0 calc(84px + env(safe-area-inset-bottom)); }

.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(7, 10, 9, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.logo { width: 36px; height: 36px; flex: none; }
.brand { flex: 1; min-width: 0; }
.title { font-weight: 650; letter-spacing: 0.02em; }
html[dir="rtl"] .title { letter-spacing: 0; }

.content { padding: 12px; display: flex; flex-direction: column; gap: 12px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
details.card { display: block; }
details.card > summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.card.alarm { background: #2a0d0d; border: 2px solid var(--danger); }
.card.alarm h1, .card.alarm h2 { color: var(--danger); }

h1 { font-size: 22px; margin: 0; line-height: 1.3; }
h2 { font-size: 18px; margin: 4px 0 0; }
h3 { font-size: 15px; margin: 6px 0 0; color: var(--mint); }
p { margin: 0; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.strong { font-weight: 700; }
.good { color: var(--primary); font-weight: 600; }
.bad { color: var(--danger); font-weight: 600; }
.warn-text { color: var(--warn); }

.mono { font-family: var(--mono); word-break: break-all; unicode-bidi: isolate; }
.addr b { color: var(--mint); font-weight: 700; }
.big-num { font-size: 18px; font-weight: 700; }
.hash { background: var(--bg2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 10px; }

.row { display: flex; align-items: center; }
.row.between { justify-content: space-between; gap: 8px; }
.row.gap { gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.check { align-items: flex-start; }
.check input { margin-top: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--bg2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px; }

.btn {
  appearance: none; border: 0; border-radius: 14px;
  min-height: 48px; padding: 0 18px;
  background: var(--primary); color: var(--on-primary);
  font: inherit; font-weight: 650;
  cursor: pointer; touch-action: manipulation;
}
.btn:active { background: var(--primary-strong); }
.btn:disabled { opacity: 0.4; }
.btn.big { min-height: 56px; font-size: 17px; width: 100%; }
.btn.small { min-height: 40px; padding: 0 12px; font-size: 14px; }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.btn.danger { background: var(--danger); color: #1a0505; }
.btn.sticky { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); }
.file-btn { display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; font-size: 100px; }

.label { font-size: 14px; color: var(--muted); margin-top: 4px; }
.input, textarea, select {
  width: 100%;
  font: inherit; font-size: 16px;
  color: var(--fg); background: var(--bg2);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; min-height: 48px;
}
textarea { resize: vertical; }
.input:focus, textarea:focus, select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.phrase { font-family: var(--mono); font-size: 17px; line-height: 1.6; }
.phrase.masked { -webkit-text-security: disc; }
.confirm { font-family: var(--mono); font-size: 20px; text-align: center; letter-spacing: 0.2em; }
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; accent-color: var(--primary); flex: none; }

.phrase-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.pill, .badge { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; background: var(--surface2); border: 1px solid var(--line); unicode-bidi: isolate; }
.badge { direction: ltr; }
.badge.tron { color: #ff8a8a; border-color: #5a2a2a; }
.badge.bsc { color: #f3c94f; border-color: #5a4a1f; }
.badge.eth { color: #b9c3ff; border-color: #3a4170; }
.badge.polygon { color: #c9a6ff; border-color: #4a3470; }
.badge.arbitrum { color: #8fd0ff; border-color: #24496a; }
.badge.base { color: #8fb3ff; border-color: #1f3a78; }
.badge.chain { display: inline-flex; align-items: center; gap: 5px; padding-inline-start: 4px; }

.icon { width: 22px; height: 22px; flex: none; }
.icon-sm { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.icon-xs { width: 15px; height: 15px; flex: none; vertical-align: -2px; }
.chain-title { display: flex; align-items: center; gap: 8px; }
h3.chain-title { margin-top: 12px; }
.chain-icons { gap: 6px; align-items: center; }
.chain-block { border-top: 1px solid var(--line-soft); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.stat-label { display: flex; align-items: center; gap: 6px; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 12px; border-radius: 999px;
  background: var(--bg2); color: var(--fg); border: 1px solid var(--line);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.chip.active { border-color: var(--primary); background: #0b2a1d; color: var(--mint); }
.chip-n { font-size: 12px; color: var(--muted); background: var(--surface2); border-radius: 999px; padding: 0 7px; min-width: 22px; text-align: center; }

details.alert { display: block; }
details.alert > summary { cursor: pointer; font-weight: 600; }
.dropped li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }

.alert { border-radius: 12px; padding: 12px; border: 1px solid; font-size: 15px; display: flex; flex-direction: column; gap: 8px; }
.alert.danger { background: #2a0d0d; border-color: var(--danger); color: #ffd2d2; }
.alert.warn { background: #2a210c; border-color: var(--warn); color: #ffe7b8; }
.alert.ok { background: #0b2a1d; border-color: var(--primary); color: #c9ffe6; font-weight: 600; }
.alert.info { background: #0c1d2c; border-color: var(--info); color: #d3eaff; }

.id-row { border-top: 1px solid var(--line-soft); padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.id-net { font-weight: 700; }
.gas-row { padding: 6px 0; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }

.holdings, .steps, .plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.holding { display: flex; gap: 12px; align-items: flex-start; background: var(--bg2); border: 1px solid var(--line-soft); border-radius: 14px; padding: 12px; }
.holding label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.holding.dim { opacity: 0.6; }
.amounts { display: flex; flex-wrap: wrap; gap: 4px 14px; }

.step { background: var(--bg2); border: 1px solid var(--line-soft); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.step.destination { border-inline-start: 4px solid var(--primary); }
.step.deposit { border-inline-start: 4px solid var(--info); }
.status { font-size: 13px; font-weight: 700; }
.status.ok, .status.dry { color: var(--primary); }
.status.failed { color: var(--danger); }
.status.running { color: var(--warn); }
.status.skipped, .status.pending { color: var(--muted); }
.amount-line { margin: 2px 0; }
.addr-line { padding-inline-start: 8px; }
.dest-box { background: #0b2a1d; border: 1px solid var(--primary); border-radius: 12px; padding: 12px; font-size: 16px; }
.summary-net { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.mismatch { border-top: 1px solid var(--line-soft); padding: 6px 0; }
.kv { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.dest { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }

progress { width: 100%; height: 10px; accent-color: var(--primary); }

.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 6;
  display: flex; justify-content: center;
  background: rgba(12, 17, 14, 0.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}
.tab { flex: 1; max-width: 160px; min-height: 52px; background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; border-radius: 12px; }
.tab.active { color: var(--primary); background: var(--surface2); }
.tab:disabled { opacity: 0.35; }

.overlay { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.7); display: flex; align-items: flex-end; justify-content: center; padding: 12px; }
.dialog { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; margin-bottom: env(safe-area-inset-bottom); }
.dialog .row .btn { flex: 1; }
.dialog-body { display: flex; flex-direction: column; gap: 10px; }
.toast { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(90px + env(safe-area-inset-bottom)); background: var(--surface2); border: 1px solid var(--primary); color: var(--fg); padding: 10px 16px; border-radius: 12px; }
a { color: var(--primary); }