/* ============================================================
   PicBase Theme — "Organic Clay"
   Organic Design × Claymorphism 深度融合
   流动感 · 呼吸感 · 人本主义 · 多端兼容
   ============================================================ */

/* ============ 1. CSS 变量系统：黏土风基座 ============ */
:root {
  /* — 色彩：有机调色板 — */
  --bg-base: #F5F0EB;
  --bg-warm: #FBF7F2;
  --surface: #FFFFFF;
  --surface-raised: #FEFCF9;
  --surface-sunken: #EDE8E1;
  --ink: #2C2825;
  --ink-secondary: #6B6560;
  --ink-muted: #9B9590;
  --ink-ghost: #C5BFB8;

  /* 主题色 */
  --primary: #6B8F7B;
  --primary-soft: #8FB5A0;
  --primary-pale: #D4E6DC;
  --primary-glow: rgba(107,143,123,.15);

  --accent: #C07B5A;
  --accent-soft: #D4997A;
  --accent-pale: #F0D5C4;

  --violet: #8B7EB8;
  --violet-soft: #A99FCC;
  --violet-pale: #E2DDEE;

  --sky: #6BA0B8;
  --sky-soft: #8FBDD0;
  --sky-pale: #D0E8F0;

  --rose: #B87B8A;
  --rose-soft: #D09FAA;
  --rose-pale: #EED4DA;

  /* — 黏土阴影系统（双层：高光+暗影）— */
  --clay-shadow:
    6px 6px 12px rgba(44,40,37,.08),
    -3px -3px 8px rgba(255,255,255,.9);
  --clay-shadow-md:
    8px 8px 20px rgba(44,40,37,.10),
    -4px -4px 12px rgba(255,255,255,.95);
  --clay-shadow-lg:
    12px 12px 32px rgba(44,40,37,.12),
    -6px -6px 18px rgba(255,255,255,.98);
  --clay-inset:
    inset 3px 3px 6px rgba(44,40,37,.08),
    inset -2px -2px 4px rgba(255,255,255,.7);
  --clay-glow:
    0 0 0 0 transparent,
    6px 6px 12px rgba(107,143,123,.10),
    -3px -3px 8px rgba(255,255,255,.9);

  /* — Squircle 圆角（连续曲率）— */
  --squircle-sm: 12px;
  --squircle: 20px;
  --squircle-lg: 28px;
  --squircle-xl: 36px;
  --squircle-pill: 999px;

  /* — 动画 — */
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-damping: cubic-bezier(.25,.1,.25,1);
  --duration-fast: 0.2s;
  --duration: 0.35s;
  --duration-slow: 0.6s;

  /* — 玻璃 — */
  --glass: blur(20px) saturate(1.4);
  --glass-bg: rgba(255,255,255,.55);
  --glass-border: rgba(255,255,255,.5);

  /* — 排版 — */
  --font-serif: 'Georgia', 'Times New Roman', 'Songti SC', 'Noto Serif SC', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --leading-tight: 1.3;
  --leading: 1.6;
  --leading-relaxed: 1.8;
  --measure: 65ch;
}

/* — 深色模式：深邃蓝紫 — */
.dark {
  --bg-base: #0E0D12;
  --bg-warm: #131218;
  --surface: #1A1920;
  --surface-raised: #22212A;
  --surface-sunken: #0A090E;
  --ink: #E8E4E0;
  --ink-secondary: #A8A2A0;
  --ink-muted: #706C68;
  --ink-ghost: #484440;

  --primary: #8FB5A0;
  --primary-soft: #6B8F7B;
  --primary-pale: rgba(107,143,123,.12);
  --primary-glow: rgba(143,181,160,.10);

  --accent: #D4997A;
  --accent-soft: #C07B5A;
  --accent-pale: rgba(192,123,90,.10);

  --violet: #A99FCC;
  --violet-soft: #8B7EB8;
  --violet-pale: rgba(139,126,184,.10);

  --sky: #8FBDD0;
  --sky-soft: #6BA0B8;
  --sky-pale: rgba(107,160,184,.10);

  --rose: #D09FAA;
  --rose-soft: #B87B8A;
  --rose-pale: rgba(184,123,138,.10);

  --clay-shadow:
    6px 6px 14px rgba(0,0,0,.25),
    -3px -3px 8px rgba(255,255,255,.03);
  --clay-shadow-md:
    8px 8px 22px rgba(0,0,0,.30),
    -4px -4px 12px rgba(255,255,255,.04);
  --clay-shadow-lg:
    12px 12px 36px rgba(0,0,0,.35),
    -6px -6px 18px rgba(255,255,255,.05);
  --clay-inset:
    inset 3px 3px 8px rgba(0,0,0,.25),
    inset -2px -2px 4px rgba(255,255,255,.04);
  --clay-glow:
    0 0 0 0 transparent,
    6px 6px 14px rgba(143,181,160,.08),
    -3px -3px 8px rgba(255,255,255,.03);

  --glass-bg: rgba(26,25,32,.65);
  --glass-border: rgba(255,255,255,.06);
}

