/* Dark theme, responsive (mobile → desktop). Public file: keep it generic. */
:root {
  --bg: #0b0e11;
  --card: #181a20;
  --surface: #1e2329;
  --line: #2b3139;
  --text: #eaecef;
  --muted: #848e9c;
  --muted-2: #5e6673;
  --accent: #fcd535;
  --accent-press: #f0b90b;
  --accent-soft: rgba(252, 213, 53, 0.12);
  --accent-ink: #181a20;
  --good: #0ecb81;
  --bad: #f6465d;
  --r: 12px;
  --r-lg: 16px;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  display: flex; justify-content: center; min-height: 100vh;
}
#app { width: 100%; max-width: 480px; }
.muted { color: var(--muted); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
a { color: var(--accent); text-decoration: none; }

/* Onboarding */
.center { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 22px; box-shadow: var(--shadow); }
.card .logo {
  width: 54px; height: 54px; border-radius: 16px; margin-bottom: 18px;
  display: grid; place-items: center;
  color: var(--accent-ink);
  background: linear-gradient(145deg, #ffe27a 0%, var(--accent) 48%, var(--accent-press) 100%);
  box-shadow: 0 6px 18px rgba(252, 213, 53, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.card h1 { margin: 0 0 4px; font-size: 23px; letter-spacing: -0.02em; }
.card .sub { color: var(--muted); margin-bottom: 18px; font-size: 14px; }

label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; font-weight: 500; }
input, select, textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 13px 14px; font: inherit; }
textarea { resize: vertical; min-height: 92px; font-family: ui-monospace, Menlo, Consolas, monospace; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }

button { font: inherit; font-weight: 600; cursor: pointer; border: none; background: var(--surface); color: var(--text); border-radius: 10px; padding: 13px 16px; }
button.primary { background: var(--accent); color: var(--accent-ink); }
button.primary:active { background: var(--accent-press); }
button.block { width: 100%; }
button.seg { background: var(--surface); color: var(--muted); border-radius: 10px; padding: 12px; }
button.seg.on { background: var(--accent); color: var(--accent-ink); }
button.ghost { background: transparent; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.mt { margin-top: 16px; }
.block { width: 100%; }

.pill { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 6px; background: var(--surface); color: var(--muted); }
.pill.net { background: var(--accent-soft); color: var(--accent); }
.pill.main { background: rgba(246, 70, 93, 0.16); color: var(--bad); }
.pill.good { background: rgba(14, 203, 129, 0.16); color: var(--good); }

.msg { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.msg.err { background: rgba(246, 70, 93, 0.12); color: var(--bad); }
.msg.ok { background: rgba(14, 203, 129, 0.12); color: var(--good); }
.msg.warn { background: rgba(252, 213, 53, 0.1); color: var(--accent); }

.words-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.words-grid .w { background: var(--surface); border-radius: 8px; padding: 9px 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }
.words-grid .w b { color: var(--muted-2); font-weight: 500; margin-right: 6px; }
.check { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--muted); }
.check input { width: 20px; height: 20px; margin-top: 1px; }

/* App shell */
.appbar { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 10px; }
/* The brand is the way home — a real button, in the top bar and the sidebar.
   The badge inside keeps its own colour, since the mark is drawn in
   currentColor and a button would otherwise reset it. */
.brandbar, .side-brand {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 5px 7px; margin-left: -7px;
  border-radius: 10px; color: var(--text); font: inherit; cursor: pointer;
}
.brandbar:hover, .side-brand:hover { background: var(--surface); }
.brandbar:active, .side-brand:active { opacity: 0.72; }
.wordmark { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.wordmark i { font-style: normal; font-weight: 500; color: var(--muted); }
.bar-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.pagetitle { display: none; margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brandbar .logo-sm {
  width: 28px; height: 28px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center;
  color: var(--accent-ink);
  background: linear-gradient(145deg, #ffe27a, var(--accent) 55%, var(--accent-press));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.icon-btn { width: 40px; height: 40px; border-radius: 10px; background: var(--surface); display: grid; place-items: center; color: var(--text); }
.icon-btn.ghost { background: transparent; }
.icon-btn svg { width: 20px; height: 20px; }

.view { padding: 16px 16px 12px; }
.vhead { margin: 4px 2px 14px; font-size: 18px; }
.subhead { display: flex; align-items: center; gap: 6px; margin: 2px 0 10px; }
.subhead h3 { margin: 0; font-size: 18px; }

/* Balance + quick actions */
.balance { text-align: center; padding: 14px 0 6px; }
.balance .lbl { color: var(--muted); font-size: 14px; }
.balance .amt { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; margin: 4px 0 2px; }
.balance .amt .sym { font-size: 18px; color: var(--muted); font-weight: 700; margin-left: 6px; }
.actions { display: flex; justify-content: center; gap: 30px; margin: 16px 0 8px; }
.actions-wide { gap: 40px; }
.action { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; padding: 0; }
.action .ic { width: 54px; height: 54px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.action .ic svg { width: 24px; height: 24px; }
.action .t { font-size: 13px; font-weight: 600; color: var(--text); }

.section-title { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 22px 2px 4px; }
.net-chip { display: inline-block; background: var(--surface); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--muted); margin: 6px 0 4px; }
.net-chip b { color: var(--text); }

/* Rows */
.list { display: flex; flex-direction: column; }
.trow { display: flex; align-items: center; gap: 13px; padding: 13px 6px; border-radius: 12px; }
.trow.tappable { cursor: pointer; }
.trow.tappable:hover { background: var(--card); }
.trow.tappable:active { background: var(--surface); }
.tic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; flex: 0 0 auto; }
.tmeta { flex: 1; min-width: 0; }
.tmeta .s { font-weight: 600; }
.tmeta .n { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tamt { text-align: right; }
.tamt .a { font-weight: 600; }
.tamt .sub { color: var(--muted); font-size: 13px; }
.chev { color: var(--muted-2); display: grid; place-items: center; flex: 0 0 auto; }

/* QR / receive */
.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 8px 0; }
.qr { background: #fff; padding: 14px; border-radius: 16px; }
.qr img { display: block; width: 210px; height: 210px; }
.addr-box { background: var(--surface); border-radius: 12px; padding: 14px; text-align: center; width: 100%; }

/* Bottom nav */
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 30; background: var(--card); border-top: 1px solid var(--line); display: flex; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); }
.tabbar button { position: relative; flex: 1; background: none; padding: 6px 0; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted-2); border-radius: 10px; }
.tabbar button svg { width: 22px; height: 22px; }
.tabbar button .lab { font-size: 11px; font-weight: 600; }
.tabbar button.active { color: var(--accent); }
/* Marks the current section against the top edge of the bar. */
.tabbar button.active::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }

/* Footer */
.appfoot { text-align: center; color: var(--muted-2); font-size: 11px; line-height: 1.6; border-top: 1px solid var(--line); margin-top: 14px; padding: 10px 16px calc(78px + env(safe-area-inset-bottom)); }
.appfoot b { color: var(--muted); font-weight: 700; }

/* Bottom sheet */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.6); display: none; align-items: flex-end; justify-content: center; }
.overlay.show { display: flex; }
.sheet { width: 100%; max-width: 480px; background: var(--card); border: 1px solid var(--line); border-bottom: none; border-radius: 18px 18px 0 0; padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: var(--shadow); }
.sheet .grip { width: 38px; height: 4px; border-radius: 2px; background: var(--line); margin: 6px auto 12px; }
.sheet h4 { position: sticky; top: 0; z-index: 1; background: var(--card); margin: 0 2px 10px; padding: 4px 0 10px; font-size: 16px; text-align: center; display: flex; align-items: center; justify-content: center; min-height: 34px; }
.sheet-back { position: absolute; left: 0; top: 0; background: none; color: var(--muted); padding: 6px 8px; display: grid; place-items: center; }
.sheet-back svg { display: block; }
/* Tablet / desktop: a centered modal that is always fully visible and scrolls inside. */
@media (min-width: 600px) {
  .overlay { align-items: center; padding: 24px; }
  .sheet { max-width: 420px; border: 1px solid var(--line); border-radius: 16px; max-height: 80vh; padding-bottom: 18px; }
  .sheet .grip { display: none; }
}
.net-row { display: flex; align-items: center; gap: 13px; padding: 13px 6px; border-radius: 12px; cursor: pointer; }
.net-row:hover { background: var(--surface); }
.net-row .std { font-size: 12px; color: var(--muted); }

/* Desktop sidebar — hidden on small screens */
.sidebar { display: none; }
@media (min-width: 481px) and (max-width: 899px) {
  #app { border: 1px solid var(--line); min-height: 100vh; }
}
@media (min-width: 900px) {
  body { align-items: flex-start; }
  #app { max-width: 1440px; min-height: 100vh; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .shell { display: flex; align-items: flex-start; }
  .sidebar { display: block; flex: 0 0 236px; width: 236px; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); padding: 20px 14px; }
  .side-brand { gap: 10px; width: 100%; padding: 9px 10px; margin: 0 0 10px; font-size: 18px; }
  .side-brand .wordmark { font-size: 18px; }
  .side-brand .logo-sm {
    width: 30px; height: 30px; border-radius: 10px; flex: 0 0 auto;
    display: grid; place-items: center;
    color: var(--accent-ink);
    background: linear-gradient(145deg, #ffe27a, var(--accent) 55%, var(--accent-press));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  .sidenav { display: flex; flex-direction: column; gap: 4px; }
  .sidenav button { display: flex; align-items: center; gap: 12px; justify-content: flex-start; width: 100%; background: none; color: var(--muted); padding: 12px 14px; border-radius: 10px; font-weight: 600; }
  .sidenav button:hover { background: var(--surface); }
  .sidenav button.active { background: var(--accent-soft); color: var(--accent); }
  .sidenav button svg { width: 22px; height: 22px; flex: 0 0 auto; }
  .content { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
  .content .view { flex: 1 0 auto; width: 100%; }
  .view { max-width: 1040px; margin: 0 auto; padding: 24px 32px 44px; }
  .balance .amt { font-size: 42px; }
  /* Forms, codes and single-record screens read better in a column than
     stretched across the whole content area. */
  /* Single-column forms read better narrow than full-width. */
  .view.view-narrow { max-width: 620px; }
  .view.view-asset, .view.view-settings { max-width: 780px; }
  /* The sidebar carries the brand here, so the top bar states the current
     section instead of repeating it. */
  .brandbar { display: none; }
  .pagetitle { display: block; }
  .sidenav .lab { font-size: 15px; }
  .tabbar { display: none; }
  .appfoot { max-width: 1040px; margin: 14px auto 0; padding: 11px 32px 20px; }
}

/* ── Wide screens: lay the home screen out across the width instead of
   centring a narrow column in the middle of it. ── */
@media (min-width: 1280px) {
  .sidebar { flex: 0 0 256px; width: 256px; padding: 22px 16px; }
  .view { max-width: 1120px; }
  .appfoot { max-width: 1120px; }
  /* Quick actions become a panel beside a full-width list, rather than a
     centred row that pushes the list below the fold. */
  .view-assets { display: flex; align-items: flex-start; justify-content: center; gap: 40px; }
  .view-assets .col-list { flex: 1 1 auto; min-width: 0; max-width: 720px; }
  .view-assets .actions {
    flex: 0 0 300px; margin: 0; gap: 4px;
    flex-direction: column; align-items: stretch;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px;
  }
  .view-assets .action { flex-direction: row; justify-content: flex-start; gap: 14px; width: 100%; padding: 10px 12px; border-radius: 12px; }
  .view-assets .action:hover { background: var(--surface); }
  .view-assets .action .ic { width: 42px; height: 42px; }
  .view-assets .action .t { font-size: 15px; }
  .view-assets .section-title { margin: 2px 2px 4px; }
  .view-assets .trow { padding: 15px 10px; }
}
@media (min-width: 1600px) {
  #app { max-width: 1560px; }
  .view, .appfoot { max-width: 1240px; }
}

/* ─────────── Sign-in page ───────────
   Appended, not edited in place, so nothing above is disturbed. Public file:
   keep every selector and comment here free of product vocabulary. */
.center.auth {
  /* A soft glow behind the card so the page is not a flat black rectangle. */
  background:
    radial-gradient(60rem 32rem at 50% -8rem, rgba(252, 213, 53, 0.07), transparent 70%),
    radial-gradient(40rem 24rem at 50% 108%, rgba(252, 213, 53, 0.04), transparent 70%);
}
.authcard { max-width: 400px; padding: 30px 26px 26px; border-radius: 18px; }
.authcard h1 { font-size: 25px; }
.authcard .sub { margin-bottom: 22px; }
.authcard label { margin-top: 16px; }
.authcard input { padding: 14px 14px; border-radius: 11px; }
.authcard input::placeholder { color: var(--muted-2); }
.authcard input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.authcard .mt { margin-top: 20px; }
.authcard button.primary { padding: 14px 16px; border-radius: 11px; }
.authcard button.primary:hover:not(:disabled) { background: #ffdf5c; }
.authcard .msg { margin-top: 16px; }

/* Password field with an inline reveal toggle. */
.field { position: relative; display: block; }
.field input { padding-right: 46px; }
.field .reveal {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 7px 8px; border-radius: 8px; display: grid; place-items: center;
}
.field .reveal:hover { color: var(--text); background: var(--surface); }

/* Shown only while Caps Lock is actually on. */
.caps { margin-top: 7px; font-size: 12.5px; color: var(--accent); }
.caps[hidden] { display: none; }

/* One-time code: wide tracking makes six digits readable at a glance. */
.otp { letter-spacing: 0.34em; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Keyboard users get a visible ring; mouse users do not. */
.authcard :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 420px) {
  .authcard { padding: 24px 18px 20px; border-radius: 16px; }
  .authcard h1 { font-size: 22px; }
}