/* 头部组件样式 */  
.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;  
    height: 24px;  
}  
  
/* 文字容器 - 确保垂直居中 */  
.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;  
}  
  
/* Logo 容器 */  
.app-header .header-logo-container {  
    width: 24px;  
    height: 24px;  
    background: linear-gradient(145deg, #1a1f35, #252b46);  
    border-radius: 6px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    position: relative;  
    box-shadow:   
        0 2px 8px rgba(37, 99, 235, 0.2),  
        inset 0 0 8px rgba(255, 255, 255, 0.05);  
    border: 1px solid rgba(255, 255, 255, 0.1);  
    flex-shrink: 0;  
    transition: transform 0.3s ease;  
}  
  
.app-header .header-logo-container:hover {  
    transform: translateY(-2px) scale(1.05);  
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);  
}  
  
/* SVG 图标 */  
.app-header .logo-icon {  
    width: 16px;  
    height: 16px;  
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.3));  
}  
  
/* 轨道路径 */  
.app-header .orbit-path {  
    fill: none;  
    stroke-width: 2;  
    stroke-linecap: round;  
    transform-origin: center;  
}  
  
.app-header .orbit-1 {  
    stroke: #00e5ff;  
    animation: spin-cw 4s linear infinite;  
    stroke-dasharray: 60;  
}  
  
.app-header .orbit-2 {  
    stroke: #bd00ff;  
    animation: spin-ccw 5s linear infinite;  
    stroke-dasharray: 40;  
    opacity: 0.8;  
}  
  
.app-header .core-x {  
    animation: breathe 2.5s infinite ease-in-out;  
}  
  
/* 动画定义 */  
@keyframes spin-cw {  
    from { transform: rotate(0deg); }  
    to { transform: rotate(360deg); }  
}  
  
@keyframes spin-ccw {  
    from { transform: rotate(360deg); }  
    to { transform: rotate(0deg); }  
}  
  
@keyframes breathe {  
    0%, 100% { transform: scale(1); }  
    50% { transform: scale(0.95); }  
}  
  
/* 副标题 */  
.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;  
}