::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

::selection {
  background: var(--accent-glow);
  color: var(--text-primary);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.mb-24 {
  margin-bottom: 24px;
}

.control-stack {
  display: grid;
  gap: 8px;
  min-width: 220px;
}

.preformatted {
  margin: 0;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 640px) {
  .nav-container       { padding: 14px 20px; gap: 16px; }
  .app-main            { padding: 28px 0 48px; }
  .container           { padding: 0 16px; }
  .flash-container     { top: calc(var(--nav-height) + 8px); }
  .footer-container    { padding: 0 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-stack        { align-items: flex-start; }
}