/* ==========================================================================
   CtouyPHP 发布站 —— 前台样式（配合 UIkit 3）
   结构走 UIkit（container / grid / navbar / offcanvas / accordion / button），
   这里只放 UIkit 覆盖不到的部分：品牌色、首屏横幅、卡片、表格、页脚。
   后台（site/admin/）不加载本文件，仍用 bootstrap.min.css + admin.css。
   ========================================================================== */

:root {
  --ct-ink:        #1e293b;
  --ct-ink-soft:   #64748b;
  --ct-line:       #e2e8f0;
  --ct-bg:         #f8fafc;
  --ct-brand:      #2563eb;
  --ct-brand-dark: #1d4ed8;
  --ct-brand-soft: #eff6ff;
  --ct-accent:     #f59e0b;
  --ct-accent-dark:#d97706;
  --ct-deep:       #0c1830;
  --ct-deep-2:     #122a52;
  --ct-success:    #10b981;
  --ct-danger:     #ef4444;
  --ct-radius-sm:  .5rem;
  --ct-radius:     .75rem;
  --ct-radius-lg:  1rem;
  --ct-shadow-sm:  0 1px 2px 0 rgba(15, 23, 42, .05);
  --ct-shadow:     0 1px 3px 0 rgba(15, 23, 42, .1), 0 1px 2px -1px rgba(15, 23, 42, .1);
  --ct-shadow-md:  0 4px 6px -1px rgba(15, 23, 42, .1), 0 2px 4px -2px rgba(15, 23, 42, .1);
  --ct-shadow-lg:  0 10px 15px -3px rgba(15, 23, 42, .1), 0 4px 6px -4px rgba(15, 23, 42, .1);
  --ct-transition: .2s ease;
  /* 全站统一版心：所有区块的可见内容都对齐到同一左右边界 */
  --ct-page:       1200px;
  --ct-section-y:  4.5rem;
}

/* ------------------------------------------------------------------ 基础 */

/* 卡片「撑满列高」只在卡片是所在列的唯一元素时才做。
   列本身是 flex 项、会被拉到与同排最高的列齐平，所以列高是「确定值」；
   一列里排了三张 ct-tile 时，每张的 height:100% 都会拿这个列高当基准，
   三张卡片各变成整列那么高，后面的内容被顶到下一屏 —— 页面上看着就是错位。
   （uk-height-match 是给目标元素写 min-height，不依赖这条，所以去掉也照样等高。） */
.ct-feature-card:only-child,
.ct-card:only-child,
.ct-tile:only-child,
.ct-plan:only-child { height: 100%; }

/* 本项目的 UIkit 精简构建不含 base 里的 box-sizing 复位，必须自己补上：
   否则 .uk-height-match 写进卡片的 min-height 只约束内容盒，被 padding/border 放大后
   又和卡片自身的 height:100% 互相喂大，卡片会无限长高（实测每秒翻一倍）。 */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ct-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.7;
}

.uk-container { max-width: var(--ct-page); }

h1, h2, h3, h4, h5, h6 { color: var(--ct-ink); font-weight: 700; }

code, pre, .ct-mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

a { color: var(--ct-brand-dark); text-decoration: none; }
a:hover { color: var(--ct-brand); }

.ct-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1080;
  background: #fff; padding: .6rem 1rem; border-radius: 0 0 .5rem 0;
}
.ct-skip:focus { left: 0; }

.ct-icon { vertical-align: -.15em; flex: none; }
.ct-quiet { color: var(--ct-ink-soft); }

/* ------------------------------------------------------------------ 按钮 */

.ct-btn,
.ct-btn-ghost,
.ct-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-weight: 600; border-radius: var(--ct-radius-sm);
  padding: 0 1.25rem; min-height: 2.6rem; line-height: 1.5; border: 1px solid transparent;
  text-transform: none; font-size: .95rem;
  transition: background-color var(--ct-transition), border-color var(--ct-transition),
              color var(--ct-transition), box-shadow var(--ct-transition), transform var(--ct-transition);
}
.uk-button-large.ct-btn,
.uk-button-large.ct-btn-ghost { min-height: 3.1rem; font-size: 1.05rem; padding: 0 1.7rem; }

.ct-btn {
  background: var(--ct-brand); border-color: var(--ct-brand); color: #fff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, .3);
}
.ct-btn:hover, .ct-btn:focus {
  background: var(--ct-brand-dark); border-color: var(--ct-brand-dark); color: #fff;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .28); transform: translateY(-1px);
}
.ct-btn-ghost {
  background: rgba(255, 255, 255, .08); color: #fff;
  border-color: rgba(255, 255, 255, .5);
}
.ct-btn-ghost:hover, .ct-btn-ghost:focus {
  background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff;
}
.ct-btn-outline {
  border-color: var(--ct-line); background: #fff; color: var(--ct-ink);
}
.ct-btn-outline:hover, .ct-btn-outline:focus {
  border-color: var(--ct-brand); color: var(--ct-brand-dark); background: var(--ct-brand-soft);
}
.ct-btn-sm { min-height: 2.1rem; font-size: .85rem; padding: 0 .9rem; }
.ct-btn:focus-visible, .ct-btn-ghost:focus-visible, .ct-btn-outline:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .35); outline-offset: 2px;
}

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

.ct-announce {
  background: var(--ct-deep); color: rgba(255, 255, 255, .88);
  font-size: .875rem; padding: .55rem 0;
}
.ct-announce .uk-container { display: flex; align-items: center; gap: .5rem; }
.ct-announce a { color: #93c5fd; }
.ct-announce-dot {
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--ct-accent);
  flex: none; box-shadow: 0 0 0 4px rgba(245, 158, 11, .2);
}

/* ---------------------------------------------------------------- 导航栏 */

.ct-header {
  position: sticky; top: 0; z-index: 980;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--ct-line);
}
.ct-navbar { min-height: 68px; }

.ct-brand {
  display: flex; align-items: center; gap: .6rem;
  padding-inline: 0; color: var(--ct-ink); min-height: auto;
}
.ct-brand:hover { color: var(--ct-ink); }
.ct-brand-logo { border-radius: 8px; }
.ct-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.ct-brand-text strong { font-size: 1.08rem; letter-spacing: .2px; color: var(--ct-ink); }
.ct-brand-text small { font-size: .72rem; color: var(--ct-ink-soft); }

.ct-nav > li > a {
  height: auto; min-height: auto; padding: .5rem .85rem; margin: 0 .1rem;
  font-size: .95rem; font-weight: 500; color: var(--ct-ink); text-transform: none;
  border-radius: var(--ct-radius-sm);
}
.ct-nav > li > a:hover { color: var(--ct-brand-dark); background: var(--ct-brand-soft); }
.ct-nav > li.uk-active > a { color: var(--ct-brand-dark); background: var(--ct-brand-soft); font-weight: 600; }

.ct-nav-cta { padding-inline: .5rem 0; }
.ct-nav-cta .ct-btn { min-height: 2.3rem; font-size: .9rem; }
.ct-nav-toggle { color: var(--ct-ink); }

