/* ============================================================
   global-currency-converter · styles.css
   霓虹赛博 Neon-Cyberpunk · hard-cut corners · neon grid
   ============================================================ */

:root{
  --c-primary:#e94968;
  --c-accent:#d7b93c;
  --c-cta:#c3f651;
  --c-bg:#150e10;
  --c-surface:#231a1c;
  --c-surface-2:#2b2023;
  --c-text:#f2eeef;
  --c-dim:#ae989c;
  --c-line:#403033;
  --r:4px;
  --font-head:'Poppins','Noto Sans SC',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',ui-monospace,'SFMono-Regular','Courier New',monospace;
  --glow-primary:0 0 12px rgba(233,73,104,.45);
  --glow-accent:0 0 12px rgba(215,185,60,.4);
  --glow-cta:0 0 16px rgba(195,246,81,.4);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font-mono);
  font-size:14px;
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

/* ---- neon grid backdrop ---- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(rgba(233,73,104,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,73,104,.055) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 0%, #000 25%, transparent 78%);
          mask-image:radial-gradient(ellipse 120% 90% at 50% 0%, #000 25%, transparent 78%);
}

/* ---- ambient glow blobs ---- */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(520px 340px at 12% -6%, rgba(233,73,104,.13), transparent 70%),
    radial-gradient(600px 400px at 92% 8%, rgba(195,246,81,.07), transparent 70%),
    radial-gradient(520px 420px at 50% 108%, rgba(215,185,60,.08), transparent 70%);
}

/* ---- scanlines overlay ---- */
.scanlines{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(242,238,239,.028) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}

h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; letter-spacing:.5px; }

a{ color:var(--c-primary); text-decoration:none; }
button{ font-family:inherit; color:inherit; }
input,select,button{ font-size:inherit; }

::selection{ background:rgba(195,246,81,.28); color:var(--c-text); }

:focus-visible{ outline:2px solid var(--c-cta); outline-offset:2px; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--c-bg); }
::-webkit-scrollbar-thumb{ background:var(--c-line); border-radius:var(--r); border:2px solid var(--c-bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--c-primary); }

/* ================= header ================= */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px clamp(14px, 4vw, 40px);
  border-bottom:1px solid var(--c-line);
  background:rgba(21,14,16,.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.brand{
  display:inline-flex;
  align-items:baseline;
  gap:2px;
  font-family:var(--font-head);
  font-weight:800;
  font-size:20px;
  letter-spacing:1px;
  white-space:nowrap;
}
.brand-fx{ color:var(--c-primary); text-shadow:var(--glow-primary); }
.brand-slash{ color:var(--c-accent); text-shadow:var(--glow-accent); }
.brand-sub{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:3px;
  color:var(--c-dim);
  margin-left:8px;
}

.nav{
  display:flex;
  gap:4px;
  margin-left:8px;
}
.nav a{
  position:relative;
  padding:7px 14px;
  font-size:13px;
  letter-spacing:1px;
  color:var(--c-dim);
  border:1px solid transparent;
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition:color .18s, border-color .18s, background .18s;
}
.nav a:hover{ color:var(--c-text); border-color:var(--c-line); }
.nav a.active{
  color:var(--c-cta);
  background:rgba(195,246,81,.06);
  border-color:rgba(195,246,81,.45);
  text-shadow:0 0 10px rgba(195,246,81,.5);
  box-shadow:0 0 14px rgba(195,246,81,.12), inset 0 0 12px rgba(195,246,81,.05);
}

.lang-wrap{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.lang-globe{ color:var(--c-accent); text-shadow:var(--glow-accent); font-size:15px; }
.lang-select{
  background:var(--c-bg);
  color:var(--c-text);
  border:1px solid var(--c-line);
  border-radius:var(--r);
  padding:7px 10px;
  font-family:var(--font-mono);
  font-size:12px;
  cursor:pointer;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition:border-color .18s, box-shadow .18s;
}
.lang-select:hover{ border-color:var(--c-accent); box-shadow:var(--glow-accent); }
.lang-select:focus{ outline:none; border-color:var(--c-cta); }

/* ================= ticker ================= */
.ticker-bar{
  display:flex;
  align-items:stretch;
  border-bottom:1px solid var(--c-line);
  background:rgba(35,26,28,.55);
  overflow:hidden;
}
.ticker-tag{
  flex:none;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  background:var(--c-primary);
  color:#1c0d10;
  font-weight:700;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  clip-path:polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  text-shadow:0 0 10px rgba(255,255,255,.45);
}
.ticker-viewport{ flex:1; overflow:hidden; }
.ticker-track{
  display:inline-flex;
  gap:34px;
  white-space:nowrap;
  padding:9px 16px;
  animation:tick 32s linear infinite;
  will-change:transform;
}
.ticker-bar:hover .ticker-track{ animation-play-state:paused; }
.ticker-item{ font-size:12px; letter-spacing:.5px; color:var(--c-dim); }
.ticker-item b{ color:var(--c-primary); font-weight:600; text-shadow:0 0 8px rgba(233,73,104,.35); }
.ticker-item .v{ color:var(--c-text); }
@keyframes tick{ to{ transform:translateX(-50%); } }

/* ================= layout ================= */
.container{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:26px clamp(14px, 3.4vw, 34px) 60px;
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:22px;
  align-items:start;
}
.container.single{ grid-template-columns:1fr; }

/* ================= panels ================= */
.panel{
  position:relative;
  padding:26px;
  background:linear-gradient(180deg, var(--c-surface-2) 0%, var(--c-surface) 46%);
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.42)) drop-shadow(0 0 16px rgba(233,73,104,.10));
  overflow:hidden;
}
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border:1px solid var(--c-line);
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.panel::after{
  content:"";
  position:absolute;
  top:0;
  left:24px;
  right:24px;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--c-primary) 32%, var(--c-cta) 72%, transparent);
  filter:drop-shadow(0 0 6px var(--c-primary));
  opacity:.85;
}
.panel > *{ position:relative; z-index:1; }

