:root {
  color-scheme: light;
  --bg: #f7f7f2;
  --panel: #ffffff;
  --panel-strong: #f0f3ee;
  --ink: #1c201d;
  --muted: #66706a;
  --line: #d9ded7;
  --line-strong: #bdc7bf;
  --accent: #246a5c;
  --accent-strong: #174b41;
  --accent-soft: #dfeee9;
  --warn: #975a16;
  --danger: #a33b37;
  --ready: #0d6b43;
  --blocked: #835200;
  --done: #607066;
  --primary-ink: #ffffff;
  --input-bg: #ffffff;
  --danger-border: #d8aaa7;
  --error-bg: #fff5f4;
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --tab-shadow: 0 1px 4px rgba(20, 30, 24, 0.09);
  --stage-bg: rgba(255, 255, 255, 0.82);
  --stage-shadow: 0 8px 20px rgba(31, 43, 35, 0.05);
  --tree-line: #e6eae4;
  --task-hover-bg: #eef4ef;
  --task-selected-bg: #e4efe9;
  --todo-bg: #e8ece7;
  --todo-fg: #3d463f;
  --doing-bg: #d8ebff;
  --doing-fg: #174c76;
  --done-bg: #e3ebe5;
  --done-fg: var(--done);
  --blocked-bg: #fff1cf;
  --blocked-fg: var(--blocked);
  --graph-bg: #fbfcfa;
  --edge: #8e9b93;
  --node-bg: #ffffff;
  --node-ready-bg: #effaf3;
  --node-blocked-bg: #fff8e8;
  --node-blocked-stroke: #c58a20;
  --node-done-bg: #eff2ef;
  --node-done-stroke: #9aa49d;
  --shadow: 0 10px 28px rgba(31, 43, 35, 0.08);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

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

button {
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

button:hover {
  border-color: var(--accent);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--input-bg);
  color: var(--ink);
}

input,
select {
  min-height: 36px;
  padding: 7px 9px;
}

textarea {
  min-height: 132px;
  resize: vertical;
  padding: 9px;
  line-height: 1.45;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.app-shell {
  min-height: 100vh;
}

.lock-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.lock-panel {
  width: min(100%, 420px);
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 22px;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.brand h1 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: 0;
}

.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 800;
}

.stack {
  display: grid;
  gap: 12px;
}

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

.row > * {
  min-width: 0;
}

.spread {
  justify-content: space-between;
}

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

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

.danger {
  border-color: var(--danger-border);
  color: var(--danger);
}

.subtle {
  color: var(--muted);
}

.hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.error {
  margin: 0;
  border-left: 3px solid var(--danger);
  background: var(--error-bg);
  color: var(--danger);
  padding: 8px 10px;
  font-size: 0.88rem;
}

.notice {
  margin: 0;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 8px 10px;
  font-size: 0.88rem;
}

.workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(220px, 1.25fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 3;
  backdrop-filter: blur(10px);
}

.title-lockup {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.title-lockup h1 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.toolbar button {
  padding-inline: 11px;
}

.tabs {
  display: flex;
  gap: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--panel-strong);
  padding: 3px;
}

.tab {
  min-height: 30px;
  border: 0;
  background: transparent;
  padding: 4px 10px;
}

.tab[aria-selected="true"] {
  background: var(--panel);
  box-shadow: var(--tab-shadow);
}

.main-grid {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  min-height: 0;
}

.main-grid.view-tree {
  display: block;
  min-height: 0;
}

.tree-workspace {
  min-height: 0;
  overflow: auto;
  padding: 10px 12px;
}

.tree-stage {
  position: relative;
  width: min(100%, 780px);
  margin: 0 auto;
}

.tree-stage.has-flyout {
  display: grid;
  grid-template-columns: minmax(0, 760px) 360px;
  align-items: start;
  gap: 8px;
  width: min(100%, 1128px);
}

.sidebar,
.detail-panel,
.graph-panel,
.query-panel {
  min-width: 0;
  min-height: 0;
}

.sidebar {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 12px;
  border-right: 1px solid var(--line);
  padding: 14px;
}

.tree-stage .sidebar {
  width: min(100%, 760px);
  min-height: calc(100vh - 104px);
  border: 1px solid var(--line);
  background: var(--stage-bg);
  box-shadow: var(--stage-shadow);
  padding: 10px;
}

.tree-stage.has-flyout .sidebar {
  width: auto;
  max-width: none;
}

.quick-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 8px;
}

.tree-actions {
  display: flex;
  gap: 8px;
}

.tree-actions button {
  min-height: 30px;
  padding-inline: 10px;
  color: var(--muted);
}

.tree-scroll,
.detail-scroll,
.graph-scroll,
.query-scroll {
  min-height: 0;
  overflow: auto;
}

