/* 
 * 🕷️ AutoSpider 蜘蛛网主题 CSS - 第9天
 * 文件名：spider_theme.css
 * 位置：static_assets/css/spider_theme.css
 * 第11天更新：添加移动端优化
 */

/* ============================================
   1. CSS变量系统 - 蜘蛛网主题（覆盖base.css）
============================================ */
:root {
    /* 🎨 主色调 - 深空蜘蛛网（增强版） */
    --spider-primary-dark: #0A1F3E;
    /* 深空蓝 - 蜘蛛网底色 */
    --spider-primary-mid: #1A3A6E;
    /* 中空蓝 - 蜘蛛丝 */
    --spider-primary-light: #2A5A9E;
    /* 浅空蓝 - 高光 */
    --spider-secondary: #142952;
    /* 辅助深蓝 */

    /* 🎨 强调色 - 智慧蜘蛛 */
    --spider-accent-orange: #FF6B35;
    /* 主橙色 - 蜘蛛身体 */
    --spider-accent-coral: #FF8E53;
    /* 珊瑚橙 - 蜘蛛脚 */
    --spider-accent-gold: #FFB347;
    /* 金橙色 - 蜘蛛网节点 */

    /* 🎨 中性色 - 蜘蛛网层次 */
    --spider-web-silver: #E8E8E8;
    /* 蜘蛛丝银 */
    --spider-web-gray: #A0A0A0;
    /* 蜘蛛网灰 */
    --spider-web-dark: #2C3E50;
    /* 夜间蜘蛛网 */

    /* 🎨 文字颜色 */
    --spider-text-primary: #FFFFFF;
    /* 主文字 */
    --spider-text-secondary: #A0B9E3;
    /* 次要文字 */
    --spider-text-muted: #889CC0;
    /* 弱化文字 */
    --spider-text-dark: #0A1F3E;
    /* 深色文字（用于亮色主题） */

    /* 🎨 背景层次 */
    --spider-bg-overlay: rgba(255, 255, 255, 0.05);
    --spider-bg-card: rgba(26, 58, 110, 0.7);
    --spider-bg-hover: rgba(255, 107, 53, 0.1);
    --spider-bg-input: rgba(255, 255, 255, 0.08);

    /* 🎨 边框与阴影 */
    --spider-border-light: rgba(255, 255, 255, 0.1);
    --spider-border-medium: rgba(255, 255, 255, 0.2);
    --spider-border-accent: rgba(255, 107, 53, 0.3);
    --spider-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.1);
    --spider-shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.2);
    --spider-shadow-glow: 0 0 20px rgba(255, 107, 53, 0.3);
    --spider-shadow-card: 0 10px 30px rgba(10, 31, 62, 0.3);

    /* 📏 间距系统 - 8px基准 */
    --spider-space-xs: 4px;
    --spider-space-sm: 8px;
    --spider-space-md: 16px;
    --spider-space-lg: 24px;
    --spider-space-xl: 32px;
    --spider-space-xxl: 48px;
    --spider-space-xxxl: 64px;

    /* 🔵 圆角系统 */
    --spider-radius-sm: 4px;
    --spider-radius-md: 8px;
    --spider-radius-lg: 12px;
    --spider-radius-xl: 20px;
    --spider-radius-pill: 999px;

    /* ⚡ 动画时长 */
    --spider-duration-fast: 0.2s;
    --spider-duration-normal: 0.3s;
    --spider-duration-slow: 0.5s;
    --spider-duration-spider: 0.8s;

    /* 🌐 响应式断点 */
    --spider-breakpoint-mobile: 480px;
    --spider-breakpoint-tablet: 768px;
    --spider-breakpoint-desktop: 1024px;
    --spider-breakpoint-wide: 1200px;

    /* 🕸️ 蜘蛛网特效 */
    --spider-web-opacity: 0.1;
    --spider-web-blur: 10px;
}

/* ============================================
   2. 暗色主题变量（默认）
============================================ */
[data-theme="dark"] {
    --spider-primary-dark: #0A1F3E;
    --spider-primary-mid: #142952;
    --spider-primary-light: #1E3D66;
    --spider-text-primary: #FFFFFF;
    --spider-text-secondary: #A0B9E3;
    --spider-bg-overlay: rgba(255, 255, 255, 0.05);
    --spider-bg-input: rgba(255, 255, 255, 0.08);
    --spider-border-light: rgba(255, 255, 255, 0.1);
}

