/* Archivo, self-hosted. A privacy wallet should not phone home to Google
   on every page load, and this removes a render-blocking third party. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('/assets/fonts/archivo-latin.woff2?v=e3a28ead') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('/assets/fonts/archivo-latin-ext.woff2?v=5717f370') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Husk app — same language as the site: black, off-white, one orange,
   one typeface with the width axis doing the display work. */

:root{
  --ink:    #0A0A0A;
  --ink-2:  #111111;
  --ink-3:  #181818;
  --paper:  #FAFAF9;
  --mid:    rgba(250,250,249,.54);
  --dim:    rgba(250,250,249,.34);
  --hair:   rgba(250,250,249,.11);
  --hair-2: rgba(250,250,249,.2);
  --signal: #FF4F18;
  --good:   #4ADE80;

  --ease:   cubic-bezier(.22,1,.36,1);
  --gut:    clamp(18px, 4vw, 32px);
  --maxw:   760px;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:"Archivo", system-ui, sans-serif;
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* an explicit display: wins over the hidden attribute, so force it */
[hidden]{ display:none !important; }

h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--signal); color:var(--paper); }

.wide{ font-variation-settings:"wdth" 116,"wght" 700; letter-spacing:-.035em; }
.muted{ color:var(--mid); }
.fine{ color:var(--dim); font-size:.8rem; }
.warn{ color:var(--signal); font-size:.82rem; min-height:1.2em; }

/* ── shared controls ────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px;
  border-radius:6px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--paper);
  font-variation-settings:"wdth" 100,"wght" 600;
  font-size:.92rem;
  transition:border-radius .5s var(--ease), opacity .3s var(--ease);
}
.btn:hover:not(:disabled){ border-radius:16px; }
.btn:disabled{ opacity:.3; cursor:not-allowed; }
.btn-full{ width:100%; }
.btn-quiet{ background:transparent; color:var(--paper); border-color:var(--hair-2); }
.btn-sm{ padding:9px 16px; font-size:.84rem; }
.btn-danger{ background:var(--signal); border-color:var(--signal); color:var(--paper); }

.field{
  width:100%;
  padding:14px 16px;
  margin-bottom:10px;
  background:var(--ink-2);
  border:1px solid var(--hair);
  border-radius:6px;
  color:var(--paper);
  font:inherit;
  font-size:.92rem;
  resize:vertical;
  transition:border-color .3s var(--ease);
}
.field:focus{ outline:none; border-color:var(--hair-2); }
.field::placeholder{ color:var(--dim); }

.link-btn{
  color:var(--mid); font-size:.85rem;
  text-decoration:underline; text-underline-offset:3px;
  transition:color .3s var(--ease);
}
.link-btn:hover{ color:var(--paper); }

.row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* ── onboarding: a connect sheet, not a page ── */

.gate{
  min-height:100dvh;
  display:grid; place-items:center;
  padding:var(--gut);
}

.gate-card{
  width:100%; max-width:430px;
  padding:clamp(22px,4vw,30px);
  background:var(--ink-2);
  border:1px solid var(--hair);
  border-radius:20px;
  box-shadow:0 1px 0 0 rgba(250,250,249,.05) inset, 0 40px 80px -40px rgba(0,0,0,1);
  position:relative;
}

.step{ display:none; animation:stepIn .45s var(--spring); }
.step.is-on{ display:block; }
@keyframes stepIn{
  from{ opacity:0; transform:translateY(8px) scale(.994) }
  to{ opacity:1; transform:none }
}

.gate-head{ margin-bottom:20px; }
.gate-mark{ width:40px; height:40px; fill:var(--paper); display:block; margin-bottom:16px; }

.gate h1{
  font-variation-settings:"wdth" 114,"wght" 700;
  font-size:1.6rem; letter-spacing:-.035em; line-height:1.05;
  margin-bottom:7px;
}
.gate h2{
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:1.3rem; letter-spacing:-.03em;
  margin-bottom:7px;
}
.gate-head .muted{ font-size:.88rem; line-height:1.5; }

