/*
 * 首页专用样式（发布会式排版 / 浅色 / 毛玻璃 / 扁平）。
 *
 * 为什么单独一个文件：/css/pcl.css 是给后台、投稿页、反馈页共用的，
 * 那边要的是信息密度高的「工具界面」。首页要的是大留白、大字、层次感，
 * 两套审美硬塞进一个文件，改首页会顺手把后台改坏。
 * 这里所有选择器都挂在 body.landing 下，加进来多少都不影响别的页面。
 *
 * 玻璃效果的前提是「后面得有东西可糊」：body.landing::before 铺了一层
 * 固定的蓝色柔光，卡片再 backdrop-filter 才有颜色透上来，否则只是白底。
 */

body.shell {
    --ink: #0E1726;
    --ink-2: #55637A;
    --ink-3: #8391A6;
    --paper: #F6F8FC;
    --hair: rgba(14, 34, 66, .08);
    --hair-2: rgba(14, 34, 66, .06);
    --glass: rgba(255, 255, 255, .66);
    --glass-hi: rgba(255, 255, 255, .84);
    --blue: #0B5BCB;
    --blue-2: #1370F3;
    --blue-3: #4890F5;

    background-color: var(--paper);
    /* 柔光直接画在 body 背景上（fixed 固定，滚动时不动）。
       不用 ::before + z-index:-1 —— 负层在部分浏览器会被 body 底色盖掉，
       表现就是「玻璃卡片背后一片死白」。 */
    background-image:
        radial-gradient(52% 38% at 12% -4%, rgba(72, 144, 245, .20), transparent 62%),
        radial-gradient(46% 34% at 88% 2%, rgba(11, 91, 203, .14), transparent 58%),
        radial-gradient(60% 40% at 50% 108%, rgba(150, 192, 249, .22), transparent 62%),
        linear-gradient(180deg, #F8FAFF 0%, #F5F8FD 46%, #F6F8FC 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;

    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC',
        'MiSans', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- 顶栏 */

body.shell .nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    box-shadow: none;
    border-bottom: 1px solid transparent;
    color: var(--ink);
    transition: background .28s ease, box-shadow .28s ease, border-color .28s ease;
}

body.shell .nav.is-scrolled {
    background: rgba(255, 255, 255, .84);
    border-bottom-color: var(--hair-2);
    box-shadow: 0 14px 34px -26px rgba(11, 60, 140, .55);
}

body.shell .nav-inner {
    max-width: 1080px;
    height: 62px;
    padding: 0 24px;
    gap: 20px;
}

body.shell .brand {
    color: var(--ink);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    gap: 10px;
}

.brand-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: block;
    flex: 0 0 auto;
    box-shadow: 0 6px 14px -8px rgba(11, 60, 140, .8);
}

body.shell .nav-links { gap: 2px; }

body.shell .nav-links a {
    color: #46556C;
    font-size: 13.5px;
    border-radius: 9px;
    padding: 7px 12px;
    transition: background .18s, color .18s;
}

body.shell .nav-links a:hover {
    background: rgba(11, 91, 203, .08);
    color: var(--blue);
    text-decoration: none;
}

body.shell .nav-links a.active {
    background: rgba(11, 91, 203, .12);
    color: var(--blue);
    font-weight: 600;
}

/* ---------------------------------------------------------------- 主视觉 */

.cine {
    position: relative;
    padding: 74px 24px 0;
    overflow: hidden;
}

.cine-mesh {
    position: absolute;
    inset: -20% -10% auto;
    height: 620px;
    pointer-events: none;
    background:
        radial-gradient(38% 46% at 22% 32%, rgba(72, 144, 245, .30), transparent 70%),
        radial-gradient(34% 40% at 78% 22%, rgba(11, 91, 203, .22), transparent 70%);
    filter: blur(46px);
    opacity: .9;
}

.cine-inner {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
}

.eyebrow {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blue-2);
}

.cine-title {
    margin: 0 auto;
    font-size: clamp(38px, 7vw, 74px);
    line-height: 1.05;
    letter-spacing: -.035em;
    font-weight: 800;
    color: var(--ink);
}

.cine-title span { color: var(--blue-2); }

.cine-lede {
    max-width: 620px;
    margin: 22px auto 0;
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--ink-2);
}

/* 「基于 Zalith Launcher」这行署名：小胶囊，弱化但看得见 */
.hero-base {
    display: inline-flex;
    align-items: center;
    margin: 16px 0 0;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 10px 24px -20px rgba(11, 60, 140, .8);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-2);
}

