@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:#161d27;
  --panel:#1f2836;
  --panel-2:#26313f;
  --line:#33404f;
  --text:#e7ebef;
  --muted:#8b96a3;
  --accent-dep:#5fa8a0;
  --accent-pos:#82ac6f;
  --accent-neg:#d99a4e;
  --ongoing:#7488a6;
  --project:#c98a5e;
  --project-muted:#8f7458;
  --hub:#4a5766;
  --mylife:#b98fc9;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  height:100vh;
  overflow:hidden;
}
.mono{font-family:'IBM Plex Mono',monospace;}
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
}
header h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:18px;
  font-weight:600;
  margin:0;
  letter-spacing:0.2px;
}
header .sub{color:var(--muted); font-size:12px; margin-top:2px;}
.btns{display:flex; gap:8px; align-items:center;}
button{
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:500;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--text);
  padding:7px 12px;
  border-radius:6px;
  cursor:pointer;
}
button:hover{border-color:var(--accent-dep);}
button.primary{background:var(--accent-dep); color:#0f1720; border-color:var(--accent-dep); font-weight:600;}
button.danger{color:#e08a7d; border-color:#4a3430;}
.legend{
  display:flex; gap:16px; align-items:center; font-size:11.5px; color:var(--muted);
}
.legend .sw{display:inline-block; width:16px; height:2px; margin-right:5px; vertical-align:middle;}
.wrap{position:relative; height:calc(100vh - 57px);}
#canvas-scroll{
  position:absolute; inset:0; overflow:auto;
}
#canvas{
  position:relative;
  width:1700px;
  height:1150px;
}
svg{position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;}
.node{
  position:absolute;
  width:190px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  cursor:grab;
  user-select:none;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
}
.node:active{cursor:grabbing;}
.node.selected{border-color:var(--accent-dep); box-shadow:0 0 0 1px var(--accent-dep);}
.node .badge{
  font-size:9.5px; text-transform:uppercase; letter-spacing:0.6px;
  padding:2px 6px; border-radius:4px; display:inline-block; margin-bottom:6px;
  font-weight:600;
}
.badge.ongoing{background:rgba(116,136,166,0.18); color:var(--ongoing);}
.badge.project{background:rgba(201,138,94,0.18); color:var(--project);}
.node.hub{border-color:var(--mylife); box-shadow:0 0 0 1px var(--mylife); background:#2a2333;}

.node.ongoing{background:var(--ongoing); border-color:#5f7390;}
.node.project{background:var(--project-muted); border-color:#7a6248;}
.node.ongoing .badge, .node.project .badge{background:rgba(0,0,0,0.28); color:#fff;}
.node.ongoing .pbar, .node.project .pbar{background:rgba(0,0,0,0.28);}

.subtoggle{
  width:75%; margin:8px auto 0; text-align:center; font-size:10.5px; font-weight:600;
  padding:3px 0; border-radius:999px; background:rgba(0,0,0,0.24); color:var(--text);
  cursor:pointer; user-select:none; letter-spacing:0.3px;
}
.subtoggle:hover{background:rgba(0,0,0,0.36);}
.subaccordion{margin-top:8px; display:flex; flex-direction:column; gap:7px;}
.subrow{background:rgba(0,0,0,0.2); border-radius:6px; padding:6px 8px;}
.subrow .subname{font-size:10.5px; font-weight:600; margin-bottom:4px; line-height:1.25; color:var(--text);}
.subrow .spbar{height:4px; background:rgba(0,0,0,0.32); border-radius:3px; overflow:hidden;}
.subrow .spfill{height:100%; background:var(--accent-dep);}
.badge.hub{background:rgba(185,143,201,0.2); color:var(--mylife);}
.node .title{font-size:13.5px; font-weight:600; line-height:1.3; margin-bottom:6px;}
.node .pbar{height:5px; background:#141b24; border-radius:3px; overflow:hidden; margin-top:4px;}
.node .pfill{height:100%; background:var(--accent-dep);}
.node .pct{font-size:11px; color:var(--muted); margin-top:3px;}
.node .subcount{font-size:10.5px; color:var(--muted); margin-top:4px;}

#panel{
  position:absolute; top:0; right:0; width:340px; height:100%;
  background:var(--panel); border-left:1px solid var(--line);
  padding:18px; overflow-y:auto; transform:translateX(100%);
  transition:transform 0.18s ease;
}
#panel.open{transform:translateX(0);}
#panel label{display:block; font-size:11px; color:var(--muted); margin:12px 0 4px; text-transform:uppercase; letter-spacing:0.5px;}
#panel input[type=text], #panel select, #panel textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  border-radius:6px; padding:7px 8px; font-family:'Inter',sans-serif; font-size:13px;
}
#panel textarea{min-height:140px; resize:vertical;}
.swatch{
  width:26px; height:26px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; box-shadow:0 0 0 1px rgba(255,255,255,0.12) inset;
}
.swatch:hover{box-shadow:0 0 0 1px rgba(255,255,255,0.35) inset;}
.swatch.selected{border-color:#fff;}
.swatch-none{
  background:var(--panel-2); border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--muted); box-shadow:none;
}
.swatch-none.selected{border-color:var(--text); border-style:solid;}
.subtask-row{
  border:1px solid var(--line); border-radius:8px; padding:8px; margin-bottom:8px; background:var(--panel-2);
}
.subtask-row input[type=text]{margin-bottom:6px;}
.subtask-row .row{display:flex; gap:6px; align-items:center;}
.subtask-row input[type=range]{flex:1;}
.subtask-row .pctnum{width:38px; font-size:12px; text-align:right;}
.subtask-row input[type=date]{background:var(--panel-2); border:1px solid var(--line); color:var(--text); border-radius:5px; padding:4px; font-size:12px;}
.subtask-row textarea{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--text);
  border-radius:5px; padding:6px; font-size:11.5px; font-family:'Inter',sans-serif; min-height:50px; resize:vertical;
  margin-top:6px;
}
.subtask-row .notes-label{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; margin-top:6px; display:block;}
.smallbtn{font-size:11px; padding:4px 8px;}
.panel-actions{display:flex; gap:8px; margin-top:16px;}
#panel h2{font-family:'Space Grotesk',sans-serif; font-size:16px; margin:0;}
.closepanel{float:right; cursor:pointer; color:var(--muted); font-size:18px; line-height:1;}

#edgeModal, #overlay, #accountModal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:50;
}
#overlay{background:rgba(0,0,0,0.5);}
#edgeModal .box, #accountModal .box{
  position:relative; z-index:51; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:20px; width:420px; max-height:80vh; overflow-y:auto;
}
#edgeModal h2, #accountModal h2{font-family:'Space Grotesk',sans-serif; font-size:16px; margin-top:0;}
.edge-list-item{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:6px; padding:8px 10px; margin-bottom:6px; font-size:12.5px;
}
.edge-form{border-top:1px solid var(--line); margin-top:14px; padding-top:14px;}
.edge-form select, .edge-form input{width:100%; margin-bottom:8px; background:var(--panel-2); border:1px solid var(--line); color:var(--text); padding:6px 8px; border-radius:6px; font-size:12.5px;}
.edge-type-tag{font-size:10px; padding:2px 6px; border-radius:4px; text-transform:uppercase; font-weight:600;}
.edge-type-tag.dependency{background:rgba(95,168,160,0.18); color:var(--accent-dep);}
.edge-type-tag.positive{background:rgba(130,172,111,0.18); color:var(--accent-pos);}
.edge-type-tag.negative{background:rgba(217,154,78,0.18); color:var(--accent-neg);}

/* ---- Auth screens ---- */
#authScreen{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--bg); z-index:100;
}
#authScreen.hidden{display:none;}
.authbox{
  width:340px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:28px;
}
.authbox h1{font-family:'Space Grotesk',sans-serif; font-size:18px; margin:0 0 4px;}
.authbox p.sub{color:var(--muted); font-size:12.5px; margin:0 0 20px;}
.authbox label{display:block; font-size:11px; color:var(--muted); margin:12px 0 4px; text-transform:uppercase; letter-spacing:0.5px;}
.authbox input{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  border-radius:6px; padding:9px 10px; font-family:'Inter',sans-serif; font-size:13.5px;
}
.authbox button{width:100%; margin-top:18px; padding:10px;}
.authbox .linkbtn{
  background:none; border:none; color:var(--accent-dep); font-size:12.5px; cursor:pointer;
  padding:0; margin-top:12px; text-align:left; width:auto;
}
.authbox .err{color:var(--accent-neg); font-size:12px; margin-top:10px; min-height:1em;}
.authbox .ok{color:var(--accent-pos); font-size:12px; margin-top:10px; min-height:1em;}
#appRoot.hidden{display:none;}