/* =====================================================================
 * translator 主题 —— 设计系统
 *
 * 风格参照 Weglot：白底、蓝色主色、大留白、圆角卡片、克制的阴影。
 * 与 bootstrap-5.3.8 配合使用，只补 bootstrap 没有的部分，不覆盖其栅格。
 *
 * 所有颜色/圆角/间距走 CSS 变量，改一处全站生效。
 * ===================================================================*/

:root {
    /* 主色：翻译服务用蓝，传达可信与国际化 */
    --brand:        #2f6bff;
    --brand-dark:   #1b4fd8;
    --brand-soft:   #eef3ff;
    --brand-ring:   rgba(47, 107, 255, .25);

    /* 强调色：仅用于点缀（推荐标记、增长数字），不做大面积 */
    --accent:       #ff7a45;
    --accent-soft:  #fff2ec;

    /* 中性色阶 */
    --ink:          #0d1526;   /* 标题 */
    --body:         #3d4a5c;   /* 正文 */
    --muted:        #6b7a8d;   /* 次要说明 */
    --line:         #e6ebf2;   /* 分隔线/边框 */
    --soft:         #f6f8fb;   /* 浅背景区块 */
    --white:        #fff;

    --success:      #12a150;
    --warning:      #e8a704;
    --danger:       #e0364c;

    --radius-sm:    8px;
    --radius:       14px;
    --radius-lg:    22px;

    --shadow-sm:    0 1px 2px rgba(13, 21, 38, .06);
    --shadow:       0 6px 24px rgba(13, 21, 38, .07);
    --shadow-lg:    0 18px 48px rgba(13, 21, 38, .12);

    /* 区块纵向节奏 */
    --section-y:    92px;
}

@media (max-width: 767.98px) {
    :root { --section-y: 56px; }
}

/* ---------------------------------------------------------------
 * 基础排版
 * -------------------------------------------------------------*/
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: var(--body);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 700; letter-spacing: -.02em; }

/* 锚点定位
 *
 * 顶部导航是 position:sticky 的，锚点滚动会把目标顶到视口最上沿、正好被导航条
 * 盖住 —— 看上去就像"跳错了地方"。scroll-margin-top 给它让出导航的高度。
 * 只在锚点滚动 / scrollIntoView 时生效，不影响任何布局。 */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 82px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* 首屏主标题：大而紧凑，是整页视觉重心 */
.h-display {
    font-size: clamp(2.1rem, 5vw, 3.65rem);
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -.03em;
}
.h-section {
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -.025em;
}
.lead-muted {
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.7;
    color: var(--muted);
}

.text-brand  { color: var(--brand) !important; }
.text-ink    { color: var(--ink) !important; }
.text-muted2 { color: var(--muted) !important; }

/* 关键词高亮：标题里给差异点加底色，替代通篇加粗 */
.mark-brand {
    background: linear-gradient(180deg, transparent 58%, var(--brand-soft) 58%);
    padding: 0 .12em;
}

/* ---------------------------------------------------------------
 * 区块与容器
 * -------------------------------------------------------------*/