/* ============================================
   3. 亮色主题变量
============================================ */
[data-theme="light"] {
    --spider-primary-dark: #E8F4FF;
    --spider-primary-mid: #D4E8FF;
    --spider-primary-light: #C0DCFF;
    --spider-secondary: #B0D0FF;
    --spider-text-primary: #0A1F3E;
    --spider-text-secondary: #2C3E50;
    --spider-text-muted: #5A6C8A;
    --spider-bg-overlay: rgba(10, 31, 62, 0.05);
    --spider-bg-card: rgba(255, 255, 255, 0.9);
    --spider-bg-input: rgba(10, 31, 62, 0.05);
    --spider-border-light: rgba(10, 31, 62, 0.1);
    --spider-border-medium: rgba(10, 31, 62, 0.2);
}

/* ============================================
   4. 基础重置与布局（增强base.css）
============================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Segoe UI', 'Microsoft YaHei', 'Inter', -apple-system, sans-serif;
    line-height: 1.6;
    color: var(--spider-text-primary);
    background: linear-gradient(135deg,
            var(--spider-primary-dark) 0%,
            var(--spider-primary-mid) 50%,
            var(--spider-primary-light) 100%);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color var(--spider-duration-normal) ease,
        color var(--spider-duration-normal) ease;
}

/* ============================================
   5. 蜘蛛网网格系统
============================================ */
.spider-container {
    width: 100%;
    max-width: var(--spider-breakpoint-wide);
    margin: 0 auto;
    padding: var(--spider-space-xl);
}

.spider-grid {
    display: grid;
    gap: var(--spider-space-lg);
}

/* 响应式网格列 */
.spider-grid-1 {
    grid-template-columns: 1fr;
}

.spider-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.spider-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.spider-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* 响应式调整 */
@media (max-width: 768px) {

    .spider-grid-2,
    .spider-grid-3,
    .spider-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   6. 品牌卡片样式（增强版）
============================================ */
.spider-card {
    background: var(--spider-bg-card);
    backdrop-filter: blur(var(--spider-web-blur));
    border-radius: var(--spider-radius-xl);
    padding: var(--spider-space-xl);
    border: 1px solid var(--spider-border-light);
    transition: all var(--spider-duration-normal) ease;
    position: relative;
    overflow: hidden;
}

.spider-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%,
            var(--spider-accent-orange) 0%,
            transparent 50%);
    opacity: var(--spider-web-opacity);
    z-index: 0;
}

.spider-card:hover {
    transform: translateY(-8px);
    border-color: var(--spider-border-accent);
    box-shadow: var(--spider-shadow-glow), var(--spider-shadow-card);
}

.spider-card-content {
    position: relative;
    z-index: 1;
}

/* ============================================
   7. 蜘蛛网按钮系统
============================================ */
.spider-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spider-space-sm);
    padding: var(--spider-space-md) var(--spider-space-xl);
    background: linear-gradient(135deg,
            var(--spider-accent-orange) 0%,
            var(--spider-accent-coral) 100%);
    color: white;
    border: none;
    border-radius: var(--spider-radius-lg);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--spider-duration-normal) ease;
    text-decoration: none;
    text-align: center;
    box-shadow: var(--spider-shadow-medium);
    position: relative;
    overflow: hidden;
}

.spider-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transition: left 0.6s ease;
}

.spider-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--spider-shadow-glow);
}

.spider-btn:hover::before {
    left: 100%;
}

.spider-btn:active {
    transform: translateY(-1px);
}

.spider-btn-secondary {
    background: transparent;
    border: 2px solid var(--spider-accent-orange);
    color: var(--spider-accent-orange);
}

.spider-btn-secondary:hover {
    background: rgba(255, 107, 53, 0.1);
}

/* ============================================
   8. 蜘蛛网输入系统
============================================ */
.spider-input-group {
    margin-bottom: var(--spider-space-lg);
    position: relative;
}

