chore: ui polish — extract inline styles to CSS classes, add header art

- Move inline style.cssText to semantic classes (cal-legend, cal-header-cell,
  cal-day-tag-label, cal-btn-row) in calendar.js
- Buttons "FT"/"BU" → "Feiertag"/"Betriebsurl." for clarity
- Decorative turntable/mixer SVG header art in index.html
- style.css build-out for the new classes
- Initial README content
- Dev port 3000 → 3001

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

README.md

@@ -0,0 +1,27 @@
+# Morning Meeting Planner
+
+Web-App zur Planung und Verwaltung von Morning-Meeting-Moderatoren.
+
+## Features
+
+- **Mitarbeiterverwaltung** – Mitarbeiter anlegen, bearbeiten und deaktivieren
+- **Monatsplanung** – Kalenderbasierte Zuweisung von Moderatoren pro Tag
+- **Algorithmus** – Automatische, gleichmäßige Verteilung der Moderationen auf alle aktiven Mitarbeiter
+- **Excel-Export** – Fertige Monatsplanung als XLSX-Datei exportieren
+- **JSON Import/Export** – Kompletten Datenstand sichern und wiederherstellen
+- **Verlauf** – Vergangene Monatspläne einsehen und wiederherstellen
+- **Persistenz** – Automatische Speicherung im Browser (localStorage)
+
+## Starten
+
+```bash
+npm start
+```
+
+Die App läuft auf **http://localhost:3001**.
+
+## Tests
+
+```bash
+npm test
+```

index.html

@@ -4,12 +4,119 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Morning Meeting Planner</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="style.css">
   <script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>
 </head>
 <body>
   <header>
