:root {
    --gutter-w: 60px;
    --header-h: 36px;
    --row-h: 25px;
    --border: #e5e7eb;
    --ink: #111827;
    --muted: #6b7280;
    --bg: #ffffff;
    --chip: #eef2ff;
    --chip-border: #c7d2fe;
}
html, body { height: 100%; margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; background: #f8fafc; color: var(--ink); }
.page { max-width: 1100px; margin: 24px auto; margin-bottom: 2px; margin-top: 0; padding: 12px; padding-top: 2px; padding-bottom: 0; }
.toolbar { align-items: center; margin-bottom: 12px; border: 5px solid var(--border); border-radius: 10px; }
.toolbar h1 { font-size: 18px; margin: 0 8px 0 0; }
.timetable { height: 80vh;  display: grid; grid-template-columns: var(--gutter-w) 1fr; grid-template-rows: var(--header-h) auto; border: 5px solid var(--border); border-radius: 10px; overflow-y: auto; background: var(--bg); }
.corner { grid-column: 1; grid-row: 1; border-right: 1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:12px; color: var(--muted); background: #fcfcfd; }
.rooms-header { grid-column: 2; grid-row: 1; display: grid; border-bottom: 1px solid var(--border); background: #fcfcfd; }
.rooms-header .room { border-right: 1px solid var(--border); display:flex; align-items:center; justify-content:center; font-weight: 600; font-size: 13px; }
.time-gutter { grid-column: 1; grid-row: 2; border-right: 1px solid var(--border); background: #fff; }
.time-slot { height: var(--row-h); box-sizing: border-box; border-bottom: 1px dashed #f1f5f9; color: var(--muted); font-size: 12px; display:flex; align-items:center; justify-content:center; }
#grid { grid-column: 2; grid-row: 2; position: relative; }
.grid-stack { background: repeating-linear-gradient( to bottom, #ffffff 0, #ffffff calc(var(--row-h) - 1px), #f8fafc calc(var(--row-h) - 1px), #f8fafc var(--row-h) ); }
.grid-stack-item-content { background: var(--chip); border: 1px solid var(--chip-border); border-radius: 8px; align-items:center; justify-content:space-between; padding: 3px 2px; box-sizing: border-box; overflow: hidden !important; text-overflow: ellipsis; }
.event-title { font-size: 9px; font-weight: 600; }
.grid-stack-item { overflow: hidden; }
.event-time { font-size: 11px; color: var(--muted); }
.hint { font-size: 12px; color: var(--muted); margin-top: 8px; }
.legend { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.ui-resizable-handle { background: transparent; }
.custom-control-label { font-size: 0.775rem; }
.detail { font-size: 0.6rem; line-height: 0.7rem; }
.delete-icon { cursor: pointer; position: absolute; bottom: 0; left: 2px; transform: translateY(5px); }
#coupleToPlace > .grid-stack-item { margin-bottom: 2px; cursor: grab; }
#coupleToPlace { height: 59vh; overflow-y: auto; }
main { overflow: hidden !important; }
.grid-stack-item-content { cursor: pointer; }
.grid-stack-item-content .delete-icon { pointer-events: auto; }
.color-gray { background: #f3f4f6; border-color: #d1d5db; color: #374151; }
.color-yellow { background: #fef3c7; border-color: #fde68a; color: #78350f; }
.color-green { background: #dcfce7; border-color: #86efac; color: #14532d; }