.hero-base b {
    color: var(--ink);
    font-weight: 700;
    margin: 0 3px;
}

/* 署名胶囊下面紧跟正文时，别留太大空隙 */
.hero-base + .cine-lede { margin-top: 18px; }

.cine-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.btn-hero,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 30px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .18s ease, box-shadow .2s ease, background .2s ease;
}

.btn-hero {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 16px 34px -20px rgba(11, 91, 203, .75);
}

.btn-hero:hover {
    background: #0947A8;
    transform: translateY(-1px);
    box-shadow: 0 22px 42px -20px rgba(11, 91, 203, .8);
    text-decoration: none;
    color: #fff;
}

.btn-ghost {
    background: var(--glass);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .85);
    color: var(--ink);
    box-shadow: 0 10px 26px -22px rgba(11, 60, 140, .7);
}

.btn-ghost:hover {
    background: var(--glass-hi);
    text-decoration: none;
    color: var(--ink);
}

/* 主视觉里的设备外框：浅色铝合金质感，扁平，只有一层柔和投影 */
.stage {
    position: relative;
    max-width: 960px;
    margin: 54px auto 0;
}

.stage-glow {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -34px;
    height: 140px;
    z-index: 0;
    background: radial-gradient(50% 100% at 50% 0%, rgba(11, 91, 203, .30), transparent 72%);
    filter: blur(26px);
}

.device {
    position: relative;
    z-index: 1;
    padding: 10px;
    border-radius: 26px;
    background: #F3F7FD;
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow:
        0 44px 90px -44px rgba(9, 46, 110, .55),
        0 0 0 1px rgba(12, 40, 90, .06);
    animation: device-float 7s ease-in-out infinite;
}

.device-screen {
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(12, 40, 90, .07);
}

.device-screen img {
    display: block;
    width: 100%;
    height: auto;
}

@keyframes device-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* 数字条 */
.stats {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    max-width: 780px;
    margin: 54px auto 0;
    padding: 20px 28px;
    list-style: none;
    border-radius: 18px;
    background: var(--glass);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 24px 54px -40px rgba(11, 60, 140, .6);
}

.stats li {
    flex: 1;
    text-align: center;
    border-right: 1px solid var(--hair-2);
}

.stats li:last-child { border-right: none; }

.stats b {
    display: block;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
}

.stats span {
    font-size: 12px;
    color: var(--ink-3);
}

/* ---------------------------------------------------------------- 区块 */

.block {
    max-width: 1080px;
    margin: 0 auto;
    padding: 88px 24px 0;
}

.block:last-of-type { padding-bottom: 40px; }

.block-head {
    max-width: 720px;
}

.block-head h2 {
    margin: 0 0 12px;
    font-size: clamp(26px, 3.6vw, 40px);
    line-height: 1.2;
    letter-spacing: -.03em;
    font-weight: 800;
    color: var(--ink);
}

.block-head .sub {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--ink-2);
}

.block-head .badge { margin-left: 6px; vertical-align: 3px; }

.block-sub { margin-top: 26px; }

.block-sub h3,
.panel-head h3 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ink);
}

/* ------------------------------------------------------------ 特性卡片 */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 38px;
}

.f-card {
    padding: 24px 22px 26px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--hair);
    box-shadow: 0 20px 44px -40px rgba(11, 60, 140, .5);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.f-card:hover {
    transform: translateY(-4px);
    border-color: rgba(11, 91, 203, .18);
    box-shadow: 0 30px 60px -40px rgba(11, 60, 140, .65);
}

.f-card .fi,
.link-card .fi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #EDF3FE;
    color: var(--blue-2);
    margin-bottom: 14px;
}

.f-card .fi .ico,
.link-card .fi .ico { width: 20px; height: 20px; }

.f-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
}

.f-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--ink-2);
}

/* ---------------------------------------------------------- 大图展示 */

.showcase { margin-top: 26px; }

.show-row {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 52px;
    align-items: center;
    margin-top: 56px;
}

.show-row.reverse .show-copy { order: 2; }
.show-row.reverse .show-media { order: 1; }

.show-copy .eyebrow { margin-bottom: 10px; }

.show-copy h3 {
    margin: 0 0 10px;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.28;
    letter-spacing: -.02em;
    font-weight: 800;
    color: var(--ink);
}

.show-copy p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--ink-2);
}

.show-media {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--hair);
    box-shadow: 0 34px 70px -46px rgba(9, 46, 110, .7);
}