/* ============ 2. 全局基础：排版 + 渐变网格背景 ============ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--leading);
}

/* 弥散光晕背景 — Gradient Mesh */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 700px at 15% 20%, rgba(107,143,123,.08) 0%, transparent 70%),
    radial-gradient(ellipse 700px 600px at 85% 15%, rgba(192,123,90,.06) 0%, transparent 70%),
    radial-gradient(ellipse 600px 500px at 50% 60%, rgba(139,126,184,.05) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 25% 80%, rgba(107,160,184,.06) 0%, transparent 70%),
    radial-gradient(ellipse 400px 350px at 75% 70%, rgba(184,123,138,.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  animation: mesh-drift 35s ease-in-out infinite alternate;
}
.dark body::before {
  background:
    radial-gradient(ellipse 900px 700px at 15% 20%, rgba(143,181,160,.06) 0%, transparent 70%),
    radial-gradient(ellipse 700px 600px at 85% 15%, rgba(212,153,122,.04) 0%, transparent 70%),
    radial-gradient(ellipse 600px 500px at 50% 60%, rgba(169,159,204,.04) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 25% 80%, rgba(143,189,208,.04) 0%, transparent 70%),
    radial-gradient(ellipse 400px 350px at 75% 70%, rgba(208,159,170,.03) 0%, transparent 70%);
}
@keyframes mesh-drift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(1%,-.5%) scale(1.02); }
  100% { transform: translate(-.5%,1%) scale(.99); }
}

/* 隐藏旧背景图 */
#bg1, #bg2, .background-image1, .background-image2 {
  display: none !important; opacity: 0 !important; visibility: hidden !important;
}

/* 标题：衬线体，稳重固定 */
h1, h2, h3, .upload-main-title, .login-title, .main-title {
  font-family: var(--font-serif) !important;
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  text-shadow: none !important;
}

/* 描述文本：控制 measure 和行高 */
p, .el-text, .description {
  max-width: var(--measure);
  line-height: var(--leading-relaxed);
  color: var(--ink-secondary);
}

/* ============ 3. 胶囊导航栏 ============ */
.admin-header-content {
  position: fixed !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  min-width: 60%;
  max-width: 90%;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass) !important;
  -webkit-backdrop-filter: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--squircle-pill) !important;
  box-shadow: var(--clay-shadow-md) !important;
  padding: 8px 24px !important;
  z-index: 1000 !important;
  transition: all var(--duration) var(--ease-damping) !important;
}
.admin-header-content:hover {
  box-shadow: var(--clay-shadow-lg) !important;
}

/* ============ 4. 黏土卡片系统 ============ */
.upload-list-card, .upload-list-item, .imgcard, .admin-dashboard-imgcard,
.stats-card, .admin-dashborad-stats, .search-card, .admin-dashboard-search-card,
.radio-card, .setting-item, .dialog-section {
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--squircle) !important;
  box-shadow: var(--clay-shadow) !important;
  transition: all var(--duration) var(--ease-out-expo) !important;
  position: relative;
}

/* 悬浮：微膨胀 + 阴影加深 */
.upload-list-card:hover, .upload-list-item:hover,
.imgcard:hover, .admin-dashboard-imgcard:hover {
  box-shadow: var(--clay-shadow-lg) !important;
  transform: translateY(-4px) scale(1.01);
}

/* 统计卡片：左侧彩色条 */
.stats-card, .admin-dashborad-stats {
  border-left: 4px solid var(--primary) !important;
}

/* 图片卡片：顶部彩色条 */
.imgcard, .admin-dashboard-imgcard {
  border-top: 4px solid var(--accent) !important;
}

/* 搜索卡片：底部彩色条 */
.search-card, .admin-dashboard-search-card {
  border-bottom: 4px solid var(--violet) !important;
}

