/* ==========================================================================
   ONEgame 高级版本 · Premium Edition Portal 样式表
   文件:static/css/style.css
   配色:石墨 #23262B / 铂金 #D7D9DE / 皇家蓝 #2A4AC2 / 冰白 #F4F6FA
   类名前缀:pe- / 响应式断点:1440 / 768 / 375
   ========================================================================== */

/* ---------- 设计变量 ---------- */
:root {
    --pe-ink: #23262B;
    --pe-ink-soft: #2E333A;
    --pe-platinum: #D7D9DE;
    --pe-royal: #2A4AC2;
    --pe-royal-dark: #1F3794;
    --pe-royal-soft: rgba(42, 74, 194, 0.08);
    --pe-ice: #F4F6FA;
    --pe-white: #FFFFFF;
    --pe-slate: #6A7280;
    --pe-line: rgba(35, 38, 43, 0.12);
    --pe-line-soft: rgba(35, 38, 43, 0.07);
    --pe-line-light: rgba(215, 217, 222, 0.4);
    --pe-shadow: 0 20px 46px rgba(35, 38, 43, 0.09);
    --pe-radius: 14px;
    --pe-container: 1180px;
    --pe-transition: 0.25s ease;
}

/* ---------- 基础 ---------- */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--pe-ice);
    color: var(--pe-ink);
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

.pe-container {
    max-width: var(--pe-container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- 按钮 ---------- */
.pe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 30px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        transform var(--pe-transition),
        box-shadow var(--pe-transition),
        background var(--pe-transition),
        color var(--pe-transition);
}

.pe-btn:hover {
    transform: translateY(-2px);
}

.pe-btn-royal {
    background: var(--pe-royal);
    color: var(--pe-white);
}

.pe-btn-royal:hover {
    background: var(--pe-royal-dark);
    box-shadow: 0 12px 26px rgba(42, 74, 194, 0.3);
}

.pe-btn-ghost {
    background: transparent;
    color: var(--pe-ink);
    border-color: var(--pe-ink);
}

.pe-btn-ghost:hover {
    background: var(--pe-ink);
    color: var(--pe-ice);
}

.pe-btn-platinum {
    background: var(--pe-platinum);
    color: var(--pe-ink);
}

.pe-btn-platinum:hover {
    background: var(--pe-white);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
}

/* ---------- 顶部版本品牌导航 ---------- */
.pe-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--pe-ink);
    border-bottom: 1px solid var(--pe-line-light);
}

.pe-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    height: 74px;
}

.pe-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.pe-brand-mark {
    color: var(--pe-platinum);
    font-size: 18px;
}

.pe-brand-name {
    color: var(--pe-white);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.pe-brand-edition {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--pe-platinum);
    border: 1px solid rgba(215, 217, 222, 0.55);
    border-radius: 999px;
    padding: 4px 12px;
    margin-left: 8px;
}

.pe-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.pe-nav-link {
    position: relative;
    color: var(--pe-platinum);
    text-decoration: none;
    font-size: 15px;
    padding: 6px 0;
    transition: color var(--pe-transition);
}

.pe-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    background: var(--pe-royal);
    transition: right var(--pe-transition);
}

.pe-nav-link:hover {
    color: var(--pe-white);
}

.pe-nav-link:hover::after,
.pe-nav-link.pe-active::after {
    right: 0;
}

.pe-nav-link.pe-active {
    color: var(--pe-white);
}

.pe-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid rgba(215, 217, 222, 0.5);
    border-radius: 10px;
    color: var(--pe-platinum);
    font-size: 18px;
    cursor: pointer;
}

/* ---------- 产品发布首屏 ---------- */
.pe-hero {
    background: linear-gradient(180deg, var(--pe-white) 0%, var(--pe-ice) 100%);
    border-bottom: 1px solid var(--pe-line-soft);
    overflow: hidden;
}

.pe-hero-grid {
    display: grid;
    grid-template-columns: 1.06fr 0.94fr;
    gap: 60px;
    align-items: center;
    padding: 80px 0 92px;
}

