/* ForLink 2.0 User Design System — colors_and_type.css
 * Refined Quiet Technology | 精致的安静科技感
 * Warmer neutrals, richer brand blue, subtle depth, dark-mode ready.
 */

:root {
  /* ---------- Brand ---------- */
  --forlink-brand-50: #eef5ff;
  --forlink-brand-100: #d8eaff;
  --forlink-brand-200: #b5d6ff;
  --forlink-brand-300: #84b8ff;
  --forlink-brand-400: #4f91ff;
  --forlink-brand-500: #2970f5;
  --forlink-brand-600: #1b5ad4;
  --forlink-brand-700: #1749ad;
  --forlink-brand-800: #1a3d80;
  --forlink-brand-900: #1a3658;

  /* ---------- Neutral (warm zinc) ---------- */
  --forlink-white: #ffffff;
  --forlink-gray-50: #fafafa;
  --forlink-gray-100: #f4f4f5;
  --forlink-gray-200: #e4e4e7;
  --forlink-gray-300: #d4d4d8;
  --forlink-gray-400: #a1a1aa;
  --forlink-gray-500: #71717a;
  --forlink-gray-600: #52525b;
  --forlink-gray-700: #3f3f46;
  --forlink-gray-800: #27272a;
  --forlink-gray-900: #18181b;
  --forlink-black: #09090b;

  /* ---------- State ---------- */
  --forlink-success-50: #f0fdf4;
  --forlink-success-500: #22c55e;
  --forlink-success-600: #16a34a;
  --forlink-warning-50: #fffbeb;
  --forlink-warning-500: #f59e0b;
  --forlink-warning-600: #d97706;
  --forlink-error-50: #fef2f2;
  --forlink-error-500: #ef4444;
  --forlink-error-600: #dc2626;
  --forlink-error-700: #b91c1c;
  --forlink-info-50: #eff6ff;
  --forlink-info-500: #3b82f6;
  --forlink-info-600: #2563eb;

  /* ---------- Semantic aliases (light) ---------- */
  --forlink-background: var(--forlink-gray-50);
  --forlink-foreground: var(--forlink-gray-900);
  --forlink-card: var(--forlink-white);
  --forlink-card-foreground: var(--forlink-gray-900);
  --forlink-popover: var(--forlink-white);
  --forlink-popover-foreground: var(--forlink-gray-900);
  --forlink-primary: var(--forlink-brand-600);
  --forlink-primary-foreground: var(--forlink-white);
  --forlink-secondary: var(--forlink-gray-100);
  --forlink-secondary-foreground: var(--forlink-gray-800);
  --forlink-muted: var(--forlink-gray-100);
  --forlink-muted-foreground: var(--forlink-gray-500);
  --forlink-accent: var(--forlink-gray-100);
  --forlink-accent-foreground: var(--forlink-gray-800);
  --forlink-destructive: var(--forlink-error-600);
  --forlink-destructive-foreground: var(--forlink-white);
  --forlink-border: var(--forlink-gray-200);
  --forlink-input: var(--forlink-gray-200);
  --forlink-ring: var(--forlink-brand-600);

  /* ---------- Radius ---------- */
  --forlink-radius-xs: 2px;
  --forlink-radius-sm: 6px;
  --forlink-radius-md: 10px;
  --forlink-radius-lg: 14px;
  --forlink-radius-xl: 16px;
  --forlink-radius-full: 9999px;

  /* ---------- Shadow ---------- */
  --forlink-shadow-1: 0 1px 2px rgba(9, 9, 11, 0.04), 0 1px 1px rgba(9, 9, 11, 0.02);
  --forlink-shadow-2: 0 4px 12px rgba(9, 9, 11, 0.05);
  --forlink-shadow-3: 0 8px 28px rgba(9, 9, 11, 0.05);
  --forlink-shadow-4: 0 24px 60px -16px rgba(9, 9, 11, 0.10);

  /* ---------- Typography ---------- */
  --forlink-font-sans: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --forlink-font-mono: "SF Mono", "SFMono-Regular", ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", monospace;

  --forlink-text-xs: 12px;
  --forlink-text-sm: 13px;
  --forlink-text-base: 14px;
  --forlink-text-md: 15px;
  --forlink-text-lg: 16px;
  --forlink-text-xl: 18px;
  --forlink-text-2xl: 20px;
  --forlink-text-3xl: 24px;
  --forlink-text-4xl: 30px;

  /* ---------- Spacing ---------- */
  --forlink-space-1: 4px;
  --forlink-space-2: 8px;
  --forlink-space-3: 12px;
  --forlink-space-4: 16px;
  --forlink-space-5: 20px;
  --forlink-space-6: 24px;
  --forlink-space-7: 32px;
  --forlink-space-8: 40px;
  --forlink-space-9: 48px;
  --forlink-space-10: 64px;

  /* ---------- Layout ---------- */
  --forlink-sidebar-width: 232px;
  --forlink-header-height: 60px;
  --forlink-main-max-width: 1320px;
  --forlink-sidebar-tablet-width: 72px;
  --forlink-mobile-nav-height: 64px;
  --forlink-radius-small: var(--forlink-radius-sm);
  --forlink-radius-medium: var(--forlink-radius-md);
  --forlink-radius-large: var(--forlink-radius-lg);

  /* ——— ForLink 动效令牌（时长 / 缓动）：全站唯一来源，禁止再写裸时长 ——— */
  --fl-dur-fast: 120ms;   /* 悬停、按下、色彩变化 */
  --fl-dur-base: 180ms;   /* 浮层淡入淡出、卡片展开 */
  --fl-dur-slow: 240ms;   /* 抽屉滑入、页面级过渡 */
  --fl-ease: cubic-bezier(.4, 0, .2, 1);
  /* ——— 页面框架层级（数值与改造前裸值一致，不改变真实层叠顺序）——— */
  --fl-z-fab: 40;         /* 移动端悬浮操作按钮（右下） */
  --fl-z-header: 40;      /* 顶部固定栏 / 文档版式页头 */
  --fl-z-nav: 50;         /* 移动端底部主导航 */
  --fl-z-toc: 60;         /* 文档版式移动端目录按钮 */
  --fl-z-sidebar: 70;     /* 文档版式侧栏 */
  --fl-z-dropdown: 50;    /* 页内下拉（局部层叠） */
  --fl-z-tooltip: 10;     /* 局部浮起：图表 tooltip / auth 面板 */
  --fl-z-inline: 1;       /* 组件内粘性头 */
  --fl-z-decor: 2;        /* 装饰层 */
}

