/* Экран входа — светлая тема, зелёный акцент как в приложении */
.auth-screen,
.workspace-modal-overlay {
  --auth-text: #1a1a1e;
  --auth-text-muted: #5c5c66;
  --auth-panel-bg: rgba(255, 255, 255, 0.1);
  --auth-card-bg: rgba(255, 255, 255, 0.92);
  --auth-card-border: rgba(255, 255, 255, 0.35);
  --auth-input-bg: rgba(0, 0, 0, 0.04);
  --auth-input-border: rgba(0, 0, 0, 0.08);
  --auth-input-inset: inset 0 2px 5px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(0, 0, 0, 0.06);
  --auth-accent: #3d6b5e;
  --auth-accent-hover: #2f5549;
  --auth-accent-ring: rgba(61, 107, 94, 0.28);
  --auth-accent-shadow: rgba(61, 107, 94, 0.24);
  --auth-bg-base: #eef6f2;

  color: var(--auth-text);
  background: var(--auth-bg-base);
}

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
}

.auth-atmosphere {
  position: absolute;
  inset: -28%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
  filter: blur(52px) saturate(1.04);
  transform: translateZ(0);
  opacity: 0.9;
}

.auth-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

.auth-orbit {
  --auth-orbit-size: 155vmin;
  position: absolute;
  width: var(--auth-orbit-size);
  height: var(--auth-orbit-size);
  border-radius: 50%;
  pointer-events: none;
  will-change: translate, transform;
  opacity: 0.64;
}

.auth-orbit--1 {
  --auth-orbit-color: var(--auth-orbit-1);
  top: calc(var(--auth-orbit-size) * -0.54);
  left: calc(var(--auth-orbit-size) * -0.5);
  animation:
    auth-orbit-shove-a 8.2s cubic-bezier(0.42, 0.08, 0.58, 0.92) infinite,
    glow-drift-move 12.8s ease-in-out infinite;
  animation-delay: 0s, -2.2s;
}

.auth-orbit--2 {
  --auth-orbit-color: var(--auth-orbit-2);
  top: calc(var(--auth-orbit-size) * -0.2);
  right: calc(var(--auth-orbit-size) * -0.54);
  animation:
    auth-orbit-shove-b 6.5s cubic-bezier(0.38, 0.12, 0.62, 0.88) infinite,
    glow-drift-move 10.4s ease-in-out infinite;
  animation-delay: -1.1s, -4.4s;
}

.auth-orbit--3 {
  --auth-orbit-color: var(--auth-orbit-3);
  bottom: calc(var(--auth-orbit-size) * -0.52);
  left: calc(var(--auth-orbit-size) * -0.24);
  animation:
    auth-orbit-shove-c 9.1s cubic-bezier(0.44, 0.06, 0.56, 0.94) infinite,
    glow-drift-move 14.2s ease-in-out infinite;
  animation-delay: -2.6s, -1.8s;
}

.auth-orbit--4 {
  --auth-orbit-color: var(--auth-orbit-4);
  bottom: calc(var(--auth-orbit-size) * -0.3);
  right: calc(var(--auth-orbit-size) * -0.46);
  animation:
    auth-orbit-shove-d 7.4s cubic-bezier(0.4, 0.1, 0.6, 0.9) infinite,
    glow-drift-move 11.3s ease-in-out infinite;
  animation-delay: -3.4s, -3.1s;
}

.auth-orbit--5 {
  --auth-orbit-size: 112vmin;
  --auth-orbit-color: var(--auth-orbit-5);
  top: 6%;
  left: -22%;
  opacity: 0.5;
  animation:
    auth-orbit-shove-e 10.8s cubic-bezier(0.42, 0.1, 0.58, 0.9) infinite,
    glow-drift-move 15.6s ease-in-out infinite;
  animation-delay: -2.1s, -5.8s;
}

.auth-orbit--6 {
  --auth-orbit-size: 108vmin;
  --auth-orbit-color: var(--auth-orbit-6);
  top: 28%;
  right: -24%;
  opacity: 0.48;
  animation:
    auth-orbit-shove-f 9.6s cubic-bezier(0.4, 0.08, 0.6, 0.92) infinite,
    glow-drift-move 14.8s ease-in-out infinite;
  animation-delay: -4.2s, -2.9s;
}

