/* ── Raw Material Price Tracker ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0b0f1a;
  --bg-card:#111827;
  --bg-card-hover:#1a2332;
  --border:rgba(75,85,99,0.25);
  --text:#e2e8f0;
  --text-muted:#94a3b8;
  --text-dim:#64748b;
  --accent:#60a5fa;
  --accent-dim:rgba(96,165,250,0.15);
  --green:#22c55e;
  --red:#ef4444;
  --orange:#f59e0b;
  --blue:#3b82f6;
  --purple:#8b5cf6;
  --cyan:#06b6d4;
}

html{scroll-behavior:smooth}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans SC",sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}

/* ── Header ── */
.header{
  text-align:center;
  padding:28px 20px 12px;
  border-bottom:1px solid var(--border);
  position:relative;
}

.back-link{
  position:absolute;
  left:24px;top:28px;
  font-size:13px;
  color:var(--text-muted);
  text-decoration:none;
  transition:color 0.2s;
}
.back-link:hover{color:var(--accent)}

.header h1{
  font-size:24px;
  font-weight:600;
  letter-spacing:1px;
}

.subtitle{
  font-size:13px;
  color:var(--text-muted);
  margin-top:4px;
}

/* ── Main Layout ── */
.main{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  max-width:1600px;
  margin:0 auto;
  padding:20px;
}

.column-title{
  font-size:18px;
  font-weight:500;
  margin-bottom:4px;
}

.column-desc{
  font-size:12px;
  color:var(--text-dim);
  margin-bottom:16px;
}

/* ── Chart Cards ── */
.chart-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
  margin-bottom:16px;
  transition:border-color 0.2s, box-shadow 0.2s;
}

.chart-card:hover{
  border-color:rgba(96,165,250,0.2);
  box-shadow:0 0 16px rgba(96,165,250,0.06);
}

.chart-card h3{
  font-size:15px;
  font-weight:500;
  margin-bottom:2px;
}

.chart-card .chart-route{
  font-size:12px;
  color:var(--text-dim);
  margin-bottom:10px;
}

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

.chart-wrapper canvas{
  width:100% !important;
  height:100% !important;
}

/* ── Card Header Row (title + badge) ── */
.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:4px;
}

/* ── Data Source Badges ── */
.data-badge{
  font-size:10px;
  padding:2px 8px;
  border-radius:4px;
  letter-spacing:0.3px;
  font-weight:500;
  background:rgba(96,165,250,0.12);
  color:var(--accent);
  border:1px solid rgba(96,165,250,0.2);
}

.badge-real{
  background:rgba(34,197,94,0.12);
  color:var(--green);
  border-color:rgba(34,197,94,0.25);
}

.badge-sim{
  background:rgba(245,158,11,0.12);
  color:var(--orange);
  border-color:rgba(245,158,11,0.25);
}

/* ── Price Summary ── */
.price-summary{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}

.price-item{
  flex:1;
  min-width:100px;
  background:rgba(15,23,42,0.5);
  border:1px solid var(--border);
  border-radius:6px;
  padding:8px 10px;
  text-align:center;
}

.price-item .label{
  font-size:10px;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.price-item .value{
  font-size:16px;
  font-weight:600;
  margin-top:2px;
}

.price-item .unit{
  font-size:10px;
  color:var(--text-muted);
  margin-left:2px;
}

.price-item .range{
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:var(--text-dim);
  margin-top:4px;
}

.price-item .range .high{color:var(--red)}
.price-item .range .low{color:var(--green)}

/* ── Change colors ── */
.green{color:var(--green);font-weight:500}
.red{color:var(--red);font-weight:500}

/* ── Material color tags ── */
.material-steel .price-item .value{color:#ef4444}
.material-aluminum .price-item .value{color:#f59e0b}
.material-copper .price-item .value{color:#f97316}
.material-iron_ore .price-item .value{color:#8b5cf6}
.material-pp .price-item .value{color:#06b6d4}
.material-europe_container .price-item .value{color:var(--cyan)}

/* ── Data Source Footer ── */
.data-source{
  font-size:10px;
  color:var(--text-dim);
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid var(--border);
  line-height:1.6;
}

/* ── Footer ── */
.footer{
  text-align:center;
  padding:20px;
  color:var(--text-dim);
  font-size:11px;
  border-top:1px solid var(--border);
  margin-top:20px;
}

.footer .disclaimer{
  font-size:10px;
  color:var(--text-dim);
  margin-top:6px;
  opacity:0.7;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}

/* ── Loading / Error ── */
.loading,.error{
  text-align:center;
  padding:60px 20px;
  color:var(--text-muted);
  font-size:15px;
}
.error{color:var(--red)}

/* ── Responsive ── */
@media(max-width:900px){
  .main{grid-template-columns:1fr}
  .back-link{position:static;display:block;margin-bottom:8px;text-align:center}
}