/* ============================================================
   BINGO PTE · 统一设计系统  pte-ui.css
   2026-11-03 建立
   参考猩际 PTE 的信息层级与视觉语言（青色品牌色 + 圆角卡片 + 题型徽章 + 双段进度条），
   但颜色一律走 CSS 变量，跟随全站四套主题（/theme.css）。

   用法：
     <link rel="stylesheet" href="/theme.css">
     <link rel="stylesheet" href="/pte-ui.css">
   注意：页面**不要**再自己写 :root 颜色变量，否则会覆盖 theme.css 的深色默认。
   ============================================================ */

:root {
    /* ---- 品牌青（PTE 板块主色） ---- */
    --pte-brand: #12BDAA;
    --pte-brand-light: #3DDCBF;
    --pte-brand-dark: #0E9E8F;
    --pte-brand-soft: rgba(18, 189, 170, 0.12);
    --pte-brand-soft2: rgba(18, 189, 170, 0.06);

    /* ---- 语义色 ---- */
    --pte-ok: #10B981;
    --pte-ok-soft: rgba(16, 185, 129, 0.12);
    --pte-bad: #EF4444;
    --pte-bad-soft: rgba(239, 68, 68, 0.10);
    --pte-warn: #F59E0B;
    --pte-warn-soft: rgba(245, 158, 11, 0.12);
    --pte-info: #3B82F6;
    --pte-info-soft: rgba(59, 130, 246, 0.12);
    --pte-purple: #A855F7;
    --pte-purple-soft: rgba(168, 85, 247, 0.12);

    /* ---- 表面 / 文字 / 边框（跟随全站主题变量） ---- */
    --pte-page: var(--bg-primary);
    --pte-surface: var(--bg-card);
    --pte-surface-2: var(--bg-secondary);
    --pte-line: var(--border);
    --pte-text: var(--text-primary);
    --pte-text-2: var(--text-secondary);
    --pte-text-3: var(--text-muted);

    /* ---- 形状 ---- */
    --pte-r-sm: 8px;
    --pte-r-md: 12px;
    --pte-r-lg: 16px;
    --pte-r-xl: 20px;
    --pte-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.05);
    --pte-shadow-lg: 0 8px 28px rgba(16, 24, 40, 0.10);

    --pte-sidebar-w: 208px;
    --pte-topbar-h: 58px;
}

/* 深色主题下把卡片阴影收敛，避免发灰 */
.theme-dark {
    --pte-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.22);
    --pte-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.38);
}

/* ============================================================
   1. 外壳：侧边栏 + 主区
   ============================================================ */
.pte-shell {
    display: flex;
    min-height: 100vh;
    background: var(--pte-page);
}

.pte-sidebar {
    width: var(--pte-sidebar-w);
    flex: 0 0 var(--pte-sidebar-w);
    background: var(--pte-surface);
    border-right: 1px solid var(--pte-line);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    overflow-y: auto;
    transition: transform .22s ease;
}

.pte-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--pte-line);
    flex-shrink: 0;
}
.pte-sidebar-brand .logo {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, var(--pte-brand), var(--pte-brand-light));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px; flex-shrink: 0;
}
.pte-sidebar-brand .name {
    font-size: 14.5px; font-weight: 800; color: var(--pte-text); line-height: 1.15;
}
.pte-sidebar-brand .sub {
    font-size: 11px; color: var(--pte-text-3); margin-top: 2px; letter-spacing: .3px;
}

.pte-nav { padding: 10px 10px 20px; flex: 1; }
.pte-nav-group-title {
    font-size: 11px; font-weight: 700; color: var(--pte-text-3);
    padding: 12px 10px 6px; letter-spacing: .6px;
}
.pte-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--pte-r-sm);
    color: var(--pte-text-2); font-size: 13.5px; text-decoration: none;
    margin-bottom: 2px; transition: background .15s, color .15s;
    position: relative;
}
.pte-nav-item i { width: 16px; text-align: center; font-size: 14px; opacity: .85; }
.pte-nav-item:hover { background: var(--pte-brand-soft2); color: var(--pte-brand); }
.pte-nav-item.active {
    background: var(--pte-brand-soft); color: var(--pte-brand); font-weight: 700;
}
.pte-nav-item.active::before {
    content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--pte-brand);
}
.pte-nav-item .tag {
    margin-left: auto; font-size: 10px; padding: 1px 6px; border-radius: 5px;
    background: var(--pte-brand); color: #fff; font-weight: 700;
}

