@font-face { font-family: Plex; src: url('/fonts/plex-300.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: Plex; src: url('/fonts/plex-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Plex; src: url('/fonts/plex-500.ttf') format('truetype'); font-weight: 500 700; font-display: swap; }
html { --bg: #f5f4f0; --card: #faf9f6; --ink: #17191c; --muted: #686c72; --line: #deded9; --field: #f0efeb; --pink: #929da8; --pink-bg: #e8eaec; --button: #17191c; --on-button: #faf9f6; --shadow: none; scroll-behavior: smooth; }
html[data-theme='dark'], html.dark { --bg: #0c0d10; --card: #14161a; --ink: #edece6; --muted: #a4a7ac; --line: #2a2d33; --field: #1b1e23; --pink: #aab7c3; --pink-bg: #232930; --button: #edece6; --on-button: #14161a; }

/* Shared appearance: keep the workspace, admin and error pages in sync. */
html { --fg: var(--ink); --pill: var(--field); --hover: var(--field); --font-mono: Consolas, monospace; --ease-ui: cubic-bezier(.2,.7,.2,1); }
body { font-family: Plex, Arial, sans-serif; font-weight: 400; }
.button { border-radius: 9px; font-weight: 400; }
.button, .icon-button, .btn-action, .btn-dep-install, .user-profile-pill, .auth-tab-btn, .admin-tab-btn, .dropdown-item, .modal-close-btn, .instance-link-btn {
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms var(--ease-ui);
}
input, textarea, select { transition: border-color 160ms ease, background-color 160ms ease; }
:where(button, a, [role="button"]):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.icon-button:focus-visible, .user-profile-pill:focus-visible, #theme-toggle:focus-visible, #btn-user-dropdown:focus-visible { outline: none !important; box-shadow: none !important; }
.button:active:not(:disabled), .icon-button:active:not(:disabled), .btn-action:active:not(:disabled) { transform: translateY(1px); }
.button:disabled:hover { filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (min-width: 761px) { html { scrollbar-gutter: stable; } }