.cover-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.cover-topics span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--pe-ink);
    background: var(--pe-white);
    border: 1px solid var(--pe-platinum);
    border-radius: 999px;
    padding: 7px 16px;
}

.pe-hero-title {
    margin: 0;
    font-size: 42px;
    line-height: 1.28;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--pe-ink);
}

.pe-hero-sub {
    margin: 20px 0 0;
    font-size: 17px;
    color: var(--pe-slate);
    max-width: 580px;
}

.pe-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.pe-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 30px;
    font-size: 13px;
    color: var(--pe-slate);
    letter-spacing: 0.04em;
}

.pe-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pe-hero-meta i {
    color: var(--pe-royal);
}

.pe-hero-visual {
    position: relative;
}

.pe-hero-visual::before {
    content: "";
    position: absolute;
    inset: 22px -22px -22px 22px;
    border: 1px solid var(--pe-platinum);
    border-radius: var(--pe-radius);
}

.pe-hero-visual img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--pe-radius);
    box-shadow: var(--pe-shadow);
}

.pe-hero-caption {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(35, 38, 43, 0.88);
    color: var(--pe-platinum);
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 999px;
}

/* ---------- 区块标题体系 ---------- */
.pe-section {
    padding: 88px 0;
}

.pe-section-alt {
    background: var(--pe-white);
    border-top: 1px solid var(--pe-line-soft);
    border-bottom: 1px solid var(--pe-line-soft);
}

.pe-sec-head {
    max-width: 760px;
    margin-bottom: 52px;
}

.pe-sec-head.pe-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.pe-eyebrow {
    margin: 0;
    color: var(--pe-royal);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.pe-sec-title {
    margin: 12px 0 0;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.pe-sec-lead {
    margin: 16px 0 0;
    color: var(--pe-slate);
    font-size: 16px;
}

/* ---------- 通用卡片 ---------- */
.pe-card {
    background: var(--pe-white);
    border: 1px solid var(--pe-line);
    border-radius: var(--pe-radius);
    padding: 30px 28px;
    transition: transform var(--pe-transition), box-shadow var(--pe-transition);
}

.pe-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pe-shadow);
}

.pe-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--pe-royal-soft);
    color: var(--pe-royal);
    font-size: 19px;
}

.pe-card-title {
    margin: 18px 0 0;
    font-size: 18px;
    font-weight: 700;
}

.pe-card-text {
    margin: 10px 0 0;
    color: var(--pe-slate);
    font-size: 15px;
}

/* ---------- 版本亮点面板 ---------- */
.pe-highlight-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 48px;
    align-items: stretch;
}

.pe-highlight-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--pe-radius);
    box-shadow: var(--pe-shadow);
}

.pe-highlight-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

/* ---------- 平台体验套件 ---------- */
.pe-suite-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ---------- 功能规格区块 ---------- */
.pe-spec-wrap {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 48px;
    align-items: start;
}

.pe-spec-media img {
    width: 100%;
    border-radius: var(--pe-radius);
    box-shadow: var(--pe-shadow);
}

.pe-spec-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--pe-line);
}

.pe-spec-tab {
    padding: 12px 20px;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: var(--pe-slate);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--pe-transition);
}

.pe-spec-tab:hover {
    color: var(--pe-ink);
}

.pe-spec-tab.pe-active {
    color: var(--pe-royal);
    border-bottom-color: var(--pe-royal);
}

.pe-spec-panel {
    display: none;
    padding-top: 26px;
}

.pe-spec-panel.pe-active {
    display: block;
}

.pe-spec-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pe-spec-list li {
    position: relative;
    padding: 13px 0 13px 32px;
    border-bottom: 1px dashed var(--pe-line);
    color: var(--pe-ink);
    font-size: 15px;
}

.pe-spec-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 15px;
    color: var(--pe-royal);
}

/* ---------- 移动版本区块 ---------- */
.pe-mobile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.pe-mobile-media img {
    width: 100%;
    border-radius: var(--pe-radius);
    box-shadow: var(--pe-shadow);
}