.ct-offcanvas { background: var(--ct-deep); }
.ct-offcanvas-brand {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 1.25rem;
  color: #fff;
}
.ct-offcanvas-brand img { border-radius: 7px; }
.ct-offcanvas-brand span { display: flex; flex-direction: column; line-height: 1.2; }
.ct-offcanvas-brand small { color: rgba(255, 255, 255, .6); font-size: .72rem; }
.ct-offcanvas-nav { margin-bottom: 1.25rem; }
.ct-offcanvas-nav > li > a { color: rgba(255, 255, 255, .82); font-size: 1rem; }
.ct-offcanvas-nav > li > a:hover,
.ct-offcanvas-nav > li.uk-active > a { color: #fff; background: rgba(255, 255, 255, .1); }

/* ------------------------------------------------------------------ 首屏 */

.ct-hero {
  position: relative; overflow: hidden; color: #fff;
  background-color: var(--ct-deep);
  background-image:
    radial-gradient(900px 420px at 12% -10%, rgba(37, 99, 235, .45), transparent 62%),
    radial-gradient(760px 420px at 88% 6%, rgba(14, 165, 233, .28), transparent 64%),
    linear-gradient(115deg, #071227 0%, #0c1830 46%, #122a52 100%);
  padding: 5.5rem 0 5rem;
  text-align: center;
}
.ct-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  -webkit-mask-image: radial-gradient(130% 105% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(130% 105% at 50% 0%, #000 30%, transparent 78%);
}
.ct-hero > .uk-container { position: relative; z-index: 1; }
.ct-hero h1 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800; line-height: 1.25; letter-spacing: -.5px;
  color: #fff; margin: 1.1rem 0 1.25rem;
}
.ct-hero-lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.85;
  color: rgba(255, 255, 255, .82); max-width: 46rem; margin: 0 auto 1.6rem;
}
.ct-hero-meta { font-size: .95rem; color: rgba(255, 255, 255, .68); margin-bottom: 1.75rem; }
.ct-hero-actions {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 1.75rem;
}
.ct-hero-note { font-size: .88rem; color: rgba(255, 255, 255, .62); margin: 0; }
.ct-hero-badges {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.9rem;
}
.ct-hero-shot { max-width: 1040px; margin: 3.25rem auto 0; }

.ct-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; padding: .3rem .75rem; white-space: nowrap;
}
.ct-badge-soft {
  color: var(--ct-brand-dark); background: var(--ct-brand-soft);
  border-color: rgba(37, 99, 235, .18);
}
.ct-badge-hot { color: #fff; background: var(--ct-accent); border-color: var(--ct-accent); }
.ct-badge-ok {
  color: #047857; background: #ecfdf5;
  border-color: rgba(16, 185, 129, .28);
}
.ct-badge-err {
  color: #b91c1c; background: #fef2f2;
  border-color: rgba(239, 68, 68, .28);
}

.ct-shot {
  border-radius: var(--ct-radius-lg); border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 24px 60px rgba(2, 6, 23, .5); width: 100%; height: auto; display: block;
}
/* 白底页面里的截图：描边和阴影换成浅色那套 */
.ct-shot--plain {
  border-color: var(--ct-line);
  box-shadow: var(--ct-shadow-md);
}

/* -------------------------------------------------------------- 内页头条 */

.ct-page-hero {
  color: #fff; padding: 3.25rem 0 3rem;
  background-color: var(--ct-deep);
  background-image:
    radial-gradient(720px 320px at 10% -20%, rgba(37, 99, 235, .42), transparent 64%),
    linear-gradient(115deg, #071227 0%, #0c1830 52%, #122a52 100%);
}
.ct-page-hero .uk-container { position: relative; z-index: 1; }
.ct-page-title {
  color: #fff; font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 800; line-height: 1.3; margin: .75rem 0 .75rem;
}
.ct-page-lead {
  color: rgba(255, 255, 255, .8); font-size: 1.02rem; line-height: 1.8;
  max-width: 52rem; margin: 0;
}
/* 居中的头条：问答页那类「一句话说清这页是什么」，窄一点更聚拢 */
.ct-page-hero--center { text-align: center; }
.ct-page-hero--center .ct-page-lead { max-width: 44rem; margin: 0 auto; }

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

.ct-section { padding: var(--ct-section-y) 0; }
.ct-section-tight { padding: 3rem 0; }
.ct-section-alt { background: var(--ct-bg); border-block: 1px solid var(--ct-line); }

.ct-section-head { max-width: 52rem; margin: 0 auto 2.75rem; text-align: center; }
.ct-section-head--left { margin-inline: 0; text-align: left; }
.ct-eyebrow {
  display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .6px;
  color: var(--ct-brand-dark); background: var(--ct-brand-soft);
  border-radius: 999px; padding: .25rem .8rem; margin-bottom: .85rem;
}
.ct-eyebrow-light { color: #fff; background: rgba(255, 255, 255, .16); }
.ct-section-title {
  font-size: clamp(1.45rem, 2.6vw, 2rem); font-weight: 800;
  line-height: 1.35; margin: 0 0 .75rem;
}
.ct-section-lead { color: var(--ct-ink-soft); font-size: 1rem; line-height: 1.8; margin: 0; }

/* ------------------------------------------------- 特性卡片（仿官网首页） */

.ct-feature-card {
  height: auto; text-align: center; padding: 2rem 1.4rem;
  background: #fff; border: 1px solid var(--ct-line); border-radius: var(--ct-radius);
  box-shadow: var(--ct-shadow-sm);
  transition: transform var(--ct-transition), box-shadow var(--ct-transition),
              border-color var(--ct-transition);
}
.ct-feature-card:hover {
  transform: translateY(-3px); box-shadow: var(--ct-shadow-lg); border-color: rgba(37, 99, 235, .35);
}
.ct-feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 16px; margin-bottom: 1rem;
  color: var(--ct-brand-dark); background: var(--ct-brand-soft);
}
.ct-feature-card h3 { font-size: 1.08rem; margin: 0 0 .55rem; }
.ct-feature-card p { color: var(--ct-ink-soft); font-size: .92rem; margin: 0; }
.ct-feature-more {
  text-align: center; margin: 2.25rem 0 0; font-size: .95rem; color: var(--ct-ink-soft);
}

/* ---------------------------------------------------------------- 卡片 */

.ct-card {
  height: auto; background: #fff; border: 1px solid var(--ct-line);
  border-radius: var(--ct-radius); box-shadow: var(--ct-shadow-sm);
  padding: 1.6rem 1.5rem;
}
.ct-card h3 { font-size: 1.1rem; margin: 0 0 .6rem; }
.ct-card p { color: var(--ct-ink-soft); margin: 0 0 .75rem; }
.ct-card p:last-child { margin-bottom: 0; }
.ct-card-kicker {
  font-size: .76rem; font-weight: 700; letter-spacing: .5px;
  color: var(--ct-brand-dark); text-transform: uppercase;
}

.ct-tile {
  height: auto; background: var(--ct-bg); border: 1px solid var(--ct-line);
  border-radius: var(--ct-radius); padding: 1.35rem 1.35rem;
}
/* 灰底版心上的卡片：.ct-tile 的底色取的是 var(--ct-bg)，跟 .ct-section-alt
   同色，卡片直接「隐身」—— 下载页那三张（运行环境 / 第一次打开 / 下载的是
   试用版）就是这样，只有卡片里那张白底表格浮着。灰底上一律换白底，跟
   .ct-card 一个观感；白底版心上的卡片保持浅灰底，靠底色把卡片托出来。
   .ct-tile-ok（授权查询命中那张）自带白底 + 成功色描边，别在这里重写。 */
.ct-section-alt .ct-tile:not(.ct-tile-ok) { background: #fff; }
.ct-tile h3 { font-size: 1rem; margin: 0 0 .5rem; display: flex; align-items: center; gap: .4rem; }
.ct-tile p { color: var(--ct-ink-soft); margin: 0 0 .5rem; font-size: .93rem; }
.ct-tile p:last-child { margin-bottom: 0; }
/* 查询命中时的那张卡：换成成功色描边，和普通灰底卡片区分开 */
.ct-tile-ok {
  background: #fff; border-color: rgba(16, 185, 129, .35);
  box-shadow: var(--ct-shadow-sm);
}

.ct-icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  color: var(--ct-brand-dark); background: var(--ct-brand-soft); flex: none;
}
.ct-icon-tile-lg { width: 52px; height: 52px; border-radius: 14px; }

/* ---------------------------------------------------------------- 数字条 */

.ct-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin-top: 3rem; background: var(--ct-line);
  border: 1px solid var(--ct-line); border-radius: var(--ct-radius); overflow: hidden;
}
.ct-stat { background: #fff; padding: 1.6rem 1rem; text-align: center; }
.ct-stat-num { font-size: 2rem; font-weight: 800; color: var(--ct-brand-dark); line-height: 1.1; }
.ct-stat-label { color: var(--ct-ink-soft); font-size: .88rem; margin-top: .35rem; }

/* ---------------------------------------------------------------- 清单 */

.ct-check-list { list-style: none; margin: 0; padding: 0; }
.ct-check-list li {
  display: flex; align-items: flex-start; gap: .5rem;
  color: var(--ct-ink-soft); font-size: .95rem; padding: .3rem 0;
}
.ct-check-list li .ct-icon { color: var(--ct-success); margin-top: .28rem; }

/* ---------------------------------------------------------------- 版本卡 */

.ct-plan {
  height: auto; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--ct-line); border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow); padding: 1.9rem 1.75rem;
}
.ct-plan--featured { border-color: var(--ct-brand); box-shadow: 0 12px 32px rgba(37, 99, 235, .18); }
.ct-plan-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ct-plan-name { font-size: 1.25rem; margin: 0; }
.ct-plan-tag {
  font-size: .76rem; font-weight: 700; color: var(--ct-brand-dark);
  background: var(--ct-brand-soft); border-radius: 999px; padding: .22rem .7rem;
}
.ct-plan-price {
  margin: 1.1rem 0 1.25rem;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem;
}
.ct-plan-price .num { font-size: 1.9rem; font-weight: 800; color: var(--ct-ink); }
.ct-plan-price .was { font-size: 1rem; color: var(--ct-ink-soft); text-decoration: line-through; }
.ct-plan-price--text .num { font-size: 1.35rem; }
.ct-plan-list { list-style: none; margin: 0 0 1.5rem; padding: 0; flex: 1 1 auto; }
.ct-plan-list li {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .93rem; color: var(--ct-ink-soft); padding: .32rem 0;
}
.ct-plan-list li .ct-icon { color: var(--ct-success); margin-top: .28rem; }
.ct-plan > .ct-btn, .ct-plan > .ct-btn-outline { width: 100%; }

