:root {
  --bg: #07090d;
  --bg-soft: #0b0f15;
  --card: rgba(15, 20, 28, 0.88);
  --card-solid: #10151d;
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);

  --text: #f5f7fa;
  --muted: #8d97a5;
  --muted-2: #65707f;

  --accent: #20c997;
  --accent-dark: #12a879;

  --danger: #ff5d5d;

  --radius: 18px;
  --radius-small: 12px;

  --max-width: 1180px;
}


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


html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}


body {
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(32, 201, 151, 0.07),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 20%,
      rgba(46, 103, 255, 0.06),
      transparent 28%
    ),
    var(--bg);

  color: var(--text);

  font-family: "Inter", sans-serif;

  line-height: 1.6;

  overflow-x: hidden;
}


a {
  color: inherit;
  text-decoration: none;
}


button,
input,
select {
  font: inherit;
}


button,
select {
  cursor: pointer;
}


.ambient {
  position: fixed;
  width: 400px;
  height: 400px;

  border-radius: 50%;

  filter: blur(100px);

  opacity: 0.08;

  pointer-events: none;

  z-index: -1;
}


.ambient-one {
  background: #20c997;

  top: -180px;
  left: -180px;
}


.ambient-two {
  background: #306eff;

  right: -200px;
  top: 500px;
}


/* =========================
   NAVBAR
========================= */

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  width: min(var(--max-width), calc(100% - 40px));

  height: 76px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;
}


.logo {
  display: flex;

  align-items: center;

  gap: 10px;

  font-family: "Space Grotesk", sans-serif;

  font-weight: 700;

  font-size: 18px;

  letter-spacing: -0.5px;
}


.logo > div:last-child span {
  color: var(--accent);
}


.logo-icon {
  width: 34px;
  height: 34px;

  border-radius: 10px;

  display: grid;
  place-items: center;

  background: var(--accent);

  color: #06100c;

  font-size: 21px;

  font-weight: 800;
}


.main-nav {
  display: flex;

  align-items: center;

  gap: 30px;

  margin-left: auto;
}


.main-nav a {
  color: var(--muted);

  font-size: 13px;

  font-weight: 500;

  transition: 0.2s ease;
}


.main-nav a:hover {
  color: var(--text);
}


.header-actions {
  display: flex;

  align-items: center;

  gap: 8px;
}


.header-actions select {
  appearance: none;

  border: 1px solid var(--border);

  background: rgba(255, 255, 255, 0.04);

  color: var(--text);

  padding: 9px 11px;

  border-radius: 9px;

  outline: none;

  font-size: 12px;

  transition: 0.2s ease;
}


.header-actions select:hover {
  border-color: var(--border-hover);
}


.header-actions select option {
  background: #10151d;

  color: white;
}


/* =========================
   HERO
========================= */

.hero {
  width: min(var(--max-width), calc(100% - 40px));

  min-height: 650px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1.05fr 0.95fr;

  align-items: center;

  gap: 70px;

  padding: 70px 0;
}


.hero-content {
  max-width: 650px;
}


.status-pill {
  width: fit-content;

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 7px 12px;

  border: 1px solid rgba(32, 201, 151, 0.18);

  background: rgba(32, 201, 151, 0.06);

  border-radius: 999px;

  color: #b8c7c2;

  font-size: 11px;

  margin-bottom: 24px;
}


.status-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--accent);

  box-shadow: 0 0 12px rgba(32, 201, 151, 0.8);
}


.hero h1 {
  font-family: "Space Grotesk", sans-serif;

  font-size: clamp(48px, 6vw, 78px);

  line-height: 0.98;

  letter-spacing: -4px;

  margin-bottom: 28px;
}


.hero h1 .accent {
  color: var(--accent);
}


.hero-description {
  max-width: 570px;

  color: var(--muted);

  font-size: 16px;

  line-height: 1.8;

  margin-bottom: 34px;
}


.hero-buttons {
  display: flex;

  gap: 12px;

  margin-bottom: 45px;
}


.primary-button,
.secondary-button {
  min-height: 48px;

  padding: 0 20px;

  border-radius: 10px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  font-size: 13px;

  font-weight: 700;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}


.primary-button {
  background: var(--accent);

  color: #05110c;
}


.primary-button:hover {
  transform: translateY(-2px);

  background: #2cdaa6;
}


.secondary-button {
  border: 1px solid var(--border);

  background: rgba(255, 255, 255, 0.025);

  color: var(--text);
}


.secondary-button:hover {
  transform: translateY(-2px);

  border-color: var(--border-hover);

  background: rgba(255, 255, 255, 0.05);
}


.supported {
  display: flex;

  align-items: center;

  gap: 18px;

  color: var(--muted-2);

  font-size: 11px;
}


.currency-list {
  display: flex;

  gap: 7px;
}


.currency-list div {
  border: 1px solid var(--border);

  background: rgba(255, 255, 255, 0.025);

  padding: 6px 9px;

  border-radius: 7px;

  color: #aab2bd;
}


/* =========================
   MARKET PREVIEW
========================= */

.market-preview {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.015)
    );

  border: 1px solid var(--border);

  border-radius: 22px;

  padding: 24px;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.35),
    inset 0 1px rgba(255, 255, 255, 0.04);

  backdrop-filter: blur(15px);
}


.market-top {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 25px;
}


.small-label {
  display: block;

  color: var(--muted-2);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.5px;

  margin-bottom: 4px;
}


.market-top h3 {
  font-family: "Space Grotesk", sans-serif;

  font-size: 24px;
}


.market-status {
  display: flex;

  align-items: center;

  gap: 7px;

  color: var(--accent);

  font-size: 10px;

  font-weight: 700;
}


.market-status span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--accent);
}


.chart {
  height: 240px;

  position: relative;

  overflow: hidden;

  border-radius: 12px;

  background: rgba(0, 0, 0, 0.16);
}


.chart-grid {
  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.045) 1px,
      transparent 1px
    );

  background-size: 50px 45px;
}


.chart svg {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;
}


.chart-line {
  fill: none;

  stroke: var(--accent);

  stroke-width: 3;

  vector-effect: non-scaling-stroke;
}


.chart-area {
  fill: url(#chartFill);
}


.chart-times {
  display: flex;

  justify-content: space-between;

  margin: 13px 2px 22px;

  color: var(--muted-2);

  font-size: 10px;
}


.chart-times .active {
  color: var(--accent);

  font-weight: 700;
}


.market-price {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;
}


.market-price span {
  display: block;

  color: var(--muted-2);

  font-size: 10px;

  margin-bottom: 3px;
}


.market-price strong {
  font-family: "Space Grotesk", sans-serif;

  font-size: 19px;
}


/* =========================
   SECTIONS
========================= */

.section {
  width: min(var(--max-width), calc(100% - 40px));

  margin: 0 auto;

  padding: 100px 0;
}


.section-heading {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 35px;
}


.section-heading.center {
  display: block;

  text-align: center;

  max-width: 700px;

  margin-left: auto;

  margin-right: auto;
}


.eyebrow {
  display: block;

  color: var(--accent);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2px;

  margin-bottom: 10px;
}


.section-heading h2,
.buy-info h2 {
  font-family: "Space Grotesk", sans-serif;

  font-size: clamp(32px, 4vw, 46px);

  line-height: 1.08;

  letter-spacing: -1.8px;
}


.section-heading p {
  color: var(--muted);

  margin-top: 12px;
}


.updated {
  color: var(--muted-2);

  font-size: 11px;
}


/* =========================
   RATES
========================= */

.rate-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 13px;
}


.rate-card {
  padding: 22px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  background: rgba(255, 255, 255, 0.025);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}


.rate-card:hover {
  transform: translateY(-3px);

  border-color: var(--border-hover);
}


.coin {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 28px;
}


.coin-icon {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(32, 201, 151, 0.12);

  color: var(--accent);

  font-weight: 800;
}


.coin strong {
  display: block;

  font-size: 12px;
}


.coin span {
  display: block;

  color: var(--muted-2);

  font-size: 10px;
}


