/* Telegram theme variables with fallbacks for browser testing */
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --secondary-bg: var(--tg-theme-secondary-bg-color, #f4f4f5);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #888888);
  --link: var(--tg-theme-link-color, #2481cc);
  --btn-bg: var(--tg-theme-button-color, #2481cc);
  --btn-text: var(--tg-theme-button-text-color, #ffffff);
  --accent: #f7931a; /* Bitcoin orange */
  --radius: 12px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body.app {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-size: 15px;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--secondary-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-title { font-weight: 600; font-size: 16px; }
.lock-badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 500;
}
.lock-badge.locked   { background: #fee; color: #c00; }
.lock-badge.unlocked { background: #efe; color: #060; }

/* ── Content ─────────────────────────────────────────────────────────── */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px calc(70px + var(--safe-bottom));
}
.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* ── Balance card ────────────────────────────────────────────────────── */
.balance-card {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-radius: var(--radius);
  padding: 24px 20px;
  margin-bottom: 20px;
  text-align: center;
}
.balance-label { font-size: 13px; opacity: .8; margin-bottom: 6px; }
.balance-amount {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
}
.balance-unit { font-size: 18px; font-weight: 400; margin-left: 4px; }
.balance-btc { font-size: 13px; opacity: .7; margin-top: 4px; }
.unlock-prompt { margin-top: 16px; }

/* ── Quick actions ───────────────────────────────────────────────────── */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.quick-btn {
  background: var(--secondary-bg);
  border: none;
  border-radius: var(--radius);
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: opacity .15s;
}
.quick-btn:active { opacity: .7; }
.quick-icon { font-size: 22px; }

/* ── Address row ─────────────────────────────────────────────────────── */
.address-row {
  background: var(--secondary-bg);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.address-label { font-size: 11px; color: var(--hint); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.address-value {
  font-family: monospace;
  font-size: 13px;
  word-break: break-all;
  cursor: pointer;
  color: var(--link);
}

/* ── Session info ────────────────────────────────────────────────────── */
.session-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.hint { font-size: 12px; color: var(--hint); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: none;
  border-radius: var(--radius);
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary:active:not(:disabled) { opacity: .85; }
.btn-secondary {
  background: var(--secondary-bg);
  color: var(--text);
  border: none;
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
}
.btn-sm  { padding: 7px 14px; font-size: 13px; }
.btn-wide { width: 100%; margin-top: 16px; }

/* ── Form fields ─────────────────────────────────────────────────────── */
.field-label {
  display: block;
  font-size: 13px;
  color: var(--hint);
  margin: 14px 0 6px;
}
.field-input, .field-textarea {
  width: 100%;
  background: var(--secondary-bg);
  color: var(--text);
  border: none;
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 15px;
  resize: none;
  outline: none;
}
.field-textarea { line-height: 1.4; }
.type-badge {
  font-size: 12px;
  color: var(--hint);
  margin: 6px 0 0 2px;
}
.error-msg   { color: #c00; font-size: 13px; margin-top: 10px; }
.success-msg { color: #060; font-size: 13px; margin-top: 10px; }

/* ── Lock notice ─────────────────────────────────────────────────────── */
.lock-notice {
  background: var(--secondary-bg);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}
.lock-notice p { color: var(--hint); margin-bottom: 14px; }

/* ── Receive tabs ────────────────────────────────────────────────────── */
.receive-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.receive-tab {
  flex: 1;
  padding: 9px;
  border: none;
  border-radius: 8px;
  background: var(--secondary-bg);
  color: var(--hint);
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
}
.receive-tab.active {
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 600;
}

/* ── QR ──────────────────────────────────────────────────────────────── */
.qr-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0;
  background: #fff;
  border-radius: var(--radius);
  padding: 16px;
}
.address-copy {
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
  background: var(--secondary-bg);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--link);
  margin-bottom: 8px;
}
.invoice-text { font-size: 10px; }

/* ── Transaction list ────────────────────────────────────────────────── */
.tx-list { list-style: none; }
.tx-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--secondary-bg);
}
.tx-left { display: flex; align-items: center; gap: 12px; }
.tx-icon { font-size: 20px; width: 28px; text-align: center; }
.tx-amount { font-weight: 600; font-size: 15px; }
.tx-dest { font-size: 12px; color: var(--hint); margin-top: 2px; font-family: monospace; }
.tx-right { text-align: right; }
.tx-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.status-done      { background: #efe; color: #060; }
.status-failed    { background: #fee; color: #c00; }
.status-processing { background: #fef; color: #606; }
.status-expired   { background: var(--secondary-bg); color: var(--hint); }
.status-awaiting_unlock { background: #ffe; color: #660; }
.tx-date { font-size: 11px; color: var(--hint); margin-top: 4px; }

/* ── Bottom tab bar ──────────────────────────────────────────────────── */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--secondary-bg);
  display: flex;
  padding-bottom: var(--safe-bottom);
  border-top: 1px solid rgba(0,0,0,.08);
  z-index: 20;
}
.tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: var(--hint);
  transition: color .15s;
}
.tab-btn.active { color: var(--btn-bg); }
.tab-icon { font-size: 20px; }
.tab-label { font-size: 11px; font-weight: 500; }

/* ── PIN overlay ─────────────────────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: flex-end;
  z-index: 100;
}
.pin-card {
  width: 100%;
  background: var(--bg);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 28px 24px calc(24px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pin-title { font-size: 20px; font-weight: 700; text-align: center; }
.pin-hint  { font-size: 14px; color: var(--hint); text-align: center; }
.pin-input {
  width: 100%;
  background: var(--secondary-bg);
  color: var(--text);
  border: none;
  border-radius: var(--radius);
  padding: 14px;
  font-size: 20px;
  text-align: center;
  letter-spacing: 4px;
  outline: none;
}
.pin-error { font-size: 13px; color: #c00; text-align: center; }

/* ── Wallet UI wrapper (hides during setup/seed) ─────────────────────── */
.wallet-ui {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ── Setup screen ────────────────────────────────────────────────────── */
.setup-screen {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px calc(24px + var(--safe-bottom));
}
.setup-inner {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.setup-icon {
  font-size: 52px;
  text-align: center;
  margin-bottom: 8px;
}
.setup-title {
  font-size: 26px;
  font-weight: 800;
  text-align: center;
  color: var(--text);
  margin-bottom: 4px;
}
.setup-sub {
  font-size: 14px;
  color: var(--hint);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* ── Seed reveal screen ──────────────────────────────────────────────── */
.seed-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 300;
  overflow-y: auto;
  padding: 24px 20px calc(32px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
}
.seed-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hint);
  font-size: 15px;
}
.seed-error-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
}
.seed-error-icon { font-size: 48px; }
.seed-error-msg { color: #c00; font-size: 15px; }
.seed-content { display: flex; flex-direction: column; gap: 20px; }
.seed-title {
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  color: var(--text);
}
.seed-subtitle {
  font-size: 14px;
  color: var(--hint);
  text-align: center;
  line-height: 1.5;
}
.seed-subtitle strong { color: #c00; }
.seed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.seed-word {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--secondary-bg);
  border-radius: 8px;
  padding: 10px 12px;
}
.seed-num {
  font-size: 11px;
  color: var(--hint);
  min-width: 18px;
  text-align: right;
  font-weight: 600;
}
.seed-val {
  font-family: monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .5px;
}
.seed-confirm-wrap {
  background: var(--secondary-bg);
  border-radius: var(--radius);
  padding: 16px;
}
.seed-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.seed-check input { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; }

/* ── Toast ───────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(75px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.8);
  color: #fff;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13px;
  z-index: 200;
  pointer-events: none;
}