.pe-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.pe-chip {
    font-size: 13px;
    font-weight: 600;
    color: var(--pe-ink);
    background: var(--pe-white);
    border: 1px solid var(--pe-platinum);
    border-radius: 999px;
    padding: 7px 16px;
}

.pe-mobile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

/* ---------- 更新时间线 ---------- */
.pe-timeline {
    position: relative;
    max-width: 840px;
    margin: 0 auto;
    padding-left: 34px;
}

.pe-timeline::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--pe-platinum);
}

.pe-timeline-item {
    position: relative;
    padding: 0 0 36px 26px;
}

.pe-timeline-item::before {
    content: "";
    position: absolute;
    left: -31px;
    top: 8px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--pe-white);
    border: 3px solid var(--pe-royal);
}

.pe-timeline-badge {
    display: inline-block;
    background: var(--pe-royal);
    color: var(--pe-white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 999px;
    padding: 4px 14px;
}

.pe-timeline-date {
    margin-left: 12px;
    color: var(--pe-slate);
    font-size: 13px;
    letter-spacing: 0.05em;
}

.pe-timeline-title {
    margin: 12px 0 0;
    font-size: 19px;
    font-weight: 700;
}

.pe-timeline-text {
    margin: 8px 0 0;
    color: var(--pe-slate);
    font-size: 15px;
}

/* ---------- 滚动显现 ---------- */
.pe-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.pe-reveal.pe-in {
    opacity: 1;
    transform: none;
}

/* ---------- 升级指引步骤 ---------- */
.pe-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.pe-step {
    background: var(--pe-white);
    border: 1px solid var(--pe-line);
    border-top: 3px solid var(--pe-royal);
    border-radius: var(--pe-radius);
    padding: 28px 26px;
}

.pe-step-label {
    margin: 0;
    color: var(--pe-royal);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.pe-step-title {
    margin: 12px 0 0;
    font-size: 17px;
    font-weight: 700;
}

.pe-step-text {
    margin: 10px 0 0;
    color: var(--pe-slate);
    font-size: 14px;
}

/* ---------- 规格面板式 FAQ ---------- */
.pe-faq-wrap {
    max-width: 840px;
    margin: 0 auto;
}

.pe-faq-item {
    background: var(--pe-white);
    border: 1px solid var(--pe-line);
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
}

.pe-faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--pe-ink);
    text-align: left;
}

.pe-faq-question i {
    color: var(--pe-royal);
    transition: transform var(--pe-transition);
}

.pe-faq-item.pe-open .pe-faq-question i {
    transform: rotate(180deg);
}

.pe-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.pe-faq-item.pe-open .pe-faq-answer {
    max-height: 260px;
}

.pe-faq-answer p {
    margin: 0;
    padding: 0 24px 20px;
    color: var(--pe-slate);
    font-size: 15px;
}

/* ---------- 发布条最终 CTA ---------- */
.pe-final {
    background: var(--pe-ink);
    color: var(--pe-platinum);
    padding: 80px 0;
}

.pe-final-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.pe-final-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: var(--pe-white);
}

.pe-final-text {
    margin: 12px 0 0;
    max-width: 560px;
    color: var(--pe-platinum);
    font-size: 15px;
}

.pe-final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.pe-final .pe-btn-ghost {
    color: var(--pe-platinum);
    border-color: var(--pe-platinum);
}

.pe-final .pe-btn-ghost:hover {
    background: var(--pe-platinum);
    color: var(--pe-ink);
}

/* ---------- 页脚版本版权栏 ---------- */
.pe-footer {
    background: var(--pe-ink);
    color: var(--pe-platinum);
    border-top: 1px solid var(--pe-line-light);
    padding-top: 64px;
}

.pe-foot-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr 1.6fr;
    gap: 40px;
}

