:root {
      --bg:        #0D1117;
      --bg2:       #141B24;
      --bg3:       #1A2235;
      --border:    #2a3347;
      --border2:   #3a4560;
      --text:      #E6EDF3;
      --text2:     #8B9ABE;
      --text3:     #4a5568;
      --navy-deep: #0A1929;
      --navy:      #1A2B3C;
      --gold:      #D4AF37;
      --gold-dim:  #a8892a;
      --gold-pale: #f0d980;
      --green:     #2ea043;
      --red:       #c0392b;
    }
    * { margin:0; padding:0; box-sizing:border-box; }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      -webkit-tap-highlight-color: transparent;
    }

    /* ── Header ──────────────────────────────────── */
    .header {
      background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
      border-bottom: 2px solid var(--gold);
      padding: 11px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: nowrap;
    }
    .logo {
      font-family: 'Playfair Display', serif;
      font-size: clamp(12px, 3vw, 17px);
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
      cursor: pointer;
      min-width: 0;
      overflow: hidden;
    }
    .logo-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }
    .logo-text .suffix { display: inline; }
    @media (max-width: 420px) { .logo-text .suffix { display: none; } }
    .logo-badge {
      background: var(--gold);
      color: var(--navy-deep);
      font-weight: 700;
      font-size: clamp(11px, 2.5vw, 13px);
      padding: 3px 10px;
      height: 28px;
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    #btn-connect {
      background: transparent;
      border: 1px solid var(--gold);
      color: var(--gold);
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 14px;
      cursor: pointer;
      white-space: nowrap;
      transition: background .15s;
      flex-shrink: 0;
    }
    #btn-connect:hover { background: rgba(212,175,55,.12); }
    #btn-connect.connected {
      border-color: var(--green);
      color: var(--green);
      font-size: 11px;
      max-width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ── Wallet modal ────────────────────────────── */
    #wallet-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.75);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    #wallet-overlay.open { display: flex; }
    #wallet-modal {
      background: var(--bg2);
      border: 1px solid var(--border2);
      width: 100%;
      max-width: 340px;
      padding: 24px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
    }
    .wm-title {
      font-family: 'Playfair Display', serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--gold);
      text-align: center;
    }
    .wm-sub {
      font-size: 11px;
      color: var(--text2);
      text-align: center;
      margin-bottom: 4px;
    }
    #wm-close {
      position: absolute;
      top: 12px; right: 14px;
      background: none; border: none;
      color: var(--text2); font-size: 22px;
      cursor: pointer; line-height: 1;
    }
    #wm-close:hover { color: var(--text); }
    .wallet-opt {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 13px 16px;
      background: var(--bg3);
      border: 1px solid var(--border);
      cursor: pointer;
      transition: border-color .15s, background .15s;
    }
    .wallet-opt:hover { border-color: var(--gold-dim); background: rgba(212,175,55,.06); }
    .wallet-opt-icon {
      width: 36px; height: 36px;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px;
    }
    .wallet-opt-icon img { width: 36px; height: 36px; object-fit: contain; }
    .wallet-opt-info { display: flex; flex-direction: column; gap: 2px; }
    .wallet-opt-name { font-weight: 600; font-size: 14px; color: var(--text); }
    .wallet-opt-desc { font-size: 11px; color: var(--text2); }
    #wm-status { font-size: 12px; color: var(--text2); text-align: center; min-height: 16px; }
    #wm-status.error { color: var(--red); }

    /* ── Main ────────────────────────────────────── */
    main {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 28px 16px 40px;
    }

    /* ── Coin ────────────────────────────────────── */
    .coin-wrap {
      margin-bottom: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .coin-wrap img {
      width: clamp(64px, 18vw, 90px);
      height: clamp(64px, 18vw, 90px);
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 0 28px rgba(212,175,55,.25);
    }
    .bridge-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(16px, 3vw, 24px);
      font-weight: 600;
      color: var(--gold);
      letter-spacing: .5px;
    }
    .bridge-sub { font-size: 11px; color: var(--text2); text-align: center; }

    /* ── Card ────────────────────────────────────── */
    .card {
      background: var(--bg2);
      border: 1px solid var(--border);
      width: 100%;
      max-width: 460px;
      padding: 22px 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* ── Chain selects ───────────────────────────── */
    .chain-row { display: flex; align-items: center; gap: 8px; }
    .chain-box { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .chain-label { font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: .6px; }
    .chain-select {
      width: 100%;
      background: var(--bg3);
      border: 1px solid var(--border);
      color: var(--text);
      font-family: 'Playfair Display', serif;
      font-size: clamp(13px, 3vw, 15px);
      font-weight: 600;
      padding: 9px 10px;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238B9ABE'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 28px;
    }
    .chain-select:focus { outline: 1px solid var(--gold-dim); }
    .chain-select option { background: var(--bg2); color: var(--text); }
    #btn-swap-chain {
      background: var(--bg3);
      border: 1px solid var(--border2);
      color: var(--gold);
      font-size: 18px;
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; flex-shrink: 0;
      align-self: flex-end; margin-bottom: 1px;
      transition: transform .2s, background .15s;
    }
    #btn-swap-chain:hover { background: var(--navy); transform: rotate(180deg); }

    /* ── Token tabs ──────────────────────────────── */
    .token-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
    .token-tab {
      flex: 1; min-width: 58px; padding: 7px 4px;
      background: var(--bg3); border: 1px solid var(--border);
      color: var(--text2); font-family: 'Inter', sans-serif;
      font-size: 12px; font-weight: 600;
      cursor: pointer; text-align: center; transition: all .15s;
    }
    .token-tab:hover { border-color: var(--gold-dim); color: var(--text); }
    .token-tab.active { background: rgba(212,175,55,.12); border-color: var(--gold); color: var(--gold); }

    /* ── Amount ──────────────────────────────────── */
    .amount-wrap {
      background: var(--bg3); border: 1px solid var(--border);
      padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
    }
    .amount-top { display: flex; align-items: center; gap: 8px; }
    #amount-input {
      flex: 1; background: transparent; border: none; outline: none;
      color: var(--text); font-family: 'Inter', sans-serif;
      font-size: clamp(18px, 5vw, 24px); font-weight: 500; min-width: 0;
    }
    #amount-input::placeholder { color: var(--text3); }
    #btn-max {
      background: rgba(212,175,55,.15); border: 1px solid var(--gold-dim);
      color: var(--gold); font-size: 10px; font-weight: 700;
      padding: 3px 8px; cursor: pointer; flex-shrink: 0; transition: background .15s;
    }
    #btn-max:hover { background: rgba(212,175,55,.28); }
    .balance-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--text2); }
    #balance-val { color: var(--text); font-weight: 500; }

    /* ── Fee ─────────────────────────────────────── */
    .fee-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--text2); padding: 0 2px; }
    #fee-val { color: var(--gold-pale); font-weight: 500; }

    /* ── Action button ───────────────────────────── */
    #btn-action {
      width: 100%; padding: 14px;
      background: linear-gradient(135deg, var(--gold-dim), var(--gold));
      color: var(--navy-deep);
      font-family: 'Playfair Display', serif;
      font-size: 16px; font-weight: 700; border: none;
      cursor: pointer; transition: opacity .15s, filter .15s; letter-spacing: .3px;
    }
    #btn-action:hover:not(:disabled) { filter: brightness(1.1); }
    #btn-action:disabled { opacity:.4; cursor:not-allowed; background:var(--text3); }
    #btn-action.loading { opacity:.7; cursor:wait; }

    /* ── Status ──────────────────────────────────── */
    #status-box {
      display: none; background: var(--bg3); border-left: 3px solid var(--gold);
      padding: 10px 14px; font-size: 12px; line-height: 1.6; word-break: break-all;
    }
    #status-box.error   { border-color: var(--red); }
    #status-box.success { border-color: var(--green); }
    #status-box a { color: var(--gold); text-decoration: none; }
    #status-box a:hover { text-decoration: underline; }

    /* ── Route table ─────────────────────────────── */
    .info-section { width: 100%; max-width: 460px; margin-top: 16px; }
    .info-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 8px; padding: 0 2px; }
    .info-table { border: 1px solid var(--border); background: var(--bg2); }
    .info-row {
      display: flex; justify-content: space-between; gap: 8px;
      padding: 8px 14px; border-bottom: 1px solid var(--border);
      font-size: 11px; flex-wrap: wrap;
    }
    .info-row:last-child { border-bottom: none; }
    .info-row .k { color: var(--text2); flex-shrink: 0; }
    .info-row .v { color: var(--text); font-weight: 500; word-break: break-all; text-align: right; font-family: monospace; font-size: 10.5px; }
    .info-row .v a { color: var(--gold); text-decoration: none; }
    .info-row .v a:hover { text-decoration: underline; }

    /* ── Footer ──────────────────────────────────── */
    footer {
      border-top: 2px solid var(--gold); padding: 10px 16px;
      text-align: center; font-size: clamp(9px, 2.2vw, 11px);
      color: var(--text2); line-height: 1.6; word-break: break-word;
    }
    footer a { color: var(--gold); text-decoration: none; }
    /* transfer tracker: progress steps + per-wallet history */
    #relay-steps { margin-top: 10px; }
    .steps { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:11px; }
    .steps .step { color: var(--text2); }
    .steps .step.done { color: var(--green); }
    #history-list .hist-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--border); font-size:12px; }
    #history-list .hist-row:first-child { border-top:none; }
    .hist-route { color: var(--text2); font-size:11px; margin-left:6px; }
    .hist-meta { display:flex; align-items:center; gap:8px; white-space:nowrap; }
    .hist-when { color: var(--text2); font-size:10px; opacity:.8; }
    .badge { font-size:10px; padding:2px 7px; border-radius:100px; text-transform:uppercase; letter-spacing:.04em; }
    .badge.dispatched { color: var(--gold-pale); background: rgba(212,175,55,.12); }
    .badge.signed { color: var(--gold-pale); background: rgba(212,175,55,.2); }
    .badge.delivered { color: var(--green); background: rgba(46,160,67,.15); }

    /* ════════════════════════════════════════════════════════════════
       v2 — branded chrome + program console + realtime relay tracking
       (layers on artifacts/style/main.css; bridge.css wins on conflict)
       ════════════════════════════════════════════════════════════════ */

    /* ── Brand header (uses main.css .site-header/.brand/.brand-badge) ── */
    .site-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .site-header .brand { min-width:0; }
    .brand a { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    @media (max-width:560px){ .brand .suffix { display:none; } }
    /* the RPC health dot sits in the brand badge (states from main.css) */
    .brand-badge .dot { font-size:15px; line-height:1; }

    /* ── Atmospheric backdrop (mirrors the bourse/about landing) ── */
    main { position:relative; overflow:hidden; }
    main::before {
      content:""; position:absolute; top:-15%; left:50%; transform:translateX(-50%);
      width:720px; height:720px; max-width:140vw; pointer-events:none; z-index:0;
      background:radial-gradient(circle, rgba(212,175,55,.06) 0%, rgba(70,110,165,.05) 40%, transparent 68%);
    }
    main::after {
      content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
      background-image:radial-gradient(rgba(140,165,200,.08) 1px, transparent 1.4px);
      background-size:24px 24px;
      -webkit-mask-image:radial-gradient(ellipse 85% 60% at 50% 25%, #000 35%, transparent 80%);
      mask-image:radial-gradient(ellipse 85% 60% at 50% 25%, #000 35%, transparent 80%);
    }
    .stage { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; width:100%; }

    /* ── Route-mode pill (direct vs via-Bourse 2-hop) ── */
    .route-mode {
      display:flex; align-items:center; gap:7px; font-size:11px;
      padding:7px 11px; border:1px solid var(--border); background:var(--bg3); color:var(--text2);
    }
    .route-mode .rm-ic { color:var(--gold); font-size:13px; }
    .route-mode.hop { border-color:var(--gold-dim); background:rgba(212,175,55,.07); color:var(--gold-pale); }
    .route-mode.hop b { color:var(--gold); }

    /* ── Disabled (impossible) chain options ── */
    .chain-select option:disabled { color:var(--text3); }

    /* ── Realtime relay countdown ── */
    .countdown { background:var(--bg3); border:1px solid var(--border); padding:10px 12px; }
    .cd-head { display:flex; justify-content:space-between; font-size:11px; color:var(--text2);
               margin-bottom:6px; font-family:'JetBrains Mono', monospace; }
    .cd-time { color:var(--gold-pale); font-weight:600; }
    .cd-bar { height:5px; background:var(--bg); border:1px solid var(--border); overflow:hidden; }
    .cd-bar-fill { height:100%; width:0%; background:linear-gradient(90deg, var(--gold-dim), var(--gold));
                   transition:width 1s linear; }
    .countdown.done .cd-bar-fill { background:var(--green); }
    .countdown.done .cd-time { color:var(--green); }
    /* final roundtrip-complete state — big "Done", no bar, minimal green */
    .countdown.complete { border-color:var(--border2); background:var(--bg3); padding:14px 14px; }
    .countdown.complete .cd-bar { display:none; }
    .countdown.complete .cd-head { align-items:baseline; }
    .countdown.complete .cd-label { font-family:'Playfair Display', serif; font-size:22px; font-weight:700; color:var(--text); }
    .countdown.complete .cd-label .ck { color:var(--green); margin-right:5px; }
    .countdown.complete .cd-time { color:var(--text2); font-size:12px; font-weight:500; }
    .cd-detail { color:var(--text); font-size:13px; margin-bottom:6px; }
    .cd-detail b { color:var(--gold-pale); }
    .cd-link { margin-top:8px; font-size:11px; }
    .cd-link a { color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(212,175,55,.4); }
    .cd-link a:hover { border-bottom-color:var(--gold); }

    /* ── Stepper (dispatched → signed → delivered) ── */
    #relay-steps:empty { display:none; }
    .leglab { font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.08em;
              text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
    .stepper { display:flex; align-items:center; gap:6px; }
    .stp { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text2); white-space:nowrap; }
    .stp .stp-ic { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
                   border:1px solid var(--border2); border-radius:50%; font-size:10px; flex-shrink:0; }
    .stp.done { color:var(--green); }
    .stp.done .stp-ic { border-color:var(--green); color:var(--green); }
    .stp.active { color:var(--gold-pale); }
    .stp.active .stp-ic { border-color:var(--gold); }
    .stp-line { flex:1; height:1px; background:var(--border2); min-width:8px; }
    .spin { width:9px; height:9px; border:2px solid var(--gold-dim); border-top-color:transparent;
            border-radius:50%; animation:spin .8s linear infinite; }
    @keyframes spin { to { transform:rotate(360deg); } }

    /* ── Program console ── */
    .console { border:1px solid var(--border2); background:#0a0f16; font-family:'JetBrains Mono', monospace; }
    .console-bar {
      display:flex; align-items:center; gap:8px; padding:6px 10px;
      background:var(--navy-deep); border-bottom:1px solid var(--border2);
      font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text2);
    }
    .console-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); flex-shrink:0; }
    .console-name { color:var(--gold); }
    .console-state { margin-left:auto; color:var(--text2); }
    .console-state.busy { color:var(--gold-pale); }
    .console-state.ok   { color:var(--green); }
    .console-state.err  { color:var(--red); }
    .console-state.warn { color:var(--gold-pale); }
    .console-body { padding:8px 10px; max-height:180px; overflow-y:auto; font-size:11px; line-height:1.55; color:#9fb0cf; }
    .console-body .cline { display:flex; gap:8px; white-space:pre-wrap; word-break:break-word; }
    .console-body .ts { color:var(--text3); flex-shrink:0; }
    .console-body .cmsg { flex:1; }
    .console-body .ok   .cmsg { color:var(--green); }
    .console-body .err  .cmsg { color:var(--red); }
    .console-body .warn .cmsg { color:var(--gold-pale); }

    /* ── Destination-liquidity warning ── */
    .liq-note { display:flex; align-items:flex-start; gap:7px; font-size:11px; line-height:1.5; padding:8px 11px; border:1px solid var(--border); }
    .liq-note .ln-ic { flex-shrink:0; }
    .liq-note i { font-style:italic; opacity:.85; }
    .liq-note.empty { border-color:var(--red); background:rgba(192,57,43,.08); color:#e3a59e; }
    .liq-note.empty b { color:#f3bdb6; }
    .liq-note.low { border-color:var(--gold-dim); background:rgba(212,175,55,.07); color:var(--gold-pale); }
    .liq-note.low b { color:var(--gold); }
    #liquidity-val.empty { color:var(--red); font-weight:600; }
    #liquidity-val.low   { color:var(--gold-pale); }

    /* ── Misc ── */
    .gas-note { margin-top:16px; max-width:460px; opacity:.7; }
    .info-row .v a { word-break:break-all; }