body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 24px; color:#222; }
nav { margin-bottom: 16px; display:flex; gap:8px; align-items:center; }
.btn { background:#1976d2; color:#fff; padding:8px 12px; border-radius:6px; text-decoration:none; border:0; display:inline-block; }
.btn.sm { padding:6px 10px; font-size: 0.92em; }
.danger { background:#c62828; color:#fff; padding:6px 10px; border-radius:6px; text-decoration:none; }
.layout-wide { grid-template-columns: 2fr 1.25fr; align-items:start; }
@media (max-width: 1100px) {
  .layout-wide { grid-template-columns: 1fr; }
}
.table { width:100%; border-collapse: collapse; margin-top: 8px; }
.table th, .table td { border-bottom:1px solid #e5e5e5; padding:8px 10px; vertical-align: top; }
.table thead th { background:#f6f7fb; position: sticky; top: 0; }
.flashes {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
  max-width: min(440px, calc(100vw - 32px));
}
.flash {
  padding: 14px 16px;
  border-radius: 6px;
  margin: 0;
  min-width: 200px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  font-size: 1.05rem;
  line-height: 1.35;
}
.flash.success { background:#e9f7ef; color:#216e39; }
.flash.error { background:#fdecea; color:#b71c1c; }
.flash.info { background:#e8f0fe; color:#1a237e; }
.muted { color:#777; }
.card { border:1px solid #eee; border-radius:10px; padding:12px; margin:14px 0; background:#fff; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
input, select { padding:6px 8px; border:1px solid #ddd; border-radius:6px; }
input[type=color] { padding:0; border:none; background:transparent; width:40px; height:32px; }
label { display:flex; flex-direction:column; gap:6px; font-size:0.95em; }
.shared-slot { background:#e9edff; text-align:center; font-weight:600; color:#1a237e; }
.shared-slot small { display:block; font-weight:400; margin-top:4px; color:#3f51b5; }
.actions { min-width: 150px; }
.actions-double { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.shared-row { background:#eec56c; }

/* Timeline */
.timeline-shell { display:grid; grid-template-columns: 70px 1fr; gap:12px; }
.timeline-ruler { position:relative; border-right:1px solid #e5e5e5; color:#666; font-size:12px; padding-right:8px; }
.timeline-body { position:relative; border:1px solid #e5e5e5; border-radius:12px; background:linear-gradient(180deg,#fafafa 0%,#fff 60%); overflow:hidden; }
.timeline-tick { position:absolute; left:0; width:100%; border-top:1px dashed #f1f1f1; display:flex; justify-content:flex-end; padding-right:6px; transform:translateY(-1px); }
.timeline-tick span { background:#fff; padding:0 6px; border-radius:10px; }
.slot-block { position:absolute; left:10px; right:10px; border-radius:12px; box-shadow:0 12px 24px rgba(0,0,0,0.08); cursor:grab; color:#0f172a; overflow:hidden; }
.slot-block.active { outline:2px solid #2563eb; }
.slot-teaching { background:#e0f2fe; border:1px solid #bfdbfe; }
.slot-break { background:#ffe7c2; border:1px solid #f5c66a; }
.slot-label { padding:8px 10px; font-size:14px; line-height:1.3; }
.slot-short .slot-label { line-height:1.2; }
.slot-meta { white-space:nowrap; font-size:12px; color:#0f172a; }
.slot-short .slot-meta { white-space:nowrap; }
.slot-block:not(.slot-short) .slot-meta { white-space:normal; }
.slot-handle { position:absolute; left:0; right:0; height:10px; cursor:ns-resize; }
.handle-top { top:0; }
.handle-bottom { bottom:0; }
.timeline-actions { margin-top:14px; padding:12px; border:1px dashed #d1d5db; border-radius:10px; background:#f9fafb; }
.drag-tooltip { position:absolute; background:#111827; color:#fff; padding:6px 10px; border-radius:8px; font-size:12px; pointer-events:none; box-shadow:0 8px 18px rgba(0,0,0,0.2); display:none; z-index:999; }