.spider-input-label {
    display: block;
    margin-bottom: var(--spider-space-sm);
    color: var(--spider-text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: color var(--spider-duration-normal) ease;
}

.spider-input-field {
    width: 100%;
    padding: var(--spider-space-md) var(--spider-space-lg);
    background: var(--spider-bg-input);
    border: 2px solid var(--spider-border-light);
    border-radius: var(--spider-radius-lg);
    color: var(--spider-text-primary);
    font-size: 16px;
    transition: all var(--spider-duration-normal) ease;
    outline: none;
    font-family: inherit;
}

.spider-input-field:focus {
    border-color: var(--spider-accent-orange);
    background: rgba(255, 107, 53, 0.05);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.spider-input-field::placeholder {
    color: var(--spider-text-muted);
}

/* ============================================
   9. 蜘蛛网图片展示系统
============================================ */
.spider-image-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--spider-radius-lg);
    background: rgba(0, 0, 0, 0.1);
    aspect-ratio: 16/9;
}

.spider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--spider-duration-slow) ease;
    display: block;
}

.spider-image-container:hover .spider-image {
    transform: scale(1.05);
}

/* 图片加载动画 */
.spider-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            var(--spider-primary-dark) 25%,
            var(--spider-primary-mid) 50%,
            var(--spider-primary-dark) 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
    border-radius: var(--spider-radius-lg);
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ============================================
   10. 主题切换组件
============================================ */
.spider-theme-toggle {
    position: fixed;
    bottom: var(--spider-space-xl);
    right: var(--spider-space-xl);
    z-index: 1000;
}

.theme-switch {
    display: flex;
    align-items: center;
    gap: var(--spider-space-sm);
    background: var(--spider-bg-card);
    backdrop-filter: blur(var(--spider-web-blur));
    border-radius: var(--spider-radius-pill);
    padding: var(--spider-space-sm);
    border: 1px solid var(--spider-border-light);
    box-shadow: var(--spider-shadow-soft);
}

.theme-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--spider-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--spider-duration-normal) ease;
    font-size: 20px;
}

.theme-btn:hover {
    background: var(--spider-bg-hover);
    color: var(--spider-accent-orange);
}

.theme-btn.active {
    background: var(--spider-accent-orange);
    color: white;
}

/* ============================================
   11. 蜘蛛网加载动画
============================================ */
.spider-loader {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--spider-border-light);
    border-radius: 50%;
    border-top-color: var(--spider-accent-orange);
    animation: spin 1s ease-in-out infinite;
}

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

/* 蜘蛛爬行动画 */
.spider-crawl {
    animation: crawl 2s ease-in-out infinite;
}

@keyframes crawl {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-5px) rotate(-2deg);
    }

    75% {
        transform: translateY(5px) rotate(2deg);
    }
}

/* ============================================
   12. 蜘蛛网品牌水印（独立品牌）
============================================ */
.spider-brand-watermark {
    position: fixed;
    bottom: var(--spider-space-md);
    right: var(--spider-space-md);
    background: var(--spider-bg-card);
    backdrop-filter: blur(5px);
    color: var(--spider-accent-coral);
    padding: var(--spider-space-sm) var(--spider-space-md);
    border-radius: var(--spider-radius-md);
    font-size: 12px;
    font-weight: bold;
    z-index: 9999;
    border: 1px solid var(--spider-border-accent);
    display: flex;
    align-items: center;
    gap: var(--spider-space-xs);
    box-shadow: var(--spider-shadow-soft);
}

.spider-brand-watermark::before {
    content: '🕷️';
    font-size: 14px;
}

/* ============================================
   13. 响应式设计增强
============================================ */
@media (max-width: 768px) {
    .spider-container {
        padding: var(--spider-space-lg);
    }

    .spider-card {
        padding: var(--spider-space-lg);
    }

    .spider-theme-toggle {
        bottom: var(--spider-space-lg);
        right: var(--spider-space-lg);
    }

    .spider-grid-2,
    .spider-grid-3,
    .spider-grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .spider-container {
        padding: var(--spider-space-md);
    }

    .spider-btn {
        padding: var(--spider-space-sm) var(--spider-space-lg);
        font-size: 14px;
    }
}

/* ============================================
   14. 蜘蛛网微交互
============================================ */
.spider-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.spider-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ============================================
   15. 蜘蛛网分割线
============================================ */
.spider-divider {
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            var(--spider-border-accent),
            transparent);
    margin: var(--spider-space-xl) 0;
    border: none;
}