/* 有划线价的档位（后台填了「原价」）：划价是最强的购买理由，这一档要跳出来。
   和 .ct-plan--featured 叠加时以这套为准 —— 写在后面，border / box-shadow 覆盖前者。 */
.ct-plan--deal {
  border: 2px solid var(--ct-accent);
  box-shadow: 0 16px 40px rgba(245, 158, 11, .24);
  background: linear-gradient(180deg, #fffaf0 0%, #fff 46%);
}
.ct-plan--deal .ct-plan-name { color: var(--ct-deep); }
.ct-plan--deal .ct-plan-price { margin-top: 1.2rem; }
.ct-plan--deal .ct-plan-price .num {
  font-size: 2.6rem; line-height: 1.05; letter-spacing: -.5px;
  color: var(--ct-accent-dark);
}
.ct-plan--deal .ct-plan-price .was { font-size: 1.05rem; }
/* 划价档的「推荐 / 先试后买」角标跟着换暖色，别在暖色卡上挂一枚冷色药丸 */
.ct-plan--deal .ct-plan-tag { color: #92400e; background: #fef3c7; }
/* 「省 ¥xxx」角标：和价格同一行，基线对齐靠 align-self 兜住。
   底色用深一档的琥珀（#b45309）而不是 --ct-accent：白字压 #f59e0b 只有 2.2:1，
   小字读不清；#b45309 是 5.0:1，过 WCAG AA。 */
.ct-plan-save {
  align-self: center; white-space: nowrap;
  font-size: .78rem; font-weight: 700; color: #fff;
  background: #b45309; border-radius: 999px; padding: .26rem .72rem;
}
/* 大屏三卡并排时把这一档抬起来一点，形成高度差 —— 只在 @l 生效，
   窄屏单列时抬高只会让卡片挤到上一段，没有意义。 */
@media (min-width: 1200px) {
  .ct-plan--deal { transform: translateY(-8px); }
}

/* ---------------------------------------------------------------- 步骤 */

.ct-step { display: flex; align-items: flex-start; gap: 1rem; }
.ct-step-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ct-brand); color: #fff; font-weight: 700; font-size: 1rem;
}
.ct-step h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.ct-step p { color: var(--ct-ink-soft); font-size: .93rem; margin: 0; }

/* ---------------------------------------------------------------- 提示块 */

.ct-callout {
  background: var(--ct-brand-soft); border: 1px solid rgba(37, 99, 235, .18);
  border-left: 4px solid var(--ct-brand);
  border-radius: var(--ct-radius-sm); padding: 1rem 1.15rem;
  color: var(--ct-ink); font-size: .94rem;
}
.ct-callout strong { color: var(--ct-brand-dark); }
.ct-callout-ok {
  background: #ecfdf5; border-color: rgba(16, 185, 129, .25); border-left-color: var(--ct-success);
}
.ct-callout-ok strong { color: #047857; }
.ct-callout-err {
  background: #fef2f2; border-color: rgba(239, 68, 68, .25); border-left-color: var(--ct-danger);
}
.ct-callout-err strong { color: #b91c1c; }

/* ---------------------------------------------------------------- 折叠问答 */

.ct-accordion { list-style: none; margin: 0; padding: 0; }
.ct-accordion > li {
  background: #fff; border: 1px solid var(--ct-line); border-radius: var(--ct-radius);
  box-shadow: var(--ct-shadow-sm); margin-bottom: .85rem; overflow: hidden;
  transition: border-color var(--ct-transition), box-shadow var(--ct-transition);
}
.ct-accordion > li.uk-open { border-color: rgba(37, 99, 235, .35); box-shadow: var(--ct-shadow-md); }
.ct-accordion .uk-accordion-title {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.35rem; font-size: 1.02rem; font-weight: 600;
  color: var(--ct-ink); line-height: 1.6;
}
.ct-accordion .uk-accordion-title:hover { color: var(--ct-brand-dark); }
.ct-accordion .uk-accordion-title::after {
  content: ""; float: none; background-image: none;
  width: 9px; height: 9px; margin-left: auto; flex: none;
  border-right: 2px solid var(--ct-ink-soft); border-bottom: 2px solid var(--ct-ink-soft);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--ct-transition);
}
.ct-accordion .uk-open > .uk-accordion-title::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.ct-accordion .uk-accordion-content { padding: 0 1.35rem 1.25rem; color: var(--ct-ink-soft); }
.ct-accordion .uk-accordion-content > *:first-child { margin-top: 0; }
.ct-accordion .uk-accordion-content > *:last-child { margin-bottom: 0; }
.ct-accordion .uk-accordion-content ul { padding-left: 1.25rem; }
.ct-accordion .uk-accordion-content strong { color: var(--ct-ink); }

/* ------------------------------------------------------ 常见问题（按分类分组）

   结构参考 vmpsoft.cn 的常见问题页：一组 = 分类头（圆角图标 + 分类名 + 条数）
   + 一列折叠问答。整页收成一条居中窄栏，读长答案不费眼。 */

.ct-faq-section { padding-top: 3.25rem; }

.ct-faq-page { max-width: 60rem; margin: 0 auto; }

.ct-faq-category { margin-bottom: 3rem; }
.ct-faq-category:last-child { margin-bottom: 0; }

.ct-faq-cat-head {
  display: flex; align-items: center; gap: .9rem;
  padding-bottom: .85rem; margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--ct-line);
}
.ct-faq-cat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  color: var(--ct-brand-dark); background: var(--ct-brand-soft);
}
.ct-faq-cat-copy { min-width: 0; }
.ct-faq-cat-title { font-size: 1.15rem; font-weight: 700; line-height: 1.4; margin: 0; }
.ct-faq-cat-desc { color: var(--ct-ink-soft); font-size: .9rem; margin: .25rem 0 0; }

