/* 头部组件样式 */  
.app-header {  
    grid-area: header;  
    background: var(--surface-color);  
    border-bottom: 1px solid var(--border-color);  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    padding: 0 20px;  
    box-shadow: var(--shadow);  
    z-index: 100;  
}  
  
.app-title {  
    font-size: 18px;  
    font-weight: 600;  
    color: var(--primary-color);  
    display: flex;  
    align-items: center;  
    gap: 12px;  
    min-height: 28px;  
}  
  
/* 文字容器 - 确保垂直居中 */  
.title-text-wrapper {  
    display: flex;  
    align-items: center;  
    gap: 8px;  
    height: 100%;  
}  
  
/* 主标题 */  
.title-main {  
    font-size: 18px;  
    font-weight: 600;  
    line-height: 1;  
    display: flex;  
    align-items: center;  
}  

.title-rainbow {
    background: linear-gradient(
        120deg,
        #ff5a5f 0%,
        #ff9f1c 14%,
        #ffd166 28%,
        #06d6a0 42%,
        #00bbf9 58%,
        #7b61ff 74%,
        #f15bb5 88%,
        #ff5a5f 100%
    );
    background-size: 240% 240%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    animation: rainbowFlow 2.8s linear infinite;
}

.title-rest {
    color: var(--primary-color);
}

@keyframes rainbowFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
  
/* Logo 容器 */  
.app-header .header-logo-container {  
    width: 42px;  
    height: 28px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    position: relative;  
    flex-shrink: 0;  
    transition: transform 0.3s ease;  
}  
  
.app-header .header-logo-container:hover {  
    transform: translateY(-1px) scale(1.03);  
}  
  
/* Logo 图片 */  
.app-header .logo-icon {  
    width: auto;  
    height: 100%;  
    max-width: 100%;
    object-fit: contain;
    display: block;
}  
  
/* 副标题 */  
.app-subtitle {  
    font-size: 12px;  
    font-weight: 400;  
    color: var(--text-secondary);  
    line-height: 1;  
    display: flex;  
    align-items: center;  
}  
  
.app-status {  
    display: flex;  
    align-items: center;  
    gap: 15px;  
}  
  
.status-indicator {  
    display: flex;  
    align-items: center;  
    gap: 8px;  
    padding: 6px 12px;  
    background: var(--success-color);  
    color: white;  
    border-radius: 20px;  
    font-size: 12px;  
    font-weight: 500;  
}  
  
.status-dot {  
    width: 8px;  
    height: 8px;  
    border-radius: 50%;  
    background: currentColor;  
    animation: headerPulse 2s infinite;  
}  
  
.app-title-link {  
    text-decoration: none;  
    color: inherit;  
    cursor: pointer;  
}  
  
.app-title-link:hover .app-title {  
    color: var(--primary-color);  
    opacity: 0.8;  
}  
  
@keyframes headerPulse {  
    0%, 100% { opacity: 1; }  
    50% { opacity: 0.5; }  
}

.app-status {  
    display: flex;  
    align-items: center;  
    gap: 15px;  
    margin-left: auto; /* 推到右侧 */  
}  
  
/* 店铺徽章样式 */  
.shop-badge {  
    display: flex;  
    align-items: center;  
    gap: 6px;  
    padding: 6px 14px;  
    background: linear-gradient(135deg, #FF6600 0%, #FF8C00 100%);  
    color: white;  
    border-radius: 20px;  
    font-size: 13px;  
    font-weight: 600;  
    text-decoration: none;  
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.35);  
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);  
    position: relative;  
    overflow: visible;  
}  
  
.shop-badge:hover {  
    transform: translateY(-3px) scale(1.05);  
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.5);  
}  
  
/* 购物车图标 */  
.shop-cart-icon {  
    width: 16px;  
    height: 16px;  
    stroke: white;  
    stroke-width: 2;  
}  
  
/* HOT 徽章 */  
.shop-badge-hot {  
    position: absolute;  
    top: -8px;  
    right: -8px;  
    background: #FF3B30;  
    color: white;  
    font-size: 10px;  
    padding: 2px 6px;  
    border-radius: 8px;  
    font-weight: 700;  
    animation: badgePulse 1.5s infinite;  
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  
}  
  
/* HOT 徽章脉冲动画 */  
@keyframes badgePulse {  
    0%, 100% {   
        transform: scale(1);  
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);  
    }  
    50% {   
        transform: scale(1.1);  
        box-shadow: 0 0 0 4px rgba(255, 59, 48, 0);  
    }  
}  
  
/* 状态指示器保持原样式 */  
.status-indicator {  
    display: flex;  
    align-items: center;  
    gap: 8px;  
    padding: 6px 12px;  
    background: var(--success-color);  
    color: white;  
    border-radius: 20px;  
    font-size: 12px;  
    font-weight: 500;  
}