/**
 * 🍎 Mac Style Skin - 小说滚屏视频生成器
 * 独立皮肤文件：干净、高级、专业的 macOS 风格
 * 版本：v1.0
 * 引用方式：<link rel="stylesheet" href="skin-mac.css">
 */

/* ==========================================
   1. 全局基础 & 变量
   ========================================== */
:root {
  --mac-bg: #f5f5f7;
  --mac-panel-bg: #ffffff;
  --mac-border: rgba(0, 0, 0, 0.06);
  --mac-border-strong: rgba(0, 0, 0, 0.1);
  --mac-text: #1d1d1f;
  --mac-text-secondary: #6e6e73;
  --mac-text-tertiary: #86868b;
  --mac-accent: #007aff;
  --mac-accent-hover: #0056b3;
  --mac-accent-light: rgba(0, 122, 255, 0.08);
  --mac-green: #34c759;
  --mac-red: #ff3b30;
  --mac-orange: #ff9500;
  --mac-purple: #af52de;
  --mac-radius-sm: 6px;
  --mac-radius-md: 10px;
  --mac-radius-lg: 14px;
  --mac-radius-xl: 20px;
  --mac-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --mac-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --mac-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  --mac-transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ==========================================
   2. Body & App 布局
   ========================================== */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif !important;
  background: var(--mac-bg) !important;
  color: var(--mac-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app {
  background: var(--mac-bg) !important;
}

/* ==========================================
   3. 左侧面板
   ========================================== */
.panel {
  background: var(--mac-panel-bg) !important;
  border-right: 1px solid var(--mac-border) !important;
  padding: 24px 22px !important;
  box-shadow: 1px 0 8px rgba(0, 0, 0, 0.03) !important;
}

.panel::-webkit-scrollbar {
  width: 6px !important;
}

.panel::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12) !important;
  border-radius: 3px !important;
}

.panel::-webkit-scrollbar-track {
  background: transparent !important;
}

/* ==========================================
   4. 标题
   ========================================== */
h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--mac-text) !important;
  color: var(--mac-text) !important;
  letter-spacing: -0.3px;
}

.sub {
  font-size: 12px !important;
  color: var(--mac-text-tertiary) !important;
  margin-bottom: 20px !important;
  font-weight: 400;
}

/* ==========================================
   5. 区域标题 (.sec)
   ========================================== */
.sec {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--mac-text) !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.1px;
}

.sec::before {
  width: 3px !important;
  height: 14px !important;
  background: var(--mac-accent) !important;
  border-radius: 2px !important;
}

/* ==========================================
   6. 分隔线
   ========================================== */
.div {
  height: 1px !important;
  background: var(--mac-border) !important;
  margin: 16px 0 !important;
}

/* ==========================================
   7. 表单组 (.fg)
   ========================================== */
.fg label {
  font-size: 11px !important;
  color: var(--mac-text-secondary) !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
}

.fg input[type=text],
.fg input[type=number],
.fg input[type=password],
.fg select,
.fg textarea {
  width: 100%;
  padding: 8px 12px !important;
  background: var(--mac-bg) !important;
  border: 1px solid var(--mac-border-strong) !important;
  border-radius: var(--mac-radius-sm) !important;
  color: var(--mac-text) !important;
  font-size: 12px !important;
  outline: none !important;
  transition: border-color var(--mac-transition), box-shadow var(--mac-transition) !important;
  font-family: inherit !important;
}

.fg textarea {
  min-height: 140px !important;
  line-height: 1.6 !important;
  resize: vertical;
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  border-color: var(--mac-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12) !important;
  background: #ffffff !important;
}

/* ==========================================
   8. 按钮系统
   ========================================== */
.btn {
  padding: 8px 16px !important;
  border: none !important;
  border-radius: var(--mac-radius-sm) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer;
  font-family: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all var(--mac-transition) !important;
  letter-spacing: 0;
}

/* 主按钮 */
.btn-p {
  background: var(--mac-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 122, 255, 0.3) !important;
}

.btn-p:hover {
  background: var(--mac-accent-hover) !important;
  transform: translateY(-0.5px) !important;
  box-shadow: 0 3px 8px rgba(0, 122, 255, 0.25) !important;
}

.btn-p:active {
  transform: translateY(0) !important;
}

.btn-p:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* 次要按钮 */
.btn-s {
  background: var(--mac-bg) !important;
  color: var(--mac-text) !important;
  border: 1px solid var(--mac-border-strong) !important;
}