.ct-faq-list { margin: 0; }

/* 正文里的图片（默认手册的界面截图走这条）：贴着正文宽度，圆角描边。 */
.ct-body-figure { margin: 1.1rem 0; }
.ct-body-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--ct-line); border-radius: var(--ct-radius);
  background: #fff;
}

/* ------------------------------------------- 用户手册（抽屉目录 + 搜索 + 长文档）

   结构参考 vmpsoft.cn/manual.html：左边一只「抽屉」——最上面是搜索框（过滤目录
   与正文），下面是分类目录；右边是长文档式正文（分类 h2、条目 h3）。
   桌面：抽屉常驻，滚动时停在顶栏下面。
   窄屏（<960px）：抽屉收起来，正文顶上一条「目录与搜索」按钮，点开才是抽屉 +
   半透明遮罩（浮层）。**只有脚本跑起来了（.ct-doc-js）才这么收** ——
   没 JS 时窄屏退回「目录在上、正文在下」，目录照样点得到。 */

.ct-doc-section { padding-top: 3.25rem; }

.ct-doc-layout {
  display: grid; grid-template-columns: 17rem minmax(0, 1fr);
  gap: 2.5rem; align-items: start;
}
.ct-doc-body { min-width: 0; }

/* 目录开关：只在窄屏出现（桌面有常驻抽屉，不需要它） */
.ct-doc-bar { display: none; }
/* 遮罩：只在窄屏 + 脚本在位时才有意义（见下面的媒体查询） */
.ct-doc-overlay { display: none; }

.ct-doc-side {
  position: sticky; top: 5.5rem;
  max-height: calc(100vh - 7rem); overflow-y: auto;
  /* 目录就是一块干净的白底：不描边线、不加投影，全靠字号与留白分层。
     滚动条常驻留槽（scrollbar-gutter），搜索时结果多少条都不会左右跳。 */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .55) transparent;
  padding: .9rem .9rem 1rem;
  /* .uk-container 是 content-box 且 box-sizing: inherit 一路传下来，
     宽度类元素不自己声明就会「width + 内边距」一起撑出去 */
  box-sizing: border-box;
  background: #fff;
  border-radius: var(--ct-radius);
}

/* 细滚动条：Chrome / Edge / Safari 走 ::-webkit-scrollbar，Firefox 认上面那对
   scrollbar-width / scrollbar-color。系统默认那条 15px 的灰色宽带，塞在 17rem
   的目录里太抢眼 —— 收到 6px、换成半透明灰，指针悬上去才加深。 */
.ct-doc-side::-webkit-scrollbar { width: 6px; height: 6px; }
.ct-doc-side::-webkit-scrollbar-track { background: transparent; }
.ct-doc-side::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .55);
  border-radius: 999px;
}
.ct-doc-side::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .75); }
.ct-doc-side::-webkit-scrollbar-corner { background: transparent; }

.ct-doc-search {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .65rem;
  background: var(--ct-bg); border: 1px solid var(--ct-line);
  border-radius: var(--ct-radius-sm);
}
.ct-doc-search:focus-within { background: #fff; border-color: var(--ct-brand); }
.ct-doc-search-icon { display: inline-flex; flex: none; color: var(--ct-ink-soft); }
.ct-doc-search-input {
  flex: 1; min-width: 0; padding: 0; border: 0; outline: 0;
  background: transparent; font-size: .9rem; color: var(--ct-ink);
}
.ct-doc-search-clear {
  flex: none; width: 20px; height: 20px; padding: 0; line-height: 1;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--ct-line); color: var(--ct-ink); font-size: 1rem;
}
.ct-doc-search-clear:hover { background: var(--ct-ink-soft); color: #fff; }
.ct-doc-meta { margin: .6rem 0 .5rem; font-size: .76rem; color: var(--ct-ink-soft); }

.ct-doc-nav-list,
.ct-doc-nav-sub { list-style: none; margin: 0; padding: 0; }
.ct-doc-nav-sub {
  /* 子级缩进靠留白，不再拉一条竖线 —— 目录里一根边线都不留。 */
  margin: .1rem 0 .55rem .5rem; padding-left: .72rem;
}
.ct-doc-nav-sub:last-child { margin-bottom: 0; }
.ct-doc-nav-cat {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .3rem .4rem; border-radius: var(--ct-radius-sm);
  color: var(--ct-ink); font-size: .9rem; font-weight: 700; line-height: 1.5;
}
.ct-doc-nav-cat:hover,
.ct-doc-nav-cat:focus { background: var(--ct-brand-soft); color: var(--ct-brand-dark); }
.ct-doc-nav-num { flex: none; font-size: .74rem; font-weight: 400; color: var(--ct-ink-soft); }
.ct-doc-nav-link {
  display: block; padding: .28rem .4rem; border-radius: var(--ct-radius-sm);
  color: var(--ct-ink-soft); font-size: .88rem; line-height: 1.5;
}
.ct-doc-nav-link:hover,
.ct-doc-nav-link:focus { background: var(--ct-brand-soft); color: var(--ct-brand-dark); }
.ct-doc-empty { margin: .55rem 0 0; font-size: .84rem; color: var(--ct-ink-soft); }

/* 正文：长文档式（分类 h2 + 条目 h3），不再用折叠面板 */
.ct-doc-category { margin-bottom: 3.2rem; scroll-margin-top: 6rem; }
.ct-doc-category:last-child { margin-bottom: 0; }
.ct-doc-cat-head {
  display: flex; align-items: center; gap: .8rem;
  padding-bottom: .7rem; margin-bottom: 1.4rem;
  border-bottom: 2px solid var(--ct-line);
}
.ct-doc-cat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  color: var(--ct-brand-dark); background: var(--ct-brand-soft);
}
.ct-doc-cat-copy { min-width: 0; }
.ct-doc-cat-title { font-size: 1.3rem; font-weight: 700; line-height: 1.35; margin: 0; }
.ct-doc-cat-desc { color: var(--ct-ink-soft); font-size: .9rem; margin: .25rem 0 0; }

.ct-doc-item { margin-bottom: 1.9rem; scroll-margin-top: 6rem; }
.ct-doc-item:last-child { margin-bottom: 0; }
.ct-doc-item-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .55rem; }
.ct-doc-item-body { color: var(--ct-ink-soft); font-size: .95rem; }
.ct-doc-item-body p { margin: 0 0 .7rem; }
.ct-doc-item-body p:last-child { margin-bottom: 0; }
.ct-doc-item-body strong { color: var(--ct-ink); }
.ct-doc-item-body code {
  padding: .1rem .3rem; border-radius: 4px;
  background: var(--ct-bg); border: 1px solid var(--ct-line); font-size: .88em;
}
.ct-doc-item-body ul,
.ct-doc-item-body ol { margin: 0 0 .7rem; padding-left: 1.25rem; }
.ct-doc-item-body li { margin-bottom: .25rem; }
.ct-doc-item-body .ct-table-wrap { margin: .8rem 0; }

