/* CUBECLOUD theme — generated by scripts/build-css.sh from css/src/. Do not edit. */
/* base.css — 全局基础：字体、排版、链接、焦点、通用工具类。依赖 tokens.css。
 * twenty-one 的 theme.min.css 先加载，这里只覆盖到风格 5，不重写 Bootstrap 栅格。 */
html { -webkit-text-size-adjust: 100%; }
body.cc-body { margin: 0; background: var(--cc-bg); color: var(--cc-ink); font: var(--cc-t-body)/1.7 var(--cc-font); -webkit-font-smoothing: antialiased; }
.cc-body h1, .cc-body h2, .cc-body h3, .cc-body h4, .cc-body h5, .cc-body h6,
.cc-body .h1, .cc-body .h2, .cc-body .h3, .cc-body .h4, .cc-body .h5, .cc-body .h6 { font-family: var(--cc-font); color: var(--cc-ink); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
.cc-body h1, .cc-body .h1 { font-size: var(--cc-t-h1); }
.cc-body h2, .cc-body .h2 { font-size: clamp(22px, 2.2vw, 30px); }
.cc-body h3, .cc-body .h3 { font-size: var(--cc-t-h3); }
.cc-body h4, .cc-body .h4 { font-size: 17px; }
.cc-body h5, .cc-body .h5, .cc-body h6, .cc-body .h6 { font-size: 15px; }
.cc-body p { text-wrap: pretty; }
.cc-body a { color: var(--cc-accent-ink); }
.cc-body a:hover { color: var(--cc-ink); text-decoration: none; }
.cc-body small, .cc-body .small, .cc-body .text-muted { color: var(--cc-muted) !important; }
.cc-body hr { border-top-color: var(--cc-line); }
.cc-body code, .cc-body pre, .cc-body kbd, .cc-mono { font-family: var(--cc-font-mono); }
.cc-body code { color: var(--cc-ink); background: var(--cc-surface-2); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
.cc-body pre { background: var(--cc-dark); color: #dbe2f7; border-radius: var(--cc-r-2); padding: 16px 20px; }
.cc-body pre code { background: none; color: inherit; padding: 0; }
.cc-body :focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.cc-body .tabular, .cc-body .price, .cc-body td, .cc-body .stat { font-variant-numeric: tabular-nums; }
.cc-body ::selection { background: var(--cc-accent-soft); color: var(--cc-ink); }

/* Bootstrap 主色映射到令牌（twenty-one 大量使用这些工具类） */
.cc-body .text-primary { color: var(--cc-accent-ink) !important; }
.cc-body .text-success { color: var(--cc-ok) !important; }
.cc-body .text-warning { color: var(--cc-warn) !important; }
.cc-body .text-danger { color: var(--cc-danger) !important; }
.cc-body .text-info { color: var(--cc-accent-ink) !important; }
.cc-body .bg-primary { background-color: var(--cc-dark) !important; }
.cc-body .bg-light, .cc-body .bg-white { background-color: var(--cc-surface) !important; }
.cc-body .bg-color-blue { background-color: var(--cc-accent) !important; }
.cc-body .bg-color-green { background-color: var(--cc-ok) !important; }
.cc-body .bg-color-red { background-color: var(--cc-danger) !important; }
.cc-body .bg-color-gold { background-color: var(--cc-sun) !important; }
.cc-body .border, .cc-body .border-top, .cc-body .border-bottom { border-color: var(--cc-line) !important; }

/* 工具 */
.cc-wrap { width: min(100% - 48px, var(--cc-wrap)); margin-inline: auto; }
.cc-sr, .cc-body .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cc-skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--cc-dark); color: #fff !important; font-weight: 700; }
.cc-skip:focus { top: 12px; }
.cc-eyebrow { font: 700 13px/1 var(--cc-font); letter-spacing: .08em; text-transform: uppercase; color: var(--cc-accent-ink); margin: 0 0 14px; }
.cc-link { color: var(--cc-ink-2) !important; font-weight: 600; text-decoration: none; }
.cc-link:hover { color: var(--cc-accent-ink) !important; }
.w-hidden { display: none; }

@media (max-width: 640px) {
  .cc-wrap { width: min(100% - 32px, var(--cc-wrap)); }
}
@media (prefers-reduced-motion: reduce) {
  .cc-body *, .cc-body *::before, .cc-body *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* layout.css — 顶栏、窄屏菜单、页头、主体（侧栏 + 内容）、页脚、合作伙伴墙。 */

/* ---------- 顶栏 ---------- */
.cc-top { position: sticky; top: 0; z-index: 1030; background: rgba(246, 248, 252, .86); border-bottom: 1px solid var(--cc-line);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.cc-tpl-homepage .cc-top { border-color: transparent; background: rgba(246, 248, 252, .72); }
.cc-tpl-homepage .cc-top.is-scrolled { border-color: var(--cc-line); background: rgba(246, 248, 252, .92); }
.cc-top__in { display: flex; align-items: center; gap: 40px; height: 68px; }
.cc-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--cc-dark) !important; flex: none; }
.cc-brand__mark { width: 24px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.cc-brand__word { font-weight: 600; letter-spacing: .16em; font-size: 16px; }
.cc-brand__img { max-height: 32px; width: auto; }
.cc-brand__img--inv { filter: brightness(0) invert(1); } /* 未上传深色版：深色背景上显示白色剪影 */
.cc-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; min-width: 0; }
.cc-nav > a { text-decoration: none; color: var(--cc-ink-2); padding: 6px 0; white-space: nowrap; }
.cc-nav > a:hover { color: var(--cc-accent-ink); }
.cc-nav > a[aria-current="page"] { color: var(--cc-dark); box-shadow: inset 0 -2px 0 var(--cc-sun); }
/* 登录后：WHMCS 自带主菜单（保留第三方钩子加的项） */
.cc-nav__whmcs { display: flex; flex-direction: row; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.cc-nav__whmcs > li > a, .cc-account > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0 !important; color: var(--cc-ink-2) !important; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cc-nav__whmcs > li > a:hover, .cc-account > li > a:hover { color: var(--cc-accent-ink) !important; }
.cc-nav__whmcs > li.active > a { color: var(--cc-dark) !important; box-shadow: inset 0 -2px 0 var(--cc-sun); }
.cc-nav__whmcs .collapsable-dropdown { display: none !important; }
.cc-top .dropdown-menu { margin-top: 10px; padding: 8px; border: 0; border-radius: var(--cc-r-2); box-shadow: var(--cc-shadow-2); min-width: 220px; }
.cc-top .dropdown-menu li.dropdown-item { padding: 0; background: none; }
.cc-top .dropdown-menu a.dropdown-item { display: block; padding: 8px 12px !important; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--cc-ink-2); }
.cc-top .dropdown-menu a.dropdown-item:hover { background: var(--cc-surface-2); color: var(--cc-dark); }
.cc-top .dropdown-divider { border-color: var(--cc-line); margin: 6px 4px; }
.cc-top__side { margin-left: auto; flex: none; display: flex; align-items: center; gap: 14px; font-size: 14px; white-space: nowrap; }
.cc-brand { flex: none; } .cc-nav { flex: 0 1 auto; overflow: hidden; }
/* 顶部两级菜单（插件“顶部菜单”）：不能裁切，否则下拉面板被藏住；放不下时由 cc.js 切菜单按钮 */
.cc-nav { overflow: visible; }
.cc-nav__dd { position: relative; }
.cc-nav__top { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; font: inherit; color: var(--cc-ink-2); white-space: nowrap; cursor: pointer; }
.cc-nav__top:hover, .cc-nav__dd.is-open .cc-nav__top { color: var(--cc-accent-ink); }
.cc-nav__top.is-on { color: var(--cc-dark); box-shadow: inset 0 -2px 0 var(--cc-sun); }
.cc-nav__car { width: 6px; height: 6px; margin-top: -3px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .18s; }
.cc-nav__dd.is-open .cc-nav__car { transform: translateY(3px) rotate(-135deg); }
.cc-nav__menu { position: absolute; left: -14px; top: 100%; min-width: 220px; margin-top: 10px; padding: 8px; border-radius: var(--cc-r-2); background: #fff; box-shadow: var(--cc-shadow-2); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s, transform .16s, visibility 0s .16s; z-index: 1040; }
.cc-nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.cc-nav__dd.is-open .cc-nav__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .16s; }
.cc-nav__menu a { display: block; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--cc-ink-2); text-decoration: none; white-space: nowrap; }
.cc-nav__menu a:hover, .cc-nav__menu a:focus-visible { background: var(--cc-surface-2); color: var(--cc-dark); }
.cc-nav__menu a[aria-current="page"] { color: var(--cc-accent-ink); }
.cc-nav__menu .cc-nav__all { border-bottom: 1px solid var(--cc-line); border-radius: 10px 10px 0 0; margin-bottom: 4px; }
.cc-mnav__grp { display: contents; }
.cc-mnav__grp > b { grid-column: 1 / -1; padding: 14px 0 2px; font-size: 12px; font-weight: 700; color: var(--cc-muted); letter-spacing: .04em; }
.cc-account { display: flex; margin: 0; padding: 0; list-style: none; min-width: 0; }
.cc-account > li > a { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
/* 其他插件挂在顶栏的链接（如 sms_center 的短信登录入口）不进顶栏 */
.cc-top .smsc-entry { display: none; }
.cc-pick select { appearance: none; -webkit-appearance: none; border: 0; background-color: transparent; font: 600 13px var(--cc-font); color: var(--cc-muted); padding: 4px 14px 4px 2px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--cc-muted) 50%), linear-gradient(135deg, var(--cc-muted) 50%, transparent 50%);
  background-position: right 4px top 52%, right 0 top 52%; background-size: 4px 4px; background-repeat: no-repeat; max-width: 140px; field-sizing: content; }
.cc-pick select option { color: var(--cc-ink); }
.cc-pick select:hover { color: var(--cc-ink); }
.cc-icon-btn { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--cc-ink-2) !important; cursor: pointer; }
.cc-icon-btn:hover { background: var(--cc-surface-2); color: var(--cc-dark) !important; }
.cc-count { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--cc-dark); color: #fff; font: 700 10px/17px var(--cc-font); text-align: center; }
.cc-count.is-zero { display: none; }
.cc-count--warn { background: var(--cc-sun); color: var(--cc-dark); }
.cc-menu-btn { display: none; }
.cc-mnav { display: none; }

/* ---------- 页头（内页） ---------- */
.cc-phead { position: relative; border-bottom: 1px solid var(--cc-line); background:
  radial-gradient(60% 140% at 100% 0%, rgba(42, 92, 255, .09), transparent 60%),
  radial-gradient(40% 120% at 85% 100%, rgba(245, 165, 36, .08), transparent 60%), var(--cc-bg); }
.cc-phead__in { padding: 28px 0 32px; }
.cc-phead__title { margin: 10px 0 0; font-size: clamp(26px, 2.8vw, 36px) !important; }
.cc-phead__lead { margin: 8px 0 0; max-width: 46em; color: var(--cc-ink-2); font-size: 16px; }
.cc-crumb .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0; padding: 0; background: none; font-size: 13px; }
.cc-crumb .breadcrumb-item { color: var(--cc-muted); }
.cc-crumb .breadcrumb-item a { color: var(--cc-muted); text-decoration: none; }
.cc-crumb .breadcrumb-item a:hover { color: var(--cc-accent-ink); }
.cc-crumb .breadcrumb-item.active { color: var(--cc-ink); font-weight: 700; }
.cc-crumb .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--cc-line-2); padding: 0 8px; }

/* ---------- 主体 ---------- */
.cc-main { padding: 40px 0 96px; }
.cc-tpl-homepage .cc-main { padding: 0; }
.cc-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
.cc-layout__side { position: sticky; top: 92px; }
.cc-layout__body { min-width: 0; }
.cc-main .primary-content > h1:first-child, .cc-main .primary-content > .header-lined:first-child { display: none; } /* 标题已在页头 */

/* ---------- 页脚 ---------- */
.cc-foot { background: var(--cc-dark); color: var(--cc-dark-muted); font-size: 14px; overflow: hidden; }
.cc-foot a { color: var(--cc-dark-muted); text-decoration: none; }
.cc-foot a:hover { color: #fff; }
.cc-foot__cta { position: relative; isolation: isolate; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cc-foot__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .75; }
.cc-foot__cta-in { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 72px 0; }
.cc-foot__cta h2 { color: #fff !important; font-size: clamp(24px, 2.6vw, 36px); margin: 0; }
.cc-foot__cta p { margin: 10px 0 0; max-width: 40em; color: #b8c1df; }
.cc-foot__btns { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }
.cc-foot__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; padding: 64px 0 24px; }
.cc-foot .cc-brand { color: #fff !important; }
.cc-foot__brand p { margin: 16px 0 0; line-height: 1.8; max-width: 22em; }
.cc-foot__badges { list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 8px; }
.cc-foot__badges li { font: 600 11px var(--cc-font); padding: 5px 9px; border-radius: 7px; color: #dbe2f7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); font-variant-numeric: tabular-nums; }
.cc-foot nav { display: flex; flex-direction: column; gap: 10px; }
.cc-foot h3 { font-size: 13px !important; color: #fff !important; font-weight: 700; margin: 0 0 4px; letter-spacing: 0; }
.cc-foot__word { font: 800 clamp(48px, 14.6vw, 216px)/.82 var(--cc-font); letter-spacing: -.055em; text-align: center; margin-top: 36px; padding-bottom: .16em; white-space: nowrap; color: transparent; user-select: none;
  background: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)), var(--cc-spec); background-repeat: no-repeat; background-size: 100% 100%, 0% 100%;
  -webkit-background-clip: text; background-clip: text; transition: background-size 1.8s var(--cc-ease); }
.cc-foot__word.in { background-size: 100% 100%, 100% 100%; }
.cc-foot__base { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0 28px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12px; }
.cc-foot .list-inline-item a, .cc-foot .social-accounts a { color: var(--cc-dark-muted); }

/* ---------- 合作伙伴墙 ---------- */
.cc-partners { padding: 104px 0; text-align: center; overflow: hidden; background: var(--cc-surface-2); }
.cc-partners h2 { font-size: var(--cc-t-h2) !important; margin: 0 0 52px; }
.cc-wall { display: grid; gap: 34px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cc-wall__row { overflow: hidden; }
.cc-wall__track { display: flex; width: max-content; animation: cc-wall 60s linear infinite; }
.cc-wall__row--rev .cc-wall__track { animation-direction: reverse; animation-duration: 72s; }
.cc-wall__dup { display: flex; }
.cc-wall__i { display: inline-flex; align-items: center; height: 56px; padding: 0 38px; color: var(--cc-dark); opacity: .55; transition: opacity .25s, color .25s; white-space: nowrap; }
.cc-wall__i:hover { opacity: 1; color: var(--cc-accent-ink); }
.cc-wall:hover .cc-wall__track { animation-play-state: paused; }
@keyframes cc-wall { to { transform: translateX(-50%); } }
.cc-wall__logo { display: block; height: clamp(26px, 2.2vw, 34px); width: auto; max-width: 180px; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .2s, opacity .2s; }
.cc-wall__i:hover .cc-wall__logo { filter: none; opacity: 1; }
.cc-wm { font: 700 clamp(19px, 1.7vw, 26px)/1 var(--cc-font); letter-spacing: -.01em; }
.cc-wm--caps { text-transform: uppercase; letter-spacing: .08em; font-size: clamp(17px, 1.5vw, 23px); }
.cc-wm--wide { text-transform: uppercase; letter-spacing: .24em; }
.cc-wm--bold { font-weight: 800; letter-spacing: -.03em; font-size: clamp(21px, 1.9vw, 29px); }

/* 顶栏比正文宽（1440），间距收紧：英文导航在 1280 以上的屏幕也能完整显示，不再被 cc.js 判为放不下而整排隐藏 */
.cc-top { --cc-wrap: 1440px; }
.cc-top__in { gap: 28px; }
.cc-nav { gap: 22px; }


/* components.css — 风格 5 组件 + twenty-one/Bootstrap 4 组件统一（所有继承页面靠这里统一观感）。 */

/* ---------- 按钮 ---------- */
.cc-btn, .cc-body .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 20px; border-radius: 12px; border: 0;
  font: 700 14px/1 var(--cc-font); letter-spacing: 0; text-decoration: none !important; cursor: pointer; white-space: nowrap;
  transition: background-color var(--cc-dur), color var(--cc-dur), box-shadow var(--cc-dur), transform var(--cc-dur); }
.cc-btn:hover, .cc-body .btn:hover { transform: translateY(-1px); }
.cc-btn:active, .cc-body .btn:active { transform: none; }
.cc-btn--sm, .cc-body .btn-sm { min-height: 34px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.cc-body .btn-lg { min-height: 50px; padding: 0 28px; font-size: 16px; }
.cc-body .btn-block { display: flex; width: 100%; }
.cc-body .btn-xs { min-height: 26px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
/* 转化：橘黄 + 深蓝字（注册、下单、付款、继续结账） */
.cc-btn--sun, .cc-body .btn-success, .cc-body .btn-order-now, .cc-body #btnCompleteOrder, .cc-body #checkout, .cc-body .btn-checkout {
  background: var(--cc-sun) !important; color: var(--cc-dark) !important; box-shadow: 0 8px 20px -10px rgba(245, 165, 36, .9), inset 0 -2px 0 rgba(0, 0, 0, .08) !important; }
.cc-btn--sun:hover, .cc-body .btn-success:hover, .cc-body .btn-order-now:hover { background: var(--cc-sun-2) !important; }
/* 主操作：深海军蓝 */
.cc-btn--ink, .cc-body .btn-primary, .cc-body .btn-info { background: var(--cc-dark) !important; color: #fff !important; box-shadow: none !important; }
.cc-btn--ink:hover, .cc-body .btn-primary:hover, .cc-body .btn-info:hover { background: var(--cc-dark-2) !important; }
/* 次要：细线 */
.cc-btn--line, .cc-body .btn-default, .cc-body .btn-secondary, .cc-body .btn-light, .cc-body .btn-outline-primary, .cc-body .btn-outline-secondary, .cc-body .btn-outline-info {
  background: var(--cc-surface) !important; color: var(--cc-dark) !important; box-shadow: inset 0 0 0 1px var(--cc-line-2) !important; }
.cc-btn--line:hover, .cc-body .btn-default:hover, .cc-body .btn-secondary:hover, .cc-body .btn-light:hover, .cc-body .btn-outline-primary:hover, .cc-body .btn-outline-secondary:hover {
  box-shadow: inset 0 0 0 1px var(--cc-dark) !important; }
.cc-body .btn-danger, .cc-body .btn-outline-danger { background: var(--cc-surface) !important; color: var(--cc-danger) !important; box-shadow: inset 0 0 0 1px rgba(192, 54, 44, .45) !important; }
.cc-body .btn-danger:hover, .cc-body .btn-outline-danger:hover { background: var(--cc-danger-soft) !important; }
.cc-body .btn-warning { background: var(--cc-sun-soft) !important; color: var(--cc-sun-ink) !important; }
.cc-body .btn-link { background: none !important; color: var(--cc-accent-ink) !important; box-shadow: none !important; padding-inline: 4px; }
.cc-btn--glass { background: rgba(255, 255, 255, .08) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25) !important; }
.cc-btn--glass:hover { background: rgba(255, 255, 255, .14) !important; }
.cc-body .btn:disabled, .cc-body .btn.disabled { background: var(--cc-surface-2) !important; color: var(--cc-muted) !important; box-shadow: none !important; transform: none; cursor: not-allowed; opacity: 1; }
.cc-body .btn-group > .btn { border-radius: 0; }
.cc-body .btn-group > .btn:first-child { border-radius: 10px 0 0 10px; }
.cc-body .btn-group > .btn:last-child { border-radius: 0 10px 10px 0; }
.cc-body .btn-group > .btn:only-child { border-radius: 10px; }
.cc-body .btn-group > .btn + .btn { margin-left: -1px; }

/* ---------- 表单 ---------- */
.cc-body .form-control, .cc-body .custom-select, .cc-body select.form-control, .cc-body textarea, .cc-body input[type="text"], .cc-body input[type="email"], .cc-body input[type="password"], .cc-body input[type="tel"], .cc-body input[type="number"], .cc-body input[type="url"], .cc-body input[type="search"] {
  min-height: 44px; border: 1px solid var(--cc-field); border-radius: var(--cc-r-1); background-color: var(--cc-surface); color: var(--cc-ink);
  font: 500 15px/1.4 var(--cc-font); box-shadow: none; transition: border-color var(--cc-dur), box-shadow var(--cc-dur); }
.cc-body textarea, .cc-body textarea.form-control { min-height: 120px; padding: 12px 14px; }
.cc-body .form-control-sm, .cc-body .custom-select-sm { min-height: 36px; font-size: 14px; }
.cc-body .form-control:focus, .cc-body .custom-select:focus, .cc-body textarea:focus, .cc-body input:focus { border-color: var(--cc-accent); box-shadow: 0 0 0 4px rgba(42, 92, 255, .12); outline: 0; }
.cc-body .form-control::placeholder { color: var(--cc-muted); opacity: 1; }
.cc-body .form-control:disabled, .cc-body .form-control[readonly] { background: var(--cc-surface-2); color: var(--cc-ink-2); }
.cc-body .is-invalid, .cc-body .has-error .form-control { border-color: var(--cc-danger) !important; }
.cc-body .invalid-feedback, .cc-body .field-error-msg { color: var(--cc-danger); font-size: 13px; }
.cc-body label, .cc-body .col-form-label, .cc-body .control-label { font-weight: 700; font-size: 14px; color: var(--cc-ink); }
.cc-body .form-text, .cc-body .help-block { color: var(--cc-muted); font-size: 13px; }
.cc-body .input-group-text { background: var(--cc-surface-2); border: 1px solid var(--cc-field); border-radius: var(--cc-r-1); color: var(--cc-ink-2); font-weight: 600; }
.cc-body .input-group > .form-control:not(:last-child), .cc-body .input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cc-body .input-group > .form-control:not(:first-child), .cc-body .input-group > .input-group-append > .btn, .cc-body .input-group > .input-group-append > .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cc-body .input-group > .input-group-append > .btn { min-height: 44px; }
.cc-body .input-group > .input-group-prepend > .btn { min-height: 44px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cc-body .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--cc-dark); border-color: var(--cc-dark); }
.cc-body .custom-control-label::before { border-color: var(--cc-field); }
.cc-body input[type="checkbox"], .cc-body input[type="radio"] { accent-color: var(--cc-dark); }
.cc-body .form-group { margin-bottom: 18px; }
.cc-body fieldset { border: 0; padding: 0; }
.cc-body legend { font-size: 15px; font-weight: 800; }

/* ---------- 卡片 / 面板 ---------- */
.cc-card, .cc-body .card, .cc-body .panel { background: var(--cc-surface); border: 0; border-radius: var(--cc-r-3); box-shadow: var(--cc-shadow-1); }
.cc-body .card + .card { margin-top: 0; }
.cc-body .card-body { padding: 24px 28px; }
.cc-body .card-header, .cc-body .panel-heading { padding: 18px 28px; background: transparent; border-bottom: 1px solid var(--cc-line); border-radius: var(--cc-r-3) var(--cc-r-3) 0 0 !important; }
.cc-body .card-header .card-title, .cc-body .card-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--cc-ink); }
.cc-body .card-footer, .cc-body .panel-footer { padding: 16px 28px; background: var(--cc-surface-2); border-top: 1px solid var(--cc-line); border-radius: 0 0 var(--cc-r-3) var(--cc-r-3) !important; }
.cc-body .card.mw-750, .cc-body .card.mw-540 { margin-inline: auto; }

/* 侧栏卡片（WHMCS 侧栏菜单） */
.cc-body .card-sidebar { border-radius: var(--cc-r-2); margin-bottom: 16px !important; overflow: hidden; }
.cc-body .card-sidebar .card-header { padding: 14px 18px; border-radius: 0 !important; }
.cc-body .card-sidebar .card-title { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--cc-muted); }
.cc-body .card-sidebar .card-title i:not(.card-minimise) { display: none; }
.cc-body .card-sidebar .card-minimise { color: var(--cc-muted); font-size: 11px; }
.cc-body .card-sidebar .list-group-item { padding: 10px 18px; border: 0; font-size: 14px; font-weight: 600; color: var(--cc-ink-2); background: none; }
.cc-body .card-sidebar .list-group-item:hover { background: var(--cc-surface-2); color: var(--cc-dark); }
.cc-body .card-sidebar .list-group-item.active { background: var(--cc-dark); color: #fff; }
.cc-body .card-sidebar .list-group-item.active .badge { background: var(--cc-sun-2); color: var(--cc-dark); }
.cc-body .card-sidebar .card-body { padding: 14px 18px; font-size: 14px; }
.cc-body .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; }
.cc-body .sidebar-menu-item-icon { width: 16px; text-align: center; color: inherit; opacity: .7; }
.cc-body .sidebar-menu-item-badge { margin-left: auto; }

/* ---------- 列表组 ---------- */
.cc-body .list-group-item { border-color: var(--cc-line); color: var(--cc-ink); }
.cc-body .list-group-item-action:hover { background: var(--cc-surface-sel); }
.cc-body .list-group-item.active { background: var(--cc-dark); border-color: var(--cc-dark); }

/* ---------- 标签 ---------- */
.cc-body .badge, .cc-body .label { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; font: 700 11px/1.4 var(--cc-font); letter-spacing: .02em; background: var(--cc-surface-2); color: var(--cc-ink-2); }
.cc-body .badge-info, .cc-body .badge-primary { background: var(--cc-accent-soft); color: var(--cc-accent-ink); }
.cc-body .badge-success, .cc-body .label-success, .cc-body .status-active, .cc-body .status-paid, .cc-body .status-open, .cc-body .status-completed, .cc-body .status-answered { background: var(--cc-ok-soft) !important; color: var(--cc-ok) !important; }
.cc-body .badge-warning, .cc-body .label-warning, .cc-body .status-pending, .cc-body .status-unpaid, .cc-body .status-customer-reply, .cc-body .status-suspended, .cc-body .status-in-progress, .cc-body .status-on-hold { background: var(--cc-sun-soft) !important; color: var(--cc-sun-ink) !important; }
.cc-body .badge-danger, .cc-body .label-danger, .cc-body .status-overdue, .cc-body .status-terminated, .cc-body .status-cancelled, .cc-body .status-fraud, .cc-body .status-expired { background: var(--cc-danger-soft) !important; color: var(--cc-danger) !important; }
.cc-body .badge-secondary, .cc-body .badge-default, .cc-body .status-closed, .cc-body .status-refunded, .cc-body .status-collections { background: var(--cc-surface-2) !important; color: var(--cc-muted) !important; }
.cc-body .label.status { border: 0; }

/* ---------- 提示条 ---------- */
.cc-body .alert { position: relative; border: 0; border-radius: 12px; padding: 14px 18px 14px 22px; font-size: 14px; text-align: left !important; overflow: hidden; }
.cc-body .alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: currentColor; opacity: .75; }
.cc-body .alert-info, .cc-body .alert-primary { background: var(--cc-accent-soft); color: var(--cc-accent-ink); }
.cc-body .alert-success { background: var(--cc-ok-soft); color: var(--cc-ok); }
.cc-body .alert-warning { background: var(--cc-sun-soft); color: var(--cc-sun-ink); }
.cc-body .alert-danger { background: var(--cc-danger-soft); color: var(--cc-danger); }
.cc-body .alert-secondary, .cc-body .alert-light { background: var(--cc-surface-2); color: var(--cc-ink-2); }
.cc-body .alert a, .cc-body .alert .alert-link { color: inherit; text-decoration: underline; font-weight: 700; }
.cc-body .alert ul { margin-bottom: 0; padding-left: 18px; }

/* components2.css — 表格、标签页、分页、模态框、下拉、弹出框、进度条、空状态，以及 twenty-one 专有块。 */

/* ---------- 表格（WHMCS 列表页 DataTables + 普通表格） ---------- */
.cc-body .table { color: var(--cc-ink); margin-bottom: 0; }
.cc-body .table th, .cc-body .table thead th { border: 0; border-bottom: 1px solid var(--cc-line); background: var(--cc-surface-2); color: var(--cc-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 12px 16px; white-space: nowrap; }
.cc-body .table td { border-top: 1px solid var(--cc-line); padding: 14px 16px; vertical-align: middle; font-size: 14px; }
.cc-body .table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.cc-body .table-hover tbody tr:hover, .cc-body .table-list tbody tr:hover { background: var(--cc-surface-sel); }
.cc-body .table-list { border-radius: var(--cc-r-2); overflow: hidden; }
.cc-body .table-container, .cc-body .dataTables_wrapper { background: var(--cc-surface); border-radius: var(--cc-r-3); box-shadow: var(--cc-shadow-1); padding: 8px 0 0; overflow: hidden; }
.cc-body .table-container .table, .cc-body .dataTables_wrapper .table { border-collapse: collapse !important; }
.cc-body .dataTables_wrapper .listtable { margin: 0 !important; }
.cc-body .dataTables_wrapper .dataTables_filter, .cc-body .dataTables_wrapper .dataTables_length, .cc-body .dataTables_wrapper .dataTables_info, .cc-body .dataTables_wrapper .dataTables_paginate { padding: 8px 18px; font-size: 13px; color: var(--cc-muted); }
.cc-body .dataTables_wrapper .dataTables_filter input { min-height: 36px; margin-left: 8px; }
.cc-body .dataTables_wrapper .dataTables_length select { min-height: 32px; width: auto; display: inline-block; }
.cc-body table.dataTable thead .sorting::after, .cc-body table.dataTable thead .sorting_asc::after, .cc-body table.dataTable thead .sorting_desc::after { opacity: .4; }
.cc-body .table .text-right, .cc-body .table .amount, .cc-body .table td.text-center { font-variant-numeric: tabular-nums; }
.cc-body .table-responsive { border-radius: var(--cc-r-2); }

/* ---------- 标签页 / 胶囊 ---------- */
.cc-body .nav-tabs { gap: 4px; padding: 4px; border: 0; border-radius: 12px; background: var(--cc-surface-2); display: inline-flex; flex-wrap: wrap; margin-bottom: 20px; }
.cc-body .nav-tabs .nav-link, .cc-body .nav-tabs > li > a { border: 0 !important; border-radius: 9px; padding: 8px 14px; font-size: 14px; font-weight: 700; color: var(--cc-ink-2); background: none; }
.cc-body .nav-tabs .nav-link:hover { color: var(--cc-dark); }
.cc-body .nav-tabs .nav-link.active, .cc-body .nav-tabs > li.active > a { background: var(--cc-surface) !important; color: var(--cc-dark) !important; box-shadow: 0 0 0 1px var(--cc-line), 0 1px 2px rgba(15, 24, 56, .06); }
.cc-body .nav-pills .nav-link { border-radius: 10px; font-weight: 700; color: var(--cc-ink-2); }
.cc-body .nav-pills .nav-link.active { background: var(--cc-dark); color: #fff; }
.cc-body .tab-content > .tab-pane { padding-top: 4px; }

/* ---------- 分页 ---------- */
.cc-body .pagination { gap: 4px; }
.cc-body .page-link, .cc-body .pagination > li > a { min-width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0 10px; border: 0 !important; border-radius: 10px !important; background: var(--cc-surface); color: var(--cc-ink-2); font-weight: 700; font-size: 13px; box-shadow: inset 0 0 0 1px var(--cc-line); }
.cc-body .page-link:hover { background: var(--cc-surface-2); color: var(--cc-dark); }
.cc-body .page-item.active .page-link, .cc-body .pagination > .active > a { background: var(--cc-dark) !important; color: #fff !important; box-shadow: none; }
.cc-body .page-item.disabled .page-link { color: var(--cc-line-2); background: var(--cc-surface); }

/* ---------- 模态框 ---------- */
.cc-body .modal-backdrop.show { opacity: .4; background: var(--cc-dark); }
.cc-body .modal-content { border: 0; border-radius: var(--cc-r-3); box-shadow: var(--cc-shadow-2); overflow: hidden; }
.cc-body .modal-header { padding: 20px 28px; border-bottom: 1px solid var(--cc-line); background: var(--cc-surface); color: var(--cc-ink); }
.cc-body .modal-header .modal-title { font-size: 18px; font-weight: 800; color: var(--cc-ink); }
.cc-body .modal-header .close { color: var(--cc-muted); text-shadow: none; opacity: 1; }
.cc-body .modal-body { padding: 24px 28px; }
.cc-body .modal-footer { padding: 16px 28px; border-top: 1px solid var(--cc-line); background: var(--cc-surface-2); gap: 8px; }
.cc-body .modal-footer > * { margin: 0; }

/* ---------- 下拉 / 弹出 / 提示 ---------- */
.cc-body .dropdown-menu { border: 0; border-radius: var(--cc-r-2); box-shadow: var(--cc-shadow-2); padding: 8px; font-size: 14px; }
.cc-body .dropdown-item { border-radius: 8px; padding: 8px 12px; color: var(--cc-ink-2); font-weight: 600; }
.cc-body .dropdown-item:hover, .cc-body .dropdown-item:focus { background: var(--cc-surface-2); color: var(--cc-dark); }
.cc-body .dropdown-item.active, .cc-body .dropdown-item:active { background: var(--cc-dark); color: #fff; }
.cc-body .popover { border: 0; border-radius: var(--cc-r-2); box-shadow: var(--cc-shadow-2); font-family: var(--cc-font); max-width: 340px; }
.cc-body .popover-body { padding: 8px; }
.cc-body .client-alerts { list-style: none; margin: 0; padding: 0; }
.cc-body .client-alerts li a { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--cc-ink-2); font-size: 14px; }
.cc-body .client-alerts li a:hover { background: var(--cc-surface-2); }
.cc-body .client-alerts li.none { padding: 10px 12px; color: var(--cc-muted); }
.cc-body .tooltip-inner { background: var(--cc-dark); border-radius: 8px; font: 600 12px/1.4 var(--cc-font); padding: 6px 10px; }

/* ---------- 进度条 ---------- */
.cc-body .progress { height: 8px; border-radius: 999px; background: var(--cc-surface-2); }
.cc-body .progress-bar { background: var(--cc-accent); }
.cc-body .progress-bar.bg-success { background: var(--cc-ok) !important; }
.cc-body .progress-bar.bg-warning { background: var(--cc-sun) !important; }
.cc-body .progress-bar.bg-danger { background: var(--cc-danger) !important; }

/* ---------- twenty-one 专有块 ---------- */
/* 会员中心首页统计磁贴 */
.cc-body .tiles { border-radius: var(--cc-r-3); overflow: hidden; box-shadow: var(--cc-shadow-1); background: var(--cc-surface); }
.cc-body .tiles .tile { display: block; position: relative; padding: 22px 24px; background: var(--cc-surface); border: 0; color: var(--cc-ink); text-decoration: none; }
.cc-body .tiles .col-6 + .col-6 .tile, .cc-body .tiles .col-xl-3 + .col-xl-3 .tile { box-shadow: inset 1px 0 0 var(--cc-line); }
.cc-body .tiles .tile:hover { background: var(--cc-surface-sel); }
.cc-body .tiles .tile i { position: absolute; right: 22px; top: 22px; font-size: 18px; color: var(--cc-line-2); }
.cc-body .tiles .stat { font: 800 32px/1.1 var(--cc-font-num); color: var(--cc-dark); letter-spacing: -.02em; }
.cc-body .tiles .title { font-size: 13px; font-weight: 700; color: var(--cc-muted); text-transform: none; }
.cc-body .tiles .highlight { position: absolute; left: 24px; right: auto; bottom: 12px; width: 24px; height: 3px; border-radius: 3px; }
.cc-body .tiles .row > div:nth-child(n+3) .tile { box-shadow: inset 0 1px 0 var(--cc-line); }
@media (min-width: 1200px) { .cc-body .tiles .row > div:nth-child(n+3) .tile { box-shadow: inset 1px 0 0 var(--cc-line); } }
.cc-body .client-home-cards .card .card-header .card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.cc-body .client-home-cards .card .card-header .card-title > i:first-child { color: var(--cc-muted); font-size: 15px; }
.cc-body .client-home-cards .card .card-header .card-title > .btn, .cc-body .client-home-cards .card .card-header .card-title > .float-right { order: 9; margin-left: auto; float: none !important; }
.cc-body .client-home-cards .card .card-header .card-title > i:first-child { order: 0; }
.cc-body .client-home-cards .card .card-header .card-title { min-height: 34px; }
.cc-body .client-home-cards .card-footer { color: var(--cc-ink-2); }
.cc-body .client-home-cards .card-footer a { font-weight: 700; }
.cc-body .client-home-cards .card-footer:empty, .cc-body .card-footer:empty { display: none; }
.cc-body .client-home-cards .card-footer { font-size: 13px; padding: 12px 28px; }
.cc-body .client-home-cards .list-group-item { padding: 12px 28px; font-size: 14px; }
.cc-body .client-home-cards .list-group-item .label, .cc-body .client-home-cards .list-group-item .badge { margin-left: 8px; }
/* 产品详情 */
.cc-body .product-details .product-icon { background: var(--cc-surface-2); border-radius: var(--cc-r-2); }
.cc-body .product-details .product-status { border-radius: 10px; font-weight: 700; }
.cc-body .product-status-active { background: var(--cc-ok-soft); color: var(--cc-ok); }
.cc-body .product-status-pending, .cc-body .product-status-suspended { background: var(--cc-sun-soft); color: var(--cc-sun-ink); }
.cc-body .product-status-terminated, .cc-body .product-status-cancelled, .cc-body .product-status-fraud { background: var(--cc-danger-soft); color: var(--cc-danger); }
/* 工单回复 */
.cc-body .ticket-reply { border-radius: var(--cc-r-2); box-shadow: var(--cc-shadow-1); background: var(--cc-surface); margin-bottom: 16px; overflow: hidden; }
.cc-body .ticket-reply .posted-by { padding: 12px 20px; background: var(--cc-surface-2); border-bottom: 1px solid var(--cc-line); font-size: 13px; color: var(--cc-muted); }
.cc-body .ticket-reply.staff { box-shadow: inset 4px 0 0 var(--cc-accent), var(--cc-shadow-1); }
.cc-body .ticket-reply .message { padding: 18px 20px; }
/* 知识库 / 公告 / 下载 */
.cc-body .kb-search, .cc-body .announcement-single, .cc-body .kb-article-content { background: var(--cc-surface); border-radius: var(--cc-r-3); box-shadow: var(--cc-shadow-1); padding: 24px 28px; }
.cc-body .kb-article-title, .cc-body .announcement-single h3 { font-weight: 800; }
.cc-body .announcement-single + .announcement-single { margin-top: 16px; }
.cc-body .kb-category, .cc-body .kb-article-item { color: var(--cc-ink); }
/* 发票页（viewinvoice 单独输出，不走 header/footer） */
.cc-body .invoice-container { border-radius: var(--cc-r-3); box-shadow: var(--cc-shadow-1); }
/* 空状态 */
.cc-empty { padding: 48px 24px; text-align: center; color: var(--cc-muted); }
.cc-empty b { display: block; color: var(--cc-ink); font-size: 16px; margin-bottom: 6px; }
/* 返回后台浮钮 */
.cc-body .btn-return-to-admin { position: fixed !important; top: auto !important; right: auto !important; left: 16px; bottom: 16px; z-index: 1040; transform: none !important; min-height: 38px !important; padding: 0 14px !important;
  border-radius: 10px !important; background: var(--cc-dark) !important; color: #fff !important; font-size: 13px !important; box-shadow: var(--cc-shadow-2) !important; width: auto !important; }
/* 全屏加载遮罩 */
.cc-body #fullpage-overlay { background: rgba(246, 248, 252, .82); }
.cc-body #fullpage-overlay .msg { color: var(--cc-ink); font-weight: 700; }
/* 网络问题通知条 */
.cc-body .network-issues-notifications .alert { border-radius: 0; margin: 0; box-shadow: none; text-align: center; }
/* 验证码 */
.cc-body .captcha-container, .cc-body #default-captcha-domainchecker { margin: 12px 0; }
/* 邮箱验证 / 用户验证横条 */
.cc-body .verification-banner { background: none; padding: 0; font-size: 14px; color: var(--cc-ink); }
/* 邮箱验证：会员中心 = 内容列里的白卡片；前台 / 购物车 = 右下角浮动卡片，不切断顶栏与页头 */
.cc-verify__in { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 14px; background: var(--cc-surface); box-shadow: var(--cc-shadow-1); border-left: 3px solid var(--cc-sun); }
.cc-verify__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--cc-sun-soft); color: var(--cc-sun-ink); }
.cc-verify__t { flex: 1; min-width: 0; line-height: 1.5; color: var(--cc-ink); font-weight: 500; }
.cc-body .cc-verify__btn { flex: none; min-height: 34px; padding: 0 14px; border-radius: 9px; border: 0; background: var(--cc-dark); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.cc-body .cc-verify__btn:hover { background: var(--cc-ink); color: #fff; }
.cc-body .cc-verify__btn:disabled { background: var(--cc-surface-2); color: var(--cc-muted); opacity: 1; }
.cc-body .cc-verify__x { flex: none; float: none; width: 30px; height: 30px; padding: 0; border-radius: 8px; font-size: 20px; line-height: 1; color: var(--cc-muted); opacity: 1; text-shadow: none; }
.cc-body .cc-verify__x:hover { background: var(--cc-surface-2); color: var(--cc-ink); }
.cc-m-console .cc-verify { padding: 20px 32px 0; }
.cc-body:not(.cc-m-console) .cc-verify { position: fixed; right: 20px; bottom: 20px; z-index: 1040; width: min(460px, calc(100vw - 32px)); animation: cc-verify-in .35s ease both; }
.cc-body:not(.cc-m-console) .cc-verify__in { flex-wrap: wrap; box-shadow: var(--cc-shadow-2); }
.cc-body:not(.cc-m-console) .cc-verify__t { flex-basis: calc(100% - 90px); }
.cc-body:not(.cc-m-console) .cc-verify__btn { margin-left: 46px; }
.cc-body:not(.cc-m-console) .cc-verify__x { position: absolute; top: 8px; right: 8px; }
.cc-body:not(.cc-m-console) .cc-verify__in { position: relative; padding-right: 44px; }
@keyframes cc-verify-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 640px) { .cc-m-console .cc-verify { padding: 16px 16px 0; } .cc-m-console .cc-verify__in { flex-wrap: wrap; } .cc-m-console .cc-verify__t { flex-basis: calc(100% - 90px); } .cc-m-console .cc-verify__btn { margin-left: 46px; } .cc-body:not(.cc-m-console) .cc-verify { right: 16px; bottom: 16px; } }
@media print { .cc-verify { display: none !important; } }

/* ---------- 条款弹窗（cc-tos-modal.tpl） ---------- */
.cc-tosm { width: min(820px, calc(100vw - 32px)); max-height: min(86vh, 860px); padding: 0; border: 0; border-radius: var(--cc-r-3); background: var(--cc-surface); color: var(--cc-ink); box-shadow: 0 40px 90px -30px rgba(15, 24, 56, .55); overflow: hidden; }
.cc-tosm[open] { display: flex; animation: cc-tosm-in .2s ease-out; }
.cc-tosm::backdrop { background: rgba(15, 24, 56, .48); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes cc-tosm-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
html.cc-tosm-open { overflow: hidden; }
.cc-tosm__in { display: flex; flex-direction: column; width: 100%; max-height: inherit; min-height: 0; }
.cc-tosm__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px 14px; }
.cc-tosm__head h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--cc-dark); }
.cc-tosm__x { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--cc-surface-2); color: var(--cc-ink-2); font-size: 22px; line-height: 1; cursor: pointer; }
.cc-tosm__x:focus { outline: 0; } .cc-tosm__x:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.cc-tosm__x:hover { background: var(--cc-line); color: var(--cc-dark); }
.cc-tosm__need { margin: 0 28px 12px; padding: 10px 14px; border-radius: 10px; background: var(--cc-sun-soft); color: var(--cc-sun-ink); font-size: 14px; font-weight: 600; }
.cc-tosm__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 28px; padding: 5px; border-radius: 14px; background: var(--cc-surface-2); }
.cc-tosm__tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--cc-ink-2); cursor: pointer; }
.cc-tosm__tabs button span { font-family: var(--cc-font-mono); font-size: 11px; color: var(--cc-muted); }
.cc-tosm__tabs button:hover { color: var(--cc-dark); }
.cc-tosm__tabs button[aria-selected="true"] { background: var(--cc-surface); color: var(--cc-dark); box-shadow: 0 1px 2px rgba(15, 24, 56, .08), 0 4px 12px -6px rgba(15, 24, 56, .25); }
.cc-tosm__tabs button[aria-selected="true"] span { color: var(--cc-accent-ink); }
.cc-tosm__body { flex: 1 1 auto; min-height: 160px; overflow-y: auto; overscroll-behavior: contain; padding: 6px 28px 24px; margin-top: 14px; border-top: 1px solid var(--cc-line); }
.cc-tosm__rev { margin: 14px 0 0; font-size: 13px; color: var(--cc-muted); }
.cc-tosm .cc-prose { font-size: 15px; line-height: 1.8; }
.cc-tosm .cc-prose h2 { margin-top: 28px; font-size: 18px; scroll-margin-top: 0; }
.cc-tosm .cc-empty { margin-top: 16px; }
.cc-tosm__foot { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 28px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cc-line); background: var(--cc-bg); }
.cc-tosm__foot .cc-btn { min-width: 132px; justify-content: center; }
@media (max-width: 640px) {
  .cc-tosm { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .cc-tosm__head, .cc-tosm__foot { padding-left: 18px; padding-right: 18px; }
  .cc-tosm__tabs { margin: 0 18px; } .cc-tosm__need { margin: 0 18px 12px; } .cc-tosm__body { padding: 6px 18px 20px; }
  .cc-tosm__tabs button { flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.25; }
  .cc-tosm__foot .cc-btn { flex: 1; min-width: 0; }
}

/* 生成密码弹窗（includes/generate-password.tpl） */
.cc-body .cc-gpw .modal-dialog { max-width: 460px; }
.cc-body .cc-gpw .modal-header { border-bottom: 0; padding-bottom: 6px; background: var(--cc-surface) !important; }
.cc-body .cc-gpw .modal-body { padding-top: 12px; }
.cc-body .cc-gpw .modal-footer { border-top: 0; background: none; padding-top: 4px; padding-bottom: 24px; }
.cc-gpw__lbl { display: block; font-size: 13px; color: var(--cc-muted); margin: 0 0 8px; }
.cc-gpw__out { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 4px; border: 1px solid var(--cc-line); border-radius: var(--cc-r-2, 10px); background: var(--cc-surface-2); }
.cc-gpw__out:focus-within { border-color: var(--cc-dark); }
.cc-body .cc-gpw__out .form-control { flex: 1; min-width: 0; border: 0; background: none; box-shadow: none; font: 600 17px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; color: var(--cc-ink); }
.cc-gpw__ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--cc-surface); color: var(--cc-muted); box-shadow: inset 0 0 0 1px var(--cc-line); cursor: pointer; transition: color .15s, box-shadow .15s; }
.cc-gpw__ic:hover { color: var(--cc-ink); box-shadow: inset 0 0 0 1px var(--cc-dark); }
.cc-gpw__len { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; font-size: 13px; color: var(--cc-muted); }
.cc-gpw__len label { margin: 0; }
.cc-body .cc-gpw__len .form-control { width: 84px; height: 36px; text-align: center; }
.cc-body .cc-gpw .alert { font-size: 13px; padding: 8px 12px; margin-bottom: 12px; }

