/* 2026-09-03 上线前视觉精修：学习轨道舱、Pad 同屏学习、紧凑声音设置。 */
.rail-brand,
.rail-track-label,
.rail-note { display: none; }

.tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.settings-compact-group {
    display: grid;
    margin: 4px 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft);
    overflow: clip;
}

.settings-compact-group .settings-row {
    min-height: 44px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
}

.settings-compact-group .settings-row:last-child { border-bottom: 0; }
.settings-compact-group .switch-label { min-width: 0; gap: 12px; }
.settings-compact-group .switch-label span { min-width: 0; }
.settings-compact-group .switch-label input { flex: 0 0 auto; }

/* Pad：学习主任务同屏，只有右侧扩展资料承担独立纵向滚动。 */
@media (min-width: 768px) and (max-width: 1194px) and (min-height: 700px) {
    html,
    body {
        height: 100%;
        min-height: 0;
    }

    body {
        height: 100dvh;
        overflow: hidden;
    }

    .app {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    #panels {
        display: flex;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    #panel-learn.panel.mode-panel {
        height: auto;
        min-height: 0;
        overflow: visible;
        padding-bottom: 10px;
    }

    #panel-learn .filter-bar,
    #panel-learn .learn-progress { flex: 0 0 auto; }

    #learn-card {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        flex: 1 1 0;
        min-height: 0;
        gap: 8px;
        padding: 12px;
        overflow: hidden;
    }

    #learn-card .mode-status-bar { grid-row: 1; }
    #learn-card .card-top.learn-top { grid-row: 2; }
    #learn-card .kb-area { grid-row: 3; }

    #learn-card .card-top.learn-top {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
        align-items: stretch;
        overflow: hidden;
        padding-block: 10px;
    }

    #learn-card .learn-core {
        align-self: center;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    #learn-card .learn-word-row,
    #learn-card .learn-head { min-width: 0; max-width: 100%; overflow: hidden; }

    #learn-card .learn-word-row.word-overflow .big-word { overflow-x: hidden; }
    #learn-card #learn-word-display .letter-map { padding-inline: 3px; margin-inline: 0; }

    #learn-card .learn-details-scroll {
        align-self: stretch;
        min-height: 0;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    #learn-card .kb-area {
        flex: 0 0 auto;
        margin-top: 0;
    }
}

