:root{
  --bg:#1c2128;
  --card:#242a33;
  --card-alt:#2a313c;
  --border:#39414d;
  --text:#e8eaed;
  --muted:#93a0b0;
  --accent:#e8a33d;
  --accent-dim:#3a3021;
  --danger:#e26666;
  --mono: 'SF Mono', 'JetBrains Mono', Consolas, monospace;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding:28px 16px 60px;
}
.wrap{max-width:780px;margin:0 auto;}
header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:22px;
  flex-wrap:wrap;
  gap:12px;
}
h1{font-size:20px;font-weight:600;margin:0 0 4px;letter-spacing:.2px;}
.subtitle{color:var(--muted);font-size:13px;margin:0;}
.user-bar{color:var(--muted);font-size:12px;margin-top:4px;}
.user-bar .username{color:var(--text);font-weight:600;}
.user-bar a{color:var(--muted);text-decoration:none;margin-left:8px;}
.user-bar a:hover{color:var(--accent);}
.week-total{text-align:right;}
.week-total .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.week-total .value{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--accent);}
.clear-btn{
  margin-top:6px;
  background:none;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:11px;
  padding:4px 9px;
  border-radius:6px;
  cursor:pointer;
  font-family:inherit;
}
.clear-btn:hover{border-color:var(--danger);color:var(--danger);}

.week-nav{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.week-nav-btn{
  background:none;
  border:1px solid var(--border);
  color:var(--text);
  width:30px;
  height:30px;
  border-radius:7px;
  font-size:16px;
  cursor:pointer;
  line-height:1;
  flex:0 0 auto;
}
.week-nav-btn:hover{border-color:var(--accent);color:var(--accent);}
.week-nav-center{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:0;
}
.week-label{
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
}
.week-today-btn{
  background:none;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:11px;
  padding:4px 9px;
  border-radius:6px;
  cursor:pointer;
  font-family:inherit;
}
.week-today-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.week-today-btn:disabled{opacity:.4;cursor:default;}
.week-jump{
  flex:0 0 auto;
  background:var(--card-alt);
  border:1px solid var(--border);
  color:var(--text);
  font-size:12px;
  padding:6px 8px;
  border-radius:7px;
  font-family:inherit;
  max-width:180px;
}

.toolbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:12px;
}
.manage-clients-btn{
  background:none;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:11px;
  padding:4px 9px;
  border-radius:6px;
  cursor:pointer;
  font-family:inherit;
}
.manage-clients-btn:hover{border-color:var(--accent);color:var(--accent);}

.section-heading{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:500;
  margin:24px 0 10px;
}

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:100;
}
/* Author-level `display:flex` above otherwise beats the browser's built-in
   `[hidden]{display:none}` UA rule regardless of specificity, since author
   styles always win over user-agent styles — so toggling the `hidden`
   attribute alone would never actually hide this element. */
.modal-overlay[hidden]{display:none;}
.modal-panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  width:100%;
  max-width:380px;
  max-height:80vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.modal-header h2{font-size:14.5px;margin:0;font-weight:600;}
.modal-close{
  background:none;
  border:none;
  color:var(--muted);
  font-size:18px;
  cursor:pointer;
  width:28px;
  height:28px;
  border-radius:6px;
  line-height:1;
}
.modal-close:hover{color:var(--danger);background:rgba(226,102,102,0.1);}
.client-manager-list{overflow-y:auto;padding:6px 8px;}
.client-manager-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 8px;
  border-radius:7px;
  font-size:13.5px;
}
.client-manager-row:hover{background:var(--card-alt);}
.client-manager-row .name{color:var(--text);}