.section        { padding: var(--section-y) 0; }
.section-tight  { padding: calc(var(--section-y) * .62) 0; }
.section-soft   { background: var(--soft); }
.section-ink    { background: var(--ink); color: #c7d2e0; }
.section-ink h1, .section-ink h2, .section-ink h3 { color: #fff; }

.container-narrow { max-width: 780px; margin-inline: auto; }

/* 区块小标签：在大标题上方点题 */
.eyebrow {
    display: inline-block;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    padding: .38rem .8rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------------
 * 按钮
 * -------------------------------------------------------------*/
.btn-brand {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: .72rem 1.35rem;
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn-brand:hover   { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px var(--brand-ring); }
.btn-brand:focus   { box-shadow: 0 0 0 .25rem var(--brand-ring); color: #fff; }

.btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: .72rem 1.35rem;
    transition: border-color .16s ease, background .16s ease;
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

.btn-lg-brand { padding: .92rem 1.8rem; font-size: 1.06rem; }

/* CTA 箭头：hover 时右移，暗示"下一步" */
.btn-arrow i { transition: transform .16s ease; }
.btn-arrow:hover i { transform: translateX(3px); }

/* ---------------------------------------------------------------
 * 卡片
 * -------------------------------------------------------------*/
.card-soft {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    /* 见 .member-card 处的说明：bootstrap 的 .card-body 依赖这两个变量，
       它们只定义在 .card 上，自定义卡片必须自己补，否则内容贴边 */
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
}
.card-soft:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: #d8e0ec; }

.feature-icon {
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.15rem;
    margin-bottom: 1rem;
}
.feature-icon.accent { background: var(--accent-soft); color: var(--accent); }

/* ---------------------------------------------------------------
 * 评分徽章 / 统计数字
 * -------------------------------------------------------------*/
.rating-badges { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.rating-badge  { display: flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--muted); }
.rating-badge .stars { color: #f5a623; letter-spacing: -1px; }
.rating-badge b { color: var(--ink); }

.stat-num {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.03em;
    line-height: 1.1;
}
.stat-label { font-size: .92rem; color: var(--muted); }

/* ---------------------------------------------------------------
 * 英雄区轮播
 *
 * 图片本身自带白底窗口与阴影（见 assets/img/hero-*.svg），所以外层不再套
 * 卡片边框，只做圆角裁切，避免出现"框里又一个框"。
 * -------------------------------------------------------------*/
.hero-carousel .hero-shot {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, #eef4ff, #fbfcff);
}
.hero-carousel .hero-shot img {
    display: block;
    width: 100%;
    height: auto;
}
/* 三条文案长度接近但不等长；给固定高度，切换时下面的圆点不会上下跳 */
.hero-shot-cap {
    min-height: 76px;
    padding: 1.1rem .25rem 0;
}
.hero-shot-cap strong {
    display: block;
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 700;
    margin-bottom: .3rem;
}
.hero-shot-cap p {
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.65;
}
@media (max-width: 575.98px) {
    .hero-shot-cap { min-height: 96px; }
}

/* bootstrap 的 .carousel-indicators 是绝对定位压在图上的，这里改成图下方一行 */
.hero-dots {
    position: static;
    margin: .2rem 0 0;
    padding: 0 .25rem;
    justify-content: flex-start;   /* 与上方 caption 左对齐 */
    gap: .4rem;
}
.hero-dots [data-bs-target] {
    width: 8px;
    height: 8px;
    flex: none;
    border: 0;
    border-radius: 999px;
    background: #cfd8e6;
    opacity: 1;
    margin: 0;
    text-indent: 0;
    transition: width .2s ease, background .2s ease;
}
.hero-dots [data-bs-target]:hover  { background: #a9b8cd; }
.hero-dots [data-bs-target].active { width: 26px; background: var(--brand); }

/* ---------------------------------------------------------------
 * 带配图的步骤卡
 * -------------------------------------------------------------*/
.step-card { overflow: hidden; }
.step-shot {
    position: relative;
    background: #eff4ff;
    border-bottom: 1px solid var(--line);
}
.step-shot img { display: block; width: 100%; height: auto; }
.step-shot .step-num {
    position: absolute;
    top: 14px; left: 14px;
    box-shadow: 0 4px 12px var(--brand-ring);
}

/* ---------------------------------------------------------------
 * 对比演示（本站核心差异点：逐句翻译 vs 整页上下文）
 * -------------------------------------------------------------*/
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 767.98px) { .compare-grid { grid-template-columns: 1fr; } }

.compare-col {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
}
.compare-col.bad  { border-color: #f3d4d9; }
.compare-col.good { border-color: #c9dcff; box-shadow: 0 10px 30px rgba(47, 107, 255, .1); }

.compare-head {
    padding: .8rem 1.1rem;
    font-weight: 700;
    font-size: .93rem;
    display: flex; align-items: center; gap: .5rem;
    border-bottom: 1px solid var(--line);
}
.compare-col.bad  .compare-head { background: #fef4f5; color: #b3243a; border-bottom-color: #f3d4d9; }
.compare-col.good .compare-head { background: var(--brand-soft); color: var(--brand-dark); border-bottom-color: #c9dcff; }

.compare-body { padding: 1.1rem; }
.compare-row  { padding: .62rem 0; border-bottom: 1px dashed var(--line); }
.compare-row:last-child { border-bottom: 0; }
.compare-src  { font-size: .82rem; color: var(--muted); margin-bottom: .2rem; }
.compare-out  { font-size: 1rem; color: var(--ink); font-weight: 600; }
.compare-col.bad  .compare-out { color: #b3243a; text-decoration: line-through dotted rgba(179,36,58,.4); }
.compare-col.good .compare-out { color: #0b7a3e; }
.compare-note { font-size: .8rem; color: var(--muted); margin-top: .15rem; }

/* ---------------------------------------------------------------
 * 价格卡
 * -------------------------------------------------------------*/
.price-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    height: 100%;
    display: flex; flex-direction: column;
    position: relative;
    transition: box-shadow .18s ease, transform .18s ease;
}
.price-card:hover { box-shadow: var(--shadow); }

/* 推荐档：边框加深 + 上浮 + 阴影，不只靠一个文字标签 */
.price-card.featured {
    border: 2px solid var(--brand);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
}
@media (max-width: 991.98px) { .price-card.featured { transform: none; } }

.price-flag {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--brand); color: #fff;
    font-size: .78rem; font-weight: 700; letter-spacing: .04em;
    padding: .32rem .9rem; border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 4px 12px var(--brand-ring);
}
.price-name   { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.price-amount { font-size: 2.7rem; font-weight: 800; color: var(--ink); letter-spacing: -.04em; line-height: 1; }
.price-unit   { font-size: .95rem; color: var(--muted); font-weight: 500; }
.price-strike { color: var(--muted); text-decoration: line-through; font-size: .95rem; }
.price-save   {
    display: inline-block; font-size: .82rem; font-weight: 700;
    color: #0b7a3e; background: #e7f7ee;
    padding: .22rem .6rem; border-radius: 999px;
}
.price-feats { list-style: none; padding: 0; margin: 1.35rem 0 0; flex: 1; }
.price-feats li { display: flex; gap: .6rem; align-items: flex-start; padding: .46rem 0; font-size: .95rem; }
.price-feats i { color: var(--success); margin-top: .22rem; flex: none; }
.price-feats .muted { color: var(--muted); }

/* 月付/年付切换 */
.billing-toggle {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--soft); border: 1px solid var(--line);
    border-radius: 999px; padding: .3rem;
}
.billing-toggle button {
    border: 0; background: transparent; color: var(--muted);
    font-weight: 600; font-size: .93rem;
    padding: .5rem 1.15rem; border-radius: 999px;
    cursor: pointer; transition: background .16s, color .16s;
}
.billing-toggle button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---------------------------------------------------------------
 * 导航栏
 * -------------------------------------------------------------*/
.site-nav {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 1030;
}
.site-nav .navbar-brand { font-weight: 800; color: var(--ink); font-size: 1.16rem; letter-spacing: -.02em; }
.site-nav .nav-link {
    color: var(--body); font-weight: 500; font-size: .96rem;
    padding: .5rem .85rem !important; border-radius: var(--radius-sm);
}
.site-nav .nav-link:hover,
.site-nav .nav-link.active { color: var(--brand); background: var(--brand-soft); }

.brand-dot {
    width: 30px; height: 30px; border-radius: 9px;
    background: linear-gradient(135deg, var(--brand), #7aa2ff);
    color: #fff; font-weight: 800; font-size: .95rem;
    display: inline-flex; align-items: center; justify-content: center;
    margin-right: .55rem;
}

/* ---------------------------------------------------------------
 * 页脚
 * -------------------------------------------------------------*/
.site-footer { background: var(--ink); color: #93a3b8; padding: 62px 0 28px; }
.site-footer h6 { color: #fff; font-size: .95rem; font-weight: 700; margin-bottom: 1rem; }
.site-footer a { color: #93a3b8; text-decoration: none; font-size: .93rem; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-links li { margin-bottom: .55rem; }
.site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .88rem; }

/* ---------------------------------------------------------------
 * 会员中心
 * -------------------------------------------------------------*/
.member-side-nav .list-group-item {
    border: 0; border-radius: var(--radius-sm);
    padding: .68rem .9rem; margin-bottom: .18rem;
    color: var(--body); font-size: .95rem; font-weight: 500;
}
.member-side-nav .list-group-item:hover  { background: var(--soft); color: var(--brand); }
.member-side-nav .list-group-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.member-side-nav .list-group-item i { width: 18px; text-align: center; }

.member-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    /* bootstrap 的 .card-body 用 padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x)，
       而这两个变量只定义在 .card 上。member-card / card-soft 不是 .card，
       变量取不到值 → padding 解析失败 → 内容直接贴着边框。这里补上。 */
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
}
@media (max-width: 575.98px) {
    .member-card, .card-soft { --bs-card-spacer-y: 1.1rem; --bs-card-spacer-x: 1.1rem; }
}

/* 用量进度条 */
.quota-bar { height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.quota-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.quota-ok   > span { background: linear-gradient(90deg, #17b95e, #12a150); }
.quota-warn > span { background: linear-gradient(90deg, #f5bf3a, #e8a704); }
.quota-crit > span { background: linear-gradient(90deg, #f2647c, #e0364c); }

/* 授权码 */
.license-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--soft); border: 1px dashed var(--line);
    border-radius: var(--radius-sm); padding: .6rem .85rem;
    font-size: .92rem; color: var(--ink); word-break: break-all;
}

/* ---------------------------------------------------------------
 * FAQ
 * -------------------------------------------------------------*/
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
    width: 100%; text-align: left; background: none; border: 0;
    padding: 1.15rem 2.2rem 1.15rem 0; position: relative;
    font-weight: 650; color: var(--ink); font-size: 1.03rem; cursor: pointer;
}
/* 箭头用真实的 <i class="fa-solid fa-chevron-down"> 元素，不用 ::after + content。
   伪元素方案要硬编码 font-family（"Font Awesome N Free"），版本号写错不会报错，
   只会静默退回普通字体、图标位置一片空白 —— 之前就是这么踩的。
   直接复用 assets-admin 里 FontAwesome 自己的类名，升级版本也不用改这里。 */
.faq-q .faq-arrow {
    position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
    font-size: .78rem; color: var(--muted); transition: transform .2s ease, color .2s ease;
}
.faq-q[aria-expanded="true"] .faq-arrow { transform: translateY(-50%) rotate(180deg); color: var(--brand); }
.faq-a { padding: 0 2.2rem 1.25rem 0; color: var(--muted); line-height: 1.75; }

/* ---------------------------------------------------------------
 * 杂项
 * -------------------------------------------------------------*/
.logo-wall { display: flex; flex-wrap: wrap; gap: 2.2rem 3rem; align-items: center; justify-content: center; }
.logo-wall span {
    font-weight: 700; font-size: 1.05rem; color: #a8b3c2;
    filter: grayscale(1); letter-spacing: -.01em;
}

.step-num {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .95rem; flex: none;
}

.lang-pill {
    display: inline-block; padding: .34rem .78rem; margin: .2rem;
    background: var(--soft); border: 1px solid var(--line);
    border-radius: 999px; font-size: .87rem; color: var(--body);
}

.divider-soft { height: 1px; background: var(--line); border: 0; margin: 0; }