/* ============================================================
 * base.css — 全局基础样式（所有页面引入）
 * 依赖：页面已加载 Google Fonts（Nunito Sans + Material Symbols）
 * 说明：设计 token 颜色由 assets/js/twconfig.js 注入 Tailwind；
 *       本文件只放 Tailwind 管不到的原生样式。
 * ============================================================ */

:root {
  /* 与 twconfig.js 保持同步的核心 token（供原生 CSS 使用） */
  --c-primary: #444ec5;
  --c-primary-soft: #E8EBFB;
  --c-on-surface: #141d23;
  --c-on-surface-variant: #454653;
  --c-outline: #767685;
  --c-border-subtle: #EEF2F7;
  --c-card-bg: #FFFFFF;
  --c-canvas-bg: #F4F7FB;
  --c-sidebar-bg: #313A46;
  --c-sidebar-muted: #8391A2;
  --c-error: #ba1a1a;
  --c-danger-soft: #FEECEF;
  --c-accent-warning: #FFBC00;
  --c-warning-soft: #FFF8E6;
  --c-secondary: #006c4d;
  --c-secondary-soft: #E6FAF4;
  --c-tertiary: #af2247;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Nunito Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--c-on-surface);
  background: var(--c-canvas-bg);
}

/* Material Symbols 可变字体基线设置 */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  user-select: none;
}

/* 细滚动条（设计稿中 .custom-scroll 的原生实现） */
.custom-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(118, 118, 133, 0.35);
  border-radius: 3px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(118, 118, 133, 0.55);
}
.custom-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* 顶栏消息红点的呼吸动画（设计稿 .live-pulse） */
@keyframes app-live-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}
.live-pulse {
  animation: app-live-pulse 1.8s ease-in-out infinite;
}

/* 全局选中文本色 */
::selection {
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

/* 布局加载失败提示（file:// 直开时出现） */
.app-layout-error {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--c-accent-warning);
  background: var(--c-warning-soft);
  border: 1px dashed var(--c-accent-warning);
  border-radius: 6px;
}