/**
 * LUT-AI 移动端测试主题1 - 极简主义风格
 * 版本: v1.0-test1
 * 日期: 2026-05-21
 *
 * 设计风格: 纯白背景 + 极简主义 + 低饱和度强调色
 * 说明: 此文件仅在移动端（≤768px）生效，完全不影响PC端样式
 * 重要: 保持所有现有移动端功能和布局不变，仅更新视觉样式
 */

/* ============================================
   CSS 变量定义 - 极简主义配色方案
   ============================================ */

:root {
  /* 主色调 - 柔蓝 (Soft Blue) */
  --test1-primary: #3B82F6;
  --test1-primary-light: #60A5FA;
  --test1-primary-dark: #2563EB;
  --test1-secondary: #3B82F6;

  /* 强调色 - 同主色 */
  --test1-accent: #3B82F6;
  --test1-accent-hover: #2563EB;
  --test1-accent-light: rgba(59, 130, 246, 0.1);

  /* 背景色 - 纯白和极浅灰 */
  --test1-bg-primary: #FFFFFF;
  --test1-bg-secondary: #F5F5F5;
  --test1-bg-tertiary: #FAFAFA;

  /* 文字颜色 - 黑色和深灰 */
  --test1-text-primary: #111111;
  --test1-text-secondary: #666666;
  --test1-text-muted: #999999;

  /* 边框颜色 */
  --test1-border-light: #E5E5E5;
  --test1-border-medium: #D4D4D4;
  --test1-border-dark: #A3A3A3;

  /* 极轻微阴影 */
  --test1-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.05);
  --test1-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.08);
  --test1-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1);

  /* 触摸目标最小尺寸 */
  --test1-touch-min: 44px;

  /* 间距系统 - 8pt网格 */
  --test1-space-xs: 8px;
  --test1-space-sm: 12px;
  --test1-space-md: 16px;
  --test1-space-lg: 24px;
  --test1-space-xl: 32px;
  --test1-space-2xl: 48px;

  /* 圆角系统 - 极简限制 */
  --test1-radius-none: 0px;
  --test1-radius-sm: 4px;
  --test1-radius-md: 8px;
  --test1-radius-lg: 16px;
  --test1-radius-full: 9999px;

  /* 动画时长 - 简洁快速 */
  --test1-transition-fast: 150ms;
  --test1-transition-normal: 200ms;
  --test1-transition-slow: 300ms;
  --test1-transition-ease: ease;

  /* 字体 - 系统默认 */
  --test1-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Roboto', 'Helvetica Neue', sans-serif;
}

/* ============================================
   移动端基础样式（≤768px）
   ============================================ */