.pte-main {
    flex: 1;
    min-width: 0;
    margin-left: var(--pte-sidebar-w);
    display: flex;
    flex-direction: column;
}

.pte-topbar {
    height: var(--pte-topbar-h);
    flex-shrink: 0;
    background: var(--pte-surface);
    border-bottom: 1px solid var(--pte-line);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    position: sticky;
    top: 0;
    z-index: 40;
}
.pte-topbar .crumb { font-size: 12.5px; color: var(--pte-text-3); }
.pte-topbar .crumb b { color: var(--pte-text); font-weight: 700; font-size: 14px; }
.pte-topbar .spacer { flex: 1; }
.pte-topbar-user {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--pte-text-2);
}
.pte-topbar-user .avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--pte-brand), var(--pte-brand-light));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}

.pte-content {
    flex: 1;
    padding: 20px 22px 60px;
    max-width: 1400px;
    width: 100%;
    box-sizing: border-box;
}

.pte-page-title {
    font-size: 19px; font-weight: 800; color: var(--pte-text); margin: 0 0 4px;
    display: flex; align-items: center; gap: 9px;
}
.pte-page-desc { font-size: 13px; color: var(--pte-text-3); margin: 0 0 18px; }

/* 移动端抽屉 */
.pte-sidebar-mask {
    display: none; position: fixed; inset: 0; background: rgba(4, 8, 20, .45);
    z-index: 55;
}
.pte-menu-btn {
    display: none; background: transparent; border: none; cursor: pointer;
    color: var(--pte-text-2); font-size: 17px; padding: 6px;
}

/* ============================================================
   2. 卡片 / 栅格
   ============================================================ */
.pte-card {
    background: var(--pte-surface);
    border: 1px solid var(--pte-line);
    border-radius: var(--pte-r-lg);
    box-shadow: var(--pte-shadow);
    padding: 18px 20px;
    box-sizing: border-box;
}
.pte-card + .pte-card { margin-top: 14px; }
.pte-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.pte-card-title {
    font-size: 14.5px; font-weight: 800; color: var(--pte-text);
    display: flex; align-items: center; gap: 8px;
}
.pte-card-title i { color: var(--pte-brand); font-size: 14px; }
.pte-card-more {
    font-size: 12.5px; color: var(--pte-text-3); text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
}
.pte-card-more:hover { color: var(--pte-brand); }

