/* ============================================================
   FlixPilot UI 视觉升级补丁 v1
   原则：只改颜色/圆角/阴影/过渡，不改布局结构与尺寸
   生效范围：整站（MUI CSS 变量 + 组件级覆盖）
   ============================================================ */

/* ---------- 1. 主题令牌（覆盖 MUI CSS 变量） ---------- */
html:root {
  --fp-brand-1: #8C57FF;
  --fp-brand-2: #5B7BFF;
  --fp-radius-card: 18px;
  --fp-radius-btn: 12px;
  --fp-shadow-sm: 0 1px 2px rgba(17, 24, 39, .04), 0 6px 16px rgba(17, 24, 39, .06);
  --fp-shadow-md: 0 2px 8px rgba(17, 24, 39, .07), 0 16px 36px rgba(17, 24, 39, .10);
  --fp-shadow-brand: 0 6px 16px rgba(140, 87, 255, .30);
  --fp-line: rgba(17, 24, 39, .07);
  --fp-ease: cubic-bezier(.2, .8, .2, 1);

  /* MUI 形状 */
  --mui-shape-borderRadius: 12px;
  --mui-shape-customBorderRadius-md: 12px;
  --mui-shape-customBorderRadius-lg: 14px;

  /* MUI 阴影：把生硬的默认 elevation 换成柔和两层投影 */
  --mui-shadows-1: var(--fp-shadow-sm);
  --mui-shadows-2: var(--fp-shadow-sm);
  --mui-shadows-3: 0 1px 3px rgba(17, 24, 39, .05), 0 10px 24px rgba(17, 24, 39, .08);
  --mui-shadows-4: var(--fp-shadow-md);
  --mui-shadows-5: var(--fp-shadow-md);
  --mui-customShadows-xs: 0 1px 2px rgba(17, 24, 39, .06);
  --mui-customShadows-md: 0 2px 8px rgba(17, 24, 39, .08);
  --mui-customShadows-lg: var(--fp-shadow-md);
  --mui-customShadows-xl: var(--fp-shadow-md);

  /* 页面底色略柔一点 */
  --mui-palette-background-default: #F7F8FC;
}

/* ---------- 2. 全局排版与滚动 ---------- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

/* 数字等宽：额度、爆米花余额、计数等数字不再跳动 */
.MuiTypography-root {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.002em;
}

.MuiTypography-h2,
.MuiTypography-h3,
.MuiTypography-h4,
.MuiTypography-h5 {
  letter-spacing: -0.015em !important;
}

::selection {
  background: rgba(140, 87, 255, .18);
  color: inherit;
}

/* 细滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(70, 60, 100, .18);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(70, 60, 100, .32); background-clip: padding-box; }

/* ---------- 3. 卡片 / 面板 ---------- */
.MuiPaper-root {
  border-radius: 16px !important;
  transition: box-shadow .22s var(--fp-ease), transform .22s var(--fp-ease), border-color .22s var(--fp-ease) !important;
}

.MuiCard-root {
  border-radius: var(--fp-radius-card) !important;
  border: 1px solid var(--fp-line) !important;
  box-shadow: var(--fp-shadow-sm) !important;
  overflow: hidden;
  will-change: transform;
}

.MuiCard-root:hover {
  box-shadow: var(--fp-shadow-md) !important;
  transform: translateY(-2px);
}

.MuiCard-root img {
  transition: transform .45s var(--fp-ease), filter .3s var(--fp-ease) !important;
}

.MuiCard-root:hover img {
  transform: scale(1.03);
}

/* ---------- 4. 按钮 ---------- */
.MuiButton-root {
  border-radius: var(--fp-radius-btn) !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
  font-weight: 650 !important;
  transition: background-color .18s var(--fp-ease), box-shadow .18s var(--fp-ease),
              transform .18s var(--fp-ease), opacity .18s var(--fp-ease) !important;
}

.MuiButton-contained {
  box-shadow: 0 2px 6px rgba(17, 24, 39, .10) !important;
}

.MuiButton-contained:hover {
  box-shadow: 0 6px 18px rgba(17, 24, 39, .14) !important;
  transform: translateY(-1px);
}

.MuiButton-contained:active {
  transform: translateY(0) scale(.99);
  box-shadow: 0 2px 6px rgba(17, 24, 39, .10) !important;
}

/* 主按钮：品牌渐变 */
.MuiButton-containedPrimary {
  background-image: linear-gradient(135deg, var(--fp-brand-1) 0%, var(--fp-brand-2) 100%) !important;
  box-shadow: var(--fp-shadow-brand) !important;
  color: #fff !important;
}

.MuiButton-containedPrimary:hover {
  box-shadow: 0 10px 26px rgba(140, 87, 255, .42) !important;
  filter: brightness(1.04);
}

.MuiButton-outlined {
  border-color: rgba(17, 24, 39, .12) !important;
  background-color: rgba(255, 255, 255, .7) !important;
}

.MuiButton-outlined:hover {
  border-color: rgba(140, 87, 255, .45) !important;
  background-color: rgba(140, 87, 255, .06) !important;
}

