* { box-sizing: border-box; }

.hidden {
  display: none !important;
}

html,
body {
  background-color: var(--bg);
}

body {
  margin: 0;
  font-family: var(--app-font-family);
  background: radial-gradient(circle at top, var(--bg-top) 0%, var(--bg-mid) 55%, var(--bg-bottom) 100%);
  color: var(--ink);
  height: 100vh;
  overflow: hidden;
}

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

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
textarea,
select {
  color: var(--ink);
  caret-color: var(--ink);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"])::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

body[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
body[data-theme="light"] textarea,
body[data-theme="light"] select {
  color: var(--ink);
  caret-color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

body[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"])::placeholder,
body[data-theme="light"] textarea::placeholder {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
}


header {
  padding: 0 20px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 420;
  overflow: visible;
  height: auto;
  max-height: none;
}

header > * {
  position: relative;
  z-index: 1;
}

body[data-theme-family="emacs"] header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 84% 22%, rgba(255, 232, 120, 0.95) 0 34px, rgba(255, 232, 120, 0.55) 35px 58px, rgba(255, 232, 120, 0) 59px),
    linear-gradient(180deg, rgba(133, 207, 255, 0.96) 0%, rgba(179, 233, 255, 0.88) 62%, rgba(255, 246, 195, 0.82) 100%);
}

body[data-theme-family="lcars"] {
  --lcars-sidebar-width: 240px;
  letter-spacing: 0.025em;
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, 0.88) 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 14%, rgba(255, 243, 218, 0.78) 0 1px, transparent 1.5px),
    radial-gradient(circle at 83% 31%, rgba(173, 216, 255, 0.62) 0 1px, transparent 1.6px),
    radial-gradient(circle at 28% 74%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 61% 67%, rgba(255, 223, 186, 0.68) 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 48%, rgba(255, 255, 255, 0.54) 0 1px, transparent 1.6px),
    linear-gradient(180deg, #06070d 0%, #000000 54%, #03040a 100%);
  background-attachment: fixed;
}

body[data-theme-family="lcars"] header {
  border-bottom: 0;
  padding-top: 8px;
  padding-bottom: 18px;
  overflow: visible;
  background: #000000;
  backdrop-filter: none;
}

body[data-theme-family="lcars"] header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--lcars-sidebar-width) + 32px);
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background: #c88fb8;
  border-bottom-left-radius: 96px 34px;
}

body[data-theme-family="lcars"] header::after {
  content: "";
  position: absolute;
  left: var(--lcars-sidebar-width);
  right: 0;
  bottom: 0;
  height: 16px;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      90deg,
      #c88fb8 0 96px,
      #000000 96px 100px,
      #a47fd6 100px 220px,
      #000000 220px 224px,
      #7f9dff 224px 340px,
      #000000 340px 344px,
      #79c7d9 344px 820px,
      #000000 820px 824px,
      #b79bcf 824px 100%
    );
  border-radius: 0;
  border-top-left-radius: 34px;
  box-shadow: none;
}

body[data-theme-family="lcars"] .header-center {
  position: relative;
  z-index: 1;
  align-self: end;
  padding-top: 0;
  padding-left: 10px;
  padding-bottom: 0;
}

body[data-theme-family="lcars"] .header-center::before {
  content: "";
  position: fixed;
  left: var(--lcars-sidebar-width);
  top: 0;
  right: 0;
  height: 88px;
  background: #000000;
  border-bottom-left-radius: 34px 22px;
  pointer-events: none;
  z-index: 0;
}

body[data-theme-family="lcars"] .header-brand {
  min-height: 76px;
  align-items: flex-start;
  padding-top: 10px;
}

body[data-theme-family="lcars"] .header-actions {
  align-self: start;
  padding-top: 12px;
}

body[data-theme-family="lcars"] .view-switcher {
  position: relative;
  z-index: 1;
  padding-left: 8px;
}

body[data-theme-family="lcars"] .mobile-sidebar-trigger {
  margin-right: 8px;
}

body[data-theme-family="lcars"] .view-switcher::before {
  content: "";
  position: absolute;
  left: -18px;
  right: -10px;
  top: -8px;
  bottom: -8px;
  border-radius: 30px 8px 22px 8px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.54) 0%, rgba(21, 13, 28, 0.18) 100%);
  z-index: -1;
}

body[data-theme-family="lcars"] .header-actions,
body[data-theme-family="lcars"] .header-brand,
body[data-theme-family="lcars"] .header-tabs {
  padding-bottom: 4px;
}

body[data-theme-family="lcars"] .layout,
body[data-theme-family="lcars"] .content,
body[data-theme-family="lcars"] main {
  position: relative;
}

body[data-theme-family="lcars"] .layout {
  margin-top: 14px;
}

body[data-theme-family="lcars"] .content,
body[data-theme-family="lcars"] main {
  background: transparent;
}

body[data-theme-family="lcars"] .content::before {
  content: "";
  position: fixed;
  inset: 56px 0 0 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.32) 0 1px, transparent 1.4px),
    radial-gradient(circle at 77% 26%, rgba(255, 255, 255, 0.24) 0 1px, transparent 1.5px),
    radial-gradient(circle at 58% 74%, rgba(255, 232, 196, 0.18) 0 1px, transparent 1.6px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.04) 100%);
}

body[data-theme-family="lcars"] .sidebar {
  position: relative;
  background: #f29a5c;
  border-right: 0;
  overflow-x: visible;
  padding-top: 30px;
  border-top-left-radius: 96px 34px;
  z-index: 2;
}

body[data-theme-family="lcars"] .sidebar.todo-tree .todo-sidebar-section {
  border-top: 0;
}

body[data-theme-family="lcars"] .sidebar[data-todo-tree] > .todo-tree-list {
  width: calc(100% + 28px);
  margin-left: -14px;
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
  background: #000000;
}

body[data-theme-family="lcars"] .sidebar[data-todo-tree] > .todo-tree-list .todo-tree-node,
body[data-theme-family="lcars"] .sidebar[data-todo-tree] > .todo-tree-list .todo-tree-children {
  background: #000000;
}

body[data-theme-family="lcars"] .sidebar[data-todo-tree] > .todo-sidebar-section:not(.is-top),
body[data-theme-family="lcars"] .sidebar[data-todo-tree] > .todo-sidebar-section:not(.is-top) .todo-tree-list,
body[data-theme-family="lcars"] .sidebar[data-todo-tree] > .todo-sidebar-section:not(.is-top) .todo-tree-node,
body[data-theme-family="lcars"] .sidebar[data-todo-tree] > .todo-sidebar-section:not(.is-top) .todo-tree-children,
body[data-theme-family="lcars"] .sidebar[data-todo-tree] > .todo-sidebar-section:not(.is-top) .todo-assignee-dropdown {
  background: #b78fd6;
}

body[data-theme-family="lcars"] .sidebar[data-todo-tree] > .todo-sidebar-section:not(.is-top) {
  width: calc(100% + 28px);
  margin-left: -14px;
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
}

body[data-theme-family="lcars"] .sidebar[data-tree-sidebar] [data-sidebar-split-pane="bottom"] {
  background: #8fb8ff;
}

body[data-theme-family="lcars"] .direct-projects-section,
body[data-theme-family="lcars"] .direct-projects-heading {
  background: #d98fcf;
}

body[data-theme-family="lcars"] .sidebar-split-divider {
  width: calc(100% + 28px);
  margin-left: -14px;
  background: #000000;
}

body[data-theme-family="lcars"] .sidebar-split-divider::before {
  width: 100%;
  height: 100%;
  background: #000000;
}

body[data-theme-family="lcars"] .sidebar-split-divider::after {
  display: none;
}

body[data-theme-family="lcars"] .sidebar::before {
  content: none;
}

body[data-theme-family="lcars"] .sidebar > * {
  position: relative;
  z-index: 1;
}

body[data-theme-family="lcars"] .content {
  z-index: 1;
}

body[data-theme-family="lcars"] .content > * {
  position: relative;
  z-index: 4;
}

body[data-theme-family="lcars"] .content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 38px;
  background:
    linear-gradient(
      90deg,
      #f29a5c 0 96px,
      #000000 96px 100px,
      #f7cc7a 100px 220px,
      #000000 220px 224px,
      #d98fcf 224px 340px,
      #000000 340px 344px,
      #8fb8ff 344px 820px,
      #000000 820px 824px,
      #f29a5c 824px 100%
    );
  border-top-right-radius: 0;
  z-index: 2;
  pointer-events: none;
}

body[data-theme-family="lcars"] .content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 100%;
  height: calc(100% - 10px);
  background: #000000;
  border-top-left-radius: 44px 28px;
  pointer-events: none;
  z-index: 3;
}

body[data-theme-family="lcars"] .panel,
body[data-theme-family="lcars"] .notifications-menu,
body[data-theme-family="lcars"] .account-menu,
body[data-theme-family="lcars"] .auth-card,
body[data-theme-family="lcars"] .project-list .project-item,
body[data-theme-family="lcars"] .sidebar-stack > .sidebar-stack-item > .project-item,
body[data-theme-family="lcars"] .todo-item,
body[data-theme-family="lcars"] .inbox-shell,
body[data-theme-family="lcars"] .project-board-mode-panel,
body[data-theme-family="lcars"] .group-header,
body[data-theme-family="lcars"] .discussion-drawer,
body[data-theme-family="lcars"] .discussion-card {
  border-radius: 26px 8px 26px 8px;
  border-color: color-mix(in srgb, var(--accent-strong) 28%, var(--border) 72%);
  box-shadow: 0 12px 28px rgba(31, 10, 36, 0.22);
}

body[data-theme-family="lcars"] .panel,
body[data-theme-family="lcars"] .auth-card,
body[data-theme-family="lcars"] .discussion-drawer,
body[data-theme-family="lcars"] .discussion-card,
body[data-theme-family="lcars"] .notifications-menu,
body[data-theme-family="lcars"] .account-menu {
  position: relative;
  overflow: hidden;
}

body[data-theme-family="lcars"] .notifications-menu,
body[data-theme-family="lcars"] .account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  overflow-x: hidden;
  overflow-y: auto;
}

body[data-theme-family="lcars"] .discussion-drawer {
  position: fixed;
  top: 92px;
  right: 0;
  bottom: 0;
  z-index: 120;
  overflow: hidden;
}

body[data-theme-family="lcars"] .admin-content .panel {
  overflow: visible;
}

body[data-theme-family="lcars"] .panel::before,
body[data-theme-family="lcars"] .auth-card::before,
body[data-theme-family="lcars"] .discussion-drawer::before,
body[data-theme-family="lcars"] .discussion-card::before,
body[data-theme-family="lcars"] .notifications-menu::before,
body[data-theme-family="lcars"] .account-menu::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 14px;
  background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent-strong) 75%, var(--accent) 25%) 100%);
  opacity: 0.95;
}

body[data-theme-family="lcars"] .btn,
body[data-theme-family="lcars"] .account-trigger,
body[data-theme-family="lcars"] .notifications-trigger,
body[data-theme-family="lcars"] .messages-trigger,
body[data-theme-family="lcars"] .project-board-mode-tab,
body[data-theme-family="lcars"] .task-pill,
body[data-theme-family="lcars"] .task-pill-segment,
body[data-theme-family="lcars"] .tree-select-button,
body[data-theme-family="lcars"] .todo-tree-toggle {
  border-radius: 18px 6px 18px 6px;
}

body[data-theme-family="lcars"] .btn,
body[data-theme-family="lcars"] .project-board-mode-tab,
body[data-theme-family="lcars"] .task-pill-segment,
body[data-theme-family="lcars"] .tree-select-button,
body[data-theme-family="lcars"] .account-trigger,
body[data-theme-family="lcars"] .notifications-trigger,
body[data-theme-family="lcars"] .messages-trigger,
body[data-theme-family="lcars"] .view-switch,
body[data-theme-family="lcars"] .discussion-tab,
body[data-theme-family="lcars"] .discussion-setting-status,
body[data-theme-family="lcars"] .discussion-setting-mode-picker,
body[data-theme-family="lcars"] .discussion-setting-readonly {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

body[data-theme-family="lcars"] .btn,
body[data-theme-family="lcars"] .project-board-mode-tab {
  border-color: color-mix(in srgb, var(--accent-strong) 38%, var(--border) 62%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 26%, var(--panel) 74%) 0%, color-mix(in srgb, var(--panel-alt) 76%, var(--panel) 24%) 100%);
}

body[data-theme-family="lcars"] .view-switcher,
body[data-theme-family="lcars"] .discussion-tabs,
body[data-theme-family="lcars"] .project-board-mode-tabs {
  gap: 6px;
}

body[data-theme-family="lcars"] .view-switch,
body[data-theme-family="lcars"] .discussion-tab,
body[data-theme-family="lcars"] .project-board-mode-tab {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 38%, var(--border) 62%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, var(--panel) 78%) 0%, color-mix(in srgb, var(--panel-alt) 82%, var(--panel) 18%) 100%);
  border-radius: 22px 6px 22px 6px;
  padding-left: 18px;
  padding-right: 16px;
  border-bottom-width: 1px;
}

body[data-theme-family="lcars"] .view-switch::before,
body[data-theme-family="lcars"] .discussion-tab::before,
body[data-theme-family="lcars"] .project-board-mode-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent-strong) 72%, var(--accent) 28%) 100%);
}

body[data-theme-family="lcars"] .view-switch:hover,
body[data-theme-family="lcars"] .discussion-tab:hover,
body[data-theme-family="lcars"] .project-board-mode-tab:hover {
  color: var(--ink);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, var(--panel) 70%) 0%, color-mix(in srgb, var(--panel-alt) 76%, var(--panel) 24%) 100%);
}

body[data-theme-family="lcars"] .project-board-mode-tab.is-active,
body[data-theme-family="lcars"] .btn.primary,
body[data-theme-family="lcars"] .btn:not(.secondary):not(.ghost) {
  background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent-strong) 72%, var(--accent) 28%) 100%);
  color: color-mix(in srgb, #2b1231 86%, var(--ink) 14%);
}

body[data-theme-family="lcars"] .view-switch.active,
body[data-theme-family="lcars"] .discussion-tab.is-active,
body[data-theme-family="lcars"] .project-board-mode-tab.is-active {
  color: color-mix(in srgb, #2b1231 86%, var(--ink) 14%);
  background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent-strong) 72%, var(--accent) 28%) 100%);
}

body[data-theme-family="lcars"] .view-switch.active::before,
body[data-theme-family="lcars"] .discussion-tab.is-active::before,
body[data-theme-family="lcars"] .project-board-mode-tab.is-active::before {
  background: linear-gradient(180deg, color-mix(in srgb, #f7d9bf 84%, white 16%) 0%, color-mix(in srgb, #e7b88f 92%, var(--accent) 8%) 100%);
}

body[data-theme-family="lcars"] .task-pill {
  background: color-mix(in srgb, var(--panel-alt) 72%, var(--accent) 28%);
  border: 1px solid color-mix(in srgb, var(--accent-strong) 34%, var(--border) 66%);
}

body[data-theme-family="lcars"] .project-board-header {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent) 0 18%, transparent 18% 20%, color-mix(in srgb, var(--accent-strong) 14%, transparent) 20% 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 74%, var(--bg-top) 26%) 0%, color-mix(in srgb, var(--panel-alt) 88%, var(--panel) 12%) 100%);
}

body[data-theme-family="lcars"] .tree-project-board {
  position: relative;
}

body[data-theme-family="lcars"] .tree-project-board::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  border-radius: 18px 0 18px 0;
  background: linear-gradient(180deg, var(--project-color, var(--accent)) 0%, color-mix(in srgb, var(--project-color, var(--accent)) 62%, var(--accent-strong) 38%) 100%);
  opacity: 0.9;
  pointer-events: none;
}

body[data-theme-family="lcars"] .project-board-header,
body[data-theme-family="lcars"] .project-board-mode-panel {
  margin-left: 16px;
}

body[data-theme-family="lcars"] .project-board-header {
  border-top-left-radius: 34px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 8px;
  padding-left: 22px;
}

body[data-theme-family="lcars"] .project-board-header::after {
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--project-color, var(--accent)) 55%, transparent) 100%);
  height: 4px;
  border-radius: 999px;
}

body[data-theme-family="lcars"] .project-board-mode-tabs {
  gap: 6px;
  padding-top: 4px;
}

body[data-theme-family="lcars"] .group-header {
  padding: 10px 14px 8px 18px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--group-color, var(--accent)) 18%, transparent) 0%, transparent 100%);
  border-radius: 18px 6px 18px 6px;
  position: relative;
  overflow: hidden;
}

body[data-theme-family="lcars"] .group-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background: linear-gradient(180deg, var(--group-color, var(--accent)) 0%, color-mix(in srgb, var(--group-color, var(--accent)) 64%, var(--accent-strong) 36%) 100%);
}

body[data-theme-family="lcars"] .sidebar-division {
  padding-left: 10px;
  position: relative;
}

body[data-theme-family="lcars"] .sidebar-division::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 14px;
  border-radius: 14px 0 14px 0;
  background: linear-gradient(180deg, var(--division-color, var(--accent)) 0%, color-mix(in srgb, var(--division-color, var(--accent)) 64%, var(--accent-strong) 36%) 100%);
}

body[data-theme-family="lcars"] .sidebar-heading-row {
  min-height: 30px;
  padding-left: 12px;
}

body[data-theme-family="lcars"] .todo-sidebar-section.is-top .sidebar-heading-row {
  margin-top: -6px;
}

body[data-theme-family="lcars"] .sidebar-heading-row h3,
body[data-theme-family="lcars"] .todo-sidebar-subhead h3 {
  font-family: var(--theme-display-font-family);
  color: #000000;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.18em;
  font-stretch: condensed;
  font-size: 20px;
  line-height: 1;
  transform: scaleX(0.72);
  transform-origin: left center;
}

body[data-theme-family="lcars"] .project-list .project-item,
body[data-theme-family="lcars"] .sidebar-stack > .sidebar-stack-item > .project-item {
  border-radius: 22px 6px 22px 6px;
  padding-left: 18px;
  position: relative;
  overflow: hidden;
}

body[data-theme-family="lcars"] .project-list .project-item::before,
body[data-theme-family="lcars"] .sidebar-stack > .sidebar-stack-item > .project-item::before {
  width: 14px;
  opacity: 1;
  background: linear-gradient(180deg, var(--project-color, var(--accent)) 0%, color-mix(in srgb, var(--project-color, var(--accent)) 65%, var(--accent-strong) 35%) 100%);
}

body[data-theme-family="lcars"] .project-list .project-item.active,
body[data-theme-family="lcars"] .sidebar-stack > .sidebar-stack-item > .project-item.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--project-color, var(--accent)) 22%, transparent) 0%, color-mix(in srgb, var(--panel) 92%, transparent) 100%);
}

body[data-theme-family="lcars"] .todo-tree-node {
  margin-bottom: 4px;
}

body[data-theme-family="lcars"] .todo-tree-row {
  border-radius: 18px 6px 18px 6px;
  padding: 2px 6px 2px 0;
  position: relative;
  overflow: hidden;
  background: #000000;
}

body[data-theme-family="lcars"] .todo-tree-row[data-tree-division-row],
body[data-theme-family="lcars"] .todo-tree-node[data-division-id] > .todo-tree-row {
  padding-left: 12px;
}

body[data-theme-family="lcars"] .todo-tree-row[data-tree-division-row]::before,
body[data-theme-family="lcars"] .todo-tree-node[data-division-id] > .todo-tree-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 12px;
  border-radius: 12px 0 12px 0;
  background: linear-gradient(180deg, var(--division-color, var(--accent)) 0%, color-mix(in srgb, var(--division-color, var(--accent)) 60%, var(--accent-strong) 40%) 100%);
}

body[data-theme-family="lcars"] .todo-tree-row[data-tree-project-row],
body[data-theme-family="lcars"] .todo-tree-node.is-project > .todo-tree-row {
  padding-left: 16px;
}

body[data-theme-family="lcars"] .todo-tree-row[data-tree-project-row]::before,
body[data-theme-family="lcars"] .todo-tree-node.is-project > .todo-tree-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 10px;
  border-radius: 10px 0 10px 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--division-color, var(--accent)) 72%, var(--accent) 28%) 0%, color-mix(in srgb, var(--division-color, var(--accent)) 48%, var(--accent-strong) 52%) 100%);
}

body[data-theme-family="lcars"] .sidebar-heading-row h3,
body[data-theme-family="lcars"] .project-board-header h3,
body[data-theme-family="lcars"] .group-title-text,
body[data-theme-family="lcars"] .inbox-title {
  font-family: var(--theme-display-font-family);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
  font-stretch: ultra-condensed;
  transform: scaleX(0.82);
  transform-origin: left center;
}

body[data-theme-family="lcars"] .discussion-drawer {
  border-radius: 34px 10px 26px 10px;
}

body[data-theme-family="lcars"] .discussion-tabs {
  padding: 8px 8px 2px;
}

body[data-theme-family="lcars"] .discussion-setting-status,
body[data-theme-family="lcars"] .discussion-setting-mode-picker,
body[data-theme-family="lcars"] .discussion-setting-readonly {
  border-radius: 18px 6px 18px 6px;
  border-color: color-mix(in srgb, var(--accent-strong) 34%, var(--border) 66%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--panel-alt) 74%, var(--accent) 26%) 0%, color-mix(in srgb, var(--panel) 88%, var(--panel-alt) 12%) 100%);
}

body[data-theme-family="lcars"] .discussion-setting-mode-button {
  border-right-color: color-mix(in srgb, var(--accent-strong) 26%, var(--border) 74%);
}

body[data-theme-family="lcars"] .discussion-setting-mode-button.is-active {
  color: color-mix(in srgb, #2b1231 82%, var(--ink) 18%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #f0c9a7 18%) 0%, color-mix(in srgb, var(--accent-strong) 80%, var(--accent) 20%) 100%);
}

body[data-theme-family="lcars"] .todo-tree-row.is-active,
body[data-theme-family="lcars"] .todo-tree-row.is-included,
body[data-theme-family="lcars"] .project-list .project-item.active,
body[data-theme-family="lcars"] .sidebar-stack > .sidebar-stack-item > .project-item.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 28%, transparent) 0%, color-mix(in srgb, var(--panel) 92%, transparent) 100%);
}

body[data-theme-family="lcars"] .inbox-item.is-unread,
body[data-theme-family="lcars"] .notifications-item.is-pinned {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 100%);
}

body[data-theme-family="lcars"] .panel,
body[data-theme-family="lcars"] .notifications-menu,
body[data-theme-family="lcars"] .account-menu,
body[data-theme-family="lcars"] .auth-card,
body[data-theme-family="lcars"] .project-list .project-item,
body[data-theme-family="lcars"] .sidebar-stack > .sidebar-stack-item > .project-item,
body[data-theme-family="lcars"] .todo-item,
body[data-theme-family="lcars"] .inbox-shell,
body[data-theme-family="lcars"] .project-board-mode-panel,
body[data-theme-family="lcars"] .group-header,
body[data-theme-family="lcars"] .discussion-drawer,
body[data-theme-family="lcars"] .discussion-card,
body[data-theme-family="lcars"] .project-board-header,
body[data-theme-family="lcars"] .sidebar-division,
body[data-theme-family="lcars"] .todo-tree-row,
body[data-theme-family="lcars"] .project-board-mode-tab,
body[data-theme-family="lcars"] .discussion-tab,
body[data-theme-family="lcars"] .discussion-setting-status,
body[data-theme-family="lcars"] .discussion-setting-mode-picker,
body[data-theme-family="lcars"] .discussion-setting-readonly,
body[data-theme-family="lcars"] .btn,
body[data-theme-family="lcars"] .task-pill,
body[data-theme-family="lcars"] .task-pill-segment,
body[data-theme-family="lcars"] .tree-select-button,
body[data-theme-family="lcars"] .todo-tree-toggle {
  border-radius: 12px;
  background: var(--panel);
  border-color: var(--border);
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
}