.btn-s:hover {
  background: #e8e8ed !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* 危险按钮 */
.btn-d {
  background: rgba(255, 59, 48, 0.08) !important;
  color: var(--mac-red) !important;
  border: 1px solid rgba(255, 59, 48, 0.2) !important;
}

.btn-d:hover {
  background: rgba(255, 59, 48, 0.12) !important;
}

/* 绿色按钮 */
.btn-g {
  background: var(--mac-green) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(52, 199, 89, 0.3) !important;
}

.btn-g:hover {
  background: #2db650 !important;
  transform: translateY(-0.5px) !important;
}

/* 按钮组 */
.btns {
  display: flex !important;
  gap: 8px !important;
  margin-top: 14px !important;
  flex-wrap: wrap !important;
}

/* ==========================================
   9. 平台预设按钮
   ========================================== */
.preset-bar {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
  flex-wrap: wrap !important;
}

.preset-btn {
  padding: 5px 12px !important;
  border-radius: var(--mac-radius-xl) !important;
  font-size: 11px !important;
  border: 1px solid var(--mac-border-strong) !important;
  background: var(--mac-panel-bg) !important;
  color: var(--mac-text-secondary) !important;
  cursor: pointer;
  transition: all var(--mac-transition) !important;
  font-weight: 500 !important;
}

.preset-btn:hover {
  background: var(--mac-accent-light) !important;
  border-color: var(--mac-accent) !important;
  color: var(--mac-accent) !important;
}

.preset-btn.active {
  background: var(--mac-accent) !important;
  border-color: var(--mac-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 122, 255, 0.2) !important;
}

/* ==========================================
   10. 颜色选择器
   ========================================== */
.ci input[type=color] {
  width: 28px !important;
  height: 28px !important;
  border: 2px solid var(--mac-border-strong) !important;
  border-radius: var(--mac-radius-sm) !important;
  cursor: pointer;
  padding: 2px !important;
}

.ci span {
  font-size: 10px !important;
  color: var(--mac-text-tertiary) !important;
}

/* ==========================================
   11. 素材库面板
   ========================================== */
.lib-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin-top: 10px !important;
  max-height: 130px !important;
  overflow-y: auto !important;
}

.lib-item {
  position: relative !important;
  border-radius: var(--mac-radius-sm) !important;
  overflow: hidden !important;
  cursor: pointer;
  border: 2px solid transparent !important;
  aspect-ratio: 9/16;
  transition: all var(--mac-transition) !important;
  box-shadow: var(--mac-shadow-sm) !important;
}

.lib-item:hover {
  transform: scale(1.03);
  box-shadow: var(--mac-shadow-md) !important;
}

.lib-item.selected {
  border-color: var(--mac-accent) !important;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2) !important;
}

.lib-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.lib-item .lib-rm {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  width: 16px !important;
  height: 16px !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--mac-transition) !important;
}

.lib-item:hover .lib-rm {
  opacity: 1;
}

/* 列表项（音乐/结尾视频） */
.lib-list {
  margin-top: 8px !important;
  max-height: 110px !important;
  overflow-y: auto !important;
}

.lib-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  border-radius: var(--mac-radius-sm) !important;
  font-size: 11px !important;
  color: var(--mac-text-secondary) !important;
  cursor: pointer;
  border: 1px solid transparent !important;
  margin-bottom: 4px !important;
  background: var(--mac-bg) !important;
  transition: all var(--mac-transition) !important;
}

.lib-list-item:hover {
  background: #eaeaef !important;
}

.lib-list-item.selected {
  border-color: var(--mac-accent) !important;
  background: var(--mac-accent-light) !important;
  color: var(--mac-text) !important;
}

.lib-list-item .lib-rm {
  margin-left: auto !important;
  color: var(--mac-red) !important;
  font-size: 10px !important;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--mac-transition) !important;
}

.lib-list-item:hover .lib-rm {
  opacity: 1;
}

/* 上传按钮 */
.upload-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 12px !important;
  background: var(--mac-panel-bg) !important;
  border: 1px dashed var(--mac-border-strong) !important;
  border-radius: var(--mac-radius-sm) !important;
  font-size: 11px !important;
  color: var(--mac-text-secondary) !important;
  cursor: pointer;
  position: relative !important;
  overflow: hidden !important;
  transition: all var(--mac-transition) !important;
}

.upload-btn:hover {
  border-color: var(--mac-accent) !important;
  color: var(--mac-accent) !important;
  background: var(--mac-accent-light) !important;
}

.upload-btn input {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer;
}

/* ==========================================
   12. 提示文字
   ========================================== */
.tip {
  font-size: 10px !important;
  color: var(--mac-text-tertiary) !important;
  margin-top: 4px !important;
}

/* ==========================================
   13. 预估面板
   ========================================== */
.est {
  margin-top: 10px !important;
  padding: 12px 14px !important;
  background: var(--mac-accent-light) !important;
  border: 1px solid rgba(0, 122, 255, 0.12) !important;
  border-radius: var(--mac-radius-md) !important;
  font-size: 12px !important;
}

.est .er {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
}

.est .er:last-child {
  margin: 0 !important;
}

.est .el {
  color: var(--mac-text-secondary) !important;
}

.est .ev {
  color: var(--mac-text) !important;
  font-weight: 600 !important;
}

.est .ev.hl {
  color: var(--mac-accent) !important;
}

/* ==========================================
   14. 进度条
   ========================================== */
.prog {
  width: 100% !important;
  height: 4px !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border-radius: 2px !important;
  margin-top: 10px !important;
  overflow: hidden !important;
}

