:root {
  --bg: #f7f8fc;
  --surface: #ffffff;
  --surface-2: #f3f5fb;
  --surface-3: #eaedf7;
  --surface-soft: #f7f8ff;
  --line: #e4e7f2;
  --line-strong: #cdd3e7;
  --text: #111827;
  --muted: #707890;
  --quiet: #9aa2b8;
  --accent: #635bff;
  --accent-ink: #5046e5;
  --accent-soft: #f0efff;
  --blue: #3b82f6;
  --blue-soft: #eef5ff;
  --amber: #f59e0b;
  --amber-soft: #fff4dd;
  --red: #ff5a7a;
  --red-soft: #fff0f4;
  --green: #16b981;
  --green-soft: #e9fbf4;
  --purple: #635bff;
  --shadow-sm: 0 8px 24px rgba(43, 50, 82, 0.06);
  --shadow-md: 0 24px 70px rgba(43, 50, 82, 0.12);
  --radius: 24px;
  --radius-sm: 14px;
  --project-board: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='3'/%3E%3Cpath d='M9 5v14M15 5v14'/%3E%3C/svg%3E");
  --project-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12'/%3E%3Ccircle cx='4.5' cy='6' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='4.5' cy='12' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='4.5' cy='18' r='1' fill='black' stroke='none'/%3E%3C/svg%3E");
  --project-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16'/%3E%3C/svg%3E");
  --project-timeline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14M5 12h10M5 17h14'/%3E%3Cpath d='M9 7v10M15 7v10'/%3E%3C/svg%3E");
  --project-rocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 4c3 1 5 3 6 6-2 5-5 8-10 10l-3-3c2-5 5-8 10-10Z'/%3E%3Cpath d='M6 17l-3 3M14 8h.01'/%3E%3C/svg%3E");
  --project-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M4 19c.8-3 2.5-5 5-5s4.2 2 5 5'/%3E%3Cpath d='M15 10a2.5 2.5 0 1 0 0-5M16.5 14c2 .5 3 2 3.5 5'/%3E%3C/svg%3E");
  --project-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19V9M12 19V5M19 19v-7'/%3E%3Cpath d='M3 19h18'/%3E%3C/svg%3E");
  --project-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3l-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z'/%3E%3C/svg%3E");
  --project-bug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='13' rx='5'/%3E%3Cpath d='M9 7V4M15 7V4M4 12h4M16 12h4M5 18l3-2M19 18l-3-2'/%3E%3C/svg%3E");
  --project-idea: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M8 14c-1.3-1.1-2-2.7-2-4.5a6 6 0 1 1 12 0c0 1.8-.7 3.4-2 4.5-.8.7-1 1.3-1 2H9c0-.7-.2-1.3-1-2Z'/%3E%3C/svg%3E");
  --project-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.2 2.4 3.3 5.4 3.3 9s-1.1 6.6-3.3 9c-2.2-2.4-3.3-5.4-3.3-9S9.8 5.4 12 3Z'/%3E%3C/svg%3E");
  --project-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19 12a7 7 0 0 0-.1-1l2-1.5-2-3.4-2.4 1a7 7 0 0 0-1.7-1L14.5 3h-5l-.3 3.1a7 7 0 0 0-1.7 1l-2.4-1-2 3.4 2 1.5a7 7 0 0 0 0 2l-2 1.5 2 3.4 2.4-1a7 7 0 0 0 1.7 1l.3 3.1h5l.3-3.1a7 7 0 0 0 1.7-1l2.4 1 2-3.4-2-1.5c.1-.3.1-.7.1-1Z'/%3E%3C/svg%3E");
  --project-notebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h11v16H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3Z'/%3E%3Cpath d='M8 4v16M11 8h4M11 12h4'/%3E%3C/svg%3E");
  --project-screen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='2'/%3E%3Cpath d='M12 16v4M8 20h8'/%3E%3C/svg%3E");
  --project-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 9.5 17 19 7'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
  --project-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  padding: 0 12px;
  box-shadow: none;
  transition: border-color .14s ease, background .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
}

button:hover {
  border-color: var(--line-strong);
  background: #f4f5f7;
}

button:active {
  transform: translateY(1px);
  box-shadow: none;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(240, 106, 106, 0.18);
  outline-offset: 1px;
  border-color: var(--accent);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
}

button.is-busy {
  position: relative;
  padding-left: 34px;
}

button.is-busy::before {
  content: "";
  position: absolute;
  left: 12px;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}

button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}

button.primary:hover {
  border-color: var(--accent-ink);
  background: var(--accent-ink);
}

.danger-confirm-button {
  border-color: #f36a7f;
  background: #f36a7f;
  color: #fff;
  box-shadow: none;
}

.danger-confirm-button:hover {
  border-color: #e34968;
  background: #e34968;
}

.stretch {
  width: 100%;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 18px;
  line-height: 1.2;
}

h2 {
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: 0;
}

h3 {
  font-size: 15px;
  line-height: 1.25;
}

.app {
  display: grid;
  grid-template-columns: 260px minmax(560px, 1fr);
  min-height: 100vh;
  gap: 16px;
  background: var(--bg);
  padding: 14px;
}

.app.sidebar-collapsed {
  grid-template-columns: 76px minmax(560px, 1fr);
}

.session-recovery {
  width: min(400px, calc(100vw - 32px));
  box-sizing: border-box;
  border: 1px solid #dfe2e8;
  border-radius: 8px;
  padding: 24px;
  background: #fff;
  color: #20252f;
}

.session-recovery::backdrop {
  background: rgba(24, 31, 48, 0.4);
}

.session-recovery form {
  display: grid;
  gap: 18px;
}

.session-recovery h2,
.session-recovery p {
  margin: 0;
  overflow-wrap: anywhere;
}

.session-recovery h2 { font-size: 22px; }
.session-recovery p { font-size: 14px; color: #697386; }
#sessionRecoveryError,
.login-panel #loginError { color: #c43a35; }

.app.is-locked {
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(245, 247, 248, 0.82);
  backdrop-filter: blur(10px);
}

.login-screen[hidden] {
  display: none;
}

.login-panel {
  display: grid;
  width: min(430px, 100%);
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  padding: 24px;
}

.login-panel .mark {
  width: 48px;
  height: 48px;
}

.login-panel p {
  color: var(--muted);
}

.sidebar {
  position: sticky;
  top: 14px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 28px);
  overflow: auto;
  border: 1px solid rgba(228, 231, 242, 0.86);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-sm);
  padding: 16px 13px;
  backdrop-filter: blur(18px);
}

.details {
  position: fixed;
  inset: 64px 16px 16px auto;
  z-index: 18;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  min-height: 0;
  overflow: auto;
  transform: none;
  opacity: 1;
  visibility: visible;
  border: 1px solid rgba(228, 231, 242, 0.84);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 251, 255, 0.96)),
    var(--surface);
  padding: 0;
  box-shadow: 0 30px 90px rgba(43, 50, 82, 0.18);
  backdrop-filter: blur(18px);
  transition: opacity .16s ease, visibility .16s ease;
}

.details-backdrop {
  position: fixed;
  inset: 0;
  z-index: 17;
  background: rgba(30, 31, 33, 0.08);
  opacity: 1;
}

.details-backdrop[hidden] {
  display: none;
}

.details[aria-hidden="true"] {
  display: none;
  pointer-events: none;
}

.details.is-open {
  transform: none !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#taskDetails.is-open,
#taskDetails[aria-hidden="false"] {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}

.workspace {
  min-width: 0;
  overflow: auto;
  border: 1px solid rgba(228, 231, 242, 0.72);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-md);
  padding: 16px 22px 28px;
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  margin-bottom: 16px;
  padding: 0 4px;
}

.sidebar-collapse {
  width: 100%;
  min-width: 0;
  height: 68px;
  min-height: 68px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1f2937;
  padding: 0;
  box-shadow: none;
  font-size: 28px;
  font-weight: 850;
  line-height: 1;
}

.sidebar-collapse:hover {
  background: var(--surface-2);
  color: var(--accent-ink);
}

.brand h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0;
}

.brand > div {
  min-width: 0;
}

.sidebar-search {
  display: grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  margin-left: auto;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #7c869e;
  padding: 0;
  box-shadow: none;
}

.sidebar-search::before {
  content: "";
  display: block;
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sidebar-search:hover,
.sidebar-search:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #766bff, #4f46e5);
  color: #fff;
  font-weight: 850;
  letter-spacing: 0;
  box-shadow: none;
}

.brand-logo {
  position: relative;
  display: grid;
  width: 36px;
  min-width: 36px;
  height: 36px;
  place-items: center;
}

.brand-logo i {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 10px 20px rgba(99, 91, 255, 0.22);
}

.brand-logo i:nth-child(1) {
  left: 7px;
  bottom: 8px;
}

.brand-logo i:nth-child(2) {
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
}

.brand-logo i:nth-child(3) {
  right: 7px;
  bottom: 8px;
}

.workspace-field {
  display: none;
}

.brand p,
#projectMeta,
.details-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.utility-bar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.global-search-wrap {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
}

.global-search {
  display: grid;
  grid-template-columns: auto minmax(120px, 210px) auto;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  padding: 0 11px;
  color: var(--quiet);
  box-shadow: var(--shadow-sm);
}

.global-search input {
  min-height: 30px;
  border: 0;
  background: transparent;
  outline: 0;
}

.global-search kbd {
  color: var(--quiet);
  font: inherit;
  font-size: 12px;
}

.global-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 35;
  display: grid;
  width: min(430px, calc(100vw - 32px));
  gap: 6px;
  border: 1px solid rgba(228, 231, 242, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 54px rgba(38, 44, 84, 0.14);
  padding: 8px;
}

.global-search-panel[hidden] {
  display: none;
}

.global-search-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 7px;
}

.global-search-result {
  display: grid;
  justify-content: stretch;
  justify-items: start;
  gap: 3px;
  min-height: 58px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
  padding: 9px 10px;
  text-align: left;
}

.global-search-result:hover,
.global-search-result:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.global-search-result strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-result em {
  display: inline-grid;
  min-height: 20px;
  align-items: center;
  border-radius: 999px;
  background: #eef0ff;
  color: var(--accent-ink);
  padding: 0 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
}

.global-search-result.is-task em {
  background: #edf7ff;
  color: #2364aa;
}

.global-search-result span,
.global-search-result small,
.global-search-empty span {
  color: var(--muted);
  font-size: 12px;
}

.global-search-empty {
  display: grid;
  gap: 4px;
  border-radius: 13px;
  background: var(--surface-2);
  padding: 14px;
}

.global-search-progress {
  padding: 6px 10px 4px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

dialog.global-search-dialog {
  position: fixed;
  inset: var(--search-dialog-top, 42px) auto auto var(--search-dialog-left, 320px);
  width: var(--search-dialog-width, min(760px, calc(100vw - 420px)));
  max-height: var(--search-dialog-max-height, calc(100vh - 72px));
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

.global-search-dialog::backdrop {
  background: transparent;
  backdrop-filter: none;
}

.global-search-modal {
  display: grid;
  gap: 8px;
  max-height: var(--search-dialog-max-height, calc(100vh - 72px));
  padding: 0;
}

.global-search-modal header {
  display: none;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 4px 2px 0;
}

.global-search-modal header p {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 820;
}

.global-search-modal h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  letter-spacing: 0;
}

#closeGlobalSearchDialog {
  display: none;
  width: 36px;
  min-width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  padding: 0;
  box-shadow: none;
  font-size: 24px;
  line-height: 1;
}

#closeGlobalSearchDialog:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.global-search-modal-field {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-height: 58px;
  border: 1px solid rgba(216, 221, 236, 0.96);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.98);
  padding: 0 14px 0 0;
  box-shadow: 0 18px 48px rgba(42, 49, 87, 0.1);
}

.global-search-modal-field span {
  justify-self: center;
  width: 20px;
  height: 20px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.global-search-modal-field input {
  min-height: 48px;
  border: 0;
  background: transparent;
  outline: 0;
  color: var(--text);
  font: inherit;
  font-size: 17px;
}

.global-search-modal-field kbd {
  color: var(--quiet);
  font: inherit;
  font-size: 12px;
  opacity: .72;
}

.global-search-dialog-results {
  display: grid;
  max-height: min(480px, calc(var(--search-dialog-max-height, 720px) - 154px));
  gap: 7px;
  overflow-y: auto;
  border: 1px solid rgba(228, 231, 242, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 54px rgba(38, 44, 84, 0.14);
  padding: 8px;
}

.global-search-dialog-results:empty {
  display: none;
}

.round-action {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 50%;
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 14px 28px rgba(99, 91, 255, 0.26);
  font-size: 20px;
  font-weight: 800;
  padding: 0;
}

.round-action.subtle {
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--shadow-sm);
  font-size: 15px;
}

.user-avatar .avatar {
  width: 38px;
  height: 38px;
  outline: 3px solid #fff;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 13px;
}

.field.compact {
  margin-bottom: 12px;
}

.field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.project-appearance-field {
  min-width: 0;
  border: 0;
  margin: 0 0 14px;
  padding: 0;
}

.project-appearance-field legend {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.project-swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-swatch-grid label,
.project-icon-grid label {
  position: relative;
  display: inline-grid;
  cursor: pointer;
  place-items: center;
}

.project-swatch-grid input,
.project-icon-grid input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.project-swatch-grid span {
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid transparent;
  border-radius: 9px;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.project-swatch-grid input:checked + span {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent), inset 0 0 0 1px rgba(17, 24, 39, 0.08);
}

.project-swatch-grid label:hover span,
.project-icon-grid label:hover .project-icon-choice-preview {
  transform: translateY(-1px);
}

.project-icon-grid {
  display: grid;
  grid-template-columns: repeat(8, 34px);
  gap: 8px;
}

.project-icon-choice-preview {
  display: grid;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f5f6fb;
  place-items: center;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

.project-icon-choice-preview::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: #6f778d;
  -webkit-mask: var(--project-icon, var(--project-board)) center / contain no-repeat;
  mask: var(--project-icon, var(--project-board)) center / contain no-repeat;
}

.project-icon-grid input:checked + .project-icon-choice-preview {
  border-color: var(--appearance-color, #635bff);
  background: var(--appearance-color, #635bff);
  box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.18);
}

.project-icon-grid input:checked + .project-icon-choice-preview::before {
  background: #fff;
}

.project-appearance-popover {
  position: fixed;
  z-index: 150;
  width: min(340px, calc(100vw - 24px));
  max-height: min(520px, calc(100dvh - 24px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(31, 35, 62, 0.18);
  padding: 18px 18px 16px;
}

.project-appearance-popover[hidden] {
  display: none;
}

.appearance-block {
  display: grid;
  gap: 12px;
}

.appearance-block + .appearance-block {
  margin-top: 18px;
}

.appearance-block h3 {
  margin: 0;
  color: #1f2937;
  font-size: 17px;
  font-weight: 760;
}

.appearance-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
  gap: 10px 11px;
}

.appearance-color {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 7px;
  background: var(--swatch);
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.08);
}

.appearance-color:hover,
.appearance-color:focus-visible {
  border: 0;
  background: var(--swatch);
  box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.14), inset 0 0 0 1px rgba(17, 24, 39, 0.08);
}

.appearance-color.active {
  box-shadow: 0 0 0 2px var(--accent), inset 0 0 0 2px #fff;
}

.appearance-tab-row {
  display: flex;
  align-items: end;
  gap: 26px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 16px;
}

.appearance-tab-row span {
  display: inline-flex;
  border-bottom: 2px solid transparent;
  padding: 0 0 10px;
}

.appearance-tab-row .active {
  border-color: var(--text);
  color: var(--text);
}

.appearance-icon-grid {
  display: grid;
  max-height: 310px;
  overflow-y: auto;
  grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  gap: 16px 18px;
  padding: 2px 6px 4px 0;
}

.appearance-icon {
  display: grid;
  width: 54px;
  min-width: 54px;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 0;
  place-items: center;
}

.appearance-icon::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background: #737373;
  -webkit-mask: var(--project-icon, var(--project-board)) center / contain no-repeat;
  mask: var(--project-icon, var(--project-board)) center / contain no-repeat;
}

.appearance-icon:hover,
.appearance-icon:focus-visible {
  border: 0;
  background: var(--surface-2);
}

.appearance-icon.active {
  background: var(--appearance-color, var(--accent));
}

.appearance-icon.active::before {
  background: #fff;
}

.range-value {
  justify-self: end;
  margin-top: -24px;
  color: var(--accent-ink);
  font-size: 12px;
}

input,
select,
textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  padding: 8px 10px;
  box-shadow: none;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--line-strong);
}

textarea {
  resize: vertical;
}

.side-actions,
.top-actions,
.filters,
.view-tabs,
.grid-2 {
  display: flex;
  gap: 8px;
}

.side-actions {
  margin-top: auto;
  padding-top: 12px;
}

#sidebarLogout,
#exportData,
#importData,
#newSection,
#newStatus {
  box-shadow: none;
}

.app-nav {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(225, 229, 240, 0.82);
}

.app-nav button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  justify-content: flex-start;
  align-items: center;
  min-height: 34px;
  border-color: transparent;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: #68718b;
  font-size: 13px;
  text-align: left;
  font-weight: 780;
  padding: 0 10px;
}

.app-nav button::before {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}

.app-nav [data-page="project"]::before { content: "⌂"; }
.app-nav [data-page="myTasks"]::before { content: "✓"; }
.app-nav [data-page="inbox"]::before { content: "▢"; }
.app-nav [data-page="reports"]::before { content: "↗"; }

.app-nav button span {
  min-width: 0;
}

.app-nav button em {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: rgba(99, 91, 255, 0.08);
  color: #68718b;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.app-nav button:hover {
  background: var(--surface-2);
}

.app-nav button.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.app-nav button.active::before {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.side-section {
  border-top: 1px solid rgba(225, 229, 240, 0.82);
  padding-top: 14px;
  margin-top: 14px;
}

.projects-section {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.side-section h2,
.side-section-title {
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  min-height: 24px;
  justify-content: flex-start;
  padding: 0;
  font-size: 12px;
  font-weight: 820;
  text-transform: none;
}

.side-section-title:hover {
  background: transparent;
  color: var(--accent-ink);
}

.side-section-title::after {
  content: "⌄";
  margin-left: 5px;
  color: var(--quiet);
  font-size: 12px;
  transition: transform .14s ease;
}

.projects-section.is-collapsed .side-section-title::after {
  transform: rotate(-90deg);
}

.side-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0 2px;
}

.section-add {
  width: 26px;
  min-width: 26px;
  min-height: 26px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 0;
  box-shadow: none;
  font-size: 18px;
  font-weight: 600;
}

.section-add-mini {
  display: none;
}

.section-add:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.project-list,
.team-list,
.stack {
  display: grid;
  gap: 3px;
}

.project-row,
.mini-item,
.task-card,
.comment,
.subtask,
.pill-row,
.metric,
.overview-hero,
.overview-stat,
.overview-task-row,
.dash-panel,
.calendar-row,
.timeline-row,
.inbox-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.project-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: center;
  min-height: 38px;
  border-color: transparent;
  border-radius: 14px;
  background: transparent;
  padding: 2px;
  transition: background .14s ease, border-color .14s ease, opacity .14s ease;
}

.project-row:not(.active):hover {
  background: var(--surface-2);
}

.project-row.is-favorite:not(.active) {
  background: rgba(99, 91, 255, 0.055);
}

.project-row.is-dragging {
  opacity: .55;
}

.project-row.is-drop-target {
  border-color: rgba(99, 91, 255, 0.22);
  background: var(--surface-2);
}

.sidebar.is-collapsed {
  align-items: center;
  overflow: visible;
  padding-inline: 9px;
}

.sidebar.is-collapsed .brand {
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

.sidebar.is-collapsed .brand > div,
.sidebar.is-collapsed .side-section-title,
.sidebar.is-collapsed .project span,
.sidebar.is-collapsed .project-favorite-mark,
.sidebar.is-collapsed .project-actions {
  display: none;
}

.sidebar.is-collapsed .app-nav {
  width: 100%;
  justify-items: center;
}

.sidebar.is-collapsed .app-nav button {
  position: relative;
  grid-template-columns: 1fr;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  text-align: center;
}

.sidebar.is-collapsed .app-nav button span {
  display: none;
}

.sidebar.is-collapsed .app-nav button::before {
  width: 28px;
  height: 28px;
  margin: 0 auto;
}

.sidebar.is-collapsed .app-nav button em {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
}

.sidebar.is-collapsed .side-section,
.sidebar.is-collapsed .projects-section,
.sidebar.is-collapsed .project-list {
  width: 100%;
}

.sidebar.is-collapsed .side-section-head {
  justify-content: center;
  padding: 0;
}

.sidebar.is-collapsed .section-add {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
}

.sidebar.is-collapsed .project-row {
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 40px;
}

.sidebar.is-collapsed .project {
  grid-template-columns: 1fr;
  justify-items: center;
  width: 38px;
  min-height: 38px;
  padding: 0;
}

.sidebar.is-collapsed .project-mini-icon {
  width: 22px;
  height: 22px;
}

.sidebar.is-collapsed .sidebar-profile {
  justify-content: center;
  width: 100%;
}

.sidebar.is-collapsed .sidebar-profile-menu {
  left: 52px;
  bottom: 0;
}

.sidebar.is-collapsed .sidebar-collapse-dock {
  width: calc(100% + 18px);
  margin: 14px -9px -16px;
  justify-content: center;
}

.sidebar.is-collapsed .sidebar-collapse {
  height: 68px;
  min-height: 68px;
}

.project {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  width: 100%;
  min-height: 34px;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 6px 8px;
  box-shadow: none;
  text-align: left;
}

.project:hover,
.project:active,
.project:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline-offset: -2px;
}

.project span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.project.is-editing {
  cursor: text;
}

.project.is-editing .project-name-editor {
  margin: -2px 0;
  padding: 5px 9px;
  border: 1px solid rgba(99, 91, 255, .22);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(31, 35, 62, .08), 0 0 0 3px rgba(99, 91, 255, .08);
}