body[data-theme-family="lcars"] .panel::before,
body[data-theme-family="lcars"] .auth-card::before,
body[data-theme-family="lcars"] .discussion-drawer::before,
body[data-theme-family="lcars"] .discussion-card::before,
body[data-theme-family="lcars"] .notifications-menu::before,
body[data-theme-family="lcars"] .account-menu::before,
body[data-theme-family="lcars"] .tree-project-board::before,
body[data-theme-family="lcars"] .group-header::before,
body[data-theme-family="lcars"] .sidebar-division::before,
body[data-theme-family="lcars"] .project-list .project-item::before,
body[data-theme-family="lcars"] .sidebar-stack > .sidebar-stack-item > .project-item::before,
body[data-theme-family="lcars"] .todo-tree-row[data-tree-division-row]::before,
body[data-theme-family="lcars"] .todo-tree-node[data-division-id] > .todo-tree-row::before,
body[data-theme-family="lcars"] .todo-tree-row[data-tree-project-row]::before,
body[data-theme-family="lcars"] .todo-tree-node.is-project > .todo-tree-row::before,
body[data-theme-family="lcars"] .view-switch::before,
body[data-theme-family="lcars"] .discussion-tab::before,
body[data-theme-family="lcars"] .project-board-mode-tab::before {
  display: none;
}

body[data-theme-family="lcars"] .project-board-header,
body[data-theme-family="lcars"] .group-header,
body[data-theme-family="lcars"] .sidebar-division,
body[data-theme-family="lcars"] .project-list .project-item,
body[data-theme-family="lcars"] .sidebar-stack > .sidebar-stack-item > .project-item,
body[data-theme-family="lcars"] .project-board-mode-tab,
body[data-theme-family="lcars"] .discussion-tab {
  padding-left: unset;
}

body[data-theme-family="lcars"] .todo-tree-row {
  border-radius: 0;
  background: #000000;
  border-color: #000000;
}

body[data-theme-family="lcars"] .todo-tree-list {
  gap: 0;
}

body[data-theme-family="lcars"] .todo-tree-node {
  margin-bottom: 0;
}

body[data-theme-family="lcars"] .todo-tree-row.is-included {
  background: #000000;
  border-color: #000000;
  box-shadow: none;
}

body[data-theme-family="lcars"] .todo-tree-row.is-active {
  background: #000000;
  border-color: #000000;
  box-shadow: none;
}

body[data-theme-family="lcars"] .group-block,
body[data-theme-family="lcars"] .group-insert-wrap,
body[data-theme-family="lcars"] .panel.group,
body[data-theme-family="lcars"] .group-header,
body[data-theme-family="lcars"] .tree-project-board,
body[data-theme-family="lcars"] .project-board-mode-panel,
body[data-theme-family="lcars"] .panel.group .table {
  background: #000000;
}

body[data-theme-family="lcars"] .group-block,
body[data-theme-family="lcars"] .group-insert-wrap,
body[data-theme-family="lcars"] .panel.group,
body[data-theme-family="lcars"] .panel.group .table,
body[data-theme-family="lcars"] .project-board-mode-panel {
  border-color: #000000;
  box-shadow: none;
}

body[data-theme-family="lcars"] .group-header {
  background: #000000;
  border-color: #000000;
}

body[data-theme-family="lcars"] .todo-date-group {
  background: #000000;
}

body[data-theme-family="lcars"] .todo-date-group:first-child {
  margin-top: 26px;
  padding-top: 14px;
}

body[data-theme-family="lcars"] .inbox-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-theme-family="lcars"] .sidebar .todo-tree-list.tree-select-list {
  margin-top: 14px;
}

body[data-theme-family="lcars"] .tasks-table,
body[data-theme-family="lcars"] .tasks-table tbody,
body[data-theme-family="lcars"] .tasks-table tbody tr,
body[data-theme-family="lcars"] .tasks-table tbody td,
body[data-theme-family="lcars"] .tasks-table thead th {
  background: #000000;
}

body[data-theme-family="lcars"] .panel.group .table,
body[data-theme-family="lcars"] .tasks-table {
  border-left: 4px solid var(--group-color, var(--project-color, var(--accent)));
  border-right: 4px solid var(--group-color, var(--project-color, var(--accent)));
  border-top: 0;
  border-bottom: 0;
  border-radius: 14px 4px 14px 4px;
  box-shadow: none;
}

body[data-theme-family="lcars"] .tasks-table::after {
  display: none;
}

body[data-theme-family="lcars"] .table tbody tr:hover {
  background: #000000;
}

body[data-theme-family="lcars"] .tree-select-button {
  background: #000000;
  border-color: #000000;
}

body[data-theme-family="lcars"] .todo-tree-row[data-tree-project-row] .tree-select-button,
body[data-theme-family="lcars"] .todo-tree-node.is-project > .todo-tree-row > .tree-select-button {
  padding-left: 26px !important;
}

body[data-theme-family="lcars"] .todo-tree-group-row .tree-select-button {
  padding-left: 54px !important;
}

body[data-theme-family="lcars"] .todo-tree-row[data-tree-project-row] .todo-tree-label,
body[data-theme-family="lcars"] .todo-tree-node.is-project > .todo-tree-row > .tree-select-button .todo-tree-label {
  margin-left: 8px;
}

body[data-theme-family="lcars"] .todo-tree-group-row .todo-tree-label {
  margin-left: 36px;
}

body[data-theme-family="lcars"] .project-board-header,
body[data-theme-family="lcars"] .project-board-mode-panel {
  margin-left: 0;
}

body[data-theme-family="lcars"] .project-board-header {
  margin: 14px 0 14px;
  height: 60px;
  padding: 0 20px 0 0;
  border: 0;
  border-radius: 999px;
  background: var(--project-color, var(--accent));
  overflow: visible;
}

body[data-theme-family="lcars"] .project-board-header-inner {
  height: 60px;
  align-items: stretch;
  padding: 0;
}

body[data-theme-family="lcars"] .project-board-header h3 {
  height: 60px;
  display: inline-flex;
  align-items: center;
  margin: 0 0 0 30px;
  padding: 0 14px 0 18px;
  border-radius: 0;
  background: #000000;
}

body[data-theme-family="lcars"] .project-board-header::after,
body[data-theme-family="lcars"] .view-switcher::before {
  display: none;
}

body[data-theme-family="lcars"] .discussion-tabs {
  gap: 0;
  padding: 0 8px;
}

body[data-theme-family="lcars"] .discussion-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #d7b497;
  padding: 12px 14px 9px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-theme-family="lcars"] .discussion-tab::before {
  display: none;
}

body[data-theme-family="lcars"] .discussion-tab:hover,
body[data-theme-family="lcars"] .discussion-tab:focus-visible {
  background: transparent;
  color: #f6c98f;
  border-color: transparent;
}

body[data-theme-family="lcars"] .discussion-tab.is-active {
  background: transparent;
  color: #ffffff;
  border-bottom-color: #f6c98f;
}

body[data-theme-family="lcars"] .view-switcher {
  gap: 16px;
  align-items: flex-end;
  margin-top: -16px;
}

body[data-theme-family="lcars"] .view-switch,
body[data-theme-family="lcars"] .view-search-trigger {
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  color: #f6c98f;
}

body[data-theme-family="lcars"] .view-switch {
  font-family: var(--theme-display-font-family);
  font-size: 28px;
  font-weight: 900;
  font-stretch: ultra-condensed;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: scaleX(0.72);
  transform-origin: left center;
}

body[data-theme-family="lcars"] .view-switch:hover,
body[data-theme-family="lcars"] .view-search-trigger:hover,
body[data-theme-family="lcars"] .view-search.is-open .view-search-trigger {
  background: transparent;
  border: 0;
  color: #f6c98f;
}

body[data-theme-family="lcars"] .view-switch.active {
  position: relative;
  background: transparent;
  border: 0;
  color: #ffffff;
}

body[data-theme-family="lcars"] .view-switch.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 8px;
  background: #f6c98f;
  border-radius: 2px;
}

body[data-theme-family="lcars"] .view-search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  font-size: 24px;
  line-height: 1;
}

body[data-theme-family="lcars"] .notifications-trigger,
body[data-theme-family="lcars"] .messages-trigger {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body[data-theme-family="lcars"] .account-trigger {
  min-height: 42px;
  border-radius: 999px;
  padding-left: 12px;
  padding-right: 12px;
}

body[data-theme-family="lcars"] .admin-nav-link,
body[data-theme-family="lcars"] .admin-nav-link:hover,
body[data-theme-family="lcars"] .admin-nav-link.active {
  color: #000000;
}

body[data-theme-family="lcars"] .project-board-mode-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  position: relative;
  z-index: 3;
  margin: -14px 0 12px 30px;
  padding: 0 0 0 18px;
  align-items: flex-end;
}

body[data-theme-family="lcars"] .project-board-mode-tab {
  display: inline-flex;
  align-items: flex-end;
  min-height: auto;
  line-height: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f6c9a2;
  font-family: var(--theme-display-font-family);
  font-size: 12px;
  font-weight: 900;
  font-stretch: ultra-condensed;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: scaleX(0.82);
  transform-origin: left center;
}

body[data-theme-family="lcars"] .project-board-mode-tab:hover,
body[data-theme-family="lcars"] .project-board-mode-tab:focus-visible {
  background: transparent;
  color: #f6c9a2;
}

body[data-theme-family="lcars"] .project-board-mode-tab.is-active {
  background: transparent;
  color: #f6c9a2;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

body[data-theme-family="lcars"] .tree-project-board {
  position: static;
}

.header-brand {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.header-brand a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  position: relative;
}

.header-brand-logo {
  display: block;
  width: auto;
  height: 34px;
}

.header-brand-logo.is-light {
  display: none;
}

.header-loading-indicator {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  width: 96px;
  height: 4px;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 160ms ease;
}

.header-loading-indicator::before {
  content: "";
  display: block;
  width: calc(100% + 84px);
  height: 100%;
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--muted) 40%, transparent) 0 8px,
      transparent 8px 14px
    );
  background-size: 84px 4px;
  animation: termin-header-loading 1200ms linear infinite;
  animation-play-state: paused;
  opacity: 0.45;
  will-change: transform;
}

body.is-page-loading .header-loading-indicator {
  opacity: 1;
}

body.is-page-loading .header-loading-indicator::before {
  animation-play-state: running;
}

@keyframes termin-page-spinner {
  to {
    transform: rotate(360deg);
  }
}

@keyframes termin-header-loading {
  from {
    transform: translateX(-84px);
  }
  to {
    transform: translateX(0);
  }
}

body[data-theme="light"] .header-brand-logo.is-dark {
  display: none;
}

body[data-theme="light"] .header-brand-logo.is-light {
  display: block;
}

body[data-theme-family="lcars"] .header-brand-logo.is-dark {
  display: none;
}

body[data-theme-family="lcars"] .header-brand-logo.is-light {
  display: block;
}

.header-center {
  min-width: 0;
  display: flex;
  justify-content: flex-start;
  align-items: end;
  overflow: hidden;
}

.header-actions {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 320;
  flex: 0 0 auto;
}

.task-pill {
  flex: 0 0 auto;
  min-width: 108px;
}

.task-pill-segment {
  flex: 1 1 0;
  min-width: 34px;
}

header h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  html,
  body,
  header,
  main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .header-brand-logo {
    height: 28px;
  }

  .header-center .view-switcher {
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-center .view-switcher > a.view-switch {
    min-height: 52px;
    padding: 7px 4px;
    border-radius: 14px;
  }
}

.account-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 160;
}

.notifications-shell {
  position: relative;
  z-index: 160;
}

.notifications-trigger {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.notifications-trigger:hover {
  border-color: rgba(76, 201, 240, 0.35);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.notifications-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notifications-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 320px;
  max-height: min(56vh, 420px);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--menu-bg);
  box-shadow: var(--menu-shadow);
  padding: 10px;
  display: none;
  overflow-y: auto;
  z-index: 340;
  backdrop-filter: blur(10px);
}

.notifications-shell.is-open .notifications-menu {
  display: block;
}

.notifications-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  min-width: 0;
}

.notifications-item:hover {
  background: rgba(76, 201, 240, 0.08);
  border-color: rgba(76, 201, 240, 0.2);
}

.notifications-item.is-pinned {
  border-color: rgba(255, 196, 61, 0.28);
}

.notifications-item + .notifications-item {
  margin-top: 4px;
}

.notifications-open {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

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

.notifications-action {
  padding: 0;
  font-size: 11px;
  white-space: nowrap;
}

.notifications-action.icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
  opacity: 0.78;
}

.notifications-action.icon:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  opacity: 1;
}

body[data-theme="light"] .notifications-action.icon:hover {
  background: rgba(15, 23, 42, 0.06);
}

.notifications-action.icon.is-active {
  color: #f5c451;
  opacity: 1;
}

.notifications-action.icon i {
  font-size: 12px;
  line-height: 1;
}

.notifications-title {
  display: block;
  max-width: 100%;
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.notifications-copy {
  display: block;
  max-width: 100%;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 8px 5px 6px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.account-trigger:hover {
  border-color: rgba(76, 201, 240, 0.35);
  background: rgba(76, 201, 240, 0.08);
  transform: translateY(-1px);
}

body[data-theme="light"] .account-trigger {
  background: color-mix(in srgb, white 92%, var(--panel-alt) 8%);
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
}

body[data-theme="light"] .account-trigger:hover {
  border-color: color-mix(in srgb, var(--accent) 26%, white 74%);
  background: color-mix(in srgb, var(--accent) 10%, white 90%);
}

.account-trigger:focus-visible {
  outline: 2px solid rgba(76, 201, 240, 0.45);
  outline-offset: 2px;
}

.account-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(76, 201, 240, 0.25);
  background: linear-gradient(135deg, rgba(76, 201, 240, 0.18), rgba(255, 255, 255, 0.05));
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}

body[data-theme="light"] .account-avatar {
  border-color: color-mix(in srgb, var(--accent) 26%, white 74%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, white 84%), color-mix(in srgb, var(--panel-alt) 88%, white 12%));
}

.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.account-email-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-email-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--grid);
}

body[data-theme="light"] .account-email-row {
  border-bottom-color: color-mix(in srgb, var(--border) 84%, white 16%);
}

.account-email-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.account-email-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(76, 201, 240, 0.24);
  background: linear-gradient(135deg, rgba(76, 201, 240, 0.18), rgba(255, 255, 255, 0.05));
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  flex: 0 0 auto;
}

body[data-theme="light"] .account-email-avatar {
  border-color: color-mix(in srgb, var(--accent) 24%, white 76%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, white 86%), color-mix(in srgb, var(--panel-alt) 90%, white 10%));
}

.account-email-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.account-email-copy {
  min-width: 0;
}

.account-email-copy div:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-provider-badge {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex: 0 0 auto;
}

body[data-theme="light"] .account-provider-badge {
  border-color: color-mix(in srgb, var(--border) 82%, white 18%);
  background: color-mix(in srgb, white 94%, var(--panel-alt) 6%);
}

.account-provider-badge.github {
  color: #f8fafc;
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.28);
}

body[data-theme="light"] .account-provider-badge.github {
  color: #111827;
  background: color-mix(in srgb, #94a3b8 14%, white 86%);
  border-color: color-mix(in srgb, #64748b 30%, white 70%);
}

.account-provider-badge.google {
  color: #8ab4f8;
  background: rgba(66, 133, 244, 0.14);
  border-color: rgba(66, 133, 244, 0.28);
}

body[data-theme="light"] .account-provider-badge.google {
  color: #2563eb;
  background: color-mix(in srgb, #4285f4 12%, white 88%);
  border-color: color-mix(in srgb, #4285f4 28%, white 72%);
}

.account-provider-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: capitalize;
}

body[data-theme="light"] .account-provider-name {
  color: color-mix(in srgb, var(--ink) 90%, #334155 10%);
}

body[data-theme="light"] .admin-content input[type="text"],
body[data-theme="light"] .admin-content input[type="email"],
body[data-theme="light"] .admin-content input[type="password"],
body[data-theme="light"] .admin-content input[type="search"],
body[data-theme="light"] .admin-content select {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  color: var(--ink);
}

.admin-content select {
  background: color-mix(in srgb, var(--panel) 96%, var(--panel-alt) 4%);
  border: 1px solid var(--border);
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.admin-content select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border) 48%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.account-email-actions {
  flex: 0 0 auto;
}

.account-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.account-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-email {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.1;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-chevron {
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: transform 140ms ease;
}

.account-shell.is-open .account-chevron {
  transform: rotate(180deg);
}

.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 250px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--menu-bg);
  box-shadow: var(--menu-shadow);
  padding: 10px;
  display: none;
  z-index: 340;
  backdrop-filter: blur(10px);
}

.account-shell.is-open .account-menu {
  display: block;
}

.account-menu-header {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.account-menu-name {
  font-size: 13px;
  font-weight: 600;
}

.account-menu-email {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.account-menu-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  font: inherit;
  text-decoration: none;
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.account-menu-link:hover {
  background: rgba(76, 201, 240, 0.08);
  border-color: rgba(76, 201, 240, 0.2);
}

body[data-theme="light"] .account-menu-link:hover {
  background: color-mix(in srgb, var(--accent) 10%, white 90%);
  border-color: color-mix(in srgb, var(--accent) 22%, white 78%);
}

.account-menu-link + .account-menu-link {
  margin-top: 4px;
}

.account-menu-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--muted);
}

.account-menu-label {
  min-width: 0;
  text-align: left;
  white-space: nowrap;
}

.mobile-bottom-nav {
  display: none;
}

.mobile-bottom-nav-slot .view-switcher {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
}

.mobile-bottom-nav-slot .view-switcher > a.view-switch {
  min-width: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 54px;
  padding: 8px 6px;
  border-radius: 16px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mobile-bottom-nav-slot .view-switcher > a.view-switch i {
  font-size: 18px;
  line-height: 1;
}

.mobile-bottom-nav-slot .view-switcher > a.view-switch.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border) 56%);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

main {
  padding: 0;
  margin: 0;
  height: calc(100vh - 55px);
  min-height: 0;
}

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

.layout.no-sidebar {
  grid-template-columns: minmax(0, 1fr);
}

.sidebar {
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-alt) 78%, var(--panel) 22%);
  padding: 16px 14px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.sidebar:not(.todo-tree) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 12px;
}

.sidebar-split-shell {
  display: grid;
  grid-template-rows: minmax(120px, 1fr) 12px minmax(110px, 0.72fr);
  height: 100%;
  min-height: 0;
  opacity: 0;
  transition: opacity 120ms ease;
}

.sidebar-split-shell.is-ready {
  opacity: 1;
}

.sidebar-split-pane {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar.todo-tree .sidebar-split-pane {
  overflow-x: visible;
  width: calc(100% + 28px);
  margin-left: -14px;
  padding: 0 14px;
  box-sizing: border-box;
}

.sidebar-split-pane::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.sidebar-split-divider {
  position: relative;
  cursor: row-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-split-divider::before {
  content: "";
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, var(--border) 76%, transparent);
}

.sidebar-split-divider::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 52%, transparent);
}

.sidebar-split-shell.is-dragging .sidebar-split-divider::after,
.sidebar-split-divider:hover::after {
  background: color-mix(in srgb, var(--accent) 58%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
}

.sidebar.todo-tree {
  padding-bottom: 0;
}

.sidebar.todo-tree .sidebar-split-pane > .todo-sidebar-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.layout.sidebar-collapsed {
  grid-template-columns: 24px 1fr;
}

.sidebar.todo-tree.is-collapsed {
  padding: 12px 0;
}

.sidebar.todo-tree.is-collapsed .todo-tree-list {
  display: none;
}

.sidebar.todo-tree.is-collapsed .sidebar-heading-row h3 {
  display: none;
}

.sidebar.todo-tree.is-collapsed .sidebar-heading-row {
  display: none;
}

.sidebar-collapse-handle {
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  width: 12px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease, background 160ms ease, border-color 160ms ease;
  z-index: 2;
}

.sidebar.todo-tree:hover .sidebar-collapse-handle,
.sidebar.todo-tree.is-collapsed .sidebar-collapse-handle {
  opacity: 1;
}

.sidebar-collapse-handle::before {
  content: "";
  position: absolute;
  inset: 8px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

.sidebar.todo-tree.is-collapsed .sidebar-collapse-handle {
  right: -8px;
}

.sidebar.todo-tree {
  position: relative;
}

.todo-tree-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 0;
  margin-top: 10px;
}

.todo-sidebar-section {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.todo-sidebar-section.is-top {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}

.todo-sidebar-subhead.is-top {
  margin-top: 6px;
}

.todo-filter-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 22px;
  width: 100%;
  cursor: pointer;
}

.todo-tree-completed-options {
  gap: 0;
}

.todo-sidebar-subhead h3 {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.todo-assignee-actions {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
}

.todo-assignee-actions .btn {
  padding: 4px 10px;
  font-size: 11px;
}

.todo-assignee-actions .btn.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 68%, var(--border) 32%);
  color: var(--ink);
}

body[data-theme="light"] .todo-assignee-actions .btn.is-active {
  background: color-mix(in srgb, var(--accent) 14%, white 86%);
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border) 56%);
  color: var(--ink);
}

.todo-assignee-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.todo-assignee-dropdown {
  position: relative;
  margin-top: 10px;
}

.todo-assignee-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 92%, var(--panel-alt) 8%);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.todo-assignee-trigger:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border) 60%);
}

.todo-assignee-caret {
  color: var(--muted);
  font-size: 11px;
}

.todo-assignee-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--ink-soft) 12%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 97%, var(--panel-alt) 3%);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 16%, transparent);
  backdrop-filter: blur(10px);
}

body[data-theme="light"] .todo-assignee-trigger {
  background: color-mix(in srgb, white 92%, var(--panel) 8%);
}

body[data-theme="light"] .todo-assignee-menu {
  background: color-mix(in srgb, white 96%, var(--panel) 4%);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.todo-assignee-row {
  display: grid;
  grid-template-columns: 14px 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 22px;
  width: 100%;
  cursor: pointer;
}

.todo-assignee-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--panel-alt) 84%, var(--panel) 16%);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}

.todo-assignee-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.filters-toggle {
  display: none;
}

.sidebar.todo-tree.is-collapsed [data-filters-panel] {
  display: none;
}

.todo-tree-node {
  padding-left: 0;
}

.todo-tree-row {
  --tree-row-indent: 0px;
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 20px;
  width: calc(100% + 28px + var(--tree-row-indent));
  margin-left: 0;
  position: relative;
  left: calc(-14px - var(--tree-row-indent));
  padding: 0 14px 0 calc(14px + var(--tree-row-indent));
  box-sizing: border-box;
  border: none;
  border-radius: 0;
}

.todo-tree-label-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto 14px;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  margin-left: 0;
}

.todo-tree-only-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, color 120ms ease;
}

.todo-tree-row:hover .todo-tree-only-btn,
.todo-tree-row:focus-within .todo-tree-only-btn {
  opacity: 0.78;
  pointer-events: auto;
}

.todo-tree-only-btn:hover,
.todo-tree-only-btn:focus-visible {
  color: var(--ink);
  opacity: 1;
  outline: none;
}

.todo-sidebar-subhead {
  position: relative;
}

.todo-tree-heading-action {
  margin-left: auto;
}

.todo-sidebar-subhead .todo-tree-heading-action {
  opacity: 0;
  pointer-events: none;
}

.todo-sidebar-subhead:hover .todo-tree-heading-action,
.todo-sidebar-subhead:focus-within .todo-tree-heading-action {
  opacity: 0.78;
  pointer-events: auto;
}

.todo-tree-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}

.todo-tree-row[data-tree-project-row] .todo-tree-label {
  font-weight: 500;
}

.tree-project-complete-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: #22c55e;
  font-size: 13px;
  line-height: 1;
}

.todo-tree-row.is-active .tree-project-complete-icon {
  color: #fff;
  background: transparent;
  border-radius: 0;
}

.tree-select-button {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: stretch;
  width: 100%;
  margin: 0 -14px 0 calc(-14px - var(--tree-row-indent, 0px));
  padding: 2px 14px 2px calc(14px + var(--tree-row-indent, 0px));
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.todo-tree-row[data-tree-division-row] .tree-select-button {
  padding-left: 14px;
}

.todo-tree-row[data-tree-project-row] > .shared-with-me-icon {
  margin-left: auto;
}

.todo-tree-row[data-tree-project-row] .todo-tree-toggle,
.todo-tree-row[data-tree-division-row] .todo-tree-toggle {
  margin-left: 8px;
}

.tree-select-button:hover {
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
}

.tree-select-button.is-active {
  background: transparent;
  border-color: transparent;
}

.tree-select-button.is-included {
  background: transparent;
  border-color: transparent;
}

.todo-tree-row.is-active {
  background: var(--division-color, var(--accent));
  border-color: transparent;
  box-shadow: inset 3px 0 0 color-mix(in srgb, black 18%, var(--division-color, var(--accent)) 82%);
}

.todo-tree-row.is-included {
  background: color-mix(in srgb, var(--division-color, var(--accent)) 12%, var(--panel) 88%);
  border-color: transparent;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--division-color, var(--accent)) 42%, var(--border) 58%);
}