/* 窄屏：抽屉收成浮层，正文顶上给一条开关 */
@media (max-width: 959px) {
  .ct-doc-layout { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }

  .ct-doc-bar { display: block; }
  .ct-doc-toggle {
    display: flex; align-items: center; gap: .55rem; width: 100%;
    box-sizing: border-box;
    padding: .7rem .9rem; cursor: pointer;
    background: #fff; border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius); color: var(--ct-ink);
    font-size: .95rem; font-weight: 700; text-align: left;
  }
  .ct-doc-toggle-hint { margin-left: auto; font-size: .78rem; font-weight: 400; color: var(--ct-ink-soft); }

  /* 只有脚本在位时，抽屉才变成浮层 —— 没 JS 就照常排在正文上面 */
  .ct-doc-layout.ct-doc-js .ct-doc-side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000;
    width: 86vw; max-width: 20rem; max-height: none;
    /* 浮层这里同样不描边、不投影：右边就是半透明遮罩压暗的页面，
       白面板在深色底上本来就分得开，不必再叠一层影子。 */
    border: 0; border-radius: 0; box-shadow: none;
    transform: translateX(-102%);
  }
  .ct-doc-layout.ct-doc-js.is-open .ct-doc-side { transform: none; }

  .ct-doc-layout.ct-doc-js .ct-doc-overlay {
    display: block; position: fixed; inset: 0; z-index: 999;
    background: rgba(12, 24, 48, .45);
    opacity: 0; pointer-events: none;
  }
  .ct-doc-layout.ct-doc-js.is-open .ct-doc-overlay { opacity: 1; pointer-events: auto; }

  /* 动画只在「脚本备好之后」才挂上（ct-doc-ready 由脚本在下一帧加）：
     页面刚解析出来那一下是直接停在屏幕外的，不会当着用户的面滑出去。 */
  .ct-doc-layout.ct-doc-js.ct-doc-ready .ct-doc-side { transition: transform var(--ct-transition); }
  .ct-doc-layout.ct-doc-js.ct-doc-ready .ct-doc-overlay { transition: opacity var(--ct-transition); }
}

/* 页尾「没找到答案」条：居中深色卡 + 工单 / 邮件两条路。
   底色沿用首屏与横幅那套深蓝渐变（--ct-deep 系），全站视觉同源。 */