.rate {
  display: block;

  font-family: "Space Grotesk", sans-serif;

  font-size: 27px;

  letter-spacing: -1px;
}


.rate-label {
  color: var(--muted-2);

  font-size: 10px;
}


/* =========================
   BUY SECTION
========================= */

.buy-section {
  width: min(var(--max-width), calc(100% - 40px));

  margin: 0 auto;

  padding: 110px 0;

  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  align-items: center;

  gap: 100px;
}


.buy-info > p {
  color: var(--muted);

  max-width: 530px;

  margin: 25px 0 35px;

  line-height: 1.8;
}


.feature-list {
  display: grid;

  gap: 20px;
}


.feature {
  display: flex;

  gap: 13px;

  align-items: flex-start;
}


.feature-icon {
  width: 27px;
  height: 27px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background: rgba(32, 201, 151, 0.1);

  color: var(--accent);

  font-size: 12px;

  font-weight: 800;
}


.feature strong {
  display: block;

  font-size: 13px;

  margin-bottom: 2px;
}


.feature span {
  display: block;

  color: var(--muted-2);

  font-size: 11px;

  line-height: 1.5;
}


/* =========================
   CARD / CHECKOUT
========================= */

.card {
  border: 1px solid var(--border);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.015)
    );

  padding: 28px;

  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
}


.card-heading {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 25px;
}


.card-heading h3 {
  font-family: "Space Grotesk", sans-serif;

  font-size: 23px;
}


.secure-badge {
  display: flex;

  align-items: center;

  gap: 7px;

  color: var(--accent);

  font-size: 10px;
}


.secure-badge span:first-child {
  width: 6px;
  height: 6px;

  background: var(--accent);

  border-radius: 50%;
}


.field {
  margin-bottom: 17px;
}


.field label {
  display: block;

  color: #b7bec8;

  font-size: 11px;

  font-weight: 600;

  margin-bottom: 7px;
}


.field input,
.field select {
  width: 100%;

  height: 47px;

  border: 1px solid var(--border);

  border-radius: 10px;

  background: rgba(0, 0, 0, 0.22);

  color: var(--text);

  padding: 0 13px;

  outline: none;

  transition: 0.2s ease;
}


.field input::placeholder {
  color: #555e6a;
}


.field input:focus,
.field select:focus {
  border-color: rgba(32, 201, 151, 0.5);

  box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.06);
}


.field select option {
  background: #10151d;

  color: white;
}


.input-with-label {
  position: relative;
}


.input-with-label input {
  padding-right: 65px;
}


.input-with-label span {
  position: absolute;

  right: 13px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--accent);

  font-size: 10px;

  font-weight: 800;
}


.field small {
  display: block;

  color: var(--muted-2);

  font-size: 9px;

  margin-top: 5px;
}


/* =========================
   SUMMARY
========================= */

.summary {
  margin-top: 22px;

  padding: 16px;

  border: 1px solid var(--border);

  border-radius: 13px;

  background: rgba(0, 0, 0, 0.18);
}


.summary > div {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 15px;

  margin-bottom: 10px;
}


.summary span {
  color: var(--muted);

  font-size: 10px;
}


.summary strong {
  font-size: 11px;

  text-align: right;
}


.summary hr {
  border: 0;

  border-top: 1px solid var(--border);

  margin: 13px 0;
}


.summary .total {
  margin-bottom: 0;
}


.summary .total span {
  color: var(--text);

  font-weight: 600;
}


.summary .total strong {
  color: var(--accent);

  font-family: "Space Grotesk", sans-serif;

  font-size: 19px;
}


/* =========================
   BUTTON
========================= */

#continueBtn {
  width: 100%;

  height: 51px;

  margin-top: 17px;

  border: 0;

  border-radius: 10px;

  background: var(--accent);

  color: #05110c;

  font-weight: 800;

  font-size: 13px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  transition: 0.2s ease;
}


#continueBtn:hover {
  background: #2cdaa6;

  transform: translateY(-1px);
}


#continueBtn:active {
  transform: translateY(0);
}


#continueBtn.loading {
  opacity: 0.65;

  pointer-events: none;
}


.notice {
  color: var(--muted-2);

  font-size: 9px;

  line-height: 1.6;

  text-align: center;

  margin-top: 13px;
}


/* =========================
   STEPS
========================= */

.steps {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 13px;
}


.step {
  border: 1px solid var(--border);

  border-radius: var(--radius);

  background: rgba(255,255,255,0.025);

  padding: 25px;
}


.step-number {
  color: var(--accent);

  font-family: "Space Grotesk", sans-serif;

  font-size: 12px;

  font-weight: 700;

  margin-bottom: 35px;
}


.step h3 {
  font-size: 14px;

  margin-bottom: 8px;
}


.step p {
  color: var(--muted-2);

  font-size: 11px;

  line-height: 1.7;
}


/* =========================
   INFO
========================= */

.information-section {
  padding-top: 30px;
}


.info-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 13px;
}


.info-box {
  padding: 28px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  background: rgba(255,255,255,0.02);
}


.info-box h3 {
  font-family: "Space Grotesk", sans-serif;

  font-size: 19px;

  margin-bottom: 12px;
}


.info-box p {
  color: var(--muted-2);

  font-size: 11px;

  line-height: 1.8;
}


/* =========================
   FOOTER
========================= */

footer {
  border-top: 1px solid var(--border);

  margin-top: 70px;
}


.footer-main {
  width: min(var(--max-width), calc(100% - 40px));

  margin: 0 auto;

  padding: 65px 0;

  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1fr;

  gap: 50px;
}


.footer-brand p {
  color: var(--muted-2);

  font-size: 11px;

  max-width: 290px;

  margin-top: 15px;

  line-height: 1.7;
}


.footer-column {
  display: flex;

  flex-direction: column;

  gap: 10px;
}


.footer-column h4 {
  font-size: 11px;

  margin-bottom: 7px;
}


.footer-column a {
  color: var(--muted-2);

  font-size: 10px;

  transition: 0.2s ease;
}


.footer-column a:hover {
  color: var(--accent);
}


.footer-bottom {
  width: min(var(--max-width), calc(100% - 40px));

  margin: 0 auto;

  border-top: 1px solid var(--border);

  padding: 20px 0;

  display: flex;

  justify-content: space-between;

  color: var(--muted-2);

  font-size: 9px;
}


/* =========================
   COOKIE
========================= */

.cookie-banner {
  position: fixed;

  left: 20px;

  right: 20px;

  bottom: 20px;

  max-width: 780px;

  margin: auto;

  padding: 16px 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  border: 1px solid var(--border-hover);

  border-radius: 15px;

  background: rgba(12, 16, 22, 0.95);

  backdrop-filter: blur(20px);

  box-shadow: 0 20px 50px rgba(0,0,0,0.4);

  z-index: 1000;
}


.cookie-text {
  display: flex;

  align-items: center;

  gap: 12px;
}


.cookie-icon {
  font-size: 21px;
}


.cookie-text strong {
  display: block;

  font-size: 11px;

  margin-bottom: 2px;
}


.cookie-text p {
  color: var(--muted-2);

  font-size: 9px;

  line-height: 1.5;
}


.cookie-actions {
  display: flex;

  gap: 7px;
}


.cookie-actions button {
  border-radius: 8px;

  padding: 8px 13px;

  font-size: 10px;

  font-weight: 700;
}


.cookie-reject {
  border: 1px solid var(--border);

  background: transparent;

  color: var(--muted);
}


.cookie-accept {
  border: 0;

  background: var(--accent);

  color: #06100c;
}


/* =========================
   MESSAGE
========================= */

.message {
  position: fixed;

  top: 90px;

  right: 20px;

  max-width: 330px;

  padding: 13px 16px;

  border: 1px solid var(--border);

  border-radius: 10px;

  background: #111720;

  color: white;

  font-size: 11px;

  box-shadow: 0 15px 40px rgba(0,0,0,0.35);

  transform: translateX(130%);

  opacity: 0;

  transition: 0.3s ease;

  z-index: 1100;
}


.message.show {
  transform: translateX(0);

  opacity: 1;
}


.message.error {
  border-color: rgba(255, 93, 93, 0.35);
}