.todo-tree-row.is-active .todo-tree-label {
  font-weight: 700;
  color: #fff !important;
}

.todo-tree-row[data-tree-project-row].is-active .todo-tree-label,
.todo-tree-row[data-tree-project-row].is-included .todo-tree-label {
  font-weight: 600;
}

.todo-tree-row.is-active .tree-select-button,
.todo-tree-row.is-active .tree-select-button .todo-tree-label,
.todo-tree-row.is-active .tree-select-button .shared-with-me-icon,
.todo-tree-row.is-active .shared-with-me-icon,
.todo-tree-row.is-active .todo-tree-toggle {
  color: #fff;
}

.todo-tree-row.is-included .todo-tree-label {
  color: color-mix(in srgb, var(--ink) 90%, var(--division-color, var(--accent)) 10%);
}

.todo-tree-group-row.is-active .todo-tree-label,
.todo-tree-group-row.is-included .todo-tree-label {
  font-weight: 500;
}

.todo-tree-row.tree-drag-over {
  background: color-mix(in srgb, var(--division-color, var(--accent)) 16%, transparent);
  outline: 1px solid color-mix(in srgb, var(--division-color, var(--accent)) 55%, transparent);
  outline-offset: -1px;
}

.todo-tree-row.tree-dragging {
  opacity: 0.55;
}

body[data-theme="light"] .tree-select-button:hover {
  background: color-mix(in srgb, white 84%, var(--panel) 16%);
}

body[data-theme="light"] .tree-select-button.is-active {
  background: transparent;
}

body[data-theme="light"] .todo-tree-row.is-active {
  background: var(--division-color, var(--accent));
  box-shadow: inset 3px 0 0 color-mix(in srgb, black 18%, var(--division-color, var(--accent)) 82%);
}

body[data-theme="light"] .todo-tree-row.is-included {
  background: color-mix(in srgb, white 82%, var(--division-color, var(--accent)) 18%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--division-color, var(--accent)) 54%, #ffffff 46%);
}

body[data-theme="light"] .todo-tree-row.is-active .todo-tree-label {
  color: #fff !important;
}

body[data-theme="light"] .todo-tree-row.is-active .tree-select-button,
body[data-theme="light"] .todo-tree-row.is-active .tree-select-button .todo-tree-label,
body[data-theme="light"] .todo-tree-row.is-active .tree-select-button .shared-with-me-icon,
body[data-theme="light"] .todo-tree-row.is-active .todo-tree-toggle {
  color: #fff;
}

body[data-theme="light"] .todo-tree-row.is-included .todo-tree-label {
  color: color-mix(in srgb, #243447 82%, var(--division-color, var(--accent)) 18%);
}

.tree-board {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tree-board[data-tree-ready="0"] {
  visibility: hidden;
}

.tree-project-board[hidden] {
  display: none !important;
}

.shared-with-me-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  color: var(--muted);
  opacity: 0.78;
  font-size: 11px;
  vertical-align: middle;
}

body[data-theme="light"] .shared-with-me-icon {
  color: color-mix(in srgb, var(--muted) 88%, #243447 12%);
}

.shared-with-me-icon.is-shared-in {
  padding: 0;
}

.shared-with-me-icon.is-sharing-out {
  padding: 0;
}

body[data-theme="light"] .shared-with-me-icon.is-sharing-out {
  color: color-mix(in srgb, var(--muted) 88%, #243447 12%);
}

.todo-tree-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  border: 1px solid color-mix(in srgb, var(--division-color, var(--border)) 65%, var(--border));
  border-radius: 3px;
  background: transparent;
  margin: 0;
  display: inline-block;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1;
  padding: 0;
  transform: translateY(0);
}

.sidebar.todo-tree .todo-tree-checkbox {
  appearance: none;
  -webkit-appearance: none;
}

.todo-tree-checkbox:checked {
  background-color: var(--division-color, var(--accent));
  border-color: var(--division-color, var(--accent));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path fill='white' d='M5.5 10.8L2.5 7.8l1.1-1.1 1.9 1.9 4.9-4.9 1.1 1.1z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.todo-tree-checkbox:indeterminate {
  background-color: color-mix(in srgb, var(--division-color, var(--accent)) 55%, transparent);
  border-color: var(--division-color, var(--accent));
  background-image: none;
  position: relative;
}

.todo-tree-checkbox:indeterminate::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 2px;
  background: #fff;
  transform: translateY(-50%);
}

.todo-tree-toggle {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 1px 2px;
  transform: translateY(-1px);
  justify-self: end;
}

.todo-tree-toggle.is-hidden {
  visibility: hidden;
}

.todo-tree-node.is-collapsed > .todo-tree-children {
  display: none;
}

.todo-tree-children {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding-left: 12px;
}

.todo-tree-node.is-project {
  margin-top: 0;
}

.todo-tree-group-row .todo-tree-label {
  font-weight: 500;
}

.dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] [data-todo-division] ~ .todo-tree-label,
.dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] [data-todo-project] ~ .todo-tree-label,
.dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] [data-todo-group] ~ .todo-tree-label {
  cursor: pointer;
  text-decoration: none;
  display: inline;
}

.dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] [data-todo-division] ~ .todo-tree-label:hover,
.dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] [data-todo-project] ~ .todo-tree-label:hover,
.dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] [data-todo-group] ~ .todo-tree-label:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  text-decoration-color: var(--division-color, currentColor);
}

.dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-tree-node.is-project > .todo-tree-row .todo-tree-label {
  font-weight: 400;
}

.todo-tree-node.is-project {
  padding-left: 0;
}

.todo-tree-node.is-project > .todo-tree-row {
  --tree-row-indent: 12px;
}

.todo-tree-node[data-tree-direct-project] > .todo-tree-row {
  --tree-row-indent: 0px;
  min-height: 24px;
}

.todo-tree-node[data-tree-direct-project] .tree-select-button {
  padding-top: 3px;
  padding-bottom: 3px;
}

.avatar-stack.is-tree-direct {
  margin-left: auto;
  min-width: 20px;
  padding-right: 0;
}

.avatar-stack.is-tree-direct .avatar-chip {
  width: 18px;
  height: 18px;
  font-size: 10px;
}

.todo-tree-group-row {
  --tree-row-indent: 24px;
}

.todo-tree-group-row .todo-tree-label-row {
  grid-template-columns: 14px 1fr;
}

.todo-tree-empty {
  font-size: 11px;
  color: var(--muted);
  padding: 2px 0 2px 18px;
}

.content {
  padding: 16px 18px 32px;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: auto;
}

.content.project-content {
  padding-top: 0;
}

.action-toast-layer {
  position: fixed;
  left: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 12px;
  z-index: 560;
  pointer-events: none;
}

.action-toast {
  min-width: 280px;
  max-width: min(420px, calc(100vw - 48px));
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border) 76%);
  background: color-mix(in srgb, var(--panel) 94%, black 6%);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  color: var(--ink);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
  backdrop-filter: blur(14px);
  animation: action-toast-enter 180ms ease;
}

.action-toast-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.action-toast-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.action-toast-body {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.action-toast-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.action-toast-button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.action-toast-button:hover {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}

.action-toast-button.is-subtle {
  background: transparent;
  color: var(--muted);
}

.action-toast-button.is-subtle:hover {
  background: color-mix(in srgb, var(--panel-alt) 72%, transparent);
  color: var(--ink);
}

body[data-theme="light"] .action-toast {
  background: color-mix(in srgb, white 95%, var(--panel) 5%);
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border) 80%);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
}

@keyframes action-toast-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard-notice {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #f87171 42%, var(--border) 58%);
  border-radius: 10px;
  background: color-mix(in srgb, #f87171 10%, var(--panel) 90%);
  color: var(--ink);
  font-size: 13px;
}

body[data-theme="light"] .dashboard-notice {
  background: color-mix(in srgb, #fee2e2 72%, white 28%);
  border-color: color-mix(in srgb, #ef4444 38%, var(--border) 62%);
  color: #7f1d1d;
}

body[data-theme="light"] .content {
  overflow-x: clip;
}

.inbox-view {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: 14px;
}

.inbox-panel {
  padding: 0;
  overflow: visible;
}

body[data-theme-family="lcars"] .inbox-panel {
  overflow: visible;
}

.inbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.inbox-header-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.inbox-filters {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.inbox-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.inbox-filter select {
  max-width: 190px;
  min-width: 128px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-alt) 86%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 0 28px 0 9px;
}

.inbox-actor-dropdown {
  position: relative;
  min-width: 170px;
}

.inbox-actor-trigger {
  width: 100%;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-alt) 86%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 0 9px;
  cursor: pointer;
}

.inbox-actor-caret {
  color: var(--muted);
  font-size: 10px;
}

.inbox-actor-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 2600;
  width: min(280px, calc(100vw - 28px));
  max-height: 340px;
  overflow: auto;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}

.inbox-actor-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.inbox-actor-actions .btn {
  flex: 1 1 0;
  min-height: 28px;
  padding: 5px 8px;
  font-size: 11px;
}

.inbox-actor-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inbox-actor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 4px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.inbox-actor-row:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.inbox-actor-row input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
}

.inbox-actor-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.inbox-list {
  display: flex;
  flex-direction: column;
}

.inbox-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 16px 20px;
  cursor: pointer;
}

.inbox-item:last-child {
  border-bottom: 0;
}

.inbox-item:hover,
.inbox-item:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.03);
}

.inbox-item.is-unread {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.inbox-item-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}

.inbox-item-icon img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}

.inbox-item-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
}

.inbox-item-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.inbox-item-title {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
}

.inbox-item-time {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

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

.inbox-item-preview {
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 90%, var(--muted) 10%);
}

.inbox-item-preview i {
  margin-right: 8px;
  color: var(--muted);
}

.inbox-item-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 999px;
  background: var(--accent);
  align-self: center;
  opacity: 0;
}

.inbox-item.is-unread .inbox-item-dot {
  opacity: 1;
}

.inbox-empty {
  padding: 28px 20px;
  color: var(--muted);
  font-size: 13px;
}

body[data-theme="light"] .inbox-item:hover,
body[data-theme="light"] .inbox-item:focus-visible {
  background: rgba(37, 99, 235, 0.06);
}

body[data-theme="light"] .inbox-item.is-unread {
  background: color-mix(in srgb, var(--accent) 10%, white 90%);
}

body[data-theme="light"] .inbox-item-icon {
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
}

.auth-page {
  min-height: calc(100vh - 55px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 48px;
}

.auth-card {
  width: min(100%, 440px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    rgba(16, 20, 27, 0.94);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.34);
  padding: 28px;
}

.auth-card-header {
  margin-bottom: 18px;
}

.auth-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.auth-card h2 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.05;
}

.auth-error {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.28);
  background: rgba(127, 29, 29, 0.22);
  color: #fecaca;
  font-size: 13px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

.auth-provider-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-provider-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.auth-provider-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.05);
}

.auth-provider-btn.google:hover {
  border-color: rgba(66, 133, 244, 0.28);
}

.auth-provider-btn.github:hover {
  border-color: rgba(148, 163, 184, 0.28);
}

.auth-provider-icon {
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: 0 0 auto;
}

.auth-provider-btn.google .auth-provider-icon {
  color: #8ab4f8;
}

.auth-provider-btn.github .auth-provider-icon {
  color: #f8fafc;
}

.admin-layout {
  grid-template-columns: 220px 1fr;
}

.admin-sidebar {
  padding-top: 18px;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.admin-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
}

.admin-nav-link:hover {
  color: var(--ink);
  background: rgba(76, 201, 240, 0.08);
  border-color: rgba(76, 201, 240, 0.16);
}

.admin-nav-link.active {
  color: var(--ink);
  background: rgba(76, 201, 240, 0.12);
  border-color: rgba(76, 201, 240, 0.22);
}

.admin-user-list,
.admin-collaborator-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-user-card,
.admin-collaborator-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 14px;
}

.admin-collaborator-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 14px;
}

.admin-mail-entry {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.admin-mail-entry summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

.admin-mail-entry summary::-webkit-details-marker {
  display: none;
}

.admin-mail-entry[open] summary {
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}

.admin-mail-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-mail-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-mail-section-title {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-mail-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
}

.admin-mail-html {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.admin-user-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-user-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-user-copy {
  min-width: 0;
}

.admin-user-copy > div:first-child {
  font-weight: 600;
}

.admin-user-sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-user-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-user-section-title {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-provider-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 12px;
  text-transform: capitalize;
}

.admin-provider-pill.github {
  border-color: rgba(148, 163, 184, 0.24);
}

.admin-provider-pill.google {
  border-color: rgba(66, 133, 244, 0.24);
}

.admin-tag-primary {
  border-color: rgba(110, 231, 183, 0.28);
  color: var(--success);
}

.view-switcher {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: -1px;
  min-width: 0;
  max-width: 100%;
}

.mobile-sidebar-trigger {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.mobile-sidebar-trigger:hover {
  color: var(--accent);
}

.mobile-sidebar-backdrop {
  display: none;
}

body.mobile-sidebar-open {
  overflow: hidden;
}

.view-search {
  position: relative;
}

.view-switch {
  padding: 16px 18px 12px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

@media (max-width: 1180px) and (min-width: 901px) {
  header {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) auto;
    gap: 10px;
    padding: 0 14px;
  }

  .header-center {
    min-width: 0;
  }

  .view-switcher {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .view-switcher::-webkit-scrollbar {
    display: none;
  }

  .view-switch {
    padding-left: 12px;
    padding-right: 12px;
    gap: 7px;
  }

  .header-actions {
    gap: 8px;
  }
}

@media (max-width: 1060px) and (min-width: 901px) {
  .view-switch {
    padding-left: 10px;
    padding-right: 10px;
  }

  .view-switch.view-switch-icon span {
    display: none;
  }

  .view-switch.view-switch-icon {
    min-width: 44px;
    justify-content: center;
  }
}

.view-switch:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.03);
}

.view-switch.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.view-search-trigger {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.view-search-trigger:hover {
  border-color: rgba(76, 201, 240, 0.35);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.view-search.is-open .view-search-trigger {
  border-color: rgba(76, 201, 240, 0.35);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.view-search-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(420px, 72vw);
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 16, 24, 0.96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(18px);
  z-index: 60;
}

.view-search.is-open .view-search-menu {
  display: flex;
}

.view-search-input {
  width: 100%;
}

.view-search-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: min(56vh, 420px);
  overflow-y: auto;
}

.view-search-empty {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
}

.view-search-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.view-search-result:hover,
.view-search-result:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.06);
}

.view-search-result-icon {
  width: 18px;
  flex: 0 0 18px;
  color: var(--muted);
  text-align: center;
  padding-top: 2px;
}

.view-search-result-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.view-search-result-title {
  font-size: 14px;
  font-weight: 700;
}

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

.view-search-division-tag {
  color: var(--view-search-project-color, var(--accent));
  font-weight: 700;
}

.view-search-meta-sep {
  opacity: 0.6;
}

body[data-theme="light"] .view-search-menu {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

body[data-theme="light"] .view-search-input {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  color: var(--ink);
}

body[data-theme="light"] .view-search-result:hover,
body[data-theme="light"] .view-search-result:focus-visible {
  background: rgba(37, 99, 235, 0.08);
}

.todo-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comment-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  font-size: 11px;
  cursor: pointer;
}

.task-pill {
  display: inline-flex;
  align-items: stretch;
  margin-left: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.task-pill-segment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
}

.task-pill-segment + .task-pill-segment {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.badge-group-avatar {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(12, 16, 23, 0.8);
  margin-left: -5px;
  position: relative;
}

.badge-group-avatar:first-child {
  margin-left: 0;
}

.badge-group-avatar .badge-initial {
  font-size: 8px;
}

.badge-group-avatar.has-photo .badge-initial {
  display: none;
}

body[data-theme="light"] .badge-group-avatar {
  border-color: rgba(255, 255, 255, 0.95);
  background: rgba(15, 23, 42, 0.08);
}

.task-pill-segment:hover,
.comment-button.has-unread {
  color: var(--ink);
  background: rgba(76, 201, 240, 0.1);
}

body[data-theme="light"] .task-pill {
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  background: color-mix(in srgb, white 94%, var(--panel-alt) 6%);
}

body[data-theme="light"] .task-pill-segment {
  color: color-mix(in srgb, var(--muted) 92%, #475569 8%);
}

body[data-theme="light"] .task-pill-segment + .task-pill-segment {
  border-left-color: color-mix(in srgb, var(--border) 88%, white 12%);
}

body[data-theme="light"] .task-pill-segment:hover,
body[data-theme="light"] .comment-button.has-unread {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 10%, white 90%);
}

.discussion-drawer {
  position: fixed;
  top: 55px;
  right: 0;
  bottom: 0;
  width: min(420px, calc(100vw - 24px));
  transform: translateX(100%);
  transition: transform 180ms ease;
  border-left: 1px solid var(--border);
  background: rgba(12, 16, 23, 0.98);
  z-index: 120;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

body[data-theme="light"] .discussion-drawer {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
  box-shadow: none;
}

.discussion-drawer.open {
  transform: translateX(0);
  box-shadow: -16px 0 30px rgba(0, 0, 0, 0.24);
}

body[data-theme="light"] .discussion-drawer.open {
  box-shadow: -16px 0 30px rgba(15, 23, 42, 0.12);
}

.discussion-header {
  padding: 16px 18px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.discussion-title {
  font-size: 15px;
  font-weight: 700;
}

.discussion-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.discussion-lock-toggle {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 88%, var(--ink) 12%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}

.discussion-drawer[data-entity-type="project"] .discussion-lock-toggle,
.discussion-drawer[data-entity-type="group"] .discussion-lock-toggle {
  display: none !important;
}

.discussion-lock-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
}

.discussion-lock-toggle.is-locked {
  color: #ef4444;
}

.task-lock-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, #ef4444 14%, transparent);
  color: #ef4444;
  font-size: 10px;
  flex: 0 0 auto;
}

body[data-theme="light"] .discussion-lock-toggle:hover {
  background: rgba(15, 23, 42, 0.05);
}

.task-row[data-task-locked="1"] .editable[data-field="title"],
.todo-item[data-task-locked="1"] .editable[data-field="title"] {
  cursor: default;
}

.task-row[data-task-locked="1"] [data-task-status-host],
.todo-item[data-task-locked="1"] [data-task-status-host],
.task-row[data-task-locked="1"] .status-editable,
.todo-item[data-task-locked="1"] .status-editable {
  cursor: default;
}

.task-row[data-task-locked="1"] .due-cell,
.todo-item[data-task-locked="1"] .due-cell {
  cursor: default;
}

.task-row[data-task-locked="1"] .assign-add-btn,
.task-row[data-task-locked="1"] [data-remove-assignment],
.task-row[data-task-locked="1"] [data-task-multi-status-trigger],
.todo-item[data-task-locked="1"] .assign-add-btn,
.todo-item[data-task-locked="1"] [data-remove-assignment],
.todo-item[data-task-locked="1"] [data-task-multi-status-trigger],
.project-gantt-track[data-task-locked="1"] [data-gantt-handle] {
  opacity: 0.4;
}

.discussion-subtitle {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.discussion-subtitle-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.discussion-subtitle-link:hover {
  text-decoration: underline;
}

.discussion-subtitle-sep {
  opacity: 0.7;
  margin: 0 4px;
}

.discussion-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.discussion-presence {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  padding: 5px 18px 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(6, 10, 18, 0.42);
  backdrop-filter: blur(10px);
}

.discussion-history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  user-select: none;
}

.discussion-history-toggle input {
  margin: 0;
}

.discussion-presence-stack {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.discussion-presence .avatar-chip {
  width: 20px;
  height: 20px;
  font-size: 9px;
  border-width: 1px;
  border-radius: 999px;
  overflow: hidden;
}

.discussion-presence .avatar-chip.is-online {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 80%, transparent);
  border-color: color-mix(in srgb, var(--success) 90%, transparent);
}

.discussion-presence .avatar-chip + .avatar-chip {
  margin-left: -6px;
}

.discussion-presence .avatar-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-theme="light"] .discussion-presence {
  border-top-color: rgba(15, 23, 42, 0.05);
  border-bottom-color: rgba(15, 23, 42, 0.08);
  background: rgba(226, 232, 240, 0.42);
}

.discussion-list {
  flex: 1 1 auto;
  overflow: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.discussion-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 10px;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.discussion-tab {
  display: inline-flex;
  align-items: center;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 0;
  padding: 12px 14px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.discussion-tab:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.03);
}

.discussion-tab.is-active {
  color: var(--ink);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
  border-bottom-color: var(--accent);
}

.discussion-pane {
  display: none;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
}

.discussion-pane.is-active {
  display: flex;
}

.discussion-pane.is-active[data-drawer-pane="messages"] {
  overflow: hidden;
}

.discussion-links-list {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.discussion-links-actions {
  padding: 14px 18px 0;
  display: flex;
  justify-content: flex-start;
}

.discussion-link-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.028);
}

.discussion-link-row.is-new {
  grid-template-columns: 22px minmax(0, 1fr);
  border-style: dashed;
  opacity: 0.88;
}

.discussion-link-favicon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.discussion-link-favicon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 4px;
}

.discussion-link-anchor {
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.discussion-link-anchor:hover {
  text-decoration: underline;
}

.discussion-link-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.discussion-link-host {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.discussion-link-input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  outline: none;
}

.discussion-link-remove {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
}

.discussion-link-remove:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
}

.discussion-settings {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.discussion-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.discussion-setting-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.discussion-setting-group-header {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.discussion-setting-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.discussion-setting-field.is-inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.discussion-setting-label {
  flex: 0 0 110px;
}

.discussion-setting-field input {
  width: 100%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.discussion-setting-field.is-inline input {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
}

.discussion-setting-due-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 320px);
  flex: 1 1 auto;
}

.discussion-setting-due-wrap select,
.discussion-setting-field select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 96%, var(--panel-alt) 4%);
  color: var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body[data-theme="light"] .discussion-setting-field input,
body[data-theme="light"] .discussion-setting-due-wrap select,
body[data-theme="light"] .discussion-setting-field select,
body[data-theme="light"] .discussion-description-format select,
body[data-theme="light"] .discussion-description textarea,
body[data-theme="light"] .discussion-link-input,
body[data-theme="light"] .discussion-compose textarea {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  color: var(--ink);
  caret-color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 92%, transparent);
}

body[data-theme="light"] .discussion-setting-field input::placeholder,
body[data-theme="light"] .discussion-description textarea::placeholder,
body[data-theme="light"] .discussion-link-input::placeholder,
body[data-theme="light"] .discussion-compose textarea::placeholder {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
}

.discussion-setting-due-wrap select {
  flex: 0 0 120px;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.discussion-setting-due-wrap input {
  flex: 1 1 auto;
}

.discussion-setting-relative-due {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 320px);
  flex: 1 1 auto;
  min-width: 0;
}

.discussion-setting-relative-due > input {
  flex: 1 1 auto;
  min-width: 0;
}

.discussion-setting-relative-offset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.discussion-setting-relative-offset input {
  width: 72px !important;
  flex: 0 0 72px !important;
  text-align: center;
}

.discussion-setting-relative-start-offset {
  width: min(100%, 320px);
}

.discussion-setting-relative-start-offset span {
  flex: 1 1 auto;
  min-width: 0;
}

.due-relative-result {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 92%, var(--panel-alt) 8%);
  color: var(--ink);
  padding: 7px 9px;
  text-align: left;
  cursor: pointer;
}

.due-relative-result:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
}

.due-relative-result-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 750;
}

.due-relative-result-meta,
.due-relative-result-note {
  color: var(--muted);
  font-size: 10px;
}

.due-relative-result-note {
  padding: 2px 4px;
}

.discussion-setting-due-wrap select:focus-visible,
.discussion-setting-field select:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border) 48%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.discussion-setting-field--description {
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  margin-bottom: 4px;
}

.discussion-setting-field--description .discussion-description {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#discussion-drawer[data-is-direct="1"] .discussion-setting-field[data-settings-title-field] {
  display: none;
}