.pe-foot-brand {
    color: var(--pe-white);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.pe-foot-brand:hover {
    color: var(--pe-platinum);
}

.pe-foot-title {
    margin: 0 0 16px;
    color: var(--pe-white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.pe-foot-col a {
    display: block;
    color: var(--pe-platinum);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 10px;
    opacity: 0.85;
}

.pe-foot-col a:hover {
    opacity: 1;
    color: var(--pe-white);
}

.pe-foot-note {
    margin: 10px 0 0;
    color: rgba(215, 217, 222, 0.75);
    font-size: 13px;
    line-height: 1.9;
}

.pe-foot-bottom {
    margin-top: 48px;
    border-top: 1px solid rgba(215, 217, 222, 0.2);
    padding: 26px 0 34px;
}

/* ---------- 内页统一页首 ---------- */
.pe-page-hero {
    background: linear-gradient(120deg, var(--pe-ink) 0%, var(--pe-ink-soft) 100%);
    color: var(--pe-platinum);
    padding: 72px 0;
    border-bottom: 1px solid var(--pe-line-light);
}

.pe-crumb {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    letter-spacing: 0.06em;
}

.pe-crumb a {
    color: var(--pe-platinum);
    text-decoration: none;
}

.pe-crumb a:hover {
    color: var(--pe-white);
}

.pe-crumb i {
    font-size: 11px;
    opacity: 0.7;
}

.pe-page-title {
    margin: 16px 0 0;
    font-size: 38px;
    font-weight: 800;
    color: var(--pe-white);
    letter-spacing: 0.01em;
}

.pe-page-lead {
    margin: 16px 0 0;
    max-width: 680px;
    color: var(--pe-platinum);
    font-size: 16px;
}

/* ---------- 内页 CTA 条 ---------- */
.pe-page-cta {
    background: var(--pe-ink);
    color: var(--pe-platinum);
    padding: 72px 0;
}

.pe-page-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.pe-page-cta-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: var(--pe-white);
}

.pe-page-cta-text {
    margin: 0 0 18px;
    color: var(--pe-platinum);
    font-size: 15px;
}

/* ---------- 产品理念页 ---------- */
.pe-statement {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 48px;
    align-items: center;
}

.pe-statement-media img {
    width: 100%;
    border-radius: var(--pe-radius);
    box-shadow: var(--pe-shadow);
}

.pe-statement-quote {
    margin: 22px 0 0;
    padding: 22px 24px;
    border-left: 3px solid var(--pe-royal);
    background: var(--pe-royal-soft);
    border-radius: 0 12px 12px 0;
}

.pe-statement-quote p {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--pe-ink);
}

.pe-statement-quote cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-size: 13px;
    color: var(--pe-slate);
}

.pe-statement-text {
    margin: 16px 0 0;
    color: var(--pe-slate);
    font-size: 15px;
}

.pe-pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pe-principle-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.pe-principle-list li {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: var(--pe-white);
    border: 1px solid var(--pe-line);
    border-radius: var(--pe-radius);
    padding: 24px;
}

.pe-principle-list li i {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--pe-royal-soft);
    color: var(--pe-royal);
    font-size: 17px;
}

.pe-principle-list h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.pe-principle-list p {
    margin: 8px 0 0;
    color: var(--pe-slate);
    font-size: 14px;
}

.pe-origin {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
}

.pe-origin-copy p:not(.pe-eyebrow):not(.pe-sec-title) {
    margin: 16px 0 0;
    color: var(--pe-slate);
    font-size: 15px;
}

.pe-origin-media img {
    width: 100%;
    border-radius: var(--pe-radius);
    box-shadow: var(--pe-shadow);
}

