:root {
  --bg: var(--tg-theme-bg-color, #fff);
  --secbg: var(--tg-theme-secondary-bg-color, #f1f1f4);
  --text: var(--tg-theme-text-color, #000);
  --hint: var(--tg-theme-hint-color, #8a8a8e);
  --link: var(--tg-theme-link-color, #2481cc);
  --btn: var(--tg-theme-button-color, #2481cc);
  --btn-text: var(--tg-theme-button-text-color, #fff);
  --radius: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--secbg);
  color: var(--text);
  padding-bottom: 78px;
  font-size: 16px;
}

#appHeader {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; min-height: 52px;
  background: var(--bg);
  border-bottom: 1px solid rgba(128,128,128,.15);
}
.hdr-left { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.hdr-right { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.hdr-title { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-back {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; color: var(--link); cursor: pointer;
  font-size: 16px; font-weight: 600; padding: 4px 2px; min-width: 0;
}
.hdr-back span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-back .ic { width: 22px; height: 22px; }
.hdr-search { flex: 1; }
.hdr-search input {
  width: 100%; border: none; background: var(--secbg); color: var(--text);
  padding: 9px 12px; border-radius: 10px; font-size: 15px;
}
#appHeader .iconbtn { color: var(--link); padding: 6px; }
#appHeader .iconbtn .ic { width: 23px; height: 23px; }
.iconbtn.on { color: var(--btn); }

main { padding: 14px; max-width: 640px; margin: 0 auto; }
.loader { text-align: center; color: var(--hint); padding: 40px 0; }

h2.section { font-size: 14px; color: var(--hint); margin: 18px 4px 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

.section-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 4px 8px; }
.section-row .section { margin: 0; }
.btn-mini {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1.5px solid var(--btn); background: transparent; color: var(--btn);
  border-radius: 20px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn-mini .ic { width: 15px; height: 15px; }
.btn-mini:active { opacity: .6; }

.card {
  background: var(--bg); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px;
}
.card.tap { cursor: pointer; transition: opacity .1s; }
.card.tap:active { opacity: .6; }

.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.row + .row { margin-top: 10px; }
.muted { color: var(--hint); font-size: 14px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; }
.big { font-size: 22px; font-weight: 700; }
.green { color: #1a9d4b; }
.red { color: #e0533d; }

.addr-line { display: flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dot.active { background: #1a9d4b; }
.dot.idle { background: var(--link); }
.dot.arch { background: var(--hint); }

label.field { display: block; margin: 14px 0 6px; font-size: 14px; color: var(--hint); }
input.inp, select.inp {
  width: 100%; padding: 13px 14px; font-size: 16px;
  border: none; border-radius: var(--radius);
  background: var(--secbg); color: var(--text);
}
input.inp:focus, select.inp:focus { outline: 2px solid var(--btn); }
select.inp { -webkit-appearance: none; appearance: none; }

/* Small inline icon button (e.g. copy on a wallet card) */
.iconbtn {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
  color: var(--hint); padding: 4px; border-radius: 8px; line-height: 0;
}
.iconbtn .ic { width: 20px; height: 20px; }
.iconbtn:active { opacity: .5; }

/* Line icons inherit the current text color */
.ic {
  width: 24px; height: 24px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

button.btn {
  width: 100%; padding: 13px; font-size: 16px; font-weight: 600;
  border-radius: var(--radius); cursor: pointer; margin-top: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* Primary CTA: outlined with the brand color, not flooded with it */
  background: transparent; color: var(--btn);
  border: 1.5px solid var(--btn);
}
button.btn .ic { width: 18px; height: 18px; }
button.btn:active { opacity: .55; }
button.btn.sec { color: var(--text); border-color: rgba(128,128,128,.32); }
button.btn.danger { color: var(--red, #e0533d); border-color: var(--red, #e0533d); }
button.btn:disabled { opacity: .4; }

.pill { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 20px; background: var(--secbg); color: var(--hint); }

#tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; background: var(--bg);
  border-top: 1px solid rgba(128,128,128,.15);
  padding-bottom: env(safe-area-inset-bottom);
}
#tabbar .tab {
  flex: 1; border: none; background: none; color: var(--hint);
  padding: 9px 0 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
#tabbar .tab span { font-size: 11px; }
#tabbar .tab.on { color: var(--link); }
#tabbar .tab .ic { width: 25px; height: 25px; }

.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.85); color: #fff; padding: 10px 18px;
  border-radius: 22px; font-size: 14px; z-index: 50; max-width: 88%;
}

.empty { text-align: center; color: var(--hint); padding: 40px 16px; }
.spin { opacity: .5; pointer-events: none; }

input.inp.invalid, select.inp.invalid { outline: 2px solid var(--red, #e0533d); }

/* Subtle link-style action (e.g. private key) */
.linklike {
  border: none; background: none; cursor: pointer;
  color: var(--hint); font-size: 13px; padding: 0;
}
.linklike:active { opacity: .5; }

/* Menu rows that open sub-screens */
.menu-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; border: none; background: var(--bg); color: var(--text);
  padding: 15px 16px; border-radius: var(--radius); margin-bottom: 10px;
  font-size: 16px; cursor: pointer; text-align: left;
}
.menu-row:active { opacity: .6; }
.menu-row .chev { color: var(--hint); }
.menu-row .chev .ic { width: 20px; height: 20px; }

/* Transaction meta line (wallet + rate) */
.tx-meta { color: var(--hint); font-size: 12px; margin-top: 4px; display: flex; justify-content: space-between; gap: 8px; }
.card.failed { opacity: .5; }
.card.failed b { color: var(--hint); }

/* Profit breakdown rows */
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.kv + .kv { margin-top: 10px; }
.kv .k { color: var(--hint); font-size: 14px; }

/* Bottom sheet */
#sheetRoot { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
#sheetRoot.open { pointer-events: auto; }
.sheet-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity .2s;
}
#sheetRoot.open .sheet-overlay { opacity: 1; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--bg); border-radius: 18px 18px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .25s ease;
  max-height: 85vh; overflow-y: auto;
}
#sheetRoot.open .sheet { transform: translateY(0); }
.sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--hint); opacity: .4; margin: 6px auto 12px; }
.sheet-title { margin: 0 0 12px; font-size: 17px; }
.sheet-actions { display: flex; gap: 10px; margin-top: 16px; }
.sheet-actions .btn { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1.5px solid rgba(128,128,128,.3); background: transparent; color: var(--text);
  padding: 8px 14px; border-radius: 20px; font-size: 14px; cursor: pointer;
}
.chip.on { border-color: var(--btn); color: var(--btn); }