.discussion-description-format {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  gap: 12px;
}

.discussion-description-format select {
  flex: 0 0 180px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  padding: 8px 10px;
  font: inherit;
  appearance: none;
}

.discussion-description textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box;
  min-height: 120px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--ink) 20%);
  border-radius: 10px;
  padding: 14px 16px;
  font: inherit;
  background: color-mix(in srgb, var(--panel-alt) 80%, var(--panel) 20%);
  color: var(--ink);
  resize: vertical;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.discussion-description textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.discussion-description-wrapper {
  position: relative;
}

.discussion-description-display {
  min-height: 40px;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  transition: background 140ms ease;
}

.discussion-description-display:focus {
  outline: none;
}
.discussion-description-display:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel) 90%);
}

.discussion-description-rendered {
  color: var(--ink);
  line-height: 1.4;
  text-transform: none;
  font-family: inherit;
}

.discussion-description-rendered h1,
.discussion-description-rendered h2,
.discussion-description-rendered h3 {
  margin-top: 1rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
  line-height: 1.3;
}

.discussion-description-rendered h1 {
  font-size: 1.3rem;
}

.discussion-description-rendered h2 {
  font-size: 1.15rem;
  color: color-mix(in srgb, var(--ink) 75%, var(--muted) 25%);
}

.discussion-description-rendered h3 {
  font-size: 1rem;
  color: var(--muted);
}

.discussion-description-rendered p {
  margin: 0.25rem 0;
}

.discussion-description-rendered ul,
.discussion-description-rendered ol {
  margin: 0.25rem 0 0.25rem 1.2rem;
}

.discussion-comment-body ul,
.discussion-comment-body ol {
  margin: 0;
  padding-left: 1.2rem;
}

.discussion-comment-body ul li,
.discussion-comment-body ol li {
  margin: 0;
  padding: 0;
  line-height: 1.35;
}

.discussion-description-empty {
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
  text-transform: none;
  font-family: inherit;
}

.discussion-description-editor {
  display: none;
  margin-top: 10px;
  border: 2px dashed color-mix(in srgb, var(--accent) 60%, var(--border) 40%);
  border-radius: 10px;
  padding: 12px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel) 90%);
  border-left-width: 6px;
  border-left-color: color-mix(in srgb, var(--accent) 88%, var(--border) 12%);
}

.discussion-description-wrapper.is-editing .discussion-description-display {
  display: none;
}

.discussion-description-wrapper.is-editing .discussion-description-editor {
  display: block;
}

.discussion-setting-status {
  width: 100%;
  min-height: 42px;
  height: 42px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  border-radius: 10px;
  padding: 0 12px;
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.discussion-setting-status.is-disabled,
.discussion-setting-status:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.discussion-setting-field.is-inline .discussion-setting-status {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
}

.discussion-setting-status-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.discussion-setting-status-readonly {
  justify-content: flex-start;
  cursor: default;
  pointer-events: none;
}

.prereq-status-readonly {
  cursor: default;
}

.discussion-setting-mode-picker {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 42px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto;
}

.discussion-setting-mode-button {
  width: 40px;
  height: 42px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.discussion-setting-mode-button:last-child {
  border-right: 0;
}

.discussion-setting-mode-button:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
}

.discussion-setting-mode-button.is-active {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel) 84%);
}

.discussion-setting-mode-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: -2px;
}

.discussion-setting-readonly {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.discussion-setting-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.discussion-setting-identity-avatar {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  position: relative;
  font-size: 11px;
  font-weight: 700;
}

.discussion-setting-identity-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.discussion-setting-identity-avatar.has-photo .discussion-setting-identity-initial {
  display: none;
}

.discussion-setting-identity-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discussion-setting-status-label {
  text-transform: none;
  letter-spacing: normal;
}

.discussion-setting-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
}

.discussion-setting-toggle input {
  margin: 0;
  width: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 4px;
  flex: 0 0 auto;
}

.discussion-setting-toggle-row {
  display: flex;
  align-items: center;
  padding-left: 124px;
  margin-top: -2px;
}

.discussion-settings-assignments {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.discussion-settings-assignments:empty {
  display: none;
}

.discussion-assignment-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) 140px;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  padding: 8px 10px;
}

.discussion-assignment-row:first-child {
  border-top: 0;
}

.discussion-assignment-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.discussion-assignment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  margin: 0;
}

.discussion-assignment-avatar.has-photo {
  background: transparent;
  border-color: rgba(76, 201, 240, 0.45);
  box-shadow: 0 0 0 1px rgba(76, 201, 240, 0.16);
}

.discussion-assignment-avatar .badge-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.discussion-assignment-avatar .badge-initial,
.discussion-assignment-avatar .badge-x {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 1;
  transform: none;
}

.discussion-assignment-avatar .badge-x {
  opacity: 0;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
}

.discussion-assignment-avatar:hover .badge-x {
  opacity: 1;
}

.discussion-assignment-avatar:hover .badge-initial,
.discussion-assignment-avatar:hover .badge-photo {
  opacity: 0;
}

.discussion-assignment-meta {
  min-width: 0;
}

.discussion-assignment-name {
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discussion-assignment-email {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discussion-assignment-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.discussion-assignment-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  text-transform: capitalize;
}

.discussion-assignment-pill.is-account {
  border-color: rgba(76, 201, 240, 0.35);
  color: var(--ink);
}

.discussion-settings-assign-add input {
  width: 100%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
}

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

.discussion-settings-danger {
  padding-top: 6px;
}

body[data-theme="light"] .discussion-setting-field input,
body[data-theme="light"] .discussion-setting-group-body > input[type="text"],
body[data-theme="light"] .discussion-settings-assign-add input,
body[data-theme="light"] .discussion-link-input,
body[data-theme="light"] .discussion-description textarea,
body[data-theme="light"] .discussion-compose textarea {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  color: var(--ink);
  caret-color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

body[data-theme="light"] .discussion-setting-due-wrap select,
body[data-theme="light"] .discussion-setting-field select,
body[data-theme="light"] .discussion-description-format select {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  color: var(--ink);
  caret-color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

body[data-theme="light"] .discussion-setting-field input::placeholder,
body[data-theme="light"] .discussion-setting-group-body > input[type="text"]::placeholder,
body[data-theme="light"] .discussion-settings-assign-add input::placeholder,
body[data-theme="light"] .discussion-link-input::placeholder,
body[data-theme="light"] .discussion-description textarea::placeholder,
body[data-theme="light"] .discussion-compose textarea::placeholder {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
}

body[data-theme="light"] .discussion-setting-field input:-webkit-autofill,
body[data-theme="light"] .discussion-setting-group-body > input[type="text"]:-webkit-autofill,
body[data-theme="light"] .discussion-settings-assign-add input:-webkit-autofill,
body[data-theme="light"] .discussion-link-input:-webkit-autofill,
body[data-theme="light"] .discussion-description textarea:-webkit-autofill,
body[data-theme="light"] .discussion-compose textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: inset 0 0 0 1000px color-mix(in srgb, white 96%, var(--panel-alt) 4%);
  transition: background-color 99999s ease-out 0s;
}

body[data-theme="light"] .discussion-setting-status,
body[data-theme="light"] .discussion-setting-readonly,
body[data-theme="light"] .discussion-settings-assign-add input {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

body[data-theme="light"] .discussion-setting-mode-picker {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
}

body[data-theme="light"] .discussion-setting-mode-button:hover {
  background: rgba(37, 99, 235, 0.06);
}

body[data-theme="light"] .discussion-setting-mode-button.is-active {
  background: color-mix(in srgb, var(--accent) 12%, white 88%);
}

body[data-theme="light"] .discussion-description-format select,
body[data-theme="light"] .discussion-description textarea {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
}

body[data-theme="light"] .discussion-assignment-row {
  background: color-mix(in srgb, white 97%, var(--panel-alt) 3%);
}

body[data-theme="light"] .discussion-link-row {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
}

.discussion-comment {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

body[data-theme="light"] .discussion-comment {
  background: color-mix(in srgb, white 94%, var(--panel-alt) 6%);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

.discussion-comment.is-history {
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-theme="light"] .discussion-comment.is-history {
  background: transparent;
}

.discussion-comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.discussion-comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(76, 201, 240, 0.24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}

.discussion-comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discussion-history-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.discussion-history-time-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.discussion-comment.is-history .discussion-comment-body {
  font-size: 11px;
  line-height: 1.25;
  color: color-mix(in srgb, var(--ink) 82%, var(--muted) 18%);
}

.discussion-comment.is-status-history {
  padding-top: 2px;
  padding-bottom: 2px;
  background: transparent;
}

.discussion-comment.is-status-history .discussion-comment-body {
  font-size: 11px;
}

.discussion-comment.is-history .discussion-comment-time {
  font-size: 10px;
  white-space: nowrap;
}

.discussion-comment.is-history .discussion-comment-actions {
  margin-left: auto;
}

.discussion-comment.is-history .discussion-comment-action {
  width: 18px;
  height: 18px;
}


.discussion-comment-meta {
  min-width: 0;
  flex: 1 1 auto;
}

.discussion-comment-author {
  font-size: 12px;
  font-weight: 600;
}

.discussion-comment-time {
  font-size: 11px;
  color: var(--muted);
}

.discussion-comment-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.discussion-comment-action {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.discussion-comment:hover .discussion-comment-action,
.discussion-comment-action:focus-visible {
  opacity: 1;
}

.discussion-comment-action:hover,
.discussion-comment-action:focus-visible {
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.04);
  outline: none;
}

body[data-theme="light"] .discussion-comment-action {
  color: rgba(71, 85, 105, 0.28);
}

body[data-theme="light"] .discussion-comment-action:hover,
body[data-theme="light"] .discussion-comment-action:focus-visible {
  color: rgba(71, 85, 105, 0.7);
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.1);
}

.discussion-comment-body {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.discussion-comment-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.discussion-comment-editor textarea {
  width: 100%;
  min-height: 82px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
  line-height: 1.45;
}

.discussion-comment-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.discussion-comment-editor-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
}

.discussion-comment-editor-btn.primary {
  color: var(--ink);
  border-color: rgba(76, 201, 240, 0.3);
}

.discussion-comment-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.discussion-mention-tag {
  display: inline;
  color: color-mix(in srgb, var(--accent) 78%, var(--ink) 22%);
  font-weight: 800;
}

.person-hover-card {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1200;
  min-width: 240px;
  max-width: min(332px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border) 78%);
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent 90%), transparent 42%),
    color-mix(in srgb, var(--panel) 97%, black 3%);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(10px);
}

.person-hover-card[hidden] {
  display: none;
}

.person-hover-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border) 88%);
}

.person-hover-card-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.08));
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent 74%);
}

.person-hover-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.person-hover-card-meta {
  min-width: 0;
  flex: 1 1 auto;
}

.person-hover-card-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.person-hover-card-chat {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: color-mix(in srgb, var(--accent) 76%, var(--ink) 24%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.person-hover-card-chat:hover,
.person-hover-card-chat:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.05);
}

.person-hover-card-emails {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.person-hover-card-email-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.person-hover-card-email {
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.person-hover-card-copy {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.person-hover-card-copy:hover,
.person-hover-card-copy:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border) 64%);
  background: rgba(255, 255, 255, 0.05);
}

.discussion-compose {
  border-top: 1px solid var(--border);
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.discussion-compose-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.discussion-compose-tools {
  position: relative;
  margin-right: auto;
}

.discussion-mention-menu,
.discussion-emoji-menu {
  position: absolute;
  left: 0;
  display: none;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 220px;
  max-height: 320px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 96%, black 4%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  overflow: auto;
  z-index: 40;
}

.discussion-mention-menu {
  bottom: calc(100% + 118px);
}

.discussion-emoji-trigger {
  min-width: 42px;
  padding-left: 10px;
  padding-right: 10px;
}

.discussion-emoji-menu {
  bottom: calc(100% + 118px);
}

.discussion-mention-menu.is-open,
.discussion-emoji-menu.is-open {
  display: grid;
}

.discussion-mention-option,
.discussion-emoji-option {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  padding: 6px 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.discussion-mention-option:hover,
.discussion-mention-option.is-active,
.discussion-mention-option:focus-visible,
.discussion-emoji-option:hover,
.discussion-emoji-option.is-active,
.discussion-emoji-option:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.04);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border) 76%);
}

.discussion-mention-avatar {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  flex: 0 0 auto;
}

.discussion-mention-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.discussion-mention-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.discussion-mention-name {
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discussion-mention-email {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discussion-emoji-glyph {
  width: 18px;
  text-align: center;
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
}

.discussion-emoji-code {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

body[data-theme="light"] .discussion-compose {
  background: color-mix(in srgb, white 95%, var(--panel-alt) 5%);
}

body[data-theme="light"] .discussion-mention-menu,
body[data-theme="light"] .discussion-emoji-menu {
  background: color-mix(in srgb, white 98%, var(--panel-alt) 2%);
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.12);
}

body[data-theme="light"] .discussion-mention-option:hover,
body[data-theme="light"] .discussion-mention-option.is-active,
body[data-theme="light"] .discussion-mention-option:focus-visible,
body[data-theme="light"] .discussion-emoji-option:hover,
body[data-theme="light"] .discussion-emoji-option.is-active,
body[data-theme="light"] .discussion-emoji-option:focus-visible {
  background: rgba(37, 99, 235, 0.08);
}

.discussion-compose textarea {
  min-height: 92px;
  resize: vertical;
}

.todo-date-group {
  padding-top: 14px;
}

.todo-date-heading {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.todo-board {
  --todo-col-meta: 200px;
  --todo-col-main: 520px;
  --todo-col-controls: 320px;
  --todo-control-due: 24px;
  --todo-control-status: 90px;
  --todo-control-assignees: 140px;
  --todo-cell-pad: 8px;
}

.todo-resize-bar {
  display: none;
}

.todo-resize-cell {
  display: none;
}

.todo-resize-handle {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 10px;
  cursor: col-resize;
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 5;
  pointer-events: auto;
}

.todo-resize-handle::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 55%, var(--border) 45%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 8px rgba(76, 201, 240, 0.24);
}

.todo-item {
  display: grid;
  grid-template-columns: minmax(0, var(--todo-col-meta)) minmax(0, var(--todo-col-main)) minmax(0, var(--todo-col-controls, 240px));
  grid-template-areas: "meta main controls";
  align-items: center;
  gap: 0;
  padding: 6px 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 4px solid var(--todo-color, var(--accent));
  border-radius: 10px;
  background: rgba(16, 20, 27, 0.82);
  position: relative;
  overflow: hidden;
}

.todo-item:hover .todo-resize-handle {
  opacity: 1;
}

body.is-resizing .todo-resize-handle {
  opacity: 1;
}

.todo-resize-handle:hover::before {
  background: color-mix(in srgb, var(--accent) 78%, white 22%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 10px rgba(76, 201, 240, 0.35);
}

body[data-theme="light"] .todo-resize-handle::before {
  background: color-mix(in srgb, var(--accent) 55%, var(--border) 45%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 6px rgba(30, 64, 175, 0.2);
}

.todo-resize-handle.meta {
  left: calc(var(--todo-col-meta) - 5px);
}

.todo-resize-handle.main {
  left: calc(var(--todo-col-meta) + var(--todo-col-main) - 5px);
}

.todo-item-controls {
  position: relative;
}

body[data-theme="light"] .todo-item {
  border-color: var(--todo-color, var(--accent));
  background: color-mix(in srgb, white 82%, #eef3f8 18%);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

body[data-theme="light"] .todo-resize-bar {
  display: none;
}

.todo-item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  grid-area: main;
  overflow: hidden;
  padding: 0 var(--todo-cell-pad) 0 0;
}

  .todo-item-title {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    min-width: 0;
    white-space: normal;
    overflow: hidden;
    text-overflow: initial;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
  }

.todo-item-main .github-task-link {
  flex: 1 1 auto;
  min-width: 0;
}

.todo-item-main .task-link-badges {
  flex: 0 0 auto;
  min-width: auto;
  max-width: none;
  overflow: visible;
  margin-left: 0;
  justify-content: flex-start;
}

.todo-item-main .task-pill {
  flex: 0 0 auto;
  margin-left: 6px;
  min-height: 20px;
  height: 20px;
}

.todo-item-main .task-pill-segment {
  min-height: 20px;
  height: 20px;
  padding: 0 7px;
}

.todo-item-main .comment-button {
  min-height: 20px;
  height: 20px;
}

.todo-item-main .comment-button {
  flex: 0 0 auto;
  margin-left: 0;
}

.github-task-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}

.github-task-link i {
  color: #f8fafc;
  font-size: 13px;
  flex: 0 0 auto;
}

body[data-theme="light"] .github-task-link i {
  color: color-mix(in srgb, var(--ink) 74%, var(--muted) 26%);
}

.github-task-link .fa-code-pull-request,
.github-task-link .fa-code-merge {
  color: #8ab4f8;
}

body[data-theme="light"] .github-task-link .fa-code-pull-request,
body[data-theme="light"] .github-task-link .fa-code-merge {
  color: color-mix(in srgb, var(--accent) 82%, #1d4ed8 18%);
}

.github-task-link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.github-task-link:hover i {
  color: var(--accent);
}

.todo-project-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  white-space: nowrap;
  grid-area: meta;
  overflow: hidden;
  padding: 0 calc(var(--todo-cell-pad) + 6px) 0 var(--todo-cell-pad);
}

.todo-item-controls {
  display: inline-grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  gap: 0;
  grid-area: controls;
  min-width: 0;
  overflow: hidden;
  width: max-content;
  justify-self: end;
  padding: 0;
  position: relative;
  z-index: 1;
}

.todo-item-controls > * {
  justify-self: end;
}

.todo-resize-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.todo-resize-overlay .todo-resize-handle {
  pointer-events: auto;
}

.todo-control {
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 6px;
}

.todo-control-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: 0;
}

.todo-control > * {
  min-width: 0;
  max-width: 100%;
}

.todo-control-due {
  justify-content: center;
  flex: 0 0 24px;
  padding: 0;
}

.todo-control-status {
  min-width: 0;
  flex: 0 0 auto;
  justify-content: flex-start;
  padding: 0;
  overflow: visible;
}

.todo-control-status.todo-status-cell,
.todo-control-status > .todo-status-cell {
  width: 84px;
  padding-right: 0;
  overflow: visible;
}

.task-status-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.task-status-split.is-todo {
  gap: 6px;
}

.task-status-multi-button {
  width: 100%;
  height: 26px;
  min-height: 26px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  line-height: 1;
  vertical-align: middle;
}

.table {
  --tree-control-height: 26px;
  --tree-control-radius: 999px;
}

.table .due-cell {
  display: inline-flex;
  align-items: center;
  min-height: var(--tree-control-height);
}

.table .due-summary {
  min-height: var(--tree-control-height);
  height: var(--tree-control-height);
  box-sizing: border-box;
  border-radius: var(--tree-control-radius);
}

.task-row .due-summary,
.subtasks-row .due-summary,
.tasks-table .due-summary {
  border-radius: var(--tree-control-radius) !important;
}

.table td [data-task-status-host] > .task-status-multi-button,
.table td [data-task-status-host] > .status-editable,
.table td [data-task-status-host] > .github-status-readonly,
.table .status-editable,
.table .github-status-readonly {
  min-height: var(--tree-control-height);
  height: var(--tree-control-height);
  box-sizing: border-box;
  border-radius: var(--tree-control-radius);
}

.table .assignments,
.table .github-assignments {
  min-height: var(--tree-control-height);
  display: inline-flex;
  align-items: center;
}

.table .assignments .badge-icon,
.table .assignments .badge.user .badge-icon,
.table .github-assignments .badge-icon {
  width: var(--tree-control-height);
  height: var(--tree-control-height);
  flex: 0 0 var(--tree-control-height);
  border-radius: var(--tree-control-radius);
}

.task-status-multi-button.is-todo {
  height: 20px;
  min-height: 20px;
}

.task-status-summary {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1 1 100%;
  width: 100%;
  overflow: hidden;
}

.task-status-percentage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.task-status-percentage-button {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, #35d07f 28%, transparent) 0,
      color-mix(in srgb, #35d07f 28%, transparent) var(--status-progress, 0%),
      rgba(255, 255, 255, 0.03) var(--status-progress, 0%),
      rgba(255, 255, 255, 0.03) 100%
    );
}

body[data-theme="light"] .task-status-percentage-button {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, #35d07f 20%, white 80%) 0,
      color-mix(in srgb, #35d07f 20%, white 80%) var(--status-progress, 0%),
      color-mix(in srgb, white 96%, var(--panel-alt) 4%) var(--status-progress, 0%),
      color-mix(in srgb, white 96%, var(--panel-alt) 4%) 100%
    );
}

.task-status-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 0;
  min-height: 26px;
}

.task-status-count:last-child {
  border-right: none;
}

.task-status-count i {
  font-size: 11px;
}

.task-status-count.status-complete {
  color: var(--success);
  background: rgba(110, 231, 183, 0.08);
}

.task-status-count.status-critical {
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
}

.task-status-count.is-empty {
  opacity: 0.8;
  border-right: none;
  border-radius: 999px;
}

.task-user-status-cell {
  flex: 0 0 auto;
}

body[data-theme="light"] .task-status-multi-button {
  background: color-mix(in srgb, white 94%, var(--panel-alt) 6%);
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

body[data-theme="light"] .task-status-count {
  background: color-mix(in srgb, white 95%, var(--panel-alt) 5%);
  border-right-color: color-mix(in srgb, var(--border) 88%, white 12%);
  color: color-mix(in srgb, var(--ink) 76%, var(--muted) 24%);
}

body[data-theme="light"] .task-status-count.status-complete {
  color: color-mix(in srgb, var(--success) 82%, #14532d 18%);
  background: color-mix(in srgb, var(--success) 10%, white 90%);
}

body[data-theme="light"] .task-status-count.status-critical {
  color: #b42318;
  background: rgba(217, 45, 32, 0.08);
}

.todo-control-assignees {
  min-width: 0;
  justify-content: flex-end;
  flex: 0 0 68px;
  width: 68px;
}

.todo-project-name,
.todo-group-name {
  color: inherit;
  text-decoration: none;
}

.todo-project-name:hover,
.todo-group-name:hover {
  color: var(--accent);
}

.todo-item-controls .todo-assignments {
  justify-content: flex-end;
  width: 68px;
  max-width: 68px;
  flex-wrap: nowrap;
  overflow: hidden;
  margin-left: 0;
}

.todo-assignments .btn.link {
  display: none;
}

.todo-assignments.no-assign-actions .assign-action {
  display: none;
}

.todo-item-controls .github-assignments {
  justify-content: flex-end;
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow: hidden;
}

.todo-project-name,
.todo-group-name,
.todo-status-cell {
  font-size: 11px;
  line-height: 1.2;
}

.todo-project-name {
  color: color-mix(in srgb, var(--todo-color, var(--accent)) 70%, white 30%);
  font-weight: 600;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-theme="light"] .todo-project-name {
  color: color-mix(in srgb, var(--todo-color, var(--accent)) 76%, #243447 24%);
}

.todo-group-name {
  color: var(--muted);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.todo-project-meta:not(:has(.todo-group-name)) .todo-project-name {
  white-space: normal;
  overflow: hidden;
  text-overflow: initial;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.todo-group-name::before {
  content: "";
  margin-right: 0;
}

.todo-due-cell {
  min-height: 0;
}

.todo-due-cell .due-summary {
  padding: 2px 4px;
  min-height: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  box-sizing: border-box;
}

.todo-due-cell .due-summary-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.todo-due-cell .due-summary-label i {
  font-size: 12px;
  line-height: 1;
}

.todo-status-cell {
  color: var(--muted);
  text-transform: lowercase;
  width: 84px;
  min-width: 84px;
  max-width: 84px;
}

.todo-status-cell.status-editable {
  min-width: 84px;
  min-height: 20px;
  width: 84px;
  max-width: 84px;
  padding: 2px;
  box-sizing: border-box;
  justify-content: center;
  font-size: 0;
  color: transparent;
  caret-color: transparent;
  text-shadow: none;
  text-transform: none;
}

.todo-status-cell.status-editable::before {
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
}

.task-status-multi-button.is-todo {
  width: 84px;
  min-width: 84px;
  max-width: 84px;
}

.task-status-multi-button.is-todo .task-status-count {
  min-height: 20px;
  height: 20px;
  padding: 0 6px;
}

.todo-assignments {
  min-width: 0;
  gap: 4px;
  min-height: 20px;
}

.todo-assignments .badge {
  max-width: 20px;
  min-width: 0;
  padding-right: 0;
  margin-right: 0;
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.04);
}

.github-assignments .badge {
  max-width: 100%;
  min-width: 0;
}

.todo-assignments .badge-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.todo-assignments .badge.user {
  border-color: var(--border);
}

.todo-assignments .badge-overflow-count .badge-icon {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.todo-assignments .badge.user .badge-icon {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border-color: var(--border);
}

.todo-assignments .badge-label {
  display: none;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.github-assignments .badge-label {
  display: none;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-theme="light"] .todo-assignments .badge {
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
}

body[data-theme="light"] .todo-assignments .badge.user {
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
}

body[data-theme="light"] .todo-assignments .badge-icon,
body[data-theme="light"] .todo-assignments .badge.user .badge-icon {
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  background: color-mix(in srgb, white 92%, var(--panel-alt) 8%);
  color: color-mix(in srgb, var(--muted) 88%, #475569 12%);
}

.todo-open-link {
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  white-space: nowrap;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

body[data-theme="light"] .panel {
  box-shadow: none;
}

.panel + .panel {
  margin-top: 16px;
}

.project-view-shell {
  margin: 0 0 14px;
}

.project-view-shell .project-board-header {
  margin-top: 0;
}

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

.tree-project-board {
  --project-color: var(--accent);
  margin-bottom: 40px;
}

.tree-project-board + .tree-project-board {
  margin-top: 24px;
}

.project-board-header {
  position: relative;
  margin: -20px -18px 14px;
  padding: 40px 18px 14px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--project-color) 18%, transparent) 0%,
      color-mix(in srgb, var(--project-color) 8%, transparent) 28%,
      color-mix(in srgb, var(--project-color) 3%, transparent) 55%,
      transparent 100%
    ),
    color-mix(in srgb, var(--panel) 97%, transparent);
}

.project-board-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--project-color) 8%, transparent), transparent 46%);
  pointer-events: none;
}

.project-board-header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 10px;
}

.project-board-header h3 {
  margin: 0;
}

.project-board-mode-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 10px 0;
}

.project-gantt-toolbar {
  --gantt-toolbar-control-height: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 4px;
  flex-wrap: wrap;
}

.project-gantt-mark-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--gantt-toolbar-control-height);
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.project-gantt-mark-label {
  white-space: nowrap;
}