.prog-fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--mac-accent), #5ac8fa) !important;
  transition: width 0.15s !important;
  border-radius: 2px !important;
}

/* ==========================================
   15. 右侧预览区域
   ========================================== */
.preview {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  position: relative !important;
  background: #f5f5f7 !important;
}

.pw {
  position: relative !important;
  border-radius: var(--mac-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--mac-shadow-lg) !important;
  border: 1px solid var(--mac-border) !important;
}

/* 状态条 */
.sb {
  position: absolute !important;
  top: 16px !important;
  right: 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: var(--mac-radius-xl) !important;
  font-size: 11px !important;
  color: var(--mac-text-secondary) !important;
  border: 1px solid var(--mac-border) !important;
  box-shadow: var(--mac-shadow-sm) !important;
}

.sd {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--mac-green) !important;
}

.sd.gen {
  background: var(--mac-orange) !important;
}

/* 生成进度覆盖 */
.gov {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  display: none !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  background: rgba(255, 149, 0, 0.9) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: var(--mac-radius-xl) !important;
  font-size: 10px !important;
  color: #fff !important;
}

.gov.active {
  display: flex !important;
}

/* ==========================================
   16. Checkbox
   ========================================== */
.cb {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 10px !important;
}

.cb input[type=checkbox] {
  width: 15px !important;
  height: 15px !important;
  accent-color: var(--mac-accent) !important;
  border-radius: 3px !important;
}

.cb label {
  font-size: 11px !important;
  color: var(--mac-text-secondary) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

/* ==========================================
   17. 模板栏
   ========================================== */
.tpl-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
  flex-wrap: wrap !important;
}

.tpl-bar select {
  flex: 1 !important;
  min-width: 100px !important;
  padding: 7px 10px !important;
  background: var(--mac-bg) !important;
  border: 1px solid var(--mac-border-strong) !important;
  border-radius: var(--mac-radius-sm) !important;
  color: var(--mac-text) !important;
  font-size: 11px !important;
  outline: none !important;
}

.tpl-bar .btn {
  padding: 6px 10px !important;
  font-size: 10px !important;
}

/* ==========================================
   18. 批量信息
   ========================================== */
.batch-info {
  margin-top: 8px !important;
  padding: 8px 12px !important;
  background: rgba(52, 199, 89, 0.06) !important;
  border: 1px solid rgba(52, 199, 89, 0.15) !important;
  border-radius: var(--mac-radius-sm) !important;
  font-size: 11px !important;
  color: var(--mac-green) !important;
}

/* ==========================================
   19. TXT 分段
   ========================================== */
.txt-split {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

.txt-split select,
.txt-split input {
  padding: 6px 9px !important;
  background: var(--mac-bg) !important;
  border: 1px solid var(--mac-border-strong) !important;
  border-radius: var(--mac-radius-sm) !important;
  color: var(--mac-text) !important;
  font-size: 11px !important;
  outline: none !important;
}

.txt-split input {
  width: 65px !important;
}

/* 分段列表 */
.seg-list {
  margin-top: 8px !important;
  max-height: 100px !important;
  overflow-y: auto !important;
}

.seg-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 8px !important;
  border-radius: var(--mac-radius-sm) !important;
  font-size: 10px !important;
  color: var(--mac-text-secondary) !important;
  cursor: pointer;
  border: 1px solid transparent !important;
  margin-bottom: 3px !important;
  background: var(--mac-bg) !important;
  transition: all var(--mac-transition) !important;
}

.seg-item:hover {
  background: #e8e8ed !important;
}

.seg-item.active {
  border-color: var(--mac-accent) !important;
  background: var(--mac-accent-light) !important;
  color: var(--mac-accent) !important;
}

/* ==========================================
   20. 动画优化
   ========================================== */
@keyframes p {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ==========================================
   21. 滚动条通用样式
   ========================================== */
.lib-grid::-webkit-scrollbar,
.lib-list::-webkit-scrollbar,
.seg-list::-webkit-scrollbar {
  width: 4px;
}

.lib-grid::-webkit-scrollbar-thumb,
.lib-list::-webkit-scrollbar-thumb,
.seg-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.lib-grid::-webkit-scrollbar-track,
.lib-list::-webkit-scrollbar-track,
.seg-list::-webkit-scrollbar-track {
  background: transparent;
}

/* ==========================================
   22. 微交互增强
   ========================================== */
.fg input,
.fg select,
.fg textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.lib-item,
.lib-list-item,
.preset-btn,
.btn {
  transition: all var(--mac-transition) !important;
}

/* ==========================================
   23. Grid 布局微调
   ========================================== */
.r2 {
  gap: 10px !important;
}

.r3 {
  gap: 10px !important;
}

.r4 {
  gap: 10px !important;
}

/* ==========================================
   24. 格式提示优化
   ========================================== */
#fmtTip {
  color: var(--mac-text-tertiary) !important;
}

/* ==========================================
   25. 响应式微调
   ========================================== */
@media (max-width: 1200px) {
  .panel {
    width: 420px !important;
    min-width: 420px !important;
    padding: 18px !important;
  }
}