:root{
  --max: 980px;
  --bg:#0b0c10;
  --card:#12141a;
  --muted:#9aa4b2;
  --txt:#e6e8ee;
  --pri:#4f7cff;
  --danger:#ff4d4d;
  --border:#1f2430;
}
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--txt);
}
a{ color:var(--pri); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:16px;
  padding-bottom:40px;
}

.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.top-links{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  margin:12px 0;
}

.row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.row > *{ flex:1; min-width:160px; }

h1,h2{ margin:8px 0 10px; }
.muted, small{ color:var(--muted); }

input, select, button{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid #2a3140;
  background:#0e1016;
  color:var(--txt);
}
button{
  cursor:pointer;
  background:#17213a;
  border-color:#253052;
}
button.primary{
  background:var(--pri);
  border-color:var(--pri);
  color:#fff;
  font-weight:650;
}
button.danger{
  background:#2a1111;
  border-color:#5a2222;
  color:#fff;
}
button:disabled{ opacity:.6; cursor:not-allowed; }

.task-link,
.task-link:visited,
.task-link:hover,
.task-link:active {
  color: inherit;
  text-decoration: none;
}
.task-link:hover {
  text-decoration: underline; /* optional */
}

.pill{
  display:inline-block;
  background:#0e1016;
  border:1px solid #242b3d;
  padding:10px 12px;
  border-radius:999px;
}

.running-title{
  font-size:18px;
  margin:6px 0 10px;
}

.mt12{ margin-top:12px; }

/* Accordion */
.acc{
  margin:12px 0;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:var(--card);
}
.acc-h{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:100%;
  padding:14px;
  background:transparent;
  border:0;
  cursor:pointer;
  color:var(--txt);
  text-align:left;
}
.acc-h:focus{
  outline:2px solid rgba(79,124,255,.35);
  outline-offset:2px;
}
.acc-b{ display:none; padding:0 14px 14px 14px; }
.acc.open .acc-b{ display:block; }
.acc-meta{ display:flex; gap:12px; align-items:center; }
.acc-chevron{ transition:transform .2s ease; font-size:18px; opacity:.85; }
.acc.open .acc-chevron{ transform:rotate(180deg); }

/* Project title standout */
.project-title{
  font-size:24px;
  font-weight:850;
  letter-spacing:.2px;
  color:#7aa2ff;
}

/* Tables */
table{ width:100%; border-collapse:collapse; }
th, td{
  padding:10px;
  border-bottom:1px solid #222838;
  vertical-align:middle;
}
th{ text-align:left; color:var(--muted); font-weight:600; }
td form{ margin:0; }

/* column sizing helpers */
.col-done{ width:52px; }
.col-drag{ width:34px; }
.col-time,.col-cost,.col-timer{ width:110px; }
.col-manual{ width:120px; }
.task-title{ min-width: 220px; }

/* DnD */
tr.dragging{ opacity:.6; }
tr.drop-target{ outline:2px dashed rgba(79,124,255,.6); outline-offset:-2px; }
.drag-handle{ cursor:grab; user-select:none; opacity:.85; }

/* Done ✓ button */
.done-btn{
  width:38px;
  height:38px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  background: rgba(46,204,113,.16);
  border:1px solid rgba(46,204,113,.45);
  color:#c7ffe0;
  padding:0;
}
.done-btn:hover{ background: rgba(46,204,113,.22); }
.done-btn:active{ transform:scale(.98); }

/* Slide-out animation when marking done */
tr.slide-out{ animation: slideOut .22s ease forwards; }
@keyframes slideOut{
  to{ opacity:0; transform:translateX(18px); }
}

/* Mobile tweaks */
@media (max-width: 720px){
  .col-cost, .col-manual{ display:none; }
  .task-title{ min-width: 0; }
  .project-title{ font-size:22px; }
}