.pe-milestones {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.pe-milestone {
    background: var(--pe-white);
    border: 1px solid var(--pe-line);
    border-radius: var(--pe-radius);
    padding: 24px;
}

.pe-milestone-year {
    display: inline-block;
    color: var(--pe-royal);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.pe-milestone p {
    margin: 10px 0 0;
    color: var(--pe-slate);
    font-size: 14px;
}

/* ---------- 版本能力页 ---------- */
.pe-ability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pe-ability {
    background: var(--pe-white);
    border: 1px solid var(--pe-line);
    border-radius: var(--pe-radius);
    padding: 30px 28px;
    transition: transform var(--pe-transition), box-shadow var(--pe-transition);
}

.pe-ability:hover {
    transform: translateY(-4px);
    box-shadow: var(--pe-shadow);
}

.pe-ability .pe-chip-row {
    margin-top: 18px;
}

.pe-matrix-wrap {
    overflow-x: auto;
}

.pe-matrix {
    width: 100%;
    border-collapse: collapse;
    background: var(--pe-white);
    border: 1px solid var(--pe-line);
    min-width: 640px;
}

.pe-matrix th,
.pe-matrix td {
    border: 1px solid var(--pe-line);
    padding: 14px 18px;
    text-align: left;
    font-size: 15px;
}

.pe-matrix thead th {
    background: var(--pe-ink);
    color: var(--pe-platinum);
    font-weight: 600;
}

.pe-matrix tbody th {
    font-weight: 700;
    background: var(--pe-ice);
}

.pe-matrix .pe-yes {
    color: var(--pe-royal);
    font-weight: 700;
}

.pe-spec-rows {
    max-width: 760px;
}

.pe-spec-row {
    display: flex;
    gap: 24px;
    align-items: baseline;
    padding: 15px 0;
    border-bottom: 1px dashed var(--pe-line);
}

.pe-spec-row-key {
    flex-shrink: 0;
    width: 120px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pe-royal);
    letter-spacing: 0.06em;
}

.pe-spec-row-value {
    color: var(--pe-ink);
    font-size: 15px;
}

.pe-ability-detail,
.pe-ability-mobile {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 48px;
    align-items: center;
}

.pe-ability-mobile {
    grid-template-columns: 1.05fr 0.95fr;
}

.pe-ability-detail-media img,
.pe-ability-mobile-media img {
    width: 100%;
    border-radius: var(--pe-radius);
    box-shadow: var(--pe-shadow);
}

.pe-ability-detail-copy p:not(.pe-eyebrow):not(.pe-sec-title),
.pe-ability-mobile-copy p:not(.pe-eyebrow):not(.pe-sec-title) {
    margin: 16px 0 0;
    color: var(--pe-slate);
    font-size: 15px;
}

.pe-ability-detail-copy .pe-btn,
.pe-ability-mobile-copy .pe-btn {
    margin-top: 26px;
}

/* ---------- 更新日志页 ---------- */
.pe-log-summary {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 48px;
    align-items: center;
}

.pe-log-summary-media img {
    width: 100%;
    border-radius: var(--pe-radius);
    box-shadow: var(--pe-shadow);
}

.pe-log-summary-copy p:not(.pe-eyebrow):not(.pe-sec-title) {
    margin: 16px 0 0;
    color: var(--pe-slate);
    font-size: 15px;
}

.pe-changelog {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 840px;
    border-left: 1px solid var(--pe-platinum);
    padding-left: 34px;
}

.pe-log-item {
    position: relative;
    padding-bottom: 36px;
}

.pe-log-item::before {
    content: "";
    position: absolute;
    left: -41px;
    top: 8px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--pe-white);
    border: 3px solid var(--pe-royal);
}

.pe-log-badge {
    display: inline-block;
    background: var(--pe-ink);
    color: var(--pe-platinum);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 999px;
    padding: 4px 14px;
}

.pe-log-meta {
    margin: 12px 0 0;
    color: var(--pe-slate);
    font-size: 13px;
    letter-spacing: 0.05em;
}

.pe-log-title {
    margin: 8px 0 0;
    font-size: 19px;
    font-weight: 700;
}

.pe-log-text {
    margin: 10px 0 0;
    color: var(--pe-slate);
    font-size: 15px;
}

.pe-log-changes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.pe-log-changes span {
    font-size: 13px;
    color: var(--pe-royal);
    background: var(--pe-royal-soft);
    border-radius: 999px;
    padding: 5px 14px;
}

.pe-rhythm-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.pe-archive-note {
    margin: 0;
    color: var(--pe-slate);
    font-size: 15px;
    max-width: 760px;
}

