@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-variable.ttf') format('truetype-variations');
  font-weight: 100 900;      /* the whole weight axis, from one file */
  font-stretch: 62.5% 125%;  /* and the whole width axis */
  font-display: swap;        /* show fallback text rather than nothing */
}

@font-face {
  font-family: 'Archivo Expanded';
  src: url('/fonts/archivo-variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  /* A single value rather than a range: this face is the 125% instance, so
     anything asking for it gets the expanded width without every rule having
     to set font-stretch itself. */
  font-stretch: 125%;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-variable.ttf') format('truetype-variations');
  /* One file, both weights the design uses — and every other weight besides,
     at no extra cost, since a variable font carries the axis rather than
     separate cuts of it. */
  font-weight: 100 800;
  font-display: swap;
}

:root{
    --forge-black:#141210;--forge-char:#1C1915;--forge-panel:#23201A;--forge-line:#322D25;
    --copper:#C87941;--copper-bright:#E8A863;--ember:#E86B3A;
    --parchment:#EFE7DA;--parchment-dim:#B5AA97;--parchment-faint:#7C7361;--mint:#5FD0A0;
    --font-display:'Archivo Expanded','Archivo',sans-serif;
    --font-body:'Archivo',system-ui,sans-serif;--font-mono:'JetBrains Mono',monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{background:var(--forge-black);color:var(--parchment);font-family:var(--font-body);
    font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
    min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px 18px 60px;}
  /* Buttons don't inherit colour — browsers apply their own ButtonText, which
     lands black on a dark theme. Inherit explicitly; buttons that set their own
     colour (.primary, .cta) still win on specificity. */
  button{font-family:var(--font-body);cursor:pointer;color:inherit;}
  a{color:var(--copper-bright);}
  ::selection{background:var(--copper);color:var(--forge-black);}

  .topbar{width:100%;max-width:460px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
  .brand{display:flex;align-items:center;gap:10px;}
  .brand-name{font-family:var(--font-display);font-weight:800;font-size:20px;}
  .brand-name b{color:var(--copper-bright);}

  .flow{display:flex;align-items:center;width:100%;max-width:460px;margin-bottom:18px;}
  .fstep{display:flex;align-items:center;gap:7px;flex:none;}
  .fnum{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);font-size:11px;background:var(--forge-panel);
    color:var(--parchment-faint);border:1px solid var(--forge-line);transition:.3s;}
  .flabel{font-size:12px;color:var(--parchment-faint);font-family:var(--font-mono);transition:.3s;}
  .fline{flex:1;height:1px;background:var(--forge-line);margin:0 9px;min-width:12px;}
  .fstep.done .fnum{background:var(--copper);color:var(--forge-black);border-color:var(--copper);}
  .fstep.done .flabel{color:var(--parchment-dim);}
  .fstep.current .fnum{color:var(--copper-bright);border-color:var(--copper);}
  .fstep.current .flabel{color:var(--copper-bright);}

  .stage{width:100%;max-width:460px;}
  .screen{display:none;} .screen.on{display:block;animation:rise .35s ease;}
  @keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

  .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--copper);display:inline-flex;align-items:center;gap:9px;margin-bottom:12px;}
  .eyebrow::before{content:"";width:20px;height:1px;background:var(--copper);}

  .card{background:var(--forge-char);border:1px solid var(--forge-line);border-radius:18px;padding:20px;}

  .leg{background:var(--forge-black);border-radius:12px;padding:13px 14px;}
  .leg+.leg{margin-top:6px;}
  .leg-top{display:flex;justify-content:space-between;font-size:11px;color:var(--parchment-faint);
    margin-bottom:7px;font-family:var(--font-mono);}
  .leg-row{display:flex;justify-content:space-between;align-items:center;gap:10px;}
  .amt{background:transparent;border:none;color:var(--parchment);font-family:var(--font-display);
    font-weight:600;font-size:25px;letter-spacing:-.01em;width:56%;outline:none;}
  .amt::placeholder{color:var(--parchment-faint);}
  .amt:disabled{color:var(--parchment-dim);}
  .coin-sel{display:flex;align-items:center;gap:7px;background:var(--forge-panel);
    border:1px solid var(--forge-line);padding:5px 11px 5px 6px;border-radius:22px;flex:none;max-width:54%;}
  .coin-sel:hover{border-color:var(--copper);}
  /* Holds a real logo, or a coloured initial when the file is missing.
     overflow:hidden keeps non-square artwork inside the circle. */
  .coin-ic{width:23px;height:23px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-weight:700;font-size:12px;flex:none;color:#fff;
    overflow:hidden;position:relative;}
  .coin-ic img{width:100%;height:100%;object-fit:contain;display:block;}
  .coin-meta{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
  .coin-sel{color:var(--parchment);}
  .coin-sel .tk{font-weight:600;font-size:14px;color:var(--parchment);}
  .coin-sel .net{font-family:var(--font-mono);font-size:9px;color:var(--parchment-faint);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .chev{color:var(--parchment-dim);font-size:10px;}
  .mid{display:flex;justify-content:center;margin:-12px 0;position:relative;z-index:3;}
  .mid button{width:34px;height:34px;border-radius:10px;background:var(--copper);color:var(--forge-black);
    border:4px solid var(--forge-char);display:flex;align-items:center;justify-content:center;
    font-size:16px;transition:transform .3s,background .2s;}
  .mid button:hover{background:var(--copper-bright);transform:rotate(180deg);}

  .field{margin-top:12px;}
  .field label{font-family:var(--font-mono);font-size:10px;color:var(--parchment-faint);
    letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:6px;}
  .field input{width:100%;background:var(--forge-black);border:1px solid var(--forge-line);
    border-radius:10px;padding:11px 13px;color:var(--parchment);font-family:var(--font-mono);
    font-size:12.5px;outline:none;transition:border-color .2s;}
  .field input:focus{border-color:var(--copper);}
  .field input::placeholder{color:var(--parchment-faint);}
  .hint{font-size:11px;color:var(--parchment-faint);margin-top:5px;}
/* Address problems are warnings, not decoration: ember, and the field border
   shifts too so the error is findable without reading. */
.field-hint:empty{display:none;}
.field-hint.bad{color:var(--ember);}
.field input.invalid{border-color:var(--ember);}

  .info{border-top:1px solid var(--forge-line);margin-top:14px;padding-top:12px;
    font-family:var(--font-mono);font-size:11.5px;}
  .info div{display:flex;justify-content:space-between;margin-bottom:6px;color:var(--parchment-faint);gap:10px;}
  .info div span:last-child{color:var(--parchment);text-align:right;}
  .info .ok{color:var(--mint);}
  /* The order reference is long by design — showing it whole is the point, so
     let it wrap rather than squeezing it onto one line. */
  .info .oid-row{align-items:flex-start;}
  .oid-val{display:flex;align-items:flex-start;gap:7px;justify-content:flex-end;}
  .oid-val code{font-family:var(--font-mono);font-size:10.5px;line-height:1.5;
    color:var(--copper-bright);word-break:break-all;text-align:right;}
  .oid-val .copy{width:24px;height:24px;flex:none;}
  /* Transaction hashes read like the order reference — same register, since
     they serve the same purpose: something to quote or to check. */
  .info .tx-row{display:flex;justify-content:space-between;align-items:flex-start;
    gap:12px;margin-bottom:6px;color:var(--parchment-faint);}
  .tx-val{display:flex;align-items:flex-start;gap:7px;justify-content:flex-end;}
  .tx-val a{text-decoration:none;}
  .tx-val a:hover code{color:var(--copper-bright);text-decoration:underline;}
  .tx-val code{font-family:var(--font-mono);font-size:10.5px;line-height:1.5;
    color:var(--parchment-dim);word-break:break-all;text-align:right;}
  .tx-val .copy{width:24px;height:24px;flex:none;}

  .primary{width:100%;margin-top:14px;padding:13px;background:var(--copper);color:var(--forge-black);
    font-weight:700;font-size:15px;border:none;border-radius:12px;transition:.2s;}
  .primary:hover:not(:disabled){background:var(--copper-bright);box-shadow:0 8px 26px rgba(232,107,58,.28);}
  .primary:disabled{opacity:.45;cursor:not-allowed;}
  .ghost{width:100%;margin-top:10px;padding:12px;background:transparent;color:var(--parchment);
    font-weight:600;font-size:14px;border:1px solid var(--forge-line);border-radius:12px;transition:.2s;}
  .ghost:hover{border-color:var(--copper);color:var(--copper-bright);}

  .err{background:rgba(232,107,58,.09);border:1px solid rgba(232,107,58,.3);border-radius:11px;
    padding:11px 13px;margin-top:12px;font-size:13px;color:var(--parchment-dim);display:none;}
  .err.on{display:block;}

  /* deposit */
  .dep-amt{text-align:center;margin-bottom:14px;}
  .dep-amt .n{font-family:var(--font-display);font-weight:800;font-size:34px;
    color:var(--copper-bright);letter-spacing:-.02em;word-break:break-all;}
  .dep-amt .sub{font-family:var(--font-mono);font-size:12px;color:var(--parchment-dim);margin-top:3px;}
  .qr-wrap{display:flex;justify-content:center;margin:4px 0 16px;}
  .qr{background:var(--parchment);border-radius:12px;padding:9px;line-height:0;}
  .fb{background:var(--forge-black);border:1px solid var(--forge-line);border-radius:12px;padding:12px 13px;}
  .fb+.fb{margin-top:7px;}
  .fb-label{font-family:var(--font-mono);font-size:10px;color:var(--parchment-faint);
    letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px;display:flex;gap:6px;align-items:center;}
  .fb-val{display:flex;align-items:flex-start;gap:9px;justify-content:space-between;}
  .fb-val code{font-family:var(--font-mono);font-size:12px;color:var(--parchment);
    word-break:break-all;line-height:1.5;}
  .copy{flex:none;width:30px;height:30px;border-radius:8px;background:var(--forge-panel);
    border:1px solid var(--forge-line);color:var(--copper-bright);display:flex;
    align-items:center;justify-content:center;transition:.2s;}
  .copy:hover{border-color:var(--copper);}
  .warn{display:flex;gap:9px;background:rgba(232,107,58,.09);border:1px solid rgba(232,107,58,.28);
    border-radius:11px;padding:11px 12px;margin-top:12px;}
  .warn svg{flex:none;color:var(--ember);margin-top:1px;}
  .warn p{font-size:12.5px;color:var(--parchment-dim);line-height:1.5;}
  .warn b{color:var(--copper-bright);}
  .timer{text-align:center;font-family:var(--font-mono);font-size:12px;
    color:var(--parchment-faint);margin-top:14px;}
  .timer b{color:var(--parchment);} .timer.stale b{color:var(--ember);}

  /* status */
  .shero{text-align:center;padding:6px 0 16px;}
  .ring{width:70px;height:70px;margin:0 auto 14px;position:relative;display:flex;align-items:center;justify-content:center;}
  .ring svg.spin{position:absolute;inset:0;animation:rot 2.4s linear infinite;}
  @keyframes rot{to{transform:rotate(360deg);}}
  .ring .core{width:48px;height:48px;border-radius:50%;background:rgba(200,121,65,.14);
    display:flex;align-items:center;justify-content:center;color:var(--copper-bright);}
  .shero h2{font-family:var(--font-display);font-weight:700;font-size:22px;margin-bottom:6px;}
  .shero p{color:var(--parchment-dim);font-size:14px;}
  .oid{font-family:var(--font-mono);font-size:11px;color:var(--parchment-faint);margin-top:8px;}
  .oid b{color:var(--copper-bright);}
  .tl-row{display:flex;gap:13px;padding-bottom:18px;position:relative;}
  .tl-row:last-child{padding-bottom:0;}
  .tl-dot{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-size:12px;z-index:2;background:var(--forge-panel);
    border:1px solid var(--forge-line);color:var(--parchment-faint);}
  .tl-row::before{content:"";position:absolute;left:11.5px;top:24px;bottom:-2px;width:1px;background:var(--forge-line);}
  .tl-row:last-child::before{display:none;}
  .tl-row.done .tl-dot{background:var(--mint);border-color:var(--mint);color:var(--forge-black);}
  .tl-row.done::before{background:var(--mint);}
  .tl-row.active .tl-dot{border-color:var(--copper);color:var(--copper-bright);
    box-shadow:0 0 0 4px rgba(200,121,65,.12);}
  .tt{font-weight:600;font-size:14.5px;} .tl-body.muted .tt{color:var(--parchment-faint);}
  .td{font-size:12.5px;color:var(--parchment-dim);}

  .spinner{width:20px;height:20px;border:2px solid var(--forge-line);border-top-color:var(--copper);
    border-radius:50%;animation:rot .8s linear infinite;display:inline-block;vertical-align:-4px;}

  /* sheet */
  .sheet-bg{position:fixed;inset:0;background:rgba(10,9,8,.72);backdrop-filter:blur(3px);
    display:none;align-items:flex-end;justify-content:center;z-index:50;}
  .sheet-bg.on{display:flex;}
  @media(min-width:520px){.sheet-bg{align-items:center;padding:20px;}}
  .sheet{background:var(--forge-char);border:1px solid var(--forge-line);
    border-radius:18px 18px 0 0;width:100%;max-width:460px;padding:18px;
    max-height:82vh;display:flex;flex-direction:column;}
  @media(min-width:520px){.sheet{border-radius:18px;}}
  .sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
  .sheet-head h3{font-family:var(--font-display);font-weight:600;font-size:17px;}
  .sheet-close{background:var(--forge-panel);border:1px solid var(--forge-line);
    color:var(--parchment-dim);width:28px;height:28px;border-radius:8px;font-size:15px;}
  .search{width:100%;background:var(--forge-black);border:1px solid var(--forge-line);
    border-radius:10px;padding:10px 13px;color:var(--parchment);font-size:14px;
    outline:none;margin-bottom:10px;font-family:var(--font-body);}
  .search:focus{border-color:var(--copper);}
  .clist{overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
  .crow{display:flex;align-items:center;gap:11px;padding:10px 9px;border-radius:10px;
    background:none;border:none;width:100%;text-align:left;transition:background .15s;}
  .crow:hover{background:var(--forge-panel);}
  .crow .coin-ic{width:28px;height:28px;font-size:13px;}
  /* Ticker over full name. Both are spans, so without an explicit column they
     run together — "BTCBitcoin" — which reads as one broken word. */
  .crow .meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;}
  .crow .nm{font-weight:600;font-size:14.5px;color:var(--parchment);}
  .crow .full{font-size:11.5px;color:var(--parchment-faint);font-family:var(--font-mono);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .crow .net{font-size:9.5px;color:var(--parchment-faint);font-family:var(--font-mono);
    background:var(--forge-black);padding:3px 7px;border-radius:20px;}
  .crow .memo{font-size:9px;color:var(--ember);font-family:var(--font-mono);margin-top:3px;
    letter-spacing:.06em;}

  /* The picker scrolls; a default light scrollbar cuts straight through the
     dark theme, so it gets the forge palette too. */
  .clist{scrollbar-width:thin;scrollbar-color:var(--forge-line) transparent;}
  .clist::-webkit-scrollbar{width:8px;}
  .clist::-webkit-scrollbar-track{background:transparent;}
  .clist::-webkit-scrollbar-thumb{background:var(--forge-line);border-radius:8px;
    border:2px solid var(--forge-char);}
  .clist::-webkit-scrollbar-thumb:hover{background:var(--parchment-faint);}
  .empty,.loading{padding:34px 0;text-align:center;color:var(--parchment-faint);
    font-family:var(--font-mono);font-size:12.5px;}

  .note{font-family:var(--font-mono);font-size:10px;color:var(--parchment-faint);
    text-align:center;margin-top:12px;}
  :focus-visible{outline:2px solid var(--copper-bright);outline-offset:2px;}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;}}