:root{
  --bg:#0b1020; --card:#121a31; --muted:#97a3b6; --text:#e7ecf5; --accent:#6ee7b7; --accent2:#60a5fa;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
  --tile: 360px; /* width of each scrolling square; set dynamically in JS to match chart cards */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(135deg,#0b1020,#101a34 60%,#0b1020);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:24px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:rgba(18,26,49,.6);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(255,255,255,.06)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px}
.logo-placeholder{height:36px;width:36px;background:rgba(255,255,255,.08);border-radius:8px}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.25)}
.btn.primary{background:linear-gradient(145deg,var(--accent2),#7dd3fc);color:#081420;border:0;font-weight:700}
.hero{padding:32px 24px 0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0}
.kpi{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px}
.kpi .label{color:var(--muted);font-size:12px}
.kpi .value{font-size:22px;font-weight:800;margin-top:6px}
@media (max-width: 800px){ .kpis{grid-template-columns:repeat(2,1fr)} }
.card{background:linear-gradient(160deg,rgba(18,26,49,.9),rgba(18,26,49,.6));border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:var(--shadow);padding:18px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1.2fr .8fr}

.ticker-section{padding-top:16px}
.ticker-card{padding:0}
.ticker-wrap{overflow:hidden;border-radius:18px}
.ticker{display:flex;gap:16px;white-space:nowrap;padding:16px;animation: ticker var(--tickerDuration,85s) linear infinite}
.ticker:hover{animation-play-state:paused}
.ticker .sq{
  display:flex;flex-direction:column;white-space:normal;
  flex: 0 0 var(--tile); /* exact width set via JS to match chart cards */
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)
}
.ticker .sq .date{font-weight:700;margin-bottom:6px;font-size:14px}
.ticker .sq .row{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px} 
.ticker .up{color:#34d399}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.chart-card{padding:14px}
.chart-title{font-weight:800;margin:0 0 8px}
.footer{padding:24px;color:var(--muted);text-align:center}
.small{font-size:12px;color:var(--muted)}
canvas.responsive{width:100%;height:240px;display:block}
.charts-grid{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.sidebar-grid{display:grid;gap:16px;grid-template-columns:1fr}
.weather-list{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.weather-pill{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;text-align:center}
.weather-pill .d{font-size:12px;color:var(--muted)}
.weather-pill .t{font-weight:700}

/* Responsive */
@media (max-width: 1200px){ .charts-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 1000px){
  .grid-2{grid-template-columns:1fr}
  .charts-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .container{padding:16px}
  .btn{padding:8px 12px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi .value{font-size:18px}
  .ticker{gap:12px;animation-duration:95s}
  .chart-card{padding:12px}
  .charts-grid{grid-template-columns:1fr} /* vertical stack on phones */
  canvas.responsive{height:200px}
  .weather-list{grid-template-columns:repeat(2,1fr)}
}