/* Neumorphic UI 核心样式 */
:root {
    /* Neumorphic 配色方案 */
    --neu-bg: #e0e0e0;
    --neu-bg-light: #f0f0f0;
    --neu-bg-dark: #d0d0d0;
    --neu-text: #333333;
    --neu-text-light: #666666;
    --neu-text-dark: #1a1a1a;
    
    /* 阴影配置 */
    --neu-shadow-light: #ffffff;
    --neu-shadow-dark: #bebebe;
    --neu-shadow-inset-light: #ffffff;
    --neu-shadow-inset-dark: #bebebe;
    
    /* 品牌色彩 */
    --neu-primary: #4a90e2;
    --neu-success: #7ed321;
    --neu-warning: #f5a623;
    --neu-danger: #d0021b;
    
    /* 尺寸和间距 */
    --neu-radius: 20px;
    --neu-radius-small: 12px;
    --neu-radius-large: 30px;
    --neu-spacing: 20px;
    --neu-spacing-small: 10px;
    --neu-spacing-large: 40px;
}

/* 基础重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--neu-bg);
    color: var(--neu-text);
    line-height: 1.6;
    min-height: 100vh;
}

/* Neumorphic 容器基类 */
.neu-container {
    background: var(--neu-bg);
    border-radius: var(--neu-radius);
    box-shadow: 
        8px 8px 16px var(--neu-shadow-dark),
        -8px -8px 16px var(--neu-shadow-light);
    padding: var(--neu-spacing);
    transition: all 0.3s ease;
}

.neu-container:hover {
    box-shadow: 
        12px 12px 24px var(--neu-shadow-dark),
        -12px -12px 24px var(--neu-shadow-light);
}

/* Neumorphic 凹陷效果 */
.neu-inset {
    background: var(--neu-bg);
    border-radius: var(--neu-radius);
    box-shadow: 
        inset 6px 6px 12px var(--neu-shadow-inset-dark),
        inset -6px -6px 12px var(--neu-shadow-inset-light);
    padding: var(--neu-spacing);
}

