:root { --ink: #1c2b39; --muted: #5f6f7e; --line: #d8dfe6; --brand: #0b5c8a; --error: #a4262c; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #f5f7f9; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; color: var(--brand); text-decoration: none; }
.top-actions { display: flex; gap: 16px; }
.page { max-width: 480px; margin: 24px auto; padding: 0 16px; }
.card { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
h1 { margin: 0 0 12px; font-size: 1.4rem; }
label { display: block; margin: 12px 0 4px; font-weight: 600; }
.rows { margin: 0; padding: 0; list-style: none; }
.rows li { padding: 10px 0; border-top: 1px solid var(--line); }
.rows .muted { display: block; font-size: .9rem; }
dl { margin: 0; }
dt { margin-top: 10px; font-size: .85rem; color: var(--muted); }
dd { min-height: 1.2em; margin: 0; }
dd.code { font-size: 1.4rem; font-weight: 700; }
dd.text { white-space: pre-line; }
.rows li.cancelled a { text-decoration: line-through; }
input[type=date], input[type=number] { width: 100%; padding: 12px; font-size: 1rem; border: 1px solid var(--line); border-radius: 6px; }
.page.wide { max-width: none; margin: 12px 0; }
.calendar-nav { display: flex; gap: 16px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; }
.key { padding: 2px 8px; border: 1px solid var(--line); border-radius: 4px; }
.calendar-scroll { max-height: 75vh; overflow: auto; background: #fff; border: 1px solid var(--line); }
.calendar { border-collapse: separate; border-spacing: 0; font-size: .8rem; }
.calendar th, .calendar td { min-width: 78px; max-width: 110px; height: 30px; padding: 2px 4px; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-overflow: ellipsis; white-space: nowrap; }
.calendar thead th { position: sticky; z-index: 2; background: #fff; }
.calendar thead tr:first-child th { top: 0; }
.calendar thead tr:nth-child(2) th { top: 31px; white-space: normal; }
.calendar th.group { color: #fff; text-align: left; background: var(--brand); }
.calendar th.day { position: sticky; left: 0; z-index: 1; min-width: 96px; text-align: left; background: #fff; }
.calendar thead th.day { z-index: 3; }
.calendar small { display: block; font-weight: 400; color: var(--muted); }
.calendar .weekend th.day { background: #e9eef3; }
.calendar .today th.day { color: #fff; background: var(--brand); }
.calendar .today th.day small { color: #fff; }
.stay { background: #cfe5f5; }
.stay.owner { background: #f6dfa8; }
.stay.start { font-weight: 600; }
.changeover { color: #fff; background: #1f7a4d; }
.back-to-back { color: #fff; background: #a33a1e; }
.no-changeover { background: repeating-linear-gradient(45deg, #eee, #eee 4px, #ddd 4px, #ddd 8px); }
.calendar td.back-to-back a { color: #fff; }
.changeover.assigned { background: #2f6fb0; }
.back-to-back.assigned { background: #6d3a8f; }
.calendar td.assigned a { color: #fff; }
.calendar .who, .calendar .moved { font-size: .75rem; }
.calendar.rota td { min-width: 110px; height: auto; vertical-align: top; white-space: normal; }
.calendar.rota th.day { min-width: 130px; }
.calendar .job { margin-bottom: 4px; padding: 2px 4px; background: #cfe5f5; border-radius: 3px; }
.calendar .job small { display: inline; }
.calendar td.off { background: repeating-linear-gradient(45deg, #eee, #eee 4px, #ddd 4px, #ddd 8px); }
.link.small { font-size: .75rem; }
.unassigned { max-width: 480px; margin: 16px 0; }
fieldset { margin: 12px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; }
details.danger { margin-top: 16px; }
.danger-button { background: var(--error); }
input[type=time] { width: 100%; padding: 12px; font-size: 1rem; border: 1px solid var(--line); border-radius: 6px; }
.day-job { padding: 12px 8px; }
.day-job-top { display: flex; justify-content: space-between; gap: 8px; }
.status { padding: 1px 8px; font-size: .85rem; background: #eef1f4; border-radius: 10px; }
.status-cleaningfinished .status { background: #f6dfa8; }
.status-ready .status { color: #fff; background: #1f7a4d; }
.day-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.day-actions button { padding: 8px 12px; font-size: .95rem; color: var(--brand); background: #fff; border: 1px solid var(--brand); border-radius: 6px; }
.job-date { margin: 20px 0 8px; }
.my-job { margin-bottom: 12px; }
.my-job.changed { border: 2px solid #c98a00; }
.changed-flag { margin: 0 0 8px; padding: 4px 8px; font-weight: 600; background: #f6dfa8; border-radius: 4px; }
.my-job h3 { margin: 16px 0 0; font-size: 1rem; }
.my-job p { margin: 6px 0; }
.text { white-space: pre-line; }
label.check { font-weight: 400; }
h2 { margin: 20px 0 8px; font-size: 1.1rem; }
select, textarea, input[type=email], input[type=text] { width: 100%; padding: 12px; font-size: 1rem; border: 1px solid var(--line); border-radius: 6px; }
.button { width: 100%; margin-top: 16px; padding: 12px; color: #fff; font-size: 1rem; background: var(--brand); border: 0; border-radius: 6px; }
.link { padding: 0; color: var(--brand); font-size: 1rem; background: none; border: 0; cursor: pointer; }
.muted { color: var(--muted); }
.preview { margin-top: 16px; padding: 12px; background: #f5f7f9; border: 1px solid var(--line); border-radius: 6px; }
code { font-size: .9rem; }
.button.inline { display: inline-block; width: auto; padding: 10px 16px; text-decoration: none; }
.within-month { border-left: 4px solid #c98a00; padding-left: 8px; }
.change-lines { margin: 4px 0; padding-left: 18px; font-size: .9rem; }
.decide { display: flex; gap: 8px; }
.decide .button { width: auto; margin-top: 8px; padding: 8px 16px; }
.hours-table { width: 100%; margin: 8px 0; border-collapse: collapse; font-size: .9rem; }
.hours-table th, .hours-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.time-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.time-row input[type=time] { width: auto; padding: 8px; }
.photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.photos img { width: 120px; height: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.button.secondary { color: var(--brand); background: #fff; border: 1px solid var(--brand); }
.error { margin: 12px 0; color: var(--error); }