.ct-faq-cta {
  position: relative; overflow: hidden;
  max-width: 52rem; margin: 3.25rem auto 0; padding: 2.5rem 1.75rem;
  text-align: center; color: #fff;
  border-radius: var(--ct-radius-lg);
  background-image:
    radial-gradient(520px 260px at 88% -12%, rgba(14, 165, 233, .28), transparent 66%),
    linear-gradient(115deg, #071227 0%, #0c1830 52%, #122a52 100%);
  box-shadow: var(--ct-shadow-lg);
}
.ct-faq-cta-title {
  font-size: 1.35rem; font-weight: 700; line-height: 1.35;
  margin: 0 0 .55rem; color: #fff;
}
.ct-faq-cta-desc {
  color: rgba(255, 255, 255, .68); font-size: .95rem;
  margin: 0 auto 1.6rem; max-width: 34rem;
}
.ct-faq-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
/* 幽灵按钮在深底上按本站横幅的做法收一档描边，别抢主按钮 */
.ct-faq-cta .ct-btn-ghost { border-color: rgba(255, 255, 255, .28); }
.ct-faq-cta .ct-btn-ghost:hover,
.ct-faq-cta .ct-btn-ghost:focus { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }

  @media (max-width: 639px) {
    .ct-faq-cat-head { flex-wrap: wrap; }
    .ct-faq-cta { padding: 1.9rem 1.25rem; }
  .ct-faq-cta-title { font-size: 1.15rem; }
  /* 窄屏两个按钮各占一行，点起来更稳 */
  .ct-faq-cta-actions { flex-direction: column; }
  .ct-faq-cta-actions .ct-btn,
  .ct-faq-cta-actions .ct-btn-ghost { width: 100%; }
}

/* ---------------------------------------------------------------- 表格 */

.ct-table-wrap {
  overflow-x: auto; border: 1px solid var(--ct-line);
  border-radius: var(--ct-radius); background: #fff;
}
/* 下载页「运行环境」那张表嵌在 .ct-tile 卡片里 —— 卡片自己已经有边框与圆角，
   再套一圈就是双层框。这一处去掉外框，只留横向滚动、圆角与白底；
   其余页面的表格照旧带外框。 */
.ct-table-wrap-plain {
  overflow-x: auto;
  border: 0;
  border-radius: var(--ct-radius);
  background: #fff;
}
.ct-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.ct-table th, .ct-table td {
  padding: .7rem .9rem; border-bottom: 1px solid var(--ct-line); text-align: left;
  vertical-align: top;
}
.ct-table thead th { background: var(--ct-bg); font-weight: 700; color: var(--ct-ink); white-space: nowrap; }
.ct-table tbody tr:last-child td { border-bottom: 0; }
.ct-table tbody tr:hover td { background: #fbfdff; }
.ct-table td:first-child { color: var(--ct-ink); }
/* 状态单元格：图标与「可用 / 不可用」必须同排。inline-flex 里的文字在列被挤窄时
   会从中间断开（「可」「用」分两行），所以这里一律 nowrap；真的放不下就由
   .ct-table-wrap 的横向滚动兜底，而不是把两个字拆开。 */
.ct-yes { color: #047857; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.ct-no { color: #b91c1c; white-space: nowrap; }
.ct-partial { color: var(--ct-accent-dark); font-weight: 600; }
.ct-table-note { color: var(--ct-ink-soft); font-size: .88rem; margin: 1rem 0 0; }

/* 窄屏：表格缩一号字并收紧内边距，把宽度让给「试用版 / 正式版」两列 */
/* 首页收尾那条行动号召的按钮行。
   以前这里是个 <p> 里塞三个 inline-block 按钮：窄屏换行之后左右参差、
   三个按钮宽度不一、行距也乱 —— 手机上看着就是「错乱」。改成弹性行，
   和常见问题 / 技术支持页页尾那两处同一个做法（窄屏各占一行）。 */
.ct-cta-actions {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
  margin-top: 1.75rem;
}

@media (max-width: 639px) {
  .ct-table { font-size: .86rem; }
  .ct-table th, .ct-table td { padding: .55rem .6rem; }
}

/* ---------------------------------------------------------------- 表单 */

.ct-form { margin-top: .5rem; }
.ct-req { color: var(--ct-danger); }
.ct-form-note { color: var(--ct-ink-soft); font-size: .84rem; margin-top: .75rem; }
/* 许可证文本框：等宽字体 + 允许横向滚动，长码不换行错位 */
.ct-code-box {
  width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86rem; line-height: 1.7; letter-spacing: .4px;
  color: var(--ct-ink); background: var(--ct-bg);
  border: 1px solid var(--ct-line); border-radius: var(--ct-radius-sm);
  padding: .85rem 1rem; resize: vertical; word-break: break-all;
}
.ct-code-box:focus { outline: none; border-color: var(--ct-brand); background: #fff; }
.ct-hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* 工单截图：虚线拖拽区 + 已选清单。input 本身藏起来，整块区域都是热区 ——
   它是 <label for="f-shots">，点哪儿都能唤起选文件。 */
.ct-shots {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.15rem; cursor: pointer;
  background: var(--ct-bg); border: 1px dashed var(--ct-line);
  border-radius: var(--ct-radius); transition: border-color .15s, background .15s;
}
.ct-shots:hover, .ct-shots.is-over { border-color: var(--ct-brand); background: #fff; }
.ct-shots-icon { color: var(--ct-brand); flex: none; display: inline-flex; }
.ct-shots-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ct-shots-copy strong { font-size: .95rem; font-weight: 600; color: var(--ct-ink); }
.ct-shots-hint { color: var(--ct-ink-soft); font-size: .84rem; }
.ct-shots-hint--ok { color: #047857; }
.ct-shots-hint--warn { color: var(--ct-accent-dark); }
.ct-shots-hint--err { color: var(--ct-danger); }
.ct-shots-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ct-shots-list {
  list-style: none; margin: .7rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .35rem;
}
.ct-shots-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  font-size: .86rem; color: var(--ct-ink-soft);
}
.ct-shots-list .ct-shots-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 提交成功后那几条回执（收到几张、哪几张没收） */
.ct-shots-notes {
  margin: .75rem 0 0; padding-left: 1.1rem;
  color: var(--ct-ink-soft); font-size: .88rem;
}
.ct-shots-notes li { margin-bottom: .25rem; }

/* ------------------------------------------------------------ 文章列表 */

.ct-news-list { display: flex; flex-direction: column; gap: 1rem; }
.ct-news-item {
  background: #fff; border: 1px solid var(--ct-line); border-radius: var(--ct-radius);
  padding: 1.35rem 1.5rem; box-shadow: var(--ct-shadow-sm);
}
.ct-news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.ct-news-date { color: var(--ct-ink-soft); font-size: .84rem; }
.ct-news-title { font-size: 1.15rem; margin: 0 0 .5rem; line-height: 1.5; }
.ct-news-title a { color: var(--ct-ink); }
.ct-news-title a:hover { color: var(--ct-brand-dark); }
.ct-news-summary { color: var(--ct-ink-soft); font-size: .93rem; margin: 0 0 .7rem; }
.ct-news-more { font-size: .9rem; font-weight: 600; }

.ct-side-list { list-style: none; margin: 0; padding: 0; }
.ct-side-list li { border-bottom: 1px dashed var(--ct-line); }
.ct-side-list li:last-child { border-bottom: 0; }
.ct-side-list a {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .55rem 0; color: var(--ct-ink); font-size: .93rem;
}
.ct-side-list a:hover, .ct-side-list a.on { color: var(--ct-brand-dark); font-weight: 600; }
.ct-side-list a span { color: var(--ct-ink-soft); font-size: .82rem; font-weight: 400; }

/* ---------------------------------------------------------------- 发布记录 */

.ct-release-list { display: flex; flex-direction: column; gap: 1rem; }
/* 撤掉右栏之后收成一条居中窄栏，和常见问题页同款 ——
   更新日志的那些 bullet、授权查询的那两个输入框，一行拉太长都读着费劲。 */
.ct-changelog-page,
.ct-lookup-page { max-width: 60rem; margin: 0 auto; }
/* 协议页（用户协议 / 隐私政策）：一条居中窄栏，正文两侧留白读起来才不累。
   比更新日志页再收一点 —— 那些页是列表与表格，这页是成段的文字。 */
.ct-legal-page { max-width: 46rem; margin: 0 auto; }
/* 授权查询结果里「绑定机器」那一栏：一张卡可能绑多台机器，一行一台 ——
   机器码在前，状态徽章与绑定日跟在后面。窄屏整条换行，机器码允许断行。 */
.ct-lookup-machines { list-style: none; margin: 0; padding: 0; }
.ct-lookup-machines li {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .35rem 0;
}
.ct-lookup-machines li + li { border-top: 1px dashed var(--ct-line); }
.ct-lookup-machines code { word-break: break-all; }
.ct-lookup-machines .ct-table-note { margin: 0; }
.ct-release {
  background: #fff; border: 1px solid var(--ct-line); border-radius: var(--ct-radius);
  padding: 1.4rem 1.5rem; box-shadow: var(--ct-shadow-sm);
}
.ct-release-head { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.ct-release-ver { font-size: 1.15rem; font-weight: 800; color: var(--ct-brand-dark); }
.ct-release-latest {
  color: #fff; background: var(--ct-accent); border-color: var(--ct-accent);
}
.ct-release-date { color: var(--ct-ink-soft); font-size: .86rem; }
.ct-release-title { font-weight: 600; margin: 0 0 .6rem; }
.ct-release-items { margin: 0; padding-left: 1.1rem; color: var(--ct-ink-soft); font-size: .93rem; }
.ct-release-items li { margin-bottom: .3rem; }

/* ---------------------------------------------------------------- 下载 */

/* 主下载卡：进页面第一眼就要能看到「下什么、多大、什么时候更新的、点哪下」，
   所以文件名、版本、体积与主按钮放在同一行，校验值压在卡底。
   （旧版把这些拆在一张 2/3 宽的普通卡片里，主按钮又小又靠下，视线要绕一圈才找到。） */
.ct-dl-hero {
  background: #fff; border: 1px solid var(--ct-line); border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-md); overflow: hidden;
}
.ct-dl-hero-body {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
  padding: 1.9rem 2rem;
}
.ct-dl-hero-copy { flex: 1 1 20rem; min-width: 0; }
.ct-dl-hero-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .6rem; }
.ct-dl-hero-title { font-size: 1.6rem; line-height: 1.3; margin: 0 0 .4rem; }
.ct-dl-hero-file { color: var(--ct-ink-soft); font-size: .93rem; margin: 0; }
.ct-dl-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; }

/* 校验值那一行：贴卡底、浅底、等宽字体，复制按钮跟在同一行 */
.ct-dl-hero-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  padding: .85rem 2rem; background: var(--ct-bg); border-top: 1px solid var(--ct-line);
}
.ct-dl-hash-label {
  flex: none; font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  color: var(--ct-ink-soft);
}
.ct-dl-hash {
  flex: 1 1 14rem; min-width: 0; font-size: .78rem; color: var(--ct-ink-soft);
  /* UIkit 的基础样式给 code 带了 white-space: nowrap，会把下面这条 word-break 架空，
     64 位校验值在手机上就整行顶出卡片。这里显式改回可换行，别删。 */
  white-space: normal;
  word-break: break-all;
}
.ct-dl-copy {
  flex: none; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--ct-brand-dark); background: #fff; border: 1px solid var(--ct-line);
  border-radius: var(--ct-radius-sm); padding: .3rem .85rem;
  /* UIkit 给 .uk-container 写了 box-sizing: content-box，会盖掉本文件顶部那条复位，
     容器内元素实际都是 content-box。手机上这条按钮是 width:100% 且 flex:none，
     内边距与边框会额外撑出约 8px，被 .ct-dl-hero 的 overflow:hidden 裁掉一截。 */
  box-sizing: border-box;
  transition: border-color var(--ct-transition), background-color var(--ct-transition),
              color var(--ct-transition);
}
.ct-dl-copy:hover { border-color: var(--ct-brand); background: var(--ct-brand-soft); }
.ct-dl-copy.is-done { color: #047857; border-color: rgba(16, 185, 129, .4); background: #ecfdf5; }

/* 指标条：版本 / 体积 / 更新日期 / 运行平台，四个格子把主卡托住 */
.ct-dl-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem; margin: 1rem 0 0;
}
.ct-dl-fact {
  background: #fff; border: 1px solid var(--ct-line);
  border-radius: var(--ct-radius); padding: 1rem 1.15rem;
}
.ct-dl-fact dt { font-size: .78rem; color: var(--ct-ink-soft); margin: 0 0 .3rem; }
.ct-dl-fact dd { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--ct-ink); }

/* 下载页的次级文字（体积 / 更新时间那几行），更新日志页也用它 */
.ct-dl-meta { color: var(--ct-ink-soft); font-size: .88rem; }

.ct-hash {
  margin-top: .85rem; padding: .6rem .8rem; background: var(--ct-bg);
  border: 1px solid var(--ct-line); border-radius: var(--ct-radius-sm);
  font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  font-size: .78rem; color: var(--ct-ink-soft); word-break: break-all;
}

/* ---------------------------------------------------------------- 代码块 */

.ct-pre {
  background: #0f172a; color: #e2e8f0; border-radius: var(--ct-radius);
  padding: 1.1rem 1.25rem; overflow-x: auto; font-size: .84rem; line-height: 1.75;
}
.ct-pre code { color: inherit; }
.ct-cmt { color: #7d8ba1; }

/* ---------------------------------------------------------------- 正文 */

.ct-article-lead {
  font-size: 1.05rem; color: var(--ct-ink-soft); line-height: 1.85;
  padding-left: 1rem; border-left: 3px solid var(--ct-brand); margin-bottom: 1.5rem;
}
.ct-body { font-size: 1rem; line-height: 1.9; color: var(--ct-ink); }
.ct-body-h { margin: 1.8rem 0 .8rem; font-size: 1.2rem; }
/* 正文里的小节标题：编辑器里写 <h2>，UIkit 默认给的是首屏级别的大标题
   （1.7rem、上边距 40px），在成段的正文里压不住层次。收成与 .ct-body-h
   同一档的小节标题，协议类页面（用户协议 / 隐私政策 / 授权协议）用得上。 */
.ct-body h2 {
  margin: 2rem 0 .8rem; font-size: 1.2rem; line-height: 1.5;
  font-weight: 700; color: var(--ct-ink);
}
.ct-body h2:first-child { margin-top: 0; }
.ct-body p { margin: 0 0 1rem; }
.ct-body-list { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--ct-ink); }
.ct-body-list li { margin-bottom: .35rem; }
.ct-body-quote {
  margin: 0 0 1rem; padding: .75rem 1rem; background: var(--ct-bg);
  border-left: 4px solid var(--ct-line); color: var(--ct-ink-soft); border-radius: var(--ct-radius-sm);
}
.ct-body code {
  background: var(--ct-bg); border: 1px solid var(--ct-line); border-radius: 4px;
  padding: .1rem .35rem; font-size: .88em;
  /* 同上：UIkit 的 code 是 nowrap，正文里出现长片段（路径、哈希）会横向顶破页面。
     这里只在放不下时才断行，短片段依旧整块显示，观感不变。 */
  white-space: normal;
  overflow-wrap: break-word;
}
.ct-body .ct-table-wrap { margin: 0 0 1.25rem; }

/* ---------------------------------------------------------------- 分页 */

.ct-pager { margin-top: 1.75rem; }
.ct-pager .uk-pagination { flex-wrap: wrap; }

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

.ct-footer { background: #0b1220; color: rgba(255, 255, 255, .72); padding: 3.25rem 0 1.5rem; }
.ct-footer-grid { margin-bottom: 2rem; }
.ct-footer-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.ct-footer-brand img { border-radius: 8px; }
.ct-footer-brand span { color: #fff; font-size: 1.1rem; font-weight: 700; }
.ct-footer-intro { font-size: .9rem; line-height: 1.8; max-width: 30rem; margin-bottom: .75rem; }
.ct-footer-title { color: #fff; font-size: .95rem; margin: 0 0 .85rem; }
.ct-footer-links { list-style: none; margin: 0; padding: 0; }
.ct-footer-links li { margin-bottom: .5rem; font-size: .9rem; }
.ct-footer-links a { color: rgba(255, 255, 255, .72); }
.ct-footer-links a:hover { color: #fff; }
.ct-footer-hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .12); margin: 0 0 1.25rem; }
.ct-footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
  font-size: .85rem; color: rgba(255, 255, 255, .6);
}
.ct-footer-bottom a { color: rgba(255, 255, 255, .72); }
.ct-footer-copy { min-width: 0; }
.ct-footer-legal { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.ct-footer-sep { color: rgba(255, 255, 255, .35); }

/* ---------------------------------------------------------------- 响应式 */

@media (max-width: 959px) {
  :root { --ct-section-y: 3.25rem; }
  .ct-hero { padding: 3.75rem 0 3.5rem; }
  .ct-hero-shot { margin-top: 2.5rem; }
  .ct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-dl-hero-body { padding: 1.5rem 1.35rem; }
  .ct-dl-hero-foot { padding: .8rem 1.35rem; }
  .ct-dl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .ct-navbar { min-height: 60px; }
  .ct-brand-text small { display: none; }
  .ct-hero-actions .ct-btn, .ct-hero-actions .ct-btn-ghost { width: 100%; }
  .ct-section-head { margin-bottom: 2rem; }
  .ct-stat-num { font-size: 1.7rem; }
  /* 手机上一行放不下「文件名 + 按钮」，按钮整行铺满当唯一焦点 */
  .ct-dl-hero-title { font-size: 1.32rem; }
  .ct-dl-hero-actions { width: 100%; }
  .ct-dl-hero-actions .ct-btn,
  .ct-dl-hero-actions .ct-btn-outline { flex: 1 1 100%; }
  /* 主卡那条长校验值与复制按钮，手机上整行铺开更好按 */
  .ct-dl-hero-foot .ct-dl-copy { width: 100%; }
}

/* ==========================================================================
   首页横幅（仿 dedecms 的 banner 色带）
   整幅色带 + 居中多行标题 + 引导句 + 按钮 + 公告行
   （环境行与「更新于」这两块 ctouy_banner_band() 还支持，首页现在不挂），
   不放营销长文，也不放产品截图 —— 首页要短、要密。
   ========================================================================== */

.ct-banner {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  padding: 3.5rem 0 2.75rem;
  background-color: var(--ct-deep);
  background-image:
    radial-gradient(880px 400px at 50% -34%, rgba(37, 99, 235, .52), transparent 66%),
    radial-gradient(620px 340px at 88% 10%, rgba(14, 165, 233, .24), transparent 66%),
    linear-gradient(115deg, #071227 0%, #0c1830 46%, #122a52 100%);
}
.ct-banner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  mask-image: radial-gradient(720px 420px at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(720px 420px at 50% 0%, #000 20%, transparent 78%);
}
.ct-banner > .uk-container { position: relative; z-index: 1; }
.ct-banner h1 {
  color: #fff; font-size: clamp(1.85rem, 3.7vw, 2.75rem); font-weight: 900;
  line-height: 1.2; margin: .85rem 0 .95rem; letter-spacing: -.2px;
}

/* 首屏那两行（「PHP 代码加密工具」/「源码保护与站点授权」）就是首页唯一一句
   卖点，要一眼跳出来。注意中文字体一般只有 400 / 700 两档，font-weight 从
   800 提到 900 视觉上没差别 —— 真正让字「更重」的是 0 模糊的白色 text-shadow，
   它把笔画边缘往外撑了一点，看着才是加粗。 */
.ct-banner h1 .ct-hero-line {
  display: inline-block;
  text-shadow:
    0 0 1px rgba(255, 255, 255, .85),
    0 0 16px rgba(148, 197, 255, .28),
    0 10px 28px rgba(2, 8, 23, .45);
}

/* 第二行换成亮蓝，跟第一行的白字拉开层次 */
.ct-banner h1 .ct-hero-line + .ct-hero-line { color: #b6d9ff; }

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .ct-banner h1 .ct-hero-line + .ct-hero-line {
    background-image: linear-gradient(97deg, #eaf4ff 0%, #a8d3ff 45%, #5aa8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 字被渐变填透明之后，上面那层 text-shadow 会从字里透出来发糊，改用
       drop-shadow：投的是渐变字形自己的影子，顺带把边缘再撑厚一点。 */
    text-shadow: none;
    filter:
      drop-shadow(0 0 .5px rgba(255, 255, 255, .7))
      drop-shadow(0 8px 22px rgba(37, 99, 235, .5));
  }
}
.ct-banner-lead {
  color: rgba(255, 255, 255, .8); font-size: 1.02rem; line-height: 1.8;
  max-width: 44rem; margin: 0 auto 1rem;
}
.ct-banner-env {
  font-size: .92rem; color: rgba(255, 255, 255, .66); margin: 0 0 .35rem;
}
.ct-banner-env span { white-space: nowrap; }
.ct-banner-env .ct-dot { margin: 0 .5rem; opacity: .45; }
.ct-banner-updated { font-size: .86rem; color: rgba(255, 255, 255, .5); margin: 0; }
.ct-banner-actions {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
  margin-top: 1.6rem;
}
.ct-banner-news {
  max-width: 46rem; margin: 1.9rem auto 0; padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.ct-banner-news ul { list-style: none; margin: 0; padding: 0; }
.ct-banner-news li {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .92rem; color: rgba(255, 255, 255, .74); padding: .2rem 0;
}
.ct-banner-news a { color: rgba(255, 255, 255, .88); }
.ct-banner-news a:hover { color: #fff; text-decoration: underline; }
.ct-badge-new {
  display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .5px;
  color: #fff; background: var(--ct-accent); border-radius: 999px;
  padding: .05rem .45rem; text-transform: uppercase;
}

/* 首页八宫格：比功能页的卡片更矮更密，每格只有一行标题 + 两行短说明 */
.ct-feature-card--tight { padding: 1.6rem 1rem 1.5rem; }
.ct-feature-card--tight .ct-feature-icon {
  width: 50px; height: 50px; border-radius: 14px; margin-bottom: .8rem;
}
.ct-feature-card--tight h3 { font-size: 1.02rem; margin: 0 0 .45rem; }
.ct-feature-card--tight p {
  font-size: .86rem; line-height: 1.72; color: var(--ct-ink-soft); margin: 0;
}

@media (max-width: 639px) {
  .ct-banner { padding: 2.75rem 0 2.25rem; }
  .ct-banner-actions .ct-btn, .ct-banner-actions .ct-btn-ghost { width: 100%; }
  .ct-banner-news li { justify-content: flex-start; }
  .ct-cta-actions { flex-direction: column; }
  .ct-cta-actions .ct-btn,
  .ct-cta-actions .ct-btn-outline { width: 100%; }
  /* 手机上八宫格是两列，卡片要再瘦一圈才放得下两行说明 */
  .ct-feature-card--tight { padding: 1.15rem .7rem 1.1rem; }
  .ct-feature-card--tight .ct-feature-icon {
    width: 42px; height: 42px; border-radius: 12px; margin-bottom: .6rem;
  }
  .ct-feature-card--tight h3 { font-size: .95rem; }
  .ct-feature-card--tight p { font-size: .8rem; line-height: 1.65; }
}

/* ==========================================================================
   技术支持页（骨架仿 vmpsoft.cn/support.html）
   三张支持通道卡 → 四条服务承诺 → 页尾条。整页只读站点信息，
   模板里不写死联系方式，第三条通道走站内的「授权查询」而不是编一个电话。
   第二条通道是「联系我们」：QQ / 微信 / 邮箱 / 官网四行，后台填了哪行才出哪行。
   ========================================================================== */

.ct-support-grid {
  display: grid; gap: 1.35rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ct-support-card {
  /* 三张卡等高靠的是 .ct-support-grid 的 align-items: stretch（grid 默认值），
     不能再写 height: 100%：UIkit 的 .uk-container 让容器内元素退回 content-box，
     百分比高度不含内边距，卡片会比所在网格行高出整整一层内边距（实测桌面 62px、
     手机 50px），平板/手机单列时更是三张卡互相压住 40px。
     这里显式补 border-box，免得以后有人再把百分比高度加回来。 */
  display: flex; flex-direction: column;
  box-sizing: border-box;
  padding: 2rem 1.6rem 1.75rem;
  background: #fff; border: 1px solid var(--ct-line);
  border-radius: var(--ct-radius-lg); box-shadow: var(--ct-shadow-sm);
  transition: transform var(--ct-transition), box-shadow var(--ct-transition),
              border-color var(--ct-transition);
}
.ct-support-card:hover {
  transform: translateY(-3px); box-shadow: var(--ct-shadow-lg);
  border-color: rgba(37, 99, 235, .35);
}
.ct-support-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 16px; flex: none;
  color: var(--ct-brand-dark); background: var(--ct-brand-soft);
}
.ct-support-title { font-size: 1.14rem; margin: 1.1rem 0 .55rem; }
.ct-support-text {
  color: var(--ct-ink-soft); font-size: .93rem; line-height: 1.78; margin: 0 0 1.05rem;
}
.ct-support-value {
  display: flex; align-items: center; gap: .4rem; margin: 0 0 1.35rem;
  font-size: .9rem; font-weight: 600; color: var(--ct-brand-dark);
}
.ct-support-value .ct-icon { color: var(--ct-brand); }
.ct-support-value a { word-break: break-all; }
/* 「联系我们」卡的四行：每行一条虚线分隔，后台没填的行整行不渲染。
   官网有默认值兜底，所以实际至少留一行，卡片不会空着。 */
.ct-support-contact { list-style: none; margin: 0 0 1.35rem; padding: 0; }
.ct-support-contact li {
  padding: .5rem 0; border-bottom: 1px dashed var(--ct-line);
  font-size: .9rem; line-height: 1.7; color: var(--ct-ink-soft);
}
.ct-support-contact li:first-child { padding-top: 0; }
.ct-support-contact li:last-child { border-bottom: 0; padding-bottom: 0; }
.ct-support-contact a {
  color: var(--ct-brand-dark); font-weight: 600; word-break: break-all;
}
.ct-support-contact a:hover { color: var(--ct-brand); }
/* 按钮压到卡片底部，三张卡文案长短不一时按钮也对齐 */
.ct-support-act { margin-top: auto; }
.ct-support-act .ct-btn,
.ct-support-act .ct-btn-outline { width: 100%; }

/* 服务承诺：四条并排，窄屏退两列、再窄退单列 */
.ct-support-promise {
  display: grid; gap: 1.75rem 1.25rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ct-support-promise-item { text-align: center; }
.ct-support-promise-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  color: var(--ct-brand-dark); background: #fff;
  border: 1px solid var(--ct-line); box-shadow: var(--ct-shadow-sm);
}
.ct-support-promise-item h3 { font-size: 1.02rem; margin: .9rem 0 .45rem; }
.ct-support-promise-item p {
  color: var(--ct-ink-soft); font-size: .9rem; line-height: 1.75;
  margin: 0 auto; max-width: 20rem;
}

/* 页尾条：与问答页尾同源的深蓝渐变卡，留「先看 FAQ / 直接找我们」两条出口 */
.ct-support-cta {
  position: relative; overflow: hidden;
  max-width: 52rem; margin: 0 auto; padding: 2.5rem 1.75rem;
  text-align: center; color: #fff;
  border-radius: var(--ct-radius-lg);
  background-image:
    radial-gradient(520px 260px at 88% -12%, rgba(14, 165, 233, .28), transparent 66%),
    linear-gradient(115deg, #071227 0%, #0c1830 52%, #122a52 100%);
  box-shadow: var(--ct-shadow-lg);
}
.ct-support-cta-title {
  font-size: 1.35rem; font-weight: 700; line-height: 1.35; margin: 0 0 .55rem; color: #fff;
}
.ct-support-cta-desc {
  color: rgba(255, 255, 255, .68); font-size: .95rem;
  margin: 0 auto 1.6rem; max-width: 34rem;
}
.ct-support-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.ct-support-cta .ct-btn-ghost { border-color: rgba(255, 255, 255, .28); }
.ct-support-cta .ct-btn-ghost:hover,
.ct-support-cta .ct-btn-ghost:focus { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }

@media (max-width: 959px) {
  .ct-support-grid { grid-template-columns: 1fr; }
  .ct-support-promise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .ct-support-card { padding: 1.6rem 1.25rem 1.4rem; }
  .ct-support-promise { grid-template-columns: 1fr; gap: 1.4rem; }
  .ct-support-cta { padding: 1.9rem 1.25rem; }
  .ct-support-cta-title { font-size: 1.15rem; }
  /* 窄屏两个按钮各占一行，点起来更稳 */
  .ct-support-cta-actions { flex-direction: column; }
  .ct-support-cta-actions .ct-btn,
  .ct-support-cta-actions .ct-btn-ghost { width: 100%; }
}