/* layout.css - Header布局、词表选择器、按钮组、卡片网格 */

.header {
    background: white;
    padding: 12px 40px;
    width: 100%;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    gap: 20px;
}

/**
 * header-scroll.js 通过动态添加此 class 控制吸附动画
 */
.header.is-snapping {
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/**
 * Header 未完全显示时禁止点击穿透
 */
.header.header-hidden {
    pointer-events: none;
}

/**
 * 无障碍：尊重减少动画偏好（animations.css 已有全局规则覆盖 transition-duration）
 */

/* 核心：语音和按钮的大组容器，始终横向排列 */
.controls-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    /* 语音组和按钮组的间距 */
    flex-shrink: 0;
}

.wordlist-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.wordlist-select-wrapper {
    position: relative;
}

.btn-group {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* 按钮与下拉框对齐优化 */
.btn {
    white-space: nowrap !important;
    /* 禁止换行防止按钮变高 */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 24px;
    font-weight: 600;
    min-width: max-content;
}

.header-title h1 {
    margin: 0;
    font-size: 6rem;
}

/* 桌面端标题行布局：水平排列，基线对齐 */
.title-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Header brand mark (left of title) */
.app-mark {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 12px;
    object-fit: cover;
}

.stats-bar {
    font-size: 1.3rem;
    color: #64748b;
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.author-info {
    font-size: 1.3rem;
    color: #64748b;
    /* margin-top removed for flex alignment */
}

.wordlist-label {
    font-size: 24px;
    white-space: nowrap;
    color: #64748b;
    flex-shrink: 0;
}

#wordContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    padding: 25px 40px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    overflow-anchor: none;
}