/* retrace — light editorial / coral accent (distinct from prior dark theme) */

:root{
  --paper:#f4f1eb;
  --ink:#14110f;
  --ink2:#3d3834;
  --muted:#6b6560;
  --line:#1a1614;
  --card:#fffefb;
  --coral:#e2362d;
  --coralHi:#ff4d42;
  --mint:#0d7a5c;
  --rose:#b91c1c;
  --r:4px;
  --r2:2px;
  --font: "DM Sans", system-ui, sans-serif;
  --display: "Syne", var(--font);
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --shadow: 8px 8px 0 var(--ink);
  --shadowSm: 4px 4px 0 rgba(20,17,15,.25);
  /* Scrollbars (liste jetons, modales) */
  --scroll-thumb: rgba(26, 22, 20, 0.2);
  --scroll-thumb-hover: rgba(26, 22, 20, 0.38);
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* Légèrement plus compact pour voir le ticker sans scroll sur la plupart des écrans */
  font-size:13px;
}
body{
  margin:0;
  min-height:100%;
  font-family:var(--font);
  font-size:1rem;
  color:var(--ink);
  background:var(--paper);
  line-height:1.45;
}

:focus-visible{
  outline:3px solid var(--coral);
  outline-offset:2px;
}
button:focus:not(:focus-visible), input:focus:not(:focus-visible){outline:none;}

.skip{
  position:absolute; left:12px; top:12px; z-index:100;
  padding:10px 14px;
  background:var(--ink); color:var(--paper);
  font-weight:600; font-size:13px; text-decoration:none;
  transform:translateY(-200%);
  transition:transform .2s ease;
  border:2px solid var(--ink);
}
.skip:focus{transform:translateY(0);}

.bg{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;}
.bgBlob{
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.45;
}
.bgBlob1{
  width:min(90vw, 520px); height:min(90vw, 520px);
  right:-15%; top:-20%;
  background:radial-gradient(circle, #ffd4c9 0%, transparent 70%);
}
.bgBlob2{
  width:min(70vw, 420px); height:min(70vw, 420px);
  left:-10%; bottom:-15%;
  background:radial-gradient(circle, #c8e8dc 0%, transparent 70%);
}
.bgNoise{
  position:absolute; inset:0;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.topbar{
  display:flex; align-items:center; justify-content:flex-end;
  padding:8px 16px 4px;
  max-width:1120px; margin:0 auto;
}
.topbarActions{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  gap:10px;
}
.aboutBtn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  font-family:var(--font); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  background:var(--card);
  border:2px solid var(--line);
  box-shadow:var(--shadowSm);
  cursor:pointer;
  transition:transform .1s ease, box-shadow .15s ease;
  color:inherit;
}
.aboutBtn:hover{transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--ink);}
.aboutBtn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink);}

.aboutSection{margin-top:14px;}
.aboutHeading{
  margin:0 0 8px;
  font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted);
}
.aboutCard{
  padding:14px 16px;
  border:2px solid var(--line);
  background:var(--paper);
  font-size:14px; line-height:1.5;
}
.aboutCard .aboutPair{font-family:var(--display); font-weight:800; font-size:1.05rem; letter-spacing:-.02em;}
.aboutCard .aboutMeta{margin-top:8px; font-size:12px; color:var(--muted); font-weight:500;}
.aboutCard .aboutStatus{display:inline-block; margin-top:10px; padding:4px 10px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; background:var(--mint); color:var(--paper); border:2px solid var(--line);}
.aboutHistory{
  display:flex; flex-direction:column; gap:8px;
  max-height:min(38vh, 280px);
  overflow:auto;
}
.aboutHistRow{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px;
  padding:10px 12px;
  border:2px solid var(--line);
  background:var(--paper);
  font-size:12px;
}
.aboutHistPair{font-family:var(--mono); font-weight:650;}
.aboutHistWhen{font-size:11px; color:var(--muted);}