/* 操作按钮组：桌面端默认隐藏，悬浮浮现 */
.imgcard .action-btn,
.admin-dashboard-imgcard .action-btn,
.upload-list-item .action-btn {
  opacity: 0;
  transform: translateY(6px);
  transition: all var(--duration) var(--ease-spring) !important;
}
.imgcard:hover .action-btn,
.admin-dashboard-imgcard:hover .action-btn,
.upload-list-item:hover .action-btn {
  opacity: 1;
  transform: translateY(0);
}

/* ============ 5. 上传区：有机生命体 ============ */
.el-upload-dragger {
  border: none !important;
  border-radius: var(--squircle-lg) !important;
  background: var(--surface-raised) !important;
  box-shadow: var(--clay-inset) !important;
  position: relative;
  overflow: hidden;
  transition: all var(--duration-slow) var(--ease-spring) !important;
}

/* 液体渐变边框 */
.el-upload-dragger::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--squircle-lg);
  padding: 2px;
  background: conic-gradient(from var(--liquid-angle, 0deg),
    var(--primary), var(--sky), var(--violet), var(--accent), var(--rose), var(--primary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .20;
  transition: opacity var(--duration) ease;
  animation: liquid-rotate 12s linear infinite;
}
@keyframes liquid-rotate {
  to { --liquid-angle: 360deg; }
}
@property --liquid-angle {
  syntax: '<angle>'; initial-value: 0deg; inherits: false;
}

/* Hover：弹性膨胀 */
.el-upload-dragger:hover {
  box-shadow: var(--clay-shadow-md) !important;
  transform: scale(1.015);
}
.el-upload-dragger:hover::before {
  opacity: .50;
}

/* Drag over：强烈弹性反馈 */
.el-upload-dragger.is-dragover,
.el-upload-dragger:active {
  transform: scale(1.03);
  box-shadow: var(--clay-shadow-lg) !important;
}
.el-upload-dragger.is-dragover::before,
.el-upload-dragger:active::before {
  opacity: .70;
}

/* ============ 6. 按钮：黏土质感 ============ */
.el-button {
  border-radius: var(--squircle-sm) !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
  border: none !important;
  transition: all var(--duration-fast) var(--ease-spring) !important;
}

.el-button--primary {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow:
    4px 4px 10px rgba(107,143,123,.20),
    -2px -2px 6px rgba(255,255,255,.6) !important;
}
.el-button--primary:hover {
  background: var(--primary-soft) !important;
  box-shadow:
    6px 6px 14px rgba(107,143,123,.25),
    -3px -3px 8px rgba(255,255,255,.7) !important;
  transform: translateY(-2px) scale(1.02);
}
.el-button--primary:active {
  box-shadow: var(--clay-inset) !important;
  transform: translateY(0) scale(.98);
}

.el-button--danger {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 4px 4px 10px rgba(192,123,90,.20), -2px -2px 6px rgba(255,255,255,.6) !important;
}
.el-button--danger:hover {
  background: var(--accent-soft) !important;
  transform: translateY(-2px) scale(1.02);
}

.el-button--success {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 4px 4px 10px rgba(107,143,123,.20), -2px -2px 6px rgba(255,255,255,.6) !important;
}

.el-button--warning {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 4px 4px 10px rgba(192,123,90,.20), -2px -2px 6px rgba(255,255,255,.6) !important;
}

.el-button--info {
  background: var(--violet) !important;
  color: #fff !important;
  box-shadow: 4px 4px 10px rgba(139,126,184,.20), -2px -2px 6px rgba(255,255,255,.6) !important;
}

/* ============ 7. 输入框：黏土内凹 ============ */
.el-input__wrapper {
  background: var(--surface-sunken) !important;
  border-radius: var(--squircle-sm) !important;
  box-shadow: var(--clay-inset) !important;
  border: none !important;
  transition: all var(--duration) var(--ease-damping) !important;
}
.el-input__wrapper:hover {
  box-shadow: var(--clay-inset), 0 0 0 2px var(--primary-glow) !important;
}
.el-input__wrapper.is-focus {
  box-shadow: var(--clay-inset), 0 0 0 2px var(--primary) !important;
}

.el-textarea__inner {
  background: var(--surface-sunken) !important;
  border-radius: var(--squircle-sm) !important;
  border: none !important;
  box-shadow: var(--clay-inset) !important;
  transition: all var(--duration) var(--ease-damping) !important;
}
.el-textarea__inner:focus {
  box-shadow: var(--clay-inset), 0 0 0 2px var(--primary) !important;
}

/* ============ 8. 登录：有机容器 ============ */
.login-container {
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--squircle-xl) !important;
  box-shadow: var(--clay-shadow-lg) !important;
  backdrop-filter: blur(24px) saturate(1.4);
  position: relative;
  overflow: hidden;
  transition: all var(--duration-slow) var(--ease-out-expo) !important;
}
.login-container:hover {
  box-shadow:
    16px 16px 40px rgba(44,40,37,.14),
    -8px -8px 24px rgba(255,255,255,.98) !important;
  transform: translateY(-4px);
}

