/* HYPE Fundamentals — mobile benchmark only; loaded AFTER existing chart CSS */
@media (max-width: 720px), (min-width: 721px) and (max-width: 1060px) and (orientation: landscape) and (max-height: 500px) and (any-pointer: coarse) {
  .hero-panel { overflow: visible; }
  .hero-panel {
    display:grid !important;
    grid-template-columns:minmax(0, .62fr) minmax(0, 1fr) !important;
    column-gap:4px !important;
    align-content:start !important;
  }
  .hero-panel .hero-top {
    grid-column:1 / -1;
    grid-row:1;
    display: grid !important;
    grid-template-columns: minmax(0, 43%) minmax(0, 57%) !important;
    align-items: start !important;
    column-gap: 0 !important;
    min-width: 0;
  }
  .hero-panel .hero-top .coin-header {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
  }
  .hero-panel .coin-header h2 {
    font-size: clamp(14px, 4vw, 19px) !important;
    line-height: 1.12 !important;
    overflow-wrap: normal;
    min-width: 0;
  }
  .hero-panel #heroLogo {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }
  .hero-panel .hf-compact-hero-chart-host {
    width:100%;
    min-width:0;
    height:70px;
    display:flex;
    align-items:flex-end;
  }
  .hero-panel .hf-compact-hero-chart-host #heroSpark.sparkline-wrap {
    width:100% !important;
    max-width:none !important;
    height:68px !important;
    min-height:0 !important;
    min-width:0 !important;
    flex:1 1 auto !important;
    margin:0 !important;
  }
  .hero-panel .hf-compact-hero-chart-host #heroSpark svg {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:67px !important;
  }
  .hero-panel .hero-price-line {
    grid-column:1 / -1;
    grid-row:2;
    display:grid !important;
    grid-template-columns:minmax(0, .62fr) minmax(0, 1fr) !important;
    margin: 0 0 5px !important;
    padding:0 !important;
    gap:4px !important;
    align-items:center !important;
    min-height:0 !important;
  }
  .hero-panel .hero-price-line .price-stack {
    grid-column:1;
    grid-row:1;
    min-width:0 !important;
  }
  .hero-panel .hero-price-line .verdict-box {
    display:none !important;
  }
  .hero-panel #heroCombinedControls {
    grid-column:2;
    grid-row:2;
    align-self:center !important;
    justify-self:stretch !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  .hero-panel #heroCombinedControls .hf-mobile-combined-title {
    font-size:clamp(8px, 2.4vw, 11px) !important;
  }
  .hero-panel .hero-metrics-header {
    display:none !important;
    margin:0 !important;
  }
  .hero-panel #heroStats {
    grid-column:1 / -1;
    grid-row:3;
  }
  .hero-panel #heroCombinedControls [data-mobile-combined-period] {
    height:31px !important;
    min-height:31px !important;
    padding-top:3px !important;
    padding-bottom:3px !important;
  }
  .hero-panel #heroStats.hf-hero-clean {
    margin-top:0 !important;
    margin-bottom:0 !important;
    gap:4px !important;
  }
  .hero-panel #heroStats.hf-hero-clean .hf-grid-tile {
    min-height: 61px !important;
    height: 61px !important;
    padding: 3px 3px 2px !important;
    justify-content: flex-start !important;
    gap: 3px !important;
  }
  .hero-panel #heroStats.hf-hero-clean .hf-tile-title,
  .hero-panel #heroStats.hf-hero-clean .hf-tile-value {
    font-size:inherit;
    flex-shrink:0;
  }
  .hero-panel #heroStats.hf-hero-clean .hf-tile-title {
    font-size: clamp(8px,2.3vw,12px) !important;
    line-height:1.08 !important;
  }
  .hero-panel #heroStats.hf-hero-clean .hf-tile-value {
    font-size: clamp(11px,3.3vw,21px) !important;
    line-height:1.1 !important;
  }
  .hero-panel #heroStats.hf-hero-clean .hf-tile-info {
    position:absolute !important;
    bottom:1px !important;
    right:2px !important;
    min-height:17px !important;
    width:17px !important;
    height:17px !important;
  }
  .hero-panel #heroStats.hf-hero-clean .hero-stat-hint {
    display:none !important;
  }
}
@media (max-width:350px) {
  .hero-panel .hero-top {grid-template-columns:45% 55% !important;}
  .hero-panel #heroLogo {width:32px !important;height:32px !important;flex-basis:32px !important;}
}