.project-gantt-filter-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  height: var(--gantt-toolbar-control-height);
  min-height: var(--gantt-toolbar-control-height);
  width: min(220px, 100%);
  margin: 0;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--project-color) 18%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 96%, var(--panel-alt) 4%);
  color: var(--muted);
}

.project-gantt-filter-control i {
  flex: 0 0 auto;
  font-size: 11px;
  opacity: 0.78;
}

.project-gantt-filter-control input {
  min-width: 0;
  width: 100%;
  height: calc(var(--gantt-toolbar-control-height) - 2px);
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.project-gantt-filter-control input::placeholder {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}

.project-gantt-filter-control:focus-within {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border) 50%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--ink);
}

.project-gantt-day-mask {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  height: var(--gantt-toolbar-control-height);
  margin: 0;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--project-color) 14%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
}

.project-gantt-day-mask[hidden] {
  display: none !important;
}

.project-gantt-day-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}

.project-gantt-day-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.project-gantt-day-chip span {
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.project-gantt-day-chip input:checked + span {
  color: var(--ink);
  background: color-mix(in srgb, var(--project-color, var(--accent)) 22%, transparent);
}

.project-gantt-day-chip input:focus-visible + span {
  outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
  outline-offset: 2px;
}

.project-gantt-range-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--gantt-toolbar-control-height);
  margin: 0;
  padding: 0;
}

.project-gantt-range-add,
.project-gantt-range-chip,
.project-gantt-range-dialog button {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid color-mix(in srgb, var(--project-color) 18%, var(--border));
  background: color-mix(in srgb, var(--panel) 96%, var(--panel-alt) 4%);
  color: var(--ink);
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
}

.project-gantt-range-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: var(--gantt-toolbar-control-height);
  margin: 0;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.project-gantt-range-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  flex: 1 1 320px;
}

.project-gantt-range-chip {
  --gantt-range-color: var(--project-color, var(--accent));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--project-color) 16%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--project-color, var(--accent)) 8%, var(--panel));
  text-align: left;
}

.project-gantt-range-chip-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gantt-range-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gantt-range-color) 18%, transparent);
  flex: 0 0 auto;
}

.project-gantt-range-chip-label {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
}

.project-gantt-range-chip-dates {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.project-gantt-range-add:hover,
.project-gantt-range-chip:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--project-color) 34%, var(--border));
  background: color-mix(in srgb, var(--project-color) 10%, var(--panel) 90%);
}

.project-gantt-range-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.44);
}

.project-gantt-range-dialog-backdrop[hidden] {
  display: none !important;
}

.project-gantt-range-dialog {
  width: min(460px, 100%);
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--ink) 22%);
  border-radius: 18px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  overflow: hidden;
}

.project-gantt-range-dialog-header,
.project-gantt-range-dialog-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.project-gantt-range-dialog-header {
  justify-content: space-between;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
}

.project-gantt-range-dialog-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-gantt-range-dialog h3 {
  margin: 2px 0 0;
  font-size: 18px;
}

.project-gantt-range-dialog-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.project-gantt-range-dialog-body {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.project-gantt-range-dialog-date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.project-gantt-range-dialog-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.project-gantt-range-dialog-field input {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 92%, var(--panel-alt) 8%);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  padding: 9px 10px;
}

.project-gantt-range-dialog-field input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.project-gantt-range-dialog-actions {
  border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
}

.project-gantt-range-dialog-spacer {
  flex: 1 1 auto;
}

.project-gantt-range-dialog-actions button {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
}

.project-gantt-range-dialog-save {
  background: color-mix(in srgb, var(--accent) 28%, var(--panel) 72%) !important;
}

.project-gantt-range-dialog-delete {
  color: #ef4444 !important;
  border-color: color-mix(in srgb, #ef4444 36%, var(--border)) !important;
}

.project-gantt-range-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 0;
}

.project-gantt-range-dialog .project-gantt-range-color-choice {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--border) 74%, transparent);
  background: var(--gantt-range-color);
  background-color: var(--gantt-range-color);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, white 18%, transparent);
  cursor: pointer;
  padding: 0;
}

.project-gantt-range-dialog .project-gantt-range-color-choice.is-selected {
  border-color: color-mix(in srgb, var(--ink) 76%, var(--gantt-range-color) 24%);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, white 22%, transparent),
    0 0 0 3px color-mix(in srgb, var(--gantt-range-color) 22%, transparent);
}

.project-gantt-mark-control select {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  height: var(--gantt-toolbar-control-height);
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--project-color) 18%, var(--border));
  background: color-mix(in srgb, var(--panel) 96%, var(--panel-alt) 4%);
  color: var(--ink);
  border-radius: 999px;
  padding: 0 30px 0 10px;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 10px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.project-gantt-mark-control select:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border) 50%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.project-gantt-export-btn {
  box-sizing: border-box;
  height: var(--gantt-toolbar-control-height);
  min-height: var(--gantt-toolbar-control-height);
  margin: 0;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--project-color) 18%, var(--border)) !important;
  background: color-mix(in srgb, var(--panel) 96%, var(--panel-alt) 4%) !important;
  color: var(--ink) !important;
  box-shadow: none;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.project-gantt-export-btn:hover {
  border-color: color-mix(in srgb, var(--project-color) 34%, var(--border)) !important;
  background: color-mix(in srgb, var(--project-color) 10%, var(--panel) 90%) !important;
}

body[data-theme="light"] .project-gantt-export-btn {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%) !important;
  border-color: color-mix(in srgb, var(--border) 86%, white 14%) !important;
  color: var(--ink) !important;
}

.project-gantt-export-button {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid color-mix(in srgb, var(--project-color) 18%, var(--border));
  background: color-mix(in srgb, var(--panel) 96%, var(--panel-alt) 4%);
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}

.project-gantt-export-button:hover {
  border-color: color-mix(in srgb, var(--project-color) 34%, var(--border));
  background: color-mix(in srgb, var(--project-color) 10%, var(--panel) 90%);
}

.project-gantt-export-button:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border) 50%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.project-board-mode-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
}

.project-board-mode-tab:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--project-color) 10%, transparent);
}

.project-board-mode-tab.is-active {
  color: var(--ink);
  background: color-mix(in srgb, var(--project-color) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--project-color) 20%, var(--border));
}

.project-board-mode-panel[hidden] {
  display: none !important;
}

.project-gantt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px 0 0;
}

.project-gantt-shell {
  position: relative;
  border-left: 3px solid var(--project-color, var(--accent));
  background: color-mix(in srgb, var(--panel) 95%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--project-color) 16%, transparent);
}

.project-gantt-overlay-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gantt-hover-percent, -9999%);
  width: 2px;
  margin-left: -1px;
  background: color-mix(in srgb, var(--project-color, var(--accent)) 78%, white 22%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 55%, transparent), 0 0 18px color-mix(in srgb, var(--project-color, var(--accent)) 42%, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.project-gantt-shell.is-gantt-hovering .project-gantt-overlay-track::after {
  opacity: 0.95;
}

.project-gantt-axis {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 14px;
  padding: 24px 14px 0;
  font-size: 12px;
  color: var(--muted);
}

.project-gantt-axis-spacer {
  min-width: 0;
}

.project-gantt-axis-track {
  position: relative;
  min-width: 0;
  height: 46px;
}

.project-gantt-hover-date {
  position: absolute;
  top: 0;
  left: var(--gantt-hover-percent, -9999%);
  z-index: 8;
  min-width: 54px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--project-color, var(--accent)) 54%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--project-color, var(--accent)) 20%, var(--panel) 80%);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--project-color, var(--accent)) 20%, transparent);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--gantt-hover-date-shift, -50%), -35%);
}

.project-gantt-shell.is-gantt-hovering .project-gantt-hover-date {
  opacity: 1;
}

.project-gantt-axis-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--project-color) 16%, var(--border));
  transform: translateY(-50%);
}

.project-gantt-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.project-gantt-range-band {
  --gantt-range-color: var(--project-color, var(--accent));
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--gantt-range-color) 20%, transparent),
      color-mix(in srgb, var(--gantt-range-color) 9%, transparent)
    );
  border-left: 1px solid color-mix(in srgb, var(--gantt-range-color) 32%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--gantt-range-color) 24%, transparent);
  z-index: 0;
  pointer-events: auto;
  cursor: pointer;
}

.project-gantt-range-label {
  position: absolute;
  left: 50%;
  top: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  max-width: max(88px, calc(100% - 12px));
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--gantt-range-color) 34%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 78%, var(--gantt-range-color) 22%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--ink) 76%, var(--gantt-range-color) 24%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  pointer-events: none;
  transform: translate(-50%, -100%);
  z-index: 3;
}

.project-gantt-range-controls {
  padding: 2px 0 4px;
}

.project-gantt-range-band {
  pointer-events: none;
}

.project-gantt-range-label {
  cursor: pointer;
  pointer-events: auto;
}

.project-gantt-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
}

.project-gantt-guide.is-minor {
  background: color-mix(in srgb, var(--project-color) 10%, var(--border));
}

.project-gantt-guide.is-major {
  background: color-mix(in srgb, var(--project-color) 18%, var(--border));
}

.project-gantt-axis-edge {
  position: absolute;
  top: 24px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.project-gantt-axis-edge.is-start {
  left: 0;
}

.project-gantt-axis-edge.is-end {
  right: 0;
}

.project-gantt-axis-label {
  position: absolute;
  top: 24px;
  transform: translateX(-50%);
  font-size: 11px;
  color: color-mix(in srgb, var(--project-color) 56%, var(--ink));
  white-space: nowrap;
}

.project-gantt-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-gantt-body {
  position: relative;
  padding-top: 10px;
}

.project-gantt-overlay {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 14px;
  pointer-events: none;
  z-index: 0;
}

.project-gantt-overlay-spacer {
  min-width: 0;
}

.project-gantt-overlay-track {
  position: relative;
  min-width: 0;
}

.project-gantt-axis,
.project-gantt-body,
.project-gantt-list,
.project-gantt-section,
.project-gantt-section-list,
.project-gantt-row,
.project-gantt-task,
.project-gantt-track {
  position: relative;
  z-index: 1;
}

.project-gantt-axis {
  position: sticky;
  top: -16px;
  z-index: 10;
  border-bottom: 1px solid color-mix(in srgb, var(--project-color, var(--accent)) 18%, var(--border));
  background: color-mix(in srgb, var(--panel) 97%, var(--project-color, var(--accent)) 3%);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--bg) 48%, transparent);
}

.project-gantt-section {
  display: flex;
  flex-direction: column;
}

.project-gantt-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--project-color, var(--accent)) 82%, var(--muted));
}

.project-gantt-section-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
}

.project-gantt-section:hover .project-gantt-section-toggle,
.project-gantt-section:focus-within .project-gantt-section-toggle,
.project-gantt-section.is-collapsed .project-gantt-section-toggle {
  opacity: 1;
}

.project-gantt-section-toggle i {
  font-size: 11px;
  transform: rotate(0deg);
  transition: transform 140ms ease;
}

.project-gantt-section.is-collapsed .project-gantt-section-toggle i {
  transform: rotate(-90deg);
}

.project-gantt-section-title-text {
  min-width: 0;
}

.project-gantt-row.is-collapsed-summary .project-gantt-task {
  min-height: 1px;
}

.project-gantt-section-list {
  display: flex;
  flex-direction: column;
}

.project-gantt-section.is-collapsed .project-gantt-section-title {
  padding-bottom: 0;
  margin-bottom: -4px;
  min-height: 26px;
  align-items: center;
  z-index: 2;
}

.project-gantt-section.is-collapsed .project-gantt-row.is-collapsed-summary {
  margin-top: -22px;
}

.project-gantt-row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 4px 14px;
  transition: background 120ms ease;
}

.project-gantt-row:hover,
.project-gantt-row:focus-within {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--project-color, var(--accent)) 20%, transparent), transparent 74%),
    color-mix(in srgb, var(--project-color, var(--accent)) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--project-color, var(--accent)) 24%, transparent);
}

.project-gantt-row.is-gantt-active-drag-row {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--project-color, var(--accent)) 24%, transparent), transparent 72%),
    color-mix(in srgb, var(--project-color, var(--accent)) 13%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--project-color, var(--accent)) 32%, transparent),
    0 4px 14px color-mix(in srgb, var(--project-color, var(--accent)) 10%, transparent);
}

.project-gantt-row.is-gantt-guide-intersecting {
  background: color-mix(in srgb, var(--project-color, var(--accent)) 7%, transparent);
}

body.is-gantt-dragging .project-gantt-row.is-gantt-drag-related.is-gantt-relative-reference {
  background: color-mix(in srgb, #f5c542 8%, transparent);
}

.project-gantt-task {
  min-width: 0;
}

.project-gantt-task-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.project-gantt-task-title {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
  transition: color 120ms ease, background 120ms ease, padding 120ms ease;
}

.project-gantt-row:hover .project-gantt-task-title,
.project-gantt-row:focus-within .project-gantt-task-title {
  color: color-mix(in srgb, var(--ink) 82%, var(--project-color, var(--accent)) 18%);
  font-weight: 650;
}

.project-gantt-task-title:hover {
  color: color-mix(in srgb, var(--ink) 84%, var(--accent) 16%);
}

.project-gantt-task-title:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

.project-gantt-track {
  position: relative;
  height: 22px;
}

.project-gantt-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--project-color) 14%, var(--border));
  transition: height 120ms ease, background 120ms ease;
}

.project-gantt-row:hover .project-gantt-track::before,
.project-gantt-row:focus-within .project-gantt-track::before,
.project-gantt-row.is-gantt-guide-intersecting .project-gantt-track::before {
  height: 4px;
  background: color-mix(in srgb, var(--project-color, var(--accent)) 34%, var(--border));
}

.project-gantt-marker {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: var(--project-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--project-color) 20%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.project-gantt-marker-icon {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.project-gantt-marker.icon-check .project-gantt-marker-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 4px;
  height: 7px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(45deg);
}

.project-gantt-marker.icon-bang .project-gantt-marker-icon::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 2px;
  height: 6px;
  border-radius: 999px;
  background: white;
}

.project-gantt-marker.icon-bang .project-gantt-marker-icon::after {
  content: "";
  position: absolute;
  left: 6px;
  bottom: 2px;
  width: 2px;
  height: 2px;
  border-radius: 999px;
  background: white;
}

.project-gantt-marker.icon-dot .project-gantt-marker-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: white;
}

.project-gantt-marker.icon-ring .project-gantt-marker-icon::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: white;
}

.project-gantt-span {
  position: absolute;
  top: 50%;
  height: 8px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--project-color) 72%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--project-color) 18%, transparent);
  overflow: hidden;
}

.project-gantt-span-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: color-mix(in srgb, white 28%, var(--project-color) 72%);
}

.project-gantt-span.status-open {
  color: var(--project-color);
  background: color-mix(in srgb, var(--project-color) 36%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--project-color) 18%, transparent);
}

.project-gantt-span.status-critical,
.project-gantt-marker.status-critical {
  background: #ff6b6b;
}

.project-gantt-span.status-critical {
  color: #ff6b6b;
  box-shadow: 0 0 0 1px color-mix(in srgb, #ff6b6b 24%, transparent);
}

.project-gantt-span.status-complete,
.project-gantt-marker.status-complete {
  background: #35d07f;
}

.project-gantt-span.status-complete {
  color: #35d07f;
  box-shadow: 0 0 0 1px color-mix(in srgb, #35d07f 24%, transparent);
}

.project-gantt-span.mode-percentage .project-gantt-span-progress {
  background: color-mix(in srgb, white 34%, currentColor 66%);
}

body.is-gantt-dragging .is-gantt-drag-related .project-gantt-span.is-relative-due {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--project-color) 56%, transparent),
      color-mix(in srgb, #f5c542 30%, var(--project-color) 42%)
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, #f5c542 28%, transparent),
    0 0 0 3px color-mix(in srgb, #f5c542 7%, transparent);
}

.project-gantt-span.is-outside {
  background: color-mix(in srgb, var(--project-color) 36%, var(--muted));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--project-color) 10%, transparent);
}

body.is-gantt-dragging .is-gantt-drag-related .project-gantt-marker.is-relative-due {
  background: color-mix(in srgb, #f5c542 68%, var(--project-color, var(--accent)) 32%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--panel) 86%, transparent),
    0 0 0 5px color-mix(in srgb, #f5c542 32%, transparent);
}

body.is-gantt-dragging .project-gantt-track.is-gantt-drag-related.is-gantt-relative-reference::before {
  height: 4px;
  background: color-mix(in srgb, #f5c542 34%, var(--project-color, var(--accent)) 28%);
}

body.is-gantt-dragging .project-gantt-track.is-gantt-drag-related.is-gantt-relative-reference .project-gantt-marker {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--panel) 78%, transparent),
    0 0 0 6px color-mix(in srgb, #f5c542 34%, transparent),
    0 0 16px color-mix(in srgb, #f5c542 26%, transparent);
}

.project-gantt-relative-anchor {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 18px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: color-mix(in srgb, #f5c542 74%, var(--panel) 26%);
  border: 1px solid color-mix(in srgb, #f5c542 54%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, #f5c542 14%, transparent);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 120ms ease;
}

.project-gantt-relative-anchor::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 1px;
  height: 28px;
  transform: translateX(-50%);
  background: color-mix(in srgb, #f5c542 50%, transparent);
}

.project-gantt-relative-anchor.is-in-project {
  width: 6px;
}

body:not(.is-gantt-dragging) .project-gantt-relative-anchor.is-in-project,
body.is-gantt-dragging .project-gantt-relative-anchor.is-in-project {
  opacity: 0;
}

body.is-gantt-dragging .is-gantt-drag-related .project-gantt-relative-anchor {
  opacity: 1;
}

.project-gantt-marker.is-outside {
  background: color-mix(in srgb, var(--project-color) 48%, var(--muted));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--project-color) 12%, transparent);
}

.project-gantt-marker.is-gantt-guide-date-hit {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--panel) 76%, transparent),
    0 0 0 6px color-mix(in srgb, var(--project-color, var(--accent)) 38%, transparent),
    0 0 18px color-mix(in srgb, var(--project-color, var(--accent)) 30%, transparent);
}

.project-gantt-handle {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 18px;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--panel) 22%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, white 82%, var(--project-color) 18%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  cursor: ew-resize;
  z-index: 4;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.project-gantt-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--project-color) 64%, var(--muted));
}

.project-gantt-handle:hover {
  background: color-mix(in srgb, white 70%, var(--project-color) 30%);
}

.project-gantt-handle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
  outline-offset: 2px;
}

.project-gantt-track:hover .project-gantt-handle:not(.is-provisional):not(:disabled),
.project-gantt-track:focus-within .project-gantt-handle:not(.is-provisional):not(:disabled) {
  opacity: 1;
  pointer-events: auto;
}

.project-gantt-handle.is-provisional {
  opacity: 0;
  pointer-events: none;
}

.project-gantt-track:hover .project-gantt-handle.is-provisional[data-gantt-provisional-ready="1"],
.project-gantt-track:focus-within .project-gantt-handle.is-provisional[data-gantt-provisional-ready="1"] {
  opacity: 1;
  pointer-events: auto;
}

body.is-gantt-dragging .project-gantt-handle.is-provisional {
  opacity: 0 !important;
  pointer-events: none !important;
}

.project-gantt-handle.is-gantt-guide-date-hit {
  opacity: 1;
  pointer-events: none;
  background: color-mix(in srgb, white 72%, var(--project-color) 28%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--panel) 82%, transparent),
    0 0 0 5px color-mix(in srgb, var(--project-color, var(--accent)) 34%, transparent),
    0 1px 6px rgba(0, 0, 0, 0.2);
}

body.is-gantt-dragging {
  user-select: none;
  cursor: ew-resize;
}

.project-gantt-drag-tooltip {
  position: fixed;
  transform: translate(-50%, -100%);
  padding: 5px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, black 12%);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--ink) 22%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  z-index: 1200;
  pointer-events: none;
}

.project-gantt-guide.is-today {
  width: 2px;
  margin-left: -1px;
  background: color-mix(in srgb, var(--accent) 82%, white 18%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  opacity: 0.95;
  z-index: 2;
}

.project-gantt-empty {
  padding: 18px 14px;
  color: var(--muted);
  font-size: 13px;
}

.share-avatars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.project-header-avatars {
  margin-left: auto;
  justify-content: flex-end;
  min-height: 18px;
}

.project-header-avatars:empty {
  display: none;
}

.project-header-share-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.project-share-trigger {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 92%, white 8%);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.project-share-trigger:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border) 62%);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel) 90%);
}

body[data-theme="light"] .project-share-trigger {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
  border-color: color-mix(in srgb, var(--border) 86%, white 14%);
}

body[data-theme="light"] .project-board-header {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--project-color) 16%, white 84%) 0%,
      color-mix(in srgb, var(--project-color) 7%, white 93%) 28%,
      color-mix(in srgb, var(--project-color) 3%, white 97%) 55%,
      rgba(255, 255, 255, 0.99) 100%
    );
  box-shadow: none;
}

body[data-theme="light"] .project-board-mode-tab.is-active {
  background: color-mix(in srgb, var(--project-color) 12%, white 88%);
}

body[data-theme="light"] .project-gantt-mark-control select {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
}

body[data-theme="light"] .project-gantt-filter-control {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
}

body[data-theme="light"] .project-gantt-shell {
  background: color-mix(in srgb, white 97%, var(--panel) 3%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--project-color) 22%, transparent);
}

.avatar-stack {
  display: inline-flex;
  align-items: center;
}

.project-list .project-item .avatar-stack,
.sidebar-stack > .sidebar-stack-item > .project-item .avatar-stack {
  width: 100%;
  justify-content: flex-end;
}

.avatar-stack .avatar-chip {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  overflow: hidden;
}

.avatar-stack .avatar-chip + .avatar-chip {
  margin-left: -6px;
}

