/* ============================================================
 * apps/sites.css —— 供应商官网版式（js/apps/sites-views.js）
 *
 * ★ 这个文件存在的理由
 *
 *   0.3.2 之前官网长得都一样，因为它的样式全是从 dc.css 借来的
 *   （.dc-sec / .dc-offer 那一套卡片）。那套卡片是给"机房看板"用的，
 *   拿来做"别人的公司官网"就一眼假 —— 五家站点的骨架、配色、
 *   信息密度全都一样。
 *
 *   这个文件给每套骨架一套**自己的皮肤**：顶栏、hero、价格区、
 *   页脚的形态彼此不同，配色也各不相同。命名空间分开写
 *   （.sv-nav.dark / .sv-nav.market / …），互不污染。
 *
 * ★ 三条硬规矩
 *   1. 全部用站点自己的局部色，**不碰全局 --md-primary** ——
 *      否则改一个供应商的配色会把整个游戏的主题带偏。
 *   2. 不引任何图片 / 字体文件，logo 一律文字 + 色块（零依赖）。
 *   3. 只负责"长什么样"，一个数值都不改（钱、风险、容量都在 js 里）。
 * ============================================================ */

/* ============================================================
 * 通用原子（四套骨架都会用到的最小组件）
 * ============================================================ */
.sv-nav {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; flex: none; position: sticky; top: 0; z-index: 5;
}
.sv-nav-l { display: flex; align-items: center; gap: 7px; flex: none; }
.sv-mark {
  width: 26px; height: 26px; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  color: #FFFDFB; letter-spacing: -.3px; flex: none;
}
.sv-logo { font-size: 14.5px; font-weight: 600; letter-spacing: .3px; white-space: nowrap; }
.sv-nav-m { display: flex; gap: 13px; flex: 1; min-width: 0; overflow: hidden; }
.sv-nav-i {
  font-size: 12px; white-space: nowrap; color: inherit; opacity: .68; cursor: default;
}
.sv-nav-i.on { opacity: 1; font-weight: 600; }
.sv-sbox {
  display: flex; align-items: center; gap: 4px; flex: none; width: 118px;
  border-radius: 5px; padding: 3px 5px 3px 8px;
}
.sv-sbox input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 11.5px; color: inherit;
}
.sv-sbox input::placeholder { color: inherit; opacity: .5; }
.sv-sbtn { opacity: .7; display: flex; align-items: center; cursor: pointer; }

.sv-hero { padding: 30px 18px 22px; }
.sv-hero-t { font-size: 22px; line-height: 1.35; font-weight: 600; margin: 0; }
.sv-hero-s { font-size: 13px; line-height: 1.7; opacity: .8; margin: 10px 0 0; }
.sv-hero-b { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.sv-hero-cta {
  font-size: 13px; font-weight: 600; padding: 9px 20px; border-radius: 6px;
  color: #FFFDFB; cursor: default; letter-spacing: .3px;
}
.sv-hero-cta2 {
  font-size: 13px; padding: 9px 18px; border-radius: 6px; cursor: default;
  border: 1px solid currentColor; opacity: .8;
}

.sv-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 16px; }
.sv-badge {
  font-size: 10.5px; padding: 3px 9px; border-radius: 20px;
  border: 1px solid currentColor; opacity: .72; white-space: nowrap;
}

.sv-sec-h {
  font-size: 15.5px; font-weight: 600; margin: 22px 16px 10px;
  padding-left: 10px; border-left: 3px solid currentColor;
}
.sv-greet {
  margin: 0 16px 12px; padding: 9px 12px; font-size: 12.5px; line-height: 1.7;
  font-style: italic; opacity: .82; border-radius: 6px;
}
.sv-footnote {
  margin: 12px 16px 4px; font-size: 11.5px; line-height: 1.7; opacity: .6;
}
.sv-dim { opacity: .62; }

/* 特性卡 */
.sv-feats { display: flex; gap: 10px; padding: 0 16px; margin-top: 4px; flex-wrap: wrap; }
.sv-feat {
  flex: 1 1 30%; min-width: 96px; padding: 13px 12px; border-radius: 8px;
}
.sv-feat-ic { display: flex; margin-bottom: 8px; opacity: .9; }
.sv-feat-t { font-size: 13px; font-weight: 600; }
.sv-feat-d { font-size: 11.5px; line-height: 1.6; opacity: .68; margin-top: 4px; }

