:root {
  color-scheme: dark;
  --bg: #090d12;
  --card: #121a23;
  --line: #293744;
  --text: #edf4f8;
  --muted: #9bacba;
  --green: #65f5a6;
  --red: #ff5a68;
}
* { box-sizing: border-box; }
body {
  margin: 0 auto;
  padding: 36px 24px;
  max-width: 1120px;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.brand { display: flex; align-items: center; gap: 15px; margin-bottom: 32px; }
.brand-mark {
  width: 48px; height: 48px; display: grid; place-items: center;
  color: var(--green); background: #142a21; border: 1px solid #315a43;
  border-radius: 15px; font-weight: 800; font-size: 26px;
}
.brand strong { display: block; font-size: 21px; letter-spacing: .12em; }
.brand span { display: block; color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.brand > a { margin-left: auto; font-size: 13px; }
section {
  background: linear-gradient(145deg, #16212b, var(--card));
  border: 1px solid var(--line); border-radius: 20px;
  padding: 30px; margin-bottom: 24px;
  box-shadow: 0 14px 36px #0003;
}
h1 { margin: 0; color: var(--green); font-size: 28px; letter-spacing: .06em; }
h2 { margin: 0 0 10px; font-size: 21px; }
p { color: var(--muted); }
.warning {
  padding: 16px 18px; margin: 24px 0;
  border: 1px solid #683340; border-radius: 12px;
  background: #2a1720; color: #ffc2ca;
}
.warning strong { color: var(--red); }
button {
  display: inline-block; margin: 0 8px 12px 0;
  padding: 13px 20px; border: 1px solid #3a7254;
  border-radius: 11px; background: #183a29; color: var(--green);
  font: 700 12px/1.4 system-ui, sans-serif; letter-spacing: .06em;
  cursor: pointer; transition: background .15s, border-color .15s;
}
button:hover:not(:disabled) { background: #235137; border-color: var(--green); }
button:disabled { opacity: .45; cursor: wait; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
#status, #api-result {
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: #0b1219; border: 1px solid var(--line);
  padding: 18px; border-radius: 12px; margin: 16px 0;
  font: 13px/1.8 ui-monospace, Consolas, monospace;
}
.pass { color: var(--green); }
.fail { color: var(--red); }
table { width: 100%; border-collapse: collapse; margin-top: 20px; table-layout: fixed; }
th, td { text-align: left; padding: 14px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
th:first-child { width: 70px; }
th:last-child { width: 85px; }
td { font: 12px/1.8 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
footer { color: var(--muted); text-align: center; font-size: 12px; padding: 12px; }
@media (max-width: 600px) {
  body { padding: 22px 14px; }
  section { padding: 20px 16px; border-radius: 16px; }
  h1 { font-size: 22px; }
  button { width: 100%; margin-right: 0; }
  .brand span { font-size: 9px; }
  .brand > a { font-size: 11px; }
  th:first-child { width: 48px; }
  th:last-child { width: 60px; }
  th, td { padding: 12px 4px; }
}

[hidden] { display: none !important; }
.wallet-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; }
.wallet-layout section { margin-bottom: 0; min-width: 0; }
.section-tag { display: inline-block; background: #243543; color: #b0c5d5; padding: 3px 10px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .12em; margin-bottom: 18px; }
label { display: block; margin: 18px 0 8px; color: var(--muted); font-size: 13px; }
input, textarea { display: block; width: 100%; background: #0b1219; border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 13px 14px; font: 16px/1.5 system-ui, sans-serif; margin-bottom: 16px; }
textarea { resize: vertical; font: 13px/1.7 ui-monospace, Consolas, monospace; }
input:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 2px; }
summary { cursor: pointer; color: var(--muted); padding: 12px 0; }
.wallet-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wallet-heading button { margin: 0; }
.balance-label { margin-bottom: 0; }
.balance-value { font-size: 48px; font-weight: 700; letter-spacing: -.04em; }
.balance-value small { font-size: 20px; color: var(--muted); }
.address-controls { display: flex; gap: 12px; align-items: flex-start; }
.address-controls input { flex: 1; min-width: 0; }
#security-card h2 { color: var(--red); }
#vault-status { margin: 24px 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 800px) { .wallet-layout { grid-template-columns: 1fr; } }
.balances {display:grid;grid-template-columns:1.2fr 1fr;gap:32px;margin:24px 0}
.balance-value.active {font-size:32px;color:var(--text,#eaf2f7)}
#connection {color:#65f5a6;font-size:12px;font-weight:700;letter-spacing:.06em;margin-right:16px}
.overview {margin-bottom:22px}
#last-update {display:block;color:#9bacba;margin-bottom:22px}
#security-card h2 {color:#ff5a68}
dialog {width:min(620px,calc(100vw - 40px));max-height:85vh;overflow:auto;background:#121a23;color:#eaf2f7;border:1px solid #293744;border-radius:22px;padding:28px;box-shadow:0 24px 80px #0008}
dialog::backdrop {background:#05080ddd;backdrop-filter:blur(5px)}
.address-option {display:grid;width:100%;text-align:left;gap:6px;background:#182430;color:#eaf2f7;border:1px solid #293744;margin:12px 0;padding:18px;border-radius:12px}
.address-option code,dd,.transaction-row code {overflow-wrap:anywhere;white-space:normal;font-size:12px}
.address-option span {color:#65f5a6}
.dialog-actions {display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.transaction-row {display:grid;grid-template-columns:1fr auto;gap:8px;border-bottom:1px solid #293744;padding:16px 0}
.transaction-row code,.transaction-row small {grid-column:1/-1;color:#9bacba}
.transaction-row button {font-size:11px;padding:8px 12px;justify-self:start}
#history {max-height:400px;overflow:auto}
dt {color:#9bacba;font-size:12px;text-transform:uppercase;margin-top:16px}dd {margin:4px 0;font-size:15px}
@media(max-width:680px){.balances{grid-template-columns:1fr;gap:16px}.balance-value{font-size:36px}.wallet-heading{gap:12px;flex-wrap:wrap}dialog{padding:20px}}

/* Compact wallet overview and modal safety controls. */
body {padding:22px 24px;max-width:1120px;line-height:1.5}
.brand {margin-bottom:18px}
section {padding:22px;margin-bottom:16px;border-radius:16px}
.wallet-layout {gap:16px}
.section-tag {margin-bottom:10px}
.overview {padding:18px 22px;margin-bottom:16px}
.overview .section-tag {margin:0}
.balances {margin:12px 0 8px;gap:24px}
.balance-label {margin:0 0 4px}
.balance-value {font-size:36px;line-height:1.2}
.balance-value.active {font-size:28px}
.balance-value small {font-size:15px}
#last-update {margin-bottom:10px;font-size:11px}
.overview label {margin:6px 0}
.overview textarea {padding:10px 12px;min-height:40px;resize:none;margin-bottom:8px}
.overview button {padding:9px 14px;margin-bottom:0}
.wallet-heading > div:last-child {display:flex;align-items:center;flex-wrap:wrap;gap:8px}
#connection {margin-right:4px}
label {margin:12px 0 6px}
input,textarea {padding:10px 12px;margin-bottom:12px}
button {padding:11px 16px;margin-bottom:8px}
h2 {font-size:20px}
.send-actions {display:flex;flex-wrap:wrap;gap:8px}
.send-actions button {margin-right:0}
.danger {color:var(--red);border-color:#88404a;background:#341a23}
.danger:hover:not(:disabled) {background:#54232f;border-color:var(--red)}
#send-all {color:#f1b2ff;background:#321c40;border-color:#8b4c9e}
#safety-dialog {padding:0}
#security-card {border:0;box-shadow:none;margin:0;padding:24px}
.check-label {display:flex;gap:10px;align-items:flex-start;color:var(--text)}
.check-label input {width:18px;height:18px;flex-shrink:0;margin:3px 0}
#receipt-result {white-space:pre-wrap;overflow-wrap:anywhere}
#receipt-text {font:12px/1.5 ui-monospace,monospace}
#history {max-height:330px}
#vault-status {margin:16px 0;padding:10px 14px}
@media(max-width:680px){body{padding:16px 12px}.overview{padding:16px}.balances{grid-template-columns:1fr 1fr;gap:12px}.balance-value{font-size:28px}.balance-value.active{font-size:24px}.wallet-heading button,.send-actions button{width:auto}.wallet-heading > div:last-child{gap:6px}#connection{font-size:10px}.brand-mark{width:38px;height:38px}.brand strong{font-size:18px}dialog{max-height:90vh}}


/* Wallet and Send share the first row; transactions span the second. */
.wallet-top {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;align-items:stretch}
.wallet-top > section {min-width:0;margin:0}
.wallet-top .overview {padding:20px}
.wallet-top .send-card {padding:20px}
.wallet-top .balances {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0 12px}
.wallet-top .balance-value {font-size:32px}
.wallet-top .balance-value.active {font-size:26px}
.wallet-top .balance-label {font-size:12px}
.wallet-top .wallet-heading {flex-wrap:wrap;gap:10px}
.wallet-top .overview .wallet-heading:first-child > div:last-child {gap:6px}
.wallet-top #connection {font-size:10px;margin-right:0}
.wallet-top .overview button {padding:9px 11px;font-size:11px}
.wallet-top #address {font-size:12px;min-height:44px;white-space:pre-wrap;overflow-wrap:anywhere}
.history-card {width:100%;margin:16px 0 0;padding:22px}
.history-card .wallet-heading h2 {margin:0}
.history-card #history {max-height:440px}
.history-card .transaction-row {grid-template-columns:minmax(0,1fr) auto;column-gap:20px}
.history-card small {display:block;overflow-wrap:anywhere}
@media(max-width:860px){.wallet-top{grid-template-columns:minmax(0,1fr)}.wallet-top .balance-value{font-size:32px}.wallet-top .balance-value.active{font-size:26px}.history-card{padding:20px 16px}}
@media(max-width:400px){.wallet-top .overview,.wallet-top .send-card{padding:16px}.wallet-top .balances{gap:10px}.wallet-top .balance-value{font-size:27px}.wallet-top .balance-value.active{font-size:24px}}

/* Receipt verification result colors */
#receipt-result.receipt-success {color:var(--green);font-weight:700}
#receipt-result.receipt-failure {color:var(--red);font-weight:700}