.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.panel-title{ font-size:clamp(20px, 3vw, 26px); letter-spacing:.5px; }
.panel-title.sm{ font-size:15px; letter-spacing:2px; text-transform:uppercase; color:var(--c-accent); text-shadow:var(--glow-accent); }
.panel-sub{ color:var(--c-dim); font-size:12px; margin-top:2px; letter-spacing:.4px; }

.watermark{
  position:absolute;
  right:16px;
  bottom:-8px;
  z-index:0 !important;
  font-family:var(--font-head);
  font-weight:800;
  font-size:84px;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(233,73,104,.16);
  letter-spacing:4px;
  user-select:none;
  pointer-events:none;
}

/* ---- badge ---- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  letter-spacing:1px;
  padding:5px 12px;
  border:1px solid var(--c-line);
  border-radius:var(--r);
  color:var(--c-dim);
  background:rgba(21,14,16,.4);
  white-space:nowrap;
}
.badge .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--c-dim);
  flex:none;
}
.badge.ok{ color:var(--c-cta); border-color:rgba(195,246,81,.45); box-shadow:0 0 12px rgba(195,246,81,.15), inset 0 0 8px rgba(195,246,81,.05); }
.badge.ok .dot{ background:var(--c-cta); box-shadow:0 0 8px var(--c-cta); animation:pulse 1.8s infinite; }
.badge.warn{ color:var(--c-accent); border-color:rgba(215,185,60,.45); box-shadow:0 0 12px rgba(215,185,60,.15); }
.badge.warn .dot{ background:var(--c-accent); box-shadow:0 0 8px var(--c-accent); animation:pulse 1.8s infinite; }
.badge.err{ color:var(--c-primary); border-color:rgba(233,73,104,.5); box-shadow:0 0 12px rgba(233,73,104,.2); }
.badge.err .dot{ background:var(--c-primary); box-shadow:0 0 8px var(--c-primary); animation:pulse .9s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---- form blocks ---- */
.block{ margin-bottom:20px; }
.field-label{
  display:block;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--c-dim);
  margin-bottom:8px;
}