.avatar-stack .avatar-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-stack .avatar-chip.is-online,
.share-avatars .avatar-chip.is-online {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 80%, transparent);
  border-color: color-mix(in srgb, var(--success) 90%, transparent);
}


.share-avatars .avatar-chip {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
}

.avatar-stack .avatar-chip.is-team-share,
.share-avatars .avatar-chip.is-team-share {
  width: auto;
  min-width: 0;
  max-width: 150px;
  height: 18px;
  padding: 0 8px 0 6px;
  gap: 4px;
  border-radius: 999px;
  border-color: color-mix(in srgb, #22c7a9 58%, var(--border) 42%);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #22c7a9 24%, var(--panel-alt) 76%),
      color-mix(in srgb, #0f766e 18%, var(--panel) 82%));
  color: color-mix(in srgb, #22c7a9 82%, var(--ink) 18%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #22c7a9 18%, transparent);
  font-size: 9px;
  letter-spacing: 0.01em;
}

.avatar-stack .avatar-chip.is-team-share + .avatar-chip,
.share-avatars .avatar-chip.is-team-share + .avatar-chip {
  margin-left: -4px;
}

.avatar-stack .avatar-chip.is-team-share i,
.share-avatars .avatar-chip.is-team-share i {
  flex: 0 0 auto;
  font-size: 8px;
  line-height: 1;
}

.avatar-stack .avatar-chip.is-team-share .team-share-name,
.share-avatars .avatar-chip.is-team-share .team-share-name {
  min-width: 0;
  max-width: 124px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.share-avatars .avatar-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.share-avatars::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  top: 120%;
  background: #0f141c;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  white-space: pre;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 10;
  min-width: 160px;
}

.share-avatars:hover::after {
  opacity: 1;
}

.group-block.dragging {
  opacity: 0.6;
}

.group-block.drag-over .panel.group .table {
  box-shadow: 0 0 0 1px var(--group-color, var(--accent));
}

.group-block {
  transition: transform 140ms ease;
  margin-bottom: 12px;
}

.group-header[draggable="true"] {
  cursor: grab;
}

.group-header[draggable="true"]:active {
  cursor: grabbing;
}

.panel.group {
  border: 0;
  background: transparent;
  padding: 0;
  padding-top: 0;
  box-shadow: none;
}

body[data-theme="light"] .panel.group {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.panel.group .table {
  border-left: 3px solid var(--group-color, var(--border));
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--group-color, var(--border)) 18%, transparent);
}

body[data-theme="light"] .panel.group .table {
  background: color-mix(in srgb, white 96%, var(--panel) 4%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--group-color, var(--border)) 28%, transparent);
}

.ungrouped-table-shell {
  margin-top: 0;
}

.group-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--group-color, var(--accent));
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  padding: 0;
  background: none;
  position: static;
  line-height: 1.2;
  text-shadow: 0 6px 16px color-mix(in srgb, var(--group-color, transparent) 20%, transparent);
}

body[data-theme="light"] .group-title {
  color: color-mix(in srgb, var(--group-color, var(--accent)) 94%, #0f172a 6%);
  text-shadow: none;
}


.group-insert-wrap {
  padding: 0 14px;
  margin: 8px 0;
}

.group-insert-wrap.disabled {
  opacity: 0;
  pointer-events: none;
}

.group-insert {
  position: relative;
  height: 20px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 2;
}

.group-insert-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: rgba(76, 201, 240, 0.35);
  opacity: 0.15;
  transition: opacity 120ms ease;
}

.group-insert-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(76, 201, 240, 0.6);
  background: #0b1118;
  color: var(--accent);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
  cursor: pointer;
}

.group-insert:hover .group-insert-line,
.group-insert:focus-within .group-insert-line {
  opacity: 0.6;
}

.group-insert:hover .group-insert-btn,
.group-insert:focus-within .group-insert-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.panel + .group-insert {
  margin-top: 10px;
}

.group-insert + .panel {
  margin-top: 10px;
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  color: #041015;
  background: var(--accent);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.btn.secondary {
  background: transparent;
  color: var(--accent);
}

.btn.danger {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.14);
  color: #fecaca;
}

.btn.danger:hover {
  background: rgba(239, 68, 68, 0.22);
}

body[data-theme="light"] .btn.danger {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}

body[data-theme="light"] .btn.danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

body[data-theme="light"] .btn:not(.secondary):not(.link) {
  color: #fff;
}

.context-menu {
  position: fixed;
  background: color-mix(in srgb, var(--panel) 96%, var(--panel-alt) 4%);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 160px;
  z-index: 2000;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  padding: 6px 0;
  display: none;
}

.context-menu > button,
.context-menu > .context-menu-submenu > button {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 12px;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
}

.context-menu > button:hover,
.context-menu > .context-menu-submenu > button:hover {
  background: rgba(76, 201, 240, 0.08);
}

body[data-theme="light"] .context-menu {
  background: color-mix(in srgb, white 94%, var(--panel-alt) 6%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

body[data-theme="light"] .context-menu > button:hover,
body[data-theme="light"] .context-menu > .context-menu-submenu > button:hover {
  background: color-mix(in srgb, var(--accent) 10%, white 90%);
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 12, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2500;
  pointer-events: auto;
}

.modal.open {
  display: flex;
}

.modal .panel {
  width: 360px;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.modal .panel.modal-wide {
  width: min(460px, calc(100vw - 32px));
}

.modal .suggest-list {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 8px;
  max-height: 180px;
  overflow: auto;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.modal .suggest-list button {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal .suggest-list button:hover,
.modal .suggest-list button.is-active {
  background: rgba(76, 201, 240, 0.08);
}

body[data-theme="light"] .modal .suggest-list {
  background: color-mix(in srgb, white 94%, var(--panel-alt) 6%);
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

body[data-theme="light"] .modal .suggest-list button:hover,
body[data-theme="light"] .modal .suggest-list button.is-active {
  background: color-mix(in srgb, var(--accent) 10%, white 90%);
}

body[data-theme="light"] #share-input {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  color: var(--ink);
}

body[data-theme="light"] #direct-project-input {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  color: var(--ink);
}

body[data-theme="light"] #rename-input {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  color: var(--ink);
}

.share-list {
  margin-top: 12px;
  border-top: 1px solid var(--grid);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.share-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.share-item .meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-item .avatar-chip {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
}

.share-item .avatar-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.share-item .label {
  font-size: 12px;
  color: var(--ink);
}

.share-item .muted {
  color: var(--muted);
  font-size: 11px;
}

label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

input, select {
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #0f141c;
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
}

body[data-theme="light"] #account-display-name,
body[data-theme="light"] #account-email,
body[data-theme="light"] #merge-email {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  color: var(--ink);
}

ul { padding-left: 18px; }
li { margin-bottom: 6px; }

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(76, 201, 240, 0.15);
  color: var(--accent);
  font-size: 11px;
}

.tag.status-accepted {
  background: rgba(110, 231, 183, 0.14);
  color: var(--success);
}

.tag.status-declined,
.tag.status-denied {
  background: rgba(248, 113, 113, 0.14);
  color: #f87171;
}

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

.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.tasks-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.tasks-table::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--grid);
  border-radius: 10px;
  pointer-events: none;
  z-index: 3;
}

.table th, .table td {
  text-align: left;
  padding: 6px 6px;
  border-bottom: 1px solid var(--grid);
  border-right: 1px solid var(--grid);
  font-size: 12px;
  vertical-align: top;
  position: relative;
}

.table th {
  position: relative;
}

.col-resizer {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 6px;
  cursor: col-resize;
  user-select: none;
}

.table th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  background: rgba(10, 14, 20, 0.7);
}

body[data-theme="light"] .table th {
  color: rgba(71, 85, 105, 0.9);
  background: rgba(226, 232, 240, 0.7);
}

.table th:last-child,
.table td:last-child {
  border-right: none;
}

.tasks-table th:first-child,
.tasks-table td:first-child {
  border-right: none;
  padding-right: 0;
}

.tasks-table th:nth-child(2),
.tasks-table td:nth-child(2) {
  padding-left: 0;
}

.table tbody tr:hover {
  background: rgba(76, 201, 240, 0.06);
}

