/* ============================================================
   手机端 APP 化外观层  mobile-app-v2.css   （v2 · 对齐参考图）
   ------------------------------------------------------------
   设计目标（对照三张参考图）：
     · 首页   —— 深空银河 Hero + 云端产品大卡 + 合作方横滑 + 热门套餐白卡 + 深色服务器状态
     · 登录   —— 深空银河背景 + 居中白字品牌 + 白色大圆角表单卡（与首页同一套气质）
     · 控制台 —— 浅色底 + 白色圆角信息卡 + 操作宫格 + 实时状态 + 连接信息
     · 其余页 —— 统一浅灰底 / 白卡 / 大圆角 / 底部 Tab，观感与 APP 一致

   ⚠️ 铁律：本文件**只做展示层**，不改任何模板结构、不复制业务逻辑、不接管任何请求。
      全站功能（下单/支付/续费/工单/实名/域名/Docker…）仍然走电脑端同一套模板与控制器，
      手机端只是换了一层皮 —— 这是「UI 不同但功能完全一致」唯一不会互相打架的做法。

   ⚠️ 全部规则包在 max-width:900px 内，桌面端一个像素都不受影响。
   ⚠️ 页面内联 <style> 可能在本文件之后加载（如 panel.html），因此关键规则一律带 !important。
   ⚠️ 前台四个外壳（index/header.html、user/header.html、index/index.html、404）的
      viewport 已从 initial-scale=0.6 改为 1.0：0.6 时布局宽 650px、整体缩到 60%，
      所有 px 都变成"缩小的电脑网页"手感 —— 这是手机端"不像 APP"的根因，别再改回去。
   ⚠️ 两类"压不住"的选择器（踩过坑）：
      · theme_head 输出的 `html:not(.site-light) body X{...!important}` 是 2 类 1 元素，
        裸 `body.nk-home X` 压不住 → 顶栏会留一条实心深色带、区块标题变深字压深底。
        解法：本文件里带同样 html 前缀，靠更高类数取胜。
      · inline-extra.css 里产品卡是 `#optional-suffixes .suffix-item.active .suffix-card`
        （id 级）→ 手机端覆盖必须同样带 `.active` 与 `:not(.active)` 两种前缀。
   ============================================================ */

