/* ===== API-97 Global Layout (Body + Content Container) ===== */
:root{
  --pri:#3f5efb; --sec:#00c6ff; --acc:#49ff7c; --warn:#ffe76b; --danger:#fa6e4f;
  --bg:#f5fcfa; --ink:#0f274a;
  --radius:26px;
}

/* Body: clean, responsive typography & spacing */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; padding:0; min-height:100dvh;
  background:var(--bg);
  color:#102030;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;
  /* Mobile-friendly base font that scales up on larger screens */
  font-size:clamp(14px, 1.6vw, 16px);
}

/* Utility: a simple full-width section if needed (optional) */
.section{width:100%}

/* Content container:
   - mobile: near full width with safe side gutters
   - desktop: centered, roomy but not too wide
   - same animated multicolor border as your referral page
*/
@keyframes api97-hue { 100%{ filter:hue-rotate(360deg);} }

.content-container{
  /* Width & centering */
  width:min(1200px, 100% - clamp(16px, 4vw, 48px));  /* smart side padding */
  margin:clamp(24px, 5vh, 42px) auto;

  /* Card look + animated rainbow border */
  border-radius:var(--radius);
  border:3px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(120deg,var(--sec),var(--warn),var(--acc),var(--pri),var(--danger)) border-box;
  animation:api97-hue 8s linear infinite;
  box-shadow:0 10px 30px rgba(63,94,251,.08);

  /* Inner padding auto-scales with screen size */
  padding:clamp(14px, 2.2vw, 28px);
}

/* Prevent any table or wide block from breaking layout on mobile */
.content-container .table-wrap,
.content-container .table-responsive,
.content-container table{
  width:100%;
}
.content-container .table-wrap,
.content-container .table-responsive{
  overflow-x:auto; /* auto left-right scroll on small screens */
}

/* Optional: remove border but keep sizing (add .no-border alongside) */
.content-container.no-border{
  border:none;
  background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}

/* Tiny screens: add a little top spacing */
@media (max-width:420px){
  .content-container{ margin-top:28px; }
}