.back{
  position:absolute; top:18px; left:18px;
  width:30px; height:30px; border-radius:999px;
  display:grid; place-items:center;
  color:var(--dim); font-size:1rem;
  transition:color .3s var(--quick), background .3s var(--quick);
}
.back:hover{ color:var(--paper); background:rgba(250,250,249,.07); }
.step[data-step="create"] .gate-head,
.step[data-step="import"] .gate-head,
.step[data-step="sign"] .gate-head{ padding-top:14px; }

/* ── wallet rows ────────────────────────────── */

.wallet-list{ display:flex; flex-direction:column; gap:6px; }

.wallet-row{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:11px 12px;
  background:transparent;
  border:1px solid var(--hair);
  border-radius:12px;
  text-align:left;
  cursor:pointer;
  transition:border-color .35s var(--smooth), background .3s var(--quick), transform .4s var(--spring);
}
.wallet-row:hover{ border-color:var(--hair-2); background:rgba(250,250,249,.04); transform:translateY(-1px); }
.wallet-row:active{ transform:translateY(0) scale(.995); transition-duration:.1s; }
.wallet-row[disabled]{ cursor:default; opacity:1; }
.wallet-row[disabled]:hover{ transform:none; background:transparent; border-color:var(--hair); }

.wallet-row svg{ width:32px; height:32px; flex:none; border-radius:9px; }

.w-name{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.w-name b{
  font-variation-settings:"wdth" 104,"wght" 600;
  font-size:.92rem;
}
.w-name small{ color:var(--dim); font-size:.72rem; }

.w-state{
  margin-left:auto; flex:none;
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim);
  padding:4px 9px; border-radius:999px;
  border:1px solid transparent;
}
.w-state.is-ready{ color:var(--good); border-color:rgba(74,222,128,.28); background:rgba(74,222,128,.07); }
.w-state.is-last{ color:var(--signal); border-color:rgba(255,79,24,.3); background:rgba(255,79,24,.07); }
.wallet-row.is-busy .w-state{ color:var(--paper); }

/* ── or divider ─────────────────────────────── */

.gate-or{
  display:flex; align-items:center; gap:12px;
  margin:16px 0;
  color:var(--dim); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
}
.gate-or::before,.gate-or::after{
  content:""; flex:1; height:1px; background:var(--hair);
}

/* ── create-new row ─────────────────────────── */

.choice{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:12px;
  background:transparent;
  border:1px dashed var(--hair-2);
  border-radius:12px;
  text-align:left; cursor:pointer;
  transition:border-color .35s var(--smooth), background .3s var(--quick), transform .4s var(--spring);
}
.choice:hover{ border-color:rgba(250,250,249,.34); background:rgba(250,250,249,.04); transform:translateY(-1px); }
.choice-ico{
  width:32px; height:32px; flex:none;
  display:grid; place-items:center;
  border-radius:9px; border:1px solid var(--hair);
  color:var(--mid);
}
.choice-ico svg{ width:16px; height:16px; }
.choice-text{ display:flex; flex-direction:column; gap:1px; }
.choice-text b{ font-variation-settings:"wdth" 104,"wght" 600; font-size:.92rem; }
.choice-text small{ color:var(--dim); font-size:.72rem; }

.gate-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--hair);
}
.gate-foot .link-btn{ font-size:.78rem; }

/* ── signing step ───────────────────────────── */

.sign-ico{ display:block; width:44px; height:44px; margin-bottom:14px; }
.sign-ico svg{ width:44px; height:44px; border-radius:12px; }

.sign-box{
  padding:13px 14px;
  background:var(--ink);
  border:1px solid var(--hair);
  border-radius:10px;
  margin-bottom:16px;
}
.sign-label{
  display:block;
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); margin-bottom:6px;
}
.sign-box code{
  font-family:ui-monospace, Menlo, monospace;
  font-size:.8rem; color:var(--paper);
}

