:root { color: #252d37; background: #f4f6f8; font: 16px/1.45 "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
header { background: #263648; color: white; padding: 10px max(12px, calc((100vw - 1024px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
header strong { font-size: 18px; }
header button { background: transparent; color: white; border-color: #9aabbb; }
.shell { max-width: 1024px; min-height: calc(100vh - 64px); margin: auto; background: white; display: grid; grid-template-columns: 160px minmax(0,1fr); }
.shell.narrow { display: block; max-width: 440px; min-height: auto; margin: 18px auto; }
nav { background: #f1f4f7; padding: 10px; display: grid; align-content: start; gap: 4px; }
nav a { color: #33485a; padding: 10px 5px; border-radius: 5px; text-decoration: none; }
nav [aria-current] { color: #154e78; background: #e0edf8; font-weight: 650; }
main { min-width: 0; padding: 18px; display: grid; align-content: start; gap: 12px; }
h1,h2,p,pre { margin: 0; }
h1 { font-size: 23px; }
h2 { font-size: 18px; }
pre { font: inherit; white-space: pre-wrap; }
button,input,textarea,.button { font: inherit; color: inherit; min-height: 44px; padding: 7px 9px; border: 1px solid #b8c4d0; border-radius: 5px; background: white; }
button,.button,summary { cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
.button { text-decoration: none; display: inline-flex; align-items: center; }
.primary { background: #e5f1fb; color: #204e70; border-color: #b8d3e8; }
label { display: grid; gap: 4px; min-width: 0; }
label input,textarea { width: 100%; min-width: 0; }
label.check { display: flex; align-items: center; gap: 4px; }
input[type=checkbox] { width: 18px; min-height: 18px; }
.panel { border: 1px solid #d3dce5; padding: 11px; border-radius: 6px; min-width: 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.stack { display: grid; gap: 8px; align-content: start; }
.layout { display: grid; grid-template-columns: minmax(0,1fr) 235px; align-items: start; gap: 12px; }
.fields,.share-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.share-row { grid-template-columns: minmax(0,1.8fr) minmax(0,1fr); }
.share-row button { font-size: 14px; padding: 4px; }
.period button { grid-column: 1/-1; justify-self: start; }
.totals { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.totals div { flex: 1 1 105px; padding: 7px; border-top: 2px solid #91abc3; background: #f1f5f8; }
.totals strong { display: block; font-size: 19px; }
.month { display: flex; align-items: center; justify-content: space-between; }
.month a { font-size: 25px; min-width: 44px; text-align: center; color: #154e78; text-decoration: none; }
.calendar { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; text-align: center; }
.calendar a { min-width: 0; min-height: 47px; border: 1px solid #bac7d3; border-radius: 4px; text-decoration: none; display: grid; place-content: center; line-height: 1.15; }
.calendar small { font-size: 11px; }
.calendar [aria-current] { outline: 2px solid #17649e; outline-offset: -2px; }
.work { background: #e3f2e8; color: #234d37; }
.rest { background: #f8e4e5; color: #733f47; }
.empty { color: #384552; background: white; }
.legend { display: flex; gap: 4px; flex-wrap: wrap; font-size: 12px; }
.legend span { padding: 2px 4px; border: 1px solid #bac7d3; border-radius: 3px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th,td { text-align: left; padding: 8px 5px; border-bottom: 1px solid #d7dfe6; overflow-wrap: anywhere; }
th { background: #edf2f6; }
th:last-child,td:last-child { text-align: right; }
.error { color: #8a3540; }
[data-feedback]:empty { display: none; }
@media (max-width: 780px) { .layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .shell { grid-template-columns: 1fr; }
  main { padding: 10px; }
  nav { display: flex; gap: 4px; padding: 5px; }
  nav a { flex: 1; text-align: center; font-size: 14px; }
  .calendar small { font-size: 10px; }
}