:root { --bg:#faf7f1; --panel:#fff; --ink:#2a2117; --accent:#8a5b32; --ok:#d9f4d9; --warn:#ffe3e3; }
* { box-sizing:border-box; font-family: "Segoe UI", sans-serif; }
body { margin:0; background:linear-gradient(120deg,#f8f3ea,#efe4d0); color:var(--ink); }
header > nav > a {
    text-decoration: none;
    color: #000;
    &:active {
        color: #000;
    }
    &:hover
    {
        text-shadow: 0px 0px 1px black;
    }
}
.topbar { display:flex; justify-content:space-between; padding:10px 16px; background:#fff; border-bottom:1px solid #ddd; }
.topbar nav { display:flex; gap:12px; align-items:center; }
.page { padding:16px; }
.planner { display:grid; grid-template-columns:280px 1fr; gap:16px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
aside, section, .card { background:var(--panel); border-radius:10px; padding:12px; box-shadow:0 2px 10px #00000010; }
.planner section { overflow-x:auto; }
.narrow { max-width: 520px; }
label { display:block; margin:8px 0; }
input, select, button { padding:8px; border-radius:8px; border:1px solid #cfcfcf; min-height: 2.8em; }
input[type="color"] { padding: 0 0.2em; }
.worker { width:100%; display:flex; gap:8px; align-items:center; padding:8px; margin:4px 0; border:1px solid #ddd; border-radius:8px; background:#fff; }
.worker.selected { border-color:#145a86; background:#e9f4ff; box-shadow: inset 0 0 0 2px #145a8630; }
.worker-mark { margin-left:auto; font-size:12px; font-weight:700; color:#145a86; }
.avatar, .chip { display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; border-radius:50%; color:#fff; font-size:12px; font-weight:700; }
.chip-img { width:28px; height:28px; border-radius:50%; border:2px solid; object-fit:cover; }
.worker img { width:28px; height:28px; border-radius:50%; border:2px solid; object-fit:cover; }
.calendar { display:grid; grid-template-columns:56px repeat(7, minmax(100px,1fr)); gap:8px; align-items:stretch; min-width:840px; }
.week-header, .day-header, .week-number { display:flex; align-items:center; justify-content:center; font-weight:700; color:#6a5c4e; }
.week-header, .day-header { background:#f3efe8; border-radius:6px; min-height:32px; }
.week-number { background:#f3efe8; border:1px solid #ddd; border-radius:8px; min-height:80px; }
.day { min-height:80px; border:1px solid #ddd; background:#fff; border-radius:8px; text-align:left; padding:28px 8px 8px; position:relative; }
.day-number { position:absolute; top:6px; left:8px; font-weight:700; line-height:1; }
.day.empty { background:#f3f5f7; border:1px dashed #cfd5dc; cursor:default; }
.day.green { background:var(--ok); }
.day.red { background:var(--warn); }
.day.today { outline:2px solid #1b6ac9; }
.day.blocked { background:repeating-linear-gradient(135deg,#e7edf6,#e7edf6 8px,#dbe5f3 8px,#dbe5f3 16px); color:#304a68; border-color:#95acc7; }
.chips { display:flex; gap:4px; flex-wrap:wrap; margin-top:0; align-items:flex-start; }
.status { display:inline-block; width:12px; height:12px; border-radius:50%; }
.status.good { background:#17b45c; }
.status.bad { background:#cf3f3f; }
.admin-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.live-legend-card { margin-top:12px; }
.live-legend-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; }
.live-legend-item { display:flex; align-items:center; gap:8px; min-height:34px; }
.live-day { background:#fff; border:1px solid #ddd; border-radius:8px; padding:8px; margin:6px 0; }
.live-day.today { border-color:#1b6ac9; box-shadow:0 0 0 2px #1b6ac955 inset; }
.small { font-size:12px; opacity:0.8; }
.mini-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; margin-top:8px; }
.mini-cell { display:inline-flex; align-items:center; justify-content:center; border:1px solid #ddd; border-radius:4px; padding:4px; font-size:12px; }
.mini-cell.on { background:#1b6ac9; color:#fff; border-color:#1b6ac9; }
.log-day { margin-bottom:12px; border-bottom:1px solid #ececec; padding-bottom:8px; }
.log-row { display:flex; align-items:center; gap:8px; margin:4px 0; }
.log-time { min-width:48px; font-variant-numeric: tabular-nums; }
.log-date { font-variant-numeric: tabular-nums; font-weight:600; }
.log-sign { display:inline-flex; width:18px; justify-content:center; font-weight:700; border-radius:10px; }
.log-sign.add { color:#0f7f3a; background:#e6f7ea; }
.log-sign.remove { color:#9a2222; background:#fdeaea; }
.queue-item { margin-bottom:10px; }
.tag { display:inline-block; margin:2px 4px 2px 0; padding:2px 6px; border-radius:12px; font-size:12px; border:1px solid #ddd; }
.tag.add { background:#e6f7ea; border-color:#b8e0c0; }
.tag.remove { background:#fdeaea; border-color:#f0bbbb; }
.palette-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(36px, 1fr)); gap:6px; margin-top:8px; max-width:520px; }
.palette-swatch { width:100%; min-height:34px; border-radius:8px; border:2px solid #d4d4d4; cursor:pointer; position:relative; }
.palette-swatch.used { border-color:#6f8fb0; }
.palette-swatch.selected { outline:2px solid #1b6ac9; outline-offset:1px; }
.palette-swatch .palette-count { position:absolute; right:4px; bottom:3px; font-size:11px; background:#ffffffcc; border-radius:8px; padding:0 4px; border:1px solid #d2d2d2; }
.history-panel.hidden { display:none; }
#historyGrid { max-width: 20em;}
@media (max-width: 980px) {
    .planner, .admin-grid {
        grid-template-columns: 1fr;
    }
}