/* ---------- layout fixes + mobile polish ---------- */
html,body{overflow-x:clip}
footer .wrap{justify-content:center;text-align:center}
.navr{margin-left:auto}
.mchg{display:none}
.price{flex-wrap:wrap;row-gap:4px}

@media (max-width:600px){
  main.wrap{padding-top:28px}
  .hero{padding:8px 0 32px;gap:28px}
  .hero h1{font-size:40px;line-height:1.02}
  .hero p{font-size:16px;margin:16px 0 22px}
  .hero .cta .btn{flex:1;justify-content:center}
  .horizon{inset:-40px -20px auto}
  .field{padding:14px 12px 10px}
  .legend{gap:10px;font-size:11px}

  /* tables: token, price with change underneath, risk */
  table{font-size:13px}
  th:nth-child(4),td:nth-child(4){display:none}
  td,th{padding:10px 6px}
  td.l:nth-child(2),th.l:nth-child(2){padding-left:12px}
  .tok{gap:8px}
  .tok b{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mark{width:26px;height:26px;border-radius:7px;font-size:10px}
  .mchg{display:block;font-size:12px;margin-top:2px}
  .risk{font-size:12px;gap:4px;white-space:nowrap}
  td:last-child,th:last-child{padding-right:12px}
  .tablewrap{overflow-x:visible}

  /* segmented tabs scroll sideways instead of wrapping */
  .seg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .seg::-webkit-scrollbar{display:none}
  .seg button{white-space:nowrap;flex:none}
  .trend-ctrl{width:100%;justify-content:space-between;flex-wrap:nowrap}
  .trend-ctrl .seg{flex:1;min-width:0}
  .rail{grid-auto-columns:78%}

  /* detail */
  .dhead h1{font-size:30px}
  .dhead .actions{margin-left:0;width:100%}
  .dhead .actions .btn{width:100%;justify-content:center}
  .price b{font-size:36px}
  .chart{padding:14px}
  .chart svg text{display:none}
  .facts b{font-size:18px}

  /* alerts */
  .feed .item{grid-template-columns:1fr;gap:4px;padding:14px 16px}
  .feed time{order:2;font-size:12px}
  #notif{width:100%;justify-content:center}

  .stat{padding:14px 14px 8px}
  .stat small{font-size:12px}
  .cta-band .btn{width:100%;justify-content:center}
  footer{padding-bottom:90px}
}