.message.success {
  border-color: rgba(32, 201, 151, 0.35);
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1000px) {

  .hero {
    grid-template-columns: 1fr;

    gap: 50px;
  }


  .hero-content {
    max-width: 800px;
  }


  .market-preview {
    max-width: 650px;
  }


  .rate-grid {
    grid-template-columns: repeat(2, 1fr);
  }


  .buy-section {
    grid-template-columns: 1fr;

    gap: 50px;
  }


  .buy-info {
    max-width: 700px;
  }


  .steps {
    grid-template-columns: repeat(2, 1fr);
  }


  .info-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 760px) {

  .navbar {
    height: auto;

    padding: 18px 0;

    flex-wrap: wrap;
  }


  .main-nav {
    order: 3;

    width: 100%;

    overflow-x: auto;

    justify-content: flex-start;

    padding-bottom: 4px;

    gap: 22px;
  }


  .header-actions {
    margin-left: auto;
  }


  .hero {
    padding-top: 50px;
  }


  .hero h1 {
    font-size: clamp(44px, 13vw, 65px);

    letter-spacing: -3px;
  }


  .supported {
    align-items: flex-start;

    flex-direction: column;

    gap: 10px;
  }


  .currency-list {
    flex-wrap: wrap;
  }


  .section,
  .buy-section,
  .hero {
    width: min(100% - 28px, var(--max-width));
  }


  .section-heading {
    display: block;
  }


  .updated {
    display: block;

    margin-top: 12px;
  }


  .footer-main {
    grid-template-columns: 1fr 1fr;

    gap: 35px;
  }


  .footer-brand {
    grid-column: 1 / -1;
  }

}


@media (max-width: 520px) {

  .hero {
    padding: 35px 0 70px;
  }


  .hero-buttons {
    flex-direction: column;

    align-items: stretch;
  }


  .primary-button,
  .secondary-button {
    width: 100%;
  }


  .market-preview,
  .card {
    padding: 20px;
  }


  .rate-grid {
    grid-template-columns: 1fr;
  }


  .steps {
    grid-template-columns: 1fr;
  }


  .footer-main {
    grid-template-columns: 1fr;
  }


  .footer-brand {
    grid-column: auto;
  }


  .footer-bottom {
    flex-direction: column;

    gap: 7px;
  }


  .cookie-banner {
    left: 10px;

    right: 10px;

    bottom: 10px;

    flex-direction: column;

    align-items: stretch;
  }


  .cookie-actions {
    width: 100%;
  }


  .cookie-actions button {
    flex: 1;
  }

}

