/* TradeNova mobile.css — v2 (stronger phone rules)
   Drop-in responsive layer, safe + additive.
*/

/* Base tweaks */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas, iframe, video { max-width: 100%; height: auto; }
:root{ --tb-h: 56px; }
@media (max-width: 480px){
  html { font-size: clamp(14px, 3.4vw, 16px); }
}

/* Topbar / nav */
@media (max-width: 1100px){
  .topbar{ gap:10px; padding:10px 12px; }
  .mainnav{ display: none; }
  .topbar .right{ gap:8px }
  .topbar .right .btn{ padding:6px 10px; font-size:12px }
}
/* Hamburger button */
.tn-mobile-toggle{
  display:none; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid #243041; border-radius:10px;
  background:#0f1621; color:#cfd6e4; cursor:pointer;
}
.tn-mobile-toggle:focus{ outline:none }
@media (max-width: 1100px){ .tn-mobile-toggle{ display:flex } }

/* Off-canvas nav + backdrop */
#tnMobileNav{
  position:fixed; inset:0 20% 0 0; transform:translateX(-100%);
  background:#0b0e13; border-right:1px solid #1c2634; z-index:9999;
  padding:14px; display:flex; flex-direction:column; gap:10px;
  transition:transform .2s ease;
}
@media (max-width:640px){ #tnMobileNav{ inset:0 15% 0 0; } }
#tnMobileBackdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px);
  z-index:9998; display:none;
}
#tnMobileNav.show{ transform:translateX(0) }
#tnMobileBackdrop.show{ display:block }
body.tn-nav-open{ overflow:hidden; }

#tnMobileNav a{
  display:block; padding:12px 14px; border-radius:12px;
  background:#0f1621; border:1px solid #243041; color:#cfd6e4; font-weight:600;
}
#tnMobileNav a:hover{ background:#16202c; color:#fff }

/* Grids collapse */
.tn-row{ gap:14px; }
@media (max-width: 1200px){
  .tn-row{ grid-template-columns:1fr !important; }
}
.mini-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
@media (max-width: 992px){
  .mini-row{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width: 560px){
  .mini-row{ grid-template-columns:1fr !important; }
}

/* Cards spacing */
@media (max-width: 768px){
  .tn-card{ border-radius:14px; }
  .tn-card .hd{ flex-wrap:wrap; gap:8px }
}

/* Tables → scroll buckets */
.tbl-wrap{ overflow:auto; -webkit-overflow-scrolling:touch; border-radius:12px }
@media (max-width: 900px){
  table{ min-width: 760px }
}

/* Two-column forms */
.form-2col{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width: 900px){
  .form-2col{ grid-template-columns:1fr }
}

/* Wallet / order / books columns */
.order-layout, .wallet-grid{
  display:grid; grid-template-columns:1.8fr 1.2fr; gap:14px;
}
@media (max-width: 1100px){
  .order-layout, .wallet-grid{ grid-template-columns:1fr; }
}

/* Page titles */
@media (max-width: 700px){
  .markets-hero h1, h1{ font-size:26px }
}

/* Make TradingView or chart iframes responsive */
.tv-chart, .tv-container, .chart-wrap, .tradingview-widget-container{
  width:100% !important; min-height: 60vh;
}
@media (max-width:700px){
  .tv-chart, .tv-container, .chart-wrap, .tradingview-widget-container{ min-height: 56vh }
}

/* Buttons and inputs bigger on touch */
@media (max-width: 700px){
  button, .btn, input[type="text"], input[type="number"], select{
    padding:10px 12px; border-radius:12px; font-size:14px;
  }
}

/* Common utilities if not present */
.p-16{ padding:16px } .p-12{ padding:12px }
.g-12{ gap:12px } .g-16{ gap:16px }

/* Footer / spacing fixes on small */
@media (max-width: 640px){
  .hide-sm{ display:none !important }
  .only-sm{ display:block !important }
}