@media screen and (max-width: 900px) {

  /* ================= 设计变量 ================= */
  :root {
    --ma-primary: #2b6de8;
    --ma-primary-2: #4a86f7;
    --ma-bg: #f5f7fa;
    --ma-card: #ffffff;
    --ma-line: #eef1f5;
    --ma-text: #1f2733;
    --ma-text-2: #6b7686;
    --ma-text-3: #9aa4b2;
    --ma-radius: 16px;
    --ma-shadow: 0 6px 20px rgba(15, 23, 42, .06);
    --ma-dark: #0a1120;
    --ma-pink: #ec4899;
    --ma-purple: #a855f7;
  }

  /* ================= 全局底色与排版 ================= */
  html, body { background: var(--ma-bg) !important; }
  body { color: var(--ma-text); -webkit-text-size-adjust: 100%; }

  .page-content { padding-left: 12px !important; padding-right: 12px !important; }
  .page-content > .container,
  .page-content .container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }

  /* 通用卡片化：玻璃卡 → 白卡圆角
     ⚠️ 前台有两套外框：首页/公共页是 .page-content，用户中心是 main#main-container > .content，
        两套都要覆盖，否则「用户中心还是旧样子」。 */
  .page-content .glass-card,
  .page-content .content-card,
  .page-content .panel,
  .page-content .card,
  #main-container .glass-card,
  #main-container .content-card,
  #main-container .panel,
  #main-container .card {
    border-radius: var(--ma-radius) !important;
    box-shadow: var(--ma-shadow) !important;
    border: 1px solid var(--ma-line) !important;
    background: var(--ma-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 表格：一律横向滚动，宁可滑也不要挤压到看不清 */
  .page-content .table-responsive,
  .page-content .table-wrap,
  #main-container .table-responsive,
  #main-container .table-wrap { -webkit-overflow-scrolling: touch; overflow-x: auto !important; }
  .page-content table, #main-container table { font-size: 12.5px !important; }
  .page-content th, .page-content td,
  #main-container th, #main-container td { padding: 9px 8px !important; white-space: nowrap; }

  /* 表单控件统一成 APP 手感 */
  .page-content .form-control,
  .page-content input[type="text"],
  .page-content input[type="password"],
  .page-content input[type="email"],
  .page-content input[type="number"],
  .page-content select,
  .page-content textarea,
  #main-container .form-control,
  #main-container input[type="text"],
  #main-container input[type="password"],
  #main-container input[type="email"],
  #main-container input[type="number"],
  #main-container select,
  #main-container textarea {
    border-radius: 12px !important;
    border: 1px solid #e3e8ef !important;
    background: #fbfcfe !important;
    font-size: 14px !important;
    min-height: 44px;
  }

  .page-content .btn,
  .page-content .btn-primary,
  #main-container .btn,
  #main-container .btn-primary { border-radius: 12px !important; font-weight: 600; }

  /* 顶部导航：默认白底贴边 */
  body:not(.nk-home):not(.glass-login) header.glass-topbar {
    background: rgba(255, 255, 255, .97) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid var(--ma-line) !important;
    box-shadow: 0 1px 10px rgba(15, 23, 42, .05) !important;
    border-radius: 0 !important;
  }
  body:not(.nk-home) header.glass-topbar .logo-text { color: var(--ma-text) !important; }
  body:not(.nk-home) header.glass-topbar a { color: var(--ma-text-2) !important; }

  /* 底部 Tab：内页白底 + 主色高亮
     ⚠️ theme_head 会输出 `html:not(.site-light) body .mobile-tabbar{background:rgba(10,18,38,.96)!important}`，
        优先级比裸类名高，内页会变成「浅色页面 + 深色 Tab」的割裂感。
        这里带同样的 html 前缀（类数更多）才压得住。 */
  html:not(.site-light) body:not(.nk-home):not(.glass-login) .mobile-tabbar,
  html.site-light body:not(.nk-home):not(.glass-login) .mobile-tabbar,
  body:not(.nk-home):not(.glass-login) .mobile-tabbar {
    display: block !important;
    background: rgba(255, 255, 255, .97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid var(--ma-line) !important;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .06) !important;
    border-radius: 0 !important;
  }
  /* 首页底部 Tab 跟深空基调走 */
  html:not(.site-light) body.nk-home .mobile-tabbar,
  html.site-light body.nk-home .mobile-tabbar,
  body.nk-home .mobile-tabbar {
    display: block !important;
    background: rgba(10, 17, 32, .96) !important;
    border-top: 1px solid rgba(148, 163, 184, .14) !important;
    box-shadow: 0 -6px 20px rgba(2, 8, 23, .55) !important;
  }
  body.nk-home .mobile-tabbar-item { color: #7d8ea6 !important; }
  body.nk-home .mobile-tabbar-item.active { color: #7cb0ff !important; }
  /* Tab 是固定定位，正文给它让出高度，避免最后一行永远被压住 */
  body:not(.nk-home) .page-content,
  body:not(.nk-home) #main-container,
  body:not(.nk-home) #main-container .content { padding-bottom: 74px !important; }
  /* 桌面页脚在 ≤768px 已被隐藏，只剩看板娘（.footer-neko-wrap）孤零零挂在一块白板上。
     手机端统一收起，页面以底部 Tab 收尾。 */
  .footer-neko-wrap { display: none !important; }
  .mobile-tabbar-list { height: 58px; }
  .mobile-tabbar-item { color: var(--ma-text-3) !important; font-size: 10.5px; }
  .mobile-tabbar-item i { font-size: 19px; }
  .mobile-tabbar-item.active { color: var(--ma-primary) !important; font-weight: 600; }

  /* ============================================================
     一、首页（深空银河 · 对齐 APP 参考图）
     ------------------------------------------------------------
     参考图关键结构（自上而下）：
       透明顶栏（LOGO + 汉堡） / 银河 Hero（左文右人物 + 两个胶囊按钮）
       → 云端产品（01 大卡 + 02/03 双列小卡）→ 合作方白底 LOGO 横条
       → 热门套餐白卡（左对齐价格 + 规格宫格 + 黑色按钮）→ 实时服务器状态
     ⚠️ 桌面主题给这些卡片定了 min-height:260px / max-width:330px / 居中排版，
        手机端必须逐条压回，否则会出现「卡片被拉高、内容居中、左右留白」的怪样子。
     ============================================================ */
  body.nk-home {
    background: #0a1120 !important;
    /* 参考图背景图顶到屏幕最上方（logo 压在图上），所以不能留 60px 顶栏位 */
    padding-top: 0 !important;
  }
  body.nk-home #app,
  body.nk-home .home-page-ready,
  body.nk-home .page-wrapper,
  body.nk-home .page-content {
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---------- 顶栏：透明悬浮在银河上，只留 LOGO + 汉堡 ----------
     theme_head 里 `html:not(.site-light) body header.glass-topbar` 带 !important，
     优先级比普通选择器高，必须带同样前缀才压得住（否则顶部一条深色实心带）。 */
  html:not(.site-light) body.nk-home header.glass-topbar,
  html.site-light body.nk-home header.glass-topbar,
  body.nk-home header.glass-topbar {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    padding: 8px 0 0 !important;
  }
  body.nk-home header.glass-topbar .container { padding: 0 16px !important; }
  /* 右上角只留一个汉堡菜单，导航项收进抽屉（功能一个不少，只是不占首屏） */
  body.nk-home header.glass-topbar .mobile-header-nav { display: none !important; }
  body.nk-home header.glass-topbar .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border-radius: 11px !important;
    background: rgba(9, 16, 34, .40) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(2, 8, 23, .35) !important;
  }
  body.nk-home header.glass-topbar .logo-text,
  body.nk-home header.glass-topbar a,
  body.nk-home header.glass-topbar span { color: #fff !important; }
  body.nk-home header.glass-topbar .logo-text {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    letter-spacing: .2px;
  }
  body.nk-home header.glass-topbar .logo-icon {
    background: linear-gradient(135deg, #4a9bff, #2b6de8) !important;
    box-shadow: 0 6px 16px rgba(43, 109, 232, .5) !important;
  }

  /* 抽屉菜单（默认 CSS 在 ≤768px 把它 display:none 掉了，这里重新启用） */
  body.nk-home #mobileMenu.mobile-menu { display: none; }
  body.nk-home #mobileMenu.mobile-menu.active {
    display: block !important;
    top: 54px !important;
    background: rgba(3, 8, 20, .55) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  body.nk-home #mobileMenu .mobile-menu-panel {
    background: #0d1729 !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 0 0 20px 20px !important;
    box-shadow: 0 18px 40px rgba(2, 8, 23, .55) !important;
    padding: 10px 14px 16px !important;
    max-height: calc(100vh - 54px) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.nk-home #mobileMenu .mobile-menu-panel > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 12px !important;
    border-radius: 12px !important;
    color: #dbe6f7 !important;
    font-size: 14px !important;
    border-bottom: 0 !important;
  }
  body.nk-home #mobileMenu .mobile-menu-panel > a.active,
  body.nk-home #mobileMenu .mobile-menu-panel > a:active {
    background: rgba(43, 109, 232, .18) !important;
    color: #fff !important;
  }
  body.nk-home #mobileMenu .mobile-menu-panel > a i { width: 18px; text-align: center; color: #7cb0ff !important; }
  body.nk-home #mobileMenu .mobile-auth {
    border-top: 1px solid rgba(148, 163, 184, .16) !important;
    padding-top: 12px !important;
  }
  body.nk-home #mobileMenu .mobile-auth .glass-btn {
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    color: #e6edf7 !important;
  }
  body.nk-home #mobileMenu .mobile-auth .glass-btn-primary {
    background: linear-gradient(135deg, #2b6de8, #4a86f7) !important;
    border: 0 !important;
    color: #fff !important;
  }
  body.nk-home #mobileMenu .mobile-register-link { color: #9db4d0 !important; }

  /* ---------- Hero：银河满铺，文字压左侧，人物留右侧 ---------- */
  body.nk-home #header-holder.main-header {
    min-height: 0 !important;
    height: 420px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #050b18 !important;
    overflow: hidden;
  }
  /* 背景图本身（URL 与 position 由 index.html 内联补充，带 __ROOT__，兼容子目录部署） */
  body.nk-home #header-holder.main-header .bg-animation {
    /* 桌面端这块是 skewY(-8deg) 的斜切色带，套到整张照片上会歪掉、四角露出底色 */
    transform: none !important;
    -webkit-transform: none !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    border-radius: 0 !important;
  }
  /* jpeg 里已经有人物，隐藏额外的立绘，避免「两个人物」 */
  body.nk-home #header-holder.main-header .graphic-show { display: none !important; }
  body.nk-home #header-holder.main-header .home-hero-visual { display: none !important; }

  body.nk-home #header-holder #top-content {
    position: relative;
    z-index: 2;
    padding: 92px 18px 26px !important;
  }
  body.nk-home #header-holder #top-content .container,
  body.nk-home #header-holder #top-content .row { padding: 0 !important; margin: 0 !important; }
  body.nk-home #header-holder #top-content .col-md-6 { width: 100% !important; float: none !important; padding: 0 !important; }
  body.nk-home #main-slider .slide { padding: 0 !important; }
  body.nk-home #main-slider .spacer { display: none !important; }
  /* 参考图 Hero 没有顶部小徽标，隐藏（下单入口仍在两个按钮里） */
  body.nk-home #main-slider .noti-holder { display: none !important; }

  /* 参考图：品牌名一行最大、副标题一行略小 */
  body.nk-home #main-slider .big-title,
  body.nk-home #main-slider .big-title .main-title {
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 !important;
    text-shadow: 0 2px 18px rgba(3, 8, 20, .55);
  }
  body.nk-home #main-slider .big-title {
    font-size: 17px !important;
    line-height: 1.42 !important;
    letter-spacing: .2px;
  }
  body.nk-home #main-slider .big-title .main-title {
    font-size: 32px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.5px;
    display: inline-block;
  }
  body.nk-home #main-slider p.main-title {
    font-size: 11.5px !important;
    line-height: 1.72 !important;
    color: rgba(203, 213, 225, .88) !important;
    margin: 10px 0 0 !important;
    /* 只留两行：参考图正文很短，长段落会压到人物身上 */
    max-width: 66% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 10px rgba(3, 8, 20, .6);
  }
  body.nk-home #main-slider .btn-holder {
    display: flex !important;
    gap: 12px !important;
    margin-top: 20px !important;
    max-width: 252px;
  }
  body.nk-home #main-slider .btn-holder .ybtn {
    flex: 1;
    text-align: center;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }
  body.nk-home #main-slider .btn-holder .ybtn-header-color {
    background: #2b6de8 !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 8px 22px rgba(43, 109, 232, .45) !important;
  }
  body.nk-home #main-slider .btn-holder .ybtn-white {
    background: rgba(15, 23, 42, .22) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .30) !important;
  }

  /* ---------- 云端产品：01 大卡独占一行，02/03 两列小卡 ---------- */
  body.nk-home #optional-suffixes {
    background: #0a1120 !important;
    padding: 18px 14px 8px !important;
    margin: 0 !important;
    position: relative;
    z-index: 3;
  }
  body.nk-home #optional-suffixes .container { padding: 0 !important; max-width: 100% !important; }
  body.nk-home #optional-suffixes .row,
  body.nk-home #optional-suffixes .col-md-12,
  body.nk-home #optional-suffixes .col-sm-6,
  body.nk-home #optional-suffixes .col-md-6 {
    width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important;
  }
  body.nk-home #optional-suffixes .section-heading { text-align: center !important; margin: 0 0 14px !important; }
  body.nk-home #optional-suffixes .section-heading .nk-sec-title,
  body.nk-home #optional-suffixes .section-heading h2 {
    text-align: center !important;
    color: #fff !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: .5px;
    margin: 0 !important;
  }
  body.nk-home #optional-suffixes .section-heading .nk-sec-title span { color: #7cb0ff !important; }
  body.nk-home #optional-suffixes .section-heading .nk-sec-sub,
  body.nk-home #optional-suffixes .section-heading h4 {
    text-align: center !important;
    color: rgba(148, 163, 184, .92) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    margin: 6px 0 0 !important;
  }

  body.nk-home #optional-suffixes .suffix-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    height: auto !important;
  }
  /* 桌面主题给 .suffix-item 设了 display:flex/justify-content:center，卡片会被居中留白 */
  body.nk-home #optional-suffixes .suffix-item {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    grid-column: auto !important;
    justify-self: stretch !important;
  }
  body.nk-home #optional-suffixes .suffix-item:first-child { grid-column: 1 / -1 !important; }

  /* ⚠️ inline-extra.css 里有 `#optional-suffixes .suffix-item.active .suffix-card{min-height:260px!important}`
        这类带 id 的强规则（桌面手风琴用）。这里的每条规则都必须带上 `.active` / `:not(.active)`
        两种前缀抬高优先级，否则卡片仍会被拉成 260px 高、文字仍是桌面字号。 */
  body.nk-home #optional-suffixes .suffix-item .suffix-card,
  body.nk-home #optional-suffixes .suffix-item.active .suffix-card,
  body.nk-home #optional-suffixes .suffix-item:not(.active) .suffix-card {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    width: 100% !important;
    max-width: none !important;
    /* 桌面主题的 min-height:260px 会把小卡拉成一整屏，必须清掉 */
    height: auto !important;
    min-height: 66px !important;
    padding: 12px 14px !important;
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 14px !important;
    overflow: hidden;
    transform: none !important;
    box-shadow: 0 8px 22px rgba(6, 20, 55, .42) !important;
    background-image: linear-gradient(135deg, #2f6fe4 0%, #4a86f7 100%) !important;
    background-size: cover !important;
    background-position: center !important;
  }
  /* 「HOT」角标是桌面端的促销标记，参考图没有 */
  body.nk-home #optional-suffixes .suffix-card::before { content: none !important; display: none !important; }
  body.nk-home #optional-suffixes .suffix-item:first-child .suffix-card,
  body.nk-home #optional-suffixes .suffix-item:first-child.active .suffix-card {
    min-height: 152px !important;
    max-height: none !important;
    padding: 16px !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    overflow: hidden !important;
    background-image: linear-gradient(122deg, #2f6fe4 0%, #3f83f5 52%, #5d9bff 100%) !important;
  }
  /* 大卡右侧立体方块（纯装饰，SVG 相对 CSS 路径，子目录部署同样可用） */
  body.nk-home #optional-suffixes .suffix-item:first-child .suffix-card::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 96px;
    height: 96px;
    background: url(../images/app-cube.svg) center / contain no-repeat;
    opacity: .95;
    pointer-events: none;
  }
  /* 小卡右侧同样放一枚淡化的立体图标，与大卡形成一组（参考图里每张卡都有） */
  body.nk-home #optional-suffixes .suffix-item:not(:first-child) .suffix-card::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: url(../images/app-cube.svg) center / contain no-repeat;
    opacity: .30;
    pointer-events: none;
  }
  body.nk-home #optional-suffixes .suffix-item:not(:first-child) .suffix-name {
    padding-right: 18px !important;
    /* 右侧还要留出立体方块的位置，否则方块会压在标题胶囊上 */
    max-width: calc(100% - 44px) !important;
  }

  /* 流星层（#meteor-bg-canvas，z-index:1）在桌面是氛围，手机端会变成压在标题、卡片上的白色划痕；
     雨珠层（#glass-rain）在首页本来就被区块底色挡住，一并关掉省电。 */
  body.nk-home #meteor-bg-canvas,
  body.nk-home #glass-rain,
  body.nk-home #glass-rain-canvas { display: none !important; }

  body.nk-home #optional-suffixes .suffix-link { display: block; position: relative; z-index: 2; }
  body.nk-home #optional-suffixes .suffix-item .suffix-card .suffix-name,
  body.nk-home #optional-suffixes .suffix-item.active .suffix-card .suffix-name,
  body.nk-home #optional-suffixes .suffix-name {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 4px 11px 4px 4px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .20) !important;
    line-height: 1.3;
    /* 右侧要留出立体方块的位置，否则方块会压在标题胶囊上 */
    max-width: calc(100% - 46px);
    position: relative;
    z-index: 2;
  }
  body.nk-home #optional-suffixes .suffix-item:first-child .suffix-card .suffix-name,
  body.nk-home #optional-suffixes .suffix-item:first-child .suffix-name {
    font-size: 16px !important;
    padding: 5px 14px 5px 5px !important;
    max-width: calc(100% - 110px) !important;
  }
  body.nk-home #optional-suffixes .suffix-item .suffix-card .suffix-dot,
  body.nk-home #optional-suffixes .suffix-item.active .suffix-card .suffix-dot,
  body.nk-home #optional-suffixes .suffix-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .24) !important;
    color: #fff !important;
    font-size: 10.5px !important;
    font-weight: 700;
    flex: 0 0 22px;
  }
  body.nk-home #optional-suffixes .suffix-item:first-child .suffix-dot { width: 26px; height: 26px; flex: 0 0 26px; font-size: 12px !important; }
  /* 小卡只保留标题，与大卡形成主次（功能入口不变，点击仍跳对应页面） */
  body.nk-home #optional-suffixes .suffix-item:not(:first-child) .suffix-card .suffix-desc,
  body.nk-home #optional-suffixes .suffix-item:not(:first-child) .suffix-card .suffix-badges,
  body.nk-home #optional-suffixes .suffix-item:not(:first-child) .suffix-desc,
  body.nk-home #optional-suffixes .suffix-item:not(:first-child) .suffix-badges { display: none !important; }
  body.nk-home #optional-suffixes .suffix-item .suffix-card .suffix-desc,
  body.nk-home #optional-suffixes .suffix-item.active .suffix-card .suffix-desc,
  body.nk-home #optional-suffixes .suffix-desc {
    flex: 0 0 auto !important;
    display: block !important;
    margin: 12px 0 0 !important;
    max-width: 100% !important;
    /* 桌面手风琴给 .active 卡加了 -webkit-line-clamp:2 + max-height:3em，会把说明截成半截 */
    max-height: none !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }
  body.nk-home #optional-suffixes .suffix-item .suffix-card .suffix-acronym,
  body.nk-home #optional-suffixes .suffix-item.active .suffix-card .suffix-acronym,
  body.nk-home #optional-suffixes .suffix-acronym {
    color: #fff !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }
  body.nk-home #optional-suffixes .suffix-acronym .highlight { color: #fff !important; font-weight: 800; }
  /* 参考图大卡只有「一句话卖点 + 绿色提示」，长描述在手机端没位置，直接收起 */
  body.nk-home #optional-suffixes .suffix-meaning { display: none !important; }
  body.nk-home #optional-suffixes .suffix-badges { margin: 12px 0 0 !important; max-height: none !important; }
  body.nk-home #optional-suffixes .suffix-item .suffix-card .suffix-badge,
  body.nk-home #optional-suffixes .suffix-item.active .suffix-card .suffix-badge,
  body.nk-home #optional-suffixes .suffix-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(16, 185, 129, .22) !important;
    color: #bbf7d0 !important;
    font-size: 10.5px !important;
    font-weight: 600;
  }
  body.nk-home #optional-suffixes .suffix-badge i { color: #86efac !important; }

  /* ---------- 合作方 / 购买方 LOGO 墙：白色圆角横条 ---------- */
  body.nk-home #clients-section {
    background: #0a1120 !important;
    padding: 14px 14px 6px !important;
  }
  body.nk-home #clients-section .container { padding: 0 !important; max-width: 100% !important; }
  body.nk-home #clients-section .section-heading {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
  }
  body.nk-home #clients-section .nk-sec-title {
    text-align: left !important;
    color: #fff !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }
  body.nk-home #clients-section .nk-sec-title span { color: #7cb0ff !important; }
  body.nk-home #clients-section .nk-sec-sub { display: none !important; }
  body.nk-home #clients-section .clients-marquee {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 5px 0 !important;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(2, 8, 23, .40) !important;
  }
  body.nk-home #clients-section .clients-row { padding: 7px 0 !important; }
  body.nk-home #clients-section .clients-item {
    width: 84px !important;
    height: 38px !important;
    margin-right: 10px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.nk-home #clients-section .clients-item img { max-height: 22px !important; }

  /* ---------- 热门套餐：白卡 + 左对齐价格 + 规格宫格 + 黑色按钮 ---------- */
  body.nk-home #plans-section {
    background: #0a1120 !important;
    padding: 16px 14px 6px !important;
  }
  body.nk-home #plans-section .container { padding: 0 !important; max-width: 100% !important; }
  body.nk-home #plans-section .section-heading {
    text-align: left !important;
    margin: 0 0 12px !important;
  }
  body.nk-home #plans-section .nk-sec-title {
    text-align: left !important;
    color: #fff !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }
  body.nk-home #plans-section .nk-sec-title span { color: #7cb0ff !important; }
  body.nk-home #plans-section .nk-sec-sub { display: none !important; }
  body.nk-home .nk-plan-grid {
    display: block !important;
    grid-template-columns: none !important;
  }
  body.nk-home .nk-plan-card {
    background: #fff !important;
    border-radius: 18px !important;
    padding: 16px !important;
    margin: 0 0 12px !important;
    border: 0 !important;
    text-align: left !important;
    box-shadow: 0 10px 30px rgba(2, 8, 23, .45) !important;
  }
  body.nk-home .nk-plan-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-align: left !important;
  }
  body.nk-home .nk-plan-price {
    font-size: 27px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: left !important;
    margin: 6px 0 12px !important;
    line-height: 1.1;
  }
  body.nk-home .nk-plan-price small { font-size: 12px !important; font-weight: 600; color: #64748b !important; }
  body.nk-home .nk-plan-price--free { font-size: 19px !important; }
  body.nk-home .nk-plan-price--free small { display: block; font-size: 11px !important; margin-top: 4px; }
  body.nk-home .nk-plan-specs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  body.nk-home .nk-plan-specs li {
    display: flex !important;
    align-items: center;
    gap: 4px;
    font-size: 10.5px !important;
    color: #6b7686 !important;
    background: #f6f8fc !important;
    border: 0 !important;
    border-radius: 9px !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    overflow: hidden;
  }
  body.nk-home .nk-plan-specs li i { color: #94a3b8 !important; font-size: 9px; flex: 0 0 auto; }
  body.nk-home .nk-plan-specs li span {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.nk-home .nk-plan-specs li b {
    color: #1f2733 !important;
    font-weight: 700;
    margin-left: auto;
    flex: 0 0 auto;
    max-width: 56%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.nk-home .nk-plan-desc { display: none !important; }
  body.nk-home .nk-plan-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100% !important;
    height: 44px !important;
    line-height: 1 !important;
    border-radius: 12px !important;
    background: #0f172a !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    margin-top: 12px !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* ---------- 实时服务器状态（深色，延续首页基调） ---------- */
  body.nk-home section.serverstatus {
    background: #0a1120 !important;
    padding: 16px 14px 10px !important;
    /* 深色区内的子元素大量使用 --glass-* 变量，这里整体切成浅色，子类无需逐个覆盖 */
    --glass-text: #e6edf7;
    --glass-text-secondary: #93a3b8;
    --glass-text-muted: #6b7c93;
    --glass-border-subtle: rgba(148, 163, 184, .16);
    --glass-bg-subtle: rgba(255, 255, 255, .06);
    --glass-bg-light: rgba(255, 255, 255, .10);
    --glass-primary: #7cb0ff;
  }
  body.nk-home section.serverstatus .container { padding: 0 !important; max-width: 100% !important; }
  body.nk-home section.serverstatus .section-header {
    text-align: left !important;
    margin: 0 0 12px !important;
  }
  body.nk-home section.serverstatus .nk-sec-title {
    text-align: left !important;
    color: #fff !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }
  body.nk-home section.serverstatus .nk-sec-title span { color: #7cb0ff !important; }
  body.nk-home section.serverstatus .nk-sec-sub { display: none !important; }

  body.nk-home .ss-summary {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.nk-home .ss-sum-item {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 12px !important;
    padding: 10px 5px !important;
    text-align: center !important;
  }
  body.nk-home .ss-sum-val { color: #fff !important; font-size: 15px !important; font-weight: 700 !important; }
  body.nk-home .ss-sum-label { color: #94a3b8 !important; font-size: 9.5px !important; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.nk-home .ss-sum-action {
    grid-column: 1 / -1;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px !important;
    background: rgba(255, 255, 255, .04) !important;
  }
  body.nk-home .ss-updated { color: #94a3b8 !important; font-size: 11px; }
  body.nk-home .ss-refresh-btn {
    background: rgba(43, 109, 232, .22) !important;
    color: #bfdbfe !important;
    border: 1px solid rgba(147, 197, 253, .30) !important;
    border-radius: 999px !important;
    padding: 6px 13px !important;
    font-size: 11.5px !important;
  }
  /* 服务器明细卡：手机端单列。双列时每张只剩 170px，
     CPU/内存/负载三栏加网络、内存、磁盘明细会挤成一团，宁可上下铺开。 */
  body.nk-home .ss-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body.nk-home .ss-card {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 14px !important;
    color: #e2e8f0 !important;
    padding: 13px !important;
    gap: 8px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.nk-home .ss-card-name { font-size: 13.5px !important; gap: 6px !important; color: #e6edf7 !important; }
  body.nk-home .ss-dot { width: 8px !important; height: 8px !important; flex: 0 0 8px !important; }
  body.nk-home .ss-card-sub { font-size: 10.5px !important; margin-top: 3px !important; }
  body.nk-home .ss-card-tag { font-size: 10px !important; padding: 2px 8px !important; }
  body.nk-home .ss-ring-row { gap: 8px !important; margin-bottom: 8px !important; }
  body.nk-home .ss-ring .v { font-size: 16px !important; }
  body.nk-home .ss-ring .lbl { font-size: 10px !important; margin: 2px 0 5px !important; }
  body.nk-home .ss-kv { font-size: 11px !important; }
  body.nk-home .ss-sec-title { font-size: 10.5px !important; margin: 10px 0 4px !important; }
  body.nk-home .ss-spark { height: 30px !important; }
  body.nk-home .ss-bar { height: 4px !important; }
  body.nk-home .ss-empty { padding: 26px 0 !important; font-size: 12.5px !important; }

  /* ---------- 数据中心 / 公告 / 统计：回到浅色，形成「深色 Hero → 浅色内容」的节奏 ---------- */
  body.nk-home .nk-dc,
  body.nk-home .nk-highlights {
    background: var(--ma-bg) !important;
    padding: 20px 14px !important;
  }
  body.nk-home .nk-ann { background: var(--ma-bg) !important; padding: 20px 14px !important; }
  body.nk-home .nk-dc .nk-sec-title,
  body.nk-home .nk-ann .nk-sec-title,
  body.nk-home .nk-highlights .nk-sec-title {
    text-align: center !important;
    color: var(--ma-text) !important;
    font-size: 17px !important;
  }
  body.nk-home .nk-dc .nk-sec-title span,
  body.nk-home .nk-ann .nk-sec-title span,
  body.nk-home .nk-highlights .nk-sec-title span { color: var(--ma-primary) !important; }
  body.nk-home .nk-dc .nk-sec-sub,
  body.nk-home .nk-ann .nk-sec-sub,
  body.nk-home .nk-highlights .nk-sec-sub { display: block !important; color: var(--ma-text-2) !important; font-size: 11.5px !important; }

  body.nk-home .nk-dc-grid,
  body.nk-home .nk-stat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  body.nk-home .nk-dc-item,
  body.nk-home .nk-ann-item,
  body.nk-home .nk-stat {
    background: #fff !important;
    border: 1px solid var(--ma-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--ma-shadow) !important;
    padding: 12px !important;
  }
  body.nk-home .nk-dc-item h4,
  body.nk-home .nk-ann-title { color: var(--ma-text) !important; font-size: 13px !important; }
  body.nk-home .nk-dc-item p,
  body.nk-home .nk-ann-date { color: var(--ma-text-2) !important; font-size: 11px !important; }
  body.nk-home .nk-ann-list { gap: 8px !important; }
  body.nk-home .nk-stat-num { font-size: 25px !important; }

  /* 页脚：压缩为紧凑两列，链接全部保留（隐藏任何链接都会变成「功能缺失」） */
  body.nk-home .glass-footer { padding: 20px 14px 80px !important; background: #0a1120 !important; }
  body.nk-home .glass-footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  body.nk-home .glass-footer .footer-brand { grid-column: 1 / -1; }
  body.nk-home .glass-footer .footer-brand p { font-size: 11px !important; line-height: 1.7 !important; color: #94a3b8 !important; }
  body.nk-home .glass-footer .footer-col h4 { font-size: 12px !important; color: #e2e8f0 !important; margin-bottom: 6px !important; }
  body.nk-home .glass-footer .footer-col li,
  body.nk-home .glass-footer .footer-col a { font-size: 11px !important; line-height: 1.9 !important; color: #94a3b8 !important; }
  body.nk-home .glass-footer .footer-bottom { border: 0 !important; padding: 12px 0 0 !important; text-align: center; font-size: 11px; }

  /* 桌面主题给区块标题加了 50×2 的蓝色下划线（.nk-sec-title::after），参考图没有 */
  body.nk-home .nk-sec-title::after,
  body.nk-home .section-heading::after,
  body.nk-home .section-header::after { display: none !important; content: none !important; }

  /* ---------- 深色站点主题下的补色 ----------
     theme_head 在深色模式下用 `html:not(.site-light) body .nk-dc{background:#0b1526!important}`
     把数据中心/公告/统计三块强制成暗底（优先级比本文件的裸类名高），
     但标题色是主题里另一条（优先级更低）的规则，结果就是「深字压深底」看不见。
     这里只补颜色，不动布局 —— 深色站点继续走「暗底 + 玻璃卡」，浅色站点走上面的白卡。 */
  html:not(.site-light) body.nk-home .nk-dc .nk-sec-title,
  html:not(.site-light) body.nk-home .nk-ann .nk-sec-title,
  html:not(.site-light) body.nk-home .nk-highlights .nk-sec-title { color: #fff !important; }
  html:not(.site-light) body.nk-home .nk-dc .nk-sec-sub,
  html:not(.site-light) body.nk-home .nk-ann .nk-sec-sub,
  html:not(.site-light) body.nk-home .nk-highlights .nk-sec-sub { color: #93a3b8 !important; }
  /* 统计四宫格没有被 theme_head 覆盖到，单独跟暗玻璃卡统一 */
  html:not(.site-light) body.nk-home .nk-stat {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
  }
  html:not(.site-light) body.nk-home .nk-stat-num { color: #7cb0ff !important; }
  html:not(.site-light) body.nk-home .nk-stat-label { color: #93a3b8 !important; }
  html:not(.site-light) body.nk-home .nk-stat-label small { color: #6b7c93 !important; }

  /* 桌面页脚在手机端被隐藏（≤768px），页面由 CTA 收尾 —— 补足底部留白，
     否则固定定位的底部 Tab 会压住 CTA 的最后一个按钮。 */
  body.nk-home .page-content { padding-bottom: 66px !important; }

  /* 在线客服悬浮球别压住底部 Tab */
  .neko-cs-trigger, .neko-cs-fab, body.nk-home .home-fab-pill { bottom: 78px !important; }

  /* ============================================================
     二、登录 / 注册（浅粉紫插画头图 + 白色胶囊表单卡）
     ------------------------------------------------------------
     参考稿：顶部浅粉紫渐变 + 右侧白发少女插画，中间一块白色大圆角卡；
     卡内是胶囊输入框、粉紫渐变主按钮、底部第三方登录胶囊。
     两个模板（login / register）共用 body.glass-login，样式只写一份。
     ⚠️ 背景图走 --ma-login-bg 变量（模板里用 __ROOT__ 拼好），CSS 里不写死路径。
     ============================================================ */

  /* 顶栏：透明压在插画上，只留品牌名（粉色），导航与登录/注册入口收掉
     ⚠️ theme_head 深色模式会给顶栏刷 rgba(10,18,38,.94)（`html:not(.site-light) body header.glass-topbar`），
        优先级比裸 body.glass-login 高，必须带同样前缀，否则登录页顶部留一条实心深色带。 */
  html:not(.site-light) body.glass-login header.glass-topbar,
  html.site-light body.glass-login header.glass-topbar,
  body.glass-login header.glass-topbar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 16px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.glass-login header.glass-topbar .mobile-header-nav { display: none !important; }
  body.glass-login header.glass-topbar .menu-toggle { display: none !important; }
  /* v1.3.108：顶部要有 LOGO —— 不再隐藏 .logo-icon，改成「图标 + 站名」正常并排。
     顶栏本身也从「绝对定位透明」改回实心毛玻璃：登录页现在铺首页同款背景图，
     纯透明顶栏会让人物图直接顶到状态栏下面、LOGO 也没有承载面。 */
  body.glass-login header.glass-topbar .logo-icon {
    display: flex !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    overflow: hidden;
  }
  body.glass-login header.glass-topbar .logo-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    border-radius: 10px;
  }
  body.glass-login header.glass-topbar .logo {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
  }
  body.glass-login header.glass-topbar .logo-text {
    color: #ee2f7b !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -.2px;
  }

  /* 全屏认证页：底栏由 mobile-dock.css 统一接管（v1.3.108 起登录页也有底部功能栏） */
  body.glass-login { background: #edf3ff !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  html:not(.site-light) body.glass-login .page-content,
  html.site-light body.glass-login .page-content,
  body.glass-login .page-content {
    padding: 0 !important;
    background: transparent !important;
  }
  body.glass-login .auth-orb { display: none !important; }

  /* 整页底色：粉 → 紫 → 蓝渐变兜底。真正的背景图由 .auth-page::before 整页铺
     （v1.3.108：改成跟首页同一张可后台切换的背景图） */
  html:not(.site-light) body.glass-login .auth-page,
  html.site-light body.glass-login .auth-page,
  body.glass-login .auth-page {
    position: relative !important;
    display: block !important;
    padding: 0 !important;
    min-height: 100vh !important;
    overflow: visible !important;
    background: linear-gradient(180deg,
      #fbe2f0 0%,
      #f8e7f7 16%,
      #efe7fb 44%,
      #e6eafd 72%,
      #edf3ff 100%) !important;
  }
  /* 背景图：只铺「顶部一段 + 底部渐隐」，不要整页 cover。
     ⚠️ v1.3.110 关键修复：这类认证页在手机上高度有 1600px+（表单很长），
        整页 `::before` 用 `background-size:cover` 时是**高度优先**放大 ——
        390 宽铺到 1658 高，一张 720×1080 的人物插画会被放大到宽 1105px，
        横向裁掉 65%，居中偏右的人物直接被切没（线上「背景人物不见了」就是这个）。
        改成只铺顶部 min(86vh,680px)：cover 的缩放只放大到宽 ~454，人物基本完整。
        底部用 mask 渐隐到底色，避免「上半张图 + 下半块纯色」的硬边。 */
  body.glass-login .auth-page::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    height: min(80vh, 640px);
    background:
      /* 横向白纱：左浓右透 —— 标题/副标都在左 58~68% 区域，人物在右侧。
         不加这层时副标最后几个字会直接压在人物脸颊上，读起来很脏。 */
      linear-gradient(105deg,
        rgba(255, 255, 255, .80) 0%,
        rgba(255, 255, 255, .60) 34%,
        rgba(255, 255, 255, .18) 62%,
        rgba(255, 255, 255, 0) 80%),
      /* 纵向白纱：顶部提亮、底部收进页面底色 */
      linear-gradient(180deg,
        rgba(255, 255, 255, .10) 0%,
        rgba(255, 255, 255, .04) 40%,
        rgba(252, 248, 255, .34) 68%,
        rgba(240, 243, 255, .86) 90%,
        #edf3ff 100%),
      var(--ma-login-bg, none) var(--ma-login-pos, center top) / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
    pointer-events: none;
    z-index: 0;
  }

  body.glass-login .auth-container {
    position: relative;
    z-index: 1;
    box-sizing: border-box !important;   /* v1.3.108：见 .auth-form-wrap 的说明 */
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 76px 20px 22px !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    grid-template-columns: none !important;
  }

  /* 品牌区：左对齐，右侧让人物露出来（参考稿左文右图） */
  body.glass-login .auth-brand {
    display: block !important;
    position: relative;
    text-align: left !important;
    padding: 0 4px 90px !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  html:not(.site-light) body.glass-login .auth-brand h2,
  html.site-light body.glass-login .auth-brand h2,
  body.glass-login .auth-brand h2 {
    width: auto !important;
    max-width: 58% !important;
    font-size: 28px !important;
    line-height: 1.30 !important;
    font-weight: 800 !important;
    margin: 0 !important;
    letter-spacing: .5px;
    color: #3b2b7d !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: 0 1px 8px rgba(255, 255, 255, .65);
  }
  body.glass-login .auth-brand h2 .auth-hl {
    display: block !important;
    color: #ee2f7b !important;
    -webkit-text-fill-color: #ee2f7b !important;
  }
  html:not(.site-light) body.glass-login .auth-brand p,
  html.site-light body.glass-login .auth-brand p,
  body.glass-login .auth-brand p {
    width: auto !important;
    max-width: 58% !important;
    font-size: 12px !important;
    line-height: 1.8 !important;
    color: #3b3358 !important;
    margin: 11px 0 0 !important;
    text-wrap: balance;
    text-shadow: 0 0 8px rgba(255, 255, 255, .92);
  }
  /* 副标下方的粉色短横线 */
  body.glass-login .auth-brand p::after {
    content: "";
    display: block;
    width: 46px;
    height: 4px;
    margin-top: 15px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ee2f7b, #f77bb0);
  }
  /* 背景图里已经有人物，模板自带的插画全部收起（两个人就是「怪」的来源） */
  body.glass-login .auth-brand-visual,
  body.glass-login .auth-illustration { display: none !important; }

  /* 注册页的特性标签：小胶囊，压在副标下面 */
  body.glass-login .auth-features {
    display: flex !important;
    flex-wrap: wrap;
    gap: 7px !important;
    margin-top: 14px !important;
    max-width: 88% !important;
  }
  body.glass-login .auth-features .auth-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .72) !important;
    border: 1px solid rgba(238, 47, 123, .16) !important;
    color: #7b6f95 !important;
    font-size: 11.5px !important;
    font-weight: 600;
    line-height: 1.5;
  }
  body.glass-login .auth-features .auth-tag i { color: #ee2f7b !important; font-size: 10px; }

  /* 表单卡：白色大圆角
     ⚠️ v1.3.108 修横向溢出：本主题没有全局 box-sizing:border-box，
        `.auth-form-wrap` 的 width:100% + padding 24/22 会算出 434px（父内容区只有 390），
        `.auth-container` 的 padding 20 同理再撑 40px。移动端浏览器遇到横向溢出会把
        layout viewport 放宽（innerWidth 390 → 470），连带把 position:fixed 的底栏
        顶到文档最底部（肉眼就是「底栏不见了」）。必须显式改回 border-box。 */
  html:not(.site-light) body.glass-login .auth-form-wrap,
  html.site-light body.glass-login .auth-form-wrap,
  body.glass-login .auth-form-wrap {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 460px;
    margin: 0 auto !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 26px !important;
    padding: 24px 22px 26px !important;
    box-shadow: 0 18px 46px rgba(138, 106, 178, .17) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.glass-login .auth-form {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 登录方式 Tab：粉色激活 + 短横线 */
  body.glass-login .auth-tabs {
    display: flex !important;
    gap: 32px !important;
    justify-content: flex-start !important;
    border-bottom: 0 !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
  }
  body.glass-login .auth-tab {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 12px !important;
    font-size: 16px !important;
    font-weight: 600;
    color: #8d87a4 !important;
    position: relative;
    white-space: nowrap;
    flex: 0 0 auto !important;
  }
  body.glass-login .auth-tab.active {
    color: #ee2f7b !important;
    font-weight: 800 !important;
  }
  body.glass-login .auth-tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ee2f7b, #f77bb0);
  }

  body.glass-login .form-group { margin-bottom: 13px !important; }
  /* 注册页白卡里的「新用户注册」是 h3，继承了玻璃主题浅色字，压成深色 */
  body.glass-login .auth-form-wrap h3,
  body.glass-login .auth-form h3 {
    color: #2a2440 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center;
    margin: 2px 0 16px !important;
  }

  /* 输入框：白底胶囊 + 左侧图标
     ⚠️ box-sizing:border-box 必不可少：本主题没有全局重置，div 默认 content-box，
        `width:100% + padding:0 18px` 会横向撑出 36px，右边缘被卡片裁掉一截。
        （button 元素浏览器默认就是 border-box，所以滑块按钮不受影响 —— 这正是
        「输入框右侧被切、按钮却完好」的差异来源。） */
  body.glass-login .input-with-icon {
    position: relative;
    box-sizing: border-box !important;
    display: flex;
    align-items: center;
    background: #ffffff !important;
    border: 1px solid #e8e5f2 !important;
    border-radius: 999px !important;
    padding: 0 18px !important;
    height: 54px;
    box-shadow: 0 4px 14px rgba(150, 120, 190, .07) !important;
  }
  body.glass-login .input-with-icon i {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: block !important;
    color: #9aa1b5 !important;
    font-size: 15px;
    width: 18px;
    text-align: center;
    flex: 0 0 auto;
    margin-right: 2px;
    z-index: auto !important;
  }
  body.glass-login .input-with-icon .form-control {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 52px !important;
    height: 52px !important;
    font-size: 14px !important;
    padding: 0 0 0 12px !important;
    color: #2a2440 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  /* 验证码输入的右侧要给「获取验证码」按钮留位（模板用内联 padding-right） */
  body.glass-login .input-with-icon .form-control[style*="padding-right"] { padding-right: 108px !important; }
  body.glass-login .input-with-icon .form-control::placeholder { color: #a9a4bd !important; }

  /* 滑块验证条：跟输入框同一套白底胶囊，全宽、图标与文字居中
     ⚠️ v1.3.108 修：原来这里还有「滑块让出右侧 96px + .auth-links 用 margin:-82px
        叠到同一行」的写法，导致按钮被压窄、图标绝对定位到 16px 处错位，
        实测就是「一个蓝竖条 + 文字 + 右边一个灰圆」的怪样子。现在完全走正常文档流。 */
  body.glass-login .slide-captcha-btn {
    width: 100% !important;
    height: 50px;
    border-radius: 999px !important;
    border: 1px solid #e8e5f2 !important;
    background: #ffffff !important;
    /* ⚠️ color 不能带 !important：验证成功/失败时模板 JS 用 .css({color:'#10b981'/'#ef4444'})
       写内联样式，!important 会把它压掉，按钮永远是灰字。 */
    color: #6b6482;
    font-size: 13.5px !important;
    font-weight: 500;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px !important;
    box-shadow: 0 4px 14px rgba(150, 120, 190, .07) !important;
    letter-spacing: .2px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  body.glass-login .slide-captcha-btn i {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    /* 同上：不要 !important，否则 JS 写入的行内绿色/红色勾会被压成粉色 */
    color: #ee2f7b;
    font-size: 14px !important;
    line-height: 1 !important;
  }
  body.glass-login .slide-captcha-btn:active {
    border-color: #f7c6dd !important;
    background: #fffafc !important;
  }
  /* 已通过：整条转绿，和「立即登录」的粉紫主按钮区分开 */
  body.glass-login .slide-captcha-btn.is-verified,
  body.glass-login .slide-captcha-btn.is-verified i {
    color: #12a06a !important;
  }
  body.glass-login .slide-captcha-btn.is-verified {
    border-color: #bfe9d6 !important;
    background: #f4fdf9 !important;
    box-shadow: 0 4px 14px rgba(18, 160, 106, .10) !important;
  }
  body.glass-login .slide-captcha-status {
    font-size: 11.5px !important;
    text-align: center;
    line-height: 1.6;
  }
  /* 「忘记密码」回到自己一行、靠右，不再和滑块挤在一起 */
  body.glass-login #form1 .auth-links {
    display: block !important;
    height: auto !important;
    margin: 0 4px 14px !important;
    text-align: right;
    font-size: 12.5px;
  }
  body.glass-login .btn-get-code {
    border-radius: 999px !important;
    border: 1px solid #f7d3e5 !important;
    background: #fff !important;
    color: #ee2f7b !important;
    font-size: 12px !important;
    font-weight: 700;
  }

  /* v1.3.108：原先「滑块让出 96px、auth-links 用 -82px 负边距叠上来」的整段已删除，
     滑块恢复全宽、忘记密码单独一行（见上面的 .auth-links 规则）。 */
  body.glass-login .auth-links a { color: #ee2f7b !important; font-weight: 600; }

  /* 主按钮：粉 → 紫渐变胶囊 */
  body.glass-login .auth-form .btn-primary {
    width: 100% !important;
    height: 54px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: linear-gradient(96deg, #f4479c 0%, #e94fa8 34%, #a855f7 100%) !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px;
    box-shadow: 0 14px 28px rgba(232, 74, 168, .30) !important;
    margin-top: 4px;
  }

  body.glass-login .auth-footer {
    text-align: center;
    font-size: 13px;
    margin: 16px 0 0 !important;
    color: #6b6482 !important;
  }
  body.glass-login .auth-footer a { color: #ee2f7b !important; font-weight: 700; }

  /* 其他登录方式：文字居中 + 两侧细线，两个等宽胶囊 */
  body.glass-login .oauth-login-buttons {
    margin-top: 22px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }
  body.glass-login .oauth-login-buttons > p {
    display: flex !important;
    align-items: center;
    gap: 12px;
    font-size: 12.5px !important;
    color: #a9a4bd !important;
    margin: 0 0 14px !important;
    text-align: center;
  }
  body.glass-login .oauth-login-buttons > p::before,
  body.glass-login .oauth-login-buttons > p::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #eeebf5;
  }
  /* 真实模板这里是 Bootstrap 的 d-flex + gap-3（BS4 没有 gap 工具类），补上间距 */
  body.glass-login .oauth-login-buttons .d-flex,
  body.glass-login .oauth-login-buttons .row {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }
  body.glass-login .oauth-login-buttons .btn {
    min-width: 0 !important;
    flex: 1 1 0;
    max-width: 168px;
    height: 50px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid #eceaf5 !important;
    color: #3a3453 !important;
    font-size: 14px !important;
    font-weight: 600;
    padding: 0 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: 0 4px 14px rgba(150, 120, 190, .07) !important;
  }
  body.glass-login .oauth-login-buttons .btn i { color: #ee2f7b !important; font-size: 16px; }

  /* ============================================================
     三、产品控制台 / 用户中心
     ============================================================ */
  body:not(.nk-home) .console-page { padding: 12px !important; max-width: 100% !important; }
  .console-header { text-align: center; margin-bottom: 10px !important; }
  .console-header h1 { font-size: 20px !important; font-weight: 800 !important; margin: 0 !important; }
  .console-header p { font-size: 11.5px !important; color: var(--ma-text-3) !important; margin: 4px 0 0 !important; }
  .console-grid,
  .console-content { grid-template-columns: 1fr !important; display: block !important; gap: 12px !important; }

  .console-card {
    border-radius: 18px !important;
    border: 1px solid var(--ma-line) !important;
    box-shadow: var(--ma-shadow) !important;
    background: #fff !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .console-card-title { font-size: 14.5px !important; font-weight: 700 !important; margin-bottom: 8px !important; }
  .info-list { display: block !important; }
  /* 参考图：左标签 / 右值，同一行。必须覆盖 panel.html 在 ≤576px 的 column 规则 */
  .info-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0 !important;
    border-bottom: 1px dashed var(--ma-line);
    font-size: 12.5px !important;
  }
  .info-item:last-child { border-bottom: 0; }
  .info-label { color: var(--ma-text-2) !important; flex-shrink: 0; }
  .info-value { color: var(--ma-text) !important; font-weight: 600; text-align: right !important; word-break: break-all; }
  .btn-toggle-pass { font-size: 11.5px !important; }

  /* 操作宫格：两列方块按钮（参考图） */
  .console-actions, .action-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
  }
  .console-actions .action-btn,
  .action-grid .action-btn {
    border-radius: 13px !important;
    background: #f8fafc !important;
    border: 1px solid var(--ma-line) !important;
    min-height: 66px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11.5px !important;
    font-weight: 600;
    color: var(--ma-text) !important;
    padding: 8px 4px !important;
    line-height: 1.3;
  }
  .console-actions .action-btn i,
  .action-grid .action-btn i { font-size: 16px; margin: 0 !important; }
  .console-actions .action-btn.primary,
  .action-grid .action-btn.primary,
  .console-actions .action-btn.action-btn-primary,
  .action-grid .action-btn.action-btn-primary {
    background: linear-gradient(135deg, #2b6de8, #4a86f7) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 8px 20px rgba(43, 109, 232, .30) !important;
  }

  /* 主机实时状态：3 列指标 + 绿色胶囊 */
  .status-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .status-metric {
    background: #f8fafc !important;
    border: 1px solid var(--ma-line) !important;
    border-radius: 12px !important;
    padding: 9px 6px !important;
    gap: 5px !important;
    align-items: center;
  }
  .status-metric-label { font-size: 10px !important; text-transform: none !important; letter-spacing: 0 !important; }
  .status-metric-value { font-size: 13px !important; }
  .status-progress { height: 5px !important; }
  .connection-info-row { gap: 8px !important; }
  .connection-info-tag {
    border-radius: 9px !important;
    background: #f8fafc !important;
    border: 1px solid var(--ma-line) !important;
    font-size: 11.5px !important;
    padding: 8px 10px !important;
  }

  /* ============================================================
     四、通用内页（订单 / 工单 / 实名 / 域名 / 充值…）
     ============================================================ */
  .page-content .content,
  #main-container .content { padding: 12px !important; }

  .page-content .list-group,
  .page-content .list-group-item,
  #main-container .list-group,
  #main-container .list-group-item { border-radius: 14px !important; }
  .page-content .list-group-item,
  #main-container .list-group-item {
    border: 1px solid var(--ma-line) !important;
    margin-bottom: 8px;
    background: #fff !important;
    box-shadow: var(--ma-shadow) !important;
  }

  .page-content .badge,
  .page-content .label,
  .page-content .tag,
  #main-container .badge,
  #main-container .label,
  #main-container .tag { border-radius: 999px !important; font-size: 11px !important; padding: 3px 9px !important; }

  .page-content .pagination,
  #main-container .pagination { justify-content: center; flex-wrap: wrap; gap: 4px; }
  .page-content .pagination a,
  .page-content .pagination span,
  #main-container .pagination a,
  #main-container .pagination span { min-width: 34px; height: 34px; line-height: 32px !important; border-radius: 10px !important; }

  .layui-layer, .glass-modal { max-width: calc(100vw - 24px) !important; border-radius: 18px !important; }

  .page-content .d-none-mobile,
  .page-content .pc-only { display: none !important; }
}

/* 超小屏（iPhone SE / 老安卓）再压一档字号 */
@media screen and (max-width: 360px) {
  body.nk-home #main-slider .big-title { font-size: 24px !important; }
  body.nk-home #main-slider .big-title .main-title { font-size: 33px !important; }
  body.nk-home #main-slider p.main-title { font-size: 11.5px !important; }
  body.nk-home .nk-plan-price { font-size: 25px !important; }
  body.nk-home #optional-suffixes .suffix-item:first-child .suffix-card::after { width: 84px; height: 84px; }
  body.glass-login .auth-brand h2 { font-size: 26px !important; }
}