.auth-orbit--7 {
  --auth-orbit-size: 104vmin;
  --auth-orbit-color: var(--auth-orbit-7);
  bottom: -6%;
  left: 22%;
  opacity: 0.46;
  animation:
    auth-orbit-shove-g 11.4s cubic-bezier(0.44, 0.09, 0.56, 0.91) infinite,
    glow-drift-move 16.2s ease-in-out infinite;
  animation-delay: -1.6s, -6.5s;
}

@keyframes auth-orbit-shove-e {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  25% { transform: translate(7%, 4%) scale(1.06); }
  50% { transform: translate(12%, 8%) scale(1.09); }
  75% { transform: translate(5%, 3%) scale(0.95); }
}

@keyframes auth-orbit-shove-f {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  30% { transform: translate(-8%, 5%) scale(1.05); }
  60% { transform: translate(-12%, 9%) scale(1.08); }
  85% { transform: translate(-4%, 2%) scale(0.94); }
}

@keyframes auth-orbit-shove-g {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  28% { transform: translate(6%, -6%) scale(1.07); }
  58% { transform: translate(11%, -10%) scale(1.1); }
  82% { transform: translate(3%, -4%) scale(0.93); }
}

@keyframes auth-orbit-shove-a {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  16% { transform: translate(10%, 7%) scale(1.12); }
  34% { transform: translate(18%, 12%) scale(1.16); }
  52% { transform: translate(8%, 4%) scale(0.9); }
  68% { transform: translate(14%, 9%) scale(1.08); }
  84% { transform: translate(4%, 13%) scale(0.94); }
}

@keyframes auth-orbit-shove-b {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  18% { transform: translate(-11%, 8%) scale(1.1); }
  36% { transform: translate(-17%, 13%) scale(1.14); }
  54% { transform: translate(-6%, 5%) scale(0.88); }
  72% { transform: translate(-13%, 10%) scale(1.06); }
  88% { transform: translate(-9%, 3%) scale(0.92); }
}

@keyframes auth-orbit-shove-c {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  14% { transform: translate(9%, -8%) scale(1.11); }
  32% { transform: translate(15%, -14%) scale(1.15); }
  50% { transform: translate(5%, -5%) scale(0.89); }
  66% { transform: translate(12%, -11%) scale(1.07); }
  82% { transform: translate(3%, -12%) scale(0.93); }
}

@keyframes auth-orbit-shove-d {
  0%, 100% { transform: translate(0%, 0%) scale(1); }
  20% { transform: translate(-10%, -7%) scale(1.09); }
  38% { transform: translate(-16%, -12%) scale(1.13); }
  56% { transform: translate(-7%, -4%) scale(0.87); }
  74% { transform: translate(-12%, -9%) scale(1.05); }
  90% { transform: translate(-5%, -11%) scale(0.91); }
}