/* =========================================================
   KŌIN POLISH — GLOW / FLAGS / NETWORK CARDS
========================================================= */
:root{--glow:rgba(32,201,151,.34);--glow-strong:rgba(32,201,151,.62)}
html{scroll-behavior:smooth}
body{background:radial-gradient(circle at 15% 8%,rgba(32,201,151,.075),transparent 28%),radial-gradient(circle at 85% 22%,rgba(67,126,255,.07),transparent 30%),#070b10}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 75%);z-index:-1}
.primary-button,#continueBtn,.cookie-accept,.admin-primary,.action-primary,.success-button{box-shadow:0 0 0 1px rgba(32,201,151,.18),0 0 22px var(--glow),inset 0 1px rgba(255,255,255,.22);position:relative;overflow:hidden}
.primary-button:before,#continueBtn:before,.cookie-accept:before,.admin-primary:before,.action-primary:before,.success-button:before{content:"";position:absolute;top:-100%;left:-35%;width:35%;height:300%;transform:rotate(22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transition:left .55s ease}
.primary-button:hover:before,#continueBtn:hover:before,.cookie-accept:hover:before,.admin-primary:hover:before,.action-primary:hover:before,.success-button:hover:before{left:115%}
.primary-button:hover,#continueBtn:hover,.cookie-accept:hover,.admin-primary:hover,.action-primary:hover,.success-button:hover{box-shadow:0 0 0 1px rgba(32,201,151,.28),0 0 34px var(--glow-strong),inset 0 1px rgba(255,255,255,.25);transform:translateY(-2px)}
.secondary-button,.outline-button,.header-actions select{box-shadow:0 0 18px rgba(255,255,255,.025)}
.header-actions select{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);border-radius:9px;color:#eaf2f1;padding:8px 10px}
.flag-img{width:20px;height:14px;object-fit:cover;border-radius:3px;vertical-align:-2px;box-shadow:0 2px 7px rgba(0,0,0,.35);margin-right:5px}
.coin span{display:flex;align-items:center;gap:2px}.currency-list div{display:flex;align-items:center}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.network-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.network-card{min-height:122px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));color:var(--text);padding:13px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:.22s ease;position:relative;overflow:hidden}
.network-card img{width:27px;height:27px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255,255,255,.13))}.network-card span{font-size:11px;font-weight:800}.network-card small{font-size:8px;color:var(--muted-2);text-align:center;line-height:1.2}.network-card b{font-size:8px;color:var(--accent);font-weight:800}
.network-card:hover{transform:translateY(-3px);border-color:rgba(32,201,151,.35);box-shadow:0 0 22px rgba(32,201,151,.10)}
.network-card.active{border-color:rgba(32,201,151,.72);background:linear-gradient(145deg,rgba(32,201,151,.14),rgba(255,255,255,.025));box-shadow:0 0 25px rgba(32,201,151,.18),inset 0 0 24px rgba(32,201,151,.04)}
.network-card.active:after{content:"✓";position:absolute;top:7px;right:8px;color:var(--accent);font-size:10px;font-weight:900}
.card,.market-preview,.rate-card,.info-box{box-shadow:0 28px 80px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.035)}
.rate-card:hover,.info-box:hover{box-shadow:0 20px 55px rgba(0,0,0,.32),0 0 25px rgba(32,201,151,.06),inset 0 1px rgba(255,255,255,.04)}
@media(max-width:900px){.network-picker{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.network-picker{grid-template-columns:repeat(2,1fr)}.network-card{min-height:110px}.hero-buttons{flex-wrap:wrap}.supported{align-items:flex-start;flex-direction:column;gap:9px}}

/* =========================================================
   KŌIN POLISH LAYER — premium buttons, homepage atmosphere,
   order center and responsive controls
========================================================= */
:root{
  --glow: rgba(32,201,151,.28);
  --glow-blue: rgba(73,125,255,.22);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;
  background:
    radial-gradient(ellipse 700px 430px at 8% 8%,rgba(32,201,151,.10),transparent 68%),
    radial-gradient(ellipse 620px 500px at 92% 24%,rgba(67,106,255,.09),transparent 68%),
    radial-gradient(ellipse 700px 500px at 50% 92%,rgba(18,168,121,.055),transparent 72%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:55px 55px;mask-image:linear-gradient(to bottom,black,transparent 85%);
}
.navbar{position:relative;z-index:20}
.logo-icon{box-shadow:0 0 0 1px rgba(32,201,151,.18),0 0 22px rgba(32,201,151,.18);}
.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.header-actions select,.header-order-btn{
  min-height:38px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(15,20,28,.88);color:#eaf0f5;padding:0 12px;transition:.22s ease;
}
.header-actions select:hover,.header-order-btn:hover{border-color:rgba(32,201,151,.45);box-shadow:0 0 18px rgba(32,201,151,.12);transform:translateY(-1px)}
.header-order-btn{font-weight:800;color:#dffbf3;background:linear-gradient(135deg,rgba(32,201,151,.14),rgba(32,201,151,.05));}
.primary-button,.secondary-button,#continueBtn,.have-paid,.admin-btn,.mini,.cookie-actions button,.pay-card,.network-card,.header-order-btn{
  position:relative;overflow:hidden;isolation:isolate;
}
.primary-button::after,.secondary-button::after,#continueBtn::after,.have-paid::after,.admin-btn::after,.mini::after,.cookie-actions button::after,.pay-card::after,.network-card::after,.header-order-btn::after{
  content:"";position:absolute;top:-120%;left:-55%;width:35%;height:320%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.17),transparent);transition:transform .65s ease;z-index:-1;
}
.primary-button:hover::after,.secondary-button:hover::after,#continueBtn:hover::after,.have-paid:hover::after,.admin-btn:hover::after,.mini:hover::after,.cookie-actions button:hover::after,.pay-card:hover::after,.network-card:hover::after,.header-order-btn:hover::after{transform:translateX(390%) rotate(25deg)}
.primary-button,.secondary-button,#continueBtn,.have-paid{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,filter .22s ease}
.primary-button:hover,#continueBtn:hover,.have-paid:hover{transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 10px 34px rgba(32,201,151,.20),0 0 22px rgba(32,201,151,.12)}
.secondary-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(70,110,255,.13),0 0 18px rgba(255,255,255,.04)}
#continueBtn,.have-paid{box-shadow:0 0 25px rgba(32,201,151,.11)}
.network-card{transition:.22s ease!important}
.network-card:hover{transform:translateY(-3px)!important;border-color:rgba(32,201,151,.30)!important;box-shadow:0 12px 30px rgba(0,0,0,.24),0 0 20px rgba(32,201,151,.08)}
.network-card.active{box-shadow:0 0 0 1px rgba(32,201,151,.35),0 0 28px rgba(32,201,151,.13)!important}
.market-preview,.card,.rate-card,.info-box,.step{box-shadow:0 18px 55px rgba(0,0,0,.16)}
.hero{position:relative}
.hero::before{content:"";position:absolute;width:560px;height:560px;left:-250px;top:-180px;background:radial-gradient(circle,rgba(32,201,151,.075),transparent 67%);pointer-events:none;filter:blur(10px)}
.hero-content,.market-preview{position:relative;z-index:1}
.track-home-btn{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.025);}
.order-center{display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:22px}
.order-center.show{display:flex}
.order-center-backdrop{position:absolute;inset:0;background:rgba(2,4,7,.72);backdrop-filter:blur(12px)}
.order-center-panel{position:relative;width:min(650px,100%);max-height:min(760px,90vh);overflow:auto;padding:30px;border:1px solid rgba(255,255,255,.11);border-radius:24px;background:linear-gradient(145deg,rgba(17,23,32,.98),rgba(9,13,19,.98));box-shadow:0 30px 100px rgba(0,0,0,.55),0 0 45px rgba(32,201,151,.08)}
.modal-close{position:absolute;right:17px;top:15px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:#fff;font-size:23px;line-height:1;cursor:pointer;transition:.2s}
.modal-close:hover{transform:rotate(90deg);border-color:rgba(255,93,93,.5);box-shadow:0 0 20px rgba(255,93,93,.12)}
.modal-subtitle{color:var(--muted);font-size:13px;margin:8px 0 20px}
.track-form{display:flex;gap:10px;margin-bottom:22px}
.track-form input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:#0b1017;color:#fff;padding:13px 14px;outline:none}
.track-form input:focus{border-color:rgba(32,201,151,.45);box-shadow:0 0 20px rgba(32,201,151,.08)}
.modal-track{border:0;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.order-history{display:grid;gap:10px}
.history-empty{padding:22px;border:1px dashed rgba(255,255,255,.11);border-radius:15px;color:var(--muted);text-align:center}
.history-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.025)}
.history-item strong{display:block;font-size:13px}.history-item span{display:block;color:var(--muted);font-size:11px;margin-top:3px}.history-item .history-open{display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border-radius:10px;border:1px solid rgba(32,201,151,.22);background:rgba(32,201,151,.08);color:#79e8c5;font-weight:800;font-size:11px;transition:.2s}
.history-open:hover{box-shadow:0 0 20px rgba(32,201,151,.13);transform:translateY(-1px)}
@media(max-width:720px){.navbar{height:auto;padding:15px 0;align-items:flex-start}.main-nav{display:none}.header-actions{justify-content:flex-end}.header-order-btn{display:none}.track-form{flex-direction:column}.modal-track{width:100%}.hero-buttons{flex-wrap:wrap}.hero-buttons>*{min-width:145px}.order-center-panel{padding:24px 18px}.history-item{align-items:flex-start;flex-direction:column}.history-open{width:100%}}


/* ===== KOIN VISUAL BACKDROP / BUTTON SYSTEM ===== */
body{position:relative;background:#05070b;isolation:isolate;}
body::before{content:"";position:fixed;inset:0;z-index:-5;pointer-events:none;background:radial-gradient(900px 520px at 8% 0%,rgba(34,197,153,.14),transparent 62%),radial-gradient(850px 560px at 92% 18%,rgba(58,105,255,.13),transparent 62%),radial-gradient(700px 500px at 50% 100%,rgba(21,117,255,.07),transparent 65%),linear-gradient(180deg,#070a10 0%,#05070b 46%,#07090d 100%);}
body::after{content:"";position:fixed;inset:0;z-index:-4;pointer-events:none;opacity:.34;background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(to bottom,black,transparent 92%);}
.site-backdrop{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden;}
.backdrop-grid{position:absolute;inset:0;background:linear-gradient(135deg,transparent 0 30%,rgba(32,201,151,.018) 50%,transparent 70%);}
.backdrop-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.26;animation:floatOrb 12s ease-in-out infinite alternate;}
.orb-a{width:420px;height:420px;left:-160px;top:180px;background:rgba(32,201,151,.18);}
.orb-b{width:500px;height:500px;right:-210px;top:620px;background:rgba(66,95,255,.15);animation-delay:-5s;}
.backdrop-glow{position:absolute;width:2px;height:2px;border-radius:50%;box-shadow:0 0 120px 80px rgba(32,201,151,.08);}
.glow-a{left:25%;top:18%;}.glow-b{right:20%;top:55%;box-shadow:0 0 120px 80px rgba(70,100,255,.07);}
@keyframes floatOrb{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(35px,-20px,0) scale(1.08)}}
.primary-button,.secondary-button,.header-order-btn,.have-paid,.order-actions a,.pay-card,.network-card,.cookie-accept,.cookie-reject,button.admin-btn,button.mini{position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;}
.primary-button,.have-paid,.header-order-btn{box-shadow:0 0 0 1px rgba(32,201,151,.2),0 10px 30px rgba(32,201,151,.13),inset 0 1px rgba(255,255,255,.2);}
.primary-button::before,.have-paid::before,.header-order-btn::before,.admin-btn.primary::before,.mini.primary::before{content:"";position:absolute;top:-120%;left:-40%;width:28%;height:340%;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);transition:left .65s ease;pointer-events:none;}
.primary-button:hover::before,.have-paid:hover::before,.header-order-btn:hover::before,.admin-btn.primary:hover::before,.mini.primary:hover::before{left:125%;}
.primary-button:hover,.have-paid:hover,.header-order-btn:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(32,201,151,.35),0 14px 42px rgba(32,201,151,.22),0 0 28px rgba(32,201,151,.12),inset 0 1px rgba(255,255,255,.28);}
.secondary-button:hover,.order-actions a:hover,.network-card:hover,.pay-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.28),0 0 20px rgba(32,201,151,.08);}
button{appearance:none;}
.network-logo{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;color:#ef3d59;background:rgba(239,61,89,.08);border:1px solid rgba(239,61,89,.18);box-shadow:0 0 16px rgba(239,61,89,.08);}
.network-logo svg{width:23px;height:23px;display:block;}
.network-card img{width:28px;height:28px;object-fit:contain;}
.network-card .network-logo + span{margin-top:0;}
.flag-img{width:22px;height:15px;object-fit:cover;border-radius:3px;box-shadow:0 1px 7px rgba(0,0,0,.35);vertical-align:middle;}
.logo-icon{font-size:15px;letter-spacing:-1px;}

/* Homepage atmosphere */
main{position:relative;z-index:0;}
.hero{position:relative;}
.hero::before{content:"";position:absolute;inset:7% -6% 0 -6%;z-index:-1;border-radius:44px;background:radial-gradient(circle at 18% 35%,rgba(32,201,151,.08),transparent 34%),radial-gradient(circle at 82% 35%,rgba(71,105,255,.08),transparent 38%);filter:blur(2px);}
.section,.buy-section{position:relative;}
.section::before,.buy-section::before{content:"";position:absolute;left:50%;top:0;width:min(1000px,90%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(32,201,151,.18),transparent);}

/* Final visual polish */
body{background-color:#05070a!important;background-image:radial-gradient(circle at 12% 8%,rgba(32,201,151,.13),transparent 30%),radial-gradient(circle at 88% 18%,rgba(61,111,255,.10),transparent 28%),radial-gradient(circle at 50% 100%,rgba(32,201,151,.06),transparent 35%),linear-gradient(180deg,#070a0f 0%,#05070a 100%)!important;background-attachment:fixed!important;}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(115deg,transparent 0 38%,rgba(255,255,255,.018) 45%,transparent 52%);mix-blend-mode:screen}
.network-logo.tron-logo{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;border-radius:12px!important;background:rgba(255,255,255,.055)!important;overflow:hidden!important}
.network-logo.tron-logo svg{width:28px!important;height:28px!important;display:block!important}
.primary-button,.secondary-button,#continueBtn,.cookie-accept,.admin-btn,.mini,.pay-card,.network-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important}
.primary-button:hover,#continueBtn:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(32,201,151,.18)}

/* =========================================================
   コイン — visual background / mobile / tablet polish
   ========================================================= */
body{overflow-x:hidden}
.coin-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;opacity:.72}
.coin-bg:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,rgba(8,14,24,.05),rgba(2,4,8,.45) 70%)}
.cb{position:absolute;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;font:700 30px "Space Grotesk",sans-serif;color:rgba(185,215,255,.10);border:1px solid rgba(120,165,255,.10);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.08),rgba(40,90,170,.025) 55%,transparent 72%);box-shadow:inset 0 0 24px rgba(70,120,255,.035),0 0 45px rgba(40,95,210,.025);filter:blur(.1px)}
.c1{left:5%;top:17%;transform:rotate(-12deg) scale(1.1)}.c2{left:22%;top:8%;transform:rotate(15deg) scale(.72)}.c3{left:42%;top:22%;transform:rotate(-8deg) scale(.62)}.c4{right:7%;top:11%;transform:rotate(13deg) scale(1.18)}.c5{right:20%;top:37%;transform:rotate(-16deg) scale(.66)}.c6{left:8%;top:55%;transform:rotate(20deg) scale(.75)}.c7{left:31%;top:72%;transform:rotate(-14deg) scale(1.05)}.c8{right:6%;top:62%;transform:rotate(12deg) scale(.78)}.c9{left:48%;top:86%;transform:rotate(-20deg) scale(.62)}.c10{left:69%;top:73%;transform:rotate(10deg) scale(.96)}.c11{right:31%;top:12%;transform:rotate(-12deg) scale(.55)}.c12{left:2%;top:86%;transform:rotate(18deg) scale(.55)}
.coin-bg .c1,.coin-bg .c5,.coin-bg .c10{color:rgba(247,183,68,.13);border-color:rgba(247,183,68,.10);box-shadow:0 0 40px rgba(247,183,68,.035)}
.coin-bg .c3,.coin-bg .c8{color:rgba(50,210,177,.12);border-color:rgba(50,210,177,.09);box-shadow:0 0 40px rgba(50,210,177,.035)}
.coin-bg .c2,.coin-bg .c7,.coin-bg .c12{color:rgba(115,153,255,.13);border-color:rgba(115,153,255,.10)}
.coin-bg .c4,.coin-bg .c6,.coin-bg .c9,.coin-bg .c11{color:rgba(190,210,235,.085);border-color:rgba(190,210,235,.08)}