/* ---------- Dark mode ---------- */
html.dark,
[data-theme="dark"] {
  --forlink-background: #09090b;
  --forlink-foreground: #f4f4f5;
  --forlink-card: #141419;
  --forlink-card-foreground: #f4f4f5;
  --forlink-popover: #1a1a21;
  --forlink-popover-foreground: #f4f4f5;
  --forlink-primary: #5b8fff;
  --forlink-primary-foreground: #ffffff;
  --forlink-secondary: #1c1c1f;
  --forlink-secondary-foreground: #e9e9ec;
  --forlink-muted: #1c1c1f;
  --forlink-muted-foreground: #8b8b96;
  --forlink-accent: #1c1c1f;
  --forlink-accent-foreground: #e9e9ec;
  --forlink-destructive: #ef4444;
  --forlink-destructive-foreground: #ffffff;
  --forlink-border: #272730;
  --forlink-input: #272730;
  --forlink-ring: #5b8fff;

  --forlink-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.26), 0 1px 1px rgba(0, 0, 0, 0.16);
  --forlink-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.34);
  --forlink-shadow-3: 0 8px 28px rgba(0, 0, 0, 0.42);
  --forlink-shadow-4: 0 24px 60px -16px rgba(0, 0, 0, 0.58);
}

/* ---------- Base typography ---------- */
html {
  font-family: var(--forlink-font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--forlink-foreground);
  background-color: var(--forlink-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--forlink-font-sans);
  color: var(--forlink-foreground);
  background-color: var(--forlink-background);
}

/* ---------- Type scale utilities ---------- */
.fl-text-xs { font-size: var(--forlink-text-xs); line-height: 1.5; }
.fl-text-sm { font-size: var(--forlink-text-sm); line-height: 1.5; }
.fl-text-base { font-size: var(--forlink-text-base); line-height: 1.5; }
.fl-text-md { font-size: var(--forlink-text-md); line-height: 1.5; }
.fl-text-lg { font-size: var(--forlink-text-lg); line-height: 1.5; }
.fl-text-xl { font-size: var(--forlink-text-xl); line-height: 1.4; }
.fl-text-2xl { font-size: var(--forlink-text-2xl); line-height: 1.3; }
.fl-text-3xl { font-size: var(--forlink-text-3xl); line-height: 1.25; }
.fl-text-4xl { font-size: var(--forlink-text-4xl); line-height: 1.2; }

.fl-font-medium { font-weight: 500; }
.fl-font-semibold { font-weight: 600; }
.fl-font-bold { font-weight: 700; }
.fl-tabular { font-variant-numeric: tabular-nums; }
.fl-mono { font-family: var(--forlink-font-mono); }

/* ---------- Color utilities ---------- */
.fl-bg-page { background-color: var(--forlink-background); }
.fl-bg-card { background-color: var(--forlink-card); }
.fl-bg-muted { background-color: var(--forlink-muted); }
.fl-bg-primary { background-color: var(--forlink-primary); color: var(--forlink-primary-foreground); }
.fl-bg-destructive { background-color: var(--forlink-destructive); color: var(--forlink-destructive-foreground); }

.fl-text-primary { color: var(--forlink-foreground); }
.fl-text-secondary { color: var(--forlink-muted-foreground); }
.fl-text-tertiary { color: var(--forlink-gray-500); }
.fl-text-brand { color: var(--forlink-primary); }
.fl-text-destructive { color: var(--forlink-destructive); }
.fl-text-success { color: var(--forlink-success-600); }
.fl-text-warning { color: var(--forlink-warning-600); }

