:root{
  --paper:#FBFAF7; --ink:#1C1F26; --soft:#6B6F79; --rule:#DFDAD0;
  --accent:#2B5F5A; --accent-weak:#EAF1EF;
  --yes:#2F6B4F; --no:#A93226; --warn:#B5651D; --field:#fff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.55 ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.wide{max-width:900px}

/* ---- barre de navigation ---- */
.nav{border-bottom:1px solid var(--rule);background:var(--paper)}
.nav .inner{max-width:900px;margin:0 auto;padding:11px 20px;display:flex;
  align-items:center;gap:6px;flex-wrap:wrap}
.nav a{color:var(--soft);text-decoration:none;font-size:14px;padding:5px 9px;border-radius:3px}
.nav a:hover{background:var(--accent-weak);color:var(--accent)}
.nav a.here{color:var(--accent);font-weight:600;background:var(--accent-weak)}
.nav .home{font-weight:600;color:var(--ink);margin-right:8px;padding-left:0}
.nav .home:hover{background:none}

/* ---- en-tête de page ---- */
.masthead{border-bottom:1px solid var(--rule);padding:22px 0 16px;margin-bottom:22px}
.masthead h1{margin:0;font:600 21px/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:-.01em}
.masthead p{margin:4px 0 0;color:var(--soft);font-size:14px}

/* ---- contrôles ---- */
.setup{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
  padding:14px;border:1px solid var(--rule);border-radius:4px;background:#fff}
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f.grow{flex:1 1 190px}
.f label{font-size:12.5px;color:var(--soft)}
select,input[type=search]{
  font:inherit;font-size:14px;padding:8px 9px;border:1px solid var(--rule);
  border-radius:3px;background:var(--field);color:inherit;max-width:100%
}
button{
  font:inherit;font-size:14px;font-weight:500;padding:8px 14px;border-radius:3px;
  border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer
}
button.ghost{background:#fff;color:var(--accent)}
button.quiet{background:#fff;color:var(--soft);border-color:var(--rule)}
button:hover{filter:brightness(1.06)}
button[disabled]{opacity:.45;cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.status{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  flex-wrap:wrap;margin:20px 0 4px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.status .where{font-size:14px;color:var(--soft)}
.clock{font-variant-numeric:tabular-nums;font-size:26px;font-weight:600;letter-spacing:-.02em}
.clock.low{color:var(--no)}
.clock.idle{color:var(--rule)}

.tally{margin:22px 0 8px;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.tally .big+.note{margin-left:14px}
.tally .big{font-size:26px;font-weight:600;letter-spacing:-.02em}
.tally .note{color:var(--soft);font-size:14px}
.tools{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 40px}
.empty{padding:40px 0;color:var(--soft)}

/* ---- suivi ---- */
.track{margin:34px 0 60px;padding-top:20px;border-top:1px solid var(--rule)}
.track h2{font-size:16px;margin:0 0 10px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:500;color:var(--soft);font-size:12.5px;padding:5px 6px}
td{padding:6px;border-top:1px solid var(--rule);font-variant-numeric:tabular-nums}
td:first-child{font-variant-numeric:normal}
.bar{height:5px;background:var(--rule);border-radius:99px;overflow:hidden;width:78px}
.bar i{display:block;height:100%;background:var(--accent)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}