/* 登录按钮 */
.login-submit-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-soft)) !important;
  border: none !important;
  border-radius: var(--squircle) !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  box-shadow: 4px 4px 12px rgba(107,143,123,.25), -2px -2px 6px rgba(255,255,255,.6) !important;
  transition: all var(--duration) var(--ease-spring) !important;
}
.login-submit-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 8px 8px 20px rgba(107,143,123,.30), -4px -4px 10px rgba(255,255,255,.7) !important;
}
.login-submit-btn:active {
  box-shadow: var(--clay-inset) !important;
  transform: translateY(0) scale(.98);
}

/* ============ 9. 浮动按钮 ============ */
.floating-btn {
  background: linear-gradient(135deg, var(--accent), var(--rose)) !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: 6px 6px 16px rgba(192,123,90,.30), -3px -3px 8px rgba(255,255,255,.6) !important;
  transition: all var(--duration) var(--ease-spring) !important;
}
.floating-btn:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 10px 10px 24px rgba(192,123,90,.35), -5px -5px 12px rgba(255,255,255,.7) !important;
}

/* ============ 10. 标签 ============ */
.el-tag {
  border-radius: var(--squircle-sm) !important;
  border: none !important;
  font-weight: 500;
  box-shadow: 2px 2px 6px rgba(44,40,37,.06), -1px -1px 4px rgba(255,255,255,.8) !important;
}
.el-tag--primary { background: var(--primary-pale) !important; color: var(--primary) !important; }
.el-tag--success { background: var(--primary-pale) !important; color: var(--primary) !important; }
.el-tag--warning { background: var(--accent-pale) !important; color: var(--accent) !important; }
.el-tag--danger { background: var(--rose-pale) !important; color: var(--rose) !important; }
.el-tag--info { background: var(--violet-pale) !important; color: var(--violet) !important; }

/* ============ 11. 对话框 ============ */
.el-dialog, .el-message-box {
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--squircle-lg) !important;
  box-shadow: var(--clay-shadow-lg) !important;
  backdrop-filter: blur(24px);
}
.dialog-section {
  background: var(--surface-sunken) !important;
  border: none !important;
  border-radius: var(--squircle) !important;
  box-shadow: var(--clay-inset) !important;
}

/* ============ 12. 表格 ============ */
.el-table {
  border-radius: var(--squircle) !important;
  overflow: hidden;
  box-shadow: var(--clay-inset) !important;
}
.el-table th.el-table__cell {
  background: var(--surface-sunken) !important;
  font-weight: 600;
}
.el-table .el-table__row:hover > td.el-table__cell {
  background: var(--primary-pale) !important;
}

/* ============ 13. 工具栏 ============ */
.toolbar-button, .action-btn {
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--squircle-sm) !important;
  box-shadow: var(--clay-shadow) !important;
  transition: all var(--duration-fast) var(--ease-spring) !important;
}
.toolbar-button:hover, .action-btn:hover {
  box-shadow: var(--clay-shadow-md) !important;
  transform: translateY(-2px) scale(1.02);
}
.toolbar-button:active, .action-btn:active {
  box-shadow: var(--clay-inset) !important;
  transform: translateY(0) scale(.98);
}

/* ============ 14. 下拉菜单 / 通知 / 提示 ============ */
.el-message, .el-dropdown-menu, .el-select-dropdown, .el-notification, .el-tooltip__popper {
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--squircle) !important;
  box-shadow: var(--clay-shadow-md) !important;
  backdrop-filter: var(--glass);
}
.el-dropdown-menu__item, .el-select-dropdown__item {
  border-radius: var(--squircle-sm) !important;
  transition: all var(--duration-fast) var(--ease-damping) !important;
}
.el-dropdown-menu__item:hover, .el-select-dropdown__item:hover {
  background: var(--primary-pale) !important;
  color: var(--primary) !important;
}