.MuiButton-text:hover { background-color: rgba(140, 87, 255, .08) !important; }

.MuiIconButton-root {
  border-radius: 12px !important;
  transition: background-color .18s var(--fp-ease), transform .18s var(--fp-ease) !important;
}

.MuiIconButton-root:hover { transform: translateY(-1px); }

/* ---------- 5. Chip / 筛选标签 ---------- */
.MuiChip-root {
  border-radius: 999px !important;
  font-weight: 600 !important;
  transition: background-color .16s var(--fp-ease), color .16s var(--fp-ease),
              box-shadow .16s var(--fp-ease), border-color .16s var(--fp-ease) !important;
}

.MuiChip-outlined {
  border-color: var(--fp-line) !important;
  background-color: rgba(255, 255, 255, .8) !important;
}

.MuiChip-outlined:hover {
  border-color: rgba(140, 87, 255, .38) !important;
  background-color: rgba(140, 87, 255, .06) !important;
}

.MuiChip-filled {
  box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
}

/* ---------- 6. 输入框 ---------- */
.MuiOutlinedInput-root {
  border-radius: var(--fp-radius-btn) !important;
  background-color: #fff !important;
  transition: box-shadow .18s var(--fp-ease), border-color .18s var(--fp-ease) !important;
}

.MuiOutlinedInput-root.Mui-focused {
  box-shadow: 0 0 0 3px rgba(140, 87, 255, .14) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(140, 87, 255, .30) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: rgba(140, 87, 255, .55) !important;
}

/* ---------- 7. 弹层 / 菜单 / 提示 ---------- */
.MuiDialog-paper {
  border-radius: 22px !important;
  box-shadow: 0 24px 64px rgba(17, 24, 39, .18) !important;
  border: 1px solid var(--fp-line);
}

.MuiDialogTitle-root { letter-spacing: -0.01em; }

.MuiMenuItem-root {
  border-radius: 10px !important;
  margin: 2px 6px !important;
  transition: background-color .15s var(--fp-ease) !important;
}

.MuiMenu-paper, .MuiPopover-paper {
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .14) !important;
  border: 1px solid var(--fp-line);
}

.MuiTooltip-tooltip {
  border-radius: 10px !important;
  font-size: 12.5px !important;
}

.MuiAlert-root {
  border-radius: 14px !important;
  border: 1px solid rgba(17, 24, 39, .05);
}

.MuiSnackbarContent-root { border-radius: 14px !important; }

/* ---------- 8. 表格 ---------- */
.MuiTableCell-root {
  border-bottom-color: var(--fp-line) !important;
}

.MuiTableHead-root .MuiTableCell-root {
  font-weight: 700 !important;
  letter-spacing: .01em;
}

/* ---------- 9. Tabs / Toggle ---------- */
.MuiTab-root {
  border-radius: 10px !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

.MuiToggleButton-root { border-radius: 10px !important; }

/* ---------- 10. 自定义「入库」按钮：保留功能，融入新视觉 ---------- */
#fp-manual-avail-btn {
  background-image: linear-gradient(135deg, #8C57FF 0%, #5B7BFF 100%) !important;
  background-color: #8C57FF !important;
  color: #fff !important;
  font-weight: 650 !important;
  letter-spacing: .01em;
  box-shadow: 0 6px 16px rgba(140, 87, 255, .30) !important;
  transition: box-shadow .18s var(--fp-ease), transform .18s var(--fp-ease), filter .18s var(--fp-ease) !important;
}

#fp-manual-avail-btn:hover {
  box-shadow: 0 10px 24px rgba(140, 87, 255, .42) !important;
  transform: translateY(-1px);
  filter: brightness(1.05);
}

#fp-manual-avail-btn:active { transform: translateY(0) scale(.98); }

/* ---------- 11. 深色模式 ---------- */
html[data-mui-color-scheme="dark"] {
  --fp-line: rgba(255, 255, 255, .08);
  --fp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 18px rgba(0, 0, 0, .34);
  --fp-shadow-md: 0 2px 10px rgba(0, 0, 0, .38), 0 18px 40px rgba(0, 0, 0, .46);
  --mui-shadows-1: var(--fp-shadow-sm);
  --mui-shadows-2: var(--fp-shadow-sm);
  --mui-shadows-3: var(--fp-shadow-sm);
  --mui-shadows-4: var(--fp-shadow-md);
  --mui-shadows-5: var(--fp-shadow-md);
  --mui-palette-background-default: #0F1220;
}

html[data-mui-color-scheme="dark"] .MuiOutlinedInput-root {
  background-color: rgba(255, 255, 255, .04) !important;
}

html[data-mui-color-scheme="dark"] .MuiButton-outlined {
  background-color: rgba(255, 255, 255, .03) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

html[data-mui-color-scheme="dark"] .MuiChip-outlined {
  background-color: rgba(255, 255, 255, .04) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

/* ---------- 12. 无障碍：尊重减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .MuiCard-root:hover { transform: none; }
}