/* ---------- Border / shadow utilities ---------- */
.fl-border { border: 1px solid var(--forlink-border); }
.fl-border-b { border-bottom: 1px solid var(--forlink-border); }
.fl-border-t { border-top: 1px solid var(--forlink-border); }
.fl-shadow-1 { box-shadow: var(--forlink-shadow-1); }
.fl-shadow-2 { box-shadow: var(--forlink-shadow-2); }
.fl-shadow-3 { box-shadow: var(--forlink-shadow-3); }
.fl-shadow-4 { box-shadow: var(--forlink-shadow-4); }

/* ---------- Radius utilities ---------- */
.fl-radius-xs { border-radius: var(--forlink-radius-xs); }
.fl-radius-sm { border-radius: var(--forlink-radius-sm); }
.fl-radius-md { border-radius: var(--forlink-radius-md); }
.fl-radius-lg { border-radius: var(--forlink-radius-lg); }
.fl-radius-xl { border-radius: var(--forlink-radius-xl); }
.fl-radius-full { border-radius: var(--forlink-radius-full); }

/* ---------- Button system ---------- */
.fl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--forlink-space-2);
  height: 36px;
  padding: 0 16px;
  font-size: var(--forlink-text-base);
  font-weight: 500;
  line-height: 1;
  border-radius: var(--forlink-radius-md);
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--forlink-foreground);
  cursor: pointer;
  transition: background-color var(--fl-dur-fast) var(--fl-ease-decel),
              border-color var(--fl-dur-fast) var(--fl-ease-decel),
              color var(--fl-dur-fast) var(--fl-ease-decel),
              transform var(--fl-dur-fast) var(--fl-ease-decel);
  white-space: nowrap;
}
/* 触屏适配：装饰性悬停只在「支持 hover + 精确指针」的设备上生效。
   否则触屏点按后 :hover 不会解除，按钮会一直停在悬停态像卡住。
   就地包裹不改变层叠顺序。 */