/* ============================================
   16. 蜘蛛网标签系统
============================================ */
.spider-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--spider-space-xs) var(--spider-space-md);
    background: rgba(255, 107, 53, 0.1);
    color: var(--spider-accent-orange);
    border-radius: var(--spider-radius-pill);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid rgba(255, 107, 53, 0.2);
}

/* ============================================
   17. 蜘蛛网工具提示
============================================ */
.spider-tooltip {
    position: relative;
    display: inline-block;
}

.spider-tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--spider-bg-card);
    color: var(--spider-text-primary);
    padding: var(--spider-space-xs) var(--spider-space-sm);
    border-radius: var(--spider-radius-sm);
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    border: 1px solid var(--spider-border-light);
    box-shadow: var(--spider-shadow-soft);
    margin-bottom: var(--spider-space-xs);
}

/* ============================================
   18. 蜘蛛网滚动条样式
============================================ */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--spider-primary-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--spider-accent-orange);
    border-radius: var(--spider-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--spider-accent-coral);
}

/* ============================================
   19. 蜘蛛网选择框样式
============================================ */
.spider-select {
    appearance: none;
    background: var(--spider-bg-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FF6B35' d='M6 8L2 4h8z'/%3E%3C/svg%3E") no-repeat right var(--spider-space-md) center;
    border: 2px solid var(--spider-border-light);
    border-radius: var(--spider-radius-lg);
    padding: var(--spider-space-md) var(--spider-space-xl) var(--spider-space-md) var(--spider-space-lg);
    color: var(--spider-text-primary);
    font-size: 16px;
    width: 100%;
    cursor: pointer;
}

.spider-select:focus {
    border-color: var(--spider-accent-orange);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

/* ============================================
   20. 蜘蛛网响应式表格
============================================ */
.spider-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--spider-bg-card);
    border-radius: var(--spider-radius-lg);
    overflow: hidden;
}

.spider-table th {
    background: var(--spider-primary-mid);
    color: var(--spider-text-primary);
    padding: var(--spider-space-md);
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--spider-border-light);
}

.spider-table td {
    padding: var(--spider-space-md);
    border-bottom: 1px solid var(--spider-border-light);
    color: var(--spider-text-secondary);
}

.spider-table tr:hover {
    background: var(--spider-bg-hover);
}

/* ============================================
   21. 第10天新增：蜘蛛网图表专用样式
============================================ */

/* 蜘蛛图容器 */
.spider-chart-section {
    background: var(--spider-bg-card);
    backdrop-filter: blur(var(--spider-web-blur));
    border-radius: var(--spider-radius-xl);
    padding: var(--spider-space-xl);
    border: 1px solid var(--spider-border-light);
    margin-bottom: var(--spider-space-xl);
    position: relative;
    overflow: hidden;
    transition: all var(--spider-duration-normal) ease;
}

.spider-chart-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center,
            var(--spider-accent-orange) 0%,
            transparent 70%);
    opacity: var(--spider-web-opacity);
    z-index: 0;
}

.spider-chart-section:hover {
    border-color: var(--spider-border-accent);
    box-shadow: var(--spider-shadow-glow);
}

.spider-chart-container {
    position: relative;
    z-index: 1;
    margin: var(--spider-space-lg) 0;
}

/* 图表Canvas */
#spiderChartCanvas {
    width: 100% !important;
    height: auto !important;
    max-height: 600px;
    background: transparent;
    transition: opacity var(--spider-duration-normal) ease;
}

/* 图表控制按钮 */
.spider-chart-controls {
    display: flex;
    gap: var(--spider-space-md);
    margin-top: var(--spider-space-lg);
    flex-wrap: wrap;
    justify-content: center;
}

.spider-chart-controls .spider-btn {
    min-width: 160px;
    justify-content: center;
}

/* 图表标题 */
.chart-title {
    text-align: center;
    margin-bottom: var(--spider-space-lg);
    font-size: 24px;
    font-weight: 600;
    color: var(--spider-accent-coral);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
}

.chart-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg,
            transparent,
            var(--spider-accent-orange),
            transparent);
    margin: var(--spider-space-sm) auto 0;
}