@media (max-width: 768px) {

  /* 强制覆盖所有可能的深色背景 - 仅在test1-theme激活时 */
  body.test1-theme {
    background-color: var(--test1-bg-primary) !important;
  }

  body.test1-theme *:not(.preview-container):not(img):not(canvas):not(svg):not(path):not(circle):not(line):not(polyline):not(polygon) {
    background-color: var(--test1-bg-primary) !important;
  }

  /* 图片预览区保持原样 */
  body.test1-theme .preview-container,
  body.test1-theme .preview-container * {
    background-color: transparent !important;
  }

  body.test1-theme img,
  body.test1-theme canvas {
    background-color: transparent !important;
  }

  /* 全局字体和背景 */
  body.test1-theme {
    font-family: var(--test1-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--test1-bg-primary) !important;
    position: relative;
    overflow-x: hidden;
    color: var(--test1-text-primary);
  }

  /* 确保主容器也是白色 */
  body.test1-theme .app-layout,
  body.test1-theme .main-content,
  body.test1-theme .content-area {
    background: var(--test1-bg-primary) !important;
  }

  /* 确保所有主要区域都是白色背景 */
  body.test1-theme > div,
  body.test1-theme .container {
    background: var(--test1-bg-primary) !important;
  }

  /* 覆盖可能的深色背景 */
  body.test1-theme .preview-area,
  body.test1-theme .editor-area,
  body.test1-theme .workspace {
    background: var(--test1-bg-primary) !important;
  }

  /* 确保所有文字可见 */
  body.test1-theme * {
    color: var(--test1-text-primary);
  }

  body.test1-theme h1,
  body.test1-theme h2,
  body.test1-theme h3,
  body.test1-theme h4,
  body.test1-theme h5,
  body.test1-theme h6 {
    color: var(--test1-text-primary) !important;
  }

  body.test1-theme p,
  body.test1-theme span,
  body.test1-theme div {
    color: inherit;
  }

  body.test1-theme label {
    color: var(--test1-text-primary) !important;
  }

  /* ============================================
     移动端底部导航栏 - 极简扁平
     ============================================ */

  body.test1-theme .mobile-bottom-nav {
    background: var(--test1-bg-primary) !important;
    border-top: 1px solid var(--test1-border-light);
    box-shadow: none;
  }

  body.test1-theme .mobile-bottom-nav .nav-item {
    min-width: var(--test1-touch-min);
    min-height: var(--test1-touch-min);
    border-radius: 0;
    transition: all var(--test1-transition-normal) var(--test1-transition-ease);
    color: var(--test1-text-secondary) !important;
    background: transparent;
  }

  body.test1-theme .mobile-bottom-nav .nav-item.active {
    background: transparent;
    color: var(--test1-primary) !important;
    box-shadow: none;
    transform: none;
    border: none;
  }

  body.test1-theme .mobile-bottom-nav .nav-item span {
    color: inherit !important;
  }

  body.test1-theme .mobile-bottom-nav .nav-item svg {
    stroke: currentColor !important;
  }

  body.test1-theme .mobile-bottom-nav .nav-item:active {
    opacity: 0.6;
    transform: none;
  }

  /* ============================================
     浮动工具栏 - 极简扁平
     ============================================ */

  body.test1-theme .floating-toolbar {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  body.test1-theme .toolbar-btn {
    min-width: var(--test1-touch-min);
    min-height: var(--test1-touch-min);
    background: transparent;
    border-radius: var(--test1-radius-sm);
    border: 1px solid var(--test1-border-light);
    box-shadow: none;
    transition: all var(--test1-transition-normal) var(--test1-transition-ease);
    color: var(--test1-text-primary);
  }

  body.test1-theme .toolbar-btn:active {
    opacity: 0.6;
    background: var(--test1-bg-secondary);
  }

  /* ============================================
     浮动上传按钮 - 极简扁平
     ============================================ */

  body.test1-theme .floating-upload-btn {
    background: var(--test1-bg-primary);
    border: 1px solid var(--test1-border-light);
    border-radius: var(--test1-radius-md);
    box-shadow: var(--test1-shadow-subtle);
    transition: all var(--test1-transition-normal) var(--test1-transition-ease);
    min-height: 120px;
    position: relative;
    overflow: hidden;
  }

  body.test1-theme .floating-upload-btn::before {
    display: none;
  }

  body.test1-theme .floating-upload-btn:active {
    opacity: 0.8;
    box-shadow: var(--test1-shadow-light);
  }

  body.test1-theme .floating-upload-btn svg {
    filter: none;
    position: relative;
    z-index: 1;
  }

  /* ============================================
     浮动滤镜容器 - 极简扁平
     ============================================ */

  body.test1-theme .floating-filter-container {
    background: var(--test1-bg-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--test1-border-light);
    border-radius: var(--test1-radius-md);
    box-shadow: var(--test1-shadow-subtle);
  }

  body.test1-theme .floating-filter-bar {
    background: var(--test1-bg-secondary);
    border-radius: var(--test1-radius-sm);
    padding: var(--test1-space-sm);
    box-shadow: none;
    border: none;
  }

  body.test1-theme .filter-arrow-btn {
    min-width: var(--test1-touch-min);
    min-height: var(--test1-touch-min);
    background: var(--test1-bg-primary);
    border-radius: var(--test1-radius-sm);
    border: 1px solid var(--test1-border-light);
    color: var(--test1-text-primary);
    transition: all var(--test1-transition-normal) var(--test1-transition-ease);
  }

  body.test1-theme .filter-arrow-btn:active {
    opacity: 0.6;
    background: var(--test1-bg-secondary);
  }

  /* ============================================
     移动端全屏查看器 - 纯白背景
     ============================================ */

  body.test1-theme .mobile-fullscreen-viewer {
    background: var(--test1-bg-primary);
  }

  body.test1-theme .fullscreen-top-bar {
    background: var(--test1-bg-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--test1-border-light);
    box-shadow: none;
  }

  body.test1-theme .fullscreen-close-btn,
  body.test1-theme .fullscreen-compare-btn {
    min-width: var(--test1-touch-min);
    min-height: var(--test1-touch-min);
    background: transparent;
    border-radius: var(--test1-radius-sm);
    border: 1px solid var(--test1-border-light);
    box-shadow: none;
    transition: all var(--test1-transition-normal) var(--test1-transition-ease);
    color: var(--test1-text-primary);
  }

  body.test1-theme .fullscreen-close-btn:active,
  body.test1-theme .fullscreen-compare-btn:active {
    opacity: 0.6;
    background: var(--test1-bg-secondary);
  }

  body.test1-theme .fullscreen-action-btn {
    min-width: 80px;
    min-height: var(--test1-touch-min);
    background: transparent;
    border: 1px solid var(--test1-border-light);
    border-radius: var(--test1-radius-sm);
    box-shadow: none;
    transition: all var(--test1-transition-normal) var(--test1-transition-ease);
    color: var(--test1-text-secondary);
    font-weight: 500;
  }

  body.test1-theme .fullscreen-action-btn.primary {
    color: var(--test1-primary);
    border-color: var(--test1-primary);
  }

  body.test1-theme .fullscreen-action-btn:active {
    opacity: 0.6;
    background: var(--test1-bg-secondary);
  }

  /* ============================================
     移动端抽屉 - 纯白背景
     ============================================ */

  body.test1-theme .mobile-filter-drawer,
  body.test1-theme .mobile-adjust-drawer {
    background: var(--test1-bg-primary);
    border-top-left-radius: var(--test1-radius-lg);
    border-top-right-radius: var(--test1-radius-lg);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  }

  body.test1-theme .drawer-header {
    background: var(--test1-bg-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--test1-border-light);
    padding: var(--test1-space-md);
  }

  body.test1-theme .drawer-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--test1-text-primary);
    text-shadow: none;
  }

  body.test1-theme .drawer-close {
    min-width: var(--test1-touch-min);
    min-height: var(--test1-touch-min);
    background: transparent;
    border-radius: var(--test1-radius-sm);
    border: 1px solid var(--test1-border-light);
    box-shadow: none;
    transition: all var(--test1-transition-normal) var(--test1-transition-ease);
  }

  body.test1-theme .drawer-close:active {
    opacity: 0.6;
    background: var(--test1-bg-secondary);
  }

  body.test1-theme .drawer-content {
    color: var(--test1-text-primary) !important;
  }

  body.test1-theme .filter-item,
  body.test1-theme .lut-option {
    color: var(--test1-text-primary) !important;
  }

  body.test1-theme .filter-category-title {
    color: var(--test1-text-primary) !important;
    font-weight: 600;
  }

  /* ============================================
     控制组 - 极简卡片
     ============================================ */

  body.test1-theme .control-group {
    background: var(--test1-bg-primary);
    border: 1px solid var(--test1-border-light);
    border-radius: var(--test1-radius-md);
    padding: var(--test1-space-md);
    margin: var(--test1-space-sm) 0;
    box-shadow: none;
  }

  body.test1-theme .control-group label {
    color: var(--test1-text-primary) !important;
    font-weight: 500;
    font-size: 0.875rem;
  }

  body.test1-theme .control-group input,
  body.test1-theme .control-group select,
  body.test1-theme .control-group .value-display {
    color: var(--test1-text-primary) !important;
  }

  /* ============================================
     滑块样式 - 极简扁平
     ============================================ */

  body.test1-theme input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--test1-border-light);
    border-radius: var(--test1-radius-full);
    border: none;
    box-shadow: none;
    outline: none;
  }

  body.test1-theme input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--test1-primary);
    border-radius: 50%;
    border: 2px solid var(--test1-bg-primary);
    box-shadow: var(--test1-shadow-light);
    cursor: pointer;
  }

  body.test1-theme input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--test1-primary);
    border-radius: 50%;
    border: 2px solid var(--test1-bg-primary);
    box-shadow: var(--test1-shadow-light);
    cursor: pointer;
  }

  /* ============================================
     按钮样式 - 极简扁平
     ============================================ */

  body.test1-theme .btn,
  body.test1-theme button:not(.toolbar-btn):not(.nav-item):not(.drawer-close) {
    min-height: var(--test1-touch-min);
    border-radius: var(--test1-radius-sm);
    border: 1px solid var(--test1-border-light);
    padding: var(--test1-space-sm) var(--test1-space-lg);
    font-weight: 500;
    box-shadow: none;
    transition: all var(--test1-transition-normal) var(--test1-transition-ease);
    cursor: pointer;
    background: var(--test1-bg-primary);
  }

  body.test1-theme .btn:active,
  body.test1-theme button:active {
    opacity: 0.6;
  }

  body.test1-theme .btn-primary {
    background: var(--test1-primary);
    color: white !important;
    border-color: var(--test1-primary);
    box-shadow: none;
  }

  body.test1-theme .btn-secondary {
    background: var(--test1-bg-primary);
    color: var(--test1-text-primary) !important;
    border-color: var(--test1-border-light);
  }

  body.test1-theme .btn-secondary:hover {
    background: var(--test1-bg-secondary);
  }

  /* 确保所有按钮文字可见 */
  body.test1-theme button,
  body.test1-theme .btn {
    color: var(--test1-text-primary) !important;
  }

  body.test1-theme button.btn-primary,
  body.test1-theme .btn.btn-primary {
    color: white !important;
  }

  /* ============================================
     LUT滤镜卡片 - 极简边框
     ============================================ */

  body.test1-theme .lut-card {
    background: var(--test1-bg-primary);
    border: 1px solid var(--test1-border-light);
    border-radius: var(--test1-radius-md);
    padding: var(--test1-space-sm);
    transition: all var(--test1-transition-normal) var(--test1-transition-ease);
    box-shadow: none;
  }

  body.test1-theme .lut-card.active {
    border-color: var(--test1-primary);
    box-shadow: none;
    transform: none;
  }

  body.test1-theme .lut-card:active {
    opacity: 0.8;
  }

  /* ============================================
     模态框 - 纯白背景
     ============================================ */

  body.test1-theme .modal-overlay {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.test1-theme .modal-content {
    background: var(--test1-bg-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--test1-border-light);
    border-radius: var(--test1-radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  /* ============================================
     图片预览区 - 细边框
     ============================================ */

  body.test1-theme .preview-container {
    border-radius: var(--test1-radius-sm);
    border: 1px solid var(--test1-border-light);
    box-shadow: none;
  }

  /* ============================================
     加载动画 - 简洁圆环
     ============================================ */

  body.test1-theme .loading-spinner {
    border: 2px solid var(--test1-border-light);
    border-top-color: var(--test1-text-secondary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-shadow: none;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* ============================================
     滤镜选中状态 - 左侧竖线
     ============================================ */

  body.test1-theme .filter-item.selected {
    position: relative;
    background: var(--test1-accent-light);
    border-left: 3px solid var(--test1-primary);
    box-shadow: none;
    color: var(--test1-primary);
  }

  body.test1-theme .filter-item.selected::before {
    display: none;
  }

  /* ============================================
     批量处理缩略图条 - 纯白背景
     ============================================ */

  body.test1-theme .thumbnail-bar {
    background: var(--test1-bg-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid var(--test1-border-light);
    padding: var(--test1-space-sm);
    box-shadow: none;
  }

  body.test1-theme .thumbnail-item {
    border: 1px solid var(--test1-border-light);
    border-radius: var(--test1-radius-sm);
    transition: all var(--test1-transition-fast);
  }

  body.test1-theme .thumbnail-item.active {
    border-color: var(--test1-primary);
    box-shadow: none;
  }

  /* ============================================
     直方图浮层 - 纯白背景
     ============================================ */

  body.test1-theme .histogram-overlay {
    background: var(--test1-bg-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--test1-border-light);
    border-radius: var(--test1-radius-md);
    padding: var(--test1-space-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  /* ============================================
     保存成功提示 - 简洁Toast
     ============================================ */

  body.test1-theme .toast-success {
    background: var(--test1-text-secondary);
    color: white;
    border-radius: var(--test1-radius-md);
    padding: var(--test1-space-sm) var(--test1-space-lg);
    box-shadow: var(--test1-shadow-medium);
    font-weight: 500;
  }

  /* ============================================
     无障碍支持
     ============================================ */

  body.test1-theme *:focus-visible {
    outline: 2px solid var(--test1-primary);
    outline-offset: 2px;
    border-radius: var(--test1-radius-sm);
  }

  @media (prefers-reduced-motion: reduce) {
    body.test1-theme * {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

  @media (prefers-contrast: high) {
    body.test1-theme .mobile-bottom-nav,
    body.test1-theme .floating-toolbar {
      border-width: 2px;
    }
  }

  /* ============================================
     防止意外滚动
     ============================================ */

  body.test1-theme {
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  /* ============================================
     文字层级
     ============================================ */

  body.test1-theme h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--test1-text-primary);
    line-height: 1.3;
  }

  body.test1-theme h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--test1-text-primary);
    line-height: 1.4;
  }

  body.test1-theme h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--test1-text-primary);
    line-height: 1.4;
  }

  body.test1-theme p {
    font-size: 1rem;
    font-weight: 400;
    color: var(--test1-text-secondary);
    line-height: 1.6;
  }

  body.test1-theme small {
    font-size: 0.875rem;
    color: var(--test1-text-muted);
  }

}

/* ============================================
   主题切换类
   ============================================ */

/* 当body有test1-theme类时，应用极简主题 */
/* 使用JavaScript: document.body.classList.add('test1-theme') */