.layout{
  max-width:1120px;
  margin:0 auto;
  padding:8px 16px 28px;
  display:grid;
  gap:16px;
}
@media (min-width:900px){
  .layout{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    align-items:start;
    gap:20px 32px;
  }
  .hero{grid-column:1; grid-row:1;}
  .panel{grid-column:2; grid-row:1 / span 2;}
  .ticker{grid-column:1 / -1; grid-row:3;}
}

.hero{padding:4px 0 0;}
.heroTitle{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.65rem, 3.6vw, 2.35rem);
  line-height:1.05;
  letter-spacing:-.03em;
  margin:0 0 12px;
  max-width:14ch;
}
.heroEm{
  display:block;
  color:var(--coral);
  text-decoration:underline;
  text-decoration-thickness:3px;
  text-underline-offset:4px;
}
.heroLead{
  margin:0;
  font-size:1.05rem;
  color:var(--ink2);
  max-width:36ch;
  font-weight:500;
}

.panel{
  background:var(--card);
  border:3px solid var(--line);
  box-shadow:var(--shadow);
  padding:0;
}
.panelHead{
  padding:20px 20px 16px;
  border-bottom:3px solid var(--line);
  display:flex; flex-wrap:wrap; gap:16px;
  justify-content:space-between; align-items:flex-start;
}
.panelTitle{
  font-family:var(--display);
  font-weight:800;
  font-size:1.35rem;
  margin:0;
  letter-spacing:-.02em;
}
.panelSub{margin:4px 0 0; font-size:13px; color:var(--muted); font-weight:500;}
.chipRow{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  font-size:11px; font-weight:600;
  padding:6px 10px;
  border:2px solid var(--line);
  background:var(--paper);
  text-transform:uppercase; letter-spacing:.04em;
}
.chip strong{font-weight:800;}

.swapForm{padding:14px 18px 18px; display:flex; flex-direction:column; gap:14px;}
.field{
  padding:14px 14px;
  border:2px solid var(--line);
  background:var(--paper);
}
.fieldLabel{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px; gap:12px;
}
label{font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.04em;}
.linkBtn{
  appearance:none; border:none; background:none;
  font-family:inherit; font-weight:800; font-size:12px;
  color:var(--coral); cursor:pointer; text-transform:uppercase; letter-spacing:.04em;
}
.linkBtn:hover{text-decoration:underline;}
.miniTag{font-size:11px; color:var(--muted); font-weight:600;}

.inputRow{display:flex; gap:10px; align-items:center;}
input{
  flex:1; min-width:0;
  border:none; background:transparent;
  font-family:var(--mono); font-size:1.25rem; font-weight:500;
  color:var(--ink);
  padding:6px 2px;
}
input::placeholder{color:#a8a29e;}
input:focus{outline:none;}
input[readonly]{opacity:.75;}

.hintRow{display:flex; justify-content:space-between; gap:12px; margin-top:8px;}
.hint{font-size:12px; color:var(--muted); font-weight:500;}
.monoHint{font-family:var(--mono); font-size:11px;}

.tokenBtn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border:2px solid var(--line);
  background:var(--card);
  font-family:inherit; font-weight:700; font-size:14px;
  cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .1s ease, box-shadow .1s ease;
}
.tokenBtn:hover{transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink);}
.tokenBtn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink);}
.tokenIcon{
  width:32px; height:32px; flex-shrink:0;
  border-radius:var(--r);
  border:2px solid var(--line);
  display:grid; place-items:center;
  font-size:14px; font-weight:800; line-height:1;
  background:var(--paper);
  overflow:hidden;
}
.tokenIcon img{
  width:100%; height:100%;
  max-width:100%; max-height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  border-radius:2px;
}
.chev{opacity:.5; font-size:9px;}
.chev::before{content:"▾";}

