:root {
    --bg: #0f1116;
    --panel: #151823;
    --text: #e6e9ef;
    --muted: #8a90a2;
    --work: #1f7a3a;
    --off: #3a3f4d;
    --weekend: #2d3144;
    --holiday: #7c3aed;
    --vacation: #c2780a;
    --duty: #c53030;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: var(--panel);
    border-bottom: 1px solid #222;
}
.topbar a { color: var(--text); text-decoration: none; margin-left: 12px; }
.topbar .brand { font-weight: 600; }
.topbar .hello { color: var(--muted); margin-right: 8px; }

main { padding: 16px 24px; }

.controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.controls h1 { font-size: 20px; margin: 0; min-width: 110px; text-align: center; }
.controls button {
    background: var(--panel);
    color: var(--text);
    border: 1px solid #2a2e3a;
    padding: 4px 12px;
    cursor: pointer;
    border-radius: 4px;
}

.legend { display: flex; gap: 10px; align-items: center; color: var(--muted); margin-left: auto; }
.legend .swatch {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}
.legend .work { background: var(--work); }
.legend .weekend { background: var(--weekend); }
.legend .holiday { background: var(--holiday); }
.legend .vacation { background: var(--vacation); }
.legend .duty { background: var(--duty); }

table.cal { border-collapse: collapse; }
table.cal th, table.cal td {
    border: 1px solid #20242f;
    padding: 4px 6px;
    text-align: center;
    min-width: 40px;
}
table.cal thead th { background: var(--panel); font-weight: 500; }
table.cal tbody th { background: var(--panel); color: var(--muted); width: 32px; }
table.cal tbody th.wkend { color: #c97070; }

td.cell { background: var(--off); }
td.cell.work { background: var(--work); }
td.cell.weekend { background: var(--weekend); }
td.cell.holiday { background: var(--holiday); }
td.cell.vacation { background: var(--vacation); }
td.cell.duty { background: var(--duty); }
td.cell.on-rotation { box-shadow: inset 0 0 0 2px var(--duty); }
td.cell.mine { cursor: pointer; }
td.cell.mine:hover { filter: brightness(1.2); }