*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #0d1117;
  --bg-panel:    #161b22;
  --bg-input:    #1c2128;
  --bg-tool:     #1a2332;
  --border:      #30363d;
  --border-soft: #21262d;
  --text:        #e6edf3;
  --text-muted:  #8b949e;
  --text-dim:    #6e7681;
  --accent:      #2f81f7;
  --accent-dim:  #1f4f8a;
  --green:       #3fb950;
  --orange:      #d29922;
  --purple:      #bc8cff;
  --red:         #f85149;
  --radius:      8px;
  --radius-sm:   4px;
}

html, body { height: 100%; }

/* ── Keyboard focus ring (WCAG 2.1 SC 2.4.7) ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Remove default outline where focus-visible already handles it */
:focus:not(:focus-visible) {
  outline: none;
}

/* On mobile the layout stacks vertically and can exceed viewport height.
   Reset html to auto so the body can grow and the page scrolls naturally. */
@media (max-width: 700px) {
  html { height: auto; }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  line-height: 1.5;
}