.midRow{
  display:flex; align-items:center; gap:14px;
  padding:4px 0;
}
.flipBtn{
  width:44px; height:44px; flex-shrink:0;
  border:3px solid var(--line);
  background:var(--coral);
  color:var(--paper);
  font-size:18px; font-weight:800;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .15s ease;
}
.flipBtn:hover{transform:rotate(180deg) scale(1.02);}
.flipBtn:active{transform:rotate(180deg) scale(.98);}
.flipIcon{display:block; line-height:1;}

.quoteStrip{
  margin:0; flex:1;
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink2);
  border:2px dashed var(--line);
  padding:10px 14px;
  background:linear-gradient(135deg, rgba(255,255,255,.6), transparent);
}
.quoteStrip .sep{margin:0 .35em; opacity:.5;}

.details{
  display:flex; flex-direction:column; gap:6px;
  padding:14px 16px;
  border:2px solid var(--line);
  background:var(--paper);
  font-size:12px;
}
.detailRow{display:flex; justify-content:space-between; gap:12px;}
.detailRow .k{color:var(--muted); font-weight:700; text-transform:uppercase; font-size:10px; letter-spacing:.06em;}
.detailRow .v{font-family:var(--mono); font-weight:600; color:var(--ink); font-size:11px;}

.primary{
  width:100%;
  padding:16px 20px;
  border:3px solid var(--line);
  background:var(--coral);
  color:var(--paper);
  font-family:var(--display);
  font-weight:800;
  font-size:1rem;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .12s ease, background .15s ease;
}
.primary:hover{background:var(--coralHi); transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink);}
.primary:active{transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink);}
.primary:disabled{
  opacity:.55; cursor:not-allowed;
  transform:none; box-shadow:4px 4px 0 var(--ink);
}

.fineprint{margin:0; font-size:11px; color:var(--muted); text-align:center; font-weight:500;}

