/* ========================================
     CSS 变量 - 主题配色
     ======================================== */
  :root {
    --steel: #4f6479;         /* 主文字色 - 钢蓝灰 */
    --sand: #dbbb98;          /* 强调色 - 沙色 */
    --deep-brown: #614226;    /* 标题色 - 深棕 */
    --olive: #726445;         /* 辅助色 - 橄榄 */
    --lavender: #95a5bd;      /* 装饰色 - 薰衣草 */
    --pale: #a3b4c4;          /* 浅色 - 淡蓝灰 */
    --bg: #e8edf2;            /* 页面背景 */
    --card: #ffffff;          /* 卡片背景 */
  }

  /* ========================================
     全局重置与基础样式
     ======================================== */
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Noto Sans SC', sans-serif;
    background: var(--bg);
    color: var(--steel);
    min-height: 100vh;
    overflow-x: hidden;
  }
  /* 自定义滚动条 */
  ::-webkit-scrollbar { width: 7px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--lavender); border-radius: 4px; }

  /* ========================================
     顶部导航栏
     ======================================== */
  .site-header {
    padding: 1.2rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.9);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(79,100,121,0.08);
    position: sticky; top: 0; z-index: 100;
  }
  .site-logo {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 1.4rem;
    color: var(--deep-brown);
    text-decoration: none;
    letter-spacing: 1px;
  }
  .site-logo span { color: var(--sand); }
  .site-subtitle {
    font-size: 0.78rem;
    color: var(--steel);
    opacity: 0.6;
    letter-spacing: 1px;
  }

  /* ========================================
     上传区域 - 包含背景动画球和拖拽上传区
     ======================================== */
  .upload-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 60px);
    padding: 2rem;
    position: relative;
    overflow: hidden;
  }
  .upload-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.2;
    pointer-events: none;
  }
  .orb-1 { width: 350px; height: 350px; background: var(--sand); top: 10%; left: 10%; animation: orbDrift 18s ease-in-out infinite alternate; }
  .orb-2 { width: 280px; height: 280px; background: var(--lavender); bottom: 15%; right: 12%; animation: orbDrift 22s ease-in-out infinite alternate-reverse; }
  .orb-3 { width: 200px; height: 200px; background: var(--deep-brown); top: 50%; left: 55%; animation: orbDrift 15s ease-in-out infinite alternate; }
  @keyframes orbDrift {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -30px) scale(1.08); }
    66% { transform: translate(-20px, 25px) scale(0.95); }
    100% { transform: translate(15px, -15px) scale(1.03); }
  }
  .upload-zone {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 620px;
    border: 2.5px dashed rgba(79,100,121,0.25);
    border-radius: 20px;
    padding: 4rem 2.5rem;
    text-align: center;
    background: rgba(255,255,255,0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
  }
  .upload-zone:hover, .upload-zone.drag-over {
    border-color: var(--sand);
    background: rgba(219,187,152,0.1);
    transform: scale(1.01);
    box-shadow: 0 20px 60px rgba(97,66,38,0.1);
  }
  .upload-zone.drag-over { border-color: var(--deep-brown); }
  .upload-icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sand), var(--lavender));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.8rem;
    color: var(--deep-brown);
    transition: transform 0.3s;
  }
  .upload-zone:hover .upload-icon { transform: translateY(-4px) scale(1.05); }
  .upload-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--deep-brown);
    margin-bottom: 0.6rem;
  }
  .upload-desc {
    font-size: 0.9rem;
    color: var(--steel);
    opacity: 0.65;
    line-height: 1.7;
  }
  .upload-desc kbd {
    display: inline-block;
    background: rgba(79,100,121,0.08);
    border: 1px solid rgba(79,100,121,0.12);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-family: inherit;
    font-size: 0.8rem;
  }
  .upload-formats {
    margin-top: 1.2rem;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
  }
  .upload-formats span {
    font-size: 0.7rem;
    padding: 0.25rem 0.7rem;
    background: rgba(79,100,121,0.06);
    border-radius: 20px;
    color: var(--steel);
    opacity: 0.5;
  }

  /* ========================================
     结果展示区 - 图片上传后的分析结果
     ======================================== */
  .result-section {
    display: none;
    padding: 2rem;
    max-width: 1280px;
    margin: 0 auto;
  }
  .result-section.active { display: block; }

  /* ========================================
     工具栏 - 包含提取数量滑块、排序选择、重新上传按钮
     ======================================== */
  .toolbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding: 1rem 1.5rem;
    background: var(--card);
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(79,100,121,0.06);
  }
  .toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .toolbar-label {
    font-size: 0.8rem;
    color: var(--steel);
    opacity: 0.6;
    white-space: nowrap;
  }
  .toolbar-slider {
    -webkit-appearance: none;
    width: 120px;
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--lavender), var(--sand));
    outline: none;
  }
  .toolbar-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--deep-brown);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(97,66,38,0.3);
    transition: transform 0.2s;
  }
  .toolbar-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
  .toolbar-count {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--deep-brown);
    min-width: 28px;
    text-align: center;
  }
  .toolbar-select {
    padding: 0.4rem 0.8rem;
    border: 1.5px solid rgba(79,100,121,0.15);
    border-radius: 8px;
    background: var(--bg);
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--steel);
    cursor: pointer;
    outline: none;
  }
  .toolbar-select:focus { border-color: var(--sand); }
  .toolbar-spacer { flex: 1; }
  .toolbar-btn {
    padding: 0.5rem 1.2rem;
    border: 1.5px solid rgba(79,100,121,0.15);
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--steel);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  .toolbar-btn:hover {
    border-color: var(--deep-brown);
    color: var(--deep-brown);
    background: rgba(97,66,38,0.04);
  }
  .toolbar-btn.primary {
    background: var(--deep-brown);
    color: #ffffff;
    border-color: var(--deep-brown);
  }
  .toolbar-btn.primary:hover {
    background: #4f3520;
    border-color: #4f3520;
    color: #ffffff;
  }

  /* ========================================
     分析网格布局 - 左侧图片面板 + 右侧色板面板
     ======================================== */
  .analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
  }
  .image-panel {
    background: var(--card);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(79,100,121,0.06);
  }
  .image-tabs {
    display: flex;
    border-bottom: 1px solid rgba(79,100,121,0.08);
  }
  .image-tab {
    flex: 1;
    padding: 0.75rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--steel);
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.3s;
    background: none;
    border: none;
    font-family: inherit;
    position: relative;
  }
  .image-tab.active { opacity: 1; color: var(--deep-brown); }
  .image-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20%; right: 20%;
    height: 2.5px;
    background: var(--sand);
    border-radius: 2px;
  }
  .image-display {
    padding: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    background: repeating-conic-gradient(rgba(79,100,121,0.04) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
  }
  .image-display canvas {
    max-width: 100%;
    max-height: 400px;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  }
  .image-meta {
    padding: 0.8rem 1.2rem;
    border-top: 1px solid rgba(79,100,121,0.06);
    font-size: 0.75rem;
    color: var(--steel);
    opacity: 0.5;
    display: flex;
    gap: 1.5rem;
  }

  .palette-panel {
    background: var(--card);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(79,100,121,0.06);
    display: flex;
    flex-direction: column;
  }
  .palette-header {
    padding: 1.2rem 1.5rem 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--deep-brown);
    letter-spacing: 1px;
  }
  .color-strip-wrap { padding: 1rem 1.5rem; }
  .color-strip {
    display: flex;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  }
  .color-strip div {
    transition: opacity 0.3s;
    cursor: pointer;
    position: relative;
  }
  .color-strip div:hover { opacity: 0.85; }
  .color-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.5rem 1.2rem;
    max-height: 380px;
  }
  .color-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(79,100,121,0.06);
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 8px;
  }
  .color-card:last-child { border-bottom: none; }
  .color-card:hover { background: rgba(79,100,121,0.03); }
  .color-swatch {
    width: 46px; height: 46px;
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(255,255,255,0.15);
    transition: transform 0.2s;
  }
  .color-card:hover .color-swatch { transform: scale(1.08); }
  .color-info { flex: 1; min-width: 0; }
  .color-hex {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--deep-brown);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
  }
  .color-name {
    font-size: 0.72rem;
    color: var(--steel);
    opacity: 0.55;
    margin-top: 0.1rem;
  }
  .color-detail {
    font-size: 0.72rem;
    color: var(--steel);
    opacity: 0.5;
    margin-top: 0.15rem;
  }
  .color-pct-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    flex-shrink: 0;
  }
  .color-pct-bar {
    width: 60px;
    height: 5px;
    background: rgba(79,100,121,0.08);
    border-radius: 3px;
    overflow: hidden;
  }
  .color-pct-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.23,1,0.32,1);
  }
  .color-pct-num {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--steel);
    opacity: 0.6;
  }
  .color-card-enter { animation: cardEnter 0.4s ease-out both; }
  @keyframes cardEnter {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
  }

  /* ========================================
     配色预览区域 - 使用提取的色彩渲染 UI 组件
     ======================================== */
  .section-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--deep-brown);
    margin-bottom: 0.4rem;
  }
  .section-desc {
    font-size: 0.85rem;
    color: var(--steel);
    opacity: 0.6;
    margin-bottom: 1.5rem;
  }
  .preview-box {
    background: var(--card);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(79,100,121,0.06);
    margin-bottom: 2.5rem;
  }
  .preview-frame { position: relative; }

  /* ---- 精致 UI 预览 ---- */
  .pv-wrap { overflow: hidden; }
  /* ---- 导航栏 ---- */
  .pv-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 56px;
  }
  .pv-nav-brand {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
  }
  .pv-nav-links { display: flex; gap: 1.8rem; }
  .pv-nav-links a {
    text-decoration: none;
    font-size: 0.78rem;
    letter-spacing: 0.8px;
    opacity: 0.7;
    transition: opacity 0.2s;
  }
  .pv-nav-links a:hover { opacity: 1; }
  .pv-nav-cta {
    padding: 0.35rem 1.1rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: opacity 0.2s;
  }
  .pv-nav-cta:hover { opacity: 0.85; }

  /* ---- Hero 主视觉区域 ---- */
  .pv-hero {
    padding: 4rem 2.5rem 3.5rem;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    position: relative;
    overflow: hidden;
  }
  .pv-hero-deco {
    position: absolute;
    width: 260px; height: 260px;
    border-radius: 50%;
    opacity: 0.08;
    right: -40px; top: -60px;
    pointer-events: none;
  }
  .pv-hero-deco2 {
    position: absolute;
    width: 180px; height: 180px;
    border-radius: 50%;
    opacity: 0.06;
    left: 30%; bottom: -50px;
    pointer-events: none;
  }
  .pv-hero-text { flex: 1; position: relative; z-index: 1; }
  .pv-hero-tag {
    display: inline-block;
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.6;
    border: 1px solid;
    border-color: inherit;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    margin-bottom: 1.2rem;
  }
  .pv-hero h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 0.8rem;
  }
  .pv-hero p {
    font-size: 0.88rem;
    opacity: 0.7;
    line-height: 1.8;
    margin-bottom: 1.8rem;
    max-width: 420px;
  }
  .pv-hero-btns { display: flex; gap: 0.8rem; flex-wrap: wrap; }
  .pv-btn-primary {
    padding: 0.7rem 2rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    border: none;
    cursor: default;
    letter-spacing: 0.5px;
    transition: transform 0.2s;
  }
  .pv-btn-outline {
    padding: 0.7rem 2rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    background: transparent;
    border: 1.5px solid;
    border-color: inherit;
    opacity: 0.7;
    cursor: default;
    letter-spacing: 0.5px;
  }
  .pv-hero-img {
    width: 220px; height: 280px;
    border-radius: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    background-size: cover;
    background-position: center;
  }
  .pv-hero-img::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
  }

  /* ---- 指标条 ---- */
  .pv-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .pv-metric {
    padding: 1.5rem 1.8rem;
    text-align: center;
    position: relative;
  }
  .pv-metric:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 20%; bottom: 20%;
    width: 1px;
    opacity: 0.12;
    background: currentColor;
  }
  .pv-metric-num {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 0.2rem;
  }
  .pv-metric-label {
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.5;
  }

  /* ---- 特性卡片 ---- */
  .pv-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .pv-feature {
    padding: 2rem 1.5rem;
    position: relative;
    transition: background 0.2s;
  }
  .pv-feature:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 15%; bottom: 15%;
    width: 1px;
    opacity: 0.06;
    background: currentColor;
  }
  .pv-feature-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }
  .pv-feature h4 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
  }
  .pv-feature p {
    font-size: 0.75rem;
    opacity: 0.5;
    line-height: 1.7;
  }

  /* ---- CTA 行动号召横幅 ---- */
  .pv-cta-bar {
    padding: 2rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
  .pv-cta-bar-text h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
  }
  .pv-cta-bar-text p {
    font-size: 0.78rem;
    opacity: 0.6;
  }
  .pv-cta-bar-btn {
    padding: 0.65rem 1.8rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    border: none;
    cursor: default;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ---- 页脚 ---- */
  .pv-footer {
    padding: 1.2rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    opacity: 0.4;
  }

  /* ========================================
     CSS 导出区域 - 显示和复制生成的 CSS 变量
     ======================================== */
  .export-box {
    background: var(--card);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(79,100,121,0.06);
    margin-bottom: 3rem;
  }
  .export-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(79,100,121,0.06);
  }
  .export-header-left { display: flex; flex-direction: column; gap: 0.2rem; }
  .export-header-title { font-size: 0.82rem; font-weight: 500; color: var(--deep-brown); }
  .export-header-hint { font-size: 0.72rem; color: var(--steel); opacity: 0.5; }
  .export-copy-btn {
    padding: 0.4rem 1rem;
    background: var(--deep-brown);
    color: var(--sand);
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
  }
  .export-copy-btn:hover { background: #7a5430; transform: translateY(-1px); }
  .export-code {
    padding: 1.2rem 1.5rem;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 1.9;
    color: var(--steel);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 300px;
    overflow-y: auto;
  }

  /* ========================================
     说明卡片 - 解释导出变量的含义和使用方式
     ======================================== */
  .explain-box {
    background: var(--card);
    border-radius: 14px;
    padding: 1.8rem 2rem;
    box-shadow: 0 2px 16px rgba(79,100,121,0.06);
    margin-bottom: 2.5rem;
  }
  .explain-box h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--deep-brown);
    margin-bottom: 1rem;
  }
  .explain-items { display: flex; flex-direction: column; gap: 0.8rem; }
  .explain-item {
    display: flex;
    gap: 0.8rem;
    font-size: 0.84rem;
    line-height: 1.7;
    color: var(--steel);
  }
  .explain-item .ei-label {
    font-weight: 700;
    color: var(--deep-brown);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .explain-item code {
    background: rgba(79,100,121,0.06);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.78rem;
  }

  /* ========================================
     Toast 提示 - 复制成功等通知
     ======================================== */
  .toast-container {
    position: fixed;
    top: 5rem; right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .toast {
    background: var(--deep-brown);
    color: var(--sand);
    padding: 0.8rem 1.3rem;
    border-radius: 8px;
    font-size: 0.85rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    animation: toastIn 0.35s ease-out, toastOut 0.35s 2.2s ease-in forwards;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  @keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(30px); } }

  .hidden-canvas { position: absolute; left: -9999px; top: -9999px; }

  /* ========================================
     配色卡预览模态框
     ======================================== */
  .palette-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .palette-modal {
    background: var(--card);
    border-radius: 16px;
    padding: 2rem;
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: modalIn 0.3s ease-out;
  }
  @keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
  .palette-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
  }
  .palette-modal-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--deep-brown);
  }
  .palette-modal-close {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(79,100,121,0.08);
    color: var(--steel);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
  }
  .palette-modal-close:hover { background: rgba(79,100,121,0.15); }
  .palette-modal-preview {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 1.5rem;
  }
  .palette-modal-preview canvas {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  .palette-modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
  }
  .palette-modal-btn {
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .palette-modal-btn.secondary {
    background: transparent;
    border: 1.5px solid rgba(79,100,121,0.15);
    color: var(--steel);
  }
  .palette-modal-btn.secondary:hover {
    border-color: var(--deep-brown);
    color: var(--deep-brown);
  }
  .palette-modal-btn.primary {
    background: var(--deep-brown);
    border: 1.5px solid var(--deep-brown);
    color: #ffffff;
  }
  .palette-modal-btn.primary:hover {
    background: #4f3520;
    border-color: #4f3520;
  }

  /* ========================================
     响应式布局 - 平板设备（最大宽度 900px）
     单列布局，堆叠 Hero 和特性卡片
     ======================================== */
  @media (max-width: 900px) {
    .analysis-grid { grid-template-columns: 1fr; }
    .pv-hero { flex-direction: column; padding: 2.5rem 1.5rem 2rem; }
    .pv-hero-img { width: 100%; height: 200px; }
    .pv-features { grid-template-columns: 1fr; }
    .pv-feature:not(:last-child)::after { display: none; }
    .pv-feature:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,0.04); }
    .pv-metrics { grid-template-columns: repeat(3, 1fr); }
    .pv-metric:not(:last-child)::after { display: none; }
    .pv-cta-bar { flex-direction: column; text-align: center; }
    .toolbar { flex-wrap: wrap; }
    .toolbar-slider { width: 100px; }
  }

  /* ========================================
     响应式布局 - 手机设备（最大宽度 600px）
     全面适配小屏幕：工具栏、图片面板、色板、预览区、导出区
     ======================================== */
  @media (max-width: 600px) {
    .site-header { padding: 0.9rem 1rem; }
    .site-subtitle { display: none; }
    .upload-zone { padding: 2.8rem 1.2rem; }
    .upload-icon { width: 64px; height: 64px; font-size: 1.5rem; margin-bottom: 1.2rem; }
    .upload-title { font-size: 1.25rem; }
    .upload-desc { font-size: 0.82rem; }
    .upload-formats { margin-top: 1rem; }

    .result-section { padding: 0.8rem; }

    /* 工具栏：竖向堆叠 */
    .toolbar {
      flex-direction: column;
      align-items: stretch;
      gap: 0.7rem;
      padding: 0.8rem 1rem;
    }
    .toolbar-group { justify-content: space-between; }
    .toolbar-slider { flex: 1; width: auto; }
    .toolbar-select { flex: 1; }
    .toolbar-spacer { display: none; }
    .toolbar-btn { justify-content: center; width: 100%; }

    /* 图片面板 */
    .image-display { min-height: 180px; padding: 0.8rem; }
    .image-display canvas { max-height: 260px; }
    .image-meta { flex-wrap: wrap; gap: 0.4rem 0.8rem; font-size: 0.7rem; }

    /* 色板 */
    .palette-header { padding: 1rem 1rem 0; }
    .color-strip-wrap { padding: 0.8rem 1rem; }
    .color-strip { height: 36px; border-radius: 8px; }
    .color-list { padding: 0 1rem 0.8rem; max-height: 320px; }
    .color-card { gap: 0.6rem; padding: 0.55rem 0.3rem; }
    .color-swatch { width: 36px; height: 36px; border-radius: 8px; }
    .color-hex { font-size: 0.85rem; }
    .color-name { font-size: 0.68rem; }
    .color-detail { font-size: 0.66rem; }
    .color-pct-bar { width: 40px; }
    .color-pct-num { font-size: 0.66rem; }

    /* 预览区 */
    .pv-nav { padding: 0 1rem; height: 46px; }
    .pv-nav-brand { font-size: 0.95rem; }
    .pv-nav-links { display: none; }
    .pv-nav-cta { font-size: 0.68rem; padding: 0.25rem 0.7rem; }
    .pv-hero { padding: 2rem 1.2rem 1.8rem; }
    .pv-hero-tag { font-size: 0.58rem; padding: 0.2rem 0.7rem; margin-bottom: 1rem; }
    .pv-hero h2 { font-size: 1.35rem; line-height: 1.2; margin-bottom: 0.6rem; }
    .pv-hero p { font-size: 0.8rem; line-height: 1.7; margin-bottom: 1.4rem; }
    .pv-hero-btns { flex-direction: column; }
    .pv-btn-primary, .pv-btn-outline { width: 100%; text-align: center; }
    .pv-hero-img { height: 170px; border-radius: 10px; }
    .pv-hero-deco { width: 180px; height: 180px; }
    .pv-hero-deco2 { width: 120px; height: 120px; }
    .pv-metric { padding: 0.9rem 0.6rem; }
    .pv-metric-num { font-size: 1.35rem; }
    .pv-metric-label { font-size: 0.58rem; letter-spacing: 1px; }
    .pv-feature { padding: 1.2rem 1rem; }
    .pv-feature-icon { width: 36px; height: 36px; font-size: 0.85rem; border-radius: 8px; }
    .pv-feature h4 { font-size: 0.85rem; }
    .pv-feature p { font-size: 0.72rem; }
    .pv-cta-bar { padding: 1.4rem 1.2rem; }
    .pv-cta-bar-btn { width: 100%; text-align: center; }
    .pv-footer { flex-direction: column; gap: 0.3rem; text-align: center; padding: 1rem; }

    /* 标题 */
    .section-title { font-size: 1.15rem; }
    .section-desc { font-size: 0.78rem; margin-bottom: 1.2rem; }

    /* 导出区 */
    .export-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.7rem;
    }
    .export-copy-btn { width: 100%; justify-content: center; }
    .export-code { font-size: 0.7rem; padding: 0.8rem 1rem; max-height: 240px; }

    /* 说明卡片 */
    .explain-box { padding: 1rem 1.2rem; }
    .explain-box h3 { font-size: 0.95rem; margin-bottom: 0.8rem; }
    .explain-items { gap: 0.6rem; }
    .explain-item { font-size: 0.76rem; line-height: 1.65; flex-direction: column; gap: 0.15rem; }
    .explain-item .ei-label { white-space: normal; }
    .explain-item code { font-size: 0.72rem; }

    /* 配色卡模态框 - 移动端适配 */
    .palette-modal-overlay { backdrop-filter: none; background: rgba(0,0,0,0.6); }
    .palette-modal { padding: 1.2rem; width: 95%; max-height: 85vh; }
    .palette-modal-title { font-size: 1.1rem; }
    .palette-modal-preview { padding: 1rem; }
    .palette-modal-actions { flex-direction: column; }
    .palette-modal-btn { width: 100%; justify-content: center; }
  }
  /* ========================================
     无障碍支持 - 减少动画偏好设置
     尊重用户系统的 prefers-reduced-motion 设置
     ======================================== */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }