:root{
  --bg: #060907;
  --bg-panel: #0b0f0c;
  --bg-card: #0d1210;
  --line: rgba(76,175,80,0.16);
  --line-strong: rgba(76,175,80,0.32);
  --green: #4CAF50;
  --green-dim: #2E7D32;
  --red: #f2555a;
  --text: #e7ece9;
  --text-dim: #8a9a91;
  --text-faint: #52625a;
  --mono: "Consolas", "SFMono-Regular", "Courier New", monospace;
  --sans: "Segoe UI", Arial, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  overflow-x:hidden;
}

body{
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ---------- Header ---------- */
.topbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:clamp(10px, 1.1vw, 20px) clamp(16px, 2.1vw, 40px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #0a0e0b 0%, #070a08 100%);
}

.brand{display:flex;align-items:center;gap:clamp(10px, 1.1vw, 22px);}

.brand-logo{
  height:clamp(30px, 3.5vw, 68px);
  width:auto;
  object-fit:contain;
}
.brand-mark.small{
  height:clamp(16px, 1.6vw, 30px);
  width:auto;
  object-fit:contain;
}

.brand-sub{font-size:clamp(9px, 0.85vw, 16px);color:var(--text-dim);letter-spacing:1px;}

.dot{
  width:clamp(6px, 0.5vw, 10px);height:clamp(6px, 0.5vw, 10px);border-radius:50%;
  background:var(--green);
  animation:pulse 1.4s infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.3;}
}

.clock{text-align:right;}
.clock-time{font-family:var(--mono);font-size:clamp(18px, 2.5vw, 48px);font-weight:700;color:var(--green);letter-spacing:1px;}
.clock-date{font-size:clamp(9px, 0.85vw, 16px);color:var(--text-dim);letter-spacing:1px;text-transform:uppercase;}

/* ---------- Ticker ---------- */
.ticker-wrap{
  flex:0 0 auto;
  border-bottom:1px solid var(--line);
  background:var(--bg-panel);
  overflow:hidden;
}
.ticker{
  display:flex;
  gap:clamp(20px, 3.3vw, 64px);
  padding:clamp(8px, 0.95vw, 18px) clamp(16px, 2.1vw, 40px);
  overflow-x:auto;
  scrollbar-width:none;
}
.ticker::-webkit-scrollbar{display:none;}
.ticker-loading{color:var(--text-dim);font-size:clamp(10px, 0.85vw, 16px);}
.ticker-group{display:contents;}

.ticker-item{
  display:flex;align-items:center;gap:clamp(8px, 0.85vw, 16px);
  white-space:nowrap;
  font-family:var(--mono);
}
.ticker-item .name{color:var(--text-dim);font-size:clamp(11px, 1vw, 19px);letter-spacing:1px;}
.ticker-item .price{font-weight:700;font-size:clamp(16px, 1.7vw, 32px);}
.ticker-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:clamp(3px, 0.36vw, 7px) clamp(7px, 0.73vw, 14px);
  border-radius:6px;
  font-size:clamp(11px, 1vw, 19px);
  font-weight:700;
}
.ticker-badge.up{background:rgba(76,175,80,0.14);color:var(--green);}
.ticker-badge.down{background:rgba(242,85,90,0.12);color:var(--red);}

/* ---------- Content ---------- */
.content{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:clamp(10px, 1vw, 20px) clamp(16px, 2.1vw, 40px) clamp(8px, 0.85vw, 16px);
}

.section-head{
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:clamp(8px, 0.95vw, 18px);
}
.section-title{
  display:flex;align-items:center;gap:clamp(7px, 0.73vw, 14px);
  font-size:clamp(13px, 1.2vw, 23px);font-weight:700;letter-spacing:1px;
}
.section-title .bar{
  width:clamp(3px, 0.31vw, 6px);height:clamp(13px, 1.35vw, 26px);background:var(--green);
  border-radius:3px;
}
.section-meta{
  font-size:clamp(8px, 0.68vw, 13px);color:var(--text-faint);
  text-align:right;line-height:1.7;letter-spacing:0.5px;
}
.refresh-icon{
  display:inline-block;color:var(--green);margin-right:4px;
  animation:spin 3s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
#last-update-ref{color:var(--green);}

.commodities-head{flex:0 0 auto; margin-top:clamp(10px, 1.15vw, 22px);}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(10px, 1.25vw, 24px);
}