@media (hover: hover) and (pointer: fine) {
.fl-btn:hover { background-color: var(--forlink-muted); }
}
.fl-btn:active { transform: translateY(0) scale(.97); }
.fl-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--forlink-ring), 0 0 0 4px var(--forlink-background); }
.fl-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.fl-btn-primary { background-color: var(--forlink-primary); color: var(--forlink-primary-foreground); }
@media (hover: hover) and (pointer: fine) {
.fl-btn-primary:hover { background-color: var(--forlink-brand-700); }
}
.fl-btn-secondary { background-color: var(--forlink-secondary); color: var(--forlink-secondary-foreground); border-color: var(--forlink-border); }
@media (hover: hover) and (pointer: fine) {
.fl-btn-secondary:hover { background-color: var(--forlink-gray-200); }
}
.fl-btn-ghost { background-color: transparent; color: var(--forlink-foreground); }
@media (hover: hover) and (pointer: fine) {
.fl-btn-ghost:hover { background-color: var(--forlink-muted); }
}
.fl-btn-destructive { background-color: var(--forlink-destructive); color: var(--forlink-destructive-foreground); }
@media (hover: hover) and (pointer: fine) {
.fl-btn-destructive:hover { background-color: var(--forlink-error-700, #b91c1c); }
}

.fl-btn-sm { height: 30px; padding: 0 12px; font-size: var(--forlink-text-sm); }
.fl-btn-lg { height: 42px; padding: 0 24px; font-size: var(--forlink-text-md); }

/* ---------- Input system ---------- */
.fl-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-size: var(--forlink-text-base);
  line-height: 1.4;
  color: var(--forlink-foreground);
  background-color: var(--forlink-card);
  border: 1px solid var(--forlink-input);
  border-radius: var(--forlink-radius-md);
  outline: none;
  transition: border-color var(--fl-dur-fast) var(--fl-ease-decel),
              box-shadow var(--fl-dur-fast) var(--fl-ease-decel);
}
.fl-input::placeholder { color: var(--forlink-muted-foreground); }
@media (hover: hover) and (pointer: fine) {
.fl-input:hover { border-color: var(--forlink-gray-400); }
}
.fl-input:focus { border-color: var(--forlink-ring); box-shadow: 0 0 0 3px var(--forlink-brand-100); }
html.dark .fl-input:focus { box-shadow: 0 0 0 3px rgba(91, 143, 255, 0.18); }
.fl-input:disabled { background-color: var(--forlink-muted); opacity: 0.6; cursor: not-allowed; }

.fl-label {
  display: block;
  margin-bottom: var(--forlink-space-2);
  font-size: var(--forlink-text-sm);
  font-weight: 500;
  color: var(--forlink-foreground);
}

/* ---------- Card / surface ---------- */
.fl-card {
  background-color: var(--forlink-card);
  border: 1px solid var(--forlink-border);
  border-radius: var(--forlink-radius-lg);
}
@media (hover: hover) and (pointer: fine) {
.fl-card-hover:hover { border-color: var(--forlink-gray-300); }
}
@media (hover: hover) and (pointer: fine) {
html.dark .fl-card-hover:hover { border-color: var(--forlink-gray-700); }
}

/* ---------- Table / list ---------- */
.fl-list-header {
  display: grid;
  align-items: center;
  padding: var(--forlink-space-3) var(--forlink-space-4);
  font-size: var(--forlink-text-xs);
  font-weight: 600;
  color: var(--forlink-muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--forlink-border);
}
.fl-list-row {
  display: grid;
  align-items: center;
  padding: var(--forlink-space-3) var(--forlink-space-4);
  font-size: var(--forlink-text-base);
  border-bottom: 1px solid var(--forlink-border);
  transition: background-color var(--fl-dur-fast) var(--fl-ease-decel);
}
.fl-list-row:last-child { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
.fl-list-row:hover { background-color: var(--forlink-gray-50); }
}
@media (hover: hover) and (pointer: fine) {
html.dark .fl-list-row:hover { background-color: rgba(255,255,255,0.03); }
}
.fl-list-row.selected { background-color: var(--forlink-brand-50); }
html.dark .fl-list-row.selected { background-color: rgba(91, 143, 255, 0.12); }

/* ---------- Tag / badge ---------- */
.fl-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: var(--forlink-text-xs);
  font-weight: 500;
  border-radius: var(--forlink-radius-full);
  background-color: var(--forlink-muted);
  color: var(--forlink-muted-foreground);
}
.fl-tag-brand { background-color: var(--forlink-brand-50); color: var(--forlink-brand-700); }
.fl-tag-success { background-color: var(--forlink-success-50); color: var(--forlink-success-600); }
.fl-tag-warning { background-color: var(--forlink-warning-50); color: var(--forlink-warning-600); }
.fl-tag-error { background-color: var(--forlink-error-50); color: var(--forlink-error-600); }
html.dark .fl-tag-brand { background-color: rgba(91, 143, 255, 0.14); color: #a3c9ff; }
html.dark .fl-tag-success { background-color: rgba(34, 197, 94, 0.14); color: #4ade80; }
html.dark .fl-tag-warning { background-color: rgba(245, 158, 11, 0.14); color: #fbbf24; }
html.dark .fl-tag-error { background-color: rgba(239, 68, 68, 0.14); color: #f87171; }

/* ---------- Navigation ---------- */
.fl-nav-item {
  display: flex;
  align-items: center;
  gap: var(--forlink-space-3);
  height: 36px;
  padding: 0 var(--forlink-space-3);
  font-size: var(--forlink-text-base);
  font-weight: 500;
  color: var(--forlink-muted-foreground);
  border-radius: var(--forlink-radius-md);
  cursor: pointer;
  transition: background-color var(--fl-dur-fast) var(--fl-ease-decel),
              color var(--fl-dur-fast) var(--fl-ease-decel);
}
@media (hover: hover) and (pointer: fine) {
.fl-nav-item:hover { background-color: var(--forlink-muted); color: var(--forlink-foreground); }
}
.fl-nav-item.active { background-color: var(--forlink-brand-50); color: var(--forlink-brand-700); }
html.dark .fl-nav-item.active { background-color: rgba(91, 143, 255, 0.14); color: #a3c9ff; }

/* ---------- Skeleton ---------- */
.fl-skeleton {
  display: inline-block;
  background: linear-gradient(90deg, var(--forlink-gray-200) 25%, var(--forlink-gray-100) 50%, var(--forlink-gray-200) 75%);
  background-size: 200% 100%;
  border-radius: var(--forlink-radius-sm);
  animation: fl-skeleton-pulse 1.6s ease-in-out infinite;
}
html.dark .fl-skeleton {
  background: linear-gradient(90deg, #272730 25%, #1c1c24 50%, #272730 75%);
  background-size: 200% 100%;
}
@keyframes fl-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Utility ---------- */
.fl-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 名称自动换行：长文件名/链接名折行显示，不挤出网格容器（父级须有 min-width:0） */
.fl-name-wrap { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.fl-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fl-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Theme transitions ---------- */
html, body, .fl-card, .fl-btn, .fl-input, .fl-nav-item, .fl-list-row, .fl-tag,
.fl-bg-page, .fl-bg-card, .fl-bg-muted, .fl-bg-primary, .fl-bg-destructive {
  transition: background-color var(--fl-dur-base) var(--fl-ease-decel),
              border-color var(--fl-dur-base) var(--fl-ease-decel),
              color var(--fl-dur-base) var(--fl-ease-decel),
              box-shadow var(--fl-dur-base) var(--fl-ease-decel);
}

/* ---------- Dark mode fine-tuning ---------- */
html.dark .fl-text-tertiary { color: var(--forlink-gray-500); }
@media (hover: hover) and (pointer: fine) {
html.dark .fl-btn-secondary:hover { background-color: #252a3a; }
}
@media (hover: hover) and (pointer: fine) {
html.dark .fl-input:hover { border-color: var(--forlink-gray-600); }
}
html.dark .fl-input::placeholder { color: var(--forlink-gray-600); }

/* Mobile bottom navigation — redesigned */
.fl-mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--fl-z-nav);
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: var(--forlink-mobile-nav-height);
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  background-color: var(--forlink-card);
  border-top: 1px solid var(--forlink-border);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06);
}
html.dark .fl-mobile-nav { box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.3); }

.fl-mobile-nav-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  height: 100%;
  max-height: 56px;
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--forlink-muted-foreground);
  text-decoration: none;
  border-radius: var(--forlink-radius-md);
  transition: color var(--fl-dur-fast) var(--fl-ease-decel);
}
.fl-mobile-nav-item:active { opacity: 0.7; }
.fl-mobile-nav-item i {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  stroke-width: 1.75;
  transition: transform var(--fl-dur-fast) var(--fl-ease-decel);
}
.fl-mobile-nav-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 11px;
}
.fl-mobile-nav-item.active {
  color: var(--forlink-primary);
}
.fl-mobile-nav-item.active i {
  transform: translateY(-1px);
  stroke-width: 2;
}
.fl-mobile-nav-item.active::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: var(--forlink-primary);
  border-radius: 999px;
}

