update:css样式拆分

frontend/app/app.css

@@ -1,5 +1,4 @@
-@import "tailwindcss/theme.css";
-@import "tailwindcss/utilities.css";
+@import "tailwindcss";
 
 @theme {
   --font-sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
@@ -60,8 +59,9 @@
   html,
   body {
     margin: 0;
-    min-width: 1024px;
-    min-height: 100%;
+    min-width: 1120px;
+    min-height: 100vh;
+    overflow: hidden;
   }
 
   *,
@@ -69,6 +69,16 @@
   *::after {
     box-sizing: border-box;
   }
+
+  button,
+  input,
+  select {
+    font: inherit;
+  }
+
+  button {
+    color: inherit;
+  }
 }
 
 @layer utilities {
@@ -88,4 +98,238 @@
   .scrollbar-thin::-webkit-scrollbar-thumb:hover {
     background: #c4d0dc;
   }
+
+  /* 侧边栏双层渐变背景 — Tailwind 任意值无法可靠表达逗号分隔的多层 background */
+  .sidebar-shell {
+    background:
+      radial-gradient(circle at 10% 1%, rgb(28 105 186 / 25%), transparent 27%),
+      #09233f;
+  }
+
+  .welcome-panel-shell {
+    background:
+      radial-gradient(circle at 50% 39%, rgb(74 150 225 / 9%), transparent 24%),
+      radial-gradient(circle, #d3dee8 1px, transparent 1px);
+    background-size: auto, 18px 18px;
+  }
+
+  .dashboard-hero-shell {
+    background: linear-gradient(125deg, #0b3d69, #1978d4);
+  }
+
+  .trend-chart-bg {
+    background: repeating-linear-gradient(to bottom, #fff 0, #fff 44px, #eef3f7 45px);
+  }
+
+  .dashboard-donut {
+    background: conic-gradient(#318de0 0 67%, #72c9b0 67% 86%, #f3b75c 86% 100%);
+  }
+
+  .dashboard-donut::after {
+    position: absolute;
+    width: 78px;
+    height: 78px;
+    border-radius: 50%;
+    background: #fff;
+    content: "";
+  }
+
+  .tree-skeleton-bar {
+    background: linear-gradient(90deg, #f2f5f8, #fafbfc, #f2f5f8);
+    background-size: 200% 100%;
+    animation: shimmer 1.3s infinite;
+  }
+
+  .tabbar-scroll::-webkit-scrollbar {
+    height: 6px;
+  }
+
+  .tabbar-scroll::-webkit-scrollbar-track {
+    background: #f1f3f5;
+  }
+
+  .tabbar-scroll::-webkit-scrollbar-thumb {
+    background: #c9d6e4;
+    border-radius: 3px;
+  }
+
+  .tabbar-scroll::-webkit-scrollbar-thumb:hover {
+    background: #a8b9ca;
+  }
+
+  .stage-dot-editing {
+    box-shadow: 0 0 0 3px rgb(36 149 211 / 13%);
+    animation: lock-pulse 1.8s ease-in-out infinite;
+  }
+
+  .editor-canvas-shell {
+    background:
+      linear-gradient(rgb(255 255 255 / 82%), rgb(255 255 255 / 82%)),
+      radial-gradient(circle, #c9d8e7 1px, transparent 1px);
+    background-color: #f4f7fa;
+    background-size: auto, 18px 18px;
+  }
+
+  .modal-panel {
+    animation: modal-in 0.18s ease-out;
+  }
+
+  .toast-enter {
+    animation: toast-in 0.2s ease-out;
+  }
+
+  .notebook-md h1,
+  .notebook-md h2,
+  .notebook-md h3,
+  .notebook-md p,
+  .notebook-md li {
+    margin: 6px 0;
+    color: #24292f;
+    font-size: 14px;
+    line-height: 1.6;
+  }
+
+  .notebook-md h1 {
+    font-size: 24px;
+    color: #1f6feb;
+    font-weight: 600;
+  }
+
+  .notebook-md h2 {
+    font-size: 20px;
+    color: #1f6feb;
+    font-weight: 600;
+  }
+
+  .notebook-md h3 {
+    font-size: 16px;
+    color: #24292f;
+    font-weight: 600;
+  }
+
+  .notebook-md ul,
+  .notebook-md ol {
+    padding-left: 24px;
+  }
+
+  .notebook-md li {
+    margin-left: 0;
+    list-style-position: outside;
+  }
+}
+
+@keyframes shimmer {
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes lock-pulse {
+  50% {
+    opacity: 0.5;
+    transform: scale(0.78);
+  }
+}
+
+@keyframes modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.985);
+  }
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(-7px);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Shared UI classes still used by admin / schedules pages */
+.icon-button {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border: 1px solid #dfe6ed;
+  border-radius: 7px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.icon-button:hover {
+  border-color: #b9c9da;
+  background: #f7faff;
+}
+
+.avatar {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(145deg, #3b92ed, #1869c9);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.primary-button,
+.secondary-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 650;
+}
+
+.primary-button {
+  min-height: 37px;
+  padding: 0 15px;
+  border: 1px solid #126ac3;
+  color: #fff;
+  background: linear-gradient(135deg, #1881e7, #1268c9);
+  box-shadow: 0 6px 15px rgb(20 111 202 / 18%);
+  font-size: 12px;
+}
+
+.primary-button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #1175d8, #0e5bad);
+}
+
+.primary-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.secondary-button {
+  min-height: 37px;
+  padding: 0 15px;
+  border: 1px solid #d8e1e9;
+  color: #56687c;
+  background: #fff;
+  font-size: 12px;
+}
+
+.button-spinner {
+  width: 13px;
+  height: 13px;
+  border: 2px solid rgb(255 255 255 / 45%);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+
+.button-spinner.button-spinner--blue,
+.button-spinner--blue {
+  border-color: rgb(34 121 199 / 22%);
+  border-top-color: #2279c7;
 }