.ticker{
  border:3px solid var(--line);
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
  box-shadow:var(--shadowSm);
  min-height:46px;
  display:flex;
  align-items:center;
}
.tickerInner{
  display:flex; align-items:center;
  gap:12px;
  padding:10px 14px;
  width:max-content;
  animation:ticker 48s linear infinite;
}
.tick{
  display:inline-flex;
  align-items:center;
  font-size:0.875rem;
  font-weight:650;
  line-height:1.35;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  white-space:nowrap;
  font-family:var(--mono);
  letter-spacing:0.01em;
  background:rgba(255,255,255,.04);
}
.tick--up{color:#bbf7d0;}
.tick--dn{color:#fecaca;}

.toastHost{
  position:fixed; left:16px; bottom:16px; z-index:80;
  display:flex; flex-direction:column; gap:10px;
}
.toast{
  display:flex; gap:12px; align-items:flex-start;
  max-width:340px;
  padding:14px 16px;
  background:var(--card);
  border:3px solid var(--line);
  box-shadow:var(--shadowSm);
  animation:pop .35s cubic-bezier(.34,1.56,.64,1);
}
.toastIcon{font-size:20px; line-height:1;}
.toastTitle{font-weight:800; font-size:14px;}
.toastSub{font-size:12px; color:var(--muted); margin-top:2px;}

.supportWidget{
  position:fixed; right:max(16px, env(safe-area-inset-right));
  bottom:max(20px, env(safe-area-inset-bottom));
  z-index:90;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:12px;
  font-family:var(--font);
}
.supportPanel{
  width:min(100vw - 40px, 380px);
  max-height:min(72vh, 520px);
  display:flex; flex-direction:column;
  background:var(--card);
  border:3px solid var(--line);
  box-shadow:8px 8px 0 rgba(20,17,15,.2);
  opacity:0;
  transform:translateY(12px) scale(.98);
  pointer-events:none;
  visibility:hidden;
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.supportWidget.is-open .supportPanel{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
  visibility:visible;
  transition:opacity .22s ease, transform .22s ease, visibility 0s;
}
@media (prefers-reduced-motion:reduce){
  .supportPanel{transition:none;}
}
.supportPanelHead{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px;
  padding:14px 14px 10px;
  border-bottom:3px solid var(--line);
  background:var(--paper);
}
.supportPanelTitle{font-family:var(--display); font-weight:800; font-size:1.05rem; letter-spacing:-.02em;}
.supportPanelSub{font-size:11px; color:var(--muted); font-weight:600; margin-top:4px;}
.supportClose{
  flex-shrink:0; width:36px; height:36px;
  border:2px solid var(--line); background:var(--card);
  font-size:16px; line-height:1; cursor:pointer;
  box-shadow:2px 2px 0 var(--ink);
  font-family:inherit; color:inherit;
}
.supportClose:hover{background:var(--paper);}
.supportThread{
  flex:1; min-height:120px; max-height:min(38vh, 240px);
  overflow:auto;
  padding:12px 14px;
  display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(180deg, rgba(244,241,235,.5), transparent 40px);
}
.supportHint{
  font-size:12px; color:var(--muted); line-height:1.45;
  padding:8px 10px; border:2px dashed var(--line); background:rgba(255,255,255,.4);
}
.supportMsg{
  max-width:92%; padding:10px 12px; border-radius:12px;
  font-size:13px; line-height:1.45; font-weight:500;
}
.supportMsg--user{
  align-self:flex-end;
  background:var(--coral); color:var(--paper);
  border:2px solid var(--line);
  box-shadow:3px 3px 0 rgba(20,17,15,.15);
}
.supportMsg--bot{
  align-self:flex-start;
  background:var(--paper);
  color:var(--ink2);
  border:2px solid var(--line);
}
.supportQuickLabel{
  padding:8px 14px 4px;
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted);
}
.supportQuick{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:4px 14px 12px;
}
.supportChip{
  appearance:none; border:2px solid var(--line);
  background:var(--paper);
  font-family:inherit; font-size:11px; font-weight:700;
  padding:8px 10px; cursor:pointer;
  text-align:left; line-height:1.3;
  color:var(--ink2);
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .08s ease, background .12s ease;
}
.supportChip:hover{background:var(--card); transform:translate(-1px,-1px);}
.supportChip:active{transform:translate(1px,1px);}
.supportFoot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px;
  padding:10px 14px 14px;
  border-top:2px dashed var(--line);
  background:var(--paper);
}
.supportReset, .supportTosLink{
  font-family:inherit; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em;
  cursor:pointer; border:none; background:none;
  padding:6px 4px; color:var(--coral);
  text-decoration:underline; text-underline-offset:3px;
}
.supportTosLink{color:var(--ink2);}
.supportTosLink:hover, .supportReset:hover{color:var(--ink);}
.supportFab{
  width:56px; height:56px; border-radius:50%;
  border:3px solid var(--line);
  background:var(--coral);
  color:var(--paper);
  cursor:pointer;
  display:grid; place-items:center;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.supportFab:hover{
  background:var(--coralHi);
  transform:translate(-1px,-1px);
  box-shadow:6px 6px 0 var(--ink);
}
.supportFab:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink);}
.supportFab:focus-visible{outline:3px solid var(--coral); outline-offset:3px;}
.supportFabSvg-bubble{fill:#fffefb;}
.supportFabSvg-face{fill:var(--ink);}
.supportFabSvg-smile{
  stroke:var(--ink);
  stroke-width:1.35;
}
.supportFabGlyph--close{
  display:none;
  font-size:22px; font-weight:800; line-height:1;
  color:var(--paper);
}
.supportWidget.is-open .supportFabGlyph--chat{display:none;}
.supportWidget.is-open .supportFabGlyph--close{display:block;}
.supportWidget.is-open .supportFab{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--line);
  box-shadow:4px 4px 0 var(--ink);
}
.supportWidget.is-open .supportFab:hover{
  background:var(--card);
  transform:translate(-1px,-1px);
  box-shadow:6px 6px 0 var(--ink);
}
.supportWidget.is-open .supportFab:active{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--ink);
}