/* Утро — восход */
.auth-screen[data-time="morning"] {
  --auth-bg-base: #fff6ee;
  --auth-orbit-1: #5a9d8a;
  --auth-orbit-2: #ffb47a;
  --auth-orbit-3: #ff785a;
  --auth-orbit-4: #ffd68c;
  --auth-orbit-5: color-mix(in srgb, #5a9d8a 50%, #ffb47a);
  --auth-orbit-6: color-mix(in srgb, #ffb47a 48%, #ff785a);
  --auth-orbit-7: color-mix(in srgb, #ff785a 46%, #ffd68c);
}

/* День */
.auth-screen[data-time="day"] {
  --auth-bg-base: #edf5f0;
  --auth-orbit-1: #3d6b5e;
  --auth-orbit-2: #78bedc;
  --auth-orbit-3: #5a9d8a;
  --auth-orbit-4: #ffe696;
  --auth-orbit-5: color-mix(in srgb, #3d6b5e 50%, #78bedc);
  --auth-orbit-6: color-mix(in srgb, #78bedc 46%, #5a9d8a);
  --auth-orbit-7: color-mix(in srgb, #5a9d8a 44%, #ffe696);
}

/* Вечер — закат */
.auth-screen[data-time="evening"] {
  --auth-bg-base: #faf0ea;
  --auth-orbit-1: #3d6b5e;
  --auth-orbit-2: #ff825f;
  --auth-orbit-3: #be6eb4;
  --auth-orbit-4: #ffaa5a;
  --auth-orbit-5: color-mix(in srgb, #3d6b5e 48%, #ff825f);
  --auth-orbit-6: color-mix(in srgb, #ff825f 46%, #be6eb4);
  --auth-orbit-7: color-mix(in srgb, #be6eb4 44%, #ffaa5a);
}

/* Ночь */
.auth-screen[data-time="night"] {
  --auth-bg-base: #0d1422;
  --auth-text: #eef2f4;
  --auth-text-muted: #c8d0d8;
  --auth-panel-bg: rgba(255, 255, 255, 0.1);
  --auth-card-bg: rgba(255, 255, 255, 0.14);
  --auth-card-border: rgba(255, 255, 255, 0.22);
  --auth-input-bg: rgba(0, 0, 0, 0.22);
  --auth-input-border: rgba(255, 255, 255, 0.1);
  --auth-input-inset: inset 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.2);
  --auth-orbit-1: #4a7fd4;
  --auth-orbit-2: #6e4bb9;
  --auth-orbit-3: #5f73d2;
  --auth-orbit-4: #7350af;
  --auth-orbit-5: color-mix(in srgb, #4a7fd4 50%, #6e4bb9);
  --auth-orbit-6: color-mix(in srgb, #6e4bb9 48%, #5f73d2);
  --auth-orbit-7: color-mix(in srgb, #5f73d2 46%, #7350af);
}

@media (prefers-reduced-motion: reduce) {
  .auth-orbit {
    animation: none;
  }
}

.auth-screen[hidden],
.workspace-modal-overlay[hidden] {
  display: none;
}

.auth-screen::before,
.auth-screen::after {
  content: none;
}

.workspace-modal-overlay::before,
.workspace-modal-overlay::after {
  content: "";
  position: absolute;
  inset: -32%;
  pointer-events: none;
  filter: blur(52px);
  opacity: 0.9;
  animation: auth-gradient-drift 16s ease-in-out infinite alternate;
}

.workspace-modal-overlay::after {
  animation-delay: -8s;
}

@keyframes auth-gradient-drift {
  0% {
    transform: translate(-5%, -4%) scale(1);
  }
  100% {
    transform: translate(6%, 5%) scale(1.1);
  }
}

.workspace-modal-overlay[data-time="morning"] {
  --auth-bg-base: #fff6ee;
}

.workspace-modal-overlay[data-time="morning"]::before {
  background:
    radial-gradient(circle at 18% 72%, rgba(61, 107, 94, 0.42), transparent 52%),
    radial-gradient(circle at 78% 28%, rgba(255, 168, 102, 0.58), transparent 50%),
    radial-gradient(circle at 52% 18%, rgba(255, 214, 140, 0.48), transparent 48%);
}

.workspace-modal-overlay[data-time="morning"]::after {
  background:
    radial-gradient(circle at 82% 78%, rgba(255, 120, 90, 0.38), transparent 55%),
    radial-gradient(circle at 24% 22%, rgba(90, 157, 138, 0.34), transparent 50%);
}

.workspace-modal-overlay[data-time="day"] {
  --auth-bg-base: #edf5f0;
}

.workspace-modal-overlay[data-time="day"]::before {
  background:
    radial-gradient(circle at 22% 30%, rgba(61, 107, 94, 0.48), transparent 54%),
    radial-gradient(circle at 76% 24%, rgba(120, 190, 220, 0.42), transparent 50%),
    radial-gradient(circle at 58% 82%, rgba(90, 157, 138, 0.36), transparent 52%);
}

.workspace-modal-overlay[data-time="day"]::after {
  background:
    radial-gradient(circle at 70% 70%, rgba(255, 230, 150, 0.36), transparent 55%),
    radial-gradient(circle at 12% 68%, rgba(45, 122, 82, 0.32), transparent 50%);
}

.workspace-modal-overlay[data-time="evening"] {
  --auth-bg-base: #faf0ea;
}

.workspace-modal-overlay[data-time="evening"]::before {
  background:
    radial-gradient(circle at 20% 68%, rgba(61, 107, 94, 0.38), transparent 52%),
    radial-gradient(circle at 80% 32%, rgba(255, 130, 95, 0.52), transparent 50%),
    radial-gradient(circle at 48% 18%, rgba(190, 110, 180, 0.34), transparent 48%);
}

.workspace-modal-overlay[data-time="evening"]::after {
  background:
    radial-gradient(circle at 72% 78%, rgba(255, 170, 90, 0.4), transparent 55%),
    radial-gradient(circle at 28% 28%, rgba(61, 107, 94, 0.28), transparent 50%);
}

.workspace-modal-overlay[data-time="night"] {
  --auth-bg-base: #0d1422;
  --auth-text: #eef2f4;
  --auth-text-muted: #c8d0d8;
  --auth-panel-bg: rgba(255, 255, 255, 0.1);
  --auth-card-bg: rgba(255, 255, 255, 0.14);
  --auth-card-border: rgba(255, 255, 255, 0.22);
  --auth-input-bg: rgba(0, 0, 0, 0.22);
  --auth-input-border: rgba(255, 255, 255, 0.1);
  --auth-input-inset: inset 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.workspace-modal-overlay[data-time="night"]::before {
  background:
    radial-gradient(circle at 24% 28%, rgba(55, 105, 210, 0.46), transparent 52%),
    radial-gradient(circle at 78% 22%, rgba(95, 115, 210, 0.38), transparent 50%),
    radial-gradient(circle at 52% 82%, rgba(25, 45, 95, 0.55), transparent 54%),
    radial-gradient(circle at 68% 55%, rgba(110, 75, 185, 0.24), transparent 50%);
}

.workspace-modal-overlay[data-time="night"]::after {
  background:
    radial-gradient(circle at 82% 72%, rgba(115, 80, 175, 0.34), transparent 55%),
    radial-gradient(circle at 16% 76%, rgba(40, 75, 165, 0.32), transparent 50%);
}

.auth-card,
.workspace-modal {
  color: var(--auth-text);
}

.auth-card h1,
.workspace-modal h2 {
  color: var(--auth-text);
}

.workspace-modal p {
  color: var(--auth-text-muted);
}

.auth-card {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  padding: 32px 28px;
  border-radius: 24px;
  background: var(--auth-panel-bg);
  border: 1px solid var(--auth-card-border);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.auth-tabs {
  position: relative;
  display: flex;
  gap: 0;
  margin-bottom: 0;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  isolation: isolate;
}

.auth-card-head {
  margin-bottom: 20px;
}

.auth-alt-head {
  text-align: center;
}

.auth-alt-title {
  margin: 0 0 8px;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--auth-text);
}

.auth-alt-sub {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--auth-text-muted);
}

#auth-form[data-mode="forgot"] .auth-field--password,
#auth-form[data-mode="forgot"] .auth-field--confirm,
#auth-form[data-mode="forgot"] .auth-hint--forgot,
#auth-form[data-mode="reset"] .auth-hint--forgot,
#auth-form[data-mode="reset"] .auth-field--email {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

#auth-form[data-mode="forgot"] .auth-hint--back,
#auth-form[data-mode="reset"] .auth-hint--back {
  max-height: 40px;
  opacity: 1;
  margin-top: 14px;
  pointer-events: auto;
}

.auth-hint {
  margin: 0 0 8px;
  font-size: 0.875rem;
  text-align: center;
}

.auth-hint--forgot {
  margin-top: -4px;
  margin-bottom: 10px;
}

.auth-hint--back {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height 0.32s ease,
    opacity 0.28s ease,
    margin-top 0.32s ease;
}

.auth-link {
  border: none;
  padding: 0;
  background: none;
  color: var(--auth-accent);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-link:hover {
  color: var(--auth-accent-hover);
}

#auth-card-head[data-mode="alt"] .auth-tabs {
  display: none;
}

#auth-card-head[data-mode="alt"] .auth-alt-head {
  display: block;
}

#auth-card-head[data-mode="tabs"] .auth-alt-head,
.auth-alt-head[hidden] {
  display: none;
}

.auth-tabs-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.06);
  transform: translateX(0);
  transition:
    transform 0.42s cubic-bezier(0.34, 1.15, 0.64, 1),
    width 0.42s cubic-bezier(0.34, 1.15, 0.64, 1);
  pointer-events: none;
  z-index: 0;
}

.auth-tabs[data-active="register"] .auth-tabs-indicator {
  transform: translateX(100%);
}

.auth-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--auth-text-muted);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  transition: color 0.32s ease;
}

.auth-tab.on {
  color: var(--auth-accent);
}

.auth-tab:not(.on):hover {
  color: color-mix(in srgb, var(--auth-accent) 55%, var(--auth-text-muted));
}

.auth-submit {
  width: 100%;
  margin-top: 4px;
  transition:
    opacity 0.28s ease,
    transform 0.28s cubic-bezier(0.34, 1.15, 0.64, 1),
    background 0.2s ease;
}

.auth-submit.is-switching {
  opacity: 0.55;
  transform: scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
  .auth-tabs-indicator,
  .auth-tab,
  .auth-submit {
    transition: none;
  }
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.auth-field--confirm {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height 0.38s cubic-bezier(0.34, 1.15, 0.64, 1),
    opacity 0.32s ease,
    margin-bottom 0.38s cubic-bezier(0.34, 1.15, 0.64, 1);
}

#auth-form[data-mode="register"] .auth-field--confirm {
  max-height: 88px;
  opacity: 1;
  margin-bottom: 14px;
  pointer-events: auto;
}

#auth-form[data-mode="login"] .auth-hint--forgot {
  max-height: 32px;
  opacity: 1;
  pointer-events: auto;
}

#auth-form[data-mode="reset"] .auth-field--password,
#auth-form[data-mode="reset"] .auth-field--confirm {
  max-height: 88px;
  opacity: 1;
  margin-bottom: 14px;
  pointer-events: auto;
}

#auth-form[data-mode="reset"] .auth-field--password {
  margin-top: 0;
}

.auth-field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--auth-text-muted);
}