.show-media img {
    display: block;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------ 截图网格 */

body.landing .shots {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 34px;
}

body.landing .shot {
    border-radius: 16px;
    border: 1px solid var(--hair);
    background: #fff;
    box-shadow: 0 20px 46px -40px rgba(11, 60, 140, .55);
    line-height: normal;
    transition: transform .22s ease, box-shadow .22s ease;
}

body.landing .shot:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -40px rgba(11, 60, 140, .7);
}

body.landing .shot img { transition: transform .35s ease; }

body.landing .shot span {
    position: static;
    display: block;
    padding: 11px 14px;
    background: #fff;
    border-top: 1px solid var(--hair-2);
    color: #3A475D;
    font-size: 12.5px;
    line-height: 1.4;
    text-align: left;
}

/* ---------------------------------------------------------------- 面板 */

.glass-card,
.panel {
    margin-top: 30px;
    border-radius: 20px;
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    backdrop-filter: blur(20px) saturate(165%);
    border: 1px solid rgba(255, 255, 255, .82);
    box-shadow: 0 28px 60px -44px rgba(11, 60, 140, .6);
    overflow: hidden;
}

.glass-card > .card-body { padding: 8px 22px 20px; }

.panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px 0;
}

.panel-head h3 { margin: 0; flex: 1; }

.panel .table-wrap {
    margin: 14px 22px 20px;
    border-color: var(--hair-2);
    background: rgba(255, 255, 255, .7);
}

.panel .table th {
    background: transparent;
    border-bottom: 1px solid var(--hair-2);
    font-size: 12px;
    letter-spacing: .02em;
    color: var(--ink-3);
}

.panel .table td {
    border-bottom: 1px solid var(--hair-2);
    font-size: 13px;
}

.panel .empty { padding: 34px 20px; }

/* 下载方式列表：扁平卡片，去掉彩色底 */
body.landing .dl-row {
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--hair-2);
    border-radius: 14px;
    padding: 12px 14px;
}

body.landing .dl-row:hover { border-color: rgba(11, 91, 203, .22); }

body.landing .dl-icon {
    background: #EDF3FE;
    color: var(--blue-2);
}

body.landing .dl-name { font-size: 13.5px; }

/* ---------------------------------------------------------------- 公告 */

body.landing .ann {
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--hair-2);
    border-left: 3px solid var(--blue-3);
    border-radius: 12px;
}

body.landing .ann-warn { border-left-color: #D9A032; background: rgba(253, 246, 227, .8); }
body.landing .ann-good { border-left-color: #2E9B4E; background: rgba(233, 247, 238, .8); }

/* ---------------------------------------------------------------- 文案卡 */

.block-quotes { padding-top: 64px; }

.quote-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

body.landing .quote-card { margin-top: 0; }

body.landing .quote-card .card-head {
    padding: 18px 22px 0;
    border-bottom: none;
}

body.landing .quote-card .card-head h2 {
    font-size: 15px;
    font-weight: 700;
}

body.landing .quote-card blockquote {
    margin: 12px 22px 0;
    padding: 0 0 0 14px;
    background: transparent;
    border-left: 2px solid rgba(11, 91, 203, .28);
    font-size: 14.5px;
    line-height: 1.85;
    color: #2A3648;
}

body.landing .quote-card .card-foot {
    display: flex;
    gap: 8px;
    padding: 16px 22px 20px;
}

/* ---------------------------------------------------------------- FAQ */

.faq-card { padding: 4px 22px; }

body.landing .faq {
    padding: 16px 0;
    border-bottom: 1px solid var(--hair-2);
}

body.landing .faq summary {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

body.landing .faq summary::-webkit-details-marker { display: none; }

body.landing .faq summary::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.6px solid var(--blue-2);
    border-bottom: 1.6px solid var(--blue-2);
    transform: rotate(-45deg);
    transition: transform .2s ease;
    flex: 0 0 auto;
}

body.landing .faq[open] summary::before { transform: rotate(45deg); }

body.landing .faq p {
    margin: 10px 0 0 17px;
    font-size: 13.8px;
    line-height: 1.9;
    color: var(--ink-2);
}

/* ---------------------------------------------------------------- 社区 */

.link-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 32px;
}

.link-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--hair);
    box-shadow: 0 20px 44px -42px rgba(11, 60, 140, .55);
    color: inherit;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.link-card:hover {
    transform: translateY(-3px);
    border-color: rgba(11, 91, 203, .2);
    box-shadow: 0 28px 56px -40px rgba(11, 60, 140, .7);
    text-decoration: none;
}

