@codemation/next-host 0.0.1

package/app/globals.css

@@ -0,0 +1,997 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(0.985 0.002 247);
+  --foreground: oklch(0.2 0.02 255);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.2 0.02 255);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.2 0.02 255);
+  --primary: oklch(0.488 0.2 264);
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.96 0.01 255);
+  --secondary-foreground: oklch(0.25 0.02 255);
+  --muted: oklch(0.96 0.01 255);
+  --muted-foreground: oklch(0.5 0.02 255);
+  --accent: oklch(0.96 0.01 255);
+  --accent-foreground: oklch(0.25 0.02 255);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.99 0 0);
+  --border: oklch(0.9 0.01 255);
+  --input: oklch(0.9 0.01 255);
+  --ring: oklch(0.55 0.12 264);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.975 0.01 255);
+  --sidebar-foreground: oklch(0.2 0.02 255);
+  --sidebar-primary: oklch(0.488 0.2 264);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.94 0.02 255);
+  --sidebar-accent-foreground: oklch(0.25 0.02 255);
+  --sidebar-border: oklch(0.9 0.01 255);
+  --sidebar-ring: oklch(0.55 0.12 264);
+}
+
+.dark {
+  --background: oklch(0.145 0.02 255);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.2 0.02 255);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.2 0.02 255);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.65 0.18 264);
+  --primary-foreground: oklch(0.15 0.02 255);
+  --secondary: oklch(0.28 0.02 255);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.28 0.02 255);
+  --muted-foreground: oklch(0.7 0.02 255);
+  --accent: oklch(0.28 0.02 255);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.2 0.02 255);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.65 0.18 264);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.28 0.02 255);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Legacy class names (pre-Tailwind) — map old custom properties to tokens */
+:root {
+  --sidebar-width: 16rem;
+  --sidebar-width-collapsed: 3.5rem;
+  --font-sans: var(--font-league-spartan), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 0.75rem;
+  --spacing-lg: 1rem;
+  --spacing-xl: 1.5rem;
+  --spacing-2xl: 2rem;
+  --btn-radius: 2px;
+  --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --btn-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.08);
+  --btn-shadow-active: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  --color-bg: var(--background);
+  --color-surface: var(--card);
+  --color-surface-elevated: var(--card);
+  --color-border: var(--border);
+  --color-border-subtle: hsl(214 12% 94%);
+  --color-text: var(--foreground);
+  --color-text-muted: var(--muted-foreground);
+  --color-text-subtle: hsl(215 14% 60%);
+  --color-primary: hsl(221 83% 53%);
+  --color-primary-hover: hsl(221 83% 45%);
+  --color-primary-active: hsl(221 83% 40%);
+  --color-link: hsl(221 83% 53%);
+  --color-link-hover: hsl(221 83% 45%);
+  --sidebar-bg: var(--sidebar);
+  --sidebar-text: var(--sidebar-foreground);
+  --sidebar-text-muted: var(--muted-foreground);
+  --sidebar-item-hover: var(--sidebar-accent);
+  --sidebar-item-active: var(--sidebar-accent);
+  --sidebar-item-active-text: var(--sidebar-primary);
+}
+/* App layout */
+.app-layout {
+  display: flex;
+  height: 100vh;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.app-layout--resizing {
+  user-select: none;
+}
+
+.app-sidebar {
+  position: relative;
+  background: var(--sidebar-bg);
+  border-right: 1px solid var(--sidebar-border);
+  display: flex;
+  flex-direction: column;
+  transition:
+    width 0.2s ease,
+    min-width 0.2s ease;
+}
+
+.app-sidebar--collapsed {
+  transition:
+    width 0.2s ease,
+    min-width 0.2s ease;
+}
+
+.app-sidebar__resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 4px;
+  height: 100%;
+  cursor: col-resize;
+  background: transparent;
+}
+
+.app-sidebar__resize-handle:hover,
+.app-layout--resizing .app-sidebar__resize-handle {
+  background: var(--color-primary);
+  opacity: 0.3;
+}
+
+.app-sidebar__tooltip-wrap {
+  position: relative;
+  display: flex;
+  overflow: visible;
+}
+
+.app-sidebar__tooltip-wrap::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  left: 100%;
+  margin-left: 8px;
+  top: 50%;
+  transform: translateY(-50%) translateX(-4px);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-text);
+  color: var(--color-surface);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border-radius: var(--spacing-sm);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+  z-index: 1000;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.app-sidebar--collapsed .app-sidebar__tooltip-wrap:hover::after {
+  opacity: 1;
+  transform: translateY(-50%) translateX(0);
+}
+
+.app-sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--spacing-lg);
+  height: 3.5rem;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--sidebar-border);
+}
+
+.app-sidebar__brand {
+  font-weight: 600;
+  font-size: 1.125rem;
+  text-decoration: none;
+  color: var(--sidebar-text);
+}
+
+.app-sidebar__brand:hover {
+  color: var(--color-primary);
+}
+
+.app-sidebar__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--btn-radius);
+  background: transparent;
+  color: var(--sidebar-text-muted);
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease,
+    transform 0.1s ease;
+}
+
+.app-sidebar__toggle:hover {
+  background: var(--sidebar-item-hover);
+  color: var(--sidebar-text);
+}
+
+.app-sidebar__toggle:active {
+  transform: scale(0.95);
+}
+
+.app-sidebar__nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.app-sidebar__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: var(--btn-radius);
+  text-decoration: none;
+  color: var(--sidebar-text);
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+}
+
+.app-sidebar__item:hover {
+  background: var(--sidebar-item-hover);
+}
+
+.app-sidebar__item--active {
+  background: var(--sidebar-item-active);
+  color: var(--sidebar-item-active-text);
+  font-weight: 500;
+}
+
+.app-sidebar__item-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.app-sidebar__item-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-sidebar__section {
+  margin-top: var(--spacing-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.app-sidebar__section-label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--sidebar-text-muted);
+  padding: var(--spacing-sm) var(--spacing-lg);
+}
+
+.app-sidebar__workflows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.app-sidebar__workflow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border-radius: var(--btn-radius);
+  text-decoration: none;
+  color: var(--sidebar-text);
+  font-size: 0.875rem;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+}
+
+.app-sidebar__workflow:hover {
+  background: var(--sidebar-item-hover);
+}
+
+.app-sidebar__workflow-icon {
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.app-sidebar__workflow-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-sidebar__workflow-placeholder {
+  font-size: 0.8125rem;
+  color: var(--sidebar-text-muted);
+  padding: var(--spacing-sm) var(--spacing-lg);
+}
+
+.app-sidebar__workflows--icons-only {
+  margin-top: var(--spacing-md);
+  gap: var(--spacing-xs);
+}
+
+.app-sidebar__workflow--icon-only {
+  justify-content: center;
+  padding: var(--spacing-md);
+}
+
+.app-sidebar__workflow--icon-only .app-sidebar__workflow-label {
+  display: none;
+}
+
+.app-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.app-main__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-xl);
+  padding: 0 var(--spacing-2xl);
+  height: 3.5rem;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--color-border-subtle);
+  background: var(--color-surface);
+}
+
+.app-main__header-lead {
+  min-width: 0;
+  flex: 1;
+}
+
+.app-main__title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text);
+  line-height: 1;
+}
+
+.app-shell-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  flex-shrink: 0;
+}
+
+.app-shell-header-actions__email {
+  max-width: 14rem;
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-shell-header-actions__logout {
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  font-family: inherit;
+  border: 1px solid var(--color-border);
+  border-radius: var(--spacing-md);
+  background: var(--color-surface);
+  color: var(--color-text);
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.app-shell-header-actions__logout:hover:not(:disabled) {
+  background: var(--color-bg);
+  border-color: hsl(214 20% 85%);
+}
+
+.app-shell-header-actions__logout:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+.app-main__content {
+  flex: 1;
+  padding: var(--spacing-2xl);
+  overflow: auto;
+  min-height: 0;
+}
+
+.app-main__content--full-bleed {
+  padding: 0;
+  overflow: hidden;
+}
+
+/* —— Login (auth shell) —— */
+.codemation-login-root {
+  min-height: 100vh;
+}
+
+.login-page {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-2xl) var(--spacing-lg);
+  isolation: isolate;
+  overflow-x: hidden;
+}
+
+.login-page__backdrop {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background:
+    radial-gradient(ellipse 120% 80% at 20% 0%, hsl(221 83% 53% / 0.14), transparent 55%),
+    radial-gradient(ellipse 100% 70% at 100% 30%, hsl(215 60% 45% / 0.1), transparent 50%),
+    radial-gradient(ellipse 80% 60% at 50% 100%, hsl(214 40% 70% / 0.08), transparent 45%), var(--color-bg);
+}
+
+.login-page__noise {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  opacity: 0.04;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+
+.login-page__card {
+  width: 100%;
+  max-width: 26rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--spacing-lg);
+  box-shadow:
+    0 1px 2px rgba(15, 23, 42, 0.04),
+    0 24px 48px -12px rgba(15, 23, 42, 0.12);
+  padding: var(--spacing-2xl);
+  animation: login-card-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes login-card-enter {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.login-page__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-xl);
+}
+
+.login-page__mark {
+  flex-shrink: 0;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: var(--spacing-md);
+  background: linear-gradient(145deg, hsl(221 83% 53%), hsl(221 83% 40%));
+  box-shadow:
+    0 2px 8px hsl(221 83% 53% / 0.35),
+    inset 0 1px 0 hsl(0 0% 100% / 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: 700;
+  font-size: 1.125rem;
+  letter-spacing: -0.02em;
+}
+
+.login-page__titles {
+  min-width: 0;
+}
+
+.login-page__title {
+  margin: 0;
+  font-size: 1.375rem;
+  font-weight: 600;
+  color: var(--color-text);
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+.login-page__subtitle {
+  margin: var(--spacing-xs) 0 0;
+  font-size: 0.9375rem;
+  color: var(--color-text-muted);
+  line-height: 1.4;
+}
+
+.login-page__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+}
+
+.login-page__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.login-page__label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--color-text);
+}
+
+.login-page__input {
+  width: 100%;
+  padding: var(--spacing-md) var(--spacing-lg);
+  font-size: 0.9375rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--spacing-md);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-family: inherit;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.login-page__input:hover {
+  border-color: hsl(214 20% 82%);
+}
+
+.login-page__input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px hsl(221 83% 53% / 0.18);
+}
+
+.login-page__input::placeholder {
+  color: var(--color-text-subtle);
+}
+
+.login-page__input:disabled {
+  opacity: 0.72;
+  cursor: not-allowed;
+  background: var(--color-bg);
+}
+
+.login-page__error {
+  margin: 0;
+  padding: var(--spacing-md) var(--spacing-lg);
+  font-size: 0.875rem;
+  color: hsl(0 72% 38%);
+  background: hsl(0 84% 97%);
+  border: 1px solid hsl(0 72% 88%);
+  border-radius: var(--spacing-md);
+  line-height: 1.45;
+}
+
+.login-page__submit {
+  margin-top: var(--spacing-sm);
+  padding: var(--spacing-md) var(--spacing-xl);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  border: none;
+  border-radius: var(--spacing-md);
+  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+  color: white;
+  cursor: pointer;
+  box-shadow:
+    0 1px 2px hsl(221 83% 30% / 0.2),
+    0 4px 12px hsl(221 83% 53% / 0.28);
+  transition:
+    transform 0.12s ease,
+    box-shadow 0.15s ease,
+    filter 0.15s ease;
+}
+
+.login-page__submit:hover {
+  filter: brightness(1.05);
+  box-shadow:
+    0 2px 4px hsl(221 83% 30% / 0.22),
+    0 8px 20px hsl(221 83% 53% / 0.32);
+}
+
+.login-page__submit:active {
+  transform: translateY(1px);
+  box-shadow:
+    0 1px 2px hsl(221 83% 30% / 0.18),
+    0 2px 8px hsl(221 83% 53% / 0.22);
+}
+
+.login-page__submit:disabled {
+  opacity: 0.85;
+  cursor: wait;
+  transform: none;
+  filter: none;
+}
+
+.login-page__submit-inner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+}
+
+.login-page__spinner {
+  width: 1.125rem;
+  height: 1.125rem;
+  border: 2px solid hsl(0 0% 100% / 0.35);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: login-spinner-rotate 0.65s linear infinite;
+}
+
+@keyframes login-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.login-page__divider {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  margin: var(--spacing-xl) 0 var(--spacing-lg);
+  color: var(--color-text-subtle);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.login-page__divider::before,
+.login-page__divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
+}
+
+.login-page__oauth {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.login-page__oauth-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.login-page__oauth-label {
+  margin: 0 0 var(--spacing-sm);
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+
+.login-page__oauth-btn {
+  padding: var(--spacing-md) var(--spacing-lg);
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: 1px solid var(--color-border);
+  border-radius: var(--spacing-md);
+  background: var(--color-surface);
+  color: var(--color-text);
+  cursor: pointer;
+  font-family: inherit;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+  box-shadow: var(--btn-shadow);
+}
+
+.login-page__oauth-btn-inner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.625rem;
+}
+
+.login-page__oauth-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+.login-page__oauth-btn:hover {
+  background: var(--color-bg);
+  border-color: hsl(214 20% 85%);
+  box-shadow: var(--btn-shadow-hover);
+}
+
+.login-page__oauth-btn:disabled {
+  opacity: 0.75;
+  cursor: wait;
+}
+
+.login-page__footer {
+  margin-top: var(--spacing-2xl);
+  padding-top: var(--spacing-xl);
+  border-top: 1px solid var(--color-border-subtle);
+  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--color-text-subtle);
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.users-screen__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-xl);
+}
+
+.users-screen__description {
+  margin: 0;
+  max-width: 42rem;
+  color: var(--color-text-muted);
+  font-size: 0.9375rem;
+}
+
+.users-screen__primary-btn {
+  padding: var(--spacing-md) var(--spacing-xl);
+  font-weight: 600;
+  font-size: 0.875rem;
+  letter-spacing: 0.02em;
+  border: none;
+  border-radius: var(--btn-radius);
+  background: var(--color-primary);
+  color: white;
+  cursor: pointer;
+  box-shadow: var(--btn-shadow);
+  font-family: inherit;
+  transition:
+    background 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.users-screen__primary-btn:hover {
+  background: var(--color-primary-hover);
+  box-shadow: var(--btn-shadow-hover);
+}
+
+.users-screen__alert {
+  padding: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+  background: hsl(0 84% 97%);
+  border: 1px solid hsl(0 72% 85%);
+  border-radius: var(--spacing-md);
+}
+
+.users-screen__loading,
+.users-screen__empty {
+  padding: var(--spacing-2xl);
+  text-align: center;
+  color: var(--color-text-muted);
+  background: var(--color-surface);
+  border-radius: var(--spacing-md);
+}
+
+.users-screen__status-select {
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: 0.8125rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--btn-radius);
+  background: var(--color-surface);
+  font-family: inherit;
+}
+
+.users-dialog__row {
+  margin-top: var(--spacing-md);
+  display: flex;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+}
+
+.users-dialog-overlay {
+  z-index: 1100;
+}
+
+.invite-accept-screen {
+  max-width: 28rem;
+  margin: var(--spacing-2xl) auto;
+  padding: var(--spacing-2xl);
+  background: var(--color-surface);
+  border-radius: var(--spacing-md);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.invite-accept-screen__title {
+  margin: 0 0 var(--spacing-md);
+  font-size: 1.375rem;
+  font-weight: 600;
+}
+
+.invite-accept-screen__help {
+  margin: 0 0 var(--spacing-xl);
+  color: var(--color-text-muted);
+  font-size: 0.9375rem;
+}
+
+.invite-accept-screen__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  margin-bottom: var(--spacing-lg);
+}
+
+.invite-accept-screen__label {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+}
+
+.invite-accept-screen__input {
+  padding: var(--spacing-md);
+  font-size: 0.9375rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--btn-radius);
+  font-family: inherit;
+}
+
+.invite-accept-screen__error {
+  padding: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
+  background: hsl(0 84% 97%);
+  border: 1px solid hsl(0 72% 85%);
+  border-radius: var(--btn-radius);
+  font-size: 0.875rem;
+}
+
+.invite-accept-screen__submit {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--spacing-md) var(--spacing-lg);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  border: none;
+  border-radius: var(--btn-radius);
+  background: var(--color-primary);
+  color: white;
+  cursor: pointer;
+  font-family: inherit;
+  box-shadow: var(--btn-shadow);
+  text-align: center;
+  text-decoration: none;
+}
+
+.invite-accept-screen__submit:hover:not(:disabled) {
+  background: var(--color-primary-hover);
+}
+
+.invite-accept-screen__submit:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+.invite-accept-screen__secondary-link {
+  display: inline-block;
+  margin-top: var(--spacing-lg);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--color-link);
+  text-decoration: none;
+}
+
+.invite-accept-screen__secondary-link:hover {
+  color: var(--color-link-hover);
+  text-decoration: underline;
+}
+
+.invite-accept-layout {
+  min-height: 100vh;
+  padding: var(--spacing-xl);
+  background: var(--color-bg);
+}