/* 价格条目（原子） */
.sv-price { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.sv-pi { border-radius: 8px; padding: 13px 14px; }
.sv-pi-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sv-pi-n { font-size: 14px; font-weight: 600; }
.sv-pi-p { font-size: 14px; font-weight: 600; white-space: nowrap; }
.sv-pi-spec { margin-top: 9px; }
.sv-spec-r {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11.5px; padding: 3px 0; border-bottom: 1px dashed rgba(128, 128, 128, .22);
}
.sv-spec-k { opacity: .6; }
.sv-spec-v { font-weight: 500; }
.sv-pi-note { font-size: 11.5px; line-height: 1.65; margin-top: 8px; opacity: .8; }
.sv-pi-a { margin-top: 10px; display: flex; justify-content: flex-end; }

.sv-btn {
  font-size: 12.5px; font-weight: 600; padding: 8px 18px; border-radius: 6px;
  border: 1px solid rgba(128, 128, 128, .34); background: transparent;
  color: inherit; cursor: pointer; letter-spacing: .3px;
  transition: transform .16s ease, opacity .16s ease;
}
.sv-btn:active { transform: scale(.96); }
.sv-btn[disabled] { opacity: .4; cursor: not-allowed; }
.sv-btn-pri { border-color: transparent; color: #FFFDFB; }

/* 页脚 / 版权 */
.sv-foot { margin-top: 26px; padding: 16px; font-size: 11px; line-height: 1.9; opacity: .62; }
.sv-foot-l { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.sv-foot-meta { opacity: .85; }
.sv-copy {
  font-size: 10.5px; text-align: center; padding: 10px 16px 20px; opacity: .45;
}

/* 从搜索结果点进来时，命中区块短暂高亮一下 */
.sv-hit {
  animation: sv-flash 1.6s ease;
  border-radius: 8px;
}
@keyframes sv-flash {
  0%, 100% { box-shadow: none; }
  15%, 60% { box-shadow: 0 0 0 3px rgba(200, 145, 58, .55); }
}

/* ============================================================
 * 骨架 1 · tech-dark（迅捷云）—— 深色顶栏 + 蓝 hero
 * ============================================================ */
.sv-nav.dark {
  background: #14314C; color: #E4EDF4;
  border-bottom: 3px solid #1F4E79;
}
.sv-nav.dark .sv-mark { background: #2E6DA4; }
.sv-nav.dark .sv-sbox { background: rgba(255, 255, 255, .09); }

.sv-hero {
  background: linear-gradient(150deg, #1F4E79 0%, #2E6DA4 100%);
  color: #EEF4F9;
}
.sv-hero .sv-hero-cta { background: #E8A33D; color: #2A2118; }
.sv-hero .sv-hero-cta2 { color: #DCE8F1; }

.sv-feat { background: #F3F6F9; border: 1px solid #E0E8EF; }
.sv-feat-ic { color: #1F4E79; }
.sv-sec-h { border-color: #1F4E79; color: #1F4E79; }
.sv-greet { background: #F1F5F9; }
.sv-pi { background: #FBFCFD; border: 1px solid #E0E8EF; }
.sv-pi-p { color: #1F4E79; }
.sv-btn-pri { background: #1F4E79; }
.sv-st { font-weight: 600; }
.sv-st.ok { color: #58876A; }
.sv-st.mid { color: #C2913A; }
.sv-st.hi { color: #B0554E; }

/* ============================================================
 * 骨架 2 · market（母鸡市场）—— 橘黄二手市场
 * ============================================================ */
.sv-nav.market { background: #FFF3E6; color: #7A3E12; border-bottom: 2px solid #C2571A; }
.sv-nav.market .sv-mark { background: #C2571A; }
.sv-nav.market .sv-sbox { background: #FFFDFB; border: 1px solid #E7C9A8; }

.sv-tabs {
  display: flex; gap: 4px; padding: 8px 12px; overflow-x: auto;
  background: #FFF8F0; border-bottom: 1px solid #F0DFC9;
}
.sv-tab {
  font-size: 12px; padding: 5px 12px; border-radius: 14px; white-space: nowrap;
  background: #F2E3D0; color: #8A5A2B;
}
.sv-tab.on { background: #C2571A; color: #FFF6EC; font-weight: 600; }

.sv-strip { padding: 18px 16px 6px; background: #FFF8F0; }
.sv-strip-t { font-size: 18px; font-weight: 700; color: #7A3E12; }
.sv-strip-s { font-size: 12px; color: #9C7550; margin-top: 6px; line-height: 1.6; }

.sv-greet.market { background: #FDF0E1; color: #7A4A1E; }
.sv-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 12px;
}
.sv-card {
  background: #FFFDFB; border: 1px solid #EEDCC6; border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
}
.sv-thumb {
  height: 62px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #F7E8D5, #F7E8D5 8px, #F2DDC5 8px, #F2DDC5 16px);
  color: #A9754A; font-size: 12px; font-weight: 600;
}
.sv-card-b { padding: 9px 10px 11px; display: flex; flex-direction: column; flex: 1; }
.sv-card-t { font-size: 12.5px; font-weight: 600; color: #5E3410; }
.sv-card-p { font-size: 16px; font-weight: 700; color: #C2571A; margin: 4px 0; }
.sv-card-s { font-size: 10.5px; color: #8A6A48; line-height: 1.5; }
.sv-card-n { font-size: 10px; color: #A78A6C; margin: 4px 0 8px; flex: 1; }
.sv-card-b .sv-btn { width: 100%; padding: 7px; }
.sv-card-b .sv-btn-pri { background: #C2571A; }

.sv-used {
  margin: 0 12px; display: flex; gap: 10px; padding: 12px;
  background: #FFFDFB; border: 1px dashed #E0B58C; border-radius: 8px;
}
.sv-cond { display: flex; flex-direction: column; gap: 5px; flex: none; align-items: center; }
.sv-cond-tag {
  font-size: 11px; font-weight: 700; color: #FFF6EC; background: #B5761F;
  padding: 5px 9px; border-radius: 5px;
}
.sv-cond-warn { font-size: 10px; color: #B0554E; }
.sv-used-b { flex: 1; min-width: 0; }
.sv-used-b .sv-btn-pri { background: #C2571A; margin-top: 6px; }

/* ============================================================
 * 骨架 3 · free-lite（云屿云）—— 白底大按钮
 * ============================================================ */
.sv-nav.lite { background: #FFFDFB; color: #2A3138; border-bottom: 1px solid #E6E4DF; }
.sv-nav.lite .sv-mark { background: #3E8E7E; }
.sv-nav.lite .sv-sbox { background: #F4F2EE; border: 1px solid #E6E4DF; }

.sv-hero.lite { background: #FFFDFB; text-align: center; padding: 34px 20px 26px; }
.sv-free-tag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 3px;
  color: #3E8E7E; border: 2px solid #3E8E7E; border-radius: 20px;
  padding: 3px 14px; margin-bottom: 16px;
}
.sv-hero.lite .sv-hero-t { font-size: 21px; color: #22322E; }
.sv-hero.lite .sv-hero-s { color: #5C6B67; }
.sv-hero.lite .sv-hero-b { justify-content: center; }
.sv-hero.lite .sv-hero-cta {
  background: #3E8E7E; padding: 12px 34px; font-size: 14.5px; border-radius: 8px;
  box-shadow: 0 6px 16px rgba(62, 142, 126, .28);
}
.sv-hero.lite .sv-hero-cta2 { color: #3E8E7E; border-color: #3E8E7E; }

.sv-steps {
  display: flex; gap: 8px; padding: 0 16px; margin-top: 6px;
}
.sv-step {
  flex: 1; display: flex; align-items: center; gap: 7px; font-size: 11.5px;
  color: #5C6B67; background: #F4F7F6; border-radius: 8px; padding: 10px 11px;
}
.sv-step-n {
  width: 18px; height: 18px; border-radius: 50%; background: #3E8E7E; color: #FFF;
  font-size: 11px; display: flex; align-items: center; justify-content: center; flex: none;
}
.sv-hero.lite + .sv-steps { margin-top: 4px; }

.sv-nav.lite ~ .sv-sec-h { border-color: #3E8E7E; color: #2C6B5E; }
.sv-feat { background: #F7FAF9; border: 1px solid #E2EFEC; }
.sv-nav.lite ~ .sv-feats .sv-feat-ic { color: #3E8E7E; }
.sv-free { padding: 0 16px; }
.sv-free .sv-pi { background: #F7FBFA; border: 1.5px solid #CFE7E1; }
.sv-free .sv-pi-p { color: #3E8E7E; font-size: 18px; }
.sv-free .sv-btn-pri { background: #3E8E7E; padding: 10px 26px; }
.sv-mine { margin-top: 10px; }
.sv-mine-r {
  display: flex; justify-content: space-between; gap: 8px; padding: 7px 0;
  font-size: 12px; border-top: 1px solid #E6E4DF;
}

/* ============================================================
 * 骨架 4 · bulk（批发网）—— 灰蓝 + 表格价目
 * ============================================================ */
.sv-nav.bulk { background: #2F4858; color: #E7EDF1; border-bottom: 3px solid #B7410E; }
.sv-nav.bulk .sv-mark { background: #B7410E; }
.sv-nav.bulk .sv-sbox { background: rgba(255, 255, 255, .1); }

.sv-strip.bulk { background: #F4F6F7; border-bottom: 1px solid #E0E6E9; }
.sv-strip.bulk .sv-strip-t { color: #2F4858; }
.sv-strip.bulk .sv-hero-cta { background: #B7410E; color: #FFFDFB; margin-top: 12px; }
.sv-badges.bulk { padding: 12px 16px 0; color: #4A6B7C; }

.sv-nav.bulk ~ .sv-sec-h { border-color: #B7410E; color: #2F4858; }
.sv-greet { background: #F4F6F7; }

.sv-table {
  margin: 0 12px; border: 1px solid #D8E0E4; border-radius: 6px;
  /* 窄屏下 5 列放不开，允许横向滚 —— 真实的批发价目表也是要左右拖的 */
  overflow-x: auto;
}
.sv-tr { display: flex; align-items: center; min-width: 100%; }
.sv-th { position: sticky; top: 0; }
.sv-tr + .sv-tr { border-top: 1px solid #E6EDF0; }
.sv-th { background: #2F4858; color: #E7EDF1; font-size: 11.5px; font-weight: 600; }
.sv-td {
  flex: 1; min-width: 0; padding: 10px 8px; font-size: 12px; color: #33454F;
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sv-th .sv-td { color: #E7EDF1; }
.sv-td.sv-money { font-weight: 700; color: #B7410E; }
.sv-td.sv-act { flex: 1.5; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sv-td-sub { font-size: 10px; color: #6B7C84; white-space: nowrap; }
.sv-td.sv-act .sv-btn { padding: 6px 12px; font-size: 11.5px; }
.sv-tr:nth-child(even) { background: #FAFBFC; }
.sv-btn-pri { background: #B7410E; }
.sv-table .sv-btn-pri { background: #B7410E; }

/* ============================================================
 * 手机窄屏回落：特性卡与商品网格挤成一列
 * （游戏本身就是窄屏 App，这里只是保证极窄时不出横向滚动）
 * ============================================================ */
@media (max-width: 380px) {
  .sv-feats { flex-wrap: wrap; }
  .sv-feat { flex: 1 1 100%; }
  .sv-grid { grid-template-columns: 1fr; }
  .sv-nav-m { display: none; }
  .sv-table .sv-td { font-size: 11px; padding: 9px 5px; }
}

/* ============================================================
 * 分级商城（0.3.8）—— 货架上的商品卡
 *
 *   官网要从"三张表"变成"一家店的货架"，样式就得跟着变成**商品卡**，
 *   而不是继续堆 priceItem 那种一行一条的表。
 *
 * ★ 三条约束（对着两份纲领来的）
 *   1. 单一强调色：全页只用一个 --sv-accent。等级之间**不换色相**，
 *      只用透明度 / 字重 / 条纹区分 —— 四个色相就是四家公司，会散。
 *   2. 只动 transform 和 opacity。hover 抬一点、按下压一点，没有回弹。
 *   3. 按钮六态齐全：默认 / hover / active / focus-visible / is-busy / disabled。
 *
 * ★ 各主题的强调色在这里集中定义一处，避免在下面每个规则里重复写死颜色
 * ============================================================ */
.sv-skin-tech-dark { --sv-accent: #1F4E79; --sv-accent-soft: rgba(31, 78, 121, .08); }
.sv-skin-market    { --sv-accent: #C2571A; --sv-accent-soft: rgba(194, 87, 26, .08); }
.sv-skin-free-lite { --sv-accent: #3E8E7E; --sv-accent-soft: rgba(62, 142, 126, .08); }
.sv-skin-bulk      { --sv-accent: #B7410E; --sv-accent-soft: rgba(183, 65, 14, .08); }
.sv-skin-registrar { --sv-accent: #F38020; --sv-accent-soft: rgba(243, 128, 32, .09); }
.sv-skin-mega-cloud { --sv-accent: #FF6A00; --sv-accent-soft: rgba(255, 106, 0, .08); }
.sv-skin-mini-lite  { --sv-accent: #D6336C; --sv-accent-soft: rgba(214, 51, 108, .08); }
.sv-skin-mini-wild  { --sv-accent: #6D4AFF; --sv-accent-soft: rgba(109, 74, 255, .08); }

.sv-mall-lead {
  margin: 0 16px 10px; font-size: 12px; line-height: 1.7; opacity: .7;
}
.sv-mall { padding: 0 12px; }

/* 等级 tab：窄屏横向滚，和真实站点一致 */
.sv-mall-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px;
  scrollbar-width: none;
}
.sv-mall-tabs::-webkit-scrollbar { display: none; }
.sv-mall-tab {
  flex: none; font-size: 12px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--divider, #E6E4DF); background: var(--surface, #FFFDFB);
  color: var(--text, #2A3138); cursor: pointer; white-space: nowrap;
  transition: transform .14s ease, opacity .14s ease, background .14s ease, border-color .14s ease;
}
.sv-mall-tab:hover { opacity: .82; }
.sv-mall-tab:active { transform: scale(.96); }
.sv-mall-tab:focus-visible { outline: 2px solid var(--sv-accent, #1F4E79); outline-offset: 2px; }
.sv-mall-tab.on {
  background: var(--sv-accent, #1F4E79); border-color: var(--sv-accent, #1F4E79);
  color: #FFFDFB; font-weight: 600; opacity: 1;
}

.sv-mall-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }

/* 商品卡：左侧一道条纹标等级，等级不同只改透明度 */
.sv-plan {
  background: var(--surface, #FFFDFB); border: 1px solid var(--divider, #E6E4DF);
  border-radius: var(--r, 12px); padding: 12px 13px;
  border-left: 3px solid var(--sv-accent, #1F4E79);
  transition: transform .16s ease, opacity .16s ease;
}
.sv-plan-bare { border-left-width: 5px; }

.sv-plan-h { display: flex; align-items: center; gap: 8px; }
.sv-plan-tier {
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 8px; border-radius: 4px;
  color: var(--sv-accent, #1F4E79); background: var(--sv-accent-soft, rgba(31,78,121,.08));
}
.sv-plan-owned {
  font-size: 10.5px; padding: 2px 8px; border-radius: 4px; margin-left: auto;
  color: var(--ok, #58876A); border: 1px solid currentColor;
}

.sv-plan-n { font-size: 13.5px; font-weight: 600; margin-top: 8px; }

.sv-plan-price { display: flex; align-items: baseline; gap: 3px; margin-top: 3px; }
.sv-plan-price b { font-size: 20px; font-weight: 700; color: var(--sv-accent, #1F4E79); }
.sv-plan-unit { font-size: 11.5px; opacity: .6; }

.sv-plan-spec {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px;
}
.sv-plan-spec span {
  font-size: 11px; padding: 3px 7px; border-radius: 4px;
  background: var(--sv-accent-soft, rgba(31,78,121,.08));
  color: var(--text, #2A3138); font-family: var(--mono, ui-monospace, monospace);
}

.sv-plan-sub { font-size: 11.5px; opacity: .68; margin-top: 8px; }
.sv-plan-note { font-size: 11.5px; line-height: 1.65; opacity: .8; margin-top: 4px; }
.sv-plan-tip { font-size: 11px; opacity: .55; margin-top: 6px; }

.sv-plan .sv-btn { width: 100%; margin-top: 10px; padding: 9px; }
.sv-plan .sv-btn-pri { background: var(--sv-accent, #1F4E79); }

/* 按钮六态（纲领要求：不许有缺状态的按钮） */
.sv-btn:hover { opacity: .88; }
.sv-btn:active { transform: scale(.97); }
.sv-btn:focus-visible { outline: 2px solid var(--sv-accent, #1F4E79); outline-offset: 2px; }
.sv-btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.sv-btn.is-busy { opacity: .62; cursor: progress; }

/* ============================================================
 * 骨架 5 · registrar（明记域名）—— 域名控制台
 *
 * ★ 0.3.9 整屏重做
 *   旧的是"hero + 一张表单 + 一个 select 拼的 DNS 小窗"，密度像 demo，
 *   不像一家域名商。新版按控制台来：常驻顶栏、账户行、域名状态、
 *   频道条、能增删改的记录表、价目和到期。
 *
 * ★ 三条约束（和商城那屏同一套）
 *   1. 全页只有一个强调色：--cf-orange（其余一律灰阶 + token 里的
 *      ok/warn），多余色相会让这一屏变成"四家公司在开会"。
 *   2. 动效只走 transform / opacity + 色彩过渡，没有回弹。
 *   3. 按钮状态齐：默认 / hover / active / focus-visible / disabled。
 *      这屏所有动作都是同步的，所以没有 loading 态 —— 不写用不到的状态。
 *
 * ★ 表单控件沿用全局暖纸底 token（--surface / --text / --divider / --mono），
 *   深色只出现在顶栏那一层，和游戏外壳的纸感不打架。
 * ============================================================ */
.sv-skin-registrar {
  --cf-orange: #F38020;
  --cf-orange-d: #C9660F;
  --cf-bg: #F4F3F0;
  --cf-line: #E3E0DA;
  --cf-dark: #1C1E20;
}

/* ---------- 顶栏（深色那一层） ---------- */
.sv-nav.cf-top {
  background: var(--cf-dark); color: #FFFDFB;
  padding: 10px 12px; gap: 8px; position: static; z-index: auto;
}
.cf-brand { display: flex; align-items: center; gap: 7px; flex: none; }
.cf-cloud { display: flex; color: var(--cf-orange); }
.cf-word { font-size: 14px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; }
.cf-top-r { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; }
.cf-search {
  display: flex; align-items: center; gap: 5px; flex: 1; max-width: 190px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 5px; padding: 4px 6px 4px 8px;
}
.cf-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 11.5px; color: #FFFDFB;
}
.cf-search input::placeholder { color: rgba(255, 255, 255, .55); }
.cf-sgo { display: flex; opacity: .75; cursor: pointer; }
.cf-sgo:active { transform: scale(.94); }
.cf-av {
  width: 25px; height: 25px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #FFFDFB; background: #4A4E52;
  letter-spacing: -.2px;
}

/* ---------- 域名抬头 ---------- */
.cf-head {
  background: var(--surface, #FFFDFB); border-bottom: 1px solid var(--cf-line);
  padding: 14px 16px 12px;
}
.cf-head-l { min-width: 0; }
.cf-dom {
  font-size: 19px; font-weight: 600; margin: 0; line-height: 1.3;
  word-break: break-all; color: var(--text, #2A3138);
}
/* none 而不是 empty：全局 .empty 是"整块空态"的样式，撞上会把标题居中 */
.cf-dom.none { font-size: 17px; color: var(--text-2, #647079); }
.cf-dom-sub { font-size: 11.5px; color: var(--text-2, #647079); margin-top: 4px; }
.cf-head-r { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.cf-head-l + .cf-head-r { justify-content: flex-start; }

/* 到期进度条：比一行"还剩几天"直观，也更像真后台 */
.cf-meter {
  margin-top: 12px; height: 5px; border-radius: 999px;
  background: rgba(128, 128, 128, .14); overflow: hidden;
}
.cf-meter-fill {
  /* 不加 transition：宽度是重渲染时一次画定的，动画它只会违反
     「动效只走 transform/opacity」这条规矩 */
  height: 100%; border-radius: 999px; background: var(--cf-orange);
}
.cf-meter-fill.warn { background: var(--warn, #C2913A); }
.cf-meter-t { font-size: 11px; color: var(--text-2, #647079); margin-top: 6px; }

.cf-greet {
  margin-top: 10px; padding: 8px 10px; border-radius: 6px;
  background: rgba(243, 128, 32, .07);
  font-size: 12px; line-height: 1.7; font-style: italic; color: var(--text, #2A3138);
}

/* ---------- 频道条 ---------- */
.cf-tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  background: var(--surface, #FFFDFB); border-bottom: 1px solid var(--cf-line);
  padding: 0 8px;
}
.cf-tabs::-webkit-scrollbar { display: none; }
.cf-tab {
  flex: none; display: flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 10px 12px 9px; font-size: 12.5px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text-2, #647079); cursor: pointer;
  transition: transform .15s ease, color .15s ease, border-color .15s ease;
}
.cf-tab svg { opacity: .8; }
.cf-tab:hover { color: var(--text, #2A3138); }
.cf-tab:active { transform: scale(.96); }
.cf-tab:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: -2px; }
.cf-tab.on {
  color: var(--cf-orange-d); font-weight: 600; border-bottom-color: var(--cf-orange);
}

/* ---------- 面板 ---------- */
.cf-pane { background: var(--cf-bg); padding: 12px 12px 16px; }
.cf-pane.off { display: none; }
.cf-h2 { font-size: 15.5px; font-weight: 600; margin: 6px 4px 4px; color: var(--text, #2A3138); }
.cf-lead { font-size: 11.5px; line-height: 1.7; color: var(--text-2, #647079); margin: 0 4px 10px; }

/* ---------- 白卡片 ---------- */
.cf-card {
  background: var(--surface, #FFFDFB); border: 1px solid var(--cf-line);
  border-radius: 8px; padding: 12px 13px; margin-bottom: 10px;
}
.cf-card-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.cf-card-t { font-size: 13.5px; font-weight: 600; margin: 0; color: var(--text, #2A3138); }
.cf-card-s { font-size: 11px; color: var(--text-2, #647079); }
.cf-card-a { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.cf-card-a.wrap { flex-wrap: wrap; justify-content: flex-start; }

.cf-kv {
  display: flex; align-items: baseline; gap: 10px; padding: 6px 0;
  border-bottom: 1px dashed rgba(128, 128, 128, .18);
}
.cf-kv:last-child { border-bottom: 0; }
.cf-k { flex: none; width: 74px; font-size: 11.5px; color: var(--text-2, #647079); }
.cf-v { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text, #2A3138); word-break: break-all; }
.cf-v.mono { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }
.cf-kv.total .cf-v { font-size: 15px; font-weight: 700; color: var(--cf-orange-d); }

.cf-empty-in {
  padding: 14px 10px; text-align: center; font-size: 12px; line-height: 1.7;
  color: var(--text-2, #647079);
}
.cf-foot-note {
  font-size: 11px; line-height: 1.7; color: var(--text-2, #647079);
  margin: 4px 4px 0; opacity: .85;
}

/* ---------- 胶囊 / 标签 ---------- */
.cf-pill {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  white-space: nowrap; line-height: 1.5;
}
.cf-pill.ok { background: rgba(88, 135, 106, .14); color: var(--ok, #58876A); }
.cf-pill.warn { background: rgba(194, 145, 58, .16); color: var(--warn, #C2913A); }
.cf-pill.bad { background: rgba(178, 68, 60, .13); color: #B2443C; }
.cf-pill.idle { background: rgba(128, 128, 128, .13); color: var(--text-2, #647079); }
.cf-tag {
  font-style: normal; font-size: 9.5px; font-weight: 600; margin-left: 6px;
  padding: 1px 5px; border-radius: 3px; background: rgba(243, 128, 32, .14);
  color: var(--cf-orange-d); white-space: nowrap;
}

.cf-banner {
  display: flex; align-items: flex-start; gap: 7px; padding: 9px 10px;
  border-radius: 6px; font-size: 11.5px; line-height: 1.65; margin-bottom: 10px;
}
.cf-banner svg { flex: none; margin-top: 2px; }
.cf-banner.warn { background: rgba(194, 145, 58, .12); color: var(--warn, #C2913A); }

/* ---------- DNS 记录表 ---------- */
.cf-rec {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 46px;
  grid-template-areas: "ty name del" "ty val ttl";
  gap: 3px 8px; align-items: center; padding: 9px 0;
  border-bottom: 1px solid rgba(128, 128, 128, .15);
}
.cf-rec:last-child { border-bottom: 0; }
.cf-rec-type {
  grid-area: ty; align-self: center; text-align: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  background: rgba(128, 128, 128, .13); color: var(--text-2, #647079);
  border-radius: 4px; padding: 4px 0;
}
.cf-rec-name { grid-area: name; font-size: 12.5px; color: var(--text, #2A3138); word-break: break-all; }
.cf-rec-val {
  grid-area: val; font-size: 11.5px; color: var(--text, #2A3138); word-break: break-all;
  font-family: var(--mono, ui-monospace, monospace); opacity: .9;
}
.cf-rec-ttl { grid-area: ttl; font-size: 10px; color: var(--text-2, #647079); text-align: right; }

/* ---------- 表单 ---------- */
.cf-field { padding: 5px 0; }
.cf-fl { display: block; font-size: 11.5px; color: var(--text-2, #647079); margin-bottom: 4px; }
.cf-fw { display: flex; align-items: center; gap: 6px; }
.cf-ft { font-size: 11.5px; color: var(--text-2, #647079); flex: none; }
.cf-in {
  flex: 1; min-width: 0; box-sizing: border-box; padding: 8px 10px;
  font-size: 13px; color: var(--text, #2A3138);
  background: var(--surface, #FFFDFB); border: 1px solid var(--divider, #E6E4DF);
  border-radius: 6px; outline: none;
}
.cf-in::placeholder { color: var(--text-2, #647079); opacity: .55; }
.cf-in:focus { border-color: var(--cf-orange); }
.cf-in.big { font-size: 15px; padding: 10px 12px; }
select.cf-in { flex: none; min-width: 96px; }

.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-chip {
  font-size: 12px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  background: var(--surface, #FFFDFB); border: 1px solid var(--divider, #E6E4DF);
  color: var(--text, #2A3138);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.cf-chip:hover { opacity: .85; }
.cf-chip:active { transform: scale(.96); }
.cf-chip:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 2px; }
.cf-chip.on {
  background: var(--cf-orange); border-color: var(--cf-orange);
  color: #FFFDFB; font-weight: 600;
}

/* 自己的机器：点一下把 IP 填进目标框 */
.cf-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cf-pick-t { font-size: 11.5px; color: var(--text-2, #647079); }
.cf-pick-i {
  display: flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: 11.5px; padding: 5px 9px; border-radius: 5px;
  background: rgba(128, 128, 128, .09); border: 1px solid var(--divider, #E6E4DF);
  color: var(--text, #2A3138);
  transition: transform .12s ease, background .12s ease;
}
.cf-pick-i svg { opacity: .7; }
.cf-pick-i:hover { background: rgba(243, 128, 32, .1); }
.cf-pick-i:active { transform: scale(.96); }
.cf-pick-i:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 1px; }

/* ---------- 注册：搜索 + 后缀结果 ---------- */
.cf-regbar { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.cf-regbar .cf-btn.pri { flex: none; padding: 10px 14px; }
.cf-tld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cf-tld-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "n a" "s p"; gap: 2px 8px; align-items: center;
  text-align: left; padding: 9px 11px; border-radius: 7px; cursor: pointer;
  background: var(--surface, #FFFDFB); border: 1px solid var(--cf-line);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.cf-tld-row b { font-weight: 600; }
.cf-tld-row:hover { border-color: var(--cf-orange); }
.cf-tld-row:active { transform: scale(.99); }
.cf-tld-row:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 1px; }
.cf-tld-row.on {
  border-color: var(--cf-orange); box-shadow: inset 3px 0 0 var(--cf-orange);
  background: rgba(243, 128, 32, .05);
}
.cf-tld-row.taken { opacity: .55; cursor: not-allowed; }
.cf-tld-row.taken:hover { border-color: var(--cf-line); }
.cf-tld-n { grid-area: n; font-size: 13px; color: var(--text, #2A3138); }
.cf-tld-s { grid-area: s; font-size: 11px; color: var(--text-2, #647079); }
.cf-tld-p { grid-area: p; font-size: 11.5px; color: var(--text-2, #647079); text-align: right; }
.cf-tld-a { grid-area: a; }

.cf-buy { display: flex; flex-direction: column; }
.cf-plan { display: flex; flex-direction: column; }

/* ---------- 价目表 ---------- */
.cf-thead.price, .cf-tline {
  display: grid; grid-template-columns: minmax(0, 1fr) 54px 54px 54px;
  align-items: center; gap: 4px 6px;
}
.cf-thead.price {
  padding-bottom: 7px; border-bottom: 1px solid var(--cf-line);
  font-size: 10.5px; color: var(--text-2, #647079); text-align: right;
}
.cf-thead.price span:first-child { text-align: left; }
.cf-tline { padding: 8px 0; border-bottom: 1px dashed rgba(128, 128, 128, .17); }
.cf-tline:last-child { border-bottom: 0; }
.cf-tline span { font-size: 12px; text-align: right; color: var(--text, #2A3138); }
.cf-tline-n { text-align: left !important; }
.cf-tline-n b { font-weight: 600; }
.cf-tline-d {
  grid-column: 1 / -1; text-align: left !important;
  font-size: 10.5px; color: var(--text-2, #647079); opacity: .85;
}

/* ---------- 帮助步骤 / 动态 ---------- */
.cf-step { display: flex; gap: 9px; padding: 7px 0; }
.cf-step-n {
  flex: none; width: 19px; height: 19px; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: #FFFDFB; background: var(--cf-orange);
}
.cf-step-m { min-width: 0; }
.cf-step-t { font-size: 12.5px; font-weight: 600; color: var(--text, #2A3138); }
.cf-step-d { font-size: 11.5px; line-height: 1.7; color: var(--text-2, #647079); margin-top: 2px; }

.cf-log { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px dashed rgba(128, 128, 128, .17); }
.cf-log:last-child { border-bottom: 0; }
.cf-log-d { flex: none; font-size: 10.5px; color: var(--text-2, #647079); width: 44px; }
.cf-log-t { font-size: 11.5px; line-height: 1.6; color: var(--text, #2A3138); }

/* ---------- 按钮 ---------- */
.cf-btn {
  font-size: 12.5px; font-weight: 600; padding: 8px 16px; border-radius: 6px;
  border: 1px solid var(--divider, #E6E4DF); background: var(--surface, #FFFDFB);
  color: var(--text, #2A3138); cursor: pointer; letter-spacing: .2px;
  transition: transform .14s ease, opacity .14s ease, background .14s ease, border-color .14s ease;
}
.cf-btn:hover { border-color: var(--cf-orange); color: var(--cf-orange-d); }
.cf-btn:active { transform: scale(.97); }
.cf-btn:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 2px; }
.cf-btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.cf-btn:disabled:hover { border-color: var(--divider, #E6E4DF); color: var(--text, #2A3138); }
.cf-btn.pri {
  background: var(--cf-orange); border-color: var(--cf-orange); color: #FFFDFB;
}
.cf-btn.pri:hover { background: var(--cf-orange-d); border-color: var(--cf-orange-d); color: #FFFDFB; }
.cf-btn.wide { width: 100%; padding: 10px 16px; }

.cf-del {
  grid-area: del; justify-self: end; width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: 1px solid var(--divider, #E6E4DF);
  border-radius: 5px; color: var(--text-2, #647079);
  transition: transform .12s ease, opacity .12s ease, border-color .12s ease, color .12s ease;
}
.cf-del:hover { border-color: #B2443C; color: #B2443C; }
.cf-del:active { transform: scale(.93); }
.cf-del:focus-visible { outline: 2px solid var(--cf-orange); outline-offset: 1px; }

.cf-msg { font-size: 11.5px; line-height: 1.6; color: var(--text-2, #647079); margin: 2px 0 0; min-height: 16px; }
.cf-err { color: #B2443C; font-weight: 600; }

/* ============================================================
 * 极窄屏回落：表头和无关紧要的信息让位给内容本身
 * ============================================================ */
@media (max-width: 380px) {
  .cf-rec { grid-template-columns: 38px minmax(0, 1fr) 40px; }
  .cf-k { width: 62px; }
  .cf-tld-row { grid-template-areas: "n a" "s s" "p p"; }
  .cf-tld-p { text-align: left; }
}

/* ============================================================
 * 骨架 5 · mega-cloud（巨擎云）—— 大厂融合：橙主色 + 大留白 + 卡片矩阵
 *
 *   气质是"阿里 + 腾讯那种官网"：橙，白得发亮，圆角大，
 *   首屏空得很贵，下面立刻甩一张实例规格对比表砸你脸上。
 * ============================================================ */
.sv-nav.mega {
  background: #FFFFFF; color: #3A2410;
  border-bottom: 3px solid #FF6A00;
  padding: 12px 16px;
}
.sv-nav.mega .sv-mark { background: #FF6A00; border-radius: 8px; }
.sv-nav.mega .sv-logo { font-weight: 700; letter-spacing: .2px; }
.sv-nav.mega .sv-sbox { background: #FFF4EC; border: 1px solid #FFD9BF; }

/* 促销横条：细长、橙底、居中，带"立刻抢购"的催感 */
.sv-promo {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px 16px; text-align: center;
  background: linear-gradient(90deg, #FF6A00 0%, #FF8A2B 100%);
  color: #FFFFFF; font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
}

.sv-hero.mega {
  background: linear-gradient(180deg, #FFF9F4 0%, #FFFFFF 100%);
  color: #2B1A0B;
  padding: 52px 22px 40px; text-align: center;
}
.sv-hero.mega .sv-hero-t { font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: -.2px; }
.sv-hero.mega .sv-hero-s { font-size: 14px; color: #7A6250; margin-top: 14px; }
.sv-hero.mega .sv-hero-b { justify-content: center; margin-top: 24px; }
.sv-hero.mega .sv-hero-cta {
  background: #FF6A00; padding: 12px 32px; font-size: 14.5px; border-radius: 10px;
  box-shadow: 0 8px 20px rgba(255, 106, 0, .26);
}
.sv-hero.mega .sv-hero-cta2 { color: #FF6A00; border-color: #FFC79E; border-radius: 10px; }

/* 参数对比表的外框。表格本体（.sv-cmp-tb 等）在 sites-skins.css 组 2 —— */
.sv-cmp {
  margin: 0 12px; border: 1px solid #F0DCCB; border-radius: 12px; overflow: hidden;
}

.sv-nav.mega ~ .sv-sec-h { border-color: #FF6A00; color: #C24F00; }
.sv-nav.mega ~ .sv-price .sv-pi { border: 1px solid #F5E2D4; border-radius: 12px; }
.sv-nav.mega ~ .sv-price .sv-pi-p { color: #FF6A00; }
.sv-nav.mega ~ .sv-price .sv-btn-pri { background: #FF6A00; }
.sv-nav.mega ~ .sv-greet { background: #FFF6EF; }

/* ============================================================
 * 骨架 6 · mini-lite（轻云小站）—— 小而美，但透着穷
 *
 *   粉红主色，圆角只给 4px，padding 抠，字号偏小。
 *   下面还要挂一条风险提示 —— 便宜是有理由的。
 * ============================================================ */
.sv-nav.mini {
  background: #FFF7FA; color: #5A2440;
  border-bottom: 2px solid #D6336C;
  padding: 8px 11px;
}
.sv-nav.mini .sv-mark { background: #D6336C; border-radius: 4px; }
.sv-nav.mini .sv-logo { font-size: 13.5px; }
.sv-nav.mini .sv-sbox { background: #FFFFFF; border: 1px solid #F5CBDA; }

.sv-hero.mini {
  background: #FFFFFF; color: #3C1628;
  padding: 24px 14px 18px; border-radius: 4px;
}
.sv-hero.mini .sv-hero-t { font-size: 18px; }
.sv-hero.mini .sv-hero-s { font-size: 12px; line-height: 1.6; margin-top: 8px; }
.sv-hero.mini .sv-hero-b { margin-top: 14px; gap: 8px; }
.sv-hero.mini .sv-hero-cta {
  background: #D6336C; border-radius: 4px; padding: 8px 18px; font-size: 12.5px;
}
.sv-hero.mini .sv-hero-cta2 { border-radius: 4px; color: #D6336C; }

.sv-nav.mini ~ .sv-sec-h { border-color: #D6336C; color: #B02A58; }
.sv-nav.mini ~ .sv-price .sv-pi { border-radius: 4px; padding: 11px 12px; }
.sv-nav.mini ~ .sv-price .sv-pi-p { color: #D6336C; }
.sv-nav.mini ~ .sv-price .sv-btn-pri { background: #D6336C; border-radius: 4px; }
.sv-nav.mini ~ .sv-greet { background: #FFF2F7; border-radius: 4px; }

/* 下单前须知：浅红底 + 橙红字 + 左侧竖线。
 * 0.3.13 起条内文案改为客观条款摘要（机房位置 / 支持渠道 / 可用性承诺 /
 * 数据备份），不再是"风险提示"口吻；容器类名沿用未改。 */
.sv-risk-note {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 12px 14px 0; padding: 9px 12px;
  background: #FFF1EC; color: #C2431F; font-size: 11.5px; line-height: 1.65;
  border-left: 3px solid #E8552A; border-radius: 0 4px 4px 0;
}
.sv-risk-note::before {
  content: '!'; flex: none; width: 15px; height: 15px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; color: #FFFFFF; background: #E8552A;
  border-radius: 50%;
}

/* ============================================================
 * 骨架 7 · mini-wild（野贝云）—— 更野：紫主色 + 暗调
 *
 *   开张没多久的新站，配色比同行更冲，事实卡直列公开信息：
 *   成立时间、机房位置、备案号、支持渠道。
 * ============================================================ */
.sv-nav.wild {
  background: #241C3E; color: #E9E4FF;
  border-bottom: 2px solid #6D4AFF;
  padding: 9px 12px;
}
.sv-nav.wild .sv-mark { background: #6D4AFF; border-radius: 7px; }
.sv-nav.wild .sv-sbox { background: rgba(255, 255, 255, .1); }

.sv-hero.wild {
  background: linear-gradient(150deg, #2A2049 0%, #3B2C6E 100%);
  color: #F1EDFF; padding: 32px 18px 26px;
}
.sv-hero.wild .sv-hero-t { font-size: 23px; }
.sv-hero.wild .sv-hero-s { color: #C7BEEB; }
.sv-hero.wild .sv-hero-cta { background: #6D4AFF; border-radius: 7px; }
.sv-hero.wild .sv-hero-cta2 { color: #C0B2FF; border-color: #6D4AFF; border-radius: 7px; }

.sv-nav.wild ~ .sv-sec-h { border-color: #6D4AFF; color: #5A38E0; }
.sv-nav.wild ~ .sv-price .sv-pi { border: 1px solid #DED7FF; border-radius: 8px; }
.sv-nav.wild ~ .sv-price .sv-pi-p { color: #6D4AFF; }
.sv-nav.wild ~ .sv-price .sv-btn-pri { background: #6D4AFF; }
.sv-nav.wild ~ .sv-greet { background: #F3F0FF; }

/*
 * 事实清单容器：成立时间 / 跑路迹象 / 团队规模 …（现在是 7 格）
 *
 * ★ 这里的布局只管**基础视觉**，真正的排布在 sites-skins-b.css 组 K：
 *   那份用 grid + auto-fit 覆盖了这里的 flex —— 最初这里是 2 格并排（flex:1），
 *   —— 最初这里是 2 格并排（flex:1），扩到 7 格后每格不足 56px，
 *      数值纵向断行、卡片拉成签子。基础值里的 padding / 背景 / 边框
 *      仍然生效，所以那些不能删。
 * ★ 卡片的键 / 值 / 说明用 .sv-wild-k / -v / -d（见 sites-skins.css 组 5），
 *   不是这里的 .sv-wild-card-t / -v / -s —— 后者是 2 格时代的旧命名。
 */
.sv-wild-meta {
  display: flex; gap: 10px; margin: 14px 16px 0;
}
.sv-wild-card {
  flex: 1; min-width: 0; padding: 12px 13px;
  background: #F5F2FF; border: 1px solid #E0D9FF; border-radius: 8px;
}

/* ============================================================
 * 三家新厂商的窄屏回落
 * ============================================================ */
@media (max-width: 380px) {
  .sv-hero.mega { padding: 38px 16px 30px; }
  .sv-hero.mega .sv-hero-t { font-size: 25px; }
}