.pte-grid { display: grid; gap: 14px; }
.pte-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pte-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pte-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pte-grid-auto { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ============================================================
   3. 题型徽章（对齐猩际的彩色缩写块）
   ============================================================ */
.pte-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 22px; padding: 0 6px;
    border-radius: 6px; font-size: 11px; font-weight: 800;
    letter-spacing: .2px; color: #fff; flex-shrink: 0;
    line-height: 1;
}
.pte-badge.ra, .pte-badge.rs   { background: #F26D6D; }  /* 口语 红 */
.pte-badge.di, .pte-badge.arl  { background: #F5A623; }  /* 橙 */
.pte-badge.rl, .pte-badge.asq  { background: #EFA13C; }
.pte-badge.sgd, .pte-badge.rts { background: #F58B54; }
.pte-badge.swt, .pte-badge.we  { background: #4CC38A; }
.pte-badge.rq                  { background: #5B9BF8; }
.pte-badge.fib, .pte-badge.fibd { background: #5B9BF8; }
.pte-badge.mcsr                { background: #D9B44A; }
.pte-badge.mcmr                { background: #E8657A; }
.pte-badge.sst                 { background: #6C93E8; }
.pte-badge.fibl                { background: #9B7BD4; }
.pte-badge.hiw, .pte-badge.wfd { background: #A46BC8; }
.pte-badge.mcml, .pte-badge.mcsl { background: #6C93E8; }
.pte-badge.smw, .pte-badge.hcs  { background: #5EBD8A; }
.pte-badge.sgd2                { background: #F58B54; }

/* ============================================================
   4. 统计 / 进度条
   ============================================================ */
.pte-stat-row { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; }
.pte-stat { display: flex; flex-direction: column; gap: 3px; }
.pte-stat .num {
    font-size: 24px; font-weight: 800; color: var(--pte-brand); line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.pte-stat .num.plain { color: var(--pte-text); }
.pte-stat .lab { font-size: 12px; color: var(--pte-text-3); }

/* 双段进度条：我的 vs 目标 */
.pte-rate {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; border-bottom: 1px dashed var(--pte-line);
}
.pte-rate:last-child { border-bottom: none; }
.pte-rate .rate-label {
    display: flex; align-items: center; gap: 7px; flex-shrink: 0;
}
.pte-rate .rate-track {
    flex: 1; height: 7px; border-radius: 4px;
    background: var(--pte-surface-2); position: relative; overflow: hidden; min-width: 40px;
}
.pte-rate .rate-fill {
    height: 100%; border-radius: 4px; transition: width .5s ease;
    background: var(--pte-brand);
}
.pte-rate .rate-target {
    position: absolute; top: -2px; bottom: -2px; width: 2px;
    background: var(--pte-text-3); opacity: .55;
}
.pte-rate .rate-nums {
    flex-shrink: 0; font-size: 12px; color: var(--pte-text-2);
    font-variant-numeric: tabular-nums; min-width: 96px; text-align: right;
}
.pte-rate.ok .rate-fill { background: var(--pte-ok); }
.pte-rate.ok .rate-nums { color: var(--pte-ok); font-weight: 700; }
.pte-delta { font-size: 11px; padding: 1px 5px; border-radius: 4px; font-weight: 700; }
.pte-delta.up { color: var(--pte-ok); background: var(--pte-ok-soft); }
.pte-delta.down { color: var(--pte-bad); background: var(--pte-bad-soft); }

/* 简单单条进度 */
.pte-bar { height: 6px; border-radius: 3px; background: var(--pte-surface-2); overflow: hidden; }
.pte-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--pte-brand); }

/* ============================================================
   5. 按钮
   ============================================================ */
.pte-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--pte-r-sm);
    border: 1px solid var(--pte-line); background: var(--pte-surface);
    color: var(--pte-text-2); font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: none; font-family: inherit;
    transition: all .15s; white-space: nowrap;
}
.pte-btn:hover { border-color: var(--pte-brand); color: var(--pte-brand); }
.pte-btn-primary {
    background: linear-gradient(135deg, var(--pte-brand), var(--pte-brand-light));
    border-color: transparent; color: #fff;
    box-shadow: 0 2px 8px rgba(18, 189, 170, .28);
}
.pte-btn-primary:hover { color: #fff; opacity: .93; border-color: transparent; }
.pte-btn-ghost { background: transparent; border-color: transparent; color: var(--pte-text-2); }
.pte-btn-ghost:hover { background: var(--pte-brand-soft2); }
.pte-btn-sm { padding: 5px 11px; font-size: 12.5px; }
.pte-btn-danger { color: var(--pte-bad); border-color: rgba(239,68,68,.35); }
.pte-btn-danger:hover { background: var(--pte-bad-soft); border-color: var(--pte-bad); color: var(--pte-bad); }
.pte-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 胶囊（评分详情这类） */
.pte-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: 999px; font-size: 12.5px;
    border: 1px solid var(--pte-brand); color: var(--pte-brand);
    background: transparent; cursor: pointer; font-family: inherit;
    text-decoration: none;
}
.pte-pill:hover { background: var(--pte-brand-soft); }
.pte-pill.solid { background: var(--pte-brand-soft); font-weight: 600; }

/* ============================================================
   6. 标签页 / 分段控件
   ============================================================ */
.pte-tabs {
    display: flex; gap: 4px; border-bottom: 1px solid var(--pte-line);
    margin-bottom: 16px; overflow-x: auto; scrollbar-width: none;
}
.pte-tabs::-webkit-scrollbar { display: none; }
.pte-tab {
    padding: 9px 16px; font-size: 13.5px; color: var(--pte-text-2);
    border: none; background: transparent; cursor: pointer; font-family: inherit;
    border-bottom: 2px solid transparent; white-space: nowrap; transition: all .15s;
}
.pte-tab:hover { color: var(--pte-brand); }
.pte-tab.active { color: var(--pte-brand); font-weight: 700; border-bottom-color: var(--pte-brand); }

.pte-seg {
    display: inline-flex; background: var(--pte-surface-2); border-radius: var(--pte-r-sm);
    padding: 3px; gap: 2px;
}
.pte-seg button {
    border: none; background: transparent; padding: 6px 14px; border-radius: 6px;
    font-size: 12.5px; color: var(--pte-text-2); cursor: pointer; font-family: inherit;
    transition: all .15s;
}
.pte-seg button.active {
    background: var(--pte-surface); color: var(--pte-brand); font-weight: 700;
    box-shadow: 0 1px 3px rgba(16,24,40,.08);
}

.pte-chip {
    padding: 6px 14px; border-radius: 999px; font-size: 12.5px;
    border: 1px solid var(--pte-line); background: var(--pte-surface);
    color: var(--pte-text-2); cursor: pointer; font-family: inherit; transition: all .15s;
}
.pte-chip:hover { border-color: var(--pte-brand); }
.pte-chip.active { background: var(--pte-brand); border-color: var(--pte-brand); color: #fff; font-weight: 700; }
.pte-chip b { opacity: .75; }

/* ============================================================
   7. 表格
   ============================================================ */
.pte-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pte-table th {
    text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 700;
    color: var(--pte-text-3); background: var(--pte-surface-2);
    border-bottom: 1px solid var(--pte-line); white-space: nowrap;
}
.pte-table th:first-child { border-radius: var(--pte-r-sm) 0 0 0; }
.pte-table th:last-child { border-radius: 0 var(--pte-r-sm) 0 0; }
.pte-table td {
    padding: 11px 12px; border-bottom: 1px solid var(--pte-line);
    color: var(--pte-text-2); vertical-align: middle;
}
.pte-table tbody tr:hover { background: var(--pte-brand-soft2); }
.pte-table .strong { color: var(--pte-text); font-weight: 700; }
.pte-table .num { font-variant-numeric: tabular-nums; }

/* ============================================================
   8. 解析页专用
   ============================================================ */
/* 原文内联标注：答对绿、答错红 */
.pte-gap {
    display: inline; padding: 1px 4px; border-radius: 4px;
    border-bottom: 2px solid transparent; font-weight: 600;
}
.pte-gap.ok {
    color: var(--pte-ok); border-bottom-color: var(--pte-ok);
    background: var(--pte-ok-soft);
}
.pte-gap.bad {
    color: var(--pte-bad); border-bottom-color: var(--pte-bad);
    background: var(--pte-bad-soft); text-decoration: line-through;
}
.pte-gap-ans {
    font-size: 12.5px; color: var(--pte-ok); font-weight: 700; margin-left: 3px;
}
.pte-gap-ask {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%; margin-left: 4px;
    background: var(--pte-bad-soft); color: var(--pte-bad);
    font-size: 10px; cursor: default; flex-shrink: 0;
}

/* 逐题详解块 */
.pte-exp-item {
    border: 1px solid var(--pte-line); border-radius: var(--pte-r-md);
    margin-bottom: 12px; overflow: hidden; background: var(--pte-surface);
}
.pte-exp-item-head {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; background: var(--pte-surface-2);
    cursor: pointer; user-select: none;
}
.pte-exp-item-head .no {
    font-size: 12px; font-weight: 800; color: var(--pte-brand);
    min-width: 18px;
}
.pte-exp-item-head .ans {
    font-size: 13.5px; font-weight: 700; color: var(--pte-text);
}
.pte-exp-item-head .mine {
    font-size: 12px; padding: 1px 7px; border-radius: 5px;
}
.pte-exp-item-head .mine.bad { color: var(--pte-bad); background: var(--pte-bad-soft); }
.pte-exp-item-head .mine.ok { color: var(--pte-ok); background: var(--pte-ok-soft); }
.pte-exp-item-head .chev { margin-left: auto; color: var(--pte-text-3); font-size: 12px; transition: transform .2s; }
.pte-exp-item.open .chev { transform: rotate(180deg); }
.pte-exp-item-body { padding: 0 16px; max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .2s; }
.pte-exp-item.open .pte-exp-item-body { padding: 14px 16px 16px; max-height: 3000px; }

/* 【思路】【句意】【考点】小节 */
.pte-exp-sec { margin-bottom: 12px; }
.pte-exp-sec:last-child { margin-bottom: 0; }
.pte-exp-sec .k {
    display: inline-block; font-size: 12px; font-weight: 800; color: var(--pte-brand);
    background: var(--pte-brand-soft); padding: 2px 9px; border-radius: 5px;
    margin-bottom: 6px; letter-spacing: .3px;
}
.pte-exp-sec .k.k2 { color: var(--pte-info); background: var(--pte-info-soft); }
.pte-exp-sec .k.k3 { color: var(--pte-warn); background: var(--pte-warn-soft); }
.pte-exp-sec .v {
    font-size: 13.5px; line-height: 1.85; color: var(--pte-text-2);
    white-space: pre-wrap; word-break: break-word;
}
.pte-exp-sec .v em { font-style: normal; color: var(--pte-brand); font-weight: 700; }

/* 收录状态角标 */
.pte-exp-status {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
}
.pte-exp-status.none { color: var(--pte-text-3); background: var(--pte-surface-2); }
.pte-exp-status.draft { color: var(--pte-warn); background: var(--pte-warn-soft); }
.pte-exp-status.published { color: var(--pte-ok); background: var(--pte-ok-soft); }

/* ============================================================
   9. 表单
   ============================================================ */
.pte-field { margin-bottom: 14px; }
.pte-field > label {
    display: block; font-size: 12.5px; font-weight: 700; color: var(--pte-text-2);
    margin-bottom: 6px;
}
.pte-field > label .hint { font-weight: 400; color: var(--pte-text-3); margin-left: 6px; }
.pte-input, .pte-textarea, .pte-select {
    width: 100%; box-sizing: border-box;
    padding: 9px 12px; border-radius: var(--pte-r-sm);
    border: 1px solid var(--pte-line); background: var(--pte-surface-2);
    color: var(--pte-text); font-size: 13.5px; font-family: inherit;
    transition: border-color .15s, background .15s;
}
.pte-input:focus, .pte-textarea:focus, .pte-select:focus {
    outline: none; border-color: var(--pte-brand);
    background: var(--pte-surface);
    box-shadow: 0 0 0 3px var(--pte-brand-soft);
}
.pte-textarea { resize: vertical; min-height: 78px; line-height: 1.7; }
.pte-input::placeholder, .pte-textarea::placeholder { color: var(--pte-text-3); }

/* ============================================================
   10. 空态 / 提示条
   ============================================================ */
.pte-empty {
    text-align: center; padding: 52px 20px; color: var(--pte-text-2);
}
.pte-empty i { font-size: 38px; color: var(--pte-text-3); display: block; margin-bottom: 12px; }
.pte-empty .t { font-size: 15px; font-weight: 700; color: var(--pte-text); margin-bottom: 6px; }
.pte-empty .d { font-size: 13px; color: var(--pte-text-3); line-height: 1.8; }

.pte-note {
    display: flex; gap: 10px; padding: 11px 14px; border-radius: var(--pte-r-sm);
    background: var(--pte-brand-soft2); border-left: 3px solid var(--pte-brand);
    font-size: 13px; color: var(--pte-text-2); line-height: 1.75;
}
.pte-note.warn { background: var(--pte-warn-soft); border-left-color: var(--pte-warn); }
.pte-note.bad { background: var(--pte-bad-soft); border-left-color: var(--pte-bad); }

/* toast */
.pte-toast {
    position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(16px);
    background: rgba(15, 23, 42, .94); color: #fff; padding: 10px 22px;
    border-radius: 10px; font-size: 13.5px; opacity: 0; pointer-events: none;
    transition: all .22s; z-index: 2000; max-width: 86vw;
}
.pte-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 弹层 */
.pte-modal-mask {
    position: fixed; inset: 0; background: rgba(4, 8, 20, .5);
    display: none; align-items: flex-start; justify-content: center;
    z-index: 1000; padding: 74px 16px 40px; overflow-y: auto;
}
.pte-modal-mask.show { display: flex; }
.pte-modal {
    background: var(--pte-surface); border-radius: var(--pte-r-lg);
    box-shadow: var(--pte-shadow-lg); width: 100%; max-width: 760px;
    margin: auto;
}
.pte-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--pte-line);
}
.pte-modal-head h3 { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--pte-text); }
.pte-modal-body { padding: 18px 20px; }
.pte-modal-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; border-top: 1px solid var(--pte-line);
}

/* ============================================================
   11. 响应式
   ============================================================ */
@media (max-width: 1100px) {
    .pte-grid-3, .pte-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .pte-sidebar { transform: translateX(-100%); box-shadow: var(--pte-shadow-lg); }
    .pte-sidebar.open { transform: translateX(0); }
    .pte-sidebar-mask.show { display: block; }
    .pte-main { margin-left: 0; }
    .pte-menu-btn { display: inline-flex; }
    .pte-content { padding: 14px 14px 70px; }
    .pte-topbar { padding: 0 14px; }
    .pte-grid-2, .pte-grid-3, .pte-grid-4 { grid-template-columns: 1fr; }
    .pte-page-title { font-size: 17px; }
    .pte-stat-row { gap: 18px; }
    .pte-stat .num { font-size: 20px; }
}
@media (max-width: 520px) {
    .pte-rate .rate-nums { min-width: 78px; font-size: 11.5px; }
    .pte-card { padding: 14px 14px; }
    .pte-table { font-size: 12px; }
    .pte-table th, .pte-table td { padding: 8px 8px; }
}

/* 打印 */
@media print {
    .pte-sidebar, .pte-topbar, .pte-btn { display: none !important; }
    .pte-main { margin-left: 0; }
}

/* ============================================================
   12. 外壳挂载后的布局让位（pte-shell.js 会给 body 加类）
   ============================================================ */
body.pte-has-sidebar { padding-left: var(--pte-sidebar-w); }
body.pte-has-sidebar.pte-has-topbar { padding-top: var(--pte-topbar-h); }

.pte-topbar-fixed {
    position: fixed;
    top: 0;
    left: var(--pte-sidebar-w);
    right: 0;
    z-index: 50;
}

@media (max-width: 860px) {
    body.pte-has-sidebar { padding-left: 0; }
    .pte-topbar-fixed { left: 0; }
}

/* ============================================================
   13. 解析模式（student-pte-review.html 进入解析时挂的类）
   —— 收掉左侧原文栏与计时器，让解析内容占满整栏
   ============================================================ */
#exam-body.pte-review-mode #exam-content-area,
#exam-body.pte-review-mode #exam-divider { display: none !important; }
#exam-body.pte-review-mode #exam-answer-area {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 1100px;
    margin: 0 auto;
    background: transparent !important;
    padding: 0 !important;
}
body.pte-in-review #exam-timer,
body.pte-in-review #exam-timer-label,
body.pte-in-review #pause-btn,
body.pte-in-review #module-progress,
body.pte-in-review #module-name-display { display: none !important; }
body.pte-in-review #exam-body { min-height: auto !important; }

/* ============================================================
   14. 挂外壳后隐藏各页自建的主题切换入口
   —— 全站主题已由 theme-sync.js 统一，页面里的小圆点会和顶栏打架
   ============================================================ */
body.pte-has-sidebar .theme-bar,
body.pte-has-sidebar .theme-dots,
body.pte-has-sidebar .theme-toggle,
body.pte-has-sidebar .theme-selector,
body.pte-has-sidebar [class*="theme-dot"],
body.pte-has-topbar .theme-bar,
body.pte-has-topbar [class*="theme-dot"] { display: none !important; }

/* 补齐遗漏的题型徽章配色（RO 段落排序此前没定义背景，白字看不见） */
.pte-badge.ro  { background: #5B9BF8; }
.pte-badge.arl { background: #F5A623; }

/* 卡片作为 grid/flex 子项时默认 min-width:auto，会被内部表格撑破 → 显式归零 */
.pte-card { min-width: 0; }
.pte-grid > *, .hub-row > * { min-width: 0; }