.drop-root {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: 0;
  color: var(--muted);
  font-size: 0.83rem;
}

.drop-root.drag-over,
.task-row.drop-inside {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.task-row.drop-before {
  border-top-color: var(--accent);
  box-shadow: inset 0 2px 0 var(--accent);
}

.task-row.drop-after {
  border-bottom-color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.task-tree {
  display: grid;
  gap: 1px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.task-branch {
  display: grid;
  gap: 1px;
}

.task-children {
  display: grid;
  gap: 1px;
  margin-left: 18px;
  padding-left: 8px;
  border-left: 1px solid var(--tree-line);
}

.task-row {
  display: grid;
  grid-template-columns: 18px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px;
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 1px 4px;
  background: transparent;
}

.task-row:hover {
  background: var(--task-hover-bg);
}

.task-row.selected {
  border-color: transparent;
  box-shadow: inset 3px 0 0 var(--accent);
  background: var(--task-selected-bg);
}

.drag-handle {
  display: grid;
  width: 18px;
  height: 22px;
  min-height: 22px;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  opacity: 0;
}

.task-row:hover .drag-handle,
.task-row.selected .drag-handle {
  opacity: 0.55;
}

.disclosure,
.disclosure-spacer {
  display: grid;
  width: 18px;
  height: 22px;
  min-height: 22px;
  place-items: center;
}

.disclosure {
  border: 0;
  background: transparent;
  padding: 0;
}

.disclosure::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--muted);
  transform-origin: 45% 50%;
  transition: transform 120ms ease;
}

.disclosure.expanded::before {
  transform: rotate(90deg);
}

.task-title-button {
  display: grid;
  min-height: 24px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.task-title-button strong,
.task-title-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-title-button strong {
  font-size: 0.9rem;
  font-weight: 650;
}

.task-title-button span {
  display: none;
  color: var(--muted);
  font-size: 0.76rem;
}

.tree-title-input {
  min-height: 30px;
  padding: 3px 6px;
  font-size: 0.93rem;
  font-weight: 750;
}

.task-mini-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tree-stage .task-mini-actions .icon-button {
  opacity: 0;
}

.tree-stage .task-row:hover .task-mini-actions .icon-button,
.tree-stage .task-row.selected .task-mini-actions .icon-button {
  opacity: 1;
}

.icon-button {
  display: grid;
  width: 30px;
  height: 30px;
  min-height: 30px;
  place-items: center;
  padding: 0;
}

.status-pill,
.count-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 0;
  padding: 2px 8px;
  font-size: 0.76rem;
  font-weight: 700;
}

.status-todo {
  background: var(--todo-bg);
  color: var(--todo-fg);
}

.status-doing {
  background: var(--doing-bg);
  color: var(--doing-fg);
}

.status-done {
  background: var(--done-bg);
  color: var(--done-fg);
}

.status-blocked {
  background: var(--blocked-bg);
  color: var(--blocked-fg);
}

.count-pill {
  background: var(--panel-strong);
  color: var(--muted);
}

.context-scrim {
  position: fixed;
  inset: 0;
  z-index: 9;
}

.task-context-menu {
  position: fixed;
  z-index: 10;
  display: grid;
  width: min(260px, calc(100vw - 24px));
  border: 1px solid var(--line-strong);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 4px;
}

.context-title {
  overflow: hidden;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-context-menu button {
  min-height: 32px;
  border: 0;
  background: transparent;
  padding: 6px 8px;
  text-align: left;
}

.task-context-menu button:hover,
.task-context-menu button:focus {
  background: var(--accent-soft);
}

.task-context-menu .danger-menu-item {
  color: var(--danger);
}

.detail-panel,
.graph-panel,
.query-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.detail-flyout {
  position: sticky;
  top: 0;
  z-index: 4;
  width: 360px;
  max-height: calc(100vh - 86px);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: none;
}

.detail-scroll,
.graph-scroll,
.query-scroll {
  padding: 16px;
}

.detail-flyout-scroll {
  max-height: inherit;
  overflow: auto;
  padding: 10px;
}

.detail-card,
.graph-card,
.query-card {
  display: grid;
  gap: 14px;
  max-width: 980px;
}

.detail-flyout-card {
  gap: 10px;
}

.detail-flyout-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.detail-flyout-head .count-pill {
  min-height: auto;
  background: transparent;
  color: var(--muted);
  padding: 0;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.detail-flyout-head button {
  min-height: 26px;
  padding-inline: 8px;
  color: var(--muted);
}

.detail-flyout .section {
  gap: 8px;
  padding-top: 12px;
}

.detail-flyout .task-title-input {
  min-height: 34px;
  font-size: 1rem;
}

.section {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.section:first-child {
  border-top: 0;
  padding-top: 0;
}

.section h2,
.section h3 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0;
}

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

.task-title-input {
  font-size: 1.2rem;
  font-weight: 750;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.blocker-picker {
  display: grid;
  gap: 8px;
}

.blocker-results {
  display: grid;
  max-height: 210px;
  overflow: auto;
  border: 1px solid var(--line);
  background: var(--panel);
}

.blocker-result {
  display: block;
  width: 100%;
  min-height: 32px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 7px 9px;
  text-align: left;
}

.blocker-result:last-child {
  border-bottom: 0;
}

.blocker-result:hover,
.blocker-result:focus {
  background: var(--accent-soft);
}

.blocker-result-empty {
  padding: 8px 9px;
  color: var(--muted);
  font-size: 0.84rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--panel);
  padding: 3px 8px;
}

.chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  border: 0;
  background: transparent;
  padding: 0;
}

.empty {
  display: grid;
  min-height: 280px;
  place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: 0;
  color: var(--muted);
  text-align: center;
  padding: 24px;
}

.ready-list,
.query-list {
  display: grid;
  gap: 8px;
}

.ready-item,
.query-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  padding: 10px;
}

.ready-item h3,
.query-item h3 {
  margin: 0 0 4px;
  font-size: 0.96rem;
}

.meta-line {
  color: var(--muted);
  font-size: 0.8rem;
}

.graph-wrap {
  min-height: 480px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--graph-bg);
  overflow: auto;
}