/* 图表图例 */
.spider-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spider-space-md);
    margin-top: var(--spider-space-lg);
    padding: var(--spider-space-md);
    background: var(--spider-bg-overlay);
    border-radius: var(--spider-radius-lg);
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spider-space-sm);
    padding: var(--spider-space-xs) var(--spider-space-md);
    border-radius: var(--spider-radius-pill);
    background: var(--spider-bg-input);
    border: 1px solid var(--spider-border-light);
    transition: all var(--spider-duration-normal) ease;
}

.legend-item:hover {
    background: var(--spider-bg-hover);
    border-color: var(--spider-border-accent);
    transform: translateY(-2px);
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.legend-text {
    color: var(--spider-text-secondary);
    font-size: 14px;
    font-weight: 500;
}

/* 加载状态 */
.spider-chart-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spider-space-xxl);
    color: var(--spider-text-secondary);
    text-align: center;
}

.spider-chart-loading .spider-loader {
    width: 40px;
    height: 40px;
    margin-bottom: var(--spider-space-lg);
    border-width: 4px;
}

/* 车型评分卡片 */
.car-score-card {
    background: var(--spider-bg-card);
    border-radius: var(--spider-radius-lg);
    padding: var(--spider-space-lg);
    border: 1px solid var(--spider-border-light);
    transition: all var(--spider-duration-normal) ease;
    position: relative;
    overflow: hidden;
}

.car-score-card:hover {
    transform: translateY(-5px);
    border-color: var(--spider-border-accent);
    box-shadow: var(--spider-shadow-soft);
}

.car-score-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            var(--spider-accent-orange),
            var(--spider-accent-coral));
    border-radius: var(--spider-radius-sm) var(--spider-radius-sm) 0 0;
}

.car-score-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spider-space-md);
    padding-bottom: var(--spider-space-sm);
    border-bottom: 1px solid var(--spider-border-light);
}

.car-score-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--spider-text-primary);
}

.car-score-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--spider-accent-orange);
}

/* 评分星星 */
.rating-stars {
    display: flex;
    gap: 2px;
    margin: var(--spider-space-sm) 0;
}

.star {
    font-size: 18px;
}

.star.full {
    color: var(--spider-accent-gold);
}

.star.half {
    color: var(--spider-accent-coral);
    position: relative;
}

.star.half::before {
    content: '⭐';
    position: absolute;
    left: 0;
    width: 50%;
    overflow: hidden;
    color: var(--spider-accent-gold);
}

.star.empty {
    color: var(--spider-border-light);
}

/* 维度评分条 */
.dimension-bar {
    margin: var(--spider-space-sm) 0;
}

.dimension-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 14px;
}

.dimension-name {
    color: var(--spider-text-secondary);
}

.dimension-score {
    color: var(--spider-accent-orange);
    font-weight: 600;
}

.dimension-progress {
    height: 6px;
    background: var(--spider-bg-input);
    border-radius: var(--spider-radius-pill);
    overflow: hidden;
}

.dimension-progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
            var(--spider-accent-orange),
            var(--spider-accent-coral));
    border-radius: var(--spider-radius-pill);
    transition: width var(--spider-duration-slow) ease;
}

/* 故障分析样式 */
.fault-item {
    padding: var(--spider-space-sm);
    margin: var(--spider-space-xs) 0;
    background: var(--spider-bg-overlay);
    border-radius: var(--spider-radius-md);
    border-left: 3px solid var(--spider-accent-orange);
    transition: all var(--spider-duration-normal) ease;
}

.fault-item:hover {
    background: var(--spider-bg-hover);
    transform: translateX(5px);
}

.fault-item.high {
    border-left-color: #FF6B35;
}

.fault-item.medium {
    border-left-color: #FFB347;
}

.fault-item.low {
    border-left-color: #34C759;
}

.fault-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.fault-system {
    color: var(--spider-text-primary);
    font-weight: 500;
    font-size: 14px;
}

.fault-percentage {
    color: var(--spider-accent-orange);
    font-weight: 600;
    font-size: 12px;
}

.fault-count {
    color: var(--spider-text-muted);
    font-size: 12px;
}

/* 全屏模式 */
.spider-chart-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--spider-primary-dark);
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spider-space-xl);
}

.spider-chart-fullscreen .spider-chart-container {
    width: 90%;
    height: 90%;
    max-width: 1200px;
}

