/* Workspace UI V2 components: applied by migrated pages. */
body.surface-workspace.workspace-v2.todos-active .todo-v2 .card {
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-radius-lg);
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, .58), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .16) 46%, rgba(218, 236, 255, .24)),
    rgba(226, 239, 250, .20);
  box-shadow:
    0 18px 56px rgba(18, 28, 62, .14),
    inset 0 1px 1px rgba(255, 255, 255, .72),
    inset 0 -1px 18px rgba(255, 255, 255, .12);
  backdrop-filter: blur(24px) saturate(1.34) contrast(1.02);
  -webkit-backdrop-filter: blur(24px) saturate(1.34) contrast(1.02);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 input,
body.surface-workspace.workspace-v2.todos-active .todo-v2 select,
body.surface-workspace.workspace-v2.todos-active .todo-v2 textarea {
  min-height: 44px;
  border: 1px solid var(--w2-line-ink);
  border-radius: var(--w2-radius-sm);
  background: rgba(255, 255, 255, .54);
  color: var(--w2-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .60);
  font-family: var(--w2-font-ui);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 textarea {
  min-height: 76px;
  line-height: 1.55;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 input::placeholder,
body.surface-workspace.workspace-v2.todos-active .todo-v2 textarea::placeholder {
  color: var(--w2-ink-faint);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 input:focus,
body.surface-workspace.workspace-v2.todos-active .todo-v2 select:focus,
body.surface-workspace.workspace-v2.todos-active .todo-v2 textarea:focus {
  border-color: rgba(39, 143, 127, .48);
  background: rgba(255, 255, 255, .74);
  outline: 3px solid rgba(39, 143, 127, .14);
  outline-offset: 1px;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .btn {
  min-height: 36px;
  border: 1px solid var(--w2-line-ink);
  border-radius: var(--w2-radius-sm);
  background: rgba(255, 255, 255, .42);
  color: var(--w2-ink-soft);
  box-shadow: none;
  font-family: var(--w2-font-ui);
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .btn:hover {
  transform: translateY(-1px);
  border-color: var(--w2-line-strong);
  background: rgba(255, 255, 255, .62);
  box-shadow: var(--w2-shadow-quiet);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .btn-primary,
body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-add-btn {
  border-color: rgba(118, 142, 170, .28);
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, .68), transparent 44%),
    linear-gradient(135deg, rgba(238, 246, 251, .50), rgba(187, 211, 229, .34) 54%, rgba(167, 189, 217, .28)),
    rgba(255, 255, 255, .24);
  color: #25384f;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .72),
    inset 0 -1px 12px rgba(255, 255, 255, .16);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .btn-success {
  border-color: rgba(39, 143, 127, .22);
  background: rgba(226, 248, 241, .62);
  color: #126457;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .btn-ghost {
  background: rgba(255, 255, 255, .34);
  color: var(--w2-ink-soft);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .btn-danger {
  border-color: rgba(181, 90, 102, .18);
  background: rgba(255, 239, 241, .46);
  color: #963848;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .tag,
body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-id,
body.surface-workspace.workspace-v2.todos-active .todo-v2 .todo-time {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(76, 91, 119, .14);
  border-radius: var(--w2-radius-pill);
  background: rgba(255, 255, 255, .40);
  color: var(--w2-ink-soft);
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .tag.green {
  border-color: rgba(39, 143, 127, .18);
  background: rgba(226, 248, 241, .90);
  color: #126457;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .tag.red {
  border-color: rgba(181, 90, 102, .20);
  background: rgba(255, 239, 241, .82);
  color: #963848;
}

body.surface-workspace.workspace-v2.todos-active .todo-v2 .empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(76, 91, 119, .18);
  border-radius: var(--w2-radius-md);
  background: rgba(255, 255, 255, .50);
  color: var(--w2-ink-muted);
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 760px) {
  body.surface-workspace.workspace-v2.todos-active .todo-v2 .card {
    border-radius: var(--w2-radius-md);
    backdrop-filter: blur(16px) saturate(1.18);
    -webkit-backdrop-filter: blur(16px) saturate(1.18);
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 input,
  body.surface-workspace.workspace-v2.todos-active .todo-v2 select,
  body.surface-workspace.workspace-v2.todos-active .todo-v2 textarea {
    min-height: 42px;
    font-size: 16px;
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2 .btn {
    min-height: 34px;
  }
}