Redesign full UI with system theming

static/admin-v020.js

@@ -1,4 +1,4 @@
-(function () {
+(function () {
   const bootstrap = window.__ADMIN_BOOTSTRAP__ || {};
   const state = {
     adminPage: bootstrap.adminPage || "schedule",
@@ -55,10 +55,6 @@
     return payload;
   }
 
-  function clamp(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-  }
-
   function toMinutes(value) {
     const [hour, minute] = String(value).split(":").map(Number);
     return (hour * 60) + minute;
@@ -88,30 +84,34 @@
     return ["一", "二", "三", "四", "五", "六", "日"][Number(value) - 1] || "";
   }
 
+  function buildSlotLabel(index) {
+    return `第${String(index + 1).padStart(2, "0")}节课`;
+  }
+
   function getConfiguredTimeSlots() {
     const slots = Array.isArray(state.scheduleSettings.time_slots) && state.scheduleSettings.time_slots.length
       ? state.scheduleSettings.time_slots
       : state.defaultTimeSlots;
     return slots.map((slot, index) => ({
-      label: slot.label || `第${String(index + 1).padStart(2, "0")}节课`,
+      label: buildSlotLabel(index),
       start: slot.start,
       end: slot.end,
     }));
   }
 
   function buildScheduleSegmentsFromSlots(timeSlots) {
-    const slots = (timeSlots || [])
-      .map((slot, index) => ({
-        kind: "class",
-        label: `第${String(index + 1).padStart(2, "0")}节课`,
-        durationMinutes: Math.max(25, toMinutes(slot.end) - toMinutes(slot.start)),
-      }));
+    const slots = (timeSlots || []).map((slot, index) => ({
+      kind: "class",
+      label: buildSlotLabel(index),
+      durationMinutes: Math.max(25, toMinutes(slot.end) - toMinutes(slot.start)),
+    }));
 
     const segments = [];
     slots.forEach((slot, index) => {
       if (index > 0) {
         const previous = timeSlots[index - 1];
-        const gap = Math.max(5, toMinutes(timeSlots[index].start) - toMinutes(previous.end));
+        const current = timeSlots[index];
+        const gap = Math.max(5, toMinutes(current.start) - toMinutes(previous.end));
         segments.push({
           id: `break-${index}`,
           kind: "break",
@@ -134,7 +134,7 @@
     let breakIndex = 1;
     segments.forEach((segment) => {
       if (segment.kind === "class") {
-        segment.label = `第${String(classIndex).padStart(2, "0")}节课`;
+        segment.label = buildSlotLabel(classIndex - 1);
         classIndex += 1;
       } else {
         segment.label = `课间 ${breakIndex}`;
@@ -144,7 +144,11 @@
   }
 
   function reflowSegments() {
-    const baseStart = toMinutes(document.getElementById("dayStartInput").value);
+    const dayStartInput = document.getElementById("dayStartInput");
+    if (!dayStartInput) {
+      return;
+    }
+    const baseStart = toMinutes(dayStartInput.value);
     let cursor = baseStart;
     renumberSegments(state.scheduleEditor.segments);
     state.scheduleEditor.segments.forEach((segment) => {
@@ -232,7 +236,8 @@
 
     const marks = buildScheduleAxisMarks();
     const visibleMarks = [];
-    marks.forEach((minute, index) => {
+
+    marks.forEach((minute) => {
       const top = Math.round((minute - startMinutes) * getEditorPixelsPerMinute());
       const line = document.createElement("div");
       line.className = "schedule-editor-line";
@@ -268,13 +273,13 @@
     });
 
     segments.forEach((segment, index) => {
+      const segmentHeight = Math.max(Math.round(segment.durationMinutes * getEditorPixelsPerMinute()), 36);
       const block = document.createElement("article");
-      const height = Math.max(Math.round(segment.durationMinutes * getEditorPixelsPerMinute()), 36);
       block.className = `schedule-editor-segment ${segment.kind}`;
       block.style.top = `${Math.round((segment.startMinutes - startMinutes) * getEditorPixelsPerMinute())}px`;
-      block.style.height = `${height}px`;
-      block.classList.toggle("is-compact", height < 88);
-      block.classList.toggle("is-tight", height < 56);
+      block.style.height = `${segmentHeight}px`;
+      block.classList.toggle("is-compact", segmentHeight < 88);
+      block.classList.toggle("is-tight", segmentHeight < 56);
       block.innerHTML = `
         <div class="schedule-editor-segment-copy">
           <strong>${segment.label}</strong>
@@ -290,6 +295,7 @@
     scheduleEditorDropzone.style.top = `${dropzoneTop}px`;
     scheduleEditorDropzone.style.bottom = "auto";
     scheduleEditorTrack.appendChild(scheduleEditorDropzone);
+
     if (scheduleSegmentCount) {
       scheduleSegmentCount.textContent = `${segments.length} 段`;
     }
@@ -387,7 +393,7 @@
       day_end: dayEnd,
       default_task_duration_minutes: Number(document.getElementById("defaultDurationInput").value),
       time_slots: classSegments.map((segment, index) => ({
-        label: `第${String(index + 1).padStart(2, "0")}节课`,
+        label: buildSlotLabel(index),
         start: minutesToTime(segment.startMinutes),
         end: minutesToTime(segment.endMinutes),
       })),
@@ -401,8 +407,7 @@
   }
 
   function buildPeriodOptions() {
-    const slots = getConfiguredTimeSlots();
-    return slots.map((slot, index) => ({
+    return getConfiguredTimeSlots().map((slot, index) => ({
       value: String(index + 1),
       label: `第${String(index + 1).padStart(2, "0")}节 · ${slot.start}-${slot.end}`,
     }));
@@ -578,15 +583,10 @@
 
     scheduleEditorTrack.addEventListener("click", (event) => {
       const deleteButton = event.target.closest("[data-delete-segment]");
-      if (deleteButton) {
-        deleteClassSegment(Number(deleteButton.dataset.deleteSegment));
-        return;
-      }
-
-      const resizeHandle = event.target.closest("[data-resize-segment]");
-      if (resizeHandle) {
+      if (!deleteButton) {
         return;
       }
+      deleteClassSegment(Number(deleteButton.dataset.deleteSegment));
     });
 
     scheduleEditorTrack.addEventListener("pointerdown", (event) => {
@@ -691,11 +691,11 @@
     }
 
     populateCoursePeriodOptions();
-    resetCourseForm(null);
+    resetCourseForm();
     renderCourses();
 
     if (resetCourseEditorButton) {
-      resetCourseEditorButton.addEventListener("click", () => resetCourseForm(null));
+      resetCourseEditorButton.addEventListener("click", () => resetCourseForm());
     }
 
     courseForm.addEventListener("submit", async (event) => {
@@ -715,7 +715,7 @@
           showToast("课程已创建");
         }
         renderCourses();
-        resetCourseForm(null);
+        resetCourseForm();
       } catch (error) {
         showToast(error.message, "error");
       }
@@ -743,7 +743,7 @@
         });
         state.courses = state.courses.filter((course) => course.id !== deleteButton.dataset.deleteCourse);
         renderCourses();
-        resetCourseForm(null);
+        resetCourseForm();
         showToast("课程已删除");
       } catch (error) {
         showToast(error.message, "error");

static/styles.css

@@ -1,36 +1,77 @@
 :root {
-  --bg: #081524;
-  --bg-soft: rgba(10, 23, 37, 0.75);
-  --surface: rgba(9, 22, 35, 0.76);
-  --surface-border: rgba(255, 255, 255, 0.08);
-  --surface-strong: rgba(255, 255, 255, 0.08);
-  --text: #eef4fb;
-  --muted: rgba(238, 244, 251, 0.68);
-  --muted-strong: rgba(238, 244, 251, 0.84);
-  --accent: #5ce1e6;
-  --accent-2: #73d883;
-  --warning: #ffc857;
-  --danger: #ff6b5c;
-  --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
-  --radius-xl: 30px;
-  --radius-lg: 24px;
-  --radius-md: 18px;
-  --radius-sm: 14px;
+  color-scheme: light dark;
+  --font-sans: "Manrope", "Noto Sans SC", sans-serif;
+  --font-mono: "IBM Plex Mono", monospace;
+
+  --bg: #f4f0e8;
+  --bg-2: #efe8df;
+  --surface: rgba(255, 252, 247, 0.74);
+  --surface-strong: rgba(255, 255, 255, 0.88);
+  --surface-soft: rgba(255, 255, 255, 0.52);
+  --line: rgba(27, 31, 35, 0.08);
+  --line-strong: rgba(27, 31, 35, 0.14);
+  --text: #15191d;
+  --muted: rgba(21, 25, 29, 0.62);
+  --muted-strong: rgba(21, 25, 29, 0.78);
+  --accent: #0e6b67;
+  --accent-soft: rgba(14, 107, 103, 0.12);
+  --accent-strong: #0b5a57;
+  --accent-2: #ae6f48;
+  --warning: #c99743;
+  --danger: #c45b57;
+  --success: #2f7d58;
+  --shadow-xl: 0 26px 80px rgba(25, 32, 37, 0.14);
+  --shadow-lg: 0 16px 44px rgba(25, 32, 37, 0.1);
+  --shadow-sm: 0 8px 22px rgba(25, 32, 37, 0.06);
+  --radius-shell: 34px;
+  --radius-card: 26px;
+  --radius-panel: 22px;
+  --radius-button: 16px;
+  --radius-pill: 999px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0c1015;
+    --bg-2: #131821;
+    --surface: rgba(18, 25, 33, 0.74);
+    --surface-strong: rgba(19, 27, 36, 0.92);
+    --surface-soft: rgba(255, 255, 255, 0.05);
+    --line: rgba(255, 255, 255, 0.07);
+    --line-strong: rgba(255, 255, 255, 0.12);
+    --text: #eef2f6;
+    --muted: rgba(238, 242, 246, 0.62);
+    --muted-strong: rgba(238, 242, 246, 0.8);
+    --accent: #7cd7d1;
+    --accent-soft: rgba(124, 215, 209, 0.12);
+    --accent-strong: #8de6db;
+    --accent-2: #d39b70;
+    --warning: #d2ab5e;
+    --danger: #f08e86;
+    --success: #77d49d;
+    --shadow-xl: 0 26px 80px rgba(0, 0, 0, 0.42);
+    --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.34);
+    --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.22);
+  }
 }
 
 * {
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   margin: 0;
   min-height: 100%;
   background:
-    radial-gradient(circle at top left, rgba(92, 225, 230, 0.18), transparent 28%),
-    radial-gradient(circle at 85% 15%, rgba(255, 200, 87, 0.16), transparent 24%),
-    linear-gradient(180deg, #0b1625 0%, #07111d 100%);
+    radial-gradient(circle at 14% 12%, rgba(124, 215, 209, 0.22), transparent 24%),
+    radial-gradient(circle at 88% 18%, rgba(211, 155, 112, 0.14), transparent 26%),
+    radial-gradient(circle at 50% 86%, rgba(124, 215, 209, 0.08), transparent 30%),
+    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
   color: var(--text);
-  font-family: "Noto Sans SC", "PingFang SC", sans-serif;
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
 }
 
 body {
@@ -40,7 +81,8 @@ body {
 
 button,
 input,
-textarea {
+textarea,
+select {
   font: inherit;
 }
 
@@ -62,102 +104,92 @@ a {
 .ambient {
   position: fixed;
   inset: auto;
-  width: 42vw;
-  height: 42vw;
-  border-radius: 999px;
-  filter: blur(46px);
-  opacity: 0.34;
+  width: 46vw;
+  height: 46vw;
+  border-radius: 50%;
+  filter: blur(70px);
+  opacity: 0.48;
   z-index: -1;
-  animation: floatGlow 18s ease-in-out infinite;
+  animation: floatGlow 22s ease-in-out infinite;
+  pointer-events: none;
 }
 
 .ambient-one {
-  top: -10vw;
-  left: -12vw;
-  background: rgba(92, 225, 230, 0.3);
+  top: -16vw;
+  left: -10vw;
+  background: rgba(124, 215, 209, 0.2);
 }
 
 .ambient-two {
   right: -8vw;
-  bottom: -10vw;
-  background: rgba(255, 200, 87, 0.22);
-  animation-delay: -6s;
+  top: 28vh;
+  background: rgba(211, 155, 112, 0.12);
+  animation-delay: -8s;
+}
+
+.ambient-three {
+  right: 18vw;
+  bottom: -20vw;
+  background: rgba(124, 215, 209, 0.1);
+  animation-delay: -14s;
 }
 
 .layout,
 .admin-layout {
-  width: min(1340px, calc(100% - 32px));
+  width: min(1520px, calc(100% - 32px));
   margin: 0 auto;
-  padding: 28px 0 56px;
+  padding: 24px 0 40px;
 }
 
-.hero-card,
 .card-surface,
+.hero-card,
 .admin-card,
 .modal-card {
-  border: 1px solid var(--surface-border);
-  background: linear-gradient(180deg, rgba(13, 28, 44, 0.9) 0%, rgba(8, 20, 32, 0.86) 100%);
-  box-shadow: var(--shadow);
-  backdrop-filter: blur(18px);
-}
-
-.hero-card {
-  min-height: 31vh;
-  padding: 28px;
-  border-radius: var(--radius-xl);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  overflow: hidden;
   position: relative;
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, var(--surface-strong) 0%, var(--surface) 100%);
+  box-shadow: var(--shadow-xl);
+  backdrop-filter: blur(18px) saturate(135%);
 }
 
-.hero-card::after {
+.card-surface::before,
+.hero-card::before,
+.admin-card::before,
+.modal-card::before {
   content: "";
   position: absolute;
-  inset: auto -12% -28% auto;
-  width: 300px;
-  height: 300px;
-  border-radius: 999px;
-  background: radial-gradient(circle, rgba(92, 225, 230, 0.18), transparent 72%);
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 24%, transparent 76%, rgba(255, 255, 255, 0.04));
   pointer-events: none;
 }
 
-.hero-topbar,
-.column-header,
-.section-header,
-.admin-card-head,
-.action-group,
-.column-actions,
-.task-main,
-.form-actions {
-  display: flex;
-  align-items: center;
-}
-
-.hero-topbar,
-.section-header,
-.admin-card-head {
-  justify-content: space-between;
-  gap: 16px;
+.hero-card,
+.card-surface,
+.admin-card,
+.modal-card {
+  border-radius: var(--radius-card);
 }
 
 .brand-mark {
   display: inline-flex;
   align-items: center;
   gap: 10px;
-  padding: 8px 12px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.06);
+  min-height: 42px;
+  padding: 0 14px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-soft);
+  border: 1px solid var(--line);
   color: var(--muted-strong);
+  font-weight: 700;
 }
 
 .brand-dot {
   width: 10px;
   height: 10px;
-  border-radius: 999px;
-  background: linear-gradient(180deg, var(--accent) 0%, #7effa7 100%);
-  box-shadow: 0 0 18px rgba(92, 225, 230, 0.72);
+  border-radius: 50%;
+  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
+  box-shadow: 0 0 0 6px rgba(124, 215, 209, 0.08);
 }
 
 .ghost-link,
@@ -167,7 +199,13 @@ a {
 .danger-button,
 .icon-button,
 .task-delete {
-  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
+  transition:
+    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
+    background 180ms ease,
+    border-color 180ms ease,
+    color 180ms ease,
+    box-shadow 180ms ease,
+    opacity 180ms ease;
 }
 
 .ghost-link,
@@ -179,53 +217,63 @@ a {
   align-items: center;
   justify-content: center;
   gap: 8px;
-  min-height: 44px;
-  border-radius: 999px;
-  padding: 0 18px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  min-height: 42px;
+  padding: 0 16px;
+  border-radius: var(--radius-button);
+  border: 1px solid var(--line);
+  background: var(--surface-soft);
+  color: var(--text);
+  box-shadow: var(--shadow-sm);
 }
 
-.ghost-link,
-.pill-button {
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--text);
+.ghost-link:hover,
+.pill-button:hover,
+.primary-button:hover,
+.secondary-button:hover,
+.danger-button:hover,
+.icon-button:hover,
+.task-delete:hover {
+  transform: translateY(-1px) scale(1.01);
 }
 
 .pill-button.accent,
 .primary-button {
-  background: linear-gradient(135deg, #7be7ea 0%, #61d29f 100%);
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
   border-color: transparent;
-  color: #082030;
-  font-weight: 700;
+  color: #f8fbfb;
 }
 
-.secondary-button {
-  background: rgba(255, 255, 255, 0.06);
+.pill-button.accent-soft {
+  background: linear-gradient(135deg, rgba(124, 215, 209, 0.18) 0%, rgba(124, 215, 209, 0.08) 100%);
   color: var(--text);
 }
 
+.secondary-button {
+  background: rgba(255, 255, 255, 0.05);
+}
+
 .danger-button {
-  background: rgba(255, 107, 92, 0.12);
-  border-color: rgba(255, 107, 92, 0.25);
-  color: #ff9388;
+  background: rgba(196, 91, 87, 0.12);
+  border-color: rgba(196, 91, 87, 0.24);
+  color: var(--danger);
 }
 
-.ghost-link:hover,
-.pill-button:hover,
-.primary-button:hover,
-.secondary-button:hover,
-.danger-button:hover,
-.icon-button:hover,
-.task-delete:hover {
-  transform: translateY(-2px);
+.icon-button {
+  width: 42px;
+  height: 42px;
+  border-radius: 15px;
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
+  color: var(--text);
+  box-shadow: var(--shadow-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.28rem;
 }
 
-.clock-wrap {
-  display: grid;
-  place-items: center;
-  gap: 8px;
-  text-align: center;
-  padding: 10px 0 8px;
+.icon-button.muted {
+  font-size: 1.44rem;
 }
 
 .eyebrow,
@@ -233,80 +281,107 @@ a {
 .column-label,
 .modal-kicker {
   margin: 0;
-  letter-spacing: 0.12em;
+  font-size: 0.76rem;
+  letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--muted);
-  font-size: 0.82rem;
-}
-
-.clock-display {
-  margin: 0;
-  font-family: "Sora", "Noto Sans SC", sans-serif;
-  font-weight: 800;
-  font-size: clamp(2.8rem, 8vw, 5.2rem);
-  letter-spacing: 0.08em;
-  line-height: 1;
+  font-weight: 700;
 }
 
-.clock-meta {
+.section-header,
+.hero-topbar,
+.column-header,
+.admin-card-head,
+.action-group,
+.column-actions,
+.task-main,
+.form-actions {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  justify-content: center;
-  gap: 10px 18px;
-  color: var(--muted-strong);
-  font-size: 1rem;
-}
-
-.clock-meta span {
-  padding: 8px 14px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.06);
 }
 
-.board-section {
-  padding-top: 24px;
-}
-
-.section-header {
-  margin-bottom: 18px;
+.section-header,
+.hero-topbar,
+.admin-card-head {
+  justify-content: space-between;
+  gap: 18px;
 }
 
 .section-header h2,
 .admin-hero h1,
 .admin-card h2,
 .modal-head h3 {
-  margin: 6px 0 0;
-  font-family: "Sora", "Noto Sans SC", sans-serif;
+  margin: 4px 0 0;
+  font-family: var(--font-sans);
+  font-weight: 800;
+  letter-spacing: -0.04em;
 }
 
 .section-note,
 .admin-copy,
 .admin-card-copy {
+  margin: 0;
   color: var(--muted);
+  line-height: 1.62;
 }
 
-.board-grid {
+.hero-card {
+  overflow: hidden;
+}
+
+.hero-card::after {
+  content: "";
+  position: absolute;
+  inset: auto -12% -18% auto;
+  width: 280px;
+  height: 280px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(124, 215, 209, 0.18), transparent 72%);
+  pointer-events: none;
+}
+
+.clock-wrap {
   display: grid;
-  gap: 18px;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  align-items: start;
+  place-items: center;
+  gap: 10px;
+  text-align: center;
 }
 
-.todo-column {
-  padding: 20px;
-  border-radius: var(--radius-lg);
-  min-height: 460px;
-  animation: riseIn 360ms ease both;
+.clock-caption {
+  display: inline-flex;
+  align-items: center;
+  min-height: 34px;
+  padding: 0 14px;
+  border-radius: var(--radius-pill);
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--muted-strong);
+  font-size: 0.74rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
 }
 
-.column-title {
-  margin: 6px 0 0;
-  font-size: 1.45rem;
+.clock-display {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-weight: 800;
+  letter-spacing: -0.06em;
+  line-height: 0.92;
 }
 
-.column-actions {
-  gap: 8px;
+.clock-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  color: var(--muted-strong);
+}
+
+.clock-meta span {
+  padding: 8px 14px;
+  border-radius: var(--radius-pill);
+  background: rgba(255, 255, 255, 0.06);
+  font-size: 0.9rem;
 }
 
 .menu-wrap {
@@ -317,16 +392,16 @@ a {
   position: absolute;
   top: calc(100% + 8px);
   right: 0;
-  min-width: 140px;
+  min-width: 148px;
   padding: 8px;
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(8, 20, 32, 0.98);
-  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.3);
+  border-radius: 18px;
+  border: 1px solid var(--line-strong);
+  background: var(--surface-strong);
+  box-shadow: var(--shadow-lg);
   opacity: 0;
   pointer-events: none;
-  transform: translateY(-6px);
-  transition: opacity 160ms ease, transform 160ms ease;
+  transform: translateY(-4px);
+  transition: opacity 180ms ease, transform 180ms ease;
 }
 
 .menu-panel.is-open {
@@ -341,60 +416,43 @@ a {
   background: transparent;
   color: var(--text);
   padding: 12px 14px;
-  border-radius: 12px;
+  border-radius: 14px;
   text-align: left;
 }
 
 .menu-panel button:hover {
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.icon-button {
-  width: 42px;
-  height: 42px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.09);
-  background: linear-gradient(180deg, rgba(123, 231, 234, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%);
-  color: var(--text);
-  font-size: 1.4rem;
-}
-
-.icon-button.muted {
-  font-size: 1.55rem;
-}
-
-.task-list {
-  display: grid;
-  gap: 14px;
-  margin-top: 18px;
+  background: rgba(255, 255, 255, 0.08);
 }
 
 .task-card {
-  padding: 16px;
-  border-radius: 20px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  display: grid;
-  gap: 14px;
   position: relative;
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border-radius: var(--radius-panel);
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
   overflow: hidden;
 }
 
 .task-card::before {
   content: "";
   position: absolute;
-  inset: 0 0 auto;
-  height: 1px;
-  background: linear-gradient(90deg, rgba(123, 231, 234, 0.6), transparent);
+  inset: 0 auto 0 0;
+  width: 3px;
+  background: linear-gradient(180deg, var(--accent) 0%, transparent 100%);
+  opacity: 0.78;
 }
 
 .task-copy {
   flex: 1;
+  min-width: 0;
 }
 
 .task-copy h4 {
   margin: 0 0 10px;
-  font-size: 1.08rem;
+  font-size: 1rem;
+  line-height: 1.32;
 }
 
 .meta-line {
@@ -404,20 +462,21 @@ a {
   gap: 8px;
 }
 
-.meta-badge {
+.meta-badge,
+.task-count {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 7px 10px;
-  border-radius: 999px;
+  min-height: 32px;
+  padding: 0 12px;
+  border-radius: var(--radius-pill);
   background: rgba(255, 255, 255, 0.06);
   color: var(--muted-strong);
-  font-size: 0.88rem;
+  font-size: 0.82rem;
 }
 
 .progress-shell {
-  height: 10px;
-  border-radius: 999px;
+  height: 8px;
+  border-radius: var(--radius-pill);
   background: rgba(255, 255, 255, 0.08);
   overflow: hidden;
 }
@@ -427,20 +486,21 @@ a {
   height: 100%;
   border-radius: inherit;
   background: linear-gradient(90deg, #73d883 0%, #ffd166 55%, #ff6b5c 100%);
-  transition: width 360ms ease, filter 360ms ease;
+  transition: width 360ms ease;
 }
 
 .task-card.task-complete .progress-bar {
-  background: linear-gradient(90deg, #66d0ff 0%, #7be7ea 100%);
+  background: linear-gradient(90deg, rgba(124, 215, 209, 0.72) 0%, rgba(124, 215, 209, 1) 100%);
 }
 
 .task-card.task-complete h4 {
-  color: rgba(238, 244, 251, 0.66);
+  color: var(--muted);
   text-decoration: line-through;
 }
 
 .check-wrap {
   position: relative;
+  display: inline-flex;
 }
 
 .task-check {
@@ -450,18 +510,17 @@ a {
 }
 
 .custom-check {
-  display: inline-flex;
   width: 24px;
   height: 24px;
-  border-radius: 8px;
-  border: 1.5px solid rgba(255, 255, 255, 0.36);
-  background: rgba(255, 255, 255, 0.02);
+  border-radius: 9px;
+  border: 1.5px solid rgba(255, 255, 255, 0.32);
+  background: rgba(255, 255, 255, 0.03);
   position: relative;
   flex-shrink: 0;
 }
 
 .task-check:checked + .custom-check {
-  background: linear-gradient(135deg, #7be7ea 0%, #61d29f 100%);
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
   border-color: transparent;
 }
 
@@ -472,26 +531,16 @@ a {
   top: 3px;
   width: 6px;
   height: 12px;
-  border-right: 2px solid #082030;
-  border-bottom: 2px solid #082030;
+  border-right: 2px solid white;
+  border-bottom: 2px solid white;
   transform: rotate(45deg);
 }
 
-body[data-authenticated="false"] .task-check,
-body[data-authenticated="false"] .icon-button,
-body[data-authenticated="false"] [data-rename-category] {
-  cursor: pointer;
-}
-
-body[data-authenticated="false"] .task-delete {
-  display: none;
-}
-
 .task-delete {
   justify-self: flex-end;
   border: 0;
   background: transparent;
-  color: rgba(255, 255, 255, 0.42);
+  color: var(--muted);
   padding: 0;
 }
 
@@ -499,26 +548,26 @@ body[data-authenticated="false"] .task-delete {
   min-height: 180px;
   display: grid;
   place-items: center;
-  text-align: center;
   gap: 8px;
-  padding: 22px;
-  border-radius: 20px;
-  background: rgba(255, 255, 255, 0.03);
+  padding: 24px;
+  border-radius: var(--radius-panel);
+  background: rgba(255, 255, 255, 0.04);
   color: var(--muted);
+  text-align: center;
 }
 
 .modal-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(3, 10, 18, 0.64);
-  backdrop-filter: blur(10px);
+  background: rgba(9, 11, 15, 0.34);
+  backdrop-filter: blur(12px);
   display: grid;
   place-items: center;
   padding: 24px;
   opacity: 0;
   pointer-events: none;
   transition: opacity 180ms ease;
-  z-index: 30;
+  z-index: 80;
 }
 
 .modal-backdrop.is-open {
@@ -527,9 +576,9 @@ body[data-authenticated="false"] .task-delete {
 }
 
 .modal-card {
-  width: min(500px, 100%);
+  width: min(520px, 100%);
   padding: 28px;
-  border-radius: 28px;
+  box-shadow: var(--shadow-xl);
 }
 
 .modal-form {
@@ -551,80 +600,78 @@ body[data-authenticated="false"] .task-delete {
   color: var(--muted-strong);
 }
 
-.modal-form input {
+.modal-form input,
+.modal-form select,
+.modal-form textarea {
   width: 100%;
-  min-height: 50px;
+  min-height: 48px;
   padding: 0 16px;
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.04);
+  border-radius: var(--radius-button);
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.06);
   color: var(--text);
   outline: none;
 }
 
-.modal-form input:focus {
-  border-color: rgba(123, 231, 234, 0.7);
-  box-shadow: 0 0 0 3px rgba(123, 231, 234, 0.14);
+.modal-form input:focus,
+.modal-form select:focus,
+.modal-form textarea:focus {
+  border-color: rgba(124, 215, 209, 0.7);
+  box-shadow: 0 0 0 3px rgba(124, 215, 209, 0.14);
 }
 
 .form-actions {
   justify-content: flex-end;
   gap: 10px;
-  padding-top: 6px;
+  padding-top: 4px;
 }
 
 .toast-stack {
   position: fixed;
-  top: 20px;
-  right: 20px;
+  top: 18px;
+  right: 18px;
   display: grid;
   gap: 10px;
-  z-index: 40;
+  z-index: 90;
 }
 
 .toast {
   min-width: 220px;
-  max-width: 320px;
+  max-width: 340px;
   padding: 14px 16px;
   border-radius: 18px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(7, 18, 30, 0.96);
-  box-shadow: var(--shadow);
-  color: var(--text);
+  border: 1px solid var(--line-strong);
+  background: var(--surface-strong);
+  box-shadow: var(--shadow-lg);
   animation: riseIn 220ms ease both;
 }
 
-.toast.error {
-  border-color: rgba(255, 107, 92, 0.26);
+.toast.success {
+  border-color: rgba(47, 125, 88, 0.22);
 }
 
-.toast.success {
-  border-color: rgba(115, 216, 131, 0.24);
+.toast.error {
+  border-color: rgba(196, 91, 87, 0.26);
 }
 
 .admin-hero {
-  border-radius: var(--radius-xl);
-  padding: 28px;
+  border-radius: var(--radius-shell);
+  padding: 30px;
   margin-bottom: 22px;
-  display: flex;
-  justify-content: space-between;
-  gap: 18px;
-  align-items: center;
 }
 
 .admin-grid {
   display: grid;
-  gap: 18px;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 20px;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 }
 
 .admin-card {
-  border-radius: 26px;
-  padding: 22px;
-  min-height: 240px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  padding: 24px;
+  min-height: 240px;
 }
 
 .create-card {
@@ -635,26 +682,20 @@ body[data-authenticated="false"] .task-delete {
 .create-icon {
   width: 56px;
   height: 56px;
-  border-radius: 18px;
+  border-radius: 20px;
   display: grid;
   place-items: center;
-  font-size: 2rem;
-  background: linear-gradient(135deg, rgba(123, 231, 234, 0.18) 0%, rgba(97, 210, 159, 0.12) 100%);
-}
-
-.task-count {
-  padding: 8px 12px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--muted-strong);
+  font-size: 1.8rem;
+  background: linear-gradient(135deg, rgba(124, 215, 209, 0.18) 0%, rgba(174, 111, 72, 0.12) 100%);
 }
 
 @keyframes floatGlow {
-  0%, 100% {
+  0%,
+  100% {
     transform: translate3d(0, 0, 0) scale(1);
   }
   50% {
-    transform: translate3d(3vw, 2vw, 0) scale(1.05);
+    transform: translate3d(2vw, 1.5vw, 0) scale(1.05);
   }
 }
 
@@ -669,49 +710,36 @@ body[data-authenticated="false"] .task-delete {
   }
 }
 
-@media (max-width: 840px) {
-  .hero-topbar,
+@media (max-width: 1180px) {
+  .layout,
+  .admin-layout {
+    width: min(100% - 22px, 1520px);
+  }
+
+  .admin-hero,
   .section-header,
-  .admin-hero {
+  .hero-topbar {
     flex-direction: column;
     align-items: flex-start;
   }
-
-  .action-group {
-    width: 100%;
-    flex-wrap: wrap;
-  }
-
-  .clock-display {
-    letter-spacing: 0.03em;
-  }
-
-  .clock-meta {
-    gap: 10px;
-  }
 }
 
-@media (max-width: 560px) {
+@media (max-width: 760px) {
   .layout,
   .admin-layout {
-    width: min(100% - 18px, 1340px);
+    width: min(100% - 18px, 1520px);
     padding-top: 18px;
-    padding-bottom: 32px;
+    padding-bottom: 28px;
   }
 
   .hero-card,
-  .todo-column,
-  .modal-card,
+  .card-surface,
   .admin-card,
+  .modal-card,
   .admin-hero {
-    padding: 18px;
     border-radius: 24px;
   }
 
-  .clock-display {
-    font-size: clamp(2.4rem, 16vw, 4.2rem);
-  }
-
   .form-actions {
     flex-direction: column-reverse;
     align-items: stretch;

static/v020.css

@@ -1,68 +1,74 @@
-.layout.story-layout {
-  width: min(1560px, calc(100% - 18px));
-  height: calc(100vh - 28px);
-  max-height: calc(100vh - 28px);
-  min-height: calc(100vh - 28px);
-  padding: 14px 0;
-}
-
-.story-layout {
+.story-layout {
   padding-top: 0;
   overflow: hidden;
 }
 
+.layout.story-layout {
+  width: min(1560px, calc(100% - 22px));
+  height: calc(100vh - 24px);
+  min-height: calc(100vh - 24px);
+  max-height: calc(100vh - 24px);
+  padding: 12px 0;
+}
+
 .story-shell {
   display: grid;
-  gap: 12px;
-  min-width: 0;
+  gap: 14px;
   height: 100%;
   min-height: 0;
   grid-template-rows: auto minmax(0, 1fr);
 }
 
 .story-toolbar {
-  border-radius: 24px;
-  padding: 12px 16px;
   display: grid;
   grid-template-columns: auto 1fr auto;
-  gap: 14px;
   align-items: center;
+  gap: 20px;
+  padding: 14px 18px;
+  border-radius: 28px;
 }
 
 .story-nav {
-  display: inline-flex;
   justify-self: center;
+  display: inline-grid;
+  grid-auto-flow: column;
+  gap: 6px;
   padding: 6px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.05);
-  gap: 6px;
 }
 
 .story-tab {
-  min-height: 42px;
-  padding: 0 18px;
+  min-height: 40px;
+  padding: 0 16px;
   border: 0;
-  border-radius: 999px;
+  border-radius: 14px;
   background: transparent;
   color: var(--muted-strong);
+  font-weight: 700;
+  letter-spacing: -0.02em;
 }
 
 .story-tab.is-active {
-  background: linear-gradient(135deg, rgba(123, 231, 234, 0.2) 0%, rgba(97, 210, 159, 0.18) 100%);
+  background: linear-gradient(135deg, rgba(124, 215, 209, 0.18) 0%, rgba(124, 215, 209, 0.08) 100%);
   color: var(--text);
+  box-shadow: inset 0 0 0 1px rgba(124, 215, 209, 0.18);
+}
+
+.story-actions {
+  justify-self: end;
 }
 
 .page-viewport {
   position: relative;
   width: 100%;
-  overflow: hidden;
-  min-height: 0;
   height: 100%;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .page-track {
   display: flex;
-  width: 100%;
   height: 100%;
   align-items: stretch;
   transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
@@ -72,12 +78,12 @@
 .page-slide {
   flex: 0 0 100%;
   width: 100%;
-  max-width: 100%;
   min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 0;
   overflow: hidden;
   pointer-events: none;
-  min-height: 0;
-  height: 100%;
 }
 
 .page-slide.is-active {
@@ -90,247 +96,193 @@ body.planner-interacting * {
   -webkit-user-select: none !important;
 }
 
-body.planner-interacting .page-home {
-  pointer-events: none;
-}
-
-body.planner-interacting .page-planner {
-  pointer-events: auto;
-}
-
 .page-home {
   display: grid;
-  gap: 12px;
-  grid-template-rows: minmax(216px, 27vh) minmax(0, 1fr);
-  padding-right: 10px;
+  gap: 14px;
+  grid-template-rows: minmax(244px, 31vh) minmax(0, 1fr);
   min-height: 0;
   height: 100%;
-  overflow: hidden;
 }
 
-.page-planner {
-  padding-left: 10px;
-  min-height: 0;
-  height: 100%;
+.hero-clock-card {
+  position: relative;
+  display: grid;
+  place-items: center;
+  padding: 26px 28px;
   overflow: hidden;
 }
 
-.inline-link {
-  border: 0;
+.hero-orbit {
+  position: absolute;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  pointer-events: none;
 }
 
-.page-home .hero-card {
-  min-height: 0;
-  padding: 22px 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.hero-orbit-a {
+  width: 46vw;
+  height: 46vw;
+  max-width: 540px;
+  max-height: 540px;
+  top: -58%;
+  left: -8%;
+  opacity: 0.26;
 }
 
-.clock-wrap {
-  width: 100%;
-  gap: 6px;
-  padding: 6px 0 4px;
-  display: grid;
-  justify-items: center;
-  align-content: center;
-  text-align: center;
-  margin: 0 auto;
+.hero-orbit-b {
+  width: 34vw;
+  height: 34vw;
+  max-width: 420px;
+  max-height: 420px;
+  right: -8%;
+  bottom: -62%;
+  opacity: 0.22;
 }
 
-.clock-display {
-  font-size: clamp(2.7rem, 7vw, 4.9rem);
+.hero-clock-card .clock-wrap {
+  position: relative;
+  z-index: 1;
 }
 
-.clock-meta {
-  gap: 8px 14px;
-  font-size: 0.94rem;
+.hero-clock-card .clock-display {
+  font-size: clamp(3.8rem, 8vw, 6.8rem);
 }
 
-.hero-copy {
-  margin: 6px 0 0;
-  color: var(--muted);
+.hero-clock-card .clock-meta {
+  gap: 12px;
 }
 
 .board-section {
-  display: grid;
-  gap: 12px;
-  grid-template-rows: auto minmax(0, 1fr);
   min-height: 0;
-  height: 100%;
-  overflow: hidden;
-}
-
-.page-home .board-section {
+  display: grid;
   grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
 }
 
-.page-home .board-section > .section-header {
+.board-section > .section-header {
   display: none;
 }
 
-.board-section .section-header {
-  margin-bottom: 0;
-}
-
-.board-section .section-header h2 {
-  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
-}
-
 .board-grid {
   display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  grid-auto-rows: minmax(0, 1fr);
-  align-items: stretch;
-  align-content: start;
-  min-height: 0;
+  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.96fr) minmax(0, 1fr);
+  gap: 14px;
   height: 100%;
-  overflow: hidden;
+  min-height: 0;
+  align-items: stretch;
 }
 
 .todo-column {
-  padding: 16px;
-  min-height: 0;
-  height: 100%;
-  max-height: 100%;
   position: relative;
-  overflow: visible;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
+  min-height: 0;
+  padding: 18px;
+  overflow: visible;
+  border-radius: 28px;
 }
 
-.page-home .column-header {
-  position: relative;
-  display: block;
-  min-height: 58px;
-  padding-right: 112px;
-  z-index: 12;
+.todo-column:nth-child(2) {
+  transform: translateY(10px);
 }
 
-.column-title {
-  font-size: 1.2rem;
+.todo-column:nth-child(3) {
+  transform: translateY(24px);
 }
 
-.page-home .column-actions {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 24;
+.column-header {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 12px;
+  min-height: 60px;
+  z-index: 10;
 }
 
-.page-home .menu-wrap {
-  position: relative;
-  z-index: 28;
+.column-header-copy {
+  min-width: 0;
+}
+
+.column-title {
+  margin: 8px 0 0;
+  font-size: 1.6rem;
+  letter-spacing: -0.05em;
+  line-height: 1.02;
 }
 
-.page-home .menu-panel {
-  z-index: 60;
+.column-actions {
+  gap: 8px;
+  justify-self: end;
+  z-index: 30;
 }
 
 .task-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  margin-top: 0;
+  gap: 12px;
   min-height: 0;
-  height: 100%;
   max-height: 100%;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding-right: 4px;
+  padding-right: 2px;
 }
 
-.task-card {
-  padding: 14px;
-  border-radius: 18px;
-  flex: none;
-}
-
-.task-copy h4 {
-  margin: 0 0 8px;
-  font-size: 0.98rem;
-}
-
-.meta-line {
-  gap: 6px;
-}
-
-.meta-badge {
-  padding: 6px 9px;
-  font-size: 0.76rem;
-}
-
-.progress-shell {
-  height: 8px;
+.page-planner {
+  min-height: 0;
+  height: 100%;
 }
 
 .planner-shell {
-  border-radius: 26px;
-  padding: 16px;
-  min-height: 0;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 10px;
   height: 100%;
+  min-height: 0;
+  padding: 18px;
+  border-radius: 30px;
   overflow: hidden;
+}
+
+.planner-head {
   display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr);
-  gap: 8px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 16px;
+  align-items: end;
 }
 
-.planner-head h2 {
+.planner-head-copy h2 {
   margin: 4px 0 0;
-  font-size: clamp(1.34rem, 1.85vw, 1.72rem);
+  font-size: clamp(1.65rem, 2vw, 2.2rem);
+  letter-spacing: -0.05em;
 }
 
-.planner-head .section-note {
-  margin: 6px 0 0;
-  font-size: 0.92rem;
+.planner-head-copy .section-note {
+  margin-top: 6px;
+  max-width: 720px;
 }
 
-.planner-head,
-.planner-controls,
-.planner-meta,
-.planner-sidebar-head,
-.planner-task-top,
-.planner-task-tags,
-.admin-card-actions,
-.split-fields {
+.planner-controls {
   display: flex;
   align-items: center;
-}
-
-.planner-head,
-.planner-sidebar-head {
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.planner-controls {
   gap: 8px;
 }
 
 .planner-date-picker {
   display: grid;
   gap: 6px;
-  min-width: 172px;
+  min-width: 188px;
 }
 
 .planner-date-picker span {
   color: var(--muted);
-  font-size: 0.85rem;
-}
-
-.planner-date-picker input,
-.modal-form select {
-  min-height: 42px;
-  padding: 0 12px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--text);
-  outline: none;
+  font-size: 0.76rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 .planner-meta {
+  display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }
@@ -340,56 +292,41 @@ body.planner-interacting .page-planner {
 .planner-task-category {
   display: inline-flex;
   align-items: center;
-  padding: 6px 10px;
+  min-height: 32px;
+  padding: 0 12px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.06);
   color: var(--muted-strong);
-  font-size: 0.76rem;
+  font-size: 0.8rem;
 }
 
 .planner-layout {
   display: grid;
-  grid-template-columns: minmax(0, 8.2fr) minmax(220px, 1.8fr);
-  gap: 12px;
+  grid-template-columns: minmax(0, 8.7fr) minmax(260px, 1.75fr);
+  gap: 14px;
   min-height: 0;
-  overflow: hidden;
-}
-
-.page-planner .planner-head h2,
-.page-planner #plannerHeadlineNote,
-.page-planner .planner-sidebar-note,
-.page-planner .planner-sidebar-head .column-label {
-  display: none;
-}
-
-.page-planner .planner-head {
-  align-items: center;
-}
-
-.page-planner .planner-head .section-kicker {
-  margin: 0;
 }
 
 .timeline-surface,
-.planner-sidebar {
-  border-radius: 26px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
+.planner-sidebar,
+.card-surface-soft {
+  border-radius: 28px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
+  backdrop-filter: blur(18px) saturate(125%);
 }
 
 .timeline-surface {
-  padding: 10px;
+  padding: 12px;
   min-height: 0;
-  height: 100%;
 }
 
 .timeline-scroll {
-  overflow: hidden;
   height: 100%;
-  max-height: none;
   min-height: 0;
-  border-radius: 18px;
-  background: rgba(3, 11, 20, 0.46);
+  overflow: hidden;
+  border-radius: 22px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.08) 100%);
 }
 
 .timeline-grid {
@@ -405,14 +342,6 @@ body.planner-interacting .page-planner {
 .timeline-now-line {
   position: absolute;
   top: 0;
-  bottom: 0;
-}
-
-.timeline-axis-layer,
-.timeline-slot-layer,
-.timeline-canvas-layer,
-.timeline-drop-preview,
-.timeline-now-line {
   bottom: auto;
 }
 
@@ -438,42 +367,39 @@ body.planner-interacting .page-planner {
   top: 0;
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
-  gap: 6px;
-  z-index: 7;
+  gap: 8px;
+  z-index: 8;
 }
 
 .timeline-day-head {
-  min-height: 46px;
+  min-height: 54px;
+  border-radius: 18px;
   border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 16px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
   color: var(--muted-strong);
   display: grid;
   place-items: center;
   gap: 2px;
-  padding: 5px 4px;
+  padding: 6px 4px;
   text-align: center;
-  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
 }
 
 .timeline-day-head strong {
-  font-size: 0.82rem;
-  line-height: 1;
+  font-size: 0.84rem;
 }
 
 .timeline-day-head span {
-  font-size: 0.68rem;
+  font-size: 0.7rem;
   color: var(--muted);
-  font-variant-numeric: tabular-nums;
 }
 
 .timeline-day-head.is-selected {
-  border-color: rgba(123, 231, 234, 0.44);
-  background: linear-gradient(180deg, rgba(123, 231, 234, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%);
+  border-color: rgba(124, 215, 209, 0.4);
+  background: linear-gradient(180deg, rgba(124, 215, 209, 0.18) 0%, rgba(124, 215, 209, 0.06) 100%);
 }
 
 .timeline-day-head.is-today {
-  box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.22);
+  box-shadow: inset 0 0 0 1px rgba(174, 111, 72, 0.18);
 }
 
 .timeline-day-column,
@@ -485,29 +411,25 @@ body.planner-interacting .page-planner {
 }
 
 .timeline-day-column {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.008) 100%);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.016) 0%, rgba(255, 255, 255, 0.004) 100%);
 }
 
 .timeline-day-column.is-selected {
-  background: linear-gradient(180deg, rgba(92, 225, 230, 0.06) 0%, rgba(92, 225, 230, 0.015) 100%);
-}
-
-.timeline-day-column.is-today {
-  box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.12);
+  background: linear-gradient(180deg, rgba(124, 215, 209, 0.06) 0%, rgba(124, 215, 209, 0.01) 100%);
 }
 
 .timeline-day-divider {
   width: 1px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
 }
 
 .timeline-axis-rail {
   position: absolute;
   top: 0;
   bottom: 0;
-  right: 14px;
+  right: 12px;
   width: 1px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(123, 231, 234, 0.18), rgba(255, 255, 255, 0.06));
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(124, 215, 209, 0.18), rgba(255, 255, 255, 0.05));
 }
 
 .timeline-axis-tick {
@@ -515,27 +437,23 @@ body.planner-interacting .page-planner {
   left: 0;
   right: 0;
   display: flex;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
   gap: 10px;
   transform: translateY(-50%);
-  padding-right: 20px;
-  color: rgba(238, 244, 251, 0.76);
-  font-size: 0.75rem;
+  padding-right: 18px;
+  color: var(--muted);
+  font-size: 0.74rem;
   font-variant-numeric: tabular-nums;
-  letter-spacing: 0.02em;
-  line-height: 1;
-  white-space: nowrap;
 }
 
 .timeline-axis-tick::after {
   content: "";
   width: 7px;
   height: 7px;
-  border-radius: 999px;
-  background: rgba(123, 231, 234, 0.78);
-  box-shadow: 0 0 0 4px rgba(123, 231, 234, 0.12);
-  flex: none;
+  border-radius: 50%;
+  background: rgba(124, 215, 209, 0.78);
+  box-shadow: 0 0 0 5px rgba(124, 215, 209, 0.08);
 }
 
 .timeline-axis-tick.is-leading {
@@ -550,29 +468,21 @@ body.planner-interacting .page-planner {
   position: absolute;
   left: 6px;
   right: 8px;
-  box-sizing: border-box;
-  overflow: hidden;
-  padding: 5px 8px;
-  border-radius: 14px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+  padding: 6px 9px;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(255, 255, 255, 0.04);
+  display: grid;
   gap: 3px;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
 .timeline-slot-band strong {
   font-size: 0.74rem;
-  line-height: 1.1;
 }
 
 .timeline-slot-band span {
   color: var(--muted);
-  font-size: 0.64rem;
-  line-height: 1.1;
-  font-variant-numeric: tabular-nums;
+  font-size: 0.66rem;
 }
 
 .timeline-line {
@@ -583,43 +493,41 @@ body.planner-interacting .page-planner {
 }
 
 .timeline-line.is-slot {
-  background: rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.06);
 }
 
 .timeline-major-block {
   position: absolute;
   left: 0;
   right: 0;
-  box-sizing: border-box;
-  border-radius: 16px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%);
+  border-radius: 18px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.026) 0%, rgba(255, 255, 255, 0.008) 100%);
   pointer-events: none;
 }
 
 .timeline-major-block span {
   position: absolute;
   top: 10px;
-  right: 12px;
-  font-family: "Sora", "Noto Sans SC", sans-serif;
-  font-size: clamp(1rem, 1.35vw, 1.45rem);
-  color: rgba(238, 244, 251, 0.16);
+  right: 14px;
+  font-size: clamp(0.96rem, 1.2vw, 1.34rem);
+  color: rgba(255, 255, 255, 0.14);
+  font-weight: 800;
+  letter-spacing: -0.05em;
 }
 
 .planner-event,
 .timeline-drop-preview {
   position: absolute;
-  box-sizing: border-box;
-  overflow: hidden;
-  border-radius: 16px;
+  border-radius: 18px;
   padding: 10px 12px 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: linear-gradient(180deg, rgba(13, 28, 44, 0.96) 0%, rgba(8, 20, 32, 0.92) 100%);
-  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  background: linear-gradient(180deg, rgba(15, 25, 34, 0.96) 0%, rgba(11, 19, 27, 0.92) 100%);
+  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
+  overflow: hidden;
 }
 
 .planner-event {
   touch-action: none;
-  z-index: 5;
 }
 
 .planner-event::before,
@@ -628,8 +536,8 @@ body.planner-interacting .page-planner {
   position: absolute;
   inset: 0 auto 0 0;
   width: 4px;
-  border-radius: 20px 0 0 20px;
-  background: var(--event-accent, #7be7ea);
+  border-radius: 18px 0 0 18px;
+  background: var(--event-accent, var(--accent));
 }
 
 .planner-event-top,
@@ -653,60 +561,41 @@ body.planner-interacting .page-planner {
 
 .planner-course-stack {
   display: grid;
-  gap: 2px;
+  gap: 3px;
   min-height: 100%;
 }
 
 .planner-course-title {
-  display: block;
   margin: 0;
-  font-size: 0.74rem;
+  font-size: 0.76rem;
   line-height: 1.12;
-  letter-spacing: 0.01em;
-  word-break: break-word;
-  overflow: hidden;
+  letter-spacing: -0.02em;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
+  overflow: hidden;
 }
 
 .planner-course-details {
   display: grid;
   gap: 1px;
-  color: rgba(238, 244, 251, 0.82);
   font-size: 0.58rem;
-  line-height: 1.12;
+  line-height: 1.14;
+  color: var(--muted-strong);
 }
 
 .planner-course-line {
-  display: block;
-  white-space: normal;
   overflow-wrap: anywhere;
-  font-variant-numeric: tabular-nums;
 }
 
-.planner-lock-badge,
 .planner-event-clear,
 .planner-task-clear {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 30px;
+  min-height: 28px;
   padding: 0 10px;
   border-radius: 999px;
   border: 0;
-}
-
-.planner-lock-badge {
-  background: rgba(255, 255, 255, 0.08);
-  color: var(--muted-strong);
-}
-
-.planner-event-clear,
-.planner-task-clear {
-  background: rgba(255, 107, 92, 0.14);
-  color: #ff9388;
-  margin-top: 8px;
+  background: rgba(196, 91, 87, 0.16);
+  color: var(--danger);
 }
 
 .planner-event-resize {
@@ -715,9 +604,7 @@ body.planner-interacting .page-planner {
   right: 8px;
   height: 8px;
   border-radius: 999px;
-  background: linear-gradient(90deg, rgba(123, 231, 234, 0.9), rgba(97, 210, 159, 0.72));
-  cursor: ns-resize;
-  z-index: 2;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.88), rgba(124, 215, 209, 0.92));
 }
 
 .planner-event-resize-top {
@@ -730,7 +617,7 @@ body.planner-interacting .page-planner {
 
 .planner-event.is-dragging,
 .planner-task-card.is-dragging {
-  opacity: 0.8;
+  opacity: 0.86;
 }
 
 .planner-event.is-dragging {
@@ -739,31 +626,20 @@ body.planner-interacting .page-planner {
 
 .planner-event.is-conflict,
 .timeline-drop-preview.is-conflict {
-  border-color: rgba(255, 107, 92, 0.72);
-  box-shadow: 0 0 0 1px rgba(255, 107, 92, 0.22), 0 16px 28px rgba(0, 0, 0, 0.24);
+  border-color: rgba(196, 91, 87, 0.72);
 }
 
 .planner-event.is-conflict::before,
 .timeline-drop-preview.is-conflict::before {
-  background: #ff6b5c;
+  background: var(--danger);
 }
 
 .course-event {
-  padding: 7px 8px 7px 10px;
+  padding: 8px 9px 9px 11px;
 }
 
 .planner-event.is-compact {
-  border-radius: 16px;
-  padding: 7px 10px 8px;
-}
-
-.planner-event.is-compact::before {
-  border-radius: 16px 0 0 16px;
-}
-
-.task-event.is-compact .planner-event-top {
-  display: grid;
-  gap: 4px;
+  padding: 7px 9px 8px;
 }
 
 .task-event.is-compact .planner-event-meta,
@@ -771,20 +647,7 @@ body.planner-interacting .page-planner {
   display: none;
 }
 
-.course-event.is-compact .planner-lock-badge {
-  display: none;
-}
-
-.course-event.is-compact .planner-course-stack {
-  gap: 2px;
-}
-
-.course-event.is-compact .planner-course-title {
-  font-size: 0.68rem;
-}
-
 .course-event.is-compact .planner-course-details {
-  gap: 1px;
   font-size: 0.54rem;
 }
 
@@ -794,7 +657,6 @@ body.planner-interacting .page-planner {
 
 .planner-event.is-tight .planner-event-meta,
 .planner-event.is-tight .planner-event-clear,
-.planner-event.is-tight .planner-lock-badge,
 .planner-event.is-tight .planner-event-time {
   display: none;
 }
@@ -804,40 +666,36 @@ body.planner-interacting .page-planner {
 }
 
 .course-event.is-tight .planner-course-title {
-  font-size: 0.62rem;
-  line-height: 1.06;
-}
-
-.planner-event.is-tight .planner-event-top {
-  display: block;
+  font-size: 0.64rem;
 }
 
-.planner-event.is-tight .planner-event-top strong {
-  max-width: 100%;
-  font-size: 0.74rem;
+.planner-sidebar {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 12px;
+  min-height: 0;
+  padding: 16px;
 }
 
-.planner-event.is-tight .planner-event-resize {
-  left: 8px;
-  right: 8px;
-  height: 5px;
+.planner-sidebar-head {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 12px;
 }
 
-.planner-sidebar {
-  padding: 14px;
-  display: grid;
-  gap: 10px;
-  align-content: start;
-  min-height: 0;
-  grid-template-rows: auto minmax(0, 1fr);
-  overflow: hidden;
+.planner-sidebar-head h3 {
+  margin: 6px 0 0;
+  font-size: 1.4rem;
+  line-height: 1.02;
+  letter-spacing: -0.05em;
 }
 
 .planner-sidebar-note {
   display: grid;
   gap: 6px;
+  font-size: 0.82rem;
   color: var(--muted);
-  font-size: 0.84rem;
 }
 
 .planner-task-pool {
@@ -845,20 +703,17 @@ body.planner-interacting .page-planner {
   flex-direction: column;
   gap: 12px;
   min-height: 0;
-  height: 100%;
-  max-height: 100%;
   overflow-y: auto;
-  overscroll-behavior: contain;
-  padding-right: 4px;
+  padding-right: 2px;
 }
 
 .planner-task-card {
-  padding: 14px;
-  border-radius: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
   display: grid;
   gap: 12px;
+  padding: 14px;
+  border-radius: 22px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
 }
 
 .planner-task-card h4 {
@@ -885,8 +740,11 @@ body.planner-interacting .page-planner {
 }
 
 .planner-task-tags span {
-  padding: 6px 9px;
+  min-height: 32px;
+  padding: 0 10px;
   border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
   background: rgba(255, 255, 255, 0.05);
   color: var(--muted-strong);
   font-size: 0.76rem;
@@ -899,18 +757,8 @@ body.planner-interacting .page-planner {
   grid-column: 1 / -1;
 }
 
-.planner-task-category {
-  white-space: nowrap;
-  align-self: start;
-}
-
-.planner-empty,
-.empty-admin-card {
-  min-height: 180px;
-  display: grid;
-  place-items: center;
-  text-align: center;
-  gap: 10px;
+.card-surface-soft {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
 }
 
 .timeline-drop-preview {
@@ -919,25 +767,13 @@ body.planner-interacting .page-planner {
   align-content: center;
   color: var(--muted-strong);
   border-style: dashed;
-  background: rgba(123, 231, 234, 0.1);
-  z-index: 4;
-}
-
-.timeline-drop-preview strong {
-  font-size: 0.78rem;
-  line-height: 1.1;
-}
-
-.timeline-drop-preview span {
-  color: var(--muted);
-  font-size: 0.72rem;
+  background: rgba(124, 215, 209, 0.08);
 }
 
 .timeline-now-line {
   position: absolute;
   height: 2px;
-  background: linear-gradient(90deg, rgba(255, 107, 92, 0.95), rgba(255, 200, 87, 0.72));
-  box-shadow: 0 0 18px rgba(255, 107, 92, 0.38);
+  background: linear-gradient(90deg, rgba(196, 91, 87, 0.95), rgba(211, 155, 112, 0.72));
   z-index: 6;
   pointer-events: none;
 }
@@ -949,40 +785,19 @@ body.planner-interacting .page-planner {
   top: -5px;
   width: 12px;
   height: 12px;
-  border-radius: 999px;
-  background: #ff6b5c;
-}
-
-.admin-section {
-  margin-top: 24px;
-}
-
-.admin-grid-tight {
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-}
-
-.admin-card-actions {
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.split-fields {
-  gap: 12px;
-}
-
-.split-fields label {
-  flex: 1;
+  border-radius: 50%;
+  background: var(--danger);
 }
 
 .admin-layout-v2 {
-  width: min(1480px, calc(100% - 28px));
+  width: min(1540px, calc(100% - 28px));
 }
 
 .admin-layout-v2 .admin-hero {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: start;
-  gap: 18px 24px;
+  gap: 20px 26px;
 }
 
 .admin-layout-v2 .admin-hero > div:first-child {
@@ -991,7 +806,6 @@ body.planner-interacting .page-planner {
 
 .admin-layout-v2 .action-group {
   justify-self: end;
-  align-self: start;
 }
 
 .admin-page-nav {
@@ -1004,20 +818,29 @@ body.planner-interacting .page-planner {
 }
 
 .admin-page-tab {
-  min-height: 42px;
+  min-height: 40px;
   padding: 0 16px;
-  border-radius: 999px;
+  border-radius: 14px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--muted-strong);
+  font-weight: 700;
 }
 
 .admin-page-tab.is-active {
-  background: linear-gradient(135deg, rgba(123, 231, 234, 0.2) 0%, rgba(97, 210, 159, 0.18) 100%);
+  background: linear-gradient(135deg, rgba(124, 215, 209, 0.18) 0%, rgba(124, 215, 209, 0.08) 100%);
   color: var(--text);
 }
 
+.admin-section {
+  margin-top: 24px;
+}
+
+.admin-grid-tight {
+  gap: 18px;
+}
+
 .admin-stack {
   display: grid;
   gap: 16px;
@@ -1027,26 +850,20 @@ body.planner-interacting .page-planner {
   padding: 20px 22px;
 }
 
-.course-list .course-card {
-  border-radius: 22px;
-}
-
 .admin-lists-grid {
-  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
+  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
   align-items: start;
 }
 
-.list-create-card {
+.list-create-card,
+.course-editor-card,
+.schedule-form-card {
   position: sticky;
-  top: 28px;
-}
-
-.list-management-stack {
-  gap: 14px;
+  top: 24px;
 }
 
 .list-row-card {
-  border-radius: 24px;
+  border-radius: 28px;
 }
 
 .admin-row-main {
@@ -1063,15 +880,10 @@ body.planner-interacting .page-planner {
 }
 
 .course-management-grid {
-  grid-template-columns: minmax(330px, 380px) minmax(0, 1fr);
+  grid-template-columns: minmax(340px, 390px) minmax(0, 1fr);
   align-items: start;
 }
 
-.course-editor-card {
-  position: sticky;
-  top: 28px;
-}
-
 .course-row-head {
   align-items: start;
   margin-bottom: 2px;
@@ -1095,13 +907,13 @@ body.planner-interacting .page-planner {
 }
 
 .course-card h2 {
-  font-size: 1.12rem;
+  font-size: 1.1rem;
 }
 
 .course-card .admin-card-copy {
   margin: 1px 0 0;
   font-size: 0.78rem;
-  line-height: 1.18;
+  line-height: 1.22;
 }
 
 .course-row-actions .secondary-button,
@@ -1109,19 +921,14 @@ body.planner-interacting .page-planner {
 .course-row-actions .task-count {
   min-height: 34px;
   padding: 0 10px;
-  font-size: 0.82rem;
+  font-size: 0.8rem;
 }
 
 .admin-schedule-grid {
-  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
+  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
   align-items: start;
 }
 
-.schedule-form-card {
-  position: sticky;
-  top: 28px;
-}
-
 .schedule-editor-card {
   padding: 22px;
 }
@@ -1129,40 +936,39 @@ body.planner-interacting .page-planner {
 .schedule-palette {
   display: flex;
   gap: 12px;
-  margin-top: 18px;
   flex-wrap: wrap;
+  margin-top: 16px;
 }
 
 .schedule-palette-card {
-  min-width: 200px;
+  min-width: 220px;
   padding: 16px 18px;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.08);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
   display: grid;
   gap: 6px;
   cursor: grab;
 }
 
 .schedule-palette-card.class {
-  box-shadow: inset 4px 0 0 rgba(123, 231, 234, 0.78);
+  box-shadow: inset 4px 0 0 rgba(124, 215, 209, 0.78);
 }
 
 .schedule-palette-card.break {
-  box-shadow: inset 4px 0 0 rgba(255, 200, 87, 0.72);
+  box-shadow: inset 4px 0 0 rgba(211, 155, 112, 0.72);
 }
 
 .schedule-editor-shell {
   display: grid;
-  grid-template-columns: 92px minmax(0, 1fr);
-  gap: 14px;
+  grid-template-columns: 96px minmax(0, 1fr);
+  gap: 16px;
   margin-top: 18px;
 }
 
 .schedule-editor-axis,
 .schedule-editor-track {
   position: relative;
-  min-height: 760px;
 }
 
 .schedule-editor-axis {
@@ -1170,13 +976,10 @@ body.planner-interacting .page-planner {
 }
 
 .schedule-editor-track {
-  border-radius: 24px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%),
-    rgba(3, 11, 20, 0.42);
+  border-radius: 26px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
   border: 1px solid rgba(255, 255, 255, 0.06);
   overflow: hidden;
-  min-height: 980px;
 }
 
 .schedule-editor-tick,
@@ -1190,8 +993,8 @@ body.planner-interacting .page-planner {
   transform: translateY(-50%);
   padding-right: 12px;
   text-align: right;
-  color: rgba(238, 244, 251, 0.78);
-  font-size: 0.8rem;
+  color: var(--muted-strong);
+  font-size: 0.86rem;
   font-variant-numeric: tabular-nums;
 }
 
@@ -1214,18 +1017,18 @@ body.planner-interacting .page-planner {
   position: absolute;
   left: 14px;
   right: 14px;
-  border-radius: 18px;
+  border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-sm);
   overflow: hidden;
 }
 
 .schedule-editor-segment.class {
-  background: linear-gradient(180deg, rgba(123, 231, 234, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
+  background: linear-gradient(180deg, rgba(124, 215, 209, 0.16) 0%, rgba(124, 215, 209, 0.06) 100%);
 }
 
 .schedule-editor-segment.break {
-  background: linear-gradient(180deg, rgba(255, 200, 87, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
+  background: linear-gradient(180deg, rgba(211, 155, 112, 0.14) 0%, rgba(211, 155, 112, 0.06) 100%);
 }
 
 .schedule-editor-segment-copy {
@@ -1236,7 +1039,7 @@ body.planner-interacting .page-planner {
 
 .schedule-editor-segment-copy strong {
   font-size: 0.94rem;
-  line-height: 1.15;
+  line-height: 1.12;
 }
 
 .schedule-editor-segment-copy span,
@@ -1287,10 +1090,7 @@ body.planner-interacting .page-planner {
   display: none;
 }
 
-.schedule-editor-segment.break.is-tight .schedule-editor-segment-copy span {
-  display: none;
-}
-
+.schedule-editor-segment.break.is-tight .schedule-editor-segment-copy span,
 .schedule-editor-segment.break.is-tight .schedule-editor-segment-copy strong {
   display: none;
 }
@@ -1303,8 +1103,8 @@ body.planner-interacting .page-planner {
   padding: 0 10px;
   border: 0;
   border-radius: 999px;
-  background: rgba(255, 107, 92, 0.16);
-  color: #ff9388;
+  background: rgba(196, 91, 87, 0.16);
+  color: var(--danger);
 }
 
 .schedule-editor-resize {
@@ -1315,79 +1115,46 @@ body.planner-interacting .page-planner {
   height: 8px;
   border: 0;
   border-radius: 999px;
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(123, 231, 234, 0.9));
-  cursor: ns-resize;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(124, 215, 209, 0.92));
 }
 
 .schedule-editor-dropzone {
   position: absolute;
   left: 14px;
   right: 14px;
-  bottom: 14px;
-  min-height: 64px;
-  border-radius: 18px;
-  border: 1px dashed rgba(123, 231, 234, 0.35);
+  min-height: 72px;
+  border-radius: 20px;
+  border: 1px dashed rgba(124, 215, 209, 0.36);
   display: grid;
   place-items: center;
-  color: var(--muted);
-  background: rgba(123, 231, 234, 0.05);
+  padding: 14px;
   text-align: center;
-  padding: 12px;
+  color: var(--muted);
+  background: rgba(124, 215, 209, 0.05);
   pointer-events: none;
 }
 
 .schedule-editor-dropzone.is-active {
-  border-color: rgba(123, 231, 234, 0.75);
-  background: rgba(123, 231, 234, 0.12);
+  border-color: rgba(124, 215, 209, 0.72);
   color: var(--muted-strong);
 }
 
-@media (max-width: 1180px) {
-  body {
-    overflow: auto;
-  }
-
+@media (max-width: 1280px) {
   .layout.story-layout {
-    min-height: auto;
-  }
-
-  .story-shell {
-    min-height: auto;
-  }
-
-  .story-toolbar,
-  .planner-head,
-  .planner-layout {
-    grid-template-columns: 1fr;
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .story-nav {
-    justify-self: stretch;
-    justify-content: center;
-  }
-
-  .admin-schedule-grid {
-    grid-template-columns: 1fr;
+    width: min(100% - 20px, 1560px);
   }
 
+  .board-grid,
+  .planner-layout,
+  .admin-schedule-grid,
   .admin-lists-grid,
   .course-management-grid {
     grid-template-columns: 1fr;
   }
 
-  .schedule-form-card {
-    position: static;
-  }
-
-  .list-create-card,
-  .course-editor-card {
-    position: static;
-  }
-
-  .admin-page-nav {
-    flex-wrap: wrap;
+  .todo-column:nth-child(2),
+  .todo-column:nth-child(3) {
+    transform: none;
   }
 
   .admin-layout-v2 .admin-hero {
@@ -1398,28 +1165,37 @@ body.planner-interacting .page-planner {
   .admin-page-nav {
     justify-self: stretch;
   }
+}
 
-  .page-viewport,
+@media (max-width: 840px) {
+  .layout.story-layout {
+    height: auto;
+    min-height: auto;
+    max-height: none;
+  }
+
+  .story-shell,
   .page-track,
   .page-slide,
+  .page-home,
+  .page-planner,
   .planner-shell {
     height: auto;
+    min-height: auto;
   }
-}
 
-@media (max-width: 840px) {
-  .page-home,
-  .page-planner {
-    padding: 0;
+  .story-toolbar,
+  .planner-head {
+    grid-template-columns: 1fr;
   }
 
-  .planner-shell {
-    min-height: auto;
-    padding: 18px;
+  .story-nav {
+    justify-self: stretch;
+    grid-auto-flow: row;
   }
 
-  .timeline-scroll {
-    height: auto;
+  .planner-head {
+    align-items: start;
   }
 
   .schedule-editor-shell {
@@ -1435,33 +1211,12 @@ body.planner-interacting .page-planner {
     justify-items: start;
     justify-content: flex-start;
   }
-}
 
-@media (max-width: 560px) {
-  .story-toolbar {
-    padding: 14px;
-    border-radius: 22px;
-  }
-
-  .story-nav {
-    flex-wrap: wrap;
-  }
-
-  .story-tab {
-    width: 100%;
-  }
-
-  .planner-shell,
-  .planner-sidebar,
-  .timeline-surface {
-    border-radius: 22px;
-  }
-
-  .planner-controls {
-    flex-wrap: wrap;
+  .planner-task-tags {
+    grid-template-columns: 1fr;
   }
 
-  .planner-date-picker {
-    min-width: 100%;
+  .planner-task-tags span:last-child {
+    grid-column: auto;
   }
 }

templates/admin.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "base.html" %}
 {% block title %}DRM | 后台管理{% endblock %}
 {% block head %}
   <link rel="stylesheet" href="{{ url_for('static', filename='v020.css') }}">
@@ -13,7 +13,7 @@
           <p class="admin-copy">通过拖拽上课块和课间块，重新安排整套节次时间。保存后首页与周课表会自动同步。</p>
         {% elif admin_page == "lists" %}
           <h1>清单管理</h1>
-          <p class="admin-copy">统一维护首页的 todolist 分类，删除或新建都会即时反映到主页。</p>
+          <p class="admin-copy">统一维护首页的 todolist 分类，删除或新建会即时反映到主页与拖拽池。</p>
         {% else %}
           <h1>课程管理</h1>
           <p class="admin-copy">左侧新增或编辑课程，右侧用竖直列表快速检查全周课程配置。</p>
@@ -78,20 +78,20 @@
             <div class="schedule-palette" id="schedulePalette">
               <div class="schedule-palette-card class" draggable="true" data-palette-kind="class">
                 <strong>上课块</strong>
-                <span>拖入时间轴追加一节课</span>
+                <span>拖到时间轴末尾追加一节课</span>
               </div>
               <div class="schedule-palette-card break" draggable="true" data-palette-kind="break">
                 <strong>课间块</strong>
-                <span>拖入时间轴追加一段休息</span>
+                <span>拖到时间轴末尾追加一段休息</span>
               </div>
             </div>
 
-            <p class="admin-card-copy">规则：时间段不能重叠，上课后必须是课间，课间后必须是上课。可调整时长、删除节课，并拖入新块扩展节次。</p>
+            <p class="admin-card-copy">规则：时间段不能重叠，上课后必须是课间，课间后必须是上课。支持拖入新块、删除节次、调整时长。</p>
 
             <div class="schedule-editor-shell">
               <div class="schedule-editor-axis" id="scheduleEditorAxis"></div>
               <div class="schedule-editor-track" id="scheduleEditorTrack">
-                <div class="schedule-editor-dropzone" id="scheduleEditorDropzone">将上课块或课间块拖到这里追加到时间表末尾</div>
+                <div class="schedule-editor-dropzone" id="scheduleEditorDropzone">将上课块或课间块拖到这里，追加到时间表末尾</div>
               </div>
             </div>
           </article>
@@ -103,7 +103,7 @@
           <article class="admin-card create-card list-create-card">
             <div class="create-icon">+</div>
             <h2>新建一个清单</h2>
-            <p class="admin-card-copy">清单会直接同步到首页和第二页拖拽池。</p>
+            <p class="admin-card-copy">清单会直接同步到首页与第二页的拖拽池。</p>
             <form id="createCategoryForm" class="modal-form compact">
               <label>
                 <span>分类名称</span>

templates/base.html

@@ -1,12 +1,13 @@
-<!doctype html>
+<!doctype html>
 <html lang="zh-CN">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
     <title>{% block title %}Daily Reminder Master{% endblock %}</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=Noto+Sans+SC:wght@400;500;700;800&family=Sora:wght@400;600;700;800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
     {% block head %}{% endblock %}
   </head>
@@ -14,6 +15,7 @@
     <div class="page-shell">
       <div class="ambient ambient-one"></div>
       <div class="ambient ambient-two"></div>
+      <div class="ambient ambient-three"></div>
       {% block body %}{% endblock %}
     </div>
     {% block scripts %}{% endblock %}

templates/index.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "base.html" %}
 {% block title %}DRM | 提醒主页{% endblock %}
 {% block head %}
   <link rel="stylesheet" href="{{ url_for('static', filename='v020.css') }}">
@@ -13,14 +13,14 @@
         </div>
 
         <nav class="story-nav" aria-label="页面导航">
-          <button class="story-tab is-active" type="button" data-go-page="0">第一页 · 提醒板</button>
-          <button class="story-tab" type="button" data-go-page="1">第二页 · 周课表</button>
+          <button class="story-tab is-active" type="button" data-go-page="0">首页提醒</button>
+          <button class="story-tab" type="button" data-go-page="1">周课表</button>
         </nav>
 
-        <div class="action-group">
-          <a class="ghost-link" href="{{ url_for('admin') }}">后台管理</a>
+        <div class="action-group story-actions">
+          <a class="ghost-link" href="{{ url_for('admin') }}">管理后台</a>
           {% if authenticated %}
-            <button class="pill-button" id="logoutButton" type="button">退出登录</button>
+            <button class="pill-button accent-soft" id="logoutButton" type="button">退出登录</button>
           {% else %}
             <button class="pill-button accent" id="openLoginButton" type="button">登录后编辑</button>
           {% endif %}
@@ -30,37 +30,26 @@
       <div class="page-viewport">
         <div class="page-track" id="pageTrack">
           <section class="page-slide page-home">
-            <section class="hero-card">
+            <section class="hero-card hero-clock-card">
+              <div class="hero-orbit hero-orbit-a"></div>
+              <div class="hero-orbit hero-orbit-b"></div>
               <div class="clock-wrap">
+                <div class="clock-caption">北京时间</div>
                 <h1 class="clock-display" id="clockDisplay">00:00:00</h1>
                 <div class="clock-meta">
                   <span id="dateDisplay">0000 年 00 月 00 日</span>
-                  <span id="weekdayDisplay">{{ clock_meta.weekday }}</span>
+                  <span id="weekdayDisplay">星期一</span>
                   <span id="lunarDisplay">农历加载中</span>
                 </div>
               </div>
             </section>
 
             <section class="board-section">
-              <div class="section-header">
-                <div>
-                  <p class="section-kicker">今日待办板</p>
-                  <h2>每个分类一列，压缩留白后在一屏内保持更高信息密度</h2>
-                </div>
-                <p class="section-note">
-                  {% if authenticated %}
-                    已登录，可添加、勾选、重命名，并把任务拖进第二页的周课表。
-                  {% else %}
-                    当前为只读模式，登录后可进行编辑与拖拽排程。
-                  {% endif %}
-                </p>
-              </div>
-
               <div class="board-grid" id="boardGrid">
                 {% for category in categories %}
                   <article class="todo-column card-surface" data-category-id="{{ category.id }}">
                     <header class="column-header">
-                      <div>
+                      <div class="column-header-copy">
                         <p class="column-label">Todolist</p>
                         <h3 class="column-title">{{ category.name }}</h3>
                       </div>
@@ -116,10 +105,10 @@
           <section class="page-slide page-planner">
             <section class="planner-shell card-surface">
               <div class="planner-head">
-                <div>
-                  <p class="section-kicker">第二页 · 周课表</p>
-                  <h2>按周查看课程与任务，把整周安排收进一屏</h2>
-                  <p class="section-note" id="plannerHeadlineNote">固定课程会按学期周次自动出现，待办可拖入本周任意一天，并支持上下边缘拉伸；每项任务最短 15 分钟。</p>
+                <div class="planner-head-copy">
+                  <p class="section-kicker">Weekly Planner</p>
+                  <h2>本周课程与待办总览</h2>
+                  <p class="section-note" id="plannerHeadlineNote">课程自动按学期周次出现，待办可拖入本周任意一天，并支持上下边缘拉伸。</p>
                 </div>
                 <div class="planner-controls">
                   <button class="icon-button planner-shift-button" id="plannerPrevDay" type="button" aria-label="上一周">←</button>
@@ -148,17 +137,17 @@
                   </div>
                 </section>
 
-                <aside class="planner-sidebar">
+                <aside class="planner-sidebar card-surface-soft">
                   <div class="planner-sidebar-head">
                     <div>
-                      <p class="column-label">Todolist Drag Zone</p>
-                      <h3>把待办拖进本周课表</h3>
+                      <p class="column-label">Task Queue</p>
+                      <h3>待办拖入本周课表</h3>
                     </div>
                     <span class="planner-count" id="plannerTaskCount">0 项</span>
                   </div>
                   <div class="planner-sidebar-note">
                     <span>课程是固定块，只能在后台修改。</span>
-                    <span>任务块可拖动、拉伸，也可移出排程。</span>
+                    <span>任务卡支持拖动、拉伸和移出排程。</span>
                   </div>
                   <div class="planner-task-pool" id="plannerTaskPool"></div>
                 </aside>
@@ -176,7 +165,7 @@
     <div class="modal-card">
       <div class="modal-head">
         <p class="modal-kicker">安全登录</p>
-        <h3>输入密码后即可编辑待办与时间表</h3>
+        <h3>输入密码后即可编辑待办与课表</h3>
       </div>
       <form class="modal-form" id="loginForm">
         <label>
@@ -216,7 +205,7 @@
     <div class="modal-card">
       <div class="modal-head">
         <p class="modal-kicker">清单设置</p>
-        <h3>重命名当前 todolist</h3>
+        <h3>重命名当前清单</h3>
       </div>
       <form class="modal-form" id="renameForm">
         <input type="hidden" id="renameCategoryId" name="category_id">