:root {
  --ink:#1a1d21; --mut:#6b7280; --line:#d6d9de; --bg:#f4f5f7; --card:#fff;
  --accent:#3b5bdb; --soft:#eef1f6; --lock:#b45309; --lockbg:#fef3c7;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.topnav { display:flex; align-items:center; gap:20px; padding:10px 20px;
  background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; }
.topnav a { color:var(--mut); text-decoration:none; padding:4px 2px; }
.topnav a.on { color:var(--ink); font-weight:600; border-bottom:2px solid var(--accent); }
.topnav .right { margin-left:auto; color:var(--mut); font-size:13px; display:flex; gap:6px; align-items:center; }
.wrap { max-width:1000px; margin:0 auto; padding:20px; }
.inlineform { display:inline; }
.linkish { background:none; border:none; color:var(--mut); cursor:pointer; font:inherit; padding:0; text-decoration:underline; }

.ctl { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.spacer { flex:1; }
.btn, select, input[type=date] { border:1px solid var(--line); border-radius:6px; background:var(--card);
  padding:5px 10px; font-size:13px; color:var(--ink); text-decoration:none; cursor:pointer; }
.btn.static { cursor:default; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.ghost { background:var(--soft); }
.btn.wide { width:100%; margin-top:14px; }
.hidden { display:none !important; }
.muted { color:var(--mut); }
.err { color:#b91c1c; }
.err-inline { color:#b91c1c; font-weight:600; font-size:12px; }
.warn { background:var(--lockbg); color:var(--lock); border-radius:6px; padding:6px 10px; font-size:13px; }
.tag { font-size:11px; background:var(--soft); border-radius:99px; padding:2px 8px; color:var(--mut); }
.tag.lock { background:var(--lockbg); color:var(--lock); }

table.grid { border-collapse:collapse; width:100%; background:var(--card);
  border:1px solid var(--line); border-radius:8px; overflow:hidden; font-size:13px; }
.grid th { font-weight:600; color:var(--mut); text-align:left; padding:8px; font-size:12px;
  border-bottom:1px solid var(--line); background:#fafbfc; }
.grid th.today { color:var(--accent); }
.grid td { padding:6px 8px; border-bottom:1px solid var(--soft); }
.grid td.num, .grid th.num { text-align:right; font-variant-numeric:tabular-nums; }
.grid tr.total td { border-top:1px solid var(--line); font-weight:600; border-bottom:none; }
.grid tr.grp td { background:#fafbfc; font-weight:600; }
.grid td.indent { padding-left:28px; }
.proj { white-space:nowrap; }
.cell { border:none; background:var(--soft); border-radius:4px; padding:3px 8px; min-width:48px;
  cursor:pointer; font:inherit; font-variant-numeric:tabular-nums; }
.cell.empty { background:transparent; color:#c3c7cd; }
.cell.locked { background:var(--lockbg); color:var(--lock); }
.cell:hover { outline:2px solid var(--accent); }

dialog { border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.15);
  padding:16px 18px; width:320px; }
dialog::backdrop { background:rgba(0,0,0,.2); }
dialog h3 { margin:0 0 10px; font-size:15px; }
dialog label { display:block; color:var(--mut); font-size:12px; margin:10px 0 3px; }
dialog input[type=text], dialog textarea { width:100%; border:1px solid var(--line); border-radius:6px;
  padding:6px 8px; font:inherit; resize:vertical; }
dialog .row { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }

.login-card { max-width:340px; margin:8vh auto; background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:24px 28px; }
.login-card h1 { margin:0 0 14px; font-size:20px; }
.login-card label { display:block; color:var(--mut); font-size:12px; margin:12px 0 3px; }
.login-card input { width:100%; border:1px solid var(--line); border-radius:6px; padding:8px 10px; font:inherit; }

.daycard { background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; margin-bottom:12px; }
.daycard-title { font-size:14px; margin-bottom:4px; }
.daycard label { display:block; color:var(--mut); font-size:12px; margin:8px 0 3px; }
.daycard input[type=text], .daycard textarea { width:100%; border:1px solid var(--line);
  border-radius:6px; padding:6px 8px; font:inherit; resize:vertical; }
.daycard .row { display:flex; justify-content:flex-end; margin-top:10px; }
.daytotal { font-size:15px; }

@media (max-width: 640px) {
  .wrap { padding:12px; }
  .topnav { gap:12px; padding:10px 12px; }
  table.grid { display:block; overflow-x:auto; }
}

.addrow td { border-bottom: none; }
.addsel { color: var(--accent); border-style: dashed; max-width: 320px; }

a.drill { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--mut); }
a.drill:hover { color: var(--accent); border-bottom-color: var(--accent); }
td.notes { color: var(--mut); font-size: 12px; max-width: 420px; }
.proj a { color: var(--accent); text-decoration: none; }
.proj a:hover { text-decoration: underline; }

.dayrow { cursor: pointer; }
.dayrow:hover td { background: #fafbfc; }
.caret { color: var(--mut); font-size: 12px; user-select: none; }
.dayform td { background: #fafbfc; }
.daycard.inline { border: none; margin: 0; padding: 4px 6px 6px; background: transparent; }
.daycard.inline input[type=text] { max-width: 140px; display: block; }