.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{width:min(440px,100%);padding:32px;border:1px solid rgba(255,255,255,.10);border-radius:24px;background:linear-gradient(145deg,rgba(15,21,30,.94),rgba(6,10,15,.96));box-shadow:0 30px 100px rgba(0,0,0,.55),0 0 70px rgba(54,106,255,.07);backdrop-filter:blur(18px)}
.auth-card .logo{display:inline-flex;margin-bottom:35px}.auth-card h1{margin:8px 0 8px;font-size:34px}.auth-card>p{color:var(--muted);line-height:1.6;margin:0 0 25px}.auth-card form{display:grid;gap:15px}.auth-card label{display:grid;gap:7px;color:#aeb9c4;font-size:11px;font-weight:700}.auth-card input{height:48px;width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:#080d14;color:#fff;padding:0 14px;outline:none}.auth-card input:focus{border-color:rgba(32,201,151,.55);box-shadow:0 0 0 3px rgba(32,201,151,.08)}.auth-card .primary-button{width:100%;justify-content:space-between}.auth-error{min-height:17px;color:#ff8b8b;font-size:11px}.auth-home{margin-top:12px;width:100%;box-sizing:border-box;justify-content:center}

/* responsive navigation and grids */
@media(max-width:980px){.navbar{padding:14px 20px}.main-nav{gap:16px}.header-actions{gap:7px}.hero{grid-template-columns:1fr;gap:35px}.market-preview{width:min(620px,100%);justify-self:center}.rate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.buy-grid{grid-template-columns:1fr}.info-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.navbar{position:relative;flex-wrap:wrap;gap:12px}.main-nav{order:3;width:100%;overflow-x:auto;justify-content:flex-start;padding-bottom:3px}.main-nav a{white-space:nowrap}.header-actions{margin-left:auto}.hero,.section,.buy-section{padding-left:18px;padding-right:18px}.hero{padding-top:50px}.hero h1{font-size:clamp(42px,11vw,70px);line-height:.96}.hero-description{font-size:14px}.hero-buttons{flex-direction:column;align-items:stretch}.hero-buttons a,.hero-buttons button{width:100%;justify-content:center;box-sizing:border-box}.rate-grid{grid-template-columns:1fr}.info-grid{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-direction:column;gap:8px}.coin-bg{opacity:.5}.cb{width:58px;height:58px;font-size:23px}.c4,.c5,.c10,.c11{display:none}}
@media(max-width:520px){.navbar{padding:12px 14px}.logo-icon{width:34px;height:34px}.main-nav{gap:13px;font-size:11px}.header-actions{width:100%;margin-left:0}.header-actions select,.header-order-btn{flex:1;min-width:0}.market-preview{padding:16px}.chart{height:145px}.section-heading h2{font-size:27px}.buy-section{padding-top:55px}.network-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pay-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.order-layout,.status-layout{grid-template-columns:1fr!important}.order-summary,.status-summary{position:static!important}.auth-card{padding:25px 20px}.auth-card h1{font-size:29px}.admin{width:calc(100% - 18px)!important}.admin-top h1{font-size:28px}.stats{grid-template-columns:1fr 1fr!important}.detail-grid{grid-template-columns:1fr!important}.toolbar{align-items:stretch}.toolbar select,.toolbar button{width:100%}.admin-table{min-width:780px}}

/* FINAL KOIN VISUAL / RESPONSIVE PASS */
body{background:#05080d;overflow-x:hidden}
body:before{content:"";position:fixed;inset:-15%;z-index:-3;pointer-events:none;background:radial-gradient(circle at 15% 15%,rgba(39,105,255,.15),transparent 28%),radial-gradient(circle at 85% 20%,rgba(32,201,151,.11),transparent 25%),radial-gradient(circle at 50% 85%,rgba(145,82,255,.10),transparent 30%),linear-gradient(135deg,#05080d,#090d14 48%,#05080d)}
.coin-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;opacity:.75;filter:blur(.1px)}
.coin-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 25%,rgba(5,8,13,.32) 72%,rgba(5,8,13,.82));}
.cb{position:absolute;display:grid;place-items:center;width:62px;height:62px;border-radius:18px;font:800 27px/1 "Arial",sans-serif;color:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.10);background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018));box-shadow:0 15px 50px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08);transform:rotate(-12deg);animation:coinFloat 15s ease-in-out infinite alternate}
.cb.c1{left:4%;top:17%;}.cb.c2{left:16%;top:72%;animation-delay:-4s}.cb.c3{left:28%;top:12%;animation-delay:-8s}.cb.c4{left:42%;top:80%;animation-delay:-2s}.cb.c5{left:56%;top:20%;animation-delay:-10s}.cb.c6{left:70%;top:70%;animation-delay:-6s}.cb.c7{left:82%;top:14%;animation-delay:-12s}.cb.c8{left:91%;top:52%;animation-delay:-3s}.cb.c9{left:9%;top:47%;animation-delay:-9s}.cb.c10{left:34%;top:42%;animation-delay:-1s}.cb.c11{left:63%;top:48%;animation-delay:-7s}.cb.c12{left:76%;top:88%;animation-delay:-5s}
@keyframes coinFloat{from{translate:0 0;rotate:-12deg}to{translate:0 -22px;rotate:9deg}}
@media(max-width:900px){.cb{width:50px;height:50px;font-size:22px;border-radius:15px}.cb.c5,.cb.c10,.cb.c11{display:none}}
@media(max-width:600px){.coin-bg{opacity:.55}.cb{width:42px;height:42px;font-size:18px}.cb.c2,.cb.c4,.cb.c6,.cb.c8,.cb.c10,.cb.c12{display:none}body:before{background:radial-gradient(circle at 10% 15%,rgba(39,105,255,.14),transparent 34%),radial-gradient(circle at 90% 80%,rgba(145,82,255,.09),transparent 32%),#05080d}}
@media(max-width:480px){.navbar{padding-left:14px!important;padding-right:14px!important}.logo-icon{width:38px!important;height:38px!important}.primary-button,.secondary-button{min-height:42px}.network-card{min-width:0!important}.payment-grid{grid-template-columns:1fr!important}.form-grid{grid-template-columns:1fr!important}.hero-grid,.buy-grid,.checkout-grid{grid-template-columns:1fr!important}.site-backdrop{opacity:.65}}

/* =========================================================
   FINAL MOBILE FIX — centered, fixed-width, no side overflow
========================================================= */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

img, svg, video, iframe, canvas {
  max-width: 100%;
}

@media (max-width: 760px) {
  .navbar,
  .hero,
  .section,
  .buy-section,
  .footer-main,
  .footer-bottom {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .navbar {
    min-width: 0 !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 13px !important;
  }

  .navbar > .logo {
    align-self: center;
  }

  .navbar > nav,
  .navbar > .main-nav {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 9px 18px !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .navbar > nav a,
  .navbar > .main-nav a {
    white-space: nowrap !important;
    font-size: 11px !important;
  }

  .header-actions {
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .header-actions select,
  .header-actions .header-order-btn {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    max-width: 190px !important;
  }

  .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 32px !important;
    min-height: auto !important;
    padding: 45px 16px 70px !important;
    text-align: center !important;
  }

  .hero-content,
  .market-preview,
  .buy-info,
  .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .hero h1 {
    width: 100% !important;
    font-size: clamp(39px, 12vw, 58px) !important;
    line-height: .98 !important;
    letter-spacing: -2.5px !important;
    overflow-wrap: anywhere;
  }

  .hero-description {
    width: 100% !important;
    max-width: 560px !important;
    font-size: 14px !important;
  }

  .hero-buttons,
  .supported,
  .currency-list {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-buttons {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .hero-buttons a,
  .hero-buttons button,
  .primary-button,
  .secondary-button {
    width: 100% !important;
    max-width: 420px !important;
  }

  .supported {
    flex-direction: column !important;
    gap: 9px !important;
  }

  .currency-list {
    flex-wrap: wrap !important;
  }

  .market-preview {
    padding: 16px !important;
    overflow: hidden !important;
  }

  .chart {
    width: 100% !important;
    max-width: 100% !important;
    height: 155px !important;
  }

  .section,
  .buy-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .section-heading {
    width: 100% !important;
    text-align: center !important;
    align-items: center !important;
  }

  .rate-grid,
  .steps,
  .info-grid,
  .footer-main,
  .network-picker,
  .network-grid,
  .pay-grid,
  .payment-grid,
  .form-grid,
  .form-row,
  .hero-grid,
  .buy-grid,
  .checkout-grid,
  .order-layout,
  .status-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
  }

  .rate-card,
  .step,
  .info-box,
  .card,
  .buy-info {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .buy-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
    padding-top: 60px !important;
  }

  .buy-info {
    text-align: center !important;
  }

  .feature {
    text-align: left !important;
  }

  .card {
    padding: 18px !important;
    overflow: hidden !important;
  }

  .network-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .network-card {
    min-width: 0 !important;
    width: 100% !important;
  }

  .summary > div {
    min-width: 0 !important;
  }

  .summary strong {
    overflow-wrap: anywhere;
  }

  .footer-main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .footer-bottom {
    padding-left: 16px !important;
    padding-right: 16px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 7px !important;
  }

  .cookie-banner {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 420px) {
  .navbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .navbar > nav,
  .navbar > .main-nav {
    gap: 7px 13px !important;
  }

  .navbar > nav a,
  .navbar > .main-nav a {
    font-size: 10px !important;
  }

  .header-actions select,
  .header-actions .header-order-btn {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 10px !important;
  }

  .hero,
  .section,
  .buy-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .hero h1 {
    font-size: clamp(36px, 12vw, 52px) !important;
  }

  .market-price {
    gap: 10px !important;
  }

  .card {
    padding: 15px !important;
  }
}

/* ICON RELIABILITY — all network/payment icons render inline without external image dependencies */
.network-logo{flex:0 0 auto}
.network-logo svg{width:28px;height:28px;display:block}
.bnb-logo{color:#f3ba2f;background:rgba(243,186,47,.08);border-color:rgba(243,186,47,.18)}
.eth-logo{color:#8f9cff;background:rgba(98,126,234,.08);border-color:rgba(98,126,234,.18)}
.polygon-logo{color:#8247e5;background:rgba(130,71,229,.08);border-color:rgba(130,71,229,.18)}
.solana-logo{color:#7ef2c5;background:rgba(92,255,190,.08);border-color:rgba(92,255,190,.18)}
.pay-card{min-width:0}
.pay-icon{width:64px;height:64px;display:grid;place-items:center;flex:0 0 auto;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.pay-icon svg{width:54px;height:54px;display:block}
.pay-icon .brand-img{width:54px;height:54px;display:block;object-fit:contain}
.pay-icon .mpesa-img{width:58px;height:50px}
@media(max-width:480px){.pay-card{min-height:118px;padding:12px 8px}.pay-icon{width:64px;height:64px}.pay-icon svg{width:54px;height:54px}.pay-icon .brand-img{width:54px;height:54px}.pay-icon .mpesa-img{width:58px;height:50px}}


/* PAYMENT BRAND POLISH */
.pay-card{position:relative;min-height:116px;padding:12px 10px;overflow:hidden}
.pay-card .pay-icon{width:68px;height:68px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;padding:9px;box-sizing:border-box;box-shadow:0 8px 22px rgba(0,0,0,.14)}
.pay-card .pay-icon svg,.pay-card .pay-icon img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pay-card .brand-img{width:54px!important;height:54px!important;object-fit:contain!important}
.pay-card .standardbank-img{width:60px!important;height:48px!important}
.chart-cycle-note{display:flex;align-items:center;gap:7px;margin-top:10px;color:var(--muted-2);font-size:9px;text-transform:uppercase;letter-spacing:1px}
.chart-cycle-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(32,201,151,.7)}
.nav-p2p,.p2p-home-btn{border-color:rgba(32,201,151,.28)!important;color:#a7f4dc!important}

/* KOIN mobile CTA polish */
@media(max-width:600px){.hero-buttons{flex-direction:column!important;width:100%!important}.hero-buttons .primary-button,.hero-buttons .secondary-button{width:100%!important;display:flex!important;min-height:48px!important;box-sizing:border-box}.hero-buttons a{box-sizing:border-box}.hero-buttons .secondary-button{border:1px solid var(--border)!important;background:rgba(255,255,255,.045)!important;box-shadow:0 8px 24px rgba(0,0,0,.16)!important}.hero-buttons .primary-button{box-shadow:0 10px 28px rgba(32,201,151,.14)!important}}

/* KOIN — mobile action row polish */
@media (max-width: 600px){
  .hero-buttons{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    margin-top:22px!important;
  }
  .hero-buttons > a,
  .hero-buttons > button{
    width:100%!important;
    min-width:0!important;
    min-height:52px!important;
    padding:0 12px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:normal!important;
    border-radius:12px!important;
    font-size:12px!important;
    font-weight:700!important;
    line-height:1.15!important;
    text-decoration:none!important;
    overflow:hidden!important;
  }
  .hero-buttons .primary-button{
    background:var(--accent)!important;
    color:#05110c!important;
    border:1px solid transparent!important;
    box-shadow:0 10px 28px rgba(32,201,151,.14)!important;
  }
  .hero-buttons .secondary-button,
  .hero-buttons a:not(.primary-button){
    background:rgba(255,255,255,.045)!important;
    color:var(--text)!important;
    border:1px solid var(--border)!important;
    box-shadow:0 8px 24px rgba(0,0,0,.16)!important;
  }
}
@media (max-width: 420px){
  .hero-buttons{grid-template-columns:1fr!important;}
}

/* Welcome onboarding */
.welcome-overlay{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(3,7,11,.78);backdrop-filter:blur(12px)}
.welcome-overlay.show{display:flex}.welcome-card{width:min(520px,100%);background:linear-gradient(145deg,#111923,#0b1118);border:1px solid #2a3744;border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.5);padding:28px}.welcome-kicker{font-size:10px;letter-spacing:1.7px;color:#20c997;font-weight:900}.welcome-card h2{font:700 30px "Space Grotesk",sans-serif;margin:9px 0 7px}.welcome-card>p{color:#81909e;font-size:12px;line-height:1.6;margin:0 0 22px}.welcome-step h3{font:700 19px "Space Grotesk",sans-serif;margin:8px 0 15px}.welcome-count{font-size:10px;color:#667684;font-weight:800}.welcome-options{display:grid;gap:10px}.welcome-options button{min-height:54px;border:1px solid #2b3946;border-radius:12px;background:#151f29;color:#eaf0f4;font-weight:800;font-size:12px;cursor:pointer;text-align:left;padding:0 16px;transition:.18s}.welcome-options button:hover,.welcome-options button:active{border-color:#20c997;background:rgba(32,201,151,.1);transform:translateY(-1px)}.welcome-footer{display:flex;align-items:center;justify-content:space-between;margin-top:20px}.welcome-skip{border:0;background:none;color:#657583;font-size:11px;cursor:pointer}.welcome-dots{font-size:11px;letter-spacing:4px;color:#20c997}
@media(max-width:520px){.welcome-card{padding:22px;border-radius:18px}.welcome-card h2{font-size:25px}.welcome-options button{min-height:58px}}

/* Live platform notices */
.platform-notice{position:fixed;left:50%;top:50%;right:auto;bottom:auto;z-index:12000;width:min(390px,calc(100vw - 28px));display:flex;align-items:flex-start;gap:12px;padding:15px 16px;border:1px solid rgba(32,201,151,.35);border-radius:16px;background:rgba(9,15,21,.96);backdrop-filter:blur(16px);box-shadow:0 22px 70px rgba(0,0,0,.45);transform:translate(-50%,calc(-50% + 18px));opacity:0;pointer-events:none;transition:.22s ease}
.platform-notice.show{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}.platform-notice-icon{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;background:rgba(32,201,151,.14);border:1px solid rgba(32,201,151,.35);color:var(--accent);font-weight:900}.platform-notice strong{font-size:12px}.platform-notice p{margin:4px 24px 0 0;color:var(--muted);font-size:11px;line-height:1.45}.platform-notice button{margin-left:auto;border:1px solid rgba(32,201,151,.38);background:rgba(32,201,151,.10);color:var(--accent);font-size:11px;font-weight:900;line-height:1;cursor:pointer;padding:8px 11px;border-radius:9px;min-width:42px}.platform-notice-content{min-width:0}.platform-notice-ok:hover{background:rgba(32,201,151,.18);transform:translateY(-1px)}
@media(max-width:600px){.platform-notice{left:50%;top:50%;width:calc(100vw - 28px)}}

/* V13 — personalized onboarding + offers */
.offer-section{padding-top:20px}
.offer-shell{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px;align-items:stretch}
.offer-copy,.recommended-offer-card{background:linear-gradient(145deg,#101923,#0b1118);border:1px solid #24313d;border-radius:18px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.16)}
.offer-copy h2{font:700 28px "Space Grotesk",sans-serif;margin:8px 0 7px}.offer-copy p{color:#7f8d9a;font-size:12px;line-height:1.55;margin:0}.offer-profile{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}.offer-profile span{font-size:9px;padding:6px 8px;border-radius:999px;background:#141f29;border:1px solid #25333f;color:#aebbc5}
.recommended-offer-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.recommended-offer{padding:16px;border:1px solid rgba(32,201,151,.28);border-radius:14px;background:rgba(32,201,151,.035);min-width:0}.recommended-offer.offer-alt{border-color:#273540;background:#0d141b}.offer-topline{display:flex;justify-content:space-between;gap:8px;color:#6e7c88;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}.recommended-offer h3{font:700 16px "Space Grotesk",sans-serif;margin:10px 0}.offer-price{display:flex;align-items:baseline;gap:7px}.offer-price strong{font:700 27px "Space Grotesk",sans-serif;color:#20c997}.offer-price span{font-size:10px;color:#8996a1}.offer-meta{font-size:10px;color:#8a98a4;margin-top:8px}.recommended-offer p{font-size:10px;color:#758491;line-height:1.5;margin:9px 0 13px}.recommended-offer .primary-button{display:flex;width:100%;justify-content:center;box-sizing:border-box;margin-top:13px}
.welcome-card-wide{width:min(560px,100%)}.welcome-notice p{color:#84929e;font-size:11px;line-height:1.6;margin:10px 0}.welcome-notice-actions{display:flex;gap:9px;margin-top:18px}.welcome-notice-actions .primary-button,.welcome-notice-actions .secondary-button{flex:1;justify-content:center;text-align:center}.welcome-input{width:100%;height:52px;box-sizing:border-box;border:1px solid #2b3946;border-radius:12px;background:#0a1016;color:#eef3f6;padding:0 15px;outline:none;font-size:13px}.welcome-input:focus{border-color:#20c997;box-shadow:0 0 0 3px rgba(32,201,151,.08)}.welcome-next{display:flex;width:100%;justify-content:center;margin-top:11px}.welcome-step[hidden],#welcomeQuiz[hidden],#welcomeNotice[hidden]{display:none!important}
@media(max-width:850px){.offer-shell{grid-template-columns:1fr}.recommended-offer-card{grid-template-columns:1fr}}
@media(max-width:520px){.offer-copy,.recommended-offer-card{padding:16px}.offer-copy h2{font-size:24px}.welcome-notice-actions{flex-direction:column}.welcome-card-wide{padding:20px}.welcome-notice-actions .primary-button,.welcome-notice-actions .secondary-button{width:100%}}

/* KOIN V15 */
.price-toast{left:auto!important;right:18px!important;top:auto!important;bottom:18px!important;transform:translateY(18px)!important;width:min(360px,calc(100vw - 36px))!important}.price-toast.show{left:auto!important;right:18px!important;top:auto!important;bottom:18px!important;transform:translateY(0)!important}.use-offer{border:0;cursor:pointer}@media(max-width:600px){.price-toast{right:14px!important;bottom:14px!important;width:calc(100vw - 28px)!important}}

.order-actions-row{display:flex;gap:9px;margin-top:12px}.order-actions-row>*{flex:1}@media(max-width:520px){.order-actions-row{flex-direction:column}}

.checkout-currency-home{height:44px;width:100%;box-sizing:border-box;background:#080c11;border:1px solid #26323e;border-radius:10px;color:#eef2f6;padding:0 12px;outline:none}.checkout-currency-home:focus{border-color:#20c997;box-shadow:0 0 0 3px rgba(32,201,151,.08)}

/* V16: scheduled announcements are modal; price updates remain corner toasts. */
.announcement-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:20px}.announcement-modal.show{display:flex}.announcement-backdrop{position:absolute;inset:0;background:rgba(2,7,12,.78);backdrop-filter:blur(10px)}.announcement-card{position:relative;width:min(520px,100%);padding:28px;border:1px solid #26323e;border-radius:22px;background:linear-gradient(180deg,#101820,#080d13);box-shadow:0 24px 90px rgba(0,0,0,.55);text-align:center}.announcement-kicker{font-size:10px;font-weight:900;letter-spacing:1.8px;color:#20c997}.announcement-icon{width:48px;height:48px;border-radius:50%;margin:14px auto;border:1px solid rgba(32,201,151,.35);display:grid;place-items:center;color:#20c997;font-weight:900;font-size:20px}.announcement-card h3{margin:6px 0 8px;font-size:24px}.announcement-card p{margin:0 auto;color:#8c9aa7;line-height:1.6;max-width:430px}.announcement-actions{display:flex;justify-content:center;gap:10px;margin-top:22px;flex-wrap:wrap}.price-toast{right:22px!important;left:auto!important;bottom:22px!important;top:auto!important;transform:translateY(18px)!important}.price-toast.show{transform:translateY(0)!important}@media(max-width:520px){.announcement-card{padding:22px}.announcement-card h3{font-size:20px}.announcement-actions>*{width:100%;text-align:center;box-sizing:border-box}}

/* V34: clear market availability state */
.rate-card{position:relative}
.rate-availability{display:inline-flex;align-items:center;justify-content:center;margin-top:9px;padding:4px 8px;border-radius:999px;border:1px solid rgba(32,201,151,.18);background:rgba(32,201,151,.06);color:#20c997;font-size:9px;font-weight:900;letter-spacing:.6px}
.rate-card.market-unavailable{opacity:.62;border-color:rgba(255,255,255,.08);filter:saturate(.65)}
.rate-card.market-unavailable:hover{transform:none;border-color:rgba(255,255,255,.12)}
.rate-card.market-unavailable .rate{color:#8b97a1;text-decoration:line-through;text-decoration-thickness:1px}
.rate-card.market-unavailable .rate-availability{border-color:rgba(255,120,120,.20);background:rgba(255,80,80,.06);color:#ff9b9b}

/* ============================================================
   KOIN V48 — CANONICAL UI / RESPONSIVE SYSTEM
   Keep this block as the final source of truth.
============================================================ */
html{
  width:100%;
  min-width:0;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  width:100%;
  min-width:320px;
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  -webkit-tap-highlight-color:transparent;
}
body,button,input,select,textarea{
  -webkit-user-select:none;
  user-select:none;
}
input,textarea{
  -webkit-user-select:text;
  user-select:text;
}
button,input,select,textarea{
  max-width:100%;
}
img,svg{
  max-width:100%;
}
.navbar{
  position:sticky!important;
  top:0!important;
  left:0;
  width:min(var(--max-width),calc(100% - 40px));
  min-height:72px;
  height:auto;
  margin:0 auto;
  z-index:5000;
  background:rgba(7,11,16,.82);
  border-bottom:1px solid rgba(255,255,255,.055);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.logo-icon{
  flex:0 0 34px;
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,#20c997,#0fa879)!important;
  color:#04110c!important;
  font-size:18px!important;
  font-weight:900!important;
  box-shadow:0 0 0 1px rgba(32,201,151,.25),0 8px 25px rgba(32,201,151,.15)!important;
}
.hero,.section,.buy-section{
  width:min(var(--max-width),calc(100% - 40px));
  margin-left:auto;
  margin-right:auto;
}
.hero{
  min-height:calc(100vh - 72px);
}
.section,.buy-section{
  scroll-margin-top:90px;
}
.network-picker{
  width:100%;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px!important;
}
.network-card{
  width:100%;
  min-width:0!important;
  min-height:116px!important;
  padding:13px 9px!important;
  border-radius:16px!important;
}
.network-logo{
  width:42px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 42px;
  border-radius:12px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  color:#fff!important;
}
.network-logo svg{width:28px!important;height:28px!important}
.network-card span{font-size:11px!important;line-height:1.2}
.network-card small{min-height:20px;font-size:8px!important}
.network-card b{font-size:8px!important}
.payment-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px!important;
  width:100%;
}
.pay-card{
  width:100%;
  min-width:0!important;
  min-height:128px!important;
  padding:15px 10px!important;
  gap:10px!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.pay-icon{
  width:54px!important;
  height:54px!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 54px;
  border-radius:15px;
  background:rgba(255,255,255,.035);
}
.pay-icon svg{
  width:54px!important;
  height:54px!important;
  display:block;
}
.pay-card>span:last-child{
  font-size:11px!important;
  line-height:1.25!important;
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.order-center{
  position:fixed!important;
  inset:0!important;
  z-index:9000!important;
}
.order-center-panel{
  width:min(620px,calc(100vw - 28px))!important;
  max-height:min(82vh,760px);
  overflow:auto;
}
.page-shell,.status-shell{
  width:min(1120px,calc(100% - 40px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.checkout-grid{
  align-items:start;
}
.panel,.status-panel{
  min-width:0;
  overflow:hidden;
}
.summary-line strong,.detail strong,.payment-detail-row strong{
  overflow-wrap:anywhere;
}
.payment-details{
  overflow:hidden;
}
.cancel-confirm-row{
  display:grid!important;
  grid-template-columns:1fr 1fr;
}
.cancel-confirm-row>*{
  width:100%;
}
.status-shell{
  min-height:calc(100vh - 72px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.status-panel{
  width:100%;
}
@media(max-width:900px){
  .network-picker{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .checkout-grid{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  .navbar{
    width:100%!important;
    padding:12px 16px!important;
    flex-wrap:wrap;
    background:rgba(7,11,16,.94)!important;
  }
  .navbar>.main-nav,.navbar>nav{
    order:3;
    width:100%;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .navbar>.main-nav::-webkit-scrollbar,.navbar>nav::-webkit-scrollbar{display:none}
  .hero,.section,.buy-section,.page-shell,.status-shell{
    width:calc(100% - 24px)!important;
  }
  .hero{min-height:auto}
  .payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .network-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .steps{grid-template-columns:1fr 1fr!important}
  .detail-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:520px){
  .navbar{padding:10px 12px!important}
  .logo-icon{width:36px!important;height:36px!important;flex-basis:36px}
  .payment-grid{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .pay-card{min-height:116px!important;padding:12px 7px!important}
  .pay-icon,.pay-icon svg{width:48px!important;height:48px!important;flex-basis:48px}
  .network-card{min-height:108px!important}
  .detail-grid,.steps{grid-template-columns:1fr!important}
  .status-head{align-items:flex-start}
  .status-panel{padding:18px!important;border-radius:18px!important}
  .cancel-confirm-row{grid-template-columns:1fr!important}
  .page-shell,.status-shell{width:calc(100% - 20px)!important}
}
@media(max-width:360px){
  .payment-grid,.network-picker{grid-template-columns:1fr!important}
}
/* Clean utility pages */
.auth-page,.status-shell{padding-bottom:40px}

/* V49 — real brand marks, local first, no fake glyph treatment */
.network-logo img{width:27px;height:27px;display:block;object-fit:contain}
.network-logo.tron-logo{color:#dc062b;background:rgba(220,6,43,.08);border-color:rgba(220,6,43,.2)}
.network-logo.bnb-logo{color:#f0b90b;background:rgba(240,185,11,.08);border-color:rgba(240,185,11,.2)}
.network-logo.eth-logo{color:#627eea;background:rgba(98,126,234,.08);border-color:rgba(98,126,234,.2)}
.network-logo.polygon-logo{color:#8247e5;background:rgba(130,71,229,.08);border-color:rgba(130,71,229,.2)}
.network-logo.solana-logo{color:#9945ff;background:rgba(153,69,255,.08);border-color:rgba(153,69,255,.2)}
.pay-icon img{width:34px;height:34px;display:block;object-fit:contain;border-radius:8px}
.pay-icon .card-brands{display:flex;align-items:center;gap:3px}
.pay-icon .card-brands img{width:26px;height:26px}