/* =========================================
   1. Base / PC Styles (Default)
   ========================================= */

body {
    background-color: var(--grey-900);
    color: #ffffff;            
    margin: 0;
}

a { text-decoration: none; color: inherit; transition: color 0.2s; }
button { font-family: inherit; } 

/* === Header Container === */
.app-header {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%;
    height: 74px; /* PC 固定高度 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    z-index: 1000;
    box-sizing: border-box;
    background-color: var(--grey-900);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* 可选：增加一条底部分割线 */
}

/* === Left Area === */
.header-left {
    display: flex; 
    align-items: center; 
    gap: 24px; 
}

/* 汉堡菜单 */
.sidebar-toggle {
    background: none; 
    border: none; 
    color: #848e9c; 
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.sidebar-toggle:hover { color: #fff; }

/* Logo */
.logo-area {
    display: flex; 
    align-items: center; 
    gap: 4px; 
    user-select: none; 
}
.logo-area img {
    height: 32px; /* PC Logo 高度 */
    width: auto;
}

/* 快捷链接 */
.header-shortcuts {
    display: flex; 
    gap: 24px; 
    margin-left: 12px;
}

.shortcut-link {
    display: flex; 
    align-items: center; 
    gap: 8px; 
    color: #fff; 
    font-weight: 700; 
    font-size: 20px; /* 您的参数 */
}
.shortcut-link.is-green { color: var(--green-500); } 

/* === Right Area === */
.header-right {
    display: flex;
    align-items: center;
    gap: 16px; 
}

.social-icon-link {
    width: 40px;
    height: 40px;
    transition: opacity 0.2s;
    display: flex; /* 确保内部图标居中 */
    align-items: center;
    justify-content: center;
}
.social-icon-link:hover { opacity: 0.8; }

/* 语言切换器 */
.lang-dropdown-wrapper {
    position: relative; 
    display: inline-block;
}

.lang-toggle {
    height: 40px;
    padding: 8px 16px; 
    gap: 10px;
    border-radius: 100px; 
    display: flex;
    align-items: center;
    justify-content: space-between; 
    background-color: var(--bg-body);
    border: 1px solid transparent;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-base);
    font-size: 14px;
}

.lang-current {
    display: flex;
    align-items: center;
    gap: 8px; 
}

.lang-flag {
    width: 24px;
    height: 24px;
    border-radius: 50%; 
    object-fit: cover;
}

.lang-text { font-weight: 500; }

.lang-menu {
    display: none; 
    position: absolute;
    top: 48px; 
    right: 0;
    width: 160px; 
    background-color: var(--bg-body);
    border: 1px solid #374151;
    border-radius: 12px;
    padding: 8px;
    list-style: none;
    margin: 0;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.lang-menu.show { display: block; animation: fadeIn 0.2s ease; }

.lang-menu li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: #ccc;
    font-size: 14px;
    transition: background 0.2s;
}

.lang-menu li:hover { background-color: rgba(255,255,255,0.1); color: #fff; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}


/* =========================================
   2. Tablet Styles (769px - 1399px)
   ========================================= */
@media screen and (min-width: 769px) and (max-width: 1399px) {
    .app-header {
        height: 90px !important; /* 平板稍微高一点 */
        padding: 0 24px !important;
    }

    /* 空间不够，隐藏文字快捷入口 */
    .header-shortcuts {
        display: none !important;
    }

    /* 按钮调整：登录只显示图标，注册隐藏 */
    .header-right .btn-primary { 
        display: none !important; 
    }
    
    .header-right .btn-outline-white {
        font-size: 0 !important; /* 隐藏文字 */
        padding: 0 !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 语言切换器微调 */
    .lang-toggle {
        padding-left: 0;
        background: transparent; /* 平板上可能去掉背景更好看 */
    }
}


/* =========================================
   3. Mobile Styles (max-width: 768px)
   ========================================= */
@media screen and (max-width: 768px) {
    .app-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100px !important; /* 手机端更高，通常包含状态栏空间 */
        align-items: flex-end !important; /* 元素靠底部对齐 */
        padding: 0 16px 16px 16px !important;
        background-color: var(--grey-900);
        z-index: 9999;
    }

    /* 隐藏 PC 端的大块内容 */
    .header-shortcuts {
        display: none !important;
    }

    /* 左右区域布局更紧凑 */
    .header-left,
    .header-right {
        gap: 0 !important;
    }

    /* Logo 缩小 */
    .logo-area img {
        height: 24px !important;
        width: auto;
    }

    /* 语言切换器：只留国旗和箭头，隐藏文字 */
    .lang-text {
        display: none !important;
    }
    .lang-toggle {
        padding: 0 !important;
        padding-left: 8px !important;
        gap: 4px !important;
        background: transparent !important;
        border: none !important;
        width: auto !important;
    }

    /* 按钮：隐藏注册，登录变小图标 */
    .header-right .btn-primary {
        display: none !important;
    }

    .header-right .btn-outline-white {
        font-size: 0 !important;
        width: 32px;
        height: 24px;
        padding: 0 !important;
        border: none !important; 
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
    }

    /* 调整按钮内的图标大小 */
    .header-right .btn-outline-white img {
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
    }

    /* 社交图标调整 */
    .social-icon-link {
        padding-right: 8px !important;
        width: 32px !important; /* 缩小一点 */
    }
    
    .social-icon-link img {
        width: 24px !important;
        height: 24px !important;
    }
}