.fl-mobile-fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--forlink-mobile-nav-height));
  z-index: var(--fl-z-fab);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--forlink-primary);
  color: var(--forlink-primary-foreground);
  box-shadow: var(--forlink-shadow-3);
}

/* Top mobile bar — simplified */
.fl-mobile-topbar {
  position: sticky;
  top: 0;
  z-index: var(--fl-z-header);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 16px;
  background-color: var(--forlink-card);
  border-bottom: 1px solid var(--forlink-border);
}
.fl-mobile-topbar .fl-mobile-menu-btn {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--forlink-radius-md);
  color: var(--forlink-muted-foreground);
  cursor: pointer;
  transition: background-color var(--fl-dur-fast);
}
.fl-mobile-topbar .fl-mobile-menu-btn:active { background-color: var(--forlink-muted); }
.fl-mobile-topbar .fl-mobile-menu-btn i { width: 20px; height: 20px; }
.fl-mobile-topbar .fl-mobile-logo {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fl-mobile-topbar .fl-mobile-logo img { height: 24px; width: auto; }

/* Responsive helpers */
@media (max-width: 767px) {
  .fl-hide-mobile { display: none !important; }
  .fl-show-mobile { display: flex !important; }
  /* Hide desktop header on mobile */
  .md\:ml-\[232px\] > header:first-of-type,
  .md\:ml-\[232px\] > header.fl-hide-mobile {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .fl-show-mobile { display: none !important; }
}

/* Tablet & desktop sidebar shows icon + text */
@media (min-width: 768px) {
  body > aside {
    width: var(--forlink-sidebar-width) !important;
  }
  .md\:ml-16,
  .lg\:ml-\[232px\] {
    margin-left: var(--forlink-sidebar-width) !important;
  }
}

/* Mobile overflow protection */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  body { min-height: 100vh; }
  main, .fl-card, .fl-list-row, .fl-list-header {
    max-width: 100%;
    overflow-x: hidden;
  }
  main > div {
    max-width: 100% !important;
    width: 100% !important;
  }
  .fl-main-wrapper {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Nav icon base */
.fl-nav-icon {
  flex-shrink: 0;
  display: block;
}
.fl-mobile-nav-item .fl-nav-icon {
  width: 24px;
  height: 24px;
  transition: transform var(--fl-dur-fast) var(--fl-ease-decel);
}
.fl-mobile-nav-item.active .fl-nav-icon {
  transform: translateY(-1px);
  stroke-width: 2;
}

/* Mobile content adjustments */
@media (max-width: 767px) {
  main { padding: 12px !important; }
  main .space-y-6 { gap: 16px; }
  main .space-y-8 { gap: 20px; }
  .fl-card { border-radius: var(--forlink-radius-md); }
  .fl-btn { height: 40px; padding: 0 14px; }
  .fl-btn-lg { height: 44px; padding: 0 20px; }
  .fl-text-3xl { font-size: 22px; }
  .fl-text-2xl { font-size: 18px; }
  .fl-text-xl { font-size: 16px; }
  /* Grid responsive */
  .grid { min-width: 0; }
  .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  /* List / table responsive */
  .fl-list-header,
  .fl-list-row {
    padding-left: 12px;
    padding-right: 12px;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .fl-list-header > div:nth-child(n+3),
  .fl-list-row > div:nth-child(n+3) {
    display: none !important;
  }
  .fl-list-header > div:nth-child(-n+2),
  .fl-list-row > div:nth-child(-n+2) {
    display: flex !important;
  }
  /* Hide checkbox column on mobile for list-only views */
  .fl-list-header .cell-checkbox,
  .fl-list-row .cell-checkbox {
    display: none !important;
  }
  .fl-list-header:has(.cell-checkbox),
  .fl-list-row:has(.cell-checkbox) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Text protection */
  h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-break: break-word; }
  .fl-truncate { max-width: 100%; }
  /* Stats / kpi cards */
  [class*="grid-cols-"] > .fl-card {
    padding: 14px;
  }
  /* Tabs / filters: enable horizontal scroll on mobile */
  .files-tabs,
  .fl-tabs,
  .files-sort-options,
  [class*="-tabs"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }
  [class*="-tabs"]::-webkit-scrollbar { display: none; }
  /* Toolbar responsiveness */
  .files-toolbar {
    flex-direction: column;
    gap: 8px;
    align-items: stretch !important;
  }
  .files-toolbar > * {
    width: 100%;
  }
  /* Hide sort options row on mobile, keep only one sort dropdown */
  .files-sort {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .files-sort::-webkit-scrollbar { display: none; }
}

/* Small mobile (≤380px) */
@media (max-width: 380px) {
  .fl-mobile-nav-item span { font-size: 10px; }
  .fl-mobile-nav-item .fl-nav-icon { width: 22px; height: 22px; }
  main { padding: 10px !important; }
  .fl-btn { height: 38px; padding: 0 12px; font-size: 13px; }
}

/* Tablet optimizations (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  main { padding: 20px !important; }
  .fl-text-3xl { font-size: 26px; }
  .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Large desktop optimizations */
@media (min-width: 1440px) {
  main { padding: 32px !important; }
  .fl-text-4xl { font-size: 34px; }
}

/* Theme toggle segmented control */
.fl-theme-segment {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background-color: var(--forlink-muted);
  border-radius: var(--forlink-radius-md);
}
.fl-theme-segment label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--forlink-text-sm);
  font-weight: 500;
  color: var(--forlink-muted-foreground);
  border-radius: var(--forlink-radius-sm);
  cursor: pointer;
  transition: background-color var(--fl-dur-fast), color var(--fl-dur-fast);
}
.fl-theme-segment input { position: absolute; opacity: 0; width: 0; height: 0; }
.fl-theme-segment input:checked + label {
  background-color: var(--forlink-card);
  color: var(--forlink-foreground);
  box-shadow: var(--forlink-shadow-1);
}

    
/* ---------- Custom Select (replaces native <select>) ---------- */
.fl-custom-select { position: relative; display: inline-flex; width: 100%; min-width: 120px; }
.fl-native-select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.fl-custom-select-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 40px; padding: 0 12px; font-size: var(--forlink-text-base); line-height: 1.4; color: var(--forlink-foreground); background-color: var(--forlink-card); border: 1px solid var(--forlink-input); border-radius: var(--forlink-radius-md); cursor: pointer; transition: border-color var(--fl-dur-fast), box-shadow var(--fl-dur-fast); }
@media (hover: hover) and (pointer: fine) {
.fl-custom-select-trigger:hover { border-color: var(--forlink-gray-400); }
}
.fl-custom-select.open .fl-custom-select-trigger { border-color: var(--forlink-ring); box-shadow: 0 0 0 3px var(--forlink-brand-100); }
html.dark .fl-custom-select.open .fl-custom-select-trigger { box-shadow: 0 0 0 3px rgba(91, 143, 255, 0.18); }
.fl-custom-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-custom-select-arrow { width: 16px; height: 16px; flex-shrink: 0; color: var(--forlink-muted-foreground); transition: transform var(--fl-dur-fast); }
.fl-custom-select.open .fl-custom-select-arrow { transform: rotate(180deg); }
.fl-custom-select-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: var(--fl-z-pop, 1500); max-height: 260px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background-color: var(--forlink-card); border: 1px solid var(--forlink-border); border-radius: var(--forlink-radius-lg); box-shadow: var(--forlink-shadow-3); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--fl-dur-fast), transform var(--fl-dur-fast), visibility var(--fl-dur-fast); }
/* 触发器靠近视口底部时向上翻转（由 fl-app.js 添加 .up） */
.fl-custom-select.up .fl-custom-select-list { top: auto; bottom: calc(100% + 6px); transform: translateY(4px); }
.fl-custom-select.up.open .fl-custom-select-list { transform: translateY(0); }
.fl-custom-select.open .fl-custom-select-list { opacity: 1; visibility: visible; transform: translateY(0); }
.fl-custom-select-option { padding: 8px 10px; font-size: var(--forlink-text-base); color: var(--forlink-foreground); border-radius: var(--forlink-radius-md); cursor: pointer; transition: background-color var(--fl-dur-fast), color var(--fl-dur-fast); }
@media (hover: hover) and (pointer: fine) {
.fl-custom-select-option:hover{ background-color: var(--forlink-muted); color: var(--forlink-foreground); }
}
.fl-custom-select-option.selected{ background-color: var(--forlink-muted); color: var(--forlink-foreground); }
.fl-custom-select-option.selected { font-weight: 500; }