.table tbody tr {
  transition: background 180ms ease, opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.table tbody tr[data-status-state] td {
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.task-row[data-status-state="critical"] td,
.subtasks-row[data-status-state="critical"] td,
.todo-item[data-status-state="critical"] {
  background: color-mix(in srgb, #f87171 14%, rgba(18, 10, 12, 0.92));
}

body[data-theme="light"] .todo-item[data-status-state="critical"] {
  background: color-mix(in srgb, white 78%, #fca5a5 22%);
  border-color: #ef4444;
}

body[data-theme="light"] .task-row[data-status-state="critical"] td,
body[data-theme="light"] .subtasks-row[data-status-state="critical"] td {
  background: color-mix(in srgb, white 82%, #fecaca 18%);
}

.task-row[data-status-state="critical"] .editable[data-field="title"],
.subtasks-row[data-status-state="critical"] .editable[data-field="title"] {
  color: color-mix(in srgb, #ffd1d1 82%, var(--ink) 18%);
}

.task-row[data-status-state="critical"] td:not(:nth-child(4)) > *,
.subtasks-row[data-status-state="critical"] td:not(:nth-child(4)) > * {
  opacity: 0.68;
}

.task-row[data-status-state="critical"] td:nth-child(4) > *,
.subtasks-row[data-status-state="critical"] td:nth-child(4) > * {
  opacity: 1;
}

body[data-theme="light"] .task-row[data-status-state="critical"] .editable[data-field="title"],
body[data-theme="light"] .subtasks-row[data-status-state="critical"] .editable[data-field="title"],
body[data-theme="light"] .task-row[data-status-state="critical"] .github-task-link,
body[data-theme="light"] .subtasks-row[data-status-state="critical"] .github-task-link {
  color: #7f1d1d;
}

.task-row[data-status-state="complete"] td,
.subtasks-row[data-status-state="complete"] td {
  background: color-mix(in srgb, var(--success) 18%, rgba(10, 16, 22, 0.92));
}

.task-row[data-status-state="complete"] td:first-child,
.subtasks-row[data-status-state="complete"] td:first-child {
  box-shadow: none;
}

.task-row[data-status-state="complete"] .editable[data-field="title"],
.subtasks-row[data-status-state="complete"] .editable[data-field="title"],
.todo-item[data-status-state="complete"] .todo-item-title,
.task-row[data-status-state="complete"] .github-task-link,
.todo-item[data-status-state="complete"] .github-task-link {
  color: color-mix(in srgb, var(--ink) 52%, var(--success) 48%);
  text-decoration: none;
}

.task-row[data-status-state="complete"] td:not(:nth-child(4)) > *,
.subtasks-row[data-status-state="complete"] td:not(:nth-child(4)) > * {
  opacity: 0.48;
}

.task-row[data-status-state="complete"] td:nth-child(4) > *,
.subtasks-row[data-status-state="complete"] td:nth-child(4) > * {
  opacity: 1;
}

.task-row[data-status-state="complete"] .assignments .badge,
.subtasks-row[data-status-state="complete"] .assignments .badge,
.task-row[data-status-state="complete"] .github-assignments .badge,
.subtasks-row[data-status-state="complete"] .github-assignments .badge,
.task-row[data-status-state="complete"] .due-cell,
.subtasks-row[data-status-state="complete"] .due-cell {
  filter: saturate(0.7);
}

.todo-item[data-status-state="complete"] {
  opacity: 0.74;
  background: rgba(16, 20, 27, 0.56);
}

body[data-theme="light"] .task-row[data-status-state="complete"] td,
body[data-theme="light"] .subtasks-row[data-status-state="complete"] td {
  background: color-mix(in srgb, var(--success) 14%, white 86%);
}

body[data-theme="light"] .task-row[data-status-state="complete"] .editable[data-field="title"],
body[data-theme="light"] .subtasks-row[data-status-state="complete"] .editable[data-field="title"],
body[data-theme="light"] .todo-item[data-status-state="complete"] .todo-item-title,
body[data-theme="light"] .task-row[data-status-state="complete"] .github-task-link,
body[data-theme="light"] .todo-item[data-status-state="complete"] .github-task-link {
  color: color-mix(in srgb, var(--ink) 44%, var(--success) 56%);
}

.task-row[data-status-state="prereq"] td,
.subtasks-row[data-status-state="prereq"] td {
  background: color-mix(in srgb, #d6a117 16%, rgba(22, 18, 8, 0.92));
}

.task-row[data-status-state="prereq"] td:first-child,
.subtasks-row[data-status-state="prereq"] td:first-child {
  box-shadow: none;
}

.task-row[data-status-state="prereq"] .editable[data-field="title"],
.subtasks-row[data-status-state="prereq"] .editable[data-field="title"],
.task-row[data-status-state="prereq"] .github-task-link,
.subtasks-row[data-status-state="prereq"] .github-task-link {
  color: color-mix(in srgb, #f6dc8a 62%, var(--ink) 38%);
  text-decoration: none;
}

.task-row[data-status-state="prereq"] td:not(:nth-child(4)) > *,
.subtasks-row[data-status-state="prereq"] td:not(:nth-child(4)) > * {
  opacity: 0.58;
}

.task-row[data-status-state="prereq"] td:nth-child(4) > *,
.subtasks-row[data-status-state="prereq"] td:nth-child(4) > * {
  opacity: 1;
}

body[data-theme="light"] .task-row[data-status-state="prereq"] td,
body[data-theme="light"] .subtasks-row[data-status-state="prereq"] td {
  background: color-mix(in srgb, white 84%, #fde68a 16%);
}

body[data-theme="light"] .task-row[data-status-state="prereq"] .editable[data-field="title"],
body[data-theme="light"] .subtasks-row[data-status-state="prereq"] .editable[data-field="title"],
body[data-theme="light"] .task-row[data-status-state="prereq"] .github-task-link,
body[data-theme="light"] .subtasks-row[data-status-state="prereq"] .github-task-link {
  color: color-mix(in srgb, #8a5a00 76%, var(--ink) 24%);
}

body[data-theme="light"] .todo-item[data-status-state="complete"] {
  opacity: 0.82;
  background: color-mix(in srgb, var(--success) 12%, white 88%);
}

.status-editable {
  position: relative;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  min-width: 76px;
  padding: 4px 10px 4px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.prereq-glyph {
  width: 12px;
  height: 12px;
  display: inline-block;
  flex: 0 0 auto;
  color: currentColor;
  opacity: 1;
  visibility: visible;
  line-height: 0;
}

.prereq-glyph svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  color: inherit;
  opacity: 1;
  visibility: visible;
}

.prereq-glyph svg path {
  fill: currentColor;
}

.status-editable::before {
  content: "\f192";
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: color-mix(in srgb, var(--muted) 88%, var(--ink) 12%);
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
}

.status-editable[data-status-state="critical"] {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
  font-weight: 700;
}

.status-editable[data-status-state="critical"]::before {
  content: "\f071";
  color: #f87171;
}

.status-editable[data-status-state="complete"] {
  color: var(--success);
  font-weight: 700;
  border-color: rgba(110, 231, 183, 0.35);
  background: rgba(110, 231, 183, 0.1);
}

.status-editable[data-status-state="complete"]::before {
  content: "\f058";
  color: var(--success);
}

.status-editable[data-status-state="prereq"] {
  color: #f8e08f;
  font-weight: 700;
  border-color: color-mix(in srgb, #d6a117 72%, #7c5a05 28%);
  background: color-mix(in srgb, #d6a117 24%, rgba(38, 30, 8, 0.96));
}

.status-editable[data-status-state="prereq"]::before {
  content: "";
  width: 12px;
  height: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23d6a117' d='M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 48 0 320A160 160 0 1 0 256 96z'/></svg>");
  color: transparent;
}

body[data-theme="light"] .status-editable[data-status-state="complete"] {
  color: color-mix(in srgb, var(--success) 82%, #14532d 18%);
  border-color: color-mix(in srgb, var(--success) 38%, white 62%);
  background: color-mix(in srgb, var(--success) 12%, white 88%);
}

body[data-theme="light"] .status-editable[data-status-state="complete"]::before {
  color: color-mix(in srgb, var(--success) 82%, #14532d 18%);
}

body[data-theme="light"] .status-editable {
  background: color-mix(in srgb, white 94%, var(--panel-alt) 6%);
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

body[data-theme="light"] .status-editable[data-status-state="critical"] {
  border-color: color-mix(in srgb, #f87171 34%, white 66%);
  background: color-mix(in srgb, #f87171 12%, white 88%);
}

body[data-theme="light"] .status-editable[data-status-state="prereq"] {
  color: color-mix(in srgb, #d6a117 82%, #7c5b00 18%);
  border-color: color-mix(in srgb, #d6a117 34%, white 66%);
  background: color-mix(in srgb, #d6a117 12%, white 88%);
}

body[data-theme="light"] .status-editable[data-status-state="prereq"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23926b00' d='M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 48 0 320A160 160 0 1 0 256 96z'/></svg>");
}

.status-menu > button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-menu > button i {
  width: 14px;
  text-align: center;
  color: var(--muted);
}

.status-menu > button[data-status-option="open"] i {
  color: color-mix(in srgb, var(--muted) 88%, var(--ink) 12%);
}

.status-menu > button[data-status-option="critical"] i {
  color: #f87171;
}

.status-menu > button[data-status-option="complete"] i {
  color: var(--success);
}

.status-editable {
  cursor: pointer;
}

.status-menu {
  min-width: 180px;
}

.status-menu .status-menu-custom {
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-menu .status-menu-custom label {
  margin: 0;
  font-size: 11px;
}

.status-menu .status-menu-custom input {
  width: 100%;
}

.multi-status-menu {
  min-width: 300px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 8px;
}

.percentage-status-menu {
  min-width: 220px;
  padding: 10px 12px;
}

.percentage-status-menu-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.percentage-status-menu-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.percentage-status-menu input[type="range"] {
  width: 100%;
  margin: 0;
}

.multi-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 6px;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.multi-status-row:last-child {
  margin-bottom: 0;
}

.multi-status-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.multi-status-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}

.multi-status-avatar.has-photo .multi-status-avatar-initial {
  display: none;
}

.multi-status-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.multi-status-user-meta {
  min-width: 0;
}

.multi-status-user-name {
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi-status-user-email {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi-status-row.is-other-user .multi-status-user-name {
  color: color-mix(in srgb, var(--ink) 46%, var(--muted) 54%);
  font-weight: 500;
  opacity: 0.72;
}

.multi-status-row.is-other-user .multi-status-user-email {
  color: color-mix(in srgb, var(--muted) 68%, transparent 32%);
  opacity: 0.58;
}

.multi-status-row.is-other-user .multi-status-avatar {
  opacity: 0.52;
}

.multi-status-row.is-current-user .multi-status-user-name {
  color: var(--ink);
  font-weight: 700;
}

.multi-status-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.multi-status-action {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.multi-status-action:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.1);
}

.multi-status-action[data-status-value="open"] i {
  color: color-mix(in srgb, var(--muted) 88%, var(--ink) 12%);
}

.multi-status-action[data-status-value="critical"] i {
  color: #f87171;
}

.multi-status-action[data-status-value="complete"] i {
  color: var(--success);
}

.multi-status-action.is-active {
  transform: translateY(-1px);
  color: #f8fafc;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
}

.multi-status-action.is-active[data-status-value="open"] {
  border-color: rgba(148, 163, 184, 0.8);
  background: #64748b;
}

.multi-status-action.is-active[data-status-value="critical"] {
  border-color: rgba(248, 113, 113, 0.86);
  background: #dc2626;
}

.multi-status-action.is-active[data-status-value="complete"] {
  border-color: rgba(110, 231, 183, 0.82);
  background: #059669;
}

.multi-status-action.is-active i {
  color: #f8fafc;
}

.multi-status-action:disabled {
  opacity: 0.5;
  cursor: default;
}

.multi-status-readonly,
.multi-status-empty {
  font-size: 11px;
  color: var(--muted);
}

.multi-status-empty {
  padding: 6px 4px;
}

body[data-theme="light"] .multi-status-avatar {
  background: rgba(15, 23, 42, 0.06);
}

body[data-theme="light"] .multi-status-row {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.025);
}

body[data-theme="light"] .multi-status-action {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.12);
}

body[data-theme="light"] .multi-status-action:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.08);
}

body[data-theme="light"] .multi-status-action.is-active[data-status-value="open"] {
  background: #64748b;
  border-color: #64748b;
}

body[data-theme="light"] .multi-status-action.is-active[data-status-value="critical"] {
  background: #dc2626;
  border-color: #dc2626;
}

body[data-theme="light"] .multi-status-action.is-active[data-status-value="complete"] {
  background: #059669;
  border-color: #059669;
}

.tasks-table.drag-active tbody {
  position: relative;
}

.tasks-table.drag-target tbody {
  background: linear-gradient(180deg, rgba(76, 201, 240, 0.04), transparent 45%);
}

.task-row.drag-source {
  opacity: 0.38;
}

.task-row.task-row-draggable {
  cursor: default;
}

.task-drop-placeholder td {
  padding: 0;
  border-right: none;
  border-bottom: none;
}

.task-drop-slot {
  height: 14px;
  margin: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(76, 201, 240, 0.18), rgba(76, 201, 240, 0.72));
  box-shadow: 0 0 0 1px rgba(76, 201, 240, 0.16);
  animation: pulse-slot 900ms ease-in-out infinite alternate;
}

@keyframes pulse-slot {
  from {
    transform: scaleX(0.985);
    opacity: 0.72;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

.row-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
}

.task-drag-handle {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: grab;
  font-size: 11px;
  padding: 0 6px 0 8px;
  line-height: 1;
  letter-spacing: -1px;
  opacity: 0.84;
}

.task-drag-handle:hover {
  color: var(--accent);
}

.task-drag-handle:active {
  cursor: grabbing;
}

.table input {
  background: transparent;
  border: none;
  padding: 2px 0;
  width: 100%;
}

.table input:focus {
  outline: 1px solid rgba(76, 201, 240, 0.5);
  outline-offset: 2px;
}

.table .cell-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.new-row.is-empty .due-cell,
.new-row.is-empty [data-new-task-status],
.new-row.is-empty .assignments {
  opacity: 0;
  pointer-events: none;
}

.table .editable {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  padding: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.table .status-editable {
  width: 100%;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
  min-height: 26px;
  height: 26px;
  padding: 0 12px 0 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
  color: transparent;
  font-size: 0;
}

.table .status-editable::before {
  left: 50%;
  transform: translate(-50%, -50%);
}

.table td .status-editable[contenteditable="true"]:focus {
  color: inherit;
  font-size: 11px;
}

.table td .status-editable[contenteditable="true"]:focus::before {
  left: 9px;
  transform: translateY(-50%);
}

.table .status-editable[data-status-state="critical"] {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
}

.table .status-editable[data-status-state="complete"] {
  border-color: rgba(110, 231, 183, 0.35);
  background: rgba(110, 231, 183, 0.1);
  color: var(--success);
}

.table .status-editable[data-status-state="prereq"] {
  border-color: color-mix(in srgb, #d6a117 72%, #7c5a05 28%);
  background: color-mix(in srgb, #d6a117 24%, rgba(38, 30, 8, 0.96));
  color: #f8e08f;
  justify-content: flex-start;
  text-align: left;
  font-size: 11px;
}

.table .prereq-status-readonly.status-editable[data-status-state="prereq"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 26px;
  height: 26px;
  padding: 0 10px;
  box-sizing: border-box;
  text-align: center;
  border-color: color-mix(in srgb, #d6a117 72%, #7c5a05 28%);
  background: color-mix(in srgb, #d6a117 24%, rgba(38, 30, 8, 0.96));
  color: #f8e08f;
}

.tasks-table td [data-task-status-host] > .prereq-status-readonly.status-editable[data-status-state="prereq"],
.task-row [data-task-status-host] > .prereq-status-readonly.status-editable[data-status-state="prereq"],
.subtasks-row [data-task-status-host] > .prereq-status-readonly.status-editable[data-status-state="prereq"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, #d6a117 72%, #7c5a05 28%) !important;
  background: color-mix(in srgb, #d6a117 24%, rgba(38, 30, 8, 0.96)) !important;
  color: #f8e08f !important;
  text-align: center !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.table .prereq-status-readonly.status-editable[data-status-state="prereq"] .prereq-glyph {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin: 0;
}

.table .prereq-status-readonly.status-editable[data-status-state="prereq"] .prereq-status-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
}

.todo-status-cell.status-editable[data-status-state="prereq"] {
  color: #d6a117;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d6a117 44%, var(--border));
  font-size: 11px;
}

.prereq-status-readonly.status-editable[data-status-state="prereq"]::before {
  content: none;
  display: none;
}

.status-editable[data-status-state="prereq"] .prereq-status-label,
.todo-status-cell.status-editable[data-status-state="prereq"] .prereq-status-label,
.prereq-status-readonly .prereq-status-label {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.prereq-status-readonly.status-editable[data-status-state="prereq"] .prereq-glyph {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.status-editable[data-status-state="prereq"] .prereq-glyph,
.table .status-editable[data-status-state="prereq"] .prereq-glyph,
.todo-status-cell.status-editable[data-status-state="prereq"] .prereq-glyph {
  display: none !important;
}

.github-status-readonly {
  width: 100%;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  cursor: default;
  min-height: 26px;
  height: 26px;
  padding: 0 12px;
  box-sizing: border-box;
}

.github-status-readonly i {
  font-size: 12px;
}

.github-status-readonly::before {
  display: none;
}

.table td [data-task-status-host] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.table td [data-task-status-host] > .task-status-multi-button,
.table td [data-task-status-host] > .status-editable,
.table td [data-task-status-host] > .github-status-readonly {
  width: 100%;
}

.table td [data-task-status-host] > .task-status-multi-button {
  height: 26px;
  min-height: 26px;
}

.table td [data-task-status-host] > .task-status-multi-button .task-status-summary {
  width: 100%;
}

.table .task-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.table .task-cell.is-github {
  min-width: 0;
}

.table .task-cell .editable {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.task-link-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 0;
}

.task-link-badge {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  opacity: 0.86;
  transition: opacity 120ms ease, transform 120ms ease;
}

.task-link-badge:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.task-link-badge img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 4px;
}

.table .task-cell .info-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.table .task-cell .comment-button {
  flex: 0 0 auto;
  margin-left: 0;
}

.table .task-cell.has-info .info-btn {
  color: var(--accent);
}


.table .editable[contenteditable="true"]:focus {
  outline: 1px solid rgba(76, 201, 240, 0.5);
  outline-offset: 2px;
}

.table td .status-editable[contenteditable="true"]:focus {
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--accent) 44%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.03));
}

.table .invalid {
  outline: 1px solid rgba(255, 107, 107, 0.7);
  outline-offset: 2px;
}

.toggle-btn {
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
}

.assignments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.table .assignments,
.table .github-assignments {
  min-height: var(--tree-control-height, 26px);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.table .assignments.has-email-collaborator-assignment,
.table .github-assignments.has-email-collaborator-assignment {
  flex-direction: column;
  align-items: flex-start;
  overflow: visible;
}

.table .assignments .badge,
.table .github-assignments .badge {
  min-height: var(--tree-control-height, 26px);
  height: var(--tree-control-height, 26px);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  border-radius: var(--tree-control-radius, 999px);
  padding-top: 1px;
  padding-bottom: 1px;
  border-color: var(--border);
  min-width: 0;
  max-width: min(100%, 104px);
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}


.table .assignments .badge.user {
  border-color: var(--accent);
}

.table .assignments .badge.status-accepted {
  border-color: var(--success);
}

.table .assignments .badge.status-denied {
  border-color: #f87171;
}

.table .github-assignments .badge.github-badge {
  border-color: rgba(148, 163, 184, 0.34);
}

.table .assignments .badge > :not(.badge-icon),
.table .github-assignments .badge > :not(.badge-icon) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table .assignments .assign-action,
.table .github-assignments .assign-action {
  flex: 0 0 auto;
}

.table .assignments .badge-icon,
.table .github-assignments .badge-icon {
  width: calc(var(--tree-control-height, 26px) - 4px);
  height: calc(var(--tree-control-height, 26px) - 4px);
  min-width: calc(var(--tree-control-height, 26px) - 4px);
  min-height: calc(var(--tree-control-height, 26px) - 4px);
  box-sizing: border-box;
  align-self: center;
  border-width: 1.5px;
}

.assign-add-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.assign-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.assign-input.hidden {
  display: none;
}

.due-cell {
  display: flex;
  align-items: center;
  min-height: 28px;
  width: 100%;
  cursor: pointer;
}

.due-summary {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  padding: 6px 10px;
  font: inherit;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.task-row .due-summary,
.subtasks-row .due-summary {
  padding: 5px 8px;
  border-radius: 9px;
}

.due-summary:hover {
  border-color: rgba(76, 201, 240, 0.34);
  background: rgba(76, 201, 240, 0.08);
  color: var(--accent);
  transform: translateY(-1px);
}

.due-summary.is-active {
  border-color: rgba(76, 201, 240, 0.46);
  background: rgba(76, 201, 240, 0.12);
  color: var(--accent);
}

.due-summary:focus-visible {
  outline: 2px solid rgba(76, 201, 240, 0.4);
  outline-offset: 2px;
}

body[data-theme="light"] .due-summary {
  background: color-mix(in srgb, white 94%, var(--panel-alt) 6%);
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

body[data-theme="light"] .due-summary.is-fallback {
  background: color-mix(in srgb, white 95%, var(--panel-alt) 5%);
}

body[data-theme="light"] .due-summary.is-active {
  background: color-mix(in srgb, var(--accent) 12%, white 88%);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border) 58%);
  color: color-mix(in srgb, var(--accent-strong) 78%, #0f172a 22%);
}

.due-summary.is-fallback {
  color: var(--muted);
}

.due-summary.is-progress {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 18%, transparent) 0,
      color-mix(in srgb, var(--accent) 18%, transparent) var(--due-progress, 0%),
      rgba(255, 255, 255, 0.03) var(--due-progress, 0%),
      rgba(255, 255, 255, 0.03) 100%
    );
}

body[data-theme="light"] .due-summary.is-progress {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 16%, white 84%) 0,
      color-mix(in srgb, var(--accent) 16%, white 84%) var(--due-progress, 0%),
      color-mix(in srgb, white 94%, var(--panel-alt) 6%) var(--due-progress, 0%),
      color-mix(in srgb, white 94%, var(--panel-alt) 6%) 100%
    );
}

.due-summary-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.due-input.hidden {
  display: none;
}

.due-input {
  width: 100%;
}

.assignments .assign-action {
  display: flex;
  gap: 6px;
  align-items: center;
}

.assignments .assign-spacer {
  margin-left: auto;
}

.icon-button {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
}

.icon-button:hover {
  border-color: #4b5563;
  color: #e5e7eb;
}

.assign-suggest {
  position: absolute;
  background: color-mix(in srgb, var(--panel) 96%, var(--panel-alt) 4%);
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--ink-soft) 12%);
  border-radius: 10px;
  min-width: 220px;
  max-width: 320px;
  z-index: 1000;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 16%, transparent);
  padding: 6px 0;
  backdrop-filter: blur(8px);
}

.assign-suggest button {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 6px 10px;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.assign-suggest button:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.assign-suggest button.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.assign-suggest-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--panel-alt) 84%, var(--panel) 16%);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}

.assign-suggest-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.assign-suggest-avatar.is-add-me {
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel) 84%);
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
}

.light-mode .assign-suggest {
  background: color-mix(in srgb, white 92%, var(--panel) 8%);
  border-color: color-mix(in srgb, var(--border) 82%, var(--ink-soft) 18%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.light-mode .assign-suggest button:hover {
  background: color-mix(in srgb, var(--accent) 12%, white 88%);
}

.light-mode .assign-suggest button.is-active {
  background: color-mix(in srgb, var(--accent) 16%, white 84%);
}

.light-mode .assign-suggest-avatar {
  background: color-mix(in srgb, var(--panel-alt) 50%, white 50%);
}

.assign-suggest-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.assign-suggest-label {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assign-meta {
  color: var(--muted);
  font-size: 11px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 1px 7px 1px 2px;
  font-size: 11px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
}

.badge .badge-icon {
  margin-left: -3px;
}

.badge.user {
  border-color: rgba(76, 201, 240, 0.35);
}

.badge.github-badge {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(148, 163, 184, 0.08);
}

.badge.status-accepted {
  border-color: rgba(110, 231, 183, 0.55);
  box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.14);
}

.badge.status-accepted .badge-icon {
  border-color: var(--success);
  box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.18);
}

.badge.status-denied {
  border-color: rgba(248, 113, 113, 0.55);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.14);
}

.badge.status-denied .badge-icon {
  border-color: #f87171;
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.18);
}

.badge-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.badge.user .badge-icon {
  background: var(--accent);
  color: #041015;
  border-color: var(--accent);
}

.badge-group-member .badge-icon {
  cursor: default;
}

.badge.github-badge .badge-icon {
  background: rgba(15, 20, 28, 0.9);
  color: #f8fafc;
  border-color: rgba(148, 163, 184, 0.34);
  cursor: default;
}

.badge-icon.has-photo {
  background: transparent;
  border-color: var(--border);
}

.badge.github-badge .badge-icon.has-photo {
  border-color: rgba(148, 163, 184, 0.34);
}

.badge-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

.badge-icon.has-photo .badge-initial {
  display: none;
}

.badge-icon .badge-x {
  position: absolute;
  opacity: 0;
  font-size: 12px;
}

.badge:hover .badge-icon .badge-x {
  opacity: 1;
  color: #e5e7eb;
}

.badge:hover .badge-icon .badge-initial {
  opacity: 0;
}

.badge:hover .badge-icon .badge-photo {
  opacity: 0;
}

.badge.github-badge:hover .badge-icon .badge-x {
  opacity: 0;
}

.badge.github-badge:hover .badge-icon .badge-initial,
.badge.github-badge:hover .badge-icon .badge-photo {
  opacity: 1;
}

.github-assignments {
  min-height: 24px;
}

.btn.link {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

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

.assign-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.info-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.info-editor {
  min-height: 180px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0f141c;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  overflow-y: auto;
}

.info-editor:focus {
  outline: 1px solid rgba(76, 201, 240, 0.45);
  outline-offset: 2px;
}

.info-upload-row {
  margin-top: 12px;
}

.info-attachments {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-attachment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--grid);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.info-attachment a {
  color: var(--ink);
  text-decoration: none;
}

.info-attachment a:hover {
  color: var(--accent);
}

.tree-cell {
  position: relative;
  padding-left: 18px;
}

.tree-cell::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -10px;
  bottom: -10px;
  width: 1px;
  background: var(--grid);
}

.tree-cell::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: var(--grid);
}

.subtask-row .tree-cell::before {
  top: -12px;
  bottom: -12px;
}

.subtask-row.last .tree-cell::before {
  bottom: 50%;
}

.subtask-row td {
  background: rgba(10, 12, 18, 0.35);
}

.split {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.sidebar h3 {
  margin: 0 0 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.project-list {
  padding: 0;
  margin: 0;
}

.project-list .project-item,
.sidebar-stack > .sidebar-stack-item > .project-item {
  position: relative;
  margin-bottom: 0;
  padding: 9px 14px 9px 14px;
  cursor: pointer;
  border: 1px solid transparent;
  border-left: none;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: color-mix(in srgb, var(--ink) 72%, var(--muted) 28%);
  opacity: 0.74;
  filter: none;
  overflow: visible;
  transition: border-color 140ms ease, background 140ms ease, opacity 140ms ease, color 140ms ease;
}

.project-list .project-item::before,
.sidebar-stack > .sidebar-stack-item > .project-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--project-color, var(--accent)) 84%, transparent);
  opacity: 0.28;
  transition: opacity 140ms ease, width 140ms ease, background 140ms ease;
}

.project-list .project-item:hover,
.sidebar-stack > .sidebar-stack-item > .project-item:hover {
  opacity: 1;
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  background: color-mix(in srgb, var(--panel) 86%, white 14%);
  color: var(--ink);
}

.project-list .project-item a,
.sidebar-stack > .sidebar-stack-item > .project-item a,
.project-list .project-item strong,
.sidebar-stack > .sidebar-stack-item > .project-item strong {
  color: inherit;
}

.project-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.project-item-top strong {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-theme-family="emacs"] .project-item-top strong,
body[data-theme-family="emacs"] .todo-tree-node.is-project .todo-tree-label,
body[data-theme-family="emacs"] [data-selected-project-name] {
  position: relative;
}

body[data-theme-family="emacs"] .project-item-top strong::before,
body[data-theme-family="emacs"] .todo-tree-node.is-project .todo-tree-label::before,
body[data-theme-family="emacs"] [data-selected-project-name]::before {
  display: inline-block;
  margin-right: 0.4rem;
}

body[data-theme-family="emacs"] .project-list .project-item:nth-of-type(4n + 1) .project-item-top strong::before,
body[data-theme-family="emacs"] .sidebar-stack > .sidebar-stack-item:nth-of-type(4n + 1) .project-item-top strong::before,
body[data-theme-family="emacs"] .todo-tree-node.is-project:nth-of-type(4n + 1) .todo-tree-label::before,
body[data-theme-family="emacs"] [data-selected-project-name]::before {
  content: "🙂";
}

body[data-theme-family="emacs"] .project-list .project-item:nth-of-type(4n + 2) .project-item-top strong::before,
body[data-theme-family="emacs"] .sidebar-stack > .sidebar-stack-item:nth-of-type(4n + 2) .project-item-top strong::before,
body[data-theme-family="emacs"] .todo-tree-node.is-project:nth-of-type(4n + 2) .todo-tree-label::before {
  content: "😊";
}

body[data-theme-family="emacs"] .project-list .project-item:nth-of-type(4n + 3) .project-item-top strong::before,
body[data-theme-family="emacs"] .sidebar-stack > .sidebar-stack-item:nth-of-type(4n + 3) .project-item-top strong::before,
body[data-theme-family="emacs"] .todo-tree-node.is-project:nth-of-type(4n + 3) .todo-tree-label::before {
  content: "😄";
}

body[data-theme-family="emacs"] .project-list .project-item:nth-of-type(4n) .project-item-top strong::before,
body[data-theme-family="emacs"] .sidebar-stack > .sidebar-stack-item:nth-of-type(4n) .project-item-top strong::before,
body[data-theme-family="emacs"] .todo-tree-node.is-project:nth-of-type(4n) .todo-tree-label::before {
  content: "😁";
}

.emacs-click-toast-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
}

.emacs-click-toast {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #fff6bf 72%, white 28%);
  color: #2e5a15;
  border: 1px solid rgba(255, 214, 94, 0.92);
  box-shadow: 0 8px 18px rgba(255, 196, 74, 0.22);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92) rotate(var(--toast-tilt, -2deg));
  animation: emacsToastPop 900ms ease forwards;
}

.vim-click-toast {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(420px, calc(100vw - 32px));
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(16, 16, 16, 0.98);
  color: #b8b8b8;
  border: 1px solid #303030;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: vimToastFade 2200ms ease forwards;
}

@keyframes emacsToastPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -42%) scale(0.88) rotate(var(--toast-tilt, -2deg));
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -56%) scale(1) rotate(var(--toast-tilt, -2deg));
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -72%) scale(1) rotate(var(--toast-tilt, -2deg));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -92%) scale(0.98) rotate(var(--toast-tilt, -2deg));
  }
}

@keyframes vimToastFade {
  0% {
    opacity: 0;
    transform: translate(-50%, -44%);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  84% {
    opacity: 1;
    transform: translate(-50%, -54%);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -58%);
  }
}

.project-list .project-item .avatar-stack,
.sidebar-stack > .sidebar-stack-item > .project-item .avatar-stack {
  opacity: 0.72;
  width: auto;
  flex: 0 0 auto;
  overflow: visible;
  justify-content: flex-end;
  margin-left: auto;
  min-width: 22px;
  padding-right: 4px;
}

.project-list .project-item.active,
.sidebar-stack > .sidebar-stack-item > .project-item.active {
  border-color: color-mix(in srgb, white 22%, var(--border) 78%);
  background: color-mix(in srgb, var(--panel) 92%, white 8%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: var(--ink);
  opacity: 1;
  filter: none;
}

.project-list .project-item.active::before,
.sidebar-stack > .sidebar-stack-item > .project-item.active::before {
  width: 6px;
  opacity: 1;
  background: var(--project-color, var(--accent));
}

.project-list .project-item.active .project-item-top strong,
.sidebar-stack > .sidebar-stack-item > .project-item.active .project-item-top strong {
  font-weight: 700;
}

.project-list .project-item.active .avatar-stack,
.sidebar-stack > .sidebar-stack-item > .project-item.active .avatar-stack {
  opacity: 1;
}

body[data-theme="light"] .project-list .project-item,
body[data-theme="light"] .sidebar-stack > .sidebar-stack-item > .project-item {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: color-mix(in srgb, var(--ink) 84%, var(--project-color, var(--muted)) 16%);
  opacity: 0.82;
  filter: none;
}

body[data-theme="light"] .project-list .project-item:hover,
body[data-theme="light"] .sidebar-stack > .sidebar-stack-item > .project-item:hover {
  opacity: 1;
  border-color: color-mix(in srgb, var(--border) 90%, white 10%);
  background: color-mix(in srgb, white 96%, #dbe4ee 4%);
}

body[data-theme="light"] .project-list .project-item .avatar-stack,
body[data-theme="light"] .sidebar-stack > .sidebar-stack-item > .project-item .avatar-stack {
  opacity: 0.82;
}

body[data-theme="light"] .project-list .project-item.active,
body[data-theme="light"] .sidebar-stack > .sidebar-stack-item > .project-item.active {
  background: white;
  border-color: color-mix(in srgb, #243447 16%, var(--border) 84%);
  box-shadow:
    inset 0 0 0 1px rgba(36, 52, 71, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.92);
  color: var(--ink);
}

body[data-theme="light"] .project-item-top strong {
  color: color-mix(in srgb, var(--ink) 82%, var(--project-color, var(--muted)) 18%);
}

.direct-projects-section {
  margin-top: 0;
  padding-top: 4px;
  min-height: 0;
}

.direct-projects-heading {
  margin-bottom: 8px;
}

.direct-project-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.todo-sidebar-section .todo-tree-list.tree-select-list {
  gap: 0;
  margin-top: 6px;
}

.direct-project-item {
  --project-color: #9aa6b2;
}

.avatar-stack.is-direct {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  min-width: 22px;
  padding-right: 4px;
}

.sidebar-mini-add {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, white 8%);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.sidebar-mini-add:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel) 88%);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border) 60%);
}

.direct-project-empty {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
}

body[data-theme="light"] .direct-projects-section {
  border-top-color: color-mix(in srgb, var(--border) 90%, white 10%);
}

body[data-theme="light"] .sidebar-mini-add {
  background: white;
  border-color: color-mix(in srgb, var(--border) 88%, white 12%);
}

body[data-theme="light"] .sidebar-split-divider::before {
  background: color-mix(in srgb, var(--border) 88%, white 12%);
}

body[data-theme="light"] .sidebar-split-divider::after {
  background: color-mix(in srgb, #94a3b8 55%, white 45%);
}

.sidebar-division {
  margin-top: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  line-height: 1;
}

.sidebar-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sidebar-division-title {
  margin: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--division-color, var(--muted));
  line-height: 1;
  text-shadow: none;
}

body[data-theme="light"] .sidebar-division-title {
  color: color-mix(in srgb, var(--division-color, var(--muted)) 98%, #243447 2%);
  text-shadow: none;
}

.sidebar-section-add {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

.sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-stack.is-dragging .sidebar-insert-row {
  opacity: 0.72;
}

.sidebar-stack-item {
  position: relative;
}

.sidebar-stack-item.dragging {
  opacity: 0.38;
}

.sidebar-stack-item.drag-over {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 8px;
}

.project-item.dragging {
  opacity: 0.42;
}

.sidebar-division-rule {
  flex: 1 1 auto;
  height: 1px;
  background: color-mix(in srgb, var(--division-color, var(--border)) 55%, transparent);
}

body[data-theme="light"] .sidebar-division-rule {
  background: color-mix(in srgb, var(--division-color, var(--border)) 88%, white 12%);
}

.sidebar-insert-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: 10px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.sidebar-insert-row:hover,
.sidebar-insert-row.is-open,
.sidebar-insert-row.drag-over {
  opacity: 1;
}

.sidebar-insert-row.is-open {
  justify-content: stretch;
}

.sidebar-insert-line {
  flex: 1 1 auto;
  height: 2px;
  background: color-mix(in srgb, var(--accent) 42%, var(--border) 58%);
  opacity: 0;
  border-radius: 999px;
  transform: scaleX(0.92);
  transition: opacity 120ms ease, transform 120ms ease, background 120ms ease;
}

.sidebar-insert-row:hover .sidebar-insert-line,
.sidebar-insert-row.is-open .sidebar-insert-line,
.sidebar-insert-row.drag-over .sidebar-insert-line {
  opacity: 1;
  transform: scaleX(1);
}

.sidebar-stack.is-dragging .sidebar-insert-row.drag-over .sidebar-insert-line {
  background: var(--accent);
}

.sidebar-insert-btn {
  width: 22px;
  height: 22px;
  margin: 0 8px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border) 55%);
  background: var(--panel);
  color: var(--accent);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.sidebar-insert-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--panel) 72%, var(--accent) 28%);
}

.sidebar-insert-chooser {
  width: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
}

.sidebar-insert-row.is-open .sidebar-insert-btn {
  display: none;
}

.sidebar-insert-row.is-open .sidebar-insert-chooser {
  display: flex;
}

.sidebar-insert-choice {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border) 76%);
  background: color-mix(in srgb, var(--panel) 82%, var(--accent) 18%);
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
}

.sidebar-insert-choice:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border) 48%);
}

.sidebar-insert-close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
}

.sidebar-stack-item .project-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 1px;
}

.context-menu-submenu {
  position: relative;
}

.context-menu-submenu > button::after {
  content: "›";
  float: right;
  margin-left: 14px;
  color: var(--muted);
}

.context-submenu-panel {
  display: none;
  position: absolute;
  top: -8px;
  left: calc(100% - 6px);
  z-index: 40;
  min-width: 190px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 98%, var(--panel-alt) 2%);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28);
}

body[data-theme="light"] .context-submenu-panel {
  background: color-mix(in srgb, white 96%, var(--panel-alt) 4%);
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
}

.context-menu-submenu.is-open .context-submenu-panel {
  display: block;
}

.color-menu-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

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

.color-preset {
  appearance: none;
  display: block;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--swatch) 65%, white);
  background: var(--swatch);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

.color-preset:hover,
.color-preset.is-active {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--swatch) 30%, transparent), 0 6px 14px rgba(0, 0, 0, 0.2);
}

.color-custom-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.color-custom-row input[type="color"] {
  width: 36px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

body[data-theme="light"] .color-custom-row input[type="color"] {
  background: var(--panel);
}

.color-menu-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.sidebar-plus-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border) 55%);
  background: var(--panel);
  color: var(--accent);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease;
}

.sidebar-plus-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--panel) 72%, var(--accent) 28%);
}

.sidebar .project-list:last-child {
  margin-bottom: 0;
}

