/* .. HEADER .. */
.headerstat { display: flex; align-items: center; gap: 18px; margin-bottom: 32px; padding-bottom: 22px; border-bottom: 1.5px solid #e0dcd4; }
.logo-wrap { position: relative; flex-shrink: 0; }
.header-text h1 { font-size: 22px; font-weight: 700; color: #1c1a16; letter-spacing: -0.3px; }
.header-text p  { font-size: 13px; color: #5a5650; margin-top: 3px; }
.header-right   { margin-left: auto; text-align: right; }


/* .. SECTION TITLE .. */
.sec-title {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.sec-title-text {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #5a5650;
}
.sec-title-badge {
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 10px; border: 1px solid;
}
.badge-today    { background: #fff5ef; color: #c04e10; border-color: #ffd4b8; }
.badge-yesterday{ background: #e8f1fb; color: #1a5fa8; border-color: #c0d8f4; }
.sec-title::after { content:''; flex:1; height:1px; background:#e0dcd4; }


/* .. METRICS .. */
.metrics-today     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 28px; }
.metrics-yesterday { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 28px; }

.met {
  background: #ffffff; border: 1px solid #e0dcd4;
  border-radius: 12px; padding: 16px 16px 13px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 12px rgba(0,0,0,.04); position: relative; overflow: hidden;
}
.met::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; border-radius:12px 12px 0 0;
}
.met.rank::before   { background: linear-gradient(90deg, #b07a10, #f0c040); }
.met.uip::before    { background: linear-gradient(90deg, #f26522, #f9a060); }
.met.uss::before    { background: linear-gradient(90deg, #1a5fa8, #4a8fd0); }
.met.pv::before     { background: linear-gradient(90deg, #7c3aed, #a870f0); }
.met.rip::before    { background: linear-gradient(90deg, #1a7a40, #40c080); }
.met.change::before { background: linear-gradient(90deg, #d42b2b, #e86060); }

.met-lbl { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9a9690; margin-bottom: 8px; }
.met-val { font-family: 'IBM Plex Mono', monospace; font-size: 18px; font-weight: 600; color: #1c1a16; letter-spacing: -.5px; line-height: 1; }
.met.rank .met-val { color: #b07a10; font-size: 28px; }
.met-sub  { font-size: 11px; color: #9a9690; margin-top: 5px; }



@media (max-width: 680px) {
  .metrics-today     { grid-template-columns: repeat(3,1fr); }
  .metrics-yesterday { grid-template-columns: repeat(3,1fr); }
  .links-grid        { grid-template-columns: 1fr; }
  .headerstat { flex-wrap: wrap; }
  .header-right { margin-left: 0; }
}
@media (max-width: 440px) {
  .metrics-today     { grid-template-columns: repeat(2,1fr); }
  .metrics-yesterday { grid-template-columns: repeat(2,1fr); }
}