/* Neumorphic 按钮 */
.neu-button {
    background: var(--neu-bg);
    border: none;
    border-radius: var(--neu-radius-small);
    box-shadow: 
        6px 6px 12px var(--neu-shadow-dark),
        -6px -6px 12px var(--neu-shadow-light);
    color: var(--neu-text);
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    padding: 20px 24px;
    min-height: 60px;
    transition: all 0.2s ease;
    outline: none;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neu-button:hover {
    box-shadow: 
        8px 8px 16px var(--neu-shadow-dark),
        -8px -8px 16px var(--neu-shadow-light);
    transform: translateY(-1px);
}

.neu-button:active {
    box-shadow: 
        inset 4px 4px 8px var(--neu-shadow-inset-dark),
        inset -4px -4px 8px var(--neu-shadow-inset-light);
    transform: translateY(0);
}

/* 按钮变体 */
.neu-button.primary {
    background: linear-gradient(145deg, #4a90e2, #357abd);
    color: white;
    box-shadow: 
        6px 6px 12px rgba(74, 144, 226, 0.3),
        -6px -6px 12px rgba(255, 255, 255, 0.8);
}

.neu-button.primary:hover {
    box-shadow: 
        8px 8px 16px rgba(74, 144, 226, 0.4),
        -8px -8px 16px rgba(255, 255, 255, 0.9);
}

.neu-button.success {
    background: linear-gradient(145deg, #7ed321, #6bb01a);
    color: white;
    box-shadow: 
        6px 6px 12px rgba(126, 211, 33, 0.3),
        -6px -6px 12px rgba(255, 255, 255, 0.8);
}

.neu-button.danger {
    background: linear-gradient(145deg, #d0021b, #a8011a);
    color: white;
    box-shadow: 
        6px 6px 12px rgba(208, 2, 27, 0.3),
        -6px -6px 12px rgba(255, 255, 255, 0.8);
}

/* Neumorphic 输入框 */
.neu-input {
    background: var(--neu-bg);
    border: none;
    border-radius: var(--neu-radius-small);
    box-shadow: 
        inset 4px 4px 8px var(--neu-shadow-inset-dark),
        inset -4px -4px 8px var(--neu-shadow-inset-light);
    color: var(--neu-text);
    font-size: 16px;
    outline: none;
    padding: 20px 16px;
    min-height: 60px;
    transition: all 0.2s ease;
    width: 100%;
}

.neu-input:focus {
    box-shadow: 
        inset 6px 6px 12px var(--neu-shadow-inset-dark),
        inset -6px -6px 12px var(--neu-shadow-inset-light),
        0 0 0 2px rgba(74, 144, 226, 0.3);
}

.neu-input::placeholder {
    color: var(--neu-text-light);
}

/* Neumorphic 卡片 */
.neu-card {
    background: var(--neu-bg);
    border-radius: var(--neu-radius);
    box-shadow: 
        10px 10px 20px var(--neu-shadow-dark),
        -10px -10px 20px var(--neu-shadow-light);
    margin: var(--neu-spacing);
    padding: var(--neu-spacing-large);
    transition: all 0.3s ease;
}

.neu-card:hover {
    box-shadow: 
        15px 15px 30px var(--neu-shadow-dark),
        -15px -15px 30px var(--neu-shadow-light);
    transform: translateY(-2px);
}

/* Neumorphic 图标按钮 */
.neu-icon-button {
    background: var(--neu-bg);
    border: none;
    border-radius: 50%;
    box-shadow: 
        4px 4px 8px var(--neu-shadow-dark),
        -4px -4px 8px var(--neu-shadow-light);
    color: var(--neu-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    outline: none;
    transition: all 0.2s ease;
    width: 48px;
}

.neu-icon-button:hover {
    box-shadow: 
        6px 6px 12px var(--neu-shadow-dark),
        -6px -6px 12px var(--neu-shadow-light);
    transform: translateY(-1px);
}

.neu-icon-button:active {
    box-shadow: 
        inset 3px 3px 6px var(--neu-shadow-inset-dark),
        inset -3px -3px 6px var(--neu-shadow-inset-light);
    transform: translateY(0);
}

/* Neumorphic 进度条 */
.neu-progress {
    background: var(--neu-bg);
    border-radius: var(--neu-radius-large);
    box-shadow: 
        inset 4px 4px 8px var(--neu-shadow-inset-dark),
        inset -4px -4px 8px var(--neu-shadow-inset-light);
    height: 8px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.neu-progress-bar {
    background: linear-gradient(90deg, var(--neu-primary), var(--neu-success));
    border-radius: var(--neu-radius-large);
    height: 100%;
    transition: width 0.3s ease;
    width: 0%;
}

/* Neumorphic 开关 */
.neu-switch {
    background: var(--neu-bg);
    border-radius: var(--neu-radius-large);
    box-shadow: 
        inset 4px 4px 8px var(--neu-shadow-inset-dark),
        inset -4px -4px 8px var(--neu-shadow-inset-light);
    cursor: pointer;
    height: 32px;
    position: relative;
    transition: all 0.3s ease;
    width: 60px;
}

.neu-switch-handle {
    background: var(--neu-bg);
    border-radius: 50%;
    box-shadow: 
        3px 3px 6px var(--neu-shadow-dark),
        -3px -3px 6px var(--neu-shadow-light);
    height: 24px;
    left: 4px;
    position: absolute;
    top: 4px;
    transition: all 0.3s ease;
    width: 24px;
}

.neu-switch.active {
    background: linear-gradient(145deg, var(--neu-primary), #357abd);
}

.neu-switch.active .neu-switch-handle {
    left: 32px;
    box-shadow: 
        3px 3px 6px rgba(0, 0, 0, 0.2),
        -3px -3px 6px rgba(255, 255, 255, 0.8);
}

/* 响应式设计 */
@media (max-width: 768px) {
    :root {
        --neu-radius: 16px;
        --neu-radius-small: 10px;
        --neu-radius-large: 24px;
        --neu-spacing: 16px;
        --neu-spacing-small: 8px;
        --neu-spacing-large: 32px;
    }
    
    .neu-button {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .neu-input {
        padding: 10px 14px;
        font-size: 14px;
    }
    
    .neu-card {
        margin: var(--neu-spacing-small);
        padding: var(--neu-spacing);
    }
}

/* 动画效果 */
@keyframes neu-pulse {
    0% {
        box-shadow: 
            6px 6px 12px var(--neu-shadow-dark),
            -6px -6px 12px var(--neu-shadow-light);
    }
    50% {
        box-shadow: 
            10px 10px 20px var(--neu-shadow-dark),
            -10px -10px 20px var(--neu-shadow-light);
    }
    100% {
        box-shadow: 
            6px 6px 12px var(--neu-shadow-dark),
            -6px -6px 12px var(--neu-shadow-light);
    }
}

.neu-pulse {
    animation: neu-pulse 2s ease-in-out infinite;
}

/* 工具类 */
.neu-text-center { text-align: center; }
.neu-text-left { text-align: left; }
.neu-text-right { text-align: right; }

.neu-mb-small { margin-bottom: var(--neu-spacing-small); }
.neu-mb { margin-bottom: var(--neu-spacing); }
.neu-mb-large { margin-bottom: var(--neu-spacing-large); }

.neu-mt-small { margin-top: var(--neu-spacing-small); }
.neu-mt { margin-top: var(--neu-spacing); }
.neu-mt-large { margin-top: var(--neu-spacing-large); }

.neu-p-small { padding: var(--neu-spacing-small); }
.neu-p { padding: var(--neu-spacing); }
.neu-p-large { padding: var(--neu-spacing-large); }