/* ---------- 版本支持页 ---------- */
.pe-channel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.pe-channel-meta {
    margin: 14px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--pe-royal);
    letter-spacing: 0.04em;
}

.pe-desk {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 48px;
    align-items: center;
}

.pe-desk-media img {
    width: 100%;
    border-radius: var(--pe-radius);
    box-shadow: var(--pe-shadow);
}

.pe-desk-copy p:not(.pe-eyebrow):not(.pe-sec-title) {
    margin: 16px 0 0;
    color: var(--pe-slate);
    font-size: 15px;
}

.pe-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pe-flow-step {
    background: var(--pe-white);
    border: 1px solid var(--pe-line);
    border-radius: var(--pe-radius);
    padding: 30px 28px;
}

.pe-flow-dot {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pe-ink);
    color: var(--pe-platinum);
    font-size: 17px;
}

.pe-form-wrap {
    max-width: 760px;
    margin: 0 auto;
}

.pe-form {
    background: var(--pe-white);
    border: 1px solid var(--pe-line);
    border-radius: var(--pe-radius);
    padding: 32px;
    display: grid;
    gap: 18px;
}

.pe-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.pe-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}

.pe-field input,
.pe-field select,
.pe-field textarea {
    width: 100%;
    border: 1px solid var(--pe-platinum);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    background: var(--pe-ice);
    color: var(--pe-ink);
}

.pe-field input:focus,
.pe-field select:focus,
.pe-field textarea:focus {
    outline: 2px solid var(--pe-royal);
    outline-offset: 1px;
}

/* ---------- 响应式 · 1440 ---------- */
@media (max-width: 1440px) {
    .pe-container {
        max-width: 1080px;
    }

    .pe-hero-title {
        font-size: 38px;
    }

    .pe-section {
        padding: 76px 0;
    }
}

/* ---------- 响应式 · 768 ---------- */
@media (max-width: 768px) {
    .pe-menu-toggle {
        display: inline-flex;
    }

    .pe-nav {
        display: none;
        position: absolute;
        top: 74px;
        left: 0;
        right: 0;
        z-index: 50;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 16px 24px 26px;
        background: var(--pe-ink);
        border-top: 1px solid var(--pe-line-light);
    }

    .pe-header.pe-nav-open .pe-nav {
        display: flex;
    }

    .pe-hero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
        padding: 56px 0 68px;
    }

    .pe-hero-visual::before {
        display: none;
    }

    .pe-hero-title {
        font-size: 32px;
    }

    .pe-hero-sub {
        font-size: 16px;
    }

    .pe-highlight-grid,
    .pe-spec-wrap,
    .pe-mobile-grid,
    .pe-statement,
    .pe-origin,
    .pe-ability-detail,
    .pe-ability-mobile,
    .pe-desk,
    .pe-log-summary {
        grid-template-columns: 1fr;
    }

    .pe-highlight-cards,
    .pe-suite-grid,
    .pe-steps,
    .pe-ability-grid,
    .pe-channel-grid,
    .pe-rhythm-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .pe-principle-list,
    .pe-pillar-grid,
    .pe-milestones,
    .pe-flow,
    .pe-form-row {
        grid-template-columns: 1fr;
    }

    .pe-foot-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .pe-final-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .pe-section {
        padding: 64px 0;
    }
}

/* ---------- 响应式 · 375 ---------- */
@media (max-width: 375px) {
    .pe-container {
        padding: 0 18px;
    }

    .pe-hero-title {
        font-size: 28px;
    }

    .pe-sec-title {
        font-size: 26px;
    }

    .pe-page-title {
        font-size: 30px;
    }

    .pe-highlight-cards,
    .pe-suite-grid,
    .pe-steps,
    .pe-ability-grid,
    .pe-channel-grid,
    .pe-rhythm-cards,
    .pe-foot-grid {
        grid-template-columns: 1fr;
    }

    .pe-btn {
        width: 100%;
    }

    .pe-matrix th,
    .pe-matrix td {
        padding: 10px 12px;
        font-size: 13px;
    }
}