/* 客户网站样式。CSP 只许同源，所以不引外部字体，图标是内联 SVG（templates/_icons.html）。 */
:root {
  --ink: #0b1220; --ink-2: #111a2e; --ink-3: #1b2640; --ink-line: rgba(255,255,255,.08);
  --fg: #0f172a; --fg-2: #334155; --muted: #64748b; --line: #e5e8ef; --line-2: #eef1f6;
  --bg: #f5f7fb; --card: #fff;
  --accent: #3b5bfd; --accent-2: #6d4dff; --accent-soft: #eef1ff; --glow: #22d3ee;
  --err: #c0262d; --err-soft: #fef2f2; --ok: #0f8a5f; --ok-soft: #ecfdf5; --warn: #b45309; --warn-soft: #fffbeb;
  --radius: 14px; --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.05);
  --shadow-lg: 0 10px 40px rgba(15,23,42,.10);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.6 var(--font); color: var(--fg); background: var(--bg);
       -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7;
        stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 文字 ---------- */
h1 { font-size: 28px; line-height: 1.25; letter-spacing: -.02em; font-weight: 700; margin: 0 0 6px; }
h2 { font-size: 17px; letter-spacing: -.01em; font-weight: 650; margin: 40px 0 14px; }
.muted, small { color: var(--muted); }
small { font-size: 13px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.lead { font-size: 16px; color: var(--muted); margin: 0 0 28px; max-width: 640px; }
code { font-family: var(--mono); font-size: 13px; background: var(--line-2); padding: 2px 7px; border-radius: 6px;
       word-break: break-all; color: var(--fg-2); }
pre { font-family: var(--mono); }

/* ---------- 品牌 ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -.01em;
        color: inherit; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
             background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, var(--glow) 130%);
             box-shadow: 0 4px 14px rgba(59,91,253,.35); }
.logo-mark svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 表单 ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
        box-shadow: var(--shadow); }
form.card { display: grid; gap: 18px; max-width: 520px; }
form.card.wide { max-width: none; }
label { display: grid; gap: 7px; font-weight: 550; font-size: 14px; color: var(--fg-2); }
label small { font-weight: 400; }
input, select, textarea { font: inherit; font-size: 15px; color: var(--fg); padding: 11px 14px; border: 1px solid #d8dde7;
        border-radius: var(--radius-sm); background: #fff; transition: border-color .15s, box-shadow .15s; width: 100%; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
input[type=file] { padding: 18px 14px; border-style: dashed; background: #fafbfd; cursor: pointer; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(59,91,253,.14); }
input::placeholder { color: #a3acbd; }
button, .btn { font: inherit; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
        gap: 8px; padding: 11px 22px; border: 0; border-radius: var(--radius-sm); cursor: pointer; justify-self: start;
        color: #fff; background: linear-gradient(180deg, #4a68ff, var(--accent)); text-decoration: none;
        box-shadow: 0 1px 2px rgba(15,23,42,.12), 0 6px 18px rgba(59,91,253,.25), inset 0 1px 0 rgba(255,255,255,.15);
        transition: transform .1s, box-shadow .15s, filter .15s; }
button:hover, .btn:hover { filter: brightness(1.06); text-decoration: none; box-shadow: 0 1px 2px rgba(15,23,42,.12), 0 10px 26px rgba(59,91,253,.32); }
button:active, .btn:active { transform: translateY(1px); }
.btn.ghost { background: #fff; color: var(--fg); border: 1px solid var(--line); box-shadow: var(--shadow); }
.btn.light { background: #fff; color: var(--ink); box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.btn.outline-dark { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.22); box-shadow: none; }
.btn.lg { padding: 14px 28px; font-size: 16px; }
.btn.block, form.card > button { width: 100%; }
form.card > button.danger { width: auto; }
button.link { background: none; color: var(--accent); padding: 0; box-shadow: none; font-weight: 550; }
button.link:hover { filter: none; text-decoration: underline; box-shadow: none; }
button.dev { background: linear-gradient(180deg, #8b5cf6, #6d28d9); box-shadow: 0 6px 18px rgba(109,40,217,.28); }
button.danger { background: linear-gradient(180deg, #e0434a, var(--err)); box-shadow: 0 6px 18px rgba(192,38,45,.22); }
form.inline { display: inline; }
.paybar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 20px 0; }
.paybar input { width: 140px; }

/* ---------- 提示 ---------- */
.error, .notice { display: flex; gap: 10px; align-items: flex-start; padding: 13px 16px; border-radius: var(--radius-sm);
                  font-size: 14px; margin: 0 0 20px; border: 1px solid; }
.error { color: var(--err); background: var(--err-soft); border-color: #fbd5d5; }
.notice { color: var(--ok); background: var(--ok-soft); border-color: #c6f0dc; }

/* ---------- 状态徽章 ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 99px; font-size: 12.5px;
         font-weight: 600; background: var(--line-2); color: var(--fg-2); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge.approved, .badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.rejected, .badge.bad { background: var(--err-soft); color: var(--err); }
.badge.pending, .badge.wait { background: var(--warn-soft); color: var(--warn); }

/* ---------- 列表 ---------- */
dl.grid { display: grid; grid-template-columns: minmax(130px, max-content) 1fr; gap: 0; margin: 0; padding: 4px 24px; }
dl.grid > dt, dl.grid > dd { padding: 14px 0; border-bottom: 1px solid var(--line-2); }
dl.grid > dt:nth-last-of-type(1), dl.grid > dd:last-of-type { border-bottom: 0; }
dt { color: var(--muted); font-size: 14px; padding-right: 24px; }
dd { margin: 0; }
.table-wrap + .table-wrap { margin-top: 16px; }
.table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
.table-wrap table, .card table { border: 0; }
th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
     background: #fafbfd; padding: 12px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 14px 18px; border-bottom: 1px solid var(--line-2); font-size: 14px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fafbff; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { text-align: center; padding: 44px 24px; color: var(--muted); }
.empty svg.i { width: 30px; height: 30px; color: #b6bfd0; margin-bottom: 8px; }

/* ---------- 语言 ---------- */
.langs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; background: rgba(15,23,42,.05); font-size: 12.5px; }
.langs a, .langs strong { padding: 4px 11px; border-radius: 99px; color: var(--muted); text-decoration: none; font-weight: 550; }
.langs strong { background: #fff; color: var(--fg); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.dark .langs { background: rgba(255,255,255,.06); }
.dark .langs a { color: #8b97ad; }
.dark .langs strong { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }

/* ================= 登录后：侧栏 + 内容 ================= */
.shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh;
         background: linear-gradient(90deg, var(--ink) 252px, var(--bg) 252px); }
.side { background: var(--ink); color: #c9d2e3; display: flex; flex-direction: column; padding: 22px 16px;
        position: sticky; top: 0; height: 100vh; border-right: 1px solid #0a0f1c;
        background-image: radial-gradient(600px 300px at -10% -10%, rgba(59,91,253,.22), transparent 60%); }
.side .logo { color: #fff; padding: 4px 10px 26px; }
.side-nav { display: grid; gap: 2px; }
.side-nav .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #5d6a84; padding: 18px 12px 8px; }
.side-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #a9b4c8;
              font-weight: 550; font-size: 14.5px; text-decoration: none; transition: background .15s, color .15s; }
.side-nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.side-nav a[aria-current] { background: linear-gradient(90deg, rgba(59,91,253,.28), rgba(59,91,253,.08)); color: #fff;
                            box-shadow: inset 2px 0 0 #6d84ff; }
.side-nav a[aria-current] svg.i { color: #8ea0ff; }
.side-foot { margin-top: auto; display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid var(--ink-line); }
.who { display: flex; gap: 11px; align-items: center; min-width: 0; padding: 0 6px; }
.who .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
               background: linear-gradient(135deg, #2a3a66, #3b5bfd); color: #fff; font-weight: 700; font-size: 14px; }
.who b { display: block; color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { display: block; color: #6f7d97; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who > div { min-width: 0; }
.side-foot .row { display: grid; gap: 12px; justify-items: start; padding: 0 6px; }
.side-foot .langs a, .side-foot .langs strong { padding: 4px 9px; white-space: nowrap; }
.side-foot button.link { color: #8b97ad; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.side-foot button.link:hover { color: #fff; }
.content { padding: 44px 56px 72px; max-width: 1120px; width: 100%; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.page-head .actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* 数字卡 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px;
        box-shadow: var(--shadow); display: grid; gap: 6px; align-content: start; position: relative; overflow: hidden; }
.stat .k { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13.5px; font-weight: 550; }
.stat .k svg.i { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.stat .v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 8px; }
.stat .v.big { font-size: 30px; font-variant-numeric: tabular-nums; }
.stat .v .cur { font-size: 15px; color: var(--muted); font-weight: 600; margin-right: 6px; letter-spacing: 0; }
.stat small { line-height: 1.5; }
.stat.feature { background: linear-gradient(140deg, #101a33 0%, #1d2d5c 55%, #3b5bfd 140%); color: #fff; border-color: transparent;
             box-shadow: 0 14px 40px rgba(29,45,92,.35); }
.stat.feature .k, .stat.feature small { color: #aab6d3; }
.stat.feature .k svg.i { background: rgba(255,255,255,.1); color: #fff; }
.stat.feature .v .cur { color: #aab6d3; }
.stat.feature::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%;
                    background: radial-gradient(circle, rgba(34,211,238,.35), transparent 70%); }

/* 开通步骤 */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0; margin: 0 0 18px; list-style: none; counter-reset: s; }
.steps li { position: relative; padding: 20px 18px 18px 18px; display: grid; gap: 4px; }
.steps li + li { border-left: 1px solid var(--line-2); }
.steps .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700;
            background: var(--line-2); color: var(--muted); margin-bottom: 8px; }
.steps .done .n { background: var(--ok); color: #fff; }
.steps .now .n { background: var(--accent); color: #fff; box-shadow: 0 0 0 5px rgba(59,91,253,.15); }
.steps b { font-size: 14.5px; }
.steps small { font-size: 12.5px; }
.steps.card { padding: 0; }

/* 套餐卡（单选） */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.plan { position: relative; display: grid; gap: 6px; padding: 20px; border: 1.5px solid var(--line); border-radius: var(--radius);
        background: #fff; cursor: pointer; font-weight: 400; color: var(--fg); transition: border-color .15s, box-shadow .15s; }
.plan:hover { border-color: #c3cbe0; }
.plan input { position: absolute; top: 18px; right: 18px; }
.plan:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(59,91,253,.12); background: linear-gradient(180deg, #fbfcff, #fff); }
.plan .name { font-size: 16px; font-weight: 700; }
.plan .price { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; }
.plan .spec { color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* ================= 未登录：顶栏 ================= */
.pub-top { display: flex; align-items: center; gap: 28px; padding: 18px 40px; max-width: 1240px; margin: 0 auto; }
.pub-top nav { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.pub-top nav > a:not(.btn) { color: var(--fg-2); font-weight: 550; padding: 8px 12px; }
.pub-top .btn { padding: 9px 18px; font-size: 14px; }
.pub-main { max-width: 760px; margin: 24px auto 80px; padding: 0 20px; }

/* 首页 */
.home { background: var(--ink); color: #e6ebf5; }
.home .pub-top { color: #fff; }
.home .pub-top nav > a:not(.btn) { color: #b9c3d8; }
.hero { position: relative; overflow: hidden; padding: 0 40px 110px;
        background:
          radial-gradient(900px 500px at 80% -10%, rgba(109,77,255,.35), transparent 60%),
          radial-gradient(700px 420px at 0% 10%, rgba(59,91,253,.30), transparent 60%),
          radial-gradient(500px 300px at 60% 110%, rgba(34,211,238,.18), transparent 70%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .5;
                background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                                  linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
                background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
                -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); }
.hero-in { position: relative; max-width: 1160px; margin: 0 auto; padding-top: 72px; }
.hero .pub-top { position: relative; z-index: 1; max-width: 1160px; padding: 22px 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 99px; font-size: 13px;
        background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #c9d2e6; margin-bottom: 26px; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.18); margin-left: 6px; }
.hero h1 { font-size: 58px; line-height: 1.08; letter-spacing: -.035em; color: #fff; max-width: 820px; margin: 0 0 22px; font-weight: 750; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #8ea0ff, #b79bff 45%, #67e8f9);
              -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .sub { font-size: 19px; line-height: 1.6; color: #a9b4cc; max-width: 640px; margin: 0 0 38px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 72px; border-radius: 16px; overflow: hidden;
         background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
.facts div { background: rgba(11,18,32,.75); padding: 22px 24px; backdrop-filter: blur(6px); }
.facts b { display: block; color: #fff; font-size: 15px; margin-bottom: 4px; }
.facts span { color: #8492ab; font-size: 13.5px; }
.section { background: var(--bg); color: var(--fg); padding: 96px 40px; }
.section-in { max-width: 1160px; margin: 0 auto; }
.section h2 { font-size: 36px; letter-spacing: -.025em; margin: 0 0 12px; font-weight: 720; }
.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 44px; }
.product { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px; box-shadow: var(--shadow);
           display: grid; gap: 10px; align-content: start; position: relative; transition: transform .2s, box-shadow .2s; }
.product:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.product .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 8px;
                background: linear-gradient(135deg, var(--accent-soft), #f4efff); color: var(--accent); }
.product .ico svg.i { width: 24px; height: 24px; }
.product h3 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.product p { margin: 0; color: var(--muted); }
.product ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: var(--fg-2); }
.product li { display: flex; gap: 9px; align-items: center; }
.product li svg.i { width: 16px; height: 16px; color: var(--ok); }
.product .soon { position: absolute; top: 28px; right: 28px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px;
                 background: #f4efff; color: var(--accent-2); }
.band { background: var(--ink); color: #c9d2e3; padding: 80px 40px; text-align: center;
        background-image: radial-gradient(600px 260px at 50% 0%, rgba(59,91,253,.30), transparent 70%); }
.band h2 { color: #fff; font-size: 34px; letter-spacing: -.025em; margin: 0 0 12px; }
.band p { margin: 0 auto 30px; max-width: 560px; color: #95a2bb; }
.foot { background: var(--ink); color: #5d6a84; font-size: 13px; padding: 26px 40px; border-top: 1px solid var(--ink-line); }
.foot .section-in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ================= 登录 / 注册：左右分栏 ================= */
.auth { display: grid; grid-template-columns: minmax(380px, 5fr) 7fr; min-height: 100vh; }
.auth-art { position: relative; overflow: hidden; background: var(--ink); color: #c9d2e3; padding: 40px 48px;
            display: flex; flex-direction: column;
            background-image:
              radial-gradient(520px 380px at 110% 0%, rgba(109,77,255,.40), transparent 65%),
              radial-gradient(520px 380px at -20% 100%, rgba(59,91,253,.40), transparent 65%); }
.auth-art::before { content: ""; position: absolute; inset: 0; opacity: .5;
                    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                                      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
                    background-size: 44px 44px; }
.auth-art > * { position: relative; }
.auth-art .logo { color: #fff; }
.auth-art .pitch { margin: auto 0; padding: 48px 0; }
.auth-art h2 { color: #fff; font-size: 34px; line-height: 1.2; letter-spacing: -.03em; margin: 0 0 16px; font-weight: 720; }
.auth-art .pitch > p { color: #95a2bb; margin: 0 0 30px; font-size: 15.5px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; }
.ticks li svg.i { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.07);
                  border: 1px solid rgba(255,255,255,.08); color: #9fb0ff; }
.ticks b { display: block; color: #fff; font-size: 14.5px; }
.ticks span { color: #8492ab; font-size: 13.5px; }
.auth-art .legal { color: #5d6a84; font-size: 12.5px; }
.auth-form { display: flex; flex-direction: column; padding: 28px 40px; background: #fff; }
.auth-form .bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.auth-form .bar .logo { visibility: hidden; }
.auth-box { width: 100%; max-width: 440px; margin: auto; padding: 40px 0; }
.auth-box h1 { font-size: 30px; margin-bottom: 8px; }
.auth-box .lead { margin-bottom: 28px; font-size: 15px; }
.auth-box form.card { border: 0; box-shadow: none; padding: 0; max-width: none; background: none; }
.auth-box .alt { margin-top: 26px; font-size: 14px; color: var(--muted); }
.auth-box .alt + .alt { margin-top: 8px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: var(--line-2); margin: 0 0 22px; }
.seg a, .seg strong { text-align: center; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.seg strong { background: #fff; color: var(--fg); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }


/* 充值 */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.split form.card { max-width: none; }
.side-note { background: linear-gradient(180deg, #fbfcff, #fff); }
.ticks.light li svg.i { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.ticks.light b { color: var(--fg); }
.ticks.light span { color: var(--muted); }
input.amount { font-size: 26px; font-weight: 700; letter-spacing: -.02em; padding: 14px 16px; font-variant-numeric: tabular-nums; }
.amount-lg { font-size: 22px; letter-spacing: -.02em; }
.page-head .badge { font-size: 13.5px; padding: 6px 14px; }
.page-head .eyebrow { margin-bottom: 6px; }

/* ================= 窄屏 ================= */
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 16px; }
  .side .logo { padding: 0 8px 0 0; }
  .side-nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .side-nav .label { display: none; }
  .side-nav a { padding: 8px 10px; font-size: 14px; }
  .side-nav a[aria-current] { box-shadow: none; }
  .side-foot { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; gap: 12px; }
  .who { display: none; }
  .content { padding: 28px 16px 56px; }
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-form { padding: 18px 16px; }
  .auth-form .bar .logo { visibility: visible; }
  .hero { padding: 0 16px 72px; }
  .hero-in { padding-top: 40px; }
  .shell { background: var(--bg); }
  .hero h1 { font-size: 38px; }
  .hero .sub { font-size: 16px; }
  .facts { grid-template-columns: 1fr 1fr; margin-top: 48px; }
  .section, .band { padding: 64px 16px; }
  .section h2, .band h2 { font-size: 28px; }
  .products { grid-template-columns: 1fr; }
  .pub-top { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(3) { border-left: 0; }
  .steps li:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .two, .split { grid-template-columns: 1fr; }
  .foot { padding: 22px 16px; }
}
@media (max-width: 560px) {
  h1 { font-size: 24px; }
  .facts { grid-template-columns: 1fr; }
  dl.grid { grid-template-columns: 1fr; padding: 4px 18px; }
  dl.grid > dt { padding-bottom: 0; border-bottom: 0; }
  dl.grid > dd { padding-top: 4px; }
  .card { padding: 18px; }
}

/* 云主机页 */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.feature { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line);
           border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.feature svg.i { width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.feature b { display: block; font-size: 15px; }
.feature span { color: var(--muted); font-size: 13.5px; }
.who-line { display: flex; gap: 12px; align-items: center; }
.who-line svg.i { width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.who-line small { display: block; }

/* 内部试运行 */
/* 内测提示（CLAUDE.md 约束 8：合规办完之前要让访客知道）：细条、深色、不抢眼 */
.preview-bar { background: var(--ink); color: #a9b4c8; border-bottom: 1px solid var(--ink-line); text-align: center;
               font-size: 12.5px; font-weight: 500; letter-spacing: .04em; padding: 7px 16px; line-height: 1.4; }
.preview-bar::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #f5b83d;
                       margin-right: 10px; vertical-align: 1px; }

/* 侧栏顶上的「云控制台」入口 */
.console-btn { display: flex; align-items: center; gap: 10px; margin: 0 4px 18px; padding: 12px 14px; border-radius: 12px;
               color: #fff; font-weight: 650; font-size: 14.5px; text-decoration: none;
               background: linear-gradient(135deg, #3b5bfd, #6d4dff); box-shadow: 0 8px 22px rgba(59,91,253,.35); }
.console-btn:hover { text-decoration: none; filter: brightness(1.08); }
.console-btn span { flex: 1; display: grid; }
.console-btn small { color: #8b97ad; font-weight: 500; font-size: 11.5px; }
.console-btn.off { background: rgba(255,255,255,.05); color: #c9d2e3; box-shadow: none; border: 1px dashed rgba(255,255,255,.15); }
@media (max-width: 980px) { .console-btn { margin: 0; padding: 8px 12px; } .console-btn small { display: none; } }

.oops { max-width: 560px; margin: 40px auto; text-align: center; }
.oops .btn { justify-self: center; }

/* ================= 官网首页（2026-10-28 改版） ================= */
html { scroll-behavior: smooth; }
.home .pub-top { gap: 22px; }
.lp-links { display: flex; gap: 4px; margin-left: 24px !important; }
.lp-links a { color: #93a0bb !important; font-weight: 550; padding: 8px 10px !important; font-size: 14.5px; }
.lp-links a:hover { color: #fff !important; text-decoration: none; }
.lp-links + nav { margin-left: auto; }
.home .pub-top nav:not(.lp-links) { margin-left: 0; }
.lp-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.lp-hero h1 { font-size: 60px; }
.lp-art { width: 100%; height: auto; max-height: 520px; }
.lp-led { fill: #3a4775; } .lp-led-on { fill: #34d399; }
.lp-ok { fill: #34d399; } .lp-cy { fill: #22d3ee; }
.lp-chip rect { fill: #0f1830; fill-opacity: .82; stroke: #4b5b94; stroke-opacity: .7; }
.lp-t1 { fill: #fff; font: 600 13px var(--font); } .lp-t2 { fill: #8492ab; font: 500 11.5px var(--font); }
.lp-wire { fill: none; stroke: #7d93ff; stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 3 5; }
.hero .facts { margin-top: 56px; }
.lp-dark { background: var(--ink); color: #c9d2e3;
           background-image: radial-gradient(700px 360px at 85% 0%, rgba(109,77,255,.22), transparent 60%),
                             radial-gradient(600px 320px at 0% 100%, rgba(59,91,253,.20), transparent 60%); }
.lp-dark h2 { color: #fff; } .lp-dark .lead { color: #93a0bb; } .lp-dark .eyebrow { color: #8ea0ff; }
.lp-diagram { margin-top: 40px; border-radius: 20px; padding: 18px; background: rgba(255,255,255,.03);
              border: 1px solid rgba(255,255,255,.07); overflow-x: auto; }
.lp-diagram svg { display: block; width: 100%; min-width: 760px; height: auto; }
.lp-node { stroke: #3b4a85; stroke-width: 1.2; }
.lp-nt { fill: #fff; font: 650 16px var(--font); } .lp-ns { fill: #8b97ad; font: 500 12.5px var(--font); }
.lp-tag { fill: #8ea0ff; font: 700 10.5px var(--font); letter-spacing: .14em; }
.lp-flow { fill: none; stroke: #7d93ff; stroke-width: 2; stroke-dasharray: 6 5; }
.lp-dc { fill: rgba(59,91,253,.06); stroke: #4b63ff; stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 8 6; }
.lp-dct { fill: #c7d0ff; font: 700 13px var(--font); letter-spacing: .12em; }
.lp-mgmt { fill: rgba(251,191,36,.06); stroke: #fbbf24; stroke-opacity: .5; stroke-dasharray: 5 5; }
.lp-lock { fill: #fbbf24; fill-opacity: .9; } .lp-lockb { fill: none; stroke: #fbbf24; stroke-width: 3; }
.lp-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.lp-spec { display: grid; gap: 6px; align-content: start; padding: 22px; border-radius: 16px; background: rgba(255,255,255,.04);
           border: 1px solid rgba(255,255,255,.08); }
.lp-spec svg.i { width: 40px; height: 40px; padding: 9px; border-radius: 11px; background: rgba(109,132,255,.15); color: #a5b4ff; margin-bottom: 8px; }
.lp-spec b { color: #fff; font-size: 15.5px; } .lp-spec span { color: #8b97ad; font-size: 14px; line-height: 1.55; }
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.lp-wallet { width: 100%; max-width: 420px; height: auto; margin-top: 12px; }
.lp-ct { fill: #93a0bb; font: 700 12px var(--font); letter-spacing: .14em; }
.lp-cv { fill: #fff; font: 750 42px var(--font); letter-spacing: -.02em; }
.lp-spark { fill: none; stroke: #67e8f9; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lp-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; }
.lp-card .n { font: 700 13px var(--mono); color: var(--accent); background: var(--accent-soft); justify-self: start; padding: 3px 9px; border-radius: 8px; }
.lp-card b { font-size: 17px; } .lp-card span:last-child { color: var(--muted); font-size: 14.5px; }
.lp-soft { background: linear-gradient(180deg, #eef1ff, var(--bg)); }
.lp-shield { width: 100%; max-width: 380px; height: auto; justify-self: center; }
.lp-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.lp-checks li { display: flex; gap: 14px; align-items: flex-start; }
.lp-checks svg.i { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: #fff; color: var(--accent); box-shadow: var(--shadow); flex: none; }
.lp-checks b { display: block; font-size: 15.5px; } .lp-checks span { color: var(--muted); font-size: 14.5px; }
.lp-faq { max-width: 820px; }
.lp-faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-top: 12px; box-shadow: var(--shadow); }
.lp-faq summary { cursor: pointer; padding: 18px 22px; font-weight: 650; font-size: 16px; list-style: none; display: flex; justify-content: space-between; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--accent); font-size: 20px; line-height: 1; }
.lp-faq details[open] summary::after { content: "–"; }
.lp-faq details p { margin: 0; padding: 0 22px 20px; color: var(--muted); }
.soon-card { background: linear-gradient(180deg, #fbfaff, #fff); }
.lp-foot { align-items: center; }
.lp-foot .logo { color: #fff; } .lp-foot p { margin: 8px 0 0; }
.lp-foot nav { display: flex; gap: 18px; flex-wrap: wrap; } .lp-foot nav a { color: #8b97ad; }
@media (max-width: 1100px) { .lp-links { display: none !important; } }
@media (max-width: 980px) {
  .lp-hero, .lp-split { grid-template-columns: 1fr; gap: 28px; }
  .lp-hero h1 { font-size: 38px; }
  .lp-art { max-height: 340px; }
  .lp-specs, .lp-cards { grid-template-columns: 1fr 1fr; }
  .lp-split.rev .lp-shield { order: 2; }
}
@media (max-width: 560px) { .lp-specs, .lp-cards { grid-template-columns: 1fr; } }

.home .lp-hero { padding-top: 40px; }

/* 空状态（比如充值暂未开放） */
.empty-state { text-align: center; padding: 56px 24px; display: grid; justify-items: center; gap: 6px; }
.empty-state .i { width: 36px; height: 36px; color: var(--accent); margin-bottom: 8px; }
.empty-state h3 { margin: 0; font-size: 18px; }
.empty-state p { margin: 0; max-width: 420px; }

/* =====================================================================
   SOFT 集团视觉统一（2026-10-29 用户要求）：和 www.soft.cc 同一套——深墨蓝 + 白，青绿只做少量强调；
   SOFT 字标；Manrope 字体；不用渐变、发光、彩色阴影。放在文件最后，覆盖上面的旧样式。
   ===================================================================== */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/static/fonts/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/static/fonts/manrope-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #0B1C2E; --ink-2: #12263B; --ink-3: #1A3249; --ink-line: rgba(255,255,255,.10);
  --accent: #0B7A6E; --accent-2: #0E9384; --accent-soft: #E7F4F2; --glow: #3CC7B5;
  --radius: 4px; --radius-sm: 3px;
  --shadow: none; --shadow-lg: 0 1px 0 var(--line);
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
body { background: #fff; }
.card, .product, .lp-card, .lp-faq details, .stat { box-shadow: none; }
.card { border-color: var(--line); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(14,147,132,.14); }

/* 标志 */
.logo { gap: 12px; font-weight: 600; letter-spacing: .14em; font-size: 14px; }

/* 按钮：实色、直角、无彩色阴影 */
button, .btn { background: var(--ink); box-shadow: none; border-radius: var(--radius-sm); font-weight: 600; }
button:hover, .btn:hover { filter: none; background: var(--ink-3); box-shadow: none; }
.btn.light { background: #fff; color: var(--ink); box-shadow: none; }
.btn.light:hover { background: #E7F4F2; }
.btn.outline-dark { border-color: rgba(255,255,255,.3); }
.btn.outline-dark:hover { background: rgba(255,255,255,.06); }
.btn.ghost { box-shadow: none; }
button.dev { background: #5b4bb7; box-shadow: none; }
button.danger { background: var(--err); box-shadow: none; }
button.link, button.link:hover { background: none; }

/* 侧栏 */
.shell { background: linear-gradient(90deg, var(--ink) 252px, #F4F6F8 252px); }
.side { background-image: none; border-right-color: #081522; }
.side-nav a { border-radius: var(--radius-sm); }
.side-nav a[aria-current] { background: rgba(255,255,255,.06); box-shadow: inset 2px 0 0 var(--glow); }
.side-nav a[aria-current] svg.i { color: var(--glow); }
.who .avatar { background: var(--ink-3); border: 1px solid rgba(255,255,255,.15); }
.console-btn { background: var(--accent-2); box-shadow: none; border-radius: var(--radius-sm); }
.console-btn:hover { filter: none; background: var(--accent); }

/* 数字卡、步骤、套餐 */
.stat.feature { background: var(--ink); box-shadow: none; }
.stat.feature::after { display: none; }
.stat .k svg.i { border-radius: var(--radius-sm); }
.steps .now .n { box-shadow: 0 0 0 4px rgba(14,147,132,.15); }
.plan:has(input:checked) { box-shadow: 0 0 0 3px rgba(14,147,132,.12); background: #fff; }
.side-note { background: #fff; }

/* 官网首页 */
.home { background: var(--ink); }
.hero { background: var(--ink); }
.hero::before { opacity: .35; }
.pill { border-radius: 2px; background: transparent; }
.pill i { background: var(--glow); box-shadow: none; }
.hero h1 { font-weight: 700; letter-spacing: -.03em; }
.hero h1 em { background: none; -webkit-background-clip: initial; background-clip: initial; color: #fff; font-style: normal;
              box-shadow: inset 0 -.12em 0 rgba(60,199,181,.45); }
.facts { border-radius: 2px; }
.facts div { background: var(--ink); backdrop-filter: none; }
.product { border-radius: 4px; }
.product:hover { transform: none; border-color: var(--ink); box-shadow: none; }
.product .ico { background: var(--accent-soft); border-radius: var(--radius-sm); }
.product .soon { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 2px; }
.band { background-image: none; }
.lp-dark { background-image: none; }
.lp-dark .eyebrow { color: var(--glow); }
.lp-diagram { border-radius: 4px; }
.lp-chip rect { fill: var(--ink-2); stroke: rgba(255,255,255,.2); }
.lp-led-on, .lp-ok { fill: var(--glow); } .lp-cy { fill: var(--glow); }
.lp-wire { stroke: var(--glow); }
.lp-spark { stroke: var(--glow); }
.lp-card { border-radius: 4px; }
.lp-soft { background: #F4F6F8; }
.lp-checks svg.i { box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lp-faq details { border-radius: 4px; }
.soon-card { background: #fff; }
.auth-art { background-image: none; }

/* 首屏线稿（和集团官网同一套等轴测插图，深色底） */
.soft-art .art { width: 100%; height: auto; max-height: 460px; overflow: visible; }
.soft-art .art .l { stroke: rgba(255,255,255,.82); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.soft-art .art path.l, .soft-art .art line.l { fill: none; }
.soft-art .art .f { fill: var(--ink-2); } .soft-art .art .m { fill: #183049; } .soft-art .art .k { fill: var(--ink-3); }
.soft-art .art .a2 { fill: #1d5250; } .soft-art .art .o { fill: none; } .soft-art .art .t { stroke-opacity: .5; }
.soft-art .art .a { stroke: var(--glow); } .soft-art .art .af { fill: var(--glow); }
.soft-art .art .lf { fill: var(--ink-2); stroke: rgba(255,255,255,.8); }
.soft-art .art .g { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.soft-art .art .dash { stroke-dasharray: 3 5; animation: softflow 2.4s linear infinite; }
@keyframes softflow { to { stroke-dashoffset: -16; } }
@media (prefers-reduced-motion: reduce) { .soft-art .art .dash { animation: none; } }

/* 架构图、余额卡、安全图（统一后的线稿配色） */
.lp-diagram { background: transparent; border-color: rgba(255,255,255,.1); }
.lp-node { fill: var(--ink-2); stroke: rgba(255,255,255,.22); stroke-width: 1; }
.lp-tag { fill: var(--glow); }
.lp-ns { fill: #8FA0B3; }
.lp-flow { stroke: var(--glow); stroke-width: 1.5; stroke-dasharray: 4 5; animation: softflow 2.4s linear infinite; }
.lp-arrowhead { fill: var(--glow); }
.lp-dc { fill: rgba(255,255,255,.02); stroke: rgba(255,255,255,.28); stroke-width: 1; stroke-dasharray: 6 6; }
.lp-dct { fill: #C9D3DE; }
.lp-mgmt { fill: rgba(245,184,61,.05); stroke: #f5b83d; stroke-opacity: .45; }
.lp-spec { border-radius: 4px; background: transparent; border-color: rgba(255,255,255,.1); }
.lp-spec svg.i { border-radius: var(--radius-sm); background: rgba(60,199,181,.12); color: var(--glow); }
.lp-card-back { fill: #E7F4F2; } .lp-card-front { fill: var(--ink); }
.lp-sparkdot { fill: var(--glow); }
.lp-ring { fill: none; stroke: var(--ink); stroke-opacity: .18; stroke-dasharray: 3 6; } .lp-ring.faint { stroke-opacity: .1; }
.lp-shield-body { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.lp-shield-mid { stroke: var(--ink); stroke-opacity: .15; }
.lp-shield-lock { fill: var(--ink); } .lp-shield-shackle { fill: none; stroke: var(--ink); stroke-width: 6; }
.lp-soft .lp-chip rect { fill: #fff; stroke: var(--line); } .lp-soft .lp-t1 { fill: var(--ink); }
@media (prefers-reduced-motion: reduce) { .lp-flow { animation: none; } }
.langs, .langs a, .langs strong { border-radius: 2px; }
.langs strong { box-shadow: none; }
.pill, .badge, .tag { border-radius: 2px; }

/* 法律页面 */
.legal { max-width: 760px; margin: 0 auto; padding: 24px 0 48px; }
.legal h1 { font-size: 34px; letter-spacing: -.02em; margin: 0 0 8px; }
.legal-meta { margin: 0 0 20px; font-size: 13.5px; }
.legal-note { font-size: 13.5px; color: var(--muted); border-left: 2px solid var(--accent-2); padding: 8px 14px; background: #F4F6F8; margin: 0 0 28px; }
.legal h2 { font-size: 18px; margin: 32px 0 10px; }
.legal p { line-height: 1.75; color: var(--fg-2); margin: 0 0 10px; }
.legal-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; }
.legal-links a { color: inherit; opacity: .8; }
.legal-links.pub { justify-content: center; padding: 28px 0 8px; color: var(--muted); }

/* ---- 8 种语言（和集团官网对齐）：语言改成下拉菜单；各文字的系统字体 ---- */
:root:lang(ja) { --font: "Manrope", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif; }
:root:lang(ko) { --font: "Manrope", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
:root:lang(th) { --font: "Manrope", "Thonburi", "Leelawadee UI", "Noto Sans Thai", "Tahoma", sans-serif; }
:root:lang(hi) { --font: "Manrope", "Kohinoor Devanagari", "Nirmala UI", "Noto Sans Devanagari", "Mangal", sans-serif; }
:lang(th) body, :lang(hi) body { line-height: 1.75; }
:lang(th) h1, :lang(th) h2, :lang(hi) h1, :lang(hi) h2 { line-height: 1.4; letter-spacing: 0; }

.langs { position: relative; display: inline-block; padding: 0; background: none; font-size: 13px; }
.dark .langs, .side-foot .langs { background: none; }
.langs summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px;
  color: var(--muted); white-space: nowrap; font-weight: 550; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: ""; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.langs summary svg { width: 15px; height: 15px; }
.langs summary:hover, .langs[open] summary { color: var(--fg); }
.dark .langs summary { color: #8b97ad; }
.dark .langs summary:hover, .dark .langs[open] summary { color: #fff; }
.langs ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 168px; margin: 0; padding: 6px 0;
  list-style: none; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(11,28,46,.10); }
.langs li a, .langs li strong { display: block; padding: 8px 16px; border-radius: 0; background: none; box-shadow: none;
  color: var(--ink); font-weight: 500; text-decoration: none; white-space: nowrap; }
.langs li a:hover { background: var(--accent-soft); }
.langs li strong { color: var(--accent); font-weight: 650; }
.dark .langs li a, .dark .langs li strong { color: var(--ink); background: none; }
.dark .langs li strong { color: var(--accent); }
/* 侧栏在页面底部：往上展开 */
.side-foot .langs ul { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.side-foot .langs li a, .side-foot .langs li strong { padding: 8px 16px; }

/* 进入集团官网 */
.group-link { display: inline-flex; align-items: center; gap: 4px; }
.group-link svg { width: 12px; height: 12px; opacity: .7; }
.side-group { margin: 14px 12px 0; padding: 10px 12px 0; border-top: 1px solid var(--ink-line); color: #8b97ad;
  font-size: 13px; text-decoration: none; }
.side-group:hover { color: #fff; }
@media (max-width: 720px) {
  .langs ul { right: -8px; }
}
/* 余额卡同时是 .stat 和 .feature：别被首页的 .feature（横排）带偏 */
.stat.feature { display: grid; gap: 6px; align-items: stretch; }
/* 页头链接不折行；放不下时先收起首页的锚点链接（页脚还有一份） */
.pub-top nav a { white-space: nowrap; }
@media (max-width: 1280px) { .pub-top .lp-links { display: none; } }
.logo { white-space: nowrap; }
/* 越南语、马来语、日语的页头词更长 */
@media (max-width: 1520px) { :lang(vi) .pub-top .lp-links, :lang(ms) .pub-top .lp-links, :lang(ja) .pub-top .lp-links { display: none; } }
@media (max-width: 720px) {
  .pub-top nav { flex-wrap: wrap; gap: 4px; }
  .pub-top nav > a:not(.btn) { padding: 6px 8px; }
}
/* 窄屏：网格子项默认 min-width:auto，会被插图 / 长词撑出屏幕 */
.lp-hero > *, .lp-split > * { min-width: 0; }
.lp-hero h1 { overflow-wrap: break-word; }
@media (max-width: 560px) { .lp-hero h1 { font-size: 32px; } }

/* =====================================================================
   首页升级（2026-10-30 用户要求「更高级、大气、有科技感」）：仍守上面的集团统一规则——
   不用渐变、发光、彩色阴影；科技感靠更大的字、等宽数字、网格上跑的数据包和终端。
   ===================================================================== */
/* 首屏：更大的标题、更透气 */
.hero { padding-bottom: 96px; }
.hero::before { opacity: .6; }
.home .lp-hero { padding-top: 64px; }
.lp-hero h1 { font-size: 60px; line-height: 1.06; letter-spacing: -.035em; }
/* 中文标题短，可以更大；西文标题长，72px 会折成四行 */
:lang(zh) .lp-hero h1 { font-size: 72px; line-height: 1.04; letter-spacing: -.04em; }
.hero .sub { font-size: 19px; color: #B4C0CF; }

/* 网格上跑的数据包：沿 56px 网格线移动的短线 */
.hero-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-fx i { position: absolute; display: block; background: var(--glow); opacity: 0; }
.hero-fx i:nth-child(-n+3) { height: 1px; width: 96px; left: -96px; animation: pkt-x 9s linear infinite; }
.hero-fx i:nth-child(n+4) { width: 1px; height: 96px; top: -96px; animation: pkt-y 11s linear infinite; }
.hero-fx i:nth-child(1) { top: 168px; animation-delay: .5s; }
.hero-fx i:nth-child(2) { top: 392px; animation-delay: 4s; animation-duration: 12s; }
.hero-fx i:nth-child(3) { top: 616px; animation-delay: 7s; }
.hero-fx i:nth-child(4) { left: 784px; animation-delay: 1.5s; }
.hero-fx i:nth-child(5) { left: 1120px; animation-delay: 6s; animation-duration: 13s; }
.hero-fx i:nth-child(6) { left: 336px; animation-delay: 9s; }
@keyframes pkt-x { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: .55; } 80% { opacity: .55; } 100% { transform: translateX(calc(100vw + 192px)); opacity: 0; } }
@keyframes pkt-y { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .45; } 80% { opacity: .45; } 100% { transform: translateY(1000px); opacity: 0; } }

/* 首屏下方的大数字 */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 72px; border-top: 1px solid rgba(255,255,255,.14); }
.kpis div { padding: 28px 28px 4px 0; display: grid; gap: 10px; align-content: start; }
.kpis div + div { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.08); }
.kpis b { font: 600 48px/1 var(--font); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.kpis span { color: #9AA8BA; font-size: 14.5px; line-height: 1.5; }

/* 各段编号，和集团官网「01 | 产业布局」同一种写法 */
.home { counter-reset: sec; }
.home .section .eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--mono); letter-spacing: .08em; }
.home .section .eyebrow::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); opacity: .65; }
.term.play .ln { visibility: visible; }

/* 字号和对比度：标题更大，正文更深 */
.home .section { padding: 120px 40px; }
.home .section h2 { font-size: 46px; line-height: 1.12; letter-spacing: -.035em; margin-bottom: 16px; }
.home .lead { font-size: 17.5px; line-height: 1.65; color: #4A5A6E; max-width: 680px; }
.home .lp-dark .lead, .home .lp-dev .lead { color: #A3B1C2; }
.home .product p, .home .lp-card span:last-child, .home .lp-checks span { color: #4A5A6E; font-size: 15.5px; }
.home .product ul { font-size: 15px; }

/* 产品卡片：悬停时顶边一条青绿线展开 */
.product { overflow: hidden; transition: border-color .25s; }
.product::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--accent-2);
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.product:hover::before { transform: scaleX(1); }
.product .ico { width: 52px; height: 52px; }
.product .ico svg.i { width: 26px; height: 26px; }
.product h3 { font-size: 22px; }

/* 开发者：终端 */
.lp-dev { background: var(--ink); color: #C9D3DE; border-top: 1px solid rgba(255,255,255,.06); }
.lp-dev h2 { color: #fff; }
.lp-dev .eyebrow { color: var(--glow); }
.lp-devs { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 18px; }
.lp-devs li { display: flex; gap: 14px; align-items: flex-start; }
.lp-devs svg.i { width: 38px; height: 38px; padding: 9px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm); color: var(--glow); }
.lp-devs b { display: block; color: #fff; font-size: 16px; } .lp-devs span { color: #9AA8BA; font-size: 15px; }
.term { background: #07121F; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; overflow: hidden; min-width: 0; }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }
.term-bar span { margin-left: 10px; font: 12px var(--mono); color: #6F8095; }
.term pre { margin: 0; padding: 22px 22px 26px; font: 13.5px/1.85 var(--mono); color: #D5DEE8; overflow-x: auto; }
.term .ln { display: inline-block; white-space: pre; }
.term .ln b { color: var(--glow); font-weight: 500; } .term .ln b.h { color: #7FA3C4; }
.term .ln.o { color: #7F90A4; } .term .ln em { font-style: normal; color: var(--glow); }
.term .ln u { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--glow); text-decoration: none;
  animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* 打字：命令逐行「敲」出来，输出直接出现。.armed 由 home.js 加上，滚到时再加 .play */
.term.armed .ln { visibility: hidden; }
.term.play .ln { visibility: visible; }
.term.play .ln.c { animation: type .9s steps(36) both; }
.term.play .ln.o { animation: show .2s both; }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes show { from { opacity: 0; } to { opacity: 1; } }
.term.play .ln:nth-child(1) { animation-delay: .2s; }
.term.play .ln:nth-child(2) { animation-delay: 1.1s; }
.term.play .ln:nth-child(3) { animation-delay: 2.3s; }
.term.play .ln:nth-child(4) { animation-delay: 2.9s; }
.term.play .ln:nth-child(5) { animation-delay: 4.1s; }
.term.play .ln:nth-child(6) { animation-delay: 5.3s; }
.term.play .ln:nth-child(7) { animation-delay: 6.5s; }
.term.play .ln:nth-child(8) { animation-delay: 7.1s; }

/* 页头：控制台 / 登录 / 注册 / 语言靠右，和下面内容的右边对齐（上面 .home 的 margin-left: 0 让它们挤在了左边） */
.home .pub-top nav:not(.lp-links) { margin-left: auto; }
/* 深色页头上「注册」做成白底按钮（原来是墨蓝底，和背景融在一起） */
.home .pub-top .btn { background: #fff; color: var(--ink); margin-left: 6px; }
.home .pub-top .btn:hover { background: #E7F4F2; text-decoration: none; }

/* 架构图：链路上跑的数据包（SVG animateMotion） */
.lp-pkt { fill: var(--glow); }

@media (prefers-reduced-motion: reduce) {
  .hero-fx, .lp-pkt { display: none; }
  .term .ln u { animation: none; }
}
@media (max-width: 960px) {
  .lp-hero h1, :lang(zh) .lp-hero h1 { font-size: 48px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpis div:nth-child(3) { padding-left: 0; border-left: 0; }
  .kpis div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.08); }
  .home .section { padding: 80px 24px; }
  .home .section h2 { font-size: 34px; }
}
@media (max-width: 560px) {
  .lp-hero h1, :lang(zh) .lp-hero h1 { font-size: 36px; }
  .kpis b { font-size: 36px; }
  .home .section { padding: 64px 16px; }
  .home .section h2 { font-size: 28px; }
  .term pre { font-size: 12px; padding: 16px; }
}

/* =====================================================================
   多些颜色和机房元素（2026-10-30 用户同事反馈「太冷太素」；第一版四种颜色用户嫌乱，收成两种）：
   只用青绿（品牌色）+ 一种蓝，颜色主要放在机房插图里，页面其他地方只点缀。仍不用渐变、发光。
   插图由 tools/gen_art.py 生成；它的 class 名按功能起（b 计算、v 存储、t 网络），颜色统一在这里定。
   ===================================================================== */
:root { --c-blue: #4F8DF7; --c-teal: #3CC7B5; --c-green: #4ADE80; }

/* 机房插图 */
.dc-art { width: 100%; height: auto; overflow: visible; display: block; }
.lp-art .dc-art { max-height: 500px; }
.dc-art .g { stroke: rgba(255,255,255,.07); stroke-width: 1; fill: none; }
.dc-art .l { stroke: rgba(255,255,255,.5); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dc-art .f { fill: #1C3550; } .dc-art .m { fill: #142A42; } .dc-art .k { fill: #0F2236; }
.dc-art .u { fill: #0B1C2E; stroke: rgba(255,255,255,.16); }
.dc-art .s { stroke: rgba(255,255,255,.12); }
/* 门楣：计算、存储用蓝，网络用青绿 */
.dc-art .hb, .dc-art .hv, .dc-art .ha { fill: var(--c-blue); } .dc-art .ht { fill: var(--c-teal); }
/* 指示灯：只有绿、青绿、蓝 */
.dc-art .lb, .dc-art .lv { fill: var(--c-blue); } .dc-art .lt, .dc-art .la { fill: var(--c-teal); }
.dc-art .lg { fill: var(--c-green); } .dc-art .lo { fill: #2A3E55; }
.dc-art .bolt { fill: var(--c-teal); stroke: var(--c-teal); }
.dc-art .tr { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.3); }
.dc-art .trr { stroke: rgba(255,255,255,.25); }
.dc-art .cb { stroke: var(--c-blue); stroke-width: 2; } .dc-art .ca { stroke: rgba(255,255,255,.35); stroke-width: 2; }
.dc-art .cflow { stroke: var(--c-teal); stroke-width: 2; stroke-dasharray: 4 6; animation: softflow 1.6s linear infinite; }
.dc-chip rect { fill: #0B1C2E; stroke: rgba(255,255,255,.25); }
.dc-chip text { fill: #fff; font: 600 12px var(--mono); }
.dc-chip .stem { stroke: rgba(255,255,255,.35); stroke-dasharray: 2 3; }
.dc-chip circle { fill: var(--c-teal); }
/* 产品小插图（浅底卡片里） */
.dc-art .vt { fill: var(--c-blue); } .dc-art .vf { fill: #1F4C8F; } .dc-art .vs { fill: #173A6E; }
.dc-art .vring { fill: none; stroke: #fff; }
.dc-art .at { fill: #F4F6F9; stroke: #8796A8; } .dc-art .af2 { fill: #E2E7ED; stroke: #8796A8; } .dc-art .as { fill: #C9D1DB; stroke: #8796A8; }
.dc-art .gt { fill: none; stroke: var(--c-teal); stroke-width: 2; }
.dc-art .gf { fill: #0B1C2E; } .dc-art .gfc { fill: var(--c-teal); }
/* 指示灯闪烁：三种节奏错开 */
.dc-art .b1 { animation: led 2.2s steps(1) infinite; }
.dc-art .b2 { animation: led 3.1s steps(1) infinite .7s; }
.dc-art .b3 { animation: led 1.7s steps(1) infinite 1.3s; }
@keyframes led { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .dc-art .b1, .dc-art .b2, .dc-art .b3, .dc-art .cflow { animation: none; } }

/* 产品卡片：右下放小插图，图标和顶边用青绿；背景浅蓝灰 */
.product { padding-right: 200px; min-height: 260px; }
.product::before { transform: scaleX(0); height: 2px; background: var(--accent-2); }
.product .p-art { position: absolute; right: 24px; bottom: 20px; width: 176px; }
.product .p-art .g { stroke: rgba(11,28,46,.08); }
.product .p-art .l { stroke: rgba(11,28,46,.5); }
.product .p-art .u { stroke: rgba(255,255,255,.2); }
.product .soon { top: 24px; right: 24px; }
.home #products { background: #F3F6FA; }

@media (max-width: 720px) {
  .product { padding-right: 30px; min-height: 0; }
  .product .p-art { position: static; width: 140px; justify-self: end; margin-top: -8px; }
}

/* 手机上页头放一行：语言只留地球图标，点开再选（2026-10-30 用户定） */
@media (max-width: 720px) {
  .pub-top { flex-wrap: nowrap; gap: 10px; }
  .pub-top nav { flex-wrap: nowrap; gap: 2px; }
  .pub-top .btn { padding: 8px 12px; }
  .pub-top .langs .lang-name { display: none; }
  .pub-top .langs summary { padding: 6px; }
  .pub-top .langs summary svg { width: 18px; height: 18px; }
}
/* 再窄就收起页头的「控制台」（首屏和页脚都还有入口） */
@media (max-width: 560px) {
  .pub-top .nav-console { display: none; }
  .home .pub-top { gap: 8px; }
}
@media (max-width: 420px) {
  .pub-top { padding-left: 14px; padding-right: 10px; }
  .pub-top .logo { gap: 7px; font-size: 14px; }
  .pub-top nav > a:not(.btn) { padding: 6px 4px; font-size: 13.5px; }
  .pub-top .btn { padding: 7px 10px; font-size: 13px; margin-left: 2px; }
  .pub-top .langs summary { padding: 6px 2px; }
  .pub-top .langs summary::after { display: none; }
}

/* 登录 / 注册左栏：和首页同一套（青绿 + 蓝、机房插图），去掉旧的紫色渐变 */
.auth-art { background-color: #0B1C2E; background-image: none; padding: 40px 56px; }
.auth-art::before { opacity: 1; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                                        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
                    background-size: 56px 56px; }
.auth-art .pitch { padding: 32px 0 16px; }
.auth-art .pill { color: #b9c3d8; border: 1px solid rgba(255,255,255,.14); margin: 0 0 22px; }
.auth-art h2 { font-size: 38px; }
.auth-art .pitch > p { margin-bottom: 26px; }
.ticks li svg.i { border-radius: 2px; background: rgba(60,199,181,.08); border-color: rgba(60,199,181,.25); color: var(--c-teal); }
.auth-dc { margin: 34px 0 0; max-width: 460px; }
.auth-dc .dc-art { max-height: 250px; }
@media (max-height: 820px) { .auth-dc { display: none; } }

/* 快速上手页 */
.qs { max-width: 820px; margin: 0 auto; padding: 24px 0 56px; }
.qs .eyebrow { font-family: var(--mono); color: var(--accent); letter-spacing: .04em; margin: 0 0 10px; }
.qs h1 { font-size: 38px; letter-spacing: -.025em; margin: 0 0 12px; }
.qs > .lead { font-size: 17px; color: var(--fg-2); margin: 0 0 40px; }
.qs-steps { list-style: none; padding: 0; margin: 0; counter-reset: qs; }
.qs-steps > li { position: relative; padding: 0 0 36px 56px; counter-increment: qs; }
.qs-steps > li::before { content: counter(qs, decimal-leading-zero); position: absolute; left: 0; top: 2px; font: 600 13px/1 var(--mono);
  color: var(--accent); border: 1px solid var(--accent-soft); background: var(--accent-soft); padding: 7px 7px; border-radius: 2px; }
.qs-steps > li::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: 6px; width: 1px; background: var(--line); }
.qs-steps > li:last-child::after { display: none; }
.qs-steps h2 { font-size: 20px; margin: 0 0 8px; }
.qs-steps p { color: var(--fg-2); line-height: 1.7; margin: 0 0 12px; }
.qs-code { background: var(--ink); color: #DCE6F0; font: 13px/1.75 var(--mono); padding: 16px 20px; border-radius: 4px; margin: 4px 0 12px;
  overflow-x: auto; white-space: pre; }
.qs-code .cm { color: #7F8EA3; }
.qs-ask { font-family: var(--mono); font-size: 14px; background: #F4F6F8; border-left: 2px solid var(--c-teal); padding: 10px 14px; }
.qs-ask span { color: var(--accent); font-weight: 700; margin-right: 6px; }
.qs-note { font-size: 13.5px; color: var(--muted) !important; }
.qs-win { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 32px; }
.qs-win h2 { font-size: 20px; margin: 0 0 8px; }
.qs-win p { color: var(--fg-2); line-height: 1.7; margin: 0 0 12px; }
.lp-dev-more { margin: 26px 0 0; }
.lp-dev-more a { display: inline-flex; align-items: center; gap: 6px; color: var(--c-teal); font-weight: 600; }
.lp-dev-more svg.i { width: 16px; height: 16px; }
@media (max-width: 720px) {
  .qs h1 { font-size: 28px; }
  .qs-steps > li { padding-left: 44px; }
  .qs-code { font-size: 12px; padding: 14px; }
}

/* 登录后页面的小修：文件选择按钮、预览用的模拟按钮不再用紫色、余额数字用等宽体 */
input[type=file]::file-selector-button { font: 600 13px var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line);
  border-radius: 2px; padding: 7px 14px; margin-right: 12px; cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: var(--ink); }
button.dev { background: #fff; color: var(--ink); border: 1px dashed var(--accent-2); }
button.dev:hover { background: var(--accent-soft); }
.stat.feature .v { font-family: var(--mono); letter-spacing: -.02em; }
.side { background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 28px 28px; }

/* 对比度（Lighthouse 2026-10-30）：页脚小字和法律链接在深底 / 白底都要够 4.5:1；正文里的链接加下划线 */
.lp-foot, .lp-foot p { color: #8FA0B3; }
.lp-foot .legal-links a, .lp-foot nav a { color: #A9B6C4; opacity: 1; }
.legal-links.pub { color: #5B6B7C; }
.legal-links.pub a { opacity: 1; }
.auth-box .alt a, .notice a { text-decoration: underline; text-underline-offset: 3px; }

/* 软通云标志「堆叠 S」（2026-10-30 用户定方向 A）：S 用文字色，中间一层青绿，指示灯挖成底色 */
.logo { gap: 11px; --logo-bg: #fff; }
.logo-s { width: 30px; height: 30px; flex: none; overflow: visible; }
.logo-s .s { stroke: currentColor; }
.logo-s .m { stroke: var(--glow); }
.logo-s .led { fill: var(--logo-bg); }
.logo-name { font-size: 17px; font-weight: 700; letter-spacing: .02em; }
:lang(zh) .logo-name { letter-spacing: .12em; }
.side .logo, .home .logo, .auth-art .logo, .dark .logo, .lp-foot .logo { --logo-bg: var(--ink); }
@media (max-width: 420px) { .pub-top .logo-s { width: 26px; height: 26px; } .pub-top .logo-name { font-size: 15px; } }

/* 首页页脚：左边标志，右边三栏链接，底下一行版权 + 软通集团（2026-10-30 用户嫌原来一行挤着乱） */
.foot.ft { padding: 72px 40px 28px; color: #8FA0B3; font-size: 14px; }
.ft .section-in { display: block; }
.ft-top { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ft-brand p { margin: 16px 0 0; color: #8FA0B3; max-width: 300px; line-height: 1.6; }
.ft-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ft-cols nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.ft-cols h3 { margin: 0 0 14px; font: 600 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.ft-cols a { color: #A9B6C4; padding: 5px 0; }
.ft-cols a:hover, .ft-bottom a:hover { color: #fff; text-decoration: none; }
.ft-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: 13px; }
.ft-bottom p { margin: 0; color: #8FA0B3; }
.ft-bottom .group-link { color: #A9B6C4; }
@media (max-width: 860px) { .ft-top { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 560px) { .foot.ft { padding: 48px 16px 24px; } .ft-cols { grid-template-columns: 1fr 1fr; gap: 28px 16px; } }

/* ===== 皮肤用的变量（2026-10-31）：下面把写死的颜色换成变量，默认值和原来一样；static/skins.css 按 <html data-skin> 改这些变量 ===== */
:root { --soft-bg: #F4F6F8; --art-f: #1C3550; --art-m: #142A42; --art-k: #0F2236; --art-vf: #1F4C8F; --art-vs: #173A6E; }
.shell { background: linear-gradient(90deg, var(--ink) 252px, var(--soft-bg) 252px); }
.lp-soft, .legal-note, .qs-ask { background: var(--soft-bg); }
.home #products { background: var(--soft-bg); }
.btn.light:hover, .home .pub-top .btn:hover { background: var(--accent-soft); }
.lp-card-back { fill: var(--accent-soft); }
.lp-spec svg.i { background: color-mix(in srgb, var(--glow) 12%, transparent); }
.ticks li svg.i { background: color-mix(in srgb, var(--glow) 8%, transparent); border-color: color-mix(in srgb, var(--glow) 25%, transparent); }
.dc-art .f { fill: var(--art-f); } .dc-art .m { fill: var(--art-m); } .dc-art .k { fill: var(--art-k); }
.dc-art .u { fill: var(--ink); }
.dc-chip rect, .dc-art .gf { fill: var(--ink); }
.dc-art .vf { fill: var(--art-vf); } .dc-art .vs { fill: var(--art-vs); }
.auth-art { background-color: var(--ink); }

/* 换风格的下拉菜单（样子和语言菜单一样）。色块颜色在 skins.css */
.skins-menu { position: relative; display: inline-block; font-size: 13px; }
.skins-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; color: var(--muted); white-space: nowrap; font-weight: 550; }
.skins-menu summary::-webkit-details-marker { display: none; }
.skins-menu summary svg.i { width: 15px; height: 15px; }
.skins-menu summary:hover, .skins-menu[open] summary { color: var(--fg); }
.dark .skins-menu summary, .side .skins-menu summary { color: #8b97ad; }
.dark .skins-menu summary:hover, .dark .skins-menu[open] summary, .side .skins-menu summary:hover { color: #fff; }
.skins-menu ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 200px; margin: 0; padding: 6px 0; list-style: none;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(11,28,46,.10); }
.skins-menu li a, .skins-menu li strong { display: flex; align-items: center; gap: 10px; padding: 8px 16px; color: var(--ink); font-weight: 500; text-decoration: none; white-space: nowrap; }
.skins-menu li a:hover { background: var(--accent-soft); }
.skins-menu li strong { color: var(--accent); font-weight: 650; }
.skins-menu .sw { width: 22px; height: 14px; flex: none; display: inline-flex; border: 1px solid rgba(0,0,0,.12); overflow: hidden; }
.skins-menu .sw i, .skins-menu .sw b { flex: 1; display: block; }
.side-foot .skins-menu ul { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.pub-top .skins-menu { margin-left: 4px; }
@media (max-width: 720px) { .pub-top .skins-menu .skin-name, .auth-form .skins-menu .skin-name { display: none; } }
@media (max-width: 560px) { .pub-top .skins-menu { display: none; } }
.bar-tools, .ft-tools { display: flex; align-items: center; gap: 18px; }
.ft-tools .skins-menu summary { color: #A9B6C4; }
.ft-tools .skins-menu ul { top: auto; bottom: calc(100% + 6px); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 14%, transparent); }
.steps .now .n { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 15%, transparent); }
.plan:has(input:checked) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 12%, transparent); }
.hero h1 em { box-shadow: inset 0 -.12em 0 color-mix(in srgb, var(--glow) 45%, transparent); }