.project-name-editor {
  display: block;
  min-width: 16px;
  max-width: 100%;
  overflow: hidden;
  color: var(--accent-ink);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-name-editor:focus-visible {
  outline: 0;
  outline-offset: 0;
}

.project-row:hover,
.task-card:hover,
.overview-task-row:hover,
.calendar-row:hover,
.timeline-row:hover,
.inbox-item:hover {
  border-color: transparent;
}

.project-row.active {
  border-color: transparent;
  background: linear-gradient(90deg, rgba(99, 91, 255, 0.12), rgba(99, 91, 255, 0.06));
  box-shadow: none;
}

.task-card.active,
tr.active,
.calendar-row.active {
  border-color: transparent;
  background: var(--accent-soft);
  box-shadow: none;
}

.project-row.active strong {
  color: var(--accent-ink);
}

.project-favorite-mark {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: rgba(99, 91, 255, 0.12);
  color: var(--accent);
  font-size: 11px;
  font-style: normal;
  line-height: 1;
}

.project-actions {
  position: relative;
}

.project-actions summary {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  color: var(--quiet);
  cursor: pointer;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, background .14s ease, color .14s ease;
}

.project-actions summary::-webkit-details-marker {
  display: none;
}

.project-actions summary:hover {
  background: rgba(255, 255, 255, 0.62);
  color: var(--accent-ink);
}

.project-row:hover .project-actions summary,
.project-row:focus-within .project-actions summary,
.project-actions[open] summary {
  opacity: 1;
  pointer-events: auto;
}

.project-actions div {
  position: absolute;
  top: 30px;
  right: 0;
  z-index: 12;
  display: grid;
  min-width: 148px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  padding: 6px;
}

.project-actions:not([open]) > div {
  display: none;
}

.project-actions button {
  justify-content: flex-start;
  min-height: 30px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: 13px;
}

.project-actions button:hover {
  background: var(--surface-2);
}

.project-mini-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.project-mini-icon[data-project-appearance],
.project-icon.project-mini-icon {
  cursor: pointer;
}

.project-mini-icon[data-project-appearance]:hover,
.project-icon.project-mini-icon:hover {
  transform: translateY(-1px);
}

.project-mini-icon.violet { background: #635bff; }
.project-mini-icon.blue { background: #60a5fa; }
.project-mini-icon.green { background: #34d399; }
.project-mini-icon.emerald { background: #22c55e; }
.project-mini-icon.indigo { background: #4f46e5; }
.project-mini-icon.cyan { background: #0891b2; }
.project-mini-icon.rose { background: #fb7185; }
.project-mini-icon.sky { background: #38bdf8; }

.project strong,
.task-card strong {
  display: block;
  overflow-wrap: anywhere;
}

.project small,
.mini-item span,
.task-card p,
.task-foot,
.comment small,
.subtask small,
.activity small,
.update small {
  color: var(--muted);
  font-size: 12px;
}

.team-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  padding: 4px 6px;
  text-align: left;
  box-shadow: none;
}

.team-row:hover {
  background: var(--surface-2);
}

.team-row .avatar {
  width: 21px;
  height: 21px;
  font-size: 10px;
  outline: 2px solid #fff;
}

.team-row span {
  display: grid;
  min-width: 0;
}

.team-row strong {
  overflow: hidden;
  color: #30364a;
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-row small {
  overflow: hidden;
  color: var(--quiet);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-row em {
  display: inline-grid;
  min-width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 999px;
  background: rgba(99, 91, 255, 0.08);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.invite-row {
  justify-content: flex-start;
  min-height: 28px;
  width: 100%;
  margin-top: 4px;
  border: 0;
  background: transparent;
  color: #9aa2b8;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
}

.invite-row::before {
  content: "+";
  color: #9aa2b8;
}

.sidebar-profile {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(225, 229, 240, 0.82);
}

.sidebar-collapse-dock {
  display: flex;
  justify-content: flex-start;
  width: calc(100% + 26px);
  margin: 14px -13px -16px;
  border-top: 1px solid rgba(225, 229, 240, 0.92);
  background: rgba(247, 248, 252, 0.72);
}

.sidebar-profile-button {
  display: grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(247, 248, 252, 0.94);
  color: var(--text);
  padding: 0;
  box-shadow: 0 10px 28px rgba(35, 38, 68, 0.09);
}

.sidebar-profile-button:hover,
.sidebar-profile-button[aria-expanded="true"] {
  background: var(--accent-soft);
}

.sidebar-profile-avatar,
.sidebar-profile-menu-avatar {
  display: contents;
}

.sidebar-profile-menu {
  position: absolute;
  left: 0;
  bottom: 52px;
  z-index: 16;
  display: grid;
  width: min(226px, calc(100vw - 32px));
  gap: 4px;
  border: 1px solid rgba(225, 229, 240, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 70px rgba(38, 43, 78, 0.16);
  padding: 8px;
  backdrop-filter: blur(16px);
}

.sidebar-profile-menu[hidden] {
  display: none;
}

.sidebar-profile-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid rgba(225, 229, 240, 0.82);
  padding: 7px 7px 10px;
  margin-bottom: 4px;
}

.sidebar-profile-head .avatar {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.sidebar-profile-head span {
  display: grid;
  min-width: 0;
}

.sidebar-profile-head strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-profile-head small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-profile-menu button {
  justify-content: flex-start;
  min-height: 34px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #4d566f;
  box-shadow: none;
  font-size: 13px;
  font-weight: 720;
}

.sidebar-profile-menu button:hover {
  background: var(--surface-2);
  color: var(--accent-ink);
}

#sidebarLogout {
  color: #d94f5c;
}

/* Sidebar visual system */
.app {
  grid-template-columns: 252px minmax(560px, 1fr);
}

.app.sidebar-collapsed {
  grid-template-columns: 74px minmax(560px, 1fr);
}

.sidebar {
  border-color: rgba(226, 230, 241, 0.92);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  padding: 18px 18px 0;
  box-shadow: 0 18px 44px rgba(33, 39, 72, 0.08);
  color: #2a3145;
}

.brand {
  gap: 12px;
  min-height: 40px;
  margin-bottom: 22px;
  padding: 0;
}

.brand-logo {
  width: 34px;
  min-width: 34px;
  height: 34px;
}

.brand h1 {
  color: #141b2f;
  font-size: 15px;
  font-weight: 820;
}

.app-nav {
  gap: 6px;
  margin-bottom: 20px;
  padding-bottom: 18px;
}

.app-nav button {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  min-height: 42px;
  border-radius: 14px;
  color: #657089;
  font-size: 14px;
  font-weight: 730;
  padding: 0 12px;
}

.app-nav button::before {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  color: #7c869e;
  font-size: 14px;
}

.app-nav button:hover {
  background: #f6f7fb;
  color: #414a62;
}

.app-nav button.active {
  background: linear-gradient(90deg, rgba(99, 91, 255, 0.12), rgba(99, 91, 255, 0.06));
  color: var(--accent-ink);
}

.app-nav button.active::before {
  background: transparent;
  color: var(--accent-ink);
}

.app-nav button em {
  min-width: 22px;
  height: 22px;
  background: #eef0f8;
  color: #626b83;
  font-size: 11px;
}

.side-section {
  margin-top: 0;
  padding-top: 18px;
}

.side-section-head {
  min-height: 32px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.side-section-title {
  min-height: 30px;
  color: #6d758c;
  font-size: 13px;
  font-weight: 790;
}

.side-section-title::after {
  margin-left: 8px;
  color: #9aa2b8;
  font-size: 12px;
}

.side-section-title::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  color: #7c869e;
  opacity: 0;
  transform: rotate(45deg) translateY(-1px);
  transition: opacity .14s ease, transform .14s ease, color .14s ease;
}

.projects-section.is-collapsed .side-section-title::after {
  transform: rotate(-45deg) translateY(1px);
}

.side-section-title:hover::after,
.side-section-title:focus-visible::after {
  opacity: 1;
}

.section-add {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  border-radius: 10px;
  color: #7c869e;
  font-size: 20px;
  font-weight: 650;
}

.section-add:hover {
  background: #f0efff;
  color: var(--accent-ink);
}

.project-list {
  gap: 6px;
}

.project-row {
  grid-template-columns: minmax(0, 1fr) 28px;
  min-height: 38px;
  border-radius: 13px;
  padding: 2px 3px;
}

.project-row:not(.active):hover {
  background: #f7f8fc;
}

.project-row.active {
  background: linear-gradient(90deg, rgba(99, 91, 255, 0.13), rgba(99, 91, 255, 0.055));
}

.project {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 34px;
  gap: 9px;
  border-radius: 13px;
  padding: 0 9px;
}

.project-mini-icon {
  width: 24px;
  height: 24px;
  border-radius: 9px;
  font-size: 10px;
}

.project strong {
  color: #20273a;
  font-size: 14px;
  font-weight: 760;
}

.project-row.active strong {
  color: var(--accent-ink);
}

.project-actions summary {
  width: 26px;
  height: 26px;
  border-radius: 9px;
}

.sidebar-profile {
  margin-top: auto;
  justify-content: flex-start;
  padding: 18px 0 14px;
}

.sidebar-profile-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(38, 45, 78, 0.08);
}

.sidebar-profile-button .avatar {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

.sidebar-collapse-dock {
  width: calc(100% + 36px);
  margin: 0 -18px;
  border-top-color: rgba(226, 230, 241, 0.72);
  background: rgba(255, 255, 255, 0.94);
}

.sidebar-collapse {
  justify-content: flex-start;
  padding-left: 24px;
  color: #1f2937;
  font-size: 26px;
}

.sidebar.is-collapsed {
  padding: 16px 10px 0;
}

.sidebar.is-collapsed .brand {
  gap: 10px;
}

.sidebar.is-collapsed .sidebar-search {
  display: none;
}

.sidebar.is-collapsed .app-nav button {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 14px;
  color: transparent;
  font-size: 0;
}

.sidebar.is-collapsed .app-nav button::before {
  color: #7c869e;
  font-size: 14px;
}

.sidebar.is-collapsed .app-nav button.active::before {
  color: var(--accent-ink);
}

.sidebar.is-collapsed .app-nav button em {
  color: #626b83;
  font-size: 10px;
  line-height: 1;
}

.sidebar.is-collapsed .section-add {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 13px;
}

.sidebar.is-collapsed .project-row {
  min-height: 42px;
  border-radius: 14px;
}

.sidebar.is-collapsed .project {
  width: 38px;
  min-height: 38px;
  border-radius: 13px;
}

.sidebar.is-collapsed .sidebar-profile {
  padding-top: 16px;
}

.sidebar.is-collapsed .sidebar-collapse-dock {
  width: calc(100% + 20px);
  margin: 0 -10px;
}

.sidebar.is-collapsed .sidebar-collapse {
  justify-content: center;
  padding-left: 0;
}

/* Polished sidebar icons */
.sidebar {
  --icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.8 12 4l9 6.8'/%3E%3Cpath d='M5.5 10.5V20h13v-9.5'/%3E%3Cpath d='M9.5 20v-5h5v5'/%3E%3C/svg%3E");
  --icon-tasks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12l2.4 2.4L16.5 8.5'/%3E%3Cpath d='M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
  --icon-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16l-2 9H6l-2-9Z'/%3E%3Cpath d='M8 14.5a4 4 0 0 0 8 0'/%3E%3Cpath d='M5 18.5h14'/%3E%3C/svg%3E");
  --icon-reports: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M8 16v-4'/%3E%3Cpath d='M13 16V8'/%3E%3Cpath d='M18 16v-7'/%3E%3C/svg%3E");
  --icon-team: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20v-1.5a4.5 4.5 0 0 0-4.5-4.5h-3A4.5 4.5 0 0 0 4 18.5V20'/%3E%3Ccircle cx='10' cy='7' r='4'/%3E%3Cpath d='M18 9v6M15 12h6'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --icon-chevrons-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 6l-6 6 6 6'/%3E%3Cpath d='M19 6l-6 6 6 6'/%3E%3C/svg%3E");
  --icon-chevrons-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6l6 6-6 6'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --project-board: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='3'/%3E%3Cpath d='M9 5v14M15 5v14'/%3E%3C/svg%3E");
  --project-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h8l4 4v12H7z'/%3E%3Cpath d='M14 4v5h5M10 13h6M10 17h4'/%3E%3C/svg%3E");
  --project-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5h6l1.7 2h9.3v8.5a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E");
  --project-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --project-stack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4-8 4-8-4 8-4Z'/%3E%3Cpath d='M4 12l8 4 8-4M4 17l8 4 8-4'/%3E%3C/svg%3E");
  --project-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19V9M12 19V5M19 19v-7'/%3E%3Cpath d='M3 19h18'/%3E%3C/svg%3E");
  --project-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13l-7 7-9-9V4h7l9 9Z'/%3E%3Cpath d='M7.5 7.5h.01'/%3E%3C/svg%3E");
  --project-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3Z'/%3E%3Cpath d='M18 16l.8 2.2L21 19l-2.2.8L18 22l-.8-2.2L15 19l2.2-.8L18 16Z'/%3E%3C/svg%3E");
}

.brand-logo {
  width: 42px;
  min-width: 42px;
  height: 42px;
  border-radius: 16px;
}

.brand-logo::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 24%, rgba(99, 91, 255, 0.2), transparent 36%),
    radial-gradient(circle at 26% 70%, rgba(99, 91, 255, 0.16), transparent 34%),
    radial-gradient(circle at 74% 70%, rgba(99, 91, 255, 0.16), transparent 34%);
  filter: blur(2px);
}

.brand-logo i {
  width: 13px;
  height: 13px;
  background: linear-gradient(135deg, #7d73ff, #5146e9);
  box-shadow: 0 10px 22px rgba(99, 91, 255, 0.28);
}

.brand-logo i:nth-child(1) {
  left: 8px;
  bottom: 8px;
}

.brand-logo i:nth-child(2) {
  top: 6px;
}

.brand-logo i:nth-child(3) {
  right: 8px;
  bottom: 8px;
}

.app-nav button::before {
  content: "";
  color: inherit;
  background: currentColor;
  -webkit-mask: var(--nav-icon) center / 18px 18px no-repeat;
  mask: var(--nav-icon) center / 18px 18px no-repeat;
}

.app-nav [data-page="project"] { --nav-icon: var(--icon-home); }
.app-nav [data-page="myTasks"] { --nav-icon: var(--icon-tasks); }
.app-nav [data-page="inbox"] { --nav-icon: var(--icon-inbox); }
.app-nav [data-page="reports"] { --nav-icon: var(--icon-reports); }
.app-nav [data-page="team"] { --nav-icon: var(--icon-team); }

.app-nav [data-page="project"]::before,
.app-nav [data-page="myTasks"]::before,
.app-nav [data-page="inbox"]::before,
.app-nav [data-page="reports"]::before {
  content: "";
}

.app-nav button.active::before,
.sidebar.is-collapsed .app-nav button.active::before {
  background: currentColor;
  color: var(--accent-ink);
}

.section-add {
  font-size: 0;
}

.section-add::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--icon-plus) center / contain no-repeat;
  mask: var(--icon-plus) center / contain no-repeat;
}

.project-mini-icon {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--project-color, #746bff), var(--project-color-end, #5547de));
  color: transparent;
  font-size: 0;
  box-shadow: 0 10px 18px rgba(99, 91, 255, 0.18);
}

.project-mini-icon::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-mask: var(--project-icon, var(--project-board)) center / contain no-repeat;
  mask: var(--project-icon, var(--project-board)) center / contain no-repeat;
}

.project-mini-icon.violet {
  --project-icon: var(--project-board);
  background: linear-gradient(135deg, #746bff, #5547de);
}

.project-mini-icon.blue {
  --project-icon: var(--project-doc);
  background: linear-gradient(135deg, #72bbff, #4d93f6);
}

.project-mini-icon.green {
  --project-icon: var(--project-folder);
  background: linear-gradient(135deg, #4fd6a4, #18b981);
}

.project-mini-icon.emerald {
  --project-icon: var(--project-target);
  background: linear-gradient(135deg, #47d989, #16a34a);
}

.project-mini-icon.indigo {
  --project-icon: var(--project-stack);
  background: linear-gradient(135deg, #756bff, #4338ca);
}

.project-mini-icon.cyan {
  --project-icon: var(--project-chart);
  background: linear-gradient(135deg, #3fd2ed, #0891b2);
}

.project-mini-icon.rose {
  --project-icon: var(--project-tag);
  background: linear-gradient(135deg, #ff8aa1, #fb5472);
}

.project-mini-icon.sky {
  --project-icon: var(--project-spark);
  background: linear-gradient(135deg, #62c6ff, #2ba7e8);
}

.sidebar-collapse {
  font-size: 0;
}

.sidebar-collapse::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: #1f2937;
  -webkit-mask: var(--icon-chevrons-left) center / contain no-repeat;
  mask: var(--icon-chevrons-left) center / contain no-repeat;
}

.sidebar-collapse:hover::before {
  background: var(--accent-ink);
}

.sidebar.is-collapsed .sidebar-collapse::before {
  -webkit-mask: var(--icon-chevrons-right) center / contain no-repeat;
  mask: var(--icon-chevrons-right) center / contain no-repeat;
}

.mini-item {
  padding: 9px 10px;
}

.mini-item strong,
.mini-item span {
  display: block;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin: 0 -22px 0;
  padding: 18px 26px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(12px);
}

.project-heading {
  display: flex;
  min-width: 0;
  gap: 12px;
  align-items: center;
}

.project-icon {
  display: grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, #756bff, #5547de);
  color: #fff;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 16px 32px rgba(99, 91, 255, 0.25);
}

.project-icon:hover,
.project-icon:focus-visible {
  border: 0;
  background: linear-gradient(135deg, #756bff, #5547de);
  box-shadow: 0 16px 32px rgba(99, 91, 255, 0.25);
}

.project-icon.project-mini-icon {
  background: linear-gradient(135deg, var(--project-color, #746bff), var(--project-color-end, #5547de));
}

.project-icon.project-mini-icon:hover,
.project-icon.project-mini-icon:focus-visible {
  background: linear-gradient(135deg, var(--project-color, #746bff), var(--project-color-end, #5547de));
}

.project-icon.project-mini-icon::before {
  width: 21px;
  height: 21px;
}

.icon-action,
.project-info-dot {
  display: inline-grid;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  padding: 0;
  font-weight: 800;
}

.icon-action.active,
.icon-action[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.icon-action:hover,
.project-info-dot:hover {
  background: var(--surface-2);
  color: var(--accent-ink);
}

.project-info-dot {
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.project-status-badge {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 820;
}

.project-members {
  display: flex;
  align-items: center;
}

.project-members .avatar,
.project-members .avatar-more {
  width: 30px;
  height: 30px;
  margin-left: -7px;
  outline: 3px solid var(--surface);
}

.top-actions {
  position: relative;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

.share-action {
  border-color: rgba(99, 91, 255, 0.20);
  color: var(--accent);
  font-weight: 780;
}

.more-actions {
  position: relative;
}

.more-actions summary {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  padding: 0 12px;
  list-style: none;
}

.more-actions summary::-webkit-details-marker {
  display: none;
}

.more-actions summary:hover {
  border-color: var(--line-strong);
  background: #f4f5f7;
}

.more-actions div {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 12;
  display: grid;
  min-width: 170px;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 8px;
  box-shadow: var(--shadow-md);
}

.more-actions:not([open]) > div {
  display: none;
}

.more-actions div button {
  justify-content: flex-start;
}

.view-tabs {
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  margin: 0 -22px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.76);
  padding: 0 26px;
  box-shadow: none;
}

.view-tabs button {
  min-height: 44px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-weight: 760;
}

.view-tabs button.active {
  border-bottom-color: var(--accent);
  background: transparent;
  color: var(--accent);
}

.filters {
  display: grid;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.filter-row {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.filter-row input {
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-panel[hidden] {
  display: none;
}

.filter-panel select {
  width: auto;
  min-width: 160px;
}

.filters button,
.filter-row button {
  min-height: 38px;
  border-radius: 12px;
}

.task-toolbar-add {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), #4f46e5);
  color: #fff;
  padding: 0 14px;
  font-weight: 820;
  box-shadow: 0 12px 24px rgba(99, 91, 255, 0.22);
  white-space: nowrap;
}

.task-toolbar-add:hover,
.task-toolbar-add:focus-visible {
  border-color: transparent;
  background: linear-gradient(135deg, #766bff, #4f46e5);
  color: #fff;
  box-shadow: 0 14px 28px rgba(99, 91, 255, 0.28);
}

#toggleFilters.active {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.active-filters[hidden] {
  display: none;
}

.active-filters button {
  min-height: 28px;
  border-color: transparent;
  background: transparent;
  color: var(--accent-ink);
  padding: 0;
}

.summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(128px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.summary:empty {
  display: none;
}

.metric {
  padding: 13px;
  box-shadow: none;
}

.metric span {
  color: var(--muted);
  font-size: 12px;
}

.metric strong {
  display: block;
  margin-top: 3px;
  font-size: 25px;
  line-height: 1.1;
}

.metric.skeleton,
.skeleton-grid span {
  position: relative;
  overflow: hidden;
  min-height: 72px;
  background: var(--surface);
}

.metric.skeleton span,
.metric.skeleton strong {
  display: block;
  border-radius: 6px;
  background: var(--surface-3);
}

.metric.skeleton span {
  width: 48%;
  height: 12px;
}

.metric.skeleton strong {
  width: 68%;
  height: 26px;
  margin-top: 12px;
}

.metric.skeleton::after,
.skeleton-grid span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  animation: shimmer 1.35s infinite;
}

.board-view {
  display: grid;
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  height: clamp(430px, calc(100vh - 300px), 720px);
  overflow: hidden;
}

.task-visibility-bar {
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 2px 2px;
  color: var(--muted);
  font-size: 12px;
  box-shadow: none;
}

.timeline-view .task-visibility-bar {
  position: sticky;
  left: 0;
  min-width: 760px;
}

.timeline-view .task-visibility-bar {
  min-width: 920px;
}

.task-visibility-bar div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.task-visibility-bar span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 4px 8px;
  font-weight: 720;
}

.task-visibility-bar button {
  min-height: 30px;
  border-color: transparent;
  background: transparent;
  color: var(--accent-ink);
  white-space: nowrap;
  padding: 0;
}

.column {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(228, 231, 242, 0.7);
  border-radius: 18px;
  background: rgba(245, 246, 251, 0.86);
  padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.column.drag-over {
  border-color: var(--accent);
  background: rgba(240, 239, 255, 0.88);
}

.column header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.board-section-title {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: inherit;
  text-align: left;
}

.board-section-title div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.board-section-title strong {
  font-size: 13px;
}

.board-section-title small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.column-actions {
  display: inline-flex;
  flex-shrink: 0;
  gap: 4px;
  align-items: center;
}

.column-count {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  box-shadow: none;
}

.column-add-task {
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 0;
  box-shadow: none;
  font-size: 16px;
  font-weight: 760;
}

.column-add-task:hover {
  background: #fff;
  color: var(--accent-ink);
}

.column-progress {
  overflow: hidden;
  height: 3px;
  margin-bottom: 9px;
  border-radius: 999px;
  background: var(--line);
}

.column-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.column-tasks {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
  scrollbar-width: thin;
}

.column-tasks::-webkit-scrollbar {
  width: 7px;
}

.column-tasks::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(146, 153, 178, 0.28);
}

.column-tasks::-webkit-scrollbar-track {
  background: transparent;
}

.board-quick-task {
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 6px;
  margin-top: 9px;
}

.board-quick-task input {
  min-width: 0;
  min-height: 30px;
  border-color: transparent;
  background: transparent;
  color: var(--text);
  padding: 5px 4px;
  font-size: 12px;
}

.board-quick-task input:focus {
  border-color: var(--accent);
  background: var(--surface);
}

.board-quick-task button {
  width: 28px;
  min-width: 28px;
  min-height: 30px;
  padding: 0;
}

.task-card {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 0;
  gap: 7px;
  justify-content: stretch;
  overflow: visible;
  border-color: rgba(108, 99, 190, 0.10);
  border-radius: 15px;
  background: var(--surface);
  padding: 11px;
  box-shadow: 0 10px 24px rgba(43, 50, 82, 0.06);
  text-align: left;
  cursor: pointer;
}

.task-card:hover {
  border-color: rgba(121, 110, 255, 0.34);
  background: #fff;
  box-shadow: 0 16px 34px rgba(46, 52, 75, 0.12);
}

.task-card.active {
  border-color: rgba(121, 110, 255, 0.58);
  box-shadow: 0 18px 42px rgba(80, 70, 190, 0.16);
}

.task-card p,
.task-card-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.task-card-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  gap: 7px;
  align-items: start;
  color: var(--muted);
}

.task-card-title-wrap {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.task-card-state {
  display: inline-flex;
  min-width: 0;
  gap: 6px;
  align-items: center;
}

.task-card-state.warning {
  max-width: 100%;
}

.task-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--purple);
}

.task-status-dot.done {
  background: var(--green);
}

.task-status-dot.blocked {
  background: var(--red);
}

.task-status-label {
  width: max-content;
  min-height: 20px;
  max-width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  padding: 2px 8px;
  color: var(--purple);
  font-size: 11px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-card-menu {
  width: 18px;
  min-width: 18px;
  height: 22px;
  border-radius: 8px;
  color: var(--quiet);
  font-size: 18px;
  line-height: 1;
  text-align: center;
  opacity: .62;
}

.task-card:hover .task-card-menu,
.task-card.active .task-card-menu {
  background: var(--surface-2);
  color: var(--muted);
  opacity: 1;
}

.task-card-title {
  color: var(--text);
  font-size: 13px;
  line-height: 1.32;
  letter-spacing: 0;
}

.task-card.done .task-card-title {
  color: var(--muted);
  text-decoration: line-through;
}

.task-card-description {
  margin: 0;
  color: #7a8194;
  font-size: 11px;
  line-height: 1.38;
}

.task-card-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.task-card-person {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  gap: 6px;
  align-items: center;
  border-radius: 999px;
  background: rgba(247, 248, 252, 0.84);
  padding: 2px 7px 2px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.task-card-person .avatar {
  width: 20px;
  height: 20px;
  outline: 2px solid #fff;
}

.task-card-person small {
  overflow: hidden;
  max-width: 108px;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-priority-pill {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: var(--amber-soft);
  padding: 0 9px;
  color: #e69016;
  font-weight: 820;
}

.task-priority-pill::before {
  content: "⚑";
  font-size: 11px;
  line-height: 1;
}

.task-priority-pill.urgent {
  background: var(--red-soft);
  color: var(--red);
}

.task-priority-pill.high {
  background: var(--amber-soft);
  color: #e69016;
}

.task-priority-pill.normal {
  background: var(--blue-soft);
  color: var(--blue);
}

.task-priority-pill.low {
  background: var(--green-soft);
  color: var(--green);
}

.card-complete {
  display: inline-grid;
  width: 23px;
  min-width: 23px;
  height: 23px;
  min-height: 23px;
  margin-top: 0;
  padding: 0;
  place-items: center;
  border: 2px solid #a8afc1;
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}

.card-complete:hover {
  border-color: var(--green);
  background: var(--green-soft);
}

.card-complete::after {
  content: "";
  width: 9px;
  height: 5px;
  transform: rotate(-45deg);
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

.task-card.done .card-complete {
  border-color: var(--green);
  background: var(--green);
}

.task-card.done .card-complete::after {
  border-color: #fff;
}

.card-complete:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.priority,
.tag,
.due-badge {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.priority.urgent {
  background: var(--red-soft);
  color: var(--red);
}

.priority.high {
  background: var(--amber-soft);
  color: var(--amber);
}

.priority.normal {
  background: var(--blue-soft);
  color: var(--blue);
}

.priority.low {
  background: var(--green-soft);
  color: var(--green);
}

.tag {
  background: color-mix(in srgb, var(--tag) 14%, white);
  color: var(--tag);
}

.due-badge {
  gap: 5px;
  background: var(--surface-soft);
  color: var(--muted);
}

.due-badge::before {
  content: "▣";
  color: var(--red);
  font-size: 10px;
  line-height: 1;
}

.due-badge.none::before {
  color: var(--quiet);
}

.due-badge.overdue {
  background: var(--red-soft);
  color: var(--red);
}

.due-badge.today {
  background: var(--accent-soft);
  color: var(--accent);
}

.due-badge.soon {
  background: var(--amber-soft);
  color: var(--amber);
}

.due-badge.done {
  background: var(--green-soft);
  color: var(--green);
}

.due-cell {
  display: grid;
  grid-template-columns: minmax(112px, auto) minmax(136px, 1fr);
  gap: 8px;
  align-items: center;
}

.assignee-cell {
  display: grid;
  grid-template-columns: minmax(48px, auto) minmax(128px, 1fr);
  gap: 8px;
  align-items: center;
}

.task-name-cell {
  display: grid;
  gap: 5px;
}

.dependency-pill {
  display: inline-flex;
  width: max-content;
  min-height: 20px;
  align-items: center;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 650;
}

.dependency-pill.blocked {
  background: var(--red-soft);
  color: var(--red);
}

.dependency-pill.clear {
  background: var(--green-soft);
  color: var(--green);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.task-checklist-preview {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  align-items: center;
  border-top: 1px solid rgba(228, 231, 242, 0.72);
  padding-top: 8px;
}

.task-checklist-ring {
  --check: 0;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--surface) 58%, transparent 60%),
    conic-gradient(#2dbf88 calc(var(--check) * 1%), var(--line) 0);
  color: var(--text);
  font-size: 10px;
  font-weight: 820;
}

.task-checklist-preview div {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.task-checklist-preview strong {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-checklist-preview i {
  overflow: hidden;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
}

.task-checklist-preview i span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22b47b, #41d6a2);
}

.task-checklist-preview small {
  color: var(--muted);
  font-size: 9px;
}

.task-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(228, 231, 242, 0.72);
  margin: 0 -12px -12px;
  border-radius: 0 0 15px 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(247, 248, 252, 0.72));
  padding: 9px 12px;
  color: var(--muted);
}

.task-stat {
  display: inline-flex;
  min-width: max-content;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 760;
}

.task-card-stats,
.list-task-stats {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 5px;
}

.task-card-stats span,
.list-task-stats span {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  padding: 0 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}

.list-task-stats {
  margin-top: 5px;
}

.task-card-followers {
  display: flex;
  min-width: 0;
  margin-left: auto;
  gap: 6px;
  align-items: center;
}

.task-card-followers small {
  display: none;
}

.avatar-stack {
  display: flex;
  min-width: 0;
  align-items: center;
}

.avatar-stack .avatar,
.avatar-more {
  margin-left: -5px;
  outline: 2px solid var(--surface);
}

.avatar-stack .avatar:first-child,
.avatar-stack .avatar-more:first-child {
  margin-left: 0;
}

.avatar-more {
  display: inline-grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.unassigned {
  color: var(--muted);
  font-size: 12px;
}

.avatar {
  display: inline-grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: var(--avatar);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
}

meter {
  width: 100%;
  height: 8px;
}

meter::-webkit-meter-bar {
  border: 0;
  border-radius: 999px;
  background: var(--surface-3);
}

meter::-webkit-meter-optimum-value {
  border-radius: 999px;
  background: var(--accent);
}

.list-view {
  display: grid;
  gap: 9px;
}

.list-shell {
  display: grid;
  gap: 0;
  overflow-x: auto;
  border: 1px solid rgba(228, 231, 242, 0.74);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  padding: 12px 12px 14px;
  box-shadow: 0 18px 52px rgba(43, 50, 82, 0.055);
}

.bulk-toolbar {
  display: none;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 9px 10px;
  color: var(--muted);
  box-shadow: var(--shadow-sm);
}

.bulk-toolbar:has(button:not(:disabled)) {
  display: flex;
}

.bulk-toolbar div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.select-visible-row {
  display: inline-flex;
  width: max-content;
  gap: 8px;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  background: var(--surface-soft);
  margin-bottom: 8px;
  padding: 0 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.select-visible-row input {
  width: 16px;
  min-width: 16px;
  min-height: 16px;
}

.list-header-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.45fr) minmax(150px, .85fr) minmax(118px, .65fr) minmax(118px, .65fr) minmax(112px, .65fr);
  gap: 12px;
  align-items: center;
  min-width: 850px;
  min-height: 36px;
  border-bottom: 1px solid var(--line);
  padding: 0 14px 7px 58px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.section-row {
  min-width: 850px;
  padding: 12px 10px 6px;
}

.section-row button {
  display: inline-flex;
  width: max-content;
  min-height: 30px;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  box-shadow: none;
  padding: 0;
}

.section-row button:hover {
  color: var(--accent-ink);
}

.section-chevron {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--muted);
  transform: rotate(90deg);
  transition: transform 0.16s ease;
}

.section-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.10);
}

.section-dot.blue { background: var(--blue); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.10); }
.section-dot.green,
.section-dot.emerald { background: var(--green); box-shadow: 0 0 0 4px rgba(22, 185, 129, 0.10); }
.section-dot.indigo { background: #4f46e5; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.10); }
.section-dot.cyan,
.section-dot.sky { background: #06b6d4; box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.10); }
.section-dot.rose { background: var(--red); box-shadow: 0 0 0 4px rgba(255, 90, 122, 0.10); }

.section-row.collapsed .section-chevron {
  transform: rotate(0deg);
}

.section-row strong {
  display: inline-block;
  font-size: 13px;
  font-weight: 840;
}

.section-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.list-task-row {
  display: grid;
  grid-template-columns: 20px 24px minmax(260px, 1.45fr) minmax(150px, .85fr) minmax(118px, .65fr) minmax(118px, .65fr) minmax(112px, .65fr);
  gap: 12px;
  align-items: center;
  min-width: 850px;
  min-height: 54px;
  border: 1px solid transparent;
  border-top-color: rgba(228, 231, 242, 0.62);
  border-radius: 14px;
  background: transparent;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.list-task-row:hover {
  border-color: rgba(99, 91, 255, 0.16);
  background: rgba(247, 248, 255, 0.74);
  box-shadow: none;
}

.list-task-row.active {
  border-color: rgba(99, 91, 255, 0.20);
  background: linear-gradient(90deg, rgba(240, 239, 255, 0.96), rgba(255, 255, 255, 0.84));
  box-shadow: inset 3px 0 0 var(--accent);
}

.list-task-row.done strong {
  color: var(--muted);
  text-decoration: line-through;
}

.row-select {
  width: 16px;
  min-width: 16px;
  min-height: 16px;
}

.list-task-main {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.list-task-main strong {
  color: #1f2433;
  font-size: 13px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.list-task-main small {
  display: none;
  color: var(--muted);
  font-size: 11px;
}

.list-task-details {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
}

.list-task-tags {
  display: inline-flex;
  min-width: 0;
  overflow: hidden;
  flex-wrap: nowrap;
  gap: 4px;
}

.list-checklist-mini {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  background: var(--surface-2);
  padding: 0 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.list-checklist-mini i {
  overflow: hidden;
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
}

.list-checklist-mini i span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.list-task-stats,
.list-task-meta {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
}

.list-task-stats > span,
.list-task-meta > span {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 20px;
  align-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  padding: 0 7px;
  font-weight: 650;
}

.list-cell {
  display: flex;
  min-width: 0;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.list-cell > span:not(.avatar):not(.due-badge):not(.task-priority-pill):not(.status-pill) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-assignee-cell .avatar {
  width: 24px;
  height: 24px;
  outline: 2px solid #fff;
}

.quick-task-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  min-width: 850px;
  min-height: 48px;
  border: 1px dashed transparent;
  border-top-color: rgba(228, 231, 242, 0.62);
  border-radius: 14px;
  background: transparent;
  padding: 7px 12px;
}

.quick-task-row::before {
  content: "+";
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
}

.quick-task-row input {
  border-color: transparent;
  background: transparent;
  color: var(--text);
  min-height: 32px;
}

.quick-task-row input:focus {
  border-color: var(--accent);
  background: var(--surface-soft);
}

.quick-task-row button {
  width: 34px;
  min-width: 34px;
  min-height: 32px;
  padding: 0;
}

.complete-cell {
  text-align: center;
}

.complete-circle {
  appearance: none;
  display: inline-grid;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}

.complete-circle:hover {
  border-color: var(--green);
  background: var(--green-soft);
}

.complete-circle:checked {
  border-color: var(--green);
  background: var(--green);
}

.complete-circle:checked::after {
  content: "";
  width: 9px;
  height: 5px;
  transform: rotate(-45deg);
  border-left: 2px solid white;
  border-bottom: 2px solid white;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
}

tr {
  cursor: pointer;
}

tbody tr:hover {
  background: var(--surface-2);
}

.calendar-view,
.timeline-view,
.dashboard-view,
.reports-view,
.my-tasks-view,
.inbox-view,
.archive-view,
.audit-view,
.settings-view {
  display: grid;
  gap: 10px;
}

.settings-view {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  align-items: start;
}

.settings-overview {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.settings-overview article {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(228, 231, 242, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  padding: 12px 14px;
  box-shadow: 0 12px 30px rgba(38, 44, 84, 0.05);
}

.settings-overview span {
  color: var(--muted);
  font-size: 12px;
}

.settings-overview strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.1;
}

.settings-panel {
  box-shadow: none;
}

.settings-card {
  display: grid;
  gap: 12px;
  border-color: rgba(228, 231, 242, 0.82);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  padding: 14px;
  box-shadow: 0 16px 38px rgba(38, 44, 84, 0.05);
}

.settings-card .panel-head {
  min-height: 32px;
}

.settings-card .panel-head h3 {
  margin: 0;
}

.settings-pill {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 800;
  padding: 0 10px;
}

.settings-list {
  display: grid;
  gap: 7px;
}

.settings-list .empty {
  border-radius: 14px;
  background: var(--surface-2);
  margin: 0;
  padding: 12px;
}

.settings-user-row .avatar {
  flex: 0 0 auto;
}

.settings-storage-card {
  grid-column: 1 / -1;
}

.settings-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.settings-actions button {
  justify-content: center;
  min-height: 40px;
}

.backup-row {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 10px;
}

.backup-kind {
  justify-self: start;
  border-radius: 999px;
  background: #eef0ff;
  color: var(--accent);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.backup-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.backup-main strong,
.backup-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backup-main small {
  color: var(--muted);
}

.my-task-group {
  display: grid;
  gap: 8px;
  padding: 2px 0 8px;
}

.my-task-group header,
.my-task-row {
  display: grid;
  grid-template-columns: 88px minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.my-task-group header {
  min-height: 30px;
  color: var(--muted);
  padding: 0 4px;
}

.my-task-group h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
}

.my-task-row {
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 9px 10px;
  box-shadow: none;
  text-align: left;
}

.my-task-row:hover {
  border-color: var(--line-strong);
  background: #fbfbfc;
}

.my-task-row.done strong {
  color: var(--muted);
  text-decoration: line-through;
}

.my-task-main {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.my-task-main strong {
  overflow-wrap: anywhere;
}

.my-task-row small,
.my-task-meta {
  color: var(--muted);
}

.my-task-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  font-size: 12px;
}

.my-task-meta em,
.archive-row em {
  color: var(--muted);
  font-style: normal;
  font-weight: 720;
}

.calendar-row {
  display: grid;
  grid-template-columns: 120px 1fr 190px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.calendar-row time {
  color: var(--muted);
  font-weight: 720;
}

.timeline-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 920px;
  height: clamp(400px, calc(100vh - 340px), 720px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  scrollbar-width: thin;
}

.timeline-view {
  overflow-x: auto;
}

.timeline-shell::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.timeline-shell::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(146, 153, 178, 0.28);
}

.timeline-shell::-webkit-scrollbar-track {
  background: transparent;
}

.timeline-scale,
.timeline-row {
  display: grid;
  grid-template-columns: 250px minmax(620px, 1fr);
}

.timeline-scale {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
}

.timeline-left-heading {
  padding: 12px 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.timeline-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(92px, 1fr);
  border-left: 1px solid var(--line);
}

.timeline-grid span {
  min-height: 42px;
  border-right: 1px solid var(--line);
  padding: 12px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.timeline-row {
  min-height: 92px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  box-shadow: none;
}

.timeline-row:hover {
  background: var(--surface-2);
}

.timeline-row:last-child {
  border-bottom: 0;
}

.timeline-task-meta {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  padding: 10px 14px;
}

.timeline-task-meta strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
}

.timeline-task-meta small {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.timeline-track {
  position: relative;
  min-height: 92px;
  border-left: 1px solid var(--line);
  background: repeating-linear-gradient(90deg, transparent 0, transparent 91px, var(--line) 92px);
}

.timeline-bar {
  position: absolute;
  top: 34px;
  left: var(--left);
  display: flex;
  width: var(--width);
  min-width: 44px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}

.timeline-row.done .timeline-bar {
  background: var(--green-soft);
  color: var(--green);
}

.timeline-row.blocked .timeline-bar,
.timeline-row.overdue .timeline-bar {
  background: var(--red-soft);
  color: var(--red);
}

.dashboard-view {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.reports-view {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 10px;
}

.report-overview {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.report-overview article {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 11px 12px;
}

.report-overview span {
  color: var(--muted);
  font-size: 12px;
}

.report-overview strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1.1;
}

.state-view,
.loading-view {
  display: grid;
  gap: 12px;
  align-content: start;
}

.board-empty-view {
  display: grid;
  min-height: 520px;
}

.empty-board-state {
  display: grid;
  gap: 16px;
}

.empty-board-hero {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(228, 231, 242, 0.86);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 251, 255, 0.9));
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.empty-board-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  background: var(--accent);
  color: #fff;
  font-size: 24px;
  font-weight: 850;
  box-shadow: 0 16px 30px rgba(99, 91, 255, 0.22);
}

.empty-board-hero strong {
  display: block;
  color: var(--text);
  font-size: 19px;
  line-height: 1.2;
}

.empty-board-hero p {
  max-width: 560px;
  margin-top: 4px;
  color: var(--muted);
}

.empty-board-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.empty-board-actions button {
  white-space: nowrap;
}

.empty-board-preview {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
  align-items: start;
}

.empty-board-column {
  display: grid;
  gap: 10px;
  min-height: 310px;
  border: 1px solid rgba(228, 231, 242, 0.7);
  border-radius: 20px;
  background: rgba(245, 246, 251, 0.76);
  padding: 12px;
}

.empty-board-column header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  font-size: 13px;
}

.empty-board-column header span {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-weight: 820;
}

.empty-board-card {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(108, 99, 190, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  padding: 12px;
  box-shadow: 0 8px 20px rgba(43, 50, 82, 0.045);
}

.empty-board-card.featured {
  background: #fff;
  box-shadow: 0 16px 36px rgba(43, 50, 82, 0.08);
}

.empty-board-card i,
.empty-board-card b,
.empty-board-card em,
.empty-board-line {
  display: block;
  border-radius: 999px;
  background: var(--surface-3);
}

.empty-board-card i {
  width: 42%;
  height: 10px;
  background: var(--accent-soft);
}

.empty-board-card b {
  width: 86%;
  height: 12px;
}

.empty-board-card em {
  width: 58%;
  height: 9px;
}

.empty-board-line {
  width: 72%;
  height: 8px;
  opacity: .72;
}

.state-panel {
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px;
  color: var(--muted);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.state-panel strong {
  color: var(--text);
  font-size: 16px;
}

.state-panel p {
  max-width: 460px;
}

.state-panel.error {
  border-color: rgba(194, 65, 12, 0.28);
  background: var(--red-soft);
}

.state-panel.error button {
  margin-top: 4px;
}

.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--surface-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
}

.skeleton-grid span {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.dash-panel {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.dash-panel h3 {
  color: var(--text);
}

.overview-hero {
  display: grid;
  grid-column: 1 / -1;
  gap: 14px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.overview-hero[data-status="on_track"] {
  border-color: rgba(15, 123, 79, 0.28);
  background: linear-gradient(180deg, var(--green-soft), var(--surface) 46%);
}

.overview-hero[data-status="at_risk"] {
  border-color: rgba(179, 107, 0, 0.32);
  background: linear-gradient(180deg, var(--amber-soft), var(--surface) 46%);
}

.overview-hero[data-status="off_track"] {
  border-color: rgba(216, 57, 40, 0.28);
  background: linear-gradient(180deg, var(--red-soft), var(--surface) 46%);
}

.overview-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.overview-head h3 {
  margin-top: 3px;
  font-size: 22px;
  line-height: 1.15;
}

.overview-head p,
.overview-kicker,
.overview-stat span,
.overview-progress span,
.overview-update small,
.overview-feed small {
  color: var(--muted);
}

.overview-kicker {
  font-size: 12px;
  font-weight: 820;
  text-transform: uppercase;
}

.overview-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: center;
}

.overview-progress meter {
  grid-column: 1 / -1;
}

.overview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.overview-stat {
  display: grid;
  gap: 2px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.68);
}

.overview-stat strong {
  font-size: 20px;
  line-height: 1.1;
}

.overview-update {
  grid-column: span 2;
}

.overview-tasks {
  grid-column: span 2;
}

.overview-update .featured {
  border-top: 0;
  padding-top: 0;
}

.overview-feed,
.overview-bars {
  min-width: 0;
}

.activity.compact {
  grid-template-columns: 1fr;
  gap: 2px;
  padding-top: 8px;
}

.status-chip {
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 780;
}

.status-chip.on_track {
  background: var(--green-soft);
  color: var(--green);
}

.status-chip.at_risk {
  background: var(--amber-soft);
  color: var(--amber);
}

.status-chip.off_track {
  background: var(--red-soft);
  color: var(--red);
}

.overview-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto) 120px;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  box-shadow: none;
  text-align: left;
}

.overview-task-row.done strong {
  color: var(--muted);
  text-decoration: line-through;
}

.overview-task-row.blocked,
.overview-task-row.overdue {
  border-color: rgba(216, 57, 40, 0.26);
  background: var(--red-soft);
}

.overview-task-main,
.overview-task-meta,
.overview-task-progress {
  min-width: 0;
}

.overview-task-main {
  display: grid;
  gap: 2px;
}

.overview-task-main strong {
  overflow-wrap: anywhere;
}

.overview-task-main small {
  color: var(--muted);
}

.overview-task-meta {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.overview-task-progress {
  display: grid;
  gap: 4px;
}

.overview-task-progress strong {
  text-align: right;
}

.chart-panel {
  justify-items: center;
}

.donut {
  width: 150px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--value) * 1%), var(--surface-3) 0);
  position: relative;
}

.donut::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: var(--surface);
}

.donut strong,
.donut span {
  position: relative;
  z-index: 1;
}

.donut strong {
  font-size: 26px;
}

.donut span {
  margin-top: 34px;
  color: var(--muted);
  font-size: 12px;
}

.bar-chart,
.bar-row {
  display: grid;
  gap: 8px;
  width: 100%;
}

.bar-row {
  grid-template-columns: 1fr 42px;
  align-items: center;
}

.bar-row i {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) var(--w), var(--surface-3) 0);
}

.audit-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

.audit-row.is-clickable {
  cursor: pointer;
}

.audit-row.is-clickable:hover {
  border-color: rgba(35, 100, 170, 0.28);
  background: var(--surface-2);
}

.audit-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) repeat(3, minmax(130px, 1fr)) repeat(2, 140px) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px;
  box-shadow: var(--shadow-sm);
}

.audit-filters input,
.audit-filters select {
  min-width: 0;
}

.audit-results {
  display: grid;
  gap: 10px;
}

.audit-row > span {
  color: var(--accent-ink);
  font-weight: 780;
}

.audit-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.progress-row {
  display: grid;
  grid-template-columns: 1fr 46px;
  gap: 8px;
  align-items: center;
}

.progress-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.progress-row strong {
  text-align: right;
}

.progress-row meter {
  grid-column: 1 / -1;
}

.workload-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
}

.workload-row small {
  color: var(--muted);
}

.workload-row meter {
  grid-column: 1 / -1;
}

.update,
.activity {
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.inbox-item {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  box-shadow: none;
}

.inbox-item.unread {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.archive-stack {
  display: grid;
  gap: 8px;
}

.archive-section {
  display: grid;
  gap: 10px;
}

.archive-section + .archive-section {
  margin-top: 18px;
}

.archive-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}

.archive-heading h3 {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}

.archive-heading span {
  min-width: 28px;
  border-radius: 999px;
  background: #eef0fa;
  padding: 3px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.archive-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 10px;
  box-shadow: none;
  cursor: pointer;
}

.archive-row:hover {
  border-color: var(--line-strong);
  background: #fbfbfc;
}

.archive-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.archive-row span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}

.archive-project-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.archive-project-main > div {
  min-width: 0;
}

.archive-project-main strong,
.archive-project-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-empty-section {
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.inbox-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 9px 10px;
  box-shadow: none;
}

.inbox-toolbar-title {
  display: grid;
  gap: 2px;
}

.inbox-toolbar-title strong {
  color: var(--text);
}

.inbox-toolbar-title span {
  color: var(--muted);
  font-size: 12px;
}

.segmented,
.inbox-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.segmented {
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 3px;
}

.segmented button {
  min-height: 30px;
  border-color: transparent;
  background: transparent;
}

.segmented button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.inbox-actions {
  min-width: 180px;
}

.inbox-stack {
  display: grid;
  gap: 8px;
}

.inbox-item p {
  margin-top: 3px;
  color: var(--muted);
}

.inbox-item small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.report-row {
  display: grid;
  min-height: 54px;
  gap: 4px;
  justify-content: stretch;
  box-shadow: none;
  text-align: left;
}

.report-row small {
  color: var(--muted);
}

.automation {
  display: grid;
  grid-template-columns: 22px minmax(180px, 1fr) auto auto;
  gap: 8px 14px;
  border-top: 1px solid var(--line);
  padding: 14px 0;
  align-items: center;
}

.automation input {
  width: 16px;
  min-height: 16px;
}

.automation small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.automation-main {
  min-width: 0;
}

.automation-main strong,
.automation-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-flow {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.automation-flow b {
  border-radius: 999px;
  background: #f1f2f8;
  padding: 5px 8px;
  color: #69738d;
  font-weight: 700;
}

.automation-settings-card > .panel-head > div p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.automation-settings-card .automation {
  grid-template-columns: 22px minmax(0, 1fr);
  min-width: 0;
}

.automation-settings-card .automation-flow,
.automation-settings-card .settings-row-actions {
  grid-column: 2;
  flex-wrap: wrap;
  min-width: 0;
}

.automation-settings-card .automation-main strong,
.automation-settings-card .automation-main small {
  display: block;
}

dialog.automation-builder-dialog {
  width: min(860px, calc(100vw - 28px));
  max-height: calc(100vh - 30px);
  overflow: hidden;
  border-radius: 18px;
  padding: 0;
}

.automation-builder-modal-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100vh - 30px);
  background: #fff;
}

.automation-builder-modal-form > h2 {
  margin: 0;
  border-bottom: 1px solid var(--line);
  padding: 22px 26px 18px;
  font-size: 22px;
}

.automation-builder-modal-fields {
  overflow-y: auto;
  padding: 0 26px 24px;
  scrollbar-width: thin;
}

.automation-builder-modal-form menu {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  border-top: 1px solid var(--line);
  padding: 16px 26px;
}

.automation-builder {
  display: grid;
  gap: 16px;
}

.automation-builder-intro {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 -26px;
  background: #f7f7ff;
  padding: 14px 26px;
}

.automation-builder-intro div,
.automation-builder-section header div {
  display: grid;
  gap: 2px;
}

.automation-builder-intro small,
.automation-builder-section header small {
  color: var(--muted);
  font-size: 12px;
}

.automation-builder-icon,
.automation-builder-section header > span:first-child {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 9px;
  background: #635bff;
  color: #fff;
  font-weight: 800;
}

.automation-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr);
  gap: 12px;
}

.automation-builder .field {
  margin: 0;
}

.automation-builder-section {
  display: grid;
  gap: 10px;
  border: 1px solid #e3e5ef;
  border-radius: 12px;
  padding: 14px;
}

.automation-builder-section header {
  display: flex;
  gap: 10px;
  align-items: center;
}

.automation-builder-section header > select {
  width: auto;
  min-height: 34px;
  margin-left: auto;
  padding: 5px 30px 5px 10px;
  font-size: 12px;
}

.automation-builder-rows {
  display: grid;
  gap: 8px;
}

.automation-builder-row {
  display: grid;
  grid-template-columns: 18px minmax(150px, 1fr) minmax(110px, .65fr) minmax(170px, 1fr) 32px;
  gap: 8px;
  align-items: center;
}

.automation-action-row {
  grid-template-columns: 18px minmax(210px, 1fr) minmax(250px, 1.3fr) 32px;
}

.automation-builder-row select,
.automation-builder-row input {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  font-size: 13px;
}

.automation-row-handle {
  color: #a0a7ba;
  cursor: grab;
}

.automation-remove-row {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: #929aaf;
  padding: 0;
  font-size: 20px;
}

.automation-remove-row:hover {
  background: #fff0f2;
  color: #d33c54;
}

.automation-add-row {
  justify-self: start;
  min-height: 34px;
  border: 0;
  background: transparent;
  padding: 4px 8px;
  color: #554cf0;
  font-weight: 720;
}

.automation-no-value {
  display: flex;
  min-height: 38px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 720px) {
  .automation {
    grid-template-columns: 20px minmax(0, 1fr) auto;
  }

  .automation-flow {
    display: none;
  }

  .automation .settings-row-actions {
    grid-column: 2 / -1;
  }

  .automation-builder-grid,
  .automation-builder-row,
  .automation-action-row {
    grid-template-columns: 1fr;
  }

  .automation-row-handle {
    display: none;
  }

  .automation-remove-row {
    justify-self: end;
  }
}

.details > #taskForm {
  display: contents;
}

.details-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 34px;
  gap: 12px;
  align-items: flex-start;
  border-bottom: 1px solid rgba(228, 231, 242, 0.82);
  border-radius: 28px 28px 0 0;
  background: rgba(255, 255, 255, 0.92);
  padding: 16px 18px 12px;
  backdrop-filter: blur(16px);
}

.details-head > div {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.details-head p:first-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.details-head h2 {
  display: none;
}

.task-header-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  overflow: visible;
  margin-top: 2px;
  padding-bottom: 0;
}

.task-header-summary[hidden] {
  display: none;
}

.task-header-summary span {
  position: relative;
  display: inline-grid;
  min-width: 0;
  gap: 2px;
  border: 1px solid rgba(228, 231, 242, 0.78);
  border-radius: 15px;
  background: rgba(247, 248, 255, 0.82);
  padding: 8px 9px 8px 31px;
}

.task-header-summary span::before {
  content: "•";
  position: absolute;
  left: 10px;
  top: 50%;
  display: grid;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  place-items: center;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.task-header-summary span[data-summary="project"]::before { content: "≡"; background: var(--accent-soft); color: var(--accent); }
.task-header-summary span[data-summary="assignee"]::before { content: "●"; background: var(--blue-soft); color: var(--blue); }
.task-header-summary span[data-summary="due"]::before { content: "□"; background: var(--red-soft); color: var(--red); }
.task-header-summary span[data-summary="priority"]::before { content: "⚑"; background: var(--amber-soft); color: var(--amber); }
.task-header-summary span[data-summary="checklist"]::before { content: "✓"; background: var(--green-soft); color: var(--green); }
.task-header-summary span[data-summary="activity"]::before { content: "↗"; background: var(--surface-3); color: var(--muted); }

.task-header-summary small {
  overflow: hidden;
  color: var(--quiet);
  font-size: 8px;
  font-weight: 820;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.task-header-summary strong {
  overflow: hidden;
  color: var(--text);
  font-size: 10.5px;
  font-weight: 790;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.details-section {
  border-bottom: 1px solid rgba(228, 231, 242, 0.82);
  margin: 0 18px;
  padding: 16px 0;
}

.details-section:first-child {
  margin: 0;
}

.task-main-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.task-main-fields .field {
  margin-bottom: 0;
}

.task-main-fields .task-title-field,
.task-main-fields > label.field:nth-of-type(2),
.task-main-fields .task-meta-grid {
  grid-column: 1 / -1;
}

.task-title-field {
  margin-bottom: 2px;
}

.task-title-field span {
  display: none;
}

.task-main-fields textarea {
  height: 92px;
  min-height: 84px;
  max-height: 150px;
  border-color: rgba(228, 231, 242, 0.72);
  border-radius: 16px;
  background: rgba(248, 249, 253, 0.72);
  color: var(--text);
}

.task-main-fields .task-title-field textarea {
  min-height: 48px;
  max-height: 116px;
  overflow: hidden;
  resize: none;
  border-color: transparent;
  border-radius: 14px;
  background: transparent;
  padding: 0 4px 2px 0;
  color: var(--text);
  font-size: 23px;
  font-weight: 840;
  line-height: 1.14;
}

.task-main-fields .task-title-field textarea:focus {
  border-color: rgba(121, 110, 255, 0.22);
  background: rgba(247, 248, 255, 0.78);
  box-shadow: none;
}

.task-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.task-meta-grid .field {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(228, 231, 242, 0.78);
  border-radius: 15px;
  margin: 0;
  background: rgba(248, 249, 253, 0.78);
  padding: 8px 9px 8px 34px;
}

.task-meta-grid .field::before {
  position: absolute;
  left: 10px;
  top: 15px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.task-meta-grid .field:nth-child(1)::before { content: "●"; background: var(--blue-soft); color: var(--blue); }
.task-meta-grid .field:nth-child(2)::before { content: "≡"; background: var(--accent-soft); color: var(--accent); }
.task-meta-grid .field:nth-child(3)::before { content: "⚑"; background: var(--amber-soft); color: var(--amber); }
.task-meta-grid .field:nth-child(4)::before { content: "□"; background: var(--red-soft); color: var(--red); }

.task-meta-grid .field span {
  color: var(--quiet);
  font-size: 9px;
}

.task-meta-grid select,
.task-meta-grid input {
  min-height: 30px;
  border-color: transparent;
  background: transparent;
  padding: 4px 0 0;
  font-weight: 760;
}

.tag-field,
.task-main-fields > label.field:last-child {
  border: 1px solid rgba(228, 231, 242, 0.78);
  border-radius: 16px;
  margin: 0;
  background: rgba(248, 249, 253, 0.72);
  padding: 10px;
}

.tag-field {
  grid-column: 1;
}

.task-main-fields > label.field:last-child {
  grid-column: 2;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
  align-items: center;
}

.task-main-fields > label.field:last-child > span {
  grid-column: 1;
}

.task-main-fields > label.field:last-child .inline-field-action {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
}

.task-main-fields > label.field:last-child #collaboratorPicker {
  grid-column: 1 / -1;
}

.complete-toggle {
  width: 26px;
  min-width: 26px;
  min-height: 26px;
  border-radius: 50%;
  padding: 0;
  border-color: var(--line-strong);
  background: var(--surface);
}

.complete-toggle::before {
  content: "";
  width: 10px;
  height: 6px;
  transform: rotate(-45deg);
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

.complete-toggle.done {
  border-color: var(--green);
  background: var(--green);
}

.complete-toggle.done::before {
  border-color: #fff;
}

.ghost-icon {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  padding: 0;
  font-size: 20px;
}

.ghost-icon:hover {
  background: var(--surface-2);
  color: var(--text);
}

.task-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.meta-chip {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.task-followers {
  display: flex;
  min-height: 24px;
  margin-top: 8px;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.task-followers div {
  display: flex;
  align-items: center;
}

.task-followers .avatar {
  margin-left: -5px;
  outline: 2px solid var(--surface);
}

.task-followers .avatar:first-child {
  margin-left: 0;
}

.status-pill {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.status-pill[data-status="done"] {
  background: var(--green-soft);
  color: var(--green);
}

.status-pill[data-status="blocked"] {
  background: var(--red-soft);
  color: var(--red);
}

.status-pill[data-status="active"] {
  background: var(--blue-soft);
  color: var(--blue);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.field-head > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.small-action {
  min-height: 28px;
  border-color: transparent;
  background: var(--accent-soft);
  padding: 0 9px;
  color: var(--accent-ink);
  font-weight: 760;
}

.subtle-action {
  border-color: rgba(228, 231, 242, 0.82);
  background: #fff;
  color: var(--muted);
}

.subtle-action:hover,
.subtle-action:focus-visible {
  border-color: rgba(99, 91, 255, 0.26);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.inline-field-action {
  justify-self: end;
  margin-top: -30px;
}

.tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 32px;
}

.tag-field .tag-picker {
  max-height: 72px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.tag-picker.is-expanded {
  max-height: 168px;
  overflow-y: auto;
}

.tag-picker:not(.is-expanded) .tag-edit-row:not(.selected),
.tag-picker:not(.is-expanded) .collaborator-option:not(.selected) {
  display: none;
}

.tag-picker:not(.is-expanded) .tag-edit-row > button {
  display: none;
}

.picker-placeholder {
  min-height: 30px;
  border-style: dashed;
  border-color: rgba(146, 153, 178, 0.34);
  background: rgba(255, 255, 255, 0.68);
  padding: 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.custom-field-list {
  display: grid;
  gap: 10px;
}

.tag-option {
  position: relative;
}

.tag-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tag-option span {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--tag) 35%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--tag) 8%, white);
  padding: 0 10px;
  color: var(--tag);
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
}

.tag-option input:checked + span {
  background: color-mix(in srgb, var(--tag) 16%, white);
  box-shadow: inset 0 0 0 1px var(--tag);
}

.tag-edit-row {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.tag-edit-row > button {
  min-width: 28px;
  min-height: 28px;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted);
  opacity: 0;
  padding: 0 6px;
  font-size: 0;
  transform: translateX(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.tag-edit-row > button::before {
  content: "⋯";
  font-size: 16px;
  line-height: 1;
}

.tag-edit-row:hover > button,
.tag-edit-row:focus-within > button {
  opacity: 1;
  transform: translateX(0);
}

.tag-edit-row.selected .tag-option span {
  padding-right: 12px;
  font-weight: 820;
}

.tag-edit-row:not(.selected) .tag-option span {
  opacity: 0.82;
}

.tag-edit-row > button:hover,
.tag-edit-row > button:focus-visible {
  background: #fff;
  color: var(--accent);
}

.subtask-progress {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(228, 231, 242, 0.82);
  border-radius: 16px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.78);
  padding: 10px;
}

.subtask-progress[hidden] {
  display: none;
}

.subtask-progress-ring {
  --check: 0;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--surface) 58%, transparent 60%),
    conic-gradient(#2dbf88 calc(var(--check) * 1%), var(--line) 0);
  color: var(--text);
  font-size: 11px;
  font-weight: 850;
}

.subtask-progress div {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.subtask-progress strong {
  color: var(--text);
  font-size: 12px;
}

.subtask-progress i {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
}

.subtask-progress i span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22b47b, #41d6a2);
}

.subtask-progress small {
  color: var(--muted);
  font-size: 12px;
}

.autosave-status {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  margin: 2px 0 0;
  background: rgba(247, 248, 252, 0.88);
  padding: 0 9px;
  color: var(--quiet);
  font-size: 12px;
  font-weight: 720;
}

.autosave-status.saving {
  background: var(--blue-soft);
  color: var(--blue);
}

.autosave-status.saved {
  background: var(--green-soft);
  color: var(--green);
}

.autosave-status.error {
  background: var(--red-soft);
  color: var(--red);
}

.autosave-status button {
  min-height: 24px;
  border: 0;
  background: transparent;
  color: var(--red);
  padding: 0;
  font-size: 12px;
  font-weight: 760;
  text-decoration: underline;
}

.attachment-link {
  color: var(--blue);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.attachment-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.attachment-dropzone {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px dashed rgba(99, 91, 255, 0.32);
  border-radius: 16px;
  margin-bottom: 6px;
  background: rgba(247, 248, 255, 0.68);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 720;
  text-align: center;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}

.attachment-dropzone:hover,
.attachment-dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.attachment-dropzone.is-disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.attachment-card {
  overflow: hidden;
  border: 1px solid rgba(228, 231, 242, 0.82);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(43, 50, 82, 0.05);
}

.attachment-card img,
.attachment-card video {
  display: block;
  width: 100%;
  aspect-ratio: 1.2 / 1;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  object-fit: cover;
}

.attachment-card video {
  object-fit: contain;
}

.attachment-media-button {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
  padding: 0;
  color: inherit;
  text-align: left;
  box-shadow: none;
}

.attachment-media-button:hover,
.attachment-media-button:focus-visible {
  background: var(--surface-2);
  box-shadow: none;
}

.attachment-media-button > span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  border-radius: 999px;
  background: rgba(17, 24, 39, .72);
  padding: 5px 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 760;
}

.attachment-card > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px;
}

.attachment-card span {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-card .attachment-remove {
  min-height: 26px;
  min-width: auto;
  border: 0;
  background: transparent;
  padding: 0 4px;
  color: var(--red);
  font-size: 11px;
}

.attachment-file {
  display: grid;
  min-height: 118px;
  place-items: center;
  gap: 8px;
  padding: 14px;
  background: var(--surface-2);
  color: var(--text);
  text-align: center;
  text-decoration: none;
}

.attachment-file span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border-radius: 999px;
  background: var(--surface);
  padding: 0 10px;
  color: var(--muted);
}

.attachment-file strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-viewer {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border: 0;
  border-radius: 24px;
  background: transparent;
  padding: 0;
}

.attachment-viewer::backdrop {
  background: rgba(17, 24, 39, .42);
  backdrop-filter: blur(8px);
}

.attachment-viewer-shell {
  display: grid;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, .92);
  border-radius: 24px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 28px 80px rgba(31, 35, 62, .24);
}

.attachment-viewer header,
.attachment-viewer footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}

.attachment-viewer header {
  border-bottom: 1px solid var(--line);
}

.attachment-viewer footer {
  border-top: 1px solid var(--line);
}

.attachment-viewer h2 {
  margin: 0;
  font-size: 18px;
}

.attachment-viewer p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 740;
}

.attachment-viewer header button {
  min-width: 40px;
  border-radius: 14px;
  color: var(--red);
  font-size: 22px;
}

.attachment-viewer-body {
  display: grid;
  min-height: 320px;
  max-height: calc(100vh - 180px);
  place-items: center;
  overflow: auto;
  background: #0f172a;
}

.attachment-viewer-body img,
.attachment-viewer-body video {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 210px);
  object-fit: contain;
}

.attachment-viewer footer a {
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}

.files-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.files-toolbar {
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(228, 231, 242, 0.76);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.files-toolbar div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.files-toolbar strong {
  color: var(--text);
  font-size: 15px;
}

.files-toolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.files-toolbar button {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 820;
}

.file-tile {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  padding: 10px;
  box-shadow: var(--shadow-sm);
}

.file-tile .attachment-card {
  border: 0;
  box-shadow: none;
}

.file-tile > button {
  display: grid;
  justify-content: stretch;
  min-height: 42px;
  border-color: transparent;
  background: var(--surface-2);
  text-align: left;
}

.file-tile > button span {
  color: var(--muted);
  font-size: 12px;
}

.files-empty-state {
  grid-column: 1 / -1;
  min-height: 260px;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.files-empty-state p {
  max-width: 430px;
}

.files-empty-state div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.files-empty-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), #4f46e5);
  color: #fff;
  box-shadow: 0 18px 36px rgba(99, 91, 255, 0.22);
  font-size: 24px;
  font-weight: 900;
}

.task-danger-zone {
  border-bottom: 0;
  padding-bottom: 22px;
}

.danger-button {
  width: auto;
  justify-content: flex-start;
  min-height: 34px;
  border-color: transparent;
  background: transparent;
  color: var(--red);
  padding: 0;
  box-shadow: none;
  font-weight: 780;
}

.danger-button:hover {
  background: transparent;
  color: #e34968;
  text-decoration: underline;
}

.dependency-row {
  grid-template-columns: 1fr auto 36px;
}

.dependency-row small {
  color: var(--muted);
  font-weight: 700;
}

.dependency-row.blocked small {
  color: var(--red);
}

.mention {
  border-radius: 999px;
  background: #e8f1ff;
  color: #2364aa;
  padding: 1px 6px;
  font-weight: 700;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 14px;
}

.check input {
  width: 16px;
  min-height: 16px;
}

.panel {
  border-top: 0;
  margin-top: 0;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.panel-head button {
  width: auto;
  min-height: 32px;
  border-color: rgba(99, 91, 255, 0.18);
  color: var(--accent-ink);
  padding: 0 10px;
  font-weight: 760;
}

.task-work-panel {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.task-work-panel h3 {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

.task-work-panel .stack {
  display: grid;
  gap: 8px;
}

.task-work-panel .empty {
  margin: 0;
  padding: 4px 2px;
  color: var(--quiet);
  font-size: 12px;
}

.subtask {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid rgba(228, 231, 242, 0.72);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  transition: background .14s ease, border-color .14s ease;
}

.subtask:hover,
.subtask:focus-within {
  border-color: rgba(99, 91, 255, 0.18);
  background: rgba(247, 248, 255, 0.9);
}

.subtask .complete-circle {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
}

.subtask.done .subtask-name-input {
  color: var(--muted);
  text-decoration: line-through;
}

.subtask-name-input {
  min-width: 0;
  border-color: transparent;
  background: transparent;
  min-height: 30px;
  padding: 0;
  font-weight: 720;
}

.subtask-name-input:focus {
  border-color: var(--accent);
  background: var(--surface-soft);
}

.subtask button {
  display: grid;
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  place-items: center;
  padding: 0;
  color: var(--red);
  font-size: 0;
  opacity: 0;
  transition: opacity .14s ease, background .14s ease, color .14s ease;
}

.subtask button::before {
  content: "×";
  font-size: 18px;
  line-height: 1;
}

.subtask:hover button,
.subtask:focus-within button {
  opacity: 1;
}

.quick-subtask {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 30px;
  gap: 6px;
  align-items: center;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px dashed rgba(99, 91, 255, 0.26);
  border-radius: 14px;
  background: rgba(247, 248, 255, 0.68);
}

.quick-subtask:focus-within {
  border-color: rgba(99, 91, 255, 0.24);
  background: rgba(247, 248, 255, 0.72);
}

.subtask-plus {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--muted);
  font-weight: 700;
}

.quick-subtask input {
  min-width: 0;
  border-color: transparent;
  background: transparent;
  min-height: 28px;
  padding: 0;
}

.quick-subtask input:focus {
  border-color: var(--accent);
  background: var(--surface-soft);
}

.quick-subtask button {
  width: 30px;
  min-width: 30px;
  min-height: 28px;
  padding: 0;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .14s ease, transform .14s ease;
}

.quick-subtask:focus-within button {
  opacity: 1;
  transform: scale(1);
}

.pill-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--surface-2);
  padding: 8px 10px;
}

.pill-row > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.pill-row strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.pill-row button {
  min-height: 28px;
  padding: 0 9px;
}

.settings-row-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
}

.settings-delete {
  color: var(--danger);
}

.settings-delete:hover,
.settings-delete:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, white);
}

.comment {
  display: grid;
  gap: 7px;
  border-color: rgba(228, 231, 242, 0.72);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
  padding: 10px;
}

.comment p {
  margin: 0;
}

.comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.comment-actions {
  display: inline-flex;
  gap: 6px;
  opacity: 0;
  transition: opacity .14s ease;
}

.comment:hover .comment-actions,
.comment:focus-within .comment-actions {
  opacity: 1;
}

.comment-actions button,
.comment-edit-form button {
  min-height: 28px;
  border: 0;
  background: transparent;
  padding: 0 6px;
  color: var(--muted);
  box-shadow: none;
  font-size: 12px;
  font-weight: 760;
}

.comment-actions button:hover,
.comment-edit-form button:hover {
  color: var(--accent);
}

.comment-edit-form {
  display: grid;
  gap: 8px;
}

.comment-edit-form textarea {
  min-height: 82px;
}

.comment-edit-form span {
  display: flex;
  gap: 6px;
}

.comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 6px;
  align-items: end;
  border: 1px solid rgba(228, 231, 242, 0.9);
  border-radius: 16px;
  margin-top: 4px;
  background: rgba(248, 249, 253, 0.76);
  padding: 6px;
  box-shadow: 0 10px 28px rgba(43, 50, 82, 0.05);
}

.comment-form textarea {
  height: 34px;
  min-height: 34px;
  max-height: 120px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  padding: 6px 4px;
  line-height: 1.35;
  resize: none;
  overflow-y: hidden;
}

.comment-form textarea:placeholder-shown {
  height: 34px !important;
  overflow-y: hidden !important;
}

.comment-form button {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  overflow: hidden;
  justify-self: end;
  border-color: var(--accent);
  border-radius: 12px;
  background: var(--accent);
  padding: 0;
  color: #fff;
  font-size: 0;
  font-weight: 780;
}

.comment-form button::before {
  content: "›";
  display: block;
  transform: rotate(-45deg);
  font-size: 26px;
  line-height: 1;
}

.empty {
  color: var(--muted);
  font-size: 13px;
  padding: 8px;
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 42px 22px;
  color: var(--muted);
  text-align: center;
  box-shadow: none;
}

.empty-state strong {
  color: var(--text);
  font-size: 17px;
}

.empty-state p {
  max-width: 480px;
}

dialog {
  width: min(460px, calc(100vw - 28px));
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 18px;
}

dialog.project-create-dialog {
  width: min(825px, calc(100vw - 20px));
  overflow: hidden;
  border-radius: 18px;
  padding: 0;
}

dialog.project-appearance-dialog {
  width: min(690px, calc(100vw - 24px));
  padding: 26px 28px 22px;
}

dialog::backdrop {
  background: rgba(18, 24, 32, 0.34);
  backdrop-filter: blur(4px);
}

.project-create-modal-form {
  position: relative;
  display: grid;
  background: #fff;
}

.project-create-modal-form h2 {
  margin: 0;
  border-bottom: 1px solid var(--line);
  padding: 22px 28px 24px;
  color: #2b2f3a;
  font-size: 28px;
  font-weight: 760;
}

.modal-checkbox-field {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.modal-checkbox-field legend {
  padding: 0 0 8px;
  font-size: 14px;
  color: #596273;
}

.modal-checkbox-options {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  border-block: 1px solid #e6e8ee;
}

.modal-checkbox-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 4px;
  cursor: pointer;
}

.modal-checkbox-options input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  padding: 0;
  accent-color: #635bff;
}

.modal-checkbox-options label span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: #303747;
}

.project-create-modal-fields {
  display: grid;
  gap: 12px;
  padding: 26px 26px 18px;
}

.project-create-modal-fields .field {
  margin: 0;
}

.project-create-modal-fields .field span {
  margin-bottom: 12px;
  color: #252a36;
  font-size: 18px;
  font-weight: 760;
  text-transform: none;
}

.project-create-modal-fields input {
  min-height: 66px;
  border: 0;
  border-radius: 12px;
  background: #ececf4;
  padding: 0 20px;
  color: #2b2f3a;
  font-size: 22px;
}

.project-create-modal-fields input::placeholder {
  color: #9da3b5;
}

.project-create-modal-form menu {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 22px 26px 26px;
}

.project-create-modal-form button[value="cancel"] {
  position: absolute;
  top: 25px;
  right: 26px;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  background: #f2f3f8;
  color: #b4b8c7;
  padding: 0;
  font-size: 34px;
  font-weight: 320;
  line-height: 1;
}

.project-create-modal-form #modalSubmit {
  width: min(292px, 100%);
  min-height: 66px;
  border: 0;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 760;
}

.project-create-modal-form #modalSubmit:disabled {
  background: #f6f7fb;
  color: #d3d7e2;
  cursor: default;
}

.project-appearance-modal-form {
  display: grid;
  gap: 22px;
}

.project-appearance-modal-form h2 {
  display: none;
}

.project-appearance-modal-fields {
  display: grid;
  gap: 20px;
}

.project-appearance-modal-fields .project-appearance-field {
  margin: 0;
}

.project-appearance-modal-fields .project-swatch-grid {
  gap: 10px 12px;
}

.project-appearance-modal-fields .project-swatch-grid span {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

.project-appearance-modal-fields .project-icon-grid {
  grid-template-columns: repeat(8, 50px);
  gap: 14px;
}

.project-appearance-modal-fields .project-icon-choice-preview {
  width: 50px;
  height: 50px;
  border-radius: 14px;
}

.project-appearance-modal-fields .project-icon-choice-preview::before {
  width: 22px;
  height: 22px;
}

.project-appearance-modal-form menu {
  margin: 0;
  padding: 0;
}

.confirm-modal-form {
  display: grid;
  gap: 14px;
}

.confirm-modal-form h2 {
  margin: 0;
}

.confirm-modal-body {
  display: block;
}

.confirm-copy {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8f9ff;
  padding: 12px;
}

.confirm-copy span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ecebff;
  color: var(--accent);
  font-weight: 900;
}

.confirm-copy .confirm-copy-icon::before {
  content: "i";
}

.confirm-copy.danger {
  border-color: #ffd7df;
  background: #fff7f9;
}

.confirm-copy.danger span {
  background: #ffe1e7;
  color: var(--red);
}

.confirm-copy.danger .confirm-copy-icon::before {
  content: "!";
}

.confirm-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.workspace-help-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  overflow: auto;
  padding: 0;
}

.workspace-help-shell {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.workspace-help-shell header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 14px;
  align-items: start;
}

.workspace-help-shell header p,
.workspace-help-shell header span,
.workspace-help-note,
.workspace-help-shell footer {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.workspace-help-shell h2 {
  margin: 2px 0 5px;
  color: var(--text);
  font-size: 25px;
  line-height: 1.12;
}

.workspace-help-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.workspace-help-metrics span {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(228, 231, 242, 0.9);
  border-radius: 16px;
  background: var(--surface-2);
  padding: 12px;
}

.workspace-help-metrics strong {
  color: var(--accent-ink);
  font-size: 22px;
  line-height: 1;
}

.workspace-help-metrics small {
  color: var(--muted);
  font-weight: 760;
}

.workspace-help-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.workspace-help-actions button {
  display: grid;
  min-height: 82px;
  justify-content: stretch;
  justify-items: start;
  gap: 5px;
  border-color: rgba(228, 231, 242, 0.9);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
  text-align: left;
  box-shadow: 0 14px 34px rgba(38, 44, 84, 0.06);
}

.workspace-help-actions button:hover {
  border-color: rgba(99, 91, 255, 0.24);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.workspace-help-actions strong {
  color: var(--text);
  font-size: 14px;
}

.workspace-help-actions span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.workspace-help-shell footer {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.project-info-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  overflow: auto;
  padding: 0;
}

.project-info-shell {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.project-info-shell header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 14px;
  align-items: start;
}

.project-info-shell header p,
.project-info-shell header span,
.project-info-description,
.project-info-shell small,
.project-info-update span,
.project-info-next button span {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.project-info-shell h2 {
  margin: 2px 0 5px;
  color: var(--text);
  font-size: 26px;
  line-height: 1.12;
}

.project-info-description {
  border: 1px solid rgba(228, 231, 242, 0.88);
  border-radius: 18px;
  background: var(--surface-2);
  padding: 12px 14px;
}

.project-info-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.project-info-metrics span {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(228, 231, 242, 0.9);
  border-radius: 16px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 12px 28px rgba(38, 44, 84, 0.05);
}

.project-info-metrics strong {
  color: var(--accent-ink);
  font-size: 22px;
  line-height: 1;
}

.project-info-metrics small {
  font-weight: 780;
}

.project-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 12px;
}

.project-info-grid article,
.project-info-next {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(228, 231, 242, 0.9);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 14px 34px rgba(38, 44, 84, 0.05);
}

.project-info-update {
  display: grid;
  gap: 6px;
}

.project-info-update strong,
.project-info-members strong,
.project-info-next button strong {
  color: var(--text);
}

.project-info-update p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.project-info-members {
  display: grid;
  gap: 8px;
}

.project-info-members span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.project-info-next > div {
  display: grid;
  gap: 7px;
}

.project-info-next button {
  display: grid;
  justify-content: stretch;
  justify-items: start;
  min-height: 48px;
  gap: 4px;
  border-color: transparent;
  border-radius: 14px;
  background: var(--surface-2);
  padding: 9px 10px;
  text-align: left;
  box-shadow: none;
}

.project-info-next button:hover {
  background: var(--accent-soft);
}

.project-info-shell footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.project-info-shell footer button {
  min-height: 34px;
  border-color: rgba(99, 91, 255, 0.18);
  color: var(--accent-ink);
}

.share-project-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  overflow: auto;
  padding: 0;
}

.share-project-shell {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.share-project-shell header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 14px;
  align-items: start;
}

.share-project-shell header p,
.share-project-shell header span,
.share-project-link label span,
.share-project-link small,
.share-project-access p,
.share-project-access small {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.share-project-shell h2 {
  margin: 2px 0 5px;
  color: var(--text);
  font-size: 25px;
  line-height: 1.12;
}

.share-project-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid rgba(228, 231, 242, 0.9);
  border-radius: 18px;
  background: var(--surface-2);
  padding: 14px;
}

.share-project-link label {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.share-project-link input {
  min-width: 0;
  height: 40px;
  border: 1px solid rgba(99, 91, 255, 0.16);
  border-radius: 13px;
  background: #fff;
  color: var(--text);
  font-weight: 760;
}

.share-project-link small {
  grid-column: 1 / -1;
  min-height: 16px;
  color: var(--success);
  font-weight: 760;
}

.share-project-access {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(228, 231, 242, 0.9);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 14px 34px rgba(38, 44, 84, 0.05);
}

.share-project-access h3 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 15px;
}

.share-project-access [data-share-members] {
  display: grid;
  gap: 8px;
}

.share-project-access [data-share-members] > span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border-radius: 14px;
  background: var(--surface-2);
  padding: 8px 10px;
}

.share-project-access strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-project-shell footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.share-project-shell footer button {
  min-height: 36px;
}

menu {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 30;
  max-width: min(520px, calc(100vw - 28px));
  transform: translate(-50%, 12px);
  border-radius: var(--radius);
  background: var(--text);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  padding: 10px 14px;
  box-shadow: var(--shadow-md);
  transition: opacity .16s ease, transform .16s ease;
}

.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 1240px) {
  .app {
    grid-template-columns: 240px minmax(480px, 1fr);
  }

  .board-view {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }

  .empty-board-preview {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
  }
}

@media (max-width: 820px) {
  .app {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    min-height: auto;
    padding: 10px;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 9;
    min-height: auto;
    max-height: 255px;
    overflow: auto;
    border-radius: 22px;
    padding: 14px;
  }

  .brand {
    margin-bottom: 10px;
  }

  .app-nav {
    grid-template-columns: repeat(4, minmax(max-content, 1fr));
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .app-nav button {
    min-width: max-content;
    min-height: 34px;
    padding: 6px 10px;
    white-space: nowrap;
  }

  .side-section {
    margin-top: 10px;
    padding-top: 10px;
  }

  .project-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .project-row {
    flex: 0 0 178px;
    scroll-snap-align: start;
  }

  .project-row {
    border-radius: 14px;
    background: rgba(247, 248, 252, 0.78);
  }

  .project-row.active {
    background: var(--accent-soft);
  }

  .details {
    inset: 0;
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .details.is-open {
    transform: none !important;
  }

  .details-head {
    border-radius: 0;
  }

  .workspace {
    border-radius: 22px;
    padding: 14px;
  }

  .utility-bar {
    justify-content: stretch;
  }

  .global-search-wrap {
    flex: 1;
  }

  .global-search {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .global-search kbd {
    display: none;
  }

  .topbar {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    margin: -14px -14px 10px;
    padding: 12px 14px;
  }

  .top-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  .filter-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .task-toolbar-add {
    justify-self: flex-start;
  }

  .project-heading {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: center;
    flex-wrap: nowrap;
  }

  .project-icon {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  .project-heading h2 {
    overflow: hidden;
    font-size: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #projectMeta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #favoriteProject,
  #projectInfoButton,
  #projectMembers {
    display: none;
  }

  #projectStatusBadge {
    grid-column: 3;
    grid-row: 1;
    min-height: 28px;
    padding: 0 10px;
    font-size: 12px;
  }

  .more-actions div {
    right: auto;
    left: 0;
  }

  .summary,
  .dashboard-view,
  .reports-view,
  .report-overview,
  .settings-view,
  .settings-overview,
  .skeleton-grid,
  .audit-filters {
    grid-template-columns: 1fr 1fr;
  }

  .board-view {
    display: grid;
    grid-template-columns: repeat(5, minmax(260px, 1fr));
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
  }

  .board-view .task-visibility-bar {
    min-width: 0;
  }

  .board-view .column {
    min-width: 0;
    scroll-snap-align: start;
  }

  .board-empty-view {
    min-height: auto;
  }

  .empty-board-hero {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .empty-board-actions {
    grid-column: 1 / -1;
    justify-self: flex-start;
    justify-content: flex-start;
  }

  .empty-board-preview {
    grid-template-columns: 1fr;
  }

  .empty-board-column {
    min-height: 150px;
  }

  .calendar-row,
  .timeline-row {
    grid-template-columns: 1fr;
  }

  .overview-update {
    grid-column: 1 / -1;
  }

  .overview-tasks {
    grid-column: 1 / -1;
  }

  .overview-head {
    display: grid;
  }

  .overview-head button {
    justify-self: flex-start;
  }

  .overview-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .overview-task-row {
    grid-template-columns: 1fr;
  }

  .overview-task-meta {
    justify-content: flex-start;
  }

  .overview-task-progress strong {
    text-align: left;
  }

  .task-card-footer {
    flex-wrap: wrap;
  }

  .list-task-row {
    grid-template-columns: 20px 24px minmax(260px, 1.45fr) minmax(150px, .85fr) minmax(118px, .65fr) minmax(118px, .65fr) minmax(112px, .65fr);
  }

  .list-header-row {
    display: grid;
  }

  .list-task-main,
  .list-cell {
    grid-column: auto;
  }

  .task-meta-grid {
    grid-template-columns: 1fr 1fr;
  }

  .inbox-item,
  .my-task-row,
  .archive-row {
    grid-template-columns: 1fr;
  }

  .my-task-meta {
    justify-content: flex-start;
  }

  .inbox-actions {
    justify-content: flex-start;
  }

  .backup-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

@media (max-width: 540px) {
  h2 {
    font-size: 21px;
  }

  .summary,
  .dashboard-view,
  .reports-view,
  .report-overview,
  .settings-view,
  .settings-overview,
  .skeleton-grid,
  .grid-2,
  .task-header-summary,
  .task-meta-grid,
  .audit-filters {
    grid-template-columns: 1fr;
  }

  .subtask {
    grid-template-columns: 24px minmax(0, 1fr) 30px;
  }

  .task-card {
    min-height: 0;
    padding: 14px;
  }

  .task-card-head {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .task-status-dot {
    display: none;
  }

  .task-card-title {
    font-size: 14px;
  }

  .task-checklist-preview {
    grid-template-columns: 44px 1fr;
  }

  .task-checklist-ring {
    width: 42px;
    height: 42px;
  }

  .task-card-footer {
    margin: 0 -14px -14px;
    padding: 12px 14px;
  }

  .subtask button {
    grid-column: auto;
    justify-self: end;
    opacity: .72;
  }

  .tag-picker.is-expanded .tag-edit-row > button {
    opacity: .72;
    transform: translateX(0);
  }

  .details-section {
    margin: 0 14px;
  }

  .details-head {
    grid-template-columns: 30px minmax(0, 1fr) 34px;
    padding: 16px 14px 14px;
  }

  .task-main-fields .task-title-field textarea {
    font-size: 22px;
  }

  .filters select,
  .filters input,
  .filter-panel select,
  .filter-panel button,
  .audit-filters select,
  .audit-filters input,
  .audit-filters button,
  .inbox-toolbar,
  .inbox-toolbar button,
  .top-actions button,
  .side-actions button {
    width: 100%;
  }

  .inbox-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .view-tabs {
    width: 100%;
  }

  .view-tabs button {
    flex: 1 1 auto;
  }

  .filter-row {
    grid-template-columns: 1fr;
  }

  .list-task-row {
    grid-template-columns: 20px 24px minmax(260px, 1.45fr) minmax(150px, .85fr) minmax(118px, .65fr) minmax(118px, .65fr) minmax(112px, .65fr);
  }

  .list-header-row {
    display: grid;
  }

  .list-task-main,
  .list-cell {
    grid-column: auto;
  }

  .settings-actions {
    grid-template-columns: 1fr;
  }

  .overview-metrics {
    grid-template-columns: 1fr;
  }
}

/* Frameless app shell */
.app,
.app.sidebar-collapsed {
  gap: 0;
  padding: 0;
  background: var(--bg);
}

.sidebar {
  top: 0;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #f5f7fc 0%, #eef2f8 100%);
  box-shadow: none;
  backdrop-filter: none;
}

.workspace {
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
}

.utility-bar {
  display: none;
}

.sidebar-collapse-dock {
  background: #eef2f8;
}

/* Compact sidebar footer */
.sidebar-profile {
  padding: 12px 0 10px;
}

.sidebar-profile-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.sidebar-profile-button:hover,
.sidebar-profile-button[aria-expanded="true"] {
  background: rgba(99, 91, 255, 0.08);
}

.sidebar-profile-button .avatar {
  width: 26px;
  height: 26px;
  outline: 0;
  font-size: 11px;
  box-shadow: none;
}

.sidebar-collapse-dock {
  margin-top: 6px;
}

.sidebar-collapse {
  height: 46px;
  min-height: 46px;
  padding-left: 20px;
}

.sidebar-collapse::before {
  width: 20px;
  height: 20px;
}

.sidebar.is-collapsed .sidebar-profile {
  padding-top: 10px;
}

.sidebar.is-collapsed .sidebar-collapse {
  height: 46px;
  min-height: 46px;
}

/* Fixed sidebar icon axis */
.sidebar {
  --sidebar-icon-axis: 42px;
  --sidebar-expanded-pad: 18px;
  --sidebar-collapsed-pad: 10px;
}

.brand-logo {
  margin-left: calc(var(--sidebar-icon-axis) - var(--sidebar-expanded-pad) - 21px);
}

.app-nav button {
  padding-left: calc(var(--sidebar-icon-axis) - var(--sidebar-expanded-pad) - 14px);
}

.project {
  padding-left: calc(var(--sidebar-icon-axis) - var(--sidebar-expanded-pad) - 3px - 13px);
}

.sidebar-profile-button {
  margin-left: calc(var(--sidebar-icon-axis) - var(--sidebar-expanded-pad) - 16px);
}

.sidebar-collapse {
  padding-left: calc(var(--sidebar-icon-axis) - 10px);
}

.sidebar.is-collapsed .brand {
  align-items: flex-start;
}

.sidebar.is-collapsed .brand-logo {
  margin-left: 10px;
}

.sidebar.is-collapsed .app-nav,
.sidebar.is-collapsed .project-list {
  justify-items: start;
}

.sidebar.is-collapsed .app-nav button {
  margin-left: calc(var(--sidebar-icon-axis) - var(--sidebar-collapsed-pad) - 21px);
}

.sidebar.is-collapsed .side-section-head {
  justify-content: flex-start;
}

.sidebar.is-collapsed .section-add,
.sidebar.is-collapsed .project {
  margin-left: calc(var(--sidebar-icon-axis) - var(--sidebar-collapsed-pad) - 19px);
}

.sidebar.is-collapsed .section-add-main {
  display: none;
}

.sidebar.is-collapsed .section-add-mini {
  display: inline-grid;
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  margin-left: calc(var(--sidebar-icon-axis) - var(--sidebar-collapsed-pad) - 15px);
}

.sidebar.is-collapsed .project-row {
  width: 56px;
  max-width: 56px;
  height: 40px;
  min-height: 40px;
  justify-items: start;
  margin-left: calc(var(--sidebar-expanded-pad) - var(--sidebar-collapsed-pad));
}

.sidebar.is-collapsed .sidebar-profile {
  justify-content: flex-start;
}

.sidebar.is-collapsed .sidebar-profile-button {
  margin-left: calc(var(--sidebar-icon-axis) - var(--sidebar-collapsed-pad) - 16px);
}

.sidebar.is-collapsed .sidebar-collapse-dock {
  justify-content: flex-start;
}

.sidebar.is-collapsed .sidebar-collapse {
  justify-content: flex-start;
  padding-left: calc(var(--sidebar-icon-axis) - 10px);
}

.sidebar.is-collapsed .project {
  height: 34px;
  min-height: 34px;
  margin-left: 1px;
}

.sidebar.is-collapsed .project-mini-icon {
  width: 24px;
  height: 24px;
}

/* Locked sidebar geometry: collapsed mode must not nudge visible icons. */
.sidebar.is-collapsed {
  padding: 18px 10px 0;
}

.sidebar.is-collapsed .brand {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  margin-bottom: 22px;
}

.app-nav button {
  position: relative;
  padding-left: 49px;
}

.app-nav button::before {
  position: absolute;
  top: 50%;
  left: 10px;
  margin: 0;
  transform: translateY(-50%);
}

.sidebar.is-collapsed .app-nav button {
  padding: 0;
}

.sidebar.is-collapsed .app-nav button::before {
  left: 7px;
}

.sidebar.is-collapsed .side-section-head {
  min-height: 32px;
  margin-bottom: 10px;
}

.sidebar.is-collapsed .section-add-main,
.sidebar.is-collapsed .section-add-mini {
  visibility: hidden;
  pointer-events: none;
}

.sidebar.is-collapsed .sidebar-profile {
  padding: 18px 0 16px;
}

.sidebar-is-switching .sidebar,
.sidebar-is-switching .sidebar * {
  animation: none !important;
  transition: none !important;
}

.sidebar-is-switching .sidebar {
  overflow: hidden !important;
}

.sidebar .brand-logo,
.sidebar .app-nav button,
.sidebar .app-nav button::before,
.sidebar .project-row,
.sidebar .project,
.sidebar .project-mini-icon,
.sidebar .project-actions,
.sidebar .sidebar-profile-button,
.sidebar .sidebar-collapse {
  transition: none !important;
}

/* Sidebar nav rows: fixed icon, single-line label, compact badge. */
.app-nav button {
  display: flex;
  grid-template-columns: none;
  gap: 0;
  overflow: hidden;
  padding-right: 12px;
  white-space: nowrap;
}

.app-nav button span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-nav button em {
  position: static;
  flex: 0 0 auto;
  width: auto;
  min-width: 22px;
  margin-left: auto;
  padding: 0 7px;
}

.sidebar.is-collapsed .app-nav button {
  justify-content: center;
  padding-right: 0;
}

.sidebar.is-collapsed .app-nav button em {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  margin-left: 0;
  padding: 0 5px;
}

/* Collapsed sidebar: every visible icon sits on the same vertical axis. */
.sidebar.is-collapsed .project-list {
  justify-items: start;
}

.sidebar.is-collapsed .project-row {
  grid-template-columns: 1fr;
  width: 48px;
  max-width: 48px;
  height: 38px;
  min-height: 38px;
  margin-left: calc(var(--sidebar-expanded-pad) - var(--sidebar-collapsed-pad));
  padding: 0;
  place-items: center;
  border-radius: 13px;
}

.sidebar.is-collapsed .project {
  display: grid;
  grid-template-columns: 1fr;
  width: 34px;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  place-items: center;
  border-radius: 12px;
}

.sidebar.is-collapsed .project-mini-icon {
  width: 24px;
  height: 24px;
  justify-self: center;
  align-self: center;
}

.sidebar-collapse,
.sidebar-collapse:focus,
.sidebar-collapse:focus-visible {
  outline: 0 !important;
  outline-offset: 0;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none;
}

/* Footer controls share one fixed axis with the rest of the collapsed sidebar. */
.sidebar-profile-button {
  width: 32px;
  min-width: 32px;
  margin-left: calc(var(--sidebar-icon-axis) - var(--sidebar-expanded-pad) - 16px);
}

.sidebar-collapse-dock,
.sidebar.is-collapsed .sidebar-collapse-dock {
  width: calc(100% + (var(--sidebar-expanded-pad) * 2));
  max-width: none;
  margin: 2px calc(var(--sidebar-expanded-pad) * -1) 0;
  justify-content: flex-start;
  background: transparent;
}

.sidebar-collapse,
.sidebar.is-collapsed .sidebar-collapse {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  height: 66px;
  min-height: 66px;
  margin-left: 0;
  padding: 0;
}

.sidebar-collapse::before,
.sidebar.is-collapsed .sidebar-collapse::before {
  position: absolute;
  top: 24px;
  left: calc(var(--sidebar-icon-axis) - 11px);
  width: 22px;
  height: 22px;
  margin: 0;
  transform: translateY(-50%);
}

.sidebar.is-collapsed .sidebar-profile-button {
  margin-left: calc(var(--sidebar-icon-axis) - var(--sidebar-collapsed-pad) - 16px);
}

.sidebar.is-collapsed .sidebar-profile {
  padding: 12px 0 10px;
}

.sidebar.is-collapsed .sidebar-collapse-dock {
  width: calc(100% + (var(--sidebar-collapsed-pad) * 2));
  margin: 2px calc(var(--sidebar-collapsed-pad) * -1) 0;
}

.sidebar.is-collapsed .sidebar-collapse::before {
  left: calc(var(--sidebar-icon-axis) - 11px);
}

.sidebar-profile-button .avatar {
  width: 26px;
  height: 26px;
}

.sidebar-collapse:active {
  transform: none;
}

.sidebar-collapse:hover,
.sidebar-collapse:focus-visible {
  background: transparent;
}

.sidebar-collapse-dock:hover,
.sidebar-collapse-dock:focus-within {
  background: transparent;
}

@media (min-width: 921px) {
  .sidebar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .sidebar-collapse-dock {
    max-width: none;
  }
}

@media (max-width: 920px) {
  .app,
  .app.sidebar-collapsed {
    gap: 0;
    padding: 0;
  }

  .sidebar,
  .workspace {
    border-radius: 0;
  }
}

/* Final collapsed project geometry: keep project icons and active marks locked. */
.sidebar.is-collapsed .project-list {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-template-columns: 1fr !important;
  width: 54px !important;
  gap: 6px !important;
  overflow: visible !important;
  padding: 0 !important;
}

.sidebar.is-collapsed .project-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 0 0 calc(var(--sidebar-expanded-pad) - var(--sidebar-collapsed-pad)) !important;
  padding: 2px 0 !important;
  place-items: center !important;
  border-radius: 13px !important;
  flex: none !important;
}

.sidebar.is-collapsed .project {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  place-items: center !important;
  border-radius: 12px !important;
}

.sidebar.is-collapsed .project-mini-icon {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  justify-self: center !important;
  align-self: center !important;
}

.sidebar.is-collapsed .projects-section {
  margin-top: 14px !important;
  padding-top: 10px !important;
  transform: none !important;
}

.sidebar.is-collapsed .projects-section .side-section-head {
  height: 32px !important;
  min-height: 32px !important;
  margin-bottom: 10px !important;
  padding: 0 2px !important;
}

/* Sidebar stability pass: one fixed icon axis, no resize blink on collapse. */
.sidebar {
  --sidebar-axis-x: 42px;
  --sidebar-expanded-pad-x: 18px;
  --sidebar-collapsed-pad-x: 10px;
  --sidebar-nav-row: 42px;
  --sidebar-project-row: 38px;
  --sidebar-project-icon: 24px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.sidebar::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.sidebar,
.sidebar * {
  scroll-behavior: auto !important;
}

.sidebar-is-switching .sidebar,
.sidebar-is-switching .sidebar * {
  animation: none !important;
  transition: none !important;
}

.sidebar-is-switching .sidebar {
  overflow: hidden !important;
}

.brand {
  height: 42px !important;
  min-height: 42px !important;
  margin-bottom: 22px !important;
}

.brand-logo {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin-left: calc(var(--sidebar-axis-x) - var(--sidebar-expanded-pad-x) - 21px) !important;
}

.app-nav {
  display: grid !important;
  gap: 4px !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
}

.app-nav button {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  height: var(--sidebar-nav-row) !important;
  min-height: var(--sidebar-nav-row) !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  padding: 0 12px 0 49px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.app-nav button::before {
  position: absolute !important;
  top: 50% !important;
  left: calc(var(--sidebar-axis-x) - var(--sidebar-expanded-pad-x) - 9px) !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  background: currentColor !important;
  color: #6e7891 !important;
  transform: translateY(-50%) !important;
}

.app-nav button.active::before {
  color: var(--accent-ink) !important;
}

.app-nav button span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.app-nav button em {
  position: static !important;
  flex: 0 0 auto !important;
  height: 22px !important;
  min-width: 22px !important;
  margin-left: auto !important;
  padding: 0 7px !important;
}

.projects-section {
  margin-top: 0 !important;
  padding-top: 18px !important;
  transform: none !important;
}

.projects-section .side-section-head {
  height: 32px !important;
  min-height: 32px !important;
  margin-bottom: 10px !important;
  padding: 0 2px !important;
}

.project-list {
  display: grid !important;
  gap: 6px !important;
  overflow: visible !important;
  padding: 0 !important;
}

.project-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px !important;
  height: var(--sidebar-project-row) !important;
  min-height: var(--sidebar-project-row) !important;
  align-items: center !important;
  padding: 2px 3px !important;
  border-radius: 13px !important;
}

.project {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  height: 34px !important;
  min-height: 34px !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 0 9px !important;
  border-radius: 13px !important;
}

.project-mini-icon {
  width: var(--sidebar-project-icon) !important;
  min-width: var(--sidebar-project-icon) !important;
  height: var(--sidebar-project-icon) !important;
  min-height: var(--sidebar-project-icon) !important;
  margin: 0 !important;
}

.sidebar-profile {
  flex: 0 0 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  margin-top: auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 11px 0 !important;
}

.sidebar-profile-button {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin-left: calc(var(--sidebar-axis-x) - var(--sidebar-expanded-pad-x) - 16px) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar-profile-button:hover,
.sidebar-profile-button[aria-expanded="true"] {
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar-profile-button .avatar {
  width: 26px !important;
  height: 26px !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.sidebar-collapse-dock {
  flex: 0 0 58px !important;
  width: calc(100% + (var(--sidebar-expanded-pad-x) * 2)) !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 calc(var(--sidebar-expanded-pad-x) * -1) !important;
  border-top: 1px solid rgba(226, 230, 241, 0.72) !important;
  background: transparent !important;
}

.sidebar-collapse,
.sidebar.is-collapsed .sidebar-collapse {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.sidebar-collapse::before,
.sidebar.is-collapsed .sidebar-collapse::before {
  position: absolute !important;
  top: 50% !important;
  left: calc(var(--sidebar-axis-x) - 11px) !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  background: #20283a !important;
  transform: translateY(-50%) !important;
}

.sidebar-collapse:hover,
.sidebar-collapse:focus,
.sidebar-collapse:focus-visible,
.sidebar-collapse-dock:hover,
.sidebar-collapse-dock:focus-within {
  outline: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar-collapse:hover::before,
.sidebar-collapse:focus-visible::before {
  background: var(--accent-ink) !important;
}

.sidebar.is-collapsed {
  align-items: flex-start !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  padding: 16px var(--sidebar-collapsed-pad-x) 0 !important;
}

.sidebar.is-collapsed .brand {
  width: 100% !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
}

.sidebar.is-collapsed .brand-logo {
  margin-left: calc(var(--sidebar-axis-x) - var(--sidebar-collapsed-pad-x) - 21px) !important;
}

.sidebar.is-collapsed .brand > div,
.sidebar.is-collapsed .sidebar-search,
.sidebar.is-collapsed .side-section-title,
.sidebar.is-collapsed .project span,
.sidebar.is-collapsed .project-actions,
.sidebar.is-collapsed .project-favorite-mark {
  display: none !important;
}

.sidebar.is-collapsed .app-nav {
  width: 100% !important;
  justify-items: start !important;
}

.sidebar.is-collapsed .app-nav button {
  width: 48px !important;
  min-width: 48px !important;
  height: var(--sidebar-nav-row) !important;
  min-height: var(--sidebar-nav-row) !important;
  margin-left: calc(var(--sidebar-axis-x) - var(--sidebar-collapsed-pad-x) - 24px) !important;
  justify-content: center !important;
  padding: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
}

.sidebar.is-collapsed .app-nav button::before {
  left: 15px !important;
  width: 18px !important;
  height: 18px !important;
  color: #6e7891 !important;
}

.sidebar.is-collapsed .app-nav button.active::before {
  color: var(--accent-ink) !important;
}

.sidebar.is-collapsed .app-nav button em {
  position: absolute !important;
  top: 3px !important;
  right: 1px !important;
  width: auto !important;
  min-width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 5px !important;
  color: #626b83 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.sidebar.is-collapsed .projects-section {
  width: 100% !important;
  margin-top: 0 !important;
  padding-top: 18px !important;
}

.sidebar.is-collapsed .projects-section .side-section-head {
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  justify-content: flex-start !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
}

.sidebar.is-collapsed .section-add-main,
.sidebar.is-collapsed .section-add-mini {
  visibility: hidden !important;
  pointer-events: none !important;
}

.sidebar.is-collapsed .project-list {
  display: grid !important;
  width: 100% !important;
  justify-items: start !important;
  gap: 6px !important;
}

.sidebar.is-collapsed .project-row {
  grid-template-columns: 1fr !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: var(--sidebar-project-row) !important;
  min-height: var(--sidebar-project-row) !important;
  margin: 0 0 0 calc(var(--sidebar-axis-x) - var(--sidebar-collapsed-pad-x) - 24px) !important;
  padding: 2px 0 !important;
  place-items: center !important;
}

.sidebar.is-collapsed .project {
  grid-template-columns: 1fr !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
}

.sidebar.is-collapsed .project-mini-icon {
  width: var(--sidebar-project-icon) !important;
  min-width: var(--sidebar-project-icon) !important;
  height: var(--sidebar-project-icon) !important;
  min-height: var(--sidebar-project-icon) !important;
}

.sidebar.is-collapsed .sidebar-profile {
  width: 100% !important;
  flex-basis: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  justify-content: flex-start !important;
  padding: 11px 0 !important;
}

.sidebar.is-collapsed .sidebar-profile-menu {
  position: fixed !important;
  left: calc(var(--sidebar-axis-x) + 20px) !important;
  bottom: 76px !important;
  z-index: 120 !important;
  width: min(226px, calc(100vw - 96px)) !important;
}

.sidebar.is-collapsed .sidebar-profile-button {
  margin-left: calc(var(--sidebar-axis-x) - var(--sidebar-collapsed-pad-x) - 16px) !important;
}

.sidebar.is-collapsed .sidebar-collapse-dock {
  width: calc(100% + (var(--sidebar-collapsed-pad-x) * 2)) !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 calc(var(--sidebar-collapsed-pad-x) * -1) !important;
}

/* Sidebar must stay vertical on working widths, including narrow app panes. */
.app {
  width: 100% !important;
  max-width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
}

.app.sidebar-collapsed {
  grid-template-columns: 76px minmax(0, 1fr) !important;
}

.sidebar {
  position: sticky !important;
  top: 0 !important;
  width: auto !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  padding: 16px var(--sidebar-expanded-pad-x) 0 !important;
}

.app-nav {
  grid-template-columns: 1fr !important;
  overflow: visible !important;
}

.app-nav button {
  min-width: 0 !important;
}

.project-list {
  grid-template-columns: 1fr !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

.project-row {
  flex: none !important;
  width: 100% !important;
  scroll-snap-align: none !important;
}

.sidebar.is-collapsed {
  width: auto !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  padding: 16px var(--sidebar-collapsed-pad-x) 0 !important;
}

.workspace {
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: auto !important;
}

@media (max-width: 760px) {
  .more-actions div {
    position: fixed !important;
    top: 56px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 120 !important;
    width: min(170px, calc(100vw - 24px)) !important;
  }
}

.main-view,
.board-view,
.list-view,
.calendar-view,
.timeline-view,
.dashboard-view,
.files-view {
  min-width: 0 !important;
}

/* Mobile sidebar: compact rail by default, full menu as an overlay. */
.sidebar-backdrop {
  display: none;
}

@media (max-width: 760px) {
  .app,
  .app.sidebar-collapsed {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  .workspace {
    grid-column: 2 !important;
    width: auto !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 90 !important;
    width: 260px !important;
    box-shadow: 18px 0 40px rgba(31, 39, 70, 0.18) !important;
  }

  .sidebar.is-collapsed {
    position: sticky !important;
    inset: auto !important;
    width: 76px !important;
    box-shadow: none !important;
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: block;
    border: 0;
    background: rgba(24, 31, 50, 0.22);
    cursor: default;
  }

  .sidebar-backdrop[hidden] {
    display: none !important;
  }
}

/* Mobile project header: keep the project identity visible above its actions. */
@media (max-width: 560px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 12px 14px 10px !important;
  }

  .project-heading {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .project-heading > div {
    min-width: 0 !important;
  }

  .project-heading h2 {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    font-size: 20px !important;
  }

  #projectMeta {
    font-size: 11px !important;
  }

  .top-actions {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .top-actions > button {
    width: auto !important;
  }

  .top-actions > .more-actions {
    margin-left: auto !important;
  }
}

/* Board card polish: calm, information-first cards inspired by Asana. */
.board-view {
  grid-template-columns: repeat(5, minmax(282px, 1fr)) !important;
  gap: 14px !important;
}

.board-view .column {
  min-width: 282px !important;
  border: 1px solid #e8eaf1 !important;
  border-radius: 10px !important;
  background: #f6f7f9 !important;
  padding: 10px 9px 9px !important;
  box-shadow: none !important;
}

.board-view .column header {
  min-height: 38px !important;
  margin: 0 2px 8px !important;
}

.board-view .board-section-title strong {
  font-size: 14px !important;
  font-weight: 720 !important;
}

.board-view .board-section-title small {
  margin-top: 3px !important;
  color: #858da0 !important;
  font-size: 11px !important;
  font-weight: 560 !important;
}

.board-view .column-progress {
  height: 2px !important;
  margin: 0 2px 10px !important;
  background: #e3e6ed !important;
}

.board-view .column-tasks {
  gap: 8px !important;
  padding: 0 3px 3px 1px !important;
}

.board-view .task-card {
  gap: 9px !important;
  border: 1px solid #e3e5eb !important;
  border-radius: 8px !important;
  padding: 12px !important;
  box-shadow: 0 1px 2px rgba(25, 30, 45, 0.04) !important;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease !important;
}

.board-view .task-card:hover {
  transform: translateY(-1px) !important;
  border-color: #cfd2dc !important;
  box-shadow: 0 5px 14px rgba(25, 30, 45, 0.08) !important;
}

.board-view .task-card.active {
  border-color: #8f89ff !important;
  box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.11), 0 5px 14px rgba(25, 30, 45, 0.08) !important;
}

.board-view .task-card-head {
  grid-template-columns: 20px minmax(0, 1fr) 20px !important;
  gap: 9px !important;
  align-items: start !important;
}

.board-view .card-complete {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  border-width: 1.5px !important;
  border-color: #aeb5c4 !important;
}

.board-view .task-card-title {
  color: #202331 !important;
  font-size: 13px !important;
  font-weight: 680 !important;
  line-height: 1.38 !important;
  -webkit-line-clamp: 2 !important;
}

.board-view .task-card-menu {
  display: grid !important;
  height: 20px !important;
  place-items: center !important;
  border-radius: 5px !important;
  font-size: 16px !important;
  opacity: 0 !important;
}

.board-view .task-card:hover .task-card-menu,
.board-view .task-card.active .task-card-menu {
  opacity: 1 !important;
}

.board-view .tag-row {
  gap: 5px !important;
  padding-left: 29px !important;
}

.board-view .tag,
.board-view .task-status-label {
  min-height: 19px !important;
  padding: 0 7px !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  line-height: 19px !important;
}

.board-view .task-card-meta-row {
  display: flex !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 7px !important;
  padding-left: 29px !important;
}

.board-view .task-card-person {
  min-width: 0 !important;
  flex: 1 1 105px !important;
  max-width: 150px !important;
  background: transparent !important;
  padding: 0 !important;
}

.board-view .task-card-person .avatar {
  width: 20px !important;
  height: 20px !important;
  outline: 0 !important;
}

.board-view .task-card-person small {
  max-width: 118px !important;
  color: #687086 !important;
  font-size: 10px !important;
  font-weight: 620 !important;
}

.board-view .task-card-meta-actions {
  display: inline-flex !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 5px !important;
}

.board-view .due-badge,
.board-view .task-priority-pill {
  min-height: 20px !important;
  padding: 0 7px !important;
  font-size: 10px !important;
  font-weight: 680 !important;
  line-height: 20px !important;
}

.board-view .task-checklist-compact {
  display: grid !important;
  gap: 6px !important;
  border-top: 1px solid #eef0f4 !important;
  padding: 9px 0 0 29px !important;
}

.board-view .task-checklist-label {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.board-view .task-checklist-label strong {
  overflow: hidden !important;
  color: #414758 !important;
  font-size: 10px !important;
  font-weight: 640 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.board-view .task-checklist-label small {
  color: #8b92a4 !important;
  font-size: 9px !important;
  font-weight: 650 !important;
}

.board-view .task-checklist-compact > i {
  overflow: hidden !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: #e6e8ee !important;
}

.board-view .task-checklist-compact > i > span {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: #21b982 !important;
}

.board-view .task-card-footer {
  min-height: 28px !important;
  margin: 0 !important;
  border-top: 1px solid #eef0f4 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 8px 0 0 29px !important;
}

.board-view .task-card-stats {
  gap: 10px !important;
}

.board-view .task-card-stats .task-stat {
  min-height: 16px !important;
  gap: 4px !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: #8991a3 !important;
  font-size: 10px !important;
}

.board-view .task-stat::before {
  content: "" !important;
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px !important;
  background: currentColor !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;
}

.board-view .task-stat.comments::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v8Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.board-view .task-stat.attachments::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m21.4 11.6-8.9 8.9a6 6 0 0 1-8.5-8.5l9.6-9.6a4 4 0 0 1 5.7 5.7l-9.6 9.6a2 2 0 0 1-2.8-2.8l8.9-8.9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.board-view .task-card-followers {
  margin-left: auto !important;
}

.board-view .avatar-stack .avatar,
.board-view .avatar-more {
  width: 20px !important;
  height: 20px !important;
}

.board-view .board-quick-task {
  margin: 8px 1px 0 !important;
}

.board-view .board-quick-task input {
  border: 0 !important;
  background: transparent !important;
  padding-left: 8px !important;
  color: #71798c !important;
  font-size: 11px !important;
}

.board-view .board-quick-task input:focus {
  background: #fff !important;
  box-shadow: 0 0 0 1px #d9dce5 !important;
}

@media (max-width: 760px) {
  .board-view {
    grid-template-columns: repeat(5, minmax(282px, 282px)) !important;
  }
}

/* Semantic task chips: one icon language and predictable status colors. */
.board-view .due-badge,
.board-view .task-priority-pill {
  display: inline-flex !important;
  min-height: 22px !important;
  align-items: center !important;
  gap: 5px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  padding: 0 7px !important;
  font-size: 10px !important;
  font-weight: 720 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
}

.board-view .due-badge::before,
.board-view .task-priority-pill::before {
  content: "" !important;
  display: inline-block !important;
  width: 13px !important;
  min-width: 13px !important;
  height: 13px !important;
  background: currentColor !important;
  color: inherit !important;
  font-size: 0 !important;
  line-height: 0 !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-position: center !important;
  mask-repeat: no-repeat !important;
  mask-size: contain !important;
}

.board-view .due-badge::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") !important;
}

.board-view .task-priority-pill::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22V4m0 0c5-4 9 4 14 0v11c-5 4-9-4-14 0'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22V4m0 0c5-4 9 4 14 0v11c-5 4-9-4-14 0'/%3E%3C/svg%3E") !important;
}

.board-view .due-badge.none {
  border-color: #e4e7ed !important;
  background: #f3f5f8 !important;
  color: #747d90 !important;
}

.board-view .due-badge.overdue {
  border-color: #ffd9e0 !important;
  background: #fff0f3 !important;
  color: #df4560 !important;
}

.board-view .due-badge.today {
  border-color: #f1d9ff !important;
  background: #f9efff !important;
  color: #a64ac8 !important;
}

.board-view .due-badge.soon {
  border-color: #f7dfad !important;
  background: #fff6df !important;
  color: #b96c00 !important;
}

.board-view .due-badge.later {
  border-color: #d9e5ff !important;
  background: #edf4ff !important;
  color: #356dd7 !important;
}

.board-view .due-badge.done {
  border-color: #ccefe1 !important;
  background: #eaf9f3 !important;
  color: #168663 !important;
}

.board-view .task-priority-pill.urgent {
  border-color: #ffd4dd !important;
  background: #ffedf1 !important;
  color: #d93655 !important;
}

.board-view .task-priority-pill.high {
  border-color: #f5dba7 !important;
  background: #fff2d8 !important;
  color: #b86500 !important;
}

.board-view .task-priority-pill.normal {
  border-color: #d8e5ff !important;
  background: #ebf3ff !important;
  color: #326bd5 !important;
}

.board-view .task-priority-pill.low {
  border-color: #cfecdf !important;
  background: #eaf8f2 !important;
  color: #197d60 !important;
}

.board-view .task-card-due-button:hover .due-badge,
.board-view .task-card-due-button[aria-expanded="true"] .due-badge {
  filter: none !important;
  border-color: currentColor !important;
  box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.08) !important;
}

/* Interactive board cards: due date picker and inline checklist. */
.board-view .task-card-meta-row,
.board-view .task-card-meta-actions {
  width: 100% !important;
  min-width: 0 !important;
}

.board-view .task-card-meta-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

.board-view .task-card-due-control {
  position: relative !important;
  display: flex !important;
  flex: 0 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.board-view .task-card-due-control:has(.task-card-date-popover:not([hidden])) {
  flex: 1 0 100% !important;
}

.board-view .task-card-due-button {
  display: inline-flex !important;
  width: fit-content !important;
  min-width: 0 !important;
  min-height: 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.board-view .task-card-due-button:hover .due-badge,
.board-view .task-card-due-button[aria-expanded="true"] .due-badge {
  filter: saturate(1.08) brightness(0.98) !important;
  box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.10) !important;
}

.board-view .task-card-date-popover {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 7px !important;
  border: 1px solid #e3e6f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  padding: 9px !important;
  box-shadow: 0 10px 24px rgba(31, 39, 69, 0.10) !important;
}

.board-view .task-card-date-popover[hidden] {
  display: none !important;
}

.board-view .task-card-date-popover label {
  display: grid !important;
  gap: 5px !important;
}

.board-view .task-card-date-popover label > span {
  color: #6f7890 !important;
  font-size: 10px !important;
  font-weight: 720 !important;
}

.board-view .task-card-date-popover input[type="date"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  border: 1px solid #dfe3ee !important;
  border-radius: 8px !important;
  background: #f8f9fc !important;
  padding: 0 8px !important;
  color: #172033 !important;
  font: inherit !important;
  font-size: 12px !important;
}

.board-view .task-card-date-popover input[type="date"]:focus {
  border-color: #8d87ff !important;
  outline: 2px solid rgba(99, 91, 255, 0.12) !important;
}

.board-view .task-card-date-quick {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin-top: 7px !important;
}

.board-view .task-card-date-quick button {
  min-width: 0 !important;
  min-height: 28px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #f1f2f7 !important;
  padding: 0 5px !important;
  color: #596278 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.board-view .task-card-date-quick button:hover {
  background: #eceaff !important;
  color: #554bf2 !important;
}

.board-view .task-card-checklist {
  display: grid !important;
  gap: 7px !important;
  margin-top: 1px !important;
  border-top: 1px solid #edf0f5 !important;
  padding-top: 8px !important;
}

.board-view .task-checklist-toggle {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  padding: 3px 4px !important;
  color: inherit !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.board-view .task-checklist-toggle:hover,
.board-view .task-checklist-toggle[aria-expanded="true"] {
  background: #f7f8fc !important;
}

.board-view .task-checklist-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.board-view .task-checklist-label strong {
  overflow: hidden !important;
  color: #525b70 !important;
  font-size: 11px !important;
  font-weight: 690 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.board-view .task-checklist-label small {
  color: #858da0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.board-view .task-checklist-chevron {
  align-self: center !important;
  justify-self: center !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 1.5px solid #788198 !important;
  border-bottom: 1.5px solid #788198 !important;
  transform: rotate(45deg) translate(-1px, -1px) !important;
  transition: transform 140ms ease !important;
}

.board-view .task-card-checklist.expanded .task-checklist-chevron {
  transform: rotate(225deg) translate(-1px, -1px) !important;
}

.board-view .task-checklist-toggle > i {
  grid-column: 1 / -1 !important;
  display: block !important;
  height: 4px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #e6e9f0 !important;
}

.board-view .task-checklist-toggle > i > span {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: #1fbd8a !important;
}

.board-view .task-card-subtasks {
  display: grid !important;
  gap: 2px !important;
  padding: 1px 3px 2px 4px !important;
}

.board-view .task-card-subtasks[hidden] {
  display: none !important;
}

.board-view .task-card-subtask {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 17px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 30px !important;
  border-radius: 7px !important;
  padding: 4px 5px !important;
  color: #444d62 !important;
  font-size: 10.5px !important;
  font-weight: 570 !important;
  cursor: pointer !important;
}

.board-view .task-card-subtask:hover {
  background: #f5f7fb !important;
}

.board-view .task-card-subtask input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.board-view .task-card-subtask-check {
  display: grid !important;
  width: 17px !important;
  height: 17px !important;
  place-items: center !important;
  border: 1.5px solid #aeb6c8 !important;
  border-radius: 50% !important;
  background: #fff !important;
}

.board-view .task-card-subtask input:checked + .task-card-subtask-check {
  border-color: #18b981 !important;
  background: #18b981 !important;
}

.board-view .task-card-subtask input:checked + .task-card-subtask-check::after {
  content: "" !important;
  width: 6px !important;
  height: 3px !important;
  border-bottom: 1.7px solid #fff !important;
  border-left: 1.7px solid #fff !important;
  transform: translateY(-1px) rotate(-45deg) !important;
}

.board-view .task-card-subtask.done > span:last-child {
  color: #979fb0 !important;
  text-decoration: line-through !important;
}

.board-view [data-card-inline-control] {
  cursor: default !important;
}

.workspace:has(> .board-view) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

.workspace:has(> .board-view) > .board-view {
  min-height: 0 !important;
  height: auto !important;
  flex: 1 1 auto !important;
  grid-template-rows: minmax(0, 1fr) !important;
  padding-bottom: 0 !important;
}

.board-view .column-tasks {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(116, 123, 143, 0.24) transparent !important;
}

.board-view .column-tasks::-webkit-scrollbar {
  width: 4px !important;
}

.board-view .column-tasks::-webkit-scrollbar-track {
  background: transparent !important;
}

.board-view .column-tasks::-webkit-scrollbar-thumb {
  min-height: 36px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(116, 123, 143, 0.24) !important;
}

.board-view .column-tasks:hover::-webkit-scrollbar-thumb {
  background: rgba(116, 123, 143, 0.38) !important;
}

.board-view .task-card-description {
  display: -webkit-box !important;
  margin: 0 !important;
  padding-left: 29px !important;
  overflow: hidden !important;
  color: #858da0 !important;
  font-size: 11px !important;
  font-weight: 480 !important;
  line-height: 1.42 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.board-view .task-card-meta-row {
  justify-content: flex-start !important;
}

.board-view .task-card-meta-actions {
  justify-content: flex-start !important;
}

/* Stronger project identity in the workspace header. */
.project-heading > .project-icon {
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(38, 44, 84, 0.16) !important;
}

.project-heading > .project-icon::before {
  width: 26px !important;
  height: 26px !important;
}

@media (max-width: 820px) {
  .project-heading > .project-icon {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
  }

  .project-heading > .project-icon::before {
    width: 23px !important;
    height: 23px !important;
  }
}

/* Team and access management */
.team-view {
  --team-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20v-1.5a4.5 4.5 0 0 0-4.5-4.5h-3A4.5 4.5 0 0 0 4 18.5V20'/%3E%3Ccircle cx='10' cy='7' r='4'/%3E%3Cpath d='M18 9v6M15 12h6'/%3E%3C/svg%3E");
  display: grid;
  gap: 18px;
  align-content: start;
  padding-bottom: 28px;
}

.team-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  border-block: 1px solid var(--line);
}

.team-overview article {
  display: grid;
  gap: 4px;
  min-height: 76px;
  align-content: center;
  border-right: 1px solid var(--line);
  padding: 12px 18px;
}

.team-overview article:last-child {
  border-right: 0;
}

.team-overview span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.team-overview strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}

.team-directory,
.team-access-guide {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 18px;
}

.team-directory-head,
.team-access-guide-head {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.team-directory-head h3,
.team-access-guide-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.team-directory-head p,
.team-access-guide-head p,
.settings-team-link p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.team-directory-head > .primary {
  flex: 0 0 auto;
  white-space: nowrap;
}

.project-heading > .project-icon[hidden] + div {
  grid-column: 1 / 3;
  min-width: 0;
}

.team-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 190px;
  gap: 10px;
}

.team-search {
  position: relative;
  min-width: 0;
}

.team-search > span {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  transform: translateY(-56%);
  pointer-events: none;
}

.team-search > span::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--muted);
  transform: rotate(45deg);
}

.team-search input {
  width: 100%;
  padding-left: 42px;
}

.team-table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--line);
}

.team-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
}

.team-table th {
  height: 42px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  padding-right: 8px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.team-table td {
  height: 64px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  padding: 8px 10px 8px 0;
  vertical-align: middle;
}

.team-table tbody tr {
  cursor: default;
}

.team-table tbody tr:hover {
  background: #fafbfe;
}

.team-person {
  display: flex;
  min-width: 155px;
  align-items: center;
  gap: 10px;
}

.team-person > .avatar {
  width: 34px;
  min-width: 34px;
  height: 34px;
}

.team-person > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.team-person strong,
.team-person small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-person small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.team-count {
  display: inline-grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.team-role-select {
  width: 130px;
  min-height: 34px;
  border-radius: 8px;
  padding-block: 5px;
  font-size: 12px;
  font-weight: 800;
}

.team-role-select.role-owner,
.team-role-select.role-admin {
  border-color: #d8d4ff;
  background: #f2f0ff;
  color: #5146e9;
}

.team-role-select.role-manager {
  border-color: #bfe3fa;
  background: #edf8ff;
  color: #1675aa;
}

.team-role-select.role-member {
  border-color: #ccebdd;
  background: #effaf5;
  color: #16815f;
}

.team-role-select.role-viewer {
  border-color: #e2e5ec;
  background: #f6f7fa;
  color: #687086;
}

.team-role-select:disabled {
  cursor: not-allowed;
  opacity: .62;
}

.team-edit-button {
  min-height: 32px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  padding: 0 8px;
}

.team-edit-button:hover:not(:disabled) {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
}

.team-no-results {
  margin: 0;
  padding: 28px 16px;
  color: var(--muted);
  text-align: center;
}

.team-role-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: 10px;
}

.team-role-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 152px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.team-role-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-2);
}

.team-role-icon::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--team-icon) center / contain no-repeat;
  mask: var(--team-icon) center / contain no-repeat;
}

.team-role-card.role-owner .team-role-icon,
.team-role-card.role-admin .team-role-icon { background: #f2f0ff; color: #5a50e8; }
.team-role-card.role-manager .team-role-icon { background: #edf8ff; color: #1675aa; }
.team-role-card.role-member .team-role-icon { background: #effaf5; color: #16815f; }
.team-role-card.role-viewer .team-role-icon { background: #f2f3f6; color: #687086; }

.team-role-card strong {
  color: var(--text);
  font-size: 14px;
}

.team-role-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.settings-team-link {
  align-content: start;
}

.settings-team-link > button {
  justify-self: start;
}

@media (max-width: 1120px) {
  .team-role-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}

@media (max-width: 900px) {
  .team-overview {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-overview article:nth-child(2) {
    border-right: 0;
  }

  .team-overview article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .team-directory,
  .team-access-guide {
    border-inline: 0;
    border-radius: 0;
    padding-inline: 12px;
  }

  .team-directory-head,
  .team-access-guide-head {
    align-items: flex-start;
  }

  .team-directory-head {
    display: grid;
  }

  .team-toolbar,
  .team-role-grid {
    grid-template-columns: 1fr;
  }

  .team-table {
    min-width: 0;
  }

  .team-table thead {
    display: none;
  }

  .team-table tbody {
    display: grid;
    gap: 10px;
    padding-top: 10px;
  }

  .team-table tr {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
  }

  .team-table td {
    display: flex;
    min-height: 38px;
    height: auto;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding: 8px 0;
  }

  .team-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .team-table td:first-child {
    grid-column: 1 / -1;
    border-top: 0;
  }

  .team-table td:first-child::before,
  .team-row-action::before {
    display: none;
  }

  .team-row-action {
    grid-column: 1 / -1;
    justify-content: flex-end !important;
  }

  .team-role-select {
    width: 145px;
  }
}

/* Board visual order pass: compact Asana-like cards with stable card rhythm. */
.board-view {
  grid-template-columns: repeat(5, minmax(248px, 1fr)) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 12px !important;
  height: max(430px, calc(100vh - 280px)) !important;
  min-height: 430px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 0 10px !important;
  scrollbar-width: thin !important;
}

.board-view::-webkit-scrollbar {
  height: 8px !important;
}

.board-view::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(146, 153, 178, 0.26) !important;
}

.board-view .task-visibility-bar {
  position: sticky !important;
  left: 0 !important;
  z-index: 2 !important;
  width: max-content !important;
  max-width: 100% !important;
}

.board-view .column {
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  min-width: 248px !important;
  border-color: rgba(224, 228, 241, 0.8) !important;
  border-radius: 16px !important;
  background: #f5f7fc !important;
  padding: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.board-view .column header {
  min-height: 34px !important;
  margin-bottom: 8px !important;
}

.board-view .board-section-title strong {
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.board-view .board-section-title small {
  font-size: 11px !important;
}

.board-view .column-progress {
  height: 3px !important;
  margin-bottom: 10px !important;
  background: #e3e7f1 !important;
}

.board-view .column-tasks {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 9px !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 2px 2px 0 !important;
}

.board-view .task-card {
  align-self: stretch !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(226, 230, 241, 0.86) !important;
  border-radius: 14px !important;
  background: #fff !important;
  padding: 10px !important;
  box-shadow: 0 8px 22px rgba(38, 45, 76, 0.055) !important;
}

.board-view .task-card:hover {
  border-color: rgba(99, 91, 255, 0.30) !important;
  box-shadow: 0 14px 30px rgba(38, 45, 76, 0.10) !important;
}

.board-view .task-card.active {
  border-color: rgba(99, 91, 255, 0.50) !important;
  box-shadow: 0 16px 36px rgba(99, 91, 255, 0.14) !important;
}

.board-view .task-card-head {
  grid-template-columns: 24px minmax(0, 1fr) 18px !important;
  gap: 8px !important;
  align-items: start !important;
}

.board-view .task-card-title-wrap {
  gap: 3px !important;
}

.board-view .task-card-title {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

.board-view .task-card-description {
  color: #8a93a9 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

.board-view .tag-row {
  display: flex !important;
  overflow: hidden !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
}

.board-view .tag,
.board-view .due-badge,
.board-view .task-priority-pill,
.board-view .task-status-label {
  min-height: 20px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 0 7px !important;
  font-size: 10px !important;
  line-height: 20px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.board-view .tag-more {
  flex: 0 0 auto !important;
  background: #eef1f8 !important;
  color: var(--muted) !important;
}

.board-view .task-card-meta-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 6px !important;
  align-items: center !important;
}

.board-view .task-card-person {
  max-width: 100% !important;
  padding-right: 7px !important;
}

.board-view .task-card-person small {
  max-width: 94px !important;
}

.board-view .task-priority-pill {
  justify-self: start !important;
}

.board-view .task-card-meta-grid .due-badge {
  justify-self: start !important;
}

.board-view .task-checklist-preview {
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 8px !important;
  border-top-color: rgba(228, 231, 242, 0.68) !important;
  padding-top: 8px !important;
}

.board-view .task-checklist-ring {
  width: 30px !important;
  height: 30px !important;
  font-size: 10px !important;
}

.board-view .task-checklist-preview div {
  gap: 5px !important;
}

.board-view .task-checklist-preview small {
  overflow: hidden !important;
  font-size: 9px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.board-view .task-card-footer {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 36px !important;
  margin: auto -10px 0 !important;
  border-top: 1px solid rgba(228, 231, 242, 0.70) !important;
  border-radius: 0 0 14px 14px !important;
  background: #fafbff !important;
  padding: 7px 10px !important;
}

.board-view .task-card-stats {
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.board-view .task-card-stats:empty {
  display: none !important;
}

.board-view .task-card-stats span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.board-view .task-card-followers {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
}

.board-view .task-card-stats:empty + .task-card-followers {
  margin-left: auto !important;
}

.board-view .avatar-stack .avatar,
.board-view .avatar-more {
  width: 20px !important;
  height: 20px !important;
}

.board-view .board-quick-task {
  margin-top: 8px !important;
}

@media (max-width: 760px) {
  .task-main-fields {
    grid-template-columns: 1fr;
  }

  .tag-field,
  .task-main-fields > label.field:last-child {
    grid-column: 1 / -1;
  }

  .board-view {
    grid-template-columns: repeat(5, minmax(248px, 248px)) !important;
    height: max(430px, calc(100vh - 250px)) !important;
  }

  .board-view .task-card {
    padding: 10px !important;
  }

  .board-view .task-card-footer {
    margin: auto -10px 0 !important;
    padding: 7px 10px !important;
  }
}

/* Task detail visual reset: calm working card, not a heavy form. */
.details {
  width: min(560px, calc(100vw - 32px)) !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(27, 32, 57, 0.18) !important;
}

.details-head {
  grid-template-columns: 30px minmax(0, 1fr) 32px !important;
  gap: 14px !important;
  align-items: start !important;
  border-bottom: 1px solid #edf0f7 !important;
  border-radius: 24px 24px 0 0 !important;
  background: #fff !important;
  padding: 18px 22px 14px !important;
  backdrop-filter: none !important;
}

.details-head p:first-child {
  margin: 0 !important;
  color: #6f7890 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.complete-toggle {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
}

.ghost-icon {
  width: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 10px !important;
  color: #7a849b !important;
  font-size: 20px !important;
}

.autosave-status {
  min-height: 18px !important;
  margin: -2px 0 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: #8b94aa !important;
  font-size: 12px !important;
  font-weight: 680 !important;
}

.autosave-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  background: #a0a7b8;
}

.autosave-status.saving::before { background: var(--blue); }
.autosave-status.saved::before { background: var(--green); }
.autosave-status.error::before { background: var(--red); }

.task-header-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 4px !important;
}

.task-header-summary span {
  min-width: 0 !important;
  max-width: 170px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f5f7fc !important;
  padding: 5px 9px 5px 24px !important;
}

.task-header-summary span::before {
  left: 7px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 5px !important;
  font-size: 8px !important;
}

.task-header-summary small {
  display: none !important;
}

.task-header-summary strong {
  color: #5f687f !important;
  font-size: 11px !important;
  font-weight: 760 !important;
}

.details-section {
  margin: 0 28px !important;
  border-bottom-color: #edf0f7 !important;
  padding: 16px 0 !important;
}

.task-main-fields {
  gap: 12px !important;
}

.task-main-fields .task-title-field {
  margin: 0 0 2px !important;
}

.task-main-fields .task-title-field textarea,
.task-main-fields .task-title-field textarea:focus,
.task-main-fields .task-title-field textarea:focus-visible {
  min-height: 44px !important;
  max-height: 220px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: #111827 !important;
  font-size: 27px !important;
  font-weight: 850 !important;
  line-height: 1.14 !important;
}

.task-main-fields > label.field:nth-of-type(2) span {
  color: #6f7890 !important;
  font-size: 11px !important;
  font-weight: 820 !important;
  letter-spacing: .01em !important;
}

.task-main-fields > label.field:nth-of-type(2) textarea {
  min-height: 88px !important;
  border-color: #e7ebf4 !important;
  border-radius: 16px !important;
  background: #fbfcff !important;
  padding: 14px !important;
  color: #1f2533 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.task-meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.task-meta-grid .field {
  min-height: 70px !important;
  border-color: #e7ebf4 !important;
  border-radius: 16px !important;
  background: #fbfcff !important;
  padding: 10px 12px 10px 38px !important;
}

.task-meta-grid .field::before {
  top: 15px !important;
  left: 12px !important;
  width: 18px !important;
  height: 18px !important;
}

.task-meta-grid .field span {
  color: #9aa3b8 !important;
  font-size: 10px !important;
  font-weight: 820 !important;
  letter-spacing: .01em !important;
}

.task-meta-grid select,
.task-meta-grid input {
  width: 100% !important;
  min-height: 31px !important;
  overflow: hidden !important;
  padding: 2px 0 0 !important;
  color: #151b2c !important;
  font-size: 15px !important;
  font-weight: 780 !important;
  text-overflow: ellipsis !important;
}

.tag-field,
.task-main-fields > label.field:last-child {
  min-height: 118px !important;
  border-color: #e7ebf4 !important;
  border-radius: 16px !important;
  background: #fbfcff !important;
  padding: 12px 14px !important;
}

.field-head {
  gap: 8px !important;
  margin-bottom: 9px !important;
}

.field-head > span,
.task-main-fields > label.field:last-child > span {
  color: #6f7890 !important;
  font-size: 11px !important;
  font-weight: 820 !important;
  letter-spacing: .01em !important;
}

.field-head > span {
  margin-right: auto !important;
}

.small-action,
.inline-field-action {
  min-height: 30px !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
  font-size: 13px !important;
}

#addTagFromTask {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--accent) !important;
  padding: 0 6px !important;
}

#toggleTagPicker,
#toggleCollaboratorPicker {
  border-color: #dfe4f0 !important;
  background: #fff !important;
  color: #6f7890 !important;
}

.inline-field-action {
  margin-top: 0 !important;
}

.tag-picker {
  gap: 7px !important;
  min-height: 30px !important;
}

.tag-field .tag-picker,
.tag-picker:not(.is-expanded) {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
  scrollbar-width: none !important;
}

.tag-picker.is-expanded {
  max-height: 164px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

.tag-option span {
  min-height: 30px !important;
  gap: 7px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
  line-height: 30px !important;
}

.collaborator-option span {
  max-width: 100% !important;
  overflow: hidden !important;
  padding-left: 9px !important;
  color: color-mix(in srgb, var(--tag) 86%, #111827) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.collaborator-option .avatar {
  flex: 0 0 21px !important;
  margin: 0 !important;
}

.tag-edit-row > button {
  width: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
}

.picker-placeholder {
  min-height: 30px !important;
  background: transparent !important;
  padding: 0 !important;
}

.task-work-panel {
  gap: 9px !important;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.panel-head {
  margin-bottom: 2px !important;
}

.task-work-panel h3 {
  font-size: 14px !important;
  font-weight: 850 !important;
}

.quick-subtask {
  min-height: 40px !important;
  border-color: #dfe4f0 !important;
  background: #fff !important;
}

.attachment-dropzone {
  min-height: 46px !important;
  border-color: #dfe4f0 !important;
  background: #fff !important;
}

.comment-form {
  border-color: #dfe4f0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.subtask {
  min-height: 46px !important;
  border-color: #e7ebf4 !important;
  background: #fff !important;
  padding: 8px 10px !important;
}

.subtask .complete-circle {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
}

.subtask-name-input {
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 760 !important;
}

.subtask button {
  width: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

.quick-subtask {
  border-style: dashed !important;
}

.attachment-dropzone {
  color: #6f7890 !important;
  font-size: 13px !important;
}

#attachmentList:empty {
  display: none !important;
}

.attachment-gallery {
  grid-template-columns: repeat(auto-fill, minmax(138px, 176px)) !important;
  align-items: start !important;
}

.attachment-card {
  border-color: #e7ebf4 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(43, 50, 82, 0.045) !important;
}

.attachment-card img,
.attachment-card video {
  min-height: 112px !important;
  background:
    linear-gradient(135deg, rgba(247, 248, 255, .96), rgba(238, 241, 249, .96)) !important;
}

.attachment-media-button > span {
  right: 7px !important;
  bottom: 7px !important;
  padding: 4px 7px !important;
  font-size: 10px !important;
}

.attachment-card > div {
  gap: 8px !important;
  min-height: 38px !important;
  padding: 8px 9px !important;
}

.attachment-card > div > span {
  min-width: 0 !important;
  color: #1f2533 !important;
  font-size: 12px !important;
}

.attachment-card .attachment-remove {
  flex: 0 0 auto !important;
  border-radius: 999px !important;
  padding: 0 6px !important;
}

.attachment-media-button.is-broken {
  display: grid !important;
  min-height: 112px !important;
  place-items: center !important;
  background:
    linear-gradient(135deg, rgba(247, 248, 255, .96), rgba(238, 241, 249, .96)) !important;
}

.attachment-media-button.is-broken img,
.attachment-media-button.is-broken video,
.attachment-media-button.is-broken > span {
  display: none !important;
}

.attachment-fallback {
  display: grid !important;
  max-width: 120px !important;
  color: #7a849b !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

.attachment-viewer-error {
  display: grid;
  gap: 8px;
  justify-items: center;
  max-width: 360px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  padding: 24px;
  color: #fff;
  text-align: center;
}

.attachment-viewer-error strong {
  font-size: 18px;
}

.attachment-viewer-error span {
  max-width: 100%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-viewer-error small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 720;
}

.comment {
  border-color: #e7ebf4 !important;
  background: #fff !important;
  padding: 11px 12px !important;
  box-shadow: 0 8px 20px rgba(43, 50, 82, 0.035) !important;
}

.comment-head small {
  color: #7a849b !important;
  font-size: 11px !important;
  font-weight: 720 !important;
}

.comment p {
  color: #111827 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.comment-actions button,
.comment-edit-form button {
  border-radius: 999px !important;
}

@media (max-width: 760px) {
  .details {
    inset: 0 !important;
    width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  .details-head {
    border-radius: 0 !important;
    padding: 16px 18px 12px !important;
  }

  .details-section {
    margin: 0 18px !important;
  }

  .task-main-fields .task-title-field textarea,
  .task-main-fields .task-title-field textarea:focus,
  .task-main-fields .task-title-field textarea:focus-visible {
    font-size: 25px !important;
  }

  .task-meta-grid {
    grid-template-columns: 1fr !important;
  }

  .tag-field,
  .task-main-fields > label.field:last-child {
    min-height: 0 !important;
  }

  .comment-actions,
  .subtask button {
    opacity: 1 !important;
  }
}

/* Task detail polish pass: one calm card rhythm, no cramped form blocks. */
.details {
  width: min(640px, calc(100vw - 28px)) !important;
  overflow-x: hidden !important;
  color: #121827 !important;
  scrollbar-color: rgba(132, 141, 164, 0.52) transparent !important;
  scrollbar-width: thin !important;
}

.details::-webkit-scrollbar {
  width: 8px !important;
}

.details::-webkit-scrollbar-track {
  background: transparent !important;
}

.details::-webkit-scrollbar-thumb {
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: rgba(132, 141, 164, 0.42) !important;
}

.details input:focus-visible,
.details select:focus-visible,
.details textarea:focus-visible {
  outline: 3px solid rgba(99, 91, 255, 0.18) !important;
  outline-offset: 1px !important;
  border-color: rgba(99, 91, 255, 0.38) !important;
  box-shadow: none !important;
}

.details .task-title-field textarea:focus-visible {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#modal input:focus-visible,
#modal select:focus-visible,
#modal textarea:focus-visible {
  outline: 3px solid rgba(99, 91, 255, 0.18) !important;
  outline-offset: 1px !important;
  border-color: rgba(99, 91, 255, 0.42) !important;
  box-shadow: none !important;
}

.details-head {
  grid-template-columns: 28px minmax(0, 1fr) 32px !important;
  gap: 12px !important;
  padding: 18px 26px 14px !important;
}

.details-head > div {
  gap: 7px !important;
}

.details-head p:first-child {
  color: #717a91 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.complete-toggle {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
}

.task-header-summary {
  display: flex !important;
  gap: 6px !important;
  margin-top: 2px !important;
}

.task-header-summary span {
  max-width: min(180px, 33%) !important;
  min-height: 26px !important;
  align-items: center !important;
  border: 0 !important;
  background: #f7f8fc !important;
  padding: 0 10px 0 25px !important;
}

.task-header-summary strong {
  overflow: hidden !important;
  color: #465067 !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.details-section {
  margin: 0 26px !important;
  padding: 18px 0 !important;
}

.task-main-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.task-main-fields .task-title-field,
.task-main-fields .task-title-field:focus-within {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.task-main-fields .task-title-field textarea,
.task-main-fields .task-title-field textarea:focus,
.task-main-fields .task-title-field textarea:focus-visible {
  min-height: 40px !important;
  max-height: 220px !important;
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-size: 28px !important;
  letter-spacing: 0 !important;
}

.task-main-fields > label.field:nth-of-type(2) textarea,
.task-main-fields > label.field:nth-of-type(2) textarea:focus,
.task-main-fields > label.field:nth-of-type(2) textarea:focus-visible {
  min-height: 94px !important;
  max-height: 260px !important;
  border-color: #edf0f6 !important;
  outline: 0 !important;
  background: #fcfdff !important;
  box-shadow: none !important;
}

.task-meta-grid {
  gap: 10px !important;
}

.task-meta-grid .field {
  min-height: 62px !important;
  border-color: #edf0f6 !important;
  border-radius: 18px !important;
  background: #fcfdff !important;
  padding: 10px 12px 10px 38px !important;
}

.task-meta-grid select,
.task-meta-grid input {
  min-height: 26px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.tag-field,
.task-main-fields > label.field:last-child {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  border-color: #edf0f6 !important;
  border-radius: 18px !important;
  background: #fcfdff !important;
  padding: 12px !important;
}

.task-main-fields > label.field:last-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
}

.field-head {
  margin-bottom: 8px !important;
}

.small-action,
.inline-field-action {
  min-height: 28px !important;
  border-radius: 999px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}

#addTagFromTask {
  min-width: 30px !important;
  background: var(--accent-soft) !important;
  padding: 0 9px !important;
}

.tag-picker,
.tag-field .tag-picker,
.tag-picker.is-expanded,
.task-main-fields > label.field:last-child #collaboratorPicker {
  max-height: none !important;
  overflow: visible !important;
  gap: 7px !important;
  padding-right: 0 !important;
  scrollbar-width: none !important;
}

.tag-option span {
  min-height: 28px !important;
  height: 28px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border: 0 !important;
  background: color-mix(in srgb, var(--tag) 13%, #fff) !important;
  padding: 0 10px !important;
  box-shadow: none !important;
  line-height: 28px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tag-option input {
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tag-option input:checked + span {
  background: color-mix(in srgb, var(--tag) 18%, #fff) !important;
  box-shadow: none !important;
}

.tag-edit-row {
  max-width: 100% !important;
  align-items: center !important;
  overflow: visible !important;
}

.tag-edit-row > button {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  overflow: hidden !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.tag-edit-row.selected .tag-option span {
  padding-right: 10px !important;
}

.collaborator-option span {
  display: inline-flex !important;
  min-height: 30px !important;
  height: 30px !important;
  align-items: center !important;
  gap: 7px !important;
  overflow: hidden !important;
  padding: 3px 11px 3px 4px !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.collaborator-option .avatar {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  outline: 0 !important;
  font-size: 10px !important;
}

.subtask-progress {
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #f8fafd !important;
  padding: 10px 12px !important;
}

.subtask-progress-ring {
  width: 34px !important;
  height: 34px !important;
  font-size: 10px !important;
}

.subtask,
.quick-subtask,
.attachment-dropzone,
.comment-form {
  border-color: #edf0f6 !important;
  background: #fff !important;
}

.subtask {
  min-height: 42px !important;
  border-radius: 14px !important;
  padding: 7px 10px !important;
}

.subtask button {
  opacity: 0 !important;
}

.subtask:hover button,
.subtask:focus-within button {
  opacity: 1 !important;
}

.subtask-name-input,
.subtask-name-input:focus,
.quick-subtask input,
.quick-subtask input:focus {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.task-work-panel {
  gap: 10px !important;
}

.panel-head {
  margin-bottom: 0 !important;
}

.panel-head h3 {
  color: #121827 !important;
  font-size: 14px !important;
}

.attachment-dropzone {
  min-height: 44px !important;
  border-style: dashed !important;
  color: #7a849b !important;
}

.comment-form {
  min-height: 44px !important;
  border-radius: 16px !important;
}

@media (max-width: 760px) {
  .details-head {
    padding: 16px 18px 12px !important;
  }

  .details-section {
    margin: 0 18px !important;
  }

  .task-header-summary span {
    max-width: 100% !important;
  }

  .subtask button {
    opacity: 1 !important;
  }
}

@media (max-width: 760px) and (min-width: 561px) {
  .details {
    inset: 18px 16px 16px auto !important;
    width: min(640px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 34px) !important;
    border-radius: 24px !important;
  }

  .details-head {
    border-radius: 24px 24px 0 0 !important;
  }

  .details-section {
    margin: 0 24px !important;
  }

  .details .task-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .details .task-meta-grid .field {
    min-height: 58px !important;
  }

  .details .subtask button {
    opacity: 0 !important;
  }

  .details .subtask:hover button,
  .details .subtask:focus-within button {
    opacity: 1 !important;
  }
}

@media (max-width: 560px) {
  .details {
    inset: 0 !important;
    width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  .details-head {
    border-radius: 0 !important;
  }

  .details-section {
    margin: 0 18px !important;
  }

  .details .task-meta-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Task detail final alignment pass: calm Asana-like editing surface. */
.details {
  width: min(620px, calc(100vw - 28px)) !important;
  background: #fff !important;
  box-shadow: 0 26px 78px rgba(20, 27, 46, 0.2) !important;
}

.details-head {
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 86px !important;
  padding: 18px 28px 16px !important;
}

.details-head > div {
  align-content: center !important;
  gap: 6px !important;
}

.details-head p:first-child,
.task-header-summary {
  display: none !important;
}

.complete-toggle {
  justify-self: center !important;
  align-self: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  transform: none !important;
}

.ghost-icon {
  justify-self: center !important;
  align-self: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7b8498 !important;
}

.ghost-icon:hover,
.ghost-icon:focus-visible {
  background: #f4f6fb !important;
  color: #151b2c !important;
}

.autosave-status {
  min-height: 22px !important;
  border-radius: 999px !important;
  background: #f6f7fb !important;
  padding: 0 10px !important;
  color: #70798f !important;
  font-size: 12px !important;
  font-weight: 720 !important;
}

.autosave-status.saving {
  background: #eef5ff !important;
  color: #2364aa !important;
}

.autosave-status.saved {
  background: #eefaf5 !important;
  color: #169b70 !important;
}

.autosave-status.error {
  background: #fff1f2 !important;
  color: #d6455d !important;
}

.details-section {
  margin: 0 28px !important;
  padding: 18px 0 !important;
}

.task-main-fields {
  gap: 14px !important;
}

.task-main-fields .task-title-field {
  margin-top: 2px !important;
}

.task-main-fields .task-title-field textarea,
.task-main-fields .task-title-field textarea:focus,
.task-main-fields .task-title-field textarea:focus-visible {
  min-height: 46px !important;
  max-height: 220px !important;
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: #111827 !important;
  font-size: 27px !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
}

.task-main-fields > label.field:nth-of-type(2) span,
.task-meta-grid .field span,
.field-head > span,
.task-main-fields > label.field:last-child > span {
  color: #7a849a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.task-main-fields > label.field:nth-of-type(2) textarea,
.task-main-fields > label.field:nth-of-type(2) textarea:focus,
.task-main-fields > label.field:nth-of-type(2) textarea:focus-visible {
  min-height: 86px !important;
  max-height: 260px !important;
  border: 1px solid #e8ecf5 !important;
  border-radius: 18px !important;
  background: #fcfdff !important;
  padding: 14px 15px !important;
  color: #222a3d !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

.task-meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.task-meta-grid .field {
  display: grid !important;
  min-height: 58px !important;
  align-content: center !important;
  gap: 4px !important;
  border: 1px solid #e8ecf5 !important;
  border-radius: 18px !important;
  background: #fcfdff !important;
  padding: 10px 36px 10px 40px !important;
}

.task-meta-grid .field::before {
  top: 50% !important;
  left: 13px !important;
  width: 18px !important;
  height: 18px !important;
  transform: translateY(-50%) !important;
  border-radius: 8px !important;
}

.task-meta-grid select,
.task-meta-grid input {
  min-height: 24px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: #151b2c !important;
  font-size: 14px !important;
  font-weight: 780 !important;
  line-height: 1.2 !important;
}

.tag-field,
.task-main-fields > label.field:last-child {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  border: 1px solid #e8ecf5 !important;
  border-radius: 18px !important;
  background: #fcfdff !important;
  padding: 12px 14px !important;
}

.tag-field {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) auto auto !important;
  gap: 8px !important;
  align-items: center !important;
}

.tag-field .field-head {
  display: contents !important;
  margin: 0 !important;
}

.tag-field .field-head > span {
  grid-column: 1 !important;
}

#tagPicker {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#addTagFromTask {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

#toggleTagPicker {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

.small-action,
.inline-field-action {
  min-height: 28px !important;
  border: 1px solid #dfe4f0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  padding: 0 11px !important;
  color: #5d6680 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

#addTagFromTask {
  min-width: 0 !important;
  background: #f1efff !important;
  color: #635bff !important;
}

.task-main-fields > label.field:last-child {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
}

.task-main-fields > label.field:last-child > span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

.inline-field-action {
  grid-column: 3 !important;
  grid-row: 1 !important;
  margin: 0 !important;
}

.task-main-fields > label.field:last-child #collaboratorPicker {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.tag-picker,
.tag-field .tag-picker,
.tag-picker.is-expanded,
.task-main-fields > label.field:last-child #collaboratorPicker {
  min-height: 30px !important;
  max-height: none !important;
  overflow: visible !important;
  gap: 7px !important;
}

.tag-field:has(#tagPicker.is-expanded),
.task-main-fields > label.field:last-child:has(#collaboratorPicker.is-expanded) {
  align-items: start !important;
}

.tag-field:has(#tagPicker.is-expanded) .field-head > span,
.task-main-fields > label.field:last-child:has(#collaboratorPicker.is-expanded) > span {
  align-self: center !important;
}

.tag-field #tagPicker.is-expanded,
.task-main-fields > label.field:last-child #collaboratorPicker.is-expanded {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  max-height: 132px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px 4px 2px 0 !important;
  scrollbar-width: thin !important;
}

.task-main-fields > label.field:last-child #collaboratorPicker.is-expanded {
  max-height: 104px !important;
}

.tag-edit-row {
  gap: 4px !important;
}

.tag-option span,
.tag-option input:checked + span,
.collaborator-option span,
.collaborator-option input:checked + span {
  min-height: 28px !important;
  height: 28px !important;
  border: 1px solid color-mix(in srgb, var(--tag) 28%, #e8ecf5) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--tag) 12%, #fff) !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--tag) 82%, #1f2937) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 28px !important;
}

.tag-option input:checked + span,
.collaborator-option input:checked + span {
  background: color-mix(in srgb, var(--tag) 18%, #fff) !important;
}

.collaborator-option span {
  padding: 3px 10px 3px 4px !important;
}

.collaborator-option .avatar {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.tag-edit-row > button {
  opacity: 0 !important;
  transform: none !important;
}

.tag-edit-row:hover > button,
.tag-edit-row:focus-within > button {
  opacity: 1 !important;
}

.task-work-panel {
  gap: 12px !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.panel-head h3 {
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 830 !important;
}

.subtask-progress {
  border: 0 !important;
  background: #f7f9fd !important;
}

.quick-subtask,
.attachment-dropzone,
.comment-form {
  border: 1px solid #e8ecf5 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.quick-subtask {
  min-height: 44px !important;
  padding: 8px 12px !important;
}

.quick-subtask input {
  color: #1f2937 !important;
  font-size: 14px !important;
}

.attachment-dropzone {
  min-height: 52px !important;
  padding: 12px !important;
}

.comment-form {
  min-height: 46px !important;
}

.comment-form textarea {
  color: #1f2937 !important;
  font-size: 14px !important;
}

.task-danger-zone {
  padding-bottom: 24px !important;
}

.details .comment,
.details .comment-head,
.details .comment p,
.details .comment-edit-form,
.details .attachment-card,
.details .attachment-card > div,
.details .attachment-file,
.details .attachment-file strong {
  min-width: 0 !important;
  max-width: 100% !important;
}

.details .comment p,
.details .comment-edit-form textarea,
.details .comment-form textarea {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.details .attachment-card > div > span,
.details .attachment-file strong,
.details .attachment-viewer-error span {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.details .comment p {
  overflow-x: hidden !important;
}

@media (max-width: 760px) {
  .details-head {
    min-height: 78px !important;
    padding: 15px 18px 13px !important;
  }

  .details-section {
    margin: 0 18px !important;
  }

  .task-main-fields .task-title-field textarea,
  .task-main-fields .task-title-field textarea:focus,
  .task-main-fields .task-title-field textarea:focus-visible {
    font-size: 24px !important;
  }
}

@media (max-width: 820px) and (min-width: 561px) {
  .details {
    inset: 18px 16px 16px auto !important;
    width: min(620px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 34px) !important;
    border-radius: 24px !important;
  }

  .details-head {
    border-radius: 24px 24px 0 0 !important;
  }
}

@media (max-width: 560px) {
  .details {
    width: 100vw !important;
  }

  .task-meta-grid {
    grid-template-columns: 1fr !important;
  }

  .tag-field,
  .task-main-fields > label.field:last-child {
    grid-template-columns: 1fr auto !important;
  }

  .field-head > span,
  .task-main-fields > label.field:last-child > span {
    grid-column: 1 !important;
  }

  #tagPicker,
  .task-main-fields > label.field:last-child #collaboratorPicker {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  #addTagFromTask {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: start !important;
  }

  #toggleTagPicker,
  .inline-field-action {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}

/* Task detail design cleanup: quieter fields, fixed rhythm, cleaner chips. */
.details {
  width: min(600px, calc(100vw - 32px)) !important;
  border: 1px solid rgba(224, 229, 239, 0.86) !important;
  border-radius: 26px !important;
  box-shadow: 0 24px 70px rgba(23, 31, 56, 0.18) !important;
}

.details-head {
  min-height: 70px !important;
  padding: 16px 24px 12px !important;
  border-bottom: 1px solid #eef1f7 !important;
}

.complete-toggle {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
}

.autosave-status {
  justify-self: start !important;
  min-height: 24px !important;
  background: #f3f5fa !important;
  padding: 0 11px !important;
  color: #69748c !important;
}

.details-section {
  margin: 0 24px !important;
  padding: 16px 0 !important;
}

.task-main-fields {
  gap: 12px !important;
}

.task-main-fields .task-title-field textarea,
.task-main-fields .task-title-field textarea:focus,
.task-main-fields .task-title-field textarea:focus-visible {
  min-height: 38px !important;
  max-height: 180px !important;
  color: #111827 !important;
  font-size: 25px !important;
  font-weight: 820 !important;
  line-height: 1.14 !important;
}

.task-main-fields .task-title-field:focus-within textarea {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.task-main-fields > label.field:nth-of-type(2) textarea,
.task-main-fields > label.field:nth-of-type(2) textarea:focus,
.task-main-fields > label.field:nth-of-type(2) textarea:focus-visible {
  min-height: 74px !important;
  border: 1px solid #e9edf5 !important;
  border-radius: 16px !important;
  background: #fbfcff !important;
  padding: 12px 13px !important;
}

.task-meta-grid {
  gap: 10px !important;
}

.task-meta-grid .field {
  min-height: 54px !important;
  border-radius: 16px !important;
  background: #fbfcff !important;
  padding: 9px 34px 9px 38px !important;
}

.tag-field,
.task-main-fields > label.field:last-child {
  min-height: 52px !important;
  border-radius: 16px !important;
  background: #fbfcff !important;
  padding: 10px 12px !important;
}

.tag-field {
  grid-template-columns: 72px minmax(0, 1fr) auto auto !important;
}

.task-main-fields > label.field:last-child {
  grid-template-columns: 72px minmax(0, 1fr) auto !important;
}

.tag-picker,
.tag-field .tag-picker,
.task-main-fields > label.field:last-child #collaboratorPicker {
  min-height: 28px !important;
  gap: 6px !important;
  align-content: center !important;
}

.tag-option span,
.tag-option input:checked + span,
.collaborator-option span,
.collaborator-option input:checked + span {
  min-height: 26px !important;
  height: 26px !important;
  border-width: 1px !important;
  line-height: 24px !important;
}

.collaborator-option span {
  padding: 2px 9px 2px 3px !important;
}

.collaborator-option .avatar {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
}

.tag-edit-row > button {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
}

.task-field,
.task-meta-grid .field,
.tag-field,
.task-main-fields > label.field:last-child,
.quick-subtask,
.attachment-dropzone,
.comment-form {
  box-shadow: none !important;
}

.task-work-panel {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.panel-head h3 {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.quick-subtask,
.attachment-dropzone,
.comment-form {
  border-radius: 16px !important;
}

@media (max-width: 760px) {
  .details {
    width: min(600px, calc(100vw - 28px)) !important;
  }

  .details-section {
    margin: 0 18px !important;
  }

  .task-main-fields .task-title-field textarea,
  .task-main-fields .task-title-field textarea:focus,
  .task-main-fields .task-title-field textarea:focus-visible {
    font-size: 23px !important;
  }
}

/* Task detail overlay: keep the board quiet behind the open card. */
.app.details-open .workspace {
  overflow: hidden !important;
}

.app.details-open .main-view.board-view {
  overflow: hidden !important;
  padding-bottom: 0 !important;
  scrollbar-width: none !important;
}

.app.details-open .main-view.board-view::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Task detail mobile fullscreen override: the final cascade must not leave side gaps. */
@media (max-width: 560px) {
  .details,
  .details.is-open,
  #taskDetails[aria-hidden="false"] {
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .details-head {
    border-radius: 0 !important;
  }

  .tag-field {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  .tag-field .field-head > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #addTagFromTask {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: auto !important;
  }

  #toggleTagPicker {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: auto !important;
  }

  #tagPicker {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .task-main-fields > label.field:last-child {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .task-main-fields > label.field:last-child > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .inline-field-action {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: auto !important;
  }

  .task-main-fields > label.field:last-child #collaboratorPicker {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}

/* Mobile task details must stay above the sidebar rail so every field is clickable. */
@media (max-width: 760px) {
  .details-backdrop {
    z-index: 130 !important;
  }

  .details,
  .details.is-open,
  #taskDetails[aria-hidden="false"] {
    z-index: 140 !important;
  }
}

/* Task detail long-content clamp: filenames and checklist rows must not keep hidden width. */
.details .attachment-card strong,
.details .attachment-card > div > span,
.details .attachment-file strong,
.details .attachment-file span,
.details .subtask-name-input {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.details .attachment-card strong,
.details .attachment-card > div > span,
.details .attachment-file strong,
.details .attachment-file span {
  display: block !important;
}

/* Task detail attachment grid: all preview tiles keep one visual height. */
.details .attachment-card {
  display: grid !important;
  grid-template-rows: auto minmax(42px, auto) !important;
  align-self: stretch !important;
}

.details .attachment-media-button,
.details .attachment-file {
  aspect-ratio: 1.2 / 1 !important;
  min-height: 0 !important;
}

.details .attachment-media-button.is-broken {
  min-height: 0 !important;
}

.details .attachment-card img,
.details .attachment-card video {
  height: 100% !important;
  min-height: 0 !important;
}

/* Task detail refinement: flatten nested form cards into one calm work surface. */
.details,
.details.is-open,
#taskDetails[aria-hidden="false"] {
  width: min(640px, calc(100vw - 32px)) !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: 0 28px 80px rgba(20, 27, 46, 0.18) !important;
  overflow-anchor: none !important;
}

.details-head {
  min-height: 64px !important;
  grid-template-columns: 30px minmax(0, 1fr) 32px !important;
  gap: 12px !important;
  border-bottom: 1px solid #eff2f7 !important;
  padding: 16px 26px 12px !important;
}

.details-head > div {
  gap: 4px !important;
}

.autosave-status {
  min-height: 20px !important;
  background: transparent !important;
  padding: 0 !important;
  color: #7a8499 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.autosave-status::before {
  width: 6px !important;
  height: 6px !important;
  margin-right: 7px !important;
}

.complete-toggle {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
}

.ghost-icon {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 12px !important;
  font-size: 20px !important;
}

.details-section {
  margin: 0 28px !important;
  padding: 17px 0 !important;
}

.task-main-fields {
  grid-template-columns: 1fr !important;
  gap: 13px !important;
}

.task-main-fields .task-title-field {
  min-height: 0 !important;
  margin: 0 !important;
}

.task-main-fields .task-title-field > span {
  display: none !important;
}

.task-main-fields .task-title-field textarea,
.task-main-fields .task-title-field textarea:focus,
.task-main-fields .task-title-field textarea:focus-visible {
  min-height: 36px !important;
  max-height: 168px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: #111827 !important;
  font-size: 25px !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
}

.task-main-fields > label.field:nth-of-type(2) {
  gap: 7px !important;
}

.task-main-fields > label.field:nth-of-type(2) span,
.task-meta-grid .field span,
.field-head > span,
.task-main-fields > label.field:last-child > span {
  color: #778197 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.task-main-fields > label.field:nth-of-type(2) textarea,
.task-main-fields > label.field:nth-of-type(2) textarea:focus,
.task-main-fields > label.field:nth-of-type(2) textarea:focus-visible {
  min-height: 80px !important;
  max-height: 220px !important;
  border: 1px solid #edf0f6 !important;
  border-radius: 18px !important;
  background: #fcfdff !important;
  padding: 13px 14px !important;
  color: #232b3d !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

.task-meta-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid #edf0f6 !important;
  border-radius: 20px !important;
  background: #fcfdff !important;
}

.task-meta-grid .field {
  min-height: 58px !important;
  align-content: center !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 10px 34px 10px 40px !important;
}

.task-meta-grid .field:nth-child(odd) {
  border-right: 1px solid #edf0f6 !important;
}

.task-meta-grid .field:nth-child(-n + 2) {
  border-bottom: 1px solid #edf0f6 !important;
}

.task-meta-grid .field::before {
  left: 13px !important;
  width: 18px !important;
  height: 18px !important;
}

.task-meta-grid select,
.task-meta-grid input {
  min-height: 24px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: #151b2c !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
}

.tag-field,
.task-main-fields > label.field:last-child {
  min-height: 46px !important;
  border: 1px solid #edf0f6 !important;
  border-radius: 18px !important;
  background: #fcfdff !important;
  padding: 9px 12px !important;
}

.tag-field {
  grid-template-columns: 74px minmax(0, 1fr) auto auto !important;
}

.task-main-fields > label.field:last-child {
  grid-template-columns: 74px minmax(0, 1fr) auto !important;
}

.tag-field,
.task-main-fields > label.field:last-child {
  align-items: start !important;
}

.tag-field .field-head > span,
.task-main-fields > label.field:last-child > span {
  align-self: start !important;
  padding-top: 6px !important;
}

#addTagFromTask,
#toggleTagPicker,
.inline-field-action {
  align-self: start !important;
}

.tag-picker,
.tag-field .tag-picker,
.task-main-fields > label.field:last-child #collaboratorPicker {
  min-height: 28px !important;
  gap: 6px !important;
  align-content: center !important;
}

.tag-option span,
.tag-option input:checked + span,
.collaborator-option span,
.collaborator-option input:checked + span {
  min-height: 25px !important;
  height: 25px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--tag) 12%, #fff) !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--tag) 82%, #1f2937) !important;
  font-size: 11px !important;
  font-weight: 780 !important;
  line-height: 25px !important;
}

.collaborator-option span {
  padding: 2px 9px 2px 3px !important;
}

.collaborator-option .avatar {
  width: 19px !important;
  min-width: 19px !important;
  height: 19px !important;
  min-height: 19px !important;
  font-size: 9px !important;
}

.small-action,
.inline-field-action {
  min-height: 26px !important;
  border-radius: 999px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

#addTagFromTask {
  background: #f2f0ff !important;
}

.task-work-panel {
  gap: 10px !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.panel-head h3 {
  font-size: 14px !important;
  font-weight: 820 !important;
  line-height: 1.2 !important;
}

.subtask-progress {
  border: 0 !important;
  border-radius: 16px !important;
  background: #f8fafd !important;
  padding: 10px 12px !important;
}

.subtask {
  min-height: 42px !important;
  border-color: #edf0f6 !important;
  border-radius: 14px !important;
  background: #fff !important;
  padding: 7px 10px !important;
}

.quick-subtask,
.attachment-dropzone,
.comment-form {
  border-color: #edf0f6 !important;
  border-radius: 16px !important;
  background: #fff !important;
}

.attachment-dropzone {
  min-height: 48px !important;
}

@media (max-width: 760px) {
  .details-section {
    margin: 0 18px !important;
  }

  .task-main-fields .task-title-field textarea,
  .task-main-fields .task-title-field textarea:focus,
  .task-main-fields .task-title-field textarea:focus-visible {
    font-size: 23px !important;
  }
}

@media (max-width: 560px) {
  .details,
  .details.is-open,
  #taskDetails[aria-hidden="false"] {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }

  .task-meta-grid {
    grid-template-columns: 1fr !important;
  }

  .task-meta-grid .field:nth-child(odd),
  .task-meta-grid .field:nth-child(-n + 2) {
    border-right: 0 !important;
    border-bottom: 1px solid #edf0f6 !important;
  }

  .task-meta-grid .field:last-child {
    border-bottom: 0 !important;
  }
}

/* Keep the board polish authoritative over earlier compatibility layers. */
.board-view {
  grid-template-columns: none !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(282px, 1fr) !important;
  gap: 14px !important;
}

.board-view .column {
  min-width: 282px !important;
  border: 1px solid #e8eaf1 !important;
  border-radius: 10px !important;
  background: #f6f7f9 !important;
  padding: 10px 9px 9px !important;
  box-shadow: none !important;
}

.board-view .column header {
  min-height: 38px !important;
  margin: 0 2px 8px !important;
}

.board-view .board-section-title strong {
  font-size: 14px !important;
  font-weight: 720 !important;
}

.board-view .board-section-title small {
  margin-top: 3px !important;
  color: #858da0 !important;
  font-size: 11px !important;
  font-weight: 560 !important;
}

.board-view .column-progress {
  height: 2px !important;
  margin: 0 2px 10px !important;
  background: #e3e6ed !important;
}

.board-view .column-tasks {
  gap: 8px !important;
  padding: 0 3px 3px 1px !important;
}

.board-view .task-card {
  gap: 9px !important;
  border: 1px solid #e3e5eb !important;
  border-radius: 8px !important;
  padding: 12px !important;
  box-shadow: 0 1px 2px rgba(25, 30, 45, 0.04) !important;
}

.board-view .task-card:hover {
  transform: translateY(-1px) !important;
  border-color: #cfd2dc !important;
  box-shadow: 0 5px 14px rgba(25, 30, 45, 0.08) !important;
}

.board-view .task-card.active {
  border-color: #8f89ff !important;
  box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.11), 0 5px 14px rgba(25, 30, 45, 0.08) !important;
}

.board-view .task-card-head {
  grid-template-columns: 20px minmax(0, 1fr) 20px !important;
  gap: 9px !important;
}

.board-view .task-card-title {
  font-size: 13px !important;
  font-weight: 680 !important;
  line-height: 1.38 !important;
  -webkit-line-clamp: 2 !important;
}

.board-view .task-card-menu {
  opacity: 0 !important;
}

.board-view .task-card:hover .task-card-menu,
.board-view .task-card.active .task-card-menu {
  opacity: 1 !important;
}

.board-view .task-card-person {
  min-width: 0 !important;
  max-width: 150px !important;
  padding: 0 !important;
}

.board-view .task-card-person small {
  max-width: 118px !important;
}

.board-view .task-card-footer {
  min-height: 28px !important;
  margin: 0 !important;
  border-top: 1px solid #eef0f4 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 8px 0 0 29px !important;
}

.board-view .task-card-stats {
  gap: 10px !important;
}

.board-view .task-card-stats .task-stat {
  min-height: 16px !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.board-view .board-quick-task {
  margin: 8px 1px 0 !important;
}

@media (max-width: 760px) {
  .board-view {
    grid-template-columns: repeat(5, minmax(282px, 282px)) !important;
  }
}

/* Compact checklist placement: count beside due date, progress below. */
.board-view .task-card-meta-row {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.board-view .task-card-meta-actions {
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.board-view .task-checklist-toggle {
  display: inline-flex !important;
  width: auto !important;
  min-width: 42px !important;
  min-height: 22px !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  padding: 0 4px !important;
  color: #7b8499 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.board-view .task-checklist-toggle:hover,
.board-view .task-checklist-toggle[aria-expanded="true"] {
  background: #f1f2f7 !important;
  color: #5148e8 !important;
}

.board-view .task-checklist-toggle small {
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
}

.board-view .task-checklist-chevron {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  transform: rotate(45deg) translate(-1px, -1px) !important;
  transition: transform 140ms ease !important;
}

.board-view .task-checklist-toggle[aria-expanded="true"] .task-checklist-chevron {
  transform: rotate(225deg) translate(-1px, -1px) !important;
}

.board-view .task-card-checklist {
  display: grid !important;
  gap: 7px !important;
  margin-top: -2px !important;
  border-top: 0 !important;
  padding-top: 0 !important;
}

.board-view .task-card-checklist-progress {
  display: block !important;
  width: 100% !important;
  height: 4px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #e6e9f0 !important;
}

.board-view .task-card-checklist-progress > span {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: #1fbd8a !important;
}

/* Column-first rules and a sentence-style automation builder. */
.board-view .column {
  position: relative !important;
}

.column-automation {
  display: grid;
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #737d94;
  opacity: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 800;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}

.column:hover .column-automation,
.column-automation:focus-visible,
.column:has(.column-automation-menu) .column-automation {
  opacity: 1;
}

.column-automation:hover,
.column-automation:focus-visible {
  background: #eceaff;
  color: #554cf0;
}

.column-automation-menu {
  position: absolute;
  top: 45px;
  right: 8px;
  z-index: 18;
  display: grid;
  width: min(310px, calc(100vw - 36px));
  gap: 4px;
  transform: translateY(-4px);
  border: 1px solid #e2e4ed;
  border-radius: 8px;
  background: #fff;
  opacity: 0;
  padding: 8px;
  box-shadow: 0 16px 38px rgba(28, 34, 52, 0.16);
  transition: opacity 120ms ease, transform 120ms ease;
}

.column-automation-menu.visible {
  transform: translateY(0);
  opacity: 1;
}

.column-automation-menu > header {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) 28px;
  min-height: 38px !important;
  gap: 9px !important;
  align-items: center !important;
  margin: 0 0 5px !important;
  border-bottom: 1px solid #eef0f5;
  padding: 2px 2px 9px;
}

.column-automation-menu > header > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 7px;
  background: #eceaff;
  color: #554cf0;
  font-weight: 850;
}

.column-automation-menu > header div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.column-automation-menu > header strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.column-automation-menu > header small,
.column-automation-menu > p {
  color: #80899f;
  font-size: 11px;
}

.column-automation-menu > header button {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  border: 0;
  background: transparent;
  color: #929aad;
  padding: 0;
  font-size: 18px;
}

.column-automation-menu > p {
  margin: 3px 7px 5px;
  font-weight: 700;
}

.column-rule-template {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  gap: 9px;
  align-items: center;
  min-height: 52px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 6px 7px;
  color: #1a2030;
  text-align: left;
}

.column-rule-template:hover {
  background: #f5f5fb;
}

.column-rule-template > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 7px;
  background: #f0f1f6;
  color: #626d85;
  font-size: 15px;
  font-weight: 800;
}

.column-rule-template div {
  display: grid;
  gap: 2px;
}

.column-rule-template strong {
  font-size: 12px;
}

.column-rule-template small {
  color: #8991a4;
  font-size: 11px;
}

.column-rule-template i {
  color: #9ba2b3;
  font-size: 18px;
  font-style: normal;
}

.column-rule-custom {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  min-height: 54px;
  gap: 10px;
  align-items: center;
  margin-top: 2px;
  border: 1px solid #dcd9ff;
  border-radius: 7px;
  background: #f7f6ff;
  padding: 8px 10px;
  color: #554cf0;
  font-size: 12px;
  font-weight: 760;
  text-align: left;
}

.column-rule-custom > span:first-child {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
  background: #635bff;
  color: #fff;
  font-size: 18px;
}

.column-rule-custom > span:last-child {
  display: grid;
  gap: 2px;
}

.column-rule-custom small,
.column-rule-empty small {
  color: #8a93a8;
  font-size: 10px;
  font-weight: 500;
}

.column-rule-empty {
  display: grid;
  gap: 3px;
  padding: 10px 8px 12px;
}

.column-rule-empty strong {
  color: #343c4f;
  font-size: 12px;
}

dialog.automation-builder-dialog {
  width: min(800px, calc(100vw - 28px));
}

.automation-builder {
  gap: 14px;
}

.automation-builder-intro {
  background: #f8f8fc;
}

.automation-builder-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
}

.automation-enabled-toggle {
  display: flex;
  min-height: 42px;
  gap: 9px;
  align-items: center;
  cursor: pointer;
  color: #59637a;
  font-size: 12px;
  font-weight: 720;
}

.automation-enabled-toggle input {
  appearance: none;
  width: 36px !important;
  min-width: 36px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  flex: 0 0 36px;
  border: 0;
  border-radius: 999px;
  background: #cdd2dd;
  padding: 2px;
  transition: background 140ms ease;
}

.automation-enabled-toggle input::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  transform: translateX(0);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 26, 40, 0.2);
  transition: transform 140ms ease;
}

.automation-enabled-toggle input:checked {
  background: #635bff;
}

.automation-enabled-toggle input:checked::before {
  transform: translateX(16px);
}

.automation-sentence {
  display: grid;
  gap: 0;
  border: 1px solid #e2e4ec;
  border-radius: 8px;
  background: #fff;
}

.automation-sentence-step {
  display: grid;
  gap: 10px;
  padding: 15px 16px;
}

.automation-sentence-step + .automation-sentence-step {
  border-top: 1px solid #eceef3;
}

.automation-sentence-step.is-trigger {
  grid-template-columns: auto minmax(180px, 1fr) auto minmax(150px, .7fr);
  align-items: center;
}

.automation-sentence-label {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border-radius: 6px;
  background: #eceaff;
  padding: 4px 9px;
  color: #554cf0;
  font-size: 12px;
  font-weight: 820;
}

.automation-sentence-word {
  color: #7c8498;
  font-size: 13px;
}

.automation-sentence select,
.automation-sentence input {
  min-height: 40px;
  border-color: #dfe2ea;
  background: #fafbfc;
  font-size: 13px;
}

.automation-sentence-heading {
  display: flex;
  gap: 10px;
  align-items: center;
}

.automation-sentence-heading > select {
  width: auto;
  min-height: 32px;
  padding-block: 4px;
  font-size: 12px;
}

.automation-sentence-heading .automation-add-row {
  margin-left: auto;
}

.automation-optional {
  margin: 0 0 0 2px;
  color: #969daf;
  font-size: 12px;
}

.automation-builder-rows:empty {
  display: none;
}

.automation-sentence .automation-builder-row {
  grid-template-columns: minmax(145px, .9fr) minmax(110px, .65fr) minmax(180px, 1fr) 30px;
  margin-top: 2px;
  padding-left: 0;
}

.automation-sentence .automation-action-row {
  grid-template-columns: minmax(210px, 1fr) minmax(220px, 1.2fr) 30px;
}

.automation-sentence .automation-row-handle {
  display: none;
}

.automation-live-preview {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border-left: 3px solid #635bff;
  background: #f7f7ff;
  padding: 11px 13px;
}

.automation-live-preview > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  background: #635bff;
  color: #fff;
  font-weight: 800;
}

.automation-live-preview div {
  display: grid;
  gap: 3px;
}

.automation-live-preview small {
  color: #858da1;
  font-size: 10px;
  font-weight: 720;
  text-transform: uppercase;
}

.automation-live-preview strong {
  color: #30384b;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .automation-builder-topline,
  .automation-sentence-step.is-trigger,
  .automation-sentence .automation-builder-row,
  .automation-sentence .automation-action-row {
    grid-template-columns: 1fr;
  }

  .automation-enabled-toggle {
    justify-self: start;
  }

  .automation-sentence-word {
    display: none;
  }
}

/* Rules gallery: visual "when -> then" logic. */
.workspace:has(.rules-view) .topbar {
  display: none;
}

.rules-view {
  display: grid !important;
  align-content: start;
  gap: 18px;
  min-height: 100%;
  overflow-y: auto !important;
  background: #f8f9fc;
  padding: 28px clamp(20px, 3.5vw, 52px) 44px !important;
}

.rules-page-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
}

.rules-page-head > div {
  display: grid;
  gap: 5px;
}

.rules-page-head p {
  color: #635bff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.rules-page-head h2 {
  margin: 0;
  color: #111827;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 790;
  letter-spacing: 0;
}

.rules-page-head span {
  color: #7d879b;
  font-size: 13px;
}

.rules-create {
  min-height: 44px;
  border-radius: 8px;
  padding: 0 18px;
  box-shadow: 0 8px 20px rgba(99, 91, 255, 0.22);
}

.rules-toolbar {
  display: flex;
  min-height: 38px;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid #e5e7ef;
  padding-bottom: 12px;
  color: #778197;
  font-size: 12px;
}

.rules-toolbar span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.rules-toolbar span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #20b889;
}

.rules-toolbar button {
  min-height: 30px;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #635bff;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 720;
}

.rules-list {
  display: grid;
  gap: 16px;
}

.rule-flow-card {
  display: grid;
  grid-template-columns: minmax(260px, .95fr) clamp(64px, 8vw, 108px) minmax(260px, 1.05fr) auto;
  min-width: 0;
  align-items: stretch;
}

.rule-node {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 108px;
  gap: 16px;
  align-items: center;
  border: 1px solid #e2e5ed;
  border-radius: 8px;
  background: #fff;
  padding: 18px 20px;
  color: #161d2d;
  text-align: left;
  box-shadow: 0 7px 20px rgba(32, 39, 56, 0.07);
}

.rule-node:hover {
  transform: translateY(-1px);
  border-color: #cfcafc;
  box-shadow: 0 10px 26px rgba(32, 39, 56, 0.1);
}

.rule-node > span:last-child {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.rule-node small {
  color: #7f899d;
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.rule-node strong {
  overflow: hidden;
  color: #1d2434;
  font-size: 16px;
  font-weight: 720;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.rule-node em {
  justify-self: start;
  border-radius: 999px;
  background: #f1f2f7;
  padding: 3px 7px;
  color: #7d8699;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.rule-node-icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 8px;
  font-size: 27px;
  font-weight: 500;
  box-shadow: 0 5px 14px rgba(40, 46, 70, 0.08);
}

.rule-node-icon.purple {
  background: #f2efff;
  color: #6c5df5;
}

.rule-node-icon.blue {
  background: #edf4ff;
  color: #4e78ed;
}

.rule-node-icon.green {
  background: #eaf9f4;
  color: #23a982;
}

.rule-connector {
  position: relative;
  display: flex;
  align-items: center;
}

.rule-connector i {
  width: 100%;
  border-top: 3px dotted #9e96ff;
}

.rule-connector span {
  position: absolute;
  right: -1px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  transform: translateX(50%);
  border: 1px solid #dddafe;
  border-radius: 50%;
  background: #fff;
  color: #635bff;
  font-size: 18px;
  box-shadow: 0 3px 10px rgba(60, 55, 140, 0.1);
}

.rule-action-node {
  border-right: 0;
  border-radius: 8px 0 0 8px;
  box-shadow: 0 7px 20px rgba(32, 39, 56, 0.07);
}

.rule-card-controls {
  position: relative;
  display: flex;
  min-width: 178px;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid #e2e5ed;
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: #fff;
  padding: 14px 16px 14px 6px;
  box-shadow: 8px 7px 20px rgba(32, 39, 56, 0.07);
}

.rule-scope {
  position: absolute;
  right: 16px;
  bottom: 10px;
  max-width: 130px;
  overflow: hidden;
  color: #a0a7b8;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rule-status {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: #f0f1f5;
  color: #7d8597;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 750;
}

.rule-reference-error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid #f0d3ce;
  color: #a83729;
  background: #fff5f3;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.rule-status.invalid {
  color: #a83729;
  background: #fff0ed;
}

.rule-status.active {
  background: #e8f8f2;
  color: #249b79;
}

.rule-actions {
  position: relative;
}

.rule-actions summary {
  display: grid;
  width: 30px;
  min-height: 34px;
  place-items: center;
  border-radius: 6px;
  color: #737d91;
  cursor: pointer;
  font-size: 21px;
  list-style: none;
}

.rule-actions summary::-webkit-details-marker {
  display: none;
}

.rule-actions[open] summary,
.rule-actions summary:hover {
  background: #f1f2f6;
}

.rule-actions > div {
  position: absolute;
  top: 38px;
  right: 0;
  z-index: 8;
  display: grid;
  width: 150px;
  border: 1px solid #e1e4ec;
  border-radius: 8px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 12px 28px rgba(30, 36, 52, 0.16);
}

.rule-actions > div button {
  justify-content: flex-start;
  min-height: 34px;
  border: 0;
  background: transparent;
  padding: 6px 9px;
  text-align: left;
}

.rule-actions > div button:hover {
  background: #f5f6fa;
}

.rule-actions > div .danger-text {
  color: #cc3f55;
}

.rule-flow-card.is-paused .rule-node,
.rule-flow-card.is-paused .rule-card-controls {
  opacity: .68;
}

.rules-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 64px 20px;
  color: #7f899d;
  text-align: center;
}

.rules-empty > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 8px;
  background: #eeecff;
  color: #635bff;
  font-size: 26px;
}

.rules-empty h3 {
  color: #1b2232;
}

.rules-empty button {
  margin-top: 8px;
  border-color: #d8d4ff;
  color: #554cf0;
}

@media (max-width: 1440px) {
  .rule-flow-card {
    grid-template-columns: minmax(220px, .9fr) 54px minmax(220px, 1fr) auto;
  }

  .rule-node {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 96px;
    padding: 14px;
  }

  .rule-node-icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }

  .rule-card-controls {
    min-width: 132px;
  }

  .rule-scope {
    display: none;
  }
}

@media (max-width: 760px) {
  .rules-view {
    padding: 20px 14px 36px !important;
  }

  .rules-page-head {
    align-items: start;
    flex-direction: column;
  }

  .rule-flow-card {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .rule-connector {
    width: 2px;
    height: 32px;
    justify-self: center;
  }

  .rule-connector i {
    height: 100%;
    border-top: 0;
    border-left: 3px dotted #9e96ff;
  }

  .rule-connector span {
    right: auto;
    bottom: -1px;
    width: 28px;
    height: 28px;
    transform: translateY(50%) rotate(90deg);
  }

  .rule-action-node {
    border-right: 1px solid #e2e5ed;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
  }

  .rule-card-controls {
    min-height: 58px;
    border-top: 0;
    border-left: 1px solid #e2e5ed;
    border-radius: 0 0 8px 8px;
  }
}

/* Asana-like rule composer: two required steps, optional complexity. */
.rule-composer {
  gap: 14px;
}

.rule-composer .automation-builder-intro {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  min-height: 66px;
  background: #f8f8fc;
}

.rule-composer-project {
  max-width: 180px;
  overflow: hidden;
  border: 1px solid #e1e3ec;
  border-radius: 999px;
  background: #fff;
  padding: 6px 10px;
  color: #717b91;
  font-size: 11px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rule-composer-flow {
  gap: 0;
  border: 0;
  background: transparent;
}

.rule-composer .automation-sentence-step,
.rule-composer .automation-sentence-step + .automation-sentence-step {
  border: 1px solid #e1e4ec;
  border-radius: 10px;
  background: #fff;
  padding: 14px;
}

.rule-composer .automation-sentence-step.is-trigger {
  grid-template-columns: 36px 190px minmax(220px, 1fr);
  gap: 12px;
  align-items: center;
}

.rule-composer-number,
.rule-composer-condition-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: #eceaff;
  color: #5b52ef;
  font-size: 14px;
  font-weight: 820;
}

.rule-composer-condition-icon {
  width: 28px;
  height: 28px;
  border: 1px dashed #c9cde0;
  background: #f7f8fb;
  color: #8a93a8;
  font-size: 12px;
}

.rule-composer-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.rule-composer-copy small {
  color: #635bff;
  font-size: 10px;
  font-weight: 820;
  text-transform: uppercase;
}

.rule-composer-copy strong {
  overflow: hidden;
  color: #1b2232;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rule-composer-connector {
  position: relative;
  width: 2px;
  height: 20px;
  margin-left: 30px;
  background: #d9dbe5;
}

.rule-composer-connector i {
  position: absolute;
  bottom: -2px;
  left: -3px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border-right: 2px solid #aeb4c4;
  border-bottom: 2px solid #aeb4c4;
}

.rule-composer-conditions {
  gap: 9px !important;
  border-style: dashed !important;
  background: #fbfbfd !important;
  padding: 10px 14px !important;
}

.rule-composer-conditions.has-conditions {
  border-style: solid !important;
  background: #fff !important;
}

.rule-composer-conditions .automation-sentence-heading {
  display: grid;
  grid-template-columns: 28px minmax(170px, 1fr) auto auto;
  gap: 10px;
}

.rule-composer-match {
  display: flex;
  gap: 7px;
  align-items: center;
  color: #7f889b;
  font-size: 11px;
}

.rule-composer-match select {
  width: auto;
  min-height: 32px;
  border-color: #e0e3eb;
  background: #fff;
  padding-block: 4px;
  font-size: 11px;
}

.rule-composer .automation-add-row {
  min-height: 32px;
  border: 1px solid #dddafe;
  border-radius: 7px;
  background: #f8f7ff;
  padding: 5px 10px;
  color: #5b52ef;
  font-size: 11px;
}

.rule-composer .automation-optional {
  margin: -2px 0 0 38px;
  color: #9aa1b2;
  font-size: 10px;
}

.rule-composer .automation-sentence-step.is-action {
  gap: 10px;
}

.rule-composer .is-action > .automation-sentence-heading {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
}

.rule-composer .automation-sentence .automation-builder-row,
.rule-composer .automation-sentence .automation-action-row {
  grid-template-columns: minmax(190px, .9fr) minmax(230px, 1.1fr) 30px;
  gap: 8px;
  margin: 0;
  border-radius: 8px;
  background: #f8f9fc;
  padding: 8px;
}

.rule-composer .automation-sentence .automation-condition-row {
  grid-template-columns: minmax(135px, .8fr) minmax(105px, .55fr) minmax(170px, 1fr) 30px;
}

.rule-composer .automation-builder-rows.is-single .automation-remove-row {
  visibility: hidden;
}

.rule-composer-add-action {
  margin-left: 48px;
}

.rule-composer-more {
  border: 1px solid #e4e6ed;
  border-radius: 9px;
  background: #fff;
}

.rule-composer-more > summary {
  display: flex;
  min-height: 44px;
  gap: 9px;
  align-items: center;
  padding: 8px 13px;
  color: #454e62;
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
}

.rule-composer-more > summary small {
  color: #9299aa;
  font-size: 10px;
  font-weight: 500;
}

.rule-composer-more-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .75fr) auto;
  gap: 12px;
  align-items: end;
  border-top: 1px solid #eceef3;
  padding: 12px;
}

.rule-composer .automation-live-preview {
  border: 0;
  border-radius: 9px;
  background: #eef9f5;
}

.rule-composer .automation-live-preview > span {
  background: #20ad82;
}

@media (max-width: 720px) {
  .rule-composer .automation-builder-intro {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .rule-composer-project {
    grid-column: 2;
    justify-self: start;
  }

  .rule-composer .automation-sentence-step.is-trigger,
  .rule-composer-conditions .automation-sentence-heading,
  .rule-composer .automation-sentence .automation-builder-row,
  .rule-composer .automation-sentence .automation-action-row,
  .rule-composer .automation-sentence .automation-condition-row,
  .rule-composer-more-fields {
    grid-template-columns: 1fr;
  }

  .rule-composer .automation-sentence-step.is-trigger {
    justify-items: stretch;
  }

  .rule-composer-number,
  .rule-composer-condition-icon {
    grid-row: auto;
  }

  .rule-composer-conditions .automation-add-row,
  .rule-composer-add-action {
    margin-left: 0;
  }

  .rule-composer .automation-remove-row {
    justify-self: end;
  }
}

/* Minimal Asana-like rule dialog. */
dialog.automation-builder-dialog {
  width: min(620px, calc(100vw - 28px));
}

.rule-scope-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  color: #697386;
  font-size: 14px;
}

.rule-scope-field select {
  min-width: 0;
  width: 100%;
  min-height: 40px;
  border: 1px solid #e0e3e9;
  border-radius: 8px;
  background: #fff;
  padding: 8px 12px;
  font: inherit;
  color: #242a38;
}

.rule-simple-fixed:has(select) {
  display: grid;
  gap: 8px;
}

.rule-simple-builder {
  display: grid;
  gap: 0;
  padding-top: 18px;
}

.rule-simple-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid #dfe2ea;
  border-radius: 10px;
  background: #fff;
  padding: 14px;
}

.rule-simple-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 9px;
  background: #eceaff;
  color: #5b52ef;
  font-size: 18px;
  font-weight: 800;
}

.rule-simple-step > div {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.rule-simple-step small {
  color: #626c82;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.rule-simple-step select,
.rule-simple-step input,
.rule-simple-fixed {
  width: 100%;
  min-height: 42px;
  border-color: #dfe2ea;
  border-radius: 8px;
  background: #f9fafc;
  padding: 9px 12px;
  color: #222a3a;
  font-size: 13px;
}

.rule-simple-fixed {
  display: flex;
  gap: 4px;
  align-items: center;
}

.rule-simple-arrow {
  width: 38px;
  height: 24px;
  margin-left: 14px;
  color: #a4abbb;
  text-align: center;
}

.rule-simple-builder .automation-action-row {
  grid-template-columns: minmax(180px, .9fr) minmax(0, 1.1fr) 30px;
  gap: 8px;
  margin: 0;
  background: transparent;
  padding: 0;
}

.rule-simple-builder .automation-action-row.is-action-empty {
  grid-template-columns: minmax(0, 1fr) 0 30px;
}

.rule-simple-builder .automation-builder-rows.is-single .automation-remove-row {
  visibility: hidden;
}

.rule-simple-builder .automation-row-handle {
  display: none;
}

.rule-simple-links {
  display: flex;
  gap: 16px;
  padding: 12px 2px 2px 50px;
}

.rule-simple-links button {
  min-height: 28px;
  border: 0;
  background: transparent;
  padding: 3px 0;
  color: #5b52ef;
  font-size: 11px;
  font-weight: 720;
}

.rule-simple-links button:hover {
  text-decoration: underline;
}

.rule-simple-conditions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border-top: 1px solid #e8eaf0;
  padding-top: 12px;
}

.rule-simple-conditions[hidden] {
  display: none;
}

.rule-simple-conditions > header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.rule-simple-conditions > header strong {
  color: #444d60;
  font-size: 12px;
}

.rule-simple-conditions > header label {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #838b9d;
  font-size: 10px;
}

.rule-simple-conditions > header select {
  width: auto;
  min-height: 30px;
  padding-block: 3px;
  font-size: 10px;
}

.rule-simple-builder .automation-condition-row {
  grid-template-columns: minmax(120px, .75fr) minmax(95px, .55fr) minmax(150px, 1fr) 30px;
  gap: 7px;
  padding: 0;
}

@media (max-width: 620px) {
  .rule-simple-builder .automation-action-row,
  .rule-simple-builder .automation-condition-row {
    grid-template-columns: 1fr;
  }

  .rule-simple-links {
    padding-left: 0;
  }
}

/* Task card v2: focused, reference-led task workspace. */
.task-card-v2,
.task-card-v2.is-open,
#taskDetails.task-card-v2[aria-hidden="false"] {
  inset: 24px 0 !important;
  margin: auto !important;
  height: fit-content !important;
  max-height: calc(100dvh - 48px) !important;
  width: min(720px, calc(100vw - 28px)) !important;
  max-width: 720px !important;
  border: 1px solid #dadddf !important;
  border-radius: 40px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 64px rgba(24, 31, 48, 0.16) !important;
  color: #171b25 !important;
}

.task-card-v2 .details-head {
  position: sticky !important;
  z-index: 8 !important;
  top: 0 !important;
  min-height: 60px !important;
  grid-template-columns: 38px minmax(0, 1fr) 38px 38px !important;
  gap: 12px !important;
  margin: 0 !important;
  border-bottom: 0 !important;
  background: rgba(255, 255, 255, 0.97) !important;
  padding: 12px 32px !important;
}

.task-card-v2 .details-head-copy {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 2px !important;
  justify-content: center !important;
}

.task-card-v2 #detailsTitle {
  display: none !important;
  overflow: hidden !important;
  margin: 0 !important;
  color: #747d90 !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.task-card-v2 .autosave-status {
  min-height: 16px !important;
  margin: 0 !important;
  color: #a0a7b5 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
}

.task-card-v2 .autosave-status::before {
  width: 5px !important;
  height: 5px !important;
  margin-right: 6px !important;
}

.task-card-v2 .complete-toggle {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  align-self: center !important;
  border: 1.5px solid #aeb6c5 !important;
  background: #fff !important;
}

.task-card-v2 .complete-toggle.done {
  border-color: #20b979 !important;
  background: #20b979 !important;
}

.task-card-v2 .ghost-icon {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  align-self: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #788196 !important;
  font-size: 24px !important;
}

.task-card-v2 .ghost-icon:hover {
  background: #f3f4f7 !important;
  color: #242a38 !important;
}

.task-card-v2 .details-section {
  margin: 0 40px !important;
  padding: 22px 0 !important;
}

.task-card-v2 .task-main-fields {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  padding-top: 22px !important;
}

.task-card-v2 .task-title-field,
.task-card-v2 .task-title-field:focus-within {
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.task-card-v2 .task-title-field > span {
  display: none !important;
}

.task-card-v2 .task-title-field textarea,
.task-card-v2 .task-title-field textarea:focus,
.task-card-v2 .task-title-field textarea:focus-visible {
  min-height: 42px !important;
  max-height: 220px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: #171b25 !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  resize: none !important;
  letter-spacing: 0 !important;
}

.task-card-v2 .task-title-field:focus-within textarea {
  box-shadow: none !important;
}

.task-card-v2 .task-state-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.task-card-v2 .task-state-row .field {
  position: relative !important;
  display: inline-flex !important;
  width: auto !important;
  min-height: 42px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid currentColor !important;
  border-radius: 999px !important;
  background: #fff !important;
  padding: 0 13px 0 36px !important;
}

.task-card-v2 .task-state-row .field::before {
  position: absolute !important;
  left: 13px !important;
  width: 14px !important;
  height: 14px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.task-card-v2 .task-state-row .field > span {
  display: none !important;
}

.task-card-v2 .task-state-row select {
  width: auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0 22px 0 0 !important;
  color: inherit !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

.task-card-v2 .task-priority-chip {
  color: #ee5744 !important;
  background: #fff9f7 !important;
}

.task-card-v2 .task-priority-chip::before {
  content: "" !important;
  background: currentColor !important;
  mask: url('/icons/lucide/circle-arrow-up.svg') center / contain no-repeat;
  width: 17px !important;
  height: 17px !important;
}

.task-card-v2[data-priority="normal"] .task-priority-chip,
.task-card-v2[data-priority="low"] .task-priority-chip {
  color: #69738a !important;
  background: #fafbfc !important;
}

.task-card-v2[data-priority="normal"] .task-priority-chip::before,
.task-card-v2[data-priority="low"] .task-priority-chip::before {
  background: #8790a2 !important;
}

.task-card-v2 .task-section-chip {
  color: #20a852 !important;
  background: #f7fff9 !important;
}

.task-card-v2 .task-section-chip::before {
  content: "" !important;
  width: 9px !important;
  height: 9px !important;
  left: 16px !important;
  background: #20a852 !important;
}

.task-card-v2 .task-description-field {
  gap: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #e7e9ee !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 10px 0 24px !important;
}

.task-card-v2 .task-description-field > span {
  display: none !important;
}

.task-card-v2 .task-main-fields > label.task-description-field.field textarea,
.task-card-v2 .task-main-fields > label.task-description-field.field textarea:focus,
.task-card-v2 .task-main-fields > label.task-description-field.field textarea:focus-visible {
  min-height: 30px !important;
  max-height: 220px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: #59606d !important;
  font-size: 18px !important;
  font-weight: 430 !important;
  line-height: 1.5 !important;
  resize: none !important;
}

.task-card-v2 .task-description-field:focus-within {
  border-bottom-color: #a69ff9 !important;
}

.task-card-v2 .task-deadline-row {
  display: flex !important;
  min-height: 68px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border-bottom: 1px solid #e7e9ee !important;
  padding: 0 0 18px !important;
}

.task-card-v2 .task-due-field {
  position: relative !important;
  display: flex !important;
  min-width: 220px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding-left: 46px !important;
}

.task-card-v2 .task-due-field::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid #dfe2e8 !important;
  border-radius: 10px !important;
  background: #fff !important;
}

.task-card-v2 .task-due-field::after {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  width: 21px !important;
  height: 21px !important;
  background: currentColor !important;
  mask: url('/icons/lucide/calendar-days.svg') center / contain no-repeat;
  color: #232833 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.task-card-v2 .task-due-field > span {
  color: #252a35 !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.task-card-v2 .task-due-field input {
  position: relative !important;
  width: 142px !important;
  min-height: 36px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: #535b6b !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.task-card-v2 .task-due-field input::-webkit-calendar-picker-indicator {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  cursor: pointer !important;
  opacity: 0 !important;
}

.task-card-v2 .task-due-remaining {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #a9d9b7 !important;
  border-radius: 12px !important;
  background: #f8fff9 !important;
  padding: 0 12px !important;
  color: #209e49 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.task-card-v2 .task-due-remaining[hidden] {
  display: none !important;
}

.task-card-v2 .task-due-remaining[data-state="empty"] {
  border-color: #e0e3e9 !important;
  background: #fafbfc !important;
  color: #7b8496 !important;
}

.task-card-v2 .task-due-remaining[data-state="overdue"],
.task-card-v2 .task-due-remaining[data-state="today"] {
  border-color: #ffc5c1 !important;
  background: #fff7f6 !important;
  color: #df4e43 !important;
}

.task-card-v2 .task-due-remaining[data-state="soon"] {
  border-color: #f1d38e !important;
  background: #fffaf0 !important;
  color: #a36b00 !important;
}

.task-card-v2 .task-card-progress {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 0 4px !important;
  cursor: pointer;
}

.task-card-v2 .task-card-progress[hidden] {
  display: none !important;
}

.task-card-v2 .subtask-progress-ring {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  border: 2px solid #24ad53 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #24ad53 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
}

.task-card-v2 .task-card-progress > div {
  display: contents !important;
}

.task-card-v2 .subtask-progress-copy {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.task-card-v2 .subtask-progress-copy strong,
.task-card-v2 .subtask-progress-copy b {
  color: #20252f !important;
  font-size: 20px !important;
  font-weight: 500 !important;
}

.task-card-v2 .subtask-progress-copy b {
  color: #24ad53 !important;
}

.task-card-v2 .task-card-progress i {
  grid-column: 1 / -1 !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #e9ebef !important;
}

.task-card-v2 .task-card-progress i span {
  border-radius: inherit !important;
  background: #27af56 !important;
}

.task-card-v2 .task-header-summary {
  display: flex !important;
  min-height: 66px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  padding: 14px 0 !important;
}

.task-card-v2 .task-header-summary[hidden] {
  display: none !important;
}

.task-card-v2 .task-header-summary span,
.task-card-v2 .task-header-summary span::before {
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.task-card-v2 .task-header-summary span::before {
  content: none !important;
  display: none !important;
}

.task-card-v2 .task-people-summary,
.task-card-v2 .task-collaborator-avatars {
  display: flex !important;
  align-items: center !important;
}

.task-card-v2 .task-owner-avatar {
  display: grid !important;
  place-items: center !important;
  border-right: 1px solid #e4e6eb !important;
  padding-right: 18px !important;
  border: 0 !important;
  border-right: 1px solid #e4e6eb !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 4px 18px 4px 4px !important;
  min-width: 0 !important;
}

.task-card-v2 .task-collaborator-avatars {
  padding-left: 18px !important;
}

.task-card-v2 .task-owner-avatar .avatar {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  border: 2px solid #fff !important;
  outline: 1px solid #9bd7ae !important;
  border-radius: 50% !important;
  background: var(--avatar) !important;
  font-size: 16px !important;
}

.task-card-v2 .task-collaborator-avatars .avatar {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin-left: 6px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: var(--avatar) !important;
  font-size: 12px !important;
}

.task-card-v2 .task-people-more {
  display: grid !important;
  width: 32px !important;
  height: 32px !important;
  place-items: center !important;
  margin-left: -5px !important;
  border-radius: 50% !important;
  background: #f1f2f6 !important;
  color: #737c8d !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.task-card-v2 .task-unassigned {
  display: inline-flex !important;
  min-height: 34px !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f3f4f7 !important;
  padding: 0 12px !important;
  color: #798294 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.task-card-v2 .task-activity-summary {
  display: flex !important;
  gap: 8px !important;
}

.task-card-v2 .task-activity-summary button {
  display: grid !important;
  min-width: 76px !important;
  min-height: 50px !important;
  grid-template-columns: 22px auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  column-gap: 7px !important;
  border: 1px solid #dfe2e8 !important;
  border-radius: 16px !important;
  background: #fff !important;
  padding: 7px 11px !important;
  color: #252a35 !important;
}

.task-card-v2 .task-activity-summary button:hover {
  border-color: #b9b4fb !important;
  background: #fbfaff !important;
}

.task-card-v2 .task-activity-summary button > span {
  grid-row: 1 / 3 !important;
  color: #444b5a !important;
}

.task-card-v2 .task-header-summary .task-stat-icon {
  position: relative !important;
  display: block !important;
  width: 19px !important;
  min-width: 19px !important;
  height: 19px !important;
}

.task-card-v2 .task-header-summary .task-stat-icon.attachment-icon {
  width: 10px !important;
  min-width: 10px !important;
  height: 18px !important;
  margin-left: 4px !important;
  border: 2px solid currentColor !important;
  border-radius: 7px !important;
  transform: rotate(35deg) !important;
}

.task-card-v2 .task-header-summary .task-stat-icon.comment-icon {
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
}

.task-card-v2 .task-header-summary .task-stat-icon.comment-icon::after {
  content: "" !important;
  position: absolute !important;
  bottom: -3px !important;
  left: 1px !important;
  width: 6px !important;
  height: 6px !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(-25deg) !important;
}

.task-card-v2 .task-activity-summary strong {
  align-self: end !important;
  color: #222733 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.task-card-v2 .task-activity-summary small {
  align-self: start !important;
  color: #8a92a2 !important;
  font-size: 9px !important;
  line-height: 1 !important;
}

.task-card-v2 .task-options-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
  gap: 10px !important;
}

.task-card-v2 .task-assignee-field,
.task-card-v2 .task-collaborators-field,
.task-card-v2 .tag-field {
  min-height: 54px !important;
  border: 1px solid #e7e9ee !important;
  border-radius: 12px !important;
  background: #fbfcfe !important;
  padding: 10px 12px !important;
}

.task-card-v2 .task-assignee-field {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
}

.task-card-v2 .task-assignee-field span,
.task-card-v2 .task-collaborators-field > span,
.task-card-v2 .tag-field .field-head > span {
  color: #8b93a3 !important;
  font-size: 10px !important;
  font-weight: 750 !important;
}

.task-card-v2 .task-assignee-field select {
  min-height: 24px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 20px 0 0 !important;
  color: #252a35 !important;
  font-size: 13px !important;
  font-weight: 680 !important;
}

.task-card-v2 .task-collaborators-field {
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 7px !important;
}

.task-card-v2 .task-collaborators-field .inline-field-action {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

.task-card-v2 .task-collaborators-field #collaboratorPicker {
  grid-column: 1 / -1 !important;
}

.task-card-v2 .tag-field {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

.task-card-v2 .tag-field .field-head {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.task-card-v2 .tag-field .field-head > span {
  margin-right: auto !important;
  padding: 0 !important;
}

.task-card-v2 .tag-picker,
.task-card-v2 .tag-field .tag-picker,
.task-card-v2 #collaboratorPicker {
  min-height: 26px !important;
  max-height: none !important;
  overflow: visible !important;
}

.task-card-v2 .task-work-panel {
  gap: 12px !important;
  border-top: 1px solid #eceef2 !important;
  padding-block: 22px !important;
}

.task-card-v2 .task-work-panel .panel-head h3 {
  color: #202530 !important;
  font-size: 15px !important;
  font-weight: 740 !important;
}

.task-card-v2 .subtask {
  min-height: 44px !important;
  border: 0 !important;
  border-bottom: 1px solid #eff1f4 !important;
  border-radius: 0 !important;
  padding: 7px 4px !important;
}

.task-card-v2 .quick-subtask,
.task-card-v2 .attachment-dropzone {
  border: 1px dashed #cfd3de !important;
  border-radius: 12px !important;
  background: #fbfcfe !important;
}

.task-card-v2 .comment-form {
  display: grid !important;
  min-height: 64px !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid #dfe2e8 !important;
  border-radius: 16px !important;
  background: #fff !important;
  padding: 8px 9px 8px 15px !important;
}

.task-card-v2 .comment-form textarea {
  min-height: 38px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 8px 0 !important;
  font-size: 16px !important;
}

.task-card-v2 .comment-form button {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #28ad54 !important;
  padding: 0 !important;
  color: transparent !important;
}

.task-card-v2 .comment-form button::before {
  content: "" !important;
  position: static !important;
  display: grid !important;
  width: 24px !important;
  height: 24px !important;
  margin: auto !important;
  transform: none !important;
  background: #fff !important;
  mask: url('/icons/lucide/check.svg') center / contain no-repeat;
  place-items: center !important;
  color: #fff !important;
  font-size: 23px !important;
}

.task-card-v2 .task-danger-zone {
  margin-bottom: 24px !important;
  border-top: 1px solid #eceef2 !important;
}

.task-card-v2 .task-due-remaining::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-right: 8px;
  background: currentColor;
  mask: url('/icons/lucide/clock.svg') center / contain no-repeat;
}

.task-card-v2 .subtask-progress-ring {
  font-size: 0 !important;
}

.task-card-v2 .subtask-progress-ring::after {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  mask: url('/icons/lucide/check.svg') center / contain no-repeat;
}

.task-card-v2 .task-properties {
  min-width: 0;
}

.task-card-v2 #taskCustomFields[hidden] {
  display: none !important;
}

.task-card-v2 .task-properties > summary,
.task-card-v2 .task-work-panel > summary {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  margin: 0 !important;
  color: #626a76;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
  list-style: none;
}

.task-card-v2 summary::-webkit-details-marker {
  display: none;
}

.task-card-v2 .task-properties > summary::after,
.task-card-v2 .task-work-panel > summary::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  mask: url('/icons/lucide/chevron-down.svg') center / contain no-repeat;
}

.task-card-v2 details[open] > summary::after {
  transform: rotate(180deg);
}

.task-card-v2 .task-properties[open] > summary,
.task-card-v2 .task-work-panel[open] > summary {
  margin-bottom: 14px !important;
}

.task-card-v2 .task-properties .tag-field {
  margin-top: 12px !important;
}

.task-card-v2 .task-properties .task-assignee-field,
.task-card-v2 .task-properties .task-collaborators-field,
.task-card-v2 .task-properties .tag-field {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 8px 0 !important;
}

.task-card-v2 .task-quick-comment {
  margin: 0 40px 32px !important;
  grid-template-columns: 26px minmax(0, 1fr) 44px !important;
  background: #fafbfa !important;
  min-height: 80px !important;
  border-radius: 24px !important;
  flex-shrink: 0;
}

.task-card-v2 .task-quick-comment textarea {
  font-size: 18px !important;
  line-height: 1.5 !important;
}

.task-card-v2 .task-quick-comment::before {
  content: "";
  width: 24px;
  height: 24px;
  background: #727a76;
  mask: url('/icons/lucide/message-circle.svg') center / contain no-repeat;
}

.task-card-v2 .task-work-panel {
  padding-block: 10px !important;
  scroll-margin-top: 76px;
}

.task-card-v2 .task-properties {
  scroll-margin-top: 76px;
}

.task-card-v2 .task-properties:not([open]) {
  display: none !important;
}

.task-card-v2 .task-properties-trigger {
  display: grid !important;
  place-items: center !important;
}

.task-card-v2 :is(summary, [role="button"], button):focus-visible {
  outline: 2px solid #26964c !important;
  outline-offset: 3px !important;
}

.task-card-v2 .task-state-row .field,
.task-card-v2 .task-state-row select {
  max-width: 100% !important;
}

.task-card-v2 .task-state-row .field::after {
  content: none !important;
}

.task-card-v2,
.task-card-v2 :is(input, textarea, select, button, summary) {
  font-family: var(--app-font) !important;
  letter-spacing: 0 !important;
}

.task-card-v2 .task-work-panel:not([open]) {
  display: none !important;
}

.task-card-v2 .task-dependencies {
  min-width: 0;
  border-top: 1px solid #e7e9ee;
  padding-block: 16px;
}

.task-card-v2 .task-dependencies-head,
.task-card-v2 .task-dependency-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 8px;
}

.task-card-v2 .task-dependencies h3 {
  margin: 0;
  font-size: 14px;
  color: #596273;
}

.task-card-v2 .task-dependencies button:not(.task-dependency-open) {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #626c7d;
  font-size: 20px;
}

.task-card-v2 .task-dependencies button:hover:not(:disabled) {
  background: #f2f4f7;
}

.task-card-v2 .task-dependency-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 32px;
  align-items: center;
  gap: 8px;
  padding-block: 8px;
}

.task-card-v2 .task-dependency-open {
  min-width: 0;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #273449;
  font-size: 14px;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.task-card-v2 .task-dependency-state {
  font-size: 12px;
  color: #8b661e;
}

.task-card-v2 .task-dependency-state.done {
  color: #238346;
}

.task-card-v2 .task-dependency-add select {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 4px 8px;
  border: 1px solid #dfe3e9;
  border-radius: 6px;
  font-size: 13px;
  text-overflow: ellipsis;
}

.task-card-v2 #taskDependencyError {
  color: #bd3445;
  font-size: 13px;
}

.task-card-v2 .task-card-progress[data-empty="true"] {
  color: #697386 !important;
  min-height: 48px !important;
}

.task-card-v2 .task-card-progress[data-empty="true"] .subtask-progress-ring {
  border-color: #cbd1da !important;
  color: #697386 !important;
}

.task-card-v2 .task-card-progress[data-empty="true"] .subtask-progress-ring::after {
  mask-image: url('/icons/lucide/chevron-down.svg');
}

.task-card-v2 .task-header-summary .task-owner-avatar .avatar {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 56px !important;
}

.task-card-v2 .task-header-summary .task-collaborator-avatars .avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 44px !important;
}

.task-card-v2 .task-activity-summary strong {
  align-self: center !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

@media (max-width: 480px) {
  .task-card-v2,
  .task-card-v2.is-open,
  #taskDetails.task-card-v2[aria-hidden="false"] {
    inset: 0 !important;
    margin: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }

  .task-card-v2 .details-section {
    margin-inline: 20px !important;
  }

  .task-card-v2 .task-quick-comment {
    margin-inline: 20px !important;
  }

  .task-card-v2 .task-title-field textarea,
  .task-card-v2 .task-title-field textarea:focus,
  .task-card-v2 .task-title-field textarea:focus-visible {
    font-size: 29px !important;
  }

  .task-card-v2 .task-deadline-row,
  .task-card-v2 .task-header-summary {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .task-card-v2 .task-options-grid {
    grid-template-columns: 1fr !important;
  }

  .task-card-v2 .task-activity-summary {
    width: 100% !important;
  }

  .task-card-v2 .task-activity-summary button {
    flex: 1 !important;
  }
}