.day{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:14px;
  overflow:hidden;
}
.day-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  background:var(--card-alt);
  border-bottom:1px solid var(--border);
}
.day-name{font-weight:600;font-size:14.5px;}
.day-date{font-weight:400;font-size:12px;color:var(--muted);margin-left:4px;}
.day-total{font-family:var(--mono);font-size:14.5px;color:var(--accent);font-weight:600;}
table{width:100%;border-collapse:collapse;}
thead th{
  text-align:left;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  font-weight:500;
  padding:8px 16px 6px;
}
th.hcol-hours, td.col-hours{text-align:right;padding-right:16px;}
th.hcol-del, td.col-del{width:34px;padding:0;}
th.hcol-mark, td.col-mark{width:38px;padding:0;text-align:center;}
tbody td{padding:4px 6px;border-top:1px solid var(--border);}
tbody tr:first-child td{border-top:none;}
tbody tr.marked{opacity:.45;}
tbody tr.marked input[type=text]{text-decoration:line-through;}
td:first-child{padding-left:12px;}
input[type=text]{
  width:100%;
  background:transparent;
  border:1px solid transparent;
  color:var(--text);
  font-size:13.5px;
  padding:7px 8px;
  border-radius:6px;
  font-family:inherit;
}
input[type=text]:hover{border-color:var(--border);}
input[type=text]:focus{outline:none;border-color:var(--accent);background:rgba(232,163,61,0.06);}
input.hours-input{width:70px;text-align:right;font-family:var(--mono);margin-left:auto;display:block;}
.del-btn, .mark-btn{
  background:none;
  border:none;
  color:var(--muted);
  cursor:pointer;
  width:28px;
  height:28px;
  border-radius:6px;
  line-height:1;
}
.del-btn{font-size:15px;}
.del-btn:hover{color:var(--danger);background:rgba(226,102,102,0.1);}
.mark-btn{
  font-size:13px;
  border:1px solid var(--border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.mark-btn:hover{border-color:var(--accent);color:var(--accent);}
.mark-btn.on{background:var(--accent);border-color:var(--accent);color:#241a08;}
.empty-row{padding:14px 16px;color:var(--muted);font-size:12.5px;font-style:italic;}
.add-row{
  display:flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  background:transparent;
  border:none;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:12.5px;
  cursor:pointer;
  width:100%;
  text-align:left;
  font-family:inherit;
}
.add-row:hover{color:var(--accent);background:rgba(232,163,61,0.05);}
.add-row:disabled{opacity:.5;cursor:default;}
.add-row .plus{font-size:14px;font-weight:700;color:var(--accent);}

/* Reports */
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:560px){.report-grid{grid-template-columns:1fr;}}
.report-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 16px 8px;
}
.report-card h3{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  font-weight:500;
  margin:0 0 10px;
}
.report-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:7px 0;
  border-top:1px solid var(--border);
  font-size:13px;
}
.report-item:first-of-type{border-top:none;}
.report-item .name{color:var(--text);}
.report-item .bar-wrap{flex:1;margin:0 10px;height:4px;background:var(--card-alt);border-radius:2px;overflow:hidden;}
.report-item .bar{height:100%;background:var(--accent);}
.report-item .hrs{font-family:var(--mono);color:var(--accent);font-weight:600;white-space:nowrap;}
.report-empty{color:var(--muted);font-size:12.5px;font-style:italic;padding:10px 0;}

footer{text-align:center;margin-top:20px;font-size:11.5px;color:var(--muted);}
.save-note{opacity:0;transition:opacity .3s;color:var(--accent);}
.save-note.show{opacity:1;}

/* Auth pages (login / setup) */
body.auth-page{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:16px;
}
.auth-card{
  width:100%;
  max-width:360px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:28px 26px;
}
.auth-card h1{font-size:19px;margin:0 0 6px;}
.auth-sub{color:var(--muted);font-size:12.5px;margin:0 0 18px;line-height:1.5;}
.auth-error{
  background:rgba(226,102,102,0.1);
  border:1px solid var(--danger);
  color:var(--danger);
  font-size:12.5px;
  padding:8px 10px;
  border-radius:8px;
  margin:0 0 14px;
}
.auth-card form{display:flex;flex-direction:column;}
.auth-card label{font-size:12px;color:var(--muted);margin:10px 0 4px;}
.auth-card label:first-of-type{margin-top:0;}
.auth-card input[type=text],
.auth-card input[type=password]{
  background:var(--card-alt);
  border:1px solid var(--border);
  color:var(--text);
  font-size:14px;
  padding:9px 10px;
  border-radius:8px;
  font-family:inherit;
}
.auth-card input[type=text]:focus,
.auth-card input[type=password]:focus{outline:none;border-color:var(--accent);}
.auth-card button{
  margin-top:18px;
  background:var(--accent);
  border:none;
  color:#241a08;
  font-weight:600;
  font-size:14px;
  padding:10px 12px;
  border-radius:8px;
  cursor:pointer;
  font-family:inherit;
}
.auth-card button:hover{opacity:.92;}