.finance-page{
  --f-gold:#c9a55c;
  --f-gold-soft:#e0c98f;
  --f-navy:#06182b;
  --f-panel:#0b2137;
  --f-panel-2:#0e2943;
  --f-line:rgba(255,255,255,.10);
  --f-text:#f4f6f8;
  --f-muted:#aab8c6;
  --f-positive:#8bd9b0;
  --f-negative:#ff9e9e;
  min-height:70vh;
  padding:52px 0 80px;
  background:#06182b;
  color:var(--f-text);
}

.finance-page *{
  box-sizing:border-box;
}

.finance-wrap{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
}

.finance-hero{
  margin-bottom:32px;
}

.finance-kicker{
  color:var(--f-gold);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.finance-hero h1{
  margin:0;
  font-size:clamp(30px,4vw,48px);
  line-height:1.08;
  font-weight:650;
}

.finance-hero p{
  max-width:760px;
  margin:16px 0 0;
  color:var(--f-muted);
  line-height:1.7;
  font-size:15px;
}

.finance-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:20px;
  color:var(--f-muted);
  font-size:13px;
}

.finance-meta strong{
  color:var(--f-text);
  font-weight:600;
}

.fx-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-bottom:22px;
}

.fx-card{
  border:1px solid var(--f-line);
  border-radius:18px;
  padding:22px;
  background:linear-gradient(180deg,var(--f-panel-2),var(--f-panel));
  box-shadow:0 14px 36px rgba(0,0,0,.14);
}

.fx-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.fx-code{
  font-size:13px;
  color:var(--f-gold-soft);
  font-weight:700;
  letter-spacing:.08em;
}

.fx-card-title{
  margin-top:5px;
  font-size:14px;
  color:var(--f-muted);
}

.fx-change{
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

.fx-change.positive{color:var(--f-positive)}
.fx-change.negative{color:var(--f-negative)}
.fx-change.neutral{color:var(--f-muted)}

.fx-main-value{
  margin-top:22px;
  font-size:clamp(30px,4vw,42px);
  font-weight:650;
  letter-spacing:-.02em;
}

.fx-main-value small{
  font-size:14px;
  color:var(--f-muted);
  font-weight:500;
}

.fx-detail{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

.fx-detail-item{
  padding-top:12px;
  border-top:1px solid var(--f-line);
}

.fx-detail-label{
  font-size:12px;
  color:var(--f-muted);
}

.fx-detail-value{
  margin-top:5px;
  font-size:16px;
  font-weight:600;
}

.fx-date{
  margin-top:15px;
  color:var(--f-muted);
  font-size:12px;
}

.fx-panel{
  border:1px solid var(--f-line);
  border-radius:20px;
  padding:24px;
  background:var(--f-panel);
  box-shadow:0 18px 42px rgba(0,0,0,.16);
}

.fx-panel-head{
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:flex-start;
  margin-bottom:22px;
}

.fx-panel-title h2{
  margin:0;
  font-size:22px;
}

.fx-panel-title p{
  margin:7px 0 0;
  color:var(--f-muted);
  font-size:13px;
  line-height:1.5;
}

.fx-switches{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.fx-chip,
.fx-period,
.fx-action{
  appearance:none;
  border:1px solid var(--f-line);
  background:#081d31;
  color:var(--f-muted);
  border-radius:10px;
  min-height:38px;
  padding:0 13px;
  cursor:pointer;
  font:inherit;
  font-size:13px;
  transition:.18s ease;
}

.fx-chip:hover,
.fx-period:hover,
.fx-action:hover{
  border-color:rgba(201,165,92,.6);
  color:#fff;
}

.fx-chip.active,
.fx-period.active{
  color:#06182b;
  background:var(--f-gold);
  border-color:var(--f-gold);
  font-weight:700;
}

.fx-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.fx-periods{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.fx-custom{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.fx-custom input{
  min-height:38px;
  border:1px solid var(--f-line);
  background:#081d31;
  color:#fff;
  border-radius:10px;
  padding:0 10px;
  font:inherit;
  font-size:13px;
  color-scheme:dark;
}

.fx-action.gold{
  border-color:var(--f-gold);
  background:transparent;
  color:var(--f-gold-soft);
  font-weight:650;
}

.fx-chart-shell{
  position:relative;
  width:100%;
  height:410px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:#071b2d;
  overflow:hidden;
}

#fx-chart{
  display:block;
  width:100%;
  height:100%;
}

.fx-tooltip{
  position:absolute;
  display:none;
  pointer-events:none;
  z-index:5;
  min-width:150px;
  padding:10px 12px;
  border:1px solid rgba(201,165,92,.4);
  border-radius:10px;
  background:rgba(4,18,31,.95);
  color:#fff;
  font-size:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}

.fx-tooltip strong{
  display:block;
  margin-top:4px;
  color:var(--f-gold-soft);
  font-size:14px;
}

.fx-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}

.fx-stat{
  border-top:1px solid var(--f-line);
  padding-top:12px;
}

.fx-stat span{
  display:block;
  color:var(--f-muted);
  font-size:12px;
}

.fx-stat strong{
  display:block;
  margin-top:5px;
  font-size:15px;
}

.fx-footer{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--f-line);
}

.fx-source{
  max-width:780px;
  color:var(--f-muted);
  font-size:12px;
  line-height:1.65;
}

.fx-loading{
  color:var(--f-muted);
}

@media (max-width:800px){
  .finance-page{
    padding-top:34px;
  }

  .finance-wrap{
    width:min(100% - 24px,1180px);
  }

  .fx-cards{
    grid-template-columns:1fr;
  }

  .fx-panel{
    padding:16px;
  }

  .fx-panel-head{
    display:block;
  }

  .fx-switches{
    margin-top:16px;
  }

  .fx-chart-shell{
    height:340px;
  }

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

  .fx-footer{
    display:block;
  }

  .fx-footer .fx-action{
    margin-top:16px;
    width:100%;
  }
}

@media (max-width:520px){
  .fx-custom{
    width:100%;
  }

  .fx-custom input{
    flex:1;
    min-width:130px;
  }

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

  .fx-chart-shell{
    height:300px;
  }
}