.amount-row{ display:flex; gap:12px; flex-wrap:wrap; }
.amount-input{
  flex:1;
  min-width:180px;
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:var(--r);
  color:var(--c-text);
  font-family:var(--font-mono);
  font-size:clamp(22px, 4vw, 32px);
  font-weight:600;
  padding:12px 16px;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition:border-color .18s, box-shadow .18s;
}
.amount-input:focus{
  outline:none;
  border-color:var(--c-primary);
  box-shadow:var(--glow-primary), inset 0 0 14px rgba(233,73,104,.06);
}
.amount-input::placeholder{ color:#5d4d51; }

.quick-btns{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.chip{
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:var(--r);
  color:var(--c-dim);
  font-family:var(--font-mono);
  font-size:12px;
  padding:9px 12px;
  cursor:pointer;
  clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition:color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.chip:hover{
  color:var(--c-accent);
  border-color:var(--c-accent);
  box-shadow:var(--glow-accent);
  transform:translateY(-1px);
}
.chip:active{ transform:translateY(0); }

/* ---- pair row ---- */
.pair-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:14px;
  align-items:end;
}
.currency-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:var(--r);
  padding:12px 14px;
  cursor:pointer;
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.currency-btn:hover{
  border-color:var(--c-primary);
  box-shadow:var(--glow-primary);
  transform:translateY(-1px);
}
.ccy-code{
  font-family:var(--font-head);
  font-weight:700;
  font-size:20px;
  color:var(--c-primary);
  text-shadow:0 0 12px rgba(233,73,104,.4);
  letter-spacing:1px;
}
.ccy-name{
  flex:1;
  color:var(--c-dim);
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ccy-caret{ color:var(--c-line); font-size:12px; }

.swap-btn{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r);
  color:var(--c-accent);
  font-size:20px;
  cursor:pointer;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition:color .18s, border-color .18s, box-shadow .18s, transform .25s;
  margin-bottom:2px;
}
.swap-btn:hover{
  color:var(--c-accent);
  border-color:var(--c-accent);
  box-shadow:var(--glow-accent);
  transform:rotate(180deg);
}

/* ---- convert button ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:transparent;
  border:1px solid var(--c-line);
  border-radius:var(--r);
  color:var(--c-text);
  padding:11px 20px;
  cursor:pointer;
  letter-spacing:1px;
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition:all .18s;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{
  width:100%;
  margin:6px 0 20px;
  background:var(--c-cta);
  border-color:var(--c-cta);
  color:#131606;
  font-family:var(--font-head);
  font-weight:700;
  font-size:15px;
  letter-spacing:3px;
  box-shadow:0 0 20px rgba(195,246,81,.35), inset 0 0 14px rgba(255,255,255,.12);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{
  box-shadow:0 0 30px rgba(195,246,81,.6), inset 0 0 14px rgba(255,255,255,.2);
  transform:translateY(-1px);
}
.btn-primary:active{ transform:translateY(1px); }

/* ---- result ---- */
.result-block{
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:var(--r);
  padding:20px 22px 18px;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  position:relative;
}
.result-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}
.result-label{
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--c-dim);
}
.copy-btn{
  background:transparent;
  border:1px solid var(--c-line);
  border-radius:var(--r);
  color:var(--c-dim);
  font-size:11px;
  padding:3px 10px;
  cursor:pointer;
  letter-spacing:1px;
  transition:all .15s;
}
.copy-btn:hover{ color:var(--c-accent); border-color:var(--c-accent); box-shadow:var(--glow-accent); }
.copy-btn.copied{ color:var(--c-cta); border-color:rgba(195,246,81,.5); box-shadow:var(--glow-cta); }

.result-value{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(30px, 7vw, 46px);
  line-height:1.15;
  letter-spacing:1px;
  word-break:break-all;
}
.result-value .ph{ color:#4c3e42; }
.result-value em{
  font-style:normal;
  color:var(--c-cta);
  text-shadow:0 0 18px rgba(195,246,81,.45);
}
.result-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  margin-top:10px;
  font-size:12px;
  color:var(--c-dim);
}
.result-meta span b{ color:var(--c-accent); font-weight:600; }