-    <h1>Morning Meeting Planner</h1>
+    <h1>Meeting Mixer</h1>
+    <div class="header-graphic" aria-hidden="true">
+      <svg viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
+        <!-- ── Platter shadow glow ── -->
+        <circle cx="80" cy="84" r="68" fill="rgba(200,169,81,0.04)"/>
+
+        <!-- ── Turntable platter body ── -->
+        <circle cx="80" cy="84" r="62" fill="#111111" stroke="#1e1e1e" stroke-width="1"/>
+
+        <!-- ── Vinyl grooves (concentric rings) ── -->
+        <circle cx="80" cy="84" r="56" fill="none" stroke="#1c1c1c" stroke-width="0.8"/>
+        <circle cx="80" cy="84" r="50" fill="none" stroke="#1c1c1c" stroke-width="0.8"/>
+        <circle cx="80" cy="84" r="44" fill="none" stroke="#1d1d1d" stroke-width="0.7"/>
+        <circle cx="80" cy="84" r="38" fill="none" stroke="#1d1d1d" stroke-width="0.7"/>
+        <circle cx="80" cy="84" r="32" fill="none" stroke="#1e1e1e" stroke-width="0.7"/>
+        <circle cx="80" cy="84" r="26" fill="none" stroke="#1e1e1e" stroke-width="0.7"/>
+
+        <!-- ── Label area border (gold ring) ── -->
+        <circle cx="80" cy="84" r="21" fill="#161616" stroke="rgba(200,169,81,0.45)" stroke-width="1.2"/>
+
+        <!-- ── Label inner ── -->
+        <circle cx="80" cy="84" r="19" fill="#1a1a1a"/>
+
+        <!-- ── Label text ── -->
+        <text x="80" y="88" text-anchor="middle"
+              font-family="'Bebas Neue', sans-serif"
+              font-size="13" fill="rgba(200,169,81,0.65)"
+              letter-spacing="3">MM</text>
+
+        <!-- ── Spindle ── -->
+        <circle cx="80" cy="84" r="3.5" fill="none" stroke="#c8a951" stroke-width="1.5"/>
+        <circle cx="80" cy="84" r="1.5" fill="#c8a951" opacity="0.9"/>
+
+        <!-- ── Outer platter rim ── -->
+        <circle cx="80" cy="84" r="62" fill="none" stroke="rgba(200,169,81,0.18)" stroke-width="1.5"/>
+
+        <!-- ── Tonearm pivot base ── -->
+        <circle cx="158" cy="24" r="7" fill="#161616" stroke="#c8a951" stroke-width="1.5"/>
+        <circle cx="158" cy="24" r="2.5" fill="#c8a951" opacity="0.8"/>
+
+        <!-- ── Tonearm tube (two lines = tube shape) ── -->
+        <line x1="158" y1="24" x2="115" y2="70"
+              stroke="#c8a951" stroke-width="2.5"
+              stroke-linecap="round" opacity="0.9"/>
+        <line x1="157" y1="27" x2="114" y2="73"
+              stroke="#8c7435" stroke-width="1"
+              stroke-linecap="round" opacity="0.5"/>
+
+        <!-- ── Headshell (cartridge) ── -->
+        <polygon points="111,66 118,73 113,78 106,71"
+                 fill="#c8a951" opacity="0.85"/>
+
+        <!-- ── Needle contact indicator ── -->
+        <line x1="108" y1="74" x2="100" y2="79"
+              stroke="rgba(200,169,81,0.5)" stroke-width="1"
+              stroke-dasharray="2,2"/>
+        <circle cx="99" cy="80" r="2" fill="#c8a951" opacity="0.6"/>
+
+        <!-- ── Mixer panel (right side, abstract) ── -->
+        <!-- Panel background -->
+        <rect x="148" y="58" width="44" height="90" rx="2"
+              fill="#161616" stroke="#2a2a2a" stroke-width="1"/>
+
+        <!-- Fader track 1 -->
+        <rect x="157" y="66" width="3" height="48" rx="1.5"
+              fill="#0d0d0d" stroke="#2a2a2a" stroke-width="0.5"/>
+        <rect x="154" y="88" width="9" height="8" rx="1"
+              fill="#c8a951" opacity="0.85"/>
+
+        <!-- Fader track 2 -->
+        <rect x="170" y="66" width="3" height="48" rx="1.5"
+              fill="#0d0d0d" stroke="#2a2a2a" stroke-width="0.5"/>
+        <rect x="167" y="80" width="9" height="8" rx="1"
+              fill="#c8a951" opacity="0.6"/>
+
+        <!-- Fader track 3 -->
+        <rect x="183" y="66" width="3" height="48" rx="1.5"
+              fill="#0d0d0d" stroke="#2a2a2a" stroke-width="0.5"/>
+        <rect x="180" y="100" width="9" height="8" rx="1"
+              fill="#c8a951" opacity="0.45"/>
+
+        <!-- Knob row (top of mixer panel) -->
+        <circle cx="158" cy="62" r="3.5" fill="#1e1e1e" stroke="rgba(200,169,81,0.4)" stroke-width="1"/>
+        <line x1="158" y1="59.5" x2="158" y2="62" stroke="#c8a951" stroke-width="1" opacity="0.7"/>
+
+        <circle cx="171" cy="62" r="3.5" fill="#1e1e1e" stroke="rgba(200,169,81,0.4)" stroke-width="1"/>
+        <line x1="170" y1="59.8" x2="171" y2="62" stroke="#c8a951" stroke-width="1" opacity="0.7"/>
+
+        <circle cx="184" cy="62" r="3.5" fill="#1e1e1e" stroke="rgba(200,169,81,0.4)" stroke-width="1"/>
+        <line x1="183" y1="59.7" x2="184" y2="62" stroke="#c8a951" stroke-width="1" opacity="0.7"/>
+
+        <!-- Panel label bar -->
+        <rect x="148" y="120" width="44" height="14" rx="0"
+              fill="#111" stroke="#2a2a2a" stroke-width="0.5"/>
+        <rect x="152" y="123" width="4" height="2" rx="0.5" fill="rgba(200,169,81,0.3)"/>
+        <rect x="158" y="123" width="4" height="2" rx="0.5" fill="rgba(200,169,81,0.3)"/>
+        <rect x="164" y="123" width="12" height="2" rx="0.5" fill="rgba(200,169,81,0.15)"/>
+
+        <!-- EQ line (abstract waveform under mixer) -->
+        <polyline
+          points="148,140 152,136 156,142 160,133 164,138 168,130 172,137 176,134 180,139 184,132 188,137 192,135"
+          fill="none" stroke="rgba(200,169,81,0.3)" stroke-width="1.2"
+          stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </div>
   </header>
 
   <nav class="tabs">

