:root{
  --bg:#0f1117; --panel:#171a22; --panel-2:#1d212b; --ink:#e6e9ef;
  --muted:#9aa3b2; --accent:#6ea8fe; --accent-2:#f97362; --line:#2a2f3a;
  --ok:#5bd6a0; --warn:#f0b86e; --danger:#f2647a; --radius:12px;
}
*{box-sizing:border-box}
body{
  margin:0; background:radial-gradient(1100px 560px at 82% -12%, #1c2230 0%, var(--bg) 60%);
  color:var(--ink); line-height:1.55;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;border-bottom:1px solid var(--line);
}
.brand{font-weight:700;letter-spacing:-.01em;color:var(--ink);font-size:18px}
.topbar nav{display:flex;align-items:center;gap:16px}
.who{color:var(--muted);font-size:14px}

.wrap{max-width:760px;margin:0 auto;padding:32px 20px 80px}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin-bottom:20px;
}
.auth{max-width:420px;margin:48px auto}
h1{font-size:24px;margin:0 0 16px;letter-spacing:-.02em}
h2{font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 14px}

label{display:block;font-size:13px;color:var(--muted);margin-bottom:12px}
input,select,textarea{
  width:100%;margin-top:6px;padding:10px 12px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink);font-size:14px;
}
textarea{min-height:64px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0}

button{cursor:pointer;font-size:14px;font-weight:600;border-radius:8px;border:1px solid var(--line);padding:10px 16px;background:var(--panel-2);color:var(--ink)}
button.primary{background:var(--accent);border-color:var(--accent);color:#0b1020}
button.danger{background:transparent;border-color:var(--danger);color:var(--danger)}
button.link{background:none;border:none;color:var(--muted);padding:0;font-weight:500}
button.link:hover{color:var(--ink);text-decoration:underline}
.inline{display:inline}

.row{display:flex;gap:14px}
.row label{flex:1}

.muted{color:var(--muted);font-size:14px}
.hint{color:var(--muted);font-size:12px;margin:-4px 0 12px}
.flash{background:rgba(91,214,160,.12);color:var(--ok);border:1px solid rgba(91,214,160,.3);padding:10px 12px;border-radius:8px}
.error{background:rgba(242,100,122,.12);color:var(--danger);border:1px solid rgba(242,100,122,.3);padding:10px 12px;border-radius:8px}
.empty{text-align:center;padding:32px}

.dash-head{display:flex;align-items:center;justify-content:space-between;margin:8px 0 18px;gap:12px;flex-wrap:wrap}
.dash-head h1{margin:0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.chip.todo{color:var(--accent)}
.chip.doing{color:var(--warn)}
.chip.done{color:var(--ok)}

.tasks{list-style:none;margin:0;padding:0}
.task{position:relative;border-left:3px solid var(--line)}
.task.status-todo{border-left-color:var(--accent)}
.task.status-doing{border-left-color:var(--warn)}
.task.status-done{border-left-color:var(--ok)}
.task-edit button{margin-top:6px}
.task-del{margin-top:10px}

form>button{margin-top:8px}