/* ---- popular pairs ---- */
.popular-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:12px;
}
.popular-card{
  text-align:left;
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:var(--r);
  padding:13px 14px;
  cursor:pointer;
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.popular-card:hover{
  border-color:var(--c-primary);
  box-shadow:var(--glow-primary);
  transform:translateY(-2px);
}
.p-pair{
  font-family:var(--font-head);
  font-weight:700;
  font-size:14px;
  letter-spacing:.5px;
}
.p-slash{ color:var(--c-line); margin:0 2px; }
.p-rate{
  margin-top:5px;
  font-size:13px;
  color:var(--c-accent);
  text-shadow:0 0 8px rgba(215,185,60,.3);
}

/* ---- footer ---- */
.site-footer{
  border-top:1px solid var(--c-line);
  margin-top:10px;
  padding:18px clamp(14px, 4vw, 40px);
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  justify-content:space-between;
  font-size:11px;
  color:var(--c-dim);
  letter-spacing:.4px;
}

/* ================= currency dropdown ================= */
.ccy-dropdown{
  position:fixed;
  z-index:200;
  background:#1a1214;
  border:1px solid var(--c-line);
  border-radius:var(--r);
  box-shadow:0 18px 46px rgba(0,0,0,.66), 0 0 24px rgba(233,73,104,.16);
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  overflow:hidden;
}
.dd-search input{
  width:100%;
  padding:11px 13px;
  background:var(--c-bg);
  color:var(--c-text);
  border:none;
  border-bottom:1px solid var(--c-line);
  font-family:var(--font-mono);
  font-size:13px;
  outline:none;
}
.dd-search input:focus{ box-shadow:inset 0 -2px 0 var(--c-primary); }
.dd-search input::placeholder{ color:#5d4d51; }
.dd-body{ max-height:292px; overflow-y:auto; }
.dd-group-title{
  padding:7px 13px 4px;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--c-accent);
  background:rgba(215,185,60,.06);
  border-top:1px solid rgba(64,48,51,.6);
}
.dd-empty{ padding:20px; text-align:center; color:var(--c-dim); font-size:12px; }
.ccy-opt{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  padding:9px 13px;
  background:transparent;
  border:none;
  color:var(--c-text);
  font-family:var(--font-mono);
  font-size:13px;
  cursor:pointer;
  text-align:left;
  transition:background .12s;
}
.ccy-opt:hover{ background:rgba(233,73,104,.14); }
.ccy-opt .code{
  font-weight:700;
  color:var(--c-primary);
  min-width:46px;
  letter-spacing:1px;
  text-shadow:0 0 8px rgba(233,73,104,.3);
}
.ccy-opt .name{
  flex:1;
  color:var(--c-dim);
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ccy-opt .star{
  color:var(--c-line);
  font-size:13px;
  padding:0 4px;
  cursor:pointer;
  transition:color .15s, text-shadow .15s;
}
.ccy-opt .star:hover{ color:var(--c-accent); }
.ccy-opt .star.on{ color:var(--c-accent); text-shadow:0 0 8px rgba(215,185,60,.75); }

/* ================= trends page ================= */
.trend-controls{
  display:grid;
  grid-template-columns:1fr auto 1fr auto;
  gap:14px;
  align-items:end;
  margin-bottom:22px;
}
.pair-sep{
  font-family:var(--font-head);
  font-weight:700;
  font-size:26px;
  color:var(--c-line);
  text-align:center;
  padding-bottom:10px;
}
.range-group{ min-width:150px; }
.seg{
  display:flex;
  border:1px solid var(--c-line);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--c-bg);
}
.seg-btn{
  flex:1;
  background:transparent;
  border:none;
  color:var(--c-dim);
  font-family:var(--font-mono);
  font-size:12px;
  padding:9px 8px;
  cursor:pointer;
  letter-spacing:1px;
  transition:all .15s;
}
.seg-btn + .seg-btn{ border-left:1px solid var(--c-line); }
.seg-btn:hover{ color:var(--c-text); background:rgba(233,73,104,.08); }
.seg-btn.active{
  color:#131606;
  background:var(--c-cta);
  font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.2);
  box-shadow:inset 0 0 10px rgba(255,255,255,.15);
}

.chart-wrap{
  position:relative;
  height:340px;
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:var(--r);
  padding:14px;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.chart-wrap canvas{ filter:drop-shadow(0 0 14px rgba(233,73,104,.28)); }
.chart-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--c-dim);
  font-size:13px;
  letter-spacing:2px;
  z-index:2;
}

.trend-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:12px;
  margin-top:20px;
}
.stat{
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:var(--r);
  padding:12px 14px;
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.stat-label{
  display:block;
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--c-dim);
  margin-bottom:4px;
}
.stat-val{
  display:block;
  font-family:var(--font-head);
  font-weight:600;
  font-size:17px;
  word-break:break-all;
}
.stat-val.up{ color:var(--c-cta); text-shadow:0 0 10px rgba(195,246,81,.35); }
.stat-val.down{ color:var(--c-primary); text-shadow:0 0 10px rgba(233,73,104,.35); }
.stat-val.neutral{ color:var(--c-text); }

/* ================= responsive ================= */
@media (max-width: 880px){
  .container{ grid-template-columns:1fr; }
}
@media (max-width: 620px){
  .site-header{ flex-wrap:wrap; gap:10px; }
  .nav{ order:3; width:100%; }
  .nav a{ flex:1; text-align:center; }
  .pair-row{ grid-template-columns:1fr; align-items:stretch; }
  .swap-btn{
    width:100%;
    height:40px;
    transform:rotate(90deg);
    margin:0;
  }
  .swap-btn:hover{ transform:rotate(270deg); }
  .trend-controls{ grid-template-columns:1fr 1fr; }
  .pair-sep{ display:none; }
  .range-group{ grid-column:1 / -1; }
  .chart-wrap{ height:280px; }
  .quick-btns{ width:100%; }
  .amount-row{ flex-direction:column; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
  .ticker-track{ animation:none; }
}