.link-card .fi { margin-bottom: 0; }

.link-card h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.link-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-2);
}

.link-card .arrow {
    margin-left: auto;
    align-self: center;
    color: var(--blue-2);
    opacity: .35;
    transition: opacity .2s ease, transform .2s ease;
}

.link-card:hover .arrow { opacity: 1; transform: translateX(3px); }

.link-card .arrow .ico { width: 16px; height: 16px; }

.api-note {
    margin: 22px 0 0;
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 2;
}

.api-note .mono { margin-right: 4px; }

/* ---------------------------------------------------------------- 关于 */

.about-card {
    display: grid;
    grid-template-columns: 1.35fr .9fr;
    gap: 44px;
    padding: 36px 34px;
}

.about-card h2 {
    margin: 0 0 12px;
    font-size: clamp(22px, 2.8vw, 30px);
    line-height: 1.28;
    letter-spacing: -.02em;
    font-weight: 800;
}

.about-card .sub {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--ink-2);
}

.about-card .muted { font-size: 13px; margin: 16px 0 0; word-break: break-all; }

.about-meta {
    border-left: 1px solid var(--hair-2);
    padding-left: 30px;
    font-size: 13.5px;
    color: var(--ink-2);
}

.about-meta .meta-row {
    display: flex;
    gap: 10px;
    margin: 0 0 8px;
}

.about-meta .meta-row span {
    color: var(--ink-3);
    min-width: 62px;
}

.about-meta ul {
    margin: 4px 0 0;
    padding-left: 18px;
    line-height: 1.9;
}

/* ---------------------------------------------------------------- 页脚 */

.foot-landing {
    max-width: 1080px;
    margin: 0 auto;
    padding: 72px 24px 84px;
    text-align: center;
}

.foot-landing .wordmark {
    margin: 0;
    font-size: clamp(18px, 3.4vw, 26px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
}

.foot-landing .foot-links {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin: 18px 0 0;
    font-size: 13.5px;
}

.foot-landing .foot-links a { color: var(--ink-2); }
.foot-landing .foot-links a:hover { color: var(--blue); text-decoration: none; }

.foot-landing .foot-note {
    margin: 18px 0 0;
    font-size: 12.5px;
    color: var(--ink-3);
}

/* ---------------------------------------------------------------- 动效 */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s cubic-bezier(.22, .7, .2, 1),
        transform .7s cubic-bezier(.22, .7, .2, 1);
    will-change: opacity, transform;
}

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

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .device { animation: none; }
}

/* ---------------------------------------------------------------- 窄屏 */

@media (max-width: 900px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }

    .show-row {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .show-row.reverse .show-copy { order: 1; }
    .show-row.reverse .show-media { order: 2; }

    .about-card {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 28px 24px;
    }

    .about-meta {
        border-left: none;
        border-top: 1px solid var(--hair-2);
        padding: 22px 0 0;
    }
}

@media (max-width: 760px) {
    /* 顶栏在窄屏是两行：品牌一行、链接一行横向滚动。
       这里必须把 pcl.css 里 62px 的固定高度改回 auto，否则第二行会被裁掉。 */
    body.shell .nav-inner {
        height: auto;
        padding: 9px 14px 0;
    }

    .cine { padding: 40px 16px 0; }
    .cine-title { font-size: clamp(32px, 9vw, 44px); }
    .cine-lede { font-size: 14.5px; margin-top: 16px; }
    .cine-cta { gap: 10px; margin-top: 24px; }
    .btn-hero, .btn-ghost { height: 46px; padding: 0 22px; font-size: 14px; }

    .stage { margin-top: 34px; }
    .device { padding: 6px; border-radius: 18px; }
    .device-screen { border-radius: 13px; }

    .stats {
        margin-top: 34px;
        padding: 16px 10px;
        gap: 0;
    }
    .stats b { font-size: 17px; }
    .stats span { font-size: 11px; }

    .block { padding: 56px 16px 0; }
    .block-head h2 { font-size: clamp(23px, 6.4vw, 30px); }
    .block-head .sub { font-size: 14px; }

    .feature-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 26px; }
    .f-card { padding: 20px 18px; }

    body.landing .shots { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    body.landing .shot span { padding: 9px 10px; font-size: 12px; }

    .quote-grid,
    .link-grid { grid-template-columns: 1fr; }

    .panel-head { padding: 16px 16px 0; }
    .panel .table-wrap { margin: 12px 16px 16px; }
    .faq-card { padding: 2px 16px; }
    .glass-card > .card-body { padding: 6px 16px 16px; }

    .foot-landing { padding: 52px 16px 64px; }
}


