/* F4Pool Reference Layout v3 — homepage and responsive pool pages */
:root {
  --v3-bg: #05070a;
  --v3-panel: #0c1015;
  --v3-panel-2: #10151c;
  --v3-border: rgba(255,255,255,.10);
  --v3-border-soft: rgba(255,255,255,.065);
  --v3-text: #f7f8fb;
  --v3-muted: #7f8998;
  --v3-orange: #ff9418;
  --v3-orange-soft: rgba(255,148,24,.13);
  --v3-green: #32e185;
}
html { scroll-behavior: smooth; }
body.f4-app { background: var(--v3-bg) !important; color: var(--v3-text); }
.main-index { background: var(--v3-bg); min-height: 100vh; }
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(5,7,10,.94) !important;
  border-bottom: 1px solid var(--v3-border-soft) !important;
  backdrop-filter: blur(16px);
}
.site-header-inner { width: min(1180px, calc(100% - 32px)); max-width: none !important; min-height: 64px; }
.site-brand-mark { width: 32px !important; height: 32px !important; }
.site-brand-wordmark { font-size: 17px !important; letter-spacing: -.02em; }
.v3-site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.v3-site-nav a {
  color: #9ba4b1 !important; padding: 9px 11px !important; border-radius: 8px;
  font-size: 12px !important; font-weight: 700 !important; text-decoration: none;
}
.v3-site-nav a:hover, .v3-site-nav a.is-active { background: var(--v3-orange-soft); color: #fff !important; }
.v3-site-nav .site-nav-cta { background: var(--v3-orange) !important; color: #080a0d !important; padding-inline: 16px !important; }
.v3-page { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.v3-hero {
  min-height: 390px; padding: 72px 24px 56px; display: grid; place-items: center; text-align: center;
  border-bottom: 1px solid var(--v3-border-soft);
  background:
    radial-gradient(circle at 50% 15%, rgba(255,148,24,.18), transparent 36%),
    linear-gradient(180deg, rgba(255,148,24,.035), transparent 62%);
}
.v3-hero-inner { width: min(850px, 100%); display: flex; flex-direction: column; align-items: center; }
.v3-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(255,148,24,.28); background: rgba(255,148,24,.07);
  color: var(--v3-orange); font-size: 10px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase;
}
.v3-brand-lockup { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 24px 0 10px; }
.v3-brand-lockup img { width: 62px; height: 62px; object-fit: contain; border-radius: 50%; }
.v3-brand-lockup h1 { margin: 0; color: #fff; font-size: clamp(50px, 8vw, 88px); line-height: .9; font-weight: 950; letter-spacing: -.055em; }
.v3-brand-lockup h1 span { color: var(--v3-orange); }
.v3-hero h2 { margin: 8px 0 14px; font-size: clamp(20px, 2vw, 30px); color: #fff; font-weight: 800; }
.v3-hero p { margin: 0; max-width: 720px; color: #929dac; font-size: 15px; line-height: 1.7; }
.v3-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.v3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px;
  padding: 0 18px; border: 1px solid var(--v3-border); border-radius: 9px;
  color: #fff; background: #11161c; font-size: 12px; font-weight: 850; text-decoration: none !important;
}
.v3-btn-primary { background: var(--v3-orange); border-color: var(--v3-orange); color: #090b0e !important; }
.v3-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; padding: 30px 0; }
.v3-stat {
  position: relative; min-height: 112px; padding: 18px 56px 16px 16px;
  border: 1px solid var(--v3-border); border-radius: 12px; background: var(--v3-panel);
}
.v3-stat i { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,148,24,.28); border-radius: 8px; background: rgba(255,148,24,.07); color: var(--v3-orange); }
.v3-stat span { display: block; color: var(--v3-muted); font-size: 11px; }
.v3-stat strong { display: block; margin-top: 10px; color: #fff; font-size: clamp(23px, 2.4vw, 34px); line-height: 1; font-weight: 900; overflow-wrap: anywhere; }
.v3-stat small { display: block; margin-top: 9px; color: #596270; font-size: 10px; }
.v3-section { padding: 44px 0; border-top: 1px solid var(--v3-border-soft); }
.v3-section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.v3-kicker { display: block; margin-bottom: 7px; color: var(--v3-orange); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.v3-title { margin: 0; color: #fff; font-size: clamp(27px, 3vw, 40px); line-height: 1.05; font-weight: 900; letter-spacing: -.035em; }
.v3-sub { margin: 8px 0 0; color: var(--v3-muted); font-size: 13px; }
.v3-live { color: #6c7582; font-size: 10px; white-space: nowrap; }
.v3-live i { color: var(--v3-green); margin-right: 6px; }
.v3-chart-card { min-height: 330px; padding: 18px; border: 1px solid var(--v3-border); border-radius: 12px; background: var(--v3-panel); }
#v3PoolChart { min-height: 285px; }
#v3PoolChart .ct-series-a .ct-line, #v3PoolChart .ct-series-a .ct-point { stroke: var(--v3-orange); }
#v3PoolChart .ct-series-a .ct-area { fill: rgba(255,148,24,.13); }
.v3-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.v3-panel { min-height: 260px; border: 1px solid var(--v3-border); border-radius: 12px; background: var(--v3-panel); overflow: hidden; }
.v3-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 17px; border-bottom: 1px solid var(--v3-border-soft); }
.v3-panel-head h3 { margin: 0; color: #fff; font-size: 16px; font-weight: 850; }
.v3-panel-head a { color: #697381; font-size: 10px; text-decoration: none; }
.v3-panel-body { padding: 13px 17px; }
.v3-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--v3-border-soft); }
.v3-row:last-child { border-bottom: none; }
.v3-row span { color: #9aa3af; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-row strong, .v3-row strong a { color: #fff; font-size: 12px; font-weight: 850; }
.v3-row small { color: #68717d; font-size: 10px; text-align: right; }
.v3-empty { min-height: 190px; display: grid; place-items: center; color: #535c69; text-align: center; font-size: 12px; }
.v3-mode-wrap { padding-top: 8px; }
.v3-mode-wrap .idx-section { padding: 44px 0 0 !important; }
.v3-mode-wrap .idx-section-header { margin-bottom: 18px !important; }
.v3-mode-wrap .pool-coin-grid { margin-left: -8px; margin-right: -8px; }
.v3-mode-wrap .pool-coin-card { padding: 8px; }
.v3-mode-wrap .strategy-card { border-radius: 12px !important; background: var(--v3-panel) !important; box-shadow: none !important; }
.v3-features { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.v3-feature { min-height: 150px; padding: 18px; border: 1px solid var(--v3-border); border-radius: 12px; background: var(--v3-panel); }
.v3-feature i { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border: 1px solid rgba(255,148,24,.28); border-radius: 8px; color: var(--v3-orange); background: rgba(255,148,24,.07); }
.v3-feature h3 { margin: 0 0 7px; color: #fff; font-size: 15px; font-weight: 850; }
.v3-feature p { margin: 0; color: #6f7885; font-size: 11px; line-height: 1.6; }
.v3-footer { padding: 28px 0 38px; border-top: 1px solid var(--v3-border-soft); color: #5c6571; font-size: 11px; text-align: center; }
/* Inner pages: wider, flatter, responsive */
.main-pool { background: var(--v3-bg) !important; }
.main-pool .content-wrapper { background: var(--v3-bg) !important; padding: 18px 18px 34px !important; }
.main-pool .content.container-fluid { width: 100%; max-width: 1440px; margin: 0 auto; }
.main-pool .card { border-radius: 12px !important; border-color: var(--v3-border) !important; background: var(--v3-panel) !important; box-shadow: none !important; }
.main-pool .card-header { border-bottom: 1px solid var(--v3-border-soft) !important; }
.main-pool .table-responsive { border-radius: 9px; }
.main-pool table { min-width: 760px; }
.main-pool .main-header .navbar { background: rgba(5,7,10,.96) !important; border-bottom: 1px solid var(--v3-border-soft); }
.main-pool .main-sidebar { background: #080b0f !important; border-right: 1px solid var(--v3-border-soft); }
.main-pool .sidebar-nav .nav-link { border-radius: 8px !important; margin: 3px 8px !important; }
.main-pool .sidebar-nav li.active .nav-link { background: var(--v3-orange) !important; color: #080a0d !important; }
@media (min-width: 1600px) { .v3-page, .site-header-inner { width: min(1320px, calc(100% - 64px)); } }
@media (max-width: 980px) {
  .v3-site-nav { display: none; }
  .v3-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .v3-grid-2, .v3-features { grid-template-columns: 1fr; }
  .v3-section-head { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
  .v3-page, .site-header-inner { width: min(100%, calc(100% - 20px)); }
  .v3-hero { padding: 52px 10px 40px; }
  .v3-brand-lockup { flex-direction: column; gap: 10px; }
  .v3-brand-lockup img { width: 76px; height: 76px; }
  .v3-stats { grid-template-columns: 1fr; }
  .v3-row { grid-template-columns: 1fr; padding-block: 10px; }
  .v3-row small { text-align: left; }
  .mode-toggle { width: 100%; }
  .mode-btn { flex: 1; }
  .main-pool .content-wrapper { padding-inline: 8px !important; }
}

/* F4Pool Reference v3.1 — centered header and stable route fixes */
@media (min-width: 981px) {
  .site-header-inner {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(175px, 1fr) auto minmax(175px, 1fr);
    align-items: center;
    justify-content: initial !important;
  }
  .site-header-inner > .site-brand {
    grid-column: 1;
    justify-self: start;
  }
  .site-header-inner > .v3-site-nav {
    grid-column: 2;
    justify-self: center;
    justify-content: center;
  }
  .v3-site-nav .site-nav-cta {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Keep section headings visually centered while supporting right-side controls. */
.v3-section-head,
.v3-mode-wrap .idx-section-header {
  position: relative;
}
.v3-section-head > div:first-child,
.v3-mode-wrap .idx-section-header > div:first-child {
  flex: 1 1 auto;
}
@media (min-width: 981px) {
  .v3-section-head > div:first-child {
    text-align: center;
    padding-left: 150px;
    padding-right: 150px;
  }
  .v3-section-head > .v3-live,
  .v3-section-head > .status-pill {
    position: absolute;
    right: 0;
    bottom: 5px;
  }
  .v3-mode-wrap .idx-section-header > div:first-child {
    text-align: center;
    padding-left: 150px;
    padding-right: 150px;
  }
  .v3-mode-wrap .idx-section-header > .mode-toggle {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}