:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #edf1f5;
  background: #0c1118;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --muted: #929eac;
  --line: #27323d;
  --panel: #121922;
  --accent-orange: #f7931a;
  --accent-orange-dark: #3a2410;
  --error: #f1a29e;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
[hidden] { display: none !important; }
.app-shell { min-height: 100vh; }
.topbar { height: 68px; padding: 0 clamp(18px, 5vw, 64px); border-bottom: 1px solid #202934; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #f1f5f8; text-decoration: none; font-size: 19px; font-weight: 750; letter-spacing: -.5px; }
.brand-mark { display: block; width: 40px; height: 48px; flex: 0 0 auto; object-fit: contain; }
.topbar-right { display: flex; align-items: center; gap: 11px; }
.topbar-right .network { display: none; }
.language-picker select { min-height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; color: #d4dce4; background: var(--panel); font-size: 11px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.network { padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; color: #c1ccd7; font-size: 10px; font-weight: 650; }
.network-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent-orange); }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--accent-orange); font-size: 17px; }
.lock-button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 10px; color: #f1f5f8; font-size: 11px; }
.lock-button span:first-child { color: var(--accent-orange); font-size: 15px; }
main { width: min(100% - 32px, 650px); margin: 0 auto; padding: 43px 0 24px; }
.intro { margin-bottom: 17px; }
.eyebrow, .step-label { color: var(--accent-orange); font-size: 10px; font-weight: 750; letter-spacing: 1.15px; text-transform: uppercase; }
h1 { margin: 8px 0; font-size: clamp(30px, 8vw, 40px); letter-spacing: -1.5px; line-height: 1.06; }
h1 span { color: var(--accent-orange); }
.intro p, .muted { color: var(--muted); font-size: 12px; line-height: 1.6; }
.intro p { max-width: 480px; }
.privacy-callout { margin-bottom: 14px; padding: 10px 12px; border: 1px solid #754516; border-radius: 10px; background: #20170e; color: #f2c58c; font-size: 10px; }
.privacy-callout summary, .send-details summary { cursor: pointer; font-weight: 700; }
.privacy-callout p { margin: 9px 0 0; color: #e6c8a3; font-size: 10px; line-height: 1.6; }
.panel { padding: 21px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.panel-heading, .wallet-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
h2 { margin: 13px 0 7px; font-size: 18px; letter-spacing: -.4px; }
.panel .muted { margin: 0; }
.button-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.button { min-height: 40px; padding: 0 15px; border: 1px solid transparent; border-radius: 9px; font-size: 11px; font-weight: 750; transition: background .15s ease, border-color .15s ease; }
.button-primary { color: #201306; background: var(--accent-orange); }
.button-primary:hover { background: #ffad43; }
.button-secondary { color: #c6d0da; border-color: var(--line); background: #151e27; }
.button-secondary:hover { border-color: #754516; background: #21180f; }
.fine-print { margin: 15px 0 0; color: #858f9e; font-size: 9px; line-height: 1.65; }
.phrase-panel, .password-panel, .restore-panel, .unlock-panel { margin-top: 18px; }
.phrase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 17px 0; }
.phrase-word { display: flex; gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #0e151c; }
.phrase-word span { color: #758190; font-size: 9px; }
.phrase-word strong { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.check-row { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0; color: #c5ced7; font-size: 10px; line-height: 1.5; }
.check-row input { accent-color: var(--accent-orange); }
.field-label { display: block; margin: 15px 0 7px; color: #bec8d2; font-size: 10px; font-weight: 650; }
.text-input { display: block; width: 100%; min-height: 41px; padding: 10px 11px; border: 1px solid #303d49; border-radius: 9px; outline: none; color: #eef3f6; background: #0d141b; font-size: 12px; }
.text-input:focus { border-color: var(--accent-orange); box-shadow: 0 0 0 3px #f7931a24; }
.phrase-input { resize: vertical; line-height: 1.6; }
.full-button { width: 100%; margin-top: 16px; }
.form-error { min-height: 0; margin-top: 9px; color: var(--error); font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; }
.text-button { display: block; margin: 15px auto 0; padding: 5px; border: 0; color: #aab6c2; background: transparent; font-size: 10px; text-decoration: underline; }
.flow-open .intro, .flow-open .privacy-callout { display: none; }
.wallet-panel { margin-top: 0; }
.wallet-heading { margin-bottom: 10px; }
.wallet-heading h2 { margin: 5px 0 0; }
.refresh-button { min-height: 34px; }
.wallet-address-button { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: #aeb9c4; background: var(--panel); text-align: left; font-size: 10px; }
.wallet-address-button code { flex: 1; min-width: 0; overflow: hidden; color: #e1eee7; text-overflow: ellipsis; }
.wallet-address-button span:last-child { color: var(--accent-orange); }
.status-line { min-height: 20px; padding: 5px 2px; color: #9db0a6; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.price-line { margin: 10px 0 3px; color: var(--accent-orange); font-size: 11px; font-weight: 650; }
.balance-fiat { color: var(--muted); font-size: 10px; white-space: nowrap; }
.network-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.network-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.network-card-heading { display: flex; flex: 0 0 32px; align-items: center; }
.network-symbol { flex: 0 0 auto; color: var(--accent-orange); font-size: 9px; font-weight: 750; }
.network-balance-group { flex: 1; min-width: 0; }
.network-balance-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.network-balance { margin: 0; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.network-pending-balance { margin-top: 4px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.network-address-row { flex: 0 0 auto; }
.copy-button { padding: 6px 9px; border: 1px solid #ffffff29; border-radius: 7px; color: #e1eee7; background: #ffffff12; font-size: 9px; }
.send-details { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; color: #d7e0e8; background: var(--panel); font-size: 11px; }
.send-details > summary { padding: 13px 14px; cursor: pointer; color: var(--accent-orange); font-weight: 750; }
.send-panel { margin: 0 8px 8px; padding: 15px; }
.send-panel h2 { margin: 0; }
.send-warning { margin: 8px 0 0; color: #e6c8a3; font-size: 10px; line-height: 1.6; }
.send-amount-usd { min-height: 15px; margin: 5px 0 0; color: var(--accent-orange); font-size: 10px; font-weight: 650; }
.footer { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 20px 2px 0; color: #73808d; font-size: 9px; line-height: 1.5; }
.footer a { color: var(--accent-orange); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.policy { width: min(100% - 32px, 650px); margin: 0 auto; padding: 42px 0; }
.policy h1 { font-size: 34px; margin: 20px 0; }
.policy h2 { font-size: 16px; margin: 26px 0 8px; }
.policy p, .policy li { color: #aeb9c4; font-size: 12px; line-height: 1.8; }
.policy a { color: var(--accent-orange); }
.policy-back { display: inline-block; margin-bottom: 10px; color: var(--accent-orange); font-size: 11px; }

/* Modern wallet styling with Bitcoin-orange accents. */
:root {
  background: #080b10;
  --muted: #98a3b3;
  --line: #242b36;
  --panel: #111720;
  --accent-orange: #f7931a;
  --accent-orange-dark: #2d1d0e;
}

body {
  color: #f5f7fa;
  background:
    radial-gradient(ellipse at 50% -18%, #34200e 0, transparent 42rem),
    #080b10;
}

.topbar {
  height: 76px;
  padding-inline: max(24px, calc((100vw - 1120px) / 2));
  border-bottom-color: #1b222d;
  background: #090c11d9;
  backdrop-filter: blur(18px);
}

.brand { gap: 11px; font-size: 20px; }
.brand-mark {
  filter: drop-shadow(0 4px 10px #f7931a35);
}

.language-picker select,
.button-secondary,
.icon-button {
  border-color: #2b3441;
  border-radius: 11px;
  background: #121821;
}

main {
  width: min(100% - 40px, 1000px);
  padding-top: 72px;
}

.intro {
  max-width: 660px;
  margin: 0 auto 30px;
  text-align: center;
}

.eyebrow, .step-label {
  font-size: 11px;
  letter-spacing: 1.5px;
}

h1 {
  margin: 13px 0 10px;
  font-size: clamp(42px, 7vw, 58px);
  letter-spacing: -2.4px;
}

.intro p, .muted {
  color: #a5afbc;
  font-size: 14px;
  line-height: 1.7;
}

.intro p { max-width: 520px; margin-inline: auto; }

.privacy-callout {
  width: min(100%, 760px);
  margin: 0 auto 16px;
  padding: 14px 17px;
  border-color: #67401b;
  border-radius: 14px;
  background: #1c140d;
  font-size: 12px;
}

.panel {
  padding: clamp(24px, 4vw, 36px);
  border-color: #252d39;
  border-radius: 22px;
  background: linear-gradient(145deg, #151c26, #10151d 72%);
  box-shadow: 0 22px 70px #0005, inset 0 1px #ffffff08;
}

#welcome-panel,
.phrase-panel,
.password-panel,
.restore-panel,
.unlock-panel {
  width: min(100%, 760px);
  margin: 0 auto;
}

#welcome-panel h2, .panel h2 {
  margin-top: 0;
  font-size: 23px;
  letter-spacing: -.55px;
}

.button-row { gap: 12px; margin-top: 25px; }
.button {
  min-height: 48px;
  padding-inline: 20px;
  border-radius: 13px;
  font-size: 13px;
}

.button-primary {
  color: #181007;
  background: linear-gradient(135deg, #ffb548, #f7931a);
  box-shadow: 0 7px 20px #f7931a26;
}

.button-primary:hover {
  background: linear-gradient(135deg, #ffc56e, #ffa32e);
  transform: translateY(-1px);
}

.button-secondary { color: #e3e8ef; }
.button-secondary:hover { border-color: #986022; background: #21180f; }
.fine-print { font-size: 11px; }

.wallet-panel {
  width: min(100%, 900px);
  margin: 0 auto;
}

.wallet-heading { margin-bottom: 18px; }
.wallet-heading h2 { font-size: 28px; letter-spacing: -.8px; }
.refresh-button { min-height: 42px; }
.price-line { margin: 14px 0 12px; font-size: 13px; }

.network-grid { gap: 10px; }
.network-card {
  gap: 18px;
  padding: 18px 20px;
  border-color: #29313d;
  border-radius: 16px;
  background: #121821;
}

.network-card-heading { flex-basis: 42px; }
.network-symbol { font-size: 12px; }
.network-balance { font-size: 15px; }
.network-balance-row { gap: 8px 16px; }
.balance-fiat { font-size: 12px; }
.network-pending-balance { font-size: 12px; }

.wallet-address-button {
  min-height: 54px;
  margin: 10px 0 0;
  padding: 14px 17px;
  border-radius: 15px;
  background: #121821;
  font-size: 12px;
}

.send-details {
  margin-top: 18px;
  border-color: #29313d;
  border-radius: 17px;
  background: #111720;
  font-size: 13px;
}

.send-details > summary { padding: 17px 19px; }
.send-panel { margin: 0 10px 10px; padding: 23px; }
.send-warning { font-size: 12px; }
.field-label { margin: 19px 0 8px; font-size: 12px; }
.text-input { min-height: 48px; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.send-amount-usd { margin-top: 8px; font-size: 12px; }
.form-error { font-size: 12px; }
.footer { width: min(100%, 900px); margin: 26px auto 0; font-size: 11px; }

button, a, select, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid #ffad43;
  outline-offset: 3px;
}

@media (max-width: 460px) {
  .topbar { height: 60px; padding: 0 16px; }
  .topbar-right { gap: 7px; }
  .language-picker select { min-height: 32px; padding: 0 7px; font-size: 10px; }
  .lock-button { gap: 5px; min-height: 32px; padding: 0 7px; font-size: 10px; }
  main { padding-top: 31px; }
  .panel { padding: 17px; }
  .phrase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .network { padding: 7px 8px; font-size: 9px; }
  .network-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 10px; }
  .network-card-heading { grid-column: 1; grid-row: 1; }
  .network-balance-group { grid-column: 2; grid-row: 1; }
  .wallet-address-button { gap: 7px; font-size: 9px; }

  main { width: min(100% - 28px, 1000px); padding-top: 38px; }
  .intro { margin-bottom: 22px; }
  h1 { font-size: 42px; }
  .intro p, .muted { font-size: 13px; }
  .panel { padding: 21px; border-radius: 18px; }
  .button { min-height: 44px; padding-inline: 16px; }
  .wallet-heading h2 { font-size: 23px; }
  .network-card { padding: 14px; }
  .network-card-heading { flex-basis: 30px; }
  .network-balance { font-size: 13px; }
  .balance-fiat, .network-pending-balance { font-size: 11px; }
  .send-panel { padding: 17px; }
}