#cards.cards-grid{
  flex:1 1 0;
  min-height:0;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:1fr;
  max-width:900px;
}

#commodity-cards.cards-grid{
  flex:0 0 auto;
}

.commodity-card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:clamp(12px, 1.25vw, 24px) clamp(14px, 1.55vw, 30px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(6px, 0.6vw, 12px);
}
.commodity-card .pair-name{font-size:clamp(10px, 0.9vw, 17px);color:var(--text-dim);letter-spacing:1px;}
.commodity-card .pair-value{font-family:var(--mono);font-size:clamp(26px, 2.9vw, 56px);font-weight:800;}
.commodity-foot{
  display:flex;justify-content:space-between;align-items:center;
  font-size:clamp(9px, 0.73vw, 14px);color:var(--text-faint);letter-spacing:0.5px;
}
@media (max-width:1100px){.cards-grid{grid-template-columns:repeat(2,1fr);} #cards.cards-grid{max-width:none;}}
@media (max-width:700px){.cards-grid{grid-template-columns:1fr;}}

.card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:clamp(12px, 1.25vw, 24px) clamp(13px, 1.35vw, 26px);
  display:flex;
  flex-direction:column;
  min-height:0;
}

.card-stats{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(5, auto);
  gap:clamp(8px, 0.95vw, 18px);
  margin-bottom:clamp(8px, 0.85vw, 16px);
}
.stat .label{font-size:clamp(8px, 0.68vw, 13px);color:var(--text-faint);letter-spacing:1px;margin-bottom:5px;}
.stat .value{font-family:var(--mono);font-size:clamp(11px, 1vw, 19px);color:var(--text);}
.stat.variacao .value{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:5px;font-weight:700;}
.stat.variacao .value.up{background:rgba(76,175,80,0.14);color:var(--green);}
.stat.variacao .value.down{background:rgba(242,85,90,0.12);color:var(--red);}

.card-main{
  flex:0 0 auto;
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:10px;
}
.pair-name{font-size:clamp(10px, 0.9vw, 17px);color:var(--text-dim);letter-spacing:1px;margin-bottom:6px;}
.pair-value{font-family:var(--mono);font-size:clamp(26px, 2.7vw, 52px);font-weight:800;}

.chart{
  display:block;
  flex:1 1 auto;
  min-height:0;
  width:100%;
  margin:6px 0 10px;
}
.chart path.area{fill:url(#chartGradient);opacity:0.35;}
.chart path.line{fill:none;stroke:var(--green);stroke-width:2;}
.chart .axis-label{fill:var(--text-faint);font-size:8px;font-family:var(--mono);}

.card-foot{
  flex:0 0 auto;
  display:flex;justify-content:space-between;align-items:center;
}
.mode-toggle{display:flex;gap:clamp(4px, 0.42vw, 8px);}
.mode-btn{
  background:transparent;border:1px solid var(--line);color:var(--text-dim);
  font-size:clamp(9px, 0.68vw, 13px);letter-spacing:0.5px;padding:clamp(4px, 0.42vw, 8px) clamp(7px, 0.73vw, 14px);border-radius:6px;cursor:pointer;
  font-family:var(--sans);
}
.mode-btn.active{background:var(--green);color:#03170a;border-color:var(--green);font-weight:700;}
.live-ref{font-size:clamp(9px, 0.68vw, 13px);color:var(--text-faint);display:flex;align-items:center;gap:6px;}
.live-ref .dot{width:clamp(4px, 0.36vw, 7px);height:clamp(4px, 0.36vw, 7px);}

/* ---------- Footer ---------- */
.statusbar{
  flex:0 0 auto;
  display:flex;justify-content:center;align-items:center;
  padding:clamp(8px, 0.73vw, 14px) 24px;
  border-top:1px solid var(--line);
  background:var(--bg-panel);
  font-size:clamp(9px, 0.78vw, 15px);color:var(--text-dim);letter-spacing:0.5px;
}
.status-center{display:flex;align-items:center;gap:clamp(6px, 0.6vw, 12px);}

/* ---------- Idle video (attract mode) ---------- */
.idle-video{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:999;
  background:#000;
  display:none;
  align-items:center;
  justify-content:center;
}
.idle-video.show{display:flex;}
body.video-playing{overflow:hidden;}
.idle-video video{width:100%;height:100%;object-fit:contain;}