model-platform/frontend/app/app.css

@import "tailwindcss";

@theme {
  --font-sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  --color-brand: #1978d4;
  --color-brand-strong: #0e5fb9;
  --color-brand-soft: #edf6ff;

  --color-success: #18b979;
  --color-success-strong: #0f7d55;
  --color-success-soft: #e8f7f1;

  --color-danger: #d75b5b;
  --color-danger-strong: #a94f4f;
  --color-danger-soft: #fff6f6;

  --color-warning: #e6a33c;
  --color-warning-soft: #fff0ee;

  --color-ink: #27394d;
  --color-ink-muted: #5d7186;
  --color-ink-subtle: #8b99a8;

  --color-line: #dce4ec;
  --color-line-soft: #edf1f5;

  --color-bg: #f3f6f9;
  --color-bg-panel: #ffffff;
  --color-bg-canvas: #f9fbfd;
  --color-bg-log: #17212b;
}
@theme inline {
  --color-sidebar: var(--sidebar-background);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --sidebar-background: #09233f;
  --sidebar-foreground: #c9d7e7;
  --sidebar-primary: #1479e8;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(255, 255, 255, 0.06);
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-ring: #5ca9ff;
}


@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@layer base {
  :root {
    font-family: var(--font-sans);
    color: #1f354b;
    background: #f3f6f9;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
  }

  html,
  body {
    margin: 0;
    min-width: 1120px;
    min-height: 100vh;
    overflow: hidden;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  button,
  input,
  select {
    font: inherit;
  }

  button {
    color: inherit;
  }
}

@layer utilities {
  .scrollbar-thin::-webkit-scrollbar {
    width: 5px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d9e1e9;
  }

  .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;
}