.modal{
  width:min(480px, calc(100vw - 24px));
  border:none; padding:0; background:transparent;
  max-height:92vh;
}
.modal--legal{
  width:min(560px, calc(100vw - 24px));
}
.tosMeta{
  margin:0 0 10px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}
.tosUpdated{font-weight:500;}
.tosLead{
  margin:0 0 8px;
  font-size:13px;
  line-height:1.5;
  color:var(--ink2);
  font-weight:500;
}
.tosSection{margin-top:16px;}
.tosSection:first-of-type{margin-top:12px;}
.tosHeading{
  margin:0 0 8px;
  font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted);
}
.tosP{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--ink2);
  font-weight:500;
}
.tosP strong{color:var(--ink); font-weight:700;}
.modal::backdrop{background:rgba(20,17,15,.45);}
.modalInner{
  background:var(--card);
  border:3px solid var(--line);
  box-shadow:var(--shadow);
  padding:16px;
  max-height:88vh; overflow:auto;
}
/* Défilement discret : pas de rail gris Windows par défaut */
.scrollPolish{
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) transparent;
}
.scrollPolish::-webkit-scrollbar{
  width:5px;
  height:5px;
}
.scrollPolish::-webkit-scrollbar-track{
  background:transparent;
}
.scrollPolish::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border-radius:999px;
}
.scrollPolish::-webkit-scrollbar-thumb:hover{
  background:var(--scroll-thumb-hover);
}
.scrollPolish::-webkit-scrollbar-corner{
  background:transparent;
}
.modalHeader{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:12px; margin-bottom:4px;
  border-bottom:3px solid var(--line);
}
.modalTitle{font-family:var(--display); font-weight:800; font-size:1.1rem;}
.iconBtn{
  width:40px; height:40px;
  border:2px solid var(--line);
  background:var(--paper);
  font-size:16px; cursor:pointer;
  box-shadow:2px 2px 0 var(--ink);
}
.iconBtn:hover{background:var(--card);}
.search{
  display:flex; align-items:center; gap:10px;
  margin-top:12px; padding:10px 12px;
  border:2px solid var(--line); background:var(--paper);
}
.search input{flex:1; border:none; font-family:inherit; font-size:14px;}
.searchIcon{opacity:.4;}

.tokenList{
  margin-top:12px; display:flex; flex-direction:column; gap:8px;
  max-height:44vh; overflow:auto;
  scrollbar-gutter:stable;
}
.tokenItem{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px;
  border:2px solid var(--line);
  background:var(--paper);
  cursor:pointer; text-align:left; font:inherit; color:inherit;
  transition:background .12s ease, transform .1s ease;
}
.tokenItem:hover{background:var(--card); transform:translateX(4px);}
.tokenBadge{
  width:40px; height:40px; flex-shrink:0;
  border-radius:var(--r);
  border:2px solid var(--line);
  display:grid; place-items:center;
  font-weight:800; font-size:15px; line-height:1;
  background:var(--card);
  overflow:hidden;
}
.tokenBadge img{
  width:100%; height:100%;
  max-width:100%; max-height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  border-radius:4px;
}
.tokenName{font-weight:800;}
.tokenDesc{font-size:11px; color:var(--muted);}
.tokenRight{font-size:11px; font-family:var(--mono); color:var(--ink2);}

.confirmBox{margin-top:8px;}
.confirmAmounts{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;}
.big{font-family:var(--mono); font-weight:700; font-size:1.1rem;}
.mini{margin:8px 0 0; font-size:12px; color:var(--muted); text-align:center;}
.confirmDetails{margin-top:12px; padding-top:12px; border-top:2px dashed var(--line);}