/* 首页（风格 5 光隧）：由 scripts/port-mock-css.mjs 从 design/m0/k-lumen 移植。 */
.cc-vf { margin-left: 6px; font: 600 10px/1 var(--cc-font); letter-spacing: 0; padding: 3px 6px; border-radius: 5px; background: #fff1d6; color: var(--cc-sun-ink); vertical-align: 3px; }
.cc-btn--block { width: 100%; }
.cc-btn--off { background: var(--cc-surface-2); color: var(--cc-muted); box-shadow: none; pointer-events: none; }
.cc-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--cc-dark); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.cc-arrow::after { content: "→"; color: var(--cc-accent); transition: transform .2s; }
.cc-arrow:hover::after { transform: translateX(4px); }
.cc-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--cc-surface-2); box-shadow: inset 0 0 0 1px var(--cc-line); }
.cc-seg button { appearance: none; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border-radius: 10px; line-height: 1;
  font: 700 14px var(--cc-font); color: var(--cc-ink-2); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.cc-seg__t { display: inline-flex; align-items: baseline; gap: 8px; line-height: 1; }
.cc-seg button small { font: 600 12px/1 var(--cc-font); color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cc-seg button:hover { color: var(--cc-dark); }
.cc-seg button[aria-selected="true"], .cc-seg button[aria-pressed="true"] { background: #fff; color: var(--cc-dark); box-shadow: 0 1px 2px rgba(15, 24, 56, .08), 0 0 0 1px var(--cc-line); }
.cc-seg button[aria-selected="true"] small { color: var(--cc-accent-ink); }
.cc-seg--region button[aria-selected="true"] { background: var(--cc-dark); color: #fff; box-shadow: none; }
.cc-seg--region button[aria-selected="true"] small { color: var(--cc-sun-2); }
.cc-seg--sm button { min-height: 32px; padding: 0 12px; font-size: 13px; }
.cc-hero { position: relative; margin-top: -68px; }
.cc-hero__stage { position: relative; overflow: hidden; isolation: isolate; min-height: max(760px, 100vh); display: flex; align-items: center; }
.cc-hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; background: var(--cc-bg); }
.cc-hero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 44% 62% at 22% 54%, rgba(246, 248, 252, .94), rgba(246, 248, 252, .7) 55%, transparent 82%), linear-gradient(transparent 78%, var(--cc-bg)); }
.cc-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; align-items: center; padding: 132px 0 88px; }
.cc-hero__kicker { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 1px var(--cc-line);
  font: 600 12px/1 var(--cc-font); letter-spacing: .08em; color: var(--cc-ink-2); }
.cc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc-sun); box-shadow: 0 0 0 4px rgba(245, 165, 36, .2); }
.cc-hero__title { margin-top: 26px; font-size: clamp(38px, 4.8vw, 66px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.cc-hero__title span { display: block; }
.cc-hero__title span + span { color: transparent; background: linear-gradient(100deg, var(--cc-dark), var(--cc-accent) 85%); -webkit-background-clip: text; background-clip: text; }
.cc-hero__lead { margin-top: 24px; max-width: 32em; font-size: 18px; color: var(--cc-ink-2); }
.cc-hero__btns { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.cc-facts { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 640px;
  border-radius: var(--cc-r-2); background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 1px var(--cc-line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cc-facts li { padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.cc-facts li + li { border-left: 1px solid var(--cc-line); }
.cc-facts b { font: 700 16px/1.3 var(--cc-font); color: var(--cc-dark); white-space: nowrap; }
.cc-facts span { font-size: 13px; color: var(--cc-ink-2); }
@media (prefers-reduced-motion: no-preference) {
.cc-hero__copy > * { animation: cch-rise .9s var(--cc-ease) both; }
.cc-hero__copy > :nth-child(2) { animation-delay: .08s; }
.cc-hero__copy > :nth-child(3) { animation-delay: .16s; }
.cc-hero__copy > :nth-child(4) { animation-delay: .24s; }
.cc-hero__copy > :nth-child(5) { animation-delay: .32s; }
.cc-signup { animation: cch-rise 1s var(--cc-ease) .2s both; }
}
@keyframes cch-rise { from { opacity: 0; transform: translateY(18px); } }
.cc-signup { position: relative; overflow: hidden; background: #fff; border-radius: var(--cc-r-3); padding: 30px 30px 24px; box-shadow: 0 0 0 1px var(--cc-line), 0 40px 80px -40px rgba(15, 24, 56, .45); }
.cc-signup::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--cc-sun); }
.cc-signup h2 { font-size: 24px; }
.cc-signup__sub { margin: 4px 0 20px; font-size: 14px; color: var(--cc-muted); }
.cc-field { display: grid; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 700; color: var(--cc-ink-2); }
.cc-field input { height: 46px; padding: 0 14px; border: 1px solid var(--cc-field); border-radius: var(--cc-r-1); font: 500 15px var(--cc-font); color: var(--cc-ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
.cc-field input:focus { outline: none; border-color: var(--cc-accent); box-shadow: 0 0 0 4px rgba(42, 92, 255, .12); }
.cc-captcha { height: 65px; margin: 2px 0 14px; }
.cc-captcha__box { width: 100%; height: 65px; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 12px; padding: 0 14px;
  border: 1px dashed var(--cc-line-2); border-radius: 6px; background: #fafbfd; color: var(--cc-muted); font-size: 12px; }
.cc-captcha__box i { grid-row: 1 / 3; width: 24px; height: 24px; border-radius: 4px; border: 2px solid var(--cc-line-2); }
.cc-captcha__box span { align-self: end; font-weight: 700; color: var(--cc-ink-2); font-size: 13px; }
.cc-captcha__box b { align-self: start; font: 500 11px var(--cc-font); font-variant-numeric: tabular-nums; }
.cc-agree { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; font-size: 13px; color: var(--cc-muted); }
.cc-agree input { margin-top: 3px; accent-color: var(--cc-dark); width: 16px; height: 16px; }
.cc-agree a { color: var(--cc-dark); font-weight: 700; text-decoration-color: rgba(15,24,56,.3); text-underline-offset: 3px; }
.cc-signup__alt { margin-top: 14px; text-align: center; font-size: 13px; color: var(--cc-muted); }
.cc-signup__alt a { color: var(--cc-dark); font-weight: 700; }
.cc-sec { padding: 112px 0; }
.cc-sec--tint { background: var(--cc-surface-2); }
.cc-sec__head { max-width: 660px; margin-bottom: 44px; }
.cc-sec__head h2, .cc-net h2, .cc-lg h2, .cc-os h2 { font-size: clamp(28px, 3.1vw, 42px); font-weight: 800; letter-spacing: -.03em; }
.cc-sec__head > p, .cc-sec__head p:not(.cc-eyebrow) { margin-top: 14px; color: var(--cc-muted); font-size: 16px; }
.cc-sec__head a { color: var(--cc-accent-ink); }
.cc-sec__head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) {
.cc-js [data-cc-reveal]:not(.cc-foot__word) { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--cc-ease), transform .8s var(--cc-ease); }
.cc-js [data-cc-reveal].in { opacity: 1 !important; transform: none !important; }
}
.cc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cc-field-row .cc-field input { min-width: 0; width: 100%; }
.cc-signup .cc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cc-signup .cc-field { gap: 0; margin-bottom: 12px; }
.cc-signup .cc-field-row { gap: 10px; }
.cc-signup .cc-field input { height: 46px; border-color: var(--cc-line-2); background: #fbfcfe; }
.cc-signup .cc-field input::placeholder { color: var(--cc-field); font-weight: 500; }
.cc-signup .cc-field input:hover { border-color: var(--cc-field); }
.cc-signup .cc-field input:focus { background: #fff; border-color: var(--cc-accent); }
.cc-signup__sub { margin-bottom: 18px; }
.cc-signup .cc-captcha { margin: 2px 0 14px; }
.cc-agree { position: relative; align-items: center; margin-bottom: 16px; cursor: pointer; user-select: none; }
.cc-agree input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.cc-agree__box { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--cc-field); border-radius: 5px; background: #fff; transition: background .15s, border-color .15s, box-shadow .15s; }
.cc-agree__box::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); transition: transform .15s var(--cc-ease); }
.cc-agree:hover .cc-agree__box { border-color: var(--cc-dark); }
.cc-agree input:checked + .cc-agree__box { background: var(--cc-dark); border-color: var(--cc-dark); }
.cc-agree input:checked + .cc-agree__box::after { transform: rotate(-45deg) scale(1); }
.cc-agree input:focus-visible + .cc-agree__box { box-shadow: 0 0 0 4px rgba(42, 92, 255, .18); border-color: var(--cc-accent); }
.cc-line { background: var(--cc-surface); border-radius: var(--cc-r-3); box-shadow: var(--cc-shadow-1); overflow: hidden; }
.cc-line__head { display: grid; gap: 18px; padding: 22px 28px; border-bottom: 1px solid var(--cc-line);
  background: linear-gradient(180deg, #fbfcff, #fff); }
.cc-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cc-picker__g { display: flex; align-items: center; gap: 12px; }
.cc-picker__l { font-size: 13px; font-weight: 700; color: var(--cc-muted); }
.cc-picker__sep { width: 1px; height: 28px; background: var(--cc-line-2); }
.cc-picker__test { margin-left: auto; }
.cc-line__copy { padding-top: 18px; border-top: 1px dashed var(--cc-line); }
.cc-line__copy h3 { font-size: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cc-line__copy h3 small { font: 600 13px var(--cc-font); color: var(--cc-accent-ink); letter-spacing: 0; }
.cc-line__copy p { margin-top: 4px; font-size: 13px; color: var(--cc-muted); max-width: 64em; }
.cc-na { font: 600 15px var(--cc-font); color: var(--cc-muted); }
.cc-pb__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 28px; font-size: 13px; color: var(--cc-muted); font-weight: 600; }
.cc-pb__table { padding: 0 16px 16px; }
.cc-pb__row { display: grid; grid-template-columns: 1.1fr .8fr .8fr 1fr 1.5fr .9fr 1.5fr 92px; align-items: center; gap: 12px; padding: 14px 12px; border-radius: 14px;
  font: 600 14px var(--cc-font); font-variant-numeric: tabular-nums; color: var(--cc-ink); transition: background-color .2s, box-shadow .2s; }
.cc-pb__row + .cc-pb__row { background: linear-gradient(var(--cc-line), var(--cc-line)) top center / calc(100% - 24px) 1px no-repeat; }
.cc-pb__row:not(.cc-pb__row--head):hover { background: #f5f7ff; box-shadow: inset 0 0 0 1px #dfe6ff; }
.cc-pb__row:not(.cc-pb__row--head):hover + .cc-pb__row { background-image: none; }
.cc-pb__row--head { font: 700 12px var(--cc-font); color: var(--cc-muted); padding-top: 4px; padding-bottom: 10px; }
.cc-pb__name { display: flex; flex-direction: column; }
.cc-pb__name b { font: 800 18px var(--cc-font); letter-spacing: -.02em; }
.cc-pb__name em { font: 600 12px var(--cc-font); font-style: normal; color: var(--cc-muted); }
.is-out .cc-pb__name em { color: var(--cc-warn); }
.is-out { color: var(--cc-muted); }
.cc-promo { color: var(--cc-sun-ink); font-weight: 600; }
.cc-pb__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; }
.cc-pb__price b { font: 800 20px var(--cc-font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--cc-dark); }
.cc-pb__price small { color: var(--cc-muted); font-size: 12px; }
.cc-pb__price i { flex-basis: 100%; font: 600 12px var(--cc-font); font-style: normal; color: var(--cc-accent-ink); }
.cc-pb__row .cc-btn { width: 100%; }
.cc-duo { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cc-tile { position: relative; overflow: hidden; border-radius: var(--cc-r-3); padding: 32px; background: var(--cc-surface); box-shadow: var(--cc-shadow-1); display: flex; flex-direction: column; gap: 10px; }
.cc-tile .cc-eyebrow { margin-bottom: 4px; }
.cc-tile h3 { font-size: 22px; }
.cc-tile > p { color: var(--cc-ink-2); font-size: 14px; }
.cc-tile .cc-arrow { margin-top: auto; padding-top: 10px; }
.cc-kv { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.cc-kv li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--cc-line); font-size: 14px; }
.cc-kv b { font-weight: 700; }
.cc-kv span { color: var(--cc-muted); text-align: right; }
.cc-spot::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(42, 92, 255, .07), transparent 60%); }
.cc-spot:hover::after { opacity: 1; }
.cc-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cc-bento__i { position: relative; overflow: hidden; background: var(--cc-surface); border-radius: var(--cc-r-3); padding: 28px; display: flex; flex-direction: column; gap: 22px; box-shadow: var(--cc-shadow-1); }
.cc-bento__i h3 { font-size: 19px; }
.cc-bento__i p { margin-top: 8px; color: var(--cc-ink-2); font-size: 14px; }
.cc-bento__x { margin-top: auto; }
.cc-wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 36px; }
.cc-wide .cc-bento__t { flex: 1; }
.cc-wide .cc-bento__x { flex: 0 0 320px; margin: 0; }
.cc-full { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 48px; }
.cc-full .cc-bento__t { flex: 0 0 340px; }
.cc-full .cc-bento__x { flex: 1; margin: 0; }
.cc-readout { margin: 0; padding: 18px 20px; border-radius: var(--cc-r-2); background: var(--cc-dark); color: #c9d2ee; font: 500 13.5px/1.85 var(--cc-font); white-space: pre; overflow: hidden; }
.cc-readout b { color: var(--cc-sun-2); font-weight: 600; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-chips span { font: 600 12.5px var(--cc-font); padding: 6px 12px; border-radius: 8px; background: var(--cc-surface-2); color: var(--cc-dark); box-shadow: inset 0 0 0 1px var(--cc-line); }
.cc-cyc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cc-cyc__cap { grid-column: 1 / -1; font-size: 12px; color: var(--cc-muted); }
.cc-cyc__i { padding: 14px 16px; border-radius: var(--cc-r-2); background: var(--cc-surface-2); display: flex; flex-direction: column; gap: 2px; }
.cc-cyc__i span { font-size: 12px; color: var(--cc-muted); font-weight: 600; }
.cc-cyc__i b { font: 600 22px var(--cc-font); color: var(--cc-dark); font-variant-numeric: tabular-nums; }
.cc-cyc__i small { font-size: 12px; color: var(--cc-muted); }
.cc-cyc__i:last-child { background: #fff6e4; box-shadow: inset 0 0 0 1px #f6d69a; }
.cc-cyc__i:last-child b { color: var(--cc-sun-ink); }
.cc-hw__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cc-hw__i { position: relative; overflow: hidden; border-radius: var(--cc-r-3); padding: 30px; background: var(--cc-surface); box-shadow: var(--cc-shadow-1); }
.cc-hw__art { width: 76px; height: 76px; margin-bottom: 22px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(140deg, #eef2ff, #f8faff); box-shadow: inset 0 0 0 1px #dfe6ff; }
.cc-hw__art svg { width: 54px; height: 54px; fill: none; stroke: var(--cc-dark); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cc-hw__art .cc-a { fill: rgba(42, 92, 255, .12); stroke: var(--cc-accent); }
.cc-hw__art .cc-o { fill: var(--cc-sun); stroke: none; }
.cc-hw__i .cc-eyebrow { margin-bottom: 8px; }
.cc-hw__i h3 { font-size: 26px; font-weight: 800; }
.cc-hw__sub { margin: 4px 0 14px; font: 600 13px var(--cc-font); color: var(--cc-accent-ink); font-variant-numeric: tabular-nums; }
.cc-hw__i > p:last-child { font-size: 14px; color: var(--cc-ink-2); }
.cc-net { padding: 112px 0; background: radial-gradient(ellipse 60% 70% at 25% 50%, #e9eefb, transparent 70%), var(--cc-bg); }
.cc-net__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.cc-net__globe { margin: 0; }
.cc-net__globe canvas { display: block; width: 100%; aspect-ratio: 1; cursor: grab; touch-action: pan-y; }
.cc-net__lead { margin: 14px 0 26px; color: var(--cc-muted); font-size: 16px; }
.cc-dcs { display: grid; gap: 10px; }
.cc-dcg { display: grid; grid-template-columns: 72px 1fr; align-items: start; gap: 12px; }
.cc-dcg__l { padding-top: 7px; font-weight: 800; font-size: 14px; display: flex; flex-direction: column; line-height: 1.2; }
.cc-dcg__l small { font: 600 10px var(--cc-font); letter-spacing: .1em; color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cc-dcg__b { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-dcg__b button { appearance: none; border: 0; cursor: pointer; padding: 8px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--cc-line); font: 700 13px var(--cc-font); color: var(--cc-ink-2); transition: box-shadow .2s, color .2s, background-color .2s; }
.cc-dcg__b button:hover { color: var(--cc-dark); box-shadow: inset 0 0 0 1px var(--cc-line-2); }
.cc-dcg__b button[aria-selected="true"] { background: var(--cc-dark); color: #fff; box-shadow: none; }
.cc-dc { margin-top: 18px; padding: 26px 28px; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); }
.cc-dc__head { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--cc-line); }
.cc-dc__code { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--cc-dark); color: var(--cc-sun-2); font: 700 14px/1 var(--cc-font); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.cc-dc h3 { font-size: 20px; }
.cc-dc__addr { margin-top: 4px; font-size: 13px; color: var(--cc-muted); }
.cc-dc__pts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--cc-ink-2); }
.cc-dc__pts li { position: relative; padding-left: 20px; }
.cc-dc__pts li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 3px; border: 2px solid var(--cc-accent); }
.cc-dc__certs { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cc-dc__certs li { font: 600 11px var(--cc-font); padding: 5px 9px; border-radius: 7px; background: var(--cc-surface-2); color: var(--cc-ink-2); font-variant-numeric: tabular-nums; }
.cc-os { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 56px; align-items: center; }
.cc-os__copy p:not(.cc-eyebrow) { margin-top: 14px; color: var(--cc-muted); font-size: 16px; }
.cc-os__wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.cc-os__i { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: var(--cc-surface); box-shadow: var(--cc-shadow-1); font-weight: 700; font-size: 14px; transition: transform .2s; }
.cc-os__i:hover { transform: translateY(-2px); }
.cc-os__i i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font: 700 14px var(--cc-font); font-style: normal; color: #fff; background: var(--cc-dark); font-variant-numeric: tabular-nums; }
.cc-os__i:nth-child(3n+2) i { background: var(--cc-accent); }
.cc-os__i:nth-child(3n) i { background: var(--cc-sun); color: var(--cc-dark); }
.cc-os__note { grid-column: 1 / -1; font-size: 12px; color: var(--cc-muted); }
.cc-lg { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; padding: 48px; border-radius: 28px; background: var(--cc-surface); box-shadow: var(--cc-shadow-1); }
.cc-lg__copy p:not(.cc-eyebrow) { margin-top: 14px; color: var(--cc-muted); font-size: 16px; }
.cc-lg__form { display: grid; gap: 14px; justify-items: start; }
.cc-lg__row { display: flex; gap: 10px; width: 100%; }
.cc-lg__row input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--cc-field); border-radius: var(--cc-r-1); font: 500 15px var(--cc-font-mono); }
.cc-lg__row input:focus { outline: none; border-color: var(--cc-accent); box-shadow: 0 0 0 4px rgba(42, 92, 255, .12); }
.cc-lg__cmd { width: 100%; padding: 14px 16px; border-radius: 12px; background: var(--cc-dark); color: #dbe2f7; font: 500 13px var(--cc-font-mono); }
.cc-lg__cmd span { color: var(--cc-sun-2); }
.cc-cur { display: inline-block; width: 8px; height: 1.1em; margin-left: 3px; vertical-align: -3px; background: var(--cc-sun); animation: cch-blink 1s steps(2) infinite; }
@keyframes cch-blink { 50% { opacity: 0; } }
.cc-voice { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cc-voice__i { margin: 0; padding: 32px; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); display: flex; flex-direction: column; gap: 22px; }
.cc-voice__i blockquote { margin: 0; font-size: 16px; line-height: 1.85; color: var(--cc-ink-2); position: relative; padding-top: 34px; }
.cc-voice__i blockquote::before { content: "“"; position: absolute; left: -4px; top: -18px; font: 800 72px/1 var(--cc-font); color: var(--cc-sun); }
.cc-voice__av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; grid-row: span 2; }
.cc-voice__i figcaption { margin-top: auto; display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; }
.cc-voice__i figcaption i { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cc-dark); color: #fff; font-style: normal; font-weight: 700; }
.cc-voice__i figcaption b { font-size: 15px; }
.cc-voice__i figcaption span { font-size: 13px; color: var(--cc-muted); }
.cc-faq { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 56px; align-items: start; }
.cc-faq__list { display: grid; gap: 10px; }
.cc-faq details { border-radius: var(--cc-r-2); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); }
.cc-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 700; font-size: 16px; }
.cc-faq summary::-webkit-details-marker { display: none; }
.cc-faq summary::after { content: "+"; font: 400 22px/1 var(--cc-font-mono); color: var(--cc-accent); transition: transform .2s; }
.cc-faq details[open] summary::after { transform: rotate(45deg); }
.cc-faq details p { padding: 0 22px 20px; color: var(--cc-ink-2); font-size: 14px; }
.cc-news { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cc-line); }
.cc-news a { display: grid; grid-template-columns: 130px auto 1fr; gap: 20px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--cc-line); text-decoration: none; transition: padding .2s, background-color .2s; }
.cc-news a:hover { padding-left: 14px; background: #fff; }
.cc-news time { font: 500 13px var(--cc-font); color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cc-news .cc-t { font-weight: 600; }
.cc-news a > span:nth-child(2) { justify-self: start; }
.cc-tag { justify-self: start; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #e7edff; color: var(--cc-accent-ink); white-space: nowrap; }
@media (max-width: 1180px) {
.cc-hero__in { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 44px; padding: 120px 0 72px; text-align: center; }
.cc-hero__copy { display: flex; flex-direction: column; align-items: center; max-width: 680px; }
.cc-hero__lead { margin-inline: auto; }
.cc-hero__btns { justify-content: center; }
.cc-hero__copy { width: 100%; }
.cc-facts { width: 100%; max-width: 600px; text-align: center; box-sizing: border-box; }
.cc-facts li { padding: 12px 10px; align-items: center; }
.cc-signup { width: 100%; max-width: 600px; text-align: left; }
.cc-signup h2, .cc-signup__sub { text-align: center; }
.cc-hero__gl { height: min(100%, max(640px, 100svh)); -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.cc-hero__veil { background: radial-gradient(ellipse 70% 40% at 50% 34%, rgba(246, 248, 252, .82), rgba(246, 248, 252, .45) 70%, transparent), linear-gradient(transparent 60%, var(--cc-bg)); }
.cc-pb__row { grid-template-columns: 1fr 1fr 1fr; }
.cc-pb__row--head { display: none; }
.cc-pb__row [data-l]::before { content: attr(data-l) " "; font: 600 11px var(--cc-font); color: var(--cc-muted); display: block; }
.cc-pb__name { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; }
.cc-pb__price { grid-column: 1 / 3; }
.cc-bento, .cc-hw__grid { grid-template-columns: 1fr 1fr; }
.cc-full { flex-direction: column; align-items: stretch; gap: 22px; }
.cc-full .cc-bento__t { flex: none; }
.cc-net__in, .cc-os, .cc-lg, .cc-faq { grid-template-columns: 1fr; }
.cc-net__globe { max-width: 560px; margin-inline: auto; }
.cc-os__wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.cc-hero { margin-top: -60px; }
.cc-hero__stage { min-height: 0; }
.cc-hero__in { padding: 96px 0 56px; }
.cc-hero__lead { font-size: 16px; }
.cc-facts { grid-template-columns: 1fr 1fr; }
.cc-facts li:nth-child(3) { border-left: 0; }
.cc-facts li:nth-child(n+3) { border-top: 1px solid var(--cc-line); }
.cc-signup { padding: 26px 20px 22px; }
.cc-sec, .cc-net { padding: 72px 0; }
.cc-sec__head { margin-bottom: 30px; }
.cc-line__head { padding: 18px; }
.cc-picker__sep { display: none; }
.cc-picker__test { margin-left: 0; }
.cc-pb__bar { flex-direction: column; align-items: flex-start; padding: 14px 18px; }
.cc-pb__table { padding: 0 8px 8px; }
.cc-pb__row { grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-pb__price { grid-column: 1 / -1; }
.cc-duo, .cc-bento, .cc-hw__grid, .cc-voice { grid-template-columns: 1fr; }
.cc-wide { grid-column: auto; flex-direction: column; align-items: stretch; gap: 20px; }
.cc-wide .cc-bento__x { flex: none; }
.cc-cyc { grid-template-columns: 1fr 1fr; }
.cc-tile, .cc-bento__i, .cc-hw__i, .cc-voice__i { padding: 24px 20px; }
.cc-os__wall { grid-template-columns: 1fr 1fr; }
.cc-lg { padding: 28px 20px; gap: 28px; }
.cc-lg__row { flex-direction: column; }
.cc-news a { grid-template-columns: auto 1fr; gap: 6px 12px; }
.cc-news time { grid-column: 1 / -1; }
}


/* 同意框条款链接（includes/cc-tos-links.tpl）：名称不在中间断行，避免末行孤字 */
.cc-tosl { white-space: nowrap; }
.cc-agree > span, .cc-consent__body strong { text-wrap: pretty; }

/* 自有前台页面（M2）。原则：每页一个自己的版式骨架，不用 WHMCS 的“面包屑横条 + 标题 + 侧栏 + 卡片”。 */
/* twenty-one 给 #main-body 设了 padding，这里必须用 id 选择器才能盖过 */
.cc-bare #main-body { padding: 0 0 112px; }
.cc-pg-home #main-body, .cc-pg-e404 #main-body { padding: 0; }
.cc-seg button small { font-family: var(--cc-font); font-variant-numeric: tabular-nums; }
.cc-line .cc-pb--card { background: none; border-radius: 0; box-shadow: none; }
.cc-line .cc-pb--card .cc-pb__bar { padding: 16px 28px; border-bottom: 0; }
.cc-line .cc-pb--card .cc-pb__table { padding: 0 16px 16px; }
.cc-mono { font-family: var(--cc-font-mono); font-size: 13px; }
.cc-muted { color: var(--cc-muted); }
[hidden] { display: none !important; }
.cc-flag { display: inline-block; width: 20px; height: 15px; margin-right: 8px; border-radius: 3px; overflow: hidden; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(15, 24, 56, .12); }
.cc-flag svg { display: block; width: 100%; height: 100%; }
.cc-empty { padding: 28px; border-radius: var(--cc-r-2); background: var(--cc-surface-2); color: var(--cc-muted); }

/* ---------- 首页补充（实时数据的列数可变） ---------- */
@media (min-width: 1181px) { .cc-pb__row { grid-template-columns: .8fr repeat(var(--cc-cols, 5), minmax(0, 1fr)) 1.3fr 92px; } }
.cc-pb__price > span { display: contents; }
.cc-body .cc-pick { display: inline-flex; align-items: center; margin: 0; }
.cc-line__panel + .cc-line__panel { border-top: 1px solid var(--cc-line); }
.cc-js .cc-line[data-cc-ready] .cc-line__panel + .cc-line__panel { border-top: 0; }
.cc-line__panel > .cc-line__copy { padding: 18px 28px 0; border-top: 0; }
.cc-pb--card .cc-pb__bar { padding-left: 12px; padding-right: 12px; }
.cc-signup__note { margin: 10px 0 0; font-size: 12px; color: var(--cc-muted); text-align: center; }
.cc-signup--in .cc-btn { margin-top: 8px; }
.cc-readout { display: grid; gap: 2px; }
.cc-readout > dt { color: var(--cc-sun-2); font-weight: 600; margin-bottom: 4px; }
.cc-readout div { display: grid; grid-template-columns: 9ch 1fr; }
.cc-readout dd { margin: 0; color: #fff; }
.cc-readout div dt { color: #8f9bc4; font-weight: 400; }
.cc-cyc { grid-template-columns: repeat(var(--cc-n, 4), minmax(0, 1fr)); }
.cc-cyc__i b { font-family: var(--cc-font); font-variant-numeric: tabular-nums; font-weight: 800; }
.cc-net__all { margin-top: 18px; }
.cc-news a { grid-template-columns: 130px 64px minmax(0, 1fr); }
.cc-news a > span.cc-tag { justify-self: stretch; text-align: center; box-sizing: border-box; padding-left: 6px; padding-right: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-kv b small { color: var(--cc-muted); font: 400 12px var(--cc-font); }

/* ---------- 页头（自有页面）：左文案，右侧放该页的“数据面板” ---------- */
.cc-mast { position: relative; padding: 72px 0 56px; background:
  radial-gradient(46% 92% at 100% 0%, rgba(42, 92, 255, .10), transparent 70%), var(--cc-bg); }
.cc-mast__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: end; }
.cc-mast__title { margin: 0; font-size: clamp(36px, 4.4vw, 60px) !important; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.cc-mast__lead { margin: 18px 0 0; max-width: 34em; font-size: 17px; color: var(--cc-ink-2); }
.cc-mast__cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

/* 云服务器：地域 × 档位矩阵 */
.cc-matrix { border-collapse: separate; border-spacing: 0; min-width: 440px; background: var(--cc-surface); border-radius: var(--cc-r-3); box-shadow: var(--cc-shadow-2); overflow: hidden; font-variant-numeric: tabular-nums; }
.cc-matrix th, .cc-matrix td { padding: 0; text-align: left; }
.cc-matrix thead th { padding: 14px 20px 10px; font: 700 12px var(--cc-font); color: var(--cc-muted); letter-spacing: .04em; }
.cc-matrix tbody th { padding: 18px 20px; font-size: 15px; white-space: nowrap; border-top: 1px solid var(--cc-line); }
.cc-matrix tbody th small { margin-left: 6px; font: 600 11px var(--cc-font); color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cc-matrix td { border-top: 1px solid var(--cc-line); border-left: 1px solid var(--cc-line); }
.cc-matrix td a { display: flex; flex-direction: column; gap: 2px; padding: 14px 20px; color: var(--cc-ink); text-decoration: none; transition: background-color .2s; }
.cc-matrix td a:hover { background: var(--cc-surface-sel); }
.cc-matrix td b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--cc-dark); }
.cc-matrix td span { font-size: 12px; color: var(--cc-muted); }
.cc-matrix td .cc-na { display: block; padding: 14px 20px; }
.cc-matrix__note { margin: 14px 4px 0; font-size: 13px; color: var(--cc-muted); line-height: 1.8; }
.cc-matrix__note b { display: inline-block; min-width: 3.2em; color: var(--cc-dark); }

/* 云服务器：每条线路 = 左档案 + 右表 */
.cc-lines { padding-top: 24px; }
.cc-lsec { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; padding: 56px 0; border-top: 1px solid var(--cc-line); scroll-margin-top: 80px; }
.cc-lsec:first-child { border-top: 0; }
.cc-lsec__file { position: sticky; top: 96px; align-self: start; display: grid; gap: 12px; }
.cc-lsec__tag { margin: 0; font: 600 12px var(--cc-font); color: var(--cc-accent-ink); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.cc-lsec__file h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.cc-lsec__head { margin: 0; font-weight: 700; color: var(--cc-dark); }
.cc-lsec__desc { margin: 0; font-size: 14px; color: var(--cc-ink-2); }
.cc-lsec__dl { margin: 6px 0 4px; display: grid; gap: 12px; padding: 16px 0; border-top: 1px dashed var(--cc-line-2); border-bottom: 1px dashed var(--cc-line-2); }
.cc-lsec__dl dt { font-size: 12px; font-weight: 700; color: var(--cc-muted); margin-bottom: 4px; }
.cc-lsec__dl dd { margin: 0; font-size: 14px; }
.cc-pb--card { background: var(--cc-surface); border-radius: var(--cc-r-3); box-shadow: var(--cc-shadow-1); overflow: hidden; }
.cc-pb--card .cc-pb__bar { padding: 16px 20px; border-bottom: 1px solid var(--cc-line); }
.cc-pb--card .cc-pb__table { padding: 8px 8px 12px; }

/* ---------- 独立服务器：配置单 + 报价卡 + 流程刻度 ---------- */
.cc-ded { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; margin-top: 8px; }
.cc-sheet { background: var(--cc-surface); border-radius: var(--cc-r-3); box-shadow: var(--cc-shadow-1); padding: 28px 32px 12px;
  background-image: linear-gradient(var(--cc-surface), var(--cc-surface)), repeating-linear-gradient(90deg, var(--cc-line-2) 0 6px, transparent 6px 12px);
  background-size: 100% 100%, 100% 1px; background-repeat: no-repeat; }
.cc-sheet__title { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--cc-muted); letter-spacing: .02em; }
.cc-sheet__rows { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.cc-sheet__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; padding: 12px 0; }
.cc-sheet__row label { display: grid; gap: 2px; margin: 0; cursor: text; }
.cc-sheet__row label b { font-size: 16px; color: var(--cc-dark); }
.cc-sheet__row label span { font-size: 13px; color: var(--cc-muted); font-weight: 500; }
.cc-body .cc-sheet__row input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--cc-field); border-radius: var(--cc-r-1); background: #fbfcfe; font: 600 15px var(--cc-font); color: var(--cc-ink); }
.cc-body .cc-sheet__row input:focus { background: #fff; }
.cc-body .cc-sheet__row input::placeholder { color: var(--cc-muted); font-weight: 500; }
.cc-quote { position: sticky; top: 96px; }
.cc-quote__card { position: relative; overflow: hidden; isolation: isolate; padding: 28px; border-radius: var(--cc-r-3); background: var(--cc-dark); color: var(--cc-dark-muted); }
.cc-quote__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .55; }
.cc-quote__k { margin: 0; font: 700 13px var(--cc-font); color: var(--cc-sun-2); letter-spacing: .06em; }
.cc-quote__t { margin: 10px 0 22px; color: #fff; font-size: 17px; line-height: 1.6; font-weight: 600; }
.cc-body .cc-quote__alt { display: block; margin-top: 14px; text-align: center; color: var(--cc-dark-muted); font-size: 13px; }
.cc-body .cc-quote__alt:hover { color: #fff; }
.cc-steps { margin-top: 88px; }
.cc-steps__title { margin: 0 0 28px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.02em; }
.cc-steps__rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.cc-steps__rail li:not(:last-child)::after { content: ""; position: absolute; left: 46px; right: 8px; top: 18px; height: 2px; background: linear-gradient(90deg, var(--cc-dark), var(--cc-accent)); opacity: .5; }
.cc-steps__rail li { position: relative; padding-right: 24px; }
.cc-steps__n { position: relative; display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 16px; border-radius: 50%; background: var(--cc-bg); box-shadow: inset 0 0 0 2px var(--cc-dark); font: 800 15px var(--cc-font); color: var(--cc-dark); }
.cc-steps__rail li:last-child .cc-steps__n { background: var(--cc-sun); box-shadow: none; }
.cc-steps__rail b { display: block; font-size: 17px; color: var(--cc-dark); }
.cc-steps__rail p { margin: 6px 0 0; font-size: 14px; color: var(--cc-muted); }
.cc-ded__stock { margin-top: 88px; display: grid; gap: 16px; }
.cc-ded__stock .cc-steps__title { margin-bottom: 8px; }
.cc-ded__gdesc { margin: 8px 0 0; font-size: 14px; color: var(--cc-ink-2); }
.cc-blocks { margin-top: 72px; display: grid; gap: 48px; }

/* ---------- IP 租用：注册记录 ---------- */
.cc-ipx { display: grid; gap: 32px; margin-top: 8px; }
.cc-records { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.cc-rec { display: flex; flex-direction: column; border-radius: var(--cc-r-2); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); overflow: hidden; }
.cc-rec__head { padding: 20px 22px 14px; border-bottom: 1px dashed var(--cc-line-2); }
.cc-rec__obj { font: 600 12px var(--cc-font); color: var(--cc-accent-ink); font-variant-numeric: tabular-nums; }
.cc-rec__head h2 { margin: 6px 0 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.cc-rec__dl { margin: 0; padding: 14px 22px; display: grid; gap: 6px; font: 500 13px/1.6 var(--cc-font-mono); }
.cc-rec__dl div { display: grid; grid-template-columns: 8ch minmax(0, 1fr); gap: 8px; align-items: baseline; }
.cc-rec__dl dt { color: var(--cc-muted); font-weight: 500; }
.cc-rec__dl dt::after { content: ":"; }
.cc-rec__dl dd { margin: 0; color: var(--cc-ink); font-family: var(--cc-font); font-size: 14px; }
.cc-rec__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; background: var(--cc-surface-2); }
.cc-rec__price b { font: 800 22px var(--cc-font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--cc-dark); }
.cc-rec__price small { color: var(--cc-muted); font-size: 12px; }
.cc-rec.is-out { opacity: .72; }
.cc-ipx__notes { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 28px 32px; border-radius: var(--cc-r-3); background: var(--cc-surface-2); }
.cc-ipx__notes h2 { margin: 0; font-size: 18px; font-weight: 800; }
.cc-ipx__notes ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; color: var(--cc-ink-2); }

/* ---------- 数据中心：吸附地球仪 + 档案条 ---------- */
.cc-dcx { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; margin-top: 8px; }
.cc-dcx__globe { position: sticky; top: 80px; margin: 0; }
.cc-dcx__globe canvas { display: block; width: 100%; aspect-ratio: 1; cursor: grab; touch-action: pan-y; }
.cc-dcx__region + .cc-dcx__region { margin-top: 44px; }
.cc-dcx__region h2 { display: flex; align-items: center; margin: 0 0 14px; font-size: 22px; font-weight: 800; }
.cc-dcx__region h2 small { margin-left: 10px; font: 600 12px var(--cc-font); color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cc-dcx__item { border-top: 1px solid var(--cc-line); }
.cc-dcx__item:last-child { border-bottom: 1px solid var(--cc-line); }
.cc-dcx__item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 18px 4px; }
.cc-dcx__item summary::-webkit-details-marker { display: none; }
.cc-dcx__item summary::after { content: "+"; grid-column: 3; grid-row: 1 / 3; font: 400 22px/1 var(--cc-font-mono); color: var(--cc-accent); transition: transform .2s; }
.cc-dcx__item[open] summary::after { transform: rotate(45deg); }
.cc-dcx__code { grid-row: 1 / 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--cc-dark); color: var(--cc-sun-2); font: 700 12px var(--cc-font); font-variant-numeric: tabular-nums; }
.cc-dcx__item summary b { font-size: 17px; color: var(--cc-dark); }
.cc-dcx__addr { grid-column: 2; font-size: 13px; color: var(--cc-muted); }
.cc-dcx__body { padding: 0 4px 22px 68px; }
.cc-dcx__body .cc-dc__pts { margin-top: 0; }

/* ---------- 关于 ---------- */
.cc-about { position: relative; overflow: hidden; isolation: isolate; padding: 112px 0 72px; }
.cc-about__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.cc-about::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(246, 248, 252, .97) 40%, rgba(246, 248, 252, .55)); }
.cc-about__title { max-width: 18em; margin: 0; font-size: clamp(30px, 3.6vw, 52px) !important; font-weight: 800; letter-spacing: -.035em; line-height: 1.18; }
.cc-about__facts { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--cc-dark); }
.cc-about__facts li { padding: 20px 20px 0 0; display: grid; gap: 4px; }
.cc-about__facts b { font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.03em; color: var(--cc-dark); }
.cc-about__facts span { font-size: 14px; color: var(--cc-muted); }
.cc-own { margin-top: 56px; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; }
.cc-own__title { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.02em; }
.cc-own__dl { margin: 0; display: grid; }
.cc-own__dl div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-top: 1px solid var(--cc-line); }
.cc-own__dl dt { font-size: 18px; font-weight: 800; color: var(--cc-dark); }
.cc-own__dl dd { margin: 0; font-size: 16px; color: var(--cc-ink-2); }
.cc-corp { margin-top: 88px; display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 32px 36px; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); }
.cc-corp h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.cc-corp p { margin: 0; font-size: 14px; }

/* ---------- 条款 ---------- */
.cc-legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 56px; }
.cc-legal__nav { position: sticky; top: 96px; }
.cc-legal__docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cc-legal__docs a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--cc-ink-2); font-weight: 700; text-decoration: none; }
.cc-legal__docs a:hover { background: var(--cc-surface-2); color: var(--cc-dark); }
.cc-legal__docs a[aria-current="page"] { background: var(--cc-dark); color: #fff; }
.cc-legal__tocl { margin: 24px 14px 8px; font-size: 12px; font-weight: 700; color: var(--cc-muted); }
.cc-legal__toc { margin: 0; padding: 0 0 0 32px; display: grid; gap: 6px; font-size: 13px; }
.cc-legal__toc a { color: var(--cc-ink-2); text-decoration: none; }
.cc-legal__toc a:hover { color: var(--cc-accent-ink); }
.cc-legal__doc { max-width: 820px; }
.cc-legal__doc header { padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--cc-line); }
.cc-legal__doc h1 { margin: 0; font-size: clamp(30px, 3vw, 42px) !important; font-weight: 800; letter-spacing: -.03em; }
.cc-legal__rev { margin: 8px 0 0; font-size: 13px; color: var(--cc-muted); }
.cc-prose { font-size: 16px; line-height: 1.85; color: var(--cc-ink-2); }
.cc-prose h2 { margin: 40px 0 12px; font-size: 22px; color: var(--cc-dark); scroll-margin-top: 90px; }
.cc-prose h3 { margin: 28px 0 10px; font-size: 18px; color: var(--cc-dark); }
.cc-prose p, .cc-prose ul, .cc-prose ol { margin: 0 0 14px; }
.cc-prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.cc-prose th, .cc-prose td { padding: 10px 12px; border-bottom: 1px solid var(--cc-line); text-align: left; }
.cc-prose a { color: var(--cc-accent-ink); }
.cc-prose ul, .cc-prose ol { padding-left: 1.6em; }
.cc-prose li { margin: 0 0 8px; padding-left: 4px; }
.cc-prose li::marker { color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cc-prose strong { color: var(--cc-dark); }
.cc-prose th { background: var(--cc-surface-2); color: var(--cc-dark); font-weight: 700; }
.cc-legal .cc-prose h2 { padding-top: 24px; border-top: 1px solid var(--cc-line); }
.cc-legal .cc-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cc-prose a[href^="http"] { word-break: break-all; }

/* ---------- 联系 ---------- */
.cc-contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; padding-top: 72px; }
.cc-contact__lead h1 { margin: 0; font-size: clamp(36px, 4vw, 56px) !important; font-weight: 800; letter-spacing: -.035em; }
.cc-contact__p { margin: 16px 0 32px; font-size: 17px; color: var(--cc-ink-2); max-width: 30em; }
.cc-chan { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cc-line); }
.cc-chan li > * { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--cc-line); color: var(--cc-ink); text-decoration: none; }
.cc-chan a:hover { background: linear-gradient(90deg, var(--cc-surface-sel), transparent); }
.cc-chan b { color: var(--cc-dark); }
.cc-chan span { color: var(--cc-ink-2); overflow-wrap: anywhere; }
.cc-chan li:first-child b::after { content: " →"; color: var(--cc-sun); }
.cc-contact__addr { margin: 24px 0 0; display: grid; gap: 4px; font-size: 13px; color: var(--cc-muted); }
.cc-contact__addr b { color: var(--cc-ink); }
.cc-contact__form { padding: 32px; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-2); }
.cc-contact__form h2 { margin: 0 0 20px; font-size: 20px; font-weight: 800; }
.cc-contact__two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.cc-contact__form label { font-size: 13px; font-weight: 700; color: var(--cc-ink-2); }
.cc-contact__captcha { margin: 4px 0 16px; }
.cc-contact__form .btn { width: 100%; }