.spider-chart-fullscreen #spiderChartCanvas {
    max-height: none;
    height: 100% !important;
}

.spider-chart-fullscreen .chart-controls {
    position: absolute;
    bottom: var(--spider-space-xl);
    left: 50%;
    transform: translateX(-50%);
}

/* 导出状态提示 */
.export-status {
    position: fixed;
    bottom: var(--spider-space-xl);
    left: 50%;
    transform: translateX(-50%);
    background: var(--spider-bg-card);
    color: var(--spider-text-primary);
    padding: var(--spider-space-md) var(--spider-space-xl);
    border-radius: var(--spider-radius-lg);
    box-shadow: var(--spider-shadow-medium);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: var(--spider-space-sm);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translate(-50%, 100%);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .spider-chart-section {
        padding: var(--spider-space-lg);
    }

    .spider-chart-controls {
        flex-direction: column;
    }

    .spider-chart-controls .spider-btn {
        width: 100%;
    }

    .spider-chart-legend {
        flex-direction: column;
        align-items: flex-start;
    }

    .chart-title {
        font-size: 20px;
    }

    .car-score-card {
        padding: var(--spider-space-md);
    }

    .spider-chart-fullscreen {
        padding: var(--spider-space-md);
    }
}

@media (max-width: 480px) {
    .spider-chart-section {
        padding: var(--spider-space-md);
    }

    .chart-title {
        font-size: 18px;
    }

    .car-score-value {
        font-size: 20px;
    }

    .legend-item {
        padding: var(--spider-space-xs) var(--spider-space-sm);
    }
}

/* 暗色主题下的图表调整 */
[data-theme="dark"] .spider-chart-section {
    background: rgba(26, 58, 110, 0.8);
}

[data-theme="dark"] .car-score-card {
    background: rgba(26, 58, 110, 0.9);
}

[data-theme="dark"] .fault-item {
    background: rgba(255, 255, 255, 0.03);
}

/* 亮色主题下的图表调整 */
[data-theme="light"] .spider-chart-section {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(10, 31, 62, 0.1);
}

[data-theme="light"] .spider-chart-section:hover {
    border-color: rgba(255, 107, 53, 0.3);
}

[data-theme="light"] .car-score-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(10, 31, 62, 0.1);
}

[data-theme="light"] .fault-item {
    background: rgba(10, 31, 62, 0.03);
}

[data-theme="light"] .legend-item {
    background: rgba(10, 31, 62, 0.05);
}

/* 打印样式 */
@media print {
    .spider-chart-section {
        background: white !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    .spider-btn,
    .spider-chart-controls,
    .spider-theme-toggle,
    .spider-brand-watermark {
        display: none !important;
    }

    .chart-title {
        color: #333 !important;
    }

    #spiderChartCanvas {
        filter: contrast(1.1) brightness(1.1);
    }
}

/* ============================================
   22. 第11天新增：移动端优化
============================================ */