.sign-wait{
  display:flex; align-items:center; gap:10px;
  color:var(--mid); font-size:.86rem;
}
.spin{
  width:14px; height:14px; flex:none;
  border:2px solid var(--hair-2);
  border-top-color:var(--paper);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ── phrase + password ──────────────────────── */

.phrase{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:16px; }
.phrase li{
  padding:9px 10px;
  background:var(--ink);
  border:1px solid var(--hair);
  border-radius:8px;
  font-size:.82rem;
  font-variation-settings:"wdth" 100,"wght" 500;
}
.phrase li::before{ content:attr(data-n); color:var(--dim); font-size:.68rem; margin-right:6px; }

.gate-row{ margin-bottom:16px; }
.ack{ display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--mid); cursor:pointer; }
.ack input{ accent-color:var(--signal); width:16px; height:16px; }

.pw-meter{ height:3px; background:var(--hair); border-radius:2px; overflow:hidden; margin:2px 0 8px; }
.pw-meter span{ display:block; height:100%; width:0; background:var(--signal); transition:width .35s var(--smooth), background .35s var(--quick); }

@media (max-width:460px){
  .gate-card{ padding:20px 16px; border-radius:16px; }
  .phrase{ grid-template-columns:repeat(2,1fr); }
  .gate-foot{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ── terminal shell: horizontal top bar, full-width content ── */

.shell{ min-height:100dvh; display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; gap:16px;
  padding:0 16px;
  height:54px;
  border-bottom:1px solid var(--hair);
  background:rgba(10,10,10,.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  position:sticky; top:0; z-index:30;
}

.brand{
  display:inline-flex; align-items:center; gap:9px;
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:1rem; letter-spacing:-.025em;
  flex:none;
}
.brand svg{ width:20px; height:20px; fill:var(--paper); }

/* ── nav pills ──────────────────────────────── */

.tabs{
  display:flex; align-items:center; gap:2px;
  flex:1; min-width:0;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.tabs::-webkit-scrollbar{ display:none; }

.tabs a{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 11px;
  border-radius:8px;
  font-size:.85rem;
  color:var(--mid);
  white-space:nowrap;
  transition:background .22s var(--ease), color .22s var(--ease);
}
.tabs svg{
  width:16px; height:16px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
}
.tabs a[data-tab="burner"] svg{ fill:currentColor; stroke:none; }
.tabs a:hover{ color:var(--paper); background:rgba(250,250,249,.05); }
.tabs a.is-on{
  color:var(--paper);
  background:var(--ink-3);
  font-variation-settings:"wdth" 102,"wght" 600;
}

/* ── right cluster ──────────────────────────── */

.top-end{ display:flex; align-items:center; gap:8px; flex:none; }

.crowd{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px;
  border:1px solid var(--hair);
  border-radius:8px;
  font-size:.74rem; color:var(--mid);
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.crowd:hover{ border-color:var(--hair-2); color:var(--paper); }
.crowd-dot{ width:6px; height:6px; border-radius:50%; background:var(--dim); transition:background .4s var(--ease); }
.crowd.is-good .crowd-dot{ background:var(--good); }
.crowd.is-thin .crowd-dot{ background:var(--signal); }
.crowd.is-thin{ color:var(--signal); border-color:rgba(255,79,24,.32); }

.top-bal{
  display:inline-flex; align-items:baseline; gap:5px;
  padding:6px 12px;
  border:1px solid var(--hair);
  border-radius:8px;
  font-variation-settings:"wdth" 104,"wght" 700;
  font-size:.86rem;
  font-variant-numeric:tabular-nums;
  transition:border-color .35s var(--ease);
}
.top-bal:hover{ border-color:var(--hair-2); }
.top-bal small{
  font-size:.66rem; color:var(--dim);
  font-variation-settings:"wdth" 100,"wght" 600;
}

.icon-btn{
  width:32px; height:32px; border-radius:8px;
  color:var(--dim);
  display:inline-grid; place-items:center;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.icon-btn svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
}
.icon-btn:hover{ color:var(--paper); background:rgba(250,250,249,.07); }
.icon-btn.is-on{ color:var(--paper); background:var(--ink-3); }

/* ── main ───────────────────────────────────── */

main{
  flex:1;
  width:100%;
  max-width:1060px;
  margin:0 auto;
  padding:24px 20px 60px;
}

.page-head{ margin-bottom:18px; }
.page-head h2{
  font-variation-settings:"wdth" 116,"wght" 700;
  font-size:1.45rem; letter-spacing:-.035em;
  margin-bottom:4px;
}
.page-head p{ color:var(--mid); font-size:.88rem; }

/* two-up where it earns it */
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; align-items:start; }
.grid2 .card{ margin-bottom:0; }

/* ── footbar ────────────────────────────────── */

.footbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hair);
  font-size:.7rem; color:var(--dim);
}
.audit{ display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap; }
.audit-label{ letter-spacing:.12em; text-transform:uppercase; }
.audit-names{ color:var(--mid); font-variation-settings:"wdth" 100,"wght" 600; }
.foot-right [data-crowd-foot]{ color:var(--mid); font-variation-settings:"wdth" 100,"wght" 700; }

/* ── cards + data ───────────────────────────── */

.card{
  padding:20px;
  background:var(--ink-2);
  border:1px solid var(--hair);
  border-radius:12px;
  margin-bottom:12px;
}
.card-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:14px;
}
.card h3{
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:1.02rem; letter-spacing:-.03em;
}
.card-note{ color:var(--dim); font-size:.78rem; }

.balance{
  font-variation-settings:"wdth" 118,"wght" 700;
  font-size:2.5rem; letter-spacing:-.04em; line-height:1;
  margin-bottom:4px;
  font-variant-numeric:tabular-nums;
}
.balance small{
  font-size:.34em; color:var(--dim);
  font-variation-settings:"wdth" 100,"wght" 600;
  margin-left:8px; letter-spacing:0;
}

.kv{ display:flex; flex-direction:column; gap:9px; }
.kv > div{ display:flex; justify-content:space-between; gap:14px; font-size:.86rem; }
.kv dt{ color:var(--dim); }
.kv dd{ margin:0; font-variation-settings:"wdth" 100,"wght" 600; font-variant-numeric:tabular-nums; }

.mono{ font-family:ui-monospace, Menlo, monospace; font-size:.82rem; }

.empty{ text-align:center; padding:44px 20px; color:var(--dim); font-size:.9rem; }
.empty svg{ width:36px; height:36px; fill:var(--hair-2); margin-bottom:14px; }

.burner{ border-left:2px solid var(--hair-2); }
.burner.is-stale{ border-left-color:var(--signal); }
.burner-addr{ display:flex; align-items:center; gap:8px; color:var(--mid); margin-bottom:14px; }
.age-bar{ height:3px; background:var(--hair); border-radius:2px; overflow:hidden; margin:12px 0 6px; }
.age-bar span{ display:block; height:100%; background:var(--dim); transition:width .6s var(--ease); }
.burner.is-stale .age-bar span{ background:var(--signal); }

.reveal{ border:1px solid rgba(255,79,24,.34); background:rgba(255,79,24,.05); }
.reveal h3{ color:var(--signal); }
.reveal .key{
  padding:14px; background:var(--ink);
  border:1px solid var(--hair); border-radius:8px;
  word-break:break-all; margin:12px 0;
}
.reveal ul{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.reveal li{ font-size:.84rem; color:var(--mid); padding-left:16px; position:relative; }
.reveal li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:5px; height:5px; border-radius:1px; background:var(--signal);
}

/* ── toast ──────────────────────────────────── */

.toast{
  position:fixed; left:50%; bottom:26px;
  transform:translateX(-50%) translateY(12px);
  padding:12px 20px;
  background:var(--paper); color:var(--ink);
  border-radius:8px; font-size:.86rem;
  font-variation-settings:"wdth" 100,"wght" 600;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  z-index:50;
}
.toast.is-on{ opacity:1; transform:translateX(-50%); }

/* ── responsive ─────────────────────────────── */

@media (max-width:980px){
  .tabs a span.lbl{ display:none; }
}

@media (max-width:760px){
  .topbar{ height:auto; flex-wrap:wrap; padding:10px 14px 0; gap:10px; }
  .brand{ order:1; }
  .top-end{ order:2; margin-left:auto; }
  .tabs{ order:3; flex-basis:100%; padding-bottom:8px; }
  .top-bal{ padding:5px 9px; font-size:.8rem; }
  main{ padding:18px 14px 50px; }
  .grid2{ grid-template-columns:1fr; }
  .footbar{ font-size:.66rem; }
}

@media (max-width:520px){
  .phrase{ grid-template-columns:repeat(2,1fr); }
  .balance{ font-size:2.05rem; }
  .crowd span:not(.crowd-dot){ display:none; }
  .crowd{ padding:7px 9px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:4px; }

/* ═══════════════════════════════════════════════
   Feel, matched to the landing page.
   ═══════════════════════════════════════════════ */

:root{
  --spring: cubic-bezier(.34,1.4,.64,1);
  --smooth: cubic-bezier(.22,1,.36,1);
  --quick:  cubic-bezier(.4,0,.2,1);
}

/* ── buttons ────────────────────────────────── */

.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  will-change:transform;
  transition:
    transform .45s var(--spring),
    border-radius .45s var(--spring),
    box-shadow .45s var(--smooth),
    background .3s var(--quick),
    opacity .3s var(--quick);
}
.btn::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.2), transparent 60%);
  opacity:0;
  transition:opacity .4s var(--smooth);
}
.btn:hover:not(:disabled)::after{ opacity:1; }
.btn:hover:not(:disabled){
  transform:translateY(-2px);
  border-radius:16px;
  box-shadow:0 10px 26px -14px rgba(250,250,249,.5);
}
.btn:active:not(:disabled){ transform:translateY(0) scale(.985); transition-duration:.1s; }

.btn-quiet::after{ background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%), rgba(250,250,249,.12), transparent 60%); }
.btn-quiet:hover:not(:disabled){ border-color:rgba(250,250,249,.3); box-shadow:0 8px 20px -16px rgba(250,250,249,.35); }

.btn-danger:hover:not(:disabled){ box-shadow:0 12px 30px -12px rgba(255,79,24,.75); filter:brightness(1.06); }

/* ── nav pills ──────────────────────────────── */

.tabs a{ transition:background .25s var(--quick), color .25s var(--quick), transform .35s var(--spring); }
.tabs a:hover{ transform:translateY(-1px); }
.tabs a.is-on{ transform:none; }

.icon-btn{ transition:color .3s var(--quick), background .3s var(--quick), transform .35s var(--spring); }
.icon-btn:hover{ transform:translateY(-1px) rotate(12deg); }

.top-bal{ transition:border-color .35s var(--smooth), transform .35s var(--spring); }
.top-bal:hover{ transform:translateY(-1px); border-color:var(--hair-2); }

.crowd{ transition:border-color .35s var(--smooth), color .35s var(--smooth), transform .35s var(--spring); }
.crowd:hover{ transform:translateY(-1px); }

/* ── cards: lit edge + lift ─────────────────── */

.card{
  position:relative;
  transition:border-color .45s var(--smooth), transform .45s var(--spring), box-shadow .45s var(--smooth);
  animation:cardIn .5s var(--spring) backwards;
}
@keyframes cardIn{
  from{ opacity:0; transform:translateY(10px) scale(.994) }
  to{ opacity:1; transform:none }
}
.card::after{
  content:"";
  position:absolute; left:16%; right:16%; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(250,250,249,.3), transparent);
  opacity:0;
  transition:opacity .55s var(--smooth);
  pointer-events:none;
}
.card:hover::after{ opacity:1; }
.card:hover{ border-color:var(--hair-2); }

