/* Base Styles & Reset */
*{box-sizing:border-box}

html{height:100%}

body{
  margin:0; font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,Inter,Ubuntu;
  background: var(--bg-grad);
  color:var(--text);
  display:flex; flex-direction:column;
  min-height:100vh;
  overflow-y:auto;
  font-size: calc(15px * var(--font-scale));
}

body.text-sm{--font-scale:.9}
body.text-md{--font-scale:1}
body.text-lg{--font-scale:1.15}

/* Auth gating */
body.auth-required header,
body.auth-required main{display:none}
body.auth-required > :not(#profileGate){display:none}

/* Main content area */
main{padding:18px 16px 110px; flex:1 1 auto}

section{display:none}
section.active{display:block; animation:fadeIn .3s ease-out forwards}

/* Typography */
h1{font-size:20px; margin:0; letter-spacing:.2px}
h3{font-size:20px; font-weight:600; margin:0}
h4{font-size:16px; font-weight:600; margin:0}

.title{font-weight:600; color:#e2e8f0; margin:0 0 8px 0}
.muted{color:var(--muted); font-size:13px}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}

/* Links */
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* Utilities */
.hidden{display:none !important}
.grow{flex:1 1 auto}
.hr{height:1px; background:var(--border); opacity:.3; margin:12px 0}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Footer */
footer{border-top:1px solid var(--border); background:color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(6px); padding:10px 16px; text-align:center; font-size:12.5px; color:var(--muted)}