:root {
  --google-blue: #1a73e8;
  --google-red: #ea4335;
  --google-yellow: #fbbc04;
  --google-green: #34a853;
  --google-ink: #202124;
  --google-muted: #5f6368;
  --google-line: #dadce0;
  --google-soft: #f8fafd;
  --surface-primary: #ffffff;
  --surface-soft: #f8fafd;
  --line-primary: #dadce0;
  --text-primary: #202124;
  --text-muted: #5f6368;
  --accent-primary: #1a73e8;
  --accent-success: #188038;
  --accent-warning: #b06000;
  --shadow-google: 0 1px 2px rgba(60, 64, 67, .12), 0 8px 28px rgba(60, 64, 67, .10);
  --shadow-card: 0 1px 2px rgba(60, 64, 67, .08);
  --shadow-panel: 0 18px 40px rgba(60, 64, 67, .18), inset 0 1px 0 rgba(255, 255, 255, .75);
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 99, 104, .42) rgba(248, 250, 253, .94);
}

html::-webkit-scrollbar {
  width: 11px;
}

html::-webkit-scrollbar-track {
  background: rgba(248, 250, 253, .94);
}

html::-webkit-scrollbar-thumb {
  border: 2px solid rgba(248, 250, 253, .94);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(95, 99, 104, .52), rgba(154, 160, 166, .52));
}

html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(26, 115, 232, .88), rgba(52, 168, 83, .88));
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--surface-primary);
  color: var(--text-primary);
  overflow-x: hidden;
}

.workspace-bg {
  background:
    linear-gradient(180deg, rgba(248, 250, 253, .92) 0%, rgba(255, 255, 255, 1) 42%),
    radial-gradient(circle at 12% 8%, rgba(66, 133, 244, .13), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(52, 168, 83, .10), transparent 26%),
    radial-gradient(circle at 58% 2%, rgba(251, 188, 4, .14), transparent 24%);
}

.workspace-grid {
  background-image:
    linear-gradient(rgba(218, 220, 224, .45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(218, 220, 224, .45) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent 74%);
}

.google-wordmark span:nth-child(1),
.google-dots span:nth-child(1) {
  color: var(--google-blue);
  background: var(--google-blue);
}

.google-wordmark span:nth-child(2),
.google-dots span:nth-child(2) {
  color: var(--google-red);
  background: var(--google-red);
}

.google-wordmark span:nth-child(3),
.google-dots span:nth-child(3) {
  color: var(--google-yellow);
  background: var(--google-yellow);
}

.google-wordmark span:nth-child(4),
.google-dots span:nth-child(4) {
  color: var(--google-green);
  background: var(--google-green);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 99, 104, .36) rgba(248, 250, 253, .9);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(248, 250, 253, .9);
  border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(95, 99, 104, .46), rgba(154, 160, 166, .46));
  border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(26, 115, 232, .82), rgba(52, 168, 83, .82));
}

.login-cta,
.login-cta * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}