/* stagger the cards on a screen so it reads as one movement */
main .card:nth-of-type(1){ animation-delay:0ms }
main .card:nth-of-type(2){ animation-delay:60ms }
main .card:nth-of-type(3){ animation-delay:120ms }
main .card:nth-of-type(4){ animation-delay:180ms }

.reveal{ animation:revealIn .55s var(--spring) backwards; }
@keyframes revealIn{
  from{ opacity:0; transform:translateY(12px) scale(.99) }
  to{ opacity:1; transform:none }
}

/* ── fields ─────────────────────────────────── */

.field{
  transition:border-color .3s var(--quick), background .3s var(--quick), box-shadow .3s var(--smooth);
}
.field:hover{ border-color:var(--hair-2); }
.field:focus{
  border-color:rgba(250,250,249,.34);
  box-shadow:0 0 0 3px rgba(250,250,249,.06);
}

/* ── balance: let the number land ───────────── */

.balance{ animation:balanceIn .7s var(--spring) backwards; }
@keyframes balanceIn{
  from{ opacity:0; transform:translateY(8px) scale(.97) }
  to{ opacity:1; transform:none }
}

/* ── onboarding ─────────────────────────────── */

.choice{
  will-change:transform;
  transition:border-color .4s var(--smooth), background .35s var(--quick), transform .45s var(--spring), box-shadow .45s var(--smooth);
}
.choice:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px -22px rgba(0,0,0,.9);
}
.choice:active{ transform:translateY(-1px) scale(.995); transition-duration:.1s; }