/* ---------- Toast ---------- */
.fl-toast-container { position: fixed; top: 16px; right: 16px; z-index: var(--fl-z-toast, 1700); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.fl-toast { display: flex; align-items: center; gap: 10px; max-width: 320px; padding: 12px 16px; font-size: var(--forlink-text-base); font-weight: 500; color: var(--forlink-foreground); background-color: var(--forlink-card); border: 1px solid var(--forlink-border); border-radius: var(--forlink-radius-lg); box-shadow: var(--forlink-shadow-3); opacity: 0; transform: translateX(20px); transition: opacity var(--fl-dur-base) var(--fl-ease), transform var(--fl-dur-base) var(--fl-ease-out); pointer-events: auto; }
.fl-toast-visible { opacity: 1; transform: translateX(0); }
.fl-toast-success { border-left: 4px solid var(--forlink-success-500); }
.fl-toast-error { border-left: 4px solid var(--forlink-error-500); }
.fl-toast-info { border-left: 4px solid var(--forlink-info-500); }
.fl-toast-warning { border-left: 4px solid var(--forlink-warning-500); }
@media (max-width: 480px) { .fl-toast-container { top: 12px; right: 12px; left: 12px; } .fl-toast { max-width: 100%; } }

/* ---------- Modal ---------- */
/* 浮层层级令牌（全站统一）：抽屉 < 模态 < 浮层 < 加载 < Toast
   浮层可能由模态内部唤起（如上传流程中的文件选择器），故置于模态之上。 */
:root {
  --fl-z-drawer: 1300;
  --fl-z-modal: 1400;
  --fl-z-pop: 1500;
  --fl-z-loading: 1600;
  --fl-z-toast: 1700;
}

/* 弹窗宽度令牌：xs 常规 / sm 支付·表单 / md 上传·详情·日志 / lg 面板 / xl 预览 */
:root {
  --fl-modal-w-xs: 400px;
  --fl-modal-w-sm: 440px;
  --fl-modal-w-md: 480px;
  --fl-modal-w-lg: 560px;
  --fl-modal-w-xl: 920px;
}

.fl-modal-overlay { position: fixed; inset: 0; z-index: var(--fl-z-modal, 1400); display: flex; align-items: center; justify-content: center; padding: 16px; background-color: rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--fl-dur-base) var(--fl-ease), visibility var(--fl-dur-base); }
.fl-modal-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.fl-modal { display: flex; flex-direction: column; width: 100%; max-width: var(--fl-modal-w-xs, 400px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); background-color: var(--forlink-card); border: 1px solid var(--forlink-border); border-radius: var(--forlink-radius-xl); box-shadow: var(--forlink-shadow-4); transform: scale(.94) translateY(8px); transition: transform var(--fl-dur-fast) var(--fl-ease); }
.fl-modal-visible .fl-modal { transform: scale(1) translateY(0); transition: transform var(--fl-dur-slow) var(--fl-ease-spring); }
.fl-modal--sm { max-width: var(--fl-modal-w-sm, 440px); }
.fl-modal--md { max-width: var(--fl-modal-w-md, 480px); }
.fl-modal--lg { max-width: var(--fl-modal-w-lg, 560px); }
.fl-modal--xl { max-width: var(--fl-modal-w-xl, 920px); }
.fl-modal-header { display: flex; align-items: center; gap: 10px; flex: none; padding: 16px 20px; border-bottom: 1px solid var(--forlink-border); font-size: var(--forlink-text-lg); font-weight: 600; color: var(--forlink-foreground); }
.fl-modal-header .fl-modal-close, .fl-modal-header .fl-modal-actions { margin-left: auto; }
.fl-modal-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--forlink-text-lg); font-weight: 600; color: var(--forlink-foreground); }
.fl-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; font-size: var(--forlink-text-base); color: var(--forlink-muted-foreground); line-height: 1.5; }
.fl-modal-footer { display: flex; justify-content: flex-end; gap: 10px; flex: none; padding: 14px 20px; border-top: 1px solid var(--forlink-border); }
.fl-modal-close { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--forlink-radius-md); background: transparent; color: var(--forlink-muted-foreground); cursor: pointer; transition: background-color var(--fl-dur-fast), color var(--fl-dur-fast); }
@media (hover: hover) and (pointer: fine) {
.fl-modal-close:hover { background-color: var(--forlink-muted); color: var(--forlink-foreground); }
}
.fl-modal-close svg { width: 16px; height: 16px; }
/* 窄屏统一转底部面板：贴底、上方留 40px 遮罩可见区 */
@media (max-width: 480px) {
  .fl-modal-overlay { align-items: flex-end; padding: 0; }
  .fl-modal, .fl-modal--sm, .fl-modal--md, .fl-modal--lg, .fl-modal--xl { max-width: 100%; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); border-radius: var(--forlink-radius-xl) var(--forlink-radius-xl) 0 0; }
}

