:root{
    --mint-primary:#5CD3B5;
    --mint-soft:#5ACDAF;
    --mint-light:#5BD1B2;
    --teal-mid:#3A9E84;
    --forest-dark:#125E4B;
    --bg:#F4FFFB;
    --surface:#FFFFFF;
    --light:#5BD1B2;
    --main:#3A9E84;
    --deep:#125E4B;
    --button-hover:#0E4A3B;
    --ink:#083D31;
    --ink-muted:#47786D;
    --ink-faint:#75A99C;
    --line:#BCEBDD;
    --line-soft:#DCF7EF;
    --success:#125E4B;
    --success-bg:#D8F4EA;
    --danger:#C2564F;
    --danger-bg:#FBEAE8;
    --radius:18px;
    --radius-sm:12px;
    --notch:14px;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
    --shadow-card:0 1px 2px rgba(8,61,49,.04), 0 16px 32px -16px rgba(18,94,75,.16);

    --field-bg:#FFFFFF;
    --field-bg-subtle:#F8FFFC;
    --panel:#EAFBF5;
    --panel-strong:#D9F5EC;
    --surface-2:#D9F5EC;
    --border-strong:#A8E6D3;
    --warn-bg:#FBF6E8;
    --warn-border:#EADFB8;
    --warn-ink:#7A6320;
    --warn-icon:#B89535;
    --send-bg:#FFFFFF;
    --send-border:#FFFFFF;
    --dropdown-bg:#FFFFFF;
    --mx:0px; --my:0px;
    color-scheme: light;
  }

  :root[data-theme="dark"]{
    --bg:#080D11;
    --surface:#0E151A;
    --main:#5CD3B5;
    --deep:#3A9E84;
    --button-hover:#2E8F76;
    --field-bg:#111A20;
    --field-bg-subtle:#101820;
    --panel:#111A20;
    --panel-strong:#17232B;
    --ink:#F0F8F5;
    --ink-muted:#9AA9A8;
    --ink-faint:#66767A;
    --line:#24313A;
    --line-soft:#1A252C;
    --success-bg:rgba(92,211,181,.18);
    --danger-bg:rgba(194,86,79,.16);
    --surface-2:#101820;
    --border-strong:#2B3B44;
    --warn-bg:#2A2415;
    --warn-border:#4A3F22;
    --warn-ink:#D8C27E;
    --warn-icon:#D8C27E;
    --send-bg:#101820;
    --send-border:#101820;
    --dropdown-bg:#0E151A;
    --shadow-card:0 1px 2px rgba(0,0,0,.34), 0 24px 60px -24px rgba(0,0,0,.72);
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    font-family:var(--font-body);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    transition:background .35s ease, color .25s ease;
  }
  :root:not([data-theme="dark"]) body{
    background:
      radial-gradient(90% 80% at 8% -10%, rgba(92,211,181,.16) 0%, rgba(92,211,181,0) 54%),
      radial-gradient(80% 70% at 100% 0%, rgba(58,158,132,.10) 0%, rgba(58,158,132,0) 50%),
      linear-gradient(165deg, #F8FFFC 0%, #F4FFFB 58%, #EAFBF5 100%);
  }
  :root[data-theme="dark"] body{
    background:
      radial-gradient(90% 80% at 8% -10%, rgba(92,211,181,.08) 0%, rgba(92,211,181,0) 55%),
      radial-gradient(80% 70% at 100% 0%, rgba(58,158,132,.08) 0%, rgba(58,158,132,0) 52%),
      linear-gradient(165deg, #0B1116 0%, #080D11 58%, #05080B 100%);
  }

  /* ---------- shape helper: notched corner echoing the brand mark ---------- */
  .notched{
    clip-path: polygon(
      var(--notch) 0%, 100% 0%, 100% calc(100% - var(--notch)),
      calc(100% - var(--notch)) 100%, 0% 100%, 0% var(--notch)
    );
  }
  .notched-sm{
    clip-path: polygon(
      8px 0%, 100% 0%, 100% calc(100% - 8px),
      calc(100% - 8px) 100%, 0% 100%, 0% 8px
    );
  }
  .notched-xs{
    clip-path: polygon(
      6px 0%, 100% 0%, 100% calc(100% - 6px),
      calc(100% - 6px) 100%, 0% 100%, 0% 6px
    );
  }

  /* ---------- page chrome ---------- */
  .page{
    max-width:1120px;
    margin:0 auto;
    padding:40px 24px 80px;
  }
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .brand-link{
    color:inherit;
    text-decoration:none;
  }
  .brand-logo{
    width:28px;
    height:28px;
    object-fit:cover;
    flex-shrink:0;
    clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  }
  .brand .wordmark{
    font-family:var(--font-display);
    font-weight:700;
    font-size:18px;
    letter-spacing:-0.01em;
    color:var(--ink);
  }
  .brand .wordmark span{ color:var(--main); }
  .topbar-right{ display:flex; align-items:center; gap:14px; }
  .topbar-note{
    font-size:12px;
    color:var(--ink-faint);
    font-family:var(--font-mono);
  }
  .theme-toggle{
    width:34px;height:34px; flex-shrink:0;
    border:none; cursor:pointer;
    background:var(--panel); color:var(--ink-muted);
    display:flex; align-items:center; justify-content:center;
    position:relative; z-index:0;
    clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
    transition:background .15s, color .15s, transform .15s;
    transform:translate(var(--mx,0px), var(--my,0px));
  }
  .theme-toggle::before{
    content:""; position:absolute; inset:-1px;
    background:var(--line-soft); clip-path:polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px); z-index:-1;
  }
  .theme-toggle:hover{ color:var(--deep); }
  .theme-toggle svg{ width:17px;height:17px; }
  .theme-toggle .icon-sun{ display:none; }
  .theme-toggle .icon-moon{ display:block; }
  :root[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
  :root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }

  /* ---------- layout: stage ---------- */
  .stage{
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  /* ---------- stepper ---------- */
  .stepper{
    display:flex;
    align-items:flex-start;
    gap:0;
    margin-bottom:40px;
    width:100%;
    max-width:460px;
    justify-content:center;
  }
  .step{
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    width:120px;
  }
  .step-mark{
    width:36px;height:36px;
    background:var(--field-bg);
    border:2px solid var(--line);
    transform:rotate(45deg);
    display:flex; align-items:center; justify-content:center;
    transition:all .25s ease;
  }
  .step-mark span{
    transform:rotate(-45deg);
    font-family:var(--font-display);
    font-weight:600;
    font-size:14px;
    color:var(--ink-faint);
  }
  .step-mark svg{ transform:rotate(-45deg); width:16px; height:16px; display:none; }
  .step.done .step-mark{ background:var(--main); border-color:var(--main); }
  .step.done .step-mark span{ display:none; }
  .step.done .step-mark svg{ display:block; }
  .step.active .step-mark{ background:var(--deep); border-color:var(--deep); }
  .step.active .step-mark span{ color:#fff; }
  .step-label{
    margin-top:10px;
    font-size:12px;
    font-weight:500;
    color:var(--ink-faint);
    text-align:center;
  }
  .step.active .step-label{ color:var(--deep); font-weight:600; }
  .step.done .step-label{ color:var(--ink-muted); }
  .step-line{
    position:absolute;
    top:17px; left:calc(50% + 26px); right:calc(-50% + 26px);
    height:2px;
    background:var(--line);
  }
  .step.done .step-line{ background:var(--main); }
  .step:last-child .step-line{ display:none; }

  /* ---------- card shell ---------- */
  .card{
    width:100%;
    max-width:440px;
    background:var(--surface);
    box-shadow:var(--shadow-card);
    padding:28px;
    position:relative;
    transition:background .3s ease;
  }
  @keyframes cardIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
  .card.anim-in{ animation: cardIn .35s cubic-bezier(.2,.8,.3,1); }
  .card-head{ margin-bottom:18px; }
  .card-eyebrow{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--main);
    font-weight:600;
    margin:0 0 4px;
  }
  .card-title{
    font-family:var(--font-display);
    font-size:20px;
    font-weight:700;
    margin:0;
    color:var(--ink);
  }
  .card-sub{
    font-size:13px;
    color:var(--ink-muted);
    margin:6px 0 0;
    line-height:1.5;
  }
  /* ---------- step 1: amount boxes ---------- */
  .swap-field{
    background:var(--field-bg-subtle);
    padding:14px 16px;
    position:relative;
    z-index:0;
    clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  }
  .swap-field::before{
    content:"";
    position:absolute; inset:-1.5px;
    background:var(--line);
    clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
    z-index:-1;
    transition:background .15s;
  }
  .swap-field.from{
    background:var(--send-bg);
    clip-path:polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
  }
  .swap-field.from::before{
    background:var(--send-border);
    clip-path:polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
  }
  .swap-field.from .amount-input,
  .swap-field.from .unit-prefix{ color:var(--ink-muted); }
  .swap-field.from .field-tag,
  .swap-field.from .usd-toggle{ color:var(--ink-faint); }
  .swap-field.to{
    background:var(--deep);
    clip-path: polygon(
      0 0,
      calc(50% - 28px) 0,
      50% 28px,
      calc(50% + 28px) 0,
      100% 0,
      100% calc(100% - 6px),
      calc(100% - 6px) 100%,
      0% 100%
    );
  }
  .swap-field.to::before{
    background:var(--deep);
    clip-path: polygon(
      0 0,
      calc(50% - 28px) 0,
      50% 28px,
      calc(50% + 28px) 0,
      100% 0,
      100% calc(100% - 6px),
      calc(100% - 6px) 100%,
      0% 100%
    );
  }
  :root[data-theme="dark"] .swap-field.to{
    background:#101820;
  }
  :root[data-theme="dark"] .swap-field.to::before{
    background:#25343D;
  }
  .field-row-top{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:10px;
  }
  .field-tag{
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--ink-muted);
  }
  .swap-field.to .field-tag{ color:rgba(255,255,255,.65); }
  .field-tag.est::after{
    content:"estimated";
    margin-left:6px;
    font-weight:500;
    text-transform:none;
    letter-spacing:0;
    color:rgba(255,255,255,.5);
  }
  .token-select{
    display:flex; align-items:center; gap:8px;
    background:var(--field-bg);
    padding:5px 10px 5px 6px;
    cursor:pointer;
    font-family:var(--font-body);
    font-weight:700;
    font-size:13.5px;
    color:var(--ink);
    transition:background .15s, transform .15s;
    position:relative; z-index:0;
    clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
    transform:translate(var(--mx,0px), var(--my,0px));
  }
  .token-select::before{
    content:""; position:absolute; inset:-1px;
    background:var(--line); clip-path:polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px); z-index:-1;
    transition:background .15s;
  }
  .token-select:hover::before{ background:var(--main); }
  .swap-field.to .token-select{ background:rgba(255,255,255,.12); color:#fff; }
  .swap-field.to .token-select::before{ background:rgba(255,255,255,.25); }
  .swap-field.to .token-select:hover::before{ background:rgba(255,255,255,.5); }
  .token-icon{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:#fff; font-size:10.5px; font-weight:700; font-family:var(--font-display);
    flex-shrink:0;
    overflow:hidden;
  }
  .token-icon img,
  .dd-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    display:block;
  }
  .token-select svg{ width:13px;height:13px; opacity:.6; }
  .field-row-bottom{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
  .amount-input{
    border:none; background:transparent; outline:none;
    font-family:var(--font-mono); font-weight:600;
    font-size:26px; color:var(--ink); width:100%; padding:0;
    -moz-appearance:textfield;
  }
  .amount-input::-webkit-outer-spin-button,
  .amount-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .swap-field.to .amount-input{ color:#fff; }
  .amount-input::placeholder{ color:var(--ink-faint); }
  .amount-input-wrap{ display:flex; align-items:baseline; gap:1px; flex:1; min-width:0; }
  .unit-prefix{
    font-family:var(--font-mono); font-weight:600; font-size:26px;
    color:var(--ink); display:none;
  }
  .swap-field[data-mode="usd"] .unit-prefix{ display:inline; }
  .swap-field.to .unit-prefix{ color:#fff; }
  .usd-toggle{
    display:flex; align-items:center; gap:5px;
    border:none; background:none; cursor:pointer;
    font-family:var(--font-mono); font-weight:600; font-size:12.5px; color:var(--ink-muted);
    padding:5px 7px; flex-shrink:0; white-space:nowrap;
    transition:color .15s, transform .15s;
    position:relative; z-index:0;
    transform:translate(var(--mx,0px), var(--my,0px));
  }
  .usd-toggle svg{ width:11px;height:11px; flex-shrink:0; opacity:.85; }
  .usd-toggle:hover{ color:var(--deep); }
  .swap-field.to .usd-toggle{ color:rgba(255,255,255,.8); }
  .swap-field.to .usd-toggle:hover{ color:#fff; }

  .swap-axis{
    position:relative;
    height:0;
    display:flex; justify-content:center;
  }
  .swap-axis::before{
    content:"";
    position:absolute;
    top:-28px;
    width:56px;
    height:56px;
    background:var(--send-bg);
    transform:rotate(45deg);
    z-index:1;
  }
  .swap-stack{ display:flex; flex-direction:column; gap:6px; }
  .swap-toggle{
    position:relative;
    margin-top:-18px; margin-bottom:-18px;
    width:36px;height:36px;
    background:transparent;
    border:none;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    z-index:2;
    box-shadow:none;
    transition:transform .18s ease;
    transform:translate(var(--mx,0px), var(--my,0px));
  }
  .swap-toggle:hover{ background:transparent; transform:translate(var(--mx,0px), var(--my,0px)); }
  .swap-toggle:active{ transform:translate(var(--mx,0px), var(--my,0px)) scale(.96); }
  .swap-toggle svg{ width:16px;height:16px; color:var(--ink); transform:none; }
  :root[data-theme="dark"] .swap-toggle svg{ color:#fff; }
  .swap-toggle:hover svg{ transform:none; }

  .rate-row{
    display:flex; align-items:center; justify-content:space-between;
    margin:18px 0 6px;
    font-size:12.5px; color:var(--ink-muted);
  }
  .rate-row .rate-value{ font-family:var(--font-mono); color:var(--ink); font-weight:500; }
  .rate-refresh{
    width:13px;height:13px; color:var(--main);
    animation:spin 3s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .fee-row{
    display:flex; align-items:center; gap:8px;
    font-size:12.5px; color:var(--ink-muted);
    padding:12px 0 4px;
    border-top:1px dashed var(--line);
    margin-top:8px;
  }
  .fee-row .dot{ width:3px;height:3px;border-radius:50%;background:var(--ink-faint); }
  .fee-row b{ color:var(--ink); font-weight:600; font-family:var(--font-mono); }
  .fee-total{ margin-left:auto; color:var(--ink-faint); }

  .btn{
    width:100%;
    border:none; cursor:pointer;
    font-family:var(--font-body); font-weight:700; font-size:15px;
    padding:14px 18px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:background .15s, filter .15s, transform .15s;
    clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
    position:relative; z-index:0;
    transform:translate(var(--mx,0px), var(--my,0px));
  }
  .btn svg{ width:18px; height:18px; flex-shrink:0; }
  .btn:hover{ filter:brightness(1.05); }
  .btn-primary{ background:var(--deep); color:#fff; margin-top:18px; }
  .btn-primary:hover{ background:var(--button-hover); filter:none; }
  .btn-primary:active{ transform:translate(var(--mx,0px), var(--my,0px)) scale(.97); }
  .btn-ghost{
    background:var(--field-bg); color:var(--ink-muted);
  }
  .btn-ghost::before{
    content:""; position:absolute; inset:-1.5px;
    background:var(--line);
    clip-path: polygon(11.5px 0%, 100% 0%, 100% calc(100% - 11.5px), calc(100% - 11.5px) 100%, 0% 100%, 0% 11.5px);
    z-index:-1;
    transition:background .15s;
  }
  .btn-ghost:hover{ color:var(--ink); filter:none; }
  .btn-ghost:hover::before{ background:var(--ink-faint); }
  .btn-row{ display:flex; gap:10px; margin-top:18px; }
  .btn-row .btn{ margin-top:0; }

  .legal-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:16px;
    font-size:12.5px; color:var(--main);
  }
  .legal-row span{ color:var(--ink-faint); }
  .legal-link{
    display:inline;
    padding:0;
    font-size:12.5px; color:var(--main);
    text-decoration:none;
    border:0;
    background:transparent;
    cursor:pointer;
    font-family:var(--font-body);
  }
  .legal-link:hover{ color:var(--deep); text-decoration:underline; }
  .support-link{
    display:inline;
    font-size:12.5px;
    color:var(--main);
    text-decoration:none;
  }
  .support-link:hover{ color:var(--deep); text-decoration:underline; }

  /* ---------- step 2 ---------- */
  .recap-pill{
    display:flex; align-items:center; justify-content:space-between;
    background:var(--panel);
    padding:10px 14px;
    margin-bottom:22px;
    font-size:13px;
    position:relative; z-index:0;
    clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  }
  .recap-pill::before{
    content:""; position:absolute; inset:-1px;
    background:var(--line-soft); clip-path:polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px); z-index:-1;
  }
  .recap-pill .recap-amounts{
    display:flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-weight:600; color:var(--ink);
  }
  .recap-pill .recap-amounts svg{ width:13px;height:13px; color:var(--ink-faint); }
  .recap-edit{
    font-size:12.5px; font-weight:600; color:var(--main);
    background:none; border:none; cursor:pointer; padding:0;
    display:inline-block; transition:transform .15s;
    transform:translate(var(--mx,0px), var(--my,0px));
  }
  .recap-edit:hover{ color:var(--deep); text-decoration:underline; }

  .field-group{ margin-bottom:18px; }
  .field-label{
    display:flex; align-items:center; justify-content:space-between;
    font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px;
  }
  .field-label .optional{ font-weight:500; color:var(--ink-faint); font-size:12px; }
  .input-wrap{
    position:relative; z-index:0;
    display:flex; align-items:center;
    background:var(--field-bg);
    border:1.5px solid var(--line);
    border-radius:8px;
    transition:border-color .15s, background .15s;
  }
  .input-wrap::before{
    display:none;
  }
  .input-wrap:focus-within{ border-color:var(--main); box-shadow:none; }
  .input-wrap.invalid{ border-color:var(--danger); }
  .input-wrap input{
    flex:1; border:none; outline:none; background:transparent;
    padding:13px 12px;
    font-family:var(--font-mono); font-size:13.5px; color:var(--ink);
  }
  .input-wrap input::placeholder{ color:var(--ink-muted); font-family:var(--font-body); }
  .input-icon-btn{
    border:none; background:none; cursor:pointer;
    color:var(--ink-muted); padding:8px;
    display:flex; align-items:center;
    transition:color .15s, transform .15s;
    transform:translate(var(--mx,0px), var(--my,0px));
  }
  .input-icon-btn:hover{ color:var(--main); }
  .input-icon-btn svg{ width:17px;height:17px; }
  .field-help{
    font-size:12px; color:var(--ink-muted); margin:6px 2px 0; line-height:1.5;
  }
  .field-help.error{ color:var(--danger); font-weight:600; }

  .confirm-row{
    display:flex; align-items:flex-start; gap:10px;
    padding:14px; background:var(--panel);
    margin:20px 0 4px;
    clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  }
  .confirm-row input[type=checkbox]{
    margin-top:2px; width:16px;height:16px; accent-color:var(--deep); flex-shrink:0;
  }
  .confirm-row label{ font-size:12.5px; color:var(--ink-muted); line-height:1.5; }
  .confirm-row b{ color:var(--ink); }

  /* ---------- step 3: payment ---------- */
  .pay-amount-box{
    display:flex; align-items:center; justify-content:space-between;
    background:var(--panel);
    padding:14px 16px; margin-bottom:18px;
    clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  }
  .pay-amount-box .label{ font-size:12px; color:var(--ink-muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
  .pay-amount-box .value{ font-family:var(--font-mono); font-weight:700; font-size:18px; color:var(--ink); display:flex; align-items:center; gap:7px; }
  .copyable-amount{ user-select:text; }
  .amount-copy-btn{
    border:none; background:transparent; color:var(--ink-muted); cursor:pointer;
    width:24px;height:24px; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    transition:color .15s, background .15s;
    clip-path: polygon(4px 0%, 100% 0%, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0% 100%, 0% 4px);
  }
  .amount-copy-btn:hover{ color:var(--main); background:var(--field-bg-subtle); }
  .amount-copy-btn svg{ width:14px;height:14px; }
  .amount-copy-btn.tiny{ width:20px;height:20px; }
  .amount-copy-btn.tiny svg{ width:12px;height:12px; }
  .amount-copy-btn.copied{ color:var(--success); background:rgba(111,207,151,.14); }

  .pay-grid{ display:flex; gap:16px; margin-bottom:20px; }
  .qr-box{
    width:92px;height:92px; flex-shrink:0;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    padding:6px;
    position:relative; z-index:0;
    clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  }
  .qr-box img{ width:100%; height:100%; object-fit:contain; }
  .qr-box::before{
    content:""; position:absolute; inset:-1.5px;
    background:var(--line); clip-path:polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px); z-index:-1;
  }
  .addr-col{ flex:1; min-width:0; }
  .addr-label{ font-size:12px; color:var(--ink-muted); font-weight:600; margin-bottom:6px; }
  .addr-box{
    display:flex; align-items:center; gap:8px;
    padding:10px 12px;
    position:relative; z-index:0;
    background:var(--field-bg-subtle);
    clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  }
  .addr-box::before{
    content:""; position:absolute; inset:-1.5px;
    background:var(--line); clip-path:polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px); z-index:-1;
  }
  .addr-box .addr-text{
    font-family:var(--font-mono); font-size:12px; color:var(--ink);
    word-break:break-all; flex:1; line-height:1.5;
  }
  .copy-btn{
    border:none; background:var(--main); color:#fff; cursor:pointer;
    width:30px;height:30px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s, transform .15s;
    clip-path: polygon(5px 0%, 100% 0%, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0% 100%, 0% 5px);
    transform:translate(var(--mx,0px), var(--my,0px));
  }
  .copy-btn:hover{ background:var(--deep); }
  .copy-btn svg{ width:14px;height:14px; }
  .copy-btn.copied{ background:var(--success); }
  .expiry-note{
    display:flex; align-items:center; gap:6px;
    font-size:12px; color:var(--ink-muted); margin-top:10px;
  }
  .expiry-note svg{ width:13px;height:13px; color:var(--ink-faint); }
  .expiry-note b{ font-family:var(--font-mono); color:var(--deep); font-weight:600; }

  .timeline{ margin:22px 0 4px; }
  .tl-item{
    display:flex; gap:12px; position:relative; padding-bottom:20px;
  }
  .tl-item:last-child{ padding-bottom:0; }
  .tl-item::before{
    content:""; position:absolute; left:9px; top:22px; bottom:0;
    width:2px; background:var(--line);
  }
  .tl-item:last-child::before{ display:none; }
  .tl-dot{
    width:20px;height:20px; border-radius:50%;
    background:var(--field-bg); border:2px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; z-index:1;
  }
  .tl-dot svg{ width:11px;height:11px; display:none; color:#fff; }
  .tl-item.done .tl-dot{ background:var(--main); border-color:var(--main); }
  .tl-item.done .tl-dot svg{ display:block; }
  .tl-item.done::before{ background:var(--main); }
  .tl-item.current .tl-dot{
    border-color:var(--deep);
    animation:pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(18,94,75,.25);} 50%{ box-shadow:0 0 0 5px rgba(18,94,75,0);} }
  .tl-title{ font-size:13.5px; font-weight:600; color:var(--ink-faint); }
  .tl-item.done .tl-title, .tl-item.current .tl-title{ color:var(--ink); }
  .tl-sub{ font-size:12px; color:var(--ink-faint); margin-top:2px; }
  .tl-item.current .tl-sub{ color:var(--main); font-weight:500; }

  .warn-strip{
    display:flex; gap:8px; align-items:flex-start;
    background:var(--warn-bg);
    padding:11px 13px; margin-top:20px;
    font-size:12px; color:var(--warn-ink); line-height:1.5;
    position:relative; z-index:0;
    clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  }
  .warn-strip::before{
    content:""; position:absolute; inset:-1px;
    background:var(--warn-border); clip-path:polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px); z-index:-1;
  }
  .warn-strip svg{ width:15px;height:15px; flex-shrink:0; margin-top:1px; color:var(--warn-icon); }

  /* ---------- result states ---------- */
  .result{ text-align:center; padding:8px 4px 4px; }
  .result-icon{
    width:64px;height:64px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin:6px auto 18px;
    animation: iconPop .4s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes iconPop{ from{ opacity:0; transform:scale(.5);} to{ opacity:1; transform:scale(1);} }
  .result-icon svg{ width:30px;height:30px; }
  .result.success .result-icon{ background:var(--success-bg); color:var(--success); }
  .result.error .result-icon{ background:var(--danger-bg); color:var(--danger); }
  .result-title{ font-family:var(--font-display); font-weight:700; font-size:19px; margin:0 0 8px; }
  .result-body{ font-size:13.5px; color:var(--ink-muted); line-height:1.6; margin:0 0 22px; padding:0 6px; }
  .result-summary{
    background:var(--panel); padding:14px 16px;
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:18px; text-align:left;
    clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  }
  .result-summary .ra{ font-family:var(--font-mono); font-weight:600; font-size:14px; }
  .result-summary svg{ width:14px;height:14px; color:var(--ink-faint); }
  .tx-row{
    display:flex; align-items:center; justify-content:space-between;
    font-size:12px; color:var(--ink-muted); margin-bottom:20px;
    font-family:var(--font-mono);
  }
  .tx-row a{ color:var(--main); text-decoration:none; display:flex; align-items:center; gap:4px; }
  .tx-row a:hover{ color:var(--deep); text-decoration:underline; }
  .tx-row a svg{ width:12px;height:12px; }
  .tx-row a:not([href]){
    color:var(--ink-muted);
    cursor:default;
    text-decoration:none;
  }
  .underpaid-address{
    background:var(--panel);
    padding:12px 14px;
    margin-bottom:14px;
    text-align:left;
    clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  }
  .underpaid-address span{
    display:block;
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-muted);
    margin-bottom:6px;
  }
  .underpaid-address strong{
    display:block;
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--ink);
    word-break:break-all;
  }
  .underpaid-note{
    margin-top:0;
  }

  /* ---------- token dropdown ---------- */
  .overlay{
    position:fixed; inset:0; background:rgba(10,18,25,.55);
    display:flex; align-items:center; justify-content:center;
    z-index:50; padding:20px;
    backdrop-filter:blur(2px);
  }
  .terms-overlay{
    position:fixed;
    inset:0;
    background:rgba(10,18,25,.62);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:60;
    padding:20px;
    backdrop-filter:blur(2px);
  }
  .terms-panel{
    width:100%;
    max-width:620px;
    max-height:min(760px, 88vh);
    background:var(--dropdown-bg);
    box-shadow:0 24px 60px -20px rgba(21,34,48,.55);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding-right:4px;
    clip-path: polygon(16px 0%, 100% 0%, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0% 100%, 0% 16px);
    animation:panelIn .22s cubic-bezier(.2,.9,.3,1.2);
  }
  .terms-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:20px 20px 12px;
    border-bottom:1px solid var(--line-soft);
  }
  .terms-head p{
    margin:0 0 4px;
    color:var(--main);
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .terms-head h2{
    margin:0;
    color:var(--ink);
    font-family:var(--font-display);
    font-size:22px;
  }
  .terms-body{
    overflow:auto;
    padding:18px 20px 22px;
  }
  .terms-body section{
    padding:0 0 16px;
    margin:0 0 16px;
    border-bottom:1px dashed var(--line-soft);
  }
  .terms-body section:last-child{
    border-bottom:0;
    margin-bottom:0;
    padding-bottom:0;
  }
  .terms-body h3{
    margin:0 0 7px;
    color:var(--ink);
    font-family:var(--font-display);
    font-size:15px;
  }
  .terms-body p{
    margin:0;
    color:var(--ink-muted);
    font-size:13px;
    line-height:1.6;
  }
  .terms-body a{
    color:var(--main);
    text-decoration:none;
  }
  .terms-body a:hover{
    color:var(--deep);
    text-decoration:underline;
  }
  .dropdown-panel{
    width:100%; max-width:380px; max-height:520px;
    background:var(--dropdown-bg);
    box-shadow:0 24px 60px -20px rgba(21,34,48,.5);
    display:flex; flex-direction:column;
    overflow:hidden;
    clip-path: polygon(16px 0%, 100% 0%, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0% 100%, 0% 16px);
    animation: panelIn .22s cubic-bezier(.2,.9,.3,1.2);
  }
  @keyframes panelIn{ from{ opacity:0; transform:scale(.94) translateY(6px);} to{ opacity:1; transform:scale(1) translateY(0);} }
  .dd-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 16px 10px;
  }
  .dd-head h3{ font-family:var(--font-display); font-size:16px; margin:0; }
  .dd-close{ border:none; background:none; width:28px;height:28px; border-radius:50%; cursor:pointer; display:flex;align-items:center;justify-content:center; color:var(--ink-muted); transition:color .15s, transform .15s; transform:translate(var(--mx,0px), var(--my,0px)); }
  .dd-close:hover{ color:var(--deep); }
  .dd-close svg{ width:14px;height:14px; }
  .dd-search{
    margin:0 16px 12px;
    display:flex; align-items:center; gap:8px;
    background:var(--panel);
    padding:10px 12px;
    position:relative; z-index:0;
    box-shadow:inset 0 0 0 1.5px transparent;
    clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
    transition:box-shadow .15s;
  }
  .dd-search::before{
    display:none;
  }
  .dd-search:focus-within{
    background:var(--panel);
    box-shadow:inset 0 0 0 1.5px var(--main);
  }
  .dd-search:focus-within::before{ background:transparent; }
  .dd-search svg{ width:16px;height:16px; color:var(--ink-faint); flex-shrink:0; }
  .dd-search input{
    border:none; outline:none; background:transparent; flex:1;
    font-family:var(--font-body); font-size:13.5px; color:var(--ink);
  }
  .dd-search input::placeholder{ color:var(--ink-faint); }
  .dd-section-label{
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-faint); padding:4px 20px 8px;
  }
  .dd-list{ overflow-y:auto; padding:0 10px 12px 8px; scrollbar-gutter:stable; }
  .dd-row{
    display:flex; align-items:center; gap:10px;
    padding:9px 10px; cursor:pointer;
    transition:background .12s;
    clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
  }
  .dd-row:hover{ background:var(--panel); }
  .dd-row.selected{ background:var(--panel-strong); }
  .dd-row{ transform:translate(var(--mx,0px), var(--my,0px)); }
  .dd-row .dd-icon{ width:34px;height:34px; border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:13px; flex-shrink:0; overflow:hidden; }
  .dd-row .dd-name{ flex:1; min-width:0; }
  .dd-row .dd-symbol{ font-weight:700; font-size:14px; color:var(--ink); display:flex; align-items:center; gap:6px; }
  .dd-row .dd-full{ font-size:12px; color:var(--ink-faint); margin-top:1px; }
  .dd-row .dd-right{ text-align:right; flex-shrink:0; }
  .dd-row .dd-price{ font-family:var(--font-mono); font-weight:600; font-size:13px; color:var(--ink); }
  .dd-row .dd-change{
    font-family:var(--font-mono);
    font-size:11px;
    margin-top:1px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
  }
  .network-mini{
    width:14px;
    height:14px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:7px;
    font-weight:800;
    font-family:var(--font-display);
    overflow:hidden;
    flex-shrink:0;
    box-shadow:0 0 0 1px rgba(255,255,255,.18);
  }
  .network-mini img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    display:block;
  }
  .dd-row .dd-change.up{ color:var(--success); }
  .dd-row .dd-change.down{ color:var(--danger); }
  .dd-row .dd-check{ width:16px;height:16px; color:var(--main); margin-left:8px; flex-shrink:0; }
  .dd-empty{ text-align:center; padding:36px 20px; color:var(--ink-faint); font-size:13px; }
  .dd-empty svg{ width:28px;height:28px; margin-bottom:10px; color:var(--line); }

  @media (max-width:480px){
    .page{ padding:24px 16px 60px; }
    .card{ padding:22px 18px; }
    .stepper{ max-width:340px; }
    .step{ width:100px; }
    .pay-grid{ flex-direction:column; }
    .qr-box{ width:88px;height:88px; }
  }