:root {
  --bg: #0b0b10;
  --panel: #14141c;
  --panel2: #1b1b26;
  --line: #262634;
  --txt: #e8e6e0;
  --dim: #8a8896;
  --red: #C8102E;
  --teal: #17a2a9;
  --amber: #d9a441;
  --green: #3fa860;
  --blue: #4a7fd4;
  --mono: 'JetBrains Mono', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--txt); font: 14px/1.45 'Inter', system-ui, sans-serif; min-height: 100vh; }
.hidden { display: none !important; }

/* wordmark */
.wordmark { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 34px; letter-spacing: .12em; }
.wordmark.sm { font-size: 20px; }
.wordmark .dot { color: var(--red); }

/* gate */
.gate { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, #15151f 0%, var(--bg) 70%); }
.gate-box { width: 320px; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.gate-sub { color: var(--dim); font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.gate-box input { background: var(--panel); border: 1px solid var(--line); color: var(--txt); padding: 12px 14px; border-radius: 6px; font-family: var(--mono); text-align: center; }
.gate-box input:focus { outline: none; border-color: var(--red); }
.gate-box button { background: var(--red); color: #fff; border: 0; padding: 12px; border-radius: 6px; font-family: 'Oswald'; letter-spacing: .2em; cursor: pointer; font-size: 15px; }
.gate-box button:hover { filter: brightness(1.15); }
.gate-err { color: var(--red); font-size: 12px; min-height: 16px; font-family: var(--mono); }

/* header */
header { display: flex; align-items: center; gap: 26px; padding: 14px 22px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 20; }
#tabs { display: flex; gap: 4px; }
.tab { background: none; border: 0; color: var(--dim); font-family: 'Oswald'; letter-spacing: .14em; font-size: 13px; padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; }
.tab.active { color: var(--txt); border-bottom-color: var(--red); }
.tab:hover { color: var(--txt); }
.head-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
#sync-stamp { color: var(--dim); font-family: var(--mono); font-size: 11px; }
.ghost { background: none; border: 1px solid var(--line); color: var(--dim); padding: 5px 12px; border-radius: 5px; cursor: pointer; font-size: 12px; }
.ghost:hover { color: var(--txt); border-color: var(--dim); }

/* add bar */
#addbar { display: flex; gap: 8px; padding: 14px 22px 4px; }
#addbar input { background: var(--panel); border: 1px solid var(--line); color: var(--txt); padding: 10px 12px; border-radius: 6px; }
#addbar input:focus { outline: none; border-color: var(--teal); }
#add-text { flex: 1; }
#add-owner { width: 130px; }
#add-deadline { width: 150px; color-scheme: dark; }
#add-btn { background: var(--teal); color: #04222a; font-family: 'Oswald'; letter-spacing: .1em; border: 0; padding: 10px 18px; border-radius: 6px; cursor: pointer; font-weight: 600; }
#add-btn:hover { filter: brightness(1.15); }

/* filters */
#filters { display: flex; gap: 8px; padding: 10px 22px; align-items: center; flex-wrap: wrap; }
#filters input, #filters select { background: var(--panel); border: 1px solid var(--line); color: var(--txt); padding: 7px 10px; border-radius: 6px; font-size: 13px; }
#f-search { width: 220px; }
#f-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tagchip { background: var(--panel2); border: 1px solid var(--line); color: var(--dim); font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 20px; cursor: pointer; }
.tagchip.on { border-color: var(--teal); color: var(--teal); }
.hide-done { color: var(--dim); font-size: 12px; display: flex; gap: 5px; align-items: center; margin-left: auto; }

main { padding: 10px 22px 60px; }

/* list */
.trow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.trow:hover { background: var(--panel); }
.trow .tid { font-family: var(--mono); font-size: 10px; color: var(--dim); width: 56px; flex-shrink: 0; }
.trow .ttext { flex: 1; min-width: 0; }
.trow.done .ttext { color: var(--dim); text-decoration: line-through; }
.trow .thash { color: var(--teal); }
.pill { font-family: var(--mono); font-size: 10px; padding: 3px 8px; border-radius: 4px; flex-shrink: 0; letter-spacing: .05em; }
.pill.todo { background: #23232f; color: var(--dim); }
.pill.doing { background: #16233c; color: var(--blue); }
.pill.blocked { background: #33121a; color: var(--red); }
.pill.review { background: #33270f; color: var(--amber); }
.pill.done { background: #10281a; color: var(--green); }
.towner { color: var(--dim); font-size: 12px; width: 90px; text-align: right; flex-shrink: 0; }
.tdate { font-family: var(--mono); font-size: 11px; color: var(--dim); width: 88px; text-align: right; flex-shrink: 0; }
.tdate.overdue { color: var(--red); }
.tproj { font-family: var(--mono); font-size: 10px; color: var(--amber); width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }

/* expanded editor */
.teditor { background: var(--panel); border-bottom: 1px solid var(--line); padding: 14px 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.teditor label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--dim); }
.teditor input, .teditor select, .teditor textarea { background: var(--panel2); border: 1px solid var(--line); color: var(--txt); padding: 7px 9px; border-radius: 5px; font-size: 13px; color-scheme: dark; }
.teditor textarea { resize: vertical; min-height: 40px; }
.teditor .full { grid-column: 1 / -1; }
.teditor .actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.btn { background: var(--red); color: #fff; border: 0; padding: 8px 16px; border-radius: 5px; cursor: pointer; font-family: 'Oswald'; letter-spacing: .1em; font-size: 13px; }
.btn.alt { background: var(--panel2); border: 1px solid var(--line); color: var(--txt); }

/* board */
#view-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; }
.col { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; min-height: 240px; }
.col h3 { font-family: 'Oswald'; font-size: 13px; letter-spacing: .16em; color: var(--dim); padding-bottom: 8px; display: flex; justify-content: space-between; }
.col.dragover { border-color: var(--teal); }
.card { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; margin-bottom: 8px; cursor: grab; font-size: 13px; }
.card:active { cursor: grabbing; }
.card .cmeta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--dim); font-family: var(--mono); }
.card .thash { color: var(--teal); }
.col-todo h3 { color: var(--txt); } .col-doing h3 { color: var(--blue); }
.col-blocked h3 { color: var(--red); } .col-review h3 { color: var(--amber); }
.col-done h3 { color: var(--green); }

/* deps */
.deps-help { color: var(--dim); font-size: 12px; padding: 6px 0 12px; }
.deps-help b { color: var(--teal); }
#deps-canvas-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
#deps-svg { display: block; }
.dnode rect { fill: var(--panel2); stroke: var(--line); rx: 6; }
.dnode.done rect { opacity: .45; }
.dnode:hover rect { stroke: var(--teal); }
.dnode text { fill: var(--txt); font: 11px 'Inter'; pointer-events: none; }
.dnode .did { fill: var(--dim); font: 9px var(--mono); }
.dedge { stroke: var(--dim); stroke-width: 1.5; fill: none; marker-end: url(#arrow); cursor: pointer; }
.dedge:hover { stroke: var(--red); stroke-width: 2.5; }
.dtemp { stroke: var(--teal); stroke-dasharray: 4 3; stroke-width: 1.5; fill: none; }

/* projects */
#view-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.pcard { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; cursor: pointer; }
.pcard:hover { border-color: var(--red); }
.pcard h3 { font-family: 'Oswald'; letter-spacing: .08em; font-size: 16px; margin-bottom: 8px; }
.pbar { height: 6px; background: var(--panel2); border-radius: 3px; overflow: hidden; margin: 10px 0 6px; }
.pbar div { height: 100%; background: linear-gradient(90deg, var(--teal), var(--green)); }
.pmeta { color: var(--dim); font-family: var(--mono); font-size: 11px; display: flex; justify-content: space-between; }
.pmeta .warn { color: var(--red); }

/* toast */
#toast { position: fixed; bottom: 24px; right: 24px; background: var(--panel2); border: 1px solid var(--teal); color: var(--txt); padding: 10px 18px; border-radius: 6px; font-family: var(--mono); font-size: 12px; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 99; }
#toast.show { opacity: 1; }

@media (max-width: 900px) {
  #view-board { grid-template-columns: 1fr 1fr; }
  .teditor { grid-template-columns: 1fr 1fr; }
  #addbar { flex-wrap: wrap; }
  .tproj, .tdate { display: none; }
}