/* ---------- Form validation ---------- */
.fl-input-error { border-color: var(--forlink-error-500) !important; box-shadow: 0 0 0 3px var(--forlink-error-50) !important; }
html.dark .fl-input-error { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important; }

/* ---------- Mobile layout improvements (compatibility layer) ---------- */
.fl-mobile-topbar { justify-content: center; height: 52px; padding: 0 16px; }
.fl-mobile-topbar .fl-mobile-logo img { height: 24px; width: auto; }
.fl-mobile-nav { height: var(--forlink-mobile-nav-height); padding: 0 4px env(safe-area-inset-bottom, 0px); }
.fl-mobile-nav-item { gap: 3px; font-size: 11px; letter-spacing: 0; }
.fl-mobile-nav-item .fl-nav-icon { width: 24px; height: 24px; }
.fl-mobile-nav-item span { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-mobile-nav-item.active { position: relative; color: var(--forlink-primary); }
.fl-mobile-nav-item.active .fl-nav-icon { transform: translateY(-1px); }
.fl-mobile-nav-item.active::before { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background: var(--forlink-primary); border-radius: 999px; }
@media (max-width: 359px) { .fl-mobile-nav-item span { display: none; } .fl-mobile-nav-item { justify-content: center; } .fl-mobile-nav-item .fl-nav-icon { width: 26px; height: 26px; } }
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--forlink-mobile-nav-height) + 4px); overflow-x: hidden; }
  html { overflow-x: hidden; }
}

