/* ================================================================
   Page-specific styles: home, info pages, dashboard, stake, swap UI
   ================================================================ */

/* ================================================================
   Home page styles
   ================================================================ */

.eyebrow {
  display: inline-block;
  color: #0E1117;
  font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 14px;
}

/* ---- Hero (centered spiral graphic + dots baked into image) ---- */
.home-hero {
  position: relative;
  background: #f5f5f7;
  padding: 56px 0 48px;
  overflow: hidden;
}
.home-hero .container { position: relative; z-index: 1; }
.hero-stage {
  text-align: center;
  max-width: 820px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.hero-graphic {
  display: block;
  width: 100%; max-width: 690px; height: auto;
  margin: 0 auto 56px;
  pointer-events: none;
}
.hero-pill {
  display: inline-block;
  padding: 9px 22px;
  background: #0E1117; color: #fff;
  font-size: 13px; font-weight: 600;
  border-radius: 999px;
  margin-bottom: 28px;
}
.hero-title {
  font-size: 60px; line-height: 1.1;
  margin: 0 0 36px; color: #0E1117; font-weight: 700;
  letter-spacing: -.02em;
}
.hero-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 32px;
  background: linear-gradient(to right, #42E0F4 0%, #4485F2 70%);
  color: #fff;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  border: 0;
  transition: opacity .15s, transform .1s;
}
.hero-cta:hover  { opacity: .92; transform: translateY(-1px); }
.hero-cta:active { transform: translateY(0); }

/* ---- Flow wrapper (intro + benefits + core share right-side wave decor) ---- */
.home-flow {
  position: relative;
  background: #f5f5f7;
  overflow: hidden;
}
.home-flow-decor {
  position: absolute;
  top: 0; right: 0;
  width: 46%;
  max-width: 600px;
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: .9;
}
.home-flow > section {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* ---- Built for Holders intro (single big h2 on gray bg) ---- */
.home-intro {
  padding: 56px 0 80px;
  background: #f5f5f7;
}
.home-intro-inner {
  max-width: 1080px; margin: 0 auto; text-align: center;
  padding: 0 20px;
}
.intro-title {
  font-size: 48px; font-weight: 700;
  margin: 0 0 36px; color: #0E1117;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.home-intro p {
  color: #0E111799; font-size: 18px; font-weight: 400;
  line-height: 1.7; margin: 0 0 20px;
  max-width: 880px; margin-left: auto; margin-right: auto;
}
.home-intro p:last-child { margin-bottom: 0; }

/* ---- Section header (LEFT-aligned per reference) ---- */
.ref-section-head {
  margin-bottom: 48px;
  max-width: 1080px; margin-left: auto; margin-right: auto;
}
.ref-section-head--left {
  text-align: left;
}
.eyebrow-sm {
  display: block;
  color: #0E111799;
  font-size: 14px; font-weight: 600;
  margin-bottom: 6px;
}
.ref-section-head h2 {
  font-size: 36px; font-weight: 700;
  color: #0E1117;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* ---- Card grid (Benefits + Core: 3x2) ---- */
.ref-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1080px; margin: 0 auto;
}

/* ---- Section backgrounds ---- */
.home-benefits { background: #f5f5f7; padding: 80px 0 100px; }
.home-core     { background: #f5f5f7; padding: 100px 0; }

/* ---- Benefit cards (icon + heading + body, LEFT-aligned, no card frame) ---- */
.benefit-card {
  background: transparent;
  border: 0; padding: 8px 4px;
  display: flex; flex-direction: column;
  text-align: left;
}
.benefit-icon { width: 50px; height: 50px; margin-bottom: 16px; display: block; }
.benefit-card h3 {
  font-size: 19px; font-weight: 700;
  color: #0E1117; margin: 0 0 10px;
  line-height: 1.3;
}
.benefit-card p {
  color: #0E111799; font-size: 15px; font-weight: 400;
  line-height: 1.6; margin: 0;
}

/* ---- Core Feature cards (with colored bottom waves) ---- */
.core-grid { gap: 22px; }
.core-card {
  position: relative; overflow: hidden;
  background: #fff;
  border: 0; border-radius: 20px;
  padding: 28px 26px 0;
  min-height: 320px;
  text-align: left;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
  transition: transform .15s, box-shadow .15s;
  display: flex; flex-direction: column;
}
.core-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
}
.core-card h3 {
  font-size: 19px; font-weight: 700;
  color: #0E1117; margin: 0 0 12px;
  line-height: 1.3;
}
.core-card p {
  margin: 0; color: #0E111799;
  font-size: 15px; font-weight: 400; line-height: 1.55;
}
/* Dense wave block fills bottom ~45% of card per reference */
.core-card .core-wave {
  margin-top: auto;
  height: 130px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  opacity: 1;
}
/* per-card dense wave (15 stacked sine paths) */
.core-c1 .core-wave { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 130' preserveAspectRatio='none'><g fill='none' stroke='%2336c46d' stroke-width='1.4'><path d='M0 110 C 80 70, 160 150, 240 90 S 380 70, 480 110'/><path d='M0 100 C 80 60, 160 140, 240 80 S 380 60, 480 100'/><path d='M0 90 C 80 50, 160 130, 240 70 S 380 50, 480 90'/><path d='M0 80 C 80 40, 160 120, 240 60 S 380 40, 480 80'/><path d='M0 70 C 80 30, 160 110, 240 50 S 380 30, 480 70'/><path d='M0 60 C 80 20, 160 100, 240 40 S 380 20, 480 60'/><path d='M0 50 C 80 10, 160 90, 240 30 S 380 10, 480 50'/><path d='M0 40 C 80 0, 160 80, 240 20 S 380 0, 480 40'/><path d='M0 32 C 80 -8, 160 72, 240 12 S 380 -8, 480 32'/><path d='M0 24 C 80 -16, 160 64, 240 4 S 380 -16, 480 24'/></g></svg>"); }
.core-c2 .core-wave { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 130' preserveAspectRatio='none'><g fill='none' stroke='%23f97316' stroke-width='1.4'><path d='M0 110 C 80 70, 160 150, 240 90 S 380 70, 480 110'/><path d='M0 100 C 80 60, 160 140, 240 80 S 380 60, 480 100'/><path d='M0 90 C 80 50, 160 130, 240 70 S 380 50, 480 90'/><path d='M0 80 C 80 40, 160 120, 240 60 S 380 40, 480 80'/><path d='M0 70 C 80 30, 160 110, 240 50 S 380 30, 480 70'/><path d='M0 60 C 80 20, 160 100, 240 40 S 380 20, 480 60'/><path d='M0 50 C 80 10, 160 90, 240 30 S 380 10, 480 50'/><path d='M0 40 C 80 0, 160 80, 240 20 S 380 0, 480 40'/><path d='M0 32 C 80 -8, 160 72, 240 12 S 380 -8, 480 32'/><path d='M0 24 C 80 -16, 160 64, 240 4 S 380 -16, 480 24'/></g></svg>"); }
.core-c3 .core-wave { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 130' preserveAspectRatio='none'><g fill='none' stroke='%23c026d3' stroke-width='1.4'><path d='M0 110 C 80 70, 160 150, 240 90 S 380 70, 480 110'/><path d='M0 100 C 80 60, 160 140, 240 80 S 380 60, 480 100'/><path d='M0 90 C 80 50, 160 130, 240 70 S 380 50, 480 90'/><path d='M0 80 C 80 40, 160 120, 240 60 S 380 40, 480 80'/><path d='M0 70 C 80 30, 160 110, 240 50 S 380 30, 480 70'/><path d='M0 60 C 80 20, 160 100, 240 40 S 380 20, 480 60'/><path d='M0 50 C 80 10, 160 90, 240 30 S 380 10, 480 50'/><path d='M0 40 C 80 0, 160 80, 240 20 S 380 0, 480 40'/><path d='M0 32 C 80 -8, 160 72, 240 12 S 380 -8, 480 32'/><path d='M0 24 C 80 -16, 160 64, 240 4 S 380 -16, 480 24'/></g></svg>"); }
.core-c4 .core-wave { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 130' preserveAspectRatio='none'><g fill='none' stroke='%232563eb' stroke-width='1.4'><path d='M0 110 C 80 70, 160 150, 240 90 S 380 70, 480 110'/><path d='M0 100 C 80 60, 160 140, 240 80 S 380 60, 480 100'/><path d='M0 90 C 80 50, 160 130, 240 70 S 380 50, 480 90'/><path d='M0 80 C 80 40, 160 120, 240 60 S 380 40, 480 80'/><path d='M0 70 C 80 30, 160 110, 240 50 S 380 30, 480 70'/><path d='M0 60 C 80 20, 160 100, 240 40 S 380 20, 480 60'/><path d='M0 50 C 80 10, 160 90, 240 30 S 380 10, 480 50'/><path d='M0 40 C 80 0, 160 80, 240 20 S 380 0, 480 40'/><path d='M0 32 C 80 -8, 160 72, 240 12 S 380 -8, 480 32'/><path d='M0 24 C 80 -16, 160 64, 240 4 S 380 -16, 480 24'/></g></svg>"); }
.core-c5 .core-wave { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 130' preserveAspectRatio='none'><g fill='none' stroke='%23ec4899' stroke-width='1.4'><path d='M0 110 C 80 70, 160 150, 240 90 S 380 70, 480 110'/><path d='M0 100 C 80 60, 160 140, 240 80 S 380 60, 480 100'/><path d='M0 90 C 80 50, 160 130, 240 70 S 380 50, 480 90'/><path d='M0 80 C 80 40, 160 120, 240 60 S 380 40, 480 80'/><path d='M0 70 C 80 30, 160 110, 240 50 S 380 30, 480 70'/><path d='M0 60 C 80 20, 160 100, 240 40 S 380 20, 480 60'/><path d='M0 50 C 80 10, 160 90, 240 30 S 380 10, 480 50'/><path d='M0 40 C 80 0, 160 80, 240 20 S 380 0, 480 40'/><path d='M0 32 C 80 -8, 160 72, 240 12 S 380 -8, 480 32'/><path d='M0 24 C 80 -16, 160 64, 240 4 S 380 -16, 480 24'/></g></svg>"); }
.core-c6 .core-wave { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 130' preserveAspectRatio='none'><g fill='none' stroke='%2306b6d4' stroke-width='1.4'><path d='M0 110 C 80 70, 160 150, 240 90 S 380 70, 480 110'/><path d='M0 100 C 80 60, 160 140, 240 80 S 380 60, 480 100'/><path d='M0 90 C 80 50, 160 130, 240 70 S 380 50, 480 90'/><path d='M0 80 C 80 40, 160 120, 240 60 S 380 40, 480 80'/><path d='M0 70 C 80 30, 160 110, 240 50 S 380 30, 480 70'/><path d='M0 60 C 80 20, 160 100, 240 40 S 380 20, 480 60'/><path d='M0 50 C 80 10, 160 90, 240 30 S 380 10, 480 50'/><path d='M0 40 C 80 0, 160 80, 240 20 S 380 0, 480 40'/><path d='M0 32 C 80 -8, 160 72, 240 12 S 380 -8, 480 32'/><path d='M0 24 C 80 -16, 160 64, 240 4 S 380 -16, 480 24'/></g></svg>"); }

/* ---- Vision banner (per reference: "Our Shared Vision" h2 + blue CTA) ---- */
.home-vision-outer {
  background: #fff;
  padding: 80px 0 100px;
}
.home-vision {
  background: #D9F6FF;
  border-radius: 24px;
  padding: 90px 40px;
  text-align: center;
  max-width: 1200px; margin: 0 auto;
}
.home-vision h2 {
  color: #0E1117;
  font-size: 40px; font-weight: 700;
  line-height: 1.2;
  margin: 0 0 24px;
  max-width: 820px; margin-left: auto; margin-right: auto;
  letter-spacing: -.01em;
}
.home-vision p {
  color: #0E1117BF;
  font-size: 17px; font-weight: 400;
  line-height: 1.7;
  max-width: 760px; margin: 0 auto 36px;
}
.vision-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(to right, #42E0F4 0%, #4485F2 70%);
  color: #fff;
  height: 48px; padding: 0 28px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  border: 0;
  transition: opacity .15s;
}
.vision-cta:hover { opacity: .92; }

/* ---- Preview cards (3 cards, image-top + body, LEFT-aligned head) ---- */
.home-preview { background: #f5f5f7; padding: 100px 0; }
.ref-cards-3 { grid-template-columns: repeat(3, 1fr); }
.preview-card {
  background: #fff;
  border: 0; border-radius: 20px;
  padding: 0; overflow: hidden;
  box-shadow: 0 4px 24px rgba(15,23,42,.08);
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.preview-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(15,23,42,.12);
}
.preview-card .preview-img {
  width: 100%; height: 220px;
  background-size: cover; background-position: center;
  background-color: #e2e8f0;
}
.preview-card .preview-body { padding: 28px 26px 30px; }
.pill-dev {
  display: inline-flex; align-items: center; gap: 8px;
  background: #C2F1FF60;
  color: #4587F2;
  font-size: 13px; font-weight: 600;
  padding: 7px 16px; border-radius: 999px;
  margin-bottom: 14px;
}
.dev-spinner {
  width: 12px; height: 12px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, #4587F2 0%, #4587F2 25%, transparent 25%, transparent 50%, #4587F2 50%, #4587F2 75%, transparent 75%);
  -webkit-mask: radial-gradient(circle, transparent 4px, #000 5px);
          mask: radial-gradient(circle, transparent 4px, #000 5px);
  animation: dev-spin 1.4s linear infinite;
}
@keyframes dev-spin { to { transform: rotate(360deg); } }
.preview-card h3 {
  font-size: 20px; font-weight: 700;
  color: #0E1117; margin: 0 0 12px;
  line-height: 1.3;
}
.preview-card p {
  color: #0E111799; font-size: 15px;
  line-height: 1.6; margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .home-flow-decor { width: 42%; opacity: .8; right: 0; }
  .hero-graphic { max-width: 570px; margin-bottom: 44px; }
}

@media (max-width: 768px) {
  .home-hero { padding: 32px 0 36px; }
  .hero-graphic { max-width: 360px; margin-bottom: 36px; }
  .hero-title { font-size: 38px; }
  .hero-pill { font-size: 12px; padding: 7px 18px; }

  .home-intro { padding: 32px 0 56px; }

  .home-flow-decor { width: 60%; opacity: .7; right: 0; top: 0; }

  .home-intro { padding: 64px 0; }
  .intro-title { font-size: 28px; }
  .home-intro p { font-size: 15px; line-height: 1.6; }

  .home-benefits, .home-core, .home-preview { padding: 64px 0; }
  .home-vision-outer { padding: 56px 0 80px; }
  .ref-section-head { margin-bottom: 28px; }
  .ref-section-head h2 { font-size: 24px; }
  .eyebrow-sm { font-size: 13px; }

  /* 2-column card layout on mobile (down to small phones) per reference */
  .ref-cards    { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
  .ref-cards-3  { grid-template-columns: 1fr; max-width: 480px; }

  .core-card { padding: 22px 18px 0; min-height: 280px; }
  .core-card h3 { font-size: 15px; line-height: 1.25; }
  .core-card p  { font-size: 13px; }
  .core-card .core-wave { height: 110px; }

  .benefit-icon { width: 40px; height: 40px; margin-bottom: 14px; }
  .benefit-card h3 { font-size: 15px; line-height: 1.25; }
  .benefit-card p  { font-size: 13px; }

  .home-vision { padding: 56px 28px; border-radius: 20px; }
  .home-vision h2 { font-size: 24px; }
  .home-vision p { font-size: 14px; }

  .preview-card .preview-img { height: 180px; }
}

@media (max-width: 380px) {
  .hero-title { font-size: 32px; }
  .ref-cards { gap: 24px 12px; }
}

/* --- Section header --- */
.section-head {
  text-align: center; margin-bottom: var(--s-6);
}
.section-head .eyebrow {
  display: inline-block; color: var(--primary);
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: var(--s-2);
}
.section-head h2 { margin: 0 auto; max-width: 720px; }
.section-head p  { margin-top: var(--s-3); max-width: 720px; color: var(--muted); }

/* --- Homepage benefits (3-up) --- */
.benefits { background: var(--surface); }
.benefit {
  text-align: left;
  padding: var(--s-5); border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}
.benefit .icon { width: 44px; height: 44px; margin-bottom: var(--s-3); }
.benefit h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.benefit p  { color: var(--muted); margin: 0; font-size: var(--fs-sm); }

.core-features { background: var(--bg); padding: var(--s-8) 0; }
.core-features .section-head { margin-bottom: var(--s-6); }

.vision {
  background: var(--banner);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  text-align: center;
}
.vision h2 { color: var(--navy); }
.vision p  { max-width: 620px; margin: var(--s-3) auto var(--s-5); color: var(--text); }

.roadmap { padding: var(--s-7) 0; }
.roadmap .col-head {
  font-size: var(--fs-sm); color: var(--primary); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--s-2);
}
.roadmap h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.roadmap p  { color: var(--muted); font-size: var(--fs-sm); }

/* --- Info page hero (about/howitworks/...) --- */
.info-hero {
  padding: 72px 0 56px;
  text-align: center;
  background:
    radial-gradient(circle at 85% 10%, rgba(34,211,238,0.10) 0%, transparent 55%),
    radial-gradient(circle at 5% 30%, rgba(30,91,255,0.08) 0%, transparent 55%),
    #fff;
}
.info-hero .eyebrow {
  display: inline-block;
  color: var(--primary);
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 14px;
}
.info-hero h1 {
  font-size: clamp(28px, 4vw, 40px);
  max-width: 800px; margin: 0 auto 18px;
  color: var(--navy); line-height: 1.25;
}
.info-hero p  {
  max-width: 680px; margin: 0 auto;
  color: var(--muted); font-size: 15px; line-height: 1.7;
}

.info-section           { padding: var(--s-7) 0; }
.info-section .two-col  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: center; }
.info-section .two-col.reverse > :first-child { order: 2; }
.info-section img       { border-radius: var(--r-lg); }

@media (max-width: 768px) {
  .info-section .two-col { grid-template-columns: 1fr; gap: var(--s-5); }
  .info-section .two-col.reverse > :first-child { order: 0; }
}

/* ================================================================
   Wrap / stake page (swap UI + notice + ticker)
   ================================================================ */

.wrap-page { padding: 56px 0 80px; background: #f5f5f7; }
.wrap-head { text-align: center; margin-bottom: 36px; }
.wrap-head h1 {
  font-size: 38px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 16px;
  color: #0E1117;
  margin: 0 0 8px;
}
.wrap-head h1 .arrow { color: #4485F2; }
.wrap-head .sub { color: #0E111799; font-size: 16px; margin: 0; }

.wrap-card {
  background: #fff;
  border: 0; border-radius: 24px;
  box-shadow: 0 4px 24px rgba(15,23,42,.08);
  padding: 36px 36px 32px;
  max-width: 640px; margin: 0 auto 28px;
  position: relative;
}
.wrap-card + .wrap-card { margin-top: 0; }

/* History tables on subpages */
.wrap-page .section-sub {
  max-width: 720px; margin: 40px auto 14px;
  font-size: 18px; color: var(--navy); font-weight: 700;
}
.wrap-page .table-wrap {
  max-width: 720px; margin: 0 auto;
  overflow-x: auto;
}
.wrap-page .table {
  min-width: 560px;
}

.swap-row { margin-bottom: 18px; }
.swap-label {
  display: block;
  font-size: 14px; font-weight: 700;
  color: #0E1117;
  margin-bottom: 10px;
}
.swap-input { position: relative; }
.swap-input input {
  width: 100%; height: 56px;
  padding: 0 60px 0 18px;
  background: #f8fafc;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 18px; color: #0E1117;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}
.swap-input input:focus {
  outline: none;
  background: #fff;
  border-color: #4485F2;
}
.swap-input input[readonly] {
  background: #f1f5f9; color: #64748b;
}
.swap-input .suffix {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: #64748b; font-weight: 600; font-size: 14px;
}
.swap-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: #0E1117; color: #fff;
  margin: -4px auto 12px;
  position: relative; z-index: 1;
}

.wrap-meta {
  padding-top: var(--s-4); margin-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.wrap-meta .meta-label { color: var(--navy); font-weight: 700; font-size: var(--fs-sm); margin-bottom: 4px; }
.wrap-meta .meta-value { color: var(--text); font-size: var(--fs-sm); }
.wrap-meta.meta-row    { display: flex; justify-content: space-between; align-items: center; }
.wrap-meta.meta-row .meta-label { margin: 0; }

.address-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.address-row input {
  flex: 1; height: 52px;
  padding: 0 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: #0E1117;
}
.address-row .btn-sm {
  height: 52px; padding: 0 20px;
  border-radius: 12px;
  font-weight: 600;
}

.destination-note {
  max-width: 720px; margin: var(--s-3) auto var(--s-5);
  color: var(--muted); font-size: var(--fs-xs); text-align: center;
}

/* --- Staking Notice (pink-ish) --- */
.notice-card {
  max-width: 720px; margin: 0 auto var(--s-5);
  background: #fff5f5;
  border: 1px solid #fecaca;
  border-radius: var(--r-lg);
  padding: var(--s-5);
  color: #7f1d1d;
  font-size: var(--fs-sm);
}
.notice-card h3 { color: #7f1d1d; font-size: var(--fs-md); margin-bottom: var(--s-2); }
.notice-card p  { color: #7f1d1d; margin: 0 0 var(--s-3); }
.notice-card ul { margin: 0 0 var(--s-3); padding-left: 0; list-style: none; }
.notice-card ul.notice-star li {
  padding-left: 18px; position: relative; margin-bottom: 6px;
  font-weight: 700;
}
.notice-card ul.notice-star li::before {
  content: "❋"; position: absolute; left: 0; color: #b91c1c;
}
.notice-card ul.notice-bullet li {
  padding-left: 14px; position: relative; margin-bottom: 4px;
}
.notice-card ul.notice-bullet li::before {
  content: "·"; position: absolute; left: 4px; font-weight: 900;
}

/* Plain Notice (no box frame) - used by Transfer / UnStake / Add Staking below the main card */
.notice-plain {
  max-width: 720px; margin: 32px auto 0;
  padding: 0 8px;
  color: var(--muted); font-size: 14px;
}
.notice-plain h3 {
  color: var(--navy); text-align: center;
  font-size: 16px; font-weight: 700;
  margin: 0 0 12px;
}
.notice-plain p  { color: var(--muted); text-align: center; margin: 0 0 14px; }
.notice-plain ul { list-style: none; padding-left: 0; margin: 0; }
.notice-plain ul li {
  padding-left: 14px; position: relative; margin-bottom: 14px;
  line-height: 1.55; color: var(--muted);
}
.notice-plain ul li::before {
  content: "·"; position: absolute; left: 4px; top: -2px;
  font-weight: 900; color: var(--muted);
}
.notice-plain ul li strong { color: var(--navy); font-weight: 600; }

.btn-start-staking {
  max-width: 720px; margin: 0 auto;
  display: flex;
}

/* --- Live ticker --- */
.ticker-section { max-width: 720px; margin: var(--s-6) auto 0; }
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
.ticker-table tbody tr { animation: fade-in .3s ease-out; }
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   Dashboard / My Assets
   ================================================================ */

.dash { padding: var(--s-7) 0 var(--s-8); }
.dash-title {
  font-size: var(--fs-2xl); text-align: center; margin-bottom: var(--s-6);
}
.dash-section-title {
  max-width: 960px; margin: var(--s-6) auto var(--s-3);
  font-size: var(--fs-md);
}

.asset-card {
  max-width: 960px; margin: 0 auto var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-1);
}
.asset-card h3 {
  font-size: var(--fs-md); font-weight: 800; color: var(--navy);
  margin: 0 0 var(--s-3);
}
.asset-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: var(--s-2);
}
.asset-card-head h3 { margin: 0; }
.fx-select {
  height: 32px; padding: 0 var(--s-3);
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--navy);
  font-size: var(--fs-sm); font-weight: 600;
}

.asset-card-body {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--s-4);
}
.asset-xrp { font-size: var(--fs-lg); font-weight: 700; color: var(--navy); }
.asset-xrp span { font-variant-numeric: tabular-nums; }
.asset-fx  { font-size: var(--fs-lg); font-weight: 700; color: var(--navy); text-align: right; }
.asset-fx span:first-child { font-variant-numeric: tabular-nums; }
.asset-icon { color: var(--muted); display: flex; justify-content: center; }

.asset-kv {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-2) 0;
}
.asset-kv .k { color: var(--muted); font-size: var(--fs-sm); }
.asset-kv .v {
  font-size: var(--fs-md); font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.asset-kv .v .unit { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; margin-left: 4px; }
.asset-kv .v .plus { color: var(--success); margin-right: 2px; }

.asset-actions {
  max-width: 960px; margin: var(--s-5) auto var(--s-5);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
}
.asset-actions .btn { width: 100%; }

/* Tab switcher (Add / Withdraw / UnStake) */
.asset-tabs {
  max-width: 960px; margin: var(--s-5) auto var(--s-4);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
}
.asset-tab {
  height: 52px;
  border: 0; border-radius: var(--r-md);
  font-family: inherit; font-weight: 700; font-size: 15px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(90deg, #22d3ee 0%, #1e5bff 100%);
  opacity: .55;
  transition: opacity .15s, transform .1s;
}
.asset-tab:hover { opacity: .85; }
.asset-tab.active { opacity: 1; box-shadow: 0 4px 12px rgba(30,91,255,0.25); }
.asset-tab:active { transform: translateY(1px); }

.asset-panel {
  max-width: 960px; margin: 0 auto var(--s-5);
}
.asset-panel .swap-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: var(--s-6);
  position: relative;
}
.swap-head { text-align: center; margin-bottom: var(--s-5); }
.swap-head h2 { font-size: var(--fs-2xl); margin-bottom: 4px; }
.swap-head .muted { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

.section-sub {
  margin: var(--s-6) 0 var(--s-3);
  font-size: var(--fs-md); color: var(--navy);
}

.stat-row {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.stat-chip {
  flex: 1; min-width: 140px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
}
.stat-chip .k { color: var(--muted); font-size: 12px; }
.stat-chip .v { color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; }

.kv-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.kv-row:first-of-type { border-top: 0; }
.kv-row .k { color: var(--navy); font-weight: 600; }
.kv-row .v { color: var(--text); font-variant-numeric: tabular-nums; }

/* swap-label / swap-input rules consolidated above */
.swap-input .btn-max {
  position: absolute; right: 60px; top: 50%; transform: translateY(-50%);
  height: 30px; padding: 0 12px;
  border: 1px solid #e2e8f0; border-radius: 8px;
  background: #fff; color: #4485F2;
  font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.swap-input .btn-max:hover { background: #f8fafc; }

.swap-arrow-standalone {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--navy); color: #fff;
  margin: calc(-1 * var(--s-3)) auto var(--s-3);
  box-shadow: var(--sh-2);
  position: relative; z-index: 1;
}

/* Create Address pink button */
.addr-block { margin: 18px 0 14px; }
.addr-block .swap-label { margin-bottom: 10px; }
.btn-create-address {
  display: block; width: 100%;
  height: 52px;
  background: #fde8ec; color: #d94a61;
  border: 0; border-radius: 14px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.btn-create-address:hover    { background: #fbd5dc; }
.btn-create-address:disabled { opacity: .6; cursor: not-allowed; }

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}
.nowrap { white-space: nowrap; }
.muted  { color: var(--muted); }

@media (max-width: 640px) {
  .asset-tabs { grid-template-columns: 1fr; }
  .stat-row { flex-direction: column; }
  .stat-chip { min-width: 0; }
}

/* History table small tweaks */
.table-wrap .table { max-width: 960px; margin: 0 auto; }
.table .empty { text-align: center; padding: var(--s-7) 0; }

@media (max-width: 768px) {
  .asset-card-body   { grid-template-columns: 1fr; text-align: left; }
  .asset-icon        { display: none; }
  .asset-fx          { text-align: left; }
  .asset-actions     { grid-template-columns: 1fr; }
  .wrap-card         { padding: var(--s-4); }
  .btn-start-staking { max-width: 100%; }
  .notice-card       { padding: var(--s-4); }
}

/* ================================================================
   GTranslate widget: pin bottom-left. The CDN script auto-mounts the
   flag+language chooser inside .gtranslate_wrapper.
   ================================================================ */
.gtranslate_wrapper {
  position: fixed; left: 16px; bottom: 16px; z-index: 100;
}
.gtranslate_wrapper .gt_container-wrapper,
.gtranslate_wrapper > * {
  filter: drop-shadow(0 4px 12px rgba(15,23,42,0.15));
}
@media (max-width: 768px) {
  .gtranslate_wrapper { left: 10px; bottom: 10px; }
}

/* ================================================================
   Shared extras
   ================================================================ */

.stake-wrap {
  max-width: 560px; margin: 0 auto;
  padding: var(--s-7) 0;
}
.stake-card {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-6); box-shadow: var(--sh-2);
}
.stake-card h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-2); }
.stake-card .sub { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--s-5); }

.step { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-5); }
.step .n {
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 700;
}
.step .body { flex: 1; }
.step .body h4 { margin: 0 0 4px; font-size: var(--fs-md); }
.step .body p  { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

.stake-status {
  max-width: 720px; margin: var(--s-4) auto 0;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: var(--fs-sm);
}
.stake-status.ok   { background: #dcfce7; color: #166534; }
.stake-status.err  { background: #fee2e2; color: #991b1b; }
.stake-status.info { background: var(--surface-2); color: var(--navy); }

.dash-actions {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  margin: var(--s-5) 0;
}

.admin-shell { padding: var(--s-6) 0; }
.admin-shell h1 { font-size: var(--fs-2xl); }
.admin-section { margin-bottom: var(--s-6); }
.admin-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-5);
}
.admin-topbar .brand { font-weight: 800; color: var(--navy); }

/* ================================================================
   Join (signup) page
   ================================================================ */
.join-card {
  max-width: 560px; margin: 0 auto;
  background: var(--surface);
  padding: var(--s-6) var(--s-6);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.join-card h1 { font-size: var(--fs-2xl); text-align: center; margin-bottom: var(--s-2); }
.join-card .sub {
  text-align: center; color: var(--muted);
  margin-bottom: var(--s-6); font-size: var(--fs-sm);
}
.join-card .foot { text-align: center; margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--muted); }

.input-with-btn { display: flex; gap: 10px; }
.input-with-btn .form-input { flex: 1; }
.input-with-btn .btn-check  { flex: 0 0 80px; height: 44px; }

.phone-row { display: flex; gap: 10px; }
.phone-row .phone-cc {
  flex: 0 0 84px; padding: 0 10px;
  font-variant-numeric: tabular-nums;
}
.phone-row .form-input { flex: 1; }
.phone-row .btn-check  { flex: 0 0 80px; height: 44px; }

.form-help.ok  { color: var(--success); }
.form-help.err { color: var(--danger); }

.checkbox.terms {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: var(--s-4);
  color: var(--muted); font-size: 13px;
}
.checkbox.terms input { margin-top: 2px; }

@media (max-width: 540px) {
  .join-card { padding: var(--s-5) var(--s-4); }
  .phone-row { flex-wrap: wrap; }
  .phone-row .phone-cc { flex: 0 0 70px; }
  .phone-row .btn-check { flex: 1 1 100%; }
  .input-with-btn .btn-check { flex: 0 0 70px; }
}

/* ================================================================
   Reference-style sections (used by /about and /wxrpnetwork)
   ================================================================ */

/* shared eyebrow style override for ref pages: dark gray, larger */
.ref-section .eyebrow,
.ref-hero .eyebrow {
  color: #626263;
  font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 12px;
}

/* ---- HERO ---- */
.ref-hero {
  background: #f5f5f7;
  padding: 96px 0 80px;
  overflow: hidden;
}
.ref-hero .container {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
}
.ref-hero-inner h1 {
  font-size: 48px;
  font-weight: 800;
  color: #0E1117;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 22px;
}
.ref-hero-inner .lead {
  font-size: 18px;
  color: #0E111799;
  line-height: 1.55;
  max-width: 560px;
  margin: 0 0 32px;
}
.ref-hero-art {
  display: flex; justify-content: center; align-items: center;
}
.ref-hero-art img {
  max-width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
}

/* dark pill button (reference style) */
.btn-pill-dark {
  display: inline-flex; align-items: center; gap: 10px;
  background: #0E1117; color: #fff;
  padding: 0 28px;
  height: 52px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  border: 0;
  text-decoration: none;
  transition: transform .15s, background .15s;
}
.btn-pill-dark:hover { background: #1a1f29; transform: translateY(-1px); }

/* ---- SECTIONS ---- */
.ref-section {
  padding: 80px 0;
  background: #fff;
}
.ref-section--alt   { background: #f5f5f7; }
.ref-section--tight { padding: 56px 0; }

/* 2-column text + image */
.ref-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ref-two-col .col-text h2 {
  font-size: 36px; font-weight: 700;
  color: #0E1117;
  line-height: 1.2;
  margin: 0 0 18px;
}
.ref-two-col .col-text p {
  font-size: 17px; color: #0E111799;
  line-height: 1.65; margin: 0 0 16px;
}
.ref-two-col .col-art img {
  width: 100%; height: auto;
  max-height: 460px; object-fit: contain;
}

/* centered text-only block */
.ref-center {
  max-width: 820px; margin: 0 auto; text-align: center;
}
.ref-center h2 {
  font-size: 36px; font-weight: 700;
  color: #0E1117;
  line-height: 1.2;
  margin: 0 0 18px;
}
.ref-center p {
  font-size: 17px; color: #0E111799;
  line-height: 1.65; margin: 0 0 16px;
}
.ref-center .lead-muted {
  font-size: 18px; color: #0E111780;
}

/* split 2-col (today / tomorrow) */
.ref-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.ref-split h2 {
  font-size: 30px; font-weight: 700;
  color: #0E1117;
  line-height: 1.25; margin: 0 0 14px;
}
.ref-split p {
  font-size: 16px; color: #0E111799;
  line-height: 1.6; margin: 0;
}

/* card banner (sustainability + CTA) */
.ref-card-banner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 32px;
  background: #fff;
  border-radius: 24px;
  padding: 56px 56px 0;
  box-shadow: 0 4px 30px rgba(0,0,0,.08);
  align-items: end;
  overflow: hidden;
}
.ref-card-banner .banner-text {
  padding-bottom: 56px;
}
.ref-card-banner .banner-text h2 {
  font-size: 38px; font-weight: 700;
  color: #0E1117;
  line-height: 1.18;
  margin: 0 0 18px;
}
.ref-card-banner .banner-text p {
  font-size: 17px; color: #0E111799;
  line-height: 1.6; margin: 0 0 28px;
}
.ref-card-banner .banner-art {
  align-self: end;
  display: flex; justify-content: flex-end;
}
.ref-card-banner .banner-art img {
  max-width: 100%; height: auto;
  max-height: 320px;
}
.ref-card-banner--cta {
  background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 60%);
}

/* ---- 3-up cards (What Makes / Leadership) ---- */
.ref-cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.ref-card {
  background: #fff;
  border: 1px solid #e6e6ea;
  border-radius: 20px;
  padding: 32px 28px;
  transition: transform .15s, box-shadow .15s;
}
.ref-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
}
.ref-card h3 {
  font-size: 20px; font-weight: 700;
  color: #0E1117;
  margin: 0 0 12px;
}
.ref-card p {
  font-size: 15px; color: #0E111799;
  line-height: 1.6; margin: 0;
}

/* ---- stats row ---- */
.ref-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid #e6e6ea;
}
.ref-stats .stat { text-align: center; }
.ref-stats .stat-value {
  font-size: 44px; font-weight: 800;
  color: #0E1117;
  line-height: 1;
}
.ref-stats .stat-label {
  font-size: 14px; color: #0E111780;
  margin-top: 8px;
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .ref-hero { padding: 64px 0 56px; }
  .ref-hero .container { grid-template-columns: 1fr; gap: 32px; }
  .ref-hero-art { order: 2; }
  .ref-hero-inner h1 { font-size: 36px; }
  .ref-hero-inner .lead { font-size: 16px; }

  .ref-section { padding: 56px 0; }
  .ref-two-col { grid-template-columns: 1fr; gap: 32px; }
  .ref-two-col .col-text h2,
  .ref-center h2,
  .ref-card-banner .banner-text h2 { font-size: 28px; }

  .ref-split { grid-template-columns: 1fr; gap: 40px; }

  .ref-card-banner {
    grid-template-columns: 1fr;
    padding: 36px 28px 0;
  }
  .ref-card-banner .banner-text { padding-bottom: 24px; }
  .ref-card-banner .banner-art img { max-height: 240px; }

  .ref-cards-3 { grid-template-columns: 1fr; }
  .ref-stats   { grid-template-columns: 1fr; gap: 32px; }
}

/* ================================================================
   Reference-style auth page (/login)
   ================================================================ */
.ref-auth-page {
  background: #f5f5f7;
  min-height: calc(100vh - 200px);
  padding: 80px 0;
  display: flex; align-items: flex-start;
}
.ref-auth-card {
  background: #fff;
  max-width: 480px; width: 100%;
  margin: 0 auto;
  padding: 48px 44px 36px;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(15,23,42,.05);
}
.ref-auth-head { margin-bottom: 32px; }
.ref-auth-head h1 {
  font-size: 28px; font-weight: 700;
  color: #0E1117; margin: 0 0 8px;
}
.ref-auth-head p {
  font-size: 15px; color: #909091; margin: 0;
}

.ref-auth-form .ref-field { margin-bottom: 20px; }
.ref-auth-form .ref-field label {
  display: block;
  font-size: 14px; font-weight: 600;
  color: #0E1117;
  margin-bottom: 8px;
}
.ref-auth-form .ref-field input {
  width: 100%; height: 50px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #E2E2EA;
  border-radius: 10px;
  font-size: 15px; color: #0E1117;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.ref-auth-form .ref-field input:focus {
  outline: none;
  border-color: #4485F2;
  box-shadow: 0 0 0 3px rgba(68,133,242,.12);
}
.ref-password { position: relative; }
.ref-password input { padding-right: 48px; }
.ref-eye {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  color: #909091; padding: 6px;
  display: flex; align-items: center;
}
.ref-eye:hover { color: #0E1117; }

.btn-gradient {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px;
  background: linear-gradient(to right, #42E0F4 0%, #4485F2 60%);
  color: #fff; font-size: 16px; font-weight: 600;
  border: 0; border-radius: 10px;
  cursor: pointer;
  margin-top: 28px;
  font-family: inherit;
  transition: opacity .15s, transform .1s;
}
.btn-gradient:hover    { opacity: .92; }
.btn-gradient:active   { transform: translateY(1px); }
.btn-gradient:disabled { opacity: .55; cursor: not-allowed; }

.btn-outline-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 52px;
  margin-top: 14px;
  background: #fff; color: #22232580;
  border: 1px solid #E2E2EA;
  border-radius: 10px;
  font-size: 15px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}
.btn-outline-row:hover { background: #fafafb; border-color: #cdcdd5; }

.ref-divider {
  display: flex; align-items: center; gap: 14px;
  color: #909091; font-size: 13px;
  margin: 22px 0 6px;
}
.ref-divider::before,
.ref-divider::after {
  content: ''; flex: 1;
  height: 1px; background: #E2E2EA;
}

.ref-auth-form .form-error {
  margin-top: 14px;
  color: #dc2626; font-size: 13px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 12px;
}

@media (max-width: 540px) {
  .ref-auth-page  { padding: 32px 0; }
  .ref-auth-card  { padding: 32px 22px 28px; border-radius: 18px; }
  .ref-auth-head h1 { font-size: 24px; }
}