.deposit{
  margin-top:16px; padding:14px;
  border:2px solid var(--line);
  background:var(--paper);
}
.depositTop{display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
.depositTitle{font-weight:800; font-size:14px;}
.depositSub{margin:6px 0 0; font-size:12px; color:var(--muted); max-width:44ch; line-height:1.4;}
.qr{
  width:112px; height:112px; flex-shrink:0;
  border:2px solid var(--line);
  background:var(--card);
}
.addrBox{
  margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px; border:2px solid var(--line); background:var(--card);
}
.addrMono{
  font-family:var(--mono); font-size:10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:65%;
}
.miniBtn{
  padding:6px 10px; font-size:11px; font-weight:800;
  border:2px solid var(--line); background:var(--paper);
  cursor:pointer; font-family:inherit; text-transform:uppercase;
}
.miniBtn:hover{background:var(--card);}
.addrMini{margin-top:10px; display:flex; flex-direction:column; gap:6px;}
.addrLine{display:flex; align-items:center; gap:8px; font-size:11px;}
.addrLine .k{color:var(--muted); font-weight:700; min-width:88px;}
.addrLine .v{flex:1; font-family:var(--mono); font-weight:600;}
.addrLine .miniBtn{margin-left:auto;}

.steps{
  margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
@media (min-width:520px){ .steps{grid-template-columns:1fr 1fr 1fr;} }
.step{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em;
  border:2px solid var(--line); background:var(--card); color:var(--muted);
}
.step .dot{width:6px; height:6px; border-radius:50%; background:var(--muted);}
.step.isActive{border-color:var(--coral); color:var(--ink);}
.step.isActive .dot{background:var(--coral);}
.step.isDone{border-color:var(--mint); color:var(--ink2);}
.step.isDone .dot{background:var(--mint);}

.confirmActions{margin-top:16px; display:flex; flex-direction:column; gap:10px;}
@media (min-width:480px){
  .confirmActions{flex-direction:row;}
  .confirmActions .ghost{flex:0 0 auto;}
}
.ghost{
  padding:14px 18px;
  border:3px solid var(--line);
  background:var(--paper);
  font-family:var(--font); font-weight:800;
  cursor:pointer; text-transform:uppercase; font-size:12px; letter-spacing:.04em;
}
.ghost:hover{background:var(--card);}

.tx{
  margin-top:14px; display:flex; align-items:center; gap:12px;
  padding:12px; border:2px solid var(--line); background:var(--paper);
}
.spinner{
  width:20px; height:20px; border-radius:50%;
  border:3px solid var(--line);
  border-top-color:var(--coral);
  animation:spin .8s linear infinite;
}
.txTitle{font-weight:800; font-size:13px;}
.txSub{font-size:12px; color:var(--muted);}
.txHash{margin-left:auto; font-family:var(--mono); font-size:10px; max-width:40%; overflow:hidden; text-overflow:ellipsis;}

@keyframes ticker{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pop{
  from{opacity:0; transform:translateY(12px) scale(.96);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

@media (prefers-reduced-motion:reduce){
  .tickerInner{animation:none;}
  .toast{animation:none;}
  .spinner{animation:none;}
}

@media (prefers-color-scheme:dark){
  /* keep readable if OS forces dark — soften only */
  body{background:#1a1816; color:#f5f2ed;}
  :root{
    --paper:#252220;
    --card:#2e2a27;
    --ink:#f5f2ed;
    --ink2:#c4beb8;
    --muted:#9c9590;
    --line:#3d3834;
    --scroll-thumb:rgba(255,255,255,.14);
    --scroll-thumb-hover:rgba(255,255,255,.26);
  }
  .panel, .aboutBtn, .tokenBtn, .field, .details, .toast, .modalInner{background:var(--card);}
  .ticker{background:#14110f;color:#f5f2ed;}
  .aboutCard, .aboutHistRow{background:rgba(0,0,0,.22);}
  .supportPanelHead, .supportFoot{background:var(--paper);}
  .supportThread{background:linear-gradient(180deg, rgba(0,0,0,.35), transparent 40px);}
  .supportHint{background:rgba(0,0,0,.22);}
  .supportMsg--bot{background:rgba(0,0,0,.25);}
}