/* 小屏幕设备（手机） */
@media screen and (max-width: 768px) {

    /* 1. 调整整体容器 */
    .spider-container {
        padding: 10px !important;
        margin: 10px !important;
    }

    /* 2. 输入区域优化 */
    .input-section {
        padding: 15px !important;
    }

    /* 3. 输入框变大，便于触摸 */
    .spider-input-field {
        padding: 16px !important;
        font-size: 18px !important;
        /* 防止iOS自动缩放 */
        min-height: 50px !important;
        /* 苹果推荐最小点击区域44px */
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    .spider-input-label {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    /* 4. 按钮变大 */
    .spider-btn {
        padding: 18px 25px !important;
        font-size: 18px !important;
        min-height: 56px !important;
        width: 100% !important;
        margin: 10px 0 !important;
    }

    /* 5. Logo和标题优化 */
    .logo {
        font-size: 36px !important;
    }

    .slogan {
        font-size: 16px !important;
    }

    /* 6. 对比结果页面优化 */
    .spider-chart-section {
        padding: 20px !important;
    }

    /* 7. 蜘蛛图容器 */
    #spiderChartCanvas {
        max-height: 300px !important;
    }

    /* 8. Logo图例改为垂直排列 */
    .logo-legend-container {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .logo-legend-item {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* 9. 车型卡片堆叠 */
    .features-grid {
        grid-template-columns: 1fr !important;
    }

    .car-card {
        margin-bottom: 20px !important;
    }

    /* 10. 页脚文字调整 */
    .footer p {
        font-size: 12px !important;
    }

    /* 11. 图表控制按钮优化 */
    .chart-controls {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .chart-btn {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* 12. 故障分析区域优化 */
    .fault-item {
        padding: 12px !important;
        margin: 8px 0 !important;
    }

    /* 13. 分享功能区域优化 */
    .share-buttons-container {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* 14. 导航菜单优化 */
    .nav {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .nav a {
        padding: 12px 20px !important;
        text-align: center !important;
        font-size: 16px !important;
    }
}

/* 超小屏幕设备（小手机） */
@media screen and (max-width: 480px) {
    .logo {
        font-size: 28px !important;
    }

    .page-title h1 {
        font-size: 24px !important;
    }

    .chart-title {
        font-size: 20px !important;
    }

    .car-score-value {
        font-size: 20px !important;
    }

    .spider-btn {
        padding: 16px 20px !important;
        font-size: 16px !important;
    }

    /* 调整主题切换按钮位置 */
    .spider-theme-toggle {
        bottom: 20px !important;
        right: 20px !important;
    }

    /* 调整品牌水印 */
    .spider-brand-watermark {
        font-size: 10px !important;
        padding: 6px 10px !important;
        bottom: 15px !important;
        right: 15px !important;
    }

    /* 优化输入框占位符 */
    .spider-input-field::placeholder {
        font-size: 14px !important;
    }
}

/* 平板设备（介于手机和电脑之间） */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .spider-container {
        padding: var(--spider-space-lg) !important;
    }

    .spider-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .spider-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #spiderChartCanvas {
        max-height: 400px !important;
    }
}

/* 横屏模式优化 */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .spider-container {
        padding: var(--spider-space-md) !important;
    }

    .logo {
        font-size: 24px !important;
        margin-bottom: 5px !important;
    }

    .slogan {
        font-size: 14px !important;
        margin-bottom: 15px !important;
    }

    .spider-input-field {
        padding: 12px !important;
        min-height: 40px !important;
        font-size: 16px !important;
    }

    .spider-btn {
        padding: 12px 20px !important;
        min-height: 44px !important;
        font-size: 16px !important;
    }

    .spider-card {
        padding: var(--spider-space-md) !important;
        margin-bottom: 10px !important;
    }

    #spiderChartCanvas {
        max-height: 250px !important;
    }
}

/* 高DPI设备优化（Retina屏幕） */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min-resolution: 192dpi) {
    .spider-btn {
        border-width: 2px !important;
    }

    .spider-input-field {
        border-width: 2px !important;
    }

    .legend-color {
        border-width: 2px !important;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .spider-btn:hover {
        transform: none !important;
        box-shadow: var(--spider-shadow-medium) !important;
    }

    .spider-card:hover {
        transform: none !important;
        border-color: var(--spider-border-light) !important;
        box-shadow: var(--spider-shadow-soft) !important;
    }

    .legend-item:hover {
        transform: none !important;
        background: var(--spider-bg-input) !important;
    }

    /* 增加触摸目标大小 */
    .theme-btn {
        width: 48px !important;
        height: 48px !important;
    }

    .nav a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* 防止iOS输入框自动缩放 */
@supports (-webkit-touch-callout: none) {

    .spider-input-field,
    input,
    textarea {
        font-size: 16px !important;
    }
}

/* 防止Android设备文字大小调整 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

    .spider-input-field,
    .spider-btn {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}

/* ============================================
   23. 第11天新增：分享功能CSS修复
============================================ */

/* 确保分享按钮可点击 */
.spider-btn[style*="background: #34C759"],
.spider-btn[style*="background: #2A5A9E"],
.spider-btn[style*="background: #FF6B35"] {
    position: relative !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 确保分享区域在最上层 */
#shareInfoArea {
    position: relative !important;
    z-index: 999 !important;
    pointer-events: auto !important;
}

/* 如果有其他元素遮挡，确保它们不阻止点击 */
.spider-container * {
    pointer-events: auto !important;
}

/* ============================================
   完成！AutoSpider第11天移动端优化与分享功能修复完成
============================================ */