/* ============================================================================
 *  内页（投稿 / 意见反馈）
 *
 *  和首页同一套外壳：浅色柔光底 + 毛玻璃顶栏，但内容是表单，
 *  所以这里只覆盖 pcl.css 的卡片与表单控件，不做发布会式的大留白。
 * ==========================================================================*/

body.subpage { font-size: 14px; }

body.subpage .wrap {
    max-width: 760px;
    padding: 44px 20px 56px;
}

body.subpage .card {
    border-radius: 20px;
    background: var(--glass, rgba(255, 255, 255, .66));
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    backdrop-filter: blur(20px) saturate(165%);
    border: 1px solid rgba(255, 255, 255, .82);
    box-shadow: 0 28px 60px -46px rgba(11, 60, 140, .55);
    overflow: hidden;
}

body.subpage .card-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--hair-2, rgba(14, 34, 66, .06));
}

body.subpage .card-head h2 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink, #0E1726);
}

body.subpage .card-body { padding: 20px 22px 24px; }

body.subpage .card-body > p:first-child { margin-top: 0; }

body.subpage .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #0E1726);
    margin-bottom: 8px;
}

body.subpage .form-label .hint {
    font-weight: 400;
    color: var(--ink-3, #8391A6);
}

body.subpage .input,
body.subpage .textarea {
    border-radius: 12px;
    border-color: rgba(14, 34, 66, .1);
    background: rgba(255, 255, 255, .72);
    padding: 11px 13px;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

body.subpage .input:focus,
body.subpage .textarea:focus {
    border-color: rgba(11, 91, 203, .45);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(11, 91, 203, .08);
    outline: none;
}

body.subpage .textarea { min-height: 132px; }

/* 分类按钮：胶囊形、实色选中，不用渐变 */
body.subpage .type-pill,
body.subpage .fb-cat {
    border-radius: 999px;
    border-color: rgba(14, 34, 66, .1);
    background: rgba(255, 255, 255, .8);
    padding: 8px 18px;
    font-size: 13px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

body.subpage .type-pill:hover,
body.subpage .fb-cat:hover {
    border-color: rgba(11, 91, 203, .28);
    background: #fff;
}

body.subpage .type-pill.active,
body.subpage .fb-cat.active {
    background: var(--blue-2, #1370F3);
    border-color: var(--blue-2, #1370F3);
    color: #fff;
}

body.subpage .captcha-question {
    border-radius: 12px;
    border: 1px dashed rgba(11, 91, 203, .28);
    background: rgba(232, 241, 255, .7);
    color: var(--blue, #0B5BCB);
    font-weight: 600;
    letter-spacing: .04em;
}

body.subpage .btn {
    border-radius: 12px;
    border-color: rgba(14, 34, 66, .12);
    background: rgba(255, 255, 255, .86);
}

body.subpage .btn:hover {
    background: #fff;
    border-color: rgba(11, 91, 203, .28);
}

body.subpage .btn.primary {
    background: var(--blue, #0B5BCB);
    border-color: var(--blue, #0B5BCB);
    color: #fff;
}

body.subpage .btn.primary:hover {
    background: #0947A8;
    border-color: #0947A8;
}

body.subpage .alert {
    border-radius: 14px;
    border-left-width: 3px;
    background: rgba(232, 241, 255, .82);
}

body.subpage .alert.ok { background: rgba(228, 246, 233, .9); }
body.subpage .alert.error { background: rgba(251, 221, 221, .9); }

body.subpage .fb-tip {
    margin: 0 0 18px;
    color: var(--ink-2, #55637A);
    font-size: 13.5px;
    line-height: 1.85;
}

body.subpage .dl-list { margin-bottom: 0; }

body.subpage .dl-row {
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--hair-2, rgba(14, 34, 66, .06));
    border-radius: 14px;
}

body.subpage .dl-icon {
    background: #EDF3FE;
    color: var(--blue-2, #1370F3);
}

body.subpage .foot {
    max-width: 760px;
    padding: 0 20px 44px;
    color: var(--ink-3, #8391A6);
    font-size: 12.5px;
}

@media (max-width: 760px) {
    body.subpage .wrap { padding: 22px 14px 36px; }
    body.subpage .card-head { padding: 15px 16px; }
    body.subpage .card-body { padding: 16px; }
    body.subpage .foot { padding: 0 14px 34px; }
}