:root { color-scheme: light; --accent:#2d6cdf; --border:#e3e6ea; --muted:#6b7280; --overdue:#c0392b; --soon:#c98a00; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:#1c2430; background:#f6f7f9; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.pill { background:#eef2f7; border-radius:10px; padding:1px 8px; font-size:12px; }
a { color:var(--accent); }
button { font:inherit; cursor:pointer; }
.primary { background:var(--accent); color:#fff; border:none; border-radius:6px; padding:8px 14px; font-weight:600; }
.ghost { background:none; border:none; color:var(--muted); }
.err { color:var(--overdue); min-height:1em; }

/* Login */
.login { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:28px; width:320px; display:flex; flex-direction:column; gap:10px; box-shadow:0 6px 24px rgba(0,0,0,.06); }
.login-card h1 { font-size:18px; margin:0; }
.login-card input { padding:10px; border:1px solid var(--border); border-radius:6px; }

/* Topbar */
.topbar { position:sticky; top:0; z-index:5; background:#fff; border-bottom:1px solid var(--border); padding:10px 16px; }
.brand { font-weight:700; }
.filters { display:flex; align-items:center; gap:12px; margin-top:8px; }
.filters input[type=text] { flex:0 0 320px; padding:7px 10px; border:1px solid var(--border); border-radius:6px; }
.filters .spacer { flex:1; }
.chk { color:var(--muted); font-size:13px; }

/* Gantt */
.gantt { padding:12px 16px 40px; }
.gantt-head, .row { display:grid; grid-template-columns:340px 1fr; align-items:stretch; }
.gantt-head { position:sticky; top:57px; background:#f6f7f9; z-index:4; border-bottom:1px solid var(--border); }
.col-label { padding:8px 12px; }
.gantt-head .col-label { font-weight:600; color:var(--muted); font-size:12px; }
.col-axis { position:relative; min-height:20px; }
.axis-tick { position:absolute; top:2px; font-size:11px; color:var(--muted); transform:translateX(-50%); white-space:nowrap; border-left:1px solid var(--border); padding-left:3px; height:100%; }
.axis-today { position:absolute; top:0; bottom:0; width:2px; background:var(--overdue); opacity:.5; }

.rows { background:#fff; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.row { border-bottom:1px solid var(--border); cursor:pointer; transition:background .1s; }
.row:last-child { border-bottom:none; }
.row:hover { background:#f3f7ff; }
.row.overdue { background:#fff5f4; }
.row.overdue:hover { background:#ffeceb; }
.row .r-title { font-weight:600; }
.row .r-sub { font-size:12px; color:var(--muted); margin-top:1px; }
.row .r-next { font-size:12px; margin-top:3px; }
.row .r-next .due { color:var(--soon); font-weight:600; }
.row.overdue .r-next .due { color:var(--overdue); }
.row .col-axis { border-left:1px solid var(--border); }

.bar { position:absolute; inset:0; }
.bar-seg { position:absolute; top:50%; transform:translateY(-50%); height:8px; background:linear-gradient(90deg,#cfe0ff,#9dbcff); border-radius:5px; }
.marker { position:absolute; top:50%; transform:translate(-50%,-50%); width:12px; height:12px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.1); }
.marker.next { background:var(--soon); }
.marker.next.overdue { background:var(--overdue); }
.empty { text-align:center; padding:30px; }

/* Detail */
.detail { position:fixed; inset:0; background:rgba(15,23,42,.35); display:flex; justify-content:flex-end; z-index:20; }
.detail-card { background:#fff; width:min(720px,94vw); height:100%; overflow:auto; padding:22px 26px; position:relative; box-shadow:-8px 0 30px rgba(0,0,0,.15); }
.detail-close { position:absolute; top:14px; right:16px; background:none; border:none; font-size:20px; color:var(--muted); }
.detail-card h2 { margin:0 0 4px; font-size:18px; }
.d-sub { color:var(--muted); font-size:13px; margin-bottom:16px; }
.d-cols { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.d-cols h3 { font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin:0 0 8px; }
@media (max-width:640px){ .d-cols{ grid-template-columns:1fr; } .gantt-head,.row{ grid-template-columns:180px 1fr; } }

.tasks, .events { list-style:none; margin:0; padding:0; }
.tk { padding:4px 0; }
.tk .due { color:var(--soon); font-size:12px; }
.add-task { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.add-task input { padding:7px; border:1px solid var(--border); border-radius:6px; }
.add-task input#ntTitle { flex:1 1 100%; }

.events .ev { display:flex; gap:8px; padding:6px 0; border-bottom:1px dashed #eef; align-items:baseline; }
.ev-date { flex:0 0 82px; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.ev-dot { flex:0 0 9px; width:9px; height:9px; border-radius:50%; margin-top:5px; }
.ev-txt { flex:1; }