/* ============================================================
   v20260922a 增补：P0 修复 + 年轻化动效
   ============================================================ */

/* loader 自旋兜底：各页行内 style 引用 animation:spin，此前 keyframes 依赖 Tailwind JIT 注入；
   JIT 未加载时图标会僵死不动，这里就地定义（与 Tailwind 原生 animate-spin 一致） */
@keyframes spin { to { transform: rotate(360deg); } }

/* 弹性缓动令牌（与 App 端 Bouncy 动效同源观感） */
:root {
  --fl-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --fl-ease-out: cubic-bezier(.16, 1, .3, 1);
  --fl-ease-decel: cubic-bezier(.2, .8, .2, 1);   /* 原全站裸用的减速曲线，收编为令牌 */
}

/* 页面入场：主内容轻微上浮淡入，缓解首帧生硬；尊重系统减弱动效设置 */
@media (prefers-reduced-motion: no-preference) {
  main { animation: fl-page-in var(--fl-dur-slow) var(--fl-ease-out) both; }
}
@keyframes fl-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 移动端双导航兜底：侧栏的 hidden 依赖 Tailwind 类生成，若样式未就绪会与底部导航同显 */
@media (max-width: 767px) {
  body > aside { display: none !important; }
}

/* ---------- ForLink 1.0 旧账号资产继承（account.html 入口卡片 + 四步弹窗）---------- */
.legacy-inherit-desc { margin: -4px 0 14px; font-size: var(--forlink-text-sm); color: var(--forlink-muted-foreground); line-height: 1.6; }
.legacy-step-tip { margin: 0 0 14px; font-size: var(--forlink-text-base); color: var(--forlink-foreground); line-height: 1.6; }
.legacy-step-note { margin: 14px 0 0; font-size: var(--forlink-text-sm); color: var(--forlink-muted-foreground); line-height: 1.6; }
.legacy-summary { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--forlink-radius-lg); background-color: var(--forlink-muted); }
.legacy-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--forlink-text-sm); }
.legacy-summary-row > span { color: var(--forlink-muted-foreground); flex: none; }
.legacy-summary-row > strong { color: var(--forlink-foreground); font-weight: 600; text-align: right; min-width: 0; word-break: break-all; }
.legacy-summary-row > strong.is-warn { color: var(--forlink-error-600); }
.legacy-result { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0 16px; }
.legacy-result-icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 999px; background-color: var(--forlink-success-50); color: var(--forlink-success-600); }
.legacy-result-icon svg { width: 24px; height: 24px; }
.legacy-result-title { font-size: var(--forlink-text-lg); font-weight: 600; color: var(--forlink-foreground); }
[data-legacy-state="inherited"] .account-row-icon { background-color: var(--forlink-success-50); color: var(--forlink-success-600); }
/* 显式兜底：[hidden] 可能被 .fl-card 的 display 覆盖 */
#legacy-inherit-card[hidden] { display: none !important; }
/* 用 aria-disabled 而非原生 disabled：原生会吞掉 click，导致「点了没反应」且状态易锁死 */
#legacy-inherit-card .fl-btn[aria-disabled="true"],
.fl-modal-footer .fl-btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }

/* 骨架列表行：列表/图表加载态占位（配合 FlApp.skeletonRows 使用） */
.fl-skeleton-list { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.fl-skeleton-row { display: flex; align-items: center; gap: 12px; height: 32px; }

/* 上传弹窗内的速链公益版分流入口（auth.js buildUploadDialog 注入） */
[data-up="quick-entry"]:hover { border-color: var(--forlink-primary); color: var(--forlink-foreground); }