/* ---------- 404 ---------- */
.cc-e404 { position: relative; overflow: hidden; isolation: isolate; min-height: calc(100vh - 68px); display: grid; align-items: center; text-align: center; }
.cc-e404__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.cc-e404::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 50% 46% at 50% 50%, rgba(246, 248, 252, .95), rgba(246, 248, 252, .6) 70%, transparent); }
.cc-e404__in { padding: 96px 0; }
.cc-e404__code { margin: 0; font-size: clamp(120px, 20vw, 260px); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: transparent;
  background: linear-gradient(180deg, var(--cc-dark), var(--cc-accent)); -webkit-background-clip: text; background-clip: text; }
.cc-e404 h1 { margin: 18px 0 0; font-size: clamp(24px, 2.6vw, 34px) !important; font-weight: 800; }
.cc-e404__lead { margin: 10px auto 28px; max-width: 30em; color: var(--cc-ink-2); }
.cc-e404__go { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- 内容块 ---------- */
.cc-block__title { margin: 0 0 16px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -.02em; }
.cc-block__specs { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 32px; }
.cc-block__specs div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--cc-line); }
.cc-block__specs dt { color: var(--cc-muted); font-weight: 600; }
.cc-block__specs dd { margin: 0; font-weight: 700; text-align: right; }
.cc-block__img { display: block; max-width: 100%; border-radius: var(--cc-r-3); }
.cc-block--cta { padding: 32px; border-radius: var(--cc-r-3); background: var(--cc-surface-2); }

@media (max-width: 1180px) {
  .cc-mast__in, .cc-lsec, .cc-ded, .cc-ipx, .cc-dcx, .cc-own, .cc-legal, .cc-contact { grid-template-columns: minmax(0, 1fr); }
  .cc-mast__in { gap: 32px; align-items: start; }
  .cc-matrix { min-width: 0; width: 100%; }
  .cc-lsec { gap: 24px; }
  .cc-lsec__file, .cc-quote, .cc-dcx__globe, .cc-legal__nav { position: static; }
  .cc-ipx__notes { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 20px; justify-items: start; }
  .cc-dcx__globe { max-width: 520px; width: 100%; margin-inline: auto; }
  .cc-legal__nav { display: grid; gap: 8px; }
  .cc-legal__docs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .cc-legal__tocl, .cc-legal__toc { display: none; }
  .cc-own { gap: 20px; }
}
@media (max-width: 640px) {
  .cc-mast { padding: 44px 0 36px; }
  .cc-mast__lead { font-size: 16px; }
  .cc-matrix tbody th { padding: 14px 12px; font-size: 14px; }
  .cc-matrix thead th, .cc-matrix td a, .cc-matrix td .cc-na { padding-left: 12px; padding-right: 12px; }
  .cc-matrix td b { font-size: 17px; }
  .cc-lsec { padding: 40px 0; }
  .cc-news a { grid-template-columns: auto minmax(0, 1fr); }
  .cc-pb__row > [role="cell"]:last-child { grid-column: 1 / -1; }
  .cc-sheet { padding: 20px 18px 8px; }
  .cc-sheet__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cc-steps__rail { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cc-steps__rail li:not(:last-child)::after { left: 18px; right: auto; top: 40px; bottom: -18px; width: 2px; height: auto; background: linear-gradient(180deg, var(--cc-dark), var(--cc-accent)); }
  .cc-steps__rail li { padding: 0 0 0 56px; }
  .cc-steps__n { position: absolute; left: 0; top: -6px; }
  .cc-about { padding: 64px 0 48px; }
  .cc-about__facts { grid-template-columns: 1fr 1fr; }
  .cc-own__dl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cc-corp { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .cc-contact { gap: 36px; padding-top: 44px; }
  .cc-contact__two { grid-template-columns: minmax(0, 1fr); }
  .cc-contact__form { padding: 22px 18px; }
  .cc-chan li > * { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cc-dcx__body { padding-left: 4px; }
  .cc-legal { padding-top: 32px; gap: 28px; }
}

/* ---------- v0.2：IP 页（计算器、权属、用法）、系统 Logo ---------- */
.cc-mast--ip .cc-mast__in { align-items: start; }
.cc-mast--cloud .cc-mast__in { align-items: start; } /* 左侧文字比右侧矩阵矮：顶部对齐 + 少量下移，避免底对齐下沉、居中又显得卡片高出 */
.cc-mast--cloud .cc-mast__copy { padding-top: 16px; }
.cc-ipchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cc-ipchips li { padding: 7px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--cc-line); font-size: 13px; font-weight: 700; color: var(--cc-ink-2); }
.cc-calc { width: 440px; padding: 24px; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-2); }
.cc-calc__head { display: grid; gap: 2px; margin-bottom: 16px; }
.cc-calc__head b { font-size: 18px; font-weight: 800; color: var(--cc-dark); }
.cc-calc__head span { font-size: 13px; color: var(--cc-muted); }
.cc-calc__res { display: grid; gap: 6px; }
.cc-calc__res label { position: relative; margin: 0; cursor: pointer; }
.cc-calc__res input { position: absolute; opacity: 0; }
.cc-calc__res span { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--cc-line-2); font-weight: 700; color: var(--cc-ink); transition: box-shadow .2s, background-color .2s; }
.cc-calc__res i { font: 600 12px var(--cc-font); font-style: normal; color: var(--cc-accent-ink); min-width: 8ch; font-variant-numeric: tabular-nums; }
.cc-calc__res input:checked + span { background: var(--cc-surface-sel); box-shadow: inset 0 0 0 2px var(--cc-accent); }
.cc-calc__res input:focus-visible + span { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.cc-calc__qty { display: grid; grid-template-columns: auto minmax(0, 1fr) 72px; gap: 12px; align-items: center; margin: 18px 0 6px; }
.cc-calc__qty label { margin: 0; font-size: 13px; font-weight: 700; color: var(--cc-muted); }
.cc-calc__qty input { width: 100%; accent-color: var(--cc-dark); }
.cc-calc__qty output { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cc-dark); }
.cc-calc__out { margin: 8px 0 16px; display: grid; }
.cc-calc__out div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--cc-line); font-size: 14px; }
.cc-calc__out dt { color: var(--cc-muted); font-weight: 600; }
.cc-calc__out dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-calc__total { border-top: 1px solid var(--cc-dark) !important; padding-top: 12px !important; align-items: baseline; }
.cc-calc__total b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--cc-dark); }
.cc-calc__total small { color: var(--cc-muted); }
.cc-calc__note { margin: 10px 0 0; font-size: 12px; color: var(--cc-muted); text-align: center; }
.cc-ipsec { margin-top: 24px; }
.cc-ipsec__head { margin-bottom: 20px; }
.cc-ipsec__head h2, .cc-own2 h2 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.02em; }
.cc-ipsec__head p, .cc-own2__copy p { margin: 8px 0 0; color: var(--cc-muted); }
.cc-rec__head h3 { margin: 6px 0 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.cc-rec__price em { display: block; font-style: normal; font-size: 12px; color: var(--cc-muted); }
.cc-own2 { margin-top: 88px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding: 40px; border-radius: var(--cc-r-3); background: var(--cc-dark); color: var(--cc-dark-muted); }
.cc-own2 h2 { color: #fff; }
.cc-own2__copy p { color: var(--cc-dark-muted); }
.cc-own2__dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255, 255, 255, .12); border-radius: var(--cc-r-2); overflow: hidden; }
.cc-own2__dl div { padding: 18px 20px; background: var(--cc-dark); }
.cc-own2__dl dt { font-size: 12px; font-weight: 700; color: var(--cc-sun-2); }
.cc-own2__dl dd { margin: 4px 0 0; color: #fff; font-weight: 700; }
.cc-modes { margin-top: 88px; }
.cc-modes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cc-mode { position: relative; padding: 28px 28px 24px 84px; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); }
.cc-mode__n { position: absolute; left: 28px; top: 28px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--cc-surface-2); font: 800 16px var(--cc-font); color: var(--cc-accent-ink); }
.cc-mode h3 { margin: 0; font-size: 19px; font-weight: 800; }
.cc-mode p { margin: 8px 0 12px; color: var(--cc-ink-2); font-size: 14px; }
.cc-mode ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; color: var(--cc-muted); }
.cc-ipfaq { margin-top: 88px; }
.cc-ipx__notes { margin-top: 64px; }
.cc-steps__title .cc-vf, .cc-own__title .cc-vf { vertical-align: 8px; }
.cc-os__i { min-height: 68px; line-height: 1.25; }
.cc-os__i i.cc-os__logo { background: var(--cc-dark); -webkit-mask: var(--cc-logo) center / 62% no-repeat; mask: var(--cc-logo) center / 62% no-repeat; font-size: 0; }
.cc-os__i:nth-child(n) i.cc-os__logo { background: var(--cc-dark); }
.cc-rec__foot { min-height: 72px; }
@media (max-width: 1180px) {
  .cc-calc { width: 100%; }
  .cc-own2, .cc-modes__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
  .cc-calc { padding: 18px; }
  .cc-own2 { padding: 26px 20px; }
  .cc-own2__dl { grid-template-columns: minmax(0, 1fr); }
  .cc-mode { padding: 24px 20px 20px 20px; }
  .cc-mode__n { position: static; margin-bottom: 12px; }
}
.cc-signup__err { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--cc-danger-soft); color: var(--cc-danger); font-size: 13px; font-weight: 600; }
.cc-signup .cf-turnstile { width: 100%; }

