/* base.css — page base elements */
:root { font-family: system-ui, Segoe UI, Roboto, sans-serif; color-scheme: light dark; }

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0px 2rem;
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.container { width: min(1100px, calc(100% - 32px)); margin: 0 auto; }
.center-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); }
h1, .title { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 700; }
.meta { color: var(--muted); font-size: .95rem; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-7) var(--space-6);
  margin: 0 auto;
  width: min(1100px, 100%);
}
.hidden { display:none !important; }
.text-center { text-align:center; }
html, body {
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* Firefox-style scrollbars (only Firefox cares about this) */
html {
  scrollbar-width: thin;                  /* "auto" | "thin" | "none" */
  scrollbar-color: #00aeff #000000;       /* thumb color | track color */
}

/* Chromium / WebKit scrollbars */
html::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track {
  background: #000000;
  border-left: 1px solid #72d0fcff;
}

html::-webkit-scrollbar-thumb {
  background-color: #00aeff;
  border-radius: 999px;
  border: 2px solid #72d0fcff; /* pill thumb */
}

html::-webkit-scrollbar-thumb:hover {
  background-color: #00aeff;
}