.wallet-row{ transition:border-color .35s var(--smooth), background .3s var(--quick), transform .4s var(--spring); }
.wallet-row:not(:disabled):hover{ transform:translateX(3px); }

.phrase li{
  animation:wordIn .45s var(--spring) backwards;
  transition:border-color .3s var(--quick), background .3s var(--quick);
}
.phrase li:hover{ border-color:var(--hair-2); background:var(--ink-3); }
@keyframes wordIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.phrase li:nth-child(1){animation-delay:0ms}   .phrase li:nth-child(2){animation-delay:25ms}
.phrase li:nth-child(3){animation-delay:50ms}  .phrase li:nth-child(4){animation-delay:75ms}
.phrase li:nth-child(5){animation-delay:100ms} .phrase li:nth-child(6){animation-delay:125ms}
.phrase li:nth-child(7){animation-delay:150ms} .phrase li:nth-child(8){animation-delay:175ms}
.phrase li:nth-child(9){animation-delay:200ms} .phrase li:nth-child(10){animation-delay:225ms}
.phrase li:nth-child(11){animation-delay:250ms}.phrase li:nth-child(12){animation-delay:275ms}

/* ── burner + key reveal ────────────────────── */

.burner{ transition:border-left-color .5s var(--smooth), border-color .45s var(--smooth), transform .45s var(--spring); }
.burner:hover{ transform:translateX(2px); }

.reveal .key{
  transition:border-color .35s var(--quick), background .35s var(--quick);
  cursor:text;
}
.reveal .key:hover{ border-color:rgba(255,79,24,.4); }

/* ── toast: spring in ───────────────────────── */

.toast{ transition:opacity .3s var(--smooth), transform .45s var(--spring); }

/* ── links ──────────────────────────────────── */

.link-btn{ transition:color .3s var(--quick); }

/* ── respect the setting ────────────────────── */

@media (prefers-reduced-motion:reduce){
  .card,.reveal,.balance,.phrase li{ animation:none !important; }
  .btn,.choice,.wallet-row,.burner,.tabs a,.icon-btn,.top-bal,.crowd{ transition:none !important; }
}