/* 优化后的CSS - 提取首页内联样式 */

/* 登录状态栏 */
.login-status-bar {
    background: #FFF4F0;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #FFE4D6;
}

.login-status-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.login-status-inner:hover {
    opacity: 0.85;
}

.login-status-icon {
    font-size: 16px;
}

.login-status-text {
    font-size: 13px;
}

.login-btn {
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
}

.login-btn:hover {
    background: #FF8C42;
}

/* 横幅样式 */
.banner-slide-primary {
    background: linear-gradient(135deg, #FF6B35, #FF8C42);
}

.banner-slide-success {
    background: linear-gradient(135deg, #4CAF82, #45B7AA);
}

.banner-slide-purple {
    background: linear-gradient(135deg, #9B6EF3, #C084FC);
}

/* 服务图标颜色 */
.service-icon-yellow {
    background: #FFF3E0;
}

.service-icon-pink {
    background: #FCE4EC;
}

.service-icon-green {
    background: #E8F5E9;
}

.service-icon-blue {
    background: #E3F2FD;
}

.service-icon-purple {
    background: #F3E5F5;
}

.service-icon-amber {
    background: #FFF8E1;
}

.service-icon-cyan {
    background: #E0F7FA;
}

.service-icon-orange {
    background: #FBE9E7;
}

/* 图片懒加载占位符 */
.lazy-load-placeholder {
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}

/* 加载动画 */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #FF6B35;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 错误提示 */
.error-message {
    background: #FFEBEE;
    color: #C62828;
    padding: 10px 15px;
    border-radius: 8px;
    margin: 10px 0;
    font-size: 14px;
}

.success-message {
    background: #E8F5E9;
    color: #2E7D32;
    padding: 10px 15px;
    border-radius: 8px;
    margin: 10px 0;
    font-size: 14px;
}

/* 响应式优化 */
@media (max-width: 360px) {
    .login-status-text {
        font-size: 12px;
    }
    
    .login-btn {
        padding: 4px 10px;
        font-size: 11px;
    }
}

/* 性能优化类 */
.perf-hidden {
    opacity: 0;
    transition: opacity 0.3s;
}

.perf-visible {
    opacity: 1;
}

/* 触摸优化 */
.touch-friendly {
    min-height: 44px;
    min-width: 44px;
}

/* 减少重绘 */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}