.dag-svg {
  display: block;
  min-width: 760px;
  min-height: 460px;
}

.edge {
  stroke: var(--edge);
  stroke-width: 2;
  marker-end: url(#arrow);
}

.node rect {
  fill: var(--node-bg);
  stroke: var(--line-strong);
  stroke-width: 1.3;
}

.node.ready rect {
  fill: var(--node-ready-bg);
  stroke: var(--ready);
}

.node.blocked rect {
  fill: var(--node-blocked-bg);
  stroke: var(--node-blocked-stroke);
}

.node.done rect {
  fill: var(--node-done-bg);
  stroke: var(--node-done-stroke);
}

.node.selected rect {
  stroke: var(--accent);
  stroke-width: 2.5;
}

.node text {
  fill: var(--ink);
  font-size: 13px;
}

.node .node-status {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.hidden {
  display: none !important;
}

@media (max-width: 860px) {
  .topbar {
    grid-template-columns: 1fr;
  }

  .top-actions {
    justify-content: flex-start;
  }

  .main-grid {
    grid-template-columns: 1fr;
  }

  .tree-workspace {
    padding: 10px;
  }

  .tree-stage,
  .tree-stage.has-flyout {
    width: 100%;
  }

  .tree-stage .sidebar,
  .tree-stage.has-flyout .sidebar {
    width: 100%;
    min-height: auto;
  }

  .detail-flyout {
    position: static;
    width: 100%;
    max-height: none;
    margin-top: 10px;
  }

  .sidebar {
    max-height: 52vh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .field-grid,
  .filters {
    grid-template-columns: 1fr;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #151815;
    --panel: #1e241f;
    --panel-strong: #242b26;
    --ink: #eef2ed;
    --muted: #aab5ad;
    --line: #303a33;
    --line-strong: #465148;
    --accent: #54b99e;
    --accent-strong: #7bd2b9;
    --accent-soft: #16362f;
    --warn: #ffd991;
    --danger: #ff9b96;
    --ready: #75d39f;
    --blocked: #ffd991;
    --done: #b8c8bd;
    --primary-ink: #071915;
    --input-bg: #151a16;
    --danger-border: #7a3f3d;
    --error-bg: #351c1f;
    --topbar-bg: rgba(30, 36, 31, 0.92);
    --tab-shadow: none;
    --stage-bg: rgba(30, 36, 31, 0.86);
    --stage-shadow: none;
    --tree-line: var(--line);
    --task-hover-bg: #252d27;
    --task-selected-bg: #17362f;
    --todo-bg: #303a33;
    --todo-fg: #c8d1ca;
    --doing-bg: #173048;
    --doing-fg: #b7ddff;
    --done-bg: #27322c;
    --done-fg: #b8c8bd;
    --blocked-bg: #3c2c12;
    --blocked-fg: #ffd991;
    --graph-bg: #171c18;
    --edge: #6b7a70;
    --node-bg: var(--panel);
    --node-ready-bg: #143527;
    --node-blocked-bg: #3a2a12;
    --node-blocked-stroke: #e5a63c;
    --node-done-bg: #26312b;
    --node-done-stroke: #6e7c73;
    --shadow: none;
  }
}