/*
  The browser's own UI, made to follow the theme. Shared by every page: system.css (painel web, entry page,
  component sheet) and ae.css (the plugin's simulated After Effects) both rely on it.

  Without this the browser draws scrollbars with arrows on a white track, the date picker, select popups and
  autofill in its light scheme, and a scrollbar that appears pushes content sideways by its width. Sources
  (MDN, via context7, read 2026-10-03): color-scheme, scrollbar-gutter, ::-webkit-scrollbar.

  The scrollbar is drawn with ::-webkit-scrollbar, which every Chromium and Safari version honours. The standard
  scrollbar-width and scrollbar-color are kept for the fallback only: in Chrome 121+ they replace the
  ::-webkit-scrollbar rules, so setting both would make the look depend on the browser's version.
  Each scroller that can overflow also reserves its gutter (scrollbar-gutter: stable, set where it scrolls) so
  that content keeps its place whether the scrollbar shows or not.
*/
:root {
  color-scheme: dark;
  accent-color: #ffff06;
  -webkit-tap-highlight-color: transparent;
  --nu-size: 10px;                       /* the gutter's width; plugin.css's padding gives it back from 16px */
  --nu-thumb: rgb(255 255 255 / .28);
  --nu-thumb-hover: rgb(255 255 255 / .5);
}

::-webkit-scrollbar { width: var(--nu-size); height: var(--nu-size); background: transparent; }
/* A faint rail, so the reserved gutter reads as part of the layout on every screen, scrolling or not. */
::-webkit-scrollbar-track { background: rgb(255 255 255 / .035); }
/* A square 6px bar inside the 10px gutter: the transparent border is the margin. */
::-webkit-scrollbar-thumb { min-width: 40px; min-height: 40px; background-color: var(--nu-thumb); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-thumb:hover { background-color: var(--nu-thumb-hover); }
::-webkit-scrollbar-thumb:active { background-color: #ffff06; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--nu-thumb) rgb(255 255 255 / .035); }
}

::selection { background: #ffff06; color: #000; }
input, textarea { caret-color: #ffff06; }

/* Autofill paints its own yellow or blue fill; this keeps the field's own surface. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: currentColor; caret-color: #ffff06;
  transition: background-color 600000s 0s, color 600000s 0s;
}
/* Widgets the browser injects into fields: password reveal, saved-credential key, search clear. */
input::-ms-reveal, input::-ms-clear { display: none; }
input::-webkit-credentials-auto-fill-button, input::-webkit-contacts-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
img { -webkit-user-drag: none; }