.project-drop-target {
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.project-drop-target.drag-over {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
  background: color-mix(in srgb, var(--panel) 82%, var(--accent) 18%);
  transform: translateX(1px);
}

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

@media (max-width: 900px) {
  :root {
    --mobile-bottom-nav-offset: calc(82px + env(safe-area-inset-bottom, 0px));
    --mobile-bottom-nav-height: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  header {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0 16px;
    height: auto;
    max-height: none;
    overflow-x: visible;
    overflow-y: visible;
  }

  .header-brand,
  .header-actions {
    min-height: 52px;
  }

  .header-center {
    grid-column: 1 / -1;
    order: 3;
    border-top: 0;
    position: static;
  }

  .mobile-sidebar-trigger {
    display: inline-flex;
    margin-right: 1px;
    opacity: 1;
    width: 36px;
    overflow: hidden;
    transition: width 220ms ease, margin-right 220ms ease, opacity 180ms ease;
  }

  body.mobile-no-sidebar-trigger .mobile-sidebar-trigger {
    display: inline-flex;
    width: 0;
    margin-right: 0;
    opacity: 0;
    pointer-events: none;
  }

  body.mobile-no-sidebar-trigger .header-brand {
    gap: 0;
    justify-content: flex-start;
  }

  .header-brand a {
    transition: transform 220ms ease;
  }

  body.mobile-no-sidebar-trigger .header-brand a {
    transform: translateX(-14px);
  }

  .header-center {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
  }

  .view-switcher {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-bottom: 0;
  }

  .header-center .view-switcher {
    display: none;
  }

  .mobile-bottom-nav {
    display: block;
    position: fixed;
    left: env(safe-area-inset-left, 0px);
    right: env(safe-area-inset-right, 0px);
    bottom: 0;
    z-index: 530;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--header-bg) 72%, transparent) 0%, color-mix(in srgb, var(--header-bg) 96%, var(--panel) 4%) 100%);
    backdrop-filter: blur(18px);
    border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    box-shadow: 0 -16px 34px rgba(0, 0, 0, 0.18);
  }

  .mobile-bottom-nav-slot .view-search {
    display: none;
  }

  .notifications-menu,
  .account-menu,
  .view-search-menu {
    position: fixed;
    top: var(--mobile-header-menu-top, var(--mobile-sidebar-top, 96px));
    right: 12px;
    width: min(320px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    z-index: 520;
  }

  .notifications-menu,
  .account-menu {
    max-height: calc(100dvh - var(--mobile-header-menu-top, var(--mobile-sidebar-top, 96px)) - 12px);
    overflow-y: auto;
  }

  .view-search-menu {
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100dvh - var(--mobile-header-menu-top, var(--mobile-sidebar-top, 96px)) - 12px);
  }

  .account-trigger {
    padding: 3px;
    gap: 0;
  }

  .account-meta,
  .account-chevron {
    display: none;
  }

  .account-avatar {
    width: 36px;
    height: 36px;
  }

  .todo-item-main .task-pill,
  .task-cell .task-pill {
    display: none;
  }

  .layout {
    display: block;
    height: calc(100dvh - var(--mobile-sidebar-top, 96px) - var(--mobile-bottom-nav-offset));
    max-height: calc(100dvh - var(--mobile-sidebar-top, 96px) - var(--mobile-bottom-nav-offset));
    min-height: 0;
  }

  main,
  .layout,
  .content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  main {
    height: calc(100dvh - var(--mobile-sidebar-top, 96px) - var(--mobile-bottom-nav-offset));
    max-height: calc(100dvh - var(--mobile-sidebar-top, 96px) - var(--mobile-bottom-nav-offset));
    min-height: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .content > *,
  .discussion-drawer > *,
  .discussion-pane > *,
  .discussion-settings,
  .discussion-compose,
  .discussion-list {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .inbox-view {
    padding: 0;
  }

  .inbox-header,
  .inbox-item {
    padding-left: 14px;
    padding-right: 14px;
  }

  .inbox-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .inbox-filters {
    justify-content: flex-start;
    width: 100%;
  }

  .inbox-filter {
    flex: 1 1 150px;
  }

  .inbox-filter select {
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .inbox-actor-dropdown {
    min-width: 0;
    width: 100%;
  }

  .inbox-actor-menu {
    left: 0;
    right: auto;
    width: min(280px, calc(100vw - 28px));
  }

  .panel,
  .group-block,
  .ungrouped-table-shell,
  .todo-board,
  .todo-date-group {
    max-width: 100%;
    box-sizing: border-box;
  }

  .discussion-drawer {
    top: var(--mobile-sidebar-top, 96px);
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: calc(100dvh - var(--mobile-sidebar-top, 96px));
    max-height: calc(100dvh - var(--mobile-sidebar-top, 96px));
    max-width: none;
    z-index: 260;
    box-sizing: border-box;
  }

  .discussion-settings-grid .discussion-setting-field.is-inline {
    justify-content: flex-start;
  }

  .discussion-setting-due-wrap {
    width: auto;
    min-width: 0;
    max-width: 220px;
    flex: 1 1 auto;
    flex-wrap: nowrap;
  }

  .discussion-setting-due-wrap select,
  .discussion-setting-due-wrap input {
    min-width: 0;
  }

  .discussion-setting-due-wrap select {
    flex: 0 0 96px;
    width: 96px;
  }

  .discussion-setting-due-wrap input {
    flex: 1 1 auto;
    width: 0;
  }

  .sidebar {
    display: none;
    border-right: none;
    border-bottom: 0;
    max-width: 100%;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: auto;
    max-height: none;
    z-index: 170;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
    box-shadow: none;
    padding:
      var(--mobile-sidebar-top, 96px)
      0
      calc(var(--mobile-bottom-nav-height, var(--mobile-bottom-nav-offset, 82px)) + env(safe-area-inset-bottom, 0px) + 24px);
    height: 100dvh;
    box-sizing: border-box;
    overflow-y: auto;
  }

  .content {
    display: block;
    box-sizing: border-box;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    padding-bottom: calc(var(--mobile-bottom-nav-height, var(--mobile-bottom-nav-offset, 82px)) + 18px);
  }

  .sidebar-collapse-handle {
    display: none;
  }

  .sidebar.is-mobile-open,
  .sidebar.is-mobile-closing {
    display: block;
  }

  .sidebar.is-mobile-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar.is-mobile-closing {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
  }

  .mobile-sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(11, 13, 18, 0.42);
    backdrop-filter: blur(2px);
    z-index: 160;
    overflow: hidden;
  }

  .mobile-sidebar-backdrop.is-open {
    display: block;
  }

  .sidebar.todo-tree .sidebar-split-pane {
    width: 100%;
    margin-left: 0;
    padding: 0 0 0 0;
    overflow-x: hidden;
  }

  .sidebar.todo-tree {
    padding-top: 0;
  }

  .sidebar.todo-tree .sidebar-split-pane > .todo-sidebar-section:first-child,
  .sidebar.todo-tree .todo-tree-list:first-child,
  .sidebar.todo-tree .tree-select-list:first-child {
    margin-top: 0;
    padding-top: 0;
  }

  .sidebar .todo-sidebar-section.is-top,
  .sidebar .todo-sidebar-subhead.is-top,
  .sidebar .todo-tree-list,
  .sidebar .tree-select-list,
  .sidebar .sidebar-split-pane {
    margin-top: 0;
    padding-top: 0;
  }

  .sidebar .todo-tree-children {
    padding-left: 0 !important;
  }

  .sidebar .todo-tree-node.is-project > .todo-tree-row {
    --tree-row-indent: 12px !important;
  }

  .sidebar .todo-tree-group-row {
    --tree-row-indent: 24px !important;
  }

  .sidebar .todo-tree-node[data-tree-direct-project] > .todo-tree-row,
  .sidebar .todo-tree-row[data-tree-division-row] {
    --tree-row-indent: 0px !important;
  }

  .sidebar .sidebar-heading-row.todo-sidebar-subhead,
  .sidebar .sidebar-heading-row.direct-projects-heading {
    padding-top: 8px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-tree-list {
    gap: 6px;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-sidebar-section {
    margin-top: 14px;
    padding-top: 10px;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-tree-row,
  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-tree-group-row,
  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-filter-row,
  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-assignee-row {
    min-height: 40px;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-tree-row {
    width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
    padding: 0 18px 0 calc(18px + var(--tree-row-indent, 0px)) !important;
    box-sizing: border-box;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-tree-label-row,
  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-assignee-row {
    grid-template-columns: 18px minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 10px;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-tree-group-row {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
    padding: 0 18px 0 calc(18px + var(--tree-row-indent, 0px)) !important;
    box-sizing: border-box;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] [data-todo-completed-node] > .todo-tree-row {
    --tree-row-indent: 0px;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] [data-todo-completed-node] {
    width: 100%;
    margin-left: 0;
    background: transparent;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-tree-completed-options .todo-tree-row {
    background: transparent;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-tree-completed-options {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-tree-completed-options .todo-tree-group-row .todo-tree-label {
    margin-left: 0;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-tree-checkbox {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 4px;
    background-size: 14px 14px;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-tree-toggle {
    width: 28px;
    height: 28px;
    font-size: 13px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    transform: none;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-tree-label {
    font-size: 14px;
    line-height: 1.25;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-tree-only-btn {
    display: none;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-tree-completed-options {
    gap: 2px;
    padding-top: 2px;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-assignee-dropdown {
    margin-top: 8px;
    padding: 0 18px;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-assignee-trigger {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 12px;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-assignee-menu {
    position: static;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    box-shadow: none;
    max-height: min(46dvh, 360px);
    overflow-y: auto;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-assignee-actions {
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-assignee-actions .btn {
    min-height: 32px;
    padding: 6px 10px;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-assignee-row {
    grid-template-columns: 18px 24px minmax(0, 1fr);
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-assignee-avatar {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"].is-active {
    height: auto;
    min-height: 100%;
    padding-bottom: calc((var(--mobile-bottom-nav-height, var(--mobile-bottom-nav-offset, 82px)) * 1.75) + env(safe-area-inset-bottom, 0px) + 40px);
    box-sizing: border-box;
  }

  .sidebar.todo-tree .sidebar-split-shell {
    padding-bottom: calc(var(--mobile-bottom-nav-height, var(--mobile-bottom-nav-offset, 82px)) + env(safe-area-inset-bottom, 0px) + 24px);
  }

  .sidebar-split-shell {
    height: 100%;
    min-height: 100%;
    grid-template-rows: minmax(0, 1fr) 12px minmax(0, 1fr);
    max-width: 100%;
    box-sizing: border-box;
  }

  .sidebar.todo-tree .sidebar-split-shell {
    height: auto;
    min-height: 100%;
    grid-template-rows: auto 12px auto;
    align-content: start;
  }

  .sidebar.todo-tree .sidebar-split-pane {
    overflow: visible;
    min-height: 0;
  }

  .sidebar-split-shell,
  .sidebar-split-pane,
  .todo-tree-list,
  .tree-select-list,
  .todo-tree-node {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  body.mobile-sidebar-open main,
  body.mobile-sidebar-open .layout,
  body.mobile-sidebar-open .content {
    overflow: hidden !important;
  }

  .dashboard-sidebar-pane[data-dashboard-sidebar-pane="todo"] .todo-assignee-list {
    max-height: none;
    overflow: visible;
  }

  .todo-tree-row {
    --tree-row-indent: 0px;
    width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    min-height: 36px;
    padding: 0 !important;
  }

  .tree-select-button {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 7px 18px 7px calc(18px + var(--tree-row-indent, 0px)) !important;
  }

  .todo-tree-row[data-tree-project-row] .todo-tree-toggle,
  .todo-tree-row[data-tree-division-row] .todo-tree-toggle {
    margin-left: 0;
    margin-right: 6px;
  }

  .todo-tree-row[data-tree-project-row] > .shared-with-me-icon {
    margin-right: 6px;
  }

  .todo-tree-label-row,
  .tree-select-button,
  .todo-tree-label {
    min-width: 0;
  }

  .todo-tree-label {
    font-size: 15px;
    font-weight: 600;
  }

  .todo-tree-toggle {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  .todo-tree-group-row .todo-tree-label {
    font-size: 14px;
  }

  .sidebar-heading-row h3 {
    font-size: 14px;
  }

  .todo-board,
  .todo-date-group,
  .todo-list,
  .todo-item {
    width: 100%;
    max-width: 100%;
  }

  .todo-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main meta"
      "controls controls";
    gap: 6px 10px;
    padding: 8px 10px;
    align-items: start;
  }

  .todo-resize-handle {
    display: none;
  }

  .todo-project-meta,
  .todo-item-main,
  .todo-item-controls {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .todo-item-main {
    order: 1 !important;
    grid-area: main;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    padding-right: 0;
    min-width: 0;
  }

  .todo-project-meta {
    grid-area: meta;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    align-self: start;
    justify-self: end;
    gap: 2px;
    font-size: 11px;
    line-height: 1.2;
    color: var(--muted);
    min-width: max-content;
    width: max-content;
    max-width: 40%;
    padding-left: 8px;
    overflow: hidden;
    text-align: right;
  }

  .todo-project-name,
  .todo-group-name {
    display: block;
    min-width: 0;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    margin-left: auto;
  }

  .todo-project-meta:not(:has(.todo-group-name)) .todo-project-name {
    white-space: normal;
    overflow: hidden;
    text-overflow: initial;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-width: 100%;
  }

  .todo-project-meta a {
    pointer-events: none;
    cursor: default;
  }

  .todo-group-name::before {
    content: "·";
    margin-right: 6px;
    opacity: 0.65;
  }

  .todo-item-main .task-link-badges {
    display: none;
  }

  .todo-item-title,
  .todo-item-main .github-task-link span {
    font-size: 14px;
    font-weight: 600;
  }

  .todo-item-controls {
    order: 2;
    grid-area: controls;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "status due spacer assign";
    align-items: center;
    column-gap: 8px;
  }

  .todo-item-controls .todo-control-cluster {
    display: contents;
  }

  .todo-item-controls .todo-control-due {
    grid-area: due;
    width: auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-self: start;
  }

  .todo-item-controls .todo-control-status {
    grid-area: status;
    width: auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-self: start;
  }

  .todo-due-cell .due-summary {
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: 22px;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
  }

  .todo-due-cell .due-summary-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 100%;
    gap: 4px;
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
  }

  .todo-due-cell .due-summary-label i {
    font-size: 11px;
  }

  body[data-theme="light"] .todo-due-cell .due-summary {
    background: color-mix(in srgb, white 94%, var(--panel-alt) 6%);
    border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  }

  .todo-assignments .badge,
  .todo-assignments .badge.user,
  .github-assignments .badge {
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .todo-assignments .badge-label,
  .github-assignments .badge-label {
    display: none;
  }

  .todo-assignments .badge-icon,
  .todo-assignments .badge.user .badge-icon,
  .github-assignments .badge-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  .todo-assignments .badge-icon .badge-x,
  .github-assignments .badge-icon .badge-x {
    display: none !important;
  }

  .todo-assignments .badge-icon[data-remove-assignment],
  .github-assignments .badge-icon[data-remove-assignment] {
    pointer-events: none;
    cursor: default;
  }

  .todo-assignments .badge-icon .badge-initial,
  .todo-assignments .badge-icon .badge-photo,
  .github-assignments .badge-icon .badge-initial,
  .github-assignments .badge-icon .badge-photo {
    opacity: 1 !important;
  }

  .todo-item-controls .assign-action,
  .todo-item-controls .assign-spacer {
    display: none;
  }

  .todo-item-controls {
    gap: 0;
  }

  .todo-item-controls .todo-control-assignees,
  .todo-item-controls .todo-assignments,
  .todo-item-controls .github-assignments {
    grid-area: assign;
    width: auto;
    max-width: 132px;
    justify-self: end;
    justify-content: flex-end;
    overflow: visible;
    flex-wrap: nowrap;
    gap: 4px;
  }

  .todo-item-controls .todo-control-assignees,
  .todo-item-controls .todo-assignments,
  .todo-item-controls .github-assignments,
  .todo-due-cell .due-summary,
  .todo-item-controls .todo-control-status [data-task-status-host] > .task-status-multi-button,
  .todo-item-controls .todo-control-status [data-task-status-host] > .status-editable,
  .todo-item-controls .todo-control-status .status-editable {
    min-height: 22px;
    height: 22px;
    box-sizing: border-box;
    align-items: center;
  }

  .todo-item-controls > * {
    justify-self: stretch;
  }

  .panel.group,
  .ungrouped-table-shell,
  .panel,
  .tasks-table {
    overflow-x: auto;
    max-width: 100%;
  }

  .table,
  .tasks-table {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
  }

  .table th,
  .table td {
    white-space: normal;
    word-break: break-word;
  }

  .tasks-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .tasks-table thead {
    display: none;
  }

  .tasks-table tbody,
  .tasks-table tbody tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .tasks-table tbody tr[data-task-row-id] {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "title title title title"
      "status due spacer assign";
    column-gap: 8px;
    row-gap: 6px;
    padding: 10px;
    border-bottom: 1px solid var(--grid);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    align-items: center;
  }

  .tasks-table tbody tr[data-task-row-id][data-status-state="critical"] {
    background: color-mix(in srgb, #f87171 14%, rgba(18, 10, 12, 0.92));
  }

  .tasks-table tbody tr[data-task-row-id][data-status-state="complete"] {
    background: color-mix(in srgb, var(--success) 18%, rgba(10, 16, 22, 0.92));
  }

  .tasks-table tbody tr[data-task-row-id][data-status-state="prereq"] {
    background: color-mix(in srgb, #d6a117 16%, rgba(22, 18, 8, 0.92));
  }

  body[data-theme="light"] .tasks-table tbody tr[data-task-row-id][data-status-state="critical"] {
    background: color-mix(in srgb, white 82%, #fecaca 18%);
  }

  body[data-theme="light"] .tasks-table tbody tr[data-task-row-id][data-status-state="complete"] {
    background: color-mix(in srgb, var(--success) 14%, white 86%);
  }

  body[data-theme="light"] .tasks-table tbody tr[data-task-row-id][data-status-state="prereq"] {
    background: color-mix(in srgb, white 84%, #fde68a 16%);
  }

  .tasks-table tbody tr[data-task-row-id] > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box;
  }

  .tasks-table tbody tr[data-task-row-id] > td:first-child {
    display: none;
  }

  .tasks-table tbody tr[data-task-row-id] .row-controls,
  .tasks-table tbody tr[data-task-row-id] .task-drag-handle {
    display: none !important;
  }

  .tasks-table tbody tr[data-task-row-id] > td:nth-child(2) {
    grid-area: title;
    margin-bottom: 0;
  }

  .tasks-table tbody tr[data-task-row-id] > td:nth-child(3) {
    grid-area: due;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-self: start;
    align-self: center;
  }

  .tasks-table tbody tr[data-task-row-id] > td:nth-child(4) {
    grid-area: status;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-self: start;
    align-self: center;
  }

  .tasks-table tbody tr[data-task-row-id] > td:nth-child(5) {
    grid-area: assign;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    width: auto !important;
    min-width: 0 !important;
    max-width: 132px !important;
  }

  .tasks-table .task-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .tasks-table .task-cell .task-link-badges,
  .tasks-table .task-cell .task-pill {
    display: none;
  }

  .tasks-table .task-cell .editable,
  .tasks-table .task-cell .github-task-link {
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    flex: 1 1 auto;
  }

  .tasks-table .assignments,
  .tasks-table .github-assignments {
    width: auto;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    overflow: visible;
    gap: 4px;
    min-height: 22px;
  }

  .tasks-table tbody tr[data-task-row-id] > td:nth-child(2) .task-cell + .task-link-badges + .task-pill,
  .tasks-table tbody tr[data-task-row-id] > td:nth-child(2) .task-link-badges {
    display: none;
  }

  .tasks-table .assignments .badge,
  .tasks-table .assignments .badge.user,
  .tasks-table .github-assignments .badge {
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .tasks-table .assignments .badge-label,
  .tasks-table .github-assignments .badge-label,
  .tasks-table .assignments .btn.link,
  .tasks-table .assignments .assign-action,
  .tasks-table .assignments .assign-spacer {
    display: none;
  }

  .tasks-table .icon-button[data-delete-task] {
    display: none !important;
  }

  .tasks-table .assignments .badge-icon,
  .tasks-table .assignments .badge.user .badge-icon,
  .tasks-table .github-assignments .badge-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .tasks-table .assignments .badge-icon .badge-x,
  .tasks-table .github-assignments .badge-icon .badge-x {
    display: none !important;
  }

  .tasks-table .assignments .badge-icon[data-remove-assignment],
  .tasks-table .github-assignments .badge-icon[data-remove-assignment] {
    pointer-events: none;
    cursor: default;
  }

  .tasks-table .assignments .badge-icon .badge-initial,
  .tasks-table .assignments .badge-icon .badge-photo,
  .tasks-table .github-assignments .badge-icon .badge-initial,
  .tasks-table .github-assignments .badge-icon .badge-photo {
    opacity: 1 !important;
  }

  .tasks-table .due-cell {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    min-height: 22px;
  }

  .tasks-table .due-summary {
    width: auto;
    min-width: 0;
    height: 22px;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
  }

  .tasks-table .due-summary-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--muted);
    line-height: 1;
    white-space: nowrap;
  }

  body[data-theme="light"] .tasks-table .due-summary {
    background: color-mix(in srgb, white 94%, var(--panel-alt) 6%);
    border-color: color-mix(in srgb, var(--border) 88%, white 12%);
  }

  .tasks-table tbody tr[data-task-row-id] .editable[data-field="title"],
  .tasks-table tbody tr[data-task-row-id] .github-task-link {
    color: inherit;
    text-decoration: none;
  }

  .tasks-table tbody tr[data-task-row-id][data-status-state="critical"] .editable[data-field="title"],
  .tasks-table tbody tr[data-task-row-id][data-status-state="critical"] .github-task-link {
    color: color-mix(in srgb, #ffd1d1 82%, var(--ink) 18%);
  }

  body[data-theme="light"] .tasks-table tbody tr[data-task-row-id][data-status-state="critical"] .editable[data-field="title"],
  body[data-theme="light"] .tasks-table tbody tr[data-task-row-id][data-status-state="critical"] .github-task-link {
    color: #7f1d1d;
  }

  .tasks-table tbody tr[data-task-row-id][data-status-state="critical"] > td:not(:nth-child(4)) > * {
    opacity: 0.68;
  }

  .tasks-table tbody tr[data-task-row-id][data-status-state="critical"] > td:nth-child(4) > * {
    opacity: 1;
  }

  .tasks-table tbody tr[data-task-row-id][data-status-state="complete"] .editable[data-field="title"],
  .tasks-table tbody tr[data-task-row-id][data-status-state="complete"] .github-task-link {
    color: color-mix(in srgb, var(--ink) 52%, var(--success) 48%);
    text-decoration: none;
  }

  .tasks-table tbody tr[data-task-row-id][data-status-state="prereq"] .editable[data-field="title"],
  .tasks-table tbody tr[data-task-row-id][data-status-state="prereq"] .github-task-link {
    color: color-mix(in srgb, #f6dc8a 62%, var(--ink) 38%);
    text-decoration: none;
  }

  body[data-theme="light"] .tasks-table tbody tr[data-task-row-id][data-status-state="complete"] .editable[data-field="title"],
  body[data-theme="light"] .tasks-table tbody tr[data-task-row-id][data-status-state="complete"] .github-task-link {
    color: color-mix(in srgb, var(--ink) 44%, var(--success) 56%);
  }

  body[data-theme="light"] .tasks-table tbody tr[data-task-row-id][data-status-state="prereq"] .editable[data-field="title"],
  body[data-theme="light"] .tasks-table tbody tr[data-task-row-id][data-status-state="prereq"] .github-task-link {
    color: color-mix(in srgb, #8a5a00 76%, var(--ink) 24%);
  }

  .tasks-table tbody tr[data-task-row-id][data-status-state="complete"] > td:not(:nth-child(4)) > * {
    opacity: 0.48;
  }

  .tasks-table tbody tr[data-task-row-id][data-status-state="complete"] > td:nth-child(4) > * {
    opacity: 1;
  }

  .tasks-table tbody tr[data-task-row-id][data-status-state="prereq"] > td:not(:nth-child(4)) > * {
    opacity: 0.58;
  }

  .tasks-table tbody tr[data-task-row-id][data-status-state="prereq"] > td:nth-child(4) > * {
    opacity: 1;
  }

  .tasks-table td [data-task-status-host] > .task-status-multi-button,
  .tasks-table td [data-task-status-host] > .status-editable,
  .tasks-table .status-editable {
    width: 84px;
    min-width: 84px;
    max-width: 84px;
    min-height: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }

  .tasks-table tbody tr.new-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 10px 8px !important;
    box-sizing: border-box;
  }

  .tasks-table tbody tr.new-row > td {
    display: none !important;
  }

  .tasks-table tbody tr.new-row > td:nth-child(2) {
    display: block !important;
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .tasks-table tbody tr.new-row > td:nth-child(2)::before {
    content: "+";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
  }

  .tasks-table tbody tr.new-row > td:nth-child(2) input[data-new-task="title"] {
    width: 100% !important;
    max-width: 100% !important;
    height: 24px;
    min-height: 24px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: transparent !important;
    caret-color: transparent;
    outline: none !important;
    box-shadow: none !important;
    position: relative;
    z-index: 1;
  }

  .tasks-table tbody tr.new-row > td:nth-child(2) input[data-new-task="title"]::placeholder {
    color: transparent;
  }

  .tasks-table tbody tr.new-row > td:nth-child(2):focus-within::before {
    color: var(--accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-sidebar-trigger,
  .header-brand a {
    transition: none !important;
  }
}