/**
 * Vue Mobile 主题样式文件
 * 直接借鉴 mobile-video-app.html 的6种设计风格
 * 每个主题的按钮颜色固定，使用!important覆盖行内样式
 */

/* ============================================
   主题1：极简卡片风格 - 紫色渐变
   ============================================ */
.theme-elegant body {
    background: #fff;
}

.theme-elegant #app {
    background: #fff;
}

.theme-elegant .points-container {
    background: linear-gradient(90deg, #f8f9ff 0%, #fff 100%);
    border-bottom: 2px solid #667eea;
}

.theme-elegant .points-number {
    color: #667eea !important;
    text-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.theme-elegant .points-label {
    color: #666;
}

.theme-elegant .points-text {
    color: #666;
}

.theme-elegant .points-text-line {
    color: #666;
}

.theme-elegant .description-line {
    background: rgba(102, 126, 234, 0.05);
    padding: 8px;
    border-radius: 8px;
    border-left: 4px solid #667eea;
    margin-bottom: 8px;
    color: #333;
}

/* 操作按钮：主色+次要色 */
.theme-elegant .action-btn {
    color: white !important;
}

.theme-elegant .action-btn:nth-child(1) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.theme-elegant .action-btn:nth-child(2) {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%) !important;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

/* 其他所有按钮：统一使用方形按钮样式 */
.theme-elegant .share-btn,
.theme-elegant .upload-qr-button,
.theme-elegant .number-button {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: 2px solid #dee2e6 !important;
    color: #495057 !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.theme-elegant .share-btn:hover,
.theme-elegant .upload-qr-button:hover,
.theme-elegant .number-button:hover {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
    color: #667eea !important;
    border-color: #667eea !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25);
}

/* ============================================
   主题2：清新自然风格 - 绿色
   ============================================ */
.theme-nature body {
    background: linear-gradient(180deg, #e8f5e8 0%, #fff 100%);
}

.theme-nature #app {
    background: linear-gradient(180deg, #e8f5e8 0%, #fff 100%);
}

.theme-nature .points-container {
    background: rgba(76, 175, 80, 0.1);
    border-bottom: 2px solid #4caf50;
}

.theme-nature .points-number {
    color: #4caf50 !important;
    text-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
}

.theme-nature .points-label {
    color: #666;
}

.theme-nature .points-text {
    color: #333;
}

.theme-nature .points-text-line {
    color: #333;
}

.theme-nature .description-line {
    background: rgba(76, 175, 80, 0.05);
    padding: 10px;
    border-radius: 4px;
    border-left: 4px solid #4caf50;
    margin-bottom: 8px;
    color: #333;
}

/* 操作按钮：主色+次要色 */
.theme-nature .action-btn {
    color: white !important;
}

.theme-nature .action-btn:nth-child(1) {
    background: #4caf50 !important;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.theme-nature .action-btn:nth-child(2) {
    background: #ff9800 !important;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
}

/* 其他所有按钮：统一使用方形按钮样式 */
.theme-nature .share-btn,
.theme-nature .upload-qr-button,
.theme-nature .number-button {
    background: rgba(76, 175, 80, 0.1) !important;
    border: 1px solid rgba(76, 175, 80, 0.3) !important;
    color: #495057 !important;
}

.theme-nature .share-btn:hover,
.theme-nature .upload-qr-button:hover,
.theme-nature .number-button:hover {
    background: #4caf50 !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

/* ============================================
   主题3：科技深色风格 - 青色
   ============================================ */
.theme-tech body {
    background: #1a1a1a;
    color: white;
}

.theme-tech #app {
    background: #1a1a1a;
}

.theme-tech .points-container {
    background: rgba(102, 126, 234, 0.2);
    border-bottom: 2px solid #667eea;
}

.theme-tech .points-number {
    color: #00bcd4 !important;
    text-shadow: 0 2px 4px rgba(0, 188, 212, 0.5);
}

.theme-tech .points-label {
    color: #ccc;
}

.theme-tech .points-text {
    color: #ccc;
}

.theme-tech .points-text-line {
    color: #ccc;
}

.theme-tech .description-line {
    background: rgba(0, 188, 212, 0.1);
    padding: 10px;
    border-radius: 8px;
    border-left: 4px solid #00bcd4;
    margin-bottom: 8px;
    color: #ccc;
}

/* 操作按钮：主色+次要色 */
.theme-tech .action-btn {
    color: white !important;
}

.theme-tech .action-btn:nth-child(1) {
    background: linear-gradient(135deg, #00bcd4 0%, #667eea 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3);
}

.theme-tech .action-btn:nth-child(2) {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

/* 其他所有按钮：统一使用方形按钮样式 */
.theme-tech .share-btn,
.theme-tech .upload-qr-button,
.theme-tech .number-button {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

.theme-tech .share-btn:hover,
.theme-tech .upload-qr-button:hover,
.theme-tech .number-button:hover {
    background: rgba(0, 188, 212, 0.3) !important;
    border-color: #00bcd4 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.4);
}

/* ============================================
   主题4：商务专业风格 - 深蓝色
   ============================================ */
.theme-business body {
    background: #f5f5f5;
}

.theme-business #app {
    background: #f5f5f5;
}

.theme-business .points-container {
    background: #fff;
    border-bottom: 3px solid #2c3e50;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.theme-business .points-number {
    color: #2c3e50 !important;
}

.theme-business .points-label {
    color: #666;
}

.theme-business .points-text {
    color: #333;
}

.theme-business .points-text-line {
    color: #333;
}

.theme-business .description-line {
    background: white;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-left: 4px solid #2c3e50;
    margin-bottom: 8px;
    color: #333;
}

/* 操作按钮：主色+次要色 */
.theme-business .action-btn {
    color: white !important;
}

.theme-business .action-btn:nth-child(1) {
    background: #2c3e50 !important;
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3);
}

.theme-business .action-btn:nth-child(2) {
    background: #e74c3c !important;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

/* 其他所有按钮：统一使用方形按钮样式 */
.theme-business .share-btn,
.theme-business .upload-qr-button,
.theme-business .number-button {
    background: white !important;
    border: 2px solid #ecf0f1 !important;
    color: #495057 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.theme-business .share-btn:hover,
.theme-business .upload-qr-button:hover,
.theme-business .number-button:hover {
    border-color: #2c3e50 !important;
    color: #2c3e50 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* ============================================
   主题5：甜美粉色风格
   ============================================ */
.theme-sweet body {
    background: linear-gradient(180deg, #fce4ec 0%, #fff 100%);
    color: #333;
}

.theme-sweet #app {
    background: linear-gradient(180deg, #fce4ec 0%, #fff 100%);
}

.theme-sweet .points-container {
    background: linear-gradient(90deg, #ff4081 0%, #e91e63 100%);
    color: white;
    border-bottom: 3px solid #e91e63;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);
}

.theme-sweet .points-number {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.theme-sweet .points-label {
    color: rgba(255,255,255,0.9);
}

.theme-sweet .points-text {
    color: rgba(255,255,255,0.95);
}

.theme-sweet .points-text-line {
    color: rgba(255,255,255,0.95);
}

.theme-sweet .description-line {
    background: rgba(255, 64, 129, 0.1);
    padding: 10px;
    border-radius: 8px;
    color: #333;
    border-left: 4px solid #e91e63;
    margin-bottom: 8px;
}

/* 操作按钮：主色+次要色 */
.theme-sweet .action-btn {
    color: white !important;
}

.theme-sweet .action-btn:nth-child(1) {
    background: linear-gradient(135deg, #ff4081 0%, #e91e63 100%) !important;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);
}

.theme-sweet .action-btn:nth-child(2) {
    background: #ff6ec7 !important;
    box-shadow: 0 4px 15px rgba(255, 110, 199, 0.3);
}

/* 其他所有按钮：统一使用方形按钮样式 */
.theme-sweet .share-btn,
.theme-sweet .upload-qr-button,
.theme-sweet .number-button {
    background: rgba(255, 64, 129, 0.1) !important;
    border: 2px solid rgba(255, 64, 129, 0.3) !important;
    color: #495057 !important;
}

.theme-sweet .share-btn:hover,
.theme-sweet .upload-qr-button:hover,
.theme-sweet .number-button:hover {
    background: #ff4081 !important;
    color: white !important;
    border-color: #e91e63 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 30, 99, 0.4);
}

/* ============================================
   主题6：活力橙色风格
   ============================================ */
.theme-energy body {
    background: linear-gradient(180deg, #fff3e0 0%, #fff 100%);
    color: #333;
}

.theme-energy #app {
    background: linear-gradient(180deg, #fff3e0 0%, #fff 100%);
}

.theme-energy .points-container {
    background: linear-gradient(90deg, #ff9800 0%, #f57c00 100%);
    color: white;
    border-bottom: 3px solid #f57c00;
    box-shadow: 0 4px 15px rgba(245, 124, 0, 0.3);
}

.theme-energy .points-number {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.theme-energy .points-label {
    color: rgba(255,255,255,0.9);
}

.theme-energy .points-text {
    color: rgba(255,255,255,0.95);
}

.theme-energy .points-text-line {
    color: rgba(255,255,255,0.95);
}

.theme-energy .description-line {
    background: rgba(255, 152, 0, 0.1);
    padding: 10px;
    border-radius: 8px;
    color: #333;
    border-left: 4px solid #f57c00;
    margin-bottom: 8px;
}

/* 操作按钮：主色+次要色 */
.theme-energy .action-btn {
    color: white !important;
}

.theme-energy .action-btn:nth-child(1) {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%) !important;
    box-shadow: 0 4px 15px rgba(245, 124, 0, 0.3);
}

.theme-energy .action-btn:nth-child(2) {
    background: #ff7043 !important;
    box-shadow: 0 4px 15px rgba(255, 112, 67, 0.3);
}

/* 其他所有按钮：统一使用方形按钮样式 */
.theme-energy .share-btn,
.theme-energy .upload-qr-button,
.theme-energy .number-button {
    background: rgba(255, 152, 0, 0.1) !important;
    border: 2px solid rgba(255, 152, 0, 0.3) !important;
    color: #495057 !important;
}

.theme-energy .share-btn:hover,
.theme-energy .upload-qr-button:hover,
.theme-energy .number-button:hover {
    background: #ff9800 !important;
    color: white !important;
    border-color: #f57c00 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 124, 0, 0.4);
}