/* 横屏 Pad 与桌面：四站“学习轨道舱”。导航形态由可用空间决定，不依赖指针类型。 */
@media (min-width: 1024px) and (orientation: landscape) {
    .app {
        display: grid;
        grid-template-columns: 184px minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr);
        max-width: 1380px;
        padding-left: 0;
    }

    .topbar,
    .progress-card,
    #panels {
        grid-column: 2;
    }

    .tabbar {
        position: fixed;
        z-index: 50;
        inset: 0 auto 0 max(0px, calc((100% - 1380px) / 2));
        width: 184px;
        max-width: none;
        transform: none;
        flex-direction: column;
        padding: 24px 16px 20px;
        justify-content: flex-start;
        align-items: stretch;
        gap: 9px;
        overflow: hidden;
        background:
            radial-gradient(circle at 14% 6%, rgba(113, 87, 184, .14), transparent 31%),
            linear-gradient(180deg, rgba(247, 251, 250, .98), rgba(234, 242, 239, .98));
        border-right: 1px solid rgba(19, 37, 58, .12);
        box-shadow: 12px 0 36px rgba(25, 62, 72, .08);
        backdrop-filter: blur(18px);
    }

    .rail-brand {
        display: grid;
        gap: 3px;
        min-height: 82px;
        padding: 10px 9px 14px;
        border-bottom: 1px solid rgba(19, 37, 58, .10);
    }

    .rail-brand-mark {
        color: var(--ink);
        font-family: "Trebuchet MS", "Aptos", sans-serif;
        font-size: 19px;
        font-weight: 900;
        letter-spacing: -.03em;
    }

    .rail-brand-copy {
        color: var(--text-2);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.45;
    }

    .rail-track-label {
        display: block;
        margin: 8px 0 1px 12px;
        color: var(--text-3);
        font-family: Bahnschrift, "Segoe UI", sans-serif;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .18em;
    }

    .tabbar::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 154px;
        bottom: 76px;
        left: 39px;
        width: 2px;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(35, 102, 209, .20), rgba(113, 87, 184, .38), rgba(47, 155, 105, .20));
    }

    .tabbar .tab-btn {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: 1fr;
        align-items: center;
        justify-items: start;
        min-height: 70px;
        flex: 0 0 auto;
        padding: 9px 10px 9px 0;
        gap: 9px;
        border: 1px solid transparent;
        border-radius: 16px;
        color: var(--text-2);
        text-align: left;
        transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .tabbar .tab-icon {
        width: 46px;
        height: 46px;
        border: 1px solid rgba(19, 37, 58, .10);
        border-radius: 15px;
        background: rgba(255, 255, 255, .76);
        box-shadow: 0 5px 14px rgba(25, 62, 72, .06);
        font-size: 21px;
    }

    .tabbar .tab-label {
        display: grid;
        gap: 2px;
        color: inherit;
        font-size: 14px;
        font-weight: 850;
        letter-spacing: .02em;
    }


    .tabbar .tab-btn:focus-visible {
        outline-offset: 2px;
        background: rgba(255, 255, 255, .82);
    }

    .tabbar .tab-btn.active {
        color: #174b9c;
        background: linear-gradient(105deg, #ffffff, #e9f2ff);
        border-color: rgba(35, 102, 209, .26);
        box-shadow: 0 10px 24px rgba(35, 102, 209, .14);
    }

    .tabbar .tab-btn.active .tab-icon {
        color: #fff;
        border-color: #2366d1;
        background: linear-gradient(145deg, #2366d1, #7157b8);
        box-shadow: 0 7px 18px rgba(35, 102, 209, .28);
    }

    .tabbar .tab-btn.active .tab-label::after {
        content: "当前站";
        color: #52667a;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .04em;
    }

    .tabbar .tab-btn.active::before {
        top: 50%;
        left: -8px;
        width: 4px;
        height: 34px;
        transform: translateY(-50%);
        background: var(--primary);
    }

    .tabbar .tab-badge {
        position: absolute;
        z-index: 2;
        top: 7px;
        left: 32px;
        margin: 0;
        min-width: 19px;
        height: 19px;
        border: 2px solid var(--card);
        box-shadow: 0 3px 8px rgba(216, 92, 80, .24);
    }

    .rail-note {
        display: block;
        position: relative;
        z-index: 1;
        margin-top: auto;
        padding: 10px 8px 0;
        border-top: 1px solid rgba(19, 37, 58, .10);
        color: var(--text-3);
        font-size: 10px;
        line-height: 1.5;
    }
}

@media (min-width: 1024px) and (orientation: landscape) and (hover: hover) {
    .tabbar .tab-btn:hover {
        transform: translateX(3px);
        color: var(--primary);
        background: rgba(255, 255, 255, .58);
        border-color: rgba(35, 102, 209, .14);
    }
}

@media (min-width: 1024px) and (orientation: landscape) and (prefers-color-scheme: dark) {
    .tabbar {
        background:
            radial-gradient(circle at 14% 6%, rgba(182, 162, 255, .15), transparent 31%),
            linear-gradient(180deg, rgba(22, 40, 38, .99), rgba(16, 32, 30, .99));
        border-right-color: rgba(201, 216, 211, .14);
    }
    .rail-brand { border-bottom-color: rgba(201, 216, 211, .14); }
    .tabbar .tab-icon { background: #203431; border-color: #3a514d; }
    .tabbar .tab-btn.active {
        color: #e5eeff;
        background: linear-gradient(105deg, #26445c, #292f54);
        border-color: #5f79a2;
    }
    .tabbar .tab-btn.active .tab-label::after { color: #c9d8d3; }
    .tabbar .tab-badge { border-color: #1a2b2a; }
    .rail-note { border-top-color: rgba(201, 216, 211, .14); }
}

@media (min-width: 1024px) and (orientation: landscape) and (hover: hover) and (prefers-color-scheme: dark) {
    .tabbar .tab-btn:hover { background: #203431; border-color: #476761; }
}

@media (prefers-reduced-motion: reduce) {
    .tabbar .tab-btn:hover { transform: none; }
}