@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@400;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Dancing+Script:wght@600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

.lang-flag {
  font-family: 'Noto Color Emoji', sans-serif;
  font-size: 10px;
  line-height: 1;
}

.lang-button {
  width: auto !important;
  height: 28px !important;
  min-width: 58px !important;
  min-height: 28px !important;
  font-size: 11px !important;
  padding: 0 6px !important;
  margin: 0 2px !important;
  transform: none !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  outline: none !important;
  flex-shrink: 0 !important;
}

.lang-button:hover,
.lang-button:focus,
.lang-button:active {
  transform: none !important;
  width: auto !important;
  height: 28px !important;
  min-width: 58px !important;
  min-height: 28px !important;
  font-size: 11px !important;
  padding: 0 6px !important;
  margin: 0 2px !important;
  box-shadow: none !important;
  outline: none !important;
}
/* ==========================================
   HEDGIO LANDING PAGE - MAIN STYLES
   ========================================== */

:root {
  --navy: #050d1f;
  --navy2: #081428;
  --navy3: #0a1a30;
  --steel: #2a5298;
  --cyan: #4fc3f7;
  --cyan2: #00e5ff;
  --silver: #c8d8f0;
  --silver2: #e8f0ff;
  --gold: #7eb8e8;
  --glow-cyan: rgba(79, 195, 247, 0.35);
  --glow-steel: rgba(42, 82, 152, 0.5);
  --border: rgba(79, 195, 247, 0.12);
  --border2: rgba(79, 195, 247, 0.25);
  --text: #d8e8f8;
  --muted: rgba(216, 232, 248, 0.5);
  --font: 'Sora', sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  overflow-x: hidden; /* must be on html, not just body, to prevent viewport-level scroll */
}

body {
  font-family: var(--font);
  background: var(--navy);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
}

body,
.landing-page {
  overflow-x: hidden;
}

/* ── BG Canvas ── */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
  animation: drift 20s ease-in-out infinite alternate;
}

.blob-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #1a3a7a, #050d1f);
  top: -150px;
  left: -100px;
  animation-duration: 22s;
}

.blob-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #0a2a5a, #050d1f);
  top: 300px;
  right: -80px;
  animation-duration: 28s;
  animation-delay: -10s;
}

.blob-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #4fc3f7, #050d1f);
  bottom: 50px;
  left: 35%;
  opacity: 0.08;
  animation-duration: 24s;
  animation-delay: -5s;
}

.blob-4 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, #2a5298, #050d1f);
  top: 60%;
  right: 20%;
  animation-duration: 26s;
  animation-delay: -15s;
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(40px, 60px) scale(1.1);
  }
  100% {
    transform: translate(-30px, 20px) scale(0.95);
  }
}

/* ── Grid overlay ── */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(79, 195, 247, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 195, 247, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.page-wrap {
  position: relative;
  z-index: 1;
}

/* ── Ticker ── */
.ticker {
  background: rgba(79, 195, 247, 0.06);
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  overflow: hidden;
  white-space: nowrap;
}

.ticker-inner {
  display: inline-flex;
  gap: 60px;
  animation: tickerScroll 30s linear infinite;
}

.ticker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.ticker-pair {
  color: var(--silver2);
  font-weight: 700;
}

.ticker-price {
  color: var(--cyan);
}

.ticker-up {
  color: #4ade80;
}

.ticker-dn {
  color: #f87171;
}

.ticker-sep {
  color: var(--border2);
  margin: 0 10px;
}

@keyframes tickerScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ── Navbar ── */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 60px;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(30px);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 13, 31, 0.8);
}

.logo-wrap {
  display: flex;
  align-items: center;
}

.logo-img {
  width: 154px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(79, 195, 247, 0.24));
}
.nav-links{
  display: flex;
  align-items: center;
  gap: 32px;
}

.navbar nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: color 0.2s;
}

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

.nav-cta {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: linear-gradient(135deg, #1a4080, var(--steel));
  border: 1px solid rgba(79, 195, 247, 0.4);
  color: var(--silver2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(42, 82, 152, 0.5);
  transition: all 0.3s;
}

.nav-cta:hover {
  box-shadow: 0 0 32px var(--glow-cyan);
  transform: translateY(-1px);
  border-color: var(--cyan2);
}

/* ── Hero ── */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 80px 60px 60px;
  min-height: 90vh;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 195, 247, 0.07);
  border: 1px solid rgba(79, 195, 247, 0.3);
  border-radius: 100px;
  padding: 6px 18px;
  width: fit-content;
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: 0.5px;
}

.hero-badge::before {
  content: '●';
  color: #4ade80;
  font-size: 8px;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.hero h1 {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -2px;
}

.hero h1 .line1 {
  display: block;
  color: var(--silver2);
}

.hero h1 .line2 {
  display: block;
  background: linear-gradient(135deg, var(--cyan), #7eb8e8, var(--silver2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  font-weight: 300;
  max-width: 460px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: linear-gradient(135deg, #1a4080, var(--steel), #3a6ab0);
  border: 1px solid rgba(79, 195, 247, 0.5);
  color: var(--silver2);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(42, 82, 152, 0.6), 0 0 60px rgba(79, 195, 247, 0.1);
  transition: all 0.3s;
  letter-spacing: 0.3px;
}

.btn-primary:hover {
  box-shadow: 0 0 40px var(--glow-cyan), 0 0 80px rgba(42, 82, 152, 0.4);
  transform: translateY(-2px);
  border-color: var(--cyan2);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  padding: 14px 28px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ghost:hover {
  border-color: rgba(79, 195, 247, 0.5);
  background: rgba(79, 195, 247, 0.05);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--cyan), var(--silver2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Hero Right ── */
.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.loop-wrap {
  position: relative;
  width: 440px;
  height: 440px;
}

.loop-canvas {
  width: 100%;
  height: 100%;
}

/* ── Floating cards ── */
.float-card {
  position: absolute;
  padding: 14px 18px;
  border-radius: 14px;
  backdrop-filter: blur(24px);
  font-size: 13px;
  background: rgba(8, 20, 40, 0.85);
  border: 1px solid rgba(79, 195, 247, 0.25);
}

.float-card-1 {
  bottom: 10px;
  left: -40px;
  animation: floatY 5s ease-in-out infinite;
}

.float-card-2 {
  top: 20px;
  right: -30px;
  animation: floatY 6.5s ease-in-out infinite reverse;
}

.float-card-3 {
  top: 50%;
  left: -50px;
  transform: translateY(-50%);
  animation: floatY3 7s ease-in-out infinite;
}

@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes floatY3 {
  0%,
  100% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(calc(-50% - 10px));
  }
}

.fc-label {
  color: var(--muted);
  font-size: 10px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fc-value {
  font-size: 18px;
  font-weight: 800;
}

.fc-value.pos {
  color: #4ade80;
}

.fc-value.cyan {
  color: var(--cyan);
}

.fc-value.silver {
  color: var(--silver2);
}

.fc-tag {
  font-size: 10px;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: 20px;
  display: inline-block;
}

.fc-tag.up {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.fc-tag.info {
  background: rgba(79, 195, 247, 0.12);
  color: var(--cyan);
}

/* ── Glass cards ── */
.glass {
  background: rgba(8, 20, 40, 0.5);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.glass-strong {
  background: rgba(8, 20, 40, 0.7);
  backdrop-filter: blur(30px);
  border: 1px solid var(--border2);
  border-radius: 20px;
}

/* ── Trust bar ── */
.trust-bar {
  padding: 32px 60px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.trust-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.trust-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.trust-logo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(216, 232, 248, 0.25);
  text-transform: uppercase;
}

/* ── Sections ── */
section {
  padding: 80px 60px;
  scroll-margin-top: 92px;
}

.landing-placeholder-section {
  padding-top: 40px;
}

.landing-placeholder-head {
  max-width: 620px;
}

.landing-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 34px;
}

.landing-placeholder-card {
  padding: 26px;
}

.landing-placeholder-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--silver2);
  margin-bottom: 10px;
}

.landing-placeholder-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.section-title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
}

.section-title span {
  background: linear-gradient(135deg, var(--cyan), var(--silver2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-sub {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin-top: 14px;
  max-width: 520px;
}

/* ── Features ── */
.features-head {
  text-align: center;
  margin-bottom: 60px;
}

.features-head .section-sub {
  margin: 14px auto 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  cursor: default;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 195, 247, 0.4);
  box-shadow: 0 0 30px rgba(79, 195, 247, 0.07);
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.icon-cyan {
  background: rgba(79, 195, 247, 0.1);
  box-shadow: 0 0 16px rgba(79, 195, 247, 0.15);
}

.icon-steel {
  background: rgba(42, 82, 152, 0.2);
  box-shadow: 0 0 16px rgba(42, 82, 152, 0.2);
}

.icon-mix {
  background: linear-gradient(135deg, rgba(79, 195, 247, 0.08), rgba(42, 82, 152, 0.15));
}

.feature-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--silver2);
}

.feature-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

/* ── How it works ── */
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
  position: relative;
}

.how-grid::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.4;
}

.how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  gap: 16px;
}

.step-num {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--cyan);
  background: rgba(8, 20, 40, 0.8);
  border: 1px solid rgba(79, 195, 247, 0.4);
  box-shadow: 0 0 24px rgba(79, 195, 247, 0.15);
  position: relative;
  z-index: 1;
}

.step-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--silver2);
}

.step-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
}

/* ── Profit Widget ── */
.profit-section {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.profit-widget {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pw-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pw-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--silver2);
}

.pw-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #4ade80;
}

.pw-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: pulse-dot 1.5s infinite;
}

.scenarios {
  display: flex;
  gap: 8px;
}

.scenario-btn {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  transition: all 0.2s;
}

.scenario-btn.active {
  background: rgba(79, 195, 247, 0.1);
  border-color: var(--cyan);
  color: var(--silver2);
}

.chart-wrapper {
  position: relative;
  height: 220px;
}

.metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.metric-box {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(5, 13, 31, 0.6);
  border: 1px solid var(--border);
}

.metric-label {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-val {
  font-size: 20px;
  font-weight: 800;
}

.metric-val.cyan {
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(79, 195, 247, 0.4);
}

.metric-val.steel {
  color: #7eb8e8;
}

.metric-val.green {
  color: #4ade80;
}

.metric-change {
  font-size: 10px;
  margin-top: 3px;
}

.metric-change.up {
  color: #4ade80;
}

/* ── Testimonials ── */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.testi-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testi-stars {
  color: var(--cyan);
  font-size: 13px;
  letter-spacing: 2px;
}

.testi-text {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  font-style: italic;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.testi-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  background: linear-gradient(135deg, var(--cyan), var(--steel));
}

.testi-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--silver2);
}

.testi-role {
  font-size: 11px;
  color: var(--muted);
}

/* ── Stats Section ── */
.stats-banner {
  margin: 0 60px;
  padding: 50px 60px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(10, 26, 48, 0.9), rgba(8, 20, 40, 0.95));
  border: 1px solid rgba(79, 195, 247, 0.2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.stats-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(79, 195, 247, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(42, 82, 152, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.stat-item {
  text-align: center;
  padding: 20px;
  border-right: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.stat-item:last-child {
  border-right: none;
}

.stat-item-val {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1.5px;
  background: linear-gradient(135deg, var(--cyan), var(--silver2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-item-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: 0.5px;
}

/* ── CTA ── */
.cta-banner {
  margin: 80px 60px 0;
  padding: 60px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(10, 26, 48, 0.95), rgba(8, 20, 40, 0.9));
  border: 1px solid rgba(79, 195, 247, 0.25);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(79, 195, 247, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(42, 82, 152, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

.cta-banner h2 {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1px;
  position: relative;
  z-index: 1;
  color: var(--silver2);
}

.cta-banner h2 span {
  background: linear-gradient(135deg, var(--cyan), var(--silver2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta-banner p {
  color: var(--muted);
  font-size: 16px;
  max-width: 440px;
  position: relative;
  z-index: 1;
}

.cta-actions {
  display: flex;
  gap: 14px;
  position: relative;
  z-index: 1;
}

/* ── Footer ── */
footer {
  padding: 32px 60px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 80px;
}

.footer-copy {
  font-size: 13px;
  color: var(--muted);
}

.footer-links {
  display: flex;
  gap: 28px;
}

.footer-links a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
}

.footer-logo {
  display: flex;
  align-items: center;
}

.footer-logo-img {
  width: 124px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(79, 195, 247, 0.18));
}

/* ── Animations ── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: none;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 60px 40px;
  }

  .hero-right {
    margin-top: 40px;
  }

  .loop-wrap {
    width: 350px;
    height: 350px;
  }

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

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

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

  .profit-section {
    grid-template-columns: 1fr;
  }

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

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

  nav,
  section,
  .trust-bar,
  .stats-banner {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 40px 20px;
  }

  .hero h1 {
    font-size: 36px;
  }

  .section-title {
    font-size: 28px;
  }

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

  .landing-placeholder-grid {
    grid-template-columns: 1fr;
  }

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

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

  .stats-banner {
    grid-template-columns: 1fr;
  }

  .nav-links {
    gap: 16px;
    font-size: 12px;
  }

  nav,
  section,
  .trust-bar,
  .stats-banner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ═══════════════════════════════════════════════
   HOW IT WORKS — PREMIUM REDESIGN
═══════════════════════════════════════════════ */

.hiw-section {
  position: relative;
  padding: 110px 24px;
  overflow: hidden;
}

.hiw-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: hiwGridDrift 24s linear infinite;
  pointer-events: none;
}

@keyframes hiwGridDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(48px, 48px); }
}

.hiw-bg-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(0, 212, 255, 0.06) 0%,
    rgba(0, 255, 136, 0.04) 40%,
    transparent 70%);
  pointer-events: none;
}

.hiw-shell {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.hiw-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00d4ff, #00ff88);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 18px;
}

.hiw-title {
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  color: #f0f6ff;
  margin-bottom: 14px;
  letter-spacing: -0.025em;
}

.hiw-grad {
  background: linear-gradient(90deg, #00d4ff 0%, #00ff88 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hiw-sub {
  font-size: 15px;
  color: rgba(180, 200, 235, 0.72);
  max-width: 560px;
  margin: 0 auto 64px;
  line-height: 1.7;
}

/* connector */
.hiw-steps-wrap { position: relative; }

.hiw-connector {
  position: absolute;
  top: 64px;
  left: calc(12.5% + 14px);
  right: calc(12.5% + 14px);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.15), rgba(0,255,136,0.15), transparent);
  overflow: hidden;
  pointer-events: none;
}

.hiw-connector::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, #00d4ff 30%, #00ff88 70%, transparent 100%);
  animation: hiwConnFlow 3s linear infinite;
  opacity: 0.85;
}

@keyframes hiwConnFlow {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* step grid */
.hiw-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
}

/* card base */
.hiw-card {
  position: relative;
  background: rgba(8, 18, 34, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 32px 24px 28px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
  cursor: default;
}

.hiw-card-cyan  { border: 1px solid rgba(0, 212, 255, 0.15); }
.hiw-card-green { border: 1px solid rgba(0, 255, 136, 0.15); }

.hiw-card-visible {
  opacity: 1;
  transform: translateY(0);
}

.hiw-card:hover { transform: translateY(-8px) !important; }

.hiw-card-cyan:hover {
  border-color: rgba(0, 212, 255, 0.55);
  box-shadow: 0 22px 52px rgba(0,212,255,0.12), inset 0 0 0 1px rgba(0,212,255,0.08);
}

.hiw-card-green:hover {
  border-color: rgba(0, 255, 136, 0.55);
  box-shadow: 0 22px 52px rgba(0,255,136,0.12), inset 0 0 0 1px rgba(0,255,136,0.08);
}

/* watermark */
.hiw-card-wm {
  position: absolute;
  top: -12px; right: 8px;
  font-size: 88px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.hiw-card-cyan  .hiw-card-wm { color: rgba(0, 212, 255, 0.045); }
.hiw-card-green .hiw-card-wm { color: rgba(0, 255, 136, 0.045); }

/* step number tag */
.hiw-step-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 20px;
}

.hiw-step-num::before {
  content: '';
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  opacity: 0.5;
}

.hiw-card-cyan  .hiw-step-num { color: #00d4ff; }
.hiw-card-green .hiw-step-num { color: #00ff88; }

/* icon */
.hiw-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
  transition: transform 0.28s ease;
}

.hiw-card-cyan  .hiw-icon { background: rgba(0,212,255,0.08); border: 1px solid rgba(0,212,255,0.2); }
.hiw-card-green .hiw-icon { background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.2); }

.hiw-card:hover .hiw-icon { transform: scale(1.1) rotate(-4deg); }

/* card text */
.hiw-card-name {
  font-size: 20px;
  font-weight: 800;
  color: #f0f6ff;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.hiw-card-desc {
  font-size: 13px;
  color: rgba(148, 163, 184, 0.85);
  line-height: 1.65;
}

/* shimmer overlay on hover */
.hiw-card::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.025) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.hiw-card:hover::after { opacity: 1; }

@media (max-width: 900px) {
  .hiw-steps    { grid-template-columns: repeat(2, 1fr); }
  .hiw-connector { display: none; }
}

@media (max-width: 540px) {
  .hiw-steps { grid-template-columns: 1fr; }
}

/* New prop-firm story sections */
.common-problems-section,
.comparison-section,
.why-hedgio-section {
  position: relative;
  overflow: hidden;
}

.comparison-section::before,
.why-hedgio-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(79, 195, 247, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 195, 247, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at center, #000 36%, transparent 78%);
  pointer-events: none;
}

.comparison-section::after,
.why-hedgio-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(79, 195, 247, 0.07), transparent 46%),
    radial-gradient(ellipse at 75% 55%, rgba(42, 82, 152, 0.11), transparent 50%);
  pointer-events: none;
}

.problem-section-head,
.comparison-head,
.why-head {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.problem-section-head .section-sub,
.comparison-head .section-sub,
.why-head .section-sub {
  margin-left: auto;
  margin-right: auto;
}

.problem-map {
  position: relative;
  min-height: 560px;
  max-width: 1120px;
  margin: 38px auto 0;
  isolation: isolate;
}

.problem-map::before {
  content: '';
  position: absolute;
  inset: 40px 8px 42px;
  z-index: -1;
  border: 1px solid rgba(79, 195, 247, 0.06);
  background-image:
    linear-gradient(rgba(79, 195, 247, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 195, 247, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 74%);
}

.problem-wires {
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  height: 470px;
  overflow: visible;
  fill: none;
  stroke: rgba(79, 195, 247, 0.52);
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(79, 195, 247, 0.28));
  pointer-events: none;
}

.problem-wires circle {
  fill: #d9f4ff;
  stroke: rgba(79, 195, 247, 0.9);
  stroke-width: 2;
}

.problem-hub {
  position: absolute;
  top: 28px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(8, 20, 40, 0.96), rgba(4, 10, 24, 0.96));
  border: 1px solid rgba(79, 195, 247, 0.42);
  box-shadow:
    0 0 0 5px rgba(79, 195, 247, 0.055),
    inset 0 0 24px rgba(79, 195, 247, 0.1),
    0 0 28px rgba(79, 195, 247, 0.18);
  color: var(--silver2);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.problem-node {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 18px 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(8, 20, 40, 0.95), rgba(5, 13, 31, 0.96));
  border: 1px solid rgba(79, 195, 247, 0.3);
  box-shadow:
    0 0 0 4px rgba(79, 195, 247, 0.04),
    inset 0 0 28px rgba(79, 195, 247, 0.055),
    0 18px 50px rgba(0, 0, 0, 0.2);
  color: rgba(232, 240, 255, 0.84);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.problem-node-fees {
  top: 330px;
  left: 0;
  width: 330px;
}

.problem-node-mt {
  top: 176px;
  left: 270px;
  width: 320px;
}

.problem-node-vps {
  top: 262px;
  right: 0;
  width: 360px;
}

.problem-node-rules {
  top: 410px;
  left: 50%;
  width: 430px;
  transform: translateX(-50%);
}

.problem-resolution {
  max-width: 900px;
  margin: 24px auto 0;
  padding: 22px 34px;
  border-radius: 999px;
  border: 1px solid rgba(79, 195, 247, 0.2);
  background:
    linear-gradient(135deg, rgba(8, 20, 40, 0.82), rgba(5, 43, 105, 0.78)),
    linear-gradient(90deg, rgba(79, 195, 247, 0.08), rgba(42, 82, 152, 0.12));
  box-shadow: inset 0 0 34px rgba(79, 195, 247, 0.08), 0 20px 70px rgba(0, 0, 0, 0.22);
  text-align: center;
}

.problem-resolution p {
  color: rgba(232, 240, 255, 0.88);
  font-size: 15px;
  line-height: 1.85;
}

.problem-resolution strong {
  color: var(--silver2);
}

.problem-resolution span {
  color: var(--cyan);
}

.comparison-section {
  padding-top: 110px;
  padding-bottom: 100px;
}

.comparison-watermark {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  width: max-content;
  color: rgba(0, 94, 255, 0.13);
  font-size: 118px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.comparison-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  max-width: 1080px;
  margin: 76px auto 0;
}

.comparison-card {
  position: relative;
  min-height: 320px;
  padding: 74px 48px 42px;
  border-radius: 18px;
  overflow: visible;
}

.comparison-card-good {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 119, 255, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(7, 28, 64, 0.82), rgba(5, 13, 31, 0.9));
  border: 1px solid rgba(0, 105, 255, 0.3);
  box-shadow: inset 0 0 50px rgba(0, 105, 255, 0.08), 0 22px 70px rgba(0, 0, 0, 0.2);
}

.comparison-card-bad {
  background:
    radial-gradient(ellipse at 55% 45%, rgba(79, 195, 247, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(8, 20, 40, 0.82), rgba(5, 13, 31, 0.92));
  border: 1px solid rgba(79, 195, 247, 0.18);
  box-shadow: inset 0 0 54px rgba(79, 195, 247, 0.045), 0 22px 70px rgba(0, 0, 0, 0.2);
}

.comparison-tab {
  position: absolute;
  top: -27px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  color: var(--silver2);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.comparison-card-good .comparison-tab {
  background: linear-gradient(135deg, #033d94, #075ed1);
  box-shadow: 0 0 36px rgba(0, 105, 255, 0.38);
  border: 1px solid rgba(79, 195, 247, 0.22);
}

.comparison-card-bad .comparison-tab {
  background: linear-gradient(135deg, rgba(8, 20, 40, 0.96), rgba(18, 50, 92, 0.94));
  box-shadow: 0 0 36px rgba(79, 195, 247, 0.18);
  border: 1px solid rgba(79, 195, 247, 0.28);
}

.comparison-card ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
  list-style: none;
}

.comparison-card li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  color: rgba(232, 240, 255, 0.82);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.comparison-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.comparison-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.comparison-icon-good {
  color: #9dd7ff;
  background: rgba(0, 105, 255, 0.16);
  border: 1px solid rgba(79, 195, 247, 0.48);
  box-shadow: 0 0 18px rgba(0, 105, 255, 0.26);
}

.comparison-icon-bad {
  color: rgba(216, 232, 248, 0.72);
  background: rgba(79, 195, 247, 0.07);
  border: 1px solid rgba(79, 195, 247, 0.26);
  box-shadow: 0 0 18px rgba(79, 195, 247, 0.13);
}

.why-hedgio-section {
  padding-top: 80px;
}

.why-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  max-width: 1040px;
  margin: 52px auto 0;
  align-items: start;
}

.why-card {
  position: relative;
  min-height: 312px;
  padding: 34px 28px 30px;
  border-radius: 18px;
  border: 1px solid rgba(0, 105, 255, 0.22);
  background: linear-gradient(180deg, rgba(8, 20, 40, 0.72), rgba(5, 13, 31, 0.84));
  box-shadow: inset 0 -4px 0 rgba(0, 105, 255, 0.2), 0 22px 70px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.why-card:nth-child(3n + 2) {
  margin-top: 48px;
}

.why-card:hover {
  transform: translateY(-6px);
  border-color: rgba(79, 195, 247, 0.45);
  box-shadow: inset 0 -4px 0 rgba(0, 105, 255, 0.24), 0 26px 80px rgba(0, 105, 255, 0.12);
}

.why-icon-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 124px;
  margin-bottom: 18px;
  overflow: hidden;
}

.why-icon-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(0, 105, 255, 0.25);
  stroke-width: 1;
}

.why-icon {
  position: relative;
  z-index: 1;
  width: 66px;
  height: 66px;
  fill: none;
  stroke: rgba(232, 240, 255, 0.9);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 14px rgba(79, 195, 247, 0.18));
}

.why-card-title {
  color: #0b6fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 14px;
}

.why-card p {
  max-width: 250px;
  color: rgba(216, 232, 248, 0.72);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.65;
}

@media (max-width: 1100px) {
  .problem-node-fees {
    left: 10px;
  }

  .problem-node-mt {
    left: 24%;
  }

  .problem-node-vps {
    right: 10px;
  }

  .comparison-grid {
    gap: 32px;
  }
}

@media (max-width: 900px) {
  .problem-map {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
    margin-top: 34px;
  }

  .problem-map::before {
    inset: 0;
  }

  .problem-wires {
    display: none;
  }

  .problem-hub,
  .problem-node,
  .problem-node-rules {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    transform: none;
  }

  .problem-hub {
    justify-self: center;
    width: fit-content;
    max-width: 100%;
  }

  .comparison-watermark {
    font-size: 76px;
  }

  .comparison-grid,
  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-card:nth-child(3n + 2) {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .common-problems-section,
  .comparison-section,
  .why-hedgio-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .problem-node {
    min-height: 76px;
    padding: 16px 20px;
    border-radius: 22px;
  }

  .problem-resolution {
    border-radius: 22px;
    padding: 20px;
  }

  .comparison-watermark {
    top: 22px;
    font-size: 48px;
  }

  .comparison-grid {
    margin-top: 54px;
  }

  .comparison-card {
    padding: 66px 22px 32px;
    border-radius: 16px;
  }

  .comparison-tab {
    min-width: 210px;
    min-height: 48px;
    font-size: 13px;
  }

  .comparison-card li {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
  }

  .comparison-icon {
    width: 34px;
    height: 34px;
  }

  .why-card {
    min-height: 0;
    padding: 30px 22px;
  }
}

/* Core capabilities premium refresh */
.features-section {
  position: relative;
  padding-top: 70px;
  overflow: hidden;
  isolation: isolate;
}

.features-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(79, 195, 247, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 195, 247, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at center, #000 34%, transparent 78%);
  pointer-events: none;
}

.features-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 18% 28%, rgba(79, 195, 247, 0.08), transparent 42%),
    radial-gradient(ellipse at 78% 62%, rgba(0, 105, 255, 0.1), transparent 48%);
  pointer-events: none;
}

.features-head {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 58px;
}

.features-head .section-sub {
  margin: 14px auto 0;
}

.feature-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}

.feature-card {
  position: relative;
  min-height: 270px;
  padding: 34px 30px 30px;
  border-radius: 18px;
  border: 1px solid rgba(79, 195, 247, 0.18);
  background:
    radial-gradient(ellipse at 22% 0%, rgba(79, 195, 247, 0.13), transparent 46%),
    linear-gradient(180deg, rgba(8, 20, 40, 0.78), rgba(5, 13, 31, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 -1px 0 rgba(79, 195, 247, 0.08),
    0 24px 70px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  cursor: default;
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(79, 195, 247, 0.12), transparent 34%),
    linear-gradient(90deg, rgba(79, 195, 247, 0.42), rgba(0, 105, 255, 0.08), transparent);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.feature-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 195, 247, 0.76), transparent);
  opacity: 0.45;
}

.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(79, 195, 247, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(79, 195, 247, 0.14),
    0 30px 90px rgba(0, 105, 255, 0.13);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card-number {
  position: absolute;
  right: 24px;
  top: 18px;
  color: rgba(79, 195, 247, 0.08);
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.feature-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.feature-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 35% 25%, rgba(79, 195, 247, 0.35), transparent 52%),
    rgba(79, 195, 247, 0.09);
  border: 1px solid rgba(79, 195, 247, 0.22);
  box-shadow: 0 0 22px rgba(79, 195, 247, 0.14);
  font-size: 0;
}

.feature-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: #9ddfff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s, stroke 0.25s;
}

.feature-card:hover .feature-icon svg {
  transform: scale(1.08) rotate(-3deg);
  stroke: var(--silver2);
}

.feature-badge {
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(79, 195, 247, 0.08);
  border: 1px solid rgba(79, 195, 247, 0.2);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feature-title {
  position: relative;
  z-index: 1;
  max-width: 280px;
  font-size: 20px;
  font-weight: 800;
  color: var(--silver2);
  letter-spacing: 0;
  line-height: 1.25;
}

.feature-desc {
  position: relative;
  z-index: 1;
  max-width: 440px;
  font-size: 13px;
  color: rgba(216, 232, 248, 0.58);
  line-height: 1.75;
}

.feature-card-line {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 2px;
  margin-top: auto;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(79, 195, 247, 0.65), rgba(0, 105, 255, 0.18), transparent);
  opacity: 0.7;
}

@media (max-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .features-section {
    padding-top: 64px;
  }

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

  .feature-card {
    min-height: 0;
    padding: 30px 24px 26px;
  }
}

/* i18n safety: prevent empty grids from creating blank gaps */
.feature-grid:empty,
.landing-placeholder-grid:empty,
.testi-grid:empty,
.why-grid:empty,
.comparison-grid:empty,
.hiw-steps:empty {
  display: none;
}

/* Prevent sections from taking space when content is missing */
.features-section:has(.feature-grid:empty),
.landing-placeholder-section:has(.landing-placeholder-grid:empty),
.testi-grid:empty,
.why-hedgio-section:has(.why-grid:empty),
.comparison-section:has(.comparison-grid:empty),
.hiw-section:has(.hiw-steps:empty) {
  padding: 0;
  min-height: 0;
}

/* Responsive: allow translated text to wrap naturally */
.feature-card,
.landing-placeholder-card,
.why-card,
.testi-card,
.hiw-card {
  word-break: break-word;
  overflow-wrap: break-word;
}

.comparison-tab,
.section-title,
.section-sub {
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 767px) {
	.ticker-inner{
		gap:0;
	}
	.navbar{
		padding:0.5rem 1rem;
	}
	.navbar .logo-img{
		width:125px;
	}
	.chart-wrapper canvas{
		width: 100% !important;
	}
}
/* ==========================================
   HEDGIO LANDING PAGE - MAIN STYLES
   ========================================== */

:root {
  --navy: #050d1f;
  --navy2: #081428;
  --navy3: #0a1a30;
  --steel: #2a5298;
  --cyan: #4fc3f7;
  --cyan2: #00e5ff;
  --silver: #c8d8f0;
  --silver2: #e8f0ff;
  --gold: #7eb8e8;
  --glow-cyan: rgba(79, 195, 247, 0.35);
  --glow-steel: rgba(42, 82, 152, 0.5);
  --border: rgba(79, 195, 247, 0.12);
  --border2: rgba(79, 195, 247, 0.25);
  --text: #d8e8f8;
  --muted: rgba(216, 232, 248, 0.5);
  --font: 'Sora', sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  overflow-x: hidden; /* must be on html, not just body, to prevent viewport-level scroll */
}

body {
  font-family: var(--font);
  background: var(--navy);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
}

body,
.landing-page {
  overflow-x: hidden;
}

/* ── BG Canvas ── */

.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
  animation: drift 20s ease-in-out infinite alternate;
}

.blob-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #1a3a7a, #050d1f);
  top: -150px;
  left: -100px;
  animation-duration: 22s;
}

.blob-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #0a2a5a, #050d1f);
  top: 300px;
  right: -80px;
  animation-duration: 28s;
  animation-delay: -10s;
}

.blob-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #4fc3f7, #050d1f);
  bottom: 50px;
  left: 35%;
  opacity: 0.08;
  animation-duration: 24s;
  animation-delay: -5s;
}

.blob-4 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, #2a5298, #050d1f);
  top: 60%;
  right: 20%;
  animation-duration: 26s;
  animation-delay: -15s;
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(40px, 60px) scale(1.1);
  }
  100% {
    transform: translate(-30px, 20px) scale(0.95);
  }
}

/* ── Grid overlay ── */

.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(79, 195, 247, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 195, 247, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.page-wrap {
  position: relative;
  z-index: 1;
}

/* ── Ticker ── */

.ticker {
  background: rgba(79, 195, 247, 0.06);
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  overflow: hidden;
  white-space: nowrap;
}

.ticker-inner {
  display: inline-flex;
  gap: 60px;
  animation: tickerScroll 30s linear infinite;
}

.ticker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.ticker-pair {
  color: var(--silver2);
  font-weight: 700;
}

.ticker-price {
  color: var(--cyan);
}

.ticker-up {
  color: #4ade80;
}

.ticker-dn {
  color: #f87171;
}

.ticker-sep {
  color: var(--border2);
  margin: 0 10px;
}

@keyframes tickerScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ── Navbar ── */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 60px;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(30px);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 13, 31, 0.8);
}

.logo-wrap {
  display: flex;
  align-items: center;
}

.logo-img {
  width: 154px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(79, 195, 247, 0.24));
}

.nav-links{
  display: flex;
  align-items: center;
  gap: 32px;
}

.navbar nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: color 0.2s;
}

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

.nav-cta {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: linear-gradient(135deg, #1a4080, var(--steel));
  border: 1px solid rgba(79, 195, 247, 0.4);
  color: var(--silver2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(42, 82, 152, 0.5);
  transition: all 0.3s;
}

.nav-cta:hover {
  box-shadow: 0 0 32px var(--glow-cyan);
  transform: translateY(-1px);
  border-color: var(--cyan2);
}

/* ── Hero ── */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 80px 60px 60px;
  min-height: 90vh;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 195, 247, 0.07);
  border: 1px solid rgba(79, 195, 247, 0.3);
  border-radius: 100px;
  padding: 6px 18px;
  width: fit-content;
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: 0.5px;
}

.hero-badge::before {
  content: '●';
  color: #4ade80;
  font-size: 8px;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.hero h1 {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -2px;
}

.hero h1 .line1 {
  display: block;
  color: var(--silver2);
}

.hero h1 .line2 {
  display: block;
  background: linear-gradient(135deg, var(--cyan), #7eb8e8, var(--silver2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  font-weight: 300;
  max-width: 460px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: linear-gradient(135deg, #1a4080, var(--steel), #3a6ab0);
  border: 1px solid rgba(79, 195, 247, 0.5);
  color: var(--silver2);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(42, 82, 152, 0.6), 0 0 60px rgba(79, 195, 247, 0.1);
  transition: all 0.3s;
  letter-spacing: 0.3px;
}

.btn-primary:hover {
  box-shadow: 0 0 40px var(--glow-cyan), 0 0 80px rgba(42, 82, 152, 0.4);
  transform: translateY(-2px);
  border-color: var(--cyan2);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  padding: 14px 28px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ghost:hover {
  border-color: rgba(79, 195, 247, 0.5);
  background: rgba(79, 195, 247, 0.05);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--cyan), var(--silver2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Hero Right ── */

.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.loop-wrap {
  position: relative;
  width: 440px;
  height: 440px;
}

.loop-canvas {
  width: 100%;
  height: 100%;
}

/* ── Floating cards ── */

.float-card {
  position: absolute;
  padding: 14px 18px;
  border-radius: 14px;
  backdrop-filter: blur(24px);
  font-size: 13px;
  background: rgba(8, 20, 40, 0.85);
  border: 1px solid rgba(79, 195, 247, 0.25);
}

.float-card-1 {
  bottom: 10px;
  left: -40px;
  animation: floatY 5s ease-in-out infinite;
}

.float-card-2 {
  top: 20px;
  right: -30px;
  animation: floatY 6.5s ease-in-out infinite reverse;
}

.float-card-3 {
  top: 50%;
  left: -50px;
  transform: translateY(-50%);
  animation: floatY3 7s ease-in-out infinite;
}

@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes floatY3 {
  0%,
  100% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(calc(-50% - 10px));
  }
}

.fc-label {
  color: var(--muted);
  font-size: 10px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fc-value {
  font-size: 18px;
  font-weight: 800;
}

.fc-value.pos {
  color: #4ade80;
}

.fc-value.cyan {
  color: var(--cyan);
}

.fc-value.silver {
  color: var(--silver2);
}

.fc-tag {
  font-size: 10px;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: 20px;
  display: inline-block;
}

.fc-tag.up {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.fc-tag.info {
  background: rgba(79, 195, 247, 0.12);
  color: var(--cyan);
}

/* ── Glass cards ── */

.glass {
  background: rgba(8, 20, 40, 0.5);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.glass-strong {
  background: rgba(8, 20, 40, 0.7);
  backdrop-filter: blur(30px);
  border: 1px solid var(--border2);
  border-radius: 20px;
}

/* ── Trust bar ── */

.trust-bar {
  padding: 32px 60px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.trust-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.trust-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.trust-logo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(216, 232, 248, 0.25);
  text-transform: uppercase;
}

/* ── Sections ── */

section {
  padding: 80px 60px;
  scroll-margin-top: 92px;
}

.landing-placeholder-section {
  padding-top: 40px;
}

.landing-placeholder-head {
  max-width: 620px;
}

.landing-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 34px;
}

.landing-placeholder-card {
  padding: 26px;
}

.landing-placeholder-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--silver2);
  margin-bottom: 10px;
}

.landing-placeholder-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.section-title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
}

.section-title span {
  background: linear-gradient(135deg, var(--cyan), var(--silver2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-sub {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin-top: 14px;
  max-width: 520px;
}

/* ── Features ── */

.features-head {
  text-align: center;
  margin-bottom: 60px;
}

.features-head .section-sub {
  margin: 14px auto 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  cursor: default;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 195, 247, 0.4);
  box-shadow: 0 0 30px rgba(79, 195, 247, 0.07);
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.icon-cyan {
  background: rgba(79, 195, 247, 0.1);
  box-shadow: 0 0 16px rgba(79, 195, 247, 0.15);
}

.icon-steel {
  background: rgba(42, 82, 152, 0.2);
  box-shadow: 0 0 16px rgba(42, 82, 152, 0.2);
}

.icon-mix {
  background: linear-gradient(135deg, rgba(79, 195, 247, 0.08), rgba(42, 82, 152, 0.15));
}

.feature-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--silver2);
}

.feature-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

/* ── How it works ── */

.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
  position: relative;
}

.how-grid::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.4;
}

.how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  gap: 16px;
}

.step-num {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--cyan);
  background: rgba(8, 20, 40, 0.8);
  border: 1px solid rgba(79, 195, 247, 0.4);
  box-shadow: 0 0 24px rgba(79, 195, 247, 0.15);
  position: relative;
  z-index: 1;
}

.step-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--silver2);
}

.step-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
}

/* ── Profit Widget ── */

.profit-section {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.profit-widget {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pw-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pw-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--silver2);
}

.pw-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #4ade80;
}

.pw-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: pulse-dot 1.5s infinite;
}

.scenarios {
  display: flex;
  gap: 8px;
}

.scenario-btn {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  transition: all 0.2s;
}

.scenario-btn.active {
  background: rgba(79, 195, 247, 0.1);
  border-color: var(--cyan);
  color: var(--silver2);
}

.chart-wrapper {
  position: relative;
  height: 220px;
}

.metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.metric-box {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(5, 13, 31, 0.6);
  border: 1px solid var(--border);
}

.metric-label {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-val {
  font-size: 20px;
  font-weight: 800;
}

.metric-val.cyan {
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(79, 195, 247, 0.4);
}

.metric-val.steel {
  color: #7eb8e8;
}

.metric-val.green {
  color: #4ade80;
}

.metric-change {
  font-size: 10px;
  margin-top: 3px;
}

.metric-change.up {
  color: #4ade80;
}

/* ── Testimonials ── */

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.testi-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testi-stars {
  color: var(--cyan);
  font-size: 13px;
  letter-spacing: 2px;
}

.testi-text {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  font-style: italic;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.testi-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  background: linear-gradient(135deg, var(--cyan), var(--steel));
}

.testi-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--silver2);
}

.testi-role {
  font-size: 11px;
  color: var(--muted);
}

/* ── Stats Section ── */

.stats-banner {
  margin: 0 60px;
  padding: 50px 60px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(10, 26, 48, 0.9), rgba(8, 20, 40, 0.95));
  border: 1px solid rgba(79, 195, 247, 0.2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.stats-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(79, 195, 247, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(42, 82, 152, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.stat-item {
  text-align: center;
  padding: 20px;
  border-right: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.stat-item:last-child {
  border-right: none;
}

.stat-item-val {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1.5px;
  background: linear-gradient(135deg, var(--cyan), var(--silver2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-item-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: 0.5px;
}

/* ── CTA ── */

.cta-banner {
  margin: 80px 60px 0;
  padding: 60px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(10, 26, 48, 0.95), rgba(8, 20, 40, 0.9));
  border: 1px solid rgba(79, 195, 247, 0.25);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(79, 195, 247, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(42, 82, 152, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

.cta-banner h2 {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1px;
  position: relative;
  z-index: 1;
  color: var(--silver2);
}

.cta-banner h2 span {
  background: linear-gradient(135deg, var(--cyan), var(--silver2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta-banner p {
  color: var(--muted);
  font-size: 16px;
  max-width: 440px;
  position: relative;
  z-index: 1;
}

.cta-actions {
  display: flex;
  gap: 14px;
  position: relative;
  z-index: 1;
}

/* ── Footer ── */

footer {
  padding: 32px 60px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 80px;
}

.footer-copy {
  font-size: 13px;
  color: var(--muted);
}

.footer-links {
  display: flex;
  gap: 28px;
}

.footer-links a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
}

.footer-logo {
  display: flex;
  align-items: center;
}

.footer-logo-img {
  width: 124px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(79, 195, 247, 0.18));
}

/* ── Animations ── */

.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: none;
}

/* ── Responsive ── */

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 60px 40px;
  }

  .hero-right {
    margin-top: 40px;
  }

  .loop-wrap {
    width: 350px;
    height: 350px;
  }

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

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

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

  .profit-section {
    grid-template-columns: 1fr;
  }

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

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

  nav,
  section,
  .trust-bar,
  .stats-banner {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 40px 20px;
  }

  .hero h1 {
    font-size: 36px;
  }

  .section-title {
    font-size: 28px;
  }

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

  .landing-placeholder-grid {
    grid-template-columns: 1fr;
  }

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

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

  .stats-banner {
    grid-template-columns: 1fr;
  }

  .nav-links {
    gap: 16px;
    font-size: 12px;
  }

  nav,
  section,
  .trust-bar,
  .stats-banner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ═══════════════════════════════════════════════
   HOW IT WORKS — PREMIUM REDESIGN
═══════════════════════════════════════════════ */

.hiw-section {
  position: relative;
  padding: 110px 24px;
  overflow: hidden;
}

.hiw-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: hiwGridDrift 24s linear infinite;
  pointer-events: none;
}

@keyframes hiwGridDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(48px, 48px); }
}

.hiw-bg-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(0, 212, 255, 0.06) 0%,
    rgba(0, 255, 136, 0.04) 40%,
    transparent 70%);
  pointer-events: none;
}

.hiw-shell {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.hiw-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00d4ff, #00ff88);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 18px;
}

.hiw-title {
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  color: #f0f6ff;
  margin-bottom: 14px;
  letter-spacing: -0.025em;
}

.hiw-grad {
  background: linear-gradient(90deg, #00d4ff 0%, #00ff88 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hiw-sub {
  font-size: 15px;
  color: rgba(180, 200, 235, 0.72);
  max-width: 560px;
  margin: 0 auto 64px;
  line-height: 1.7;
}

/* connector */

.hiw-steps-wrap { position: relative; }

.hiw-connector {
  position: absolute;
  top: 64px;
  left: calc(12.5% + 14px);
  right: calc(12.5% + 14px);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.15), rgba(0,255,136,0.15), transparent);
  overflow: hidden;
  pointer-events: none;
}

.hiw-connector::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, #00d4ff 30%, #00ff88 70%, transparent 100%);
  animation: hiwConnFlow 3s linear infinite;
  opacity: 0.85;
}

@keyframes hiwConnFlow {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* step grid */

.hiw-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
}

/* card base */

.hiw-card {
  position: relative;
  background: rgba(8, 18, 34, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 32px 24px 28px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
  cursor: default;
}

.hiw-card-cyan  { border: 1px solid rgba(0, 212, 255, 0.15); }

.hiw-card-green { border: 1px solid rgba(0, 255, 136, 0.15); }

.hiw-card-visible {
  opacity: 1;
  transform: translateY(0);
}

.hiw-card:hover { transform: translateY(-8px) !important; }

.hiw-card-cyan:hover {
  border-color: rgba(0, 212, 255, 0.55);
  box-shadow: 0 22px 52px rgba(0,212,255,0.12), inset 0 0 0 1px rgba(0,212,255,0.08);
}

.hiw-card-green:hover {
  border-color: rgba(0, 255, 136, 0.55);
  box-shadow: 0 22px 52px rgba(0,255,136,0.12), inset 0 0 0 1px rgba(0,255,136,0.08);
}

/* watermark */

.hiw-card-wm {
  position: absolute;
  top: -12px; right: 8px;
  font-size: 88px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.hiw-card-cyan  .hiw-card-wm { color: rgba(0, 212, 255, 0.045); }

.hiw-card-green .hiw-card-wm { color: rgba(0, 255, 136, 0.045); }

/* step number tag */

.hiw-step-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 20px;
}

.hiw-step-num::before {
  content: '';
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  opacity: 0.5;
}

.hiw-card-cyan  .hiw-step-num { color: #00d4ff; }

.hiw-card-green .hiw-step-num { color: #00ff88; }

/* icon */

.hiw-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
  transition: transform 0.28s ease;
}

.hiw-card-cyan  .hiw-icon { background: rgba(0,212,255,0.08); border: 1px solid rgba(0,212,255,0.2); }

.hiw-card-green .hiw-icon { background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.2); }

.hiw-card:hover .hiw-icon { transform: scale(1.1) rotate(-4deg); }

/* card text */

.hiw-card-name {
  font-size: 20px;
  font-weight: 800;
  color: #f0f6ff;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.hiw-card-desc {
  font-size: 13px;
  color: rgba(148, 163, 184, 0.85);
  line-height: 1.65;
}

/* shimmer overlay on hover */

.hiw-card::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.025) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.hiw-card:hover::after { opacity: 1; }

@media (max-width: 900px) {
  .hiw-steps    { grid-template-columns: repeat(2, 1fr); }
  .hiw-connector { display: none; }
}

@media (max-width: 540px) {
  .hiw-steps { grid-template-columns: 1fr; }
}

/* New prop-firm story sections */

.common-problems-section,
.comparison-section,
.why-hedgio-section {
  position: relative;
  overflow: hidden;
}

.comparison-section::before,
.why-hedgio-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(79, 195, 247, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 195, 247, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at center, #000 36%, transparent 78%);
  pointer-events: none;
}

.comparison-section::after,
.why-hedgio-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(79, 195, 247, 0.07), transparent 46%),
    radial-gradient(ellipse at 75% 55%, rgba(42, 82, 152, 0.11), transparent 50%);
  pointer-events: none;
}

.problem-section-head,
.comparison-head,
.why-head {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.problem-section-head .section-sub,
.comparison-head .section-sub,
.why-head .section-sub {
  margin-left: auto;
  margin-right: auto;
}

.problem-map {
  position: relative;
  min-height: 560px;
  max-width: 1120px;
  margin: 38px auto 0;
  isolation: isolate;
}

.problem-map::before {
  content: '';
  position: absolute;
  inset: 40px 8px 42px;
  z-index: -1;
  border: 1px solid rgba(79, 195, 247, 0.06);
  background-image:
    linear-gradient(rgba(79, 195, 247, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 195, 247, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 74%);
}

.problem-wires {
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  height: 470px;
  overflow: visible;
  fill: none;
  stroke: rgba(79, 195, 247, 0.52);
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(79, 195, 247, 0.28));
  pointer-events: none;
}

.problem-wires circle {
  fill: #d9f4ff;
  stroke: rgba(79, 195, 247, 0.9);
  stroke-width: 2;
}

.problem-hub {
  position: absolute;
  top: 28px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(8, 20, 40, 0.96), rgba(4, 10, 24, 0.96));
  border: 1px solid rgba(79, 195, 247, 0.42);
  box-shadow:
    0 0 0 5px rgba(79, 195, 247, 0.055),
    inset 0 0 24px rgba(79, 195, 247, 0.1),
    0 0 28px rgba(79, 195, 247, 0.18);
  color: var(--silver2);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.problem-node {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 18px 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(8, 20, 40, 0.95), rgba(5, 13, 31, 0.96));
  border: 1px solid rgba(79, 195, 247, 0.3);
  box-shadow:
    0 0 0 4px rgba(79, 195, 247, 0.04),
    inset 0 0 28px rgba(79, 195, 247, 0.055),
    0 18px 50px rgba(0, 0, 0, 0.2);
  color: rgba(232, 240, 255, 0.84);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.problem-node-fees {
  top: 330px;
  left: 0;
  width: 330px;
}

.problem-node-mt {
  top: 176px;
  left: 270px;
  width: 320px;
}

.problem-node-vps {
  top: 262px;
  right: 0;
  width: 360px;
}

.problem-node-rules {
  top: 410px;
  left: 50%;
  width: 430px;
  transform: translateX(-50%);
}

.problem-resolution {
  max-width: 900px;
  margin: 24px auto 0;
  padding: 22px 34px;
  border-radius: 999px;
  border: 1px solid rgba(79, 195, 247, 0.2);
  background:
    linear-gradient(135deg, rgba(8, 20, 40, 0.82), rgba(5, 43, 105, 0.78)),
    linear-gradient(90deg, rgba(79, 195, 247, 0.08), rgba(42, 82, 152, 0.12));
  box-shadow: inset 0 0 34px rgba(79, 195, 247, 0.08), 0 20px 70px rgba(0, 0, 0, 0.22);
  text-align: center;
}

.problem-resolution p {
  color: rgba(232, 240, 255, 0.88);
  font-size: 15px;
  line-height: 1.85;
}

.problem-resolution strong {
  color: var(--silver2);
}

.problem-resolution span {
  color: var(--cyan);
}

.comparison-section {
  padding-top: 110px;
  padding-bottom: 100px;
}

.comparison-watermark {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  width: max-content;
  color: rgba(0, 94, 255, 0.13);
  font-size: 118px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.comparison-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  max-width: 1080px;
  margin: 76px auto 0;
}

.comparison-card {
  position: relative;
  min-height: 320px;
  padding: 74px 48px 42px;
  border-radius: 18px;
  overflow: visible;
}

.comparison-card-good {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 119, 255, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(7, 28, 64, 0.82), rgba(5, 13, 31, 0.9));
  border: 1px solid rgba(0, 105, 255, 0.3);
  box-shadow: inset 0 0 50px rgba(0, 105, 255, 0.08), 0 22px 70px rgba(0, 0, 0, 0.2);
}

.comparison-card-bad {
  background:
    radial-gradient(ellipse at 55% 45%, rgba(79, 195, 247, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(8, 20, 40, 0.82), rgba(5, 13, 31, 0.92));
  border: 1px solid rgba(79, 195, 247, 0.18);
  box-shadow: inset 0 0 54px rgba(79, 195, 247, 0.045), 0 22px 70px rgba(0, 0, 0, 0.2);
}

.comparison-tab {
  position: absolute;
  top: -27px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  color: var(--silver2);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.comparison-card-good .comparison-tab {
  background: linear-gradient(135deg, #033d94, #075ed1);
  box-shadow: 0 0 36px rgba(0, 105, 255, 0.38);
  border: 1px solid rgba(79, 195, 247, 0.22);
}

.comparison-card-bad .comparison-tab {
  background: linear-gradient(135deg, rgba(8, 20, 40, 0.96), rgba(18, 50, 92, 0.94));
  box-shadow: 0 0 36px rgba(79, 195, 247, 0.18);
  border: 1px solid rgba(79, 195, 247, 0.28);
}

.comparison-card ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
  list-style: none;
}

.comparison-card li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  color: rgba(232, 240, 255, 0.82);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.comparison-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.comparison-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.comparison-icon-good {
  color: #9dd7ff;
  background: rgba(0, 105, 255, 0.16);
  border: 1px solid rgba(79, 195, 247, 0.48);
  box-shadow: 0 0 18px rgba(0, 105, 255, 0.26);
}

.comparison-icon-bad {
  color: rgba(216, 232, 248, 0.72);
  background: rgba(79, 195, 247, 0.07);
  border: 1px solid rgba(79, 195, 247, 0.26);
  box-shadow: 0 0 18px rgba(79, 195, 247, 0.13);
}

.why-hedgio-section {
  padding-top: 80px;
}

.why-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  max-width: 1040px;
  margin: 52px auto 0;
  align-items: start;
}

.why-card {
  position: relative;
  min-height: 312px;
  padding: 34px 28px 30px;
  border-radius: 18px;
  border: 1px solid rgba(0, 105, 255, 0.22);
  background: linear-gradient(180deg, rgba(8, 20, 40, 0.72), rgba(5, 13, 31, 0.84));
  box-shadow: inset 0 -4px 0 rgba(0, 105, 255, 0.2), 0 22px 70px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.why-card:nth-child(3n + 2) {
  margin-top: 48px;
}

.why-card:hover {
  transform: translateY(-6px);
  border-color: rgba(79, 195, 247, 0.45);
  box-shadow: inset 0 -4px 0 rgba(0, 105, 255, 0.24), 0 26px 80px rgba(0, 105, 255, 0.12);
}

.why-icon-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 124px;
  margin-bottom: 18px;
  overflow: hidden;
}

.why-icon-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(0, 105, 255, 0.25);
  stroke-width: 1;
}

.why-icon {
  position: relative;
  z-index: 1;
  width: 66px;
  height: 66px;
  fill: none;
  stroke: rgba(232, 240, 255, 0.9);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 14px rgba(79, 195, 247, 0.18));
}

.why-card-title {
  color: #0b6fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 14px;
}

.why-card p {
  max-width: 250px;
  color: rgba(216, 232, 248, 0.72);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.65;
}

@media (max-width: 1100px) {
  .problem-node-fees {
    left: 10px;
  }

  .problem-node-mt {
    left: 24%;
  }

  .problem-node-vps {
    right: 10px;
  }

  .comparison-grid {
    gap: 32px;
  }
}

@media (max-width: 900px) {
  .problem-map {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
    margin-top: 34px;
  }

  .problem-map::before {
    inset: 0;
  }

  .problem-wires {
    display: none;
  }

  .problem-hub,
  .problem-node,
  .problem-node-rules {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    transform: none;
  }

  .problem-hub {
    justify-self: center;
    width: fit-content;
    max-width: 100%;
  }

  .comparison-watermark {
    font-size: 76px;
  }

  .comparison-grid,
  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-card:nth-child(3n + 2) {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .common-problems-section,
  .comparison-section,
  .why-hedgio-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .problem-node {
    min-height: 76px;
    padding: 16px 20px;
    border-radius: 22px;
  }

  .problem-resolution {
    border-radius: 22px;
    padding: 20px;
  }

  .comparison-watermark {
    top: 22px;
    font-size: 48px;
  }

  .comparison-grid {
    margin-top: 54px;
  }

  .comparison-card {
    padding: 66px 22px 32px;
    border-radius: 16px;
  }

  .comparison-tab {
    min-width: 210px;
    min-height: 48px;
    font-size: 13px;
  }

  .comparison-card li {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
  }

  .comparison-icon {
    width: 34px;
    height: 34px;
  }

  .why-card {
    min-height: 0;
    padding: 30px 22px;
  }
}

/* Core capabilities premium refresh */

.features-section {
  position: relative;
  padding-top: 70px;
  overflow: hidden;
  isolation: isolate;
}

.features-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(79, 195, 247, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 195, 247, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at center, #000 34%, transparent 78%);
  pointer-events: none;
}

.features-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 18% 28%, rgba(79, 195, 247, 0.08), transparent 42%),
    radial-gradient(ellipse at 78% 62%, rgba(0, 105, 255, 0.1), transparent 48%);
  pointer-events: none;
}

.features-head {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 58px;
}

.features-head .section-sub {
  margin: 14px auto 0;
}

.feature-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}

.feature-card {
  position: relative;
  min-height: 270px;
  padding: 34px 30px 30px;
  border-radius: 18px;
  border: 1px solid rgba(79, 195, 247, 0.18);
  background:
    radial-gradient(ellipse at 22% 0%, rgba(79, 195, 247, 0.13), transparent 46%),
    linear-gradient(180deg, rgba(8, 20, 40, 0.78), rgba(5, 13, 31, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 -1px 0 rgba(79, 195, 247, 0.08),
    0 24px 70px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  cursor: default;
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(79, 195, 247, 0.12), transparent 34%),
    linear-gradient(90deg, rgba(79, 195, 247, 0.42), rgba(0, 105, 255, 0.08), transparent);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.feature-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 195, 247, 0.76), transparent);
  opacity: 0.45;
}

.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(79, 195, 247, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(79, 195, 247, 0.14),
    0 30px 90px rgba(0, 105, 255, 0.13);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card-number {
  position: absolute;
  right: 24px;
  top: 18px;
  color: rgba(79, 195, 247, 0.08);
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.feature-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.feature-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 35% 25%, rgba(79, 195, 247, 0.35), transparent 52%),
    rgba(79, 195, 247, 0.09);
  border: 1px solid rgba(79, 195, 247, 0.22);
  box-shadow: 0 0 22px rgba(79, 195, 247, 0.14);
  font-size: 0;
}

.feature-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: #9ddfff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s, stroke 0.25s;
}

.feature-card:hover .feature-icon svg {
  transform: scale(1.08) rotate(-3deg);
  stroke: var(--silver2);
}

.feature-badge {
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(79, 195, 247, 0.08);
  border: 1px solid rgba(79, 195, 247, 0.2);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feature-title {
  position: relative;
  z-index: 1;
  max-width: 280px;
  font-size: 20px;
  font-weight: 800;
  color: var(--silver2);
  letter-spacing: 0;
  line-height: 1.25;
}

.feature-desc {
  position: relative;
  z-index: 1;
  max-width: 440px;
  font-size: 13px;
  color: rgba(216, 232, 248, 0.58);
  line-height: 1.75;
}

.feature-card-line {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 2px;
  margin-top: auto;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(79, 195, 247, 0.65), rgba(0, 105, 255, 0.18), transparent);
  opacity: 0.7;
}

@media (max-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .features-section {
    padding-top: 64px;
  }

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

  .feature-card {
    min-height: 0;
    padding: 30px 24px 26px;
  }
}

/* i18n safety: prevent empty grids from creating blank gaps */

.feature-grid:empty,
.landing-placeholder-grid:empty,
.testi-grid:empty,
.why-grid:empty,
.comparison-grid:empty,
.hiw-steps:empty {
  display: none;
}

/* Prevent sections from taking space when content is missing */

.features-section:has(.feature-grid:empty),
.landing-placeholder-section:has(.landing-placeholder-grid:empty),
.testi-grid:empty,
.why-hedgio-section:has(.why-grid:empty),
.comparison-section:has(.comparison-grid:empty),
.hiw-section:has(.hiw-steps:empty) {
  padding: 0;
  min-height: 0;
}

/* Responsive: allow translated text to wrap naturally */

.feature-card,
.landing-placeholder-card,
.why-card,
.testi-card,
.hiw-card {
  word-break: break-word;
  overflow-wrap: break-word;
}

.comparison-tab,
.section-title,
.section-sub {
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 767px) {
	.ticker-inner{
		gap:0;
	}
	.navbar{
		padding:0.5rem 1rem;
	}
	.navbar .logo-img{
		width:125px;
	}
	.chart-wrapper canvas{
		width: 100% !important;
	}
}

/* ============================================
   AUTH PAGES - MODERN DARK THEME STYLING
   ============================================ */

.auth-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(5, 13, 31, 0.96) 0%, rgba(4, 9, 24, 1) 100%);
  color: var(--text);
  font-family: var(--font);
}

.auth-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(440px, 540px) minmax(440px, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  width: min(1280px, calc(100% - 56px));
  margin: 0 auto;
  padding: clamp(24px, 4vh, 44px) 0;
}

.auth-shell-register {
  grid-template-columns: minmax(500px, 600px) minmax(420px, 1fr);
}

.auth-form-panel {
  width: 100%;
}

.auth-visual-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  align-self: center;
  overflow: visible;
}

.auth-visual-panel .loop-wrap {
  width: clamp(420px, 36vw, 520px);
  height: clamp(420px, 36vw, 520px);
}

.auth-card {
  width: 100%;
  max-width: none;
  padding: clamp(38px, 4vw, 48px);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(8, 20, 40, 0.82), rgba(5, 13, 31, 0.9)),
    rgba(8, 20, 40, 0.72);
  border: 1px solid rgba(79, 195, 247, 0.22);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.45),
    0 0 70px rgba(42, 82, 152, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(28px);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.auth-card:hover {
  transform: translateY(-3px);
  border-color: rgba(79, 195, 247, 0.42);
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.52),
    0 0 90px rgba(79, 195, 247, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.auth-card-register {
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 34px;
  scrollbar-width: thin;
  scrollbar-color: rgba(79, 195, 247, 0.45) rgba(5, 13, 31, 0.35);
}

.auth-card h2 {
  color: var(--silver2) !important;
  font-size: 30px !important;
  letter-spacing: -0.4px;
  background: linear-gradient(135deg, var(--silver2), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.auth-card > p {
  color: rgba(216, 232, 248, 0.62) !important;
}

.auth-card label {
  color: rgba(216, 232, 248, 0.76) !important;
  letter-spacing: 0.08em;
}

.auth-card input {
  background: rgba(5, 13, 31, 0.72) !important;
  border: 1px solid rgba(79, 195, 247, 0.18) !important;
  color: var(--silver2) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.auth-card input:focus {
  border-color: rgba(79, 195, 247, 0.55) !important;
  box-shadow:
    0 0 0 3px rgba(79, 195, 247, 0.1),
    0 0 22px rgba(79, 195, 247, 0.08) !important;
  background: rgba(8, 20, 40, 0.9) !important;
}

.auth-card input::placeholder {
  color: rgba(216, 232, 248, 0.32) !important;
}

.auth-card button[type='submit'] {
  background: linear-gradient(135deg, #1a4080, var(--steel), #3a6ab0) !important;
  border: 1px solid rgba(79, 195, 247, 0.46) !important;
  color: var(--silver2) !important;
  box-shadow: 0 0 28px rgba(42, 82, 152, 0.45), 0 0 60px rgba(79, 195, 247, 0.08) !important;
}

.auth-card button[type='submit']:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  border-color: var(--cyan2) !important;
  box-shadow: 0 0 40px rgba(79, 195, 247, 0.26), 0 0 80px rgba(42, 82, 152, 0.3) !important;
}

.auth-card a {
  color: var(--cyan) !important;
  text-decoration: none !important;
}

.auth-card a:hover {
  color: var(--silver2) !important;
}

.auth-card p[style*='ef4444'] {
  color: #f87171 !important;
}

.auth-card > div:last-child {
  border-top-color: rgba(79, 195, 247, 0.12) !important;
}

.auth-card > div:last-child p {
  color: rgba(216, 232, 248, 0.52) !important;
}

/* Login Background */

.login-bg {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 
              0 0 40px rgba(79, 70, 229, 0.1);
  background: linear-gradient(135deg, #0D0D27 0%, #1a1a3f 100%);
  backdrop-filter: blur(10px);
}

/* Text Color Class */

.text-color-gray {
  color: #99A1AF;
}

/* Error Message */

.errormsg {
  color: #ef4444;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Button Background */

.btn-background {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
  position: relative;
  overflow: hidden;
}

.btn-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-background:hover::before {
  left: 100%;
}

.btn-background:hover {
  background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%);
  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.6);
  transform: translateY(-2px);
}

.btn-background:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

/* Form Input Focus Effects */

input:focus,
select:focus {
  outline: none;
}

/* Input Field Styling */

input[type="email"],
input[type="password"],
input[type="tel"],
input[type="text"],
select {
  transition: all 0.3s ease;
}

input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="tel"]::placeholder,
input[type="text"]::placeholder {
  color: #5a6370;
  opacity: 1;
}

/* Smooth Transitions */

* {
  transition: background-color 0.2s ease, border-color 0.2s ease, 
              box-shadow 0.2s ease, transform 0.2s ease;
}

/* Loading Spinner Animation */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Fade in animation */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover Scale Effects */

button:hover:not(:disabled) {
  transform: scale(1.02);
}

button:active:not(:disabled) {
  transform: scale(0.98);
}

/* Field Error Border */

input.border-red-500,
select.border-red-500 {
  border-color: #ef4444 !important;
  background-color: #1a0f0f;
}

input.border-red-500:focus,
select.border-red-500:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Focus Ring */

input:focus:not(.border-red-500),
select:focus:not(.border-red-500) {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}

/* Link Styling */

a {
  transition: all 0.2s ease;
}

a:hover {
  text-decoration: underline;
}

/* Border styling */

.border-t {
  border-top-color: #1E1E3F;
}

/* Responsive adjustments */

@media (max-width: 640px) {
  .login-bg {
    max-width: 95vw;
    padding: 1.25rem;
  }
}

@media (max-width: 1024px) {
  .auth-shell,
  .auth-shell-register {
    grid-template-columns: 1fr;
    gap: 34px;
    width: min(680px, calc(100% - 32px));
    min-height: auto;
    padding: 28px 0;
  }

  .auth-form-panel {
    order: 1;
  }

  .auth-visual-panel {
    order: 2;
  }

  .auth-visual-panel .loop-wrap {
    width: min(430px, 78vw);
    height: min(430px, 78vw);
  }
}

@media (max-width: 720px) {
  .auth-shell,
  .auth-shell-register {
    align-items: start;
  }

  .auth-card,
  .auth-card-register {
    padding: 28px;
    border-radius: 18px;
  }

  .auth-card-register {
    max-height: none;
    overflow: visible;
  }

  .auth-visual-panel {
    display: none;
  }
}

/* Dark mode specific adjustments */

@supports (color: var(--color)) {
  :root {
    --bg-dark: #00021D;
    --bg-card: #0D0D27;
    --bg-input: #151E38;
    --border-dark: #1E1E3F;
    --text-primary: #FFFFFF;
    --text-secondary: #99A1AF;
    --accent-primary: #4f46e5;
    --accent-hover: #4338ca;
  }
}

/* Button group styling */

.button-group {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.button-group button {
  flex: 1;
}

/* Form spacing */

.form-space {
  margin-bottom: 0.75rem;
}

/* Success state */

.success-state {
  border-color: #10b981 !important;
  background-color: #064e3b;
}

/* Warning state */

.warning-state {
  border-color: #f59e0b !important;
  background-color: #78350f;
}

/* Final auth overrides: keep these after legacy global input rules. */

.auth-page .auth-form-panel {
  align-self: center;
}

.auth-page .auth-visual-panel .hero-right {
  width: 100%;
  min-height: auto;
  margin-top: 0;
}

.auth-page .auth-visual-panel .float-card {
  transform-origin: center;
}

.auth-page .auth-card input,
.auth-page .auth-card input[type='email'],
.auth-page .auth-card input[type='password'],
.auth-page .auth-card input[type='tel'],
.auth-page .auth-card input[type='text'] {
  background-color: rgba(5, 13, 31, 0.86) !important;
  background-image: linear-gradient(180deg, rgba(8, 20, 40, 0.95), rgba(5, 13, 31, 0.88)) !important;
  border: 1px solid rgba(79, 195, 247, 0.24) !important;
  color: #e8f0ff !important;
  -webkit-text-fill-color: #e8f0ff !important;
  caret-color: var(--cyan) !important;
  opacity: 1 !important;
}

.auth-page .auth-card input::placeholder {
  color: rgba(200, 216, 240, 0.46) !important;
  -webkit-text-fill-color: rgba(200, 216, 240, 0.46) !important;
  opacity: 1 !important;
}

.auth-page .auth-card input:focus,
.auth-page .auth-card input[type='email']:focus,
.auth-page .auth-card input[type='password']:focus,
.auth-page .auth-card input[type='tel']:focus,
.auth-page .auth-card input[type='text']:focus {
  background-color: rgba(8, 20, 40, 0.96) !important;
  border-color: rgba(79, 195, 247, 0.68) !important;
  box-shadow:
    0 0 0 3px rgba(79, 195, 247, 0.12),
    0 0 24px rgba(79, 195, 247, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.auth-page .auth-card input:-webkit-autofill,
.auth-page .auth-card input:-webkit-autofill:hover,
.auth-page .auth-card input:-webkit-autofill:focus,
.auth-page .auth-card input:-webkit-autofill:active {
  border: 1px solid rgba(79, 195, 247, 0.34) !important;
  -webkit-text-fill-color: #e8f0ff !important;
  caret-color: var(--cyan) !important;
  box-shadow: 0 0 0 1000px #071426 inset !important;
  transition: background-color 9999s ease-out 0s;
}

.auth-page .auth-card input:-moz-autofill {
  background-color: #071426 !important;
  color: #e8f0ff !important;
}

.auth-page .auth-card button[type='button'] {
  color: var(--cyan) !important;
}

.auth-card-register::-webkit-scrollbar {
  width: 8px;
}

.auth-card-register::-webkit-scrollbar-track {
  background: rgba(5, 13, 31, 0.35);
  border-radius: 999px;
}

.auth-card-register::-webkit-scrollbar-thumb {
  background: rgba(79, 195, 247, 0.42);
  border-radius: 999px;
}

@media (max-height: 760px) and (min-width: 1025px) {
  .auth-shell {
    padding: 18px 0;
  }

  .auth-card-login {
    padding: 28px;
  }

  .auth-card-register {
    max-height: calc(100dvh - 36px);
    padding: 26px;
  }

  .auth-visual-panel .loop-wrap {
    width: clamp(360px, 32vw, 460px);
    height: clamp(360px, 32vw, 460px);
  }
}

/* Premium auth finish */

.auth-page::before,
.auth-page::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

.auth-page::before {
  inset: 0;
  background:
    radial-gradient(circle at 42% 50%, rgba(79, 195, 247, 0.052), transparent 28%),
    linear-gradient(120deg, rgba(79, 195, 247, 0.024), transparent 28%, rgba(42, 82, 152, 0.042) 72%, transparent);
  mix-blend-mode: screen;
}

.auth-page::after {
  width: 560px;
  height: 560px;
  right: max(-180px, -10vw);
  top: 50%;
  transform: translateY(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(79, 195, 247, 0.09), rgba(42, 82, 152, 0.045) 42%, transparent 68%);
  filter: blur(18px);
}

.auth-shell {
  isolation: isolate;
}

.auth-form-panel {
  position: relative;
}

.auth-form-panel::before {
  content: '';
  position: absolute;
  inset: 18px -18px;
  border-radius: 30px;
  background: radial-gradient(circle at 50% 0%, rgba(79, 195, 247, 0.105), transparent 56%);
  filter: blur(26px);
  opacity: 0.58;
  pointer-events: none;
}

.auth-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(11, 30, 55, 0.84), rgba(5, 13, 31, 0.92) 58%, rgba(3, 9, 20, 0.96)),
    rgba(8, 20, 40, 0.78) !important;
  border: 1px solid rgba(126, 184, 232, 0.24) !important;
  box-shadow:
    0 30px 86px rgba(0, 0, 0, 0.5),
    0 0 54px rgba(42, 82, 152, 0.14),
    0 0 22px rgba(79, 195, 247, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(79, 195, 247, 0.05) !important;
}

.auth-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.085), transparent 22%, transparent 78%, rgba(79, 195, 247, 0.08)),
    radial-gradient(circle at 18% 0%, rgba(79, 195, 247, 0.11), transparent 34%);
  opacity: 0.68;
}

.auth-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 23px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.035);
}

.auth-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 195, 247, 0.5) !important;
  box-shadow:
    0 34px 96px rgba(0, 0, 0, 0.55),
    0 0 64px rgba(79, 195, 247, 0.12),
    0 0 30px rgba(42, 82, 152, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.auth-card > * {
  position: relative;
  z-index: 1;
}

.auth-card h2 {
  margin-bottom: 10px !important;
  font-size: clamp(34px, 3.2vw, 42px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 0 0 26px rgba(79, 195, 247, 0.14);
}

.auth-card > p {
  margin-bottom: 34px !important;
  font-size: 15px !important;
  color: rgba(216, 232, 248, 0.68) !important;
  line-height: 1.6 !important;
}

.auth-card form {
  gap: 22px !important;
}

.auth-card-register form {
  gap: 16px !important;
}

.auth-card label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px !important;
  color: rgba(216, 232, 248, 0.72) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
}

.auth-card label::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(79, 195, 247, 0.75);
  opacity: 0.72;
}

.auth-page .auth-card input,
.auth-page .auth-card input[type='email'],
.auth-page .auth-card input[type='password'],
.auth-page .auth-card input[type='tel'],
.auth-page .auth-card input[type='text'] {
  min-height: 46px;
  padding: 16px 17px !important;
  font-size: 15.5px !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 13px !important;
  background:
    linear-gradient(180deg, rgba(10, 26, 48, 0.96), rgba(5, 13, 31, 0.94)) !important;
  border: 1px solid rgba(126, 184, 232, 0.23) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 -14px 34px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(79, 195, 247, 0.03) !important;
}

.auth-page .auth-card input[type='password'] {
  padding-right: 52px !important;
}

.auth-page .auth-card input:hover {
  border-color: rgba(126, 184, 232, 0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 22px rgba(79, 195, 247, 0.055) !important;
}

.auth-page .auth-card input:focus,
.auth-page .auth-card input[type='email']:focus,
.auth-page .auth-card input[type='password']:focus,
.auth-page .auth-card input[type='tel']:focus,
.auth-page .auth-card input[type='text']:focus {
  border-color: rgba(0, 229, 255, 0.7) !important;
  background:
    linear-gradient(180deg, rgba(11, 32, 58, 0.98), rgba(5, 15, 31, 0.98)) !important;
  box-shadow:
    0 0 0 3px rgba(79, 195, 247, 0.12),
    0 0 28px rgba(79, 195, 247, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.auth-page .auth-card input::placeholder {
  color: rgba(200, 216, 240, 0.42) !important;
  font-weight: 400;
}

.auth-page .auth-card input:-webkit-autofill,
.auth-page .auth-card input:-webkit-autofill:hover,
.auth-page .auth-card input:-webkit-autofill:focus,
.auth-page .auth-card input:-webkit-autofill:active {
  -webkit-text-fill-color: #e8f0ff !important;
  box-shadow:
    0 0 0 1000px #071426 inset,
    0 0 0 1px rgba(79, 195, 247, 0.34) inset !important;
  caret-color: var(--cyan) !important;
}

/* Catch-all: covers pages without .auth-card (e.g. ForgotPassword) */

.auth-page input:-webkit-autofill,
.auth-page input:-webkit-autofill:hover,
.auth-page input:-webkit-autofill:focus,
.auth-page input:-webkit-autofill:active {
  -webkit-text-fill-color: #e8f0ff !important;
  box-shadow: 0 0 0 1000px #0d1a30 inset !important;
  caret-color: #4FC3F7 !important;
  transition: background-color 9999s ease-out 0s;
}

.auth-page .auth-card button[type='button'] {
  width: 36px !important;
  height: 36px !important;
  right: 10px !important;
  border-radius: 10px !important;
  background: rgba(79, 195, 247, 0.07) !important;
  border: 1px solid rgba(79, 195, 247, 0.15) !important;
  color: rgba(200, 216, 240, 0.82) !important;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.auth-page .auth-card button[type='button']:hover {
  color: var(--silver2) !important;
  background: rgba(79, 195, 247, 0.13) !important;
  border-color: rgba(79, 195, 247, 0.38) !important;
  box-shadow: 0 0 20px rgba(79, 195, 247, 0.16) !important;
  transform: translateY(-50%) scale(1.04) !important;
}

.auth-page .auth-card button[type='button'] svg {
  width: 17px;
  height: 17px;
}

.auth-card button[type='submit'] {
  position: relative;
  min-height: 54px;
  overflow: hidden;
  margin-top: 10px !important;
  border-radius: 13px !important;
  background:
    linear-gradient(135deg, #173a76 0%, #2a5298 44%, #42b6e8 100%) !important;
  box-shadow:
    0 14px 28px rgba(42, 82, 152, 0.3),
    0 0 24px rgba(79, 195, 247, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.auth-card button[type='submit']::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}

.auth-card button[type='submit']:hover:not(:disabled)::before {
  transform: translateX(120%);
}

.auth-card button[type='submit']:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow:
    0 18px 36px rgba(42, 82, 152, 0.38),
    0 0 34px rgba(79, 195, 247, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.auth-card button[type='submit']:disabled {
  filter: saturate(0.72);
}

.auth-card a {
  font-weight: 700 !important;
  text-shadow: 0 0 14px rgba(79, 195, 247, 0.18);
}

.auth-card a:hover {
  text-shadow: 0 0 18px rgba(79, 195, 247, 0.32);
}

.auth-card > div:last-child {
  margin-top: 26px !important;
  padding-top: 18px !important;
  background: linear-gradient(90deg, transparent, rgba(79, 195, 247, 0.04), transparent);
}

.auth-card-register > div:last-child {
  margin-top: 14px !important;
  padding-top: 12px !important;
}

.auth-page .auth-visual-panel {
  position: relative;
}

.auth-page .auth-visual-panel::before {
  content: '';
  position: absolute;
  width: min(620px, 48vw);
  height: min(620px, 48vw);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(79, 195, 247, 0.08), rgba(42, 82, 152, 0.055) 42%, transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}

.auth-page .auth-visual-panel .hero-right {
  transform: translateY(-2px);
}

.auth-page .auth-visual-panel .loop-wrap {
  filter: drop-shadow(0 28px 60px rgba(0, 0, 0, 0.32));
}

.auth-page .auth-visual-panel .float-card {
  border-radius: 12px;
  background: rgba(8, 20, 40, 0.74);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28), 0 0 24px rgba(79, 195, 247, 0.08);
}

@media (max-width: 1024px) {
  .auth-form-panel::before {
    inset: 12px -10px;
  }

  .auth-card {
    max-width: 520px;
    margin: 0 auto;
  }

  .auth-page .auth-visual-panel .hero-right {
    transform: none;
  }
}

@media (max-width: 720px) {
  .auth-page::after {
    display: none;
  }

  .auth-card h2 {
    font-size: 32px !important;
  }

  .auth-card > p {
    margin-bottom: 26px !important;
  }

  .auth-card form {
    gap: 18px !important;
  }

  .auth-card-register form {
    gap: 14px !important;
  }
}

/* Restored larger auth proportions */

.auth-shell {
  grid-template-columns: minmax(480px, 620px) minmax(480px, 1fr) !important;
  gap: clamp(40px, 5vw, 76px) !important;
  width: min(1360px, calc(100% - 64px)) !important;
  padding: clamp(32px, 4vh, 56px) 0 !important;
}

.auth-shell-register {
  grid-template-columns: minmax(560px, 680px) minmax(460px, 1fr) !important;
}

.auth-card {
  padding: clamp(46px, 4.5vw, 58px) !important;
  border-radius: 26px !important;
}

.auth-card-login {
  min-height: 560px;
}

.auth-card-register {
  max-height: calc(100dvh - 56px) !important;
  padding: 40px 42px !important;
}

.auth-card h2 {
  font-size: clamp(38px, 3.4vw, 48px) !important;
  margin-bottom: 12px !important;
}

.auth-card > p {
  margin-bottom: 38px !important;
  font-size: 16px !important;
}

.auth-card form {
  gap: 24px !important;
}

.auth-card-register form {
  gap: 18px !important;
}

.auth-card label {
  margin-bottom: 10px !important;
  font-size: 12.5px !important;
}

.auth-page .auth-card input,
.auth-page .auth-card input[type='email'],
.auth-page .auth-card input[type='password'],
.auth-page .auth-card input[type='tel'],
.auth-page .auth-card input[type='text'] {
  min-height: 58px !important;
  padding: 17px 18px !important;
  font-size: 16px !important;
  border-radius: 14px !important;
}

.auth-page .auth-card input[type='password'] {
  padding-right: 58px !important;
}

.auth-page .auth-card button[type='button'] {
  width: 40px !important;
  height: 40px !important;
  right: 10px !important;
}

.auth-page .auth-card button[type='button']:hover {
  transform: translateY(-50%) !important;
}

.auth-page .auth-card button[type='button'] svg {
  width: 19px;
  height: 19px;
}

.auth-card button[type='submit'] {
  min-height: 60px !important;
  font-size: 16px !important;
  border-radius: 14px !important;
  margin-top: 12px !important;
}

.auth-card button[type='submit']:hover:not(:disabled) {
  transform: translateY(-2px) !important;
}

.auth-card:hover {
  transform: translateY(-3px) !important;
}

.auth-card > div:last-child {
  margin-top: 32px !important;
  padding-top: 22px !important;
}

.auth-card-register > div:last-child {
  margin-top: 20px !important;
  padding-top: 16px !important;
}

.auth-visual-panel .loop-wrap,
.auth-page .auth-visual-panel .loop-wrap {
  width: clamp(500px, 39vw, 600px) !important;
  height: clamp(500px, 39vw, 600px) !important;
}

@media (max-height: 820px) and (min-width: 1025px) {
  .auth-card-login {
    min-height: auto;
  }

  .auth-card {
    padding: 40px 44px !important;
  }

  .auth-card-register {
    padding: 32px 36px !important;
    max-height: calc(100dvh - 40px) !important;
  }

  .auth-card h2 {
    font-size: 38px !important;
  }

  .auth-card > p {
    margin-bottom: 30px !important;
  }

  .auth-card form {
    gap: 20px !important;
  }

  .auth-card-register form {
    gap: 15px !important;
  }

  .auth-visual-panel .loop-wrap,
  .auth-page .auth-visual-panel .loop-wrap {
    width: clamp(430px, 34vw, 520px) !important;
    height: clamp(430px, 34vw, 520px) !important;
  }
}

@media (max-width: 1120px) {
  .auth-shell,
  .auth-shell-register {
    grid-template-columns: 1fr !important;
    width: min(760px, calc(100% - 36px)) !important;
    gap: 38px !important;
    min-height: auto !important;
  }

  .auth-card {
    max-width: 680px !important;
    margin: 0 auto;
  }

  .auth-visual-panel .loop-wrap,
  .auth-page .auth-visual-panel .loop-wrap {
    width: min(500px, 82vw) !important;
    height: min(500px, 82vw) !important;
  }
}

@media (max-width: 720px) {
  .auth-shell,
  .auth-shell-register {
    width: min(100% - 28px, 620px) !important;
    padding: 24px 0 !important;
  }

  .auth-card,
  .auth-card-register {
    padding: 30px 24px !important;
    max-height: none !important;
  }

  .auth-card h2 {
    font-size: 34px !important;
  }

  .auth-page .auth-card input,
  .auth-page .auth-card input[type='email'],
  .auth-page .auth-card input[type='password'],
  .auth-page .auth-card input[type='tel'],
  .auth-page .auth-card input[type='text'] {
    min-height: 54px !important;
    font-size: 15.5px !important;
  }

  .auth-card button[type='submit'] {
    min-height: 56px !important;
  }
}

/* Final auth layout balance: slightly smaller cards, scrollable register. */

.auth-shell {
  grid-template-columns: minmax(440px, 560px) minmax(440px, 1fr) !important;
  gap: clamp(34px, 4.5vw, 64px) !important;
  width: min(1260px, calc(100% - 56px)) !important;
  padding: clamp(24px, 3.5vh, 44px) 0 !important;
}

.auth-shell-register {
  grid-template-columns: minmax(500px, 600px) minmax(420px, 1fr) !important;
  padding-top: 8px !important;
  align-items: flex-start !important;
}

.auth-card {
  padding: clamp(38px, 3.6vw, 46px) !important;
}

.auth-card-login {
  min-height: 520px;
}

.auth-card-register {
  max-height: calc(100vh - 56px) !important;
  max-height: calc(100dvh - 56px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 32px 34px !important;
}

.auth-card h2 {
  font-size: clamp(34px, 3vw, 42px) !important;
}

.auth-card > p {
  margin-bottom: 30px !important;
  font-size: 15px !important;
}

.auth-card form {
  gap: 20px !important;
}

.auth-card-register form {
  gap: 14px !important;
}

.auth-card label {
  margin-bottom: 8px !important;
  font-size: 12px !important;
}

.auth-page .auth-card input,
.auth-page .auth-card input[type='email'],
.auth-page .auth-card input[type='password'],
.auth-page .auth-card input[type='tel'],
.auth-page .auth-card input[type='text'] {
  min-height: 52px !important;
  padding: 15px 16px !important;
  font-size: 15px !important;
}

.auth-page .auth-card input[type='password'] {
  padding-right: 54px !important;
}

.auth-page .auth-card button[type='button'] {
  width: 36px !important;
  height: 36px !important;
}

.auth-card button[type='submit'] {
  min-height: 56px !important;
  font-size: 15px !important;
  margin-top: 8px !important;
}

.auth-card-register > div:last-child {
  margin-top: 16px !important;
  padding-top: 14px !important;
}

.auth-visual-panel .loop-wrap,
.auth-page .auth-visual-panel .loop-wrap {
  width: clamp(440px, 36vw, 540px) !important;
  height: clamp(440px, 36vw, 540px) !important;
}

.auth-card-register::-webkit-scrollbar {
  width: 0;
  display: none;
}

.auth-card-register::-webkit-scrollbar-track {
  display: none;
}

.auth-card-register::-webkit-scrollbar-thumb {
  display: none;
}

.auth-card-register {
  scrollbar-width: none !important;
}

@media (max-height: 820px) and (min-width: 1025px) {
  .auth-card-register {
    max-height: calc(100vh - 36px) !important;
    max-height: calc(100dvh - 36px) !important;
    padding: 28px 32px !important;
  }

  .auth-card-login {
    min-height: auto;
  }

  .auth-card {
    padding: 34px 38px !important;
  }

  .auth-page .auth-card input,
  .auth-page .auth-card input[type='email'],
  .auth-page .auth-card input[type='password'],
  .auth-page .auth-card input[type='tel'],
  .auth-page .auth-card input[type='text'] {
    min-height: 50px !important;
  }
}

@media (max-width: 1120px) {
  .auth-shell,
  .auth-shell-register {
    grid-template-columns: 1fr !important;
    width: min(700px, calc(100% - 36px)) !important;
  }

  .auth-card {
    max-width: 620px !important;
  }

  .auth-card-register {
    max-height: none !important;
    overflow-y: visible !important;
  }

  .auth-visual-panel .loop-wrap,
  .auth-page .auth-visual-panel .loop-wrap {
    width: min(460px, 78vw) !important;
    height: min(460px, 78vw) !important;
  }
}

@media (max-width: 720px) {
  .auth-card,
  .auth-card-register {
    padding: 26px 22px !important;
  }

  .auth-card h2 {
    font-size: 32px !important;
  }

  .auth-page .auth-card input,
  .auth-page .auth-card input[type='email'],
  .auth-page .auth-card input[type='password'],
  .auth-page .auth-card input[type='tel'],
  .auth-page .auth-card input[type='text'] {
    min-height: 50px !important;
  }
}

/* ---- Language selector: hard-freeze — must be last to win cascade ---- */

.auth-page .auth-card .lang-button,
.auth-page .auth-card .lang-button:hover,
.auth-page .auth-card .lang-button:focus,
.auth-page .auth-card .lang-button:active {
  transform: none !important;
  width: 40px !important;
  height: 28px !important;
  min-width: 40px !important;
  min-height: 28px !important;
  font-size: 11px !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

/* ---- Registration card: compact sizing to fit one screen ---- */

.auth-card-register {
  padding: 18px 22px !important;
  max-height: calc(100dvh - 32px) !important;
  overflow-y: auto !important;
}

.auth-card-register > .auth-card-logo {
  margin-bottom: 6px !important;
}

.auth-card-register > p {
  margin-bottom: 10px !important;
  font-size: 13px !important;
}

.auth-card-register form {
  gap: 10px !important;
}

.auth-card-register .form-grid {
  gap: 10px !important;
}

.auth-card-register .auth-card label,
.auth-card-register label {
  margin-bottom: 4px !important;
  font-size: 11px !important;
}

.auth-page .auth-card-register input,
.auth-page .auth-card-register input[type='email'],
.auth-page .auth-card-register input[type='password'],
.auth-page .auth-card-register input[type='tel'],
.auth-page .auth-card-register input[type='text'] {
  min-height: 36px !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
}

.auth-page .auth-card-register input[type='password'] {
  padding-right: 40px !important;
}

.auth-card-register button[type='button']:not(.terms-btn) {
  width: 30px !important;
  height: 30px !important;
}

.auth-card-register button[type='submit'] {
  min-height: 40px !important;
  font-size: 13px !important;
  margin-top: 2px !important;
}

.auth-card-register > div:last-child {
  margin-top: 10px !important;
  padding-top: 8px !important;
}

/* ---- Registration form 2-column grid ---- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid .full-width {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Terms & Privacy text ---- */

.terms-text {
  text-align: center !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}

.terms-btn {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 2px !important;
  color: #4a9eff !important;
  font-size: 12px !important;
  cursor: pointer;
  display: inline !important;
  white-space: nowrap !important;
  text-decoration: underline;
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
  vertical-align: baseline !important;
  line-height: inherit !important;
  transition: color 0.2s ease !important;
}

.terms-btn:hover,
.terms-btn:focus,
.terms-btn:active {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: #74b9ff !important;
}

/* High-specificity override — beats .auth-page .auth-card button[type='button']:hover (0,3,1) */

.auth-page .auth-card-register button.terms-btn:hover,
.auth-page .auth-card-register button.terms-btn:focus,
.auth-page .auth-card-register button.terms-btn:active {
  background: none !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
}

/* ---- Register page: roomy desktop sizing with responsive fallback ---- */

.auth-page::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}

.auth-page {
  min-height: 100dvh !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.auth-shell-register {
  min-height: 100dvh !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  grid-template-columns: minmax(620px, 740px) minmax(420px, 1fr) !important;
  width: min(1320px, calc(100% - 64px)) !important;
  padding: 32px 0 !important;
  align-items: center !important;
}

.auth-card-register {
  margin-top: 0 !important;
  width: 100% !important;
  max-width: 720px !important;
  padding: 34px 40px !important;
  max-height: calc(100dvh - 40px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.auth-card-register .auth-card-logo {
  margin-bottom: 12px !important;
}

.auth-card-register .auth-card-logo img {
  height: 42px !important;
}

.auth-card-register > p {
  margin: 0 0 24px 0 !important;
  font-size: 23px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: rgba(232, 240, 255, 0.9) !important;
  letter-spacing: 0 !important;
}

.auth-card-register form {
  gap: 18px !important;
}

.auth-card-register .form-grid {
  column-gap: 18px !important;
  row-gap: 18px !important;
}

.auth-card-register label {
  margin-bottom: 8px !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  line-height: 1.2 !important;
}

.auth-page .auth-card-register input,
.auth-page .auth-card-register input[type='email'],
.auth-page .auth-card-register input[type='password'],
.auth-page .auth-card-register input[type='tel'],
.auth-page .auth-card-register input[type='text'] {
  min-height: 50px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
}

.auth-page .auth-card-register input[type='password'] {
  padding-right: 54px !important;
}

.auth-page .auth-card-register input[type='checkbox'] {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
}

.auth-card-register .nationality-select {
  min-height: 50px !important;
  height: 50px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  border-radius: 14px !important;
  background-color: rgba(10, 26, 48, 0.96) !important;
  border: 1px solid rgba(126, 184, 232, 0.23) !important;
  color: #e8f0ff !important;
}

.auth-card-register .nationality-select option {
  background-color: #0d1f38 !important;
  color: #e8f0ff !important;
  font-size: 14px;
}

.auth-card-register .nationality-select:focus {
  border-color: rgba(0, 229, 255, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.12) !important;
}

.auth-card-register button[type='button']:not(.terms-btn) {
  width: 38px !important;
  height: 38px !important;
  right: 10px !important;
}

.auth-card-register button[type='submit'] {
  min-height: 52px !important;
  padding: 14px 18px !important;
  margin-top: 4px !important;
  font-size: 16px !important;
  letter-spacing: 1.2px !important;
}

.auth-card-register > div:last-child {
  margin-top: 18px !important;
  padding-top: 14px !important;
}

@media (min-width: 1121px) {
  .auth-shell-register {
    transform: translateX(-30px);
  }

  .auth-shell-register .auth-form-panel {
    z-index: 3;
  }

  .auth-shell-register .auth-visual-panel {
    z-index: 1;
    justify-content: center !important;
    overflow: visible !important;
    max-height: calc(100dvh - 150px);
    padding-left: 28px;
    padding-top: 34px;
    pointer-events: none;
  }

  .auth-shell-register .auth-visual-panel .hero-right {
    transform: translate(4px, 18px) scale(1.02) !important;
    transform-origin: center;
  }

  .auth-shell-register .auth-visual-panel .loop-wrap,
  .auth-page .auth-shell-register .auth-visual-panel .loop-wrap {
    width: clamp(460px, 36vw, 540px) !important;
    height: clamp(460px, 36vw, 540px) !important;
  }

  .auth-shell-register .auth-visual-panel .float-card {
    z-index: 0 !important;
  }
}

@media (max-width: 768px) {
  .auth-shell-register {
    grid-template-columns: 1fr !important;
    width: min(100% - 28px, 620px) !important;
    padding: 24px 0 !important;
    transform: none;
  }

  .auth-card-register {
    max-width: 100% !important;
    padding: 28px 22px !important;
  }

  .auth-card-register > p {
    font-size: 22px !important;
    margin-bottom: 20px !important;
  }

  .auth-card-register form {
    gap: 16px !important;
  }

  .auth-card-register .form-grid {
    grid-template-columns: 1fr !important;
    row-gap: 16px !important;
  }
}

/* Desktop register: keep the form visible without scroll at 100% zoom. */

@media (min-width: 1121px) {
  .auth-page:has(.auth-shell-register) {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  .auth-page:has(.auth-shell-register) .auth-shell-register {
    min-height: 100dvh !important;
    height: 100dvh !important;
    align-items: flex-start !important;
    padding-top: 12px !important;
    padding-bottom: 8px !important;
  }

  .auth-page:has(.auth-shell-register) .auth-card-register {
    padding: 20px 32px 16px !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateY(-8px) scale(0.96) !important;
    transform-origin: top left !important;
  }

  .auth-page:has(.auth-shell-register) .auth-card-register .auth-card-logo {
    margin-bottom: 6px !important;
  }

  .auth-page:has(.auth-shell-register) .auth-card-register .auth-card-logo img {
    height: 32px !important;
  }

  .auth-page:has(.auth-shell-register) .auth-card-register > p {
    margin-bottom: 10px !important;
    font-size: 20px !important;
  }

  .auth-page:has(.auth-shell-register) .auth-card-register form {
    gap: 9px !important;
  }

  .auth-page:has(.auth-shell-register) .auth-card-register .form-grid {
    row-gap: 8px !important;
    column-gap: 16px !important;
  }

  .auth-page:has(.auth-shell-register) .auth-card-register label {
    margin-bottom: 4px !important;
    font-size: 11px !important;
  }

  .auth-page:has(.auth-shell-register) .auth-card-register input,
  .auth-page:has(.auth-shell-register) .auth-card-register input[type='email'],
  .auth-page:has(.auth-shell-register) .auth-card-register input[type='password'],
  .auth-page:has(.auth-shell-register) .auth-card-register input[type='tel'],
  .auth-page:has(.auth-shell-register) .auth-card-register input[type='text'],
  .auth-page:has(.auth-shell-register) .auth-card-register .nationality-select {
    min-height: 38px !important;
    height: 38px !important;
    padding: 8px 13px !important;
    font-size: 14px !important;
  }

  .auth-page:has(.auth-shell-register) .auth-card-register button[type='submit'] {
    min-height: 42px !important;
    padding: 9px 16px !important;
    margin-top: 0 !important;
    font-size: 15px !important;
  }

  .auth-page:has(.auth-shell-register) .auth-card-register > div:last-child {
    margin-top: 8px !important;
    padding-top: 8px !important;
  }
}

/* ---- Login page: fits 100% screen, form shifted up ---- */

.auth-shell:not(.auth-shell-register) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

.auth-card-login {
  min-height: unset !important;
  padding: 28px 32px !important;
}

.auth-page .auth-card-login input,
.auth-page .auth-card-login input[type='email'],
.auth-page .auth-card-login input[type='password'] {
  min-height: 44px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
}

.auth-card-login button[type='submit'] {
  min-height: 46px !important;
  font-size: 14px !important;
}

.auth-card-login form {
  gap: 16px !important;
}

.auth-card-login > div:last-child {
  margin-top: 18px !important;
  padding-top: 14px !important;
}

.auth-page:not(:has(.auth-shell-register))::-webkit-scrollbar {
  display: none !important;
}

.auth-page:not(:has(.auth-shell-register)) {
  overflow: hidden !important;
  height: 100dvh !important;
}
.adm-layout-shell{
	height: 100vh;
	background: linear-gradient(180deg, rgba(5, 13, 31, 0.96) 0%, rgba(4, 9, 24, 1) 100%);
	color: var(--text);
	display: flex;
	overflow: hidden;
	position: relative;
}
.adm-layout-header{padding: 0.5rem 1.5rem;}
.adm-layout-header .lang-selector{margin-right: 0.5rem;}
/* ═══════════════════════════════════════════════════
   AdminLayout — Mobile Responsive
   The sidebar toggle, hamburger, and overlay mechanics
   are driven by app-layout.css (reused CSS classes).
   This file handles admin-specific overrides only.
   ═══════════════════════════════════════════════════ */

/* ── Desktop: hide page-title breadcrumb in admin header ──
   The user layout shows breadcrumb on desktop too, but
   the admin header is minimal (only right-side controls).
   On mobile it becomes the ≡ | Page Name | EN▼ | 👤 bar. */
.adm-breadcrumb {
  display: none;
}

/* ════════════════════════════════════════════════════
   ≤ 768 px — mobile header & sidebar
   ════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Main scroll area: allow vertical scroll, block horizontal */
  .adm-layout-shell .app-main {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* ── Header: compact mobile bar ──────────────────────
     Inline styles set height:84px and justify-content:flex-end.
     Override to auto-height and standard padding.
     The breadcrumb (flex:1) + hamburger produce:
       ≡ | [Page Name fills space] | 🌐EN▼ | 👤        */
  .adm-layout-header {
    height: auto !important;
    min-height: 52px !important;
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  /* Show page title breadcrumb on mobile */
  .adm-breadcrumb {
    display: flex !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* ── Profile button: avatar-only on mobile ────────────
     Inline minWidth:260px would overflow a narrow header.
     Hide the name/role text and chevron; show only avatar. */
  .adm-profile-btn {
    min-width: 0 !important;
    padding: 5px 6px !important;
    gap: 6px !important;
  }

  .adm-profile-info {
    display: none !important;
  }

  .adm-profile-chevron {
    display: none !important;
  }

  /* Profile dropdown menu: prevent right-overflow on narrow screens */
  .adm-profile-btn + div,
  .adm-profile-btn ~ div {
    right: 0;
    left: auto;
    max-width: calc(100vw - 24px);
    width: min(320px, calc(100vw - 24px)) !important;
  }
}

/* ════════════════════════════════════════════════════
   ≤ 480 px
   ════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .adm-layout-header {
    padding: 6px 10px !important;
    min-height: 48px !important;
  }
}

/* ════════════════════════════════════════════════════
   ≤ 360 px
   ════════════════════════════════════════════════════ */
@media (max-width: 360px) {

  .adm-layout-header {
    padding: 6px 8px !important;
    min-height: 44px !important;
  }
}
/* ═══════════════════════════════════════════════════════
   My Community Setting — Mobile Responsive
   Breakpoints: ≤ 768px | ≤ 480px | ≤ 375px
   Only CSS overrides — no logic changes.
   ═══════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────
   1.  HEADER ROW  (title + refresh button)
   ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .cfg-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Page title: scale down from 42px */
  .cfg-header-row h1 {
    font-size: 26px !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }

  /* Subtitle paragraph */
  .cfg-header-row p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Refresh button: align-left, full touch target */
  .cfg-header-row > button {
    align-self: flex-start !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 375px) {

  .cfg-header-row h1 {
    font-size: 22px !important;
  }

  .cfg-header-row > button {
    min-height: 36px !important;
    font-size: 12px !important;
  }
}

/* ────────────────────────────────────────────────────────
   2.  TAB BAR  (Pending / Approved / Rejected / Deleted / All)
   The inline style has flex-wrap: wrap which stacks tabs
   vertically on narrow screens. We override to horizontal
   scroll so it matches the desktop single-row look.

   FADE INDICATOR TECHNIQUE
   ────────────────────────
   A CSS ::after pseudo-element on a scroll container normally
   scrolls with the content (it is a flex child and gets painted
   in the overflow area). To keep the fade FIXED at the right
   viewport edge we make it a sticky flex item:

     position: sticky + right: 0  → clamps to scroll-container
                                     viewport right edge
     width: 56px                  → gradient width
     margin-left: -56px           → removes its 56px from the
                                     flex row (net 0 scroll-width)
     align-self: stretch          → full height of the bar
     pointer-events: none         → tabs behind it stay clickable

   The result: a gradient from transparent → #1a1f2e that sits
   permanently at the right edge while tabs scroll behind it.
   ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .cfg-tabs-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;        /* keep on one row */
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 6px !important;
    padding: 8px !important;
    scrollbar-width: none !important;   /* Firefox: hide scrollbar */
    position: relative !important;      /* containing block for z-index */
  }

  /* Chrome / Safari: hide scrollbar */
  .cfg-tabs-wrap::-webkit-scrollbar {
    display: none;
  }

  /* Right-edge scroll indicator — sticky flex item, zero net scroll-width.
     Gradient fade hides overflowing tab text; the glowing chevron badge
     tells the user there are more tabs to the right.
     Animation plays 3× on load to catch the eye, then stops.            */
  .cfg-tabs-wrap::after {
    content: '›';
    position: sticky;
    right: 0;
    flex-shrink: 0;
    width: 54px;
    margin-left: -54px;       /* cancel own width → 0 net scroll-width */
    align-self: stretch;
    /* fade: transparent → solid tab-bar bg */
    background: linear-gradient(to right, transparent 0%, #1a1f2e 44%);
    pointer-events: none;
    z-index: 1;
    /* chevron badge: right-aligned, vertically centred */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 9px;
    font-size: 22px;
    font-weight: 200;
    color: rgba(255, 255, 255, 0.9);
    /* cyan glow to match app accent */
    text-shadow: 0 0 12px rgba(79, 195, 247, 0.75);
    /* bounce right 3 times on page load, then stays static */
    animation: cfg-scroll-hint 1.6s ease-in-out 0.4s 3;
  }

  /* Bounce keyframes — nudges right to signal "scroll this way" */
  @keyframes cfg-scroll-hint {
    0%,  100% { transform: translateX(0);   opacity: 0.9; }
    35%        { transform: translateX(5px); opacity: 1;   }
    65%        { transform: translateX(2px); opacity: 1;   }
  }

  /* Tab buttons: don't shrink, stay on one row */
  .cfg-tabs-wrap > button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }

  /* Count badge inside each tab button */
  .cfg-tabs-wrap > button > span {
    min-width: 28px !important;
    height: 24px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 375px) {

  .cfg-tabs-wrap {
    padding: 6px !important;
    gap: 4px !important;
  }

  .cfg-tabs-wrap > button {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
}

/* ────────────────────────────────────────────────────────
   3.  REQUEST ROWS  (the card-list entries)
   On desktop the row is: [avatar + info ─────── ] [button]
   On mobile: stack info on top, full-width button below.
   ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .cfg-request-row {
    padding: 18px 14px !important;
    gap: 12px !important;
    flex-direction: column !important;  /* stack info above button */
    align-items: flex-start !important;
  }

  /* Left info block: remove fixed min-width that overflows 375px */
  .cfg-request-row > div:first-child {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    gap: 12px !important;
  }

  /* Avatar circle: slightly smaller */
  .cfg-request-row > div:first-child > div:first-child {
    width: 40px !important;
    height: 40px !important;
    font-size: 17px !important;
    flex-shrink: 0 !important;
  }

  /* Action button (Take Request / Edit): full width */
  .cfg-request-row > button {
    width: 100% !important;
    min-height: 44px !important;
    flex-shrink: 0 !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {

  .cfg-request-row {
    padding: 14px 12px !important;
    gap: 10px !important;
  }
}

@media (max-width: 375px) {

  .cfg-request-row {
    padding: 12px 10px !important;
    gap: 8px !important;
  }

  .cfg-request-row > button {
    min-height: 42px !important;
    font-size: 14px !important;
  }
}

/* Refined settings workspace */
.cfg-shell {
  position: relative;
  isolation: isolate;
}

.cfg-header-row h1 {
  letter-spacing: 0 !important;
}

.cfg-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cfg-title-block {
  position: relative;
  padding-left: 18px;
}

.cfg-title-block::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #4fc3f7 0%, #5b8cff 52%, #b276ff 100%);
  box-shadow: 0 0 22px rgba(79, 195, 247, 0.32);
}

.cfg-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.cfg-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: min(320px, 38vw);
  min-width: 240px;
}

.cfg-search-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: #7791b8;
  pointer-events: none;
  transition: color 180ms ease;
}

.cfg-search-icon svg,
.cfg-refresh-button svg,
.cfg-state-icon svg,
.cfg-action-button svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cfg-search-input {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 16px 0 42px;
  border: 1px solid rgba(111, 145, 201, 0.22);
  border-radius: 8px;
  outline: none;
  background: rgba(12, 19, 32, 0.88);
  color: #f7faff;
  font-size: 14px;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.cfg-search-input::placeholder {
  color: #667b9c;
}

.cfg-search-wrap:focus-within .cfg-search-icon {
  color: #67d4ff;
}

.cfg-search-input:focus {
  border-color: rgba(79, 195, 247, 0.7);
  background: rgba(14, 24, 42, 0.98);
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.12);
}

.cfg-refresh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(111, 145, 201, 0.24);
  border-radius: 8px;
  background: rgba(15, 24, 39, 0.92);
  color: #eaf2ff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.cfg-refresh-button svg {
  width: 17px;
  height: 17px;
  transition: transform 320ms ease;
}

.cfg-refresh-button:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 195, 247, 0.48);
  background: rgba(22, 39, 64, 0.98);
  box-shadow: 0 10px 24px rgba(1, 8, 22, 0.32);
}

.cfg-refresh-button:hover svg {
  transform: rotate(110deg);
}

.cfg-refresh-button:focus-visible,
.cfg-tab-button:focus-visible,
.cfg-action-button:focus-visible {
  outline: 2px solid #67d4ff;
  outline-offset: 3px;
}

.cfg-tabs-wrap {
  box-shadow:
    0 14px 34px rgba(1, 7, 20, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.cfg-tab-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  outline: none;
  background: transparent;
  color: #9eacc6;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.cfg-tab-button:hover {
  transform: translateY(-1px);
  border-color: rgba(122, 162, 227, 0.16);
  background: rgba(54, 70, 101, 0.25);
  color: #f0f5ff;
}

.cfg-tab-button-active {
  border-color: rgba(91, 174, 255, 0.3);
  background: linear-gradient(135deg, rgba(39, 80, 151, 0.82), rgba(45, 57, 105, 0.88));
  color: #ffffff;
  box-shadow:
    0 10px 22px rgba(8, 21, 52, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cfg-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 7px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #bfcee8;
  font-size: 12px;
  font-weight: 800;
}

.cfg-tab-button-active .cfg-tab-count {
  border-color: rgba(117, 207, 255, 0.24);
  background: rgba(79, 195, 247, 0.15);
  color: #dff7ff;
}

.cfg-requests-panel {
  display: grid;
  gap: 12px;
}

.cfg-state-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 24px 28px;
  box-sizing: border-box;
  border: 1px solid rgba(91, 120, 172, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(17, 25, 43, 0.96), rgba(9, 15, 28, 0.98));
  color: #aebbd2;
  font-size: 15px;
  box-shadow: 0 18px 42px rgba(1, 7, 19, 0.2);
}

.cfg-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid rgba(79, 195, 247, 0.22);
  border-radius: 8px;
  background: rgba(79, 195, 247, 0.08);
  color: #73d8ff;
}

.cfg-empty-panel .cfg-state-icon {
  border-color: rgba(176, 118, 255, 0.24);
  background: rgba(176, 118, 255, 0.08);
  color: #c5a3ff;
}

.cfg-request-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 118px;
  padding: 22px 24px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(91, 120, 172, 0.19);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(17, 25, 43, 0.98) 0%, rgba(11, 18, 32, 0.98) 68%, rgba(15, 28, 48, 0.98) 100%);
  box-shadow: 0 14px 36px rgba(1, 7, 19, 0.18);
  transition:
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.cfg-request-row::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, #4fc3f7, #6c79ff);
  opacity: 0.55;
  transition: opacity 200ms ease;
}

.cfg-request-row:hover {
  transform: translateY(-3px);
  border-color: rgba(104, 171, 255, 0.34);
  box-shadow:
    0 20px 46px rgba(1, 7, 19, 0.32),
    0 0 0 1px rgba(79, 195, 247, 0.06);
}

.cfg-request-row:hover::before {
  opacity: 1;
}

.cfg-request-main {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  flex: 1 1 auto;
}

.cfg-slot-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 1px solid rgba(112, 172, 255, 0.28);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(41, 79, 139, 0.78), rgba(25, 39, 71, 0.96));
  color: #eff7ff;
  font-size: 17px;
  font-weight: 900;
  box-shadow:
    0 10px 24px rgba(3, 11, 28, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cfg-request-content {
  min-width: 0;
}

.cfg-request-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cfg-request-name {
  color: #f6f9ff;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.3;
}

.cfg-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 9px;
  box-sizing: border-box;
  border: 1px solid rgba(246, 181, 74, 0.28);
  border-radius: 999px;
  background: rgba(246, 181, 74, 0.09);
  color: #f7c96c;
  font-size: 11px;
  font-weight: 850;
  text-transform: capitalize;
}

.cfg-status-approved {
  border-color: rgba(68, 214, 154, 0.3);
  background: rgba(68, 214, 154, 0.09);
  color: #75e6b5;
}

.cfg-status-rejected,
.cfg-status-deleted {
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(248, 113, 113, 0.08);
  color: #f7a0a0;
}

.cfg-status-expired {
  border-color: rgba(166, 179, 203, 0.26);
  background: rgba(166, 179, 203, 0.08);
  color: #bdc7d9;
}

.cfg-request-meta {
  margin-top: 6px;
  color: #8fa0bd;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.cfg-chip-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 11px;
}

.cfg-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 2px 9px;
  box-sizing: border-box;
  border: 1px solid rgba(114, 143, 194, 0.16);
  border-radius: 6px;
  background: rgba(70, 91, 128, 0.12);
  color: #c7d4e9;
  font-size: 11px;
  font-weight: 750;
}

.cfg-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 142px;
  min-height: 44px;
  padding: 0 18px;
  flex: 0 0 auto;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.cfg-action-button svg {
  width: 17px;
  height: 17px;
  transition: transform 180ms ease;
}

.cfg-action-button:hover {
  transform: translateY(-2px);
}

.cfg-action-button:hover svg {
  transform: translateX(3px);
}

.cfg-action-button-primary {
  border: 1px solid rgba(117, 219, 255, 0.48);
  background: linear-gradient(135deg, #e9f8ff, #bddcff);
  color: #0a1b32;
  box-shadow: 0 10px 22px rgba(33, 132, 194, 0.18);
}

.cfg-action-button-primary:hover {
  border-color: rgba(164, 232, 255, 0.82);
  background: linear-gradient(135deg, #ffffff, #d5eaff);
  box-shadow: 0 14px 28px rgba(33, 132, 194, 0.26);
}

.cfg-action-button-secondary {
  border: 1px solid rgba(121, 155, 211, 0.24);
  background: rgba(40, 55, 82, 0.72);
  color: #c7d4e9;
}

.cfg-action-button-secondary:hover {
  border-color: rgba(121, 185, 255, 0.46);
  background: rgba(48, 72, 108, 0.88);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(3, 10, 25, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .cfg-refresh-button,
  .cfg-refresh-button svg,
  .cfg-tab-button,
  .cfg-request-row,
  .cfg-action-button,
  .cfg-action-button svg {
    transition: none;
  }
}

@media (max-width: 900px) {
  .cfg-toolbar {
    width: 100%;
    justify-content: flex-start;
  }

  .cfg-search-wrap {
    width: min(420px, 100%);
  }
}

@media (max-width: 768px) {
  .cfg-page {
    padding: 30px 18px 24px !important;
  }

  .cfg-header-row {
    align-items: stretch !important;
    gap: 18px !important;
  }

  .cfg-toolbar {
    align-items: stretch;
  }

  .cfg-search-wrap {
    min-width: 0;
    flex: 1 1 auto;
  }

  .cfg-tabs-wrap {
    border-radius: 8px !important;
  }

  .cfg-tabs-wrap::after {
    border-radius: 0 8px 8px 0;
  }

  .cfg-tabs-wrap > .cfg-tab-button {
    min-height: 42px;
    border-radius: 7px !important;
  }

  .cfg-request-row {
    padding: 18px !important;
    border-radius: 8px;
  }

  .cfg-request-row > .cfg-action-button {
    border-radius: 8px !important;
  }
}

@media (max-width: 520px) {
  .cfg-page {
    padding: 24px 14px 20px !important;
  }

  .cfg-toolbar {
    flex-wrap: wrap;
  }

  .cfg-search-wrap,
  .cfg-refresh-button {
    width: 100%;
  }

  .cfg-title-block {
    padding-left: 14px;
  }

  .cfg-request-main {
    align-items: flex-start;
  }

  .cfg-slot-avatar {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px;
  }

  .cfg-request-name {
    font-size: 16px;
  }

  .cfg-request-meta {
    font-size: 12px;
  }
}

/* Request ticket layout */
.cfg-page {
  background: linear-gradient(180deg, #050b16 0%, #040814 48%, #030711 100%) !important;
}

.cfg-requests-panel {
  display: grid;
  gap: 24px;
}

.cfg-request-row {
  display: block;
  min-height: 0;
  padding: 24px 28px;
  border: 1px solid rgba(94, 126, 184, 0.14);
  border-radius: 26px;
  background:
    radial-gradient(circle at 8% 14%, rgba(59, 130, 246, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(16, 24, 39, 0.96), rgba(11, 17, 29, 0.98));
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.026);
}

.cfg-request-row::before,
.cfg-request-row::after {
  display: none;
}

.cfg-request-row:hover {
  transform: translateY(-2px);
  border-color: rgba(87, 138, 216, 0.28);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(79, 195, 247, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.034);
}

.cfg-request-top {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) minmax(380px, 1.05fr) max-content;
  align-items: center;
  gap: 24px;
}

.cfg-request-main {
  gap: 18px;
}

.cfg-slot-avatar {
  position: relative;
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #ffffff;
  font-size: 19px;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.22);
}

.cfg-request-row:nth-child(even) .cfg-slot-avatar {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  box-shadow: 0 16px 34px rgba(124, 58, 237, 0.2);
}

.cfg-avatar-dot {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 15px;
  height: 15px;
  border: 3px solid #08101d;
  border-radius: 999px;
  background: #10b981;
}

.cfg-request-title-line {
  gap: 12px;
}

.cfg-request-name {
  font-size: 19px;
  font-weight: 900;
  line-height: 1.15;
}

.cfg-request-email {
  margin-top: 7px;
  color: #9bb4da;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cfg-status-badge {
  min-height: 23px;
  padding: 0 9px;
  border-color: rgba(52, 211, 153, 0.26);
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cfg-status-pending {
  border-color: rgba(250, 204, 21, 0.26);
  background: rgba(250, 204, 21, 0.09);
  color: #facc15;
}

.cfg-status-rejected,
.cfg-status-deleted {
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(248, 113, 113, 0.09);
  color: #fca5a5;
}

.cfg-status-expired {
  border-color: rgba(148, 163, 184, 0.25);
  background: rgba(148, 163, 184, 0.08);
  color: #cbd5e1;
}

.cfg-request-facts {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(210px, 1.2fr);
  gap: 26px;
}

.cfg-fact-block {
  min-width: 0;
}

.cfg-fact-label {
  display: block;
  margin-bottom: 7px;
  color: #7388aa;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cfg-fact-value {
  display: block;
  color: #dbeafe;
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
}

.cfg-action-button {
  min-width: 82px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 13px;
  background: rgba(30, 39, 56, 0.9);
}

.cfg-action-button svg {
  width: 13px;
  height: 13px;
}

.cfg-action-button-secondary,
.cfg-action-button-primary {
  border: 1px solid rgba(118, 151, 208, 0.2);
  background: rgba(30, 39, 56, 0.9);
  color: #ffffff;
  box-shadow: none;
}

.cfg-action-button:hover {
  background: rgba(43, 56, 79, 0.96);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.cfg-request-divider {
  height: 1px;
  margin: 20px 0;
  background: rgba(126, 151, 193, 0.1);
}

.cfg-chip-row {
  margin-top: 0;
  gap: 12px;
}

.cfg-chip {
  min-height: 28px;
  padding: 0 11px;
  border-color: rgba(59, 130, 246, 0.24);
  border-radius: 8px;
  background: rgba(8, 20, 40, 0.56);
  color: #60a5fa;
  font-size: 12px;
  font-weight: 750;
}

.cfg-chip:nth-child(2) {
  border-color: rgba(168, 85, 247, 0.28);
  background: rgba(58, 16, 92, 0.32);
  color: #d76cff;
}

.cfg-chip:nth-child(3) {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(18, 27, 42, 0.7);
  color: #a8bbd6;
}

@media (max-width: 1280px) {
  .cfg-request-top {
    grid-template-columns: minmax(240px, 1fr) minmax(340px, 1fr) max-content;
    gap: 20px;
  }

  .cfg-request-facts {
    grid-template-columns: minmax(110px, 0.72fr) minmax(210px, 1.28fr);
    gap: 18px;
  }

  .cfg-request-name {
    font-size: 18px;
  }

  .cfg-request-email,
  .cfg-fact-value {
    font-size: 13px;
  }
}

@media (max-width: 980px) {
  .cfg-request-row {
    padding: 24px;
  }

  .cfg-request-top {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .cfg-request-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cfg-action-button {
    justify-self: start;
  }
}

@media (max-width: 520px) {
  .cfg-request-row {
    padding: 18px !important;
    border-radius: 18px;
  }

  .cfg-request-main {
    gap: 14px;
  }

  .cfg-slot-avatar {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px;
    border-radius: 11px;
    font-size: 16px !important;
  }

  .cfg-request-email,
  .cfg-fact-value {
    font-size: 12px;
  }

  .cfg-request-facts {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cfg-chip {
    min-height: 28px;
    font-size: 12px;
  }
}
/* .b2b-mode-control {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(var(--cyan-rgb), 0.16);
  background: rgba(var(--navy-rgb), 0.55);
} */
.b2b-mode-control button {
  padding: 0 0.5rem;
}
.b2b-mode-control--warn {
  border-color: rgba(212, 175, 55, 0.28);
  background: rgba(212, 175, 55, 0.07);
}

.b2b-mode-control__notice {
  margin: 0;
  flex: 1;
  min-width: 0;
  padding-top: 5px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(var(--text-rgb), 0.72);
}

.b2b-mode-control--warn .b2b-mode-control__notice {
  color: rgba(243, 199, 77, 0.92);
}

@media (max-width: 640px) {
  .b2b-mode-control {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  .b2b-mode-control__notice {
    padding-top: 0;
  }
}
/* CardDetailModal — Mobile Responsive */

/* ─────────────────────────────────────────────────────
   Global: prevent modal from bleeding horizontally
   at any breakpoint (e.g. long text, wide inputs).
   ───────────────────────────────────────────────────── */
.cdm-modal {
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════
   ModalSelect — custom portal dropdown
   Rendered on document.body via createPortal so it is
   never clipped by overflow:hidden / backdrop-filter
   stacking contexts inside the modal.
   ═══════════════════════════════════════════════════ */

/* Trigger button — matches .cdm-panel input appearance */
.cdm-ms-trigger {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(51, 65, 85, 0.9);
  background-color: rgba(9, 15, 27, 0.96);
  color: #e2e8f0;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}

.cdm-ms-label {
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cdm-ms-arrow {
  font-size: 10px;
  opacity: 0.65;
  flex-shrink: 0;
}

/* Options list — portaled to body, fully above the modal */
.cdm-ms-list {
  border-radius: 12px;
  border: 1px solid rgba(51, 65, 85, 0.9);
  background: linear-gradient(180deg, rgba(15, 22, 38, 0.99) 0%, rgba(8, 13, 24, 1) 100%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}

.cdm-ms-option {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-bottom: 1px solid rgba(30, 41, 59, 0.55);
  background: transparent;
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.cdm-ms-option:last-child {
  border-bottom: none;
}

.cdm-ms-option:hover,
.cdm-ms-option:focus {
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
  outline: none;
}

.cdm-ms-option-active {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

/* Mobile: larger touch targets */
@media (max-width: 768px) {
  .cdm-ms-trigger {
    min-height: 44px;
    font-size: 16px; /* prevent iOS zoom */
  }

  .cdm-ms-option {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
}

/* ═══════════════════════════════════════════════════
   ≤ 768 px
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Backdrop: no side padding, modal slides up from bottom */
  .cdm-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  /* Modal: full-width bottom sheet */
  .cdm-modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    height: auto !important;
    border-radius: 24px 24px 0 0 !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Header: tighter padding, smaller title */
  .cdm-header {
    padding: 16px 16px 12px !important;
    flex-shrink: 0 !important;
  }

  .cdm-header > div:first-child > div:first-child {
    font-size: 18px !important;
  }

  .cdm-header > div:first-child > div:last-child {
    font-size: 12px !important;
  }

  /* Body: scrollable, shrinks to content */
  .cdm-body {
    padding: 10px 12px 16px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 0 1 auto !important;
    min-height: 0 !important;
  }

  /* Panel: tighter padding, hide any child overflow */
  .cdm-panel {
    padding: 12px 10px !important;
    overflow: hidden !important;
  }

  /* rowTwo: 2 cols → 1 col */
  .cdm-row-two {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  /* tradeGrid: 2 cols → 1 col */
  .cdm-trade-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  /* ── Inputs & Selects ──────────────────────────────
     font-size: 16px stops iOS Safari from auto-zooming
     when a field is tapped — the main cause of content
     jumping off-screen on 375 px devices.
     max-width: 100% + box-sizing prevent width overflow. */
  .cdm-panel input,
  .cdm-panel select {
    font-size: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Preset button group (10K / 50K / 100K) ────────
     3-column grid fills available width; each button
     gets a proper 44 px touch target.                 */
  .cdm-preset-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cdm-preset-grid > button {
    min-height: 44px !important;
    font-size: 13px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Footer: stay as a row; fix the error div's 220px min */
  .cdm-footer {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
  }

  /* Error div: release hardcoded flex-basis so it doesn't
     push the save/cancel buttons off-screen.            */
  .cdm-footer > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Action buttons: reachable touch targets */
  .cdm-actions {
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  .cdm-actions button {
    min-height: 42px !important;
    padding: 0 20px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
}

/* ═══════════════════════════════════════════════════
   ≤ 480 px
   ═══════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .cdm-header {
    padding: 14px 12px 10px !important;
  }

  .cdm-body {
    padding: 8px 10px 12px !important;
  }

  .cdm-panel {
    padding: 10px 8px !important;
  }
}

/* ═══════════════════════════════════════════════════
   ≤ 375 px  (iPhone SE / small Android)
   ═══════════════════════════════════════════════════ */
@media (max-width: 375px) {

  .cdm-header {
    padding: 12px 10px 10px !important;
  }

  .cdm-body {
    padding: 6px 8px 12px !important;
  }

  .cdm-panel {
    padding: 10px 8px !important;
    border-radius: 14px !important;
  }

  /* Inputs: min 44px for comfortable tap, 16px avoids zoom */
  .cdm-panel input,
  .cdm-panel select {
    font-size: 16px !important;
    min-height: 44px !important;
  }

  /* 3 preset buttons at 375px:
     content width ≈ 375 - 2×(8+8+8) = ~327px → ~109px each, fits fine */
  .cdm-preset-grid > button {
    min-height: 40px !important;
    font-size: 12px !important;
  }

  /* Save/Cancel: tighter padding to keep on one row */
  .cdm-actions button {
    min-height: 40px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
  }
}
.adm-page{padding: 18px 20px 26px;}
.heroPanel{
	margin-bottom: 12px;
    border-radius: 18px;
    border: 1px solid rgba(79, 195, 247, 0.18);
    background:radial-gradient(circle at 76% 18%, rgba(79, 195, 247, 0.14), transparent 28%), linear-gradient(135deg, rgba(8, 20, 44, 0.96) 0%, rgba(7, 13, 28, 0.98) 62%, rgba(5, 10, 22, 1) 100%);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.3);
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
}
.heroGrid{
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:linear-gradient(rgba(79, 195, 247, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 195, 247, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, black 0%, transparent 86%);
}
.adm-header-row{
	display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}
.adm-config-page .adm-config-hero {margin-bottom: 16px;}

/* Refined configuration workspace */
.adm-config-page {
  padding: 26px 28px 34px;
}

.adm-config-page .adm-config-hero::after {
  content: '';
  position: absolute;
  right: 24px;
  bottom: 0;
  left: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 195, 247, 0.34), rgba(178, 118, 255, 0.22), transparent);
}

.adm-config-page .adm-header-row {
  margin-bottom: 0 !important;
}

.adm-config-title-wrap {
  position: relative;
  padding-left: 18px;
}

.adm-config-title-wrap::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #4fc3f7 0%, #5b8cff 52%, #b276ff 100%);
  box-shadow: 0 0 20px rgba(79, 195, 247, 0.28);
}

.adm-config-page .adm-header-row h1 {
  letter-spacing: 0 !important;
}

.adm-config-page .adm-tools {
  flex-wrap: nowrap;
}

.adm-config-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: min(340px, 34vw);
  min-width: 240px;
}

.adm-config-search-icon {
  position: absolute;
  z-index: 1;
  left: 14px;
  width: 18px;
  height: 18px;
  color: #7791b8;
  pointer-events: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 180ms ease;
}

.adm-config-page .adm-config-search {
  width: 100%;
  min-height: 44px;
  padding: 0 16px 0 42px;
  border-color: rgba(111, 145, 201, 0.22);
  border-radius: 8px;
  background: rgba(12, 19, 32, 0.88);
  color: #f7faff;
  font-size: 14px;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.adm-config-page .adm-config-search::placeholder {
  color: #667b9c;
}

.adm-config-search-wrap:focus-within .adm-config-search-icon {
  color: #67d4ff;
}

.adm-config-page .adm-config-search:focus {
  border-color: rgba(79, 195, 247, 0.7) !important;
  background: rgba(14, 24, 42, 0.98) !important;
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.12);
}
.adm-config-refresh {
  min-height: 44px;
  padding: 0 1rem;
  font-size: 13px;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.adm-config-refresh svg {
  transition: transform 320ms ease;
}

.adm-config-refresh:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: rgba(79, 195, 247, 0.48) !important;
  background: rgba(22, 39, 64, 0.98) !important;
  box-shadow: 0 10px 24px rgba(1, 8, 22, 0.32);
}

.adm-config-refresh:not(:disabled):hover svg {
  transform: rotate(110deg);
}

.adm-config-refresh:focus-visible,
.adm-cv2-card:focus-visible {
  outline: 2px solid #67d4ff;
  outline-offset: 3px;
}

.adm-config-page .adm-config-grid {
  gap: 18px !important;
}

.adm-cv2-card {
  display: block;
  border-radius: 14px;
  outline: none;
  filter: drop-shadow(0 10px 20px rgba(1, 6, 17, 0.16));
  transition: filter 200ms ease;
}

.adm-config-page .adm-cv2-module {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  flex-wrap: nowrap !important;
  border-color: rgba(112, 143, 194, 0.3) !important;
  border-radius: 14px !important;
  background: linear-gradient(112deg, rgba(16, 25, 42, 0.99), rgba(8, 14, 25, 0.99)) !important;
  box-shadow: 0 16px 38px rgba(1, 7, 19, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease !important;
}

.adm-config-page .adm-cv2-module::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--adm-card-status, #4fc3f7);
  opacity: 0.7;
  transition: opacity 200ms ease, box-shadow 200ms ease;
}

.adm-config-page .adm-cv2-module::after {
  content: '';
  position: absolute;
  z-index: 5;
  inset: 0;
  border: 2px solid var(--adm-card-status, #4fc3f7);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--adm-card-status, #4fc3f7) 7%, transparent);
  transition: opacity 200ms ease, box-shadow 200ms ease;
}

.adm-config-page .adm-cv2-card:hover {
  filter: drop-shadow(0 18px 30px rgba(1, 6, 17, 0.3));
}

.adm-config-page .adm-cv2-card:hover .adm-cv2-module {
  transform: translateY(-4px);
  border-color: var(--adm-card-status, #4fc3f7) !important;
  box-shadow: 0 24px 52px rgba(1, 7, 19, 0.4), 0 0 24px color-mix(in srgb, var(--adm-card-status, #4fc3f7) 12%, transparent) !important;
}

.adm-config-page .adm-cv2-card:hover .adm-cv2-module::after,
.adm-config-page .adm-cv2-card:focus-visible .adm-cv2-module::after {
  opacity: 1;
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--adm-card-status, #4fc3f7) 10%, transparent);
}

.adm-config-page .adm-cv2-card:hover .adm-cv2-module::before {
  opacity: 1;
  box-shadow: 0 0 18px color-mix(in srgb, var(--adm-card-status, #4fc3f7) 42%, transparent);
}

.adm-config-page .adm-cv2-rail {
  min-width: 0 !important;
  max-width: none !important;
  min-height: 54px;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 11px 18px !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(91, 120, 172, 0.18);
  background: linear-gradient(90deg, rgba(10, 18, 31, 0.98), rgba(9, 17, 29, 0.9)) !important;
  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.012);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}

.adm-config-page .adm-cv2-status-active .adm-cv2-rail,
.adm-config-page .adm-cv2-status-live .adm-cv2-rail {
  background: linear-gradient(90deg, rgba(8, 32, 30, 0.78), rgba(8, 17, 29, 0.94) 46%, rgba(7, 14, 25, 0.98)) !important;
}

.adm-config-page .adm-cv2-status-expired .adm-cv2-rail {
  background: linear-gradient(90deg, rgba(43, 23, 12, 0.78), rgba(13, 17, 27, 0.94) 46%, rgba(8, 14, 24, 0.98)) !important;
}

.adm-cv2-status-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid color-mix(in srgb, var(--adm-card-status, #4fc3f7) 34%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--adm-card-status, #4fc3f7) 10%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--adm-card-status, #4fc3f7) 14%, transparent);
}

.adm-cv2-status-mark > span {
  width: 8px !important;
  height: 8px !important;
}

.adm-config-page .adm-cv2-rail > div:first-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0;
}

.adm-config-page .adm-cv2-rail .adm-cv2-status-mark + span {
  color: #c1cde0 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
}

.adm-config-page .adm-cv2-rail > div:last-child {
  justify-content: flex-end !important;
}

.adm-cv2-rail-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.adm-config-page .adm-cv2-rail-badges {
  flex-wrap: nowrap !important;
}

.adm-config-page .adm-cv2-rail-badges > span {
  min-height: 22px !important;
  padding: 0 8px !important;
  border-color: rgba(118, 151, 208, 0.2) !important;
  border-radius: 6px !important;
  background: rgba(67, 88, 126, 0.2) !important;
  color: #d2def0 !important;
  font-size: 10px !important;
}

.adm-config-page .adm-cv2-main {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.8fr);
  align-items: start;
  gap: 18px !important;
  padding: 18px 20px !important;
  background: linear-gradient(180deg, rgba(12, 20, 34, 0.52), rgba(7, 13, 23, 0.2)) !important;
}

.adm-config-page .adm-cv2-info-column,
.adm-config-page .adm-cv2-trade-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.adm-config-page .adm-cv2-info-column {
  gap: 10px;
}

.adm-config-page .adm-cv2-trade-column {
  gap: 14px;
}

.adm-config-page .adm-cv2-top-row {
  display: block !important;
  align-items: center !important;
  min-width: 0;
}

.adm-config-page .adm-cv2-identity {
  position: relative;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  column-gap: 12px !important;
  row-gap: 5px !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(100, 140, 203, 0.14) !important;
  border-left: 3px solid rgba(79, 195, 247, 0.55) !important;
  border-radius: 8px !important;
  background: linear-gradient(105deg, rgba(18, 33, 57, 0.72), rgba(11, 20, 35, 0.58)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.02);
}

.adm-cv2-b2b-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 21px;
  padding: 0 10px;
  border: 1px solid rgba(253, 224, 71, 0.56);
  border-radius: 999px;
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 54%, #b45309 100%);
  color: #201400;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.18), inset 0 1px rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
}

.adm-config-page .adm-cv2-account-label,
.adm-config-page .adm-cv2-slot-label {
  align-self: center;
  margin: 0 !important;
  color: #7187a8 !important;
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap;
}

.adm-config-page .adm-cv2-account-value,
.adm-config-page .adm-cv2-account-email {
  min-width: 0;
  align-self: center;
  margin: 0 !important;
  overflow: hidden;
  color: #eef5ff !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-config-page .adm-cv2-account-value {
  font-size: 15px !important;
}

.adm-config-page .adm-cv2-account-email {
  color: #8ea3c1 !important;
  font-size: 11px !important;
}

.adm-config-page .adm-cv2-actions {
  flex: none !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: auto !important;
  align-self: center !important;
}

.adm-config-page .adm-cv2-actions > button:hover {
  border-color: rgba(79, 195, 247, 0.45) !important;
  background: rgba(79, 195, 247, 0.1) !important;
  color: #dff7ff !important;
}

.adm-cv2-open-cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid rgba(111, 145, 201, 0.2);
  border-radius: 8px;
  background: rgba(31, 48, 75, 0.34);
  color: #8fa9ce;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.adm-cv2-open-cue svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adm-cv2-card:hover .adm-cv2-open-cue {
  transform: translateX(2px);
  border-color: color-mix(in srgb, var(--adm-card-status, #4fc3f7) 58%, transparent);
  background: color-mix(in srgb, var(--adm-card-status, #4fc3f7) 10%, transparent);
  color: var(--adm-card-status, #79d9ff);
}

.adm-config-page .adm-cv2-meta-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 7px !important;
  padding-bottom: 0;
  border-bottom: 0;
}

.adm-config-page .adm-cv2-meta-chip {
  display: flex !important;
  justify-content: space-between;
  min-height: 30px;
  padding: 5px 10px !important;
  border-color: rgba(111, 145, 201, 0.17) !important;
  border-radius: 6px !important;
  background: rgba(33, 48, 73, 0.22) !important;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.adm-config-page .adm-cv2-meta-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(111, 172, 255, 0.34) !important;
  background: rgba(42, 67, 104, 0.3) !important;
}

.adm-config-page .adm-cv2-mode-chip {
  grid-column: 1 / -1;
}

.adm-config-page .adm-cv2-date-chip {
  min-width: 0;
}

.adm-config-page .adm-cv2-date-chip span:first-child,
.adm-config-page .adm-cv2-date-chip span:last-child {
  white-space: nowrap !important;
}

.adm-config-page .adm-cv2-date-chip span:last-child {
  flex-shrink: 0;
  overflow: visible !important;
  text-overflow: clip !important;
}

.adm-config-page .adm-cv2-meta-chip span:first-child {
  color: #7187a8 !important;
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
}

.adm-config-page .adm-cv2-meta-chip span:last-child {
  color: #cbd8eb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.adm-config-page .adm-cv2-plan-chip span:last-child {
  color: #c5a8f5 !important;
}

.adm-config-page .adm-cv2-side-chip span:last-child {
  color: #f1cf75 !important;
}

.adm-config-page .adm-cv2-expired-chip {
  border-color: rgba(249, 115, 22, 0.28) !important;
  background: rgba(249, 115, 22, 0.07) !important;
}

.adm-config-page .adm-cv2-expired-chip span:last-child {
  color: #ff9852 !important;
}

.adm-config-page .adm-cv2-risk-panel {
  min-width: 0;
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.adm-config-page .adm-cv2-risk-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px !important;
  color: #7f93b1 !important;
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
}

.adm-cv2-instrument {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(79, 195, 247, 0.22);
  border-radius: 6px;
  background: rgba(79, 195, 247, 0.07);
  color: #8bdfff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.adm-config-page .adm-cv2-risk-grid {
  grid-template-columns: minmax(150px, 1.5fr) repeat(4, minmax(92px, 1fr)) minmax(130px, 1.25fr) !important;
  gap: 8px !important;
}

.adm-config-page .adm-cv2-risk-cell {
  position: relative;
  min-height: 64px;
  padding: 11px 12px !important;
  overflow: hidden;
  border-color: rgba(111, 145, 201, 0.16) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(8, 15, 27, 0.76), rgba(5, 10, 19, 0.64)) !important;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.adm-config-page .adm-cv2-risk-balance,
.adm-config-page .adm-cv2-risk-broker {
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.adm-config-page .adm-cv2-risk-balance > div:last-child,
.adm-config-page .adm-cv2-risk-broker > div:last-child {
  font-size: 16px !important;
}

.adm-config-page .adm-cv2-risk-cell::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: #5f86bd;
  opacity: 0.45;
}

.adm-config-page .adm-cv2-risk-cell:hover {
  transform: translateY(-2px);
  border-color: rgba(111, 172, 255, 0.32) !important;
  background: rgba(13, 24, 42, 0.76) !important;
}

.adm-config-page .adm-cv2-risk-sl::before {
  background: #ef7b8c;
}

.adm-config-page .adm-cv2-risk-tp::before {
  background: #58c58a;
}

.adm-config-page .adm-cv2-risk-prop::before {
  background: #b276ff;
}

.adm-config-page .adm-cv2-risk-broker::before {
  background: #4fc3f7;
}

.adm-config-page .adm-cv2-risk-cell > div:first-child {
  color: #7187a8 !important;
  font-size: 9px !important;
  letter-spacing: 0.06em !important;
}

.adm-config-page .adm-cv2-risk-cell > div:last-child {
  margin-top: 7px !important;
  color: #d8e5f7 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.adm-config-page .adm-cv2-risk-sl > div:last-child {
  color: #f4a0ad !important;
}

.adm-config-page .adm-cv2-risk-tp > div:last-child {
  color: #82d8a5 !important;
}

.adm-config-page .adm-cv2-risk-broker > div:last-child {
  color: #8fdcff !important;
}

.adm-config-page .adm-cv2-formula {
  display: flex !important;
  align-items: center;
  gap: 8px;
  align-self: start;
  width: 100%;
  min-height: 42px;
  margin-top: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(79, 195, 247, 0.2) !important;
  border-radius: 6px !important;
  background: rgba(18, 40, 70, 0.34) !important;
  color: #a7d5ff !important;
}

.adm-cv2-formula svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


@media (max-width: 1280px) {
  .adm-config-page .adm-cv2-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px !important;
  }

  .adm-config-page .adm-cv2-meta-strip {
    display: flex !important;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(111, 145, 201, 0.15);
  }

  .adm-config-page .adm-cv2-meta-chip {
    justify-content: flex-start;
  }

  .adm-config-page .adm-cv2-risk-grid {
    grid-template-columns: repeat(3, minmax(110px, 1fr)) !important;
  }

  .adm-config-page .adm-cv2-risk-balance,
  .adm-config-page .adm-cv2-risk-broker {
    min-height: 64px;
  }
}

@media (max-width: 900px) {
  .adm-config-page {
    padding: 18px 16px 28px !important;
  }

  .adm-config-page .adm-tools {
    width: 100%;
  }

  .adm-config-search-wrap {
    width: 100%;
  }

  .adm-config-page .adm-cv2-module::before {
    top: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: 3px;
  }

  .adm-config-page .adm-cv2-rail {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(91, 120, 172, 0.18);
  }

  .adm-config-page .adm-cv2-rail > div:last-child {
    justify-content: flex-end !important;
  }
}

/* ═══════════════════════════════════════════════════
   AdminDashboardPage — Mobile Responsive
   Breakpoints: ≤768px | ≤480px | ≤375px
   Sidebar/navbar handled globally in app-layout.css.
   ═══════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════
   ≤ 768 px
   ════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Page ── */
  .adm-page {
    padding: 10px 10px 24px;
    overflow-x: hidden;
  }

  /* ── Hero panel ── */
  .adm-hero-panel {
    padding: 12px 12px 10px !important;
    margin-bottom: 10px !important;
  }

  /* ── Header row ── */
  .adm-header-row {
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .adm-header-row h1 {
    font-size: 20px !important;
    letter-spacing: -0.02em !important;
  }

  .adm-top-status {
    display: none !important;
  }

  /* ── Actions row ── */
  .adm-actions-row {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .adm-tools {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100%;
  }

  .adm-search {
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 1 1 100% !important;
    min-height: 44px !important;
  }

  /* ════════════════════════════════════════════════
     DASHBOARD / TRADING VIEW — paired stat+chart
     ════════════════════════════════════════════════ */
  .adm-trading-dash {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .adm-stats-grid     { display: contents !important; }
  .adm-charts-primary { display: contents !important; }

  .adm-stat-card { width: 100% !important; box-sizing: border-box !important; }
  .adm-stat-0 { order: 10; }
  .adm-stat-1 { order: 20; }
  .adm-stat-2 { order: 30; }
  .adm-stat-3 { order: 35; }
  .adm-chart-0 { order: 11; width: 100%; }
  .adm-chart-1 { order: 21; width: 100%; }
  .adm-chart-2 { order: 31; width: 100%; }

  .adm-compact-panel {
    order: 50;
    overflow: visible !important;
  }

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

  .adm-charts-row {
    order: 60;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .adm-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ════════════════════════════════════════════════
     CONFIG VIEW — AdminSlotCardV2
     Target layout at 375px:
     ┌─────────────────────────────────────────────┐
     │ ACCOUNT LINK Ajay · Trader Slot · email     │  ← 11px all
     │ [EXECUTE TRADE ──────────] [Subscription]   │  ← buttons row
     │ PLAN Lite│SIDE BUY│MODE Paper│CREATED│UNTIL │  ← 10px
     │ BALANCE│SL PTS│TP PTS  /  PROP│COPIER│BRK   │  ← 3×2 10px
     │ formula link                                │
     └─────────────────────────────────────────────┘
     ════════════════════════════════════════════════ */

  /* Config grid: no grid gap; module margin-bottom handles spacing */
  .adm-config-grid {
    gap: 0 !important;
  }

  /* ── Card module ─────────────────────────────────── */
  .adm-cv2-module {
    flex-direction: column !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;  /* inter-card spacing */
    min-height: unset !important;
    height: auto !important;
  }

  /* Rail: hidden — task layout has no status-strip row */
  .adm-cv2-rail {
    display: none !important;
  }

  /* ── Card body: 8px padding, 4px gap between sections ──
     flex: 0 0 auto overrides inline flex:"1 1 340px" which
     was forcing a 340px minimum height → empty white space. */
  .adm-cv2-main {
    flex: 0 0 auto !important;
    padding: 14px !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: unset !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* Top row (identity + buttons): column, zero gap between them */
  .adm-cv2-top-row {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: stretch !important;
    min-height: unset !important;
    height: auto !important;
    margin-bottom: 8px !important;
  }

  /* ── LINE 1: identity as tight horizontal row ────────
     flex: none overrides inline flex:"1 1 220px" which was
     forcing a 220px minimum height → empty white space.
     Remove the "card-within-card" styling too.          */
  /* ── Row 1: Account Link + name / Row 2: Trader Slot + email ──
     CSS grid 2-column layout places:
       col-1 row-1 → "ACCOUNT LINK" label
       col-2 row-1 → account name/value          (Line 1)
       col-1 row-2 → "Trader Slot" label
       col-2 row-2 → email address               (Line 2)
     Subtle panel styling adds visual polish.               */
  .adm-cv2-identity {
    flex: none !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    row-gap: 4px !important;
    column-gap: 8px !important;
    padding: 8px 10px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: unset !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* All four divs: 11px, no vertical margin */
  .adm-cv2-identity > div {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    align-self: center !important;
  }

  /* Grid placement — natural DOM order */
  .adm-cv2-identity > div:nth-child(1) { grid-column: 1; grid-row: 1; }
  .adm-cv2-identity > div:nth-child(2) { grid-column: 2; grid-row: 1; }
  .adm-cv2-identity > div:nth-child(3) { grid-column: 1; grid-row: 2; }
  .adm-cv2-identity > div:nth-child(4) { grid-column: 2; grid-row: 2; }

  /* ── LINE 2: buttons in the same row ─────────────────
     Execute (wider) and Subscription side-by-side.
     align-self:stretch overrides inline align-self:center
     from commandListActions styles.                     */
  .adm-cv2-actions {
    flex: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    align-self: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: unset !important;
    height: auto !important;
  }

  .adm-cv2-exec-btn {
    flex: 2 1 0 !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 7px !important;
    font-size: 10px !important;
  }

  .adm-cv2-sub-btn {
    flex: 1 1 0 !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 7px !important;
    font-size: 10px !important;
  }

  /* ── LINE 3: PLAN / SIDE / MODE / CREATED / VALID ────
     Compact chips, 10px font.                          */
  .adm-cv2-meta-strip {
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }

  .adm-cv2-meta-strip > div {
    padding: 3px 6px !important;
    border-radius: 6px !important;
    gap: 4px !important;
  }

  /* All text inside chips: 10px */
  .adm-cv2-meta-strip span {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  /* ── LINE 4: TRADE VARIABLES 3×2 grid ─────────────────
     Remove the panel's box styling so grid sits flush.
     3 columns → BALANCE│SL PTS│TP PTS on row 1
                 PROP LOT│COPIER│BROKER LOT on row 2.   */
  .adm-cv2-risk-panel {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
  }

  /* Row 5: TRADE VARIABLES label */
  .adm-cv2-risk-panel > div:first-child {
    margin-bottom: 6px !important;
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
  }

  /* Row 6: 3×2 grid */
  .adm-cv2-risk-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  /* Cell: 8px padding */
  .adm-cv2-risk-grid > div {
    padding: 8px !important;
    border-radius: 8px !important;
  }

  /* Cell label + value: 10px */
  .adm-cv2-risk-grid div {
    font-size: 10px !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
  }

  /* Row 7: formula — border-top separator */
  .adm-cv2-formula {
    margin-top: 8px !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
    border-radius: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 9px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 520px) {
  .adm-config-title-wrap {
    padding-left: 14px;
  }

  .adm-config-page .adm-cv2-rail {
    padding: 10px 12px !important;
  }

  .adm-config-page .adm-cv2-identity {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }

  .adm-config-page .adm-cv2-account-label,
  .adm-config-page .adm-cv2-slot-label,
  .adm-config-page .adm-cv2-account-value,
  .adm-config-page .adm-cv2-account-email {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .adm-config-page .adm-cv2-slot-label {
    margin-top: 6px !important;
  }

  .adm-config-page .adm-cv2-risk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* ════════════════════════════════════════════════════
   ≤ 480 px
   ════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .adm-page {
    padding: 8px 8px 20px;
  }

  .adm-hero-panel {
    padding: 10px 10px 8px !important;
  }

  .adm-header-row h1 {
    font-size: 18px !important;
  }

  /* Already set to 8px in ≤768px, no change needed */
}

/* ════════════════════════════════════════════════════
   ≤ 375 px
   ════════════════════════════════════════════════════ */
@media (max-width: 375px) {

  .adm-page {
    padding: 8px 8px 16px;
  }

  /* 375px: 3 cols = (359 - 2×3) / 3 ≈ 117px per cell.
     Labels at 10px uppercase + values at 10px fit fine. */
  .adm-cv2-risk-grid {
    gap: 2px !important;
  }
}

@media (max-width: 768px) {
  .adm-config-page {
    padding: 12px 10px 24px !important;
  }

  .adm-config-page .adm-config-hero {
    padding: 16px !important;
  }

  .adm-config-page .adm-tools {
    flex-wrap: wrap !important;
  }

  .adm-config-page .adm-config-search {
    flex-basis: auto !important;
  }

  .adm-config-page .adm-config-refresh {
    width: 100%;
  }

  .adm-config-page .adm-config-grid {
    gap: 10px !important;
  }

  .adm-config-page .adm-cv2-module {
    margin-bottom: 0 !important;
  }

  .adm-config-page .adm-cv2-main {
    gap: 12px !important;
    padding: 14px !important;
  }

  .adm-config-page .adm-cv2-top-row {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
  }

  .adm-config-page .adm-cv2-identity {
    padding: 10px 12px !important;
  }

  .adm-config-page .adm-cv2-actions {
    width: auto !important;
    align-self: center !important;
    justify-content: flex-end !important;
  }

  .adm-config-page .adm-cv2-meta-strip {
    display: flex !important;
    margin-bottom: 0 !important;
    padding-bottom: 12px;
  }

  .adm-config-page .adm-cv2-meta-chip {
    min-height: 29px;
    padding: 5px 8px !important;
  }

  .adm-config-page .adm-cv2-risk-panel {
    padding-top: 0 !important;
  }

  .adm-config-page .adm-cv2-risk-panel > div:first-child {
    margin-bottom: 9px !important;
  }

  .adm-config-page .adm-cv2-risk-grid {
    gap: 6px !important;
  }

  .adm-config-page .adm-cv2-risk-cell {
    min-height: 58px;
    padding: 9px 10px !important;
  }

  .adm-config-page .adm-cv2-formula {
    margin-top: 8px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(79, 195, 247, 0.2) !important;
    white-space: normal !important;
  }
}



@media (prefers-reduced-motion: reduce) {
  .adm-config-page .adm-cv2-module,
  .adm-config-page .adm-cv2-module::after,
  .adm-config-page .adm-cv2-risk-cell,
  .adm-config-page .adm-cv2-meta-chip,
  .adm-config-refresh,
  .adm-config-refresh svg,
  .adm-cv2-open-cue {
    transition: none !important;
  }

  .adm-config-page .adm-cv2-card:hover .adm-cv2-module {
    transform: none;
  }
}




/* ── hedgio-cert compact template (597×422) ── */

.hedgio-cert {
  /* width: 597px; */
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: 'EB Garamond', Georgia, serif;
  background-color:#010413;
}

.hedgio-cert__outer {
	position: relative;
	width: min(42vw, 980px);
	max-width: 100%;
	min-height: min(36vw, 700px);
	height: auto;
	padding: 2rem 1.5rem 1.25rem;
	box-sizing: border-box;
	overflow: hidden;
}

.hedgio-cert__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
	z-index: 0;
}

.hedgio-cert__inner {
	min-height: 100%;
	height: auto;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: visible;
	
	/* background:
	radial-gradient(circle at 50% 13%, rgba(27, 43, 75, 0.38) 0%, rgba(7, 13, 28, 0.18) 19%, transparent 39%),
	linear-gradient(160deg, #071122 0%, #030815 52%, #050d1c 100%);
	border: 1px solid #8a9db5;
	box-shadow:
	0 0 0 1px rgba(20, 35, 60, 0.95) inset,
	0 0 0 3px rgba(3, 9, 20, 0.95) inset,
	0 0 30px rgba(0, 0, 0, 0.55) inset; */
}

.hedgio-cert__logo {
	display: flex;
	justify-content: center;
}

.hedgio-cert__logo img{
	width: 100px;
	object-fit: contain;
}

.hedgio-cert__inner > * {
  position: relative;
  z-index: 2;
}

.hedgio-cert__title h2{
	font-family: "Cinzel", serif;
	font-weight: 600;
	letter-spacing: 10px;
	font-size: 1.5rem;
	text-align: center;
    background: linear-gradient(180deg,
		#f2f4f8,
		#686a77,
		#fff,
		#686a77,
		#f8fafc
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 0 2px rgba(255,255,255,.4),
        0 0 8px rgba(120,170,255,.15);
}

.hedgio-cert__subtitle {
	font-family: "Montserrat", sans-serif;
	font-size: 1rem;
	text-transform: uppercase;
	color: #8ba6c7;
	letter-spacing: 6px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.hedgio-cert__subtitle span{
	font-family: "Montserrat", sans-serif;
	font-size: 0.9rem;
	text-transform: uppercase;
	background: linear-gradient(#e6ebef, #a8afbf);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 0;
}

.hedgio-cert__subtitle-divider {
	width: 15%;
	height: 20px;
	object-fit: contain;
	flex: 0 0 auto;
}

.hedgio-cert__subtitle-divider--flip {
	transform: rotate(180deg);
}

.hedgio-cert__presented {
  width: 100%;
  font-family: "Montserrat", sans-serif;
  font-size: 0.625rem;
  color: #eee;
  letter-spacing: 1.5px;
  text-align: center;
}

.hedgio-cert__recipient {
	width: 100%;
	font-family: "Playfair Display", serif;
	font-size: 2rem;
	color: #fff;
	text-align: center;
	letter-spacing: 1.1px;
	line-height: 1.25;
	overflow: visible;
	text-shadow: 0 0 5px rgba(140, 190, 255, 0.16);
	padding: 0.5rem 0 0;
}

.hedgio-cert__recipient-divider {
	display: block;
	width: 75%;
	height: 20px;
	margin: 0.35rem auto 0.5rem;
	object-fit: contain;
}

.hedgio-cert__scenario {
  width: 100%;
  font-family: "Montserrat", sans-serif;
  font-size: 0.625rem;
  color: #5090e0;
  letter-spacing: 2px;
  text-align: center;
  margin: 0;
}

.hedgio-cert__description {
  width: 100%;
  font-family: "Montserrat", sans-serif;
  font-size: 0.625rem;
  color: #eee;
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.65;
}

.hedgio-cert__description-accent {
  color: #5090e0;
}

.hedgio-cert__stats {
  width: 80%;
  margin: 0.5rem auto 1.75rem;
  padding: 1px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 96px;
  border-radius: 10px;
  overflow: hidden;
  background: #56616e;
  box-shadow: 0 0 18px rgba(38, 78, 132, 0.13);
  border: none;
  box-sizing: border-box;
  isolation: isolate;
}

.hedgio-cert__stat {
	padding: 10px 6px 12px;
	text-align: center;
	min-width: 0;
	height: 100%;
	min-height: 0;
	border: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	gap: 4px;
	overflow: visible;
	background: #050d20;
}

.hedgio-cert__stat:first-child {
	border-radius: 9px 0 0 9px;
}

.hedgio-cert__stat:last-child {
	border-radius: 0 9px 9px 0;
}

.hedgio-cert__stat:not(:last-child) {
	border-right: 1px solid #56616e;
}

.hedgio-cert__stat-icon {
	height: 18px;
	width: 18px;
	margin: 0;
	opacity: 0.95;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 18px;
}

.hedgio-cert__stat-icon svg {
	width: 18px;
	height: 18px;
	display: block;
	color: #c2c8d3;
}

.hedgio-cert__stat-label {
	font-family: "Montserrat", sans-serif;
	font-size: 0.5rem;
	line-height: 1.1;
	color: #eee;
	letter-spacing: 1px;
	margin: 0;
	white-space: nowrap;
	flex: 0 0 auto;
}

.hedgio-cert__stat-label--highlight {
	color: #fff;
	font-weight: 600;
	letter-spacing: 1px;
}

.hedgio-cert__stat-value {
	font-family: "Cinzel", serif;
	font-size: 1.15rem;
	font-weight: 600;
	color: #e0e9fb;
	line-height: 1;
	margin: 0;
	flex: 0 0 auto;
}

.hedgio-cert__stat-value--profit,
.hedgio-cert__stat-value--positive {
	font-size: 1.15rem;
	font-weight: 600;
	color: #42e77b;
}

.hedgio-cert__stat-value--negative {
	font-size: 1.15rem;
	font-weight: 700;
	color: #f87171;
}

.cert_body {
	flex: 0 0 auto;
	padding-bottom: 0.35rem;
}

.hedgio-cert__footer {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	margin-top: 0.75rem;
	border: 0;
	padding: 0.35rem 1rem 1.25rem;
	gap: 0.75rem;
	width: 100%;
	box-sizing: border-box;
}

.hedgio-cert__footer__col {
	flex: 1 1 0;
	min-width: 0;
	font-family: "Montserrat", sans-serif;
}

.hedgio-cert__footer-date {
	position: relative;
	align-self: center;
	padding-bottom: 0.75rem;
}

.hedgio-cert__footer-date-label {
	font-size: 0.65rem;
	color: #5090e0;
	letter-spacing: 1.1px;
	margin-bottom: 0.5rem;
}

.hedgio-cert__footer-date-value {
  font-size: 1rem;
  color: #c3d0e3;
  letter-spacing: 0.4px;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid #8990a2;
  display: inline-block;
  min-width: 80%;
  padding-bottom: 0.35rem;
}

.hedgio-cert__seal-wrap {
  position: relative;
  align-self: center;
  padding-bottom: 0.5rem;
}

.hedgio-cert__seal-wrap img{
	width: 90px;
}

.hedgio-cert__footer-signature {
  text-align: center;
  align-self: center;
  padding-top: 6px;
  padding-left: 10px;
  padding-bottom: 0.5rem;
}

.hedgio-cert__signature-img{
	width: 150px;
}

.hedgio-cert__footer-qr {  
  text-align: center;
  align-self: center;
  padding-bottom: 0.75rem;
}

.hedgio-cert__signature-full {
	font-size: 0.75rem;
	color: #5090e0;
	letter-spacing: 1.6px;
}

.hedgio-cert__signature-title {
	font-size: 0.65rem;
	color: #eee;
	letter-spacing: 0.5px;
	margin-top: 3px;
}

.hedgio-cert__qr-box {
	background: transparent;
	border:1px solid #2c3345;
	padding: 5px;
	margin:0 auto 5px;
	width: 70px;
	height: 70px;
}

.hedgio-cert__qr-img {
	width: 100%;
	object-fit: contain;
	display: block;
}

.hedgio-cert__cert-id-label {
	font-size: 0.6rem;
	color: #5090e0;
	letter-spacing: 0.5px;
	text-align: center;
}

.hedgio-cert__cert-id-value {
  font-size:0.75rem;
  color: #8090b0;
  text-align: center;
  word-break: break-all;
}

@media all and (min-width: 1900px){
	.hedgio-cert__outer {
		width: min(45vw, 980px);
		min-height: min(34vw, 700px);
		padding-top: 4rem;
	}

}

@media only screen and (min-device-width: 1600px) and (max-device-height: 900px) {
	.hedgio-cert__outer {
		width: min(50vw, 980px);
		min-height: min(36vw, 700px);
	}

}

@media only screen and (min-device-width: 1366px) and (max-device-height: 768px){
	.hedgio-cert__outer {
		width: min(50vw, 980px);
		min-height: min(38vw, 700px);
	}
	
}

@media only screen and (min-device-width: 1280px) and (max-device-height: 800px){
	.hedgio-cert__outer {
		width: min(56vw, 980px);
		min-height: min(40vw, 700px);
	}
	
}

@media all and (min-width: 1200px) and (max-width: 1399px){
	.hedgio-cert__logo img, .hedgio-cert__seal-wrap img{
		width: 75px;
	}
	.hedgio-cert__title h2{
		font-size: 1.25rem;
	}
	.hedgio-cert__subtitle span, .hedgio-cert__footer-date-value{
		font-size: 0.75rem;
	}
	.hedgio-cert__presented, .hedgio-cert__description, .hedgio-cert__scenario, .hedgio-cert__footer-date-label, .hedgio-cert__signature-full, .hedgio-cert__signature-title, .hedgio-cert__cert-id-label, .hedgio-cert__cert-id-value{
		font-size: 0.5rem;
	}
	.hedgio-cert__recipient{
		font-size: 1.8rem;
	}
	.hedgio-cert__stat-icon svg {
		width: 18px;
		height: 18px;
	}
	.hedgio-cert__stat-label{
		font-size: 0.45rem;
	}
	.hedgio-cert__stat-value,
	.hedgio-cert__stat-value--profit,
	.hedgio-cert__stat-value--positive,
	.hedgio-cert__stat-value--negative {
		font-size: 1rem;
	}
	.hedgio-cert__signature-img {
		width: 120px;
	}
	.hedgio-cert__qr-box{
		width: 60px;
		height: 60px;
	}
}

@media all and (min-width: 1024px) and (max-width: 1200px){
	.hedgio-cert__logo img, .hedgio-cert__seal-wrap img{
		width: 75px;
	}
	.hedgio-cert__title h2{
		font-size: 1.25rem;
	}
	.hedgio-cert__subtitle span, .hedgio-cert__footer-date-value{
		font-size: 0.75rem;
	}
	.hedgio-cert__presented, .hedgio-cert__description, .hedgio-cert__scenario, .hedgio-cert__footer-date-label, .hedgio-cert__signature-full, .hedgio-cert__signature-title, .hedgio-cert__cert-id-label, .hedgio-cert__cert-id-value{
		font-size: 0.5rem;
	}
	.hedgio-cert__recipient{
		font-size: 1.8rem;
	}
	.hedgio-cert__stat-icon svg {
		width: 18px;
		height: 18px;
	}
	.hedgio-cert__stat-label{
		font-size: 0.45rem;
	}
	.hedgio-cert__stat-value,
	.hedgio-cert__stat-value--profit,
	.hedgio-cert__stat-value--positive,
	.hedgio-cert__stat-value--negative {
		font-size: 1rem;
	}
	.hedgio-cert__signature-img {
		width: 120px;
	}
	.hedgio-cert__qr-box{
		width: 60px;
		height: 60px;
	}
}

/* .hedgio-cert__seal-gear {
  position: absolute;
  top: 0;
  left: 0;
}

.hedgio-cert__seal-inner {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #253560 0%, #141e3c 50%, #0a1228 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.4);
}

.hedgio-cert__seal-inner::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(100, 150, 220, 0.3);
}

.hedgio-cert__seal-top {
  font-family: 'Cinzel', serif;
  font-size: 4.5px;
  color: #90a8cc;
  letter-spacing: 1.2px;
}

.hedgio-cert__seal-stars {
  color: #5a80b8;
  font-size: 5px;
  letter-spacing: 1.5px;
} */

/* .hedgio-cert__seal-ver {
  font-family: 'Cinzel', serif;
  font-size: 7px;
  font-weight: 700;
  color: #d0e4ff;
  letter-spacing: 0.7px;
}

.hedgio-cert__seal-bot {
  font-family: 'Cinzel', serif;
  font-size: 4.2px;
  color: #8090b0;
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.4;
} 

.hedgio-cert__signature-script {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: 18px;
  color: #d8eaff;
  border-bottom: 1px solid #33445d;
  padding-bottom: 3px;
  margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(100, 160, 255, 0.25);
  white-space: nowrap;
}*/

/* .hedgio-cert__inner::before,
.hedgio-cert__inner::after {
  content: 'H';
  position: absolute;
  font-family: 'Cinzel', serif;
  font-size: 106px;
  font-weight: 900;
  color: rgba(132, 159, 190, 0.052);
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

.hedgio-cert__inner::before {
  left: 18px;
  top: 26px;
}

.hedgio-cert__inner::after {
  right: 13px;
  bottom: 22px;
} */

/* .hedgio-cert__arc {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  border: 1px solid rgba(70, 105, 165, 0.12);
}

.hedgio-cert__arc--1 { top: -178px; left: -137px; width: 345px; height: 345px; opacity: 0.55; }
.hedgio-cert__arc--2 { top: -87px; left: -31px; width: 296px; height: 296px; opacity: 0.72; }
.hedgio-cert__arc--3 { top: -41px; left: 14px; width: 211px; height: 211px; opacity: 0.45; }
.hedgio-cert__arc--4 { right: -94px; bottom: -116px; width: 224px; height: 224px; opacity: 0.33; }
.hedgio-cert__arc--5 { right: -53px; bottom: -77px; width: 154px; height: 154px; opacity: 0.25; } 

.hedgio-cert__corner {
  position: absolute;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 2;
}

.hedgio-cert__corner--tl { top: 10px; left: 10px; border-top: 1.5px solid #c8d4e0; border-left: 1.5px solid #c8d4e0; }
.hedgio-cert__corner--tr { top: 10px; right: 10px; border-top: 1.5px solid #c8d4e0; border-right: 1.5px solid #c8d4e0; }
.hedgio-cert__corner--bl { bottom: 10px; left: 10px; border-bottom: 1.5px solid #c8d4e0; border-left: 1.5px solid #c8d4e0; }
.hedgio-cert__corner--br { bottom: 10px; right: 10px; border-bottom: 1.5px solid #c8d4e0; border-right: 1.5px solid #c8d4e0; }

.hedgio-cert__logo-wrap {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 146px;
  text-align: center;
}

.hedgio-cert__logo-laurel-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 82px;
}

.hedgio-cert__logo-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 37% 31%, rgba(255, 255, 255, 0.14) 0%, transparent 19%),
    radial-gradient(circle at 50% 48%, #27385d 0%, #15243f 51%, #071222 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 2px #dce6f0,
    0 0 0 5px #101e30,
    0 0 0 7px #8296aa,
    0 0 16px rgba(91, 128, 176, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -3px 0 rgba(0, 0, 0, 0.42);
}

.hedgio-cert__logo-name {
  font-family: 'Cinzel', serif;
  font-size: 6px;
  color: #9da6b3;
  letter-spacing: 2px;
  margin-top: -7px;
}


.hedgio-cert__divider {
  position: absolute;
  left: 205px;
  top: 132px;
  width: 186px;
  height: 1px;
  background: linear-gradient(to right, transparent, #203a5f, #506b91, #203a5f, transparent);
}
*/

/* ── Inline preview (Progress tab) ── */

.dash-cert-preview {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dash-cert-preview--fill {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dash-cert-preview__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.dash-cert-preview__title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c4b07a;
}

.dash-cert-preview__hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  max-width: 420px;
}

.dash-cert-preview__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dash-cert-preview__btn {
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid rgba(203, 213, 225, 0.3);
  background: rgba(15, 23, 42, 0.85);
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.dash-cert-preview__btn:hover {
  transform: translateY(-1px);
  border-color: rgba(82, 214, 255, 0.45);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.dash-cert-preview__btn--primary {
  border-color: rgba(212, 175, 106, 0.55);
  background: linear-gradient(135deg, rgba(212, 175, 106, 0.2), rgba(212, 175, 106, 0.06));
  color: #f0ddb0;
}

.dash-cert-preview__btn:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.hedgio-cert-export-source,
.dash-cert-preview__export-source {
  position: fixed;
  left: 0;
  top: 0;
  width: 980px;
  height: 700px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
  z-index: -1;
}

.hedgio-cert-export-source .hedgio-cert__outer,
.dash-cert-preview__export-source .hedgio-cert__outer {
  width: 980px;
  height: 700px;
  min-height: 700px;
}

.hedgio-cert-export-source .hedgio-cert__bg-img,
.dash-cert-preview__export-source .hedgio-cert__bg-img {
  width: 980px;
  height: 700px;
  object-fit: fill;
}

.dash-cert-preview__stage {
	flex: 1;
	border-radius: 16px;
	padding: 12px 16px 16px;
	overflow: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	background-color:#010413;
	/* background:
		radial-gradient(ellipse 90% 60% at 50% 0%, rgba(212, 175, 106, 0.1), transparent 62%),
		rgba(4, 8, 16, 0.92); */
	border: 1px solid rgba(71, 85, 105, 0.5);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transition: border-color 0.2s ease;
	min-height: 0;
}

.dash-cert-preview--fill .dash-cert-preview__stage {
	flex: 1;
	/* min-height: 280px; */
	padding: 16px 20px 20px;
}

.dash-cert-preview__stage:hover {
  	border-color: rgba(212, 175, 106, 0.45);
}

.dash-cert-preview__scale {
	/*transform: scale(0.92);
	transform-origin: center center;
	 width: min(100%, 597px);
	max-width: 597px; */
	margin: 0 auto;
}

.dash-cert-preview--fill .dash-cert-preview__scale {
  /* transform: scale(1); */
  /* width: min(100%, 597px); */
  /* max-width: 597px; */
}

@media (min-width: 900px) {
  .dash-cert-preview--fill .dash-cert-preview__scale {
    /* transform: scale(1.15); */
  }
}

@media (min-width: 1200px) {
  .dash-cert-preview--fill .dash-cert-preview__scale {
    /* transform: scale(1.35); */
  }
}

/* ── Modal ── */

.hedgio-cert-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 14, 0.92);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 24px 16px;
  overflow-y: auto;
}

.hedgio-cert-modal-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 1020px;
  overflow: visible;
}

.hedgio-cert-modal-wrap .hedgio-cert__outer {
  width: min(92vw, 980px);
  min-height: min(68vw, 700px);
}

.hedgio-cert-modal-details {
  width: 100%;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.88);
}

.hedgio-cert-modal-details__title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

.hedgio-cert-modal-details__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 16px;
  margin: 0;
}

.hedgio-cert-modal-details__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hedgio-cert-modal-details__row dt {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.hedgio-cert-modal-details__row dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #e2e8f0;
}

.hedgio-cert-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 4px 2px;
}

.hedgio-cert-modal-btn {
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(15, 23, 42, 0.95);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.hedgio-cert-modal-btn:hover {
  background: rgba(30, 41, 59, 0.95);
}

.hedgio-cert-modal-btn--ghost {
  background: transparent;
}

.hedgio-cert-modal-btn--primary {
  border-color: rgba(212, 175, 106, 0.5);
  background: linear-gradient(135deg, rgba(212, 175, 106, 0.18), rgba(212, 175, 106, 0.05));
  color: #f0ddb0;
  font-weight: 700;
}

.hedgio-cert-modal-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

@media (max-width: 600px) {
  .dash-cert-preview__scale {
    transform: scale(0.58);
  }

  .dash-cert-preview--fill .dash-cert-preview__scale {
    transform: scale(0.72);
  }
}

@media (max-width: 375px) {
  .hedgio-cert-modal-overlay {
    padding: 12px 8px;
    align-items: flex-start;
  }

  .hedgio-cert-modal-wrap {
    gap: 12px;
  }

  .hedgio-cert-modal-actions {
    justify-content: stretch;
    gap: 6px;
  }

  .hedgio-cert-modal-btn {
    flex: 1 1 calc(50% - 3px);
    text-align: center;
    padding: 8px 10px;
    font-size: 11px;
  }

}

/* html2canvas export: flatten gradient text/backgrounds that break createPattern */

.hedgio-cert--capture .hedgio-cert__title h2,
.hedgio-cert--capture .hedgio-cert__subtitle span,
.hedgio-cert--capture .hedgio-cert__stat-value,
.hedgio-cert--capture .hedgio-cert__stat-icon svg {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  color: #f1f3f6 !important;
}

.hedgio-cert--capture .hedgio-cert__stat-value--profit,
.hedgio-cert--capture .hedgio-cert__stat-value--positive {
  color: #42e77b !important;
  -webkit-text-fill-color: #42e77b !important;
}

.hedgio-cert--capture .hedgio-cert__stat-value--negative {
  color: #f87171 !important;
  -webkit-text-fill-color: #f87171 !important;
}

.hedgio-cert--capture .hedgio-cert__stats,
.hedgio-cert--capture .hedgio-cert__stat,
.hedgio-cert--capture .hedgio-cert__footer-date,
.hedgio-cert--capture .hedgio-cert__outer,
.hedgio-cert--capture .hedgio-cert__inner {
  background-image: none !important;
}

.hedgio-cert--capture .hedgio-cert__stats {
  margin-bottom: 2rem !important;
  padding: 1px !important;
  background: #56616e !important;
  border: none !important;
  grid-template-rows: 96px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.hedgio-cert--capture .hedgio-cert__stat {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  transform: none !important;
  overflow: visible !important;
  background: #050d20 !important;
}

.hedgio-cert--capture .hedgio-cert__stat-label,
.hedgio-cert--capture .hedgio-cert__stat-label--highlight {
  transform: none !important;
  font-size: 0.5rem !important;
  letter-spacing: 1px !important;
}

.hedgio-cert--capture .hedgio-cert__stat-value,
.hedgio-cert--capture .hedgio-cert__stat-value--profit,
.hedgio-cert--capture .hedgio-cert__stat-value--positive,
.hedgio-cert--capture .hedgio-cert__stat-value--negative {
  font-size: 1.15rem !important;
  line-height: 1 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.hedgio-cert--capture .cert_body {
  padding-bottom: 0.5rem !important;
}

.hedgio-cert--capture .hedgio-cert__footer {
  margin-top: 0.5rem !important;
  padding-top: 0.35rem !important;
  padding-bottom: 1.45rem !important;
  align-items: center !important;
}

.hedgio-cert--capture .hedgio-cert__footer-date,
.hedgio-cert--capture .hedgio-cert__footer-qr {
  align-self: center !important;
  padding-bottom: 0.9rem !important;
}

.hedgio-cert--capture .hedgio-cert__seal-wrap,
.hedgio-cert--capture .hedgio-cert__footer-signature {
  padding-bottom: 0.65rem !important;
}

.hedgio-cert--capture .hedgio-cert__outer {
  width: 980px !important;
  height: 700px !important;
  min-height: 700px !important;
}

.hedgio-cert--capture .hedgio-cert__bg-img {
  width: 980px !important;
  height: 700px !important;
  object-fit: fill !important;
}
.my-users-page {
  padding: 26px 28px 34px !important;
  background:
    linear-gradient(180deg, rgba(8, 16, 33, 0.98) 0%, rgba(4, 9, 20, 1) 54%, rgba(3, 7, 16, 1) 100%) !important;
}

.my-users-hero {
  position: relative;
  align-items: center !important;
  margin-bottom: 14px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid rgba(79, 195, 247, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(112deg, rgba(10, 23, 47, 0.98), rgba(9, 16, 31, 0.98) 62%, rgba(18, 17, 46, 0.92));
  box-shadow: 0 18px 44px rgba(1, 7, 19, 0.25);
}

.my-users-hero::before {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 0;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #4fc3f7, #5b8cff 52%, #b276ff);
  box-shadow: 0 0 20px rgba(79, 195, 247, 0.28);
}

.my-users-title-wrap {
  position: relative;
  z-index: 1;
}

.my-users-title {
  color: #f8fbff;
  font-size: 34px !important;
  line-height: 1.1;
  letter-spacing: 0;
}

.my-users-title-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #dceaff;
  border: 1px solid rgba(79, 195, 247, 0.24);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(38, 79, 145, 0.72), rgba(18, 29, 55, 0.9));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}

.my-users-subtitle {
  margin: 8px 0 0;
  color: #91a4c2;
  font-size: 13px;
  line-height: 1.5;
}

.my-users-toolbar {
  position: relative;
  z-index: 1;
  flex: 1 1 620px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.my-users-search-input {
  width: min(340px, 100%);
  min-width: 240px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border-color: rgba(111, 145, 201, 0.22) !important;
  border-radius: 8px !important;
  background: rgba(9, 14, 25, 0.9) !important;
  color: #f7faff !important;
  font-size: 14px !important;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.my-users-search-input:focus {
  border-color: rgba(79, 195, 247, 0.68) !important;
  background: rgba(12, 20, 36, 0.98) !important;
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.12);
}

.my-users-action-button,
.my-users-link-button,
.my-users-page-button,
.my-users-view-button {
  min-height: 40px !important;
  border-radius: 8px !important;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.my-users-action-button {
  height: 40px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
}

.my-users-action-button:not(:disabled):hover,
.my-users-link-button:hover,
.my-users-page-button:not(:disabled):hover,
.my-users-view-button:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(1, 7, 19, 0.28);
}

.my-users-action-button--primary {
  background: linear-gradient(135deg, #4b8dff 0%, #2563eb 100%) !important;
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.22);
}

.my-users-action-button--soft,
.my-users-action-button--ghost {
  border-color: rgba(111, 145, 201, 0.24) !important;
  background: rgba(16, 25, 43, 0.9) !important;
}

.my-users-action-button--soft:not(:disabled):hover,
.my-users-action-button--ghost:hover {
  border-color: rgba(79, 195, 247, 0.48) !important;
  background: rgba(79, 195, 247, 0.1) !important;
}

.my-users-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}

.my-users-stat-card {
  position: relative;
  min-height: 92px;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid rgba(91, 120, 172, 0.2);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(15, 25, 44, 0.96), rgba(8, 14, 26, 0.98));
  box-shadow: 0 14px 34px rgba(1, 7, 19, 0.22), inset 0 1px rgba(255, 255, 255, 0.03);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.my-users-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: #4fc3f7;
  opacity: 0.82;
}

.my-users-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(79, 195, 247, 0.36);
  box-shadow: 0 18px 42px rgba(1, 7, 19, 0.3), inset 0 1px rgba(255, 255, 255, 0.04);
}

.my-users-stat-card--green::before {
  background: #26df8f;
}

.my-users-stat-label,
.my-users-stat-sub {
  display: block;
  color: #8fa2c0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.my-users-stat-value {
  display: block;
  margin-top: 10px;
  color: #f4f8ff;
  font-size: 28px;
  line-height: 1;
}

.my-users-stat-sub {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.my-users-affiliate-banner {
  margin: 0 0 18px !important;
  padding: 14px 16px !important;
  border-color: rgba(79, 195, 247, 0.28) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(112deg, rgba(31, 78, 154, 0.18), rgba(9, 18, 35, 0.92) 58%, rgba(21, 48, 72, 0.3)) !important;
  box-shadow: 0 14px 32px rgba(1, 7, 19, 0.2), inset 0 1px rgba(255, 255, 255, 0.04);
}

.my-users-affiliate-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 520px;
  align-items: center;
  gap: 8px;
}

.my-users-affiliate-label {
  color: #f3f7ff;
  font-weight: 800;
  white-space: nowrap;
}

.my-users-affiliate-link {
  min-width: 0;
  overflow: hidden;
  color: #9dc0ff !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-users-link-button {
  min-height: 36px !important;
  padding: 0 14px !important;
}

.my-users-link-button--copy {
  background: linear-gradient(135deg, #3b82f6, #2454d7) !important;
}

.my-users-link-button--send {
  background: linear-gradient(135deg, #16a08d, #0f766e) !important;
}

.my-users-table-panel,
.my-users-detail-panel {
  border-color: rgba(91, 120, 172, 0.22) !important;
  border-radius: 14px !important;
  background: linear-gradient(112deg, rgba(15, 23, 39, 0.99), rgba(8, 14, 25, 0.99)) !important;
  box-shadow: 0 16px 38px rgba(1, 7, 19, 0.25), inset 0 1px rgba(255, 255, 255, 0.025);
}

.my-users-table-header {
  padding: 18px 22px !important;
  border-bottom: 1px solid rgba(111, 145, 201, 0.1);
}

.my-users-table-kicker {
  color: #8fa2c0 !important;
  font-size: 13px !important;
  font-weight: 700;
}

.my-users-table-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(79, 195, 247, 0.42) rgba(8, 14, 25, 0.7);
}

.my-users-table-scroll::-webkit-scrollbar {
  height: 8px;
}

.my-users-table-scroll::-webkit-scrollbar-track {
  background: rgba(8, 14, 25, 0.7);
}

.my-users-table-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(79, 195, 247, 0.42);
}

.my-users-table {
  min-width: 1180px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.my-users-table th {
  height: 56px;
  padding: 14px 16px !important;
  color: #9fb2d1 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.my-users-table td {
  padding: 15px 16px !important;
  border-top: 1px solid rgba(111, 145, 201, 0.09);
  background: rgba(10, 16, 30, 0.96);
  vertical-align: middle;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.my-users-table th:first-child,
.my-users-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

.my-users-table th:last-child,
.my-users-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  box-shadow: -16px 0 24px rgba(3, 8, 18, 0.42);
}

.my-users-table th:first-child,
.my-users-table th:last-child {
  z-index: 3;
  background: #182133;
}

.my-users-table-row:hover td {
  background: rgba(15, 28, 52, 0.98) !important;
}

.my-users-table-row.is-selected td {
  background: rgba(29, 55, 107, 0.66) !important;
}

.my-users-person-cell {
  min-width: 275px;
}

.my-users-person {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.my-users-avatar {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  color: #ffffff;
  border: 1px solid rgba(107, 151, 255, 0.35);
  border-radius: 11px;
  background: linear-gradient(145deg, #3466f3, #7a2ce2);
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(20, 54, 138, 0.24);
}

.my-users-avatar.is-online::after {
  content: '';
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 12px;
  height: 12px;
  border: 3px solid #0a1020;
  border-radius: 50%;
  background: #12d486;
}

.my-users-person-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.my-users-person-name,
.my-users-person-email,
.my-users-person-phone {
  display: block;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-users-person-name {
  color: #f5f8ff;
  font-size: 14px;
}

.my-users-person-email,
.my-users-person-phone {
  line-height: 1.35;
}

.my-users-active-pill {
  min-height: 34px;
  padding: 0 12px !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.my-users-metric-cell,
.my-users-profit-cell {
  color: #dce7ff !important;
  font-size: 14px;
  font-weight: 800 !important;
  white-space: nowrap;
}

.my-users-profit-cell.is-positive {
  color: #73e2a7 !important;
}

.my-users-profit-cell.is-negative {
  color: #ff8e8e !important;
}

.my-users-cycle-net {
  font-size: 12px !important;
}

.my-users-action-cell {
  min-width: 98px;
}

.my-users-view-button {
  min-width: 72px;
  min-height: 34px !important;
  border-color: rgba(79, 195, 247, 0.34) !important;
  background: linear-gradient(135deg, rgba(47, 118, 255, 0.92), rgba(28, 70, 180, 0.94)) !important;
}

.my-users-view-button--compact {
  min-height: 34px !important;
  padding: 0 12px !important;
}

.my-users-view-button:disabled {
  border-color: rgba(111, 145, 201, 0.18) !important;
  background: rgba(35, 45, 64, 0.72) !important;
}

.my-users-empty-cell {
  background: rgba(10, 16, 30, 0.96) !important;
}

.my-users-pagination {
  padding: 16px 22px 20px !important;
  border-top-color: rgba(111, 145, 201, 0.12) !important;
}

.my-users-page-button {
  min-height: 38px !important;
  border-radius: 8px !important;
  font-weight: 800;
}

.my-users-page-count {
  color: #8fa2c0 !important;
  font-size: 13px !important;
}

.my-users-detail-panel {
  top: 20px !important;
  padding: 22px !important;
}

@media (max-width: 1280px) {
  .my-users-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .my-users-toolbar {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .my-users-hero {
    align-items: flex-start !important;
  }

  .my-users-toolbar {
    width: 100%;
  }

  .my-users-search-input {
    flex: 1 1 100%;
    min-width: 0 !important;
  }
}

@media (max-width: 768px) {
  .my-users-page {
    padding: 10px 10px 24px !important;
  }

  .my-users-hero {
    padding: 16px;
  }

  .my-users-title {
    font-size: 26px !important;
  }

  .my-users-title-icon {
    width: 38px;
    height: 38px;
  }

  .my-users-stat-grid {
    grid-template-columns: 1fr;
  }

  .my-users-affiliate-copy,
  .my-users-affiliate-actions {
    width: 100%;
  }

  .my-users-affiliate-copy {
    align-items: flex-start;
    flex-direction: column;
  }

  .my-users-affiliate-link {
    width: 100%;
  }

  .my-users-link-button {
    flex: 1 1 0;
  }

  .my-users-table {
    min-width: 1040px;
  }
}
/* ── B2B Navigator Theme-Adaptive Styling ── */

.b2b-card-layout {
  --b2b-font: var(--font, 'Sora', sans-serif);
  --b2b-bg: var(--ctp-panel-deep, #03060d);
  --b2b-border: var(--border2, rgba(0, 150, 255, 0.15));
  --b2b-text-main: var(--silver2, #ffffff);
  --b2b-text-sub: var(--sub-text-secondary, #8fa0c0);
  --b2b-text-lbl: var(--muted-text, #6c7c9c);
  --b2b-blue-accent: var(--cyan, #0099ff);
  --b2b-gold-accent: var(--warning, #f59e0b);
  --b2b-green-accent: var(--success, #00e676);

  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border-radius: 24px;
  background: var(--b2b-bg);
  border: 1px solid var(--b2b-border);
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(0, 0, 0, 0.7));
  font-family: var(--b2b-font);
  color: var(--b2b-text-main);
  position: relative;
  overflow: hidden;
}

/* ── Top Header Bar ── */
.b2b-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.b2b-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.b2b-brand-logo {
  display: flex;
  align-items: center;
  gap: 6px;
}

.b2b-brand-name {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--b2b-text-main);
}

.b2b-arrows-icon {
  display: inline-flex;
  align-items: center;
  color: var(--b2b-blue-accent);
}

.b2b-sub-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--b2b-text-sub);
}

.b2b-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 230, 118, 0.12);
  border: 1px solid rgba(0, 230, 118, 0.4);
  color: var(--b2b-green-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.b2b-verified-icon {
  font-size: 11px;
}

.b2b-cycle-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 65px;
  padding: 6px 14px;
  border-radius: 12px;
  background: var(--surface, rgba(10, 20, 40, 0.8));
  border: 1px solid var(--b2b-border);
}

.b2b-cycle-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--b2b-text-sub);
  text-transform: uppercase;
}

.b2b-cycle-num {
  font-size: 20px;
  font-weight: 900;
  color: var(--b2b-text-main);
  line-height: 1;
}

/* ── Main Grid Layout ── */
.b2b-main-grid {
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(220px, 270px) 1fr;
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 1024px) {
  .b2b-main-grid {
    grid-template-columns: 1fr 1fr;
  }
  .b2b-profit-hero-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .b2b-main-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Broker Cards (A & B) ── */
.b2b-broker-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(6, 12, 28, 0.95) 0%, rgba(3, 7, 16, 0.98) 100%);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 8px 24px rgba(0, 0, 0, 0.4));
}

.b2b-broker-card--a {
  border: 1.5px solid rgba(0, 102, 255, 0.45);
  box-shadow: 0 0 20px rgba(0, 102, 255, 0.15);
}

.b2b-broker-card--b {
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
}

.b2b-broker-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.b2b-broker-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
}

.b2b-broker-badge--a {
  background: #0066ff;
  box-shadow: 0 0 10px rgba(0, 102, 255, 0.5);
}

.b2b-broker-badge--b {
  background: #d97706;
  box-shadow: 0 0 10px rgba(217, 119, 6, 0.5);
}

.b2b-broker-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--b2b-text-main);
}

.b2b-broker-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

.b2b-broker-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.b2b-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.b2b-field-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 16px;
}

.b2b-field-icon--a {
  background: rgba(0, 102, 255, 0.18);
  border: 1px solid rgba(0, 102, 255, 0.3);
}

.b2b-field-icon--b {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.b2b-field-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--b2b-text-lbl);
}

.b2b-field-val {
  font-size: 17px;
  font-weight: 900;
}

.b2b-val--a {
  color: var(--b2b-blue-accent);
}

.b2b-val--b {
  color: var(--b2b-gold-accent);
}

/* Bottom Highlight Footer inside Broker Card */
.b2b-broker-footer {
  padding: 10px 12px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.b2b-broker-footer--a {
  background: linear-gradient(90deg, rgba(0, 102, 255, 0.25) 0%, rgba(0, 102, 255, 0.1) 100%);
  border: 1px solid rgba(0, 102, 255, 0.35);
}

.b2b-broker-footer--b {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.1) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.b2b-foot-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.b2b-foot-val {
  font-size: 20px;
  font-weight: 900;
  color: var(--b2b-text-main);
  letter-spacing: -0.01em;
}


/* ── Right Column: Real-Time Net Profit Panel ── */
.b2b-profit-hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-radius: 20px;
  background: radial-gradient(ellipse 100% 80% at 50% -20%, rgba(0, 230, 118, 0.18), transparent 70%),
              linear-gradient(180deg, rgba(4, 12, 20, 0.98) 0%, rgba(2, 6, 12, 1) 100%);
  border: 1px solid rgba(0, 230, 118, 0.25);
  box-shadow: 0 0 35px rgba(0, 230, 118, 0.08);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.b2b-hero-head-label {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--b2b-text-main);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.b2b-hero-head-label span {
  font-size: 11px;
  color: var(--b2b-green-accent);
}

.b2b-hero-leg-tag {
  color: var(--b2b-green-accent, #00e676);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.b2b-hero-amount {
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 900;
  color: var(--b2b-green-accent);
  text-shadow: 0 0 25px rgba(0, 230, 118, 0.5);
  letter-spacing: -0.03em;
  margin: 6px 0;
  line-height: 1;
}

.b2b-hero-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(0, 230, 118, 0.15);
  border: 1px solid rgba(0, 230, 118, 0.4);
  color: var(--b2b-green-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 0 15px rgba(0, 230, 118, 0.2);
}

.b2b-rocket-chart-container {
  width: 100%;
  height: 90px;
  position: relative;
  margin: 10px 0 4px;
}

.b2b-chart-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.b2b-rocket-graphic {
  position: absolute;
  right: 12%;
  top: 10%;
  font-size: 32px;
  transform: rotate(-15deg);
  filter: drop-shadow(0 0 12px rgba(0, 230, 118, 0.8));
  animation: b2b-rocket-float 3s ease-in-out infinite alternate;
}

@keyframes b2b-rocket-float {
  0% { transform: translateY(0px) rotate(-15deg); }
  100% { transform: translateY(-8px) rotate(-12deg); }
}

.b2b-hero-subtext {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--b2b-text-sub);
  text-transform: uppercase;
}

.b2b-hero-subtext strong {
  color: var(--b2b-green-accent);
}


/* ── Bottom Footer Metrics Bar ── */
.b2b-footer-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--surface, rgba(6, 14, 28, 0.8));
  border: 1px solid var(--b2b-border);
}

@media (max-width: 900px) {
  .b2b-footer-metrics-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .b2b-footer-metrics-grid {
    grid-template-columns: 1fr;
  }
}

.b2b-fmetric-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.b2b-fmetric-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  flex-shrink: 0;
}

.b2b-ficon--blue {
  background: rgba(0, 150, 255, 0.15);
  border: 1px solid rgba(0, 150, 255, 0.3);
  color: var(--b2b-blue-accent);
}

.b2b-ficon--green {
  background: rgba(0, 230, 118, 0.15);
  border: 1px solid rgba(0, 230, 118, 0.3);
  color: var(--b2b-green-accent);
}

.b2b-ficon--shield {
  background: rgba(0, 230, 118, 0.18);
  border: 1px solid rgba(0, 230, 118, 0.4);
  color: var(--b2b-green-accent);
}

.b2b-fmetric-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--b2b-text-lbl);
}

.b2b-fmetric-val {
  font-size: 17px;
  font-weight: 900;
}

.b2b-fval--blue {
  color: var(--b2b-blue-accent);
}

.b2b-fval--green {
  color: var(--b2b-green-accent);
}

.b2b-fval--cyan {
  color: var(--cyan, #38bdf8);
}

.b2b-fval--active {
  color: var(--b2b-green-accent);
  text-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
}


/* ── Action Buttons Bar ── */
.b2b-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}

.b2b-action-btn {
  padding: 10px 22px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: var(--b2b-font);
}

.b2b-action-btn--start {
  background: linear-gradient(135deg, #0066ff 0%, #0044cc 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 102, 255, 0.35);
}

.b2b-action-btn--start:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 102, 255, 0.5);
}

.b2b-action-btn--complete {
  background: linear-gradient(135deg, #00e676 0%, #00b0ff 100%);
  color: #04101e;
  box-shadow: 0 4px 15px rgba(0, 230, 118, 0.35);
}

.b2b-action-btn--complete:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 230, 118, 0.5);
}

.b2b-action-btn--rebalance {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35);
}

.b2b-action-btn--rebalance:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

.b2b-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.b2b-error-msg {
  color: var(--error, #ff5252);
  font-size: 12px;
  font-weight: 700;
  margin: 0;
}
.adm-cycle-page {
  padding: 26px 28px 34px !important;
  background: #060c1b !important;
}

.adm-cycle-header {
  position: relative;
  margin-bottom: 16px !important;
  padding: 20px 22px;
  border: 1px solid rgba(79, 195, 247, 0.2);
  border-radius: 14px;
  background: linear-gradient(112deg, rgba(10, 23, 47, 0.98), rgba(8, 16, 31, 0.98) 62%, rgba(12, 27, 43, 0.98));
  box-shadow: 0 18px 44px rgba(1, 7, 19, 0.25);
}

.adm-cycle-header::after {
  content: '';
  position: absolute;
  right: 22px;
  bottom: 0;
  left: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 195, 247, 0.32), rgba(178, 118, 255, 0.2), transparent);
}

.adm-cycle-title-wrap {
  position: relative;
  padding-left: 18px;
}

.adm-cycle-title-wrap::before {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #4fc3f7, #5b8cff 52%, #b276ff);
  box-shadow: 0 0 20px rgba(79, 195, 247, 0.28);
}

.adm-cycle-title-wrap h1 {
  font-size: 30px !important;
  letter-spacing: 0;
}

.adm-cycle-title-wrap p {
  margin: 6px 0 0;
  color: #8fa2c0;
  font-size: 13px;
}

.adm-cycle-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: min(340px, 36vw);
  min-width: 250px;
}

.adm-cycle-search-wrap > svg {
  position: absolute;
  z-index: 1;
  left: 14px;
  width: 18px;
  height: 18px;
  color: #7791b8;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: color 180ms ease;
}

.adm-cycle-search-wrap input {
  width: 100% !important;
  min-height: 44px;
  padding: 0 16px 0 42px !important;
  border-color: rgba(111, 145, 201, 0.22) !important;
  border-radius: 8px !important;
  background: rgba(12, 19, 32, 0.88) !important;
  color: #f7faff !important;
  font-size: 14px !important;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.adm-cycle-search-wrap:focus-within > svg {
  color: #67d4ff;
}

.adm-cycle-search-wrap input:focus {
  border-color: rgba(79, 195, 247, 0.68) !important;
  background: rgba(14, 24, 42, 0.98) !important;
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.12);
}

.adm-cycle-content {
  gap: 14px !important;
}

.adm-cycle-panel {
  position: relative;
  padding: 22px !important;
  overflow: hidden;
  border-color: rgba(91, 120, 172, 0.22) !important;
  border-radius: 14px !important;
  background: linear-gradient(112deg, rgba(15, 23, 39, 0.99), rgba(8, 14, 25, 0.99)) !important;
  box-shadow: 0 16px 38px rgba(1, 7, 19, 0.25), inset 0 1px rgba(255, 255, 255, 0.025) !important;
}

.adm-cycle-panel::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, #4fc3f7, #5b8cff);
  opacity: 0.72;
}

.adm-cycle-history-panel::before {
  background: linear-gradient(180deg, #b276ff, #4fc3f7);
}

.adm-cycle-panel-header {
  align-items: center !important;
  margin-bottom: 14px !important;
}

.adm-cycle-panel-title {
  color: #f3f7ff !important;
  letter-spacing: 0;
}

.adm-cycle-panel-heading > div:last-child {
  color: #8fa2c0 !important;
  line-height: 1.5;
}

.adm-cycle-total-users {
  min-width: 92px;
  padding: 9px 12px !important;
  border-color: rgba(79, 195, 247, 0.25) !important;
  border-radius: 8px !important;
  background: rgba(79, 195, 247, 0.07) !important;
}

.adm-cycle-change-user,
.adm-cycle-page-button,
.adm-cycle-edit-button,
.adm-cycle-delete-button {
  border-radius: 8px !important;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.adm-cycle-change-user:hover,
.adm-cycle-page-button:not(:disabled):hover,
.adm-cycle-edit-button:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 195, 247, 0.45) !important;
  background: rgba(79, 195, 247, 0.1) !important;
  box-shadow: 0 8px 20px rgba(1, 7, 19, 0.24);
}

.adm-cycle-delete-button:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: rgba(255, 142, 142, 0.58) !important;
  background: rgba(255, 107, 107, 0.18) !important;
}

.adm-cycle-selected-user {
  border-color: rgba(79, 195, 247, 0.28) !important;
  border-radius: 10px !important;
  background: linear-gradient(112deg, rgba(22, 49, 86, 0.48), rgba(15, 27, 49, 0.68)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.adm-cycle-avatar {
  border: 1px solid rgba(112, 178, 255, 0.3);
  border-radius: 10px !important;
  background: linear-gradient(145deg, rgba(41, 79, 139, 0.82), rgba(25, 39, 71, 0.96)) !important;
}

.adm-cycle-list-meta {
  margin-top: 12px !important;
  color: #879bb9 !important;
}

.adm-cycle-table-shell {
  border-color: rgba(111, 145, 201, 0.2) !important;
  border-radius: 10px !important;
  background: rgba(5, 10, 19, 0.62) !important;
  box-shadow: 0 12px 30px rgba(1, 7, 19, 0.2);
}

.adm-cycle-table-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(79, 195, 247, 0.42) rgba(8, 14, 25, 0.7);
}

.adm-cycle-users-table {
  min-width: 760px;
}

.adm-cycle-users-table thead {
  background: rgba(25, 35, 54, 0.96) !important;
}

.adm-cycle-users-table th {
  height: 54px;
  box-sizing: border-box;
  color: #9fb2d1 !important;
  font-size: 11px !important;
  letter-spacing: 0;
  text-transform: uppercase;
}

.adm-cycle-user-row {
  outline: none;
  transition: background-color 180ms ease, box-shadow 180ms ease !important;
}

.adm-cycle-user-row:hover,
.adm-cycle-user-row:focus-visible {
  background: rgba(35, 65, 108, 0.34) !important;
  box-shadow: inset 3px 0 #4fc3f7;
}

.adm-cycle-user-row-selected {
  background: rgba(39, 82, 151, 0.32) !important;
  box-shadow: inset 3px 0 #67d4ff;
}

.adm-cycle-user-row td {
  height: 66px;
  box-sizing: border-box;
}

.adm-cycle-select-mark {
  width: 32px !important;
  height: 32px !important;
  box-sizing: border-box;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.adm-cycle-user-row:hover .adm-cycle-select-mark {
  transform: scale(1.06);
  border-color: rgba(79, 195, 247, 0.48) !important;
  background: rgba(79, 195, 247, 0.08) !important;
}

.adm-cycle-select-mark svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adm-cycle-pagination {
  margin-top: 16px !important;
}

.adm-cycle-page-button:focus-visible,
.adm-cycle-change-user:focus-visible,
.adm-cycle-add-button:focus-visible,
.adm-cycle-edit-button:focus-visible,
.adm-cycle-delete-button:focus-visible {
  outline: 2px solid #67d4ff;
  outline-offset: 2px;
}

.adm-cycle-history-header {
  align-items: center !important;
  padding: 12px 14px;
  border: 1px solid rgba(111, 145, 201, 0.16);
  border-radius: 10px;
  background: rgba(17, 29, 49, 0.55);
}

.adm-cycle-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px !important;
  border-radius: 8px !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.adm-cycle-add-button svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.adm-cycle-add-button:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: rgba(103, 212, 255, 0.52) !important;
  box-shadow: 0 10px 24px rgba(22, 63, 151, 0.28);
  filter: brightness(1.08);
}

.adm-cycle-record-list {
  gap: 12px !important;
}

.adm-cycle-record-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(111, 145, 201, 0.2) !important;
  border-radius: 10px !important;
  background: linear-gradient(112deg, rgba(14, 24, 42, 0.98), rgba(7, 13, 24, 0.99)) !important;
  box-shadow: 0 12px 30px rgba(1, 7, 19, 0.2);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.adm-cycle-record-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--cycle-status-color, #4fc3f7);
  opacity: 0.75;
}

.adm-cycle-record-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cycle-status-color, #4fc3f7) 52%, transparent) !important;
  box-shadow: 0 18px 38px rgba(1, 7, 19, 0.3), 0 0 20px color-mix(in srgb, var(--cycle-status-color, #4fc3f7) 8%, transparent);
}

.adm-cycle-record-header {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(111, 145, 201, 0.14);
}

.adm-cycle-record-metrics {
  grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
}

.adm-cycle-record-metrics > div {
  padding: 10px 12px;
  border: 1px solid rgba(111, 145, 201, 0.14);
  border-radius: 8px;
  background: rgba(5, 10, 19, 0.45);
}

.adm-cycle-record-actions {
  padding-top: 2px;
}

.adm-cycle-empty-state {
  min-height: 96px;
  padding: 28px 18px !important;
  box-sizing: border-box;
  border: 1px dashed rgba(111, 145, 201, 0.28) !important;
  border-radius: 10px !important;
  background: rgba(9, 16, 29, 0.46);
  color: #8fa2c0 !important;
}

@media (max-width: 820px) {
  .adm-cycle-page {
    padding: 16px 14px 28px !important;
  }

  .adm-cycle-header {
    align-items: stretch !important;
  }

  .adm-cycle-search-wrap {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .adm-cycle-page {
    padding: 10px 8px 22px !important;
  }

  .adm-cycle-header,
  .adm-cycle-panel {
    padding: 16px !important;
  }

  .adm-cycle-title-wrap h1 {
    font-size: 24px !important;
  }

  .adm-cycle-panel-header,
  .adm-cycle-selected-user,
  .adm-cycle-history-header,
  .adm-cycle-pagination {
    align-items: stretch !important;
    flex-direction: column;
  }

  .adm-cycle-total-users {
    width: 100%;
    box-sizing: border-box;
  }

  .adm-cycle-selected-user > div:last-child {
    text-align: left !important;
  }

  .adm-cycle-add-button {
    width: 100%;
  }

  .adm-cycle-record-metrics {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .adm-cycle-user-row,
  .adm-cycle-select-mark,
  .adm-cycle-add-button,
  .adm-cycle-record-card,
  .adm-cycle-change-user,
  .adm-cycle-page-button,
  .adm-cycle-edit-button,
  .adm-cycle-delete-button {
    transition: none !important;
  }
}
.adm-slots-status-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  margin-bottom: 18px;
}

.adm-slots-status-card {
  --status-color: #4fc3f7;
  --status-surface: rgba(79, 195, 247, 0.08);
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 104px;
  padding: 18px 20px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--status-color) 24%, rgba(112, 143, 194, 0.22));
  border-radius: 14px;
  background: linear-gradient(112deg, rgba(16, 25, 42, 0.98), rgba(8, 14, 25, 0.98));
  box-shadow: 0 14px 32px rgba(1, 7, 19, 0.22), inset 0 1px rgba(255, 255, 255, 0.025);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.adm-slots-status-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--status-color);
}

.adm-slots-status-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--status-color) 58%, transparent);
  box-shadow: 0 20px 42px rgba(1, 7, 19, 0.32), 0 0 22px color-mix(in srgb, var(--status-color) 10%, transparent);
}

.adm-slots-status-card-active {
  --status-color: #2deb8a;
  --status-surface: rgba(45, 235, 138, 0.1);
}

.adm-slots-status-card-expired {
  --status-color: #f97316;
  --status-surface: rgba(249, 115, 22, 0.1);
}

.adm-slots-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid color-mix(in srgb, var(--status-color) 36%, transparent);
  border-radius: 12px;
  background: var(--status-surface);
  color: var(--status-color);
}

.adm-slots-status-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.adm-slots-status-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.adm-slots-status-copy span {
  color: #8fa2c0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.adm-slots-status-copy strong {
  color: #f5f9ff;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.adm-slots-status-indicator {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--status-color);
  box-shadow: 0 0 0 7px var(--status-surface), 0 0 18px color-mix(in srgb, var(--status-color) 46%, transparent);
}

@media (max-width: 680px) {
  .adm-slots-status-summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .adm-slots-status-card {
    min-height: 88px;
    padding: 14px 16px;
  }

  .adm-slots-status-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 10px;
  }

  .adm-slots-status-copy strong {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .adm-slots-status-card {
    transition: none;
  }
}
.analytics-page {
  padding: 26px 28px 34px !important;
  background:
    linear-gradient(180deg, rgba(8, 16, 33, 0.98) 0%, rgba(4, 9, 20, 1) 54%, rgba(3, 7, 16, 1) 100%) !important;
}

.analytics-hero {
  position: relative;
  align-items: center !important;
  margin-bottom: 14px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid rgba(79, 195, 247, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(112deg, rgba(10, 23, 47, 0.98), rgba(9, 16, 31, 0.98) 62%, rgba(18, 17, 46, 0.92));
  box-shadow: 0 18px 44px rgba(1, 7, 19, 0.25);
}

.analytics-hero::before {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 0;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #4fc3f7, #5b8cff 52%, #b276ff);
  box-shadow: 0 0 20px rgba(79, 195, 247, 0.28);
}

.analytics-title-wrap,
.analytics-toolbar {
  position: relative;
  z-index: 1;
}

.analytics-title {
  color: #f8fbff;
  font-size: 34px !important;
  line-height: 1.1;
  letter-spacing: 0;
}

.analytics-title-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #dceaff;
  border: 1px solid rgba(79, 195, 247, 0.24);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(38, 79, 145, 0.72), rgba(18, 29, 55, 0.9));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}

.analytics-subtitle {
  color: #91a4c2 !important;
  font-size: 13px !important;
  line-height: 1.5;
}

.analytics-toolbar {
  flex: 1 1 520px;
  justify-content: flex-end;
}

.analytics-search {
  width: min(340px, 100%) !important;
  min-width: 260px;
  min-height: 42px !important;
  border-color: rgba(111, 145, 201, 0.22) !important;
  border-radius: 8px !important;
  background: rgba(9, 14, 25, 0.9) !important;
  color: #f7faff !important;
  font-size: 14px !important;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.analytics-search:focus {
  border-color: rgba(79, 195, 247, 0.68) !important;
  background: rgba(12, 20, 36, 0.98) !important;
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.12);
}

.analytics-refresh-button,
.analytics-page-button {
  min-height: 40px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.analytics-refresh-button {
  height: 40px !important;
  padding: 0 16px !important;
  border-color: rgba(111, 145, 201, 0.24) !important;
  background: rgba(16, 25, 43, 0.9) !important;
}

.analytics-refresh-button:hover,
.analytics-page-button:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: rgba(79, 195, 247, 0.48) !important;
  background: rgba(79, 195, 247, 0.1) !important;
  box-shadow: 0 10px 22px rgba(1, 7, 19, 0.28);
}

.analytics-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
}

.analytics-stat-card {
  position: relative;
  min-height: 92px;
  padding: 16px 18px !important;
  overflow: hidden;
  border-color: rgba(91, 120, 172, 0.2) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(15, 25, 44, 0.96), rgba(8, 14, 26, 0.98)) !important;
  box-shadow: 0 14px 34px rgba(1, 7, 19, 0.22), inset 0 1px rgba(255, 255, 255, 0.03) !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.analytics-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: #4fc3f7;
  opacity: 0.82;
}

.analytics-stat-card--attempts::before {
  background: #26df8f;
}

.analytics-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(79, 195, 247, 0.36) !important;
  box-shadow: 0 18px 42px rgba(1, 7, 19, 0.3), inset 0 1px rgba(255, 255, 255, 0.04) !important;
}

.analytics-stat-label {
  color: #8fa2c0 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
}

.analytics-stat-value {
  color: #f4f8ff;
  font-size: 28px !important;
  line-height: 1;
}

.analytics-table-panel {
  border-color: rgba(91, 120, 172, 0.22) !important;
  border-radius: 14px !important;
  background: linear-gradient(112deg, rgba(15, 23, 39, 0.99), rgba(8, 14, 25, 0.99)) !important;
  box-shadow: 0 16px 38px rgba(1, 7, 19, 0.25), inset 0 1px rgba(255, 255, 255, 0.025);
}

.analytics-table-header {
  padding: 18px 22px !important;
  border-bottom: 1px solid rgba(111, 145, 201, 0.1);
}

.analytics-table-kicker {
  color: #8fa2c0 !important;
  font-size: 13px !important;
  font-weight: 700;
}

.analytics-table-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(79, 195, 247, 0.42) rgba(8, 14, 25, 0.7);
}

.analytics-table-scroll::-webkit-scrollbar {
  height: 8px;
}

.analytics-table-scroll::-webkit-scrollbar-track {
  background: rgba(8, 14, 25, 0.7);
}

.analytics-table-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(79, 195, 247, 0.42);
}

.analytics-table {
  min-width: 1160px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.analytics-table th {
  height: 56px;
  padding: 14px 16px !important;
  color: #9fb2d1 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.analytics-table td {
  padding: 15px 16px !important;
  border-top: 1px solid rgba(111, 145, 201, 0.09);
  background: rgba(10, 16, 30, 0.96);
  vertical-align: middle;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.analytics-table th:first-child,
.analytics-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

.analytics-table th:first-child {
  z-index: 3;
  background: #182133;
}

.analytics-table-row:hover td {
  background: rgba(15, 28, 52, 0.98) !important;
}

.analytics-user-cell {
  min-width: 240px;
}

.analytics-user-name,
.analytics-user-email,
.analytics-error-cell,
.analytics-comment-cell {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-user-name {
  color: #f5f8ff;
  font-size: 14px;
}

.analytics-user-email {
  line-height: 1.35;
}

.analytics-symbol-cell,
.analytics-side-cell,
.analytics-metric-cell,
.analytics-leg-cell,
.analytics-comment-cell,
.analytics-date-cell,
.analytics-error-cell {
  color: #dce7ff !important;
  font-size: 14px;
  font-weight: 800 !important;
  white-space: nowrap;
}

.analytics-side-cell--buy {
  color: #73e2a7 !important;
}

.analytics-side-cell--sell {
  color: #ff8e8e !important;
}

.analytics-status-pill {
  min-height: 34px;
  padding: 0 12px !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.analytics-empty-cell {
  background: rgba(10, 16, 30, 0.96) !important;
}

.analytics-pagination {
  padding: 16px 22px 20px !important;
  border-top-color: rgba(111, 145, 201, 0.12) !important;
}

.analytics-page-count {
  color: #8fa2c0 !important;
  font-size: 13px !important;
}

.analytics-page-button {
  min-height: 38px !important;
  border-radius: 8px !important;
}

@media (max-width: 900px) {
  .analytics-hero {
    align-items: flex-start !important;
  }

  .analytics-toolbar {
    width: 100%;
    justify-content: flex-start;
  }

  .analytics-search {
    flex: 1 1 100%;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .analytics-page {
    padding: 10px 10px 24px !important;
  }

  .analytics-hero {
    padding: 16px;
  }

  .analytics-title {
    font-size: 26px !important;
  }

  .analytics-title-icon {
    width: 38px;
    height: 38px;
  }

  .analytics-stat-grid {
    grid-template-columns: 1fr !important;
  }

  .analytics-table {
    min-width: 1040px;
  }
}
/* ═══════════════════════════════════════════════════
   UserDashboard — Mobile Responsive
   Breakpoints: ≤768px | ≤480px | ≤375px
   Targets the CommandSlotCard (account-pairs card).
   Sidebar/navbar handled globally in app-layout.css.
   ═══════════════════════════════════════════════════ */
.dash-symbol-search input, .dash-symbol-search button, .dash-status-chip{padding: 0.375rem 0.75rem;}
/* ── Dates row: hidden on desktop, shown on mobile ── */
.dash-cmd-dates {
  display: none;
}

/* ── Slot Trade Controls: loading skeleton ── */
.dash-slot-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--cyan-rgb), 0.18);
}

.dash-slot-skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(var(--cyan-rgb), 0.08) 0%, rgba(var(--cyan-rgb), 0.2) 50%, rgba(var(--cyan-rgb), 0.08) 100%);
  background-size: 200% 100%;
  animation: dash-slot-skeleton-shimmer 1.4s ease-in-out infinite;
}

.dash-slot-skeleton-line--title {
  width: 55%;
  height: 14px;
}

.dash-slot-skeleton-line--wide {
  width: 90%;
}

.dash-slot-skeleton-line--medium {
  width: 70%;
}

.dash-slot-skeleton-line--pill {
  width: 40%;
  height: 22px;
  border-radius: 999px;
  margin-top: 4px;
}

@keyframes dash-slot-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ════════════════════════════════════════════════════
   ≤ 768 px
   ════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Card module: stack rail + main vertically ─── */
  .dash-cmd-card {
    flex-direction: column !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;
    min-height: unset !important;
    height: auto !important;
  }

  /* Rail: hidden — status is in the identity row */
  .dash-cmd-rail {
    display: none !important;
  }

  /* Divider between rail and main: hidden */
  .dash-cmd-divider {
    display: none !important;
  }

  /* ── Main body: full width, auto height ─────────── */
  .dash-cmd-main {
    flex: 0 0 auto !important;
    padding: 14px !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: unset !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* ── Top row (identity + buttons): column layout ── */
  .dash-cmd-top {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: stretch !important;
    min-height: unset !important;
    height: auto !important;
    margin-bottom: 8px !important;
  }

  /* ── Identity: 2-column grid ─────────────────────
     col-1 row-1 → "ACCOUNT LINK" label
     col-2 row-1 → account name/value         (Line 1)
     col-1 row-2 → "Trader Slot" label
     col-2 row-2 → request/config id          (Line 2) */
  .dash-cmd-identity {
    flex: none !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    row-gap: 4px !important;
    column-gap: 8px !important;
    padding: 8px 10px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: unset !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* All four identity divs: 11px, no vertical margin */
  .dash-cmd-identity > div {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    align-self: center !important;
  }

  /* Grid placement — natural DOM order */
  .dash-cmd-identity > div:nth-child(1) { grid-column: 1; grid-row: 1; }
  .dash-cmd-identity > div:nth-child(2) { grid-column: 2; grid-row: 1; }
  .dash-cmd-identity > div:nth-child(3) { grid-column: 1; grid-row: 2; }
  .dash-cmd-identity > div:nth-child(4) { grid-column: 2; grid-row: 2; }

  /* ── Actions: two rows — BUY/SELL then buttons ─── */
  .dash-cmd-actions {
    flex: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    align-self: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: unset !important;
    height: auto !important;
  }

  /* BUY/SELL buttons: full width row */
  .dash-cmd-buysell {
    width: 100% !important;
    display: flex !important;
    gap: 6px !important;
  }

  .dash-cmd-buysell > button {
    flex: 1 1 0 !important;
    min-height: 34px !important;
    font-size: 11px !important;
  }

  /* Execute / Renew button: takes 2/3 of the button row */
  .dash-cmd-exec-btn {
    flex: 2 1 0 !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 7px !important;
    font-size: 10px !important;
  }

  /* Subscription button: takes 1/3 of the button row */
  .dash-cmd-sub-btn {
    flex: 1 1 0 !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 7px !important;
    font-size: 10px !important;
  }

  /* ── Meta strip: PLAN / SIDE / MODE chips ─────── */
  .dash-cmd-meta-strip {
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }

  .dash-cmd-meta-strip > div {
    padding: 3px 6px !important;
    border-radius: 6px !important;
    gap: 4px !important;
  }

  .dash-cmd-meta-strip span {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  /* ── Dates row: show on mobile ───────────────────
     CREATED and VALID UNTIL alongside the meta strip */
  .dash-cmd-dates {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 8px !important;
    padding: 6px 10px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 8px !important;
  }

  /* ── Metrics strip: 3 cells, wrap on very narrow ─ */
  .dash-cmd-metrics {
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-top: 8px !important;
  }

  .dash-cmd-metrics > div {
    flex: 1 1 80px !important;
    min-width: 0 !important;
  }
}

/* ════════════════════════════════════════════════════
   ≤ 480 px
   ════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .dash-cmd-main {
    padding: 10px !important;
  }

  .dash-cmd-buysell > button {
    min-height: 30px !important;
    font-size: 10px !important;
    padding: 0 8px !important;
  }

  .dash-cmd-metrics > div {
    flex: 1 1 70px !important;
  }
}

/* ════════════════════════════════════════════════════
   ≤ 375 px
   ════════════════════════════════════════════════════ */
@media (max-width: 375px) {

  .dash-cmd-main {
    padding: 8px !important;
  }

  .dash-cmd-metrics {
    gap: 4px !important;
  }

  .dash-cmd-metrics > div {
    flex: 1 1 60px !important;
  }
}.strategy-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px 16px 14px;
  border-radius: 16px;
  border: 1px solid rgba(51, 65, 85, 0.7);
  background: linear-gradient(165deg, rgba(10, 16, 30, 0.92) 0%, rgba(8, 12, 22, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 32px rgba(0, 0, 0, 0.22);
}

.strategy-card--break {
  border-color: rgba(52, 211, 153, 0.32);
  background: linear-gradient(165deg, rgba(12, 38, 32, 0.45) 0%, rgba(8, 14, 26, 0.98) 100%);
}

.strategy-card--pass {
  border-color: rgba(251, 191, 36, 0.32);
  background: linear-gradient(165deg, rgba(42, 32, 12, 0.4) 0%, rgba(10, 15, 28, 0.98) 100%);
}

.strategy-card--complete {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(52, 211, 153, 0.2),
    0 14px 32px rgba(0, 0, 0, 0.22);
}

.strategy-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.strategy-card__scenario-name {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
}

.strategy-card__title {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f8fafc;
  line-height: 1.2;
}

.strategy-card__subtitle {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 800;
  color: #94a3b8;
}

.strategy-card__pill {
  flex-shrink: 0;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.75);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e2e8f0;
  white-space: nowrap;
}

.strategy-card--break .strategy-card__pill {
  border-color: rgba(52, 211, 153, 0.25);
  color: #6ee7b7;
}

.strategy-card--pass .strategy-card__pill {
  border-color: rgba(251, 191, 36, 0.28);
  color: #fcd34d;
}

.strategy-card__body {
  display: flex;
  align-items: center;
  gap: 14px;
}

.strategy-card__gauge {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

.strategy-card__gauge-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.strategy-card__gauge-track {
  fill: none;
  stroke: rgba(15, 23, 42, 0.9);
  stroke-width: 8;
}

.strategy-card__gauge-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
}

.strategy-card--break .strategy-card__gauge-fill {
  stroke: #34d399;
}

.strategy-card--pass .strategy-card__gauge-fill {
  stroke: #fbbf24;
}

.strategy-card__gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.strategy-card__gauge-pct {
  font-size: 20px;
  font-weight: 900;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
}

.strategy-card__metrics {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.strategy-card__ring-label {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.strategy-card__progress-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 18px;
  font-weight: 900;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}

.strategy-card__target {
  color: #64748b;
  font-size: 14px;
}

.strategy-card__sep {
  color: #475569;
  font-size: 12px;
}

.strategy-card__status {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
}

.strategy-card__pnl-usd {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

.strategy-card__pnl-usd strong {
  font-weight: 900;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}

.strategy-card--break .strategy-card__pnl-usd strong {
  color: #6ee7b7;
}

.strategy-card--pass .strategy-card__pnl-usd strong {
  color: #fcd34d;
}

.strategy-card__pnl-usd--hedge strong {
  color: #52d6ff !important;
}

.strategy-card__bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(51, 65, 85, 0.8);
  overflow: hidden;
}

.strategy-card__bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.35s ease;
}

.strategy-card--break .strategy-card__bar-fill {
  background: linear-gradient(90deg, #059669, #34d399);
}

.strategy-card--pass .strategy-card__bar-fill {
  background: linear-gradient(90deg, #d97706, #fbbf24);
}

.strategy-card__story {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.strategy-card__intro {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  line-height: 1.5;
}

.strategy-card__points {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.45;
}

.strategy-card__account-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.strategy-card__account-title {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.strategy-card__broker-return {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(52, 211, 153, 0.22);
  background: rgba(6, 24, 20, 0.45);
  font-size: 11px;
  font-weight: 800;
  color: #6ee7b7;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

.strategy-card__outcome {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.strategy-card__outcome-title {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.strategy-card__outcome-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.strategy-card__outcome-table th,
.strategy-card__outcome-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
}

.strategy-card__outcome-table thead th {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.strategy-card__outcome-table tbody th {
  font-weight: 700;
  color: #cbd5e1;
}

.strategy-card__outcome-table tbody td {
  font-weight: 800;
  color: #e2e8f0;
}

.strategy-card__outcome-row--highlight td:last-child {
  color: #6ee7b7;
}

.strategy-card__example {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(52, 211, 153, 0.22);
  background: rgba(6, 24, 20, 0.45);
}

.strategy-card--pass .strategy-card__example {
  border-color: rgba(251, 191, 36, 0.22);
  background: rgba(28, 22, 8, 0.45);
}

.strategy-card__example-title {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.strategy-card__example-line {
  font-size: 11px;
  font-weight: 800;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}

.strategy-card__example-line:last-child {
  color: #6ee7b7;
}

.strategy-card--pass .strategy-card__example-line:last-child {
  color: #fcd34d;
}

.strategy-card__result-block-title {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.strategy-card__result-list {
  margin: 6px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fde68a;
  line-height: 1.4;
}

.strategy-card__result-line {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(52, 211, 153, 0.2);
  background: rgba(15, 23, 42, 0.5);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  color: #a7f3d0;
}

.strategy-card--pass .strategy-card__result-line {
  border-color: rgba(251, 191, 36, 0.2);
  color: #fde68a;
}

.strategy-card__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.strategy-card__done-badge {
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.28);
  color: #34d399;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.strategy-card--empty .strategy-card__empty {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

.strategy-card--compact {
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  box-shadow: none;
}

.strategy-card--compact .strategy-card__scenario-name {
  font-size: 9px;
  margin-bottom: 2px;
}

.strategy-card--compact .strategy-card__title {
  font-size: 10px;
  letter-spacing: 0.06em;
}

.strategy-card--compact .strategy-card__subtitle {
  display: none;
}

.strategy-card--compact .strategy-card__pill {
  padding: 3px 6px;
  font-size: 8px;
}

.strategy-card--compact .strategy-card__head {
  gap: 6px;
  align-items: center;
}

.strategy-card--compact .strategy-card__body {
  gap: 8px;
}

.strategy-card--compact .strategy-card__gauge {
  width: 52px;
  height: 52px;
}

.strategy-card--compact .strategy-card__gauge-track,
.strategy-card--compact .strategy-card__gauge-fill {
  stroke-width: 6;
}

.strategy-card--compact .strategy-card__gauge-pct {
  font-size: 13px;
}

.strategy-card--compact .strategy-card__ring-label,
.strategy-card--compact .strategy-card__status,
.strategy-card--compact .strategy-card__pnl-usd,
.strategy-card--compact .strategy-card__story,
.strategy-card--compact .strategy-card__foot {
  display: none;
}

.strategy-card--compact .strategy-card__metrics {
  gap: 4px;
}

.strategy-card--compact .strategy-card__progress-row {
  font-size: 13px;
}

.strategy-card--compact .strategy-card__target {
  font-size: 11px;
}

.strategy-card--compact .strategy-card__bar {
  height: 4px;
}
.dash-scenario-gauges-row {
  margin-bottom: 18px;
  padding: 16px 16px 12px;
  border-radius: 16px;
  border: 1px solid rgba(71, 85, 105, 0.4);
  background: linear-gradient(155deg, rgba(12, 20, 38, 0.85), rgba(8, 14, 26, 0.95));
}

.dash-scenario-gauges-row__head {
  margin-bottom: 14px;
}

.dash-scenario-gauges-row__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: #e2e8f0;
  line-height: 1.35;
}

.dash-scenario-gauges-row__sub {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.45;
}

.dash-scenario-gauges-row__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  align-items: stretch;
}

.dash-scenario-gauges-row__grid .strategy-card {
  height: 100%;
  min-height: 0;
}

@media (max-width: 900px) {
  .dash-scenario-gauges-row__grid {
    grid-template-columns: 1fr;
  }
}
.challenge-complete-alert-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.challenge-complete-alert {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: linear-gradient(135deg, rgba(12, 45, 38, 0.55) 0%, rgba(10, 18, 32, 0.96) 100%);
  box-shadow:
    0 0 0 1px rgba(52, 211, 153, 0.12),
    0 16px 36px rgba(0, 0, 0, 0.25);
}

.challenge-complete-alert--prop {
  border-color: rgba(251, 191, 36, 0.38);
  background: linear-gradient(135deg, rgba(48, 36, 10, 0.5) 0%, rgba(10, 16, 30, 0.96) 100%);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.12),
    0 16px 36px rgba(0, 0, 0, 0.25);
}

.challenge-complete-alert--event {
  border-color: rgba(52, 211, 153, 0.38);
}

.challenge-complete-alert--b2b {
  border-color: rgba(212, 175, 55, 0.46);
  background: linear-gradient(135deg, rgba(70, 48, 8, 0.52) 0%, rgba(10, 16, 30, 0.96) 100%);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.16),
    0 16px 36px rgba(0, 0, 0, 0.25);
}

.challenge-complete-alert__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.challenge-complete-alert__body {
  flex: 1;
  min-width: 0;
}

.challenge-complete-alert__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
  color: #f8fafc;
  letter-spacing: 0.02em;
}

.challenge-complete-alert__text {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #cbd5e1;
  line-height: 1.45;
}

.challenge-complete-alert__sub {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.4;
}

.challenge-complete-alert__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.challenge-complete-alert__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #059669, #34d399);
  color: #042f1a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.challenge-complete-alert--prop .challenge-complete-alert__cta {
  background: linear-gradient(135deg, #d97706, #fbbf24);
  color: #1c1408;
}

.challenge-complete-alert__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.challenge-complete-alert__cta--rebalance {
  background: linear-gradient(135deg, #F59E0B, #FCD34D);
  color: #1a1208;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.challenge-complete-alert__cta--rebalance:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
}

.challenge-complete-alert__cta--rebalance:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.challenge-complete-alert__error {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #f87171;
}

.challenge-complete-alert__secondary,
.challenge-complete-alert__dismiss {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.65);
  color: #e2e8f0;
}

.challenge-complete-alert__dismiss {
  color: #94a3b8;
  border-color: rgba(100, 116, 139, 0.35);
}

.challenge-complete-alert__secondary:hover,
.challenge-complete-alert__dismiss:hover {
  background: rgba(30, 41, 59, 0.85);
}

@media (max-width: 640px) {
  .challenge-complete-alert {
    flex-direction: column;
  }

  .challenge-complete-alert__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .challenge-complete-alert__cta,
  .challenge-complete-alert__secondary,
  .challenge-complete-alert__dismiss {
    width: 100%;
    text-align: center;
  }
}
/* ── Cycle orders panel (Journey tab) ─────────────────────── */

.jrny-cycle-orders {
  border-radius: 22px;
  border: 1px solid rgba(var(--steel-rgb), 0.28);
  background: linear-gradient(165deg, rgba(var(--navy-rgb), 0.92) 0%, rgba(var(--navy-rgb), 0.96) 100%);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 22px 20px 20px;
}

.jrny-cycle-orders__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.jrny-cycle-orders__head-main {
  min-width: 0;
  flex: 1;
}

.jrny-cycle-orders__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-text);
}

.jrny-cycle-orders__title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--silver2);
}

.jrny-cycle-orders__sub {
  margin: 8px 0 0;
  color: var(--jrny-tab-muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 640px;
}

.jrny-cycle-orders__count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--wiki-accent-rgb), 0.28);
  background: rgba(var(--wiki-accent-rgb), 0.08);
  color: var(--wiki-accent-light);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.jrny-cycle-orders__count strong {
  color: var(--silver2);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* ── Sections ──────────────────────────────────────────────── */

.jrny-cycle-orders__section + .jrny-cycle-orders__section {
  margin-top: 20px;
}

.jrny-cycle-orders__section-label {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wiki-muted);
}

.jrny-cycle-orders__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.jrny-cycle-orders__section-head .jrny-cycle-orders__section-label {
  margin-bottom: 0;
}

.jrny-cycle-orders__section-meta {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--wiki-muted);
  text-transform: uppercase;
}

/* ── KPI strip ─────────────────────────────────────────────── */

.jrny-cycle-orders__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.jrny-cycle-kpi {
  border-radius: 16px;
  border: 1px solid rgba(var(--steel-rgb), 0.24);
  background: radial-gradient(circle at top right, rgba(var(--cta-rgb), 0.1), transparent 38%),
    linear-gradient(180deg, rgba(var(--navy-rgb), 0.96) 0%, rgba(var(--navy-rgb), 0.98) 100%);
  padding: 14px 14px 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.jrny-cycle-kpi__label {
  display: block;
  color: var(--jrny-tab-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jrny-cycle-kpi__value {
  display: block;
  margin-top: 8px;
  color: var(--silver2);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.jrny-cycle-kpi__value--positive {
  color: #34d399;
}

.jrny-cycle-kpi__value--negative {
  color: #f87171;
}

.jrny-cycle-kpi__value--neutral {
  color: var(--silver);
}

/* ── Per-cycle cards ───────────────────────────────────────── */

.jrny-cycle-orders__cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jrny-cycle-orders__cards--scroll {
  max-height: min(720px, 68vh);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--wiki-accent-rgb), 0.28) transparent;
}

.jrny-cycle-orders__cards--scroll::-webkit-scrollbar {
  width: 6px;
}

.jrny-cycle-orders__cards--scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(var(--wiki-accent-rgb), 0.28);
}

.jrny-cycle-card {
  border-radius: 18px;
  border: 1px solid rgba(var(--steel-rgb), 0.28);
  background: linear-gradient(165deg, rgba(var(--navy-rgb), 0.96) 0%, rgba(var(--navy-rgb), 0.98) 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  padding: 16px 16px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jrny-cycle-card:hover {
  border-color: rgba(var(--wiki-accent-rgb), 0.32);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.jrny-cycle-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.jrny-cycle-card__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.jrny-cycle-card__meta {
  min-width: 0;
}

.jrny-cycle-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--silver2);
}

.jrny-cycle-card__timeline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--steel-rgb), 0.2);
  background: rgba(var(--navy-rgb), 0.55);
}

.jrny-cycle-card__timeline-arrow {
  color: var(--wiki-dim);
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

.jrny-cycle-date-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

.jrny-cycle-date-block__label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wiki-muted);
}

.jrny-cycle-card__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.jrny-cycle-card__metrics .jrny-cycle-kpi {
  padding: 12px 12px 10px;
}

.jrny-cycle-card__metrics .jrny-cycle-kpi__value {
  font-size: 18px;
}

/* ── Cycle cell ────────────────────────────────────────────── */

.jrny-cycle-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.jrny-cycle-cell__badge {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--wiki-accent-rgb), 0.3);
  background: linear-gradient(145deg, rgba(var(--steel-rgb), 0.45) 0%, rgba(var(--jrny-active-rgb), 0.65) 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

/* Slight badge tint by cycle band so 1–10 stay distinct at a glance */
.jrny-cycle-cell__badge--band-0 {
  border-color: rgba(var(--wiki-accent-rgb), 0.35);
}

.jrny-cycle-cell__badge--band-1 {
  border-color: rgba(52, 211, 153, 0.35);
  background: linear-gradient(145deg, rgba(16, 58, 52, 0.5) 0%, rgba(var(--jrny-active-rgb), 0.65) 100%);
}

.jrny-cycle-cell__badge--band-2 {
  border-color: rgba(167, 139, 250, 0.35);
  background: linear-gradient(145deg, rgba(46, 32, 82, 0.5) 0%, rgba(var(--jrny-active-rgb), 0.65) 100%);
}

.jrny-cycle-cell__num {
  font-size: 15px;
  font-weight: 900;
  color: var(--silver2);
  line-height: 1;
}

.jrny-cycle-cell__meta {
  min-width: 0;
}

.jrny-cycle-cell__label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--silver2);
}

.jrny-cycle-cell__status {
  display: inline-flex;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.jrny-cycle-cell__status--pass {
  color: #6ee7b7;
  background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.28);
}

.jrny-cycle-cell__status--break {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.28);
}

.jrny-cycle-cell__status--done {
  color: var(--smry-tab-active);
  background: rgba(var(--us-glow1-rgb), 0.12);
  border: 1px solid rgba(var(--us-glow1-rgb), 0.24);
}

/* ── Date cell ─────────────────────────────────────────────── */

.jrny-cycle-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 108px;
}

.jrny-cycle-date__main {
  font-size: 12px;
  font-weight: 700;
  color: var(--silver);
}

.jrny-cycle-date__sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--wiki-muted);
}

/* ── View button ───────────────────────────────────────────── */

.jrny-cycle-view-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 72px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(var(--stmt-btn-bg-rgb), 0.45);
  background: linear-gradient(180deg, rgba(var(--stmt-btn-bg-rgb), 0.22) 0%, rgba(var(--stmt-btn-bg2-rgb), 0.16) 100%);
  color: var(--stmt-btn-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.jrny-cycle-view-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--stmt-btn-border-rgb), 0.7);
  background: linear-gradient(180deg, rgba(var(--stmt-btn-bg-rgb), 0.34) 0%, rgba(var(--stmt-btn-bg2-rgb), 0.24) 100%);
  color: var(--stmt-btn-hover-text);
}

.jrny-cycle-view-btn:active {
  transform: translateY(0);
}

.jrny-cycle-view-btn__icon {
  font-size: 12px;
  line-height: 1;
  opacity: 0.9;
}

/* ── States: loading / empty / error ───────────────────────── */

.jrny-cycle-orders__state {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 20px;
  border-radius: 16px;
  border: 1px dashed rgba(var(--steel-rgb), 0.35);
  color: var(--jrny-tab-muted);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 1.55;
}

.jrny-cycle-orders__state--error {
  border-color: rgba(255, 72, 99, 0.28);
  background: rgba(30, 10, 18, 0.35);
  color: #ff9aaa;
}

.jrny-cycle-orders__retry {
  appearance: none;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 72, 99, 0.4);
  background: rgba(255, 72, 99, 0.12);
  color: #fecdd3;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.jrny-cycle-orders__retry:hover {
  background: rgba(255, 72, 99, 0.2);
}

.jrny-cycle-orders__empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--wiki-accent-light);
  border: 1px solid rgba(var(--wiki-accent-rgb), 0.28);
  background: rgba(var(--wiki-accent-rgb), 0.08);
}

.jrny-cycle-orders__empty-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--silver2);
}

.jrny-cycle-orders__empty-text {
  margin: 0;
  max-width: 420px;
  color: var(--jrny-tab-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ── Skeleton ──────────────────────────────────────────────── */

.jrny-cycle-orders__skeleton-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.jrny-cycle-orders__skeleton-block {
  height: 72px;
  border-radius: 16px;
  border: 1px solid rgba(var(--steel-rgb), 0.18);
  background: linear-gradient(
    90deg,
    rgba(var(--prog-track-rgb), 0.55) 0%,
    rgba(var(--nav-table-border-rgb), 0.35) 50%,
    rgba(var(--prog-track-rgb), 0.55) 100%
  );
  background-size: 200% 100%;
  animation: jrny-cycle-shimmer 1.4s ease-in-out infinite;
}

.jrny-cycle-orders__skeleton-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jrny-cycle-orders__skeleton-card {
  height: 168px;
  border-radius: 18px;
  border: 1px solid rgba(var(--steel-rgb), 0.18);
  background: linear-gradient(
    90deg,
    rgba(var(--navy-rgb), 0.7) 0%,
    rgba(var(--prog-track-rgb), 0.45) 50%,
    rgba(var(--navy-rgb), 0.7) 100%
  );
  background-size: 200% 100%;
  animation: jrny-cycle-shimmer 1.4s ease-in-out infinite;
}

@keyframes jrny-cycle-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .jrny-cycle-orders__kpis,
  .jrny-cycle-orders__skeleton-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .jrny-cycle-orders {
    padding: 16px 14px 14px;
  }

  .jrny-cycle-orders__head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .jrny-cycle-orders__title {
    font-size: 20px;
  }

  .jrny-cycle-orders__count {
    align-self: flex-start;
  }

  .jrny-cycle-orders__kpis,
  .jrny-cycle-orders__skeleton-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .jrny-cycle-kpi__value {
    font-size: 18px;
  }

  .jrny-cycle-card__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jrny-cycle-card__metrics .jrny-cycle-kpi__value {
    font-size: 16px;
  }

  .jrny-cycle-card__timeline {
    flex-direction: column;
    align-items: flex-start;
  }

  .jrny-cycle-card__timeline-arrow {
    display: none;
  }
}

@media (max-width: 480px) {
  .jrny-cycle-orders__kpis,
  .jrny-cycle-orders__skeleton-kpis {
    grid-template-columns: 1fr;
  }

  .jrny-cycle-card__metrics {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   Progress & Achievements Panel — Premium Redesign
   ============================================================ */

.dash-progress-panel {
  --c-accent:   var(--wiki-accent);
  --c-success:  #34d399;
  --c-gold:     #f59e0b;
  --c-warn:     #fb923c;
  --c-surface:  rgba(var(--navy-rgb), 0.92);
  --c-border:   rgba(var(--wiki-dim-rgb), 0.4);
  --c-text-1:   var(--silver2);
  --c-text-2:   var(--muted-text);
  --c-text-3:   var(--wiki-muted);
  width: 100%;
  padding: 0;
  min-height: 0;
  overflow: visible;
}

.dash-progress-panel--full {
  min-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
}

.dash-progress-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-height: inherit;
  border-radius: 20px;
  border: 1px solid rgba(var(--wiki-dim-rgb), 0.45);
  background: linear-gradient(155deg, rgba(var(--navy-rgb), 0.98) 0%, rgba(var(--navy-rgb), 0.99) 100%);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.dash-progress-shell::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--wiki-accent), #34d399, #f59e0b);
  opacity: 0.8;
  pointer-events: none;
}

.dash-progress-shell {
  position: relative;
}

.dash-progress-intro {
  border-bottom: 1px solid rgba(var(--nav-table-border-rgb), 0.45);
  background: rgba(var(--navy-rgb), 0.4);
}

.dash-progress-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px 22px;
  min-height: 0;
}

.dash-progress-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dash-progress-details:not(.dash-progress-details--visible) {
  display: none;
}

.dash-progress-scenarios-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.dash-progress-scenarios-row > .dash-progress-section:only-child {
  grid-column: 1 / -1;
}

.dash-progress-scenarios-row .dash-progress-section {
  min-width: 0;
  height: 100%;
}

/* ── Hero ─────────────────────────────────────────────────── */
.dash-progress-hero {
  position: relative;
  border-radius: 0;
  padding: 22px 22px 18px;
  margin-bottom: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.dash-progress-hero--compact .dash-progress-hero__title {
  font-size: 24px;
}

.dash-progress-hero--compact .dash-progress-hero__sub {
  margin-bottom: 0;
  max-width: none;
}

.dash-progress-hero--compact::before,
.dash-progress-hero--compact::after {
  display: none;
}

.dash-progress-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 120% at 100% 50%, rgba(var(--wiki-accent-rgb), 0.06), transparent 60%),
    radial-gradient(ellipse 60% 80%  at 0%  50%, rgba(52, 211, 153, 0.04), transparent 55%);
  pointer-events: none;
}

.dash-progress-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--c-accent) 30%, var(--c-success) 70%, transparent 100%);
  opacity: 0.9;
}

.dash-progress-hero__eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-progress-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--c-accent);
  border-radius: 2px;
}

.dash-progress-hero__title {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  color: var(--c-text-1);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.dash-progress-hero__sub {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--c-text-2);
  line-height: 1.6;
  max-width: 520px;
}

/* ── Summary Stat Cards ───────────────────────────────────── */
.dash-progress-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

.dash-progress-summary__card {
  border-radius: 16px;
  padding: 18px 18px 16px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dash-progress-summary__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
}

/* left glow strip */
.dash-progress-summary__card::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 3px;
  background: var(--accent, var(--c-accent));
  border-radius: 0 3px 3px 0;
}

/* subtle radial glow */
.dash-progress-summary__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 0% 50%, color-mix(in srgb, var(--accent, var(--c-accent)) 12%, transparent), transparent 60%);
  pointer-events: none;
}

.dash-progress-summary__icon {
  font-size: 20px;
  margin-bottom: 10px;
  display: block;
  line-height: 1;
}

.dash-progress-summary__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-3);
  display: block;
}

.dash-progress-summary__value {
  display: block;
  margin-top: 6px;
  font-size: 32px;
  font-weight: 900;
  color: var(--c-text-1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ── Zero-state Achievement Board ─────────────────────────── */
.dash-progress-zero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
  gap: 26px;
  align-items: stretch;
  margin-top: 0;
  flex: 1;
  min-height: min(400px, 50vh);
  border: 1px solid rgba(var(--wiki-accent-rgb), 0.18);
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(140deg, rgba(var(--navy-rgb), 0.96), rgba(var(--navy-rgb), 0.99)),
    radial-gradient(ellipse 120% 80% at 0% 0%, rgba(var(--wiki-accent-rgb), 0.12), transparent 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 20px 52px rgba(0, 0, 0, 0.24);
}

.dash-progress-zero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--wiki-accent), #34d399, #f59e0b);
  opacity: 0.85;
}

.dash-progress-zero__visual {
  position: relative;
  min-height: 300px;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(var(--wiki-dim-rgb), 0.32);
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(var(--wiki-accent-rgb), 0.13), transparent 64%),
    linear-gradient(180deg, rgba(var(--navy-rgb), 0.42), rgba(var(--navy-rgb), 0.3));
}

.dash-progress-zero__ring {
  position: relative;
  width: min(170px, 58vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(var(--wiki-accent-rgb), 0.34);
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--navy-rgb), 0.92) 0 52%, transparent 53%),
    conic-gradient(from 160deg, rgba(var(--wiki-accent-rgb), 0.9), rgba(52, 211, 153, 0.45), rgba(245, 158, 11, 0.36), rgba(var(--wiki-accent-rgb), 0.9));
  box-shadow: 0 0 42px rgba(var(--wiki-accent-rgb), 0.12), inset 0 0 22px rgba(var(--wiki-accent-rgb), 0.06);
}

.dash-progress-zero__ring span {
  color: var(--silver2);
  font-size: clamp(54px, 8vw, 86px);
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(var(--wiki-accent-rgb), 0.28);
}

.dash-progress-zero__orbit {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(var(--muted-text-rgb), 0.16);
  pointer-events: none;
}

.dash-progress-zero__orbit--a {
  width: 220px;
  height: 220px;
}

.dash-progress-zero__orbit--b {
  width: 270px;
  height: 120px;
  transform: rotate(-22deg);
  border-color: rgba(52, 211, 153, 0.16);
}

.dash-progress-zero__content {
  position: relative;
  padding: 30px 30px 30px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.dash-progress-zero__eyebrow {
  width: fit-content;
  margin-bottom: 10px;
  padding: 5px 10px;
  border: 1px solid rgba(var(--wiki-accent-rgb), 0.24);
  border-radius: 999px;
  background: rgba(var(--wiki-accent-rgb), 0.08);
  color: var(--wiki-accent-light);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dash-progress-zero__title {
  margin: 0;
  color: var(--c-text-1);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 950;
  line-height: 1.08;
}

.dash-progress-zero__text {
  max-width: 680px;
  margin: 12px 0 0;
  color: var(--c-text-2);
  font-size: 14px;
  line-height: 1.7;
}

.dash-progress-zero__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.dash-progress-zero__step {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(var(--wiki-dim-rgb), 0.38);
  border-radius: 14px;
  background: rgba(var(--navy-rgb), 0.55);
}

.dash-progress-zero__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid rgba(var(--wiki-accent-rgb), 0.26);
  color: var(--wiki-accent);
  background: rgba(var(--wiki-accent-rgb), 0.08);
  font-size: 10px;
  font-weight: 900;
}

.dash-progress-zero__step-copy {
  display: grid;
  gap: 5px;
}

.dash-progress-zero__step-copy strong {
  color: var(--c-text-1);
  font-size: 12px;
  font-weight: 850;
}

.dash-progress-zero__step-copy span {
  color: var(--c-text-3);
  font-size: 11px;
  line-height: 1.55;
}

/* ── Section header ───────────────────────────────────────── */
.dash-progress-section {
  margin-bottom: 0;
}

.dash-progress-section__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.dash-progress-section__icon {
  font-size: 16px;
  line-height: 1;
}

.dash-progress-section__title {
  margin: 0;
  flex: 1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-text-2);
}

.dash-progress-section__count {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(var(--navy-rgb), 0.85);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
}

/* ── Scenario Grid ────────────────────────────────────────── */
.dash-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 16px;
}

.dash-progress-grid--column {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* ── Scenario Card ────────────────────────────────────────── */
.dash-scenario-card {
  border-radius: 18px;
  border: 1px solid var(--c-border);
  background: linear-gradient(165deg, rgba(var(--navy-rgb), 0.97), rgba(var(--navy-rgb), 0.99));
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;
  position: relative;
}
.dash-scenario-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.32);
}
.dash-scenario-card:hover { border-color: rgba(var(--wiki-accent-rgb), 0.38); }
.dash-scenario-card--event:hover { border-color: rgba(245, 158, 11, 0.45); }
.dash-scenario-card--completed:hover { border-color: rgba(52, 211, 153, 0.5); }

/* top gradient bar */
.dash-scenario-card__accent {
  height: 4px;
  background: linear-gradient(90deg, var(--card-from, var(--wiki-accent)), var(--card-to, transparent 70%));
}
.dash-scenario-card--event     .dash-scenario-card__accent { --card-from: #f59e0b; --card-to: rgba(245,158,11,0.0); }
.dash-scenario-card--completed .dash-scenario-card__accent { --card-from: #34d399; --card-to: rgba(52,211,153,0.0); }

.dash-scenario-card__body {
  padding: 18px 20px 20px;
}

.dash-scenario-card__top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

/* Icon circle */
.dash-scenario-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  background: rgba(var(--wiki-accent-rgb), 0.1);
  border: 1px solid rgba(var(--wiki-accent-rgb), 0.22);
}
.dash-scenario-card--event     .dash-scenario-card__icon { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.28); }
.dash-scenario-card--completed .dash-scenario-card__icon { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.28); }

.dash-scenario-card__meta { flex: 1; min-width: 0; }

.dash-scenario-card__type {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: 4px;
}

.dash-scenario-card__name {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--c-text-1);
  line-height: 1.28;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status badge */
.dash-scenario-card__badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
}
.dash-scenario-card__badge--active {
  color: var(--wiki-accent-light);
  background: rgba(var(--wiki-accent-rgb), 0.1);
  border: 1px solid rgba(var(--wiki-accent-rgb), 0.28);
}
.dash-scenario-card__badge--done {
  color: #6ee7b7;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.32);
}

/* CTA button */
.dash-scenario-card__cta {
  margin-top: 16px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.12) 0%, rgba(16, 185, 129, 0.06) 100%);
  color: #6ee7b7;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dash-scenario-card__cta::before { content: '🏆'; font-size: 14px; }
.dash-scenario-card__cta:hover {
  background: rgba(52, 211, 153, 0.18);
  border-color: rgba(52, 211, 153, 0.55);
  transform: translateY(-1px);
}

/* ── Progress Bar (inside ScenarioCard) ───────────────────── */
.dash-progress-bar-wrap { margin-top: 4px; }

.dash-progress-metrics {
  border-radius: 12px;
  border: 1px solid rgba(var(--nav-table-border-rgb), 0.6);
  overflow: hidden;
  background: rgba(var(--navy-rgb), 0.6);
  margin-bottom: 12px;
}

.dash-progress-metrics__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 9px 12px;
  font-size: 12px;
  align-items: center;
}
.dash-progress-metrics__row--head {
  background: rgba(var(--navy-rgb), 0.8);
  border-bottom: 1px solid rgba(var(--nav-table-border-rgb), 0.5);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.dash-progress-metrics__row--head span:not(:first-child),
.dash-progress-metrics__row--values span:not(:first-child) {
  text-align: right;
}
.dash-progress-metrics__row--values span:not(:first-child) {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.dash-progress-metrics__label    { color: var(--c-text-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-progress-metrics__target   { color: var(--wiki-light); }
.dash-progress-metrics__achieved { color: var(--c-success); }
.dash-progress-metrics__remaining{ color: var(--c-gold); }

/* ── Cycle history grid (below certificate preview) ───────── */
.dash-cycle-history {
  border-radius: 14px;
  border: 1px solid rgba(var(--nav-table-border-rgb), 0.55);
  background: rgba(var(--navy-rgb), 0.72);
  overflow: hidden;
}

.dash-cycle-history__head {
  padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(var(--nav-table-border-rgb), 0.45);
  background: rgba(var(--navy-rgb), 0.55);
}

.dash-cycle-history__title {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-2);
}

.dash-cycle-history__table {
  overflow-x: auto;
}

.dash-cycle-history__row {
  display: grid;
  grid-template-columns: 0.85fr 0.85fr 1fr 1fr 1fr 0.85fr 1fr 0.75fr 0.75fr;
  gap: 8px;
  padding: 10px 14px;
  align-items: center;
  min-width: 900px;
}

.dash-cycle-history--b2b .dash-cycle-history__row {
  grid-template-columns: 0.85fr 0.85fr 1fr 1fr 1fr 0.85fr 0.75fr 0.75fr;
  min-width: 820px;
}

.dash-cycle-history--no-statement .dash-cycle-history__row {
  grid-template-columns: 0.85fr 0.85fr 1fr 1fr 1fr 0.85fr 1fr 0.75fr;
  min-width: 820px;
}

.dash-cycle-history--no-statement.dash-cycle-history--b2b .dash-cycle-history__row {
  grid-template-columns: 0.85fr 0.85fr 1fr 1fr 1fr 0.85fr 0.75fr;
  min-width: 740px;
}

.dash-cycle-history__row--head {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-text-3);
  background: rgba(var(--navy-rgb), 0.65);
  border-bottom: 1px solid rgba(var(--nav-table-border-rgb), 0.45);
}

.dash-cycle-history__row--head span:not(:first-child),
.dash-cycle-history__row--data span:not(:first-child) {
  text-align: right;
}

.dash-cycle-history__row--data {
  font-size: 12px;
  border-bottom: 1px solid rgba(var(--nav-table-border-rgb), 0.28);
}

.dash-cycle-history__row--data:last-child {
  border-bottom: none;
}

.dash-cycle-history__cycle {
  font-weight: 700;
  color: var(--c-text-1);
}

.dash-cycle-history__status {
  font-weight: 700;
  text-transform: capitalize;
}

.dash-cycle-history__status--done {
  color: var(--c-success);
}

.dash-cycle-history__money {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--wiki-light);
}

.dash-cycle-history__money--positive {
  color: #34d399;
}

.dash-cycle-history__money--negative {
  color: #f87171;
}

.dash-cycle-history__money--payout {
  color: var(--c-gold);
}

.dash-cycle-history__days {
  font-weight: 700;
  color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
}

.dash-cycle-history__action {
  text-align: right;
}

.dash-cycle-history__view-btn {
  appearance: none;
  border: 1px solid rgba(var(--wiki-accent-rgb), 0.45);
  background: rgba(var(--wiki-accent-rgb), 0.12);
  color: var(--wiki-accent-light);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dash-cycle-history__view-btn:hover {
  background: rgba(var(--wiki-accent-rgb), 0.22);
  border-color: rgba(var(--wiki-accent-rgb), 0.7);
  color: var(--wiki-light);
}

.dash-cycle-history__view-btn--stmt {
  border-color: rgba(var(--stmt-btn-border-rgb), 0.45);
  background: rgba(var(--stmt-btn-bg-rgb), 0.14);
  color: var(--stmt-btn-text);
}

.dash-cycle-history__view-btn--stmt:hover {
  background: rgba(var(--stmt-btn-bg-rgb), 0.24);
  border-color: rgba(var(--stmt-btn-border-rgb), 0.7);
  color: var(--stmt-btn-hover-text);
}

/* progress bar track */
.dash-progress-bar__track {
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--prog-track-rgb), 0.9);
  border: 1px solid rgba(var(--nav-table-border-rgb), 0.55);
  overflow: hidden;
  position: relative;
}
/* animated shimmer on the fill */
.dash-progress-bar__fill {
  height: 100%;
  border-radius: 999px;
  position: relative;
  transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.dash-progress-bar__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  background-size: 200% 100%;
  animation: bar-shimmer 2s ease-in-out infinite;
}
.dash-progress-bar__fill--active {
  background: linear-gradient(90deg, var(--prog-active1), var(--prog-active2), var(--wiki-accent));
  box-shadow: 0 0 14px rgba(var(--wiki-accent-rgb), 0.5);
}
.dash-progress-bar__fill--event {
  background: linear-gradient(90deg, #b45309, #d97706, #fbbf24);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.45);
}
.dash-progress-bar__fill--done {
  background: linear-gradient(90deg, #059669, #10b981, #34d399);
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.5);
}

@keyframes bar-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

.dash-progress-bar__hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--c-text-3);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.dash-progress-bar__pct { font-weight: 800; color: var(--c-text-2); }

/* ── Congratulations Banner ───────────────────────────────── */
.dash-congrats {
  position: relative;
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 22px;
  border: 1px solid rgba(52, 211, 153, 0.38);
  background: linear-gradient(130deg, rgba(52,211,153,0.14) 0%, rgba(var(--navy-rgb), 0.96) 60%);
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(52,211,153,0.1);
}
.dash-congrats::before {
  content: '🏅';
  position: absolute;
  right: 20px; top: 16px;
  font-size: 36px;
  opacity: 0.3;
  pointer-events: none;
}
.dash-congrats__title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  color: #6ee7b7;
}
.dash-congrats__text {
  margin: 0 0 4px;
  color: var(--wiki-light);
  font-size: 14px;
  line-height: 1.55;
}
.dash-congrats__sub {
  margin: 0 0 16px;
  color: var(--c-text-2);
  font-size: 12px;
}
.dash-congrats__btn {
  padding: 10px 22px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #059669, #10b981, #34d399);
  color: #032616;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(52,211,153,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dash-congrats__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(52,211,153,0.45);
}

/* ── Certificate List ─────────────────────────────────────── */
.dash-cert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-cert-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.dash-cert-item:hover {
  transform: translateX(5px);
  border-color: rgba(245, 158, 11, 0.42);
  background: rgba(var(--navy-rgb), 0.98);
  box-shadow: 0 8px 28px rgba(245,158,11,0.08);
}

.dash-cert-item__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.32);
  flex-shrink: 0;
}

.dash-cert-item__main { flex: 1; min-width: 0; }

.dash-cert-item__name {
  font-weight: 800;
  font-size: 14px;
  color: var(--c-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-cert-item__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.dash-cert-item__badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(245,158,11,0.12);
  color: #fcd34d;
  border: 1px solid rgba(245,158,11,0.28);
  letter-spacing: 0.05em;
}

.dash-cert-item__detail {
  font-size: 11px;
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}

.dash-cert-item__arrow {
  color: var(--c-text-3);
  font-size: 18px;
  font-weight: 700;
  transition: color 0.15s ease, transform 0.15s ease;
}
.dash-cert-item:hover .dash-cert-item__arrow {
  color: var(--c-gold);
  transform: translateX(3px);
}

/* ── Empty state ──────────────────────────────────────────── */
.dash-progress-empty {
  border-radius: 16px;
  border: 1px dashed rgba(var(--wiki-dim-rgb), 0.5);
  padding: 32px 24px;
  text-align: center;
  color: var(--c-text-3);
  font-size: 13px;
  line-height: 1.6;
  background: rgba(var(--navy-rgb), 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dash-progress-empty__icon {
  font-size: 28px;
  opacity: 0.45;
}

/* ── Loading skeleton ─────────────────────────────────────── */
.dash-progress-loading {
  display: grid;
  gap: 14px;
  padding: 20px 22px 24px;
}

.dash-progress-skeleton {
  height: 120px;
  border-radius: 18px;
  background: linear-gradient(
    90deg,
    rgba(var(--prog-track-rgb), 0.5) 0%,
    rgba(var(--nav-table-border-rgb), 0.55) 50%,
    rgba(var(--prog-track-rgb), 0.5) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.3s ease-in-out infinite;
}

.dash-progress-skeleton--short {
  height: 72px;
}

.dash-progress-skeleton--tall {
  height: min(420px, 50vh);
}

@keyframes skeleton-shimmer {
  0%   { background-position:  100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Error ────────────────────────────────────────────────── */
.dash-progress-error {
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(248,113,113,0.35);
  background: rgba(248,113,113,0.07);
  color: #fda4af;
  font-size: 13px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-progress-error::before { content: '⚠'; font-size: 16px; flex-shrink: 0; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .dash-progress-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .dash-progress-panel--full {
    min-height: calc(100vh - 88px);
  }

  .dash-progress-shell {
    border-radius: 16px;
  }

  .dash-progress-hero {
    padding: 18px 16px 14px;
  }

  .dash-progress-body {
    padding: 14px 14px 18px;
  }

  .dash-progress-hero__title { font-size: 20px; }

  .dash-progress-scenarios-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .dash-progress-grid { grid-template-columns: 1fr; }
  .dash-progress-zero {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .dash-progress-zero__visual {
    min-height: 210px;
    border-right: 0;
    border-bottom: 1px solid rgba(var(--wiki-dim-rgb), 0.32);
  }
  .dash-progress-zero__content {
    padding: 22px 18px 20px;
  }
  .dash-progress-zero__steps {
    grid-template-columns: 1fr;
  }
  .dash-progress-zero__orbit--a {
    width: 190px;
    height: 190px;
  }
  .dash-progress-zero__orbit--b {
    width: 220px;
    height: 100px;
  }

  .dash-progress-metrics__row {
    grid-template-columns: 1fr 1fr;
  }
  .dash-progress-metrics__row--head span:first-child,
  .dash-progress-metrics__row--values span:first-child {
    grid-column: 1 / -1;
    text-align: left !important;
    margin-bottom: 4px;
  }
}

/* ── Summary page embed (compact, matches smry-metric-panel) ─ */
.dash-progress-panel--summary {
  min-height: 0;
}

.dash-progress-panel--summary .dash-scenario-gauges-row {
  border: 1px solid rgba(var(--wiki-dim-rgb), 0.32);
  border-radius: 12px;
  background: rgba(var(--navy-rgb), 0.45);
  padding: 14px 16px 16px;
}

.dash-progress-panel--summary .dash-scenario-gauges-row__title {
  font-size: 15px;
}

.dash-progress-summary-wrap {
  position: relative;
  border: 1px solid rgba(var(--wiki-dim-rgb), 0.38);
  border-radius: 12px;
  background: rgba(var(--navy-rgb), 0.55);
  overflow: hidden;
}

.dash-progress-summary-wrap::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgba(226, 185, 111, 0.7), rgba(52, 211, 153, 0.35), transparent);
  opacity: 0.75;
  pointer-events: none;
}

.dash-progress-summary-block-head {
  padding: 14px 18px 0;
}

.dash-progress-summary-block-head__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wiki-muted);
}

.dash-progress-panel--summary .dash-progress-body {
  padding: 14px 18px 18px;
  gap: 12px;
}

.dash-progress-panel--summary .dash-progress-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dash-progress-panel--summary .dash-progress-summary__card {
  border-radius: 8px;
  padding: 12px 14px;
}

.dash-progress-panel--summary .dash-progress-summary__card:hover {
  transform: none;
  box-shadow: none;
}

.dash-progress-panel--summary .dash-progress-summary__icon {
  font-size: 16px;
  margin-bottom: 6px;
}

.dash-progress-panel--summary .dash-progress-summary__value {
  font-size: 22px;
}

.dash-progress-panel--summary .dash-progress-scenarios-row {
  gap: 12px;
}

.dash-progress-panel--summary .dash-scenario-card {
  border-radius: 8px;
  box-shadow: none;
}

.dash-progress-panel--summary .dash-progress-section {
  border-radius: 8px;
}

.dash-progress-panel--summary .dash-cert-preview--summary {
  margin-top: 4px;
}

.dash-progress-panel--summary .dash-cert-preview--summary .dash-cert-preview__stage {
  min-height: 360px;
  padding: 12px 14px 16px;
}

.dash-progress-panel--summary .dash-cert-preview--summary .dash-cert-preview__scale {
  transform: scale(0.62);
  max-width: 900px;
}

@media (min-width: 768px) {
  .dash-progress-panel--summary .dash-cert-preview--summary .dash-cert-preview__scale {
    transform: scale(0.72);
  }
}

.dash-progress-summary-empty {
  margin: 0;
  padding: 20px 16px;
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
  color: var(--wiki-muted);
  border: 1px dashed rgba(var(--wiki-dim-rgb), 0.45);
  border-radius: 8px;
  background: rgba(var(--navy-rgb), 0.45);
}

@media (max-width: 768px) {
  .dash-progress-panel--summary .dash-progress-summary {
    grid-template-columns: 1fr;
  }

  .dash-progress-panel--summary .dash-progress-scenarios-row {
    grid-template-columns: 1fr;
  }
}

/* ── Cycle statement modal ─────────────────────────────────── */
.dash-cycle-stmt-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(var(--navy-rgb), 0.78);
  backdrop-filter: blur(6px);
}

.dash-cycle-stmt {
  width: min(1120px, 100%);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid rgba(var(--wiki-dim-rgb), 0.55);
  background: linear-gradient(180deg, rgba(var(--navy-rgb), 0.98) 0%, rgba(var(--navy-rgb), 0.98) 100%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.dash-cycle-stmt--history {
  width: min(1280px, 100%);
}

.dash-cycle-stmt__sub--source {
  margin-top: 4px;
  font-size: 11px;
  color: var(--wiki-muted);
}

.dash-cycle-stmt__history-table {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-top: 1px solid rgba(var(--nav-table-border-rgb), 0.45);
}

.dash-cycle-stmt__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(var(--nav-table-border-rgb), 0.55);
}

.dash-cycle-stmt__eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-purple);
}

.dash-cycle-stmt__title {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  color: var(--silver2);
}

.dash-cycle-stmt__sub {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted-text);
}

.dash-cycle-stmt__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(var(--wiki-dim-rgb), 0.55);
  background: rgba(var(--navy-rgb), 0.85);
  color: var(--wiki-light);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.dash-cycle-stmt__close:hover {
  border-color: rgba(var(--muted-text-rgb), 0.55);
  color: var(--silver2);
}

.dash-cycle-stmt__summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(var(--nav-table-border-rgb), 0.45);
}

.dash-cycle-stmt__kpi .jrny-cycle-kpi__value {
  font-size: 18px;
}

@media (max-width: 900px) {
  .dash-cycle-stmt__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .dash-cycle-stmt__summary {
    grid-template-columns: 1fr;
  }
}

.dash-cycle-stmt__table-wrap {
  flex: 1;
  overflow: auto;
  padding: 0 22px 12px;
}

.dash-cycle-stmt__trade-row {
  display: grid;
  grid-template-columns: 0.7fr 0.8fr 0.55fr 0.5fr 1fr 0.75fr 0.8fr 0.55fr 0.5fr 1fr 0.75fr;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--nav-table-border-rgb), 0.35);
  font-size: 12px;
  color: var(--wiki-light);
}

.dash-cycle-stmt__trade-row--head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-top: 12px;
  background: rgba(var(--navy-rgb), 0.96);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wiki-muted);
}

.dash-cycle-stmt__slot {
  font-weight: 800;
  color: var(--wiki-light);
}

.dash-cycle-stmt__time {
  font-size: 11px;
  color: var(--muted-text);
}

.dash-cycle-stmt__pnl {
  font-weight: 800;
}

.dash-cycle-stmt__pnl--positive { color: #34d399; }
.dash-cycle-stmt__pnl--negative { color: #f87171; }
.dash-cycle-stmt__pnl--neutral { color: var(--muted-text); }

.dash-cycle-stmt__expected {
  font-weight: 800;
  color: var(--nav-prop);
}

.dash-cycle-stmt__state {
  padding: 28px 22px;
  text-align: center;
  font-size: 13px;
  color: var(--muted-text);
}

.dash-cycle-stmt__state--error {
  color: #fca5a5;
}

.dash-cycle-stmt__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 22px 18px;
  border-top: 1px solid rgba(var(--nav-table-border-rgb), 0.45);
}

.dash-cycle-stmt__pager-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(var(--wiki-dim-rgb), 0.55);
  background: rgba(var(--navy-rgb), 0.85);
  color: var(--wiki-light);
  font-size: 18px;
  cursor: pointer;
}

.dash-cycle-stmt__pager-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.dash-cycle-stmt__pager-info {
  min-width: 64px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted-text);
}

/* ── Trade statement: card layout per paired row ───────────── */

.dash-cycle-stmt--cards {
  width: min(920px, 100%);
}

.dash-cycle-stmt__cards-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 22px 8px;
}

.dash-cycle-stmt__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-cycle-stmt__trade-card {
  border-radius: 14px;
  border: 1px solid rgba(var(--steel-rgb), 0.28);
  background: linear-gradient(180deg, rgba(var(--navy-rgb), 0.96) 0%, rgba(var(--navy-rgb), 0.98) 100%);
  overflow: hidden;
}

.dash-cycle-stmt__trade-card-head {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(var(--steel-rgb), 0.22);
  background: rgba(var(--navy-rgb), 0.65);
}

.dash-cycle-stmt__trade-card-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
  padding: 12px 14px 14px;
}

.dash-cycle-stmt__leg {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'tag symbol'
    'side lots'
    'time time'
    'pnl pnl';
  gap: 6px 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--steel-rgb), 0.2);
  background: rgba(var(--navy-rgb), 0.55);
  font-size: 12px;
  color: var(--wiki-light);
}

.dash-cycle-stmt__leg--prop {
  border-color: rgba(var(--leg-prop-rgb), 0.22);
}

.dash-cycle-stmt__leg--hedge {
  border-color: rgba(251, 191, 36, 0.22);
}

.dash-cycle-stmt__leg-tag {
  grid-area: tag;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wiki-muted);
}

.dash-cycle-stmt__leg--prop .dash-cycle-stmt__leg-tag {
  color: var(--nav-prop);
}

.dash-cycle-stmt__leg--hedge .dash-cycle-stmt__leg-tag {
  color: #fcd34d;
}

.dash-cycle-stmt__leg-symbol {
  grid-area: symbol;
  font-weight: 800;
  color: var(--silver2);
  word-break: break-word;
}

.dash-cycle-stmt__side {
  grid-area: side;
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.dash-cycle-stmt__side--buy {
  color: #6ee7b7;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.28);
}

.dash-cycle-stmt__side--sell {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.28);
}

.dash-cycle-stmt__leg-lots {
  grid-area: lots;
  font-weight: 700;
  color: var(--muted-text);
  font-variant-numeric: tabular-nums;
}

.dash-cycle-stmt__leg-time {
  grid-area: time;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--muted-text);
}

.dash-cycle-stmt__leg-price {
  font-size: 10px;
  color: var(--wiki-muted);
}

.dash-cycle-stmt__leg-pnl {
  grid-area: pnl;
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.dash-cycle-stmt__accuracy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 64px;
  padding: 8px 6px;
  border-radius: 12px;
  border: 1px solid rgba(var(--steel-rgb), 0.22);
  background: rgba(var(--navy-rgb), 0.45);
}

.dash-cycle-stmt__accuracy-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wiki-muted);
}

.dash-cycle-stmt__accuracy-value {
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 960px) {
  .dash-cycle-stmt__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-cycle-stmt__trade-row {
    min-width: 900px;
  }

  .dash-cycle-stmt__trade-card-body {
    grid-template-columns: 1fr;
  }

  .dash-cycle-stmt__accuracy {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
}
/* ═══════════════════════════════════════════════
   MySubscriptionPage — Mobile Responsive
   Breakpoints: 768px | 480px | 375px | 320px
═══════════════════════════════════════════════ */

/* ── Loading skeleton cards (shown while requests/configs fetch) ── */
.sub-skeleton-card {
  border-radius: 24px;
  border: 1px solid rgba(var(--cyan-rgb), 0.1);
  background: linear-gradient(180deg, rgba(var(--navy-rgb), 0.84) 0%, rgba(var(--navy-rgb), 0.96) 100%);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.sub-skeleton-icon {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  flex-shrink: 0;
  background: linear-gradient(90deg, rgba(var(--cyan-rgb), 0.08) 0%, rgba(var(--cyan-rgb), 0.18) 50%, rgba(var(--cyan-rgb), 0.08) 100%);
  background-size: 200% 100%;
  animation: sub-skeleton-shimmer 1.4s ease-in-out infinite;
}

.sub-skeleton-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.sub-skeleton-line {
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(var(--cyan-rgb), 0.06) 0%, rgba(var(--cyan-rgb), 0.16) 50%, rgba(var(--cyan-rgb), 0.06) 100%);
  background-size: 200% 100%;
  animation: sub-skeleton-shimmer 1.4s ease-in-out infinite;
}

.sub-skeleton-line--title {
  width: 45%;
  height: 18px;
}

.sub-skeleton-line--desc {
  width: 80%;
}

.sub-skeleton-line--pill {
  width: 30%;
  height: 24px;
  border-radius: 999px;
  margin-top: 4px;
}

@keyframes sub-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ─── Standard mobile ≤768px ─── */
@media (max-width: 768px) {

  /* ── Page: reduce large desktop padding ── */
  .sub-page {
    padding: 14px 12px 36px !important;
    overflow: visible !important;
  }

  /*
   * ── Hero: collapse two-column grid to single column ──
   * Desktop uses gridTemplateColumns: 'minmax(0,1fr) auto'.
   * The 'auto' column (3 buttons) would squeeze the title
   * and force a horizontal overflow on narrow screens.
   */
  .sub-hero {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    gap: 16px !important;
    min-height: 0 !important;
  }

  /* ── Hero title: 44px is unreadable on 375px ── */
  .sub-hero-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }

  /*
   * ── Hero actions: stack vertically, stretch to full width ──
   * Desktop: flex-row with justify-content: flex-end.
   * Mobile: flex-column so each button spans the full width.
   */
  .sub-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .sub-hero-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    text-align: center !important;
  }

  /*
   * ── Subscription cards: stack content + actions vertically ──
   * Desktop: flex-row with space-between.
   * Mobile: flex-column so the icon/text block comes first,
   * then the action buttons below at full width.
   */
  /*
   * ── Subscription cards: stack content + actions vertically ──
   * align-items: stretch (not flex-start) so both children
   * automatically fill the full card width without needing
   * explicit width:100% on each one.
   */
  .sub-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 16px !important;
  }

  /*
   * ── Card content block: remove the 260px min-width ──
   * flex: 0 0 auto so it never grows to swallow vertical
   * space and push sub-card-actions off the card.
   */
  .sub-card-content {
    min-width: 0 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* ── Card actions: always visible, full width, stacked ── */
  .sub-card-actions {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow: visible !important;
    align-self: stretch !important;
  }

  /* ── Action buttons (View & Update / New config / Renew): full width ── */
  .sub-update-btn {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    text-align: center !important;
  }

  /* ── History panel: tighter padding ── */
  .sub-history {
    padding: 16px !important;
    margin-top: 14px !important;
    border-radius: 18px !important;
  }
}

/* ─── Small phones ≤480px ─── */
@media (max-width: 480px) {

  .sub-page {
    padding: 10px 10px 28px !important;
  }

  .sub-hero {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .sub-hero-title {
    font-size: 24px !important;
  }

  .sub-card {
    padding: 14px !important;
    border-radius: 18px !important;
    gap: 12px !important;
  }

  .sub-history {
    padding: 14px !important;
  }

  .sub-update-btn {
    min-height: 40px !important;
    font-size: 13px !important;
  }
}

/* ─── Standard iPhone ≤375px ─── */
@media (max-width: 375px) {

  .sub-page {
    padding: 8px 8px 24px !important;
  }

  .sub-hero {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .sub-hero-title {
    font-size: 22px !important;
  }

  .sub-card {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .sub-history {
    padding: 12px !important;
    border-radius: 16px !important;
  }
}

/* ─── Galaxy Fold ≤320px ─── */
@media (max-width: 320px) {

  /*
   * At 320px the available width inside a card is:
   *   320 - 12(page sides) - 20(card padding) = 288px.
   * sub-card-content has min-width:0 so it won't overflow.
   * The icon (68×68) + 18px gap leaves 202px for text — enough.
   */
  .sub-page {
    padding: 6px 6px 20px !important;
  }

  .sub-hero {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .sub-hero-title {
    font-size: 20px !important;
  }

  .sub-card {
    padding: 10px !important;
    border-radius: 14px !important;
    gap: 10px !important;
  }

  .sub-update-btn {
    min-height: 38px !important;
    font-size: 12px !important;
    padding: 0 12px !important;
  }

  .sub-hero-btn {
    min-height: 38px !important;
    font-size: 13px !important;
  }

  .sub-history {
    padding: 10px !important;
    border-radius: 14px !important;
    margin-top: 10px !important;
  }
}
/* SubscriptionPricingPanel — Mobile Responsive */

@media (max-width: 768px) {
  /* Hero: 2-column → 1-column */
  .spp-hero {
    grid-template-columns: 1fr !important;
  }

  /* Mini plans: 3-column → 1-column */
  .spp-mini-plans {
    grid-template-columns: 1fr !important;
  }

  /* Feature grid: 3-column → 1-column */
  .spp-feature-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .spp-hero {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .spp-mini-plans {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .spp-feature-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}
/* WikiPage — Mobile Responsive (320px–768px) */

/* ════════════════════════════════════════════════════
   ≤ 768 px  (all mobile breakpoints inherit from here)
   ════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── No page-level horizontal scroll ── */
  .wiki-page {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* ── Hero: compact stacked layout ──────────────────
     Reduces above-fold waste; stacks text then stats.
     Original padding was 16px 28px — too tall on mobile.  */
  .wiki-hero {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 12px 8px !important;
    gap: 6px !important;
  }

  /* Ensure hero text block is visible */
  .wiki-hero-text {
    display: block;
  }

  /* Scale down eyebrow label */
  .wiki-hero-eyebrow {
    font-size: 10px !important;
  }

  /* Scale down main heading; tighten spacing above it */
  .wiki-hero-title {
    font-size: 20px !important;
    margin-top: 2px !important;
    line-height: 1.15 !important;
  }

  /* Scale down subtitle; clamp to 2 lines to save height */
  .wiki-hero-subtitle {
    font-size: 12px !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Stats row: 3 equal-width pills in one line */
  .wiki-hero-stats {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .wiki-stat-pill {
    flex: 1 1 0 !important;
    padding: 6px 4px !important;
    font-size: 9px !important;
    border-radius: 8px !important;
    min-width: 0 !important;
  }

  .wiki-stat-value {
    font-size: 14px !important;
  }

  /* ── Firm tab nav: reduce dead side-padding ──────────
     Original 0 16px wastes horizontal space in scrollable
     nav; 0 8px gives first/last tab better proximity.     */
  .wiki-firm-nav {
    padding: 0 8px !important;
  }

  /* ── Shell: 10px side gutters for card breathing room ── */
  .wiki-shell {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ── Split grid: stack to single column on mobile ── */
  .wiki-split-grid {
    grid-template-columns: 1fr !important;
    padding: 8px 12px 20px !important;
    max-width: 100% !important;
  }

  /* ── All panels: tighter inner padding ── */
  .wiki-panel {
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  /* ── Firm Snapshot — 2-col grid ──────────────────────
     3-col at 320px gives only ~97px per cell; an 18px/900
     value like "+$10.5k" is ~90px and clips with padding.
     2-col gives ~148px per cell — safe for all values.    */
  .wiki-overview-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* ── Tutorial + Search: single column ── */
  .wiki-two-column {
    grid-template-columns: 1fr !important;
  }

  /* ── 4 Simple Steps: single column ── */
  .wiki-step-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Rules: tighter padding ── */
  .wiki-rule-row {
    padding: 10px 12px !important;
  }

  /* ── Challenge plans ───────────────────────────────
     Parent panel has overflow:hidden so child overflow-x
     was silently clipped. Remove scroll approach; flex-wrap
     already handles chip wrapping. Reduce card padding.    */
  .wiki-challenge-list {
    overflow-x: visible;
  }

  .wiki-challenge-row {
    padding: 12px !important;
    min-width: 0 !important;
  }

  /* ── Chip rows: reduce top margin across all sections ── */
  .wiki-chip-row {
    margin-top: 10px !important;
    gap: 6px !important;
  }

  /* ── Search input: meet 44px touch target ────────────
     Inline style sets height:40 — !important overrides it. */
  .wiki-search-input {
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* ════════════════════════════════════════════════════
   ≤ 480 px  (compact phones: Galaxy S8, iPhone SE 1st)
   ════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Tighter stat pills on smallest screens */
  .wiki-stat-pill {
    font-size: 8px !important;
    padding: 5px 3px !important;
  }

  .wiki-stat-value {
    font-size: 12px !important;
  }

  /* Subtitle slightly smaller on 320px to save more height */
  .wiki-hero-subtitle {
    font-size: 11px !important;
  }

  /* Extra-tight chip spacing */
  .wiki-chip-row {
    gap: 5px !important;
  }
}
/* ── Certificates panel (Journey tab) ─────────────────────── */

.jrny-certificates {
  border-radius: 22px;
  border: 1px solid rgba(var(--steel-rgb), 0.28);
  background: linear-gradient(165deg, rgba(var(--navy-rgb), 0.92) 0%, rgba(var(--navy-rgb), 0.96) 100%);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 22px 20px 20px;
}

.jrny-certificates__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.jrny-certificates__head-main {
  min-width: 0;
  flex: 1;
}

.jrny-certificates__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-text);
}

.jrny-certificates__title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--silver2);
}

.jrny-certificates__sub {
  margin: 8px 0 0;
  color: var(--jrny-tab-muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 640px;
}

.jrny-certificates__count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.08);
  color: #fbbf24;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.jrny-certificates__count strong {
  color: var(--silver2);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* ── Table wrapper ─────────────────────────────────────────── */

.jrny-certificates__table {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jrny-certificates__table .dash-cycle-history {
  margin: 0;
  border-radius: 18px;
  border: 1px solid rgba(var(--steel-rgb), 0.24);
  background: rgba(var(--navy-rgb), 0.55);
  overflow: hidden;
}

.jrny-certificates__table .dash-cycle-history__head {
  display: none;
}

.jrny-certificates__latest {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(var(--steel-rgb), 0.24);
  background: rgba(var(--navy-rgb), 0.65);
  color: var(--jrny-tab-muted);
  font-size: 13px;
  font-weight: 700;
}

.jrny-certificates__latest-label {
  color: var(--muted-text);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.jrny-certificates__latest-value {
  color: var(--silver2);
  font-weight: 900;
}

.jrny-certificates__latest-date {
  margin-left: auto;
  color: var(--jrny-tab-muted);
  font-size: 12px;
}

/* ── States: loading / empty / error ───────────────────────── */

.jrny-certificates__state {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 20px;
  border-radius: 16px;
  border: 1px dashed rgba(var(--steel-rgb), 0.35);
  color: var(--jrny-tab-muted);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 1.55;
}

.jrny-certificates__state--error {
  border-color: rgba(255, 72, 99, 0.28);
  background: rgba(30, 10, 18, 0.35);
  color: #ff9aaa;
}

.jrny-certificates__retry {
  appearance: none;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 72, 99, 0.4);
  background: rgba(255, 72, 99, 0.12);
  color: #fecdd3;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.jrny-certificates__retry:hover {
  background: rgba(255, 72, 99, 0.2);
}

.jrny-certificates__empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.08);
}

.jrny-certificates__empty-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--silver2);
}

.jrny-certificates__empty-text {
  margin: 0;
  max-width: 420px;
  color: var(--jrny-tab-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ── Skeleton ──────────────────────────────────────────────── */

.jrny-certificates__skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jrny-certificates__skeleton-row {
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(var(--steel-rgb), 0.18);
  background: linear-gradient(
    90deg,
    rgba(var(--navy-rgb), 0.7) 0%,
    rgba(var(--prog-track-rgb), 0.45) 50%,
    rgba(var(--navy-rgb), 0.7) 100%
  );
  background-size: 200% 100%;
  animation: jrny-certificates-shimmer 1.4s ease-in-out infinite;
}

@keyframes jrny-certificates-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 768px) {
  .jrny-certificates {
    padding: 16px 14px 14px;
  }

  .jrny-certificates__head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .jrny-certificates__title {
    font-size: 20px;
  }

  .jrny-certificates__count {
    align-self: flex-start;
  }

  .jrny-certificates__latest {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .jrny-certificates__latest-date {
    margin-left: 0;
  }
}
/* ── Case Study panel (Journey tab) ─────────────────────────── */

.jrny-case-study {
  border-radius: 24px;
  border: 1px solid rgba(var(--steel-rgb), 0.28);
  background: linear-gradient(165deg, rgba(8, 14, 24, 0.96) 0%, rgba(5, 9, 16, 0.98) 100%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 28px 26px 26px;
  color: #fff;
}

.jrny-case-study__layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: auto auto;
  gap: 22px;
}

.jrny-case-study__left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.jrny-case-study__right {
  min-width: 0;
}

.jrny-case-study__bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Left column ───────────────────────────────────────────── */

.jrny-case-study__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jrny-case-study__kicker {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4aa3f5;
}

.jrny-case-study__title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
}

.jrny-case-study__period {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.jrny-case-study__period-icon {
  font-size: 20px;
  line-height: 1;
}

.jrny-case-study__period-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-text);
  margin-bottom: 4px;
}

.jrny-case-study__period-value {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.jrny-case-study__period-value span {
  color: #4aa3f5;
  margin: 0 6px;
}

.jrny-case-study__hero {
  padding: 20px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(14, 38, 22, 0.7) 0%, rgba(8, 16, 12, 0.8) 100%);
  border: 1px solid rgba(30, 215, 96, 0.18);
  box-shadow: 0 0 40px rgba(30, 215, 96, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.jrny-case-study__hero-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a7f3d0;
  margin-bottom: 8px;
}

.jrny-case-study__hero-value {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #1ed760;
  text-shadow: 0 0 20px rgba(30, 215, 96, 0.18);
  line-height: 1;
}

.jrny-case-study__cycles {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.jrny-case-study__cycles-icon {
  font-size: 26px;
  line-height: 1;
}

.jrny-case-study__cycles-value {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}

.jrny-case-study__cycles-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-text);
}

/* ── Chart ──────────────────────────────────────────────────── */

.jrny-case-study__chart {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(4, 8, 14, 0.55);
  padding: 18px 18px 14px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.jrny-case-study__chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.jrny-case-study__chart-title {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.jrny-case-study__chart-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.jrny-case-study__chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1ed760;
  box-shadow: 0 0 8px rgba(30, 215, 96, 0.6);
}

.jrny-case-study__chart-frame {
  position: relative;
  flex: 1;
  min-height: 240px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(4, 8, 14, 0.65);
  overflow: hidden;
}

.jrny-case-study__chart-grid {
  position: absolute;
  inset: 14px 14px 32px 50px;
  background-image:
    linear-gradient(rgba(95, 115, 150, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 115, 150, 0.08) 1px, transparent 1px);
  background-size: 100% 48px, 72px 100%;
  pointer-events: none;
}

.jrny-case-study__chart-axis-left {
  position: absolute;
  left: 8px;
  top: 14px;
  bottom: 32px;
  width: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: rgb(var(--jrny-dim-rgb));
  font-size: 10px;
  font-weight: 700;
  text-align: right;
  pointer-events: none;
}

.jrny-case-study__chart-axis-bottom {
  position: absolute;
  left: 50px;
  right: 14px;
  bottom: 8px;
  display: flex;
  justify-content: space-between;
  color: rgb(var(--jrny-dim-rgb));
  font-size: 10px;
  font-weight: 700;
  pointer-events: none;
}

.jrny-case-study__chart-svg {
  position: absolute;
  left: 50px;
  right: 14px;
  top: 14px;
  bottom: 32px;
  width: calc(100% - 64px);
  height: calc(100% - 46px);
}

.jrny-case-study__chart-final {
  position: absolute;
  transform: translate(-50%, -130%);
  padding: 5px 10px;
  border-radius: 8px;
  background: #1ed760;
  color: #062011;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(30, 215, 96, 0.35);
  white-space: nowrap;
  pointer-events: none;
}

.jrny-case-study__chart-foot {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #4aa3f5;
  text-align: center;
  letter-spacing: 0.04em;
}

/* ── Bottom metrics ─────────────────────────────────────────── */

.jrny-case-study__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.jrny-case-study__metric {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(8, 14, 24, 0.85) 0%, rgba(5, 9, 16, 0.95) 100%);
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.jrny-case-study__metric-icon {
  font-size: 22px;
  line-height: 1;
}

.jrny-case-study__metric-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-text);
}

.jrny-case-study__metric-value {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
}

.jrny-case-study__metric-value--positive {
  color: #1ed760;
}

.jrny-case-study__metric-value--negative {
  color: #ff596c;
}

.jrny-case-study__metric-value--neutral {
  color: #fbbf24;
}

/* ── Capital flow ───────────────────────────────────────────── */

.jrny-case-study__capital {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(4, 8, 14, 0.55);
}

.jrny-case-study__capital-card {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 14, 24, 0.7);
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.jrny-case-study__capital-card--profit {
  border-color: rgba(30, 215, 96, 0.25);
  background: rgba(14, 38, 22, 0.6);
}

.jrny-case-study__capital-icon {
  font-size: 22px;
  line-height: 1;
}

.jrny-case-study__capital-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-text);
}

.jrny-case-study__capital-value {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
}

.jrny-case-study__capital-card--profit .jrny-case-study__capital-value {
  color: #1ed760;
}

.jrny-case-study__capital-arrow {
  font-size: 20px;
  font-weight: 900;
  color: #4aa3f5;
}

/* ── Trust bar ─────────────────────────────────────────────── */

.jrny-case-study__trust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(4, 8, 14, 0.55);
}

.jrny-case-study__trust-logo {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
}

.jrny-case-study__trust-logo-arrow {
  color: #4aa3f5;
  font-size: 16px;
  font-weight: 900;
}

.jrny-case-study__trust-line {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-text);
}

.jrny-case-study__trust-badges {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-text);
}

.jrny-case-study__trust-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── States ────────────────────────────────────────────────── */

.jrny-case-study__state {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px;
  border-radius: 18px;
  border: 1px dashed rgba(var(--steel-rgb), 0.35);
  color: var(--jrny-tab-muted);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 1.55;
}

.jrny-case-study__state--error {
  border-color: rgba(255, 72, 99, 0.28);
  background: rgba(30, 10, 18, 0.35);
  color: #ff9aaa;
}

.jrny-case-study__retry {
  appearance: none;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 72, 99, 0.4);
  background: rgba(255, 72, 99, 0.12);
  color: #fecdd3;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.jrny-case-study__retry:hover {
  background: rgba(255, 72, 99, 0.2);
}

.jrny-case-study__empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #4aa3f5;
  border: 1px solid rgba(74, 163, 245, 0.28);
  background: rgba(74, 163, 245, 0.08);
}

.jrny-case-study__empty-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.jrny-case-study__empty-text {
  margin: 0;
  max-width: 420px;
  color: var(--jrny-tab-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ── Skeleton ──────────────────────────────────────────────── */

.jrny-case-study__skeleton {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.jrny-case-study__skeleton-hero {
  height: 180px;
  border-radius: 18px;
  border: 1px solid rgba(var(--steel-rgb), 0.18);
  background: linear-gradient(
    90deg,
    rgba(var(--navy-rgb), 0.7) 0%,
    rgba(var(--prog-track-rgb), 0.45) 50%,
    rgba(var(--navy-rgb), 0.7) 100%
  );
  background-size: 200% 100%;
  animation: jrny-case-study-shimmer 1.4s ease-in-out infinite;
}

.jrny-case-study__skeleton-chart {
  height: 260px;
  border-radius: 18px;
  border: 1px solid rgba(var(--steel-rgb), 0.18);
  background: linear-gradient(
    90deg,
    rgba(var(--navy-rgb), 0.7) 0%,
    rgba(var(--prog-track-rgb), 0.45) 50%,
    rgba(var(--navy-rgb), 0.7) 100%
  );
  background-size: 200% 100%;
  animation: jrny-case-study-shimmer 1.4s ease-in-out infinite;
}

.jrny-case-study__skeleton-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.jrny-case-study__skeleton-metric {
  height: 96px;
  border-radius: 18px;
  border: 1px solid rgba(var(--steel-rgb), 0.18);
  background: linear-gradient(
    90deg,
    rgba(var(--navy-rgb), 0.7) 0%,
    rgba(var(--prog-track-rgb), 0.45) 50%,
    rgba(var(--navy-rgb), 0.7) 100%
  );
  background-size: 200% 100%;
  animation: jrny-case-study-shimmer 1.4s ease-in-out infinite;
}

@keyframes jrny-case-study-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ── B2B gold theme ─────────────────────────────────────────── */

.jrny-case-study--b2b {
  border-color: rgba(251, 191, 36, 0.28);
  background: linear-gradient(165deg, rgba(42, 32, 12, 0.55) 0%, rgba(5, 9, 16, 0.98) 100%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 60px rgba(251, 191, 36, 0.05);
}

.jrny-case-study--b2b .jrny-case-study__kicker {
  color: #fbbf24;
}

.jrny-case-study--b2b .jrny-case-study__period-value span {
  color: #fbbf24;
}

.jrny-case-study--b2b .jrny-case-study__hero {
  border-color: rgba(251, 191, 36, 0.22);
  background: linear-gradient(135deg, rgba(42, 32, 12, 0.65) 0%, rgba(8, 16, 12, 0.8) 100%);
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.jrny-case-study--b2b .jrny-case-study__hero-label {
  color: #fde68a;
}

.jrny-case-study--b2b .jrny-case-study__hero-value {
  color: #fbbf24;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.22);
}

.jrny-case-study--b2b .jrny-case-study__cycles-icon {
  color: #fbbf24;
}

.jrny-case-study--b2b .jrny-case-study__chart-title,
.jrny-case-study--b2b .jrny-case-study__chart-foot {
  color: #fbbf24;
}

.jrny-case-study--b2b .jrny-case-study__chart-legend-dot {
  background: #fbbf24;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

.jrny-case-study--b2b .jrny-case-study__chart-frame {
  border-color: rgba(251, 191, 36, 0.12);
}

.jrny-case-study--b2b .jrny-case-study__chart-area {
  fill: url(#caseStudyAreaB2b) !important;
}

.jrny-case-study--b2b .jrny-case-study__chart-line {
  stroke: #fbbf24;
}

.jrny-case-study--b2b .jrny-case-study__chart-svg circle {
  fill: #fbbf24;
}

.jrny-case-study--b2b .jrny-case-study__chart-final {
  background: #fbbf24;
  color: #2a200c;
  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);
}

.jrny-case-study--b2b .jrny-case-study__metric-value--positive,
.jrny-case-study--b2b .jrny-case-study__metric-value--neutral {
  color: #fbbf24;
}

.jrny-case-study--b2b .jrny-case-study__capital-card--profit {
  border-color: rgba(251, 191, 36, 0.25);
  background: rgba(42, 32, 12, 0.55);
}

.jrny-case-study--b2b .jrny-case-study__capital-card--profit .jrny-case-study__capital-value {
  color: #fbbf24;
}

.jrny-case-study--b2b .jrny-case-study__capital-arrow,
.jrny-case-study--b2b .jrny-case-study__trust-logo-arrow {
  color: #fbbf24;
}

.jrny-case-study--b2b .jrny-case-study__empty-icon {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.08);
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .jrny-case-study__layout {
    grid-template-columns: 1fr;
  }

  .jrny-case-study__left {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .jrny-case-study__header {
    grid-column: 1 / -1;
  }

  .jrny-case-study__hero {
    grid-column: 1 / -1;
  }

  .jrny-case-study__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .jrny-case-study {
    padding: 20px 16px 18px;
  }

  .jrny-case-study__left {
    grid-template-columns: 1fr;
  }

  .jrny-case-study__title {
    font-size: 22px;
  }

  .jrny-case-study__hero-value {
    font-size: 26px;
  }

  .jrny-case-study__metrics {
    grid-template-columns: 1fr 1fr;
  }

  .jrny-case-study__capital {
    grid-template-columns: 1fr;
  }

  .jrny-case-study__capital-arrow {
    transform: rotate(90deg);
  }

  .jrny-case-study__trust {
    flex-direction: column;
    align-items: flex-start;
  }

  .jrny-case-study__skeleton-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .jrny-case-study__metrics {
    grid-template-columns: 1fr;
  }

  .jrny-case-study__skeleton-metrics {
    grid-template-columns: 1fr;
  }
}
/* ═══════════════════════════════════════════════════
   JourneyPage — Mobile Responsive
   Breakpoints: ≤768px | ≤480px | ≤375px | ≤320px
   Desktop appearance is untouched (all rules inside
   media queries).
   ═══════════════════════════════════════════════════ */

.jrny-tabs {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin: 0 0 20px;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid rgba(var(--steel-rgb), 0.28);
  background: rgba(var(--navy-rgb), 0.72);
  overflow-x: auto;
  scrollbar-width: none;
}

.jrny-tabs::-webkit-scrollbar {
  display: none;
}

.jrny-tab {
  flex: 1 1 0;
  min-width: 140px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--jrny-tab-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.jrny-tab:hover {
  color: var(--silver);
  background: rgba(var(--prog-track-rgb), 0.35);
}

.jrny-tab--active {
  color: var(--silver2);
  border-color: rgba(var(--wiki-accent-rgb), 0.35);
  background: linear-gradient(180deg, rgba(var(--steel-rgb), 0.55) 0%, rgba(var(--jrny-active-rgb), 0.72) 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.jrny-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ════════════════════════════════════════════════════
   ≤ 768 px  (tablets + all phones)
   ════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Page shell ────────────────────────────────── */
  .jrny-page {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .jrny-shell {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .jrny-header {
    margin-bottom: 16px !important;
    gap: 10px !important;
  }

  .jrny-tabs {
    margin-bottom: 14px !important;
  }

  .jrny-tab {
    min-width: 120px !important;
    font-size: 11px !important;
  }

  .jrny-title {
    font-size: 26px !important;
    margin-bottom: 4px !important;
    line-height: 1.1 !important;
  }

  /* ── Stats grids ── */
  .jrny-stats-bal {
    grid-template-columns: 1fr !important;
  }

  /* ── NET PROFIT banner ── */
  .jrny-hero-card {
    padding: 16px 14px !important;
    margin-top: 14px !important;
  }

  .jrny-hero-value {
    font-size: 32px !important;
    letter-spacing: -0.04em !important;
    margin-top: 6px !important;
  }

  .jrny-hero-meta {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: center !important;
    margin-top: 8px !important;
  }

  /* ── Chart grids: single full-width column ── */
  .jrny-chart-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  /* ══ CHART HEIGHT ══════════════════════════════════
     Increased from 260 → 280px.
     280px sits solidly in the 250–300px target range
     while remaining above-the-fold on a 667px viewport
     (chart + panel header ≈ 340px, leaves 327px below). */
  .jrny-chart-frame {
    height: 280px !important;
  }

  /* ══ AXIS LABELS: font & density ══════════════════
     font-size: 10px → 11px for legibility.
     The 42px label area clips values ≥7 chars at 11px —
     same clipping existed at 10px, but shorter values
     like "$0" and "-$430" become clearly readable.

     Density: hide spans 2 and 4 (of 5), keeping 3:
       LineChart    → max / midpoint / min
       Monthly      → max / 50%     / $0
       DailyReturns → +max / $0     / −max
     visibility:hidden preserves spacing (no jump).    */
  .jrny-axis-left {
    font-size: 11px !important;
  }

  .jrny-axis-left > span:nth-child(2),
  .jrny-axis-left > span:nth-child(4) {
    visibility: hidden;
  }

  .jrny-axis-bottom {
    font-size: 11px !important;
  }

  /* ══ LEGEND: wrap on narrow screens ═══════════════
     MonthlyBarChart legend has inline gap:'16px' with no
     flex-wrap, can overflow at 320px.                 */
  .jrny-legend {
    flex-wrap: wrap !important;
    gap: 10px !important;
    font-size: 12px !important;
  }

  /* ══ CUMULATIVE PROGRESS (LineChart) ══════════════
     Problem: no scroll container → SVG chart area is
     only ~200px wide at 320px (frame 276px − 60px left
     − 16px right), squishing the line horizontally.

     Fix: overflow-x:auto turns the panel into a scroll
     container; min-width:480px on the frame gives the
     SVG 404px of drawing area (480−60−16). Since the
     SVG uses preserveAspectRatio="none" it fills
     whatever width it gets — no logic change needed.

     Scroll distances at tested widths:
       320px → 204px to scroll   (480−276)
       375px → 153px             (480−327)
       390px → 138px             (480−342)
       430px → 98px              (480−382)                */
  .jrny-line-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
  }

  .jrny-line-panel .jrny-chart-frame {
    min-width: 480px;
  }

  /* ══ MONTHLY FLOW (MonthlyBarChart) ═══════════════
     Scroll already in place from previous session.
     Add touch-action: manipulation to enable:
       • Smooth horizontal panning (swipe left/right)
       • Pinch-to-zoom (browser-level viewport zoom)
       • No double-tap-zoom delay (better for charts)
     "manipulation" = pan-x + pan-y + pinch-zoom
      minus double-tap-zoom.

     Bar area at 480px: 480−60−20 = 400px
       4 groups × 80px/group + 3×12px gap = 356px ≤ 400px ✓
       12 groups would need ~1200px → still compressed
       but trend is visible + user can scroll.           */
  .jrny-monthly-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
  }

  .jrny-monthly-panel .jrny-chart-frame {
    min-width: 480px;
  }

  /* ══ DAILY HEDGE RETURNS (DailyReturnsChart) ══════
     Same scroll + touch-action treatment.

     Bar area at 480px: 480−44−16 = 420px
       15 bars (fallback): (420−14×8)/15 ≈ 21px/bar ✓
       45 bars (backend):  minimum 4px/bar (clamped) —
       trend shape visible; scroll reveals full dataset. */
  .jrny-daily-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
  }

  .jrny-daily-panel .jrny-chart-frame {
    min-width: 480px;
  }

  /* ══ PROVIDER BREAKDOWN (Donut) ════════════════════
     No scroll, no touch-action applied.
     Task: "Do NOT enable zoom for donut/pie charts."
     ProviderBreakdown uses styles.panel + styles.providerWrap
     — neither has a jrny-chart-frame class, so NO rule
     above affects it. Default touch-action:auto is kept. */

  /* ── Provider summary table ── */
  .jrny-provider-table {
    overflow-x: auto !important;
  }

  .jrny-table-row {
    min-width: 380px;
    padding: 12px 14px !important;
    gap: 10px !important;
  }
}

/* ════════════════════════════════════════════════════
   ≤ 480 px  (compact phones: Galaxy S8, iPhone SE 2nd)
   ════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .jrny-shell {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .jrny-title {
    font-size: 22px !important;
  }

  .jrny-hero-value {
    font-size: 28px !important;
  }

  /* Chart height: 280 → 260px.
     Still in the 250–300px range. The chart is taller
     than the screen is wide — good aspect ratio for
     reading data on portrait mobile.                   */
  .jrny-chart-frame {
    height: 260px !important;
  }
}

/* ════════════════════════════════════════════════════
   ≤ 375 px  (iPhone 12 mini, SE 3rd gen)
   ════════════════════════════════════════════════════ */
@media (max-width: 375px) {

  .jrny-shell {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .jrny-hero-value {
    font-size: 26px !important;
  }

  /* Chart height unchanged from ≤480px rule (260px).
     Scroll containers handle horizontal compression.   */
}

/* ════════════════════════════════════════════════════
   ≤ 320 px  (Galaxy S5, iPhone SE 1st gen)
   ════════════════════════════════════════════════════ */
@media (max-width: 320px) {

  .jrny-shell {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .jrny-title {
    font-size: 20px !important;
  }

  .jrny-hero-value {
    font-size: 22px !important;
  }

  /* Chart height: 260 → 250px.
     Minimum that keeps 3 horizontal grid lines visible
     and bars readable while leaving room for other page
     content above the fold on a 568px viewport.        */
  .jrny-chart-frame {
    height: 250px !important;
  }
}
/* ═══════════════════════════════════════════════
   PersonalAnalyticsPage — Mobile Responsive
   Breakpoints: 768px | 480px | 375px | 320px
═══════════════════════════════════════════════ */

@media (max-width: 768px) {
  .pa-page {
    padding: 12px 12px 28px !important;
  }
  /* Hide page heading — already shown in navbar */
  .pa-title {
    display: none !important;
  }
  /*
   * The hero section heroContent has display:flex justify-content:space-between
   * with a search input (width:260px) and buttons on the right.
   * On mobile the right-side controls wrap below the title — this is fine
   * because heroContent already has flexWrap:'wrap'.
   * Override the fixed-width search input so it doesn't overflow on narrow screens.
   */
  .pa-page [style*="width: 260"] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .pa-page {
    padding: 10px 10px 24px !important;
  }
}

@media (max-width: 375px) {
  .pa-page {
    padding: 8px 8px 20px !important;
  }
}

@media (max-width: 320px) {
  .pa-page {
    padding: 6px 6px 16px !important;
  }
}
/* ═══════════════════════════════════════════════
   Navigator (UserTradesPage) — Mobile Responsive
   Breakpoints: 768px | 480px | 360px
═══════════════════════════════════════════════ */

.nav-pnl {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.nav-pnl--positive {
  color: #4ade80;
}

.nav-pnl--negative {
  color: #ff6778;
}

.nav-pnl--flat {
  color: #94a3b8;
}

/* B2B shell forces white text — restore PnL colors in Navigator tables */
.app-shell--b2b .app-shell__main .nav-page .nav-pnl--positive {
  color: #22c55e !important;
}

.app-shell--b2b .app-shell__main .nav-page .nav-pnl--negative {
  color: #ef4444 !important;
}

.app-shell--b2b .app-shell__main .nav-page .nav-pnl--flat {
  color: #94a3b8 !important;
}

@media (max-width: 768px) {

  /* ── Page & Header ── */
  .nav-page {
    /* Extra top padding ensures title is never flush against the scroll edge */
    padding: 16px 12px 28px !important;
    overflow: visible !important;
  }

  .nav-header {
    margin-bottom: 10px !important;
    gap: 8px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    overflow: visible !important;
  }

  /* Page name already shown in the mobile navbar — hide the in-page h1 only */
  .nav-title {
    display: none !important;
  }

  /* ── Filter pill row: wrap to multiple rows, no scroll ── */
  .nav-pill-row {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 4px !important;
    width: 100%;
  }

  .nav-pill-row > span {
    font-size: 10px !important;
    padding: 5px 8px !important;
    white-space: nowrap;
  }

  /* ── Section panels: compact, no tall empty space ── */
  .nav-panel {
    padding: 12px 12px 14px !important;
    border-radius: 16px !important;
    min-height: 0 !important;
  }

  /* ── Table scroll wrapper: horizontal scroll ── */
  .nav-tbl-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* ── Table: restore min-width so all columns stay visible ── */
  .nav-tbl {
    min-width: 1060px !important;
    border-radius: 10px !important;
    overflow-x: auto !important;
  }

  /* ── Table header: always visible ── */
  .nav-tbl-head {
    display: grid !important;
  }

  /* ── Rows: keep grid layout — no card conversion ── */
  .nav-tbl-row {
    display: grid !important;
    flex-direction: initial !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-bottom: 1px solid rgba(15, 23, 42, 1) !important;
    background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.08), transparent 55%), rgba(15, 23, 42, 0.96) !important;
    font-size: 13px !important;
  }

  /* ── Show all columns (hidden by old card-mode rules) ── */
  .nav-tbl-row > div:nth-child(5),
  .nav-tbl-row > div:nth-child(7),
  .nav-tbl-row > div:nth-child(8),
  .nav-tbl-row > div:nth-child(9),
  .nav-tbl-row > div:nth-child(10),
  .nav-tbl-row > div:nth-child(11),
  .nav-tbl-row > div:nth-child(12) {
    display: block !important;
  }

  /* ── All cells: clear card-mode flex/gap overrides ── */
  .nav-tbl-row > div {
    display: block !important;
    align-items: unset !important;
    gap: 0 !important;
  }

  /* ── Remove card-mode pseudo-labels ── */
  .nav-tbl-row > div::before {
    content: none !important;
  }

  /*
   * ── History section: match NOW/Open-positions layout ──
   *
   * DOM (no class names on these two divs):
   *   nav-panel
   *     └── div[historyTop]          ← contains nav-filter-bar → selectable via :has()
   *           ├── div[historyTitleRow]
   *           │     ├── div  "HISTORY"  (kicker)
   *           │     └── h2   "Recently closed"
   *           └── form.nav-filter-bar
   *
   * Goal: stack "HISTORY" above "Recently closed" just like
   *       "NOW" sits above "Open positions" in the panel above.
   */

  /* historyTop: stack title block above the filter form */
  .nav-panel > div:has(.nav-filter-bar) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  /* historyTitleRow: stack HISTORY kicker above the heading */
  .nav-panel > div:has(.nav-filter-bar) > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }

  /*
   * ── Filter bar: 2-column grid ──
   *  Row 1 → label(FROM)  | label(TO)
   *  Row 2 → label(ROWS)  | button(Apply)
   *  Row 3 → button(Last 30 days)  [full width]
   */
  .nav-filter-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: initial !important;
    align-items: end !important;
    gap: 6px !important;
    width: 100% !important;
  }

  /* Last child button spans both columns */
  .nav-filter-bar > button:last-child {
    grid-column: 1 / -1 !important;
  }

  /* Labels fill their grid cell */
  .nav-filter-bar > label {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Inputs and select fill full cell width */
  .nav-filter-bar input[type="date"],
  .nav-filter-bar select {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Buttons fill full cell width */
  .nav-filter-bar button {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ─── Small phones 480px ─── */
@media (max-width: 480px) {
  .nav-page {
    padding: 14px 10px 24px !important;
  }

  .nav-panel {
    padding: 10px 10px 12px !important;
  }

  .nav-tbl-row {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
}

/* ─── Extra small 360px ─── */
@media (max-width: 360px) {
  .nav-page {
    padding: 12px 8px 20px !important;
  }
}
.nav-strategy-panel {
  margin-bottom: 14px;
  padding: 18px 18px 14px;
  border-radius: 16px;
  border: 1px solid rgba(71, 85, 105, 0.45);
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.96), rgba(8, 14, 28, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 28px rgba(0, 0, 0, 0.2);
}

.nav-strategy-panel--compact {
  padding: 10px 12px;
  margin-bottom: 12px;
}

.nav-strategy-panel__head {
  margin-bottom: 14px;
  text-align: center;
}

.nav-strategy-panel--compact .nav-strategy-panel__head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 8px;
  text-align: left;
}

.nav-strategy-panel__eyebrow {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
}

.nav-strategy-panel--compact .nav-strategy-panel__eyebrow {
  margin: 0;
  font-size: 9px;
}

.nav-strategy-panel__title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  color: #e2e8f0;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.nav-strategy-panel--compact .nav-strategy-panel__title {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  max-width: none;
  margin: 0;
}

.nav-strategy-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.nav-strategy-panel--compact .nav-strategy-panel__grid {
  gap: 8px;
  align-items: center;
}

.nav-strategy-panel__grid--loading {
  align-items: center;
}

.nav-strategy-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 108px;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  background: radial-gradient(circle at 50% 30%, rgba(59, 130, 246, 0.12), rgba(8, 14, 26, 0.9));
  text-align: center;
}

.nav-strategy-panel--compact .nav-strategy-hub {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-width: 0;
  max-width: 88px;
  padding: 6px 8px;
  border-radius: 10px;
}

.nav-strategy-panel--compact .nav-strategy-hub__ring {
  display: none;
}

.nav-strategy-panel--compact .nav-strategy-hub__sub {
  display: none;
}

.nav-strategy-panel--compact .nav-strategy-hub__title {
  width: 100%;
  font-size: 8px;
}

.nav-strategy-panel--compact .nav-strategy-hub__split {
  flex-direction: row;
  width: 100%;
  margin-top: 0;
  gap: 4px;
}

.nav-strategy-panel--compact .nav-strategy-hub__leg {
  flex: 1;
  padding: 3px 4px;
  font-size: 8px;
  text-align: center;
}

.nav-strategy-hub--skeleton {
  min-height: 120px;
  background: rgba(30, 41, 59, 0.5);
  animation: nav-scenario-bar-shimmer 1.2s ease-in-out infinite;
}

.nav-strategy-panel--compact .nav-strategy-hub--skeleton {
  min-height: 52px;
}

.nav-strategy-hub__ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(96, 165, 250, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.8);
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.2);
}

.nav-strategy-hub__logo {
  font-size: 18px;
  font-weight: 900;
  color: #93c5fd;
}

.nav-strategy-hub__title {
  margin: 0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bfdbfe;
  line-height: 1.3;
}

.nav-strategy-hub__sub {
  margin: 0;
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nav-strategy-hub__split {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-top: 4px;
}

.nav-strategy-hub__leg {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 6px;
  border-radius: 8px;
}

.nav-strategy-hub__leg--break {
  color: #6ee7b7;
  background: rgba(52, 211, 153, 0.1);
}

.nav-strategy-hub__leg--pass {
  color: #fcd34d;
  background: rgba(251, 191, 36, 0.1);
}

.nav-strategy-panel__footnote {
  margin: 12px 0 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #475569;
}

.nav-strategy-panel--compact .nav-scenario-bar--skeleton {
  min-height: 88px;
}

.nav-scenario-bar--skeleton {
  min-height: 160px;
  border-radius: 16px;
  background: linear-gradient(
    90deg,
    rgba(30, 41, 59, 0.5) 0%,
    rgba(51, 65, 85, 0.65) 50%,
    rgba(30, 41, 59, 0.5) 100%
  );
  background-size: 200% 100%;
  animation: nav-scenario-bar-shimmer 1.2s ease-in-out infinite;
}

@keyframes nav-scenario-bar-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@media (max-width: 1100px) {
  .nav-strategy-panel__grid {
    grid-template-columns: 1fr;
  }

  .nav-strategy-hub {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
    padding: 10px 14px;
  }

  .nav-strategy-hub__split {
    flex-direction: row;
    width: auto;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .nav-strategy-panel {
    padding: 14px;
  }

  .nav-strategy-panel__title {
    font-size: 13px;
  }
}
.cycle-econ-bar {
  border: 1px solid rgba(var(--wiki-dim-rgb), 0.45);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--navy-rgb), 0.96) 0%, rgba(var(--navy-rgb), 0.98) 100%);
  padding: 16px 18px;
}

.cycle-econ-bar--summary {
  margin-top: 4px;
}

.cycle-econ-bar--navigator {
  margin-top: 14px;
}

.cycle-econ-bar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.cycle-econ-bar__eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--wiki-muted);
}

.cycle-econ-bar__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #e2b96f;
  border: 1px solid rgba(226, 185, 111, 0.35);
  border-radius: 999px;
  padding: 3px 10px;
}

.cycle-econ-bar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.cycle-econ-bar__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cycle-econ-bar__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--wiki-muted);
}

.cycle-econ-bar__value {
  font-size: 18px;
  font-weight: 800;
  color: var(--silver2);
}

.cycle-econ-bar__value--net {
  font-size: 22px;
}

.cycle-econ-bar__value--positive {
  color: #34d399;
}

.cycle-econ-bar__value--negative {
  color: #f87171;
}

.cycle-econ-bar--positive .cycle-econ-bar__cell--net .cycle-econ-bar__value--net {
  color: #34d399;
}

.cycle-econ-bar--negative .cycle-econ-bar__cell--net .cycle-econ-bar__value--net {
  color: #f87171;
}

.cycle-econ-bar__formula {
  font-size: 11px;
  color: var(--wiki-dim);
}
.nav-trading-stats {
  margin-bottom: 18px;
  padding: 16px 18px 14px;
  border-radius: 16px;
  border: 1px solid rgba(var(--wiki-dim-rgb), 0.45);
  background: linear-gradient(155deg, rgba(var(--navy-rgb), 0.92), rgba(var(--navy-rgb), 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 28px rgba(0, 0, 0, 0.2);
}

.nav-trading-stats--b2b {
  border-color: rgba(212, 175, 55, 0.32);
  background: linear-gradient(155deg, rgba(42, 32, 12, 0.42), rgba(var(--navy-rgb), 0.98));
}

.nav-trading-stats__cycle--b2b {
  border-color: rgba(212, 175, 55, 0.38);
  background: rgba(212, 175, 55, 0.12);
  color: #f7e08b;
}

.nav-trading-stats__grid--b2b {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.nav-trading-stats__b2b-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.nav-trading-stats__group--b2b-a,
.nav-trading-stats__group--b2b-b {
  margin-bottom: 0;
  padding: 12px 12px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--nav-table-border-rgb), 0.65);
  background: rgba(var(--navy-rgb), 0.4);
}

.nav-trading-stats__group--b2b-a {
  border-color: rgba(212, 175, 55, 0.28);
}

.nav-trading-stats__group--b2b-b {
  border-color: rgba(15, 215, 131, 0.22);
}

.nav-trading-stats__group--b2b-a .nav-trading-stats__group-title {
  color: #f7e08b;
}

.nav-trading-stats__group--b2b-b .nav-trading-stats__group-title {
  color: #0fd783;
}

.nav-trading-stats__grid--b2b-broker {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.nav-trading-stats__group--b2b-bonus .nav-trading-stat {
  width: 100%;
}

.nav-trading-stats__b2b-bonus-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.nav-trading-stats__b2b-bonus-row--skeleton {
  margin-top: 0;
}

.nav-trading-stats__b2b-summary-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.nav-trading-stats__b2b-summary-row--skeleton {
  margin-bottom: 12px;
}

.nav-trading-stats__b2b-summary-row .nav-trading-stats__b2b-combined {
  margin-bottom: 0;
}

.nav-trading-stats__b2b-combined {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--nav-table-border-rgb), 0.65);
  background: rgba(var(--navy-rgb), 0.55);
}

.nav-trading-stats__b2b-combined--positive {
  border-color: rgba(34, 197, 94, 0.35);
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.1), rgba(var(--navy-rgb), 0.55));
}

.nav-trading-stats__b2b-combined--negative {
  border-color: rgba(239, 68, 68, 0.35);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), rgba(var(--navy-rgb), 0.55));
}

.nav-trading-stats__b2b-combined-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.nav-trading-stats__b2b-combined-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-text);
}

.nav-trading-stats__b2b-combined-sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--wiki-dim);
}

.nav-trading-stats__b2b-combined-value {
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--wiki-light);
}

.app-shell--b2b .nav-trading-stats--b2b .nav-trading-stats__b2b-combined-value.nav-trading-stat__value--positive {
  color: #22c55e !important;
}

.app-shell--b2b .nav-trading-stats--b2b .nav-trading-stats__b2b-combined-value.nav-trading-stat__value--negative {
  color: #ef4444 !important;
}

.nav-trading-stat--skeleton-combined {
  min-height: 56px;
  margin-bottom: 12px;
}

.nav-trading-stat--skeleton-title {
  min-height: 14px;
  margin-bottom: 10px;
  max-width: 88px;
}

.nav-trading-stat--skeleton-bonus {
  margin-top: 0;
  min-height: 72px;
}

/* B2B shell forces `color: #fff !important` on all children — override for P/L values. */
.app-shell--b2b .nav-trading-stats--b2b .nav-trading-stat--positive .nav-trading-stat__value,
.app-shell--b2b .nav-trading-stats--b2b .nav-trading-stat__value--positive {
  color: #22c55e !important;
}

.app-shell--b2b .nav-trading-stats--b2b .nav-trading-stat--negative .nav-trading-stat__value,
.app-shell--b2b .nav-trading-stats--b2b .nav-trading-stat__value--negative {
  color: #ef4444 !important;
}

.app-shell--b2b .nav-trading-stats--b2b .nav-trading-stat--default .nav-trading-stat__value {
  color: var(--wiki-light) !important;
}

.nav-trading-stats__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.nav-trading-stats__eyebrow {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wiki-muted);
}

.nav-trading-stats__title {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: var(--silver2);
}

.nav-trading-stats__cycle {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--nav-prop-rgb), 0.28);
  background: rgba(var(--us-glow1-rgb), 0.12);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nav-prop-light);
}

.nav-trading-stats__group {
  margin-bottom: 14px;
}

.nav-trading-stats__group:last-child {
  margin-bottom: 0;
}

.nav-trading-stats__group-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-text);
}

.nav-trading-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.nav-trading-stats__inline-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--nav-table-border-rgb), 0.65);
  background: rgba(var(--navy-rgb), 0.55);
}

.nav-trading-stats__inline-row--skeleton {
  min-height: 44px;
}

.nav-trading-stats__inline-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  flex: 1 1 0;
  padding: 0 10px;
  border-left: 1px solid rgba(var(--nav-table-border-rgb), 0.5);
}

.nav-trading-stats__inline-cell:first-child {
  flex: 0 0 auto;
  padding-left: 0;
  border-left: none;
}

.nav-trading-stats__inline-cell--positive .nav-trading-stats__inline-value {
  color: #34d399;
}

.nav-trading-stats__inline-cell--negative .nav-trading-stats__inline-value {
  color: #f87171;
}

.nav-trading-stats__inline-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wiki-muted);
  white-space: nowrap;
}

.nav-trading-stats__inline-cell:first-child .nav-trading-stats__inline-label {
  font-size: 10px;
  color: #fbbf24;
}

.nav-trading-stats__inline-value {
  font-size: 15px;
  font-weight: 900;
  color: var(--wiki-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.nav-trading-stats__inline-sub {
  font-size: 10px;
  color: var(--wiki-muted);
  white-space: nowrap;
}

.nav-trading-stats__inline-row--cycle-net {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--wiki-dim-rgb), 0.35);
}

.nav-trading-stats__inline-cell.nav-trading-stat--skeleton {
  min-height: 32px;
  border-left-color: transparent;
}

.nav-trading-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--nav-table-border-rgb), 0.65);
  background: rgba(var(--navy-rgb), 0.55);
  min-width: 0;
}

.nav-trading-stat--prop {
  border-color: rgba(var(--nav-prop-rgb), 0.22);
}

.nav-trading-stat--hedge {
  border-color: rgba(255, 194, 39, 0.22);
}

.nav-trading-stat--positive .nav-trading-stat__value {
  color: #34d399;
}

.nav-trading-stat--negative .nav-trading-stat__value {
  color: #f87171;
}

.nav-trading-stat__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wiki-muted);
}

.nav-trading-stat__value {
  font-size: 18px;
  font-weight: 900;
  color: var(--wiki-light);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.nav-trading-stat__sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--wiki-dim);
  line-height: 1.35;
}

.nav-trading-stat--skeleton {
  min-height: 72px;
  background: linear-gradient(
    90deg,
    rgba(var(--prog-track-rgb), 0.5) 0%,
    rgba(var(--nav-table-border-rgb), 0.65) 50%,
    rgba(var(--prog-track-rgb), 0.5) 100%
  );
  background-size: 200% 100%;
  animation: nav-trading-stat-shimmer 1.2s ease-in-out infinite;
}

@keyframes nav-trading-stat-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@media (max-width: 640px) {
  .nav-trading-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-trading-stats__b2b-row {
    grid-template-columns: 1fr;
  }

  .nav-trading-stats__grid--b2b-broker {
    grid-template-columns: 1fr;
  }

  .nav-trading-stats__b2b-summary-row {
    grid-template-columns: 1fr;
  }

  .nav-trading-stats__b2b-bonus-row {
    grid-template-columns: 1fr;
  }

  .nav-trading-stats__inline-row {
    flex-wrap: wrap;
  }

  .nav-trading-stats__inline-cell {
    flex: 1 1 100%;
    border-left: none;
    padding: 6px 0 0;
  }

  .nav-trading-stats__inline-cell:first-child {
    flex: 1 1 100%;
    padding-top: 0;
  }
}
/* ═══════════════════════════════════════════════
   ReferralPage — Mobile Responsive
   Breakpoints: 768px | 480px | 375px | 320px
═══════════════════════════════════════════════ */

@media (max-width: 768px) {
  .ref-page {
    padding: 12px 12px 28px !important;
    overflow: visible !important;
  }
  /* Heading: visible on mobile, scaled down */
  .ref-eyebrow {
    font-size: 10px !important;
  }

  .ref-title {
    display: block !important;
    font-size: 20px !important;
  }

  /* Subtitle paragraph sits immediately after the h1 */
  .ref-title + p {
    font-size: 12px !important;
    margin-top: 4px !important;
  }
  /*
   * The linkBox has whiteSpace:'nowrap' and overflow:'hidden' — already
   * handles long referral URLs via text-overflow:ellipsis.
   * No additional change needed there.
   *
   * The hero grid uses minmax(min(100%,280px),1fr) — already responsive.
   * The metric grid uses minmax(190px,1fr) — at 375px-24px = 351px available,
   *   one column fits (351≥190) and it won't try two (351<380). ✓
   * The content grid uses minmax(min(100%,320px),1fr) — also responsive. ✓
   */
}

@media (max-width: 480px) {
  .ref-page {
    padding: 10px 10px 24px !important;
  }
}

@media (max-width: 375px) {
  .ref-page {
    padding: 8px 8px 20px !important;
  }
}

@media (max-width: 320px) {
  .ref-page {
    padding: 6px 6px 16px !important;
  }
}
.subscription-tour-page {
  min-height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 32px 28px 44px;
  box-sizing: border-box;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 4%, rgba(var(--cyan-rgb), 0.14), transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(var(--cyan-rgb), 0.1), transparent 25%),
    linear-gradient(180deg, rgba(var(--navy-rgb), 0.98) 0%, rgba(var(--navy-rgb), 1) 100%);
}

.subscription-tour-page__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--cyan-rgb), 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cyan-rgb), 0.04) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(180deg, black 0%, transparent 82%);
}

.subscription-tour-shell {
  width: 100%;
  margin: 0;
  position: relative;
  z-index: 1;
}

.subscription-tour-hero {
  min-height: 190px;
  border-radius: 28px;
  border: 1px solid rgba(var(--cyan-rgb), 0.18);
  background:
    radial-gradient(circle at 80% 18%, rgba(var(--cyan-rgb), 0.15), transparent 30%),
    linear-gradient(135deg, rgba(var(--navy-rgb), 0.96) 0%, rgba(var(--navy-rgb), 0.98) 62%, rgba(var(--navy-rgb), 1) 100%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  padding: 28px 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  box-sizing: border-box;
}

.subscription-tour-kicker,
.tour-section-head > span,
.tour-control-label {
  margin: 0;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tour-control-label {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.tour-control-label small {
  color: rgba(var(--text-rgb), 0.56);
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
}

.subscription-tour-hero h1 {
  margin: 10px 0 12px;
  color: var(--silver2);
  font-size: 42px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0;
}

.subscription-tour-hero p:last-child {
  margin: 0;
  color: rgba(var(--text-rgb), 0.68);
  font-size: 15px;
  line-height: 1.7;
}

.tour-back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid rgba(var(--cyan-rgb), 0.24);
  background: rgba(var(--cyan-rgb), 0.06);
  color: var(--silver);
  font-weight: 900;
  letter-spacing: 0;
}

.tour-back-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(6, 18, 47, 0.32);
}

.subscription-tour-tabs {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding: 6px;
  border-radius: 18px;
  border: 1px solid rgba(var(--cyan-rgb), 0.14);
  background: rgba(var(--navy-rgb), 0.8);
  backdrop-filter: blur(14px);
}

.subscription-tour-tab {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  cursor: pointer;
}

.subscription-tour-tab:hover {
  color: var(--silver2);
  background: rgba(var(--cyan-rgb), 0.07);
}

.subscription-tour-tab--active {
  color: var(--silver2);
  border-color: rgba(var(--cyan-rgb), 0.32);
  background: linear-gradient(135deg, rgba(var(--cyan-rgb), 0.24) 0%, rgba(var(--steel-rgb), 0.26) 100%);
  box-shadow: 0 14px 30px rgba(var(--cyan-rgb), 0.12);
}

.tour-tab-panel {
  margin-top: 20px;
  display: grid;
  gap: 18px;
}

.tour-section,
.tour-chart-panel {
  border-radius: 24px;
  border: 1px solid rgba(var(--cyan-rgb), 0.15);
  background: linear-gradient(180deg, rgba(var(--navy-rgb), 0.88) 0%, rgba(var(--navy-rgb), 0.98) 100%);
  backdrop-filter: blur(14px);
  padding: 20px;
  box-sizing: border-box;
}

.tour-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.tour-pack-grid,
.tour-roi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.tour-pack-choice,
.tour-roi-card,
.tour-traditional-card,
.tour-metric-card {
  border-radius: 18px;
  border: 1px solid rgba(var(--cyan-rgb), 0.14);
  background: rgba(var(--navy-rgb), 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
}

.tour-pack-choice {
  min-height: 128px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}

.tour-pack-choice:hover,
.tour-roi-card:hover,
.tour-traditional-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--cyan-rgb), 0.38);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.tour-pack-choice--active,
.tour-roi-card--active,
.tour-roi-card--best,
.tour-traditional-card--active,
.tour-traditional-card--featured {
  border-color: rgba(var(--cyan-rgb), 0.65);
  background:
    radial-gradient(circle at 22% 18%, rgba(var(--cyan-rgb), 0.13), transparent 36%),
    rgba(var(--navy-rgb), 0.9);
  box-shadow: 0 18px 40px rgba(var(--cyan-rgb), 0.16);
}

.tour-pack-choice__roi {
  width: fit-content;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(var(--cyan-rgb), 0.13);
  color: var(--cyan2);
  font-size: 11px;
  font-weight: 900;
}

.tour-pack-choice strong,
.tour-roi-card span,
.tour-traditional-card span,
.tour-metric-card span {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.tour-pack-choice > span {
  color: var(--silver2);
  font-size: 21px;
  font-weight: 900;
}

.tour-pack-choice small,
.tour-roi-card small,
.tour-traditional-card small,
.tour-metric-card small {
  color: rgba(var(--text-rgb), 0.58);
  font-size: 11px;
  line-height: 1.5;
}

.tour-controls-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 180px minmax(260px, 0.7fr);
  gap: 18px;
  align-items: end;
}

.tour-control-group {
  min-width: 0;
}

.tour-segmented {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tour-segmented__btn {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(var(--cyan-rgb), 0.16);
  background: rgba(var(--navy-rgb), 0.72);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  cursor: pointer;
}

.tour-segmented__btn:hover {
  border-color: rgba(var(--cyan-rgb), 0.34);
  background: rgba(var(--cyan-rgb), 0.08);
}

.tour-segmented__btn--active {
  color: var(--silver2);
  background: linear-gradient(135deg, rgba(var(--cyan-rgb), 0.98) 0%, rgba(var(--steel-rgb), 0.98) 100%);
  border-color: rgba(var(--cyan2-rgb), 0.32);
}

.tour-mini-input,
.tour-investment-controls label {
  display: grid;
  gap: 8px;
}

.tour-mini-input span,
.tour-investment-controls span,
.tour-slider-field span {
  color: rgba(var(--text-rgb), 0.64);
  font-size: 12px;
  font-weight: 700;
}

.tour-mini-input input,
.tour-investment-controls input,
.tour-investment-controls select {
  min-height: 42px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(var(--cyan-rgb), 0.16);
  background: rgba(var(--navy-rgb), 0.82);
  color: var(--silver2);
  padding: 0 14px;
  box-sizing: border-box;
}

.tour-investment-controls select {
  cursor: pointer;
  color-scheme: dark;
}

.tour-investment-controls select option {
  background: var(--navy2);
  color: var(--silver2);
}

.tour-investment-controls select option:checked {
  background: var(--cyan);
  color: var(--silver2);
}

.tour-slider-field {
  display: grid;
  grid-template-columns: 1fr 38px;
  gap: 8px 12px;
  align-items: center;
}

.tour-slider-field span {
  grid-column: 1 / -1;
}

.tour-static-slider {
  height: 3px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
  position: relative;
}

.tour-static-slider i {
  position: absolute;
  right: 0;
  top: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--text);
  background: var(--cyan);
  transform: translateY(-50%);
}

.tour-slider-field strong {
  color: var(--cyan2);
  font-size: 12px;
  text-align: right;
}

.tour-range-input {
  width: 100%;
  height: 4px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(var(--cyan-rgb), 0.22);
  accent-color: var(--cyan);
  cursor: pointer;
}

.tour-range-input:focus {
  box-shadow: 0 0 0 4px rgba(var(--cyan-rgb), 0.12);
}

.tour-results-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.tour-metric-card {
  min-height: 94px;
  padding: 16px;
  display: grid;
  align-content: center;
  gap: 6px;
}

.tour-metric-card strong {
  color: var(--silver2);
  font-size: 23px;
  line-height: 1.1;
}

.tour-metric-card--mint strong {
  color: #55d6ad;
}

.tour-metric-card--amber strong {
  color: #fbbf24;
}

.tour-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(var(--text-rgb), 0.68);
  font-size: 12px;
  font-weight: 700;
}

.tour-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tour-chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.tour-chart-frame {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid rgba(var(--cyan-rgb), 0.12);
  background: rgba(var(--navy-rgb), 0.52);
}

.tour-chart-svg {
  display: block;
  min-width: 680px;
  width: 100%;
  height: auto;
}

.tour-chart-grid {
  stroke: rgba(var(--cyan-rgb), 0.14);
  stroke-width: 1;
}

.tour-chart-zero {
  stroke: rgba(var(--text-rgb), 0.3);
  stroke-width: 1.3;
}

.tour-chart-axis,
.tour-chart-caption {
  fill: rgba(var(--text-rgb), 0.62);
  font-size: 11px;
  font-weight: 700;
}

.tour-chart-axis--x,
.tour-chart-caption {
  text-anchor: middle;
}

.tour-chart-axis--tilted {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-12deg);
  font-size: 9px;
}

.tour-chart-cost {
  stroke: #f59e0b;
  stroke-width: 3;
  stroke-dasharray: 7 6;
  opacity: 0.88;
}

.tour-chart-gross {
  fill: none;
  stroke: var(--cyan2);
  stroke-width: 3;
  stroke-dasharray: 5 6;
}

.tour-chart-net {
  fill: none;
  stroke: #2dd4bf;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tour-chart-selected-line {
  stroke: #fde68a;
  stroke-width: 2;
  stroke-dasharray: 5 5;
  opacity: 0.85;
}

.tour-chart-selected-dot {
  fill: var(--gold);
  stroke: rgba(var(--navy-rgb), 0.96);
  stroke-width: 2;
}

.tour-chart-selected-bg {
  fill: rgba(var(--cyan-rgb), 0.08);
  stroke: rgba(var(--cyan-rgb), 0.22);
  stroke-width: 1;
}

.tour-bar--gross {
  fill: var(--cyan2);
}

.tour-bar--cost {
  fill: #fb8f6f;
}

.tour-bar--net {
  fill: #55d6ad;
}

.tour-incidence--soft {
  fill: #bfdbfe;
}

.tour-incidence--mid {
  fill: #93c5fd;
}

.tour-incidence--strong {
  fill: #60a5fa;
}

.tour-incidence--deep {
  fill: #2563eb;
}

.tour-incidence--selected {
  stroke: var(--gold);
  stroke-width: 3;
}

.tour-table-wrap {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid rgba(var(--cyan-rgb), 0.14);
}

.tour-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.tour-table th,
.tour-table td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(var(--cyan-rgb), 0.1);
  color: var(--text);
  font-size: 12px;
}

.tour-table th {
  color: rgba(var(--text-rgb), 0.56);
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 900;
}

.tour-table__selected {
  background: rgba(var(--cyan-rgb), 0.11);
}

.tour-table-pill {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(var(--cyan-rgb), 0.12);
  color: var(--cyan2);
  font-size: 10px;
  font-weight: 900;
}

.tour-callout {
  margin-top: 16px;
  border-radius: 18px;
  border: 1px solid rgba(var(--cyan-rgb), 0.16);
  background: rgba(var(--cyan-rgb), 0.05);
  padding: 16px 18px;
  color: rgba(var(--text-rgb), 0.78);
  font-size: 13px;
  line-height: 1.7;
}

.tour-callout strong {
  color: var(--silver2);
}

.tour-comparison-footer,
.tour-reference-footer {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
}

.tour-comparison-footer {
  margin-top: 0;
}

.tour-reference-footer {
  margin-top: 16px;
}

.tour-comparison-footer__icon,
.tour-reference-footer__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-top: 2px;
  color: var(--cyan2);
}

.tour-comparison-footer__icon svg,
.tour-reference-footer__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tour-reference-footer__icon--bolt {
  color: #fb7a3a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  line-height: 1;
}

.tour-comparison-footer p,
.tour-reference-footer p {
  margin: 0;
  color: rgba(var(--text-rgb), 0.86);
  font-size: 15px;
  line-height: 1.75;
}

.tour-traditional-footer {
  margin-top: 0;
}

.tour-footnote {
  margin: -6px 0 0;
  color: rgba(var(--text-rgb), 0.58);
  font-size: 13px;
  line-height: 1.65;
}

.tour-roi-card {
  min-height: 154px;
  padding: 18px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 8px;
  cursor: pointer;
}

.tour-roi-card strong {
  color: var(--cyan);
  font-size: 31px;
  line-height: 1;
}

.tour-roi-card em,
.tour-traditional-card em {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--cyan-rgb), 0.12);
  color: var(--cyan2);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.tour-copy-band {
  color: rgba(var(--text-rgb), 0.72);
  line-height: 1.7;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.tour-copy-band strong {
  color: var(--silver2);
}

.tour-investment-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 16px;
}

.tour-traditional-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.tour-traditional-card {
  min-height: 138px;
  padding: 16px;
  display: grid;
  align-content: center;
  gap: 7px;
  text-align: left;
  cursor: pointer;
}

.tour-traditional-card i {
  font-style: normal;
  font-size: 18px;
}

.tour-traditional-card strong {
  color: var(--silver2);
  font-size: 25px;
  line-height: 1;
}

@media (max-width: 1100px) {
  .tour-pack-grid,
  .tour-roi-grid,
  .tour-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tour-controls-row,
  .tour-investment-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .subscription-tour-page {
    padding: 14px 12px 36px;
    overflow: visible;
  }

  .subscription-tour-hero {
    min-height: 0;
    padding: 20px;
    border-radius: 22px;
    align-items: stretch;
    flex-direction: column;
  }

  .subscription-tour-hero h1 {
    font-size: 28px;
    line-height: 1.2;
  }

  .subscription-tour-tabs {
    align-items: stretch;
  }

  .subscription-tour-tab {
    min-width: max-content;
  }

  .tour-section,
  .tour-chart-panel {
    border-radius: 18px;
    padding: 16px;
  }

  .tour-traditional-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .tour-pack-grid,
  .tour-roi-grid,
  .tour-results-grid,
  .tour-traditional-grid {
    grid-template-columns: 1fr;
  }

  .subscription-tour-hero h1 {
    font-size: 24px;
  }

  .subscription-tour-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
  }

  .tour-chart-svg {
    min-width: 620px;
  }

  .tour-callout {
    padding: 14px;
  }
}
.ta-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ta-section--loading {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8ea1c5;
  font-size: 14px;
  font-weight: 700;
}

.ta-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ta-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 88px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(61, 85, 139, 0.26);
  background: rgba(14, 21, 37, 0.72);
}

.ta-stat-tile__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #7890ba;
}

.ta-stat-tile__value {
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 850;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.ta-stat-tile__sub {
  margin-top: auto;
  font-size: 11px;
  color: #7e92b7;
}

.ta-stat-tile--emerald .ta-stat-tile__value { color: #34d399; }
.ta-stat-tile--cyan .ta-stat-tile__value { color: #52d6ff; }
.ta-stat-tile--amber .ta-stat-tile__value { color: #f3c74d; }
.ta-stat-tile--rose .ta-stat-tile__value { color: #f87171; }

.ta-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ta-panel {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(61, 85, 139, 0.22);
  background: rgba(14, 21, 37, 0.72);
}

.ta-panel__title {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7890ba;
}

.ta-panel__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ta-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(61, 85, 139, 0.18);
}

.ta-stat-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.ta-stat-row__label {
  color: #8ea1c5;
  font-size: 13px;
  font-weight: 600;
}

.ta-stat-row__value {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ta-stat-row__value--positive { color: #34d399; }
.ta-stat-row__value--negative { color: #f87171; }
.ta-stat-row__value--gold { color: #e2b96f; }
.ta-stat-row__value--cyan { color: #52d6ff; }
.ta-stat-row__value--violet { color: #a78bfa; }
.ta-stat-row__value--amber { color: #f3c74d; }

.ta-provider-block {
  border-radius: 12px;
  border: 1px solid rgba(61, 85, 139, 0.22);
  background: rgba(14, 21, 37, 0.72);
  overflow: hidden;
}

.ta-provider-block__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(61, 85, 139, 0.18);
}

.ta-provider-block__eyebrow {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7890ba;
}

.ta-provider-block__title {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
}

.ta-provider-block__badge {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(226, 185, 111, 0.28);
  background: rgba(226, 185, 111, 0.1);
  color: #e2b96f;
  font-size: 12px;
  font-weight: 800;
}

.ta-provider-block__empty {
  margin: 0;
  padding: 32px 18px;
  text-align: center;
  color: #7e92b7;
  font-size: 13px;
}

.ta-provider-table-wrap {
  overflow-x: auto;
}

.ta-provider-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.ta-provider-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7890ba;
  background: rgba(10, 15, 28, 0.65);
}

.ta-provider-table td {
  padding: 14px 16px;
  border-top: 1px solid rgba(61, 85, 139, 0.18);
  color: #8ea1c5;
  font-size: 13px;
  font-weight: 700;
}

.ta-provider-table__name {
  color: #fff !important;
  font-weight: 800 !important;
}

.ta-provider-table__pill {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

.ta-provider-table__pill--done {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
}

.ta-provider-table__pill--active {
  background: rgba(82, 214, 255, 0.1);
  color: #52d6ff;
}

.ta-provider-table__pnl--up {
  color: #34d399 !important;
  font-weight: 800 !important;
}

.ta-provider-table__pnl--down {
  color: #f87171 !important;
  font-weight: 800 !important;
}

@media (max-width: 1024px) {
  .ta-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .ta-kpis,
  .ta-panel-grid {
    grid-template-columns: 1fr;
  }
}
/* ═══════════════════════════════════════════════════
   SummaryPage — Hedgio trading overview
   Bento KPIs · command deck · unified metrics · providers
   Breakpoints: ≤1024 | ≤768 | ≤480 | ≤375 | ≤320
   ═══════════════════════════════════════════════════ */

.smry-page {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.smry-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(var(--wiki-accent-rgb),0.07) 0%, transparent 32%),
    radial-gradient(ellipse 72% 48% at 8% 0%, rgba(52, 211, 153, 0.09), transparent 58%),
    radial-gradient(ellipse 58% 42% at 96% 8%, rgba(226, 185, 111, 0.09), transparent 52%),
    repeating-linear-gradient(
      90deg,
      rgba(var(--wiki-dim-rgb),0.04) 0,
      rgba(var(--wiki-dim-rgb),0.04) 1px,
      transparent 1px,
      transparent 48px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(var(--wiki-dim-rgb),0.03) 0,
      rgba(var(--wiki-dim-rgb),0.03) 1px,
      transparent 1px,
      transparent 48px
    );
  pointer-events: none;
}

.smry-shell {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ── Hero header ─────────────────────────────────── */
.smry-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 18px;
  padding: 24px 26px;
  border: 1px solid rgba(var(--wiki-dim-rgb),0.34);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(var(--navy-rgb),0.9), rgba(var(--navy-rgb),0.97));
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  position: relative;
}

.smry-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--wiki-accent), #34d399, #e2b96f);
  opacity: 0.85;
}

.smry-hero__title {
  font-size: clamp(26px, 4vw, 34px) !important;
  margin-bottom: 8px !important;
}

.smry-hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.smry-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(var(--wiki-accent-rgb),0.35);
  border-radius: 10px;
  background: rgba(var(--wiki-accent-rgb),0.1);
  color: var(--wiki-accent);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.smry-refresh-btn:hover:not(:disabled) {
  background: rgba(var(--wiki-accent-rgb),0.18);
  border-color: rgba(var(--wiki-accent-rgb),0.55);
}

.smry-refresh-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.smry-refresh-btn__icon {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
}

.smry-refresh-btn__icon--spin {
  animation: smry-refresh-spin 0.85s linear infinite;
}

@keyframes smry-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Loading & error ─────────────────────────────── */
.smry-loading-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 52px 20px;
  color: var(--muted-text);
  font-size: 14px;
  border: 1px dashed rgba(var(--wiki-dim-rgb),0.45);
  border-radius: 14px;
  background: rgba(var(--navy-rgb),0.55);
}

.smry-loading-banner__pulse {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(var(--wiki-accent-rgb),0.25);
  border-top-color: var(--wiki-accent);
  animation: smry-refresh-spin 0.9s linear infinite;
}

.smry-error {
  background: rgba(252, 129, 129, 0.08);
  border: 1px solid rgba(252, 129, 129, 0.25);
  border-radius: 12px;
  padding: 16px 18px;
  color: #fda4af;
  font-size: 13px;
}

/* ── Performance deck ────────────────────────────── */
.smry-deck {
  padding: 22px 24px 20px;
  border: 1px solid rgba(var(--wiki-dim-rgb),0.4);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(var(--navy-rgb),0.92), rgba(var(--navy-rgb),0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 34px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.smry-deck::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--wiki-accent-rgb),0.85), rgba(52, 211, 153, 0.35), transparent);
}

.smry-deck__head {
  margin-bottom: 16px;
}

.smry-deck__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wiki-accent);
  margin: 0 0 6px;
}

.smry-deck__title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: var(--silver2);
  letter-spacing: -0.02em;
}

.smry-deck__sub {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--wiki-muted);
  max-width: 52ch;
}

.smry-deck__tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0 0 18px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(var(--wiki-dim-rgb),0.35);
  overflow-x: auto;
  scrollbar-width: none;
}

.smry-deck__tabs::-webkit-scrollbar {
  display: none;
}

.smry-deck__tab {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--wiki-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.smry-deck__tab:hover {
  color: var(--muted-text);
}

.smry-deck__tab--active {
  color: var(--smry-tab-active);
  border-bottom-color: var(--wiki-accent);
}

.smry-deck__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.smry-analytics-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.smry-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.smry-panel {
  padding: 16px 16px 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--wiki-dim-rgb),0.35);
  background: rgba(var(--navy-rgb),0.55);
}

.smry-panel__title {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wiki-muted);
}

.smry-panel__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.smry-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(var(--wiki-dim-rgb),0.22);
}

.smry-stat-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.smry-stat-row__label {
  color: var(--muted-text);
  font-size: 13px;
  font-weight: 600;
}

.smry-stat-row__value {
  color: var(--silver2);
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.smry-stat-row__value--positive { color: #34d399; }
.smry-stat-row__value--negative { color: #f87171; }
.smry-stat-row__value--gold { color: #e2b96f; }
.smry-stat-row__value--cyan { color: var(--wiki-accent); }
.smry-stat-row__value--violet { color: var(--accent-purple); }
.smry-stat-row__value--amber { color: #f3c74d; }

.smry-provider-block {
  border-radius: 12px;
  border: 1px solid rgba(var(--wiki-dim-rgb),0.35);
  background: rgba(var(--navy-rgb),0.55);
  overflow: hidden;
}

.smry-provider-block__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(var(--wiki-dim-rgb),0.28);
}

.smry-provider-block__eyebrow {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wiki-muted);
}

.smry-provider-block__title {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: var(--silver2);
}

.smry-provider-block__badge {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(226, 185, 111, 0.28);
  background: rgba(226, 185, 111, 0.1);
  color: #e2b96f;
  font-size: 12px;
  font-weight: 800;
}

.smry-provider-block__empty {
  margin: 0;
  padding: 32px 18px;
  text-align: center;
  color: var(--wiki-muted);
  font-size: 13px;
}

.smry-provider-table-wrap {
  overflow-x: auto;
}

.smry-provider-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.smry-provider-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wiki-muted);
  background: rgba(var(--navy-rgb),0.65);
  white-space: nowrap;
}

.smry-provider-table td {
  padding: 14px 16px;
  border-top: 1px solid rgba(var(--wiki-dim-rgb),0.22);
  color: var(--muted-text);
  font-size: 13px;
  font-weight: 700;
}

.smry-provider-table__name {
  color: var(--silver2) !important;
  font-weight: 800 !important;
}

.smry-provider-table__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

.smry-provider-table__pill--done {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
}

.smry-provider-table__pill--active {
  background: rgba(var(--wiki-accent-rgb),0.1);
  color: var(--wiki-accent);
}

.smry-provider-table__pnl--up {
  color: #34d399 !important;
  font-weight: 800 !important;
}

.smry-provider-table__pnl--down {
  color: #f87171 !important;
  font-weight: 800 !important;
}

.smry-trading-stats {
  margin-bottom: 4px;
}

.smry-perf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
  margin-bottom: 14px;
  align-items: stretch;
}

.smry-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 88px;
  height: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--wiki-dim-rgb),0.35);
  background: rgba(var(--navy-rgb),0.55);
  box-sizing: border-box;
}

.smry-stat-tile__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wiki-muted);
}

.smry-stat-tile__value {
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 850;
  line-height: 1.2;
  color: var(--silver2);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.smry-stat-tile__sub {
  margin-top: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--wiki-dim);
}

.smry-stat-tile--emerald .smry-stat-tile__value { color: #34d399; }
.smry-stat-tile--gold .smry-stat-tile__value { color: #e2b96f; }
.smry-stat-tile--cyan .smry-stat-tile__value { color: var(--wiki-accent); }
.smry-stat-tile--violet .smry-stat-tile__value { color: var(--accent-purple); }
.smry-stat-tile--amber .smry-stat-tile__value { color: #f3c74d; }
.smry-stat-tile--rose .smry-stat-tile__value { color: #f87171; }

.smry-progress-embed {
  margin-top: 4px;
}

.smry-progress-embed .dash-progress-panel--summary {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* ── ≤ 1024 px ──────────────────────────────────── */
@media (max-width: 1024px) {
  .smry-perf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smry-analytics-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── ≤ 768 px ───────────────────────────────────── */
@media (max-width: 768px) {
  .smry-page {
    padding: 12px 12px 28px !important;
  }

  .smry-shell {
    gap: 16px;
  }

  .smry-hero {
    padding: 16px;
  }

  .smry-hero__aside {
    align-items: stretch;
    width: 100%;
  }

  .smry-refresh-btn {
    justify-content: center;
    width: 100%;
  }

  .smry-deck {
    padding-left: 14px;
    padding-right: 14px;
  }

  .smry-perf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smry-analytics-kpis,
  .smry-panel-grid {
    grid-template-columns: 1fr;
  }

  .smry-stat-tile {
    min-height: 80px;
  }

  .smry-deck__title {
    font-size: 18px;
  }
}

/* ── ≤ 480 px ───────────────────────────────────── */
@media (max-width: 480px) {
  .smry-page {
    padding: 10px 10px 24px !important;
  }

  .smry-perf-grid {
    gap: 8px;
  }
}

/* ── ≤ 375 px ───────────────────────────────────── */
@media (max-width: 375px) {
  .smry-page {
    padding: 8px 8px 20px !important;
  }

}

/* ── ≤ 320 px ───────────────────────────────────── */
@media (max-width: 320px) {
  .smry-page {
    padding: 6px 6px 16px !important;
  }

  .smry-hero__title {
    font-size: 22px !important;
  }
}
.achv-page {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  padding: 28px 28px 32px;
  color: #f8fafc;
  overflow-x: hidden;
}

.achv-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(82, 214, 255, 0.08) 0%, transparent 28%),
    radial-gradient(ellipse 80% 42% at 12% 0%, rgba(52, 211, 153, 0.08), transparent 62%),
    radial-gradient(ellipse 62% 42% at 92% 12%, rgba(226, 185, 111, 0.08), transparent 56%);
  pointer-events: none;
}

.achv-page .dash-progress-panel--full {
  min-height: calc(100vh - 120px);
}

@media (max-width: 768px) {
  .achv-page {
    padding: 12px 12px 24px;
  }
}
/* ═══════════════════════════════════════════════════
   LeaderboardPage — Gold Theme (B2B Style)
   ═══════════════════════════════════════════════════ */

.ldr-page {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.ldr-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(var(--wiki-accent-rgb),0.07) 0%, transparent 32%),
    radial-gradient(ellipse 72% 48% at 8% 0%, rgba(52, 211, 153, 0.09), transparent 58%),
    radial-gradient(ellipse 58% 42% at 96% 8%, rgba(226, 185, 111, 0.09), transparent 52%),
    repeating-linear-gradient(
      90deg,
      rgba(var(--wiki-dim-rgb),0.04) 0,
      rgba(var(--wiki-dim-rgb),0.04) 1px,
      transparent 1px,
      transparent 48px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(var(--wiki-dim-rgb),0.03) 0,
      rgba(var(--wiki-dim-rgb),0.03) 1px,
      transparent 1px,
      transparent 48px
    );
  pointer-events: none;
}

.ldr-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 18px;
  padding: 24px 26px;
  border: 1px solid rgba(var(--wiki-dim-rgb),0.34);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(var(--navy-rgb),0.9), rgba(var(--navy-rgb),0.97));
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  position: relative;
}

.ldr-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--wiki-accent), #34d399, #e2b96f);
  opacity: 0.85;
}

.ldr-hero__title {
  font-size: clamp(26px, 4vw, 34px) !important;
  margin-bottom: 8px !important;
  color: var(--silver2);
  font-weight: 900;
}

.ldr-hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wiki-accent);
  margin: 0 0 6px;
}

.ldr-hero__sub {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--wiki-muted);
  max-width: 52ch;
}

.ldr-table-wrap {
  border: 1px solid rgba(var(--wiki-dim-rgb),0.4);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(var(--navy-rgb),0.92), rgba(var(--navy-rgb),0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 34px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.ldr-table-wrap::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--wiki-accent-rgb),0.85), rgba(52, 211, 153, 0.35), transparent);
}

.ldr-section-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--silver2);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.ldr-trader-card {
  background: linear-gradient(135deg, rgba(19, 24, 43, 0.96) 0%, rgba(14, 18, 32, 0.98) 100%);
  border: 1px solid rgba(var(--wiki-dim-rgb),0.35);
  border-radius: 20px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

.ldr-trader-card--gold {
  border: 2px solid #e2b96f;
  box-shadow: 0 16px 34px rgba(226, 185, 111, 0.15);
}

.ldr-trader-card--silver {
  border: 2px solid #c0c0c0;
  box-shadow: 0 16px 34px rgba(192, 192, 192, 0.15);
}

.ldr-trader-card--bronze {
  border: 2px solid #cd7f32;
  box-shadow: 0 16px 34px rgba(205, 127, 50, 0.15);
}

.ldr-reward-card {
  padding: 16px 18px;
  border: 1px solid rgba(var(--wiki-dim-rgb),0.35);
  border-radius: 12px;
  background: rgba(var(--navy-rgb),0.55);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════════════
   Mobile Responsive
   Breakpoints: ≤768px | ≤480px | ≤375px | ≤320px
   ═══════════════════════════════════════════════════ */

/* ── ≤ 768 px ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* Page: override inline padding: 32px 28px */
  .ldr-page {
    padding: 12px 12px 28px !important;
  }

  /* ── Title block ──────────────────────────────────
     Was display:none — restore and scale down fonts.
     Inline marginBottom:36 reduced to 16px on mobile. */
  .ldr-title {
    display: block !important;
    margin-bottom: 16px !important;
  }

  /* "COMPETITION" eyebrow */
  .ldr-title > div:first-child {
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }

  /* "Leaderboard" heading */
  .ldr-title h1 {
    font-size: 20px !important;
    margin-bottom: 4px !important;
  }

  /* Subtitle paragraph */
  .ldr-title p {
    font-size: 12px !important;
  }

  /* ── Stats bar: explicit 2×2 grid ────────────────
     flex:'1 1 140px' with 4 items + 12px gap at 359px
     would auto-wrap, but we pin to exactly 2 columns
     so behaviour is guaranteed at all mobile widths.   */
  .ldr-stats {
    gap: 8px !important;
    margin-bottom: 20px !important;
  }

  /* calc(50% - 4px): half container minus half of 8px gap */
  .ldr-stats > div {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
  }

  /* Value text inside each stat card (last child div) */
  .ldr-stats > div > div:last-child {
    font-size: 18px !important;
  }

  /* ── Sort tabs: wrap to 2 rows, fill-width buttons ─
     Previous CSS set nowrap + overflow-x:auto (scroll).
     Task requires wrap; 3 buttons → 2 on row 1 + 1 full
     width on row 2.                                    */
  .ldr-tabs {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 6px !important;
    margin-bottom: 20px !important;
    scrollbar-width: none;
  }

  .ldr-tabs::-webkit-scrollbar {
    display: none;
  }

  /* calc(50% - 3px): half container minus half of 6px gap */
  .ldr-tabs button {
    flex: 1 1 calc(50% - 3px) !important;
    flex-shrink: 1 !important;
    white-space: normal !important;
    min-height: 44px !important;
    text-align: center !important;
  }

  /* ── Rankings table: tighter header padding ── */
  .ldr-table-wrap > div:first-child {
    padding: 12px 14px !important;
  }

  /* ── Rewards: single column at all mobile sizes ───
     auto-fit minmax(200px) would give 2 cols at 460px;
     force 1fr to stack all 4 cards vertically.         */
  .ldr-rewards {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════
   B2B Gold Theme — applied when B2B toggle is ON
   ═══════════════════════════════════════════════════ */

.ldr-podium-card--b2b {
  border-color: rgba(226, 185, 111, 0.35) !important;
  background: rgba(var(--navy-rgb), 0.55) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2) !important;
}

.ldr-table-wrap--b2b {
  border-color: rgba(226, 185, 111, 0.35) !important;
}

.ldr-table-wrap--b2b thead tr {
  background: rgba(42, 32, 12, 0.45) !important;
}

.ldr-table-wrap--b2b th {
  color: #e2b96f !important;
}

/* ── ≤ 480 px ─────────────────────────────────────── */
@media (max-width: 480px) {

  .ldr-page {
    padding: 10px 10px 24px !important;
  }

  .ldr-stats > div {
    padding: 10px 12px !important;
  }

  .ldr-tabs button {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
}

/* ── ≤ 375 px ─────────────────────────────────────── */
@media (max-width: 375px) {

  .ldr-page {
    padding: 8px 8px 20px !important;
  }

  .ldr-stats > div {
    padding: 10px !important;
  }

  /* Tighten table header padding on narrowest phones */
  .ldr-table-wrap > div:first-child {
    padding: 10px 10px !important;
  }
}

/* ── ≤ 320 px ─────────────────────────────────────── */
@media (max-width: 320px) {

  .ldr-page {
    padding: 6px 6px 16px !important;
  }

  .ldr-title h1 {
    font-size: 18px !important;
  }

  .ldr-stats > div > div:last-child {
    font-size: 16px !important;
  }

  /* At 308px content: 2 cols = ~151px each — keep padding tight */
  .ldr-stats > div {
    padding: 8px !important;
  }
}
/* ═══════════════════════════════════════════════
   TutorialPage — Mobile Responsive
   Breakpoints: 768px | 480px | 375px | 320px
═══════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── Nav bar: tighter padding ── */
  .tut-navbar {
    padding: 10px 12px 0 !important;
  }
  /* Hide page title — already in navbar */
  .tut-page-title {
    display: none !important;
  }
  /* ── Content area: reduce side padding ── */
  .tut-content {
    padding: 16px 12px !important;
  }
  /*
   * Config grid: minmax(340px,1fr) overflows at 375px after
   * reducing side padding (available ≈ 351px ≥ 340 ✓ at 375px,
   * but overflows at 320px — forced to 1fr below).
   */
  .tut-grid-config {
    gap: 10px !important;
  }
}

@media (max-width: 480px) {
  .tut-navbar {
    padding: 8px 10px 0 !important;
  }
  .tut-content {
    padding: 14px 10px !important;
  }
}

@media (max-width: 375px) {
  .tut-navbar {
    padding: 8px 8px 0 !important;
  }
  .tut-content {
    padding: 12px 8px !important;
  }
  .tut-grid-config {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

@media (max-width: 320px) {
  .tut-navbar {
    padding: 6px 6px 0 !important;
  }
  .tut-content {
    padding: 10px 6px !important;
  }
  .tut-grid-config {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}
/* Standalone + in-app certificate preview */

.cert-demo-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  padding: 32px 24px 48px;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(82, 214, 255, 0.08), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 20%, rgba(226, 185, 111, 0.06), transparent 50%),
    #060a12;
	overflow-x: hidden;
	overflow-y: auto;
}

.cert-demo-page__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.cert-demo-page__label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
}

.cert-demo-page__hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #94a3b8;
}

.cert-demo-page__preview-wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.cert-demo-page__preview {
  border-radius: 16px;
  border: 1px solid rgba(71, 85, 105, 0.5);
  background: rgba(4, 8, 16, 0.92);
  padding: 16px 20px 20px;
}

.cert-demo-page__preview .dash-cert-preview__stage {
  min-height: calc(100vh - 35vh);
  cursor: default;
}

.cert-demo-page__preview .dash-cert-preview__scale {
    /* transform: scale(0.88);
    max-width: 900px; */
	height: 100%;
}

@media (min-width: 900px) {
  .cert-demo-page__preview .dash-cert-preview__scale {
    /* transform: scale(1); */
  }
}

@media (max-width: 600px) {
  .cert-demo-page {
    padding: 20px 12px 32px;
  }

  .cert-demo-page__preview .dash-cert-preview__scale {
    /* transform: scale(0.58); */
  }
}
/**
 * Chatbase bubble + panel — fixed bottom-right, below toasts/modals.
 * Selectors match chatbase.co embed.min.js (#chatbase-bubble-button, #chatbase-bubble-window).
 */

#chatbase-bubble-button {
  position: fixed !important;
  right: 1.25rem !important;
  bottom: 1.25rem !important;
  left: auto !important;
  top: auto !important;
  z-index: 9990 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(79, 195, 247, 0.18) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#chatbase-bubble-button:hover {
  transform: scale(1.06) !important;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.42),
    0 0 20px rgba(79, 195, 247, 0.22) !important;
}

#chatbase-bubble-window {
  position: fixed !important;
  right: 1.25rem !important;
  bottom: 5.5rem !important;
  left: auto !important;
  top: auto !important;
  z-index: 9991 !important;
  margin: 0 !important;
  max-width: min(400px, calc(100vw - 2rem)) !important;
  max-height: min(560px, calc(100vh - 7rem)) !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(71, 85, 105, 0.45) !important;
}

/* Open chat panel sits above the bubble */
#chatbase-message-bubbles {
  z-index: 9991 !important;
}

@supports (padding: max(0px)) {
  #chatbase-bubble-button {
    right: max(1.25rem, env(safe-area-inset-right)) !important;
    bottom: max(1.25rem, env(safe-area-inset-bottom)) !important;
  }

  #chatbase-bubble-window {
    right: max(1.25rem, env(safe-area-inset-right)) !important;
    bottom: max(5.5rem, calc(4.5rem + env(safe-area-inset-bottom))) !important;
  }
}

@media (max-width: 640px) {
  #chatbase-bubble-button {
    right: 1rem !important;
    bottom: 1rem !important;
    transform: scale(0.92);
    transform-origin: bottom right;
  }

  #chatbase-bubble-button:hover {
    transform: scale(0.96) !important;
  }

  #chatbase-bubble-window {
    right: 0.75rem !important;
    left: 0.75rem !important;
    bottom: 4.75rem !important;
    width: auto !important;
    max-width: none !important;
  }
}
#root {
  width: 100%;
  height: 100%;
}

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

/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-300:oklch(80.8% .114 19.571);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-sky-300:oklch(82.8% .111 230.318);--color-sky-400:oklch(74.6% .16 232.661);--color-sky-500:oklch(68.5% .169 237.323);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-400:oklch(67.3% .182 276.935);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-purple-600:oklch(55.8% .288 302.321);--color-purple-700:oklch(49.6% .265 301.924);--color-fuchsia-600:oklch(59.1% .293 322.896);--color-slate-400:oklch(70.4% .04 256.788);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--tracking-wide:.025em;--tracking-wider:.05em;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--shadow-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--blur-xl:24px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.top-0{top:0}.top-\[2px\]{top:2px}.top-\[calc\(100\%\+10px\)\]{top:calc(100% + 10px)}.right-0{right:0}.left-\[2px\]{left:2px}.left-\[14px\]{left:14px}.z-0{z-index:0}.z-1{z-index:1}.z-10{z-index:10}.z-50{z-index:50}.z-\[1000\]{z-index:1000}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-6{margin-top:calc(var(--spacing) * 6)}.mb-0{margin-bottom:0}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.box-border{box-sizing:border-box}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.list-item{display:list-item}.table{display:table}.table-cell{display:table-cell}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-4{height:calc(var(--spacing) * 4)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-\[10px\]{height:10px}.h-\[14px\]{height:14px}.h-\[44px\]{height:44px}.h-\[46px\]{height:46px}.h-\[84px\]{height:84px}.h-screen{height:100vh}.min-h-0{min-height:0}.min-h-screen{min-height:100vh}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-4{width:calc(var(--spacing) * 4)}.w-7{width:calc(var(--spacing) * 7)}.w-10{width:calc(var(--spacing) * 10)}.w-\[10px\]{width:10px}.w-\[26px\]{width:26px}.w-\[44px\]{width:44px}.w-\[46px\]{width:46px}.w-\[122px\]{width:122px}.w-\[320px\]{width:320px}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:0}.min-w-\[200px\]{min-width:200px}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-l-lg{border-top-left-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}.rounded-r-lg{border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-\[\#0FD78380\]{border-color:#0fd78380}.border-\[\#1E1E3F\]{border-color:#1e1e3f}.border-\[rgba\(var\(--cyan-rgb\)\,0\.28\)\]{border-color:rgba(var(--cyan-rgb),.28)}.border-\[rgba\(var\(--sub-cancel-border-rgb\)\,0\.22\)\]{border-color:rgba(var(--sub-cancel-border-rgb),.22)}.border-\[var\(--border\)\]{border-color:var(--border)}.border-blue-600{border-color:var(--color-blue-600)}.border-blue-600\/20{border-color:#155dfc33}@supports (color:color-mix(in lab, red, red)){.border-blue-600\/20{border-color:color-mix(in oklab, var(--color-blue-600) 20%, transparent)}}.border-green-600\/10{border-color:#00a5441a}@supports (color:color-mix(in lab, red, red)){.border-green-600\/10{border-color:color-mix(in oklab, var(--color-green-600) 10%, transparent)}}.border-red-400\/55{border-color:#ff65688c}@supports (color:color-mix(in lab, red, red)){.border-red-400\/55{border-color:color-mix(in oklab, var(--color-red-400) 55%, transparent)}}.border-red-500{border-color:var(--color-red-500)}.border-red-500\/30{border-color:#fb2c364d}@supports (color:color-mix(in lab, red, red)){.border-red-500\/30{border-color:color-mix(in oklab, var(--color-red-500) 30%, transparent)}}.border-sky-400\/10{border-color:#00bcfe1a}@supports (color:color-mix(in lab, red, red)){.border-sky-400\/10{border-color:color-mix(in oklab, var(--color-sky-400) 10%, transparent)}}.border-sky-400\/20{border-color:#00bcfe33}@supports (color:color-mix(in lab, red, red)){.border-sky-400\/20{border-color:color-mix(in oklab, var(--color-sky-400) 20%, transparent)}}.border-sky-400\/30{border-color:#00bcfe4d}@supports (color:color-mix(in lab, red, red)){.border-sky-400\/30{border-color:color-mix(in oklab, var(--color-sky-400) 30%, transparent)}}.border-transparent{border-color:#0000}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-white\/15{border-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.border-white\/15{border-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.border-t-\[var\(--border\)\]{border-top-color:var(--border)}.border-b-\[var\(--border\)\]{border-bottom-color:var(--border)}.border-b-blue-600\/15{border-bottom-color:#155dfc26}@supports (color:color-mix(in lab, red, red)){.border-b-blue-600\/15{border-bottom-color:color-mix(in oklab, var(--color-blue-600) 15%, transparent)}}.bg-\[\#0D0D27\]{background-color:#0d0d27}.bg-\[\#0FD783\]{background-color:#0fd783}.bg-\[\#0FD78326\]{background-color:#0fd78326}.bg-\[\#00021D\]{background-color:#00021d}.bg-\[\#151E38\]{background-color:#151e38}.bg-\[\#ccc\]{background-color:#ccc}.bg-\[rgba\(5\,13\,31\,0\.7\)\]{background-color:#050d1fb3}.bg-\[rgba\(5\,13\,31\,0\.9\)\]{background-color:#050d1fe6}.bg-\[rgba\(5\,13\,31\,0\.95\)\]{background-color:#050d1ff2}.bg-\[rgba\(15\,215\,131\,0\.45\)\]{background-color:#0fd78373}.bg-\[rgba\(var\(--ctp-toolbar-bg-rgb\)\,0\.86\)\]{background-color:rgba(var(--ctp-toolbar-bg-rgb),.86)}.bg-\[rgba\(var\(--cyan-rgb\)\,0\.12\)\]{background-color:rgba(var(--cyan-rgb),.12)}.bg-blue-500\/20{background-color:#3080ff33}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/20{background-color:color-mix(in oklab, var(--color-blue-500) 20%, transparent)}}.bg-gray-700{background-color:var(--color-gray-700)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-500{background-color:var(--color-green-500)}.bg-green-600\/20{background-color:#00a54433}@supports (color:color-mix(in lab, red, red)){.bg-green-600\/20{background-color:color-mix(in oklab, var(--color-green-600) 20%, transparent)}}.bg-red-500\/10{background-color:#fb2c361a}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/10{background-color:color-mix(in oklab, var(--color-red-500) 10%, transparent)}}.bg-transparent{background-color:#0000}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.bg-white\/20{background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-\[linear-gradient\(135deg\,rgba\(var\(--sub-cancel-bg1-rgb\)\,0\.92\)_0\%\,rgba\(var\(--sub-cancel-bg2-rgb\)\,0\.95\)_100\%\)\]{background-image:linear-gradient(135deg,rgba(var(--sub-cancel-bg1-rgb),.92) 0%,rgba(var(--sub-cancel-bg2-rgb),.95) 100%)}.from-indigo-500{--tw-gradient-from:var(--color-indigo-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-indigo-600{--tw-gradient-from:var(--color-indigo-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-white\/85{--tw-gradient-from:#ffffffd9}@supports (color:color-mix(in lab, red, red)){.from-white\/85{--tw-gradient-from:color-mix(in oklab, var(--color-white) 85%, transparent)}}.from-white\/85{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-blue-200\/90{--tw-gradient-to:#bedbffe6}@supports (color:color-mix(in lab, red, red)){.to-blue-200\/90{--tw-gradient-to:color-mix(in oklab, var(--color-blue-200) 90%, transparent)}}.to-blue-200\/90{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-purple-600{--tw-gradient-to:var(--color-purple-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.bg-cover{background-size:cover}.bg-center{background-position:50%}.p-3{padding:calc(var(--spacing) * 3)}.p-6{padding:calc(var(--spacing) * 6)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.035em\]{--tw-tracking:-.035em;letter-spacing:-.035em}.tracking-\[\.14em\]{--tw-tracking:.14em;letter-spacing:.14em}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-wrap{text-wrap:wrap}.break-all{word-break:break-all}.text-\[\#0FD783\]{color:#0fd783}.text-\[\#9EA7BA\]{color:#9ea7ba}.text-\[\#101522\]{color:#101522}.text-\[\#BEEBFF\]{color:#beebff}.text-\[\#C9D3E7\]{color:#c9d3e7}.text-\[\#E6EEF8\]{color:#e6eef8}.text-\[\#aaa\]{color:#aaa}.text-\[var\(--error\)\]{color:var(--error)}.text-\[var\(--sub-text-onaccent\)\]{color:var(--sub-text-onaccent)}.text-blue-400{color:var(--color-blue-400)}.text-fuchsia-600{color:var(--color-fuchsia-600)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-green-600{color:var(--color-green-600)}.text-indigo-100{color:var(--color-indigo-100)}.text-indigo-400{color:var(--color-indigo-400)}.text-red-300{color:var(--color-red-300)}.text-red-400{color:var(--color-red-400)}.text-sky-300{color:var(--color-sky-300)}.text-sky-500{color:var(--color-sky-500)}.text-slate-400{color:var(--color-slate-400)}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.placeholder-gray-600::placeholder{color:var(--color-gray-600)}.opacity-25{opacity:.25}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_12px_32px_rgba\(0\,0\,0\,0\.4\)\]{--tw-shadow:0 12px 32px var(--tw-shadow-color,#0006);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_24px_60px_rgba\(0\,0\,0\,0\.35\)\]{--tw-shadow:0 24px 60px var(--tw-shadow-color,#00000059);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-\[12px\]{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-\[20px\]{--tw-backdrop-blur:blur(20px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-xl{--tw-backdrop-blur:blur(var(--blur-xl));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.hover\:-translate-y-\[1px\]:hover{--tw-translate-y:calc(1px * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:border-sky-400\/60:hover{border-color:#00bcfe99}@supports (color:color-mix(in lab, red, red)){.hover\:border-sky-400\/60:hover{border-color:color-mix(in oklab, var(--color-sky-400) 60%, transparent)}}.hover\:bg-\[rgba\(var\(--cyan-rgb\)\,0\.18\)\]:hover{background-color:rgba(var(--cyan-rgb),.18)}.hover\:bg-red-500\/10:hover{background-color:#fb2c361a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-red-500\/10:hover{background-color:color-mix(in oklab, var(--color-red-500) 10%, transparent)}}.hover\:bg-sky-400\/10:hover{background-color:#00bcfe1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-sky-400\/10:hover{background-color:color-mix(in oklab, var(--color-sky-400) 10%, transparent)}}.hover\:from-indigo-700:hover{--tw-gradient-from:var(--color-indigo-700);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.hover\:to-purple-700:hover{--tw-gradient-to:var(--color-purple-700);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.hover\:text-indigo-300:hover{color:var(--color-indigo-300)}.hover\:shadow-\[0_0_12px_rgba\(79\,195\,247\,0\.2\)\]:hover{--tw-shadow:0 0 12px var(--tw-shadow-color,#4fc3f733);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-\[0_10px_18px_rgba\(6\,16\,41\,0\.34\)\]:hover{--tw-shadow:0 10px 18px var(--tw-shadow-color,#06102957);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus\:border-indigo-500:focus{border-color:var(--color-indigo-500)}.focus\:border-red-600:focus{border-color:var(--color-red-600)}.focus\:ring-0:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-indigo-500:focus{--tw-ring-color:var(--color-indigo-500)}.focus\:ring-offset-0:focus{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}}@media (min-width:64rem){.lg\:px-8{padding-inline:calc(var(--spacing) * 8)}}}:root{--navy:#050d1f;--navy2:#081428;--navy3:#0a1a30;--surface:#080e1ed9;--surface-elevated:#0c1428eb;--steel:#2a5298;--cyan:#4fc3f7;--cyan2:#00e5ff;--silver:#c8d8f0;--silver2:#e8f0ff;--gold:#7eb8e8;--accent-purple:#a78bfa;--glow-cyan:#4fc3f759;--glow-steel:#2a529880;--border:#4fc3f71f;--border2:#4fc3f740;--text:#d8e8f8;--muted:#d8e8f880;--font:"Sora", sans-serif;--cyan-rgb:79, 195, 247;--cyan2-rgb:0, 229, 255;--steel-rgb:42, 82, 152;--text-rgb:216, 232, 248;--silver2-rgb:232, 240, 255;--navy-rgb:5, 13, 31;--cta-rgb:47, 118, 255;--muted-text:#94a3b8;--us-glow1-rgb:59, 130, 246;--us-glow2-rgb:34, 211, 238;--us-glow3-rgb:139, 92, 246;--wiki-accent:#52d6ff;--wiki-accent-rgb:82, 214, 255;--wiki-muted:#64748b;--wiki-muted-rgb:100, 116, 139;--wiki-dim:#475569;--wiki-dim-rgb:71, 85, 105;--wiki-light:#e2e8f0;--wiki-light-rgb:226, 232, 240;--wiki-btn1-rgb:22, 78, 155;--wiki-btn2-rgb:42, 130, 218;--muted-text-rgb:148, 163, 184;--nav-prop:#a7b8ff;--nav-prop-rgb:167, 184, 255;--nav-prop-light:#bfdbfe;--nav-border-rgb:71, 85, 110;--nav-table-border-rgb:51, 65, 85;--nav-header-accent-rgb:30, 64, 175;--smry-tab-active:#93c5fd;--wiki-accent-light:#7ddcff;--prog-track-rgb:30, 41, 59;--leg-prop-rgb:129, 140, 248;--stmt-btn-border-rgb:167, 139, 250;--stmt-btn-bg-rgb:139, 92, 246;--stmt-btn-bg2-rgb:109, 40, 217;--stmt-btn-text:#c4b5fd;--stmt-btn-hover-text:#ede9fe;--prog-active1:#2563eb;--prog-active2:#38bdf8;--prog-active1-rgb:37, 99, 235;--acc-blue400-rgb:96, 165, 250;--acc-blue700-rgb:29, 78, 216;--acc-cyan600-rgb:6, 182, 212;--acc-cyan300:#67e8f9;--jrny-tab-muted:#7e92b7;--jrny-active-rgb:21, 38, 88;--jrny-dim-rgb:103, 124, 163;--jrny-light-rgb:165, 183, 214;--prog-active2-rgb:56, 189, 248;--sub-panel-bg:#0b1120;--sub-input-bg:#101822;--sub-input-focus-bg:#121e34;--sub-section-bg-rgb:16, 24, 34;--sub-overlay-bg-rgb:4, 8, 18;--sub-inner-bg-rgb:7, 11, 24;--sub-propsec-bg1-rgb:13, 12, 23;--sub-propsec-bg2-rgb:9, 11, 22;--sub-cancel-bg1-rgb:17, 33, 64;--sub-cancel-bg2-rgb:11, 22, 45;--sub-cancel-border-rgb:126, 168, 241;--sub-cancel-text:#cfe2ff;--sub-save-bg1-rgb:40, 84, 186;--sub-save-bg2-rgb:27, 58, 136;--sub-save-border-rgb:143, 182, 255;--sub-save-disabled-bg:#2a3242;--sub-text-bright:#fff;--sub-text-heading:#e8eef9;--sub-text-onaccent:#eaf3ff;--sub-text-label:#c5d2e0;--sub-text-secondary:#a9b3cc;--sub-text-footer:#91a1c5;--sub-text-dim:#8fa2c7;--sub-text-icon-dim:#68789a;--sub-text-inactive:#9ca8c0;--sub-focus-border:#6366f1;--sub-icon-primary:#8fb8ff;--sub-icon-vps:#78a8ff;--sub-icon-vps-rgb:120, 168, 255;--ctp-panel:#0a1220;--ctp-panel-deep:#060b14;--ctp-rail-bg1-rgb:6, 12, 24;--ctp-rail-bg2-rgb:3, 7, 14;--ctp-tab-active-bg1-rgb:37, 99, 235;--ctp-tab-active-bg2-rgb:15, 23, 42;--ctp-toolbar-bg-rgb:10, 18, 32;--ctp-chip-bg:#121923;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--shadow-sm:0 4px 16px #0003;--shadow-md:0 12px 40px #00000047;--shadow-lg:0 24px 60px #00000061;--shadow-glow:0 0 24px var(--glow-cyan);--success:#4ade80;--error:#f87171;--warning:#fbbf24;--info:#60a5fa}html,body{background:var(--navy);color:var(--text);font-family:var(--font)}.hedgio-bg-container{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.hedgio-bg-canvas{position:absolute;inset:0}.hedgio-blob{filter:blur(100px);opacity:.15;border-radius:50%;animation:20s ease-in-out infinite alternate drift;position:absolute}.hedgio-blob-1{background:radial-gradient(circle,#1a3a7a,#050d1f);width:600px;height:600px;animation-duration:22s;top:-150px;left:-100px}.hedgio-blob-2{background:radial-gradient(circle,#0a2a5a,#050d1f);width:500px;height:500px;animation-duration:28s;animation-delay:-10s;top:300px;right:-80px}.hedgio-blob-3{opacity:.08;background:radial-gradient(circle,#4fc3f7,#050d1f);width:400px;height:400px;animation-duration:24s;animation-delay:-5s;bottom:50px;left:35%}.hedgio-blob-4{background:radial-gradient(circle,#2a5298,#050d1f);width:350px;height:350px;animation-duration:26s;animation-delay:-15s;top:60%;right:20%}.hedgio-grid-overlay{background-image:linear-gradient(#4fc3f708 1px,#0000 1px),linear-gradient(90deg,#4fc3f708 1px,#0000 1px);background-size:60px 60px;position:absolute;inset:0}@keyframes drift{0%{transform:translate(0)scale(1)}50%{transform:translate(40px,60px)scale(1.1)}to{transform:translate(-30px,20px)scale(.95)}}.btn-primary,.btn-primary-lg{background:linear-gradient(135deg, var(--cyan) 0%, var(--steel) 100%);color:#fff;box-shadow:0 0 20px var(--glow-cyan);border:1px solid #4fc3f780;padding:12px 28px}.btn-primary:hover,.btn-primary-lg:hover{box-shadow:0 0 30px var(--glow-cyan), 0 8px 16px #0000004d;transform:translateY(-2px)}.btn-ghost,.btn-outline{color:var(--cyan);border:1.5px solid var(--cyan);background:0 0;padding:12px 28px}.btn-ghost:hover,.btn-outline:hover{box-shadow:0 0 15px var(--glow-cyan);background:#4fc3f71a;transform:translateY(-2px)}.btn-secondary{color:var(--cyan);border:1px solid var(--border2);background:#4fc3f726;padding:10px 24px}.btn-secondary:hover{border-color:var(--cyan);background:#4fc3f740}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-sm);padding:24px;transition:border-color .2s,box-shadow .2s}.card:hover{border-color:var(--border2);box-shadow:var(--shadow-sm), 0 0 24px #4fc3f714}.panel{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(16px)}.stat-card{border:1px solid var(--border);border-radius:var(--radius-md);background:linear-gradient(145deg,#0c1630b3 0%,#060c1cd9 100%);padding:20px}.page-title{letter-spacing:-.03em;color:var(--silver2);font-size:22px;font-weight:700}.page-subtitle{color:var(--muted);margin-top:4px;font-size:14px;line-height:1.5}.glass{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#050d1fb3;border:1px solid #4fc3f726}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#4fc3f70d}::-webkit-scrollbar-thumb{background:#4fc3f74d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#4fc3f780}.app-shell.app-shell--b2b{--navy:#0d0a06;--navy2:#15110a;--navy3:#1c160c;--surface:#1a140cd9;--surface-elevated:#221a0feb;--steel:#8a6a2a;--cyan:#d4af37;--cyan2:#f3c74d;--silver:#e8d9b8;--silver2:#f7e7ce;--gold:#f3c74d;--accent-purple:#d4af37;--glow-cyan:#d4af3759;--glow-steel:#7a5a1a80;--border:#d4af3729;--border2:#d4af3752;--text:#f0e4cc;--muted:#f0e4cc8c;--cyan-rgb:212, 175, 55;--cyan2-rgb:243, 199, 77;--steel-rgb:138, 106, 42;--text-rgb:240, 228, 204;--silver2-rgb:247, 231, 206;--navy-rgb:13, 10, 6;--cta-rgb:224, 184, 70;--muted-text:#b8a47a;--us-glow1-rgb:224, 184, 70;--us-glow2-rgb:243, 199, 77;--us-glow3-rgb:212, 175, 55;--wiki-accent:#f3c74d;--wiki-accent-rgb:243, 199, 77;--wiki-muted:#a6895a;--wiki-muted-rgb:166, 137, 90;--wiki-dim:#8a6a2a;--wiki-dim-rgb:138, 106, 42;--wiki-light:#e8d9b8;--wiki-light-rgb:232, 217, 184;--wiki-btn1-rgb:122, 90, 26;--wiki-btn2-rgb:212, 175, 55;--muted-text-rgb:184, 164, 122;--nav-prop:#f7e7ce;--nav-prop-rgb:247, 231, 206;--nav-prop-light:#fff1c7;--nav-border-rgb:138, 106, 42;--nav-table-border-rgb:100, 76, 32;--nav-header-accent-rgb:212, 175, 55;--smry-tab-active:#f3c74d;--wiki-accent-light:#ffe9a8;--prog-track-rgb:42, 32, 15;--leg-prop-rgb:247, 231, 206;--stmt-btn-border-rgb:212, 175, 55;--stmt-btn-bg-rgb:224, 184, 70;--stmt-btn-bg2-rgb:179, 147, 56;--stmt-btn-text:#f3c74d;--stmt-btn-hover-text:#fff4d6;--prog-active1:#e0b846;--prog-active2:#d4af37;--prog-active1-rgb:224, 184, 70;--acc-blue400-rgb:243, 199, 77;--acc-blue700-rgb:212, 175, 55;--acc-cyan600-rgb:224, 184, 70;--acc-cyan300:#f3c74d;--jrny-tab-muted:#a6895a;--jrny-active-rgb:28, 22, 10;--jrny-dim-rgb:135, 116, 80;--jrny-light-rgb:236, 214, 173;--prog-active2-rgb:212, 175, 55;--sub-panel-bg:#100c06;--sub-input-bg:#1c1509;--sub-input-focus-bg:#271d0e;--sub-section-bg-rgb:26, 20, 12;--sub-overlay-bg-rgb:13, 10, 6;--sub-inner-bg-rgb:19, 15, 8;--sub-propsec-bg1-rgb:24, 19, 11;--sub-propsec-bg2-rgb:16, 13, 7;--sub-cancel-bg1-rgb:36, 28, 14;--sub-cancel-bg2-rgb:24, 19, 10;--sub-cancel-border-rgb:212, 175, 55;--sub-cancel-text:#f0e4cc;--sub-save-bg1-rgb:224, 184, 70;--sub-save-bg2-rgb:153, 122, 36;--sub-save-border-rgb:243, 199, 77;--sub-save-disabled-bg:#332c1c;--sub-text-bright:#f7efe0;--sub-text-heading:#f3e6c8;--sub-text-onaccent:#fff4d6;--sub-text-label:#d9c9a6;--sub-text-secondary:#c9b68a;--sub-text-footer:#b8a47a;--sub-text-dim:#a6895a;--sub-text-icon-dim:#8a6a2a;--sub-text-inactive:#b8a47a;--sub-focus-border:#d4af37;--sub-icon-primary:#f3c74d;--sub-icon-vps:#d4af37;--sub-icon-vps-rgb:212, 175, 55;--ctp-panel:#120e08;--ctp-panel-deep:#0a0705;--ctp-rail-bg1-rgb:18, 14, 8;--ctp-rail-bg2-rgb:10, 8, 4;--ctp-tab-active-bg1-rgb:224, 184, 70;--ctp-tab-active-bg2-rgb:26, 20, 12;--ctp-toolbar-bg-rgb:18, 14, 8;--ctp-chip-bg:#1c160c;background:radial-gradient(70% 55% at 18% 8%,#d4af371a,#0000 45%),radial-gradient(55% 50% at 92% 12%,#f3c74d12,#0000 42%),linear-gradient(#141008fa 0%,#080603 100%)}.app-shell--b2b .app-shell__main{background:radial-gradient(80% 50% at 70% 0,#d4af370d,#0000 50%),0 0}.app-shell--b2b .app-shell__main,.app-shell--b2b .app-shell__main *{color:#fff!important}.hedgio-bg-container--gold .hedgio-blob-1{background:radial-gradient(circle,#6e4f12,#0d0a06)}.hedgio-bg-container--gold .hedgio-blob-2{background:radial-gradient(circle,#4a3410,#0d0a06)}.hedgio-bg-container--gold .hedgio-blob-3{background:radial-gradient(circle,#f3c74d,#0d0a06)}.hedgio-bg-container--gold .hedgio-blob-4{background:radial-gradient(circle,#d4af37,#0d0a06)}.hedgio-bg-container--gold .hedgio-grid-overlay{background-image:linear-gradient(#d4af3709 1px,#0000 1px),linear-gradient(90deg,#d4af3709 1px,#0000 1px)}.sidebar-collapse-cb{display:none}.sidebar-collapse-tab{cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:1px solid #0000;border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:background .15s,border-color .15s;display:flex}.sidebar-collapse-tab:hover{background:#4fc3f714;border-color:#4fc3f733}.sidebar-collapse-tab .sc-arrow{color:#64748b;font-size:18px;font-weight:900;line-height:1;transition:color .15s;display:flex}.sidebar-collapse-tab:hover .sc-arrow{color:#4fc3f7}.sidebar-collapse-tab .sc-bar{background:#64748b;border-radius:2px;width:16px;height:2px;transition:background .15s;display:none}.app-sidebar{transition:width .28s cubic-bezier(.4,0,.2,1),min-width .28s cubic-bezier(.4,0,.2,1),padding .28s cubic-bezier(.4,0,.2,1)}.sidebar-collapse-cb:checked~.app-sidebar{border-right:none;width:0;min-width:0;padding:0;overflow:hidden}.sidebar-collapse-cb:checked~.app-shell__main .sidebar-collapse-tab{flex-direction:column;gap:5px}.sidebar-collapse-cb:checked~.app-shell__main .sidebar-collapse-tab .sc-arrow{display:none}.sidebar-collapse-cb:checked~.app-shell__main .sidebar-collapse-tab .sc-bar{display:block}.sidebar-collapse-cb:checked~.app-shell__main .sidebar-collapse-tab:hover .sc-bar{background:#4fc3f7}@media (max-width:768px){.sidebar-collapse-tab{display:none}}.app-shell{height:100vh;color:var(--text);background:radial-gradient(70% 55% at 18% 8%,#3b82f61a,#0000 45%),radial-gradient(55% 50% at 92% 12%,#22d3ee12,#0000 42%),linear-gradient(#050d1ffa 0%,#030814 100%);display:flex;position:relative;overflow:hidden}.app-shell__main{z-index:1;background:radial-gradient(80% 50% at 70% 0,#3b82f60d,#0000 50%),0 0;flex-direction:column;flex:1;min-width:0;height:100vh;font-size:14px;display:flex;position:relative;overflow:hidden}.app-header{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(20px);z-index:10;background:linear-gradient(#080e1ce0 0%,#050a1699 100%);flex-shrink:0;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1rem;display:flex;position:sticky;top:0;overflow:visible;box-shadow:0 8px 32px #0003}.app-header__breadcrumb{flex-direction:column;gap:2px;min-width:0;display:flex}.app-header__title{color:var(--silver2);letter-spacing:-.02em;font-size:15px;font-weight:700}.app-header__subtitle{color:var(--muted);font-size:12px;font-weight:500}.app-header__actions{align-items:center;gap:12px;min-width:0;max-height:72px;margin-left:auto;display:flex}.app-header__trailing-label{color:#ffffffb3;text-align:center;white-space:nowrap;text-overflow:ellipsis;max-width:68px;margin-top:2px;font-family:Noto Color Emoji,sans-serif;font-size:10px;font-weight:500;line-height:1;overflow:hidden}.app-main{flex:1;min-height:0;overflow:hidden auto}.app-sidebar{z-index:2;border-right:1px solid var(--border);-webkit-backdrop-filter:blur(16px);background:linear-gradient(195deg,#080e1efa 0%,#040712fc 100%);flex-direction:column;width:256px;min-width:256px;height:100vh;padding:1.5rem 1rem;display:flex;position:sticky;top:0;overflow-y:auto;box-shadow:inset -1px 0 #ffffff0a}.app-sidebar__brand{border-bottom:1px solid var(--border);margin-bottom:1rem;padding:0 0 1rem}.app-sidebar__logo{width:auto;height:34px;display:block}.app-sidebar__workspace{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:10px;font-size:10px;font-weight:700;line-height:1.4}.app-sidebar__section-label{letter-spacing:.08em;text-transform:uppercase;color:#94a3b880;padding:0 12px 8px;font-size:10px;font-weight:700}.app-sidebar__nav{flex-direction:column;flex:1;gap:3px;display:flex}.app-sidebar__logout{color:#fecaca;cursor:pointer;width:100%;min-height:46px;font-size:13px;font-weight:700;font-family:var(--font);background:linear-gradient(#7f1d1d40 0%,#450a0a66 100%);border:1px solid #f8717138;border-radius:11px;justify-content:center;align-items:center;gap:9px;margin-top:14px;transition:background .18s,transform .18s,border-color .18s;display:flex}.app-sidebar__logout:hover{background:linear-gradient(#7f1d1d73 0%,#450a0a99 100%);border-color:#f8717166;transform:translateY(-1px)}.sidebar-nav-link{letter-spacing:.01em;color:#94a3b8;cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:11px;align-items:center;gap:11px;width:100%;padding:10px 11px;font-family:inherit;font-size:13px;font-weight:600;text-decoration:none;transition:color .18s,background .18s,border-color .18s,box-shadow .18s;display:flex;position:relative}.sidebar-nav-link:hover{color:#d8e4ff;background:#1e3a8a52;border-color:#5290ff29}.sidebar-nav-link--active{color:#fff;background:linear-gradient(135deg,#1c4ab2e6 0%,#13285cd9 100%);border-color:#5290ff4d;box-shadow:0 6px 20px #0d2b7852}.sidebar-nav-link__accent{background:linear-gradient(180deg, #60a5fa 0%, var(--cyan) 100%);width:3px;height:20px;box-shadow:0 0 10px var(--glow-cyan);border-radius:0 4px 4px 0;position:absolute;top:50%;left:0;transform:translateY(-50%)}.sidebar-nav-link__icon{width:34px;height:34px;color:inherit;flex-shrink:0;justify-content:center;align-items:center;transition:background .18s;display:flex}.sidebar-nav-link__label{flex:1;line-height:1.3}.profile-trigger__avatar{color:#101522;background:linear-gradient(135deg,#ffffffe6 0%,#aab4c8d9 100%);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:14px;font-weight:800;display:flex}.profile-trigger__info{text-align:left;flex:1;min-width:0}.profile-trigger__name{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:700;overflow:hidden}.profile-trigger__role{color:#a78bfa;white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:6px;margin-top:2px;font-size:12px;font-weight:600;display:flex;overflow:hidden}.profile-menu{-webkit-backdrop-filter:blur(24px);z-index:50;background:linear-gradient(#0a142afa 0%,#060c1cfa 100%);border:1px solid #4fc3f73d;border-radius:18px;min-width:320px;position:absolute;top:calc(100% + 10px);right:0;overflow:hidden;box-shadow:0 22px 60px #0000007a,0 0 0 1px #ffffff0a}.profile-menu__header{border-bottom:1px solid var(--border);padding:18px}.profile-menu__identity{align-items:center;gap:12px;display:flex}.profile-menu__avatar-action{cursor:pointer;border-radius:999px;display:inline-flex}.profile-menu__identity-copy{min-width:0}.profile-menu__name{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:800;line-height:1.2;overflow:hidden}.profile-menu__details{background:#ffffff0a;border:1px solid #ffffff12;border-radius:14px;gap:8px;margin-top:16px;padding:12px;display:grid}.profile-menu__section-title{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:800}.profile-menu__detail-row{justify-content:space-between;align-items:center;gap:14px;font-size:12px;display:flex}.profile-menu__detail-label{color:var(--muted);flex:none}.profile-menu__detail-value{color:var(--text);text-align:right;text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;font-weight:650;overflow:hidden}.profile-menu__actions,.profile-menu__footer{padding:8px}.profile-menu__footer{border-top:1px solid var(--border)}.profile-menu__item{text-align:left;width:100%;color:var(--text);font-size:14px;font-family:var(--font);cursor:pointer;background:0 0;border:none;border-radius:10px;padding:11px 12px;font-weight:650;transition:background .15s,color .15s,transform .15s}.profile-menu__item:hover{background:#4fc3f714;transform:translate(2px)}.profile-menu__item--muted{color:var(--muted)}.profile-menu__item--danger{color:var(--error);font-weight:800}.profile-menu__item--danger:hover{background:#f871711a}.lang-selector{border:1px solid var(--border);background:#4fc3f70a;border-radius:10px;align-items:center;gap:4px;padding:4px;display:flex}.lang-selector__btn{cursor:pointer;font-size:11px;font-weight:600;font-family:var(--font);color:var(--muted);background:0 0;border:1px solid #0000;border-radius:7px;padding:5px 8px;transition:all .15s}.lang-selector__btn:hover{color:var(--cyan);background:#4fc3f714}.lang-selector__btn--active{color:var(--cyan);background:#4fc3f724;border-color:#4fc3f773;font-weight:800}.sidebar-toggle-checkbox{display:none}.sidebar-hamburger{cursor:pointer;-webkit-tap-highlight-color:transparent;flex-direction:column;flex-shrink:0;justify-content:center;gap:5px;padding:5px 4px;display:none}.sidebar-hamburger span{background:var(--silver2,#e8f0ff);border-radius:2px;width:20px;height:2px;transition:transform .28s,opacity .2s;display:block}.sidebar-overlay{z-index:4;-webkit-backdrop-filter:blur(2px);cursor:pointer;background:#02050f9e;display:none;position:fixed;inset:0}@media (max-width:1024px){.app-sidebar .app-sidebar__nav{padding:0}}@media (min-width:768px) and (max-width:1024px){.app-sidebar{width:220px;min-width:220px}.sidebar-nav-link__icon{width:30px;height:30px}.sidebar-nav-link__icon svg{width:15px;height:15px}}@media (max-width:767px){.app-sidebar{z-index:5;width:256px;height:100%;transition:left .28s cubic-bezier(.4,0,.2,1);position:fixed;top:0;bottom:0;left:-272px}.sidebar-toggle-checkbox:checked~.app-sidebar{left:0;box-shadow:8px 0 48px #000000a6}.sidebar-toggle-checkbox:checked~.sidebar-overlay{display:block}.app-shell__main{width:100%;min-width:0}.sidebar-toggle-checkbox:checked~.app-shell__main .sidebar-hamburger span:first-child{transform:translateY(7px)rotate(45deg)}.sidebar-toggle-checkbox:checked~.app-shell__main .sidebar-hamburger span:nth-child(2){opacity:0;transform:scaleX(0)}.sidebar-toggle-checkbox:checked~.app-shell__main .sidebar-hamburger span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.sidebar-hamburger{flex-shrink:0;margin-right:4px;display:flex}.app-header{gap:.5rem;padding:.5rem .75rem}.app-header__breadcrumb{flex:1;min-width:0}.app-header__title{white-space:nowrap;text-overflow:ellipsis;color:var(--silver2,#e8f0ff);font-size:13px;font-weight:700;display:block;overflow:hidden}.app-header__subtitle{display:none}.app-header__actions{flex-shrink:0;align-items:center;gap:10px;margin-left:auto;display:flex}.lang-selector{display:none!important}.app-header__trailing-slot{order:-1}.profile-trigger{gap:6px;min-width:0;padding:5px 6px}.profile-trigger__info{display:none}.dash-page{height:auto!important;min-height:0!important;padding:0 12px 28px!important;overflow:visible!important}.dash-shell,.dash-chart-workspace{height:auto!important;overflow:visible!important}.dash-toolbar{align-items:center!important;gap:6px!important;margin-bottom:0!important;padding-top:0!important}.dash-tabs{-webkit-overflow-scrolling:touch;overflow-x:auto}.dash-actions{flex-wrap:wrap!important;justify-content:flex-start!important;gap:6px!important}.dash-symbol-search{flex:auto!important}.dash-status-chip{display:none!important}.dash-chart-arena:not([style*="display: none"]){flex-direction:column!important;flex:none!important;height:auto!important;min-height:0!important;display:flex!important;overflow:visible!important}.dash-chart-row{border-radius:12px 12px 0 0!important;flex-direction:column!important;height:auto!important;min-height:0!important;overflow:visible!important}.dash-chart-main{flex:none!important;width:100%!important;height:clamp(240px,50vh,420px)!important;min-height:240px!important;overflow:hidden!important}.dash-chart-trade-rail{border-left:none!important;border-top:1px solid rgba(var(--cyan-rgb), .18)!important;border-radius:0 0 12px 12px!important;flex-shrink:0!important;align-self:auto!important;width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;overflow:visible!important}.dash-chart-trade-rail__panels{max-height:none!important;overflow:visible!important}.dash-chart-trade-rail--two .dash-chart-trade-rail__panels{grid-template-columns:1fr 1fr!important;gap:8px!important}.dash-chart-trade-rail--multi:not(.dash-chart-trade-rail--two) .dash-chart-trade-rail__panels{grid-template-columns:1fr 1fr!important;max-height:360px!important;overflow-y:auto!important}}@media (max-width:480px){.app-header{gap:6px;min-height:48px;padding:8px 10px}.dash-page{padding:0 10px 20px!important}.dash-chart-main{height:clamp(220px,48vh,380px)!important;min-height:220px!important}.dash-chart-trade-rail--multi:not(.dash-chart-trade-rail--two) .dash-chart-trade-rail__panels{max-height:320px!important}}@media (max-width:360px){.app-header{min-height:44px;padding:6px 8px}.app-header__title{font-size:12px}.dash-page{padding:0 8px 16px!important}.dash-chart-main{height:clamp(200px,45vh,340px)!important;min-height:200px!important}.dash-chart-trade-rail--multi:not(.dash-chart-trade-rail--two) .dash-chart-trade-rail__panels{max-height:280px!important}}.mobile-lang-dd{display:none;position:relative}.mobile-lang-dd__trigger{color:#7ddcff;cursor:pointer;white-space:nowrap;background:#4fc3f70f;border:1px solid #4fc3f747;border-radius:8px;align-items:center;gap:3px;height:30px;padding:0 8px;font-size:11px;font-weight:800;display:flex}.mobile-lang-dd__caret{opacity:.7;font-size:9px}.mobile-lang-dd__menu{-webkit-backdrop-filter:blur(16px);z-index:50;background:#080e1cfa;border:1px solid #4fc3f738;border-radius:10px;flex-direction:column;min-width:80px;display:flex;position:absolute;top:calc(100% + 6px);right:0;overflow:hidden;box-shadow:0 12px 32px #0000007a}.mobile-lang-dd__opt{color:#94a3b8;text-align:left;cursor:pointer;background:0 0;border:none;width:100%;padding:9px 14px;font-size:12px;font-weight:700;transition:background .12s,color .12s}.mobile-lang-dd__opt:hover{color:#e8f0ff;background:#4fc3f71a}.mobile-lang-dd__opt--active{color:#4fc3f7;background:#4fc3f714}@media (min-width:768px) and (max-width:990px){.lang-selector,.profile-trigger__info{display:none}.mobile-lang-dd{align-items:center;display:flex}.app-header__trailing-slot{order:-1}}@media (max-width:767px){.mobile-lang-dd{align-items:center;display:flex}}@media (max-width:768px){.dash-pairs-grid{margin-top:0!important;padding-top:0!important}.dash-cmd-card{flex-direction:column!important}.dash-cmd-rail,.dash-cmd-divider{display:none!important}.dash-cmd-main{gap:0!important;width:100%!important;padding:14px!important}.dash-cmd-top{flex-direction:column!important;gap:10px!important}.dash-cmd-identity{width:100%!important;min-width:0!important}.dash-cmd-actions{flex-flow:wrap!important;justify-content:flex-start!important;align-self:auto!important;align-items:stretch!important;gap:6px!important;width:100%!important;margin-top:0!important;padding-left:0!important}.dash-cmd-buysell{flex-basis:100%!important;order:3!important;width:100%!important;margin-top:4px!important}.dash-cmd-buysell button{flex:1!important;min-height:34px!important;font-size:12px!important}.dash-cmd-actions>button:not(:last-child){flex:2 1 0!important;min-height:40px!important;font-size:13px!important}.dash-cmd-actions>button:last-child{text-align:center!important;flex:1 1 0!important;justify-content:center!important;align-items:center!important;min-height:40px!important;font-size:12px!important;display:flex!important}.dash-cmd-dates{flex-wrap:wrap!important;gap:16px!important;margin-top:8px!important;margin-bottom:2px!important;display:flex!important}.dash-cmd-metrics{grid-template-columns:repeat(3,1fr)!important;gap:8px!important;margin-top:10px!important;display:grid!important}}.dash-cmd-dates{display:none}@media (max-width:480px){.dash-cmd-main{padding:12px!important}.dash-cmd-metrics{grid-template-columns:repeat(3,1fr)!important;gap:6px!important}}@media (max-width:768px){.app-sidebar{overflow-x:hidden!important}.app-sidebar__workspace{text-overflow:ellipsis!important;white-space:nowrap!important;max-width:200px!important;overflow:hidden!important}.sidebar-nav-link__label{text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important}.app-sidebar__logout{min-height:40px!important;font-size:12px!important}}@media (max-width:320px){.sidebar-nav-link__icon{width:28px!important;height:28px!important}.sidebar-nav-link{padding:8px 9px!important;font-size:12px!important}}@media (max-width:768px){.adm-outer-page{overflow-x:hidden;padding:10px 10px 24px!important}.adm-users-grid{grid-template-columns:1fr!important;gap:14px!important}}@media (max-width:480px){.adm-outer-page{padding:8px 8px 20px!important}}@media (max-width:375px){.adm-outer-page{padding:8px 8px 16px!important}}.app-shell--b2b .app-header{background:linear-gradient(#402f0ee6 0%,#140f06a6 100%);border-bottom:1px solid #d4af372e}.app-shell--b2b .app-sidebar{background:linear-gradient(195deg,#3c2c0efa 0%,#0e0a04fc 100%)}.app-shell--b2b .profile-menu{background:linear-gradient(#241c0efa 0%,#100c06fa 100%);border:1px solid #d4af373d}.app-shell--b2b .sidebar-nav-link:hover{color:#f7e7ce;background:#8a6a2a52;border-color:#d4af3729}.app-shell--b2b .sidebar-nav-link--active{color:#fff;background:linear-gradient(135deg,#b28a1ce6 0%,#5c4413d9 100%);border-color:#f3c74d4d;box-shadow:0 6px 20px #78580d52}.app-shell--b2b .sidebar-nav-link__accent{background:linear-gradient(180deg, #f3c74d 0%, var(--cyan) 100%);box-shadow:0 0 10px var(--glow-cyan)}html,body,#root{width:100%;height:100%;margin:0;padding:0}body{font-family:var(--font), sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--navy);color:var(--text)}#root{flex-direction:column;display:flex}code{color:var(--cyan);background:#4fc3f71a;border-radius:4px;padding:2px 6px;font-size:.9em}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@keyframes spin{to{transform:rotate(360deg)}}