/* ShaFX UI/UX production polish (non-breaking) */
:root{
  color-scheme: dark;
}
html{ scroll-behavior:smooth; }
body{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, canvas{ max-width:100%; height:auto; }
a{ text-decoration-thickness: from-font; text-underline-offset: 2px; }
.container{ width: min(1120px, calc(100% - 28px)); margin-inline: auto; }
@media (max-width:480px){
  .container{ width: calc(100% - 20px); }
}
/* prevent horizontal scroll from long tables/code */
table{ width:100%; border-collapse: collapse; }
.table-scroll, .table-wrap, .scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
pre, code{ overflow-x:auto; }
input, select, textarea, button{ font: inherit; }
button, a{ -webkit-tap-highlight-color: transparent; }
:focus-visible{ outline: 2px solid rgba(255,204,0,.75); outline-offset: 2px; border-radius: 10px; }

/* nicer cards if page uses generic .card */
.card{
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

/* footer link group spacing */
.shafx-footer .links a{ margin: 6px 0; display:block; }