.auth-field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--auth-input-border);
  background: var(--auth-input-bg);
  color: var(--auth-text);
  font: inherit;
  box-shadow: var(--auth-input-inset);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.auth-field input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--auth-accent) 55%, transparent);
  background: color-mix(in srgb, var(--auth-input-bg) 88%, var(--auth-accent) 12%);
  box-shadow:
    var(--auth-input-inset),
    0 0 0 3px var(--auth-accent-ring);
}

.auth-field input::placeholder {
  color: color-mix(in srgb, var(--auth-text-muted) 72%, transparent);
}

.auth-error {
  min-height: 1.25rem;
  margin-bottom: 12px;
  color: #c44;
  font-size: 0.875rem;
}

/* Как .btn.btn-primary в основном UI */
.auth-screen .btn-primary,
.workspace-modal-overlay .btn-primary {
  background: var(--auth-accent);
  color: #fff;
}

.auth-screen .btn-primary:active,
.workspace-modal-overlay .btn-primary:active {
  background: var(--auth-accent-hover);
}

/* .auth-submit width/margin — см. блок выше */

/* Модалка создания пространства */
.workspace-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(8px);
}

.workspace-modal {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  padding: 28px 24px;
  border-radius: 24px;
  background: var(--auth-card-bg);
  border: 1px solid var(--auth-card-border);
  box-shadow: 0 24px 80px var(--auth-accent-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.workspace-modal h2 {
  margin: 0 0 8px;
  font-size: 1.375rem;
}

.workspace-modal p {
  margin: 0 0 20px;
  color: var(--auth-text-muted);
  line-height: 1.5;
}

.workspace-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.workspace-modal-actions .btn {
  flex: 1;
}