/* ---------- 托管（机柜正视图：顶盖 + 两侧带方孔的安装立柱 + 盲板/设备 + 底座地脚） ---------- */
.cc-rack { --u: 8px; margin: 0 0 16px; width: 100%; }
.cc-colo .cc-quote { position: static; }
.cc-rack__mine::after { display: none; }
.cc-rack__cap { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 10px; font-size: 13px; }
.cc-rack__cap b { color: var(--cc-dark); font-weight: 800; }
.cc-rack__cap span { color: var(--cc-accent-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.cc-rack__cab { position: relative; padding: 0 10px; border-radius: 10px 10px 4px 4px; background: linear-gradient(90deg, #1b2240, #262f55 8%, #1d2547 50%, #262f55 92%, #1b2240); box-shadow: 0 30px 50px -24px rgba(15, 24, 56, .55), inset 0 0 0 1px #343e6b; }
.cc-rack__top { display: flex; align-items: center; justify-content: center; height: 24px; margin: 0 -10px; border-bottom: 1px solid #0b1027; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0, 0, 0, .35) 6px 9px) center / 70% 6px no-repeat, linear-gradient(#2d3763, #1e2649); border-radius: 10px 10px 0 0; }
.cc-rack__plate { padding: 2px 8px; border-radius: 3px; background: #c9cfdf; color: #1b2240; font: 800 9px/1.2 var(--cc-font); letter-spacing: .14em; font-style: normal; box-shadow: inset 0 -1px 0 #9aa3bd; }
.cc-rack__frame { display: grid; grid-template-columns: 20px minmax(0, 1fr) 20px; padding: 8px 0; background: #0b1027; }
.cc-rack__rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(42, var(--u)); background: linear-gradient(90deg, #3a4573, #56628f 45%, #3a4573); }
.cc-rack__rail li { position: relative; font: 700 7px/var(--u) var(--cc-font-num); color: #aab3d3; text-align: left; padding-left: 2px; font-variant-numeric: tabular-nums; }
.cc-rack__rail li:not(:nth-child(3n+1)) { color: transparent; }
.cc-rack__rail li::after, .cc-rack__rail--r { background-image: radial-gradient(circle at 50% 50%, #0b1027 1.6px, transparent 2px); }
.cc-rack__rail li::after { content: ""; position: absolute; right: 2px; top: 0; width: 6px; height: 100%; background-size: 6px 5px; }
.cc-rack__rail li.is-on { color: var(--cc-sun-2); }
.cc-rack__rail li.is-on:not(:nth-child(3n+1)) { color: transparent; }
.cc-rack__rail--r { background-color: #3a4573; background-size: 6px 5px; background-position: 2px 0; background-repeat: repeat-y; background-image: radial-gradient(circle at 50% 50%, #0b1027 1.6px, transparent 2px), linear-gradient(90deg, #3a4573, #56628f 55%, #3a4573); background-size: 6px 5px, 100% 100%; background-repeat: repeat-y, no-repeat; }
.cc-rack__bay > * { grid-column: 1; }
.cc-rack__bay { position: relative; display: grid; grid-template-rows: repeat(42, var(--u)); padding: 0 1px; }
.cc-blank { margin: 0 0 1px; border-radius: 1px; background: linear-gradient(#262e52, #1f2747 60%, #1a2140); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.cc-dev { position: relative; display: grid; grid-template-columns: 9px minmax(0, 1fr) auto 9px; align-items: center; gap: 4px; margin: 0 0 1px; border-radius: 2px; background: linear-gradient(#e7eaf2, #c3c9da); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #8c95ae; animation: cc-dev-in .45s var(--cc-ease) both; }
.cc-dev__ear { align-self: stretch; background: radial-gradient(circle, #6d7693 1.4px, transparent 1.8px) center / 9px 100% no-repeat, linear-gradient(#b5bcd0, #969fb8); }
.cc-dev__ear:first-child { border-radius: 2px 0 0 2px; }
.cc-dev__ear:last-child { border-radius: 0 2px 2px 0; }
.cc-dev__face { align-self: stretch; margin: 2px 0; border-radius: 1px; background: repeating-linear-gradient(90deg, #2b3456 0 13px, #8b93ab 13px 14px); box-shadow: inset 0 0 0 1px #1a2140; }
.cc-dev__led { width: 4px; height: 4px; border-radius: 50%; background: var(--cc-accent); box-shadow: 0 0 5px var(--cc-accent); }
.cc-dev--s2 .cc-dev__face { background: repeating-linear-gradient(90deg, #2b3456 0 10px, #8b93ab 10px 11px), #2b3456; background-size: 100% 50%; background-repeat: repeat-y; }
.cc-dev--st .cc-dev__face { background: repeating-linear-gradient(90deg, #2b3456 0 18px, #8b93ab 18px 19px), repeating-linear-gradient(#2b3456 0 9px, #8b93ab 9px 10px); background-blend-mode: lighten; }
.cc-dev--sw { background: linear-gradient(#2f3a66, #232c52); box-shadow: inset 0 1px 0 #4a5688; }
.cc-dev--sw .cc-dev__face { margin: 3px 0; background: repeating-linear-gradient(90deg, #0b1027 0 5px, #6f7ba8 5px 7px); box-shadow: none; }
.cc-dev--sw .cc-dev__ear { background: linear-gradient(#3a4573, #2a3360); }
.cc-dev--sw .cc-dev__led { background: var(--cc-sun); box-shadow: 0 0 5px var(--cc-sun); }
.cc-dev__led { animation: cc-led 2.4s steps(1) infinite; }
.cc-dev:nth-child(3n) .cc-dev__led { animation-delay: -.8s; }
.cc-dev:nth-child(3n+1) .cc-dev__led { animation-delay: -1.6s; }
.cc-rack__mine { position: relative; z-index: 1; margin: -2px -1px -1px; border: 2px solid var(--cc-sun); border-radius: 4px; pointer-events: none; box-shadow: 0 0 0 4px rgba(245, 165, 36, .18); }
.cc-rack__mine::after { content: attr(data-n); position: absolute; left: calc(100% + 38px); bottom: -2px; padding: 2px 7px; border-radius: 4px; background: var(--cc-sun); color: var(--cc-dark); font: 800 11px/1.3 var(--cc-font-num); }
.cc-rack__base { display: flex; justify-content: space-between; height: 16px; margin: 0 -10px; padding: 0 14px; border-radius: 0 0 4px 4px; background: linear-gradient(#1e2649, #141a36); border-top: 1px solid #343e6b; }
.cc-rack__base i { width: 26px; height: 8px; margin-top: 16px; border-radius: 0 0 3px 3px; background: #2a3257; }
.cc-rack__note { margin: 10px 4px 0; font-size: 12px; line-height: 1.5; color: var(--cc-muted); }
@keyframes cc-dev-in { from { opacity: 0; transform: translateX(14px); } }
@keyframes cc-led { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cc-dev, .cc-dev__led { animation: none; } }
.cc-colo__sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 18px; }
.cc-colo__size { margin: 0; cursor: pointer; }
.cc-colo__size input { position: absolute; opacity: 0; pointer-events: none; }
.cc-colo__size span { display: grid; gap: 2px; height: 100%; padding: 14px 16px; border-radius: var(--cc-r-2); box-shadow: inset 0 0 0 1px var(--cc-line-2); background: #fff; transition: box-shadow var(--cc-dur), background var(--cc-dur); }
.cc-colo__size b { font-size: 16px; color: var(--cc-dark); }
.cc-colo__size em { font-style: normal; font: 700 12px var(--cc-font-num); color: var(--cc-accent-ink); }
.cc-colo__size small { font-size: 12px; color: var(--cc-muted); line-height: 1.45; }
.cc-colo__size input:checked + span { background: var(--cc-surface-sel); box-shadow: inset 0 0 0 2px var(--cc-accent); }
.cc-colo__size input:focus-visible + span { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.cc-colo__t2 { margin-top: 8px; }
.cc-body .cc-sheet__row select { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--cc-field); border-radius: var(--cc-r-1); background: #fbfcfe; font: 600 15px var(--cc-font); color: var(--cc-ink); }
.cc-colo__pick { margin: 10px 0 0; font: 800 26px/1.2 var(--cc-font); color: #fff; }
.cc-colo__pick:empty { display: none; }
.cc-colo__inc { margin-top: 88px; }
.cc-colo__inc ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--cc-dark); }
.cc-colo__inc li { display: grid; gap: 4px; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--cc-line); }
.cc-colo__inc li b { font-size: 16px; color: var(--cc-dark); }
.cc-colo__inc li span { font-size: 14px; color: var(--cc-muted); }
.cc-colo__dcs { margin-top: 88px; }
.cc-colo__dcs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
.cc-colo__dcs li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--cc-line); }
.cc-colo__dcs li b { color: var(--cc-dark); }
.cc-colo__dcs li span { grid-column: 2; font-size: 13px; color: var(--cc-muted); }
@media (max-width: 1080px) {
  .cc-colo__sizes, .cc-colo__inc ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-colo__dcs ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .cc-rack__mine::after { display: none; }
  .cc-rack { max-width: 340px; margin: 0 auto 20px; }
}
@media (max-width: 560px) {
  .cc-rack { --u: 8px; }
  .cc-colo__sizes, .cc-colo__inc ul { grid-template-columns: minmax(0, 1fr); }
}

/* 云服务器线路档案：“包含服务”逐条成标签，不再用 · 连成一句 */
.cc-lsec__dl .cc-extras { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-lsec__dl .cc-extras span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--cc-sun-soft); color: var(--cc-sun-ink); font-size: 13px; font-weight: 700; line-height: 1.3; }
.cc-lsec__dl .cc-extras span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cc-sun); flex: none; }
.cc-colo__t2 { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--cc-line); }
.cc-body .cc-sheet__row select:invalid, .cc-body .cc-sheet__row select:has(option[value=""]:checked) { color: var(--cc-muted); font-weight: 500; }
/* 托管：机柜顶边与左侧表单卡顶边对齐（标题行移到机柜下方）；U 号加大提亮；规格卡内容顶对齐 */
.cc-colo .cc-rack { display: flex; flex-direction: column; }
.cc-colo .cc-rack__cap { order: 2; margin: 12px 4px 0; }
.cc-colo .cc-rack__note { order: 3; margin-top: 4px; }
.cc-rack__rail li { font-size: 8px; color: #c8cfe8; }
.cc-colo__size span { align-content: start; }

/* register.php 服务条款同意块 */
.cc-consent { position: relative; display: flex; gap: 16px; align-items: flex-start; max-width: 640px; margin: 8px auto 24px; padding: 20px 22px; border: 1px solid var(--cc-line, #e3e8f2); border-radius: 14px; overflow: hidden; padding-left: 26px; background: linear-gradient(135deg, #fff 0%, #fff8ec 100%); box-shadow: 0 10px 30px -18px rgba(15,24,56,.35); cursor: pointer; user-select: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.cc-consent:hover { box-shadow: 0 16px 36px -18px rgba(15,24,56,.45); transform: translateY(-1px); }
.cc-consent input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; left: 26px; top: 21px; cursor: pointer; }
.cc-consent__box { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 2px solid #b8c2d6; border-radius: 6px; background: #fff; transition: background .15s, border-color .15s, box-shadow .15s; }
.cc-consent__box::after { content: ""; width: 11px; height: 6px; margin-top: -3px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) scale(0); transition: transform .18s var(--cc-ease, ease); }
.cc-consent:hover .cc-consent__box { border-color: var(--cc-dark, #0f1838); }
.cc-consent input:checked + .cc-consent__box { background: var(--cc-dark, #0f1838); border-color: var(--cc-dark, #0f1838); }
.cc-consent input:checked + .cc-consent__box::after { transform: rotate(-45deg) scale(1); }
.cc-consent input:focus-visible + .cc-consent__box { box-shadow: 0 0 0 4px rgba(42,92,255,.18); }
.cc-consent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cc-sun, #f5a524); transition: background .2s; }
.cc-consent:has(input:checked)::before { background: var(--cc-dark, #0f1838); }
.cc-consent__body { display: grid; gap: 4px; line-height: 1.55; }
.cc-consent__body strong { font-size: 15px; font-weight: 600; color: var(--cc-dark, #0f1838); }
.cc-consent__body a { color: var(--cc-dark, #0f1838); font-weight: 700; text-decoration: underline; text-decoration-color: var(--cc-sun, #f5a524); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cc-consent__body small { font-size: 13px; color: var(--cc-muted, #5b6680); }

/* console.css — 会员中心外壳（左侧栏 + 顶条）与自排版页面；登录注册分栏。由 M0 定稿 k-lumen/client.html 移植。 */

/* ---------- 外壳 ---------- */
.cc-m-console { background: var(--cc-bg); }
.cc-con { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(90deg, var(--cc-surface) 251px, var(--cc-line) 251px 252px, transparent 252px); }
.cc-con__side { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 22px 16px; background: var(--cc-surface); border-right: 1px solid var(--cc-line); }
.cc-con__side .cc-brand { padding: 4px 10px 6px; }
.cc-con__new { width: 100%; justify-content: center; min-height: 42px; }
.cc-con__nav { display: grid; gap: 2px; }
.cc-con__nav--sub { padding-top: 14px; border-top: 1px solid var(--cc-line); }
.cc-con__nav a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 10px; text-decoration: none !important; font-size: 14px; font-weight: 600; color: var(--cc-ink-2); transition: background-color .15s, color .15s; }
.cc-con__nav a:hover { background: var(--cc-surface-2); color: var(--cc-dark); }
.cc-con__nav a[aria-current="page"] { background: var(--cc-dark); color: #fff; }
.cc-con__nav a[aria-current="page"] .cc-ic { background: var(--cc-sun-2); }
.cc-n { margin-left: auto; min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--cc-surface-2); font: 700 11px/1.4 var(--cc-font); text-align: center; color: var(--cc-ink-2); font-variant-numeric: tabular-nums; }
.cc-n--warn { background: var(--cc-sun-soft); color: var(--cc-sun-ink); }
.cc-con__nav a[aria-current="page"] .cc-n { background: rgba(255, 255, 255, .16); color: #fff; }
.cc-con__help { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 14px; background: var(--cc-surface-2); font-size: 13px; color: var(--cc-muted); }
.cc-con__help b { color: var(--cc-ink); font-size: 14px; } .cc-con__help .cc-arrow { margin-top: 8px; font-size: 13px; }
.cc-con__more { display: none; }

/* 图标（mask 几何图形） */
.cc-ic { flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
/* icons:begin */
.cc-ic--home { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 9 10 3l7 6v8H3z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--srv { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='3' width='14' height='6' rx='1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Crect x='3' y='11' width='14' height='6' rx='1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--bill { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2h10v16l-2.5-1.5L10 18l-2.5-1.5L5 18zM8 7h4M8 11h4' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--fund { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 6h13a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a2 2 0 0 1 2-2h9v3M13 11.5h1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--tk { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 4h14v10H8l-4 3V4z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--dom { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M3 10h14M10 3c-3 4-3 10 0 14M10 3c3 4 3 10 0 14' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--ref { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 8h14v9H3zM2 5h16v3H2zM10 5v12M10 5C8 1 5 3 7 5M10 5c2-4 5-2 3 0' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--user { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='7' r='3.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M3 18c1-4 4-5.5 7-5.5s6 1.5 7 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--users { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='7.5' cy='7' r='3' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M2 17c.8-3.4 3-4.8 5.5-4.8S12.2 13.6 13 17M13 4.3a3 3 0 0 1 0 5.4M15 12.6c1.6.6 2.6 2 3 4.4' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--lg { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 14h3l2-8 3 11 3-14 2 11h3' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--kb { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 4c3-1 5 0 7 1.5C12 4 14 3 17 4v12c-3-1-5 0-7 1.5C8 16 6 15 3 16z M10 5.5v12' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--ann { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 8v4h3l6 4V4L6 8zM15 7.5c1 .7 1.5 1.5 1.5 2.5s-.5 1.8-1.5 2.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--shield { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2 4 4.5V9c0 4 2.6 7.2 6 9 3.4-1.8 6-5 6-9V4.5z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='m7.5 10 2 2 3.5-4' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--key { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='6.5' cy='13.5' r='3.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='m9 11 8-8M14 6l2 2M12 8l1.5 1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--mail { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='4.5' width='15' height='11' rx='1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='m3 5.5 7 5.5 7-5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--card { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='4.5' width='16' height='11' rx='1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M2 8.5h16M5 12.5h3' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--cart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 3h2.5l2 10h9.5l1.5-7H5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='16.5' r='1.2' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='15' cy='16.5' r='1.2' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--chart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 3v14h14M7 13V9M11 13V6M15 13v-3' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--dl { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3v10M6 9l4 4 4-4M3 15v2h14v-2' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--gear { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='2.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M10 2v2.5M10 15.5V18M2 10h2.5M15.5 10H18M4.3 4.3l1.8 1.8M13.9 13.9l1.8 1.8M4.3 15.7l1.8-1.8M13.9 6.1l1.8-1.8' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--gift { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 8h14v9H3zM2 5h16v3H2zM10 5v12' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--link { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.5 11.5a3.5 3.5 0 0 0 5 0l2.5-2.5a3.5 3.5 0 0 0-5-5l-1 1M11.5 8.5a3.5 3.5 0 0 0-5 0L4 11a3.5 3.5 0 0 0 5 5l1-1' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--star { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m10 2.5 2.3 4.8 5.2.7-3.8 3.6.9 5.2L10 14.3l-4.6 2.5.9-5.2L2.5 8l5.2-.7z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--sms { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 4h14v10H8l-4 3V4z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M7 9h.01M10 9h.01M13 9h.01' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-ic--dot { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4' fill='%23000'/%3E%3C/svg%3E"); }
/* icons:end */

/* 顶条 */
.cc-con__main { display: flex; flex-direction: column; min-width: 0; }
.cc-con__bar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 64px; padding: 0 32px; background: rgba(246, 248, 252, .9); border-bottom: 1px solid var(--cc-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cc-con__me > li > a { max-width: 220px; }
.cc-con__bar .dropdown-menu { margin-top: 10px; padding: 8px; border: 0; border-radius: var(--cc-r-2); box-shadow: var(--cc-shadow-2); min-width: 220px; }
.cc-con__bar .dropdown-menu a.dropdown-item { display: block; padding: 8px 12px !important; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--cc-ink-2); }
.cc-con__bar .dropdown-menu a.dropdown-item:hover { background: var(--cc-surface-2); color: var(--cc-dark); }
.cc-con__bar .dropdown-menu li.dropdown-item { padding: 0; background: none; }

/* 主体 */
.cc-con__body { flex: 1; width: 100%; max-width: none; padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 24px; }
.cc-con__title h1 { margin: 0; font-size: clamp(24px, 2.4vw, 32px) !important; letter-spacing: -.02em; }
.cc-con__title p, .cc-con__lead { margin: 6px 0 0; color: var(--cc-ink-2); max-width: 52em; }
.cc-con__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 24px 32px 32px; font-size: 12px; color: var(--cc-muted); }
.cc-con__foot nav { display: flex; gap: 18px; flex-wrap: wrap; } .cc-con__foot a { color: var(--cc-muted); } .cc-con__foot a:hover { color: var(--cc-accent-ink); }
/* WHMCS 自带页面在会员中心里：去掉 Bootstrap 卡片的厚重感 */
.cc-m-console .cc-con__body > .card, .cc-m-console .cc-con__body form > .card { border: 0; border-radius: var(--cc-r-3); box-shadow: var(--cc-shadow-1); }

/* 分段标签（WHMCS 侧栏 → 一行） */
.cc-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--cc-surface-2); align-self: flex-start; max-width: 100%; }
.cc-tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--cc-ink-2); text-decoration: none !important; white-space: nowrap; }
.cc-tabs a:hover { color: var(--cc-dark); background: rgba(255, 255, 255, .6); }
.cc-tabs a[aria-current="page"] { background: var(--cc-surface); color: var(--cc-dark); box-shadow: 0 1px 2px rgba(15, 24, 56, .08), 0 0 0 1px var(--cc-line); }
.cc-tabs__body { font-size: 14px; color: var(--cc-ink-2); }

/* ---------- 通用：面板、列表、状态 ---------- */
.cc-panel { padding: 22px 24px; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cc-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cc-panel__head h2 { margin: 0; font-size: 17px !important; }
.cc-panel__head small { color: var(--cc-muted); font-size: 12px; }
.cc-panel__head .cc-arrow { font-size: 13px; }
.cc-panel__html { font-size: 14px; color: var(--cc-ink-2); }
.cc-con .cc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px 24px; border-radius: var(--cc-r-2); background: var(--cc-surface-2); color: var(--cc-muted); text-align: center; }
.cc-empty p { margin: 0; }
.cc-muted { color: var(--cc-muted); font-size: 13px; }
.cc-st { display: inline-block; font-style: normal; font-size: 12px; font-weight: 700; line-height: 1.5; padding: 2px 8px; border-radius: 6px; background: var(--cc-surface-2); color: var(--cc-ink-2); white-space: nowrap; }
.cc-st--active, .cc-st--paid, .cc-st--completed { background: var(--cc-ok-soft); color: var(--cc-ok); }
.cc-st--unpaid, .cc-st--pending, .cc-st--answered, .cc-st--paymentpending { background: var(--cc-sun-soft); color: var(--cc-sun-ink); }
.cc-st--overdue, .cc-st--suspended, .cc-st--fraud, .cc-st--collections { background: var(--cc-danger-soft); color: var(--cc-danger); }
.cc-st--customerreply, .cc-st--inprogress, .cc-st--open { background: var(--cc-accent-soft); color: var(--cc-accent-ink); }
.cc-dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #a8b0c4; box-shadow: 0 0 0 4px rgba(168, 176, 196, .2); }
.cc-dot--active { background: var(--cc-ok); box-shadow: 0 0 0 4px rgba(31, 122, 77, .14); }
.cc-dot--pending { background: var(--cc-sun); box-shadow: 0 0 0 4px rgba(245, 165, 36, .18); }
.cc-dot--suspended, .cc-dot--fraud { background: var(--cc-danger); box-shadow: 0 0 0 4px rgba(192, 54, 44, .14); }
.cc-ilist { list-style: none; margin: 0; padding: 0; display: grid; }
.cc-ilist > li > a, .cc-ilist > li > span:first-child:not(:only-child), .cc-ilist > li:not(:has(> a)) { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--cc-line); text-decoration: none !important; font-size: 14px; color: var(--cc-ink); }
.cc-ilist > li:last-child > a, .cc-ilist > li:last-child { border-bottom: 0; }
.cc-ilist span small, .cc-ilist a small { display: block; font-size: 12px; color: var(--cc-muted); font-weight: 500; }
.cc-ilist b { font-variant-numeric: tabular-nums; }
.cc-ilist--stack > li > a { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cc-ilist--stack b { font-size: 14px; } .cc-ilist a:hover b { color: var(--cc-accent-ink); }
.cc-ilist__none { padding: 12px 0; color: var(--cc-muted); font-size: 14px; display: block !important; }
.cc-back { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--cc-muted) !important; text-decoration: none !important; margin-bottom: -12px; }
.cc-back:hover { color: var(--cc-accent-ink) !important; }
.cc-note { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-radius: 14px; font-size: 14px; background: var(--cc-accent-soft); color: var(--cc-ink); }
.cc-note--warn { background: var(--cc-sun-soft); } .cc-note--danger { background: var(--cc-danger-soft); }
.cc-arrow { font-weight: 700; color: var(--cc-accent-ink) !important; text-decoration: none !important; white-space: nowrap; }
.cc-ic--fund { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 6h13a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a2 2 0 0 1 2-2h9v3M13 11.5h1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* console2.css — 会员中心各页版式：仪表盘、服务、账单、工单、服务详情。 */

/* ---------- 仪表盘 ---------- */
.cc-hello { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; padding: 32px; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); }
.cc-hello__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.cc-hello::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #fff 35%, rgba(255, 255, 255, .55) 70%, rgba(255, 255, 255, .15)); }
.cc-hello .cc-eyebrow { margin-bottom: 10px; }
.cc-hello h1 { margin: 0; font-size: 30px !important; font-weight: 800; letter-spacing: -.03em; }
.cc-hello__in > p:not(.cc-eyebrow) { margin: 8px 0 0; color: var(--cc-ink-2); }
.cc-hello__btns { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.cc-kpi { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); border-radius: var(--cc-r-2); background: rgba(255, 255, 255, .86); box-shadow: 0 0 0 1px var(--cc-line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cc-kpi > div { padding: 14px 18px; } .cc-kpi > div + div { border-left: 1px solid var(--cc-line); }
.cc-kpi dt { font-size: 12px; font-weight: 700; color: var(--cc-muted); }
.cc-kpi dd { margin: 4px 0 0; display: flex; flex-direction: column; }
.cc-kpi b { font: 800 22px/1.2 var(--cc-font); font-variant-numeric: tabular-nums; color: var(--cc-dark); white-space: nowrap; }
.cc-kpi--sun b { color: var(--cc-sun-ink); }
.cc-kpi small { font-size: 12px; color: var(--cc-muted); }
.cc-dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.cc-panel--wide { grid-column: 1 / -1; }
.cc-due { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px; border-radius: 14px; background: #fff7e8; box-shadow: inset 0 0 0 1px #f6d69a; }
.cc-due div { display: flex; flex-direction: column; min-width: 0; }
.cc-due small { font-size: 12px; color: var(--cc-sun-ink); font-weight: 700; }
.cc-due b { font: 800 26px/1.2 var(--cc-font); font-variant-numeric: tabular-nums; color: var(--cc-dark); }
.cc-due span { font-size: 12px; color: var(--cc-muted); }
.cc-due--ok { background: var(--cc-ok-soft); box-shadow: none; } .cc-due--ok b { font-size: 15px; color: var(--cc-ok); }
.cc-panel--promo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 480px); align-items: center; gap: 12px 32px; background: var(--cc-dark); box-shadow: none; color: var(--cc-dark-muted); }
.cc-panel--promo .cc-eyebrow { color: var(--cc-sun-2); margin-bottom: 4px; }
.cc-panel--promo h2 { margin: 0; color: #fff !important; font-size: 18px !important; }
.cc-panel--promo > .cc-btn { justify-self: end; }
.cc-copy { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); font-size: 12px; }
.cc-copy code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px var(--cc-font-mono); color: #fff; background: none; padding: 0; }
.cc-more { border-radius: var(--cc-r-3); }
.cc-more > summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--cc-muted); padding: 4px 0; list-style: none; }
.cc-more > summary::before { content: "+ "; } .cc-more[open] > summary::before { content: "− "; }
.cc-more__grid { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; align-items: start; }

/* 服务行 */
.cc-svc { display: grid; }
.cc-svc__row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr) 112px; align-items: center; gap: 16px; padding: 14px 12px; border-radius: 12px; text-decoration: none !important; font-size: 14px; font-weight: 600; color: var(--cc-ink) !important; font-variant-numeric: tabular-nums; transition: background-color .15s; }
.cc-svc__row + .cc-svc__row { background: linear-gradient(var(--cc-line), var(--cc-line)) top center / calc(100% - 24px) 1px no-repeat; }
.cc-svc__row:hover { background: var(--cc-surface-sel); } .cc-svc__row:hover + .cc-svc__row { background-image: none; }
.cc-svc__row small { display: block; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--cc-muted); }
.cc-svc__name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cc-svc__name > span { display: flex; flex-direction: column; min-width: 0; }
.cc-svc__name b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-svc__st { justify-self: end; min-width: 0; display: flex; align-items: center; }
.cc-svc__st .cc-st { height: 22px; display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; }
/* 剩余天数：并入“到期”小标题（到期 · 剩 N 天），不再是状态旁的胶囊；只有临期 / 逾期才着色 */
.cc-svc__left, .cc-svc__left-m { font-style: normal; font-size: inherit; font-weight: inherit; white-space: nowrap; color: inherit; }
.cc-svc__left--soon { color: var(--cc-sun-ink); font-weight: 700; } .cc-svc__left--over { color: var(--cc-danger); font-weight: 700; }
.cc-svc__row[data-status="suspended"] .cc-svc__left:not(.cc-svc__left--over) { color: var(--cc-muted); }
.cc-svc__row .cc-svc__left-m { display: none; }
.cc-svc__ip { font-family: var(--cc-font-mono); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-svc__ip small { font-family: var(--cc-font); } .cc-svc__ip em { font-style: normal; color: var(--cc-muted); }
.cc-svc__row[data-status="terminated"], .cc-svc__row[data-status="cancelled"] { opacity: .6; }
.cc-svc__row[hidden] { display: none; }

/* 列表工具条 */
.cc-list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cc-list-tools > p { margin: 0 auto 0 0; color: var(--cc-ink-2); }
.cc-list-tools__q { width: 260px !important; min-height: 40px !important; }
.cc-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--cc-surface-2); }
.cc-seg button { border: 0; background: none; min-height: 34px; padding: 0 14px; border-radius: 9px; font: 600 13px var(--cc-font); color: var(--cc-ink-2); cursor: pointer; }
.cc-seg button[aria-pressed="true"] { background: var(--cc-surface); color: var(--cc-dark); box-shadow: 0 1px 2px rgba(15, 24, 56, .1); }

/* ---------- 账单 ---------- */
.cc-paybox { padding: 22px 24px; border-radius: var(--cc-r-3); background: #fff7e8; box-shadow: inset 0 0 0 1px #f6d69a; display: grid; gap: 4px; }
.cc-paybox h2 { margin: 0 0 6px; font-size: 13px !important; color: var(--cc-sun-ink); text-transform: uppercase; letter-spacing: .08em; }
.cc-paybox__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 18px; padding: 12px 0; border-top: 1px solid #f3dcae; text-decoration: none !important; color: var(--cc-ink) !important; }
.cc-paybox__row:first-of-type { border-top: 0; }
.cc-paybox__row > span:first-child { font: 600 14px var(--cc-font-mono); } .cc-paybox__row small { display: block; font: 600 12px var(--cc-font); color: var(--cc-muted); }
.cc-paybox__row b { font: 800 24px/1.1 var(--cc-font); font-variant-numeric: tabular-nums; color: var(--cc-dark); }
.cc-ledger { list-style: none; margin: 0; padding: 0; position: relative; }
.cc-ledger::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--cc-line); }
.cc-ledger a { position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr) auto 88px; align-items: center; gap: 16px; padding: 12px 8px 12px 26px; border-radius: 10px; text-decoration: none !important; color: var(--cc-ink) !important; font-size: 14px; }
.cc-ledger a::before { content: ""; position: absolute; left: 1px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--cc-surface); box-shadow: inset 0 0 0 2px var(--cc-line-2); }
.cc-ledger a:hover { background: var(--cc-surface-sel); }
.cc-ledger time { font-size: 13px; color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cc-ledger__no { font-family: var(--cc-font-mono); } .cc-ledger b { font-variant-numeric: tabular-nums; text-align: right; } .cc-ledger .cc-st { justify-self: end; }

/* ---------- 工单 ---------- */
.cc-thread { list-style: none; margin: 0; padding: 0; }
.cc-thread a { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 10px; border-radius: 12px; text-decoration: none !important; color: var(--cc-ink) !important; }
.cc-thread li + li a { box-shadow: 0 -1px 0 var(--cc-line); }
.cc-thread a:hover { background: var(--cc-surface-sel); box-shadow: none; }
.cc-thread .label { justify-self: start; }
.cc-thread__t { display: flex; flex-direction: column; min-width: 0; }
.cc-thread__t b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-thread__t small { font-size: 12px; color: var(--cc-muted); }
.cc-thread a.is-unread b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--cc-sun); vertical-align: middle; }
.cc-thread time { font-size: 13px; color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cc-depts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 760px; }
.cc-depts a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--cc-r-2); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); text-decoration: none !important; color: var(--cc-ink) !important; transition: box-shadow .2s, transform .2s; }
.cc-depts a:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--cc-accent), 0 24px 48px -32px rgba(15, 24, 56, .28); }
.cc-depts__n { font: 800 26px/1 var(--cc-font); color: var(--cc-line-2); font-variant-numeric: tabular-nums; }
.cc-depts b { display: block; font-size: 16px; } .cc-depts small { display: block; margin-top: 3px; font-size: 13px; color: var(--cc-muted); }
.cc-depts i { font-style: normal; font-size: 18px; color: var(--cc-accent-ink); }
.cc-tkhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cc-tkhead h1 { margin: 6px 0 10px; font-size: clamp(22px, 2.2vw, 30px) !important; }
.cc-tkhead__act { display: flex; gap: 8px; }
.cc-chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.cc-chat__m { max-width: min(760px, 88%); justify-self: end; }
.cc-chat__m.is-staff { justify-self: start; }
.cc-chat__who { display: flex; align-items: baseline; gap: 10px; margin: 0 6px 6px; font-size: 13px; }
.cc-chat__m:not(.is-staff) .cc-chat__who { justify-content: flex-end; }
.cc-chat__role { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: var(--cc-surface-2); color: var(--cc-muted); }
.cc-chat__m.is-staff .cc-chat__role { background: var(--cc-dark); color: #fff; }
.cc-chat__who time { color: var(--cc-muted); font-size: 12px; }
.cc-chat__body { padding: 16px 18px; border-radius: 18px 18px 6px 18px; background: var(--cc-accent-soft); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.cc-chat__m.is-staff .cc-chat__body { border-radius: 18px 18px 18px 6px; background: var(--cc-surface); box-shadow: var(--cc-shadow-1); }
.cc-chat__body p:last-child { margin-bottom: 0; }

.cc-chat__files { list-style: none; margin: 8px 6px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.cc-chat__files a { display: inline-flex; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--cc-surface); box-shadow: 0 0 0 1px var(--cc-line); text-decoration: none; }
.cc-reply { position: sticky; bottom: 12px; z-index: 5; padding: 16px; border-radius: var(--cc-r-3); background: rgba(255, 255, 255, .96); box-shadow: var(--cc-shadow-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cc-reply .cc-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.cc-reply textarea { grid-column: 1 / -1; min-height: 96px !important; }
.cc-reply__files { display: grid; gap: 6px; min-width: 0; }
.cc-reply__files .input-group { max-width: 520px; }
/* 会话气泡覆盖 M1 全局 .ticket-reply 卡片样式 */
.cc-body .cc-chat .ticket-reply { border-radius: 0; box-shadow: none !important; background: none; margin: 0; overflow: visible; }
.cc-body .cc-chat .ticket-reply .posted-by { padding: 0; background: none; border: 0; }
.cc-body .cc-chat .ticket-reply .message { padding: 16px 18px; }
.cc-chat__m { min-width: min(420px, 100%); }
/* 回复框：编辑器整行，附件与发送按钮在下面一行 */
.cc-reply .cc-form { grid-template-columns: minmax(0, 1fr) auto; }
.cc-reply .cc-form > textarea, .cc-reply .cc-form > .EasyMDEContainer, .cc-reply .cc-form > .editor-toolbar, .cc-reply .cc-form > .CodeMirror, .cc-reply .cc-form > .editor-statusbar, .cc-reply .cc-form > .md-editor { grid-column: 1 / -1; }
.cc-reply .md-editor { border: 1px solid var(--cc-field); border-radius: 12px; overflow: hidden; background: var(--cc-surface); }
.cc-reply .md-editor > textarea { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; resize: vertical; }
.cc-reply .md-header { display: flex; gap: 4px; padding: 6px; margin: 0; background: var(--cc-surface-2); border-bottom: 1px solid var(--cc-line); }
.cc-reply .md-header .btn { min-height: 30px !important; padding: 0 9px !important; border: 0 !important; background: none !important; color: var(--cc-ink-2) !important; box-shadow: none !important; font-size: 13px; }
.cc-reply .md-header .btn:hover, .cc-reply .md-header .btn.active { background: var(--cc-surface) !important; color: var(--cc-dark) !important; }
.cc-reply .md-footer, .cc-reply .markdown-editor-status { padding: 4px 10px; font-size: 12px; color: var(--cc-muted); }
.cc-reply .cc-form > .cc-btn { align-self: end; }
.cc-reply .custom-file-label::after { content: "…"; }

/* console3.css — 服务详情铭牌、登录注册分栏、会员中心窄屏。 */

/* ---------- 服务详情 ---------- */
.cc-plate { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; padding: 30px 32px; border-radius: var(--cc-r-3); background: var(--cc-dark); color: var(--cc-dark-muted); }
.cc-plate__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .7; }
.cc-plate h1 { margin: 12px 0 4px; color: #fff !important; font-size: clamp(24px, 2.6vw, 34px) !important; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cc-plate p { margin: 0; }
.cc-plate__st { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 13px; font-weight: 700; }
.cc-plate__ip { margin: 0; display: grid; gap: 10px; text-align: right; }
.cc-plate__ip dt { font-size: 12px; font-weight: 700; color: var(--cc-dark-muted); }
.cc-plate__ip dd { margin: 2px 0 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.cc-plate__ip code { font: 600 20px/1.3 var(--cc-font-mono); color: #fff; background: none; padding: 0; }
.cc-plate__ip div + div code { font-size: 13px; color: #dbe2f7; }
.cc-plate__copy { border: 0; border-radius: 8px; padding: 4px 10px; background: var(--cc-sun); color: var(--cc-dark); font: 700 12px var(--cc-font); cursor: pointer; }
.cc-ruler { margin: 0; display: flex; flex-wrap: wrap; border-radius: var(--cc-r-2); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); }
.cc-ruler > div { flex: 1 1 140px; padding: 14px 18px; position: relative; }
.cc-ruler > div + div::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--cc-line); }
.cc-ruler dt { font-size: 12px; font-weight: 700; color: var(--cc-muted); }
.cc-ruler dd { margin: 4px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-ruler__due dd { color: var(--cc-sun-ink); } .cc-ruler__warn dd { color: var(--cc-danger); }
.cc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-act { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 10px; background: var(--cc-surface); box-shadow: 0 0 0 1px var(--cc-line); font-size: 14px; font-weight: 600; color: var(--cc-ink-2) !important; text-decoration: none !important; }
.cc-act:hover, .cc-act.is-on, .cc-act.active { color: var(--cc-dark) !important; box-shadow: 0 0 0 1.5px var(--cc-accent); }
.cc-act.disabled { opacity: .5; pointer-events: none; }
.cc-act--danger { color: var(--cc-danger) !important; } .cc-act--danger:hover { box-shadow: 0 0 0 1.5px var(--cc-danger); }
.cc-module__out { min-width: 0; overflow-x: auto; }
.cc-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.cc-kv { margin: 0; display: grid; }
.cc-kv > div { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cc-line); font-size: 14px; }
.cc-kv > div:last-child { border-bottom: 0; } .cc-kv dt { color: var(--cc-muted); font-weight: 600; } .cc-kv dd { margin: 0; overflow-wrap: anywhere; }
.cc-usage { display: grid; gap: 16px; }
.cc-usage > div { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 16px; font-size: 14px; }
.cc-bar { display: block; height: 8px; border-radius: 99px; background: var(--cc-surface-2); overflow: hidden; }
.cc-bar b { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cc-dark), var(--cc-accent)); }
.cc-narrow { max-width: 560px; }
.cc-pw { display: flex; gap: 8px; align-items: center; position: relative; }
.cc-pw .form-control { flex: 1; }

/* ---------- 登录注册分栏 ---------- */
.cc-m-auth { background: var(--cc-bg); }
.cc-auth { display: grid; grid-template-columns: minmax(360px, 5fr) 7fr; min-height: 100vh; }
.cc-auth__brand { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 36px 44px; background: var(--cc-dark); color: var(--cc-dark-muted); }
.cc-auth__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .85; }
.cc-auth__brand .cc-brand { color: #fff !important; }
.cc-auth__pitch .cc-eyebrow { color: var(--cc-sun-2); }
.cc-auth__pitch h2 { margin: 12px 0 28px; color: #fff !important; font-size: clamp(28px, 2.8vw, 40px) !important; line-height: 1.15; letter-spacing: -.03em; max-width: 12em; }
.cc-auth__pitch ol { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 26em; }
.cc-auth__pitch li { counter-increment: p; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: baseline; color: #dbe2f7; font-size: 15px; }
.cc-auth__pitch li::before { content: counter(p, decimal-leading-zero); font: 700 12px var(--cc-font-mono); color: var(--cc-sun-2); padding-top: 2px; }
.cc-auth__brand small { font-size: 12px; }
.cc-auth__main { display: flex; flex-direction: column; min-width: 0; }
.cc-auth__top { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 22px 40px; }
.cc-auth__mbrand { display: none !important; margin-right: auto; }
.cc-auth__body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px 40px 64px; }
.cc-auth__card { width: 100%; max-width: 420px; }
.cc-auth__card--wide { max-width: 860px; }
.cc-auth__card h1 { margin: 0; font-size: clamp(28px, 2.6vw, 36px) !important; letter-spacing: -.03em; }
.cc-auth__lead { margin: 10px 0 28px; color: var(--cc-ink-2); }
.cc-auth__alt { margin: 22px 0 0; font-size: 14px; color: var(--cc-muted); text-align: center; display: block; }
.cc-auth__alt a, .cc-auth__lead a { font-weight: 700; color: var(--cc-accent-ink); }
.cc-auth .alert { border-radius: 12px; margin-bottom: 18px; }
.cc-form { display: grid; gap: 16px; }
.cc-field { display: grid; gap: 6px; margin: 0; }
.cc-field > span:first-child { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--cc-ink); }
.cc-field > span:first-child a { font-weight: 600; color: var(--cc-muted); }
.cc-pw__eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; width: 36px; height: 36px; color: var(--cc-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
.cc-pw__eye:hover { color: var(--cc-ink); }
.cc-pw:has(.cc-pw__eye) .form-control { padding-right: 44px; }
.cc-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--cc-ink-2); font-weight: 500; }
.cc-check input { width: 16px; height: 16px; accent-color: var(--cc-dark); }
.cc-btn--block { width: 100%; justify-content: center; }
.cc-auth__inner .text-center { text-align: left !important; }
/* 注册表单：twenty-one 的卡片 → 带编号的分节（左编号，右字段） */
.cc-auth__card--wide #registration { counter-reset: s; }
.cc-auth__card--wide .card { counter-increment: s; border: 0; border-top: 1px solid var(--cc-line); border-radius: 0; background: none; box-shadow: none; margin: 0 !important; }
.cc-auth__card--wide .card-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 32px; padding: 26px 0 !important; }
.cc-auth__card--wide .card-body > .card-title { grid-column: 1; margin: 0; font-size: 15px !important; line-height: 1.4; }
.cc-auth__card--wide .card-body > .card-title::before { content: counter(s, decimal-leading-zero); display: block; margin-bottom: 6px; font: 700 12px var(--cc-font-mono); color: var(--cc-accent-ink); }
.cc-auth__card--wide .card-body > :not(.card-title) { grid-column: 2; }
.cc-auth__card--wide .card-body > .row { margin: 0 -8px; } .cc-auth__card--wide .card-body > .row > [class*="col"] { padding: 0 8px; }
.cc-auth__card--wide #registration > form > .text-center, .cc-auth__card--wide #registration form > p.text-center { text-align: left !important; padding-top: 20px; border-top: 1px solid var(--cc-line); }

/* ---------- 窄屏 ---------- */
@media (max-width: 1180px) {
  .cc-con { grid-template-columns: 1fr; background: none; }
  .cc-con__side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--cc-line); }
  .cc-con__new { width: auto; margin-left: auto; min-height: 36px; padding: 0 14px; }
  .cc-con__nav { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; order: 3; }
  .cc-con__nav a { white-space: nowrap; min-height: 38px; gap: 8px; }
  .cc-con__nav a .cc-n { margin-left: 0; }
  .cc-con__nav--sub { order: 4; gap: 4px 18px; padding: 0 12px; border-top: 0; }
  .cc-con__nav--sub a { min-height: 30px; padding: 0; font-size: 13px; color: var(--cc-muted); }
  .cc-con__nav--sub a:hover { background: none; color: var(--cc-accent-ink); }
  .cc-con__help { display: none; }
  .cc-con__bar { position: static; padding: 0 16px; }
  .cc-hello { grid-template-columns: 1fr; }
  .cc-dash { grid-template-columns: 1fr 1fr; }
  .cc-panel--promo { grid-template-columns: 1fr; } .cc-panel--promo > .cc-btn { justify-self: start; }
  .cc-svc__row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 112px; } .cc-svc__cyc, .cc-svc__due { display: none; } .cc-svc__row .cc-svc__left-m { display: inline; }
  .cc-auth { grid-template-columns: 1fr; }
  .cc-auth__brand { display: none; }
  .cc-auth__mbrand { display: inline-flex !important; }
  .cc-auth__top { padding: 18px 20px; }
}
@media (max-width: 640px) {
  .cc-con__side .cc-brand { padding: 4px 0; }
  .cc-con__nav:not(.cc-con__nav--sub) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cc-con__nav:not(.cc-con__nav--sub) a { flex-direction: column; justify-content: center; gap: 4px; min-height: 58px; padding: 6px 4px; border-radius: 12px; background: var(--cc-surface-2); font-size: 12px; text-align: center; position: relative; }
  .cc-con__nav:not(.cc-con__nav--sub) a .cc-n { position: absolute; top: 6px; right: 6px; min-width: 18px; padding: 1px 5px; }
  .cc-con__nav:not(.cc-con__nav--sub) a[aria-current="page"] { background: var(--cc-dark); }
  .cc-con__bar { height: 56px; gap: 6px; } .cc-con__bar .cc-locale { display: none; }
  .cc-con__body { padding: 16px 16px 32px; gap: 16px; }
  .cc-hello { padding: 22px 18px; } .cc-hello h1 { font-size: 24px !important; }
  .cc-kpi { grid-template-columns: 1fr 1fr; } .cc-kpi > div:nth-child(3) { border-left: 0; } .cc-kpi > div:nth-child(n+3) { border-top: 1px solid var(--cc-line); }
  .cc-dash { grid-template-columns: 1fr; gap: 16px; }
  .cc-panel { padding: 18px 16px; }
  .cc-svc__row { grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; padding: 14px 4px; } .cc-svc__st { gap: 6px; } .cc-svc__ip { display: none; }
  .cc-list-tools__q { width: 100% !important; }
  .cc-paybox__row { grid-template-columns: 1fr auto; } .cc-paybox__row .cc-st { display: none; }
  .cc-ledger a { grid-template-columns: minmax(0, 1fr) auto; } .cc-ledger time { grid-column: 1 / -1; margin-bottom: -10px; } .cc-ledger .cc-st { display: none; }
  .cc-thread a { grid-template-columns: minmax(0, 1fr); gap: 6px; } .cc-thread time { font-size: 12px; }
  .cc-plate { grid-template-columns: 1fr; padding: 22px 18px; } .cc-plate__ip { text-align: left; } .cc-plate__ip dd { justify-content: flex-start; }
  .cc-chat__m { max-width: 100%; }
  .cc-reply { position: static; } .cc-reply .cc-form { grid-template-columns: 1fr; }
  .cc-usage > div { grid-template-columns: 1fr auto; } .cc-usage .cc-bar { grid-column: 1 / -1; grid-row: 2; }
  .cc-con__foot { padding: 20px 16px 28px; }
  .cc-auth__body { padding: 8px 20px 48px; justify-content: flex-start; }
  .cc-auth__card--wide .card-body { grid-template-columns: 1fr; }
  .cc-auth__card--wide .card-body > :not(.card-title) { grid-column: 1; }
}
/* 窄屏侧栏折叠：前 4 项 + 更多 */
@media (max-width: 1180px) {
  .cc-con__more { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font: 600 14px var(--cc-font); color: var(--cc-ink-2); cursor: pointer; }
  .cc-dots { display: inline-flex; gap: 3px; } .cc-dots b { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
  .cc-con__side:not(.is-more) .cc-con__nav:not(.cc-con__nav--sub) a:nth-of-type(n+5), .cc-con__side:not(.is-more) .cc-con__nav--sub { display: none !important; }
}
@media (max-width: 640px) {
  .cc-con__nav:not(.cc-con__nav--sub) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 5px !important; }
  .cc-con__more { flex-direction: column; justify-content: center; gap: 6px; min-height: 58px; padding: 6px 2px; border-radius: 12px; background: var(--cc-surface-2); font-size: 12px; }
  .cc-con__side.is-more .cc-con__nav a:nth-of-type(n+5) { grid-column: span 2; flex-direction: row; min-height: 44px; }
}
/* 手机：logo 与顶条同一行（侧栏、主区拆成同一个网格） */
@media (max-width: 640px) {
  .cc-con { grid-template-columns: minmax(0, 1fr) auto; align-content: start; }
  .cc-con__side, .cc-con__main { display: contents; }
  .cc-con > * > * { grid-column: 1 / -1; min-width: 0; }
  .cc-con__side .cc-brand { grid-column: 1; grid-row: 1; align-self: center; padding: 14px 0 14px 16px; }
  .cc-con__bar { grid-column: 2; grid-row: 1; height: auto; padding: 8px 12px 8px 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cc-con::before { content: ""; grid-row: 1 / 5; grid-column: 1 / -1; background: var(--cc-surface); border-bottom: 1px solid var(--cc-line); }
  .cc-con__side > *, .cc-con__bar { z-index: 1; position: relative; }
  .cc-con__new { margin: 0 16px 10px; width: auto; }
  .cc-con__nav:not(.cc-con__nav--sub) { padding: 0 16px 8px; }
  .cc-con__nav--sub { padding: 0 20px 12px !important; }
  .cc-con__me > li > a { max-width: 90px; }
}
/* 会员中心里继承的 WHMCS 表单页：卡片间距、标题、原生控件统一 */
.cc-m-console .cc-con__body .card { margin-bottom: 20px; }
.cc-m-console .cc-con__body .card-body { padding: 24px 28px; }
.cc-m-console .cc-con__body .card-title { margin-bottom: 18px; font-size: 17px !important; }
.cc-m-console .cc-con__body form > .card:first-of-type .card-title:first-child { display: none; }
.cc-body select.form-control, .cc-body select.custom-select { appearance: none; -webkit-appearance: none; padding-right: 36px !important;
  background: var(--cc-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6986' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px !important; }
.cc-body input[type="checkbox"], .cc-body input[type="radio"] { accent-color: var(--cc-dark); }
.cc-m-console .cc-con__body .checkbox label, .cc-m-console .cc-con__body .form-check label { font-weight: 500; }
.cc-body .bootstrap-switch { border-radius: 999px; border-color: var(--cc-line-2); }
.cc-body .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, .cc-body .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { background: var(--cc-dark); color: #fff; }
.cc-m-console .cc-con__body form > .form-group.text-center, .cc-m-console .cc-con__body form > .text-center { text-align: left !important; }
.cc-more { padding: 14px 20px; background: var(--cc-surface); box-shadow: var(--cc-shadow-1); }
.cc-more[open] { padding-bottom: 22px; } .cc-more__grid .cc-panel { box-shadow: 0 0 0 1px var(--cc-line); }
@media (max-width: 640px) {
  .cc-con__new { grid-row: 2; } .cc-con__nav:not(.cc-con__nav--sub) { grid-row: 3; } .cc-con__nav--sub { grid-row: 4; }
  .cc-con__main > :not(.cc-con__bar):not(.cc-con__body):not(.cc-con__foot) { grid-row: 5; }
  .cc-con__body { grid-row: 6; } .cc-con__foot { grid-row: 7; }
  .cc-con__more { gap: 4px; } .cc-con__more .cc-dots { height: 18px; align-items: center; }
  .cc-con__nav:not(.cc-con__nav--sub) a .cc-n:not(.cc-n--warn) { background: var(--cc-line); }
}
.cc-chat__body .clearfix { margin-top: 10px; }
.cc-chat { margin-bottom: 8px; }
.cc-reply__files .input-group { flex-wrap: nowrap; } .cc-reply__files .input-group-append .btn { min-height: 44px; white-space: nowrap; }
/* 登录注册：品牌面文字压暗底，验证码与提交按钮左对齐 */
.cc-auth__brand::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(15, 24, 56, .92) 0%, rgba(15, 24, 56, .55) 55%, rgba(15, 24, 56, 0) 85%); }
.cc-auth__brand small { color: #8f9ac0; }
.cc-auth .text-center:has(.captchaimage, #inputCaptcha, .cf-turnstile, .g-recaptcha), .cc-auth #default-captcha-domainchecker, .cc-auth .captcha-container { text-align: left !important; margin: 0 !important; }
.cc-auth__card--wide .captcha-container, .cc-auth__card--wide #registration form > .text-center { border-top: 1px solid var(--cc-line); padding-top: 24px; }
.cc-auth .smsc-w { border-radius: 12px; }
/* WHMCS 用 .w-hidden 切换显示（如两步验证开/关按钮），不能被 .btn 的 display 覆盖 */
.cc-body .w-hidden { display: none !important; }
/* 但 WHMCS 脚本用 jQuery .show() 显示的提示（配置页 / 结账的校验错误）必须能出来，否则点按钮“没反应” */
.cc-body .w-hidden[style*="display: block"] { display: block !important; }
/* 充值 */
.cc-topup { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
.cc-topup__box { position: relative; display: flex; align-items: center; }
.cc-topup__amt { font: 800 28px/1 var(--cc-font) !important; min-height: 60px !important; font-variant-numeric: tabular-nums; padding-left: 44px !important; padding-right: 72px !important; }
.cc-topup__box:not(:has(.cc-topup__pre)) .cc-topup__amt { padding-left: 16px !important; }
.cc-topup__pre { position: absolute; left: 16px; font: 800 24px/1 var(--cc-font); font-style: normal; color: var(--cc-muted); pointer-events: none; }
.cc-topup__code { position: absolute; right: 16px; font: 700 13px/1 var(--cc-font); font-style: normal; letter-spacing: .04em; color: var(--cc-muted); padding: 6px 8px; border-radius: 6px; background: var(--cc-surface-2); pointer-events: none; }
.cc-topup__quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; }
.cc-topup__quick button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--cc-surface-2); font: 700 13px var(--cc-font); color: var(--cc-ink-2); cursor: pointer; font-variant-numeric: tabular-nums; }
.cc-topup__quick button:hover, .cc-topup__quick button.is-on { background: var(--cc-dark); color: #fff; }
.cc-topup__bal { display: flex; flex-direction: column; gap: 2px; padding: 18px; border-radius: 14px; background: var(--cc-dark); color: var(--cc-dark-muted); }
.cc-topup__bal small { font-size: 12px; font-weight: 700; } .cc-topup__bal b { font: 800 30px/1.2 var(--cc-font); color: #fff; font-variant-numeric: tabular-nums; } .cc-topup__bal span { font-size: 12px; }
.cc-kpi small a { color: var(--cc-accent-ink); font-weight: 700; text-decoration: none; }
/* 推荐计划 */
.cc-kpi--flat { grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cc-ruler--flat { box-shadow: none; background: var(--cc-surface-2); }
.cc-aff-wd { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cc-ledger__row { position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr) auto 88px; align-items: center; gap: 16px; padding: 12px 8px 12px 26px; font-size: 14px; }
.cc-ledger__row::before { content: ""; position: absolute; left: 1px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--cc-surface); box-shadow: inset 0 0 0 2px var(--cc-line-2); }
.cc-aff-join p:not(.cc-eyebrow) { margin: 8px 0 0; color: var(--cc-dark-muted); }
.cc-aff-join form { justify-self: end; }
.cc-steps3 { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cc-steps3 li { counter-increment: s; padding: 20px; border-radius: var(--cc-r-2); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); font-size: 14px; color: var(--cc-ink-2); }
.cc-steps3 li::before { content: counter(s, decimal-leading-zero); display: block; margin-bottom: 8px; font: 700 12px var(--cc-font-mono); color: var(--cc-accent-ink); }
/* 宽屏：内容铺满，左右留白随宽度增加；超宽时仪表盘三栏变四栏感（服务面板占两列） */
@media (min-width: 1700px) { .cc-con__body { padding-left: 48px; padding-right: 48px; } }
@media (max-width: 1180px) { .cc-topup { grid-template-columns: 1fr; } .cc-steps3 { grid-template-columns: 1fr; } .cc-aff-join form { justify-self: start; } }
@media (max-width: 640px) { .cc-kpi--flat { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cc-kpi--flat > div:nth-child(3) { border-left: 1px solid var(--cc-line); } .cc-kpi--flat > div:nth-child(n+3) { border-top: 0; }
  .cc-ledger__row { grid-template-columns: minmax(0, 1fr) auto; } .cc-ledger__row time { grid-column: 1 / -1; margin-bottom: -10px; } .cc-ledger__row .cc-st { display: none; } }
/* 列表对齐：编号统一用正文字体，金额右对齐成一列，状态标签定宽居中 */
.cc-ledger__no, .cc-paybox__row > span:first-child { font-family: var(--cc-font) !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-ledger a, .cc-ledger__row { grid-template-columns: 110px minmax(0, 1fr) 160px 96px; }
.cc-paybox__row { grid-template-columns: minmax(0, 1fr) 160px 96px auto; padding-left: 26px; padding-right: 8px; }
.cc-ledger b, .cc-paybox__row b { text-align: right; }
.cc-st { text-align: center; min-width: 64px; }
.cc-ledger .cc-st, .cc-paybox__row .cc-st, .cc-thread .cc-st { justify-self: end; }
.cc-thread a { grid-template-columns: 104px minmax(0, 1fr) auto; padding-left: 0; padding-right: 0; }
.cc-thread .cc-st { justify-self: start; }
.cc-ledger::before { top: 22px; bottom: 22px; }
@media (max-width: 640px) { .cc-paybox__row { grid-template-columns: 1fr auto; padding-left: 0; } .cc-ledger a, .cc-ledger__row { grid-template-columns: minmax(0, 1fr) auto; } }
/* 待付行与历史行同一套列：日期 | 编号 | 金额 | 状态，付款按钮放在列外 */
.cc-paybox { padding: 22px 24px; }
.cc-paybox__row { position: relative; grid-template-columns: 110px minmax(0, 1fr) 160px 96px; gap: 16px; padding: 12px 8px 12px 26px; }
.cc-paybox__row time { font-size: 13px; color: var(--cc-sun-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-paybox__row b { font-size: 20px; }
.cc-paybox__row .cc-ledger__no small { display: inline; margin-left: 6px; }
.cc-paybox__btn { position: absolute; right: -104px; top: 50%; transform: translateY(-50%); }
.cc-paybox, .cc-paybox + .cc-panel { padding-right: 128px; }
.cc-paybox + .cc-panel .cc-panel__head { margin-right: -104px; }
@media (max-width: 640px) {
  .cc-paybox, .cc-paybox + .cc-panel { padding-right: 16px; } .cc-paybox + .cc-panel .cc-panel__head { margin-right: 0; }
  .cc-paybox__row { grid-template-columns: minmax(0, 1fr) auto; padding-left: 0; }
  .cc-paybox__row time { display: none; }
  .cc-paybox__btn { position: static; transform: none; grid-column: 1 / -1; width: 100%; }
  .cc-con .cc-thread a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t t" "s d"; gap: 6px 12px; }
  .cc-con .cc-thread .cc-thread__t { grid-area: t; } .cc-con .cc-thread .cc-st { grid-area: s; justify-self: start; } .cc-con .cc-thread time { grid-area: d; }
  .cc-con .cc-thread__t b { white-space: normal; }
}

/* 邮件订阅：两段等宽“是 / 否”（注册页、结账共用 includes/cc-optin.tpl） */
.cc-optin__msg { margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: var(--cc-ink-2); }
.cc-seg2 { display: inline-grid; grid-template-columns: 1fr 1fr; min-width: 148px; padding: 3px; border-radius: 11px; background: var(--cc-surface-2); box-shadow: inset 0 0 0 1px var(--cc-line); }
.cc-seg2 label { position: relative; display: block; margin: 0; cursor: pointer; }
.cc-seg2 input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cc-seg2 span { display: grid; place-items: center; height: 32px; padding: 0 18px; border-radius: 8px; font: 700 13px var(--cc-font); color: var(--cc-muted); transition: background .2s, color .2s, box-shadow .2s; }
.cc-seg2 input:checked + span { background: var(--cc-dark); color: #fff; box-shadow: 0 6px 14px -8px rgba(15, 24, 56, .6); }
.cc-seg2 input:focus-visible + span { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
/* 插件 Turnstile */
.cc-ts { min-height: 65px; max-width: 420px; margin: 6px 0 14px; }
/* 注册页：去掉 WHMCS #registration 底部 40px、提交段外边距，压缩主体底部留白，避免内容显示完仍能滚出空白 */
.cc-auth__card--wide #registration { padding-bottom: 0; }
.cc-auth__card--wide #registration form > p.text-center:last-child, .cc-auth__card--wide #registration > form > .text-center:last-child { margin-bottom: 0; }
.cc-auth__body:has(.cc-auth__card--wide) { padding-bottom: 32px; }

/* console4.css — 2026-10-13 优化：顶条去横线上移、账单列表、账单详情、工单三页、产品详情到期条、拖拽附件。 */

/* ---- 1. 侧栏版式下顶条与内容连成一体 ---- */
.cc-con__bar { height: 56px; border-bottom: 0; background: var(--cc-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cc-con__bar.is-stuck { box-shadow: 0 1px 0 var(--cc-line), 0 8px 24px -20px rgba(15, 24, 56, .35); }
.cc-con__body { padding-top: 4px; }
.cc-con__title h1 { line-height: 1.15; }

/* ---- 倒计时标签 ---- */
.cc-cd { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 6px; font: 700 11px/1.5 var(--cc-font); font-style: normal; white-space: nowrap; background: var(--cc-surface-2); color: var(--cc-ink-2); }
.cc-cd--soon { background: var(--cc-sun-soft); color: var(--cc-sun-ink); }
.cc-cd--over { background: var(--cc-danger-soft); color: var(--cc-danger); }

/* ---- 2. 账单列表 ---- */
.cc-bills { padding: 20px 24px 12px; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); }
.cc-bills--due { background: linear-gradient(180deg, #fff8ea, var(--cc-surface) 70%); box-shadow: inset 0 0 0 1px #f3d9a4, 0 24px 48px -32px rgba(154, 93, 0, .3); }
.cc-bills__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cc-bills__title h2 { margin: 0; font-size: 17px !important; }
.cc-bills--due .cc-bills__title h2 { color: var(--cc-sun-ink); }
.cc-bills__title > span { font: 800 22px/1 var(--cc-font); font-variant-numeric: tabular-nums; color: var(--cc-dark); }
.cc-bills ul { list-style: none; margin: 0; padding: 0; }
.cc-bills__head, .cc-bill { display: grid; grid-template-columns: 76px 104px 190px minmax(0, 1fr) 130px 96px; align-items: center; gap: 16px; padding: 0 10px; }
.cc-bills__head { padding-bottom: 8px; border-bottom: 1px solid var(--cc-line); font-size: 12px; font-weight: 700; color: var(--cc-muted); }
.cc-bills__head span:nth-child(5) { text-align: right; }
.cc-bill { min-height: 56px; border-radius: 12px; text-decoration: none !important; color: var(--cc-ink) !important; font-size: 14px; }
.cc-bills li + li .cc-bill { box-shadow: 0 -1px 0 var(--cc-line); }
.cc-bill:hover { background: var(--cc-surface-sel); box-shadow: none !important; }
.cc-bill__no { font-variant-numeric: tabular-nums; }
.cc-bill__d { color: var(--cc-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-bill__item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cc-ink-2); }
.cc-bill__item small { color: var(--cc-muted); }
.cc-bill__amt { text-align: right; font-variant-numeric: tabular-nums; }
.cc-bills--due .cc-bill__amt { font-size: 17px; }
.cc-bill__act { justify-self: end; }
.cc-bills__none { padding: 8px 10px 12px; }
@media (max-width: 1100px) {
  .cc-bills__head { display: none; }
  .cc-bill { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no amt" "item act" "d1 act" "d2 act"; gap: 2px 12px; padding: 12px 8px; }
  .cc-bill__no { grid-area: no; } .cc-bill__amt { grid-area: amt; } .cc-bill__item { grid-area: item; } .cc-bill__act { grid-area: act; align-self: center; }
  .cc-bill__d:nth-of-type(1) { grid-area: d1; } .cc-bill__d--due, .cc-bill__d:nth-of-type(2) { grid-area: d2; }
  .cc-bill__d { font-size: 12px; } .cc-bill__d::before { content: attr(data-l) " "; color: var(--cc-muted); }
}
@media (max-width: 640px) { .cc-bills { padding: 16px 14px 8px; } }

/* ---- 4a. 工单列表 ---- */
.cc-tkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cc-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--cc-surface-2); }
.cc-seg button, .cc-seg__it { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: none; font: 600 14px var(--cc-font); color: var(--cc-ink-2); cursor: pointer; margin: 0; }
.cc-seg button b { min-width: 20px; padding: 0 6px; border-radius: 999px; background: rgba(15, 24, 56, .07); font-size: 11px; line-height: 18px; text-align: center; }
.cc-seg button[aria-selected="true"], .cc-seg__it:has(input:checked) { background: var(--cc-surface); color: var(--cc-dark); box-shadow: 0 1px 2px rgba(15, 24, 56, .08), 0 0 0 1px var(--cc-line); }
.cc-seg button:focus-visible, .cc-seg__it:focus-within { outline: 2px solid var(--cc-accent); outline-offset: 1px; }
.cc-tkbar__q { flex: 1 1 220px; max-width: 360px; min-height: 44px; padding: 0 14px 0 38px; border: 1px solid var(--cc-line-2); border-radius: 12px; font: 14px var(--cc-font); color: var(--cc-ink);
  background: var(--cc-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='9' cy='9' r='5.5' fill='none' stroke='%235f6986' stroke-width='2'/%3E%3Cpath d='m13 13 4 4' stroke='%235f6986' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 12px 50% / 16px no-repeat; }
.cc-tkbar__q:focus { outline: none; border-color: var(--cc-accent); box-shadow: 0 0 0 3px var(--cc-accent-soft); }
.cc-tkbar > .cc-btn { margin-left: auto; }
.cc-tklist { display: grid; gap: 10px; }
.cc-tk { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 56px 96px 150px; align-items: center; gap: 18px; padding: 16px 20px 16px 24px; border-radius: var(--cc-r-2);
  background: var(--cc-surface); box-shadow: var(--cc-shadow-1); text-decoration: none !important; color: var(--cc-ink) !important; overflow: hidden; transition: box-shadow var(--cc-dur), transform var(--cc-dur); }
.cc-tk { --stripe: var(--cc-line-2); }
.cc-tk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 0; background: var(--stripe); }
.cc-tk--high { --stripe: var(--cc-danger); } .cc-tk--medium { --stripe: var(--cc-sun); } .cc-tk--low { --stripe: #8fa3d9; } .cc-tk[data-g="closed"] { --stripe: var(--cc-line-2); }
.cc-tk:hover { box-shadow: 0 0 0 1px var(--cc-accent), 0 24px 48px -30px rgba(15, 24, 56, .35); transform: translateY(-1px); }
.cc-tk[data-g="closed"] { background: #fbfcfe; } .cc-tk[data-g="closed"] .cc-tk__main b { color: var(--cc-ink-2); font-weight: 600; }
.cc-tk__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cc-tk__main b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-tk.is-unread .cc-tk__main b::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--cc-accent); vertical-align: middle; }
.cc-seg button b:empty, .cc-seg button[data-f]:has(b:only-of-type) {} .cc-tkbar__q { flex: 1 1 260px; max-width: none; }
.cc-tk__main small { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--cc-muted); }
.cc-tk__main small span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px 3px -8px; border-radius: 50%; background: var(--cc-line-2); }
.cc-tk__prio { font-size: 12px; font-weight: 700; color: var(--cc-muted); }
.cc-tk--high .cc-tk__prio, .cc-tk__prio.cc-tk--high { color: var(--cc-danger); } .cc-tk--medium .cc-tk__prio, .cc-tk__prio.cc-tk--medium { color: var(--cc-sun-ink); } .cc-tk--low .cc-tk__prio, .cc-tk__prio.cc-tk--low { color: var(--cc-muted); }
.cc-tk .cc-st { justify-self: start; }
.cc-tk__time { justify-self: end; font-size: 13px; color: var(--cc-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-tklist__none[hidden] { display: none !important; }
@media (max-width: 760px) {
  .cc-tkbar > .cc-btn { margin-left: 0; width: 100%; justify-content: center; } .cc-tkbar__q { max-width: none; }
  .cc-m-console .cc-seg:not(.cc-seg--prio) { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .cc-m-console .cc-seg:not(.cc-seg--prio) button { flex: 1 0 auto; justify-content: center; padding: 0 10px; white-space: nowrap; }
  .cc-tk { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "m m" "s t"; gap: 10px 12px; padding: 14px 14px 14px 18px; }
  .cc-tk__main { grid-area: m; } .cc-tk__main b { white-space: normal; } .cc-tk .cc-st { grid-area: s; } .cc-tk__time { grid-area: t; } .cc-tk__prio { display: none; }
}

/* ---- 4b. 新建工单 ---- */
.cc-nt { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; max-width: 1180px; }
.cc-nt__main { display: grid; gap: 20px; padding: 28px; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); min-width: 0; }
.cc-nt__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cc-fld { display: grid; gap: 8px; margin: 0; min-width: 0; border: 0; padding: 0; }
.cc-fld > span, .cc-fld > legend { font-size: 13px; font-weight: 700; color: var(--cc-ink); margin: 0; padding: 0; float: none; width: auto; }
.cc-fld--editor { margin-bottom: -12px; }
.cc-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cc-pick__it { position: relative; margin: 0; cursor: pointer; }
.cc-pick__it input { position: absolute; opacity: 0; }
.cc-pick__it > span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 14px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--cc-line-2); transition: box-shadow var(--cc-dur), background var(--cc-dur); }
.cc-pick__it b { font-size: 14px; } .cc-pick__it small { font-size: 12px; color: var(--cc-muted); }
.cc-pick__it input:checked + span { background: var(--cc-surface-sel); box-shadow: inset 0 0 0 2px var(--cc-accent); }
.cc-pick__it input:focus-visible + span { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.cc-seg--prio { display: flex; } .cc-seg__it { flex: 1; justify-content: center; position: relative; } .cc-seg__it input { position: absolute; opacity: 0; }
.cc-seg__it--high:has(input:checked) { color: var(--cc-danger); } .cc-seg__it--medium:has(input:checked) { color: var(--cc-sun-ink); } .cc-seg__it--low:has(input:checked) { color: var(--cc-accent-ink); }
.cc-nt__go { display: flex; gap: 10px; flex-wrap: wrap; }
.cc-nt__side { position: sticky; top: 72px; padding: 22px; border-radius: var(--cc-r-3); background: var(--cc-dark); color: var(--cc-dark-muted); }
.cc-nt__side h2 { margin: 0 0 12px; font-size: 15px !important; color: #fff; }
.cc-nt__side ol { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; line-height: 1.6; } .cc-nt__side li::marker { color: var(--cc-sun-2); font-weight: 800; }
@media (max-width: 1000px) { .cc-nt { grid-template-columns: 1fr; } .cc-nt__side { position: static; order: -1; } }
@media (max-width: 640px) { .cc-nt__main { padding: 18px 16px; } .cc-nt__row--2 { grid-template-columns: 1fr; } }

/* 拖拽附件 */
.cc-drop { position: relative; display: grid; gap: 4px; justify-items: center; padding: 22px 16px; border: 1.5px dashed var(--cc-line-2); border-radius: 14px; background: #fbfcfe; text-align: center; cursor: pointer; margin: 0; transition: border-color var(--cc-dur), background var(--cc-dur); }
.cc-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cc-drop b { font-size: 14px; color: var(--cc-accent-ink); } .cc-drop small { font-size: 12px; color: var(--cc-muted); }
.cc-drop.is-over, .cc-drop:focus-within { border-color: var(--cc-accent); background: var(--cc-surface-sel); }
.cc-drop__list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cc-drop__list:empty { display: none; }
.cc-drop__list li { padding: 3px 10px; border-radius: 8px; background: var(--cc-surface); box-shadow: 0 0 0 1px var(--cc-line); font-size: 12px; color: var(--cc-ink); }
.cc-drop--sm { padding: 12px; grid-template-columns: auto auto; justify-content: start; justify-items: start; column-gap: 12px; }
.cc-drop--sm .cc-drop__list { grid-column: 1 / -1; justify-content: start; }

/* console5.css — 工单详情、账单详情（独立页）、产品详情到期条。 */

/* ---- 4c. 工单详情 ---- */
.cc-tkhead { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cc-tkhead h1 { margin: 0 !important; font-size: clamp(22px, 2.2vw, 30px) !important; letter-spacing: -.01em; }
.cc-tkhead p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; font-weight: 700; color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cc-tkview { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.cc-tkview__main { display: grid; gap: 20px; min-width: 0; }
.cc-tkview__side { position: sticky; top: 72px; display: grid; gap: 14px; padding: 20px; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); }
.cc-tkinfo { margin: 0; display: grid; }
.cc-tkinfo > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--cc-line); font-size: 13px; }
.cc-tkinfo > div:first-child { padding-top: 0; }
.cc-tkinfo dt { font-weight: 600; color: var(--cc-muted); } .cc-tkinfo dd { margin: 0; color: var(--cc-ink); font-weight: 600; overflow-wrap: anywhere; }
.cc-tkinfo__act { display: flex; gap: 8px; flex-wrap: wrap; } .cc-tkinfo__act .cc-btn { flex: 1; justify-content: center; }
/* 时间线：左头像 + 卡片，客服卡片深色描边 */
.cc-tkview .cc-chat { position: relative; gap: 16px; }
.cc-tkview .cc-chat::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--cc-line); }
.cc-tkview .cc-chat__m, .cc-tkview .cc-chat__m.is-staff { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; max-width: none; min-width: 0; justify-self: stretch; }
.cc-chat__av { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cc-accent-soft); color: var(--cc-accent-ink); font: 800 14px var(--cc-font); box-shadow: 0 0 0 4px var(--cc-bg); }
.cc-chat__m.is-staff .cc-chat__av { background: var(--cc-dark); color: var(--cc-sun-2); }
.cc-chat__av--staff { overflow: hidden; } .cc-chat__av--staff svg { width: 18px; height: 18px; } .cc-chat__av--staff img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cc-chat__card { min-width: 0; border-radius: var(--cc-r-2); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); overflow: hidden; }
.cc-chat__m.is-staff .cc-chat__card { box-shadow: inset 3px 0 0 var(--cc-dark), var(--cc-shadow-1); }
.cc-body .cc-tkview .cc-chat .ticket-reply.is-staff .cc-chat__who { background: #f3f5fb; }
.cc-tkview .rating .star, .cc-tkview .rating-done .star { font-size: 16px; }
.cc-body .cc-tkview .cc-chat .ticket-reply .cc-chat__who, .cc-tkview .cc-chat__who { justify-content: flex-start; margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--cc-line); background: #fbfcfe; }
.cc-tkview .cc-chat__who time { margin-left: auto; }
.cc-body .cc-tkview .cc-chat .ticket-reply .cc-chat__body, .cc-tkview .cc-chat__body { border-radius: 0; background: none; box-shadow: none; padding: 16px 18px; }
.cc-tkview .cc-chat__files { margin: 0; padding: 0 18px 14px; }
.cc-tkview .cc-reply { position: static; padding: 20px; display: block; }
.cc-tkview .cc-reply .cc-form { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cc-reply__label { font-size: 14px; font-weight: 800; margin: 0; }
.cc-reply__go { display: flex; justify-content: flex-end; }
@media (max-width: 1100px) { .cc-tkview { grid-template-columns: 1fr; } .cc-tkview__side { position: static; order: -1; } }
@media (max-width: 640px) { .cc-tkview .cc-chat::before { display: none; } .cc-tkview .cc-chat__m, .cc-tkview .cc-chat__m.is-staff { grid-template-columns: 1fr; } .cc-chat__av { display: none; } }

/* ---- 7. 产品详情到期条 ---- */
.cc-duebar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; margin-top: -8px; padding: 18px 22px; border-radius: var(--cc-r-3);
  background: linear-gradient(100deg, #ffe7b3, #fff4dc 55%, #fffaf0); box-shadow: inset 0 0 0 1px #f0c56e, 0 24px 48px -28px rgba(154, 93, 0, .45); color: var(--cc-ink); }
.cc-duebar__clock { display: grid; place-items: center; align-content: center; width: 76px; height: 76px; border-radius: 18px; background: var(--cc-dark); color: var(--cc-sun-2); text-align: center; }
.cc-duebar__clock b { font: 800 30px/1 var(--cc-font); font-variant-numeric: tabular-nums; }
.cc-duebar__clock small { margin-top: 4px; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .72) !important; line-height: 1.2; padding: 0 4px; }
.cc-duebar__txt h2 { margin: 0 0 4px; font-size: 18px !important; color: var(--cc-dark); }
.cc-duebar__txt p { margin: 0; font-size: 14px; color: var(--cc-ink-2); font-variant-numeric: tabular-nums; } .cc-duebar__txt p b { color: var(--cc-dark); }
.cc-duebar__txt small { display: block; margin-top: 4px; font-size: 13px; color: var(--cc-sun-ink) !important; font-weight: 600; }
.cc-duebar__btn { min-height: 48px; padding: 0 26px; font-size: 15px; }
.cc-duebar--over { background: linear-gradient(100deg, #fdd9d5, #fdeceb 55%, #fff7f6); box-shadow: inset 0 0 0 1px #eba59e, 0 24px 48px -28px rgba(192, 54, 44, .45); }
.cc-duebar--over .cc-duebar__clock { background: var(--cc-danger); color: #fff; } .cc-duebar--over .cc-duebar__clock small { color: rgba(255, 255, 255, .9) !important; }
.cc-duebar--over .cc-duebar__txt small { color: var(--cc-danger) !important; }
@media (max-width: 760px) { .cc-duebar { grid-template-columns: auto minmax(0, 1fr); padding: 16px; gap: 14px; } .cc-duebar__clock { width: 60px; height: 60px; } .cc-duebar__clock b { font-size: 24px; } .cc-duebar__btn { grid-column: 1 / -1; justify-content: center; } }

/* ---- 3. 账单详情（独立页） ---- */
.cc-iv-page { margin: 0; min-height: 100vh; background: var(--cc-bg); font-family: var(--cc-font); color: var(--cc-ink); }
.cc-iv-wrap { max-width: 1180px; margin: 0 auto; padding: 32px 24px 64px; display: grid; gap: 20px; }
.cc-iv-wrap > .cc-back { margin-bottom: -4px; }
.cc-note--ok { background: var(--cc-ok-soft); color: var(--cc-ok); } .cc-note--info, .cc-note--success { background: var(--cc-ok-soft); }
.cc-iv { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.cc-iv__paper { position: relative; padding: 40px 44px 36px; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); overflow: hidden; }
.cc-iv__paper::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--cc-dark); }
.cc-iv__paper--unpaid::before, .cc-iv__paper--draft::before { background: var(--cc-sun); }
.cc-iv__paper--paid::before { background: var(--cc-ok); } .cc-iv__paper--cancelled::before, .cc-iv__paper--refunded::before { background: var(--cc-field); } .cc-iv__paper--collections::before { background: var(--cc-danger); }
.cc-iv__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.cc-iv__brand { display: flex; align-items: center; gap: 10px; } .cc-iv__brand img { max-height: 40px; }
.cc-iv__brand .cc-brand__mark { width: 28px; height: 30px; fill: none; stroke: var(--cc-dark); stroke-width: 1.8; stroke-linejoin: round; }
.cc-iv__brand b { font-size: 17px; letter-spacing: .12em; }
.cc-iv__no { text-align: right; } .cc-iv__no span { display: block; font-size: 13px; color: var(--cc-muted); font-weight: 600; }
.cc-iv__no b { font: 800 30px/1.1 var(--cc-font); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cc-iv__band { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; margin: 28px 0; padding: 16px 20px; border-radius: 14px; background: var(--cc-surface-2); }
.cc-iv__band em { font-style: normal; font-weight: 800; font-size: 15px; padding: 4px 12px; border-radius: 8px; background: var(--cc-dark); color: #fff; }
.cc-iv__paper--unpaid .cc-iv__band em { background: var(--cc-sun); color: var(--cc-dark); } .cc-iv__paper--paid .cc-iv__band em { background: var(--cc-ok); }
.cc-iv__band dl { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.cc-iv__band dt { font-size: 12px; font-weight: 600; color: var(--cc-muted); } .cc-iv__band dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-iv__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.cc-iv h3 { margin: 0 0 8px; font-size: 12px !important; font-weight: 700; color: var(--cc-muted); letter-spacing: .02em; }
.cc-iv address { margin: 0; font-size: 14px; line-height: 1.7; color: var(--cc-ink-2); font-style: normal; } .cc-iv address b { color: var(--cc-ink); }
.cc-iv__notes { margin-bottom: 24px; padding: 14px 18px; border-radius: 12px; background: var(--cc-accent-soft); font-size: 14px; } .cc-iv__notes p { margin: 0; }
.cc-iv__items { width: 100%; border-collapse: collapse; font-size: 14px; }
.cc-iv__items thead th { padding: 0 0 10px; border-bottom: 2px solid var(--cc-dark); font-size: 12px; font-weight: 700; color: var(--cc-muted); text-align: left; }
.cc-iv__items th:last-child, .cc-iv__items td:last-child { text-align: right; white-space: nowrap; width: 1%; padding-left: 24px; font-variant-numeric: tabular-nums; }
.cc-iv__items tbody td { padding: 14px 0; border-bottom: 1px solid var(--cc-line); vertical-align: top; line-height: 1.6; }
.cc-iv__items tfoot th { padding: 10px 0 0; text-align: right; font-weight: 600; color: var(--cc-ink-2); }
.cc-iv__items tfoot td { padding: 10px 0 0 24px; font-weight: 700; }
.cc-iv__total th, .cc-iv__total td { padding-top: 16px !important; font-size: 20px; font-weight: 800 !important; color: var(--cc-dark) !important; }
.cc-iv__fine { margin: 10px 0 0; font-size: 12px; color: var(--cc-muted); }
.cc-iv__tx { margin-top: 32px; padding-top: 24px; border-top: 1px dashed var(--cc-line-2); }
.cc-iv__tx table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cc-iv__tx th { padding: 0 8px 8px 0; text-align: left; font-size: 12px; color: var(--cc-muted); font-weight: 700; }
.cc-iv__tx td { padding: 8px 8px 8px 0; border-top: 1px solid var(--cc-line); font-variant-numeric: tabular-nums; }
.cc-iv__tx th:last-child, .cc-iv__tx td:last-child { text-align: right; padding-right: 0; }
.cc-iv__tx td:first-child { white-space: nowrap; }
.cc-ref__t { text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; word-break: break-all; }
.cc-ref__t:hover { text-decoration-style: solid; }
.cc-ref__t:focus-visible { outline: 2px solid var(--cc-sun); outline-offset: 2px; border-radius: 2px; }
.cc-ref__t.is-full { text-decoration: none; cursor: text; }
.cc-ref__t.is-copied::after { content: attr(data-done); margin-left: 8px; font-size: 12px; color: var(--cc-muted); }
.cc-ref__p { display: none; }
.cc-iv__bal { display: flex; justify-content: flex-end; align-items: baseline; gap: 16px; margin: 14px 0 0; font-size: 14px; color: var(--cc-ink-2); } .cc-iv__bal b { font-size: 18px; color: var(--cc-dark); font-variant-numeric: tabular-nums; }
.cc-iv__qr { margin-top: 20px; }
/* 付款栏 */
.cc-iv__pay { position: sticky; top: 24px; display: grid; gap: 14px; padding: 26px 24px; border-radius: var(--cc-r-3); background: var(--cc-dark); color: var(--cc-dark-muted); box-shadow: var(--cc-shadow-2); }
.cc-iv__lbl { margin: 0; font-size: 13px; font-weight: 600; }
.cc-iv__amt { margin: -8px 0 0; font: 800 38px/1.1 var(--cc-font); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cc-iv__amt--done { color: #9fe0bd; }
.cc-iv__due { margin: -6px 0 4px; font-size: 13px; color: var(--cc-dark-muted); } .cc-iv__due .cc-cd { margin-left: 6px; }
.cc-iv__field { display: grid; gap: 6px; font-size: 12px; font-weight: 600; } .cc-iv__field b { color: #fff; font-size: 14px; }
.cc-iv__pay .form-control { min-height: 44px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.cc-iv__pay select.form-control option { color: var(--cc-ink); }
.cc-iv__gw:empty { display: none; }
.cc-iv__gw { display: grid; gap: 8px; } .cc-iv__gw form { margin: 0; }
.cc-iv__gw input[type=submit], .cc-iv__gw button, .cc-iv__gw .btn { width: 100%; min-height: 50px !important; border: 0 !important; border-radius: 12px !important; background: var(--cc-sun) !important; color: var(--cc-dark) !important; font: 800 16px var(--cc-font) !important; cursor: pointer; box-shadow: none !important; }
.cc-iv__gw input[type=submit]:hover, .cc-iv__gw button:hover, .cc-iv__gw .btn:hover { background: var(--cc-sun-2) !important; }
.cc-iv__gw p, .cc-iv__gw div { color: var(--cc-dark-muted); font-size: 13px; }
.cc-iv__credit { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; font-weight: 600; } .cc-iv__credit small { color: var(--cc-sun-2); }
.cc-iv__credit > div { display: flex; gap: 8px; }
.cc-iv__tools { display: flex; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.cc-iv__tools .cc-btn { flex: 1; justify-content: center; background: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25) !important; }
.cc-iv__tools .cc-btn:hover { box-shadow: inset 0 0 0 1px #fff !important; }
@media (max-width: 960px) { .cc-iv { grid-template-columns: 1fr; } .cc-iv__pay { position: static; order: -1; } }
@media (max-width: 640px) { .cc-iv-wrap { padding: 16px 12px 40px; } .cc-iv__paper { padding: 28px 18px 24px; } .cc-iv__top { flex-direction: column; } .cc-iv__no { text-align: left; } .cc-iv__parties { grid-template-columns: 1fr; } }
@page { size: A4; margin: 14mm 14mm 16mm; }
@media print {
  html, body.cc-iv-page { background: #fff !important; }
  .cc-iv-page { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cc-iv-wrap { padding: 0; max-width: none; display: block; } .cc-iv { display: block; }
  .d-print-none, .cc-verify, #fullpage-overlay { display: none !important; }
  .cc-iv__paper { box-shadow: none; padding: 0 0 0; border-radius: 0; overflow: visible; }
  .cc-iv__paper::before { display: none; }
  .cc-iv__top { padding-bottom: 14px; border-bottom: 2px solid var(--cc-dark); }
  .cc-iv__paper--unpaid .cc-iv__top, .cc-iv__paper--draft .cc-iv__top { border-bottom-color: var(--cc-sun); }
  .cc-iv__paper--paid .cc-iv__top { border-bottom-color: var(--cc-ok); }
  .cc-iv__no span { font-size: 12px; } .cc-iv__no b { font-size: 26px; }
  .cc-iv__band { margin: 18px 0 22px; padding: 12px 16px; border-radius: 8px; }
  .cc-iv h3 { font-size: 11px !important; color: #555c75; }
  .cc-iv address, .cc-iv__items { font-size: 12.5px; }
  .cc-iv__items thead th { font-size: 11px; color: #555c75; }
  .cc-iv__items tbody td { padding: 10px 0; }
  .cc-iv__items tbody tr { break-inside: avoid; }
  .cc-iv__total th, .cc-iv__total td { font-size: 16px; }
  .cc-iv__tx { margin-top: 22px; padding-top: 16px; border-top: 1px solid #c9cfe0; break-inside: avoid; }
  .cc-iv__tx th { font-size: 11px; color: #555c75; }
  .cc-ref__p { display: inline; word-break: break-all; }
  .cc-iv__bal { padding-bottom: 2px; }
  .cc-iv__notes { break-inside: avoid; }
  a[href]::after { content: none !important; }
}
.cc-iv__pay select.form-control, .cc-iv__pay input.form-control { height: 44px !important; padding: 0 12px !important; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 10px !important; background-color: rgba(255, 255, 255, .08) !important; color: #fff !important; width: 100%; }
.cc-iv__gw { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-size: 13px; line-height: 1.6; color: var(--cc-dark-muted); }
.cc-iv__gw:has(input[type=submit], button, .btn) { padding: 0; background: none; }
/* 邮箱验证卡片：与下方内容卡片间距一致（内容区本身的上内边距在仪表盘被收紧） */
.cc-m-console .cc-verify + .cc-con__body { padding-top: 24px !important; }
.cc-m-console .cc-verify__in { border-radius: var(--cc-r-3); padding-block: 14px; }
/* 验证卡片与内容区同宽：跟随 .cc-con__body 的左右内边距（32 / ≥1700 为 48 / 手机 16）；去掉 twenty-one 的通栏底线 */
.cc-body .verification-banner { border-bottom: 0 !important; margin: 0 !important; }
@media (min-width: 1700px) { .cc-m-console .cc-verify { padding-left: 48px; padding-right: 48px; } }

/* ===== 新建工单 · 工单编写台（cc-tw） ===== */
.cc-tw { display: grid; gap: 22px; width: 100%; max-width: 1680px; margin-inline: auto; }
.cc-m-shell .cc-tw { max-width: 1488px; margin: 28px auto 56px; padding: 0 24px; }
.cc-tw__head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 32px; border-radius: var(--cc-r-3); background: var(--cc-dark); color: var(--cc-dark-muted); overflow: hidden; }
.cc-tw__head::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 100% 0, rgba(245, 165, 36, .22), transparent 60%), radial-gradient(50% 100% at 0 100%, rgba(42, 92, 255, .28), transparent 65%); pointer-events: none; }
.cc-tw__head > * { position: relative; }
.cc-tw__eb { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-sun-2); }
.cc-tw__eb::before { content: ""; width: 22px; height: 2px; background: var(--cc-sun-2); }
.cc-tw__head h1 { margin: 10px 0 6px !important; font-size: 30px !important; line-height: 1.2; color: #fff !important; letter-spacing: -.01em; }
.cc-tw__head p { margin: 0; max-width: 56ch; font-size: 14px; line-height: 1.6; }
.cc-tw__sla { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cc-tw__sla li { display: grid; gap: 2px; min-width: 150px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.cc-tw__sla b { font-size: 20px; line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; } .cc-tw__sla span { font-size: 12px; }
.cc-tw__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 24%, 380px); gap: 22px; align-items: start; }
.cc-tw__main { display: grid; gap: 16px; min-width: 0; }
.cc-tw__step { display: grid; gap: 16px; padding: 22px 24px 24px; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); }
.cc-tw__step h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 0 !important; font-size: 17px !important; color: var(--cc-ink) !important; }
.cc-tw__step h2 i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--cc-dark); color: #fff; font: 800 13px/1 var(--cc-font); font-style: normal; }
.cc-tw__step h2 small { flex-basis: 100%; padding-left: 40px; font-size: 12.5px; font-weight: 500; color: var(--cc-muted); }
.cc-tw__2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* 部门卡片 */
.cc-tw__depts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.cc-tw__dept, .cc-tw__svc, .cc-tw__p { position: relative; margin: 0; cursor: pointer; font-weight: 400; }
.cc-tw__dept input, .cc-tw__svc input, .cc-tw__p input { position: absolute; opacity: 0; pointer-events: none; }
.cc-tw__dept > span { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; height: 100%; min-height: 72px; padding: 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--cc-line-2); transition: box-shadow var(--cc-dur), background var(--cc-dur); }
.cc-tw__dept .cc-tw__ic { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 12px; background-color: var(--cc-surface-2); }
.cc-tw__dept b { align-self: end; font-size: 14.5px; color: var(--cc-ink); } .cc-tw__dept small { align-self: start; font-size: 12px; color: var(--cc-muted); line-height: 1.45; }
.cc-tw__dept:hover > span, .cc-tw__svc:hover > span { box-shadow: inset 0 0 0 1px var(--cc-accent); }
.cc-tw__dept input:checked + span { background: var(--cc-surface-sel); box-shadow: inset 0 0 0 2px var(--cc-accent); }
.cc-tw__dept input:checked + span .cc-tw__ic { background-color: var(--cc-dark); }
.cc-tw__dept input:focus-visible + span, .cc-tw__svc input:focus-visible + span, .cc-tw__p input:focus-visible + span { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
/* 图标：线条图 mask，颜色随底色 */
.cc-tw__ic { position: relative; display: inline-block; flex: none; }
.cc-tw__ic::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; background: var(--cc-ink-2); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.cc-tw__dept input:checked + span .cc-tw__ic::after { background: var(--cc-sun-2); }
.cc-tw__ic--tool { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0 5 5L21 13l-8 8-3-3 6.3-6.3a4 4 0 0 0-5-5L10 5l3-3z'/%3E%3Cpath d='m3 21 6-6'/%3E%3C/svg%3E"); }
.cc-tw__ic--card { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E"); }
.cc-tw__ic--cart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.6 12.4a2 2 0 0 0 2 1.6h8.8a2 2 0 0 0 2-1.6L22 7H6'/%3E%3C/svg%3E"); }
.cc-tw__ic--shield { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.cc-tw__ic--net { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E"); }
.cc-tw__ic--clip { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 11-8.6 8.6a5 5 0 0 1-7-7L14 4a3.3 3.3 0 0 1 4.7 4.7l-8.6 8.6a1.7 1.7 0 0 1-2.4-2.4L15.5 7'/%3E%3C/svg%3E"); width: 44px; height: 44px; border-radius: 50%; background: var(--cc-surface); box-shadow: 0 0 0 1px var(--cc-line); }
/* 服务：横向可选行 */
.cc-tw__svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; max-height: 420px; overflow: auto; padding: 2px; }
.cc-tw__svc > span { display: grid; gap: 4px; height: 100%; padding: 12px 14px 12px 40px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--cc-line-2); }
.cc-tw__svc > span::before { content: ""; position: absolute; left: 14px; top: 15px; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--cc-line-2); background: var(--cc-surface); }
.cc-tw__svc input:checked + span { background: var(--cc-surface-sel); box-shadow: inset 0 0 0 2px var(--cc-accent); }
.cc-tw__svc input:checked + span::before { box-shadow: inset 0 0 0 5px var(--cc-accent); }
.cc-tw__svc b { font-size: 13.5px; color: var(--cc-ink); overflow-wrap: anywhere; } .cc-tw__svc small { font-size: 12px; color: var(--cc-muted); }
.cc-tw__svc--none > span { background: var(--cc-surface-2); }
.cc-tw__st { font-style: normal; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--cc-surface-2); color: var(--cc-ink-2); }
.cc-tw__st--active { background: #e6f4ec; color: #17693f; } .cc-tw__st--suspended { background: #fff1d6; color: #8a5300; } .cc-tw__st--terminated, .cc-tw__st--cancelled { background: #eef1f6; color: #6b7590; }
/* 主题 */
.cc-tw__subj { height: 46px; font-size: 15px !important; }
/* 优先级：三张卡 */
.cc-tw__prio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cc-tw__p > span { display: grid; gap: 2px; height: 100%; padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--cc-line-2); }
.cc-tw__p b { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cc-ink); }
.cc-tw__p b i { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); }
.cc-tw__p small { font-size: 12px; color: var(--cc-muted); line-height: 1.45; }
.cc-tw__p--low { --pc: #2a5cff; } .cc-tw__p--medium { --pc: #f5a524; } .cc-tw__p--high { --pc: #e5484d; }
.cc-tw__p input:checked + span { box-shadow: inset 0 0 0 2px var(--pc); background: color-mix(in srgb, var(--pc) 7%, #fff); }
.cc-tw__p--high input:checked + span b { color: #c62a2f; }
/* 描述 */
.cc-tw__hints { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-tw__hints span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--cc-surface-2); font-size: 12px; color: var(--cc-ink-2); }
.cc-tw__hints span::before { content: "✓"; font-weight: 800; color: var(--cc-sun-ink); }
.cc-tw .md-editor, .cc-tw textarea#inputMessage { border-radius: 12px; }
.cc-tw__drop { display: grid; justify-items: center; gap: 6px; padding: 22px 16px; text-align: center; }
.cc-tw__captcha:empty { display: none; }
/* 右侧摘要 */
.cc-tw__side { position: sticky; top: 76px; display: grid; gap: 12px; }
.cc-m-shell .cc-tw__side { top: 96px; }
.cc-tw__sum { display: grid; gap: 14px; padding: 22px; border-radius: var(--cc-r-3); background: var(--cc-dark); color: var(--cc-dark-muted); box-shadow: 0 30px 60px -36px rgba(15, 24, 56, .6); }
.cc-tw__sumt { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-sun-2); }
.cc-tw__sum dl { display: grid; gap: 0; margin: 0; }
.cc-tw__sum dl > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.cc-tw__sum dl > div:first-child { border-top: 0; }
.cc-tw__sum dt { font-size: 12px; font-weight: 600; color: #8f9bc0; }
.cc-tw__sum dd { margin: 0; font-size: 13.5px; font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.cc-tw__sum dd.is-empty { color: #8f9bc0; font-weight: 500; }
.cc-tw__sum dd[data-prio=High] { color: #ff8a8d; } .cc-tw__sum dd[data-prio=Medium] { color: var(--cc-sun-2); }
.cc-tw__go { width: 100%; justify-content: center; height: 48px; font-size: 15px; }
.cc-tw__cancel { justify-self: center; font-size: 13px; font-weight: 600; color: #8f9bc0 !important; }
.cc-tw__cancel:hover { color: #fff !important; }
.cc-tw__ip { justify-self: start; padding: 1px 7px; border-radius: 6px; background: var(--cc-surface-2); font: 600 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--cc-ink-2); overflow-wrap: anywhere; }
.cc-tw__ip i { font-style: normal; color: var(--cc-muted); }
.cc-tw__dead { grid-column: 1 / -1; }
.cc-tw__dead > summary { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--cc-muted); list-style: none; }
.cc-tw__dead > summary::-webkit-details-marker { display: none; }
.cc-tw__dead > summary::before { content: "▸"; transition: transform var(--cc-dur); }
.cc-tw__dead[open] > summary::before { transform: rotate(90deg); }
.cc-tw__dead > summary span { padding: 0 7px; border-radius: 999px; background: var(--cc-surface-2); font-size: 12px; }
.cc-tw__dead > .cc-tw__svcs { max-height: none; overflow: visible; margin-top: 6px; opacity: .85; }
@media (max-width: 1100px) { .cc-tw__grid { grid-template-columns: 1fr; } .cc-tw__side { position: static; } }
@media (max-width: 640px) {
  .cc-m-shell .cc-tw { padding: 0 14px; margin-top: 16px; }
  .cc-tw__head { padding: 22px 18px; } .cc-tw__head h1 { font-size: 24px !important; }
  .cc-tw__sla { width: 100%; } .cc-tw__sla li { flex: 1; min-width: 0; }
  .cc-tw__step { padding: 18px 16px 20px; } .cc-tw__2, .cc-tw__prio { grid-template-columns: 1fr; }
  .cc-tw__step h2 small { padding-left: 0; }
}
/* 产品详情页内嵌 VirtFusion Plus 时：铭牌 / 续费条 / Plus 各卡片统一 16px 竖向节奏（Plus 内部卡片间距同为 16px） */
.cc-con__body:has(#vfp) { gap: 16px; }
.cc-con__body:has(#vfp) > .cc-back { margin-bottom: -4px; }
.cc-con__body:has(#vfp) > .cc-duebar { margin-top: 0; }
.cc-con__body:has(#vfp) .tab-content > .tab-pane { padding-top: 0; }
/* 编辑器与回复框同一套样式；单部门时卡片占满一行并横排说明 */
.cc-tw .md-editor { border: 1px solid var(--cc-field); border-radius: 12px; overflow: hidden; background: var(--cc-surface); }
.cc-tw .md-editor > textarea { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; resize: vertical; min-height: 220px; }
.cc-tw .md-header { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; margin: 0; background: var(--cc-surface-2); border-bottom: 1px solid var(--cc-line); }
.cc-tw .md-header .btn-group { display: inline-flex; gap: 2px; margin: 0 !important; }
.cc-tw .md-header .btn { min-height: 30px !important; padding: 0 9px !important; border: 0 !important; border-radius: 8px !important; background: none !important; color: var(--cc-ink-2) !important; box-shadow: none !important; font-size: 13px; }
.cc-tw .md-header .btn:hover, .cc-tw .md-header .btn.active { background: var(--cc-surface) !important; color: var(--cc-dark) !important; }
.cc-tw .md-footer, .cc-tw .markdown-editor-status { padding: 6px 12px; border-top: 1px solid var(--cc-line); background: var(--cc-surface-2); font-size: 12px; color: var(--cc-muted); }
.cc-tw__depts:has(> .cc-tw__dept:only-child) { grid-template-columns: 1fr; }

.cc-tw__hints { margin: 2px 0 4px; }
.cc-tw__sumt { color: #ffc35a; } .cc-tw__sum dt { color: #a9b3d4; }
.cc-tw__step:last-child { padding-bottom: 22px; }
.cc-tw__svc--none > span { background: none; } .cc-tw__svc--none input:checked + span { background: var(--cc-surface-sel); }
/* 部门卡：图标固定第 1 列跨两行，名称 / 说明在第 2 列；没有说明时名称垂直居中 */
.cc-tw__dept .cc-tw__ic { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.cc-tw__dept b { grid-column: 2; grid-row: 1; }
.cc-tw__dept small { grid-column: 2; grid-row: 2; }
.cc-tw__dept b:last-child { grid-row: 1 / span 2; align-self: center; }

/* 合并付款（masspay）：左票据列表 + 右深色结算面板，复用账单详情的支付面板样式 */
.cc-mp { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; margin-top: 18px; }
.cc-mp__list { display: grid; gap: 12px; min-width: 0; }
.cc-mp > .cc-mp__title { grid-column: 1; grid-row: 1; margin: 0; } .cc-mp__list { grid-column: 1; grid-row: 2; } .cc-mp__pay { grid-column: 2; grid-row: 2; }
.cc-mp { row-gap: 12px; }
.cc-mp__inv { position: relative; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); overflow: hidden; }
.cc-mp__inv::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cc-sun); }
.cc-mp__head { display: grid; grid-template-columns: minmax(90px, auto) 1fr auto; align-items: center; gap: 16px; padding: 16px 22px 14px 24px; border-bottom: 1px dashed var(--cc-line); }
.cc-mp__no { font-weight: 800; font-size: 15px; color: var(--cc-dark) !important; text-decoration: none !important; font-variant-numeric: tabular-nums; }
.cc-mp__no:hover { color: var(--cc-accent) !important; }
.cc-mp__due { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cc-mp__amt { font: 800 17px/1.2 var(--cc-font); color: var(--cc-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-mp__items { list-style: none; margin: 0; padding: 8px 22px 12px 24px; }
.cc-mp__items li { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 7px 0; font-size: 13.5px; color: var(--cc-ink-2); }
.cc-mp__items li + li { border-top: 1px solid var(--cc-line); }
.cc-mp__items b { font-weight: 600; color: var(--cc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-mp__pay { position: sticky; top: 24px; display: grid; gap: 14px; padding: 26px 24px; border-radius: var(--cc-r-3); background: var(--cc-dark); color: var(--cc-dark-muted); box-shadow: var(--cc-shadow-2); }
.cc-mp__pay .cc-iv__field { margin: 0; padding: 0; border: 0; min-width: 0; }
.cc-mp__sum { display: grid; gap: 6px; margin: 0; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }
.cc-mp__sum div { display: flex; justify-content: space-between; gap: 12px; } .cc-mp__sum dt { font-weight: 500; } .cc-mp__sum dd { margin: 0; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-mp__go { min-height: 50px; font-size: 16px; justify-content: center; }
.cc-mp__note { margin: -4px 0 0; font-size: 12px; line-height: 1.6; }
.cc-mp__empty { display: grid; justify-items: center; gap: 14px; margin-top: 18px; padding: 56px 24px; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); color: var(--cc-muted); text-align: center; }
.cc-mp__empty p { margin: 0; }
@media (max-width: 1080px) { .cc-mp { grid-template-columns: 1fr; } .cc-mp__pay { position: static; grid-column: 1; grid-row: 3; } }
@media (max-width: 640px) { .cc-mp__head { grid-template-columns: 1fr auto; padding: 14px 16px 12px 18px; } .cc-mp__due { grid-column: 1 / -1; grid-row: 2; } .cc-mp__items { padding: 6px 16px 10px 18px; } }

/* 账单付款栏：网关多时紧凑单行（Logo + 名称 + 标记右对齐），余额抵扣做成一体输入组 */
.cc-body .cc-iv__pay .cc-pms--dark.cc-pms--list { gap: 6px; }
.cc-body .cc-iv__pay .cc-pms--dark.cc-pms--list .cc-pm { grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 10px; min-height: 52px; padding: 10px 38px 10px 11px; border-radius: 12px; }
.cc-iv__pay .cc-pms--list .cc-pm__logo { width: 30px; height: 30px; border-radius: 8px; } .cc-iv__pay .cc-pms--list .cc-pm__logo img { width: 20px; height: 20px; }
.cc-iv__pay .cc-pm__txt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-iv__pay .cc-pm__txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-iv__pay .cc-pms--dark.cc-pms--list .cc-pm__tags { grid-column: 3; grid-row: 1; justify-content: flex-end; gap: 4px; }
.cc-iv__pay .cc-pm__tags em { padding: 1px 7px; font-size: 10.5px; }
.cc-iv__pay .cc-pm__auto { font-size: 0 !important; padding: 0 !important; width: 20px; height: 20px; justify-content: center; } .cc-iv__pay .cc-pm__auto::before { width: 11px; height: 11px; }
.cc-iv__pay .cc-pms--list .cc-pm::before { content: ""; position: absolute; top: 50%; right: 14px; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.cc-iv__pay .cc-pms--list .cc-pm:has(input:checked)::before, .cc-iv__pay .cc-pms--list .cc-pm.is-on::before { display: none; }
.cc-iv__credit > span { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: #fff; }
.cc-iv__credit small { font-weight: 600; white-space: nowrap; }
.cc-iv__credit > div { gap: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); overflow: hidden; }
.cc-iv__credit > div:focus-within { box-shadow: inset 0 0 0 1.5px var(--cc-sun); }
.cc-iv__pay .cc-iv__credit input.form-control { flex: 1; min-width: 0; border: 0 !important; border-radius: 0 !important; background-color: rgba(255, 255, 255, .06) !important; padding: 0 14px !important; font-variant-numeric: tabular-nums; box-shadow: none !important; }
.cc-iv__credit .cc-btn { flex: none; height: 44px; min-height: 44px; padding: 0 20px; border-radius: 0 !important; background: var(--cc-sun) !important; color: var(--cc-dark) !important; font-weight: 800; }
.cc-iv__credit .cc-btn:hover { background: var(--cc-sun-2) !important; }
.cc-iv__pay .cc-pm__auto { order: -1; }
.cc-iv__pay .cc-pm__note { margin-right: -26px; white-space: normal; }
.cc-iv__pay .cc-pm__auto { font-size: 10.5px !important; padding: 1px 7px !important; width: auto; height: auto; }
/* 选中订阅网关：对号/圆圈固定在首行，标记换到名称下，提示框全宽 */
.cc-iv__pay .cc-pms--list .cc-pm::before, .cc-iv__pay .cc-pms--list .cc-pm:has(input:checked)::after, .cc-iv__pay .cc-pms--list .cc-pm.is-on::after { top: 26px !important; margin-top: -8px !important; }
.cc-iv__pay .cc-pm:has(.cc-pm__auto) .cc-pm__tags { grid-column: 2 / 4; grid-row: 2; justify-content: flex-start; }
.cc-iv__pay .cc-pm__note { margin: 4px -26px 0 0; padding-right: 14px; }
.cc-pms--dark .cc-pm__note { background: rgba(245, 165, 36, .2); color: #fff3dc; }

/* 实名认证成功页 */
.cc-rn { max-width: 760px; padding: 8px 0 24px; }
.cc-rn__t { display: flex; align-items: center; gap: 12px; margin: 6px 0 8px; font-size: clamp(22px, 2.4vw, 30px) !important; font-weight: 800; }
.cc-rn__t svg { width: 34px; height: 34px; flex: none; fill: none; stroke: var(--cc-sun, #f59e0b); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cc-rn__lead { color: var(--cc-ink-2); margin: 0 0 18px; }
.cc-rn__list { counter-reset: rn; list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--cc-line, #e3e8f0); }
.cc-rn__list li { counter-increment: rn; position: relative; padding: 14px 0 14px 44px; border-bottom: 1px solid var(--cc-line, #e3e8f0); line-height: 1.7; }
.cc-rn__list li::before { content: counter(rn, decimal-leading-zero); position: absolute; left: 0; top: 14px; font-weight: 800; color: var(--cc-navy, #13294b); font-variant-numeric: tabular-nums; }
.cc-rn__go { display: flex; flex-wrap: wrap; gap: 10px; }

/* cart.css — 下单流程 1/2：/store/deploy 选配页（由 design/m0/k-lumen/deploy.css 定稿移植：类名加 cc-，变量换 --cc-*）。 */
.cc-m-cart .cc-dp { --cc-wrap: 1080px; }
.cc-dp { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; padding-top: 28px; }
.cc-dp__steps { display: grid; gap: 16px; }
.cc-step { padding: 20px 22px 22px; border-radius: 18px; background: var(--cc-surface); box-shadow: 0 0 0 1px var(--cc-line), 0 14px 30px -26px rgba(15, 24, 56, .3); }
.cc-step__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cc-step__head h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.cc-step__n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--cc-dark); color: var(--cc-sun-2); font: 700 11px/1 var(--cc-font-mono); }
.cc-step__note { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--cc-muted); }

.cc-opts { display: grid; gap: 10px; }
.cc-opts--2 { grid-template-columns: 1fr 1fr; }
.cc-opts--4 { grid-template-columns: repeat(4, 1fr); }
.cc-opts--plans { grid-template-columns: repeat(3, 1fr); }
.cc-opt { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 13px 14px 12px; border-radius: 12px; cursor: pointer; background: #fff;
  box-shadow: inset 0 0 0 1px var(--cc-line-2); transition: box-shadow .18s, background-color .18s; }
.cc-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cc-opt:hover { box-shadow: inset 0 0 0 1px var(--cc-field); }
.cc-opt.is-on { background: #f6f8ff; box-shadow: inset 0 0 0 1.5px var(--cc-accent), 0 8px 18px -14px rgba(42, 92, 255, .7); }
.cc-opt.is-on::after { content: ""; position: absolute; top: 11px; right: 11px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--cc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2 6.8 11 12 5.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.cc-opt:has(input:focus-visible) { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.cc-opt.is-dis { cursor: not-allowed; background: var(--cc-surface-2); box-shadow: inset 0 0 0 1px var(--cc-line); color: var(--cc-muted); }
.cc-opt.is-dis:hover { box-shadow: inset 0 0 0 1px var(--cc-line); }
.cc-opt b { font-size: 14px; font-weight: 800; padding-right: 22px; }
.cc-opt small { font-size: 12px; color: var(--cc-muted); line-height: 1.55; }
.cc-opt em { margin-top: auto; padding-top: 4px; font: 700 12px var(--cc-font); font-style: normal; color: var(--cc-accent-ink); }
.cc-opt__tag { font-size: 12px; font-weight: 700; color: var(--cc-dark); }

.cc-rg__head { display: flex; align-items: center; gap: 10px; padding-right: 22px; }
.cc-rg__head > span { display: flex; align-items: baseline; gap: 8px; }
.cc-rg__head b { padding: 0; }
.cc-rg__head small { font: 600 11px/1.4 var(--cc-font); color: var(--cc-muted); }
.cc-dd--flag { display: inline-flex; align-items: center; gap: 7px; }

.cc-pl { gap: 9px; }
.cc-pl__top { display: flex; align-items: baseline; gap: 8px; padding-right: 22px; }
.cc-pl__top b { font-size: 17px; letter-spacing: -.02em; padding: 0; }
.cc-pl__top i { font: 600 11px var(--cc-font); font-style: normal; }
.cc-pl__top i.is-ok { color: var(--cc-ok); } .cc-pl__top i.is-out { color: var(--cc-warn); }
.cc-pl__spec { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 6px 10px; padding: 8px 0; border-block: 1px dashed var(--cc-line-2);
  font: 600 12px var(--cc-font); font-variant-numeric: tabular-nums; color: var(--cc-ink); }
.cc-pl__spec small { display: block; font: 600 11px/1.5 var(--cc-font); color: var(--cc-muted); }
.cc-pl__spec > span { white-space: nowrap; }
.is-dis .cc-pl__spec { color: var(--cc-muted); }
.cc-pl__price { display: flex; align-items: baseline; gap: 2px; }
.cc-pl__price b { font: 800 17px var(--cc-font); font-variant-numeric: tabular-nums; color: var(--cc-dark); padding: 0; }
.cc-pl__price small { font-size: 11px; }
.is-dis .cc-pl__price b { color: var(--cc-muted); }

.cc-opts--4 .cc-opt { gap: 1px; padding: 12px 14px; }
.cc-opts--4 .cc-opt b { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.cc-opts--4 .cc-opt span { font: 800 16px var(--cc-font); font-variant-numeric: tabular-nums; color: var(--cc-dark); }
.cc-opts--4 .cc-opt small { font-size: 11px; }
.cc-opts--4 .cc-opt em { margin: 0; padding: 1px 6px; border-radius: 5px; background: #fff1d6; color: var(--cc-sun-ink); font-size: 11px; line-height: 1.5; }
.cc-opts--4 .cc-opt.is-dis span { color: var(--cc-muted); font-size: 13px; }

.cc-sum { position: sticky; top: 84px; }
.cc-sum__card { padding: 20px; border-radius: 18px; background: var(--cc-surface); box-shadow: 0 0 0 1px var(--cc-line), 0 14px 30px -26px rgba(15, 24, 56, .3); }
.cc-sum h2 { font-size: 15px; font-weight: 800; margin: 0 0 12px; }
.cc-sum dl { margin: 0; display: grid; gap: 7px; }
.cc-sum dl div { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.cc-sum dt { color: var(--cc-muted); } .cc-sum dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cc-sum__spec { margin-top: 12px !important; padding: 12px 0; border-block: 1px dashed var(--cc-line-2); gap: 6px !important; }
.cc-sum__spec div { font-size: 12px !important; }
.cc-sum dl:first-of-type div { min-height: 22px; }
.cc-sum__spec dd { font-weight: 600 !important; }
.cc-sum__total { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; margin: 14px 0; }
.cc-sum__total span { font-size: 12px; font-weight: 700; color: var(--cc-muted); }
.cc-sum__total div { display: flex; align-items: baseline; gap: 2px; }
.cc-sum__total b { font: 800 26px/1 var(--cc-font); font-variant-numeric: tabular-nums; color: var(--cc-dark); letter-spacing: -.03em; }
.cc-sum__total small { font-size: 12px; color: var(--cc-muted); font-weight: 600; }
.cc-sum__total em { grid-column: 1 / -1; text-align: right; font-style: normal; font-size: 12px; color: var(--cc-accent-ink); font-weight: 600; }
.cc-sum .cc-btn { min-height: 42px; font-size: 14px; border-radius: 11px; }
.cc-sum__fine { margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: var(--cc-muted); text-align: center; }
.cc-mbar { display: none; }

@media (max-width: 1180px) {
  .cc-dp { grid-template-columns: minmax(0, 1fr); }
  .cc-sum { position: static; }
}
@media (max-width: 760px) {
  .cc-opts--plans { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .cc-opts--plans { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cc-dp { padding-top: 16px; gap: 14px; }
  .cc-step { padding: 16px 14px; border-radius: 16px; }
  .cc-opts--2 { grid-template-columns: 1fr; }
  .cc-opts--4 { grid-template-columns: 1fr 1fr; }
  .cc-step__head { flex-wrap: wrap; }

  .cc-sum { display: none; }
  .cc-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff; box-shadow: 0 -1px 0 var(--cc-line), 0 -12px 30px -20px rgba(15, 24, 56, .4); }
  .cc-mbar b { font: 800 19px var(--cc-font); color: var(--cc-dark); } .cc-mbar b small { font-size: 11px; color: var(--cc-muted); }
  .cc-mbar > div > small { display: block; font-size: 11px; color: var(--cc-muted); }
  .cc-mbar .cc-btn { min-height: 40px; font-size: 14px; }
}

/* 选配页补充（正式主题）：线路卡多于两条时自动换行；按钮禁用态；无 JS 时的规格表 */
.cc-dp .cc-opt { margin: 0; font-weight: 400; }
.cc-dp .cc-opt b { color: var(--cc-ink); }
.cc-dp .cc-flag { flex: none; width: 24px; height: 18px; margin: 0; }
.cc-dd--flag .cc-flag { width: 18px; height: 13.5px; border-radius: 2px; }
.cc-sum dd, .cc-sum dt { font-weight: inherit; } .cc-sum dd { font-weight: 700; }
.cc-btn.is-off { background: var(--cc-surface-2) !important; color: var(--cc-muted) !important; box-shadow: none !important; pointer-events: none; }
.cc-dp__ns { display: grid; gap: 24px; }
.cc-js .cc-dp__ns { display: none; }
.cc-dp__empty { grid-column: 1 / -1; }
.cc-pg-cart-products .cc-foot { margin-top: 0; }
@media (max-width: 640px) { .cc-has-mbar .cc-foot { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } .cc-mbar .cc-btn { flex: none; } }

/* cart2.css — 下单流程 2/3：页头与四步刻度、分类行、产品清单、两栏骨架、分节表单、字段、单选/复选、结账账户切换与付款方式。
 * standard_cart 的 all.min.css 在本文件之后加载（WHMCS 结账脚本与域名页依赖它），所以覆盖它的规则都带 .cc-body #order-standard_cart 前缀。 */
/* 下单流程比其他页面窄一档（M0 定稿 1080px）：顶栏、页头、内容、页脚同宽；产品组页用全站宽度 */
.cc-m-cart { --cc-wrap: 1080px; }
.cc-m-cart:has(.cc-ogrp) { --cc-wrap: 1240px; }
/* 顶栏不跟着下单流程收窄：1080 放不下英文导航（会盖住 Looking Glass、Log in 折行），与全站同宽 */
.cc-m-cart .cc-top { --cc-wrap: 1440px; }
.cc-m-cart .cc-foot__word { --cc-wrap: 1240px; } /* 页脚大字按视口宽度排，容器不能比全站窄，否则末字母被裁 */
.cc-m-cart .cc-done__no .cc-link { font-size: 15px; padding: 4px 8px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.cc-m-cart #main-body { padding-bottom: 96px; }

/* ---------- 页头：浅色隧道 + 面包屑 + 标题 + 四步刻度 ---------- */
.cc-ohead { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--cc-line); }
.cc-ohead__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; background: var(--cc-bg); }
.cc-ohead::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(246, 248, 252, .97) 30%, rgba(246, 248, 252, .6) 62%, rgba(246, 248, 252, .2)); }
.cc-ohead__in { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 30px 0 32px; }
.cc-ohead h1 { margin: 10px 0 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.03em; }
.cc-ohead p { margin: 6px 0 0; max-width: 40em; font-size: 14px; color: var(--cc-ink-2); }
.cc-ocrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--cc-muted); }
.cc-ocrumb a { color: var(--cc-muted); text-decoration: none; } .cc-ocrumb a:hover { color: var(--cc-accent-ink); }
.cc-ocrumb b { color: var(--cc-ink); font-weight: 700; } .cc-ocrumb span { color: var(--cc-line-2); }
.cc-rail4 { flex: none; display: flex; margin: 0; padding: 12px 6px 10px; list-style: none; border-radius: 16px; background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 1px var(--cc-line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cc-rail4 li { position: relative; display: grid; justify-items: center; gap: 6px; width: 84px; font-size: 12px; font-weight: 600; color: var(--cc-muted); }
.cc-rail4 li + li::before { content: ""; position: absolute; top: 11px; right: calc(50% + 15px); width: calc(100% - 30px); height: 2px; border-radius: 2px; background: var(--cc-line-2); }
.cc-rail4 b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--cc-surface); box-shadow: inset 0 0 0 1.5px var(--cc-line-2); font: 700 11px/1 var(--cc-font-mono); color: var(--cc-muted); }
.cc-rail4 .is-done b { background: var(--cc-dark); box-shadow: none; color: transparent; position: relative; }
.cc-rail4 .is-done b::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2 6.8 11 12 5.5' fill='none' stroke='%23ffb938' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.cc-rail4 .is-done + li::before, .cc-rail4 .is-now::before { background: var(--cc-dark); }
.cc-rail4 .is-now b { background: var(--cc-sun); box-shadow: 0 0 0 4px rgba(245, 165, 36, .2); color: var(--cc-dark); }
.cc-rail4 .is-now, .cc-rail4 .is-done { color: var(--cc-ink); }

/* ---------- 分类行、产品组页、订购清单 ---------- */
.cc-ocats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.cc-ocats:empty { display: none; }
.cc-ocats a { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--cc-ink-2); text-decoration: none; box-shadow: inset 0 0 0 1px var(--cc-line-2); background: var(--cc-surface); }
.cc-ocats a:hover { color: var(--cc-dark); box-shadow: inset 0 0 0 1px var(--cc-field); }
.cc-ocats a[aria-current="page"] { background: var(--cc-dark); color: #fff; box-shadow: none; }
.cc-ocats i { width: 1px; height: 18px; margin: 0 6px; background: var(--cc-line-2); }
.cc-ocats i:last-child, .cc-ocats i + i, .cc-ocats i:first-child { display: none; }
.cc-ogrp { padding-top: 24px; }
.cc-ogrp .cc-lsec { padding-top: 32px; border-top: 0; }
.cc-ogrp__lead { max-width: 60em; margin: 16px 0 0; color: var(--cc-ink-2); }
.cc-olist { margin-top: 24px; border-radius: 18px; background: var(--cc-surface); box-shadow: var(--cc-shadow-1); overflow: hidden; }
.cc-olist__row { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 20px 24px; border-top: 1px solid var(--cc-line); }
.cc-olist__row:first-child { border-top: 0; }
.cc-olist__name h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.cc-olist__name em { font-style: normal; font-size: 12px; font-weight: 600; } .cc-olist em.is-ok { color: var(--cc-ok); } .cc-olist em.is-out { color: var(--cc-warn); }
.cc-olist__desc { font-size: 13px; color: var(--cc-ink-2); line-height: 1.7; } .cc-olist__desc p, .cc-olist__desc ul { margin: 0; padding: 0; list-style: none; }
.cc-olist__desc li { display: inline-block; margin-right: 14px; } .cc-olist__desc strong, .cc-olist__desc b { color: var(--cc-ink); }
.cc-olist__buy { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: end; gap: 2px 8px; text-align: right; }
.cc-olist__buy > b { font: 800 20px var(--cc-font); letter-spacing: -.02em; color: var(--cc-dark); font-variant-numeric: tabular-nums; }
.cc-olist__cycle { font-size: 12px; color: var(--cc-muted); } .cc-olist__buy small { grid-column: 1 / -1; font-size: 12px; color: var(--cc-muted); }
.cc-olist__buy .cc-btn { grid-column: 1 / -1; justify-self: end; margin-top: 8px; }
.cc-oempty { display: grid; justify-items: center; gap: 14px; padding: 56px 24px; border-radius: 18px; background: var(--cc-surface); box-shadow: var(--cc-shadow-1); text-align: center; }
.cc-oempty p { margin: 0; color: var(--cc-ink-2); } .cc-oempty > b { font-size: 18px; color: var(--cc-dark); }

/* ---------- 两栏骨架：左主区 + 右吸附收据 ---------- */
.cc-body #order-standard_cart { margin: 0 auto; padding: 28px 0 0; font-size: 14px; }
/* 右栏用 CSS sticky；WHMCS 脚本给摘要/主区加的 margin-top 动画作废 */
.cc-body #order-standard_cart #orderSummary, .cc-body #order-standard_cart .secondary-cart-body { margin-top: 0 !important; }
.cc-body #order-standard_cart .cart-body, .cc-body #order-standard_cart .secondary-cart-body, .cc-body #order-standard_cart .secondary-cart-sidebar { float: none; width: auto; min-height: 0; padding: 0; }
.cc-ord__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.cc-ord__main { display: grid; gap: 16px; min-width: 0; counter-reset: ccs; }
.cc-ord__side, .cc-body #order-standard_cart .cc-ord__side { position: sticky; top: 84px; display: grid; gap: 12px; }
.cc-ord__help { margin: 0; font-size: 13px; color: var(--cc-muted); }
.cc-otools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 12px; }
.cc-otools:empty, .cc-otools > .col-md-6:empty { display: none; }

/* ---------- 分节：编号小标题（节号按可见分节自动编号，隐藏的不占号） ---------- */
.cc-fsec, .cc-co { padding: 20px 22px 22px; border-radius: 18px; background: var(--cc-surface); box-shadow: 0 0 0 1px var(--cc-line), 0 14px 30px -26px rgba(15, 24, 56, .3); }
.cc-co { counter-reset: ccs; padding-top: 0; }
.cc-fsec:empty { display: none; }
.cc-fsec--whmcs:not(:has(> *)) { display: none; }
.cc-body #order-standard_cart .cc-fsec__t { counter-increment: ccs; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--cc-ink); }
.cc-fsec__t::before { content: counter(ccs); display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--cc-dark); color: var(--cc-sun-2); font: 700 11px/1 var(--cc-font-mono); }
/* 分节之间用虚线分隔；第一个可见分节（cart.js 标 is-first，随“新客户/已有账户”切换更新）不画线 */
.cc-body #order-standard_cart .cc-co .cc-fsec__t { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--cc-line-2); }
.cc-body #order-standard_cart .cc-co .cc-fsec__t.is-first { margin-top: 0; border-top-color: transparent; }
.cc-fsec--whmcs .cc-fsec__t:not(:first-child) { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--cc-line-2); }
.cc-fsec__note { margin: -6px 0 14px; font-size: 13px; color: var(--cc-muted); }
.cc-fsec--prod { display: grid; gap: 4px; }
.cc-fsec__eyebrow { margin: 0; font: 600 12px var(--cc-font-mono); letter-spacing: .06em; color: var(--cc-accent-ink); }
.cc-fsec__name { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.cc-fsec__desc { margin-top: 6px; font-size: 13px; line-height: 1.8; color: var(--cc-ink-2); } .cc-fsec__desc strong { color: var(--cc-ink); margin-right: 12px; }
.cc-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.cc-cyc .cc-opt { margin: 0; } .cc-cyc .cc-opt b { color: var(--cc-ink); }
.cc-opt [class^="iradio_"], .cc-opt [class^="icheckbox_"] { position: absolute !important; opacity: 0; pointer-events: none; } /* WHMCS 重算后会把页面上所有单选框再包一层 iCheck */
.cc-specs { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--cc-line-2); }
.cc-specs div { display: grid; gap: 1px; } .cc-specs dt { font-size: 11px; font-weight: 600; color: var(--cc-muted); } .cc-specs dd { margin: 0; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-specs__extra { margin: 10px 0 0; font-size: 12px; color: var(--cc-muted); }

/* ---------- 字段：标签在上，输入框 44px ---------- */
.cc-body #order-standard_cart label { margin: 0; font-size: 13px; font-weight: 600; color: var(--cc-ink); }
.cc-body #order-standard_cart .form-group { margin-bottom: 14px; }
.cc-fg__l { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px !important; }
.cc-fg__l:empty { display: none; } .cc-fg__l i { font-style: normal; font-weight: 500; color: var(--cc-muted); }
.cc-body #order-standard_cart .field, .cc-body #order-standard_cart .form-control { display: block; width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--cc-field); border-radius: var(--cc-r-1);
  background-color: var(--cc-surface); color: var(--cc-ink); font: 500 14px var(--cc-font); box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.cc-body #order-standard_cart textarea.field, .cc-body #order-standard_cart textarea.form-control { height: auto; padding: 10px 14px; line-height: 1.6; }
.cc-body #order-standard_cart .field:focus, .cc-body #order-standard_cart .form-control:focus { border-color: var(--cc-accent); box-shadow: 0 0 0 4px rgba(42, 92, 255, .12); }
.cc-body #order-standard_cart select.form-control { padding-right: 34px; }
.cc-body #order-standard_cart .form-control-qty, .cc-body #order-standard_cart .select-inline { display: inline-block; width: auto; }
.cc-body #order-standard_cart .field-help-text { margin: 6px 0 0; font-size: 12px; color: var(--cc-muted); }
.cc-body #order-standard_cart .intl-tel-input, .cc-body #order-standard_cart .iti { display: block; width: 100%; }
.cc-body #order-standard_cart .intl-tel-input.allow-dropdown input { padding-left: 88px; }
.cc-body #order-standard_cart .input-group .form-control { border-radius: var(--cc-r-1) 0 0 var(--cc-r-1); }
.cc-body #order-standard_cart .input-group .btn { min-height: 44px; border-radius: 0 var(--cc-r-1) var(--cc-r-1) 0; }
.cc-body #order-standard_cart .password-strength-meter .progress { height: 6px; margin: 4px 0 6px; border-radius: 6px; background: var(--cc-surface-2); }
.cc-body #order-standard_cart .generate-password { margin-bottom: 8px; }
.cc-body #order-standard_cart .alert { margin: 0 0 16px; border: 0; border-radius: 14px; font-size: 14px; }
.cc-body #order-standard_cart .alert ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- 单选 / 复选（WHMCS 用 iCheck 包了一层）：换成主题样式 ---------- */
.cc-body .iradio_square-blue, .cc-body .icheckbox_square-blue, .cc-body .icheckbox_square-green { width: 18px; height: 18px; margin: 0 8px 0 0 !important; vertical-align: -4px; border-radius: 50%;
  background: var(--cc-surface) none; box-shadow: inset 0 0 0 1.5px var(--cc-field); transition: box-shadow .15s, background-color .15s; }
.cc-body .icheckbox_square-blue, .cc-body .icheckbox_square-green { border-radius: 5px; }
.cc-body .iradio_square-blue.hover, .cc-body .icheckbox_square-blue.hover { box-shadow: inset 0 0 0 1.5px var(--cc-accent); }
.cc-body .iradio_square-blue.checked { background: var(--cc-accent); box-shadow: inset 0 0 0 1.5px var(--cc-accent), inset 0 0 0 5px #fff; }
.cc-body .icheckbox_square-blue.checked, .cc-body .icheckbox_square-green.checked { box-shadow: none; background: var(--cc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2 6.8 11 12 5.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.cc-body .iradio_square-blue.disabled, .cc-body .icheckbox_square-blue.disabled { opacity: .45; }

/* ---------- 结账：新客户 / 已有账户、账户选择、付款方式 ---------- */
.cc-cust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: calc(100% - 344px); margin-bottom: 16px; }
.cc-cust button { display: grid; gap: 2px; padding: 12px 16px; border: 0; border-radius: 12px; background: var(--cc-surface); box-shadow: inset 0 0 0 1px var(--cc-line-2); text-align: left; font: 800 15px var(--cc-font); color: var(--cc-ink); cursor: pointer; }
.cc-cust button small { font-size: 12px; font-weight: 600; color: var(--cc-muted); }
.cc-cust button[aria-pressed="true"] { background: #f6f8ff; box-shadow: inset 0 0 0 1.5px var(--cc-accent), 0 8px 18px -14px rgba(42, 92, 255, .7); }
.cc-gws { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cc-body #order-standard_cart .cc-gw, .cc-body #order-standard_cart .account-select-container .account { display: flex; align-items: center; margin: 0; padding: 13px 14px; border: 0; border-radius: 12px; background: var(--cc-surface);
  box-shadow: inset 0 0 0 1px var(--cc-line-2); font-size: 14px; font-weight: 700; cursor: pointer; }
.cc-body #order-standard_cart .cc-gw:has(.checked), .cc-body #order-standard_cart .account-select-container .account.active { background: #f6f8ff; box-shadow: inset 0 0 0 1.5px var(--cc-accent); }
.cc-body #order-standard_cart .account-select-container { margin: 0 -5px; border: 0; } .cc-body #order-standard_cart .account-select-container > div { padding: 5px; }
.cc-body #order-standard_cart .account-select-container .account label { display: flex; gap: 4px; align-items: flex-start; width: 100%; padding: 0; font-weight: 500; }
.cc-body #order-standard_cart .cc-input-container, .cc-body #order-standard_cart .apply-credit-container { margin: 14px 0 0; padding: 16px; border: 0; border-radius: 12px; background: var(--cc-surface-2); }
.cc-body #order-standard_cart .apply-credit-container label { display: block; padding: 4px 0; font-weight: 500; }
.cc-body #order-standard_cart .marketing-email-optin { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px dashed var(--cc-line-2); background: none; } .cc-body .marketing-email-optin h4 { font-size: 15px; font-weight: 800; }
.cc-body #order-standard_cart #containerExistingUserSignin .text-center { text-align: left !important; }
.cc-body #order-standard_cart .sub-heading, .cc-body #order-standard_cart .sub-heading-borderless { height: auto; margin: 18px 0 10px; border: 0; text-align: left; }
.cc-body #order-standard_cart .sub-heading span, .cc-body #order-standard_cart .sub-heading-borderless span { position: static; padding: 0; background: none !important; font-size: 15px; font-weight: 800; color: var(--cc-ink); }

/* CVV：? 按钮贴在输入框右侧，同高同行；标签与同排卡号/有效期对齐 */
.cc-body #order-standard_cart .cc-cvv { display: flex; flex-wrap: nowrap; align-items: stretch; }
.cc-body #order-standard_cart .cc-cvv > .form-control { flex: 1 1 auto; min-width: 0; width: auto; }
.cc-body #order-standard_cart .cc-cvv > .input-group-append, .cc-body #order-standard_cart .cc-cvv > .input-group-btn { display: flex; width: auto; margin-left: -1px; }
.cc-body #order-standard_cart .cc-cvv .cc-cvv-help { width: 44px; min-height: 44px; height: auto; padding: 0; border: 1px solid var(--cc-field); border-radius: 0 var(--cc-r-1) var(--cc-r-1) 0 !important; background: var(--cc-surface-2); color: var(--cc-ink-2); font-weight: 700; box-shadow: none; }
.cc-body #order-standard_cart .cc-cvv .cc-cvv-help:hover, .cc-body #order-standard_cart .cc-cvv .cc-cvv-help:focus { background: var(--cc-accent-soft); color: var(--cc-accent); }
.cc-body #order-standard_cart .cc-fg__l i { white-space: nowrap; }
.cc-body #order-standard_cart #cvv-field-container .form-group, .cc-body #order-standard_cart .new-card-container .form-group { margin-bottom: 16px; }

/* cart3.css — 下单流程 3/3：购物车清单、收据卡、配置页附加项、完成页、域名与续费页的统一、窄屏。 */

/* ---------- 购物车清单：一项一行（名称 / 周期 / 今日金额 / 操作） ---------- */
.cc-items { border-radius: 18px; background: var(--cc-surface); box-shadow: 0 0 0 1px var(--cc-line), 0 14px 30px -26px rgba(15, 24, 56, .3); overflow: hidden; }
.cc-items ul { margin: 0; padding: 0; list-style: none; }
.cc-items__head, .cc-item { display: grid; grid-template-columns: minmax(0, 1fr) 120px 130px 92px; gap: 16px; align-items: center; padding: 0 22px; }
.cc-items__head { height: 40px; background: var(--cc-surface-2); font-size: 12px; font-weight: 700; color: var(--cc-muted); }
.cc-items__head span:nth-child(3), .cc-item__price { text-align: right; }
.cc-item { padding-block: 18px; border-top: 1px solid var(--cc-line); align-items: start; }
.cc-item__cycle, .cc-item__act { padding-top: 20px; } .cc-item__price { padding-top: 17px; }
.cc-item__what { display: grid; gap: 2px; min-width: 0; }
.cc-item__kind { font: 600 11px var(--cc-font-mono); letter-spacing: .06em; color: var(--cc-accent-ink); }
.cc-item__what b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--cc-ink); overflow-wrap: anywhere; }
.cc-item__what span:not(.cc-item__kind), .cc-item__what small { font-size: 12px; color: var(--cc-muted); line-height: 1.6; }
.cc-item__cycle { font-size: 13px; font-weight: 600; color: var(--cc-ink-2); }
.cc-item__qty { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; justify-self: start; }
.cc-item__qty em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--cc-muted); }
.cc-qstep { display: inline-flex; align-items: stretch; height: 30px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--cc-line-2); background: var(--cc-surface); overflow: hidden; }
.cc-qstep button { width: 30px; padding: 0; border: 0; background: none; font: 600 15px/1 var(--cc-font); color: var(--cc-ink-2); cursor: pointer; }
.cc-qstep button:hover { background: var(--cc-surface-2); color: var(--cc-dark); }
.cc-body #order-standard_cart .cc-items .cc-qstep input[type=number], .cc-qstep input { width: 38px; height: 30px !important; min-height: 0; margin: 0; padding: 0; border: 0; border-inline: 1px solid var(--cc-line); border-radius: 0; box-shadow: none; background: none; text-align: center; font: 700 13px/30px var(--cc-font); font-variant-numeric: tabular-nums; color: var(--cc-ink); -moz-appearance: textfield; appearance: textfield; }
.cc-qstep input::-webkit-outer-spin-button, .cc-qstep input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cc-qstep input:focus { outline: 2px solid var(--cc-accent); outline-offset: -2px; }
.cc-item__qtygo { height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--cc-surface-2); font: 600 12px var(--cc-font); color: var(--cc-accent-ink); cursor: pointer; }
.cc-item__qty.is-js .cc-item__qtygo { display: none; }
.cc-item__price b { display: block; font: 800 17px var(--cc-font); font-variant-numeric: tabular-nums; color: var(--cc-dark); }
.cc-item__price small { display: block; font-size: 11px; color: var(--cc-muted); line-height: 1.5; }
.cc-item__act { display: flex; justify-content: flex-end; gap: 12px; font-size: 13px; font-weight: 600; }
.cc-item__act a, .cc-item__act button, .cc-link { padding: 0; border: 0; background: none; font: 600 13px var(--cc-font); color: var(--cc-muted); text-decoration: none; cursor: pointer; }
.cc-item__act a:hover, .cc-link:hover { color: var(--cc-accent-ink); } .cc-item__act button:hover { color: var(--cc-danger); }
.cc-items__foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-top: 1px solid var(--cc-line); background: none; }
.cc-body #order-standard_cart .empty-cart { margin: 0; text-align: left; }
.cc-body #order-standard_cart .view-cart-items, .cc-body #order-standard_cart .view-cart-gateway-checkout { margin: 0; border: 0; }
.cc-body #order-standard_cart .view-cart-gateway-checkout { padding: 16px; border-radius: 14px; background: var(--cc-surface-2); }
.cc-confirm { text-align: center; padding: 28px 28px 20px !important; } .cc-confirm h4 { margin: 0 0 6px; font-size: 18px; font-weight: 800; } .cc-confirm p { margin: 0; color: var(--cc-ink-2); }
.cc-body .modal-remove-item .modal-footer { justify-content: center; gap: 10px; border: 0; background: none; padding-bottom: 28px; }
.cc-body .modal-remove-item .modal-dialog { max-width: 400px; }

/* ---------- 收据卡（配置摘要 / 购物车小计 / 结账订单） ---------- */
.cc-rcpt, .cc-body #order-standard_cart .cc-rcpt { position: relative; margin: 0; padding: 20px; border: 0; border-radius: 18px; background: var(--cc-surface); box-shadow: 0 0 0 1px var(--cc-line), 0 14px 30px -26px rgba(15, 24, 56, .3); }
.cc-body #order-standard_cart .order-summary { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.cc-body #order-standard_cart .cc-rcpt.order-summary { padding: 20px; border-radius: 18px; background: var(--cc-surface); }
.cc-body #order-standard_cart .cc-rcpt__t { margin: 0 0 12px; padding: 0; font-size: 15px; font-weight: 800; text-align: left; color: var(--cc-ink); }
.cc-body #order-standard_cart .summary-container { min-height: 0; margin: 0; padding: 0; border-radius: 0; background: none; font-size: 13px; }
.cc-body #order-standard_cart .order-summary .loader { position: absolute; top: 20px; right: 20px; height: auto; padding: 0; color: var(--cc-muted); }
.cc-rcpt__name { display: grid; gap: 2px; margin: 0 0 12px; } .cc-rcpt__name b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; } .cc-rcpt__name span { font-size: 12px; color: var(--cc-muted); }
.cc-rcpt__dl { display: grid; gap: 7px; margin: 0; padding: 12px 0; border-top: 1px dashed var(--cc-line-2); font-size: 13px; }
.cc-rcpt__dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cc-rcpt__dl dt { font-weight: 500; color: var(--cc-muted); } .cc-rcpt__dl dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cc-rcpt__dl .is-sub dt { padding-left: 10px; font-size: 12px; } .cc-rcpt__dl small { display: block; font-size: 11px; font-weight: 500; color: var(--cc-muted); }
.cc-body #order-standard_cart .recurring-charges { font-size: 12px; font-style: normal; font-weight: 600; color: var(--cc-ink-2); }
.cc-rcpt__total, .cc-body #order-standard_cart .cc-rcpt__total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 14px; padding: 14px 0 0; border-top: 1px dashed var(--cc-line-2); }
.cc-body #order-standard_cart .cc-rcpt__total span { display: inline; font-size: 12px; font-weight: 700; color: var(--cc-muted); text-align: left; }
.cc-body #order-standard_cart .cc-rcpt__total b, .cc-body #order-standard_cart .cc-rcpt__total .amt { display: inline; font: 800 24px/1 var(--cc-font); letter-spacing: -.03em; color: var(--cc-dark); font-variant-numeric: tabular-nums; text-align: right; }
.cc-rcpt .cc-btn { min-height: 44px; border-radius: 11px; font-size: 14px; }
.cc-rcpt__promo { margin: 0 0 12px; } .cc-rcpt__pform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.cc-body #order-standard_cart .cc-rcpt__pform .form-control { height: 38px; font-size: 13px; } .cc-rcpt__pform .cc-btn { min-height: 38px; }
.cc-rcpt__code { margin: 0 0 4px; padding: 8px 10px; border-radius: 10px; background: var(--cc-sun-soft); font-size: 12px; color: var(--cc-sun-ink); }
.cc-rcpt__tax { margin: 0 0 4px; font-size: 13px; } .cc-rcpt__tax summary { cursor: pointer; font-weight: 600; color: var(--cc-muted); } .cc-rcpt__tax form { margin-top: 10px; }
.cc-rcpt__items { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.cc-rcpt__items li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cc-rcpt__items b { display: block; font-size: 14px; font-weight: 800; } .cc-rcpt__items small { display: block; font-size: 12px; color: var(--cc-muted); }
.cc-rcpt__items em { flex: none; font-style: normal; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; } .cc-rcpt__items .is-sub b { font-weight: 600; font-size: 13px; }
.cc-rcpt__go p { margin: 0 0 12px; font-size: 13px; } .cc-body #order-standard_cart .cc-rcpt__go label { display: block; font-weight: 500; color: var(--cc-ink-2); line-height: 1.6; }
.cc-rcpt__back { margin: 12px 0 0; text-align: center; font-size: 13px; } .cc-rcpt__back a { color: var(--cc-muted); text-decoration: none; font-weight: 600; }
.cc-rcpt__secure, .cc-body #order-standard_cart .checkout-security-msg { margin: 0; padding: 0 6px; border: 0; background: none; font-size: 11px; line-height: 1.6; color: var(--cc-muted); text-align: center; }
.cc-body #order-standard_cart .checkout-security-msg i { float: none; margin: 0 4px 0 0; font-size: 11px; }
.cc-body #order-standard_cart .express-checkout-buttons .separator { margin: 8px 0; padding: 0; font-size: 12px; font-weight: 600; color: var(--cc-muted); }

/* ---------- 配置页：附加服务卡、产品说明 ---------- */
.cc-body #order-standard_cart .panel-addon { margin: 0 0 10px; border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--cc-line-2); font-size: 13px; text-align: left; overflow: hidden; }
.cc-body #order-standard_cart .panel-addon .panel-body { padding: 14px; } .cc-body #order-standard_cart .panel-addon .panel-price { padding: 8px 14px; background: var(--cc-surface-2); font-weight: 700; }
.cc-body #order-standard_cart .panel-addon .panel-add { padding: 8px 14px; border-radius: 0; background: var(--cc-dark); color: #fff; font-weight: 700; text-align: center; }
.cc-body #order-standard_cart .panel-addon-selected { box-shadow: inset 0 0 0 1.5px var(--cc-accent); } .cc-body #order-standard_cart .panel-addon-selected .panel-add { background: var(--cc-accent); }

/* ---------- 完成页：订单回执 + 接下来 ---------- */
.cc-done { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
.cc-done__slip { display: grid; justify-items: start; gap: 14px; padding: 28px; border-radius: 18px; background: var(--cc-dark); color: var(--cc-dark-muted); }
.cc-done__label { margin: 0; font: 600 12px var(--cc-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cc-sun-2); }
.cc-body #order-standard_cart .cc-done__no { display: flex; align-items: center; gap: 12px; margin: -8px 0 0; text-align: left; }
.cc-body #order-standard_cart .cc-done__no span { font: 700 clamp(26px, 3.4vw, 38px)/1.1 var(--cc-font-mono); letter-spacing: .02em; color: #fff; }
.cc-done__no .cc-link { color: var(--cc-dark-muted); font-size: 18px; } .cc-done__no .cc-link:hover { color: #fff; }
.cc-done__pay { display: grid; justify-items: start; gap: 10px; width: 100%; padding: 16px 0 4px; border-top: 1px dashed rgba(255, 255, 255, .2); } .cc-done__pay b { color: #fff; font-size: 15px; }
.cc-done__ok { margin: 0; color: #fff; font-weight: 700; } .cc-done__ok i { color: var(--cc-sun-2); margin-right: 6px; }
.cc-done__slip .cc-arrow { color: #fff !important; } .cc-done__slip .cc-arrow::after { color: var(--cc-sun-2); }
.cc-done__slip .alert { width: 100%; margin: 0; }
.cc-done__next { padding: 24px 26px; border-radius: 18px; background: var(--cc-surface); box-shadow: 0 0 0 1px var(--cc-line); }
.cc-done__next h2 { margin: 0 0 16px; font-size: 15px; font-weight: 800; }
.cc-done__next ol { margin: 0; padding: 0; list-style: none; counter-reset: dn; display: grid; }
.cc-done__next li { counter-increment: dn; position: relative; padding: 0 0 18px 38px; }
.cc-done__next li::before { content: counter(dn); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--cc-surface-2); font: 700 11px/1 var(--cc-font-mono); color: var(--cc-ink-2); }
.cc-done__next li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 28px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--cc-line); }
.cc-done__next li.is-done::before { background: var(--cc-dark); color: var(--cc-sun-2); }
.cc-done__next b { display: block; font-size: 14px; color: var(--cc-ink); } .cc-done__next p { margin: 2px 0 0; font-size: 13px; color: var(--cc-muted); }
.cc-done__next li:last-child { padding-bottom: 0; }

/* ---------- 域名、续费、附加服务页（少用）：沿用 WHMCS 结构，去掉灰底与旧配色 ---------- */
.cc-body #order-standard_cart .products .product { margin: 0 0 16px; padding: 0; border: 0; border-radius: 16px; background: var(--cc-surface); box-shadow: 0 0 0 1px var(--cc-line); overflow: hidden; }
.cc-body #order-standard_cart .products .product header { margin: 0; padding: 14px 18px; border-radius: 0; background: var(--cc-surface-2); }
.cc-body #order-standard_cart .products .product header span { font-size: 15px; font-weight: 800; color: var(--cc-ink); }
.cc-body #order-standard_cart .products .product div.product-desc { float: none; width: auto; padding: 14px 18px; font-size: 13px; }
.cc-body #order-standard_cart .products .product footer { float: none; width: auto; margin: 0; padding: 14px 18px; border-top: 1px solid var(--cc-line); font-size: 13px; text-align: right; }
.cc-body #order-standard_cart .products .product div.product-pricing span.price { font-size: 18px; font-weight: 800; color: var(--cc-dark); }
.cc-body #order-standard_cart .domain-selection-options .option { margin-bottom: 8px; padding: 12px 16px; border-radius: 12px; background: var(--cc-surface); box-shadow: inset 0 0 0 1px var(--cc-line-2); }
.cc-body #order-standard_cart .domain-selection-options .option-selected { background: #f6f8ff; box-shadow: inset 0 0 0 1.5px var(--cc-accent); }
.cc-body #order-standard_cart .domain-checker-bg { padding: 28px 20px; border-radius: 18px; background: var(--cc-dark) none; }
.cc-body #order-standard_cart .domain-checker-container { margin: 0 0 20px; padding: 0; border-radius: 18px; background: none; }
.cc-body #order-standard_cart .service-renewals .service-renewal, .cc-body #order-standard_cart .domain-renewals .domain-renewal { margin: 0 0 12px; padding: 16px 18px; border: 0; border-radius: 14px; background: var(--cc-surface); box-shadow: 0 0 0 1px var(--cc-line); }
.cc-ord--service-renewals > .row, .cc-ord--domain-renewals > .row, .cc-ord > .row { margin: 0; } .cc-ord > .row > .cart-body { flex: 1 1 100%; max-width: 100%; }
.cc-ord--service-renewals .cart-body > .row, .cc-ord--domain-renewals .cart-body > .row { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; margin: 0; align-items: start; }

/* ---------- 窄屏 ---------- */
@media (max-width: 1180px) {
  .cc-ord__grid, .cc-done, .cc-ord--service-renewals .cart-body > .row, .cc-ord--domain-renewals .cart-body > .row { grid-template-columns: minmax(0, 1fr); }
  .cc-ord__side { position: static; }
  .cc-cust { max-width: none; }
  .cc-olist__row { grid-template-columns: minmax(0, 1fr) auto; } .cc-olist__desc { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 860px) {
  .cc-ohead__in { flex-direction: column; align-items: stretch; gap: 18px; padding: 22px 0 20px; }
  .cc-rail4 { margin: 0; } .cc-rail4 li { flex: 1; width: auto; }
}
@media (max-width: 640px) {
  .cc-item__cycle, .cc-item__act, .cc-item__price { padding-top: 0; }
  .cc-ord { padding-top: 16px; }
  .cc-fsec, .cc-co, .cc-rcpt, .cc-body #order-standard_cart .cc-rcpt.order-summary { padding: 16px 14px; border-radius: 16px; } .cc-co { padding-top: 0; }
  .cc-has-mbar #main-body { padding-bottom: 88px; }
  .cc-fgrid { grid-template-columns: 1fr; }
  .cc-items__head { display: none; }
  .cc-item { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 16px 14px; border-top: 1px solid var(--cc-line); }
  .cc-items ul > .cc-item:first-child { border-top: 0; }
  .cc-item__cycle { grid-row: 2; } .cc-item__act { grid-column: 2; grid-row: 2; }
  .cc-items__foot { padding: 12px 14px; }
  .cc-olist__row { grid-template-columns: 1fr; padding: 16px; } .cc-olist__buy { justify-content: start; text-align: left; } .cc-olist__buy .cc-btn { justify-self: start; }
  .cc-done__slip, .cc-done__next { padding: 20px 16px; }
  .cc-cust button { padding: 10px 12px; font-size: 14px; }
}
/* 结账：服务条款同意块（紧凑版 cc-consent） */
.cc-body #order-standard_cart .cc-rcpt__go label.cc-consent { display: flex; }
.cc-consent--sm { max-width: none; margin: 0 0 14px; padding: 14px 14px 14px 20px; gap: 12px; align-items: center; border-radius: 12px; }
.cc-consent--sm:hover { transform: none; }
.cc-consent--sm input { left: 20px; top: 50%; margin-top: -11px; }
.cc-consent--sm .cc-consent__box { margin-top: 0; }
.cc-consent--sm .cc-consent__body strong { font-size: 14px; line-height: 1.5; }
.cc-consent--sm .cc-consent__body a { margin-left: 2px; }
.cc-consent.is-invalid { animation: cc-shake .4s; box-shadow: 0 0 0 3px rgba(229,72,77,.18); }
.cc-consent.is-invalid::before { background: var(--cc-danger, #e5484d); }
@keyframes cc-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.cc-body #order-standard_cart .cc-rcpt__go label.cc-consent--sm { margin: 20px 0 20px; }

/* 支付方式选择（结账 / 账单 / 充值）：三种样式 card | list | tile，dark = 账单页深蓝付款栏 */
.cc-pms { display: grid; gap: 10px; margin: 0; }
.cc-pms--card { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.cc-pms--list { grid-template-columns: 1fr; gap: 8px; }
.cc-pms--tile { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cc-body .cc-pm, .cc-body #order-standard_cart .cc-pm { position: relative; display: grid; grid-template-columns: 40px 1fr; align-items: center; column-gap: 12px; row-gap: 6px; margin: 0; padding: 14px 16px;
  border: 0; border-radius: 14px; background: var(--cc-surface); box-shadow: inset 0 0 0 1px var(--cc-line-2); color: var(--cc-ink); font-size: 14px; font-weight: 700; line-height: 1.35; cursor: pointer;
  transition: box-shadow .15s, background-color .15s, transform .15s; }
.cc-body .cc-pm:hover { box-shadow: inset 0 0 0 1px var(--cc-accent); }
.cc-body .cc-pm:has(input:checked), .cc-body .cc-pm:has(.checked), .cc-body .cc-pm.is-on { background: #f6f8ff; box-shadow: inset 0 0 0 1.5px var(--cc-accent), 0 10px 22px -18px rgba(42, 92, 255, .8); }
.cc-pm > input[type=radio], .cc-pm > .iradio_square-blue, .cc-pm > div[class^="iradio"] { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none; }
.cc-pm:has(input:checked)::after, .cc-pm:has(.checked)::after, .cc-pm.is-on::after { content: ""; position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--cc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.6l4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.cc-pm__logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--cc-line); overflow: hidden; }
.cc-pm__logo img { width: 26px; height: 26px; object-fit: contain; }
.cc-pm__logo i { font-style: normal; font-weight: 800; font-size: 16px; color: var(--cc-accent-ink); }
.cc-pm__txt { display: grid; gap: 2px; min-width: 0; padding-right: 18px; }
.cc-pm__txt b { font-weight: 800; overflow-wrap: anywhere; }
.cc-pm__txt small { font-size: 12px; font-weight: 500; color: var(--cc-muted) !important; }
.cc-pm__tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.cc-pm__tags em { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font: 700 11px/1.6 var(--cc-font); font-style: normal; font-variant-numeric: tabular-nums; }
.cc-pm__cur { background: var(--cc-surface-2); color: var(--cc-ink-2); box-shadow: inset 0 0 0 1px var(--cc-line); }
.cc-pm__auto { background: #fff4e0; color: #8a4b00; }
.cc-pm__auto::before { content: ""; flex-shrink: 0; width: 10px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 8A5.5 5.5 0 1 1 11.9 4.1M13.5 2.5v3h-3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 8A5.5 5.5 0 1 1 11.9 4.1M13.5 2.5v3h-3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
/* list：标记移到右侧 */
.cc-body .cc-pms--list .cc-pm, .cc-body #order-standard_cart .cc-pms--list .cc-pm { grid-template-columns: 36px 1fr auto; padding: 12px 42px 12px 14px; }
.cc-pms--list .cc-pm__logo { width: 36px; height: 36px; }
.cc-pms--list .cc-pm__tags { grid-column: 3; grid-row: 1; justify-content: flex-end; }
.cc-pms--list .cc-pm:has(input:checked)::after, .cc-pms--list .cc-pm.is-on::after, .cc-pms--list .cc-pm:has(.checked)::after { top: 50%; margin-top: -8px; right: 14px; }
/* tile：大 Logo 居中，描述隐藏 */
.cc-body .cc-pms--tile .cc-pm, .cc-body #order-standard_cart .cc-pms--tile .cc-pm { grid-template-columns: 1fr; justify-items: center; align-content: start; text-align: center; padding: 20px 14px 16px; row-gap: 8px; }
.cc-pms--tile .cc-pm__logo { width: 56px; height: 56px; border-radius: 14px; } .cc-pms--tile .cc-pm__logo img { width: 36px; height: 36px; }
.cc-pms--tile .cc-pm__txt { padding: 0 6px; } .cc-pms--tile .cc-pm__txt small { display: none; }
.cc-pms--tile .cc-pm__tags { grid-column: 1; justify-content: center; }
/* 账单页深蓝付款栏 */
.cc-pms--dark .cc-pm { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; }
.cc-pms--dark .cc-pm:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.cc-pms--dark .cc-pm:has(input:checked), .cc-pms--dark .cc-pm.is-on { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px var(--cc-sun); }
.cc-pms--dark .cc-pm.is-on::after, .cc-pms--dark .cc-pm:has(input:checked)::after { background-color: var(--cc-sun); }
.cc-pms--dark .cc-pm__txt b { color: #fff; } .cc-pms--dark .cc-pm__txt small { color: rgba(255, 255, 255, .62) !important; }
.cc-pms--dark .cc-pm__cur { background: rgba(255, 255, 255, .1); color: #dbe2f7; box-shadow: none; }
.cc-pms--dark .cc-pm__auto { background: rgba(245, 165, 36, .18); color: #ffd28a; }
.cc-pms--dark div.cc-pm { cursor: default; }
/* 窄的深色付款栏：标记放到名称下面，名称不折行 */
.cc-body .cc-pms--dark.cc-pms--list .cc-pm { grid-template-columns: 36px 1fr; padding-right: 36px; }
.cc-pms--dark.cc-pms--list .cc-pm__tags { grid-column: 2; grid-row: auto; justify-content: flex-start; }
.cc-pms--dark .cc-pm__txt { padding-right: 0; }
fieldset.cc-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.cc-body #order-standard_cart .cc-gws.cc-pms { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.cc-body #order-standard_cart .cc-gws.cc-pms--list { grid-template-columns: 1fr; }
.cc-body #order-standard_cart .cc-gws.cc-pms--tile { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* 账单页切换网关：只认 :checked（不再叠加服务器端 is-on，避免提交跳转前两项同时高亮）；提交中整组降透明并禁止再点 */
.cc-pms.is-busy { pointer-events: none; opacity: .65; transition: opacity .2s; }

/* 自动续费明确提示：仅在可续费的账单/购物车、且选中订阅网关时，卡片内展开 */
.cc-pm__note { display: none; grid-column: 1 / -1; grid-row: auto; margin-top: 4px; padding: 10px 12px 10px 38px; position: relative; border-radius: 10px;
  background: #fff4e0; color: #6b3a00; font: 500 12.5px/1.55 var(--cc-font); box-shadow: inset 0 0 0 1px #f5c77a; }
.cc-pm__note b { display: block; margin-bottom: 2px; font-size: 13.5px; font-weight: 800; color: #8a4b00; }
.cc-pm__note::before { content: ""; position: absolute; left: 12px; top: 11px; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 8A5.5 5.5 0 1 1 11.9 4.1M13.5 2.5v3h-3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 8A5.5 5.5 0 1 1 11.9 4.1M13.5 2.5v3h-3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.cc-pm:has(input:checked) .cc-pm__note, .cc-pm:has(.checked) .cc-pm__note, .cc-pm.is-on .cc-pm__note { display: block; }
.cc-pms--dark .cc-pm__note { background: rgba(245, 165, 36, .16); color: #ffe2b0; box-shadow: inset 0 0 0 1px rgba(245, 165, 36, .55); }
.cc-pms--dark .cc-pm__note b { color: #ffc566; }
.cc-pms--tile .cc-pm__note { text-align: left; }

/* 转付款网关过渡页（forwardpage.tpl） */
.cc-fwd { min-height: 46vh; display: grid; place-items: center; padding: 56px 16px; }
.cc-fwd__card { width: min(440px, 100%); text-align: center; padding: 40px 32px 30px; border-radius: 18px; background: #fff;
  border: 1px solid var(--cc-line, #e3e8f0); box-shadow: 0 12px 32px -20px rgba(15, 24, 56, .22); animation: cc-fwd-in .35s ease-out both; }
.cc-fwd__orb { position: relative; width: 76px; height: 76px; margin: 0 auto 22px; }
.cc-fwd__orb > svg:first-child { width: 100%; height: 100%; transform: rotate(-90deg); }
.cc-fwd__track { fill: none; stroke: rgba(15, 24, 56, .08); stroke-width: 4; }
.cc-fwd__arc { fill: none; stroke: var(--cc-sun, #f5a524); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 60 164; transform-origin: 32px 32px; animation: cc-fwd-spin 1.1s linear infinite; }
.cc-fwd__ico { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; fill: none; stroke: var(--cc-ink, #0f1838); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cc-fwd__t { margin: 0 0 8px; font-size: 19px !important; font-weight: 700; color: var(--cc-ink, #0f1838); line-height: 1.45; }
.cc-fwd__sub { margin: 0 0 18px; font-size: 14px; color: var(--cc-ink-2, #5b6680); }
.cc-fwd__bar { height: 3px; border-radius: 3px; background: rgba(15, 24, 56, .07); overflow: hidden; margin: 0 0 20px; }
.cc-fwd__bar i { display: block; width: 36%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--cc-ink, #0f1838), var(--cc-sun, #f5a524)); animation: cc-fwd-run 1.4s ease-in-out infinite; }
.cc-fwd__card .cc-fwd__alt { display: inline-block; padding-top: 16px; border-top: 1px solid var(--cc-line, #e3e8f0); width: 100%; font-size: 13px; color: var(--cc-ink-2, #5b6680) !important; text-decoration: none; }
.cc-fwd__card .cc-fwd__alt:hover { color: var(--cc-sun-ink, #9a5d00) !important; }
.cc-fwd__code { margin-top: 18px; text-align: center; } .cc-fwd__code:empty { display: none; }
@keyframes cc-fwd-spin { to { transform: rotate(360deg); } }
@keyframes cc-fwd-run { from { transform: translateX(-100%); } to { transform: translateX(280%); } }
@keyframes cc-fwd-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .cc-fwd__arc, .cc-fwd__bar i { animation-duration: 3s; } }
body:has(.cc-fwd) .cc-verify { display: none !important; }

/* Looking Glass（cc/lg.tpl）：页头右侧连接档案 + 节点轨道 / 仪表台 / 会话记录。 */
.cc-mast--lg .cc-mast__in { align-items: start; }
.cc-lgid { width: min(420px, 100%); padding: 22px 24px; border-radius: var(--cc-r-3); background: var(--cc-dark); color: var(--cc-dark-ink); box-shadow: var(--cc-shadow-2); }
.cc-lgid__k { margin: 0 0 12px; font: 700 12px/1 var(--cc-font); letter-spacing: .08em; text-transform: uppercase; color: var(--cc-sun-2); }
.cc-lgid dl { margin: 0; display: grid; gap: 0; }
.cc-lgid dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.cc-lgid dt { font-size: 13px; color: var(--cc-dark-muted); font-weight: 500; }
.cc-lgid dd { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.cc-lgid dd small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--cc-dark-muted); }
.cc-lgid__cc { display: inline-block; margin-right: 8px; padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, .12); font: 600 11px/1.5 var(--cc-font-mono); }
.cc-lgid__na { color: var(--cc-sun-2); }
.cc-lgid__test dd .cc-mono { color: var(--cc-sun-2); }
.cc-mono { font-family: var(--cc-font-mono); }

.cc-lgx { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; padding: 8px 0 var(--cc-s-8); }
.cc-lgx__k { margin: 0 0 14px; font: 700 12px/1 var(--cc-font); letter-spacing: .08em; text-transform: uppercase; color: var(--cc-muted); }
.cc-lgx__rail { position: sticky; top: 96px; padding: 20px 16px 16px; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); }
.cc-lgx__rail > .cc-lgx__k { padding: 0 8px; }
.cc-lgx__empty { color: var(--cc-muted); padding: 0 8px; }
.cc-lgx__line + .cc-lgx__line { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cc-line); }
.cc-lgx__city { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 0 8px; font-weight: 800; font-size: 14px; color: var(--cc-ink-2); }
.cc-lgx__city small { margin-left: auto; font: 600 11px var(--cc-font-mono); color: var(--cc-muted); }
.cc-lgx__city .cc-flag { flex: none; width: 20px; height: 15px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--cc-line); }
.cc-lgx__city .cc-flag svg { width: 100%; height: 100%; display: block; }
.cc-lgx__line ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cc-lgx__stop { appearance: none; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px 8px 8px;
  border: 0; outline: 0; background: transparent; text-align: left; cursor: pointer; border-radius: 12px; color: var(--cc-ink); font: inherit; box-shadow: inset 0 0 0 1px transparent;
  transition: background var(--cc-dur) var(--cc-ease), box-shadow var(--cc-dur) var(--cc-ease); }
.cc-lgx__stop:hover:not(:disabled) { background: var(--cc-surface-2); }
.cc-lgx__stop:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--cc-accent); }
.cc-lgx__stop:disabled { cursor: not-allowed; opacity: .5; }
.cc-lgx__stop[aria-pressed="true"] { background: var(--cc-surface-sel); box-shadow: inset 0 0 0 1.5px var(--cc-accent); }
.cc-lgx__dot { justify-self: center; width: 16px; height: 16px; border-radius: 50%; background: var(--cc-surface); box-shadow: inset 0 0 0 1.5px var(--cc-field); transition: box-shadow var(--cc-dur) var(--cc-ease); }
.cc-lgx__stop[aria-pressed="true"] .cc-lgx__dot { box-shadow: inset 0 0 0 5px var(--cc-accent); }
.cc-lgx__nm { display: grid; gap: 3px; min-width: 0; }
.cc-lgx__nm b { font-size: 15px; line-height: 1.2; }
.cc-lgx__nm small { font-size: 12px; line-height: 1.2; color: var(--cc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-lgx__stop[aria-pressed="true"] .cc-lgx__nm b { color: var(--cc-accent-ink); }
.cc-lgx__tag { padding: 3px 7px; border-radius: 6px; background: var(--cc-accent-soft); color: var(--cc-accent-ink); font: 700 10px/1 var(--cc-font); letter-spacing: .04em; }

.cc-lgx__deck { padding: 26px 28px 28px; border-radius: var(--cc-r-3); background: var(--cc-surface); box-shadow: var(--cc-shadow-1); min-width: 0; }
.cc-lgx__top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cc-lgx__node { margin: 0 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cc-lgx__nodename { font-size: 16px; font-weight: 800; line-height: 40px; margin-right: 2px; }
.cc-lgx__ip { display: inline-flex; align-items: stretch; height: 40px; border-radius: 10px; background: var(--cc-dark); overflow: hidden; }
.cc-lgx__ip[hidden] { display: none; }
.cc-lgx__ip code { display: flex; align-items: center; padding: 0 12px 0 14px; background: none; color: var(--cc-sun-2); font: 600 14px/1.2 var(--cc-font-mono); letter-spacing: .01em; }
.cc-lgx__ip button { appearance: none; border: 0; border-left: 1px solid rgba(255, 255, 255, .16); background: none; padding: 0 12px; color: var(--cc-dark-muted); font: 600 12px/1.2 var(--cc-font); cursor: pointer; }
.cc-lgx__ip button:hover { color: #fff; }
.cc-lgx__buy { height: 40px; min-height: 40px; gap: 6px; white-space: nowrap; transform: none !important; }
.cc-lgx__buy[hidden] { display: none; }
.cc-lgx__gate { display: grid; gap: 4px; margin-bottom: 18px; padding: 16px 18px; border-radius: var(--cc-r-2); background: var(--cc-sun-soft); }
.cc-lgx__gate span { color: var(--cc-ink-2); font-size: 14px; }
.cc-lgx__cf { margin-top: 10px; min-height: 65px; }
.cc-lgx__err { margin: 0 0 18px; padding: 12px 16px; border-radius: var(--cc-r-1); background: var(--cc-danger-soft); color: var(--cc-danger); font-weight: 600; font-size: 14px; }
.cc-lgx__meters { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cc-lgx__meter { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; padding: 18px 20px 16px; border-radius: var(--cc-r-2); background: var(--cc-surface-2); }
.cc-lgx__meter span { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--cc-muted); }
.cc-lgx__meter b { font: 800 clamp(40px, 5vw, 64px)/1 var(--cc-font-num); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cc-lgx__meter[data-meter="down"] b { color: var(--cc-accent-ink); }
.cc-lgx__meter[data-meter="up"] b { color: var(--cc-sun-ink); }
.cc-lgx__act .cc-btn { box-shadow: none; }
.cc-lgx__meter small { font-weight: 700; color: var(--cc-muted); }
.cc-lgx__bar { grid-column: 1 / -1; display: block; height: 4px; margin-top: 12px; border-radius: 4px; background: var(--cc-line); overflow: hidden; }
.cc-lgx__bar i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .2s linear; }
[data-meter="down"] .cc-lgx__bar i { background: var(--cc-accent); }
[data-meter="up"] .cc-lgx__bar i { background: var(--cc-sun); }
.cc-lgx__chart { position: relative; margin: 20px 0 18px; }
.cc-lgx__wave { display: block; width: 100%; height: 190px; }
.cc-lgx__legend { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); margin: 0; display: flex; gap: 14px; align-items: center; font-size: 12px; font-weight: 600; color: var(--cc-ink-2); }
.cc-lgx__legend span::before { content: ""; display: inline-block; width: 12px; height: 3px; margin-right: 6px; border-radius: 2px; vertical-align: middle; background: var(--cc-accent); }
.cc-lgx__legend .is-up::before { background: var(--cc-sun); }
.cc-lgx__legend small { display: none; }
.cc-lgx__legend .is-down { color: var(--cc-accent-ink); }
.cc-lgx__legend .is-up { color: var(--cc-sun-ink); }
.cc-lgx__act { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.cc-lgx__phase { font-weight: 600; color: var(--cc-ink-2); }
.cc-lgx.is-busy .cc-lgx__phase::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--cc-sun); animation: cc-lg-blink 1s infinite; }
@keyframes cc-lg-blink { 50% { opacity: .2; } }
.cc-lgx__note { margin: 14px 0 0; font-size: 13px; color: var(--cc-muted); }
.cc-lgx__probe { display: grid; gap: 6px; }
.cc-lgx__probe label { font-size: 13px; font-weight: 700; color: var(--cc-muted); }
.cc-lgx__field { display: flex; gap: 12px; align-items: stretch; }
.cc-lgx__field input { flex: 1; min-width: 0; margin: 0; box-sizing: border-box; }
.cc-lgx__field .cc-btn { flex: none; height: 46px; min-height: 46px; margin: 0; padding: 0 26px; box-sizing: border-box; transform: none !important; }
.cc-lgx__res { margin: 0 0 12px; font-size: 14px; color: var(--cc-ink-2); }
.cc-lgx__res code { font: 600 13px var(--cc-font-mono); color: var(--cc-ink); }
.cc-lgx__probe input { height: 46px; padding: 0 14px; border: 1px solid var(--cc-field); border-radius: var(--cc-r-1); font: 500 15px var(--cc-font-mono); color: var(--cc-ink); background: var(--cc-surface); }
.cc-lgx__probe input:focus { outline: none; border-color: var(--cc-accent); box-shadow: 0 0 0 4px rgba(42, 92, 255, .12); }

.cc-lgx__out { margin-top: 18px; overflow-x: auto; }
.cc-lgx__wait { display: flex; align-items: center; gap: 10px; color: var(--cc-ink-2); font-weight: 600; }
.cc-lgx__wait i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--cc-line-2); border-top-color: var(--cc-accent); animation: cc-lg-spin .8s linear infinite; }
@keyframes cc-lg-spin { to { transform: rotate(360deg); } }
.cc-lgx__stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.cc-lgx__stats div { padding: 12px 14px; border-radius: 12px; background: var(--cc-surface-2); }
.cc-lgx__stats dt { font-size: 12px; color: var(--cc-muted); font-weight: 600; }
.cc-lgx__stats dd { margin: 4px 0 0; font: 800 20px/1 var(--cc-font-num); font-variant-numeric: tabular-nums; }
.cc-lgx__tb, .cc-lgx__log table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.cc-lgx__tb th, .cc-lgx__log th { text-align: left; padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--cc-muted); border-bottom: 1px solid var(--cc-line); white-space: nowrap; }
.cc-lgx__tb td, .cc-lgx__log td { padding: 9px 10px; border-bottom: 1px solid var(--cc-line); vertical-align: top; }
.cc-lgx__tb td:nth-child(n+3) { font-family: var(--cc-font-mono); font-size: 13px; white-space: nowrap; }
.cc-lgx__tb--mtr td:nth-child(2) span { font-family: var(--cc-font-mono); font-size: 13px; }
.cc-lgx__tb--mtr td small { display: block; margin-top: 2px; font-size: 12px; color: var(--cc-muted); }
.cc-lgx__tb tr.is-lossy td:nth-child(3) { color: var(--cc-danger); font-weight: 700; }
.cc-lgx__tb tr.is-loss td:nth-child(3) { color: var(--cc-warn); font-weight: 700; }
.cc-lgx__tb th:nth-child(n+3), .cc-lgx__tb td:nth-child(n+3) { text-align: right; }
.cc-lgx__tb td:nth-child(2) { width: 46%; }
.cc-mast--lg .cc-mast__lead { text-wrap: pretty; word-break: keep-all; }
.cc-lgx__log { grid-column: 2; padding: 4px 4px 0; }
.cc-lgx__log td:first-child { white-space: nowrap; }
.cc-lgx__none td { color: var(--cc-muted); }
.cc-lgx__attrib { margin: 16px 0 0; font-size: 12px; color: var(--cc-muted); }
@media (max-width: 980px) {
  .cc-lgx { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cc-lgx__rail { position: static; }
  .cc-lgx__line ol { grid-template-columns: 1fr 1fr; gap: 6px; }
  .cc-lgx__stop { box-shadow: inset 0 0 0 1px var(--cc-line); }
  .cc-lgx__log { grid-column: 1; }
  .cc-lgid { width: 100%; }
}
@media (max-width: 600px) {
  .cc-lgx__deck { padding: 18px 16px 20px; }
  .cc-lgx__meters { grid-template-columns: 1fr; gap: 10px; }
  .cc-lgx__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cc-lgx__line ol { grid-template-columns: 1fr; }
  .cc-lgx__node { margin-left: 0; width: 100%; justify-content: space-between; }
  .cc-lgx__nodename { width: 100%; line-height: 1.3; }
  .cc-lgx__top .cc-seg { display: flex; width: 100%; }
  .cc-lgx__top .cc-seg button { flex: 1; min-height: 44px; }
  .cc-lgx__wave { height: 160px; }
  .cc-lgx__log table th:nth-child(2), .cc-lgx__log table td:nth-child(2) { display: none; }
}

.cc-lgx__top .cc-seg button[hidden] { display: none !important; }
.cc-lgx__top .cc-seg button { min-height: 34px; }
.cc-lgx__top .cc-seg button:focus { outline: 0; }
.cc-lgx__top .cc-seg button:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 1px; }
.cc-lgx__ip { background: var(--cc-surface-2); box-shadow: inset 0 0 0 1px var(--cc-line-2); }
.cc-lgx__ip code { color: var(--cc-ink); }
.cc-lgx__ip button { border-left-color: var(--cc-line-2); color: var(--cc-accent-ink); font-weight: 700; }
.cc-lgx__ip button:hover { color: var(--cc-dark); background: var(--cc-surface-sel); }
.cc-lgx__buy { margin-left: 6px; }

/* ---------- 公告（列表 = 维护日志；详情 = 档案条 + 正文）。标签色在首页、列表、详情三处一致 ---------- */
.cc-tag--end { background: #eef0f5; color: var(--cc-muted); }
.cc-tag--live { background: var(--cc-sun); color: var(--cc-ink); }
.cc-tag--tag { background: var(--cc-accent-soft); color: var(--cc-accent-ink); }
.cc-tag--plan { background: var(--cc-accent); color: #fff; }
.cc-tag--live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--cc-ink); vertical-align: 1px; animation: cc-pulse 1.6s infinite; }
@keyframes cc-pulse { 50% { opacity: .25; } }
.cc-pg-news #main-body, .cc-pg-news-view #main-body { padding-top: 0; }

.cc-anh { position: relative; overflow: hidden; isolation: isolate; padding: 96px 0 40px; }
.cc-anh__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.cc-anh__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.cc-anh__title { margin: 0; font-size: clamp(34px, 4.2vw, 56px) !important; font-weight: 800; letter-spacing: -.035em; line-height: 1.06; }
.cc-anh__lead { margin: 16px 0 0; max-width: 34em; font-size: 17px; color: var(--cc-ink-2); }
.cc-anh__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 520px; }
.cc-anh__chips button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--cc-line-2); border-radius: 999px; background: var(--cc-surface); color: var(--cc-ink-2); font: 600 13px var(--cc-font); cursor: pointer; transition: all var(--cc-dur); }
.cc-anh__chips button small { font: 600 11px var(--cc-font-num); color: var(--cc-muted); }
.cc-anh__chips button[aria-pressed="true"] { background: var(--cc-dark); border-color: var(--cc-dark); color: #fff; }
.cc-anh__chips button[aria-pressed="true"] small { color: var(--cc-dark-muted); }

.cc-anl { position: relative; padding-top: 24px; }
.cc-anl__m { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 32px; padding: 28px 0; border-top: 1px solid var(--cc-line); }
.cc-anl__m[hidden] { display: none !important; }
.cc-anl__ym { position: sticky; top: 96px; align-self: start; margin: 0; display: flex; flex-direction: column; line-height: 1; }
.cc-anl__ym b { font: 800 44px/1 var(--cc-font-num); letter-spacing: -.04em; color: var(--cc-dark); }
.cc-anl__ym span { margin-top: 6px; font: 600 13px var(--cc-font-mono); color: var(--cc-muted); }
.cc-anl__list { list-style: none; margin: 0; padding: 0; position: relative; }
.cc-anl__list::before { content: ""; position: absolute; left: 27px; top: 8px; bottom: 8px; width: 1px; background: var(--cc-line); }
.cc-anl__i { position: relative; }
.cc-anl__i > a:first-child { display: grid; grid-template-columns: 56px minmax(0, 1fr) 24px; gap: 20px; align-items: start; padding: 16px 16px 16px 0; border-radius: var(--cc-r-2); color: var(--cc-ink); text-decoration: none; transition: background-color var(--cc-dur), padding var(--cc-dur); }
.cc-anl__i > a:first-child:hover { background: var(--cc-surface); box-shadow: var(--cc-shadow-1); padding-left: 0; }
.cc-anl__i time { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; width: 56px; padding: 6px 0; border-radius: 12px; background: var(--cc-bg); }
.cc-anl__i > a:hover time { background: var(--cc-surface); }
.cc-anl__i time b { font: 800 22px/1 var(--cc-font-num); color: var(--cc-dark); }
.cc-anl__i time small { font: 500 11px var(--cc-font-mono); color: var(--cc-muted); }
.cc-anl__i h3 { margin: 4px 0 0; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--cc-dark); }
.cc-anl__i h3 .cc-tag { margin-right: 10px; vertical-align: 2px; }
.cc-anl__i p { margin: 6px 0 0; font-size: 14px; line-height: 1.75; color: var(--cc-muted); }
.cc-anl__go { align-self: center; font-style: normal; color: var(--cc-muted); transition: transform var(--cc-dur), color var(--cc-dur); }
.cc-anl__i > a:hover .cc-anl__go { transform: translateX(4px); color: var(--cc-accent-ink); }
.cc-anl__i[hidden] { display: none !important; }
.cc-anl__edit { position: absolute; right: 52px; top: 18px; font-size: 12px; color: var(--cc-muted); }
.cc-anl__pg { display: flex; gap: 6px; justify-content: center; margin-top: 32px; }
.cc-anl__pg a { min-width: 38px; height: 38px; padding: 0 12px; display: grid; place-items: center; border-radius: 10px; background: var(--cc-surface); box-shadow: var(--cc-shadow-1); color: var(--cc-ink); text-decoration: none; font-weight: 600; }
.cc-anl__pg a.is-on { background: var(--cc-dark); color: #fff; box-shadow: none; }
.cc-anl__pg a.is-off { opacity: .4; pointer-events: none; }
.cc-anl__help { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 48px; padding: 20px; border-top: 1px solid var(--cc-line); color: var(--cc-muted); }
.cc-anl__help b { font-weight: 600; }

.cc-anh--v { padding: 88px 0 48px; border-bottom: 1px solid var(--cc-line); }
.cc-anvh { max-width: var(--cc-wrap); }
.cc-anvh__back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--cc-ink-2); text-decoration: none; }
.cc-anvh__back i { font-style: normal; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cc-surface); box-shadow: var(--cc-shadow-1); transition: transform var(--cc-dur); }
.cc-anvh__back:hover { color: var(--cc-accent-ink); }
.cc-anvh__back:hover i { transform: translateX(-3px); }
.cc-anvh__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; font-size: 14px; color: var(--cc-muted); }
.cc-anvh__meta time { padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--cc-surface) 85%, transparent); backdrop-filter: blur(6px); color: var(--cc-ink-2); font-variant-numeric: tabular-nums; }
.cc-anvh__edit { font-size: 13px; color: var(--cc-muted); text-decoration: underline; text-underline-offset: 3px; }
.cc-anvh__title { margin: 16px 0 0; max-width: 22em; font-size: clamp(30px, 3.6vw, 48px) !important; font-weight: 800; letter-spacing: -.03em; line-height: 1.18; color: var(--cc-dark); text-wrap: balance; }

.cc-anv { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 80px; padding-top: 56px; align-items: start; }
.cc-anv__main { max-width: 760px; }
.cc-anv__body { font-size: 16.5px; }
.cc-anv__body > :first-child { margin-top: 0; }
.cc-anv__body img { max-width: 100%; height: auto; border-radius: 12px; }
.cc-anv__body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.cc-anv__body th, .cc-anv__body td { padding: 10px 12px; border-bottom: 1px solid var(--cc-line); text-align: left; }
.cc-anv__body blockquote { margin: 0 0 16px; padding: 12px 18px; border-left: 3px solid var(--cc-accent); background: var(--cc-surface); border-radius: 0 10px 10px 0; }
.cc-anv__pn { display: grid; grid-template-columns: 1fr 1fr; margin-top: 56px; border-top: 1px solid var(--cc-line); border-bottom: 1px solid var(--cc-line); }
.cc-anv__pn a { display: grid; gap: 6px; padding: 22px 24px 22px 0; color: var(--cc-dark); text-decoration: none; }
.cc-anv__pn a.is-next { grid-column: 2; padding: 22px 0 22px 24px; text-align: right; border-left: 1px solid var(--cc-line); }
.cc-anv__pn small { color: var(--cc-muted); font-size: 12px; font-weight: 600; }
.cc-anv__pn b { font-weight: 700; line-height: 1.5; transition: color var(--cc-dur); }
.cc-anv__pn a:hover b { color: var(--cc-accent-ink); }
.cc-anv__side { position: sticky; top: 96px; display: grid; gap: 28px; }
.cc-anv__side h2 { margin: 0; font-size: 13px !important; font-weight: 700; letter-spacing: .04em; color: var(--cc-muted); }
.cc-anv__tl { list-style: none; margin: -12px 0 0; padding: 0; position: relative; }
.cc-anv__tl::before { content: ""; position: absolute; left: 4px; top: 22px; bottom: 22px; width: 1px; background: var(--cc-line-2); }
.cc-anv__tl a { position: relative; display: grid; gap: 4px; padding: 12px 0 12px 24px; color: var(--cc-ink); text-decoration: none; }
.cc-anv__tl a::before { content: ""; position: absolute; left: 0; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--cc-bg); border: 2px solid var(--cc-line-2); box-sizing: border-box; transition: border-color var(--cc-dur), background-color var(--cc-dur); }
.cc-anv__tl a:hover::before { border-color: var(--cc-accent); background: var(--cc-accent); }
.cc-anv__tl time { font: 500 12px var(--cc-font-num); color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cc-anv__tl b { font-size: 14.5px; font-weight: 600; line-height: 1.55; color: var(--cc-dark); transition: color var(--cc-dur); }
.cc-anv__tl a:hover b { color: var(--cc-accent-ink); }
.cc-anv__tl .cc-tag { margin-right: 8px; vertical-align: 1px; }
.cc-anv__help { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-radius: var(--cc-r-2); background: var(--cc-dark); color: #fff; }
.cc-anv__help b { font-weight: 600; }
.cc-anv__help .cc-arrow { color: var(--cc-sun) !important; } .cc-anv__help .cc-arrow::after { color: var(--cc-sun); }
@media (max-width: 900px) {
  .cc-anh { padding: 64px 0 24px; }
  .cc-anh__in { grid-template-columns: 1fr; gap: 24px; }
  .cc-anh__chips { justify-content: flex-start; }
  .cc-anl__m { grid-template-columns: 1fr; gap: 12px; }
  .cc-anl__ym { position: static; flex-direction: row; align-items: baseline; gap: 10px; }
  .cc-anl__ym b { font-size: 30px; }
  .cc-anl__i > a:first-child { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
  .cc-anl__list::before { left: 23px; }
  .cc-anl__i time { width: 48px; }
  .cc-anl__go { display: none; }
  .cc-anh--v { padding: 56px 0 32px; }
  .cc-anvh__meta { margin-top: 24px; }
  .cc-anv { grid-template-columns: 1fr; gap: 48px; padding-top: 32px; }
  .cc-anv__side { position: static; }
  .cc-anv__pn { grid-template-columns: 1fr; }
  .cc-anv__pn a, .cc-anv__pn a.is-next { grid-column: auto; padding: 18px 0; text-align: left; border-left: 0; }
  .cc-anv__pn a + a { border-top: 1px solid var(--cc-line); }
}
@media (prefers-reduced-motion: reduce) { .cc-tag--live::before { animation: none; } }

/* 首页 LG 演示：终端打字 + 可视化，整块是跳转链接 */
.cc-lg__cta { margin-top: 26px; }
.cc-lg__demo { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--cc-dark); color: #dbe2f7; text-decoration: none; box-shadow: 0 30px 60px -30px rgba(15, 24, 56, .55); transition: transform .3s var(--cc-ease), box-shadow .3s; }
.cc-body .cc-lg__demo:hover, .cc-lg__demo:hover { transform: translateY(-3px); box-shadow: 0 40px 70px -30px rgba(15, 24, 56, .6); color: #dbe2f7; text-decoration: none; }
.cc-lg__out { color: #dbe2f7; }
.cc-lg__bar { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; background: var(--cc-dark-2); }
.cc-lg__bar > i { width: 10px; height: 10px; border-radius: 50%; background: #3a4670; }
.cc-lg__bar > i:first-child { background: var(--cc-sun); }
.cc-lg__bar em { margin-left: 8px; font: 500 12px var(--cc-font-mono); font-style: normal; color: var(--cc-dark-muted); }
.cc-lg__nodes { margin-left: auto; display: flex; gap: 4px; }
.cc-lg__nodes b { padding: 3px 10px; border-radius: 999px; font: 600 12px var(--cc-font); color: var(--cc-dark-muted); transition: all .3s; }
.cc-lg__nodes b.on { background: rgba(255, 255, 255, .1); color: #fff; }
.cc-lg__scr { display: grid; gap: 16px; padding: 22px 24px 8px; min-height: 230px; align-content: start; }
.cc-lg__out { white-space: pre-wrap; font: 500 13.5px/1.8 var(--cc-font-mono); min-height: 3.6em; }
.cc-lg__out .p { color: var(--cc-sun-2); } .cc-lg__out .o { color: var(--cc-dark-muted); }
.cc-lg__viz { height: 110px; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--cc-ease); }
.cc-lg__viz.in { opacity: 1; transform: none; }
.cc-lg__try { padding: 14px 24px 18px; font-weight: 700; font-size: 14px; color: var(--cc-sun-2); }
.cc-lgv { display: flex; height: 100%; }
.cc-lgv--ping { align-items: flex-end; gap: 5px; }
.cc-lgv--ping i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(#5b84ff, #2a5cff); transform-origin: bottom; transform: scaleY(0); animation: cc-lgv-up .5s var(--d) var(--cc-ease) forwards; }
.cc-lgv--mtr { flex-direction: column; gap: 6px; }
.cc-lgv--mtr span { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: center; opacity: 0; animation: cc-lgv-in .4s var(--d) forwards; }
.cc-lgv--mtr b { font: 600 11px var(--cc-font-mono); color: var(--cc-dark-muted); }
.cc-lgv--mtr i { height: 7px; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #2a5cff, #14b8e6); }
.cc-lgv--mtr span:last-child i { background: linear-gradient(90deg, var(--cc-sun), var(--cc-sun-2)); }
.cc-lgv--speed { position: relative; }
.cc-lgv--speed svg { width: 100%; height: 100%; overflow: visible; }
.cc-lgv--speed path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: cc-lgv-draw 1.6s var(--cc-ease) forwards; vector-effect: non-scaling-stroke; }
.cc-lgv--speed .a { stroke: #5b84ff; } .cc-lgv--speed .b { stroke: var(--cc-sun); animation-delay: 1.5s; }
.cc-lgv--speed em { position: absolute; top: 0; font: 700 12px var(--cc-font-mono); font-style: normal; color: #5b84ff; left: 4px; }
.cc-lgv--speed em + em { left: auto; right: 4px; color: var(--cc-sun); }
@keyframes cc-lgv-up { to { transform: scaleY(1); } }
@keyframes cc-lgv-in { to { opacity: 1; } }
@keyframes cc-lgv-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .cc-lgv i, .cc-lgv span, .cc-lgv path { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; } }
@media (max-width: 640px) { .cc-lg__scr { padding: 16px; min-height: 210px; } .cc-lg__out { font-size: 12px; } .cc-lg__bar em { display: none; } }

/* 语言 / 货币切换（全站）：国旗 + 名称按钮，点开是浮层列表 */
.cc-locale { position: relative; margin: 0; }
.cc-locale > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 10px; cursor: pointer; font: 600 13px var(--cc-font); color: var(--cc-ink-2); box-shadow: inset 0 0 0 1px var(--cc-line); background: var(--cc-surface); white-space: nowrap; user-select: none; }
.cc-locale > summary::-webkit-details-marker { display: none; }
.cc-locale > summary::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 2px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .15s; }
.cc-locale[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.cc-locale > summary:hover { color: var(--cc-dark); box-shadow: inset 0 0 0 1px var(--cc-line-2); }
.cc-locale__cur { padding-left: 8px; border-left: 1px solid var(--cc-line); color: var(--cc-muted); }
.cc-locale .iti-flag { position: static; display: inline-block; flex: none; margin: 0; border-radius: 2px; }
.cc-locale__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1100; width: 240px; margin: 0; padding: 12px; border-radius: var(--cc-r-2); background: var(--cc-surface); box-shadow: var(--cc-shadow-2); }
.cc-locale__menu.is-two { width: 560px; }
.cc-locale__cols { display: grid; gap: 12px; }
.is-two .cc-locale__cols { grid-template-columns: minmax(0, 1fr) 150px; }
.cc-locale__col { min-width: 0; margin: 0; padding: 0; border: 0; }
.is-two .cc-locale__col + .cc-locale__col { padding-left: 12px; border-left: 1px solid var(--cc-line); }
.cc-locale__col legend { margin: 0 0 6px; padding: 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-muted); }
.cc-locale__list { display: grid; grid-auto-rows: 36px; gap: 2px; max-height: min(62vh, 500px); overflow-y: auto; overscroll-behavior: contain; }
.is-two .cc-locale__col:first-child .cc-locale__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4px; }
.cc-locale__list label { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin: 0; padding: 0 10px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--cc-ink-2); cursor: pointer; white-space: nowrap; }
.cc-locale__list label:hover { background: var(--cc-surface-2); color: var(--cc-dark); }
.cc-locale__list label.is-on { background: var(--cc-accent-soft); color: var(--cc-accent-ink); box-shadow: inset 0 0 0 1px var(--cc-accent); }
.cc-locale__list .iti-flag { flex: none; }
.cc-locale__list label[lang] { font-weight: 600 !important; }
.cc-body .cc-locale__list input, .cc-locale__list input { position: absolute !important; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cc-locale__list label:has(input:focus-visible) { outline: 2px solid var(--cc-accent); outline-offset: -2px; }
.cc-locale__list b { min-width: 18px; color: var(--cc-muted); font-weight: 700; }
.cc-locale__foot { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cc-line); }
.cc-auth__top .cc-locale > summary, .cc-mnav .cc-locale > summary { background: var(--cc-surface); }
.cc-mnav .cc-locale__menu, .cc-mnav .cc-locale__menu.is-two { position: static; width: auto; box-shadow: 0 0 0 1px var(--cc-line); margin-top: 8px; }
.cc-mnav .cc-locale { flex: 1; }
@media (max-width: 600px) { .is-two .cc-locale__cols { grid-template-columns: 1fr; } .cc-locale__menu.is-two { width: min(560px, calc(100vw - 24px)); } .is-two .cc-locale__col + .cc-locale__col { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--cc-line); } .cc-locale__menu.is-two { width: min(420px, calc(100vw - 32px)); } }

/* 页面提示（includes/cc-notices.tpl）：类型 = 颜色（--nt 主色 / --nt-s 浅底 / --nt-i 实色上的字色），样式 = soft / solid / dark / line。 */
.cc-nt-x { --nt: var(--cc-accent); --nt-s: #eaf0ff; --nt-i: #fff; font-size: 14px; line-height: 1.55; color: var(--cc-ink); }
.cc-nt-x.is-ok { --nt: var(--cc-ok); --nt-s: var(--cc-ok-soft, #e8f4ee); }
.cc-nt-x.is-warn { --nt: var(--cc-warn); --nt-s: var(--cc-warn-soft, #fff1d6); }
.cc-nt-x.is-danger { --nt: var(--cc-danger); --nt-s: var(--cc-danger-soft, #fdeceb); }
.cc-nt-x.is-promo { --nt: var(--cc-sun); --nt-s: #fff4dd; --nt-i: var(--cc-dark); }
.cc-nt-x.is-maint { --nt: var(--cc-dark); --nt-s: #e9edf6; }
.cc-nt-x[hidden] { display: none !important; }

.cc-nt-x__row { display: flex; align-items: center; gap: 12px; }
.cc-nt-x__ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--nt-s); color: var(--nt); }
.cc-nt-x__txt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.cc-nt-x__t { font-weight: 700; color: inherit; }
.cc-nt-x__b { color: inherit; opacity: .88; }
.cc-nt-x__b p { margin: 0 0 6px; } .cc-nt-x__b p:last-child, .cc-nt-x__b ul:last-child, .cc-nt-x__b ol:last-child { margin-bottom: 0; }
.cc-nt-x__b ul, .cc-nt-x__b ol { margin: 4px 0 6px; padding-left: 20px; }
.cc-nt-x__b a, .cc-body .cc-nt-x__b a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.cc-nt-x__cd { display: inline-flex; align-items: baseline; gap: 2px; padding: 1px 8px; border-radius: 6px; background: var(--nt-s); color: var(--nt); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-nt-x__cd i, .cc-nt-x__cd em { font-style: normal; } .cc-nt-x__cd em { margin-right: 6px; } .cc-nt-x__cd em[hidden] { display: none; }
.cc-nt-x__go, .cc-body a.cc-nt-x__go { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--nt); color: var(--nt-i) !important; font-weight: 700; font-size: 13px; text-decoration: none !important; white-space: nowrap; transition: transform .15s, filter .15s; }
.cc-nt-x__go:hover { filter: brightness(1.08); transform: translateX(2px); }
.cc-nt-x__close { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; opacity: .6; font-size: 20px; line-height: 1; cursor: pointer; }
.cc-nt-x__close:hover { opacity: 1; background: rgba(15, 24, 56, .08); }

/* 样式 */
.cc-nt-x.is-soft { background: var(--nt-s); }
.cc-nt-x.is-soft .cc-nt-x__ic { background: #fff; }
.cc-nt-x.is-solid { background: var(--nt); color: var(--nt-i); }
.cc-nt-x.is-solid .cc-nt-x__ic, .cc-nt-x.is-solid .cc-nt-x__cd { background: rgba(255, 255, 255, .18); color: inherit; }
.cc-nt-x.is-solid .cc-nt-x__go, .cc-body .cc-nt-x.is-solid a.cc-nt-x__go { background: #fff; color: var(--cc-dark) !important; }
.cc-nt-x.is-promo.is-solid .cc-nt-x__go, .cc-body .cc-nt-x.is-promo.is-solid a.cc-nt-x__go { background: var(--cc-dark); color: #fff !important; }
.cc-nt-x.is-solid .cc-nt-x__close:hover, .cc-nt-x.is-dark .cc-nt-x__close:hover { background: rgba(255, 255, 255, .14); }
.cc-nt-x.is-dark { background: var(--cc-dark); color: #e6ebf7; }
.cc-nt-x.is-dark .cc-nt-x__ic, .cc-nt-x.is-dark .cc-nt-x__cd { background: rgba(255, 255, 255, .08); color: var(--nt); }
.cc-nt-x.is-maint.is-dark .cc-nt-x__ic, .cc-nt-x.is-maint.is-dark .cc-nt-x__cd { color: var(--cc-sun); }
.cc-nt-x.is-dark .cc-nt-x__go, .cc-body .cc-nt-x.is-dark a.cc-nt-x__go { background: var(--cc-sun); color: var(--cc-dark) !important; }
.cc-nt-x.is-line { background: var(--cc-surface); box-shadow: inset 3px 0 0 var(--nt); }

/* 顶部横幅（顶栏上方，随页面滚走）/ 底部横条（固定） */
.cc-nt-x--top, .cc-nt-x--bottom { position: relative; z-index: 1031; }
.cc-nt-x--top .cc-nt-x__row, .cc-nt-x--bottom .cc-nt-x__row { min-height: 48px; padding-top: 7px; padding-bottom: 7px; }
.cc-nt-x--top .cc-nt-x__ic, .cc-nt-x--bottom .cc-nt-x__ic { width: 28px; height: 28px; border-radius: 8px; }
.cc-nt-x--top.is-line { box-shadow: inset 0 -1px 0 var(--cc-line), inset 0 3px 0 var(--nt); }
.cc-nt-x--top.is-soft { box-shadow: inset 0 -1px 0 rgba(15, 24, 56, .06); }
.cc-nt-x--top.is-solid .cc-nt-x__row, .cc-nt-x--top.is-dark .cc-nt-x__row { justify-content: center; }
.cc-nt-x--top.is-solid .cc-nt-x__txt, .cc-nt-x--top.is-dark .cc-nt-x__txt { flex: 0 1 auto; }
.cc-m-console .cc-nt-x--top .cc-wrap, .cc-m-auth .cc-nt-x--top .cc-wrap { max-width: none; padding-left: 24px; padding-right: 16px; }
.cc-nt-x--bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1045; box-shadow: 0 -12px 32px -16px rgba(15, 24, 56, .35); animation: cc-nt-up .35s ease both; }
.cc-nt-x--bottom.is-line { box-shadow: 0 -12px 32px -16px rgba(15, 24, 56, .35), inset 0 3px 0 var(--nt); }
.cc-nt-x--bottom .cc-nt-x__row { padding-bottom: calc(7px + env(safe-area-inset-bottom)); }

/* 右下角卡片（多条时由 cc.js 叠放） */
.cc-nt-x--corner { position: fixed; right: 20px; bottom: 20px; z-index: 1046; width: min(400px, calc(100vw - 32px)); padding: 16px 12px 16px 16px; border-radius: 16px; box-shadow: 0 24px 56px -20px rgba(15, 24, 56, .45), 0 0 0 1px rgba(15, 24, 56, .05); animation: cc-nt-in .4s cubic-bezier(.2, .8, .2, 1) both; transition: bottom .25s; }
.cc-nt-x--corner .cc-nt-x__row { align-items: flex-start; flex-wrap: wrap; }
.cc-nt-x--corner .cc-nt-x__txt { display: block; flex-basis: calc(100% - 90px); }
.cc-nt-x--corner .cc-nt-x__t { display: block; margin-bottom: 2px; font-size: 15px; }
.cc-nt-x--corner .cc-nt-x__cd { margin-top: 8px; }
.cc-nt-x--corner .cc-nt-x__go { order: 5; margin-left: 44px; margin-top: 2px; }
.cc-nt-x--corner .cc-nt-x__close { margin: -6px -2px 0 auto; }
.cc-nt-x--corner.is-line { box-shadow: 0 24px 56px -20px rgba(15, 24, 56, .45), 0 0 0 1px var(--cc-line), inset 3px 0 0 var(--nt); }
.cc-body:has(.cc-verify) .cc-nt-x--corner { bottom: 120px; }

/* 会员中心内容卡片 */
.cc-nt-x--panel { margin: 0 0 20px; padding: 14px 12px 14px 16px; border-radius: var(--cc-r-2); }
.cc-nt-x--panel.is-line { box-shadow: var(--cc-shadow-1), inset 3px 0 0 var(--nt); }
.cc-nt-x--panel .cc-nt-x__t { font-size: 15px; }

/* 中心弹窗 / 产品弹窗：上方类型色带 + 大图标 */
.cc-nt-x--modal { width: min(520px, calc(100vw - 32px)); max-height: min(86vh, 720px); padding: 0; border: 0; border-radius: 20px; background: var(--cc-surface); color: var(--cc-ink); box-shadow: 0 40px 90px -30px rgba(15, 24, 56, .55); overflow: auto; }
.cc-nt-x--modal[open] { animation: cc-nt-pop .28s cubic-bezier(.2, .8, .2, 1) both; }
.cc-nt-x--modal::backdrop { background: rgba(15, 24, 56, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cc-nt-x__band { position: relative; height: 96px; display: grid; place-items: center; background: var(--nt-s); overflow: hidden; }
.cc-nt-x__band::before, .cc-nt-x__band::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid var(--nt); opacity: .14; }
.cc-nt-x__band::before { width: 220px; height: 220px; } .cc-nt-x__band::after { width: 340px; height: 340px; }
.cc-nt-x--modal .cc-nt-x__band .cc-nt-x__ic { position: relative; width: 56px; height: 56px; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px -12px rgba(15, 24, 56, .4); }
.cc-nt-x--modal .cc-nt-x__in { padding: 22px 28px 26px; }
.cc-nt-x--modal .cc-nt-x__t { display: block; margin: 0 0 8px; font-size: 20px; line-height: 1.35; letter-spacing: -.01em; color: var(--cc-dark); }
.cc-nt-x--modal .cc-nt-x__b { font-size: 15px; opacity: 1; color: var(--cc-ink-2); }
.cc-nt-x--modal .cc-nt-x__cd { margin-top: 12px; font-size: 16px; padding: 4px 12px; }
.cc-nt-x__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cc-nt-x__acts .cc-btn { min-width: 120px; justify-content: center; }
.cc-nt-x--modal > .cc-nt-x__close { position: absolute; top: 10px; right: 10px; color: var(--cc-dark); }
.cc-nt-x--modal.is-solid .cc-nt-x__band { background: var(--nt); }
.cc-nt-x--modal.is-dark { background: var(--cc-dark); color: #e6ebf7; }
.cc-nt-x--modal.is-dark .cc-nt-x__band { background: rgba(255, 255, 255, .05); }
.cc-nt-x--modal.is-dark .cc-nt-x__band .cc-nt-x__ic { background: rgba(255, 255, 255, .1); box-shadow: none; }
.cc-nt-x--modal.is-dark .cc-nt-x__t { color: #fff; } .cc-nt-x--modal.is-dark .cc-nt-x__b { color: #c4cde3; }
.cc-nt-x--modal.is-dark > .cc-nt-x__close { color: #fff; }
.cc-nt-x--modal.is-dark .cc-btn--line { color: #fff; border-color: rgba(255, 255, 255, .3); background: transparent; }
.cc-nt-x--modal.is-line .cc-nt-x__band { height: 6px; background: var(--nt); }
.cc-nt-x--modal.is-line .cc-nt-x__band > * , .cc-nt-x--modal.is-line .cc-nt-x__band::before, .cc-nt-x--modal.is-line .cc-nt-x__band::after { display: none; }
.cc-nt-x--modal.is-line .cc-nt-x__in { padding-top: 28px; }

@keyframes cc-nt-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cc-nt-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes cc-nt-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cc-nt-x, .cc-nt-x--modal[open] { animation: none !important; } }
@media (max-width: 640px) {
  .cc-nt-x--top .cc-nt-x__row, .cc-nt-x--bottom .cc-nt-x__row { flex-wrap: wrap; align-items: flex-start; }
  .cc-nt-x--top .cc-nt-x__txt, .cc-nt-x--bottom .cc-nt-x__txt { flex-basis: calc(100% - 84px); }
  .cc-nt-x--top .cc-nt-x__go, .cc-nt-x--bottom .cc-nt-x__go { order: 5; margin-left: 40px; }
  .cc-nt-x--top .cc-nt-x__close, .cc-nt-x--bottom .cc-nt-x__close { margin-left: auto; }
  .cc-nt-x--corner { right: 12px; left: 12px; bottom: 12px; width: auto; }
  .cc-nt-x--modal .cc-nt-x__in { padding: 18px 20px 22px; }
  .cc-nt-x__acts .cc-btn { flex: 1; }
}
/* 修正：弹窗不继承卡片的左色条；关闭按钮始终贴右；鼠标打开时不显示焦点环 */
.cc-nt-x--modal.is-line, .cc-nt-x--modal.is-soft { box-shadow: 0 40px 90px -30px rgba(15, 24, 56, .55); background: var(--cc-surface); }
.cc-nt-x--modal :focus:not(:focus-visible) { outline: none; box-shadow: none; }
.cc-nt-x--modal > .cc-nt-x__close { width: 36px; height: 36px; font-size: 22px; opacity: .7; }
.cc-nt-x--top .cc-nt-x__row, .cc-nt-x--bottom .cc-nt-x__row { position: relative; padding-right: 48px; }
.cc-nt-x--top .cc-nt-x__close, .cc-nt-x--bottom .cc-nt-x__close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .cc-nt-x--top .cc-nt-x__ic, .cc-nt-x--bottom .cc-nt-x__ic { display: none; }
  .cc-nt-x--top .cc-nt-x__row, .cc-nt-x--bottom .cc-nt-x__row { flex-wrap: nowrap; align-items: center; gap: 10px; padding-right: 40px; font-size: 13px; }
  .cc-nt-x--top .cc-nt-x__txt, .cc-nt-x--bottom .cc-nt-x__txt { flex: 1 1 auto; flex-basis: auto; }
  .cc-nt-x--top .cc-nt-x__go, .cc-nt-x--bottom .cc-nt-x__go { order: 0; margin-left: 0; padding: 0 12px; }
  .cc-nt-x--top .cc-nt-x__close, .cc-nt-x--bottom .cc-nt-x__close { right: 4px; margin: 0; }
  .cc-nt-x--top .cc-nt-x__b, .cc-nt-x--bottom .cc-nt-x__b { font-size: 12px; }
  .cc-nt-x--corner { padding: 12px 8px 12px 12px; }
  .cc-nt-x--corner .cc-nt-x__ic { width: 28px; height: 28px; }
  .cc-nt-x--corner .cc-nt-x__go { margin-left: 40px; }
}
.cc-nt-x__b, .cc-nt-x__t { word-break: keep-all; overflow-wrap: anywhere; }

/* responsive.css — 断点：1180px（导航收起、双栏变单栏）、640px（手机）。 */
@media (max-width: 1180px) {
  .cc-nav, .cc-top__side > .cc-locale { display: none; }
  .cc-menu-btn { display: inline-grid; align-content: center; gap: 4px; width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--cc-line-2); border-radius: 10px; background: rgba(255, 255, 255, .7); cursor: pointer; }
  .cc-menu-btn i { display: block; height: 1.6px; border-radius: 1px; background: var(--cc-dark); transition: transform .2s, opacity .2s; }
  .cc-menu-btn[aria-expanded="true"] i:nth-child(2) { transform: translateY(5.6px) rotate(45deg); }
  .cc-menu-btn[aria-expanded="true"] i:nth-child(3) { opacity: 0; }
  .cc-menu-btn[aria-expanded="true"] i:nth-child(4) { transform: translateY(-5.6px) rotate(-45deg); }
  .cc-mnav { display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--cc-line); box-shadow: 0 24px 40px -28px rgba(15, 24, 56, .45); animation: cc-mnav-in .18s ease-out; }
  .cc-mnav[hidden] { display: none; }
  .cc-mnav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: rgba(15, 24, 56, .28); }
  html.cc-mnav-open, html.cc-mnav-open body { overflow: hidden; }
  .cc-mnav__in { padding: 8px 0 18px; max-height: calc(100vh - 68px); overflow-y: auto; }
  .cc-mnav__nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .cc-mnav__nav a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-bottom: 1px solid var(--cc-line); text-decoration: none; font-size: 15px; font-weight: 700; color: var(--cc-dark); }
  .cc-mnav__nav a span { color: var(--cc-field); font-size: 18px; font-weight: 500; }
  .cc-mnav__nav a[aria-current="page"] { color: var(--cc-accent-ink); }
  .cc-mnav__opt { display: flex; gap: 10px; padding-top: 14px; }
  @keyframes cc-mnav-in { from { opacity: 0; transform: translateY(-6px); } }
  .cc-layout { grid-template-columns: minmax(0, 1fr); }
  .cc-layout__side { position: static; order: 2; }
  .cc-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-foot__brand { grid-column: 1 / -1; }
  .cc-foot__cta-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .cc-top__in { gap: 12px; height: 60px; }
  .cc-hide-sm { display: none !important; }
  .cc-top__side { gap: 6px; min-width: 0; }
  .cc-account > li > a { max-width: 92px; }
  .cc-top__side { flex: 0 1 auto; }
  .cc-brand { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .cc-account > li > a::after { margin-left: 4px; }
  .cc-body .client-home-cards .card .card-header .btn { margin-left: 0; }
  .cc-mnav__nav { grid-template-columns: 1fr; }
  .cc-menu-btn { width: 34px; height: 34px; padding: 0 9px; }
  .cc-phead__in { padding: 20px 0 22px; }
  .cc-main { padding: 24px 0 64px; }
  .cc-body .card-body { padding: 18px 20px; }
  .cc-body .card-header, .cc-body .card-footer { padding: 14px 20px; }
  .cc-body .modal-body, .cc-body .modal-header, .cc-body .modal-footer { padding-left: 20px; padding-right: 20px; }
  .cc-foot__cta-in { padding: 52px 0; }
  .cc-foot__grid { padding-top: 44px; gap: 28px 20px; }
  .cc-foot__base { flex-direction: column; }
  .cc-partners { padding: 72px 0; }
  .cc-partners h2 { margin-bottom: 36px; }
  .cc-wall__i { padding: 0 24px; }
  .cc-body .table th, .cc-body .table td { padding: 10px 12px; }
}
/* 宽屏但顶栏放不下（cc.js 检测后加 html.cc-nav-tight）：与 ≤1180px 相同的菜单按钮模式 */
html.cc-nav-tight .cc-nav, html.cc-nav-tight .cc-top__side > .cc-locale { display: none; }
html.cc-nav-tight .cc-menu-btn { display: inline-grid; align-content: center; gap: 4px; width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--cc-line-2); border-radius: 10px; background: rgba(255, 255, 255, .7); cursor: pointer; }
html.cc-nav-tight .cc-menu-btn i { display: block; height: 1.6px; border-radius: 1px; background: var(--cc-dark); transition: transform .2s, opacity .2s; }
html.cc-nav-tight .cc-menu-btn[aria-expanded="true"] i:nth-child(2) { transform: translateY(5.6px) rotate(45deg); }
html.cc-nav-tight .cc-menu-btn[aria-expanded="true"] i:nth-child(3) { opacity: 0; }
html.cc-nav-tight .cc-menu-btn[aria-expanded="true"] i:nth-child(4) { transform: translateY(-5.6px) rotate(-45deg); }
html.cc-nav-tight .cc-mnav { display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--cc-line); box-shadow: 0 24px 40px -28px rgba(15, 24, 56, .45); animation: cc-mnav-in .18s ease-out; }
html.cc-nav-tight .cc-mnav[hidden] { display: none; }
html.cc-nav-tight .cc-mnav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: rgba(15, 24, 56, .28); }
html.cc-nav-tight.cc-mnav-open, html.cc-nav-tight.cc-mnav-open body { overflow: hidden; }
html.cc-nav-tight .cc-mnav__in { padding: 8px 0 18px; max-height: calc(100vh - 68px); overflow-y: auto; }
html.cc-nav-tight .cc-mnav__nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
html.cc-nav-tight .cc-mnav__nav a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-bottom: 1px solid var(--cc-line); text-decoration: none; font-size: 15px; font-weight: 700; color: var(--cc-dark); }
html.cc-nav-tight .cc-mnav__nav a span { color: var(--cc-field); font-size: 18px; font-weight: 500; }
html.cc-nav-tight .cc-mnav__nav a[aria-current="page"] { color: var(--cc-accent-ink); }
html.cc-nav-tight .cc-mnav__opt { display: flex; gap: 10px; padding-top: 14px; }

@media (max-width: 420px) {
  .cc-account > li > a { max-width: 72px; }
  .cc-top__side .cc-icon-btn { width: 34px; }
}

/* 首页线路选择：会员中心的分段条在窄屏是横向滚动，首页这里改为换行，避免“Los Angeles LAX”被裁掉 */
@media (max-width: 640px) {
  .cc-picker .cc-seg { width: auto; max-width: 100%; flex-wrap: nowrap; overflow: hidden; }
  .cc-picker .cc-seg button { flex: 0 1 auto; min-width: 0; padding: 0 10px; }
  .cc-picker .cc-seg button .cc-seg__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cc-picker .cc-seg--region button small { display: none; }
}

/* 套餐表周期切换（云服务器页 / 首页）：窄屏换行，不裁切 */
@media (max-width: 640px) {
  .cc-pb__bar { flex-wrap: wrap; row-gap: 10px; }
  .cc-pb__bar .cc-seg { max-width: 100%; flex-wrap: wrap; }
}