/* ============ 15. 进度 / 分页 / 开关 ============ */
.el-progress-bar__inner {
  background: linear-gradient(90deg, var(--primary), var(--sky)) !important;
  border-radius: var(--squircle-sm) !important;
}
.el-progress-bar__outer { border-radius: var(--squircle-sm) !important; }
.el-slider__bar { background: linear-gradient(90deg, var(--primary), var(--sky)) !important; }
.el-pagination .el-pager li.is-active {
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: var(--squircle-sm) !important;
}
.el-switch.is-checked .el-switch__core {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* ============ 16. 警告 ============ */
.el-alert {
  border-radius: var(--squircle) !important;
  border: none !important;
  box-shadow: var(--clay-shadow) !important;
}
.el-alert--success { background: var(--primary-pale) !important; border-left: 4px solid var(--primary) !important; }
.el-alert--warning { background: var(--accent-pale) !important; border-left: 4px solid var(--accent) !important; }
.el-alert--error { background: var(--rose-pale) !important; border-left: 4px solid var(--rose) !important; }
.el-alert--info { background: var(--violet-pale) !important; border-left: 4px solid var(--violet) !important; }

/* ============ 17. 滚动条 ============ */
::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
  background: var(--ink-ghost) !important;
  border-radius: var(--squircle-pill) !important;
}

/* ============ 18. 杂项 ============ */
.channel-brand-telegram { color: #229ED9 !important; }
.channel-brand-cfr2 { color: #F38020 !important; }
.channel-brand-s3 { color: #FF9900 !important; }
.channel-brand-discord { color: #5865F2 !important; }
.channel-brand-huggingface { color: #FF9D00 !important; }
.channel-brand-webdav { color: var(--primary) !important; }

.page-footer, .footer-name {
  background: transparent !important;
  border-top: 1px solid var(--ink-ghost) !important;
  color: var(--ink-muted) !important;
}

.el-avatar {
  border-radius: 50% !important;
  box-shadow: var(--clay-shadow) !important;
  border: 3px solid var(--surface) !important;
}
.upload-icon, .el-icon--upload { color: var(--primary) !important; }

.el-loading-mask { background: rgba(245,240,235,.85) !important; }
.el-loading-spinner .circular .path { stroke: var(--primary) !important; }
.el-image-viewer__wrapper { background: rgba(10,9,14,.92) !important; }
.el-skeleton { --el-skeleton-color: var(--surface-sunken); --el-skeleton-to-color: var(--ink-ghost); }

/* Tabs */
.el-tabs__item.is-active { color: var(--primary) !important; font-weight: 600; }
.el-tabs__active-bar { background: var(--primary) !important; height: 3px !important; border-radius: 2px !important; }

/* Badge */
.el-badge__content {
  background: var(--accent) !important;
  border: none !important;
  font-weight: 600;
  box-shadow: 2px 2px 6px rgba(192,123,90,.20) !important;
}

/* Radio */
.radio-card.is-checked {
  background: var(--primary-pale) !important;
  border-left: 4px solid var(--primary) !important;
}

/* Setting */
.setting-item:hover {
  box-shadow: var(--clay-shadow-md) !important;
  transform: translateY(-2px);
}

/* File name */
.file-name, .file-name-tag {
  background: var(--surface-sunken) !important;
  border: none !important;
  border-radius: var(--squircle-sm) !important;
  box-shadow: var(--clay-inset) !important;
  color: var(--ink) !important;
}

/* ============ 19. 移动端适配 ============ */
@media (max-width: 768px) {
  .admin-header-content {
    min-width: 90% !important;
    padding: 6px 16px !important;
  }
  .login-container {
    border-radius: var(--squircle-lg) !important;
    margin: 12px;
  }
  .el-dialog {
    border-radius: var(--squircle-lg) !important;
    margin: 12px !important;
  }
  .upload-list-item, .imgcard, .admin-dashboard-imgcard {
    border-radius: var(--squircle) !important;
  }
  /* 移动端：操作按钮固定显示 */
  .imgcard .action-btn,
  .admin-dashboard-imgcard .action-btn,
  .upload-list-item .action-btn {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============ 20. 打印 ============ */
@media print {
  body { background: #fff !important; }
  body::before { display: none !important; }
  .el-card, .el-dialog { box-shadow: none !important; border: 1px solid #ddd !important; }
  .admin-header-content { position: static !important; transform: none !important; }
}