js/calendar.js

@@ -62,9 +62,10 @@ export function renderCalendar() {
 
   // Legend
   const legend = document.createElement('div');
-  legend.className = 'row';
-  legend.style.cssText = 'font-size:12px;color:#6b7280';
-  legend.textContent = 'FT = Feiertag markieren  |  BU = Betriebsurlaub markieren';
+  legend.className = 'cal-legend';
+  legend.innerHTML =
+    '<span><span class="cal-legend-dot" style="background:#fde68a"></span>Feiertag</span>' +
+    '<span><span class="cal-legend-dot" style="background:#fecaca"></span>Betriebsurlaub</span>';
   container.appendChild(legend);
 
   // Calendar grid wrapper
@@ -128,7 +129,7 @@ function renderGrid(wrapper, exportBtn) {
   headerGrid.className = 'calendar-header-grid';
   WD_LABELS.forEach(lbl => {
     const cell = document.createElement('div');
-    cell.style.cssText = 'text-align:center;font-weight:600;font-size:12px;color:#6b7280;padding:4px';
+    cell.className = 'cal-header-cell';
     cell.textContent = lbl;
     headerGrid.appendChild(cell);
   });
@@ -176,12 +177,11 @@ function renderGrid(wrapper, exportBtn) {
       if (isHoliday || isClosure) {
         // Show label + remove button
         const tag = document.createElement('div');
-        tag.style.cssText = 'font-size:11px;margin-top:4px';
+        tag.className = 'cal-day-tag-label';
         tag.textContent = isHoliday ? 'Feiertag' : 'Betriebsurlaub';
         const removeBtn = document.createElement('button');
         removeBtn.type = 'button';
         removeBtn.textContent = '✕';
-        removeBtn.style.cssText = 'font-size:9px;padding:1px 4px;margin-left:4px';
         removeBtn.addEventListener('click', () => {
           if (isHoliday) toggleHoliday(state, iso);
           else toggleClosure(state, iso);
@@ -193,7 +193,6 @@ function renderGrid(wrapper, exportBtn) {
       } else {
         // Assignee dropdown
         const sel = document.createElement('select');
-        sel.style.cssText = 'width:100%;margin-top:4px;font-size:11px';
 
         const emptyOpt = document.createElement('option');
         emptyOpt.value = '';
@@ -227,18 +226,16 @@ function renderGrid(wrapper, exportBtn) {
 
         // FT / BU mark buttons
         const btnRow = document.createElement('div');
-        btnRow.style.cssText = 'margin-top:4px;display:flex;gap:2px';
+        btnRow.className = 'cal-btn-row';
 
         const ftBtn = document.createElement('button');
         ftBtn.type = 'button';
-        ftBtn.textContent = 'FT';
-        ftBtn.style.cssText = 'font-size:9px;padding:1px 4px';
+        ftBtn.textContent = 'Feiertag';
         ftBtn.addEventListener('click', () => { toggleHoliday(state, iso); saveState(); renderGrid(wrapper, exportBtn); });
 
         const buBtn = document.createElement('button');
         buBtn.type = 'button';
-        buBtn.textContent = 'BU';
-        buBtn.style.cssText = 'font-size:9px;padding:1px 4px';
+        buBtn.textContent = 'Betriebsurl.';
         buBtn.addEventListener('click', () => { toggleClosure(state, iso); saveState(); renderGrid(wrapper, exportBtn); });
 
         btnRow.append(ftBtn, buBtn);

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "start": "npx serve . -p 3000",
+    "start": "npx serve . -p 3001",
     "test": "node tests/algorithm.test.mjs"
   }
 }

style.css

@@ -1,58 +1,432 @@
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
+:root {
+  --bg:           #0d0d0d;
+  --surface:      #161616;
+  --surface-2:    #1e1e1e;
+  --border:       #2a2a2a;
+  --border-gold:  rgba(200,169,81,0.25);
+  --text:         #f0ede6;
+  --text-2:       #5a5550;
+  --accent:       #c8a951;
+  --accent-dim:   #8c7435;
+  --accent-fg:    #0d0d0d;
+  --red:          #c0392b;
+  --red-fg:       #f0ede6;
+  --holiday-bg:   #1a1600;
+  --holiday-bd:   #3d3000;
+  --closure-bg:   #1a0a0a;
+  --closure-bd:   #3d1010;
+  --r:            4px;
+  --r-sm:         3px;
+  --r-pill:       3px;
+  --shadow:       4px 4px 0 rgba(200,169,81,0.12);
+  --shadow-hover: 6px 6px 0 rgba(200,169,81,0.22);
+  --ease:         120ms ease;
+
+  /* Geometric stripe pattern */
+  --stripe: repeating-linear-gradient(
+    -45deg,
+    transparent,
+    transparent 6px,
+    rgba(200,169,81,0.025) 6px,
+    rgba(200,169,81,0.025) 7px
+  );
+}
+
 body {
-  font-family: system-ui, sans-serif;
+  font-family: 'Space Grotesk', system-ui, sans-serif;
   font-size: 14px;
-  color: #1a1a1a;
-  background: #f5f5f5;
+  color: var(--text);
+  background: var(--bg);
+  background-image: var(--stripe);
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
 }
 
-header { background: #2563eb; color: white; padding: 16px 24px; }
-header h1 { font-size: 18px; font-weight: 600; }
+/* ── Header ──────────────────────────────────────────── */
+header {
+  padding: 12px 32px 12px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  background: var(--bg);
+  overflow: hidden;
+}
 
-.tabs { display: flex; gap: 2px; background: #e5e7eb; padding: 8px 24px 0; }
+.header-graphic {
+  flex-shrink: 0;
+  width: 200px;
+  height: 160px;
+  opacity: 0.92;
+  margin-right: -8px;
+}
+
+header h1 {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 38px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  color: var(--accent);
+  line-height: 1;
+  position: relative;
+  z-index: 1;
+}
+
+/* Gold underline bar on header title */
+header h1::after {
+  content: '';
+  display: block;
+  width: 40%;
+  height: 2px;
+  background: var(--accent);
+  margin-top: 4px;
+  opacity: 0.5;
+}
+
+/* ── Tabs ────────────────────────────────────────────── */
+.tabs {
+  display: flex;
+  gap: 0;
+  padding: 0 32px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+}
 .tab-btn {
-  padding: 8px 20px; border: none; background: #d1d5db;
-  cursor: pointer; border-radius: 6px 6px 0 0; font-size: 14px; color: #374151;
+  padding: 13px 22px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 0;
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 15px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  color: var(--text-2);
+  transition: color var(--ease), border-color var(--ease);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+.tab-btn:hover:not(.active) { color: var(--text); }
+.tab-btn.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+  background: transparent;
+}
+
+/* ── Content ─────────────────────────────────────────── */
+.tab-content {
+  background: transparent;
+  min-height: calc(100vh - 100px);
+  padding: 32px;
 }
-.tab-btn.active { background: white; color: #2563eb; font-weight: 600; }
-.tab-content { background: white; min-height: calc(100vh - 100px); padding: 24px; }
 .hidden { display: none; }
 
+/* ── Buttons ─────────────────────────────────────────── */
 button {
-  cursor: pointer; padding: 6px 14px; border-radius: 4px;
-  border: 1px solid #d1d5db; background: white; font-size: 13px;
+  cursor: pointer;
+  padding: 7px 16px;
+  border-radius: var(--r);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text);
+  transition: background var(--ease), border-color var(--ease), box-shadow var(--ease);
+  white-space: nowrap;
 }
-button.primary { background: #2563eb; color: white; border-color: #2563eb; }
-button.danger { background: #ef4444; color: white; border-color: #ef4444; }
-input, select { padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }
+button:hover {
+  background: var(--surface-2);
+  border-color: var(--accent-dim);
+}
+button.primary {
+  background: var(--accent);
+  color: var(--accent-fg);
+  border-color: var(--accent);
+  font-weight: 700;
+}
+button.primary:hover {
+  background: #d4b55c;
+  border-color: #d4b55c;
+  box-shadow: var(--shadow-hover);
+}
+button.danger {
+  background: var(--red);
+  color: var(--red-fg);
+  border-color: var(--red);
+}
+button.danger:hover { opacity: 0.84; }
 
+/* ── Inputs & Selects ────────────────────────────────── */
+input, select {
+  padding: 7px 11px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 13px;
+  color: var(--text);
+  background: var(--surface);
+  outline: none;
+  transition: border-color var(--ease), box-shadow var(--ease);
+}
+input:focus, select:focus {
+  border-color: var(--accent-dim);
+  box-shadow: 0 0 0 2px rgba(200,169,81,0.15);
+}
+input::placeholder { color: var(--text-2); }
+select option { background: var(--surface-2); color: var(--text); }
+
+/* ── Table ───────────────────────────────────────────── */
 table { border-collapse: collapse; width: 100%; }
-th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #e5e7eb; }
-th { background: #f9fafb; font-weight: 600; }
+th {
+  text-align: left;
+  padding: 10px 14px;
+  background: var(--surface);
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--accent);
+  border-bottom: 1px solid var(--border-gold);
+}
+td {
+  text-align: left;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+  color: var(--text);
+}
+tr:last-child td { border-bottom: none; }
+tbody tr:hover td { background: var(--surface); }
 
-.section-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
-.row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
+/* ── Utilities ───────────────────────────────────────── */
+.section-title {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 22px;
+  font-weight: 400;
+  letter-spacing: 0.1em;
+  color: var(--accent);
+  margin-bottom: 22px;
+  text-transform: uppercase;
+  position: relative;
+  padding-left: 12px;
+}
+.section-title::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 10%;
+  height: 80%;
+  width: 3px;
+  background: var(--accent);
+}
+.row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
 
+/* ── Calendar ────────────────────────────────────────── */
 .calendar-outer { overflow-x: auto; }
-.calendar-header-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; margin-bottom: 6px; }
-.calendar-body-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
-.cal-day { border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px; background: white; min-height: 80px; }
-.cal-day.weekend { background: #f3f4f6; color: #9ca3af; }
-.cal-day.holiday { background: #fef3c7; }
-.cal-day.closure { background: #fee2e2; }
+.calendar-header-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 5px;
+  margin-bottom: 5px;
+}
+.calendar-body-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 5px;
+}
+
+.cal-header-cell {
+  text-align: center;
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--accent);
+  padding: 6px 4px;
+  border-bottom: 1px solid var(--border-gold);
+}
+
+.cal-day {
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 9px;
+  background: var(--surface);
+  min-height: 88px;
+  transition: box-shadow var(--ease), border-color var(--ease);
+  position: relative;
+  overflow: hidden;
+}
+/* Subtle corner accent on calendar cells */
+.cal-day:not(.empty-cell)::after {
+  content: '';
+  position: absolute;
+  top: 0; right: 0;
+  width: 0; height: 0;
+  border-style: solid;
+  border-width: 0 8px 8px 0;
+  border-color: transparent var(--border) transparent transparent;
+}
+.cal-day:not(.empty-cell):not(.weekend):hover {
+  box-shadow: var(--shadow-hover);
+  border-color: var(--border-gold);
+}
+.cal-day:not(.empty-cell):not(.weekend):hover::after {
+  border-color: transparent var(--accent-dim) transparent transparent;
+}
+.cal-day.weekend {
+  background: var(--bg);
+  color: var(--text-2);
+  border-color: var(--border);
+  opacity: 0.5;
+}
+.cal-day.holiday  { background: var(--holiday-bg); border-color: var(--holiday-bd); }
+.cal-day.closure  { background: var(--closure-bg); border-color: var(--closure-bd); }
 .cal-day.empty-cell { border: none; background: transparent; min-height: 0; }
-.day-num { font-weight: 600; font-size: 13px; }
-.day-tag { font-size: 10px; color: #6b7280; }
+
+.day-num {
+  font-family: 'Bebas Neue', sans-serif;
+  font-weight: 400;
+  font-size: 17px;
+  letter-spacing: 0.04em;
+  color: var(--text);
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+}
+.day-tag { font-size: 10px; color: var(--accent); font-weight: 600; font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
+
+.cal-day select {
+  width: 100%;
+  margin-top: 6px;
+  font-size: 11px;
+  padding: 4px 7px;
+  border-radius: var(--r-sm);
+  background: var(--surface-2);
+  border-color: var(--border);
+  color: var(--text);
+}
+.cal-btn-row {
+  margin-top: 5px;
+  display: flex;
+  gap: 4px;
+}
+.cal-day .cal-btn-row button {
+  font-size: 9px;
+  padding: 2px 7px;
+  border-radius: var(--r);
+  color: var(--text-2);
+  font-weight: 600;
+  background: var(--surface-2);
+  border-color: var(--border);
+  letter-spacing: 0.06em;
+}
+.cal-day .cal-btn-row button:hover { color: var(--accent); border-color: var(--accent-dim); background: var(--surface-2); }
+
+.cal-day-tag-label {
+  font-size: 10px;
+  margin-top: 5px;
+  color: var(--text-2);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.cal-day-tag-label button {
+  font-size: 9px;
+  padding: 1px 5px;
+  border-radius: var(--r);
+  color: var(--text-2);
+  background: var(--surface-2);
+  border-color: var(--border);
+}
+
+/* ── Employees ───────────────────────────────────────── */
+.employee-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 13px 0;
+  border-bottom: 1px solid var(--border);
+}
+.employee-name { font-weight: 600; flex: 1; font-size: 14px; color: var(--text); }
+
+.constraint-form {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  padding: 18px 20px;
+  border-radius: var(--r);
+  margin: 4px 0 14px;
+  border-left: 3px solid var(--accent-dim);
+}
+.constraint-form label {
+  display: block;
+  margin-bottom: 7px;
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--accent);
+}
+.constraint-row { margin-bottom: 18px; }
 
-.employee-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
-.employee-name { font-weight: 500; flex: 1; }
-.constraint-form { background: #f9fafb; padding: 16px; border-radius: 8px; margin-top: 4px; margin-bottom: 8px; }
-.constraint-form label { display: block; margin-bottom: 4px; font-size: 12px; color: #6b7280; }
-.constraint-row { margin-bottom: 12px; }
 .day-toggle-group { display: flex; gap: 4px; }
 .day-toggle {
-  width: 32px; height: 32px; border-radius: 50%; border: 1px solid #d1d5db;
-  background: white; font-size: 11px; cursor: pointer;
+  width: 34px;
+  height: 34px;
+  border-radius: var(--r);
+  border: 1px solid var(--border);
+  background: var(--surface-2);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  transition: background var(--ease), border-color var(--ease), color var(--ease);
+  color: var(--text-2);
+  text-transform: uppercase;
 }
-.day-toggle.active { background: #2563eb; color: white; border-color: #2563eb; }
+.day-toggle:hover:not(.active) { background: var(--surface); border-color: var(--border-gold); color: var(--text); }
+.day-toggle.active {
+  background: var(--accent);
+  color: var(--accent-fg);
+  border-color: var(--accent);
+  font-weight: 800;
+}
+
+/* ── Calendar legend ─────────────────────────────────── */
+.cal-legend {
+  font-size: 11px;
+  color: var(--text-2);
+  margin-bottom: 16px;
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+}
+.cal-legend span { display: flex; align-items: center; gap: 6px; }
+.cal-legend-dot {
+  width: 8px; height: 8px; border-radius: 1px;
+  display: inline-block;
+}
+
+/* ── Scrollbar ───────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }